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-10 00:59:40 +08:00
parent 78c46aed71
commit bac96fcbe6
76 changed files with 8726 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1005
frontend/app/web-gold/src/components/LoginModal.vue Normal file
View File

File diff suppressed because it is too large Load Diff

123
frontend/app/web-gold/src/components/SidebarNav.vue Normal file
View File

@@ -0,0 +1,123 @@
<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
// 单色 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>'
}
const items = computed(() => {
// 小标题（功能） + 模块（子菜单）的形式；使用单色 SVG 图标
return [
{
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' },
]
},
// {
// title: '视频',
// children: [
// { path: '/digital-human/avatar', label: '生成数字人', icon: 'user' },
// ]
// },
]
})
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>

102
frontend/app/web-gold/src/components/TokenInput.vue Normal file
View File

@@ -0,0 +1,102 @@
<script setup>
import { ref, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { setDevToken, getDevToken } from '@/utils/token-manager'
const token = ref('')
const isVisible = ref(true)
// 从 sessionStorage 恢复 token
onMounted(() => {
const saved = getDevToken()
if (saved) {
token.value = saved
}
})
// 保存 token
const handleSave = () => {
if (token.value.trim()) {
setDevToken(token.value)
message.success('Token 已保存')
} else {
setDevToken('')
message.success('Token 已清除')
}
}
// 监听输入变化，自动保存（防抖）
let saveTimer = null
watch(token, () => {
clearTimeout(saveTimer)
saveTimer = setTimeout(() => {
if (token.value.trim()) {
setDevToken(token.value)
}
}, 500)
})
</script>
<template>
<div v-if="isVisible" class="token-input-wrapper">
<div class="token-input-label">Dev Token</div>
<input
v-model="token"
type="password"
placeholder="输入测试 token"
class="token-input"
@keyup.enter="handleSave"
/>
<button class="token-btn" @click="handleSave">保存</button>
</div>
</template>
<style scoped>
.token-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.token-input-label {
font-size: 12px;
color: var(--color-text-secondary);
white-space: nowrap;
}
.token-input {
width: 200px;
height: 28px;
padding: 0 8px;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-surface);
color: var(--color-text);
font-size: 12px;
outline: none;
transition: all 0.2s;
}
.token-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}
.token-btn {
height: 28px;
padding: 0 12px;
border: 1px solid var(--color-primary);
border-radius: 4px;
background: transparent;
color: var(--color-primary);
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.token-btn:hover {
background: var(--color-primary);
color: #fff;
}
</style>

106
frontend/app/web-gold/src/components/TopNav.vue Normal file
View File

@@ -0,0 +1,106 @@
<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import LoginModal from '@/components/LoginModal.vue'
import TokenInput from '@/components/TokenInput.vue'
const styles = {
background: 'var(--color-surface)',
color: 'var(--color-text)'
}
// const route = useRoute()
const userStore = useUserStore()
const showLogin = ref(false)
// function go(path) {
// router.push(path)
// }
</script>
<template>
<header
class="header-box"
:style="styles"
>
<div>
<div class="h-[70px] flex items-center">
<div class="flex items-center gap-3 flex-1 pl-[30px]">
<!-- 左侧可放 logo 或其他内容 -->
</div>
<div class="flex items-center gap-4 pr-[35px]">
<!-- Token 输入（仅开发/测试环境） -->
<TokenInput />
<template v-if="userStore.isLoggedIn && userStore.displayAvatar">
<img class="w-8 h-8 rounded-full" :src="userStore.displayAvatar" alt="avatar" />
</template>
<template v-else>
<button class="btn-primary-nav" @click="showLogin = true">免费试用</button>
</template>
</div>
</div>
</div>
</header>
<LoginModal v-model:open="showLogin" />
</template>
<style scoped>
.header-box {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
border-bottom: 1px solid var(--color-border);
}
.nav-link {
height: 70px;
display: inline-flex;
align-items: center;
cursor: pointer;
padding: 0 6px;
color: var(--color-text-secondary);
position: relative;
transition: color .2s ease;
}
.nav-link:hover {
color: var(--color-text);
}
.nav-link--active {
color: var(--color-text);
font-weight: 600;
}
.nav-link--active::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 10px;
height: 2px;
background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
opacity: 0.55;
border-radius: 2px;
}
.btn-primary-nav {
height: 32px;
padding: 0 12px;
border-radius: 8px;
background: var(--color-primary);
color: #fff;
font-size: 12px;
font-weight: 600;
box-shadow: var(--glow-primary);
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary-nav:hover {
transform: translateY(-1px);
box-shadow: var(--glow-primary);
filter: brightness(1.03);
}
</style>

28
frontend/app/web-gold/src/components/icons/Icon.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<svg :class="['gm-icon', cls]" :width="size" :height="size" aria-hidden="true">
<use :href="`#${name}`" />
</svg>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
name: { type: String, required: true },
size: { type: [Number, String], default: 16 },
class: { type: String, default: '' },
})
const cls = computed(() => props.class)
defineOptions({ name: 'GmIcon' })
</script>
<style scoped>
.gm-icon {
display: inline-block;
vertical-align: middle;
color: currentColor;
}
</style>

