feat: 功能优化
This commit is contained in:
@@ -10,12 +10,59 @@ const themeToken = ref({
|
||||
token: {
|
||||
colorPrimary: '#3B82F6',
|
||||
colorInfo: '#2563EB',
|
||||
colorSuccess: '#10B981',
|
||||
colorWarning: '#F59E0B',
|
||||
colorError: '#EF4444',
|
||||
colorBgBase: '#F8FAFC',
|
||||
colorBgContainer: '#FFFFFF',
|
||||
colorBgElevated: '#FFFFFF',
|
||||
colorTextBase: '#334155',
|
||||
colorTextSecondary: '#64748B',
|
||||
colorTextTertiary: '#94A3B8',
|
||||
colorBorder: '#E2E8F0',
|
||||
colorBorderSecondary: '#F1F5F9',
|
||||
borderRadius: 8,
|
||||
borderRadiusSM: 4,
|
||||
borderRadiusLG: 12,
|
||||
wireframe: false,
|
||||
fontSize: 14,
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
fontSizeHeading1: 32,
|
||||
fontSizeHeading2: 24,
|
||||
fontSizeHeading3: 20,
|
||||
fontSizeHeading4: 16,
|
||||
fontSizeHeading5: 14,
|
||||
motionDurationMid: '0.15s',
|
||||
motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
boxShadowSecondary: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
|
||||
boxShadowTertiary: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
|
||||
},
|
||||
algorithm: undefined, // 可以设置为 theme.darkAlgorithm 用于暗色主题
|
||||
components: {
|
||||
Button: {
|
||||
controlHeight: 32,
|
||||
controlHeightSM: 24,
|
||||
controlHeightLG: 40,
|
||||
borderRadius: 8,
|
||||
},
|
||||
Card: {
|
||||
borderRadius: 12,
|
||||
boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
},
|
||||
Input: {
|
||||
borderRadius: 8,
|
||||
controlHeight: 32,
|
||||
},
|
||||
Table: {
|
||||
borderRadius: 8,
|
||||
headerBg: '#F8FAFC',
|
||||
},
|
||||
Menu: {
|
||||
itemHeight: 40,
|
||||
itemMarginInline: 4,
|
||||
itemMarginBlock: 2,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
@@ -36,4 +83,34 @@ onMounted(async () => {})
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ant-select-selector {
|
||||
background: var(--color-bg) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
border-radius: 4px !important;
|
||||
transition: all 0.2s !important;
|
||||
min-height: 32px !important;
|
||||
}
|
||||
|
||||
.ant-select-selection-item,
|
||||
.ant-select-selection-placeholder {
|
||||
line-height: 30px !important;
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.ant-select-focused .ant-select-selector {
|
||||
border-color: var(--color-primary) !important;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.ant-select:hover .ant-select-selector {
|
||||
border-color: var(--color-primary) !important;
|
||||
}
|
||||
|
||||
.ant-select-arrow {
|
||||
color: var(--color-text-secondary) !important;
|
||||
}
|
||||
.ant-modal .ant-modal-footer {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,14 +103,11 @@ const buttonClass = computed(() => {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
background: var(--color-slate-900);
|
||||
box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.gradient-button:hover {
|
||||
background: var(--color-slate-800);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3), 0 10px 10px -5px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.gradient-button:active {
|
||||
|
||||
@@ -45,7 +45,6 @@ const items = computed(() => {
|
||||
children: [
|
||||
{ name: '素材列表', label: '素材列表', icon: 'grid' },
|
||||
{ name: '智能混剪', label: '智能混剪', icon: 'scissors' },
|
||||
{ name: '素材分组', label: '素材分组', icon: 'folder' },
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
237
frontend/app/web-gold/src/layouts/LayoutExamples.vue
Normal file
237
frontend/app/web-gold/src/layouts/LayoutExamples.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
BasicLayout,
|
||||
CardLayout,
|
||||
TabLayout,
|
||||
FullWidthLayout,
|
||||
FormLayout
|
||||
} from './components'
|
||||
|
||||
// Tab Layout 示例数据
|
||||
const tabs = ref([
|
||||
{
|
||||
key: 'tab1',
|
||||
tab: '标签页1',
|
||||
forceRender: true
|
||||
},
|
||||
{
|
||||
key: 'tab2',
|
||||
tab: '标签页2',
|
||||
forceRender: true
|
||||
},
|
||||
{
|
||||
key: 'tab3',
|
||||
tab: '标签页3',
|
||||
forceRender: false
|
||||
}
|
||||
])
|
||||
|
||||
const activeTabKey = ref('tab1')
|
||||
|
||||
// Form Layout 示例
|
||||
const formData = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const handleFormSubmit = () => {
|
||||
submitLoading.value = true
|
||||
setTimeout(() => {
|
||||
submitLoading.value = false
|
||||
console.log('表单提交:', formData.value)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const handleFormCancel = () => {
|
||||
console.log('表单取消')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-examples">
|
||||
<h2>布局组件使用示例</h2>
|
||||
|
||||
<!-- 1. BasicLayout 示例 -->
|
||||
<h3>1. BasicLayout - 基础布局</h3>
|
||||
<BasicLayout
|
||||
title="基础布局页面"
|
||||
subtitle="这是一个基础布局的示例，适用于大部分页面"
|
||||
:show-back="true"
|
||||
@back="console.log('返回')"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="primary">额外操作</a-button>
|
||||
</template>
|
||||
|
||||
<div class="example-content">
|
||||
<p>这里放置页面内容...</p>
|
||||
<a-table :columns="[]" :data-source="[]" />
|
||||
</div>
|
||||
</BasicLayout>
|
||||
|
||||
<!-- 2. CardLayout 示例 -->
|
||||
<h3>2. CardLayout - 卡片布局</h3>
|
||||
<CardLayout
|
||||
title="卡片布局页面"
|
||||
subtitle="这是一个卡片布局的示例"
|
||||
:show-back="true"
|
||||
:show-padding="true"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="primary">操作</a-button>
|
||||
</template>
|
||||
|
||||
<div class="example-content">
|
||||
<p>卡片内容...</p>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="名称">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</CardLayout>
|
||||
|
||||
<!-- 3. TabLayout 示例 -->
|
||||
<h3>3. TabLayout - 标签页布局</h3>
|
||||
<TabLayout
|
||||
:tabs="tabs"
|
||||
v-model:active-key="activeTabKey"
|
||||
:show-back="true"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="primary">标签页操作</a-button>
|
||||
</template>
|
||||
|
||||
<template #tab1>
|
||||
<div class="tab-content">
|
||||
<h4>标签页1的内容</h4>
|
||||
<p>这是第一个标签页的内容...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tab2>
|
||||
<div class="tab-content">
|
||||
<h4>标签页2的内容</h4>
|
||||
<p>这是第二个标签页的内容...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tab3>
|
||||
<div class="tab-content">
|
||||
<h4>标签页3的内容</h4>
|
||||
<p>这是第三个标签页的内容...</p>
|
||||
</div>
|
||||
</template>
|
||||
</TabLayout>
|
||||
|
||||
<!-- 4. FullWidthLayout 示例 -->
|
||||
<h3>4. FullWidthLayout - 全宽布局</h3>
|
||||
<FullWidthLayout
|
||||
:show-back="true"
|
||||
:show-padding="true"
|
||||
>
|
||||
<template #header>
|
||||
<div class="custom-header">
|
||||
<h2>自定义头部</h2>
|
||||
<p>这是全宽布局的自定义头部</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-button type="primary">全宽操作</a-button>
|
||||
</template>
|
||||
|
||||
<div class="example-content">
|
||||
<p>全宽内容...</p>
|
||||
<a-table :columns="[]" :data-source="[]" />
|
||||
</div>
|
||||
</FullWidthLayout>
|
||||
|
||||
<!-- 5. FormLayout 示例 -->
|
||||
<h3>5. FormLayout - 表单布局</h3>
|
||||
<FormLayout
|
||||
title="表单布局页面"
|
||||
subtitle="这是一个表单布局的示例"
|
||||
:show-back="true"
|
||||
:submit-loading="submitLoading"
|
||||
@submit="handleFormSubmit"
|
||||
@cancel="handleFormCancel"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="名称">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱">
|
||||
<a-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="描述">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
placeholder="请输入描述"
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</FormLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.layout-examples {
|
||||
padding: 24px;
|
||||
background: var(--color-bg);
|
||||
min-height: 100vh;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 32px 0 16px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.example-content {
|
||||
padding: 24px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 24px;
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-card);
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.custom-header {
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -42,6 +42,6 @@ import SidebarNav from '@/components/SidebarNav.vue'
|
||||
.content-scroll {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto; /* 右侧内容区域滚动 */
|
||||
padding: 0 16px 0 16px;
|
||||
padding: 16px 0px 16px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
297
frontend/app/web-gold/src/layouts/README.md
Normal file
297
frontend/app/web-gold/src/layouts/README.md
Normal file
@@ -0,0 +1,297 @@
|
||||
# 统一布局组件
|
||||
|
||||
为项目提供5种不同类型的布局组件，保持设计一致性和代码复用性。
|
||||
|
||||
## 布局组件类型
|
||||
|
||||
### 1. BasicLayout - 基础布局
|
||||
最通用的布局组件，适用于大多数页面。
|
||||
|
||||
**特点：**
|
||||
- 标准页面头部（标题 + 副标题）
|
||||
- 灵活的内容区域
|
||||
- 支持返回按钮和额外操作
|
||||
|
||||
**使用场景：**
|
||||
- 列表页面
|
||||
- 详情页面
|
||||
- 数据统计页面
|
||||
|
||||
**示例：**
|
||||
```vue
|
||||
<template>
|
||||
<BasicLayout
|
||||
title="用户列表"
|
||||
subtitle="管理系统中的所有用户"
|
||||
:show-back="true"
|
||||
@back="handleBack"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="primary">新增用户</a-button>
|
||||
</template>
|
||||
|
||||
<a-table :columns="columns" :data-source="data" />
|
||||
</BasicLayout>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 2. CardLayout - 卡片布局
|
||||
内容包装在卡片中，提供更好的视觉层次。
|
||||
|
||||
**特点：**
|
||||
- Ant Design Card 容器
|
||||
- 可配置的边距
|
||||
- 灵活的标题栏
|
||||
|
||||
**使用场景：**
|
||||
- 表单页面
|
||||
- 配置页面
|
||||
- 详情展示页面
|
||||
|
||||
**示例：**
|
||||
```vue
|
||||
<template>
|
||||
<CardLayout
|
||||
title="用户信息"
|
||||
:show-back="true"
|
||||
:show-padding="true"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button>编辑</a-button>
|
||||
</template>
|
||||
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="姓名">
|
||||
<a-input v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</CardLayout>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 3. TabLayout - 标签页布局
|
||||
多标签页内容组织。
|
||||
|
||||
**特点：**
|
||||
- 动态标签页
|
||||
- 支持懒加载
|
||||
- 自定义标签页内容
|
||||
|
||||
**使用场景：**
|
||||
- 设置页面
|
||||
- 数据对比
|
||||
- 多模块内容
|
||||
|
||||
**示例：**
|
||||
```vue
|
||||
<template>
|
||||
<TabLayout
|
||||
:tabs="tabs"
|
||||
v-model:active-key="activeKey"
|
||||
@change="handleTabChange"
|
||||
>
|
||||
<template #tab1>
|
||||
<div>标签页1内容</div>
|
||||
</template>
|
||||
|
||||
<template #tab2>
|
||||
<div>标签页2内容</div>
|
||||
</template>
|
||||
</TabLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const tabs = ref([
|
||||
{ key: 'tab1', tab: '基础信息', forceRender: true },
|
||||
{ key: 'tab2', tab: '高级设置', forceRender: false }
|
||||
])
|
||||
</script>
|
||||
```
|
||||
|
||||
### 4. FullWidthLayout - 全宽布局
|
||||
充分利用屏幕宽度的布局。
|
||||
|
||||
**特点：**
|
||||
- 全宽度内容
|
||||
- 自定义头部
|
||||
- 无卡片包装
|
||||
|
||||
**使用场景：**
|
||||
- 数据可视化
|
||||
- 宽屏内容展示
|
||||
- 全屏应用
|
||||
|
||||
**示例：**
|
||||
```vue
|
||||
<template>
|
||||
<FullWidthLayout :show-back="true">
|
||||
<template #header>
|
||||
<h2>数据分析仪表板</h2>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-button-group>
|
||||
<a-button>导出</a-button>
|
||||
<a-button>刷新</a-button>
|
||||
</a-button-group>
|
||||
</template>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<!-- 图表组件 -->
|
||||
</div>
|
||||
</FullWidthLayout>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 5. FormLayout - 表单布局
|
||||
专门用于表单页面。
|
||||
|
||||
**特点：**
|
||||
- 居中的表单容器
|
||||
- 内置提交/取消按钮
|
||||
- 加载状态管理
|
||||
|
||||
**使用场景：**
|
||||
- 创建/编辑页面
|
||||
- 复杂表单
|
||||
- 向导式表单
|
||||
|
||||
**示例：**
|
||||
```vue
|
||||
<template>
|
||||
<FormLayout
|
||||
title="创建用户"
|
||||
:submit-loading="submitting"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="姓名" required>
|
||||
<a-input v-model:value="form.name" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱" required>
|
||||
<a-input v-model:value="form.email" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</FormLayout>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 设计特色
|
||||
|
||||
### 1. 统一的设计语言
|
||||
- 使用项目的设计令牌（Design Tokens）
|
||||
- 一致的颜色、字体、间距
|
||||
- Notion 风格的标签页设计
|
||||
|
||||
### 2. 响应式设计
|
||||
- 移动端友好
|
||||
- 自适应布局
|
||||
- 弹性内容区域
|
||||
|
||||
### 3. 可访问性
|
||||
- 语义化 HTML
|
||||
- 键盘导航支持
|
||||
- 屏幕阅读器友好
|
||||
|
||||
### 4. 性能优化
|
||||
- 懒加载支持
|
||||
- keep-alive 兼容
|
||||
- 轻量级实现
|
||||
|
||||
## 导入方式
|
||||
|
||||
```javascript
|
||||
// 单独导入
|
||||
import BasicLayout from '@/layouts/components/BasicLayout.vue'
|
||||
import CardLayout from '@/layouts/components/CardLayout.vue'
|
||||
import TabLayout from '@/layouts/components/TabLayout.vue'
|
||||
import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
|
||||
import FormLayout from '@/layouts/components/FormLayout.vue'
|
||||
|
||||
// 批量导入
|
||||
import {
|
||||
BasicLayout,
|
||||
CardLayout,
|
||||
TabLayout,
|
||||
FullWidthLayout,
|
||||
FormLayout
|
||||
} from '@/layouts/components'
|
||||
```
|
||||
|
||||
## Props 说明
|
||||
|
||||
### 通用 Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| showBack | Boolean | false | 是否显示返回按钮 |
|
||||
| title | String | '' | 页面标题 |
|
||||
| subtitle | String | '' | 页面副标题 |
|
||||
|
||||
### TabLayout 特有 Props
|
||||
|
||||
| 属性 | 类型 | 必需 | 说明 |
|
||||
|------|------|------|------|
|
||||
| tabs | Array | 是 | 标签页配置数组 |
|
||||
| activeKey | String | 否 | 当前激活的标签页 |
|
||||
|
||||
### FormLayout 特有 Props
|
||||
|
||||
| 属性 | 类型 | 默认值 | 说明 |
|
||||
|------|------|--------|------|
|
||||
| submitText | String | '提交' | 提交按钮文字 |
|
||||
| cancelText | String | '取消' | 取消按钮文字 |
|
||||
| showCancel | Boolean | true | 是否显示取消按钮 |
|
||||
| submitLoading | Boolean | false | 提交按钮加载状态 |
|
||||
|
||||
## 插槽（Slots）
|
||||
|
||||
### 通用插槽
|
||||
|
||||
- `#extra` - 头部右侧额外操作区域
|
||||
- `#header` - 自定义头部内容（某些布局）
|
||||
|
||||
### TabLayout 插槽
|
||||
|
||||
- `#tab1`, `#tab2`, ... - 标签页内容，名称为 tabs 中的 key
|
||||
|
||||
## 事件（Events）
|
||||
|
||||
### 通用事件
|
||||
|
||||
- `@back` - 点击返回按钮时触发
|
||||
|
||||
### TabLayout 事件
|
||||
|
||||
- `@change(key)` - 标签页切换时触发
|
||||
|
||||
### FormLayout 事件
|
||||
|
||||
- `@submit` - 点击提交按钮时触发
|
||||
- `@cancel` - 点击取消按钮时触发
|
||||
|
||||
## 最佳实践
|
||||
|
||||
1. **选择合适的布局**
|
||||
- 简单内容 → BasicLayout
|
||||
- 需要卡片容器 → CardLayout
|
||||
- 多标签内容 → TabLayout
|
||||
- 宽屏内容 → FullWidthLayout
|
||||
- 表单页面 → FormLayout
|
||||
|
||||
2. **保持一致性**
|
||||
- 使用统一的设计令牌
|
||||
- 遵循项目的设计规范
|
||||
- 保持交互行为一致
|
||||
|
||||
3. **性能优化**
|
||||
- 设置合适的 `forceRender` 属性
|
||||
- 使用 `keep-alive` 缓存组件
|
||||
- 避免不必要的重渲染
|
||||
|
||||
4. **可访问性**
|
||||
- 为所有交互元素添加适当的标签
|
||||
- 确保键盘导航正常工作
|
||||
- 提供适当的焦点管理
|
||||
125
frontend/app/web-gold/src/layouts/components/BasicLayout.vue
Normal file
125
frontend/app/web-gold/src/layouts/components/BasicLayout.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({ name: 'BasicLayout' })
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
extra: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['back'])
|
||||
|
||||
// Methods
|
||||
const handleBack = () => {
|
||||
emit('back')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="basic-layout">
|
||||
<!-- 页面头部 -->
|
||||
<div class="basic-layout__header">
|
||||
<div class="header-left">
|
||||
<a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
|
||||
<template #icon>
|
||||
<ArrowLeftOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<h1 v-if="title" class="header-title">{{ title }}</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<div class="basic-layout__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.basic-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.basic-layout__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: var(--space-xs);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.basic-layout__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
background: var(--bg-primary);
|
||||
padding: var(--space-md);
|
||||
}
|
||||
</style>
|
||||
155
frontend/app/web-gold/src/layouts/components/CardLayout.vue
Normal file
155
frontend/app/web-gold/src/layouts/components/CardLayout.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<script setup>
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({ name: 'CardLayout' })
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showPadding: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['back'])
|
||||
|
||||
// Methods
|
||||
const handleBack = () => {
|
||||
emit('back')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-layout">
|
||||
<!-- 页面头部 -->
|
||||
<div class="card-layout__header">
|
||||
<div class="header-left">
|
||||
<a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
|
||||
<template #icon>
|
||||
<ArrowLeftOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<h1 v-if="title" class="header-title">{{ title }}</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片内容 -->
|
||||
<div class="card-layout__card" :class="{ 'no-padding': !showPadding }">
|
||||
<div v-if="!$slots.title && title" class="card-header">
|
||||
{{ title }}
|
||||
</div>
|
||||
<slot v-else name="title"></slot>
|
||||
|
||||
<div class="card-layout__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.card-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-layout__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: var(--space-xs);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-layout__card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
|
||||
&.no-padding {
|
||||
.card-layout__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.card-layout__content {
|
||||
flex: 1;
|
||||
padding: var(--space-md);
|
||||
overflow: auto;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
</style>
|
||||
194
frontend/app/web-gold/src/layouts/components/FormLayout.vue
Normal file
194
frontend/app/web-gold/src/layouts/components/FormLayout.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<script setup>
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({ name: 'FormLayout' })
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
submitText: {
|
||||
type: String,
|
||||
default: '提交'
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
submitLoading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showFooter: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['submit', 'cancel', 'back'])
|
||||
|
||||
// Methods
|
||||
const handleSubmit = () => {
|
||||
emit('submit')
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
emit('back')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-layout">
|
||||
<!-- 页面头部 -->
|
||||
<div class="form-layout__header">
|
||||
<div class="header-left">
|
||||
<a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
|
||||
<template #icon>
|
||||
<ArrowLeftOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<h1 v-if="title" class="header-title">{{ title }}</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单内容 -->
|
||||
<div class="form-layout__content">
|
||||
<div class="form-container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div v-if="showFooter" class="form-layout__footer">
|
||||
<div class="footer-content">
|
||||
<a-space :size="12">
|
||||
<a-button v-if="showCancel" @click="handleCancel">
|
||||
{{ cancelText }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
:loading="submitLoading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
{{ submitText }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.form-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.form-layout__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: var(--space-xs);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-layout__content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-2xl);
|
||||
}
|
||||
|
||||
.form-layout__footer {
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-top: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
122
frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
Normal file
122
frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({ name: 'FullWidthLayout' })
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showPadding: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['back'])
|
||||
|
||||
// Methods
|
||||
const handleBack = () => {
|
||||
emit('back')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="full-width-layout">
|
||||
<!-- 页面头部 -->
|
||||
<div v-if="$slots.header || showBack" class="full-width-layout__header">
|
||||
<div class="header-left">
|
||||
<a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
|
||||
<template #icon>
|
||||
<ArrowLeftOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<div class="header-content">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 全宽内容 -->
|
||||
<div
|
||||
class="full-width-layout__content"
|
||||
:class="{ 'no-padding': !showPadding }"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.full-width-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.full-width-layout__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: var(--space-xs);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.full-width-layout__content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--bg-secondary);
|
||||
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
182
frontend/app/web-gold/src/layouts/components/TabLayout.vue
Normal file
182
frontend/app/web-gold/src/layouts/components/TabLayout.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
defineOptions({ name: 'TabLayout' })
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
tabs: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
activeKey: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['update:activeKey', 'change', 'back'])
|
||||
|
||||
// State
|
||||
const activeTabKey = ref(props.activeKey)
|
||||
|
||||
// Watch for external changes
|
||||
watch(() => props.activeKey, (newKey) => {
|
||||
if (newKey !== activeTabKey.value) {
|
||||
activeTabKey.value = newKey
|
||||
}
|
||||
})
|
||||
|
||||
// Methods
|
||||
const handleTabChange = (key) => {
|
||||
activeTabKey.value = key
|
||||
emit('update:activeKey', key)
|
||||
emit('change', key)
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
emit('back')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tab-layout">
|
||||
<!-- 页面头部 -->
|
||||
<div v-if="$slots.header || showBack" class="tab-layout__header">
|
||||
<div class="header-left">
|
||||
<a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
|
||||
<template #icon>
|
||||
<ArrowLeftOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<div class="header-content">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页导航 -->
|
||||
<div class="tab-nav">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="tab-item"
|
||||
:class="{ 'active': activeTabKey === tab.key }"
|
||||
@click="handleTabChange(tab.key)"
|
||||
>
|
||||
{{ tab.tab }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 标签页内容 -->
|
||||
<div class="tab-content">
|
||||
<slot :name="activeTabKey"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tab-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-layout__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
padding: var(--space-xs);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.15s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--text-primary);
|
||||
border-bottom-color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--bg-primary);
|
||||
padding: var(--space-md);
|
||||
}
|
||||
</style>
|
||||
6
frontend/app/web-gold/src/layouts/components/index.js
Normal file
6
frontend/app/web-gold/src/layouts/components/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
// 布局组件统一导出
|
||||
export { default as BasicLayout } from './BasicLayout.vue'
|
||||
export { default as CardLayout } from './CardLayout.vue'
|
||||
export { default as TabLayout } from './TabLayout.vue'
|
||||
export { default as FullWidthLayout } from './FullWidthLayout.vue'
|
||||
export { default as FormLayout } from './FormLayout.vue'
|
||||
@@ -48,7 +48,7 @@
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-700: #374151;
|
||||
|
||||
/* 主题设计令牌 */
|
||||
/* 主题设计令牌 - 现代化风格 */
|
||||
--color-bg: var(--color-slate-50);
|
||||
--color-surface: #ffffff;
|
||||
--color-header: var(--color-slate-900);
|
||||
@@ -61,6 +61,24 @@
|
||||
--color-primary: var(--color-blue-500);
|
||||
--color-primary-hover: var(--color-blue-600);
|
||||
|
||||
/* 新增：现代化的功能色 */
|
||||
--color-success: #10b981;
|
||||
--color-success-bg: #ecfdf5;
|
||||
--color-warning: #f59e0b;
|
||||
--color-warning-bg: #fffbeb;
|
||||
--color-error: #ef4444;
|
||||
--color-error-bg: #fef2f2;
|
||||
|
||||
/* 新增：Ant Design Vue 主题覆盖 */
|
||||
--ant-primary-color: var(--color-primary);
|
||||
--ant-primary-color-hover: var(--color-primary-hover);
|
||||
--ant-primary-color-active: var(--color-blue-700);
|
||||
--ant-success-color: var(--color-success);
|
||||
--ant-warning-color: var(--color-warning);
|
||||
--ant-error-color: var(--color-error);
|
||||
--ant-border-radius-base: var(--radius-button);
|
||||
--ant-border-radius-sm: 4px;
|
||||
|
||||
/* 尺寸系统 */
|
||||
--radius-card: 12px;
|
||||
--radius-button: 8px;
|
||||
@@ -81,6 +99,41 @@
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
|
||||
/* ================================
|
||||
Notion 风格设计变量
|
||||
================================ */
|
||||
/* 极简配色 */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #fafafa;
|
||||
--bg-hover: #f7f6f3;
|
||||
--bg-selected: #e9e9e7;
|
||||
|
||||
/* 文字颜色 */
|
||||
--text-primary: #37352f;
|
||||
--text-secondary: #787774;
|
||||
--text-tertiary: #9b9a97;
|
||||
--text-quaternary: #c1c0bd;
|
||||
|
||||
/* 边框和分割线 */
|
||||
--border-light: #e9e9e7;
|
||||
--border-medium: #d3d3d1;
|
||||
--border-strong: #c1c0bd;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
|
||||
/* 间距 */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
--space-3xl: 64px;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
|
||||
@@ -23,7 +23,6 @@ const promptStore = usePromptStore()
|
||||
const {
|
||||
data,
|
||||
selectedRowKeys,
|
||||
expandedRowKeys,
|
||||
saveTableDataToSession,
|
||||
loadTableDataFromSession,
|
||||
processApiResponse,
|
||||
@@ -36,10 +35,9 @@ const {
|
||||
batchAnalyzeLoading,
|
||||
globalLoading,
|
||||
globalLoadingText,
|
||||
analyzeVideo,
|
||||
batchAnalyze,
|
||||
getVoiceText,
|
||||
} = useBenchmarkAnalysis(data, expandedRowKeys, saveTableDataToSession)
|
||||
} = useBenchmarkAnalysis(data, saveTableDataToSession)
|
||||
|
||||
// ==================== 表单状态 ====================
|
||||
const form = ref({
|
||||
@@ -110,8 +108,8 @@ async function handleExportToExcel() {
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedRowKeys.value.length > 10) {
|
||||
message.warning('最多只能导出10条数据，请重新选择')
|
||||
if (selectedRowKeys.value.length > 20) {
|
||||
message.warning('最多只能导出20条数据，请重新选择')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -189,26 +187,13 @@ async function handleResetForm() {
|
||||
await clearData()
|
||||
}
|
||||
|
||||
// ==================== 提示词操作函数 ====================
|
||||
function handleCopyPrompt(row) {
|
||||
if (!row.prompt) {
|
||||
message.warning('没有提示词可复制')
|
||||
return
|
||||
}
|
||||
|
||||
navigator.clipboard.writeText(row.prompt).then(() => {
|
||||
message.success('提示词已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
message.error('复制失败')
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 批量提示词操作函数 ====================
|
||||
function handleCopyBatchPrompt(prompt) {
|
||||
if (!prompt || !prompt.trim()) {
|
||||
message.warning('没有提示词可复制')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
navigator.clipboard.writeText(prompt).then(() => {
|
||||
message.success('提示词已复制到剪贴板')
|
||||
}).catch(() => {
|
||||
@@ -216,40 +201,25 @@ function handleCopyBatchPrompt(prompt) {
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 创作相关函数 ====================
|
||||
function handleCreateContent(row) {
|
||||
promptStore.setPrompt(row.prompt, row)
|
||||
router.push('/content-style/copywriting')
|
||||
}
|
||||
|
||||
function handleUseBatchPrompt(prompt) {
|
||||
if (!prompt || !prompt.trim()) {
|
||||
message.warning('暂无批量生成的提示词')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
promptStore.setPrompt(prompt, { batch: true })
|
||||
router.push('/content-style/copywriting')
|
||||
}
|
||||
|
||||
// ==================== 保存提示词到服务器 ====================
|
||||
function handleOpenSavePromptModal(row, batchPrompt = null) {
|
||||
if (row) {
|
||||
// 单个视频的提示词
|
||||
if (!row.prompt || !row.prompt.trim()) {
|
||||
message.warning('没有提示词可保存')
|
||||
return
|
||||
}
|
||||
savePromptContent.value = row.prompt
|
||||
} else {
|
||||
// 批量提示词：使用传入的 batchPrompt（AI 生成的内容），而不是原始的 mergedText
|
||||
const promptToSave = batchPrompt || batchPromptMergedText.value
|
||||
if (!promptToSave || !promptToSave.trim()) {
|
||||
message.warning('没有提示词可保存')
|
||||
return
|
||||
}
|
||||
savePromptContent.value = promptToSave
|
||||
function handleOpenSavePromptModal(batchPrompt = null) {
|
||||
// 批量提示词：使用传入的 batchPrompt（AI 生成的内容），而不是原始的 mergedText
|
||||
const promptToSave = batchPrompt || batchPromptMergedText.value
|
||||
if (!promptToSave || !promptToSave.trim()) {
|
||||
message.warning('没有提示词可保存')
|
||||
return
|
||||
}
|
||||
savePromptContent.value = promptToSave
|
||||
savePromptModalVisible.value = true
|
||||
}
|
||||
|
||||
@@ -277,14 +247,9 @@ defineOptions({ name: 'ContentStyleBenchmark' })
|
||||
<BenchmarkTable
|
||||
:data="data"
|
||||
v-model:selectedRowKeys="selectedRowKeys"
|
||||
v-model:expandedRowKeys="expandedRowKeys"
|
||||
:loading="loading"
|
||||
@analyze="analyzeVideo"
|
||||
@export="handleExportToExcel"
|
||||
@batch-analyze="handleBatchAnalyze"
|
||||
@copy="handleCopyPrompt"
|
||||
@save-to-server="handleOpenSavePromptModal"
|
||||
@create-content="handleCreateContent"
|
||||
/>
|
||||
|
||||
<!-- 空态显示 -->
|
||||
@@ -312,7 +277,7 @@ defineOptions({ name: 'ContentStyleBenchmark' })
|
||||
:merged-text="batchPromptMergedText"
|
||||
:text-count="batchPromptTextCount"
|
||||
@copy="handleCopyBatchPrompt"
|
||||
@save="(prompt) => handleOpenSavePromptModal(null, prompt)"
|
||||
@save="(prompt) => handleOpenSavePromptModal(prompt)"
|
||||
@use="handleUseBatchPrompt"
|
||||
/>
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<script setup>
|
||||
import { reactive, h } from 'vue'
|
||||
import { DownloadOutlined } from '@ant-design/icons-vue'
|
||||
import { formatTime } from '../utils/benchmarkUtils'
|
||||
import ExpandedRowContent from './ExpandedRowContent.vue'
|
||||
import GradientButton from '@/components/GradientButton.vue'
|
||||
|
||||
defineProps({
|
||||
@@ -14,10 +12,6 @@ import GradientButton from '@/components/GradientButton.vue'
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
expandedRowKeys: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -26,34 +20,28 @@ import GradientButton from '@/components/GradientButton.vue'
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:selectedRowKeys',
|
||||
'update:expandedRowKeys',
|
||||
'analyze',
|
||||
'export',
|
||||
'batchAnalyze',
|
||||
'copy',
|
||||
'saveToServer',
|
||||
'createContent',
|
||||
])
|
||||
|
||||
const defaultColumns = [
|
||||
{ title: '封面', key: 'cover', dataIndex: 'cover', width: 120, resizable: true },
|
||||
{ title: '描述', key: 'desc', dataIndex: 'desc', width: 280, resizable: true, ellipsis: true },
|
||||
{ title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true,
|
||||
{ title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
|
||||
{ title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true,
|
||||
{ title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.comment_count || 0) - (b.comment_count || 0) },
|
||||
{ title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true,
|
||||
{ title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
|
||||
{ title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true,
|
||||
{ title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
|
||||
{ title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true,
|
||||
{ title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true,
|
||||
sorter: (a, b) => (a.duration_s || 0) - (b.duration_s || 0) },
|
||||
{ title: '置顶', key: 'is_top', dataIndex: 'is_top', width: 70, resizable: true },
|
||||
{ title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true,
|
||||
{ title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true,
|
||||
sorter: (a, b) => (a.create_time || 0) - (b.create_time || 0) },
|
||||
{ title: '链接', key: 'share_url', dataIndex: 'share_url', width: 80, resizable: true,
|
||||
customRender: ({ record }) => record.share_url ? h('a', { href: record.share_url, target: '_blank' }, '打开') : null },
|
||||
{ title: '操作', key: 'action', width: 100, resizable: true, fixed: 'right' },
|
||||
]
|
||||
|
||||
const columns = reactive([...defaultColumns])
|
||||
@@ -61,57 +49,36 @@ const columns = reactive([...defaultColumns])
|
||||
function onSelectChange(selectedKeys) {
|
||||
emit('update:selectedRowKeys', selectedKeys)
|
||||
}
|
||||
|
||||
function onExpandedRowKeysChange(keys) {
|
||||
emit('update:expandedRowKeys', keys)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="card results-card" v-if="data.length > 0">
|
||||
<div class="section-header">
|
||||
<div class="section-title">分析结果</div>
|
||||
<a-space align="center">
|
||||
<a-button
|
||||
size="small"
|
||||
type="default"
|
||||
@click="$emit('export')"
|
||||
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 10">
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
导出Excel ({{ selectedRowKeys.length }}/10)
|
||||
</a-button>
|
||||
<div class="button-group">
|
||||
<GradientButton
|
||||
:text="`批量分析 (${selectedRowKeys.length})`"
|
||||
:text="`导出Excel (${selectedRowKeys.length}/20)`"
|
||||
size="small"
|
||||
@click="$emit('export')"
|
||||
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
|
||||
icon="download"
|
||||
/>
|
||||
<GradientButton
|
||||
:text="`批量分析 (${selectedRowKeys.length}/20)`"
|
||||
size="small"
|
||||
@click="$emit('batchAnalyze')"
|
||||
:disabled="selectedRowKeys.length === 0"
|
||||
:disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
:dataSource="data"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
|
||||
:expandedRowKeys="expandedRowKeys"
|
||||
@expandedRowsChange="onExpandedRowKeysChange"
|
||||
:expandable="{
|
||||
expandRowByClick: false
|
||||
}"
|
||||
<a-table
|
||||
:dataSource="data"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:row-selection="{ selectedRowKeys, onChange: onSelectChange }"
|
||||
:rowKey="(record) => String(record.id)"
|
||||
:loading="loading"
|
||||
class="benchmark-table">
|
||||
<template #expandedRowRender="{ record }">
|
||||
<ExpandedRowContent
|
||||
:record="record"
|
||||
@analyze="(row) => $emit('analyze', row)"
|
||||
@copy="(row) => $emit('copy', row)"
|
||||
@save-to-server="(row) => $emit('saveToServer', row)"
|
||||
@create-content="(row) => $emit('createContent', row)"
|
||||
/>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'cover'">
|
||||
<img v-if="record.cover" :src="record.cover" alt="cover" loading="lazy"
|
||||
@@ -147,18 +114,6 @@ function onExpandedRowKeysChange(keys) {
|
||||
<a v-if="record.share_url" :href="record.share_url" target="_blank" class="link-btn">打开</a>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<GradientButton
|
||||
text="分析"
|
||||
size="small"
|
||||
:loading="record._analyzing"
|
||||
loading-text="分析中…"
|
||||
:disabled="record._analyzing"
|
||||
@click="$emit('analyze', record)"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</section>
|
||||
@@ -184,15 +139,10 @@ function onExpandedRowKeysChange(keys) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-header .ant-space {
|
||||
.button-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-header .ant-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
<template>
|
||||
<div class="voice-copy-page">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<h1>配音管理</h1>
|
||||
<a-button type="primary" @click="handleCreate">
|
||||
<PlusOutlined />
|
||||
新建配音
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<BasicLayout
|
||||
title="配音管理"
|
||||
:show-back="false"
|
||||
>
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleCreate">
|
||||
<PlusOutlined />
|
||||
新建配音
|
||||
</a-button>
|
||||
<a-input
|
||||
v-model:value="searchParams.name"
|
||||
placeholder="搜索配音名称"
|
||||
@@ -20,7 +18,7 @@
|
||||
>
|
||||
<SearchOutlined />
|
||||
</a-input>
|
||||
<a-button type="primary" @click="handleSearch">查询</a-button>
|
||||
<a-button @click="handleSearch">查询</a-button>
|
||||
<a-button @click="handleReset">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
@@ -101,7 +99,7 @@
|
||||
</a-modal>
|
||||
|
||||
<audio ref="audioPlayer" style="display: none" />
|
||||
</div>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -112,6 +110,7 @@ import { VoiceService } from '@/api/voice'
|
||||
import { MaterialService } from '@/api/material'
|
||||
import { useUpload } from '@/composables/useUpload'
|
||||
import dayjs from 'dayjs'
|
||||
import BasicLayout from '@/layouts/components/BasicLayout.vue'
|
||||
|
||||
// ========== 常量 ==========
|
||||
const DEFAULT_FORM_DATA = {
|
||||
@@ -411,38 +410,17 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.voice-copy-page {
|
||||
padding: 24px;
|
||||
background: var(--color-bg);
|
||||
.search-bar {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-header .ant-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-bar,
|
||||
.table-container {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.voice-name {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
|
||||
@@ -1,848 +0,0 @@
|
||||
<template>
|
||||
<div class="material-list">
|
||||
<div class="material-list__header">
|
||||
<h1 class="material-list__title">素材列表</h1>
|
||||
<div class="material-list__actions">
|
||||
<a-button type="primary" @click="handleOpenUploadModal">
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
上传素材
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="selectedFileIds.length > 0"
|
||||
type="primary"
|
||||
ghost
|
||||
@click="handleOpenGroupModal"
|
||||
>
|
||||
批量分组 ({{ selectedFileIds.length }})
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
ghost
|
||||
@click="$router.push('/material/mix')"
|
||||
>
|
||||
素材混剪
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="selectedFileIds.length > 0"
|
||||
type="primary"
|
||||
status="danger"
|
||||
@click="handleBatchDelete"
|
||||
>
|
||||
批量删除 ({{ selectedFileIds.length }})
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选条件 -->
|
||||
<div class="material-list__filters">
|
||||
<a-space>
|
||||
<a-select
|
||||
v-model:value="filters.fileCategory"
|
||||
style="width: 120px"
|
||||
placeholder="文件分类"
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<a-select-option value="">全部分类</a-select-option>
|
||||
<a-select-option value="video">视频</a-select-option>
|
||||
<a-select-option value="generate">生成</a-select-option>
|
||||
<a-select-option value="audio">音频</a-select-option>
|
||||
<a-select-option value="mix">混剪</a-select-option>
|
||||
<a-select-option value="voice">配音</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-input
|
||||
v-model="filters.fileName"
|
||||
placeholder="搜索文件名"
|
||||
style="width: 200px"
|
||||
allow-clear
|
||||
@press-enter="handleFilterChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-range-picker
|
||||
v-model:value="filters.createTime"
|
||||
style="width: 300px"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
:placeholder="['开始日期', '结束日期']"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
<a-button type="primary" @click="handleFilterChange">查询</a-button>
|
||||
<a-button @click="handleResetFilters">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- 文件列表 -->
|
||||
<div class="material-list__content">
|
||||
<a-spin :spinning="loading" tip="加载中..." style="width: 100%; min-height: 400px;">
|
||||
<template v-if="fileList.length > 0">
|
||||
<div class="material-grid">
|
||||
<div
|
||||
v-for="file in fileList"
|
||||
:key="file.id"
|
||||
class="material-item"
|
||||
:class="{ 'material-item--selected': selectedFileIds.includes(file.id) }"
|
||||
@click="handleFileClick(file)"
|
||||
>
|
||||
<div class="material-item__content">
|
||||
<!-- 预览图 -->
|
||||
<div class="material-item__preview">
|
||||
<!-- 视频文件：只使用 coverBase64（本地缓存），不使用任何OSS URL -->
|
||||
<img
|
||||
v-if="file.isVideo && file.coverBase64"
|
||||
:src="file.coverBase64"
|
||||
:alt="file.fileName"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<!-- 视频文件：如果没有封面，显示占位符（不使用视频标签） -->
|
||||
<div v-else-if="file.isVideo" class="material-item__placeholder">
|
||||
<FileOutlined />
|
||||
</div>
|
||||
<!-- 图片或其他文件：使用图片标签 -->
|
||||
<img
|
||||
v-else-if="!file.isVideo && (file.coverUrl || file.coverBase64 || file.previewUrl)"
|
||||
:src="file.coverUrl || file.coverBase64 || file.previewUrl"
|
||||
:alt="file.fileName"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<div v-else class="material-item__placeholder">
|
||||
<FileOutlined />
|
||||
</div>
|
||||
<!-- 文件类型标识 -->
|
||||
<div class="material-item__badge">
|
||||
<a-tag v-if="file.isVideo" color="red">视频</a-tag>
|
||||
<a-tag v-else-if="file.isImage" color="blue">图片</a-tag>
|
||||
<a-tag v-else color="gray">文件</a-tag>
|
||||
</div>
|
||||
<!-- 分组图标（仅视频文件显示） -->
|
||||
<div v-if="file.isVideo" class="material-item__group" @click.stop="handleSingleGroup(file)">
|
||||
<TagsOutlined />
|
||||
</div>
|
||||
<!-- 下载图标 -->
|
||||
<div class="material-item__download" @click.stop="handleDownloadFile(file)">
|
||||
<DownloadOutlined />
|
||||
</div>
|
||||
<!-- 删除图标 -->
|
||||
<div class="material-item__delete" @click.stop="handleDeleteFile(file)">
|
||||
<DeleteOutlined />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文件信息 -->
|
||||
<div class="material-item__info">
|
||||
<div class="material-item__name" :title="file.fileName">
|
||||
{{ file.fileName }}
|
||||
</div>
|
||||
<div class="material-item__meta">
|
||||
<span>{{ formatFileSize(file.fileSize) }}</span>
|
||||
<span>{{ formatDate(file.createTime) }}</span>
|
||||
<span v-if="file.groupId" class="material-item__group-name">
|
||||
<TagsOutlined /> {{ getGroupName(file.groupId) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-empty description="暂无素材" />
|
||||
</template>
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="material-list__pagination">
|
||||
<a-pagination
|
||||
v-model:current="pagination.pageNo"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:show-total="(total) => `共 ${total} 条`"
|
||||
:show-size-changer="true"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 上传对话框 -->
|
||||
<MaterialUploadModal
|
||||
v-model:visible="uploadModalVisible"
|
||||
:uploading="uploading"
|
||||
:file-category="filters.fileCategory"
|
||||
@confirm="handleConfirmUpload"
|
||||
@cancel="handleUploadCancel"
|
||||
/>
|
||||
|
||||
<!-- 批量分组模态框 -->
|
||||
<MaterialBatchGroupModal
|
||||
v-model:open="groupModalVisible"
|
||||
:group-list="groupList"
|
||||
:file-count="selectedFileIds.length"
|
||||
:file-name="groupingFileName"
|
||||
@confirm="handleBatchGroup"
|
||||
@cancel="handleGroupCancel"
|
||||
/>
|
||||
|
||||
<!-- 素材混剪模态框 -->
|
||||
<MaterialMixModal
|
||||
ref="mixModalRef"
|
||||
v-model:open="mixModalVisible"
|
||||
:loading="mixing"
|
||||
:group-list="groupList"
|
||||
:all-audio-files="allAudioFiles"
|
||||
@confirm="handleMixConfirm"
|
||||
@cancel="handleMixCancel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
UploadOutlined,
|
||||
SearchOutlined,
|
||||
FileOutlined,
|
||||
DeleteOutlined,
|
||||
TagsOutlined,
|
||||
DownloadOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { MaterialService, MaterialGroupService } from '@/api/material'
|
||||
import MaterialUploadModal from '@/components/material/MaterialUploadModal.vue'
|
||||
import MaterialBatchGroupModal from '@/components/material/MaterialBatchGroupModal.vue'
|
||||
import MaterialMixModal from '@/components/material/MaterialMixModal.vue'
|
||||
import { formatFileSize, formatDate } from '@/utils/file'
|
||||
import { MixTaskService } from '@/api/mixTask'
|
||||
|
||||
// 数据
|
||||
const loading = ref(false)
|
||||
const fileList = ref([])
|
||||
const selectedFileIds = ref([])
|
||||
const uploadModalVisible = ref(false)
|
||||
const uploading = ref(false)
|
||||
const mixModalVisible = ref(false)
|
||||
const mixing = ref(false)
|
||||
|
||||
// 分组相关
|
||||
const groupModalVisible = ref(false)
|
||||
const groupList = ref([])
|
||||
const groupingFileId = ref(null) // 当前正在分组的单个文件ID
|
||||
|
||||
// 获取单个文件分组的文件名
|
||||
const groupingFileName = computed(() => {
|
||||
if (!groupingFileId.value) return ''
|
||||
const file = fileList.value.find(f => f.id === groupingFileId.value)
|
||||
return file?.fileName || ''
|
||||
})
|
||||
|
||||
// 获取分组名称（根据groupId）
|
||||
const getGroupName = (groupId) => {
|
||||
if (!groupId) return ''
|
||||
const group = groupList.value.find(g => g.id === groupId)
|
||||
return group?.name || ''
|
||||
}
|
||||
|
||||
// 混剪相关
|
||||
const mixModalRef = ref(null) // 混剪模态框的 ref
|
||||
|
||||
// 筛选条件
|
||||
const filters = reactive({
|
||||
fileCategory: 'video', // 默认分类为视频
|
||||
fileName: '',
|
||||
createTime: undefined
|
||||
})
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 构建查询参数
|
||||
const buildQueryParams = () => {
|
||||
const params = {
|
||||
pageNo: pagination.pageNo,
|
||||
pageSize: pagination.pageSize,
|
||||
fileCategory: filters.fileCategory || undefined,
|
||||
fileName: filters.fileName || undefined
|
||||
}
|
||||
|
||||
// 处理日期范围
|
||||
if (filters.createTime && Array.isArray(filters.createTime) && filters.createTime.length === 2) {
|
||||
params.createTime = [
|
||||
`${filters.createTime[0]} 00:00:00`,
|
||||
`${filters.createTime[1]} 23:59:59`
|
||||
]
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
|
||||
// 加载文件列表
|
||||
const loadFileList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await MaterialService.getFilePage(buildQueryParams())
|
||||
if (res.code === 0) {
|
||||
const files = res.data.list || []
|
||||
|
||||
fileList.value = files
|
||||
pagination.total = res.data.total || 0
|
||||
} else {
|
||||
message.error(res.msg || '加载失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载文件列表失败:', error)
|
||||
message.error('加载失败，请重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 打开上传对话框
|
||||
const handleOpenUploadModal = () => {
|
||||
uploadModalVisible.value = true
|
||||
}
|
||||
|
||||
// 确认上传
|
||||
const handleConfirmUpload = async (filesWithCover, fileCategory) => {
|
||||
if (!filesWithCover?.length) {
|
||||
message.warning('请选择文件')
|
||||
return
|
||||
}
|
||||
|
||||
uploading.value = true
|
||||
const uploadCategory = fileCategory || 'video'
|
||||
|
||||
try {
|
||||
const results = await Promise.allSettled(
|
||||
filesWithCover.map(({ file, coverBase64 }) =>
|
||||
MaterialService.uploadFile(file, uploadCategory, coverBase64)
|
||||
)
|
||||
)
|
||||
|
||||
const successCount = results.filter(r => r.status === 'fulfilled').length
|
||||
const failCount = results.length - successCount
|
||||
|
||||
if (successCount > 0) {
|
||||
message.success(`成功上传 ${successCount} 个文件${failCount ? `，${failCount} 个失败` : ''}`)
|
||||
uploadModalVisible.value = false
|
||||
loadFileList()
|
||||
} else {
|
||||
message.error('所有文件上传失败，请重试')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传失败:', error)
|
||||
message.error(error.message || '上传失败，请重试')
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 取消上传
|
||||
const handleUploadCancel = () => {
|
||||
uploadModalVisible.value = false
|
||||
}
|
||||
|
||||
// 删除文件
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedFileIds.value.length === 0) return
|
||||
|
||||
// 二次确认弹窗
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除选中的 ${selectedFileIds.value.length} 个文件吗？删除后无法恢复。`,
|
||||
okText: '确定删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await MaterialService.deleteFiles(selectedFileIds.value)
|
||||
message.success('删除成功')
|
||||
|
||||
selectedFileIds.value = []
|
||||
loadFileList()
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
message.error(error.message || '删除失败，请重试')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除单个文件
|
||||
const handleDeleteFile = (file) => {
|
||||
if (!file?.id) return
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: `确定要删除文件 "${file.fileName}" 吗？删除后无法恢复。`,
|
||||
okText: '确定删除',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
onOk: async () => {
|
||||
try {
|
||||
await MaterialService.deleteFiles([file.id])
|
||||
message.success('删除成功')
|
||||
const index = selectedFileIds.value.indexOf(file.id)
|
||||
if (index > -1) {
|
||||
selectedFileIds.value.splice(index, 1)
|
||||
}
|
||||
loadFileList()
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
message.error(error.message || '删除失败，请重试')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 下载文件
|
||||
const handleDownloadFile = (file) => {
|
||||
console.log('下载文件:', file)
|
||||
if (!file?.previewUrl) {
|
||||
message.warning('文件地址无效')
|
||||
return
|
||||
}
|
||||
|
||||
const fileUrl = file.previewUrl
|
||||
const link = document.createElement('a')
|
||||
link.href = fileUrl
|
||||
link.download = file.fileName || 'download'
|
||||
link.target = '_blank'
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
message.success('开始下载')
|
||||
}
|
||||
|
||||
// 文件点击
|
||||
const handleFileClick = (file) => {
|
||||
const index = selectedFileIds.value.indexOf(file.id)
|
||||
if (index > -1) {
|
||||
selectedFileIds.value.splice(index, 1)
|
||||
} else {
|
||||
selectedFileIds.value.push(file.id)
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
const handleFilterChange = () => {
|
||||
pagination.pageNo = 1
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
const handleResetFilters = () => {
|
||||
filters.fileCategory = 'video'
|
||||
filters.fileName = ''
|
||||
filters.createTime = undefined
|
||||
pagination.pageNo = 1
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handlePageChange = (page, pageSize) => {
|
||||
pagination.pageNo = page
|
||||
if (pageSize && pageSize !== pagination.pageSize) {
|
||||
pagination.pageSize = pageSize
|
||||
pagination.pageNo = 1
|
||||
}
|
||||
loadFileList()
|
||||
}
|
||||
|
||||
// 图片加载错误处理（简化版，不使用coverUrl）
|
||||
const handleImageError = (e) => {
|
||||
const img = e.target
|
||||
const currentSrc = img.src
|
||||
|
||||
// 找到对应的文件对象
|
||||
const file = fileList.value.find(f =>
|
||||
f.coverBase64 === currentSrc ||
|
||||
f.previewUrl === currentSrc
|
||||
)
|
||||
|
||||
if (file && !file.isVideo) {
|
||||
// 非视频文件：尝试其他图片源（不使用coverUrl）
|
||||
if (file.coverBase64 && file.coverBase64 !== currentSrc && file.coverBase64.startsWith('data:image')) {
|
||||
img.src = file.coverBase64
|
||||
return
|
||||
}
|
||||
if (file.previewUrl && file.previewUrl !== currentSrc) {
|
||||
img.src = file.previewUrl
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 如果所有图片源都失败，隐藏图片
|
||||
img.style.display = 'none'
|
||||
}
|
||||
|
||||
const handleOpenMixModal = async () => {
|
||||
// 重置混剪表单（调用子组件方法）
|
||||
mixModalRef.value?.resetForm()
|
||||
|
||||
// 加载分组列表
|
||||
await loadGroupList()
|
||||
|
||||
mixModalVisible.value = true
|
||||
}
|
||||
|
||||
const handleMixCancel = () => {
|
||||
mixModalVisible.value = false
|
||||
}
|
||||
|
||||
const handleMixConfirm = async (params) => {
|
||||
mixing.value = true
|
||||
try {
|
||||
// 纯画面模式：仅传入 title 和 videoUrls
|
||||
const { title, videoUrls } = params
|
||||
|
||||
const taskParams = {
|
||||
title,
|
||||
videoUrls,
|
||||
produceCount: 1 // 固定生成1个
|
||||
}
|
||||
|
||||
const { data } = await MixTaskService.createTask(taskParams)
|
||||
if (data) {
|
||||
message.success('混剪任务提交成功，正在处理中...')
|
||||
mixModalVisible.value = false
|
||||
|
||||
// 跳转到任务列表页面
|
||||
setTimeout(() => {
|
||||
window.open('/material/mix-task', '_blank')
|
||||
}, 1000)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('混剪失败:', error)
|
||||
message.error(error?.message || '混剪任务提交失败，请重试')
|
||||
} finally {
|
||||
mixing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
loadFileList()
|
||||
loadGroupList()
|
||||
})
|
||||
|
||||
// 加载分组列表
|
||||
const loadGroupList = async () => {
|
||||
try {
|
||||
const res = await MaterialGroupService.getGroupList()
|
||||
if (res.code === 0) {
|
||||
groupList.value = res.data || []
|
||||
} else {
|
||||
console.error('[MaterialList] 分组列表加载失败:', res.msg)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[MaterialList] 加载分组列表失败:', error)
|
||||
message.error('加载分组列表失败: ' + (error.message || error))
|
||||
}
|
||||
}
|
||||
|
||||
// 打开批量分组模态框
|
||||
const handleOpenGroupModal = () => {
|
||||
if (selectedFileIds.value.length === 0) {
|
||||
message.warning('请先选择要分组的文件')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查选中的文件是否都是视频
|
||||
const selectedFiles = fileList.value.filter(f => selectedFileIds.value.includes(f.id))
|
||||
const nonVideoFiles = selectedFiles.filter(f => !f.isVideo)
|
||||
if (nonVideoFiles.length > 0) {
|
||||
message.warning('只能对视频文件进行分组')
|
||||
return
|
||||
}
|
||||
|
||||
groupingFileId.value = null // 清空单个文件分组标记
|
||||
groupModalVisible.value = true
|
||||
}
|
||||
|
||||
// 单个文件分组
|
||||
const handleSingleGroup = (file) => {
|
||||
groupingFileId.value = file.id // 标记是单个文件分组
|
||||
groupModalVisible.value = true
|
||||
}
|
||||
|
||||
// 执行批量分组
|
||||
const handleBatchGroup = async (groupId) => {
|
||||
if (!groupId) {
|
||||
message.warning('请选择分组')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
let fileIds
|
||||
let successMessage
|
||||
|
||||
if (groupingFileId.value) {
|
||||
// 单个文件分组
|
||||
fileIds = [groupingFileId.value]
|
||||
successMessage = '文件分组成功'
|
||||
} else {
|
||||
// 批量分组
|
||||
fileIds = selectedFileIds.value
|
||||
successMessage = '批量分组成功'
|
||||
}
|
||||
|
||||
await MaterialGroupService.addFilesToGroups({
|
||||
fileIds: fileIds,
|
||||
groupIds: [groupId]
|
||||
})
|
||||
message.success(successMessage)
|
||||
|
||||
// 重置状态
|
||||
groupModalVisible.value = false
|
||||
groupingFileId.value = null
|
||||
|
||||
// 如果是批量分组，清除选中状态
|
||||
if (!groupingFileId.value) {
|
||||
selectedFileIds.value = []
|
||||
}
|
||||
|
||||
loadGroupList() // 刷新分组列表以更新文件计数
|
||||
} catch (error) {
|
||||
console.error('分组失败:', error)
|
||||
message.error(error.message || '分组失败，请重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 取消分组操作
|
||||
const handleGroupCancel = () => {
|
||||
groupModalVisible.value = false
|
||||
groupingFileId.value = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.material-list {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.material-list__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.material-list__title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.material-list__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.material-list__filters {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.material-list__content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.material-list__content :deep(.arco-spin) {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.material-list__content :deep(.arco-spin-content) {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.material-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.material-list__pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.material-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.material-item__content {
|
||||
background: var(--color-surface);
|
||||
border: 2px solid transparent;
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.material-item--selected .material-item__content {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.material-item__preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%; /* 16:9 */
|
||||
background: var(--color-bg-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.material-item__preview img,
|
||||
.material-item__preview video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.material-item__preview video {
|
||||
pointer-events: none; /* 禁用视频交互，避免点击播放 */
|
||||
}
|
||||
|
||||
.material-item__placeholder {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 48px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.material-item__badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.material-item__delete {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(255, 77, 79, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.material-item__group {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 76px; /* 在下载按钮左边 */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(24, 144, 255, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.material-item__download {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 42px; /* 在删除按钮左边 */
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: rgba(82, 196, 26, 0.9);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.material-item:hover .material-item__delete {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-item:hover .material-item__group {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-item:hover .material-item__download {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-item__delete:hover {
|
||||
background: rgb(255, 77, 79);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.material-item__group:hover {
|
||||
background: rgb(24, 144, 255);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.material-item__download:hover {
|
||||
background: rgb(82, 196, 26);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.material-item__info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.material-item__name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.material-item__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.material-item__group-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-primary-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -465,11 +465,10 @@ onMounted(() => {
|
||||
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 3px;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.category-tab {
|
||||
@@ -478,21 +477,22 @@ onMounted(() => {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
border: 1px solid transparent;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.15s ease;
|
||||
margin-bottom: -1px;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff;
|
||||
background: rgba(24, 144, 255, 0.05);
|
||||
color: #374151;
|
||||
background: rgba(243, 244, 246, 0.5);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #fff;
|
||||
color: #1890ff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #d9d9d9;
|
||||
color: #2563eb;
|
||||
border-bottom-color: #2563eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -536,8 +536,6 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-top: 16px;
|
||||
|
||||
&__header {
|
||||
padding: 8px 12px;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { message, Select } from 'ant-design-vue'
|
||||
import TikhubService, { InterfaceType, MethodType, ParamType } from '@/api/tikhub'
|
||||
import { CommonService } from '@/api/common'
|
||||
import { UserPromptApi } from '@/api/userPrompt'
|
||||
@@ -25,10 +25,10 @@ const generatedContent = ref('')
|
||||
const searchParams = reactive({
|
||||
keyword: '',
|
||||
offset: 0,
|
||||
sort_type: 1,
|
||||
publish_time: 7,
|
||||
sort_type: '1',
|
||||
publish_time: '7',
|
||||
filter_duration: '0',
|
||||
content_type: 0
|
||||
content_type: '0'
|
||||
})
|
||||
|
||||
// 创作详情
|
||||
@@ -450,42 +450,42 @@ onMounted(async () => {
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<label class="param-label">排序方式</label>
|
||||
<select v-model="searchParams.sort_type" class="param-select">
|
||||
<option value="0">综合排序</option>
|
||||
<option value="1">最多点赞</option>
|
||||
<option value="2">最新发布</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.sort_type" class="param-select">
|
||||
<a-select-option value="0">综合排序</a-select-option>
|
||||
<a-select-option value="1">最多点赞</a-select-option>
|
||||
<a-select-option value="2">最新发布</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="param-item">
|
||||
<label class="param-label">发布时间</label>
|
||||
<select v-model="searchParams.publish_time" class="param-select">
|
||||
<option value="0">不限</option>
|
||||
<option value="1">最近一天</option>
|
||||
<option value="7">最近一周</option>
|
||||
<option value="180">最近半年</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.publish_time" class="param-select">
|
||||
<a-select-option value="0">不限</a-select-option>
|
||||
<a-select-option value="1">最近一天</a-select-option>
|
||||
<a-select-option value="7">最近一周</a-select-option>
|
||||
<a-select-option value="180">最近半年</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="param-item">
|
||||
<label class="param-label">视频时长</label>
|
||||
<select v-model="searchParams.filter_duration" class="param-select">
|
||||
<option value="0">不限</option>
|
||||
<option value="0-1">1分钟以内</option>
|
||||
<option value="1-5">1-5分钟</option>
|
||||
<option value="5-10000">5分钟以上</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.filter_duration" class="param-select">
|
||||
<a-select-option value="0">不限</a-select-option>
|
||||
<a-select-option value="0-1">1分钟以内</a-select-option>
|
||||
<a-select-option value="1-5">1-5分钟</a-select-option>
|
||||
<a-select-option value="5-10000">5分钟以上</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="param-row">
|
||||
<div class="param-item">
|
||||
<label class="param-label">内容类型</label>
|
||||
<select v-model="searchParams.content_type" class="param-select">
|
||||
<option value="0">不限</option>
|
||||
<option value="1">视频</option>
|
||||
<option value="2">图集</option>
|
||||
</select>
|
||||
<a-select v-model:value="searchParams.content_type" class="param-select">
|
||||
<a-select-option value="0">不限</a-select-option>
|
||||
<a-select-option value="1">视频</a-select-option>
|
||||
<a-select-option value="2">图集</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -693,22 +693,18 @@ onMounted(async () => {
|
||||
<!-- 生成文案按钮 -->
|
||||
<div class="pt-2">
|
||||
<button
|
||||
class="cyber-button"
|
||||
:class="{
|
||||
'cyber-button--disabled': !topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating,
|
||||
'cyber-button--loading': isGenerating
|
||||
}"
|
||||
class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white py-3 rounded-lg font-bold shadow-lg shadow-indigo-500/30 transition flex items-center justify-center group"
|
||||
style="color: white !important;"
|
||||
:disabled="!topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating"
|
||||
@click="handleGenerate"
|
||||
>
|
||||
<span v-if="isGenerating" class="cyber-button__loading">
|
||||
<span class="cyber-button__spinner"></span>
|
||||
<span class="cyber-button__text">生成中...</span>
|
||||
<span v-if="isGenerating" class="flex items-center justify-center" style="color: white;">
|
||||
<span class="spinner mr-2"></span>
|
||||
<span>生成中...</span>
|
||||
</span>
|
||||
<span v-else class="cyber-button__content">
|
||||
<span class="cyber-button__glow"></span>
|
||||
<span class="cyber-button__text">生成爆款</span>
|
||||
<span class="cyber-button__arrow">→</span>
|
||||
<span v-else class="flex items-center justify-center" style="color: white;">
|
||||
<i class="fa-solid fa-wand-magic-sparkles mr-2 group-hover:rotate-12 transition" style="color: white;"></i>
|
||||
<span>生成爆款</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -833,24 +829,9 @@ onMounted(async () => {
|
||||
|
||||
.param-select {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.param-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
|
||||
}
|
||||
|
||||
.param-select:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
display: flex;
|
||||
@@ -1270,149 +1251,6 @@ onMounted(async () => {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 赛博朋克风格按钮 - 蓝色主题 */
|
||||
.cyber-button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
box-shadow:
|
||||
0 0 10px rgba(59, 130, 246, 0.3),
|
||||
inset 0 0 10px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.cyber-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.cyber-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.cyber-button:hover:not(.cyber-button--disabled) {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
box-shadow:
|
||||
0 0 20px rgba(59, 130, 246, 0.5),
|
||||
0 0 40px rgba(59, 130, 246, 0.3),
|
||||
inset 0 0 20px rgba(59, 130, 246, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.cyber-button:active:not(.cyber-button--disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow:
|
||||
0 0 15px rgba(59, 130, 246, 0.4),
|
||||
inset 0 0 15px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.cyber-button__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cyber-button__glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(59, 130, 246, 0.4);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s ease, height 0.6s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__glow {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.cyber-button__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
|
||||
}
|
||||
|
||||
.cyber-button__arrow {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: transform 0.3s ease;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__arrow {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.cyber-button__loading {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cyber-button__spinner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(59, 130, 246, 0.3);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: cyber-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes cyber-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.cyber-button--disabled,
|
||||
.cyber-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow: none;
|
||||
color: rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
.cyber-button--disabled:hover,
|
||||
.cyber-button:disabled:hover {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cyber-button--loading {
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.cyber-button--loading:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 语音分析loading指示器 */
|
||||
.analyzing-indicator {
|
||||
@@ -1426,4 +1264,20 @@ onMounted(async () => {
|
||||
.analyzing-text {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 按钮加载动画 */
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user