feat: 功能优化
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user