This commit is contained in:
2026-03-17 00:46:51 +08:00
parent 4a5fdd3961
commit f0ecab4350
20 changed files with 283 additions and 287 deletions

View File

@@ -175,10 +175,10 @@ function handleUse() {
min-height: 300px;
max-height: 500px;
overflow-y: auto;
padding: 24px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface);
padding: var(--space-6);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--muted);
}
.edit-textarea {
@@ -192,16 +192,16 @@ function handleUse() {
align-items: center;
width: 100%;
flex-wrap: wrap;
gap: 8px;
gap: var(--space-2);
.left-actions {
display: flex;
gap: 4px;
gap: var(--space-1);
}
.right-actions {
display: flex;
gap: 8px;
gap: var(--space-2);
}
}
</style>

View File

@@ -617,7 +617,7 @@ onMounted(() => loadVoiceList())
justify-content: space-between;
align-items: center;
padding: var(--space-4);
background: var(--color-bg-card);
background: var(--card);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
box-shadow: var(--shadow-sm);
@@ -630,7 +630,7 @@ onMounted(() => loadVoiceList())
}
.table-wrapper {
background: var(--color-bg-card);
background: var(--card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
@@ -641,8 +641,8 @@ onMounted(() => loadVoiceList())
justify-content: space-between;
align-items: center;
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-border);
background: var(--color-bg-card);
border-top: 1px solid var(--border);
background: var(--card);
}
// 上传区域
@@ -652,25 +652,25 @@ onMounted(() => loadVoiceList())
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
border: 2px dashed var(--color-border);
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
background: var(--color-muted);
background: var(--muted);
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: var(--color-primary);
border-color: var(--primary);
background: oklch(0.97 0.01 254.604);
}
&--dragging {
border-color: var(--color-primary);
border-color: var(--primary);
background: oklch(0.95 0.02 254.604);
}
&__icon {
font-size: 36px;
color: var(--color-primary);
color: var(--primary);
margin-bottom: var(--space-3);
opacity: 0.8;
}
@@ -678,13 +678,13 @@ onMounted(() => loadVoiceList())
&__title {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-foreground);
color: var(--foreground);
margin-bottom: var(--space-1);
}
&__hint {
font-size: var(--font-size-xs);
color: var(--color-muted-foreground);
color: var(--muted-foreground);
}
}
@@ -694,9 +694,9 @@ onMounted(() => loadVoiceList())
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-4);
border: 2px solid var(--color-border);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
background: var(--color-muted);
background: var(--muted);
}
.upload-preview {
@@ -710,7 +710,7 @@ onMounted(() => loadVoiceList())
&__icon {
font-size: 28px;
color: var(--color-primary);
color: var(--primary);
}
&__info {
@@ -723,7 +723,7 @@ onMounted(() => loadVoiceList())
&__name {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-foreground);
color: var(--foreground);
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;

View File

@@ -202,12 +202,12 @@
</section>
</main>
<!-- 高级设置抽屉 -->
<Sheet v-model:open="showSettings" style="padding: 0 16px;">
<SheetContent class="w-80">
<SheetHeader class="pb-4 border-b border-border">
<SheetTitle class="text-lg">高级设置</SheetTitle>
</SheetHeader>
<!-- 高级设置模态框 -->
<Dialog v-model:open="showSettings">
<DialogContent class="max-w-md">
<DialogHeader>
<DialogTitle>高级设置</DialogTitle>
</DialogHeader>
<div class="py-6 space-y-8">
<!-- 裁剪模式 - 胶囊式切换 -->
@@ -267,8 +267,14 @@
</div>
</div>
</div>
</SheetContent>
</Sheet>
<DialogFooter>
<Button variant="outline" @click="showSettings = false">
关闭
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<!-- 场景选择弹窗 -->
<SceneSelectorModal
@@ -313,11 +319,12 @@ import {
SelectValue
} from '@/components/ui/select'
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle
} from '@/components/ui/sheet'
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle
} from '@/components/ui/dialog'
import { Label } from '@/components/ui/label'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'

View File

