feat: 优化
This commit is contained in:
@@ -1,7 +1,5 @@
|
||||
<script setup>
|
||||
import { RouterView } from 'vue-router'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import SidebarNav from './components/SidebarNav.vue'
|
||||
import TopNav from './components/TopNav.vue'
|
||||
import { theme } from 'ant-design-vue'
|
||||
import SvgSprite from '@/components/icons/SvgSprite.vue'
|
||||
@@ -77,12 +75,8 @@ onMounted(async () => {
|
||||
<SvgSprite />
|
||||
<TopNav />
|
||||
<div class="app-body">
|
||||
<SidebarNav />
|
||||
<div class="app-content">
|
||||
<main class="content-scroll">
|
||||
<keep-alive>
|
||||
<RouterView />
|
||||
</keep-alive>
|
||||
</main>
|
||||
<footer class="py-6 text-xs text-center text-gray-500">
|
||||
v0.1 · API 正常 · © 2025 金牌内容大师
|
||||
@@ -103,8 +97,6 @@ onMounted(async () => {
|
||||
/* 顶部固定，下面主体需要留出空间 */
|
||||
.app-body {
|
||||
padding-top: 70px; /* 与 TopNav 高度对齐 */
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr; /* 左侧固定宽度侧边栏 */
|
||||
}
|
||||
|
||||
.app-content {
|
||||
|
||||
@@ -1,148 +0,0 @@
|
||||
<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 = {
|
||||
home: '<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="M3 10.5 12 3l9 7.5"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/></svg>',
|
||||
grid: '<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="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>',
|
||||
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>',
|
||||
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 图标
|
||||
const allItems = [
|
||||
{
|
||||
title: '功能',
|
||||
children: [
|
||||
// { path: '/home', label: '首页', icon: 'home' },
|
||||
{ path: '/content-style/benchmark', label: '对标分析', icon: 'grid' },
|
||||
{ path: '/content-style/copywriting', label: '文案创作', icon: 'text' },
|
||||
{ path: '/trends/forecast', label: '热点趋势', icon: 'text' },
|
||||
]
|
||||
},
|
||||
{
|
||||
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' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '系统',
|
||||
children: [
|
||||
{ path: '/system/style-settings', label: '风格设置', icon: 'text' },
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: '视频',
|
||||
// children: [
|
||||
// { path: '/digital-human/avatar', label: '生成数字人', icon: 'user' },
|
||||
// ]
|
||||
// },
|
||||
]
|
||||
|
||||
// 如果未登录，过滤掉"系统"菜单组
|
||||
if (!userStore.isLoggedIn) {
|
||||
return allItems.filter(item => item.title !== '系统')
|
||||
}
|
||||
|
||||
return allItems
|
||||
})
|
||||
|
||||
function go(p) {
|
||||
router.push(p)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<nav class="sidebar__nav">
|
||||
<div v-for="group in items" :key="group.title" class="nav-group">
|
||||
<div class="nav-group__title">{{ group.title }}</div>
|
||||
<button v-for="it in group.children" :key="it.path" class="nav-item" :class="{ 'is-active': route.path === it.path }" @click="go(it.path)">
|
||||
<span class="nav-item__icon" aria-hidden="true" v-html="icons[it.icon]"></span>
|
||||
<span class="nav-item__label">{{ it.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 70px; /* 与 TopNav 高度一致 */
|
||||
height: calc(100vh - 70px);
|
||||
width: 220px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.sidebar__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.nav-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.nav-group__title {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
font-size: var(--font-small-size);
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
height: 40px;
|
||||
border-radius: var(--radius-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 12px;
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease, border-color .2s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #161616; /* hover态：加深 */
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.nav-item.is-active {
|
||||
background: var(--color-primary);;
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-item__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
|
||||
.nav-item__label { font-size: var(--font-body-size); font-weight: 600; }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -6,14 +6,12 @@ import 'ant-design-vue/dist/reset.css'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './style.css'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
pinia.use(piniaPluginPersistedstate)
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(Antd)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getToken } from '@gold/utils/token-manager'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/content-style/benchmark'
|
||||
},
|
||||
// { path: '/home', name: '首页', component: () => import('../views/home/Home.vue') },
|
||||
{
|
||||
path: '/content-style',
|
||||
name: '内容风格分析',
|
||||
children: [
|
||||
{ path: '', redirect: '/content-style/benchmark' },
|
||||
{ path: 'benchmark', name: '对标分析', component: () => import('../views/content-style/Benchmark.vue') },
|
||||
{ path: 'copywriting', name: '文案创作', component: () => import('../views/content-style/Copywriting.vue') },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/trends',
|
||||
name: '热点趋势分析',
|
||||
children: [
|
||||
{ path: '', redirect: '/trends/heat' },
|
||||
{ path: 'heat', name: '热度分析', component: () => import('../views/trends/Heat.vue') },
|
||||
{ path: 'forecast', name: '热点预测', component: () => import('../views/trends/Forecast.vue') },
|
||||
{ path: 'copywriting', name: '趋势文案创作', component: () => import('../views/trends/Copywriting.vue') },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/digital-human',
|
||||
name: '数字人',
|
||||
children: [
|
||||
{ path: '', redirect: '/digital-human/voice-copy' },
|
||||
{ path: 'voice-copy', name: '人声克隆', component: () => import('../views/dh/VoiceCopy.vue') },
|
||||
{ path: 'voice-generate', name: '生成配音', component: () => import('../views/dh/VoiceGenerate.vue') },
|
||||
{ path: 'avatar', name: '生成数字人', component: () => import('../views/dh/Avatar.vue') },
|
||||
{ path: 'video', name: '数字人视频', component: () => import('../views/dh/Video.vue') },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/material',
|
||||
name: '素材库',
|
||||
children: [
|
||||
{ path: '', redirect: '/material/list' },
|
||||
{ path: 'list', name: '素材列表', component: () => import('../views/material/MaterialList.vue') },
|
||||
{ path: 'group', name: '素材分组', component: () => import('../views/material/MaterialGroup.vue') },
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
name: '系统',
|
||||
children: [
|
||||
{ path: '', redirect: '/system/style-settings' },
|
||||
{ path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') },
|
||||
]
|
||||
},
|
||||
{ path: '/realtime-hot', name: '实时热点推送', component: () => import('../views/realtime/RealtimeHot.vue') },
|
||||
{ path: '/mix-editor', name: '素材混剪', component: () => import('../views/mix/MixEditor.vue') },
|
||||
{ path: '/capcut-import', name: '剪映导入', component: () => import('../views/capcut/CapcutImport.vue') },
|
||||
{ path: '/help', name: '帮助', component: () => import('../views/misc/Help.vue') },
|
||||
{ path: '/download', name: '下载', component: () => import('../views/misc/Download.vue') },
|
||||
{ path: '/settings/theme', name: '主题设置', component: () => import('../views/misc/Theme.vue') },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes,
|
||||
})
|
||||
|
||||
// 用户信息初始化标志（确保只初始化一次）
|
||||
let userInfoInitialized = false
|
||||
|
||||
/**
|
||||
* 路由导航守卫：初始化用户信息 + 登录验证
|
||||
* 在首次路由跳转时，如果已登录（有 token），则获取用户信息
|
||||
* 如果未登录访问系统相关路由，则重定向到首页
|
||||
*/
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 只在首次路由跳转时初始化用户信息
|
||||
if (!userInfoInitialized) {
|
||||
userInfoInitialized = true
|
||||
|
||||
const token = getToken()
|
||||
if (token) {
|
||||
try {
|
||||
// 如果 store 中已标记为登录，则获取用户信息
|
||||
if (userStore.isLoggedIn) {
|
||||
userStore.fetchUserInfo()
|
||||
} else {
|
||||
// 如果有 token 但 store 中未标记为登录，可能是刷新页面
|
||||
// 先标记为已登录，然后获取用户信息
|
||||
userStore.isLoggedIn = true
|
||||
userStore.fetchUserInfo()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化用户信息失败:', error)
|
||||
// 不阻止路由跳转，继续执行
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 检查访问系统相关路由时是否已登录
|
||||
if (to.path.startsWith('/system')) {
|
||||
// 等待 store 从本地存储恢复完成（最多等待500ms）
|
||||
let waitCount = 0
|
||||
while (!userStore.isHydrated && waitCount < 50) {
|
||||
await new Promise(resolve => setTimeout(resolve, 10))
|
||||
waitCount++
|
||||
}
|
||||
|
||||
// 如果未登录，重定向到首页
|
||||
if (!userStore.isLoggedIn) {
|
||||
next({ path: '/content-style/benchmark', replace: true })
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 继续路由跳转
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { resolveId } from '@/utils/url'
|
||||
import { exportBenchmarkDataToExcel } from '@/utils/excel'
|
||||
import { usePromptStore } from '@/stores/prompt'
|
||||
@@ -16,7 +15,6 @@ import BatchAnalyzeModal from './components/BatchAnalyzeModal.vue'
|
||||
import SavePromptModal from './components/SavePromptModal.vue'
|
||||
|
||||
// ==================== 初始化 ====================
|
||||
const router = useRouter()
|
||||
const promptStore = usePromptStore()
|
||||
|
||||
// ==================== 数据管理 ====================
|
||||
@@ -209,7 +207,7 @@ function handleCopyBatchPrompt(prompt) {
|
||||
// ==================== 创作相关函数 ====================
|
||||
function handleCreateContent(row) {
|
||||
promptStore.setPrompt(row.prompt, row)
|
||||
router.push('/content-style/copywriting')
|
||||
// 路由已移除
|
||||
}
|
||||
|
||||
function handleUseBatchPrompt(prompt) {
|
||||
@@ -219,7 +217,7 @@ function handleUseBatchPrompt(prompt) {
|
||||
}
|
||||
|
||||
promptStore.setPrompt(prompt, { batch: true })
|
||||
router.push('/content-style/copywriting')
|
||||
// 路由已移除
|
||||
}
|
||||
|
||||
// ==================== 保存提示词到服务器 ====================
|
||||
|
||||
@@ -1,146 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed, h, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useVoiceCopyStore } from '@/stores/voiceCopy'
|
||||
|
||||
const store = useVoiceCopyStore()
|
||||
|
||||
const selectedVoiceId = ref(store.activeId)
|
||||
const text = ref('')
|
||||
const speed = ref(1.0)
|
||||
const emotion = ref('neutral')
|
||||
|
||||
const records = ref([]) // 生成记录：{ id, voiceId, voiceName, text, status, url, createdAt }
|
||||
|
||||
const voiceOptions = computed(() => store.profiles.map(p => ({ value: p.id, label: p.name || '未命名' })))
|
||||
const selectedVoice = computed(() => store.profiles.find(p => p.id === selectedVoiceId.value) || null)
|
||||
|
||||
// 监听 store.activeId 变化，同步到 selectedVoiceId
|
||||
watch(() => store.activeId, (newId) => {
|
||||
if (newId && store.profiles.find(p => p.id === newId)) {
|
||||
selectedVoiceId.value = newId
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
function ensureReady() {
|
||||
if (!selectedVoiceId.value) { message.warning('请选择克隆声音'); return false }
|
||||
if (!text.value.trim()) { message.warning('请输入文案'); return false }
|
||||
return true
|
||||
}
|
||||
|
||||
function simulateGenerate() {
|
||||
// 本地模拟：新增记录 → 排队 → 处理中 → 完成
|
||||
const id = `${Date.now()}_${Math.floor(Math.random()*1e5)}`
|
||||
const now = Date.now()
|
||||
const rec = {
|
||||
id,
|
||||
voiceId: selectedVoiceId.value,
|
||||
voiceName: selectedVoice.value?.name || '未命名',
|
||||
text: text.value.trim(),
|
||||
status: 'queued',
|
||||
url: '',
|
||||
createdAt: now,
|
||||
}
|
||||
records.value = [rec, ...records.value]
|
||||
|
||||
setTimeout(() => {
|
||||
updateRecord(id, { status: 'processing' })
|
||||
}, 600)
|
||||
setTimeout(() => {
|
||||
// 模拟成功产出
|
||||
const blob = new Blob([new Uint8Array([1,2,3])], { type: 'audio/mp3' })
|
||||
const url = URL.createObjectURL(blob)
|
||||
updateRecord(id, { status: 'done', url })
|
||||
message.success('生成完成（模拟）')
|
||||
}, 2200)
|
||||
}
|
||||
|
||||
function updateRecord(id, patch) {
|
||||
const idx = records.value.findIndex(r => r.id === id)
|
||||
if (idx !== -1) records.value[idx] = { ...records.value[idx], ...patch }
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
const d = new Date(ts)
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`
|
||||
}
|
||||
|
||||
function onGenerate() {
|
||||
if (!ensureReady()) return
|
||||
simulateGenerate()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vg-page">
|
||||
<div class="vg-grid">
|
||||
<!-- 左侧：配置区 -->
|
||||
<section class="vg-left">
|
||||
<div class="vg-title">配音生成</div>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="克隆声音">
|
||||
<a-select v-model:value="selectedVoiceId" :options="voiceOptions" placeholder="请选择已保存的克隆声音" />
|
||||
</a-form-item>
|
||||
<a-form-item label="文案">
|
||||
<a-textarea v-model:value="text" :rows="5" placeholder="输入要合成的文案" />
|
||||
</a-form-item>
|
||||
<div class="vg-row">
|
||||
<a-form-item label="语速" style="flex:1">
|
||||
<a-slider v-model:value="speed" :min="0.5" :max="2" :step="0.1" />
|
||||
</a-form-item>
|
||||
<a-form-item label="情感" style="flex:1">
|
||||
<a-select v-model:value="emotion" :options="[
|
||||
{ value: 'neutral', label: '中性' },
|
||||
{ value: 'happy', label: '开心' },
|
||||
{ value: 'sad', label: '悲伤' },
|
||||
{ value: 'angry', label: '愤怒' }
|
||||
]" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="onGenerate">生成</a-button>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</section>
|
||||
|
||||
<!-- 右侧：结果/预览与记录 -->
|
||||
<section class="vg-right">
|
||||
<div class="vg-title">生成记录</div>
|
||||
<template v-if="records.length">
|
||||
<a-table :dataSource="records" :pagination="false" rowKey="id">
|
||||
<a-table-column key="createdAt" title="时间" :customRender="({ record }) => formatTime(record.createdAt)" />
|
||||
<a-table-column key="voiceName" title="声音" dataIndex="voiceName" />
|
||||
<a-table-column key="text" title="文案" :customRender="({ record }) => record.text?.slice(0, 40) + (record.text?.length>40?'...':'')" />
|
||||
<a-table-column key="status" title="状态" :customRender="({ record }) => record.status" />
|
||||
<a-table-column key="action" title="操作"
|
||||
:customRender="({ record }) => record.url ? h('a', { href: record.url, target: '_blank' }, '预览') : h('span', {}, '-')" />
|
||||
</a-table>
|
||||
</template>
|
||||
<a-empty v-else class="vg-empty">
|
||||
<template #description>
|
||||
<div>暂无生成记录，选择声音并输入文案后点击“生成”</div>
|
||||
</template>
|
||||
</a-empty>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.vg-page { color: var(--color-text); }
|
||||
.vg-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
|
||||
@media (min-width: 1024px) { .vg-grid { grid-template-columns: 1fr 1fr; } }
|
||||
|
||||
.vg-left, .vg-right {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: var(--shadow-inset-card);
|
||||
padding: 16px;
|
||||
}
|
||||
.vg-title { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px; }
|
||||
.vg-row { display: flex; gap: 16px; }
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user