67
frontend/app/web-gold/src/components/icons/SvgSprite.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true" focusable="false">
<symbol id="icon-topic" viewBox="0 0 24 24">
<path d="M5 12a7 7 0 1 1 6.8 7.0l-3.3 2.0.8-3.2A6.9 6.9 0 0 1 5 12Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="8" cy="18" r="1" fill="currentColor"/>
<circle cx="6" cy="16" r="1" fill="currentColor"/>
</symbol>
<symbol id="icon-paragraph" viewBox="0 0 24 24">
<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16.5H7a3 3 0 0 0-3 3V5.5Z" fill="none" stroke="currentColor" stroke-width="1.6"/>
<path d="M7 3v16.5" fill="none" stroke="currentColor" stroke-width="1.6"/>
</symbol>
<symbol id="icon-video" viewBox="0 0 24 24">
<rect x="3" y="5" width="14" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>
<path d="M17 9l4-2v10l-4-2v-6Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M3 9h14" fill="none" stroke="currentColor" stroke-width="1.2" stroke-dasharray="2 2"/>
</symbol>
<symbol id="icon-sparkle" viewBox="0 0 24 24">
<path d="M12 3l1.2 3.5L17 8l-3.8 1.2L12 13l-1.2-3.8L7 8l3.8-1.5L12 3Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
</symbol>
<symbol id="icon-spinner" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" opacity="0.2"/>
<path d="M21 12a9 9 0 0 0-9-9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</symbol>
<symbol id="icon-eye" viewBox="0 0 24 24">
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" fill="none" stroke="currentColor" stroke-width="1.6"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="1.6"/>
</symbol>
<symbol id="icon-edit" viewBox="0 0 24 24">
<path d="M4 20l4.5-1 10-10a1.5 1.5 0 0 0-2.1-2.1L6.5 16.9 5 21 4 20Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
</symbol>
<symbol id="icon-copy" viewBox="0 0 24 24">
<rect x="9" y="7" width="11" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>
<rect x="4" y="4" width="11" height="13" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>
</symbol>
<symbol id="icon-save" viewBox="0 0 24 24">
<path d="M4 4h12l4 4v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" fill="none" stroke="currentColor" stroke-width="1.6"/>
<path d="M7 4v6h10V6l-2-2H7Z" fill="none" stroke="currentColor" stroke-width="1.6"/>
</symbol>
<symbol id="icon-cancel" viewBox="0 0 24 24">
<path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</symbol>
<symbol id="icon-empty-doc" viewBox="0 0 24 24">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>
<path d="M8 8h8M8 12h8M8 16h5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</symbol>
</svg>
</template>
<script setup>
// 无逻辑，仅提供一次性注入的 symbol sprite
</script>
<style scoped>
/* 隐藏容器但保留 DOM */
</style>