优化
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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'
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user