sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 布局优化

Browse Source
This commit is contained in:
sion123
2026-01-18 01:07:11 +08:00
parent e0cf6092a9
commit aa81a1aebc
15 changed files with 474 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.claude/settings.local.json
View File

@@ -62,7 +62,11 @@
"mcp__server-mysql__describe_table", "mcp__server-mysql__describe_table",
"mcp__server-mysql__execute", "mcp__server-mysql__execute",
"mcp__server-mysql__query", "mcp__server-mysql__query",
"Bash(/d/projects/sionrui/.claude/skills/ui-ux-pro-max/python scripts/search.py:*)" "Bash(/d/projects/sionrui/.claude/skills/ui-ux-pro-max/python scripts/search.py:*)",
"Skill(code-simplifier)",
"Skill(code-simplifier:*)",
"Bash(npm run lint:es -- --no-fix src/views/material/MixTaskList.vue)",
"Bash(npm run)"
], ],
"deny": [], "deny": [],
"ask": [] "ask": []

237
frontend/app/web-gold/src/layouts/LayoutExamples.vue
View File

@@ -1,237 +0,0 @@
<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>

4
frontend/app/web-gold/src/router/index.js
View File

@@ -61,8 +61,8 @@ const routes = [
path: 'system', path: 'system',
name: '系统', name: '系统',
children: [ children: [
{ path: '', redirect: '/system/style-settings' }, // { path: '', redirect: '/system/style-settings' },
{ path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') }, // { path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') },
{ {
path: 'task-management/:type', path: 'task-management/:type',
name: '任务中心', name: '任务中心',

235
frontend/app/web-gold/src/views/material/MixTaskList.vue
View File

@@ -1,59 +1,70 @@
<template> <template>
<div class="mix-task-list"> <FullWidthLayout :show-back="true" @back="router.back()">
<div class="mix-task-list__header"> <!-- 页面标题 -->
<h1 class="mix-task-list__title">混剪任务</h1> <template #header>
<div class="mix-task-list__actions"> <div class="page-header">
<a-button @click="handleRefresh"> <div class="page-header__icon">
<template #icon> <VideoCameraOutlined />
<ReloadOutlined /> </div>
</template> <div class="page-header__content">
刷新 <h1 class="page-header__title">混剪任务</h1>
</a-button> <p class="page-header__subtitle">管理和查看混剪任务的进度和结果</p>
</div>
<div class="page-header__actions">
<a-button @click="handleRefresh">
<template #icon>
<ReloadOutlined />
</template>
刷新
</a-button>
</div>
</div> </div>
</div> </template>
<!-- 筛选条件 --> <!-- 页面内容 -->
<div class="mix-task-list__filters"> <div class="mix-task-list">
<a-space> <!-- 筛选条件 -->
<a-select <div class="mix-task-list__filters">
v-model:value="filters.status" <a-space>
style="width: 120px" <a-select
placeholder="任务状态" v-model:value="filters.status"
@change="handleFilterChange" style="width: 120px"
allow-clear placeholder="任务状态"
> @change="handleFilterChange"
<a-select-option value="">全部状态</a-select-option> allow-clear
<a-select-option value="pending">待处理</a-select-option> >
<a-select-option value="running">处理中</a-select-option> <a-select-option value="">全部状态</a-select-option>
<a-select-option value="success">已完成</a-select-option> <a-select-option value="pending">待处理</a-select-option>
<a-select-option value="failed">失败</a-select-option> <a-select-option value="running">处理中</a-select-option>
</a-select> <a-select-option value="success">已完成</a-select-option>
<a-select-option value="failed">失败</a-select-option>
</a-select>
<a-input <a-input
v-model="filters.title" v-model="filters.title"
placeholder="搜索标题" placeholder="搜索标题"
style="width: 200px" style="width: 200px"
allow-clear allow-clear
@press-enter="handleFilterChange" @press-enter="handleFilterChange"
> >
<template #prefix> <template #prefix>
<SearchOutlined /> <SearchOutlined />
</template> </template>
</a-input> </a-input>
<a-range-picker <a-range-picker
v-model:value="filters.createTime" v-model:value="filters.createTime"
style="width: 300px" style="width: 300px"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:placeholder="['开始日期', '结束日期']" :placeholder="['开始日期', '结束日期']"
@change="handleFilterChange" @change="handleFilterChange"
/> />
<a-button type="primary" @click="handleFilterChange">查询</a-button> <a-button type="primary" @click="handleFilterChange">查询</a-button>
<a-button @click="handleResetFilters">重置</a-button> <a-button @click="handleResetFilters">重置</a-button>
</a-space> </a-space>
</div> </div>
<!-- 任务列表 --> <!-- 任务列表 -->
<div class="mix-task-list__content"> <div class="mix-task-list__content">
@@ -73,7 +84,7 @@
<template v-if="column.key === 'title'"> <template v-if="column.key === 'title'">
<div class="title-cell"> <div class="title-cell">
<strong>{{ record.title }}</strong> <strong>{{ record.title }}</strong>
<a-tag v-if="record.text" size="small" style="margin-left: 8px">有文案</a-tag> <a-tag v-if="record.text" size="small" style="margin-left: var(--space-2)">有文案</a-tag>
</div> </div>
</template> </template>
@@ -200,20 +211,26 @@
</a-table> </a-table>
</a-spin> </a-spin>
</div> </div>
</div> </div>
</FullWidthLayout>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue' import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { message, Modal } from 'ant-design-vue' import { message, Modal } from 'ant-design-vue'
import { import {
ReloadOutlined, ReloadOutlined,
SearchOutlined, SearchOutlined,
PlayCircleOutlined, PlayCircleOutlined,
DownloadOutlined DownloadOutlined,
VideoCameraOutlined
} from '@ant-design/icons-vue' } from '@ant-design/icons-vue'
import { MixTaskService } from '@/api/mixTask' import { MixTaskService } from '@/api/mixTask'
import { formatDate } from '@/utils/file' import { formatDate } from '@/utils/file'
import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
const router = useRouter()
// 数据 // 数据
const loading = ref(false) const loading = ref(false)
@@ -567,37 +584,62 @@ const stopAutoRefresh = () => {
} }
</script> </script>
<style scoped> <style scoped lang="less">
.mix-task-list { // 页面头部样式
padding: 24px; .page-header {
height: 100%;
display: flex; display: flex;
flex-direction: column;
}
.mix-task-list__header {
display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 24px; gap: 16px;
margin-bottom: var(--space-3);
&__icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
box-shadow: var(--shadow-inset-card);
}
&__content {
flex: 1;
}
&__title {
font-size: 24px;
font-weight: 600;
color: var(--color-text);
margin: 0;
line-height: 1.2;
}
&__subtitle {
font-size: 14px;
color: var(--color-text-secondary);
margin: 4px 0 0;
}
&__actions {
display: flex;
gap: 12px;
}
} }
.mix-task-list__title { .mix-task-list {
font-size: 24px; min-height: calc(100vh - 140px);
font-weight: 600; background: var(--color-bg);
margin: 0; padding: var(--space-3) 0;
}
.mix-task-list__actions {
display: flex;
gap: 12px;
} }
.mix-task-list__filters { .mix-task-list__filters {
margin-bottom: 24px; margin-bottom: var(--space-3);
padding: 16px; padding: var(--space-3);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: 8px;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }
@@ -605,9 +647,9 @@ const stopAutoRefresh = () => {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: 8px;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
padding: 16px; padding: var(--space-3);
} }
.title-cell { .title-cell {
@@ -617,42 +659,42 @@ const stopAutoRefresh = () => {
} }
.expanded-content { .expanded-content {
padding: 16px; padding: var(--space-3);
background: var(--color-bg-2); background: var(--color-bg);
border-radius: var(--radius-card); border-radius: 8px;
margin: 8px; margin: var(--space-2);
} }
.task-text { .task-text {
margin-bottom: 16px; margin-bottom: var(--space-3);
}
.task-text p { p {
margin: 8px 0 0 0; margin: var(--space-2) 0 0 0;
padding: 8px; padding: var(--space-2);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: 8px;
line-height: 1.6; line-height: 1.6;
}
} }
.task-results { .task-results {
margin-bottom: 16px; margin-bottom: var(--space-3);
} }
.result-list { .result-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: var(--space-2);
margin-top: 8px; margin-top: var(--space-2);
} }
.result-item { .result-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: var(--space-2);
padding: 6px 12px; padding: 6px 12px;
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: 8px;
font-size: 13px; font-size: 13px;
} }
@@ -662,10 +704,9 @@ const stopAutoRefresh = () => {
} }
.task-error { .task-error {
margin-bottom: 8px; margin-bottom: var(--space-2);
} }
/* 确保按钮内的图标和文字对齐 */
:deep(.ant-btn .anticon) { :deep(.ant-btn .anticon) {
vertical-align: middle; vertical-align: middle;
} }

