feat: 布局优化
This commit is contained in:
@@ -62,7 +62,11 @@
|
||||
"mcp__server-mysql__describe_table",
|
||||
"mcp__server-mysql__execute",
|
||||
"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": [],
|
||||
"ask": []
|
||||
|
||||
@@ -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>
|
||||
@@ -61,8 +61,8 @@ const routes = [
|
||||
path: 'system',
|
||||
name: '系统',
|
||||
children: [
|
||||
{ path: '', redirect: '/system/style-settings' },
|
||||
{ path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') },
|
||||
// { path: '', redirect: '/system/style-settings' },
|
||||
// { path: 'style-settings', name: '风格设置', component: () => import('../views/system/StyleSettings.vue') },
|
||||
{
|
||||
path: 'task-management/:type',
|
||||
name: '任务中心',
|
||||
|
||||
@@ -1,59 +1,70 @@
|
||||
<template>
|
||||
<div class="mix-task-list">
|
||||
<div class="mix-task-list__header">
|
||||
<h1 class="mix-task-list__title">混剪任务</h1>
|
||||
<div class="mix-task-list__actions">
|
||||
<a-button @click="handleRefresh">
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
刷新
|
||||
</a-button>
|
||||
<FullWidthLayout :show-back="true" @back="router.back()">
|
||||
<!-- 页面标题 -->
|
||||
<template #header>
|
||||
<div class="page-header">
|
||||
<div class="page-header__icon">
|
||||
<VideoCameraOutlined />
|
||||
</div>
|
||||
<div class="page-header__content">
|
||||
<h1 class="page-header__title">混剪任务</h1>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<!-- 筛选条件 -->
|
||||
<div class="mix-task-list__filters">
|
||||
<a-space>
|
||||
<a-select
|
||||
v-model:value="filters.status"
|
||||
style="width: 120px"
|
||||
placeholder="任务状态"
|
||||
@change="handleFilterChange"
|
||||
allow-clear
|
||||
>
|
||||
<a-select-option value="">全部状态</a-select-option>
|
||||
<a-select-option value="pending">待处理</a-select-option>
|
||||
<a-select-option value="running">处理中</a-select-option>
|
||||
<a-select-option value="success">已完成</a-select-option>
|
||||
<a-select-option value="failed">失败</a-select-option>
|
||||
</a-select>
|
||||
<!-- 页面内容 -->
|
||||
<div class="mix-task-list">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="mix-task-list__filters">
|
||||
<a-space>
|
||||
<a-select
|
||||
v-model:value="filters.status"
|
||||
style="width: 120px"
|
||||
placeholder="任务状态"
|
||||
@change="handleFilterChange"
|
||||
allow-clear
|
||||
>
|
||||
<a-select-option value="">全部状态</a-select-option>
|
||||
<a-select-option value="pending">待处理</a-select-option>
|
||||
<a-select-option value="running">处理中</a-select-option>
|
||||
<a-select-option value="success">已完成</a-select-option>
|
||||
<a-select-option value="failed">失败</a-select-option>
|
||||
</a-select>
|
||||
|
||||
<a-input
|
||||
v-model="filters.title"
|
||||
placeholder="搜索标题"
|
||||
style="width: 200px"
|
||||
allow-clear
|
||||
@press-enter="handleFilterChange"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-input
|
||||
v-model="filters.title"
|
||||
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-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>
|
||||
<a-button type="primary" @click="handleFilterChange">查询</a-button>
|
||||
<a-button @click="handleResetFilters">重置</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
<!-- 任务列表 -->
|
||||
<div class="mix-task-list__content">
|
||||
@@ -73,7 +84,7 @@
|
||||
<template v-if="column.key === 'title'">
|
||||
<div class="title-cell">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@@ -200,20 +211,26 @@
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FullWidthLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import {
|
||||
ReloadOutlined,
|
||||
SearchOutlined,
|
||||
PlayCircleOutlined,
|
||||
DownloadOutlined
|
||||
DownloadOutlined,
|
||||
VideoCameraOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { MixTaskService } from '@/api/mixTask'
|
||||
import { formatDate } from '@/utils/file'
|
||||
import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 数据
|
||||
const loading = ref(false)
|
||||
@@ -567,37 +584,62 @@ const stopAutoRefresh = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mix-task-list {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
<style scoped lang="less">
|
||||
// 页面头部样式
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mix-task-list__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mix-task-list__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
.mix-task-list {
|
||||
min-height: calc(100vh - 140px);
|
||||
background: var(--color-bg);
|
||||
padding: var(--space-3) 0;
|
||||
}
|
||||
|
||||
.mix-task-list__filters {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
margin-bottom: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
@@ -605,9 +647,9 @@ const stopAutoRefresh = () => {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 16px;
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.title-cell {
|
||||
@@ -617,42 +659,42 @@ const stopAutoRefresh = () => {
|
||||
}
|
||||
|
||||
.expanded-content {
|
||||
padding: 16px;
|
||||
background: var(--color-bg-2);
|
||||
border-radius: var(--radius-card);
|
||||
margin: 8px;
|
||||
padding: var(--space-3);
|
||||
background: var(--color-bg);
|
||||
border-radius: 8px;
|
||||
margin: var(--space-2);
|
||||
}
|
||||
|
||||
.task-text {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
margin-bottom: var(--space-3);
|
||||
|
||||
.task-text p {
|
||||
margin: 8px 0 0 0;
|
||||
padding: 8px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
line-height: 1.6;
|
||||
p {
|
||||
margin: var(--space-2) 0 0 0;
|
||||
padding: var(--space-2);
|
||||
background: var(--color-surface);
|
||||
border-radius: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.task-results {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.result-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-2);
|
||||
padding: 6px 12px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -662,10 +704,9 @@ const stopAutoRefresh = () => {
|
||||
}
|
||||
|
||||
.task-error {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
/* 确保按钮内的图标和文字对齐 */
|
||||
:deep(.ant-btn .anticon) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@@ -94,7 +94,8 @@ const operations = useTaskOperations(
|
||||
{
|
||||
deleteApi,
|
||||
cancelApi,
|
||||
retryApi
|
||||
retryApi,
|
||||
getSignedUrlsApi
|
||||
},
|
||||
props.onSuccess
|
||||
)
|
||||
|
||||
@@ -43,6 +43,7 @@ const text = computed(() => {
|
||||
PENDING: '待处理',
|
||||
RUNNING: '处理中',
|
||||
SUCCESS: '已完成',
|
||||
PROCESSING: '处理中',
|
||||
FAILED: '失败',
|
||||
CANCELED: '已取消',
|
||||
...props.statusMap
|
||||
|
||||
@@ -2,12 +2,12 @@ import { message, Modal } from 'ant-design-vue'
|
||||
|
||||
/**
|
||||
* 任务操作通用逻辑 Composable
|
||||
* @param {Object} apis - API 对象，包含 deleteApi, cancelApi, retryApi
|
||||
* @param {Object} apis - API 对象，包含 deleteApi, cancelApi, retryApi, getSignedUrlsApi
|
||||
* @param {Function} onSuccess - 操作成功后的回调函数
|
||||
* @returns {Object} 操作方法
|
||||
*/
|
||||
export function useTaskOperations(apis, onSuccess) {
|
||||
const { deleteApi, cancelApi, retryApi } = apis
|
||||
const { deleteApi, cancelApi, retryApi, getSignedUrlsApi } = apis
|
||||
|
||||
// 删除任务
|
||||
const handleDelete = (id) => {
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="digital-human-task-page">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="digital-human-task-page__filters">
|
||||
<a-space>
|
||||
<a-space :size="16">
|
||||
<a-select
|
||||
v-model:value="filters.status"
|
||||
style="width: 120px"
|
||||
class="filter-select"
|
||||
placeholder="任务状态"
|
||||
@change="handleFilterChange"
|
||||
allow-clear
|
||||
@@ -20,8 +20,8 @@
|
||||
|
||||
<a-input
|
||||
v-model:value="filters.keyword"
|
||||
class="filter-input"
|
||||
placeholder="搜索任务名称"
|
||||
style="width: 200px"
|
||||
allow-clear
|
||||
@press-enter="handleFilterChange"
|
||||
>
|
||||
@@ -32,15 +32,19 @@
|
||||
|
||||
<a-range-picker
|
||||
v-model:value="filters.dateRange"
|
||||
style="width: 300px"
|
||||
class="filter-date-picker"
|
||||
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-button type="primary" class="filter-button" @click="handleFilterChange">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button class="filter-button" @click="handleResetFilters">
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
@@ -437,58 +441,92 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
.digital-human-task-page {
|
||||
padding: 16px;
|
||||
padding: var(--space-3);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
gap: var(--space-3);
|
||||
|
||||
.digital-human-task-page__filters {
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
&__filters {
|
||||
padding: var(--space-3);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
|
||||
.digital-human-task-page__content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.filter-select,
|
||||
.filter-input {
|
||||
width: 200px;
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
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);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
/* 批量操作栏 */
|
||||
.batch-actions {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
margin-bottom: var(--space-3);
|
||||
|
||||
/* 表格容器 */
|
||||
.batch-actions + .ant-spin {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
+ .ant-spin {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.batch-actions + .ant-spin :deep(.ant-spin-container) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
:deep(.ant-spin-container) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.batch-actions + .ant-spin :deep(.ant-table) {
|
||||
flex: 1;
|
||||
:deep(.ant-table) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 任务名称单元格 */
|
||||
.task-name-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
/* 文本截断 */
|
||||
@@ -502,55 +540,60 @@ onMounted(() => {
|
||||
|
||||
/* 展开内容 */
|
||||
.expanded-content {
|
||||
padding: 16px;
|
||||
padding: var(--space-3);
|
||||
background: var(--color-bg-2);
|
||||
border-radius: var(--radius-card);
|
||||
margin: 8px;
|
||||
margin: var(--space-2);
|
||||
}
|
||||
|
||||
.task-text {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
margin-bottom: var(--space-3);
|
||||
|
||||
.task-text p {
|
||||
margin: 8px 0 0 0;
|
||||
padding: 8px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
line-height: 1.6;
|
||||
p {
|
||||
margin: var(--space-2) 0 0 0;
|
||||
padding: var(--space-2);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.task-params {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
margin-bottom: var(--space-3);
|
||||
|
||||
.params-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.params-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
|
||||
.param-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
.param-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-2);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
transition: all 0.2s;
|
||||
|
||||
.param-label {
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: var(--color-text);
|
||||
.param-label {
|
||||
font-weight: 600;
|
||||
margin-right: var(--space-2);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
.param-value {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-result {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.processing-tip {
|
||||
@@ -559,7 +602,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.task-error {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
/* 确保按钮内的图标和文字对齐 */
|
||||
@@ -576,4 +619,35 @@ onMounted(() => {
|
||||
background: var(--color-bg-2);
|
||||
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>
|
||||
|
||||
@@ -20,7 +20,10 @@
|
||||
class="task-layout__nav-link"
|
||||
@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>
|
||||
</a>
|
||||
</li>
|
||||
@@ -34,84 +37,22 @@
|
||||
<component :is="currentComponent" :key="currentType" />
|
||||
</transition>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
|
||||
import { computed, defineAsyncComponent } from 'vue'
|
||||
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 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(() => {
|
||||
// 使用路由的params.type，如果不存在则默认使用mix-task
|
||||
const type = route.params.type
|
||||
|
||||
// 如果类型无效或为空，默认使用 mix-task
|
||||
if (!type || type === 'task-management') {
|
||||
return 'mix-task'
|
||||
}
|
||||
@@ -149,29 +90,12 @@ const currentComponent = computed(() => {
|
||||
})
|
||||
|
||||
// 导航到指定类型
|
||||
const navigateTo = (type, closeMobile = false) => {
|
||||
const navigateTo = (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>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
.task-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@@ -187,23 +111,29 @@ onUnmounted(() => {
|
||||
border-right: 1px solid var(--color-border);
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1199px) {
|
||||
.task-layout__sidebar {
|
||||
@media (max-width: 1199px) {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.task-layout__sidebar {
|
||||
display: none;
|
||||
@media (max-width: 767px) {
|
||||
width: 100%;
|
||||
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 {
|
||||
padding: 24px 16px;
|
||||
padding: var(--space-3) var(--space-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
@@ -217,58 +147,64 @@ onUnmounted(() => {
|
||||
/* 导航列表 */
|
||||
.task-layout__nav-list {
|
||||
list-style: none;
|
||||
padding: 8px 0;
|
||||
padding: var(--space-1) 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 导航项 */
|
||||
.task-layout__nav-item {
|
||||
margin: 4px 8px;
|
||||
}
|
||||
margin: 4px var(--space-2);
|
||||
|
||||
.task-layout__nav-item.is-active .task-layout__nav-link {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
&.is-active {
|
||||
.task-layout__nav-link {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
|
||||
.task-layout__nav-item.is-active .nav-icon {
|
||||
color: #fff;
|
||||
.nav-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 导航链接 */
|
||||
.task-layout__nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
padding: var(--space-2) var(--space-2);
|
||||
border-radius: var(--radius-card);
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-layout__nav-link:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-bg-2);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.task-layout__nav-item.is-active .task-layout__nav-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
.is-active & {
|
||||
&:hover {
|
||||
background: var(--color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 导航图标 */
|
||||
.nav-icon {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 12px;
|
||||
margin-right: var(--space-2);
|
||||
color: var(--color-text-3);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.task-layout__nav-item.is-active .nav-icon {
|
||||
color: #fff;
|
||||
.task-layout__nav-item.is-active & {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 导航文本 */
|
||||
@@ -283,6 +219,10 @@ onUnmounted(() => {
|
||||
overflow: auto;
|
||||
background: var(--color-bg);
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
@@ -295,41 +235,4 @@ onUnmounted(() => {
|
||||
.fade-leave-to {
|
||||
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>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="mix-task-page">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="mix-task-page__filters">
|
||||
<a-space>
|
||||
<a-space :size="16">
|
||||
<a-select
|
||||
v-model:value="filters.status"
|
||||
style="width: 120px"
|
||||
class="filter-select"
|
||||
placeholder="任务状态"
|
||||
@change="handleFilterChange"
|
||||
allow-clear
|
||||
@@ -19,8 +19,8 @@
|
||||
|
||||
<a-input
|
||||
v-model:value="filters.keyword"
|
||||
class="filter-input"
|
||||
placeholder="搜索标题"
|
||||
style="width: 200px"
|
||||
allow-clear
|
||||
@press-enter="handleFilterChange"
|
||||
>
|
||||
@@ -31,15 +31,19 @@
|
||||
|
||||
<a-range-picker
|
||||
v-model:value="filters.dateRange"
|
||||
style="width: 300px"
|
||||
class="filter-date-picker"
|
||||
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-button type="primary" class="filter-button" @click="handleFilterChange">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button class="filter-button" @click="handleResetFilters">
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
|
||||
@@ -106,17 +110,6 @@
|
||||
<!-- 操作列 -->
|
||||
<template v-else-if="column.key === 'actions'">
|
||||
<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
|
||||
v-if="isStatus(record.status, 'running')"
|
||||
size="small"
|
||||
@@ -150,19 +143,17 @@
|
||||
<p>{{ record.text }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 生成结果 -->
|
||||
<div v-if="record.outputUrls && record.outputUrls.length > 0" class="task-results">
|
||||
<strong>生成结果：</strong>
|
||||
<div class="result-list">
|
||||
<div
|
||||
v-for="(url, index) in record.outputUrls"
|
||||
:key="index"
|
||||
@click="handleDownloadSignedUrl(record.id, index)"
|
||||
class="result-item"
|
||||
>
|
||||
<a-button
|
||||
v-if="isStatus(record.status, 'success')"
|
||||
type="link"
|
||||
@click="handlePreview(record.id, index)"
|
||||
>
|
||||
<PlayCircleOutlined />
|
||||
视频 {{ index + 1 }}
|
||||
@@ -171,7 +162,6 @@
|
||||
v-if="isStatus(record.status, 'success')"
|
||||
type="link"
|
||||
size="small"
|
||||
@click="handleDownloadSignedUrl(record.id, index)"
|
||||
>
|
||||
<DownloadOutlined />
|
||||
</a-button>
|
||||
@@ -385,75 +375,115 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
.mix-task-page {
|
||||
padding: 16px;
|
||||
padding: var(--space-3);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
gap: var(--space-3);
|
||||
|
||||
.mix-task-page__filters {
|
||||
padding: 16px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
&__filters {
|
||||
padding: var(--space-3);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
|
||||
.mix-task-page__content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 16px;
|
||||
.filter-select,
|
||||
.filter-input {
|
||||
width: 200px;
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
/* 展开内容 */
|
||||
.expanded-content {
|
||||
padding: 16px;
|
||||
padding: var(--space-3);
|
||||
background: var(--color-bg-2);
|
||||
border-radius: var(--radius-card);
|
||||
margin: 8px;
|
||||
margin: var(--space-2);
|
||||
}
|
||||
|
||||
.task-text {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
margin-bottom: var(--space-3);
|
||||
|
||||
.task-text p {
|
||||
margin: 8px 0 0 0;
|
||||
padding: 8px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
line-height: 1.6;
|
||||
p {
|
||||
margin: var(--space-2) 0 0 0;
|
||||
padding: var(--space-2);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.task-results {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
margin-bottom: var(--space-3);
|
||||
|
||||
.result-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.result-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
font-size: 13px;
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.processing-tip {
|
||||
@@ -462,7 +492,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.task-error {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
/* 确保按钮内的图标和文字对齐 */
|
||||
@@ -479,4 +509,31 @@ onMounted(() => {
|
||||
background: var(--color-bg-2);
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user