sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

功能优化

Browse Source
This commit is contained in:
sion123
2025-11-16 19:35:55 +08:00
parent c2bd94cfad
commit bdbe74cebb
53 changed files with 8235 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/app/web-gold/src/components/SidebarNav.vue
View File

@@ -1,9 +1,11 @@
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
// 单色 SVG 图标（填充 currentColor，可继承文本色）
const icons = {
@@ -12,12 +14,14 @@ const icons = {
text: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M4 7h16"/><path d="M4 12h10"/><path d="M4 17h14"/></svg>',
mic: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 19v3"/></svg>',
wave: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M2 12s2-4 5-4 3 8 6 8 3-8 6-8 3 4 3 4"/></svg>',
user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>'
user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>',
video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>',
folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>'
}
const items = computed(() => {
// 小标题（功能） + 模块（子菜单）的形式；使用单色 SVG 图标
return [
const allItems = [
{
title: '功能',
children: [
@@ -28,10 +32,18 @@ const items = computed(() => {
]
},
{
title: '配音',
title: '数字人',
children: [
{ path: '/digital-human/voice-copy', label: '人声克隆', icon: 'mic' },
{ path: '/digital-human/voice-generate', label: '生成配音', icon: 'wave' },
{ path: '/digital-human/video', label: '数字人视频', icon: 'video' },
]
},
{
title: '素材库',
children: [
{ path: '/material/list', label: '素材列表', icon: 'grid' },
{ path: '/material/group', label: '素材分组', icon: 'folder' },
]
},
{
@@ -47,6 +59,13 @@ const items = computed(() => {
// ]
// },
]
// 如果未登录，过滤掉"系统"菜单组
if (!userStore.isLoggedIn) {
return allItems.filter(item => item.title !== '系统')
}
return allItems
})
function go(p) {

63
frontend/app/web-gold/src/components/TopNav.vue
View File

@@ -1,8 +1,10 @@
<script setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import { useUserStore } from '@/stores/user'
import LoginModal from '@/components/LoginModal.vue'
import UserDropdown from '@/components/UserDropdown.vue'
import TestService from '@/api/test'
const styles = {
background: 'var(--color-surface)',
@@ -11,6 +13,34 @@ const styles = {
// const route = useRoute()
const userStore = useUserStore()
const showLogin = ref(false)
const testLoading = ref(false)
// 测试按钮点击事件
const handleTest = async () => {
if (testLoading.value) return
testLoading.value = true
try {
// 调用一键测试接口（升级会员 + 初始化OSS）
const res = await TestService.testAll({
vipLevel: 1,
totalStorage: 10 * 1024 * 1024 * 1024, // 10GB
totalQuota: 10000
})
if (res.code === 0) {
message.success('测试成功！已升级会员并创建OSS目录', 3)
console.log('OSS初始化信息:', res.data)
} else {
message.error(res.msg || '测试失败', 3)
}
} catch (error) {
console.error('测试失败:', error)
message.error(error?.response?.data?.msg || error?.message || '测试失败', 3)
} finally {
testLoading.value = false
}
}
// 计算是否应该显示用户组件
// 判断用户是否有用户名，有用户名说明用户信息已加载完成
@@ -39,6 +69,15 @@ const shouldShowUser = computed(() => {
<!-- 左侧可放 logo 或其他内容 -->
</div>
<div class="flex items-center gap-4 pr-[35px]">
<!-- 测试按钮（仅开发环境显示） -->
<button
v-if="shouldShowUser"
class="btn-test-nav"
:disabled="testLoading"
@click="handleTest"
>
{{ testLoading ? '测试中...' : '测试' }}
</button>
<template v-if="shouldShowUser">
<UserDropdown />
@@ -112,4 +151,28 @@ const shouldShowUser = computed(() => {
box-shadow: var(--glow-primary);
filter: brightness(1.03);
}
.btn-test-nav {
height: 32px;
padding: 0 12px;
border-radius: 8px;
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all .2s ease;
}
.btn-test-nav:hover:not(:disabled) {
background: var(--color-bg);
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn-test-nav:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>

322
frontend/app/web-gold/src/components/material/MaterialUploadModal.vue Normal file
View File

@@ -0,0 +1,322 @@
<template>
<a-modal
:visible="visible"
title="上传素材"
:width="600"
:footer="false"
@cancel="handleCancel"
@update:visible="handleVisibleChange"
>
<div class="upload-modal-content">
<!-- 文件上传区域 -->
<div class="upload-area">
<a-upload-dragger
v-model:file-list="fileList"
name="file"
:multiple="true"
:accept="acceptTypes"
action=""
:before-upload="handleBeforeUpload"
:show-upload-list="false"
@change="handleFileChange"
>
<p class="ant-upload-drag-icon">
<UploadOutlined />
</p>
<p class="ant-upload-text">点击或拖拽文件到此处上传</p>
<p class="ant-upload-hint">
支持多文件上传，单个文件不超过 500MB
<br />
支持格式：视频（MP4、MOV、AVI等）、图片（JPG、PNG、GIF等）、音频（MP3、WAV等）
</p>
</a-upload-dragger>
</div>
<!-- 已选文件列表 -->
<div v-if="fileList.length > 0" class="upload-file-list">
<div class="upload-file-list-title">已选择 {{ fileList.length }} 个文件</div>
<div class="upload-file-items">
<div
v-for="(fileItem, index) in fileList"
:key="fileItem.uid || index"
class="upload-file-item"
>
<FileOutlined class="file-icon" />
<span class="file-name">{{ getFileName(fileItem) }}</span>
<span class="file-size">{{ formatFileSize(getFileSize(fileItem)) }}</span>
<a-button
type="text"
status="danger"
size="small"
@click="handleRemove(fileItem)"
>
删除
</a-button>
</div>
</div>
</div>
<!-- 操作按钮 -->
<div class="upload-actions">
<a-space>
<a-button @click="handleCancel">取消</a-button>
<a-button
type="primary"
:loading="uploading"
:disabled="fileList.length === 0 || !fileCategory"
@click="handleConfirm"
>
{{ uploading ? '上传中...' : `上传 (${fileList.length})` }}
</a-button>
</a-space>
</div>
</div>
</a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { UploadOutlined, FileOutlined } from '@ant-design/icons-vue'
const props = defineProps({
visible: {
type: Boolean,
default: false
},
uploading: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
// 数据
const fileList = ref([])
const fileCategory = ref('video') // 文件分类，默认为视频集
// 支持的文件类型
const acceptTypes = 'video/*,image/*,audio/*,.mp4,.mov,.avi,.mkv,.jpg,.jpeg,.png,.gif,.webp,.mp3,.wav,.aac'
// 监听 visible 变化，重置文件列表和分类
watch(() => props.visible, (newVal) => {
if (!newVal) {
fileList.value = []
fileCategory.value = 'video' // 重置为默认分类
}
})
// 获取文件名
const getFileName = (fileItem) => {
if (fileItem instanceof File) {
return fileItem.name
}
return fileItem.name || fileItem.file?.name || fileItem.originFileObj?.name || '未知文件'
}
// 获取文件大小
const getFileSize = (fileItem) => {
if (fileItem instanceof File) {
return fileItem.size
}
return fileItem.size || fileItem.file?.size || fileItem.originFileObj?.size || 0
}
// 格式化文件大小
const formatFileSize = (bytes) => {
if (!bytes) return '0 B'
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
}
// 上传前处理
const handleBeforeUpload = (file) => {
// 检查文件大小（500MB）
if (file.size > 500 * 1024 * 1024) {
message.warning(`文件 ${file.name} 超过 500MB，已跳过`)
return false
}
// 检查是否已存在相同文件（使用当前的 fileList）
const exists = fileList.value.some(item => {
const itemName = getFileName(item)
const itemSize = getFileSize(item)
return itemName === file.name && itemSize === file.size
})
if (exists) {
message.warning(`文件 ${file.name} 已存在，已跳过`)
return false
}
// 阻止自动上传，文件会通过 change 事件添加到列表
return false
}
// 文件列表变化
const handleFileChange = (info) => {
// 使用 v-model:file-list 后，fileList 会自动更新
// 这里只需要处理文件验证和状态
const { file, fileList: newFileList } = info
if (file && file.status !== 'uploading') {
// 确保文件对象正确保存
fileList.value = newFileList.map(item => {
if (!item.file && item.originFileObj) {
item.file = item.originFileObj
}
return item
}).filter(item => item.status !== 'removed')
}
}
// 移除文件
const handleRemove = (fileItem) => {
const index = fileList.value.findIndex(item =>
(item.uid && item.uid === fileItem.uid) ||
(getFileName(item) === getFileName(fileItem))
)
if (index > -1) {
fileList.value.splice(index, 1)
}
}
// 确认上传
const handleConfirm = () => {
if (fileList.value.length === 0) {
message.warning('请选择文件')
return
}
// 提取文件对象，优先使用 file，其次 originFileObj，最后是 item 本身
const files = fileList.value
.map(item => {
// 优先使用 file 属性
if (item.file instanceof File) {
return item.file
}
// 其次使用 originFileObj
if (item.originFileObj instanceof File) {
return item.originFileObj
}
// 最后尝试 item 本身（如果是 File 对象）
if (item instanceof File) {
return item
}
return null
})
.filter(file => file instanceof File)
if (files.length === 0) {
message.error('无法获取文件对象，请重新选择文件')
return
}
if (!fileCategory.value) {
message.warning('请选择文件分类')
return
}
emit('confirm', files, fileCategory.value)
}
// 处理 visible 变化
const handleVisibleChange = (value) => {
emit('update:visible', value)
}
// 取消
const handleCancel = () => {
emit('update:visible', false)
emit('cancel')
}
</script>
<style scoped>
.upload-modal-content {
padding: 8px 0;
}
.upload-category-select {
margin-bottom: 24px;
}
.upload-label {
margin-bottom: 8px;
font-weight: 500;
color: var(--color-text);
}
.upload-area {
margin-bottom: 24px;
}
.upload-file-list {
margin-bottom: 24px;
padding: 16px;
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
}
.upload-file-list-title {
font-weight: 500;
margin-bottom: 12px;
color: var(--color-text);
}
.upload-file-items {
max-height: 200px;
overflow-y: auto;
}
.upload-file-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 4px;
transition: background 0.2s;
}
.upload-file-item:hover {
background: var(--color-bg-2);
}
.file-icon {
font-size: 20px;
color: var(--color-text-3);
}
.file-name {
flex: 1;
font-size: 14px;
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
font-size: 12px;
color: var(--color-text-3);
}
.upload-actions {
text-align: right;
padding-top: 16px;
border-top: 1px solid var(--color-border);
}
.upload-tips {
font-size: 12px;
line-height: 1.8;
}
.upload-tips > div {
margin-bottom: 4px;
}
</style>