0
frontend/app/web-gold/src/views/system/task-management/components/.gitkeep
View File

3
frontend/app/web-gold/src/views/system/task-management/components/TaskActionButtons.vue
View File

@@ -94,7 +94,8 @@ const operations = useTaskOperations(
{ {
deleteApi, deleteApi,
cancelApi, cancelApi,
retryApi retryApi,
getSignedUrlsApi
}, },
props.onSuccess props.onSuccess
) )

1
frontend/app/web-gold/src/views/system/task-management/components/TaskStatusTag.vue
View File

@@ -43,6 +43,7 @@ const text = computed(() => {
PENDING: '待处理', PENDING: '待处理',
RUNNING: '处理中', RUNNING: '处理中',
SUCCESS: '已完成', SUCCESS: '已完成',
PROCESSING: '处理中',
FAILED: '失败', FAILED: '失败',
CANCELED: '已取消', CANCELED: '已取消',
...props.statusMap ...props.statusMap

0
frontend/app/web-gold/src/views/system/task-management/composables/.gitkeep
View File

4
frontend/app/web-gold/src/views/system/task-management/composables/useTaskOperations.js
View File

@@ -2,12 +2,12 @@ import { message, Modal } from 'ant-design-vue'
/** /**
* 任务操作通用逻辑 Composable * 任务操作通用逻辑 Composable
* @param {Object} apis - API 对象，包含 deleteApi, cancelApi, retryApi * @param {Object} apis - API 对象，包含 deleteApi, cancelApi, retryApi, getSignedUrlsApi
* @param {Function} onSuccess - 操作成功后的回调函数 * @param {Function} onSuccess - 操作成功后的回调函数
* @returns {Object} 操作方法 * @returns {Object} 操作方法
*/ */
export function useTaskOperations(apis, onSuccess) { export function useTaskOperations(apis, onSuccess) {
const { deleteApi, cancelApi, retryApi } = apis const { deleteApi, cancelApi, retryApi, getSignedUrlsApi } = apis
// 删除任务 // 删除任务
const handleDelete = (id) => { const handleDelete = (id) => {

0
frontend/app/web-gold/src/views/system/task-management/digital-human-task/.gitkeep
View File

220
frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
View File

@@ -2,10 +2,10 @@
<div class="digital-human-task-page"> <div class="digital-human-task-page">
<!-- 筛选条件 --> <!-- 筛选条件 -->
<div class="digital-human-task-page__filters"> <div class="digital-human-task-page__filters">
<a-space> <a-space :size="16">
<a-select <a-select
v-model:value="filters.status" v-model:value="filters.status"
style="width: 120px" class="filter-select"
placeholder="任务状态" placeholder="任务状态"
@change="handleFilterChange" @change="handleFilterChange"
allow-clear allow-clear
@@ -20,8 +20,8 @@
<a-input <a-input
v-model:value="filters.keyword" v-model:value="filters.keyword"
class="filter-input"
placeholder="搜索任务名称" placeholder="搜索任务名称"
style="width: 200px"
allow-clear allow-clear
@press-enter="handleFilterChange" @press-enter="handleFilterChange"
> >
@@ -32,15 +32,19 @@
<a-range-picker <a-range-picker
v-model:value="filters.dateRange" v-model:value="filters.dateRange"
style="width: 300px" class="filter-date-picker"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:placeholder="['开始日期', '结束日期']" :placeholder="['开始日期', '结束日期']"
@change="handleFilterChange" @change="handleFilterChange"
/> />
<a-button type="primary" @click="handleFilterChange">查询</a-button> <a-button type="primary" class="filter-button" @click="handleFilterChange">
<a-button @click="handleResetFilters">重置</a-button> 查询
</a-button>
<a-button class="filter-button" @click="handleResetFilters">
重置
</a-button>
</a-space> </a-space>
</div> </div>
@@ -437,58 +441,92 @@ onMounted(() => {
}) })
</script> </script>
<style scoped> <style scoped lang="less">
.digital-human-task-page { .digital-human-task-page {
padding: 16px; padding: var(--space-3);
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: var(--space-3);
}
.digital-human-task-page__filters { &__filters {
padding: 16px; padding: var(--space-3);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: var(--radius-card);
} box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
.digital-human-task-page__content { .filter-select,
flex: 1; .filter-input {
overflow: auto; width: 200px;
background: var(--color-surface);
border-radius: var(--radius-card); @media (max-width: 1199px) {
padding: 16px; width: 160px;
display: flex; }
flex-direction: column;
@media (max-width: 767px) {
width: 100%;
}
}
.filter-date-picker {
width: 280px;
@media (max-width: 1199px) {
width: 240px;
}
@media (max-width: 767px) {
width: 100%;
}
}
.filter-button {
min-width: 80px;
@media (max-width: 767px) {
min-width: auto;
}
}
}
&__content {
flex: 1;
overflow: auto;
background: var(--color-surface);
border-radius: var(--radius-card);
padding: var(--space-3);
display: flex;
flex-direction: column;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
} }
/* 批量操作栏 */ /* 批量操作栏 */
.batch-actions { .batch-actions {
margin-bottom: 16px; margin-bottom: var(--space-3);
}
/* 表格容器 */ + .ant-spin {
.batch-actions + .ant-spin { flex: 1;
flex: 1; display: flex;
display: flex; flex-direction: column;
flex-direction: column;
}
.batch-actions + .ant-spin :deep(.ant-spin-container) { :deep(.ant-spin-container) {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.batch-actions + .ant-spin :deep(.ant-table) { :deep(.ant-table) {
flex: 1; flex: 1;
}
}
} }
/* 任务名称单元格 */ /* 任务名称单元格 */
.task-name-cell { .task-name-cell {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: var(--space-1);
} }
/* 文本截断 */ /* 文本截断 */
@@ -502,55 +540,60 @@ onMounted(() => {
/* 展开内容 */ /* 展开内容 */
.expanded-content { .expanded-content {
padding: 16px; padding: var(--space-3);
background: var(--color-bg-2); background: var(--color-bg-2);
border-radius: var(--radius-card); border-radius: var(--radius-card);
margin: 8px; margin: var(--space-2);
} }
.task-text { .task-text {
margin-bottom: 16px; margin-bottom: var(--space-3);
}
.task-text p { p {
margin: 8px 0 0 0; margin: var(--space-2) 0 0 0;
padding: 8px; padding: var(--space-2);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: var(--radius-card);
line-height: 1.6; line-height: 1.6;
}
} }
.task-params { .task-params {
margin-bottom: 16px; margin-bottom: var(--space-3);
}
.params-grid { .params-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px; gap: var(--space-2);
margin-top: 8px; margin-top: var(--space-2);
}
.param-item { .param-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px; padding: var(--space-2);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: var(--radius-card);
} transition: all 0.2s;
.param-label { &:hover {
font-weight: 600; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-right: 8px; }
color: var(--color-text-2); }
}
.param-value { .param-label {
color: var(--color-text); font-weight: 600;
margin-right: var(--space-2);
color: var(--color-text-2);
}
.param-value {
color: var(--color-text);
}
}
} }
.task-result { .task-result {
margin-bottom: 16px; margin-bottom: var(--space-3);
} }
.processing-tip { .processing-tip {
@@ -559,7 +602,7 @@ onMounted(() => {
} }
.task-error { .task-error {
margin-bottom: 8px; margin-bottom: var(--space-2);
} }
/* 确保按钮内的图标和文字对齐 */ /* 确保按钮内的图标和文字对齐 */
@@ -576,4 +619,35 @@ onMounted(() => {
background: var(--color-bg-2); background: var(--color-bg-2);
font-weight: 600; font-weight: 600;
} }
/* 响应式优化 */
@media (max-width: 767px) {
.digital-human-task-page {
padding: var(--space-2);
&__filters {
padding: var(--space-2);
.ant-space {
width: 100%;
flex-wrap: wrap;
.ant-select,
.ant-input,
.ant-picker,
.ant-btn {
width: calc(50% - var(--space-1)) !important;
}
}
}
&__content {
padding: var(--space-2);
}
}
.batch-actions {
margin-bottom: var(--space-2);
}
}
</style> </style>

0
frontend/app/web-gold/src/views/system/task-management/layout/.gitkeep
View File

209
frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
View File

@@ -20,7 +20,10 @@
class="task-layout__nav-link" class="task-layout__nav-link"
@click="navigateTo(item.type)" @click="navigateTo(item.type)"
> >
<span class="nav-icon" v-html="icons[item.icon]"></span> <span class="nav-icon">
<VideoCameraOutlined v-if="item.icon === 'video'" />
<UserOutlined v-else-if="item.icon === 'user'" />
</span>
<span class="nav-text">{{ item.label }}</span> <span class="nav-text">{{ item.label }}</span>
</a> </a>
</li> </li>
@@ -34,84 +37,22 @@
<component :is="currentComponent" :key="currentType" /> <component :is="currentComponent" :key="currentType" />
</transition> </transition>
</main> </main>
<!-- 移动端菜单按钮 -->
<a-button
v-if="isMobile"
class="task-layout__mobile-btn"
type="primary"
shape="circle"
size="large"
@click="showMobileNav = !showMobileNav"
>
<template #icon>
<MenuOutlined />
</template>
</a-button>
<!-- 移动端遮罩层 -->
<a-drawer
v-model:open="showMobileNav"
placement="left"
:width="220"
:closable="false"
class="task-layout__mobile-drawer"
>
<div class="task-layout__mobile-nav">
<div class="task-layout__nav-header">
<h2 class="task-layout__nav-title">任务管理</h2>
</div>
<ul class="task-layout__nav-list">
<li
v-for="item in navItems"
:key="item.type"
class="task-layout__nav-item"
:class="{
'is-active': currentType === item.type
}"
>
<a
href="javascript:void(0)"
class="task-layout__nav-link"
@click="navigateTo(item.type, true)"
>
<span class="nav-icon" v-html="icons[item.icon]"></span>
<span class="nav-text">{{ item.label }}</span>
</a>
</li>
</ul>
</div>
</a-drawer>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, computed, onMounted, onUnmounted, defineAsyncComponent } from 'vue' import { computed, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { MenuOutlined } from '@ant-design/icons-vue' import { VideoCameraOutlined, UserOutlined } from '@ant-design/icons-vue'
// 响应式数据 // 响应式数据
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const showMobileNav = ref(false)
const windowWidth = ref(window.innerWidth)
// 单色 SVG 图标（填充 currentColor，可继承文本色） // 当前任务类型
const icons = {
video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>',
user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>'
}
// 计算属性
const isMobile = computed(() => windowWidth.value < 768)
const isTablet = computed(() => windowWidth.value >= 768 && windowWidth.value < 1200)
// 当前任务类型 - 使用路由name来激活高亮
const currentType = computed(() => { const currentType = computed(() => {
// 使用路由的params.type，如果不存在则默认使用mix-task
const type = route.params.type const type = route.params.type
// 如果类型无效或为空，默认使用 mix-task
if (!type || type === 'task-management') { if (!type || type === 'task-management') {
return 'mix-task' return 'mix-task'
} }
@@ -149,29 +90,12 @@ const currentComponent = computed(() => {
}) })
// 导航到指定类型 // 导航到指定类型
const navigateTo = (type, closeMobile = false) => { const navigateTo = (type) => {
router.push(`/system/task-management/${type}`) router.push(`/system/task-management/${type}`)
if (closeMobile) {
showMobileNav.value = false
}
} }
// 更新窗口宽度
const updateWindowWidth = () => {
windowWidth.value = window.innerWidth
}
// 生命周期钩子
onMounted(() => {
window.addEventListener('resize', updateWindowWidth)
})
onUnmounted(() => {
window.removeEventListener('resize', updateWindowWidth)
})
</script> </script>
<style scoped> <style scoped lang="less">
.task-layout { .task-layout {
display: flex; display: flex;
height: 100%; height: 100%;
@@ -187,23 +111,29 @@ onUnmounted(() => {
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
flex-shrink: 0; flex-shrink: 0;
overflow-y: auto; overflow-y: auto;
}
@media (min-width: 768px) and (max-width: 1199px) { @media (max-width: 1199px) {
.task-layout__sidebar {
width: 200px; width: 200px;
} }
}
@media (max-width: 767px) { @media (max-width: 767px) {
.task-layout__sidebar { width: 100%;
display: none; position: absolute;
top: 0;
left: 0;
z-index: 10;
transform: translateX(-100%);
transition: transform 0.3s ease;
&.is-mobile-open {
transform: translateX(0);
}
} }
} }
/* 导航头部 */ /* 导航头部 */
.task-layout__nav-header { .task-layout__nav-header {
padding: 24px 16px; padding: var(--space-3) var(--space-2);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
} }
@@ -217,58 +147,64 @@ onUnmounted(() => {
/* 导航列表 */ /* 导航列表 */
.task-layout__nav-list { .task-layout__nav-list {
list-style: none; list-style: none;
padding: 8px 0; padding: var(--space-1) 0;
margin: 0; margin: 0;
} }
/* 导航项 */ /* 导航项 */
.task-layout__nav-item { .task-layout__nav-item {
margin: 4px 8px; margin: 4px var(--space-2);
}
.task-layout__nav-item.is-active .task-layout__nav-link { &.is-active {
background: var(--color-primary); .task-layout__nav-link {
color: #fff; background: var(--color-primary);
} color: #fff;
.task-layout__nav-item.is-active .nav-icon { .nav-icon {
color: #fff; color: #fff;
}
}
}
} }
/* 导航链接 */ /* 导航链接 */
.task-layout__nav-link { .task-layout__nav-link {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 16px; padding: var(--space-2) var(--space-2);
border-radius: var(--radius-card); border-radius: var(--radius-card);
color: var(--color-text-secondary); color: var(--color-text-secondary);
text-decoration: none; text-decoration: none;
transition: all 0.2s; transition: all 0.2s;
cursor: pointer; cursor: pointer;
}
.task-layout__nav-link:hover { &:hover {
background: var(--color-bg-2); background: var(--color-bg-2);
color: var(--color-primary); color: var(--color-primary);
} }
.task-layout__nav-item.is-active .task-layout__nav-link:hover { .is-active & {
background: var(--color-primary); &:hover {
color: #fff; background: var(--color-primary);
color: #fff;
}
}
} }
/* 导航图标 */ /* 导航图标 */
.nav-icon { .nav-icon {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 12px; margin-right: var(--space-2);
color: var(--color-text-3); color: var(--color-text-3);
transition: color 0.2s; transition: color 0.2s;
}
.task-layout__nav-item.is-active .nav-icon { .task-layout__nav-item.is-active & {
color: #fff; color: #fff;
}
} }
/* 导航文本 */ /* 导航文本 */
@@ -283,6 +219,10 @@ onUnmounted(() => {
overflow: auto; overflow: auto;
background: var(--color-bg); background: var(--color-bg);
padding: 0; padding: 0;
@media (max-width: 767px) {
padding: 0;
}
} }
/* 过渡动画 */ /* 过渡动画 */
@@ -295,41 +235,4 @@ onUnmounted(() => {
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
/* 移动端按钮 */
.task-layout__mobile-btn {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (min-width: 768px) {
.task-layout__mobile-btn {
display: none;
}
}
/* 移动端抽屉 */
.task-layout__mobile-drawer :deep(.ant-drawer-body) {
padding: 0;
background: var(--color-surface);
}
.task-layout__mobile-nav {
height: 100%;
display: flex;
flex-direction: column;
}
.task-layout__mobile-nav .task-layout__nav-header {
background: var(--color-surface);
}
.task-layout__mobile-nav .task-layout__nav-list {
flex: 1;
overflow-y: auto;
background: var(--color-surface);
}
</style> </style>

0
frontend/app/web-gold/src/views/system/task-management/mix-task/.gitkeep
View File

185
frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
View File

@@ -2,10 +2,10 @@
<div class="mix-task-page"> <div class="mix-task-page">
<!-- 筛选条件 --> <!-- 筛选条件 -->
<div class="mix-task-page__filters"> <div class="mix-task-page__filters">
<a-space> <a-space :size="16">
<a-select <a-select
v-model:value="filters.status" v-model:value="filters.status"
style="width: 120px" class="filter-select"
placeholder="任务状态" placeholder="任务状态"
@change="handleFilterChange" @change="handleFilterChange"
allow-clear allow-clear
@@ -19,8 +19,8 @@
<a-input <a-input
v-model:value="filters.keyword" v-model:value="filters.keyword"
class="filter-input"
placeholder="搜索标题" placeholder="搜索标题"
style="width: 200px"
allow-clear allow-clear
@press-enter="handleFilterChange" @press-enter="handleFilterChange"
> >
@@ -31,15 +31,19 @@
<a-range-picker <a-range-picker
v-model:value="filters.dateRange" v-model:value="filters.dateRange"
style="width: 300px" class="filter-date-picker"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" value-format="YYYY-MM-DD"
:placeholder="['开始日期', '结束日期']" :placeholder="['开始日期', '结束日期']"
@change="handleFilterChange" @change="handleFilterChange"
/> />
<a-button type="primary" @click="handleFilterChange">查询</a-button> <a-button type="primary" class="filter-button" @click="handleFilterChange">
<a-button @click="handleResetFilters">重置</a-button> 查询
</a-button>
<a-button class="filter-button" @click="handleResetFilters">
重置
</a-button>
</a-space> </a-space>
</div> </div>
@@ -106,17 +110,6 @@
<!-- 操作列 --> <!-- 操作列 -->
<template v-else-if="column.key === 'actions'"> <template v-else-if="column.key === 'actions'">
<a-space> <a-space>
<a-button
v-if="isStatus(record.status, 'success') && record.outputUrls && record.outputUrls.length > 0"
type="primary"
size="small"
@click="handleDownloadAll(record.id)"
>
<template #icon>
<DownloadOutlined />
</template>
<span>下载</span>
</a-button>
<a-button <a-button
v-if="isStatus(record.status, 'running')" v-if="isStatus(record.status, 'running')"
size="small" size="small"
@@ -150,19 +143,17 @@
<p>{{ record.text }}</p> <p>{{ record.text }}</p>
</div> </div>
<!-- 生成结果 -->
<div v-if="record.outputUrls && record.outputUrls.length > 0" class="task-results"> <div v-if="record.outputUrls && record.outputUrls.length > 0" class="task-results">
<strong>生成结果：</strong>
<div class="result-list"> <div class="result-list">
<div <div
v-for="(url, index) in record.outputUrls" v-for="(url, index) in record.outputUrls"
:key="index" :key="index"
@click="handleDownloadSignedUrl(record.id, index)"
class="result-item" class="result-item"
> >
<a-button <a-button
v-if="isStatus(record.status, 'success')" v-if="isStatus(record.status, 'success')"
type="link" type="link"
@click="handlePreview(record.id, index)"
> >
<PlayCircleOutlined /> <PlayCircleOutlined />
视频 {{ index + 1 }} 视频 {{ index + 1 }}
@@ -171,7 +162,6 @@
v-if="isStatus(record.status, 'success')" v-if="isStatus(record.status, 'success')"
type="link" type="link"
size="small" size="small"
@click="handleDownloadSignedUrl(record.id, index)"
> >
<DownloadOutlined /> <DownloadOutlined />
</a-button> </a-button>
@@ -385,75 +375,115 @@ onMounted(() => {
}) })
</script> </script>
<style scoped> <style scoped lang="less">
.mix-task-page { .mix-task-page {
padding: 16px; padding: var(--space-3);
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: var(--space-3);
}
.mix-task-page__filters { &__filters {
padding: 16px; padding: var(--space-3);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: var(--radius-card);
} box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
.mix-task-page__content { .filter-select,
flex: 1; .filter-input {
overflow: auto; width: 200px;
background: var(--color-surface);
border-radius: var(--radius-card); @media (max-width: 1199px) {
padding: 16px; width: 160px;
}
@media (max-width: 767px) {
width: 100%;
}
}
.filter-date-picker {
width: 280px;
@media (max-width: 1199px) {
width: 240px;
}
@media (max-width: 767px) {
width: 100%;
}
}
.filter-button {
min-width: 80px;
@media (max-width: 767px) {
min-width: auto;
}
}
}
&__content {
flex: 1;
overflow: auto;
background: var(--color-surface);
border-radius: var(--radius-card);
padding: var(--space-3);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
} }
/* 标题单元格 */ /* 标题单元格 */
.title-cell { .title-cell {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: var(--space-1);
} }
/* 展开内容 */ /* 展开内容 */
.expanded-content { .expanded-content {
padding: 16px; padding: var(--space-3);
background: var(--color-bg-2); background: var(--color-bg-2);
border-radius: var(--radius-card); border-radius: var(--radius-card);
margin: 8px; margin: var(--space-2);
} }
.task-text { .task-text {
margin-bottom: 16px; margin-bottom: var(--space-3);
}
.task-text p { p {
margin: 8px 0 0 0; margin: var(--space-2) 0 0 0;
padding: 8px; padding: var(--space-2);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: var(--radius-card);
line-height: 1.6; line-height: 1.6;
}
} }
.task-results { .task-results {
margin-bottom: 16px; margin-bottom: var(--space-3);
}
.result-list { .result-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: var(--space-2);
margin-top: 8px; margin-top: var(--space-2);
}
.result-item { .result-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: var(--space-2);
padding: 6px 12px; padding: var(--space-1) var(--space-2);
background: var(--color-surface); background: var(--color-surface);
border-radius: var(--radius-card); border-radius: var(--radius-card);
font-size: 13px; font-size: 13px;
transition: all 0.2s;
&:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
}
} }
.processing-tip { .processing-tip {
@@ -462,7 +492,7 @@ onMounted(() => {
} }
.task-error { .task-error {
margin-bottom: 8px; margin-bottom: var(--space-2);
} }
/* 确保按钮内的图标和文字对齐 */ /* 确保按钮内的图标和文字对齐 */
@@ -479,4 +509,31 @@ onMounted(() => {
background: var(--color-bg-2); background: var(--color-bg-2);
font-weight: 600; font-weight: 600;
} }
/* 响应式优化 */
@media (max-width: 767px) {
.mix-task-page {
padding: var(--space-2);
&__filters {
padding: var(--space-2);
.ant-space {
width: 100%;
flex-wrap: wrap;
.ant-select,
.ant-input,
.ant-picker,
.ant-btn {
width: calc(50% - var(--space-1)) !important;
}
}
}
&__content {
padding: var(--space-2);
}
}
}
</style> </style>