feat: 功能优化
This commit is contained in:
@@ -113,7 +113,7 @@ const handleBack = () => {
|
||||
.full-width-layout__content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--bg-secondary);
|
||||
background: var(--color-bg);
|
||||
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
|
||||
@@ -10,6 +10,7 @@ import { UserPromptApi } from '@/api/userPrompt'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import GradientButton from '@/components/GradientButton.vue'
|
||||
import { setJSON, getJSON } from '@/utils/storage'
|
||||
import BasicLayout from '@/layouts/components/BasicLayout.vue'
|
||||
|
||||
const promptStore = usePromptStore()
|
||||
const userStore = useUserStore()
|
||||
@@ -499,9 +500,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="copywriting-page">
|
||||
<!-- 页面标题区域 -->
|
||||
|
||||
<BasicLayout title="AI 文案创作">
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="main-content">
|
||||
<a-row :gutter="16">
|
||||
@@ -517,9 +516,9 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
<span class="form-tip-inline">从已保存的提示词中选择</span>
|
||||
</span>
|
||||
<a-space>
|
||||
<a-button
|
||||
size="small"
|
||||
type="link"
|
||||
<a-button
|
||||
size="small"
|
||||
type="link"
|
||||
@click="showAllPromptsModal = true"
|
||||
:disabled="allPrompts.length === 0">
|
||||
更多 ({{ allPrompts.length }})
|
||||
@@ -527,7 +526,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 提示词标签展示区域 -->
|
||||
<div v-if="displayPrompts.length > 0" class="prompt-tags-container">
|
||||
<div class="prompt-tags-grid">
|
||||
@@ -541,27 +540,27 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else-if="!loadingPrompts" class="prompt-empty">
|
||||
<div style="color: var(--color-text-secondary); font-size: 14px; text-align: center; padding: 20px;">
|
||||
您可以在视频分析页面保存风格
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-else class="prompt-loading">
|
||||
<a-spin size="small" />
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
|
||||
<!-- 统一输入：文本或视频链接 -->
|
||||
<a-form-item class="form-item">
|
||||
<template #label>
|
||||
输入内容
|
||||
<span class="form-tip-inline">输入要生成的主题/段落，或粘贴视频链接以自动转写</span>
|
||||
</template>
|
||||
<a-textarea
|
||||
<a-textarea
|
||||
v-model:value="form.userInput"
|
||||
placeholder="直接输入文字，或粘贴视频链接（抖音、B站、YouTube等）"
|
||||
:auto-size="{ minRows: 6, maxRows: 12 }"
|
||||
@@ -576,17 +575,17 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
<span class="form-tip-inline">调整创作幅度，数值越大创意性越强</span>
|
||||
</template>
|
||||
<div class="amplitude-row">
|
||||
<a-slider
|
||||
v-model:value="form.amplitude"
|
||||
:min="0"
|
||||
:max="100"
|
||||
<a-slider
|
||||
v-model:value="form.amplitude"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:tooltip-formatter="(value) => `${value}%`"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="form.amplitude"
|
||||
:min="0"
|
||||
:max="100"
|
||||
<a-input-number
|
||||
v-model:value="form.amplitude"
|
||||
:min="0"
|
||||
:max="100"
|
||||
style="width: 96px; margin-left: 12px;"
|
||||
/>
|
||||
</div>
|
||||
@@ -608,11 +607,9 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
</a-card>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
|
||||
<a-col :lg="14" :md="24">
|
||||
<div class="result-section">
|
||||
|
||||
|
||||
<a-card class="result-card" :bordered="false" title="生成结果">
|
||||
<template #extra>
|
||||
<a-space>
|
||||
@@ -626,11 +623,11 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
|
||||
<div v-if="generatedContent" class="result-content">
|
||||
<!-- 编辑模式 -->
|
||||
<div v-if="isEditMode" class="edit-mode">
|
||||
<a-textarea
|
||||
<a-textarea
|
||||
v-model:value="editableContent"
|
||||
:auto-size="{ minRows: 15, maxRows: 30 }"
|
||||
placeholder="在这里编辑生成的文案内容..."
|
||||
@@ -649,11 +646,11 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 预览模式 -->
|
||||
<div v-else class="generated-content" v-html="md.render(generatedContent)"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else class="custom-empty">
|
||||
<div class="empty-description">
|
||||
<div class="empty-icon"><GmIcon name="icon-empty-doc" :size="36" /></div>
|
||||
@@ -672,19 +669,21 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
v-model:open="showAllPromptsModal"
|
||||
title="选择提示词"
|
||||
:width="800"
|
||||
:maskClosable="false">
|
||||
:maskClosable="false"
|
||||
>
|
||||
<div class="all-prompts-modal">
|
||||
<!-- 搜索框 -->
|
||||
<a-input
|
||||
v-model:value="promptSearchKeyword"
|
||||
placeholder="搜索提示词名称或内容..."
|
||||
allow-clear
|
||||
style="margin-bottom: 16px;">
|
||||
style="margin-bottom: 16px;"
|
||||
>
|
||||
<template #prefix>
|
||||
<GmIcon name="icon-search" :size="16" />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
|
||||
<!-- 提示词列表（标签形式） -->
|
||||
<div v-if="filteredPrompts.length > 0" class="all-prompts-tags">
|
||||
<div
|
||||
@@ -692,128 +691,64 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
:key="prompt.id"
|
||||
class="all-prompt-tag"
|
||||
:class="{ 'all-prompt-tag-selected': selectedPromptId === prompt.id }"
|
||||
@click="selectPrompt(prompt)">
|
||||
@click="selectPrompt(prompt)"
|
||||
>
|
||||
<span class="all-prompt-tag-name">{{ prompt.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-else style="text-align: center; padding: 40px; color: var(--color-text-secondary);">
|
||||
没有找到匹配的提示词
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button @click="showAllPromptsModal = false">取消</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="loadUserPrompts"
|
||||
:loading="loadingPrompts">
|
||||
:loading="loadingPrompts"
|
||||
>
|
||||
刷新列表
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 页面整体样式 */
|
||||
.copywriting-page {
|
||||
background: var(--color-bg);
|
||||
min-height: 100vh;
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 页面标题区域 */
|
||||
.page-header {
|
||||
padding: 20px 0 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0 0 8px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 区域标题 */
|
||||
.section-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 0.9rem;
|
||||
color: #9ca3af;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.form-card,
|
||||
.result-card {
|
||||
background: var(--color-surface);
|
||||
background: var(--bg-primary);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-card:hover,
|
||||
.result-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.form-card :deep(.ant-card-head),
|
||||
.result-card :deep(.ant-card-head) {
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--bg-primary);
|
||||
border: none;
|
||||
padding: 16px 20px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.form-card :deep(.ant-card-head-title),
|
||||
.result-card :deep(.ant-card-head-title) {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-card :deep(.ant-card-body),
|
||||
@@ -827,7 +762,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.form-item :deep(.ant-form-item-label) {
|
||||
@@ -835,16 +770,17 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
}
|
||||
|
||||
.form-item :deep(.ant-form-item-label > label) {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* 表单标签后的内联提示（不使用 emoji） */
|
||||
.form-tip-inline {
|
||||
margin-left: var(--space-2);
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@@ -852,27 +788,25 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
.custom-input,
|
||||
.custom-textarea {
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
transition: all 0.3s ease;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-input:focus,
|
||||
.custom-textarea:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px var(--color-primary-glow);
|
||||
background: var(--color-surface);
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.custom-input:hover,
|
||||
.custom-textarea:hover {
|
||||
border-color: var(--color-border);
|
||||
background: var(--color-surface);
|
||||
border-color: var(--border-light-hover, #d9d9d9);
|
||||
}
|
||||
|
||||
.custom-textarea::placeholder {
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
|
||||
@@ -905,18 +839,23 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
/* 操作按钮样式 */
|
||||
.action-btn {
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
padding: 4px 12px;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border-color: var(--color-primary);
|
||||
color: #fff;
|
||||
background: rgba(22, 119, 255, 0.15);
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
color: var(--primary-color, #1677ff);
|
||||
}
|
||||
|
||||
/* 幅度滑块样式 */
|
||||
@@ -995,32 +934,29 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
.edit-textarea {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 6px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.edit-textarea:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px var(--color-primary-glow);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.edit-textarea:hover {
|
||||
border-color: var(--color-border);
|
||||
border-color: var(--border-light-hover, #d9d9d9);
|
||||
}
|
||||
|
||||
.edit-textarea::placeholder {
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
|
||||
.edit-actions {
|
||||
text-align: right;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@@ -1034,7 +970,6 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
.save-btn:hover {
|
||||
background: var(--color-primary);
|
||||
filter: brightness(1.04);
|
||||
box-shadow: var(--shadow-blue);
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
@@ -1048,14 +983,13 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
}
|
||||
|
||||
.generated-content {
|
||||
padding: var(--space-6);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border);
|
||||
line-height: 1.9;
|
||||
color: var(--color-text);
|
||||
padding: 20px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-primary);
|
||||
min-height: 400px;
|
||||
font-size: 15px;
|
||||
font-size: 14px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -1066,30 +1000,27 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-4);
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
padding-bottom: var(--space-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.generated-content :deep(h2) {
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
margin: 22px 0 12px 0;
|
||||
color: var(--color-text);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.generated-content :deep(h3) {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 18px 0 10px 0;
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.generated-content :deep(p) {
|
||||
margin: 12px 0 14px 0;
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.9;
|
||||
font-size: 15px;
|
||||
}
|
||||
@@ -1102,39 +1033,36 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
|
||||
.generated-content :deep(li) {
|
||||
margin: 6px 0;
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.9;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.generated-content :deep(strong) {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.generated-content :deep(code) {
|
||||
background: var(--color-slate-100);
|
||||
background: var(--bg-secondary);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13.5px;
|
||||
color: var(--color-red-500);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.generated-content :deep(pre) {
|
||||
background: var(--color-slate-100);
|
||||
background: var(--bg-secondary);
|
||||
padding: 16px 18px;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.generated-content :deep(pre code) {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
|
||||
@@ -1145,7 +1073,7 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-style: italic;
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 提示词标签样式 */
|
||||
@@ -1163,31 +1091,28 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 14px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.prompt-tag:hover {
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.prompt-tag-selected {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
background: var(--primary-color, #1677ff);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.prompt-tag-selected:hover {
|
||||
background: var(--color-primary);
|
||||
filter: brightness(1.1);
|
||||
background: var(--primary-color, #1677ff);
|
||||
}
|
||||
|
||||
.prompt-tag-name {
|
||||
@@ -1221,31 +1146,28 @@ defineOptions({ name: 'ContentStyleCopywriting' })
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.all-prompt-tag:hover {
|
||||
border-color: var(--color-primary);
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.all-prompt-tag-selected {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
background: var(--primary-color, #1677ff);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.all-prompt-tag-selected:hover {
|
||||
background: var(--color-primary);
|
||||
filter: brightness(1.1);
|
||||
background: var(--primary-color, #1677ff);
|
||||
}
|
||||
|
||||
.all-prompt-tag-name {
|
||||
|
||||
@@ -1,288 +1,290 @@
|
||||
<template>
|
||||
<div class="kling-page">
|
||||
<div class="kling-content">
|
||||
<!-- 左侧配置 -->
|
||||
<div class="upload-panel">
|
||||
<!-- 文案输入 -->
|
||||
<div class="section">
|
||||
<h3>文案</h3>
|
||||
<a-textarea
|
||||
v-model:value="ttsText"
|
||||
:placeholder="textareaPlaceholder"
|
||||
:rows="4"
|
||||
:maxlength="maxTextLength"
|
||||
:show-count="true"
|
||||
class="tts-textarea"
|
||||
/>
|
||||
<div v-if="identifyState.identified && faceDuration > 0" class="text-hint">
|
||||
<span class="hint-icon">💡</span>
|
||||
<span>视频中人脸出现时长约 {{ (faceDuration / 1000).toFixed(1) }} 秒，建议文案不超过 {{ suggestedMaxChars }} 字</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音色选择 -->
|
||||
<div class="section">
|
||||
<h3>音色</h3>
|
||||
<VoiceSelector ref="voiceSelectorRef" @select="handleVoiceSelect" />
|
||||
</div>
|
||||
|
||||
<!-- TTS 控制 -->
|
||||
<div class="section">
|
||||
<h3>语音控制</h3>
|
||||
<div class="control-group">
|
||||
<div class="control-label">语速</div>
|
||||
<div class="slider-card">
|
||||
<div class="slider-info">
|
||||
<div class="slider-value">{{ speechRateDisplay }}</div>
|
||||
<button class="reset-btn" @click="speechRate = 1">重置</button>
|
||||
</div>
|
||||
<a-slider
|
||||
v-model:value="speechRate"
|
||||
:min="0.5"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
:marks="speechRateMarks"
|
||||
:tooltip-open="false"
|
||||
/>
|
||||
<FullWidthLayout :show-padding="false">
|
||||
<div class="kling-page">
|
||||
<div class="kling-content">
|
||||
<!-- 左侧配置 -->
|
||||
<div class="upload-panel">
|
||||
<!-- 文案输入 -->
|
||||
<div class="section">
|
||||
<h3>文案</h3>
|
||||
<a-textarea
|
||||
v-model:value="ttsText"
|
||||
:placeholder="textareaPlaceholder"
|
||||
:rows="4"
|
||||
:maxlength="maxTextLength"
|
||||
:show-count="true"
|
||||
class="tts-textarea"
|
||||
/>
|
||||
<div v-if="identifyState.identified && faceDuration > 0" class="text-hint">
|
||||
<span class="hint-icon">💡</span>
|
||||
<span>视频中人脸出现时长约 {{ (faceDuration / 1000).toFixed(1) }} 秒，建议文案不超过 {{ suggestedMaxChars }} 字</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频选择 -->
|
||||
<div class="section">
|
||||
<h3>视频</h3>
|
||||
<!-- 音色选择 -->
|
||||
<div class="section">
|
||||
<h3>音色</h3>
|
||||
<VoiceSelector ref="voiceSelectorRef" @select="handleVoiceSelect" />
|
||||
</div>
|
||||
|
||||
<!-- 双选项卡片 -->
|
||||
<div class="video-selection-cards">
|
||||
<!-- 上传选项 -->
|
||||
<div
|
||||
class="video-option-card"
|
||||
:class="{ selected: videoState.videoSource === 'upload' }"
|
||||
@click="handleSelectUpload"
|
||||
>
|
||||
<div class="card-icon">
|
||||
<UploadOutlined />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4>点击上传新视频</h4>
|
||||
<p>支持 MP4、MOV 格式</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择选项 -->
|
||||
<div
|
||||
class="video-option-card"
|
||||
:class="{ selected: videoState.videoSource === 'select' }"
|
||||
@click="handleSelectFromLibrary"
|
||||
>
|
||||
<div class="card-icon">
|
||||
<PictureOutlined />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4>从素材库选择</h4>
|
||||
<p>选择已上传的视频</p>
|
||||
<!-- TTS 控制 -->
|
||||
<div class="section">
|
||||
<h3>语音控制</h3>
|
||||
<div class="control-group">
|
||||
<div class="control-label">语速</div>
|
||||
<div class="slider-card">
|
||||
<div class="slider-info">
|
||||
<div class="slider-value">{{ speechRateDisplay }}</div>
|
||||
<button class="reset-btn" @click="speechRate = 1">重置</button>
|
||||
</div>
|
||||
<a-slider
|
||||
v-model:value="speechRate"
|
||||
:min="0.5"
|
||||
:max="2"
|
||||
:step="0.1"
|
||||
:marks="speechRateMarks"
|
||||
:tooltip-open="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已选择视频的预览 -->
|
||||
<div v-if="videoState.selectedVideo" class="selected-video-preview">
|
||||
<div class="preview-thumbnail">
|
||||
<img
|
||||
:src="getVideoPreviewUrl(videoState.selectedVideo)"
|
||||
:alt="videoState.selectedVideo.fileName"
|
||||
/>
|
||||
<div class="video-duration-badge">
|
||||
{{ formatDuration(videoState.selectedVideo.duration) }}
|
||||
<!-- 视频选择 -->
|
||||
<div class="section">
|
||||
<h3>视频</h3>
|
||||
|
||||
<!-- 双选项卡片 -->
|
||||
<div class="video-selection-cards">
|
||||
<!-- 上传选项 -->
|
||||
<div
|
||||
class="video-option-card"
|
||||
:class="{ selected: videoState.videoSource === 'upload' }"
|
||||
@click="handleSelectUpload"
|
||||
>
|
||||
<div class="card-icon">
|
||||
<UploadOutlined />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4>点击上传新视频</h4>
|
||||
<p>支持 MP4、MOV 格式</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择选项 -->
|
||||
<div
|
||||
class="video-option-card"
|
||||
:class="{ selected: videoState.videoSource === 'select' }"
|
||||
@click="handleSelectFromLibrary"
|
||||
>
|
||||
<div class="card-icon">
|
||||
<PictureOutlined />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h4>从素材库选择</h4>
|
||||
<p>选择已上传的视频</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-info">
|
||||
<div class="video-title">{{ videoState.selectedVideo.fileName }}</div>
|
||||
<div class="video-meta">
|
||||
<span>{{ formatFileSize(videoState.selectedVideo.fileSize) }}</span>
|
||||
<span>{{ formatDuration(videoState.selectedVideo.duration) }}</span>
|
||||
|
||||
<!-- 已选择视频的预览 -->
|
||||
<div v-if="videoState.selectedVideo" class="selected-video-preview">
|
||||
<div class="preview-thumbnail">
|
||||
<img
|
||||
:src="getVideoPreviewUrl(videoState.selectedVideo)"
|
||||
:alt="videoState.selectedVideo.fileName"
|
||||
/>
|
||||
<div class="video-duration-badge">
|
||||
{{ formatDuration(videoState.selectedVideo.duration) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-info">
|
||||
<div class="video-title">{{ videoState.selectedVideo.fileName }}</div>
|
||||
<div class="video-meta">
|
||||
<span>{{ formatFileSize(videoState.selectedVideo.fileSize) }}</span>
|
||||
<span>{{ formatDuration(videoState.selectedVideo.duration) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-button type="link" size="small" @click="replaceVideo">
|
||||
更换
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 上传区域（仅在选择上传时显示） -->
|
||||
<div
|
||||
v-if="videoState.videoSource === 'upload'"
|
||||
class="upload-zone"
|
||||
@drop.prevent="handleDrop"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@dragleave.prevent="dragOver = false"
|
||||
>
|
||||
<input ref="fileInput" type="file" accept=".mp4,.mov" style="display: none" @change="handleFileSelect" />
|
||||
|
||||
<div v-if="!videoState.uploadedVideo" class="upload-placeholder">
|
||||
<h3>拖拽或点击上传视频文件</h3>
|
||||
<p>支持 MP4、MOV</p>
|
||||
<a-button type="primary" size="large" @click="triggerFileSelect">
|
||||
选择文件
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="video-preview">
|
||||
<video :src="videoState.uploadedVideo" controls class="preview-video"></video>
|
||||
<p>{{ videoState.videoFile?.name }}</p>
|
||||
<a-button type="link" size="small" @click="replaceVideo">
|
||||
更换
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 素材校验结果 -->
|
||||
<div v-if="materialValidation.videoDuration > 0 && materialValidation.audioDuration > 0" class="section">
|
||||
<h3>素材校验</h3>
|
||||
<div class="validation-result" :class="{ 'validation-passed': materialValidation.isValid, 'validation-failed': !materialValidation.isValid }">
|
||||
<div class="validation-status">
|
||||
<span class="status-icon">{{ materialValidation.isValid ? '✅' : '❌' }}</span>
|
||||
<span class="status-text">{{ materialValidation.isValid ? '校验通过' : '校验失败' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 时长对比进度条 -->
|
||||
<div class="duration-comparison">
|
||||
<div class="duration-bar">
|
||||
<div class="duration-label">
|
||||
<span>音频时长</span>
|
||||
<span class="duration-value">{{ (materialValidation.audioDuration / 1000).toFixed(1) }}s</span>
|
||||
</div>
|
||||
<div class="progress-bar audio-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${(materialValidation.audioDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="duration-bar">
|
||||
<div class="duration-label">
|
||||
<span>视频时长</span>
|
||||
<span class="duration-value">{{ (materialValidation.videoDuration / 1000).toFixed(1) }}s</span>
|
||||
</div>
|
||||
<div class="progress-bar video-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:class="{ 'success': materialValidation.isValid, 'error': !materialValidation.isValid }"
|
||||
:style="{ width: `${(materialValidation.videoDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 失败提示和建议 -->
|
||||
<div v-if="!materialValidation.isValid" class="validation-error">
|
||||
<p class="error-message">
|
||||
视频时长必须大于音频时长才能生成数字人视频
|
||||
</p>
|
||||
<div class="quick-actions">
|
||||
<a-button size="small" @click="replaceVideo">更换视频</a-button>
|
||||
<a-button size="small" @click="handleSimplifyScript">精简文案</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配音生成与校验（仅在识别后显示） -->
|
||||
<div v-if="identifyState.identified" class="section audio-generation-section">
|
||||
<h3>配音生成与校验</h3>
|
||||
|
||||
<!-- 生成配音按钮 -->
|
||||
<div class="generate-audio-row">
|
||||
<a-button
|
||||
type="default"
|
||||
size="large"
|
||||
:disabled="!canGenerateAudio"
|
||||
:loading="audioState.generating"
|
||||
block
|
||||
@click="generateAudio"
|
||||
<!-- 上传区域（仅在选择上传时显示） -->
|
||||
<div
|
||||
v-if="videoState.videoSource === 'upload'"
|
||||
class="upload-zone"
|
||||
@drop.prevent="handleDrop"
|
||||
@dragover.prevent="dragOver = true"
|
||||
@dragleave.prevent="dragOver = false"
|
||||
>
|
||||
{{ audioState.generating ? '生成中...' : '生成配音（用于校验时长）' }}
|
||||
</a-button>
|
||||
<input ref="fileInput" type="file" accept=".mp4,.mov" style="display: none" @change="handleFileSelect" />
|
||||
|
||||
<div v-if="!videoState.uploadedVideo" class="upload-placeholder">
|
||||
<h3>拖拽或点击上传视频文件</h3>
|
||||
<p>支持 MP4、MOV</p>
|
||||
<a-button type="primary" size="large" @click="triggerFileSelect">
|
||||
选择文件
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="video-preview">
|
||||
<video :src="videoState.uploadedVideo" controls class="preview-video"></video>
|
||||
<p>{{ videoState.videoFile?.name }}</p>
|
||||
<a-button type="link" size="small" @click="replaceVideo">
|
||||
更换
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音频预览（生成后显示） -->
|
||||
<div v-if="audioState.generated" class="audio-preview">
|
||||
<div class="audio-info">
|
||||
<h4>生成的配音</h4>
|
||||
<div class="duration-info">
|
||||
<span class="label">音频时长：</span>
|
||||
<span class="value">{{ (audioState.durationMs / 1000).toFixed(1) }} 秒</span>
|
||||
<!-- 素材校验结果 -->
|
||||
<div v-if="materialValidation.videoDuration > 0 && materialValidation.audioDuration > 0" class="section">
|
||||
<h3>素材校验</h3>
|
||||
<div class="validation-result" :class="{ 'validation-passed': materialValidation.isValid, 'validation-failed': !materialValidation.isValid }">
|
||||
<div class="validation-status">
|
||||
<span class="status-icon">{{ materialValidation.isValid ? '✅' : '❌' }}</span>
|
||||
<span class="status-text">{{ materialValidation.isValid ? '校验通过' : '校验失败' }}</span>
|
||||
</div>
|
||||
<div class="duration-info">
|
||||
<span class="label">人脸区间：</span>
|
||||
<span class="value">{{ (faceDuration / 1000).toFixed(1) }} 秒</span>
|
||||
|
||||
<!-- 时长对比进度条 -->
|
||||
<div class="duration-comparison">
|
||||
<div class="duration-bar">
|
||||
<div class="duration-label">
|
||||
<span>音频时长</span>
|
||||
<span class="duration-value">{{ (materialValidation.audioDuration / 1000).toFixed(1) }}s</span>
|
||||
</div>
|
||||
<div class="progress-bar audio-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${(materialValidation.audioDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="duration-bar">
|
||||
<div class="duration-label">
|
||||
<span>视频时长</span>
|
||||
<span class="duration-value">{{ (materialValidation.videoDuration / 1000).toFixed(1) }}s</span>
|
||||
</div>
|
||||
<div class="progress-bar video-bar">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:class="{ 'success': materialValidation.isValid, 'error': !materialValidation.isValid }"
|
||||
:style="{ width: `${(materialValidation.videoDuration / Math.max(materialValidation.videoDuration, materialValidation.audioDuration)) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration-info" :class="{ 'validation-passed': audioState.validationPassed, 'validation-failed': !audioState.validationPassed }">
|
||||
<span class="label">校验结果：</span>
|
||||
<span class="value">
|
||||
{{ audioState.validationPassed ? '✅ 通过' : '❌ 不通过（需至少2秒重合）' }}
|
||||
</span>
|
||||
|
||||
<!-- 失败提示和建议 -->
|
||||
<div v-if="!materialValidation.isValid" class="validation-error">
|
||||
<p class="error-message">
|
||||
视频时长必须大于音频时长才能生成数字人视频
|
||||
</p>
|
||||
<div class="quick-actions">
|
||||
<a-button size="small" @click="replaceVideo">更换视频</a-button>
|
||||
<a-button size="small" @click="handleSimplifyScript">精简文案</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音频播放器 -->
|
||||
<div class="audio-player">
|
||||
<audio
|
||||
v-if="audioState.generated.audioBase64"
|
||||
:src="`data:audio/mp3;base64,${audioState.generated.audioBase64}`"
|
||||
controls
|
||||
class="audio-element"
|
||||
/>
|
||||
<audio
|
||||
v-else-if="audioState.generated.audioUrl"
|
||||
:src="audioState.generated.audioUrl"
|
||||
controls
|
||||
class="audio-element"
|
||||
/>
|
||||
</div>
|
||||
<!-- 配音生成与校验（仅在识别后显示） -->
|
||||
<div v-if="identifyState.identified" class="section audio-generation-section">
|
||||
<h3>配音生成与校验</h3>
|
||||
|
||||
<!-- 重新生成按钮 -->
|
||||
<div class="regenerate-row">
|
||||
<!-- 生成配音按钮 -->
|
||||
<div class="generate-audio-row">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="generateAudio"
|
||||
type="default"
|
||||
size="large"
|
||||
:disabled="!canGenerateAudio"
|
||||
:loading="audioState.generating"
|
||||
block
|
||||
@click="generateAudio"
|
||||
>
|
||||
重新生成
|
||||
{{ audioState.generating ? '生成中...' : '生成配音（用于校验时长）' }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 音频预览（生成后显示） -->
|
||||
<div v-if="audioState.generated" class="audio-preview">
|
||||
<div class="audio-info">
|
||||
<h4>生成的配音</h4>
|
||||
<div class="duration-info">
|
||||
<span class="label">音频时长：</span>
|
||||
<span class="value">{{ (audioState.durationMs / 1000).toFixed(1) }} 秒</span>
|
||||
</div>
|
||||
<div class="duration-info">
|
||||
<span class="label">人脸区间：</span>
|
||||
<span class="value">{{ (faceDuration / 1000).toFixed(1) }} 秒</span>
|
||||
</div>
|
||||
<div class="duration-info" :class="{ 'validation-passed': audioState.validationPassed, 'validation-failed': !audioState.validationPassed }">
|
||||
<span class="label">校验结果：</span>
|
||||
<span class="value">
|
||||
{{ audioState.validationPassed ? '✅ 通过' : '❌ 不通过（需至少2秒重合）' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 音频播放器 -->
|
||||
<div class="audio-player">
|
||||
<audio
|
||||
v-if="audioState.generated.audioBase64"
|
||||
:src="`data:audio/mp3;base64,${audioState.generated.audioBase64}`"
|
||||
controls
|
||||
class="audio-element"
|
||||
/>
|
||||
<audio
|
||||
v-else-if="audioState.generated.audioUrl"
|
||||
:src="audioState.generated.audioUrl"
|
||||
controls
|
||||
class="audio-element"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 重新生成按钮 -->
|
||||
<div class="regenerate-row">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
@click="generateAudio"
|
||||
:loading="audioState.generating"
|
||||
>
|
||||
重新生成
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div class="action-buttons">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:disabled="!canGenerate"
|
||||
block
|
||||
@click="generateDigitalHuman"
|
||||
>
|
||||
生成数字人视频
|
||||
</a-button>
|
||||
|
||||
<!-- 添加提示信息 -->
|
||||
<div v-if="canGenerate && !audioState.validationPassed" class="generate-hint">
|
||||
<span class="hint-icon">⚠️</span>
|
||||
<span>请先生成配音并通过时长校验</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<div class="action-buttons">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:disabled="!canGenerate"
|
||||
block
|
||||
@click="generateDigitalHuman"
|
||||
>
|
||||
生成数字人视频
|
||||
</a-button>
|
||||
|
||||
<!-- 添加提示信息 -->
|
||||
<div v-if="canGenerate && !audioState.validationPassed" class="generate-hint">
|
||||
<span class="hint-icon">⚠️</span>
|
||||
<span>请先生成配音并通过时长校验</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧结果 -->
|
||||
<ResultPanel @videoLoaded="handleVideoLoaded" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧结果 -->
|
||||
<ResultPanel @videoLoaded="handleVideoLoaded" />
|
||||
<!-- 视频选择器弹窗 -->
|
||||
<VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
|
||||
</div>
|
||||
|
||||
<!-- 视频选择器弹窗 -->
|
||||
<VideoSelector v-model:open="videoState.selectorVisible" @select="handleVideoSelect" />
|
||||
</div>
|
||||
</FullWidthLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -292,6 +294,7 @@ import { useVoiceCopyStore } from '@/stores/voiceCopy'
|
||||
import VideoSelector from '@/components/VideoSelector.vue'
|
||||
import VoiceSelector from '@/components/VoiceSelector.vue'
|
||||
import ResultPanel from '@/components/ResultPanel.vue'
|
||||
import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
|
||||
|
||||
// Controller Hook
|
||||
import { useIdentifyFaceController } from './hooks/useIdentifyFaceController'
|
||||
@@ -363,34 +366,33 @@ onMounted(async () => {
|
||||
|
||||
<style scoped lang="less">
|
||||
// ========== 公共变量 ==========
|
||||
@primary-color: var(--color-blue-500);
|
||||
@primary-bg-10: rgba(59, 130, 246, 0.1);
|
||||
@primary-bg-15: rgba(59, 130, 246, 0.15);
|
||||
@primary-bg-20: rgba(59, 130, 246, 0.2);
|
||||
@primary-bg-30: rgba(59, 130, 246, 0.3);
|
||||
@primary-bg-50: rgba(59, 130, 246, 0.5);
|
||||
@primary-color: var(--primary-color, #1677ff);
|
||||
@primary-bg-10: rgba(22, 119, 255, 0.1);
|
||||
@primary-bg-15: rgba(22, 119, 255, 0.15);
|
||||
@primary-bg-20: rgba(22, 119, 255, 0.2);
|
||||
@primary-bg-30: rgba(22, 119, 255, 0.3);
|
||||
@primary-bg-50: rgba(22, 119, 255, 0.5);
|
||||
@success-color: var(--color-green-500);
|
||||
@error-color: var(--color-red-500);
|
||||
@warning-color: var(--color-yellow-500);
|
||||
@surface-bg: var(--color-surface);
|
||||
@surface-bg-25: var(--color-surface);
|
||||
@surface-bg-30: var(--color-surface);
|
||||
@text-primary: var(--color-text);
|
||||
@text-secondary: var(--color-text-secondary);
|
||||
@panel-bg: var(--color-surface);
|
||||
@surface-bg: var(--bg-primary);
|
||||
@surface-bg-25: var(--bg-primary);
|
||||
@surface-bg-30: var(--bg-secondary);
|
||||
@text-primary: var(--text-primary);
|
||||
@text-secondary: var(--text-secondary);
|
||||
@panel-bg: var(--bg-primary);
|
||||
|
||||
/* ========== 页面布局 ========== */
|
||||
.kling-page { padding: 24px; min-height: 100vh; }
|
||||
.kling-page { padding: 0; }
|
||||
.kling-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.upload-panel,
|
||||
.result-panel {
|
||||
background: @panel-bg;
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
@@ -401,7 +403,8 @@ onMounted(async () => {
|
||||
.audio-info h4 {
|
||||
color: @text-primary;
|
||||
margin-bottom: 12px;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section h3 { margin-bottom: 12px; }
|
||||
.card-content h4, .audio-info h4 { margin-bottom: 12px; font-size: 14px; }
|
||||
@@ -410,9 +413,8 @@ onMounted(async () => {
|
||||
|
||||
/* ========== 表单控件 ========== */
|
||||
.tts-textarea {
|
||||
background: @surface-bg-30;
|
||||
border: 1px solid @primary-bg-20;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
color: @text-primary;
|
||||
}
|
||||
@@ -423,8 +425,8 @@ onMounted(async () => {
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
padding: 8px 12px;
|
||||
background: @primary-bg-10;
|
||||
border: 1px solid @primary-bg-20;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: @text-secondary;
|
||||
@@ -440,10 +442,10 @@ onMounted(async () => {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.slider-card {
|
||||
border: 1px solid @primary-bg-20;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
background: @surface-bg-25;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
.slider-info {
|
||||
display: flex;
|
||||
@@ -460,9 +462,9 @@ onMounted(async () => {
|
||||
}
|
||||
.reset-btn {
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
border: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
color: @text-primary;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
@@ -480,31 +482,29 @@ onMounted(async () => {
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border: 2px dashed @primary-bg-30;
|
||||
border-radius: 12px;
|
||||
background: @surface-bg;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.video-option-card:hover {
|
||||
border-color: @primary-bg-50;
|
||||
background: @primary-bg-10;
|
||||
border-color: @primary-color;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
.video-option-card.selected {
|
||||
border-color: @primary-color;
|
||||
background: @primary-bg-10;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
.card-icon {
|
||||
font-size: 32px;
|
||||
font-size: 24px;
|
||||
color: @primary-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: @primary-bg-10;
|
||||
border-radius: 50%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ========== 视频预览 ========== */
|
||||
@@ -513,8 +513,8 @@ onMounted(async () => {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: @surface-bg-30;
|
||||
border: 1px solid @primary-bg-20;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@@ -569,8 +569,8 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px dashed @primary-bg-30;
|
||||
border-radius: 12px;
|
||||
border: 2px dashed var(--border-light);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.upload-placeholder {
|
||||
text-align: center;
|
||||
@@ -591,9 +591,9 @@ onMounted(async () => {
|
||||
/* ========== 验证结果 ========== */
|
||||
.validation-result {
|
||||
padding: 16px;
|
||||
background: @surface-bg;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 8px;
|
||||
border: 1px solid @primary-bg-20;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
.validation-result.validation-passed {
|
||||
border-color: rgba(82, 196, 26, 0.3);
|
||||
@@ -638,7 +638,6 @@ onMounted(async () => {
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.audio-bar .progress-fill {
|
||||
@@ -654,8 +653,8 @@ onMounted(async () => {
|
||||
/* ========== 错误提示 ========== */
|
||||
.validation-error {
|
||||
padding: 12px;
|
||||
background: rgba(255, 77, 79, 0.1);
|
||||
border: 1px solid rgba(255, 77, 79, 0.3);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.error-message {
|
||||
@@ -669,14 +668,14 @@ onMounted(async () => {
|
||||
.audio-generation-section {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-radius: 12px;
|
||||
border: 1px solid @primary-bg-15;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
.generate-audio-row { margin-bottom: 16px; }
|
||||
.audio-preview {
|
||||
padding: 16px;
|
||||
background: @surface-bg;
|
||||
background: var(--bg-primary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.duration-info {
|
||||
|
||||
Reference in New Issue
Block a user