@@ -174,43 +174,12 @@
</div>
<!-- 分页 -->
<div v-if="paginationConfig.total > 0" class="flex items-center justify-between py-4 border-t">
<span class="text-sm text-muted-foreground">
{{ paginationConfig.total }} 条记录
</span>
<Pagination
v-slot="{ page }"
:items-per-page="paginationConfig.pageSize"
:total="paginationConfig.total"
:sibling-count="1"
show-edges
:page="paginationConfig.current"
@update:page="handlePageChange"
>
<PaginationContent v-slot="{ items }">
<PaginationFirst @click="handlePageChange(1)" />
<PaginationPrevious @click="handlePageChange(paginationConfig.current - 1)" />
<template v-for="(item, index) in items" :key="index">
<PaginationItem
v-if="item.type === 'page'"
:value="item.value"
as-child
>
<Button
:variant="page === item.value ? 'default' : 'outline'"
size="icon-sm"
class="h-8 w-8"
>
{{ item.value }}
</Button>
</PaginationItem>
<PaginationEllipsis v-else :index="index" />
</template>
<PaginationNext @click="handlePageChange(paginationConfig.current + 1)" />
<PaginationLast @click="handlePageChange(Math.ceil(paginationConfig.total / paginationConfig.pageSize))" />
</PaginationContent>
</Pagination>
</div>
<TablePagination
:current="paginationConfig.current"
:page-size="paginationConfig.pageSize"
:total="paginationConfig.total"
@change="handlePageChange"
/>
</div>
</div>
@@ -249,16 +218,7 @@ import { Progress } from '@/components/ui/progress'
import { Alert } from '@/components/ui/alert'
import { Spinner } from '@/components/ui/spinner'
import { Checkbox } from '@/components/ui/checkbox'
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationFirst,
PaginationItem,
PaginationLast,
PaginationNext,
PaginationPrevious
} from '@/components/ui/pagination'
import { TablePagination } from '@/components/ui/pagination'
import {
AlertDialog,
AlertDialogAction,
@@ -396,7 +356,7 @@ onMounted(fetchList)
<style scoped lang="less">
.task-page {
padding: var(--space-4);
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
@@ -404,17 +364,20 @@ onMounted(fetchList)
}
.task-page__filters {
padding: var(--space-4);
background: var(--color-bg-card);
flex-shrink: 0;
padding: var(--space-5);
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.task-page__content {
flex: 1;
overflow: hidden;
background: var(--color-bg-card);
background: var(--card);
border-radius: var(--radius-lg);
padding: var(--space-4);
border: 1px solid var(--border);
padding: var(--space-5);
display: flex;
flex-direction: column;
}

View File

@@ -1,15 +1,15 @@
<template>
<div class="task-layout">
<!-- 顶部Tab栏 - 现代化设计 -->
<!-- 顶部Tab栏 -->
<div class="task-layout__header">
<div class="flex items-center justify-between">
<Tabs v-model:model-value="currentType" class="w-auto">
<TabsList class="h-11 bg-muted/50 p-1 gap-1">
<TabsList class="h-auto bg-transparent p-0 gap-2">
<TabsTrigger
v-for="item in NAV_ITEMS"
:key="item.type"
:value="item.type"
class="h-9 px-4 gap-2 rounded-md transition-all data-[state=active]:bg-background data-[state=active]:shadow-sm data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground"
class="h-9 px-4 gap-2 rounded-lg bg-transparent transition-all data-[state=active]:bg-primary data-[state=active]:text-white data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted focus-visible:ring-0 focus-visible:outline-none"
>
<Icon :icon="item.icon" class="size-4" />
<span class="font-medium">{{ item.label }}</span>
@@ -80,10 +80,9 @@ const currentComponent = computed(() => {
.task-layout__header {
flex-shrink: 0;
padding: var(--space-4) var(--space-6);
background: var(--card);
padding: 0 var(--space-4);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.task-layout__content {

View File

@@ -22,7 +22,7 @@
<Icon icon="lucide:search" class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
<Input
v-model="filters.keyword"
placeholder="搜索标题"
placeholder="搜索任务名称"
class="pl-9"
@keyup.enter="handleFilterChange"
/>
@@ -63,30 +63,29 @@
<!-- 任务列表 -->
<div class="task-page__content">
<!-- 批量操作工具 -->
<div class="batch-toolbar flex items-center gap-3 pb-3 border-b">
<span v-if="selectedRowKeys.length > 0" class="text-sm">
已选择 <strong class="text-primary">{{ selectedRowKeys.length }}</strong>
</span>
<Button
:disabled="!hasDownloadableSelected"
:loading="batchDownloading"
size="sm"
class="text-white"
@click="handleBatchDownloadSelected"
>
<Icon icon="lucide:download" class="mr-1 size-4" />
批量下载 ({{ downloadableCount }})
</Button>
<Button
variant="destructive"
size="sm"
:disabled="selectedRowKeys.length === 0"
@click="handleBatchDeleteSelected"
>
<Icon icon="lucide:trash-2" class="mr-1 size-4" />
批量删除
</Button>
<!-- 批量操作栏 -->
<div v-if="selectedRowKeys.length > 0" class="batch-actions">
<Alert class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Icon icon="lucide:info" class="size-4" />
<span>已选中 {{ selectedRowKeys.length }} </span>
</div>
<div class="flex items-center gap-2">
<Button
:disabled="!hasDownloadableSelected"
:loading="batchDownloading"
size="sm"
@click="handleBatchDownloadSelected"
>
<Icon icon="lucide:download" class="mr-1 size-4" />
批量下载 ({{ downloadableCount }})
</Button>
<Button variant="destructive" size="sm" @click="handleBatchDeleteSelected">
<Icon icon="lucide:trash-2" class="mr-1 size-4" />
批量删除
</Button>
</div>
</Alert>
</div>
<div class="relative min-h-[200px]">
@@ -251,43 +250,12 @@
</div>
<!-- 分页 -->
<div v-if="paginationConfig.total > 0" class="flex items-center justify-between py-4 border-t">
<span class="text-sm text-muted-foreground">
{{ paginationConfig.total }} 条记录
</span>
<Pagination
v-slot="{ page }"
:items-per-page="paginationConfig.pageSize"
:total="paginationConfig.total"
:sibling-count="1"
show-edges
:page="paginationConfig.current"
@update:page="handlePageChange"
>
<PaginationContent v-slot="{ items }">
<PaginationFirst @click="handlePageChange(1)" />
<PaginationPrevious @click="handlePageChange(paginationConfig.current - 1)" />
<template v-for="(item, index) in items" :key="index">
<PaginationItem
v-if="item.type === 'page'"
:value="item.value"
as-child
>
<Button
:variant="page === item.value ? 'default' : 'outline'"
size="icon-sm"
class="h-8 w-8"
>
{{ item.value }}
</Button>
</PaginationItem>
<PaginationEllipsis v-else :index="index" />
</template>
<PaginationNext @click="handlePageChange(paginationConfig.current + 1)" />
<PaginationLast @click="handlePageChange(Math.ceil(paginationConfig.total / paginationConfig.pageSize))" />
</PaginationContent>
</Pagination>
</div>
<TablePagination
:current="paginationConfig.current"
:page-size="paginationConfig.pageSize"
:total="paginationConfig.total"
@change="handlePageChange"
/>
</div>
</div>
@@ -363,16 +331,7 @@ import {
AlertDialogHeader,
AlertDialogTitle
} from '@/components/ui/alert-dialog'
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationFirst,
PaginationItem,
PaginationLast,
PaginationNext,
PaginationPrevious
} from '@/components/ui/pagination'
import { TablePagination } from '@/components/ui/pagination'
import { MixTaskService } from '@/api/mixTask'
import { formatDate } from '@/utils/file'
import { useTaskList } from '@/views/system/task-management/composables/useTaskList'
@@ -620,7 +579,7 @@ onMounted(fetchList)
<style scoped lang="less">
.task-page {
padding: 0;
padding: var(--space-4);
height: 100%;
display: flex;
flex-direction: column;
@@ -628,28 +587,22 @@ onMounted(fetchList)
}
.task-page__filters {
flex-shrink: 0;
padding: var(--space-5);
background: var(--card);
padding: var(--space-4);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.task-page__content {
flex: 1;
overflow: hidden;
background: var(--card);
background: var(--color-bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
padding: var(--space-5);
padding: var(--space-4);
display: flex;
flex-direction: column;
}
.batch-toolbar {
flex-shrink: 0;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border);
.batch-actions {
margin-bottom: var(--space-4);
}

View File

@@ -288,40 +288,49 @@ onMounted(() => {
<style scoped lang="less">
.task-list-container {
padding: 24px;
padding: 0;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.filter-section {
flex-shrink: 0;
padding: var(--space-5);
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
display: flex;
gap: 12px;
margin-bottom: 20px;
gap: var(--space-3);
margin-bottom: 0;
}
.table-wrapper {
background: white;
border-radius: 12px;
border: 1px solid var(--color-gray-100);
flex: 1;
background: var(--card);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
overflow: hidden;
}
.pagination-section {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
margin-top: 16px;
padding: var(--space-4);
border-top: 1px solid var(--border);
}
.prompt-content {
padding: 16px;
background: var(--color-gray-50);
border-radius: 8px;
padding: var(--space-4);
background: var(--muted);
border-radius: var(--radius);
white-space: pre-wrap;
max-height: 400px;
overflow-y: auto;
font-size: 14px;
font-size: var(--font-size-base);
line-height: 1.6;
}
</style>

View File

@@ -146,10 +146,7 @@ onMounted(async () => {
<template>
<div class="profile-container">
<div class="page-header">
<h1 class="page-title">个人中心</h1>
<p class="page-subtitle">管理您的账户信息和资源使用情况</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- 左侧用户信息卡片 -->
@@ -299,33 +296,16 @@ onMounted(async () => {
<style scoped>
.profile-container {
padding: 24px;
padding: var(--space-6);
max-width: 1200px;
margin: 0 auto;
}
.page-header {
margin-bottom: 32px;
}
.page-title {
font-size: 28px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
}
.page-subtitle {
color: var(--color-text-secondary);
font-size: 14px;
}
/* User Card */
.user-card {
.profile-content {
text-align: center;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
background: var(--color-bg-container, #fff);
background: var(--card);
height: 100%;
padding: 24px;
}
@@ -368,7 +348,7 @@ onMounted(async () => {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: var(--color-text);
color: var(--foreground);
}
.user-role-badge {
@@ -383,7 +363,7 @@ onMounted(async () => {
.divider {
height: 1px;
background: var(--color-border-secondary, #f0f0f0);
background: var(--border);
margin: 16px 0;
}
@@ -395,7 +375,7 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
border-bottom: 1px solid var(--border);
}
.detail-item:last-child {
@@ -403,11 +383,11 @@ onMounted(async () => {
}
.detail-label {
color: var(--color-text-secondary);
color: var(--muted-foreground);
}
.detail-value {
color: var(--color-text);
color: var(--foreground);
font-weight: 500;
}
@@ -415,7 +395,7 @@ onMounted(async () => {
.stat-card {
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
background: var(--color-bg-container, #fff);
background: var(--card);
padding: 20px;
transition: transform 0.2s, box-shadow 0.2s;
}
@@ -452,26 +432,26 @@ onMounted(async () => {
.stat-label {
font-size: 14px;
color: var(--color-text-secondary);
color: var(--muted-foreground);
margin-bottom: 4px;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: var(--color-text);
color: var(--foreground);
margin-bottom: 8px;
}
.stat-unit {
font-size: 14px;
font-weight: 400;
color: var(--color-text-third);
color: var(--muted-foreground);
}
.stat-desc {
font-size: 12px;
color: var(--color-text-third);
color: var(--muted-foreground);
}
.stat-progress {
@@ -489,7 +469,7 @@ onMounted(async () => {
justify-content: center;
gap: 12px;
padding: 40px 0;
color: var(--color-text-secondary);
color: var(--muted-foreground);
}
.custom-spinner {
@@ -509,7 +489,7 @@ onMounted(async () => {
.empty-state {
text-align: center;
padding: 40px 0;
color: var(--color-text-third);
color: var(--muted-foreground);
}
.empty-icon {
@@ -522,7 +502,7 @@ onMounted(async () => {
.activity-card {
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
background: var(--color-bg-container, #fff);
background: var(--card);
padding: 20px;
}
@@ -536,12 +516,12 @@ onMounted(async () => {
.activity-title {
font-size: 16px;
font-weight: 600;
color: var(--color-text);
color: var(--foreground);
margin: 0;
}
.record-count {
color: var(--color-text-secondary);
color: var(--muted-foreground);
font-size: 13px;
}
@@ -555,7 +535,7 @@ onMounted(async () => {
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
border-bottom: 1px solid var(--border);
}
.record-item:last-child {
@@ -596,13 +576,13 @@ onMounted(async () => {
.record-reason {
font-weight: 500;
color: var(--color-text);
color: var(--foreground);
font-size: 14px;
}
.record-time {
font-size: 12px;
color: var(--color-text-secondary);
color: var(--muted-foreground);
}
.record-amount {
@@ -625,11 +605,11 @@ onMounted(async () => {
gap: 16px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--color-border-secondary, #f0f0f0);
border-top: 1px solid var(--border);
}
.page-info {
font-size: 14px;
color: var(--color-text-secondary);
color: var(--muted-foreground);
}
</style>