diff --git a/.claude/skills/shadcn-theme/SKILL.md b/.claude/skills/shadcn-theme/SKILL.md
new file mode 100644
index 0000000000..c6534a25a6
--- /dev/null
+++ b/.claude/skills/shadcn-theme/SKILL.md
@@ -0,0 +1,98 @@
+---
+name: shadcn-theming
+description: Design tokens and theming for shadcn/ui. Covers CSS variables, OKLCH colors, dark/light mode, and theme configuration for both Radix and Base UI primitives.
+versions:
+  shadcn-ui: "2.x"
+  tailwindcss: "4.1"
+user-invocable: true
+allowed-tools: Read, Write, Edit, Glob, Grep
+references: references/theming-guide.md, references/templates/theme-setup.md
+related-skills: shadcn-registries, shadcn-components
+---
+
+# shadcn Theming
+
+## Agent Workflow (MANDATORY)
+
+Before theming work, use `TeamCreate`:
+
+1. **fuse-ai-pilot:explore-codebase** - Find existing theme tokens
+2. **fuse-ai-pilot:research-expert** - Verify OKLCH patterns via Context7
+
+After: Run **fuse-ai-pilot:sniper** for validation.
+
+## Overview
+
+| Feature | Description |
+|---------|-------------|
+| **CSS Variables** | `--background`, `--foreground`, `--primary` |
+| **OKLCH Colors** | Wide-gamut P3 color space |
+| **Dark Mode** | `.dark` class or `prefers-color-scheme` |
+| **Tailwind v4** | `@theme` directive integration |
+
+## Critical Rules
+
+1. **ALWAYS use OKLCH** color space for all tokens
+2. **ALWAYS define dark mode** overrides for every token
+3. **NEVER hard-code** hex or rgb in components
+4. **USE @theme** directive for Tailwind v4 integration
+5. **MAP semantic tokens** to primitive OKLCH values
+
+## Architecture
+
+```
+app/
+├── globals.css         # :root + .dark token definitions
+└── tailwind.config.ts  # Optional (v3) or @theme (v4)
+```
+
+-> See [theme-setup.md](references/templates/theme-setup.md) for complete theme
+
+## Token Hierarchy
+
+```
+Component: --card, --card-foreground, --button-*
+    ↑
+Semantic: --primary, --secondary, --accent, --muted
+    ↑
+Primitive: oklch(55% 0.20 260), oklch(98% 0.01 260)
+```
+
+## Validation Checklist
+
+```
+[ ] CSS variables defined in :root
+[ ] Dark mode overrides in .dark
+[ ] OKLCH color space used
+[ ] Chart variables (--chart-1 to --chart-5)
+[ ] Sidebar variables if applicable
+[ ] No hard-coded hex in components
+```
+
+## Best Practices
+
+### DO
+- Use OKLCH for all colors
+- Define semantic tokens mapped to primitives
+- Provide dark mode overrides for all tokens
+- Use `@theme` for Tailwind v4 integration
+
+### DON'T
+- Hard-code hex or rgb values
+- Skip dark mode definitions
+- Mix color spaces (hex + oklch)
+- Define tokens only in Tailwind config
+
+## Reference Guide
+
+### Concepts
+
+| Topic | Reference | When to Consult |
+|-------|-----------|-----------------|
+| **Theming Guide** | [theming-guide.md](references/theming-guide.md) | CSS variables and OKLCH setup |
+
+### Templates
+
+| Template | When to Use |
+|----------|-------------|
+| [theme-setup.md](references/templates/theme-setup.md) | Complete theme configuration |
diff --git a/.claude/skills/shadcn-theme/references/templates/theme-setup.md b/.claude/skills/shadcn-theme/references/templates/theme-setup.md
new file mode 100644
index 0000000000..20ec0b734a
--- /dev/null
+++ b/.claude/skills/shadcn-theme/references/templates/theme-setup.md
@@ -0,0 +1,109 @@
+---
+name: theme-setup
+description: Complete shadcn/ui theme with CSS variables, dark mode, and Tailwind v4 integration
+keywords: theme, setup, css, oklch, dark-mode, tailwind
+---
+
+# Theme Setup
+
+## Complete Light + Dark Theme
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+
+:root {
+  --background: oklch(100% 0 0);
+  --foreground: oklch(14.1% 0.005 285.82);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(14.1% 0.005 285.82);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(14.1% 0.005 285.82);
+  --primary: oklch(20.5% 0.016 285.94);
+  --primary-foreground: oklch(98.5% 0 0);
+  --secondary: oklch(96.7% 0.001 286.38);
+  --secondary-foreground: oklch(20.5% 0.016 285.94);
+  --accent: oklch(96.7% 0.001 286.38);
+  --accent-foreground: oklch(20.5% 0.016 285.94);
+  --muted: oklch(96.7% 0.001 286.38);
+  --muted-foreground: oklch(55.6% 0.01 285.94);
+  --destructive: oklch(57.7% 0.245 27.33);
+  --destructive-foreground: oklch(98.5% 0 0);
+  --border: oklch(92.2% 0.004 286.32);
+  --input: oklch(92.2% 0.004 286.32);
+  --ring: oklch(87.1% 0.006 286.29);
+  --radius: 0.625rem;
+  --chart-1: oklch(64.6% 0.222 41.12);
+  --chart-2: oklch(60% 0.19 160);
+  --chart-3: oklch(55% 0.18 230);
+  --chart-4: oklch(70% 0.15 300);
+  --chart-5: oklch(75% 0.12 60);
+  --sidebar: oklch(98.5% 0 0);
+  --sidebar-foreground: oklch(14.1% 0.005 285.82);
+  --sidebar-primary: oklch(20.5% 0.016 285.94);
+  --sidebar-accent: oklch(96.7% 0.001 286.38);
+  --sidebar-border: oklch(92.2% 0.004 286.32);
+  --sidebar-ring: oklch(87.1% 0.006 286.29);
+}
+
+.dark {
+  --background: oklch(14.1% 0.005 285.82);
+  --foreground: oklch(98.5% 0 0);
+  --card: oklch(14.1% 0.005 285.82);
+  --card-foreground: oklch(98.5% 0 0);
+  --popover: oklch(14.1% 0.005 285.82);
+  --popover-foreground: oklch(98.5% 0 0);
+  --primary: oklch(92.2% 0 0);
+  --primary-foreground: oklch(20.5% 0.016 285.94);
+  --secondary: oklch(26.9% 0.006 286.03);
+  --secondary-foreground: oklch(98.5% 0 0);
+  --accent: oklch(26.9% 0.006 286.03);
+  --accent-foreground: oklch(98.5% 0 0);
+  --muted: oklch(26.9% 0.006 286.03);
+  --muted-foreground: oklch(71.1% 0.013 286.07);
+  --destructive: oklch(57.7% 0.245 27.33);
+  --border: oklch(26.9% 0.006 286.03);
+  --input: oklch(26.9% 0.006 286.03);
+  --ring: oklch(36.2% 0.014 285.88);
+  --sidebar: oklch(14.1% 0.005 285.82);
+  --sidebar-foreground: oklch(98.5% 0 0);
+  --sidebar-primary: oklch(48.8% 0.243 264.05);
+  --sidebar-accent: oklch(26.9% 0.006 286.03);
+  --sidebar-border: oklch(26.9% 0.006 286.03);
+}
+```
+
+## Tailwind v4 @theme Bridge
+
+```css
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+  --color-muted: var(--muted);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-lg: var(--radius);
+}
+```
+
+## Theme Switching (React)
+
+```tsx
+// components/theme-provider.tsx
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </NextThemesProvider>
+  )
+}
+```
diff --git a/.claude/skills/shadcn-theme/references/theming-guide.md b/.claude/skills/shadcn-theme/references/theming-guide.md
new file mode 100644
index 0000000000..24d6ccc3f3
--- /dev/null
+++ b/.claude/skills/shadcn-theme/references/theming-guide.md
@@ -0,0 +1,90 @@
+---
+name: theming-guide
+description: CSS variables, OKLCH colors, chart/sidebar tokens, and Tailwind integration
+when-to-use: When configuring theme tokens or color system
+keywords: theme, oklch, css-variables, dark-mode, tailwind, tokens, colors
+priority: high
+related: ../SKILL.md
+---
+
+# Theming Guide
+
+## Overview
+
+shadcn/ui uses CSS custom properties with OKLCH color space for wide-gamut P3 support and perceptual uniformity. Tokens follow a 3-level hierarchy: primitive -> semantic -> component.
+
+---
+
+## Key Concepts
+
+| Concept | Description |
+|---------|-------------|
+| **OKLCH** | `oklch(L% C H)` - perceptually uniform, P3 gamut |
+| **Semantic tokens** | `--primary`, `--secondary`, `--accent` |
+| **Dark mode** | `.dark` class or `prefers-color-scheme` |
+| **@theme** | Tailwind v4 custom property bridge |
+
+## Layout Variables
+
+| Variable | Purpose |
+|----------|---------|
+| `--background` | Page background |
+| `--foreground` | Default text |
+| `--card` / `--card-foreground` | Card surfaces |
+| `--popover` / `--popover-foreground` | Popover surfaces |
+
+## Interactive Variables
+
+| Variable | Purpose |
+|----------|---------|
+| `--primary` / `--primary-foreground` | Primary buttons, links |
+| `--secondary` | Secondary elements |
+| `--accent` | Hover backgrounds |
+| `--muted` / `--muted-foreground` | Muted backgrounds |
+| `--destructive` | Danger/delete actions |
+
+## Utility Variables
+
+| Variable | Purpose |
+|----------|---------|
+| `--border` | Default border color |
+| `--input` | Input border color |
+| `--ring` | Focus ring color |
+| `--radius` | Default border radius (0.625rem) |
+
+## OKLCH Color Space
+
+```
+oklch(Lightness% Chroma Hue)
+  L: 0-100%  (0 = black, 100 = white)
+  C: 0-0.4   (0 = gray, 0.4 = vivid)
+  H: 0-360   (hue angle)
+```
+
+Benefits: perceptual uniformity, P3 gamut, predictable contrast.
+
+## Theme Switching
+
+Use `.dark` class on `<html>` or CSS media query:
+
+```tsx
+<html className={theme === "dark" ? "dark" : ""}>
+```
+
+For full setup with next-themes, see [theme-setup.md](templates/theme-setup.md).
+
+---
+
+## Common Mistakes
+
+| Mistake | Fix |
+|---------|-----|
+| Mixing hex and OKLCH | Use OKLCH consistently |
+| Forgetting dark overrides | Every :root token needs .dark equivalent |
+| Defining colors in Tailwind config | Use CSS variables with @theme bridge |
+
+---
+
+## Related Templates
+
+- [theme-setup.md](templates/theme-setup.md) - Complete theme configuration
diff --git a/frontend/app/web-gold/src/layouts/MainLayout.vue b/frontend/app/web-gold/src/layouts/MainLayout.vue
index 4298cd05b3..33f5c21168 100644
--- a/frontend/app/web-gold/src/layouts/MainLayout.vue
+++ b/frontend/app/web-gold/src/layouts/MainLayout.vue
@@ -12,7 +12,7 @@ import SidebarNav from '@/components/SidebarNav.vue'
     <TopNav />
     <div class="flex flex-1 pt-[70px]">
       <SidebarNav />
-      <main class="flex-1 h-[calc(100vh-70px)] overflow-auto p-4">
+      <main class="flex-1 h-[calc(100vh-70px)] overflow-auto">
         <RouterView v-slot="{ Component }">
           <keep-alive>
             <component :is="Component" />
diff --git a/frontend/app/web-gold/src/theme.css b/frontend/app/web-gold/src/theme.css
index c6287260b4..66ea28880d 100644
--- a/frontend/app/web-gold/src/theme.css
+++ b/frontend/app/web-gold/src/theme.css
@@ -341,6 +341,28 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  /* 品牌色阶 */
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+
+  /* 灰色系 */
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
   --font-serif: var(--font-serif);
diff --git a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue b/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
index 06586cf694..4cfb063d26 100644
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue
@@ -43,7 +43,7 @@ function handleReset() {
 </script>
 
 <template>
-  <Card class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
+  <Card class="border-0 shadow-sm bg-white/80 backdrop-blur-sm  p-0">
     <CardContent class="p-5 space-y-5">
       <!-- 平台选择 -->
       <div class="space-y-2">
@@ -66,28 +66,6 @@ function handleReset() {
         />
       </div>
 
-      <!-- 排序方式 -->
-      <div class="space-y-2">
-        <Label class="text-sm font-medium text-gray-700">排序方式</Label>
-        <RadioGroup v-model="form.sort_type" class="flex gap-2">
-          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium rounded-lg cursor-pointer transition-all"
-               :class="form.sort_type === 0 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'">
-            <RadioGroupItem :value="0" id="sort-default" class="hidden" />
-            <label for="sort-default" class="cursor-pointer">综合排序</label>
-          </div>
-          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium rounded-lg cursor-pointer transition-all"
-               :class="form.sort_type === 1 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'">
-            <RadioGroupItem :value="1" id="sort-likes" class="hidden" />
-            <label for="sort-likes" class="cursor-pointer">最多点赞</label>
-          </div>
-          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium rounded-lg cursor-pointer transition-all"
-               :class="form.sort_type === 2 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'">
-            <RadioGroupItem :value="2" id="sort-latest" class="hidden" />
-            <label for="sort-latest" class="cursor-pointer">最新发布</label>
-          </div>
-        </RadioGroup>
-      </div>
-
       <!-- 分析数量 -->
       <div class="space-y-2">
         <Label class="text-sm font-medium text-gray-700">分析数量</Label>
diff --git a/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue b/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
index d7251236d3..bb24890f53 100644
--- a/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
+++ b/frontend/app/web-gold/src/views/content-style/components/BenchmarkTable.vue
@@ -46,6 +46,12 @@ const isAllSelected = computed(() => {
   return props.data.length > 0 && props.selectedRowKeys.length === props.data.length
 })
 
+// 半选状态（部分选中）
+const isIndeterminate = computed(() => {
+  const selectedLen = props.selectedRowKeys.length
+  return selectedLen > 0 && selectedLen < props.data.length
+})
+
 // 切换排序
 function handleSort(key) {
   if (sortKey.value === key) {
@@ -59,10 +65,10 @@ function handleSort(key) {
 
 // 选择切换
 function handleSelectAll(checked) {
-  if (isAllSelected.value) {
-    emit('update:selectedRowKeys', [])
-  } else {
+  if (checked) {
     emit('update:selectedRowKeys', props.data.map(item => String(item.id)))
+  } else {
+    emit('update:selectedRowKeys', [])
   }
 }
 
@@ -133,6 +139,7 @@ function formatNumber(value) {
                 <div class="flex items-center gap-2">
                   <Checkbox
                     :checked="isAllSelected"
+                    :indeterminate="isIndeterminate"
                     @update:checked="handleSelectAll"
                     class="scale-110"
                   />
diff --git a/frontend/app/web-gold/src/views/dh/VoiceCopy.vue b/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
index 52e0311422..063f284083 100644
--- a/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
+++ b/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
@@ -3,7 +3,6 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { toast } from 'vue-sonner'
 import { Icon } from '@iconify/vue'
 import dayjs from 'dayjs'
-import BasicLayout from '@/layouts/components/BasicLayout.vue'
 import { MaterialService } from '@/api/material'
 import { VoiceService } from '@/api/voice'
 import { useUpload } from '@/composables/useUpload'
@@ -42,6 +41,7 @@ import {
 } from '@/components/ui/alert-dialog'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { Progress } from '@/components/ui/progress'
+import TaskPageLayout from '@/views/system/task-management/components/TaskPageLayout.vue'
 
 // ========== 常量 ==========
 const MAX_FILE_SIZE = 5 * 1024 * 1024
@@ -369,32 +369,41 @@ onMounted(() => loadVoiceList())
 </script>
 
 <template>
-  <BasicLayout :show-back="false" :show-title="false">
-    <!-- 工具栏 -->
-    <div class="toolbar">
-      <div class="toolbar-left">
-        <Button @click="handleCreate">
-          新建配音
-        </Button>
+  <div class="p-4">
+  <TaskPageLayout
+    :loading="loading"
+    :current="pagination.current"
+    :page-size="pagination.pageSize"
+    :total="pagination.total"
+    @page-change="handlePageChange"
+  >
+    <!-- 筛选条件 -->
+    <template #filters>
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <div class="flex items-center gap-3">
+          <Button @click="handleCreate">
+            新建配音
+          </Button>
+        </div>
+        <div class="flex items-center gap-3">
+          <Input
+            v-model="searchParams.name"
+            placeholder="搜索配音名称..."
+            class="w-64"
+            @keypress.enter="handleSearch"
+          >
+            <template #prefix>
+              <Icon icon="lucide:search" class="size-4 text-muted-foreground" />
+            </template>
+          </Input>
+          <Button variant="outline" @click="handleSearch">搜索</Button>
+          <Button variant="ghost" @click="handleReset">重置</Button>
+        </div>
       </div>
-      <div class="toolbar-right">
-        <Input
-          v-model="searchParams.name"
-          placeholder="搜索配音名称..."
-          class="w-64"
-          @keypress.enter="handleSearch"
-        >
-          <template #prefix>
-            <Icon icon="lucide:search" class="size-4 text-muted-foreground" />
-          </template>
-        </Input>
-        <Button variant="outline" @click="handleSearch">搜索</Button>
-        <Button variant="ghost" @click="handleReset">重置</Button>
-      </div>
-    </div>
+    </template>
 
-    <!-- 表格区域 -->
-    <div class="table-wrapper">
+    <!-- 表格 -->
+    <template #table>
       <Table>
         <TableHeader>
           <TableRow class="hover:bg-transparent">
@@ -405,16 +414,9 @@ onMounted(() => loadVoiceList())
           </TableRow>
         </TableHeader>
         <TableBody>
-          <!-- 加载状态 -->
-          <TableRow v-if="loading">
-            <TableCell :col-span="4" class="h-48 text-center">
-              <Spinner class="mx-auto size-6" />
-            </TableCell>
-          </TableRow>
-
           <!-- 空状态 -->
-          <TableRow v-else-if="voiceList.length === 0">
-            <TableCell :col-span="4" class="h-48 text-center">
+          <TableRow v-if="voiceList.length === 0 && !loading">
+            <TableCell :colspan="4" class="h-48 text-center">
               <div class="flex flex-col items-center gap-3 text-muted-foreground">
                 <Icon icon="lucide:mic-off" class="size-10 opacity-50" />
                 <span>暂无配音数据</span>
@@ -460,190 +462,137 @@ onMounted(() => loadVoiceList())
           </TableRow>
         </TableBody>
       </Table>
+    </template>
 
-      <!-- 分页 -->
-      <div v-if="pagination.total > pagination.pageSize" class="pagination-bar">
-        <span class="text-sm text-muted-foreground">
-          共 {{ pagination.total }} 条
-        </span>
-        <div class="flex gap-1">
-          <Button
-            variant="outline"
-            size="sm"
-            :disabled="pagination.current === 1"
-            @click="handlePageChange(pagination.current - 1)"
-          >
-            上一页
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            :disabled="pagination.current * pagination.pageSize >= pagination.total"
-            @click="handlePageChange(pagination.current + 1)"
-          >
-            下一页
-          </Button>
-        </div>
-      </div>
-    </div>
+    <!-- 弹窗 -->
+    <template #modals>
+      <!-- 新建/编辑弹窗 -->
+      <Dialog :open="modalVisible" @update:open="(v) => modalVisible = v">
+        <DialogContent class="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{{ isCreateMode ? '新建配音' : '编辑配音' }}</DialogTitle>
+          </DialogHeader>
 
-    <!-- 新建/编辑弹窗 -->
-    <Dialog :open="modalVisible" @update:open="(v) => modalVisible = v">
-      <DialogContent class="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>{{ isCreateMode ? '新建配音' : '编辑配音' }}</DialogTitle>
-        </DialogHeader>
+          <div class="space-y-5 py-2">
+            <!-- 名称 -->
+            <div class="space-y-2">
+              <Label for="name">配音名称 <span class="text-destructive">*</span></Label>
+              <Input id="name" v-model="formData.name" placeholder="请输入配音名称" />
+            </div>
 
-        <div class="space-y-5 py-2">
-          <!-- 名称 -->
-          <div class="space-y-2">
-            <Label for="name">配音名称 <span class="text-destructive">*</span></Label>
-            <Input id="name" v-model="formData.name" placeholder="请输入配音名称" />
+            <!-- 上传区域 -->
+            <div v-if="isCreateMode" class="space-y-2">
+              <Label>音频文件 <span class="text-destructive">*</span></Label>
+
+              <!-- 未上传状态 -->
+              <div
+                v-if="fileList.length === 0 && !uploadState.uploading && !extractingText"
+                class="upload-zone"
+                :class="{ 'upload-zone--dragging': isDragging }"
+                @click="triggerFileInput"
+                @dragover="handleDragOver"
+                @dragleave="handleDragLeave"
+                @drop="handleDrop"
+              >
+                <div class="upload-zone__icon">
+                  <Icon icon="lucide:cloud-upload" />
+                </div>
+                <p class="upload-zone__title">点击或拖拽音频文件到此区域</p>
+                <p class="upload-zone__hint">支持 MP3、WAV、AAC、M4A、FLAC、OGG，最大 5MB</p>
+              </div>
+
+              <!-- 上传中 -->
+              <div v-else-if="uploadState.uploading" class="upload-status">
+                <Progress :value="50" class="w-16" />
+                <p class="mt-3 text-sm text-muted-foreground">正在上传...</p>
+              </div>
+
+              <!-- 识别中 -->
+              <div v-else-if="extractingText" class="upload-status">
+                <Progress :value="50" class="w-16" />
+                <p class="mt-3 text-sm text-muted-foreground">正在识别语音...</p>
+              </div>
+
+              <!-- 已上传 -->
+              <div v-else class="upload-preview">
+                <div class="upload-preview__icon">
+                  <Icon icon="lucide:file-audio" />
+                </div>
+                <div class="upload-preview__info">
+                  <span class="upload-preview__name">{{ fileList[0]?.name || '音频文件' }}</span>
+                  <Badge v-if="formData.text" variant="secondary" class="gap-1">
+                    <Icon icon="lucide:check-circle" class="size-3" />
+                    已识别语音
+                  </Badge>
+                  <Badge v-else variant="outline" class="gap-1 text-amber-600">
+                    <Icon icon="lucide:alert-circle" class="size-3" />
+                    未识别到语音
+                  </Badge>
+                </div>
+                <Button variant="ghost" size="sm" class="text-destructive" @click="handleRemoveFile">
+                  <Icon icon="lucide:x" class="size-4" />
+                </Button>
+              </div>
+
+              <input
+                ref="fileInputRef"
+                type="file"
+                accept="audio/*,.mp3,.wav,.aac,.m4a,.flac,.ogg"
+                class="hidden"
+                @change="handleFileSelect"
+              />
+            </div>
+
+            <!-- 备注 -->
+            <div class="space-y-2">
+              <Label for="note">备注</Label>
+              <Textarea
+                id="note"
+                v-model="formData.note"
+                placeholder="备注信息（选填）"
+                :rows="2"
+              />
+            </div>
           </div>
 
-          <!-- 上传区域 -->
-          <div v-if="isCreateMode" class="space-y-2">
-            <Label>音频文件 <span class="text-destructive">*</span></Label>
+          <DialogFooter>
+            <Button variant="outline" @click="handleCancel">取消</Button>
+            <Button :disabled="isSubmitDisabled" :loading="submitting" @click="handleSubmit">
+              保存
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-            <!-- 未上传状态 -->
-            <div
-              v-if="fileList.length === 0 && !uploadState.uploading && !extractingText"
-              class="upload-zone"
-              :class="{ 'upload-zone--dragging': isDragging }"
-              @click="triggerFileInput"
-              @dragover="handleDragOver"
-              @dragleave="handleDragLeave"
-              @drop="handleDrop"
+      <!-- 删除确认 -->
+      <AlertDialog :open="deleteDialogVisible" @update:open="(v) => deleteDialogVisible = v">
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认删除</AlertDialogTitle>
+            <AlertDialogDescription>
+              确定要删除配音「{{ deleteTarget?.name }}」吗？此操作不可恢复。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              @click="confirmDelete"
             >
-              <div class="upload-zone__icon">
-                <Icon icon="lucide:cloud-upload" />
-              </div>
-              <p class="upload-zone__title">点击或拖拽音频文件到此区域</p>
-              <p class="upload-zone__hint">支持 MP3、WAV、AAC、M4A、FLAC、OGG，最大 5MB</p>
-            </div>
+              删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </template>
+  </TaskPageLayout>
+  </div>
 
-            <!-- 上传中 -->
-            <div v-else-if="uploadState.uploading" class="upload-status">
-              <Progress :value="50" class="w-16" />
-              <p class="mt-3 text-sm text-muted-foreground">正在上传...</p>
-            </div>
 
-            <!-- 识别中 -->
-            <div v-else-if="extractingText" class="upload-status">
-              <Progress :value="50" class="w-16" />
-              <p class="mt-3 text-sm text-muted-foreground">正在识别语音...</p>
-            </div>
-
-            <!-- 已上传 -->
-            <div v-else class="upload-preview">
-              <div class="upload-preview__icon">
-                <Icon icon="lucide:file-audio" />
-              </div>
-              <div class="upload-preview__info">
-                <span class="upload-preview__name">{{ fileList[0]?.name || '音频文件' }}</span>
-                <Badge v-if="formData.text" variant="secondary" class="gap-1">
-                  <Icon icon="lucide:check-circle" class="size-3" />
-                  已识别语音
-                </Badge>
-                <Badge v-else variant="outline" class="gap-1 text-amber-600">
-                  <Icon icon="lucide:alert-circle" class="size-3" />
-                  未识别到语音
-                </Badge>
-              </div>
-              <Button variant="ghost" size="sm" class="text-destructive" @click="handleRemoveFile">
-                <Icon icon="lucide:x" class="size-4" />
-              </Button>
-            </div>
-
-            <input
-              ref="fileInputRef"
-              type="file"
-              accept="audio/*,.mp3,.wav,.aac,.m4a,.flac,.ogg"
-              class="hidden"
-              @change="handleFileSelect"
-            />
-          </div>
-
-          <!-- 备注 -->
-          <div class="space-y-2">
-            <Label for="note">备注</Label>
-            <Textarea
-              id="note"
-              v-model="formData.note"
-              placeholder="备注信息（选填）"
-              :rows="2"
-            />
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" @click="handleCancel">取消</Button>
-          <Button :disabled="isSubmitDisabled" :loading="submitting" @click="handleSubmit">
-            保存
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    <!-- 删除确认 -->
-    <AlertDialog :open="deleteDialogVisible" @update:open="(v) => deleteDialogVisible = v">
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认删除</AlertDialogTitle>
-          <AlertDialogDescription>
-            确定要删除配音「{{ deleteTarget?.name }}」吗？此操作不可恢复。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction
-            class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            @click="confirmDelete"
-          >
-            删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-
-    <audio ref="audioPlayer" class="hidden" />
-  </BasicLayout>
+  <audio ref="audioPlayer" class="hidden" />
 </template>
 
 <style scoped lang="less">
-.toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-4);
-  background: var(--card);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--space-4);
-  box-shadow: var(--shadow-sm);
-}
-
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.table-wrapper {
-  background: var(--card);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-  overflow: hidden;
-}
-
-.pagination-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--space-3) var(--space-4);
-  border-top: 1px solid var(--border);
-  background: var(--card);
-}
-
 // 上传区域
 .upload-zone {
   display: flex;
diff --git a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
index b4a181a15b..583dc2e89b 100644
--- a/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
+++ b/frontend/app/web-gold/src/views/kling/IdentifyFace.vue
@@ -206,7 +206,7 @@
             <label class="input-label">语速调节</label>
             <div class="rate-control">
               <Slider
-                v-model="store.speechRate"
+                v-model="speechRateArray"
                 :min="0.5"
                 :max="2.0"
                 :step="0.1"
@@ -283,6 +283,16 @@ const rateMarks = {
   2.0: '2.0x',
 }
 
+// Slider 组件需要数组形式的 v-model
+const speechRateArray = computed({
+  get: () => [store.speechRate],
+  set: (val: number[]) => {
+    if (val?.[0] !== undefined) {
+      store.speechRate = val[0]
+    }
+  }
+})
+
 function triggerFileSelect() {
   fileInput.value?.click()
 }
@@ -378,7 +388,6 @@ onMounted(async () => {
   min-height: 100vh;
   background: @bg-page;
   padding: 48px 64px;
-  max-width: 1400px;
   margin: 0 auto;
 
   @media (max-width: 1024px) {
diff --git a/frontend/app/web-gold/src/views/material/MaterialListNew.vue b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
index a0af388407..648b5bf350 100644
--- a/frontend/app/web-gold/src/views/material/MaterialListNew.vue
+++ b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
@@ -28,7 +28,7 @@
               <div class="flex items-center min-w-0 flex-1">
                 <Icon
                   icon="lucide:folder"
-                  class="mr-2.5 text-base shrink-0"
+                  class="mr-2.5 size-5 shrink-0"
                   :class="selectedGroupId === group.id ? 'text-primary' : 'text-muted-foreground'"
                 />
                 <template v-if="editingGroupId !== group.id">
@@ -51,13 +51,13 @@
                   <span class="text-xs mr-1" :class="selectedGroupId === group.id ? 'text-primary/80' : 'text-muted-foreground'">{{ group.fileCount }}</span>
                   <Icon
                     icon="lucide:pencil"
-                    class="opacity-0 group-hover:opacity-100 p-1 cursor-pointer text-xs transition-all"
+                    class="opacity-0 group-hover:opacity-100 p-0.5 cursor-pointer size-4 transition-all"
                     :class="selectedGroupId === group.id ? 'text-primary/70 hover:text-primary' : 'text-muted-foreground hover:text-primary'"
                     @click.stop="handleEditGroup(group, $event)"
                   />
                   <Icon
                     icon="lucide:trash-2"
-                    class="opacity-0 group-hover:opacity-100 p-1 cursor-pointer text-xs transition-all"
+                    class="opacity-0 group-hover:opacity-100 p-0.5 cursor-pointer size-4 transition-all"
                     :class="selectedGroupId === group.id ? 'text-primary/70 hover:text-destructive' : 'text-muted-foreground hover:text-destructive'"
                     @click.stop="handleDeleteGroup(group, $event)"
                   />
@@ -831,7 +831,6 @@ onMounted(async () => {
   display: flex;
   height: 100%;
   background: var(--background);
-  padding: var(--space-4);
   gap: var(--space-4);
 }
 
diff --git a/frontend/app/web-gold/src/views/system/task-management/components/TaskPageLayout.vue b/frontend/app/web-gold/src/views/system/task-management/components/TaskPageLayout.vue
new file mode 100644
index 0000000000..c0f8128ee3
--- /dev/null
+++ b/frontend/app/web-gold/src/views/system/task-management/components/TaskPageLayout.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="task-page">
+    <!-- 筛选条件区域 -->
+    <div v-if="$slots.filters" class="task-page__filters">
+      <slot name="filters" />
+    </div>
+
+    <!-- 任务列表内容区域 -->
+    <div class="task-page__content">
+      <!-- 批量操作栏 -->
+      <div v-if="$slots['batch-actions']" class="batch-actions">
+        <slot name="batch-actions" />
+      </div>
+
+      <!-- 表格区域 -->
+      <div class="task-page__table">
+        <!-- 加载状态 -->
+        <div v-if="loading" class="task-page__loading">
+          <Spinner class="size-8" />
+        </div>
+
+        <!-- 表格内容 -->
+        <div class="task-page__table-wrapper">
+          <slot name="table" />
+        </div>
+
+        <!-- 分页 -->
+        <TablePagination
+          v-if="showPagination && total > 0"
+          :current="current"
+          :page-size="pageSize"
+          :total="total"
+          @change="$emit('page-change', $event)"
+        />
+      </div>
+    </div>
+
+    <!-- 弹窗插槽 -->
+    <slot name="modals" />
+  </div>
+</template>
+
+<script setup>
+import { Spinner } from '@/components/ui/spinner'
+import { TablePagination } from '@/components/ui/pagination'
+
+defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  showPagination: {
+    type: Boolean,
+    default: true
+  },
+  current: {
+    type: Number,
+    default: 1
+  },
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  total: {
+    type: Number,
+    default: 0
+  }
+})
+
+defineEmits(['page-change'])
+</script>
+
+<style scoped lang="less">
+.task-page {
+  padding: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.task-page__filters {
+  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(--card);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+}
+
+.batch-actions {
+  flex-shrink: 0;
+  margin-bottom: var(--space-4);
+}
+
+.task-page__table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-height: 0;
+}
+
+.task-page__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background);
+  opacity: 0.5;
+  z-index: 10;
+}
+
+.task-page__table-wrapper {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+</style>
diff --git a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
index a464638840..4e095dd61a 100644
--- a/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/digital-human-task/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="task-page">
+  <TaskPageLayout
+    :loading="loading"
+    :current="paginationConfig.current"
+    :page-size="paginationConfig.pageSize"
+    :total="paginationConfig.total"
+    @page-change="handlePageChange"
+  >
     <!-- 筛选条件 -->
-    <div class="task-page__filters">
+    <template #filters>
       <div class="flex flex-wrap items-center gap-3">
         <!-- 状态筛选 -->
         <Select v-model="filters.status" @update:model-value="handleFilterChange">
@@ -60,148 +66,135 @@
           重置
         </Button>
       </div>
-    </div>
+    </template>
 
-    <!-- 任务列表 -->
-    <div class="task-page__content">
-      <!-- 批量操作栏 -->
-      <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>
-          <Button variant="destructive" size="sm" @click="confirmBatchDelete">
-            <Icon icon="lucide:trash-2" class="mr-1 size-4" />
-            批量删除
-          </Button>
-        </Alert>
-      </div>
-
-      <div class="relative">
-        <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-background/50 z-10">
-          <Spinner class="size-8" />
+    <!-- 批量操作栏 -->
+    <template #batch-actions>
+      <Alert v-if="selectedRowKeys.length > 0" 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>
+        <Button variant="destructive" size="sm" @click="confirmBatchDelete">
+          <Icon icon="lucide:trash-2" class="mr-1 size-4" />
+          批量删除
+        </Button>
+      </Alert>
+    </template>
 
-        <div class="overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead class="w-[50px]">
-                  <Checkbox
-                    :checked="isAllSelected"
-                    @update:checked="handleSelectAll"
-                  />
-                </TableHead>
-                <TableHead class="w-[80px]">ID</TableHead>
-                <TableHead class="min-w-[200px]">任务名称</TableHead>
-                <TableHead class="w-[100px]">状态</TableHead>
-                <TableHead class="w-[150px]">进度</TableHead>
-                <TableHead class="w-[180px]">创建时间</TableHead>
-                <TableHead class="w-[180px] sticky right-0 bg-background">操作</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <TableRow v-for="record in list" :key="record.id">
-                <TableCell>
-                  <Checkbox
-                    :checked="selectedRowKeys.includes(record.id)"
-                    @update:checked="handleSelectRow(record.id)"
-                  />
-                </TableCell>
-                <TableCell>{{ record.id }}</TableCell>
-                <TableCell>
-                  <span class="font-medium">{{ record.taskName }}</span>
-                </TableCell>
-                <TableCell>
-                  <TaskStatusTag :status="record.status" />
-                </TableCell>
-                <TableCell>
-                  <div class="w-[120px]">
-                    <Progress :model-value="record.progress" class="h-2" />
-                  </div>
-                </TableCell>
-                <TableCell>{{ formatDate(record.createTime) }}</TableCell>
-                <TableCell class="sticky right-0 bg-background">
-                  <div class="flex items-center gap-2">
-                    <Button
-                      v-if="isStatus(record.status, 'success')"
-                      variant="ghost"
-                      size="sm"
-                      class="h-7 px-2 text-primary hover:text-primary/80"
-                      @click="openVideoUrl(record)"
-                    >
-                      <Icon icon="lucide:play-circle" class="mr-1 size-4" />
-                      预览
-                    </Button>
-                    <Button
-                      v-if="isStatus(record.status, 'success')"
-                      variant="ghost"
-                      size="sm"
-                      class="h-7 px-2 text-success hover:text-success/80"
-                      @click="openVideoUrl(record)"
-                    >
-                      <Icon icon="lucide:download" class="mr-1 size-4" />
-                      下载
-                    </Button>
-                    <Button
-                      v-if="isStatus(record.status, 'running')"
-                      variant="ghost"
-                      size="sm"
-                      class="h-7 px-2"
-                      @click="handleCancel(record.id)"
-                    >
-                      取消
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      class="h-7 px-2 text-destructive hover:text-destructive/80 hover:bg-destructive/10"
-                      @click="handleDelete(record.id)"
-                    >
-                      删除
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
-              <TableRow v-if="list.length === 0 && !loading">
-                <TableCell colspan="7" class="h-32 text-center text-muted-foreground">
-                  暂无数据
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </div>
+    <!-- 表格 -->
+    <template #table>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="w-[50px]">
+              <Checkbox
+                :checked="isAllSelected"
+                @update:checked="handleSelectAll"
+              />
+            </TableHead>
+            <TableHead class="w-[80px]">ID</TableHead>
+            <TableHead class="min-w-[200px]">任务名称</TableHead>
+            <TableHead class="w-[100px]">状态</TableHead>
+            <TableHead class="w-[150px]">进度</TableHead>
+            <TableHead class="w-[180px]">创建时间</TableHead>
+            <TableHead class="w-[180px] sticky right-0 bg-background">操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="record in list" :key="record.id">
+            <TableCell>
+              <Checkbox
+                :checked="selectedRowKeys.includes(record.id)"
+                @update:checked="handleSelectRow(record.id)"
+              />
+            </TableCell>
+            <TableCell>{{ record.id }}</TableCell>
+            <TableCell>
+              <span class="font-medium">{{ record.taskName }}</span>
+            </TableCell>
+            <TableCell>
+              <TaskStatusTag :status="record.status" />
+            </TableCell>
+            <TableCell>
+              <div class="w-[120px]">
+                <Progress :model-value="record.progress" class="h-2" />
+              </div>
+            </TableCell>
+            <TableCell>{{ formatDate(record.createTime) }}</TableCell>
+            <TableCell class="sticky right-0 bg-background">
+              <div class="flex items-center gap-2">
+                <Button
+                  v-if="isStatus(record.status, 'success')"
+                  variant="ghost"
+                  size="sm"
+                  class="h-7 px-2 text-primary hover:text-primary/80"
+                  @click="openVideoUrl(record)"
+                >
+                  <Icon icon="lucide:play-circle" class="mr-1 size-4" />
+                  预览
+                </Button>
+                <Button
+                  v-if="isStatus(record.status, 'success')"
+                  variant="ghost"
+                  size="sm"
+                  class="h-7 px-2 text-success hover:text-success/80"
+                  @click="openVideoUrl(record)"
+                >
+                  <Icon icon="lucide:download" class="mr-1 size-4" />
+                  下载
+                </Button>
+                <Button
+                  v-if="isStatus(record.status, 'running')"
+                  variant="ghost"
+                  size="sm"
+                  class="h-7 px-2"
+                  @click="handleCancel(record.id)"
+                >
+                  取消
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  class="h-7 px-2 text-destructive hover:text-destructive/80 hover:bg-destructive/10"
+                  @click="handleDelete(record.id)"
+                >
+                  删除
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+          <TableRow v-if="list.length === 0 && !loading">
+            <TableCell colspan="7" class="h-32 text-center text-muted-foreground">
+              暂无数据
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </template>
 
-        <!-- 分页 -->
-        <TablePagination
-          :current="paginationConfig.current"
-          :page-size="paginationConfig.pageSize"
-          :total="paginationConfig.total"
-          @change="handlePageChange"
-        />
-      </div>
-    </div>
-
-    <!-- 确认删除对话框 -->
-    <AlertDialog :open="deleteDialogOpen" @update:open="deleteDialogOpen = $event">
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认删除</AlertDialogTitle>
-          <AlertDialogDescription>
-            确定要删除选中的任务吗？此操作无法撤销。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel @click="deleteDialogOpen = false">取消</AlertDialogCancel>
-          <AlertDialogAction @click="handleBatchDelete" :disabled="deleteLoading">
-            <Spinner v-if="deleteLoading" class="mr-2 size-4" />
-            确认删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  </div>
+    <!-- 弹窗 -->
+    <template #modals>
+      <!-- 确认删除对话框 -->
+      <AlertDialog :open="deleteDialogOpen" @update:open="deleteDialogOpen = $event">
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认删除</AlertDialogTitle>
+            <AlertDialogDescription>
+              确定要删除选中的任务吗？此操作无法撤销。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel @click="deleteDialogOpen = false">取消</AlertDialogCancel>
+            <AlertDialogAction @click="handleBatchDelete" :disabled="deleteLoading">
+              <Spinner v-if="deleteLoading" class="mr-2 size-4" />
+              确认删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </template>
+  </TaskPageLayout>
 </template>
 
 <script setup>
@@ -218,7 +211,6 @@ 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 { TablePagination } from '@/components/ui/pagination'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -235,27 +227,20 @@ import { useTaskList } from '@/views/system/task-management/composables/useTaskL
 import { useTaskOperations } from '@/views/system/task-management/composables/useTaskOperations'
 import { useTaskPolling } from '@/views/system/task-management/composables/useTaskPolling'
 import TaskStatusTag from '@/views/system/task-management/components/TaskStatusTag.vue'
+import TaskPageLayout from '@/views/system/task-management/components/TaskPageLayout.vue'
 
 // 日期选择器开关
 const datePickerOpen = ref(false)
 const selectedDateRange = ref(null)
 
 // Composables
-const { loading, list, filters, paginationConfig, fetchList, handleFilterChange, handleResetFilters, handleTableChange } = useTaskList(getDigitalHumanTaskPage)
+const { loading, list, filters, paginationConfig, fetchList, handleFilterChange, handleResetFilters } = useTaskList(getDigitalHumanTaskPage)
 
 // 初始化 filters.status 为 'all'
 if (!filters.status) {
   filters.status = 'all'
 }
 
-// 包装 handleFilterChange 处理 'all' 值
-const wrappedHandleFilterChange = () => {
-  const params = { ...filters }
-  if (params.status === 'all') {
-    params.status = undefined
-  }
-  handleFilterChange()
-}
 const { handleDelete: deleteTaskById, handleCancel } = useTaskOperations({ deleteApi: deleteTask, cancelApi: cancelTask }, fetchList)
 useTaskPolling(getDigitalHumanTaskPage, { onTaskUpdate: fetchList })
 
@@ -338,14 +323,14 @@ const handleDelete = (id) => {
 // 处理日期选择
 const handleDateSelect = (value) => {
   if (value?.start && value?.end) {
-    const formatDate = (date) => {
+    const formatDateStr = (date) => {
       const d = new Date(date)
       const year = d.getFullYear()
       const month = String(d.getMonth() + 1).padStart(2, '0')
       const day = String(d.getDate()).padStart(2, '0')
       return `${year}-${month}-${day}`
     }
-    filters.dateRange = [formatDate(value.start), formatDate(value.end)]
+    filters.dateRange = [formatDateStr(value.start), formatDateStr(value.end)]
     datePickerOpen.value = false
     handleFilterChange()
   }
@@ -355,34 +340,4 @@ onMounted(fetchList)
 </script>
 
 <style scoped lang="less">
-.task-page {
-  padding: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.task-page__filters {
-  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(--card);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border);
-  padding: var(--space-5);
-  display: flex;
-  flex-direction: column;
-}
-
-.batch-actions {
-  margin-bottom: var(--space-4);
-}
 </style>
diff --git a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue b/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
index 012262e194..11a33747ea 100644
--- a/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/layout/TaskLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="task-layout">
+  <div class="task-layout  p-4">
     <!-- 顶部Tab栏 -->
     <div class="task-layout__header">
       <div class="flex items-center justify-between">
@@ -59,7 +59,7 @@ const NAV_ITEMS = [
     type: 'style-task',
     label: '风格任务',
     icon: 'lucide:palette',
-    component: markRaw(defineAsyncComponent(() => import('../../../task-center/BenchmarkTaskList.vue')))
+    component: markRaw(defineAsyncComponent(() => import('../task-center/BenchmarkTaskList.vue')))
   }
 ]
 
diff --git a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
index 5779715558..f46332ccee 100644
--- a/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/mix-task/index.vue
@@ -1,7 +1,13 @@
 <template>
-  <div class="task-page">
+  <TaskPageLayout
+    :loading="loading"
+    :current="paginationConfig.current"
+    :page-size="paginationConfig.pageSize"
+    :total="paginationConfig.total"
+    @page-change="handlePageChange"
+  >
     <!-- 筛选条件 -->
-    <div class="task-page__filters">
+    <template #filters>
       <div class="flex flex-wrap items-center gap-3">
         <!-- 状态筛选 -->
         <Select v-model="filters.status" @update:model-value="handleFilterChange">
@@ -59,246 +65,236 @@
           重置
         </Button>
       </div>
-    </div>
+    </template>
 
-    <!-- 任务列表 -->
-    <div class="task-page__content">
-      <!-- 批量操作栏 -->
-      <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]">
-        <Spinner v-if="loading" class="absolute inset-0 z-10 m-auto size-8" />
-        <div class="overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead class="w-[50px]">
-                  <Checkbox
-                    :checked="isAllSelected"
-                    @update:checked="handleSelectAll"
-                  />
-                </TableHead>
-                <TableHead class="w-[70px]">ID</TableHead>
-                <TableHead>标题</TableHead>
-                <TableHead class="w-[90px]">状态</TableHead>
-                <TableHead class="w-[100px]">生成结果</TableHead>
-                <TableHead class="w-[160px]">创建时间</TableHead>
-                <TableHead class="w-[160px]">完成时间</TableHead>
-                <TableHead class="w-[240px] sticky right-0 bg-background">操作</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <template v-for="record in list" :key="record.id">
-                <TableRow
-                  class="cursor-pointer hover:bg-muted/50"
-                  @click="toggleExpand(record.id)"
-                >
-                  <TableCell>
-                    <Checkbox
-                      :checked="selectedRowKeys.includes(record.id)"
-                      @update:checked.stop="handleSelectRow(record.id)"
-                    />
-                  </TableCell>
-                  <TableCell>{{ record.id }}</TableCell>
-                  <TableCell>
-                    <div class="flex items-center gap-2">
-                      <Icon
-                        :icon="expandedRowKeys.includes(record.id) ? 'lucide:chevron-down' : 'lucide:chevron-right'"
-                        class="size-4 text-muted-foreground"
-                      />
-                      <span class="font-medium">{{ record.title }}</span>
-                      <Badge v-if="record.text" variant="secondary" class="text-xs">有文案</Badge>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <TaskStatusTag :status="record.status" />
-                  </TableCell>
-                  <TableCell>
-                    <Badge v-if="record.outputUrls?.length" variant="success">
-                      {{ record.outputUrls.length }} 个视频
-                    </Badge>
-                    <span v-else class="text-muted-foreground">-</span>
-                  </TableCell>
-                  <TableCell>{{ formatDate(record.createTime) }}</TableCell>
-                  <TableCell>{{ record.finishTime ? formatDate(record.finishTime) : '-' }}</TableCell>
-                  <TableCell @click.stop>
-                    <div class="flex items-center gap-1">
-                      <Button
-                        v-if="canOperate(record, 'preview')"
-                        variant="ghost"
-                        size="sm"
-                        class="h-7 px-2 text-primary hover:text-primary/80"
-                        @click="openPreview(record)"
-                      >
-                        <Icon icon="lucide:play-circle" class="mr-1 size-4" />
-                        预览
-                      </Button>
-                      <Button
-                        v-if="canOperate(record, 'download')"
-                        variant="ghost"
-                        size="sm"
-                        class="h-7 px-2 text-success hover:text-success/80"
-                        @click="handleDownload(record)"
-                      >
-                        <Icon icon="lucide:download" class="mr-1 size-4" />
-                        下载
-                      </Button>
-                      <Button
-                        v-if="canOperate(record, 'cancel')"
-                        variant="outline"
-                        size="sm"
-                        class="h-7 px-2"
-                        @click="handleCancel(record.id)"
-                      >
-                        取消
-                      </Button>
-                      <Button
-                        v-if="canOperate(record, 'retry')"
-                        variant="outline"
-                        size="sm"
-                        class="h-7 px-2"
-                        @click="handleRetry(record.id)"
-                      >
-                        重试
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        class="h-7 px-2 text-destructive hover:text-destructive/80 hover:bg-destructive/10"
-                        @click="handleDeleteClick(record.id)"
-                      >
-                        删除
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-                <!-- 展开行 -->
-                <TableRow v-if="expandedRowKeys.includes(record.id)" class="bg-muted/30">
-                  <TableCell colspan="8" class="p-0">
-                    <div class="expanded-content">
-                      <div v-if="record.text" class="task-text">
-                        <strong>文案内容：</strong>
-                        <p>{{ record.text }}</p>
-                      </div>
-                      <div v-if="record.outputUrls?.length" class="task-results">
-                        <div class="result-header">
-                          <strong>生成结果：</strong>
-                          <span class="result-count">{{ record.outputUrls.length }} 个视频</span>
-                        </div>
-                        <div class="result-list">
-                          <div v-for="(_, index) in record.outputUrls" :key="index" class="result-item">
-                            <Button
-                              v-if="isStatus(record.status, 'success')"
-                              variant="ghost"
-                              size="sm"
-                              class="h-7 px-2"
-                              @click="previewVideo(record, index)"
-                            >
-                              <Icon icon="lucide:play-circle" class="mr-1 size-4" />
-                              视频 {{ index + 1 }}
-                            </Button>
-                            <Button
-                              v-if="isStatus(record.status, 'success')"
-                              variant="ghost"
-                              size="sm"
-                              class="h-7 px-2"
-                              @click="downloadVideo(record.id, index)"
-                            >
-                              <Icon icon="lucide:download" class="size-4" />
-                            </Button>
-                            <span v-else class="text-muted-foreground text-sm">视频 {{ index + 1 }} (处理中...)</span>
-                          </div>
-                        </div>
-                      </div>
-                      <Alert v-if="record.errorMsg" variant="destructive" class="mt-3">
-                        <Icon icon="lucide:alert-circle" class="size-4" />
-                        <AlertDescription>{{ record.errorMsg }}</AlertDescription>
-                      </Alert>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              </template>
-              <TableRow v-if="list.length === 0 && !loading">
-                <TableCell colspan="8" class="h-32 text-center text-muted-foreground">
-                  暂无数据
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
+    <!-- 批量操作栏 -->
+    <template #batch-actions>
+      <Alert v-if="selectedRowKeys.length > 0" 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>
-
-        <!-- 分页 -->
-        <TablePagination
-          :current="paginationConfig.current"
-          :page-size="paginationConfig.pageSize"
-          :total="paginationConfig.total"
-          @change="handlePageChange"
-        />
-      </div>
-    </div>
-
-    <!-- 预览模态框 -->
-    <Dialog v-model:open="preview.visible">
-      <DialogContent class="max-w-[800px]">
-        <DialogHeader>
-          <DialogTitle>{{ preview.title }}</DialogTitle>
-        </DialogHeader>
-        <div v-if="preview.url" class="preview-container">
-          <video :src="preview.url" controls autoplay class="preview-video">
-            您的浏览器不支持视频播放
-          </video>
-        </div>
-        <div v-else class="preview-loading">
-          <Spinner class="size-6" />
-          <span class="text-muted-foreground mt-2">正在加载预览...</span>
-        </div>
-      </DialogContent>
-    </Dialog>
-
-    <!-- 删除确认对话框 -->
-    <AlertDialog v-model:open="deleteDialogOpen">
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>确认批量删除</AlertDialogTitle>
-          <AlertDialogDescription>
-            确定要删除选中的 {{ selectedRowKeys.length }} 个任务吗？删除后无法恢复。
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction
-            :disabled="deleteLoading"
-            class="bg-destructive hover:bg-destructive/90"
-            @click="confirmBatchDelete"
+        <div class="flex items-center gap-2">
+          <Button
+            :disabled="!hasDownloadableSelected"
+            :loading="batchDownloading"
+            size="sm"
+            @click="handleBatchDownloadSelected"
           >
-            确定删除
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  </div>
+            <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>
+    </template>
+
+    <!-- 表格 -->
+    <template #table>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="w-[50px]">
+              <Checkbox
+                :checked="isAllSelected"
+                @update:checked="handleSelectAll"
+              />
+            </TableHead>
+            <TableHead class="w-[70px]">ID</TableHead>
+            <TableHead>标题</TableHead>
+            <TableHead class="w-[90px]">状态</TableHead>
+            <TableHead class="w-[100px]">生成结果</TableHead>
+            <TableHead class="w-[160px]">创建时间</TableHead>
+            <TableHead class="w-[160px]">完成时间</TableHead>
+            <TableHead class="w-[240px] sticky right-0 bg-background">操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <template v-for="record in list" :key="record.id">
+            <TableRow
+              class="cursor-pointer hover:bg-muted/50"
+              @click="toggleExpand(record.id)"
+            >
+              <TableCell>
+                <Checkbox
+                  :checked="selectedRowKeys.includes(record.id)"
+                  @update:checked.stop="handleSelectRow(record.id)"
+                />
+              </TableCell>
+              <TableCell>{{ record.id }}</TableCell>
+              <TableCell>
+                <div class="flex items-center gap-2">
+                  <Icon
+                    :icon="expandedRowKeys.includes(record.id) ? 'lucide:chevron-down' : 'lucide:chevron-right'"
+                    class="size-4 text-muted-foreground"
+                  />
+                  <span class="font-medium">{{ record.title }}</span>
+                  <Badge v-if="record.text" variant="secondary" class="text-xs">有文案</Badge>
+                </div>
+              </TableCell>
+              <TableCell>
+                <TaskStatusTag :status="record.status" />
+              </TableCell>
+              <TableCell>
+                <Badge v-if="record.outputUrls?.length" variant="success">
+                  {{ record.outputUrls.length }} 个视频
+                </Badge>
+                <span v-else class="text-muted-foreground">-</span>
+              </TableCell>
+              <TableCell>{{ formatDate(record.createTime) }}</TableCell>
+              <TableCell>{{ record.finishTime ? formatDate(record.finishTime) : '-' }}</TableCell>
+              <TableCell @click.stop>
+                <div class="flex items-center gap-1">
+                  <Button
+                    v-if="canOperate(record, 'preview')"
+                    variant="ghost"
+                    size="sm"
+                    class="h-7 px-2 text-primary hover:text-primary/80"
+                    @click="openPreview(record)"
+                  >
+                    <Icon icon="lucide:play-circle" class="mr-1 size-4" />
+                    预览
+                  </Button>
+                  <Button
+                    v-if="canOperate(record, 'download')"
+                    variant="ghost"
+                    size="sm"
+                    class="h-7 px-2 text-success hover:text-success/80"
+                    @click="handleDownload(record)"
+                  >
+                    <Icon icon="lucide:download" class="mr-1 size-4" />
+                    下载
+                  </Button>
+                  <Button
+                    v-if="canOperate(record, 'cancel')"
+                    variant="outline"
+                    size="sm"
+                    class="h-7 px-2"
+                    @click="handleCancel(record.id)"
+                  >
+                    取消
+                  </Button>
+                  <Button
+                    v-if="canOperate(record, 'retry')"
+                    variant="outline"
+                    size="sm"
+                    class="h-7 px-2"
+                    @click="handleRetry(record.id)"
+                  >
+                    重试
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-7 px-2 text-destructive hover:text-destructive/80 hover:bg-destructive/10"
+                    @click="handleDeleteClick(record.id)"
+                  >
+                    删除
+                  </Button>
+                </div>
+              </TableCell>
+            </TableRow>
+            <!-- 展开行 -->
+            <TableRow v-if="expandedRowKeys.includes(record.id)" class="bg-muted/30">
+              <TableCell colspan="8" class="p-0">
+                <div class="expanded-content">
+                  <div v-if="record.text" class="task-text">
+                    <strong>文案内容：</strong>
+                    <p>{{ record.text }}</p>
+                  </div>
+                  <div v-if="record.outputUrls?.length" class="task-results">
+                    <div class="result-header">
+                      <strong>生成结果：</strong>
+                      <span class="result-count">{{ record.outputUrls.length }} 个视频</span>
+                    </div>
+                    <div class="result-list">
+                      <div v-for="(_, index) in record.outputUrls" :key="index" class="result-item">
+                        <Button
+                          v-if="isStatus(record.status, 'success')"
+                          variant="ghost"
+                          size="sm"
+                          class="h-7 px-2"
+                          @click="previewVideo(record, index)"
+                        >
+                          <Icon icon="lucide:play-circle" class="mr-1 size-4" />
+                          视频 {{ index + 1 }}
+                        </Button>
+                        <Button
+                          v-if="isStatus(record.status, 'success')"
+                          variant="ghost"
+                          size="sm"
+                          class="h-7 px-2"
+                          @click="downloadVideo(record.id, index)"
+                        >
+                          <Icon icon="lucide:download" class="size-4" />
+                        </Button>
+                        <span v-else class="text-muted-foreground text-sm">视频 {{ index + 1 }} (处理中...)</span>
+                      </div>
+                    </div>
+                  </div>
+                  <Alert v-if="record.errorMsg" variant="destructive" class="mt-3">
+                    <Icon icon="lucide:alert-circle" class="size-4" />
+                    <AlertDescription>{{ record.errorMsg }}</AlertDescription>
+                  </Alert>
+                </div>
+              </TableCell>
+            </TableRow>
+          </template>
+          <TableRow v-if="list.length === 0 && !loading">
+            <TableCell colspan="8" class="h-32 text-center text-muted-foreground">
+              暂无数据
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </template>
+
+    <!-- 弹窗 -->
+    <template #modals>
+      <!-- 预览模态框 -->
+      <Dialog v-model:open="preview.visible">
+        <DialogContent class="max-w-[800px]">
+          <DialogHeader>
+            <DialogTitle>{{ preview.title }}</DialogTitle>
+          </DialogHeader>
+          <div v-if="preview.url" class="preview-container">
+            <video :src="preview.url" controls autoplay class="preview-video">
+              您的浏览器不支持视频播放
+            </video>
+          </div>
+          <div v-else class="preview-loading">
+            <Spinner class="size-6" />
+            <span class="text-muted-foreground mt-2">正在加载预览...</span>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <!-- 删除确认对话框 -->
+      <AlertDialog v-model:open="deleteDialogOpen">
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认批量删除</AlertDialogTitle>
+            <AlertDialogDescription>
+              确定要删除选中的 {{ selectedRowKeys.length }} 个任务吗？删除后无法恢复。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              :disabled="deleteLoading"
+              class="bg-destructive hover:bg-destructive/90"
+              @click="confirmBatchDelete"
+            >
+              确定删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </template>
+  </TaskPageLayout>
 </template>
 
 <script setup>
@@ -331,26 +327,26 @@ import {
   AlertDialogHeader,
   AlertDialogTitle
 } from '@/components/ui/alert-dialog'
-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'
 import { useTaskOperations } from '@/views/system/task-management/composables/useTaskOperations'
 import { useTaskPolling } from '@/views/system/task-management/composables/useTaskPolling'
 import TaskStatusTag from '@/views/system/task-management/components/TaskStatusTag.vue'
+import TaskPageLayout from '@/views/system/task-management/components/TaskPageLayout.vue'
 
 // 日期选择器开关
 const datePickerOpen = ref(false)
 const selectedDateRange = ref(null)
 
 // Composables
-const { loading, list, filters, paginationConfig, fetchList, handleFilterChange, handleResetFilters, handleTableChange } = useTaskList(MixTaskService.getTaskPage)
+const { loading, list, filters, paginationConfig, fetchList, handleFilterChange, handleResetFilters } = useTaskList(MixTaskService.getTaskPage)
 
 // 初始化 filters.status 为 'all'
 if (!filters.status) {
   filters.status = 'all'
 }
-const { handleDelete, handleCancel, handleRetry, handleBatchDownload } = useTaskOperations(
+const { handleCancel, handleRetry, handleBatchDownload } = useTaskOperations(
   { deleteApi: MixTaskService.deleteTask, cancelApi: MixTaskService.cancelTask, retryApi: MixTaskService.retryTask, getSignedUrlsApi: MixTaskService.getSignedUrls },
   fetchList
 )
@@ -555,14 +551,14 @@ const handleDownload = (record) => {
 // 处理日期选择
 const handleDateSelect = (value) => {
   if (value?.start && value?.end) {
-    const formatDate = (date) => {
+    const formatDateStr = (date) => {
       const d = new Date(date)
       const year = d.getFullYear()
       const month = String(d.getMonth() + 1).padStart(2, '0')
       const day = String(d.getDate()).padStart(2, '0')
       return `${year}-${month}-${day}`
     }
-    filters.dateRange = [formatDate(value.start), formatDate(value.end)]
+    filters.dateRange = [formatDateStr(value.start), formatDateStr(value.end)]
     datePickerOpen.value = false
     handleFilterChange()
   }
@@ -578,34 +574,6 @@ onMounted(fetchList)
 </script>
 
 <style scoped lang="less">
-.task-page {
-  padding: var(--space-4);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.task-page__filters {
-  padding: var(--space-4);
-  background: var(--color-bg-card);
-  border-radius: var(--radius-lg);
-}
-
-.task-page__content {
-  flex: 1;
-  overflow: hidden;
-  background: var(--color-bg-card);
-  border-radius: var(--radius-lg);
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-}
-
-.batch-actions {
-  margin-bottom: var(--space-4);
-}
-
 .expanded-content {
   padding: var(--space-5);
   background: var(--muted);
diff --git a/frontend/app/web-gold/src/views/task-center/BenchmarkTaskList.vue b/frontend/app/web-gold/src/views/system/task-management/task-center/BenchmarkTaskList.vue
similarity index 70%
rename from frontend/app/web-gold/src/views/task-center/BenchmarkTaskList.vue
rename to frontend/app/web-gold/src/views/system/task-management/task-center/BenchmarkTaskList.vue
index f48d76781e..a5c5d1b906 100644
--- a/frontend/app/web-gold/src/views/task-center/BenchmarkTaskList.vue
+++ b/frontend/app/web-gold/src/views/system/task-management/task-center/BenchmarkTaskList.vue
@@ -1,28 +1,36 @@
 <template>
-  <div class="task-list-container">
-    <!-- 筛选 -->
-    <div class="filter-section">
-      <Select v-model="filterStatus" @update:model-value="handleFilterChange">
-        <SelectTrigger class="w-[150px]">
-          <SelectValue placeholder="全部状态" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem :value="null">全部状态</SelectItem>
-          <SelectItem :value="0">待处理</SelectItem>
-          <SelectItem :value="1">处理中</SelectItem>
-          <SelectItem :value="2">成功</SelectItem>
-          <SelectItem :value="3">失败</SelectItem>
-        </SelectContent>
-      </Select>
-      <Button @click="handleRefresh" :disabled="loading">
-        <Icon v-if="loading" icon="lucide:loader-2" class="size-4 animate-spin" />
-        <Icon v-else icon="lucide:refresh-cw" class="size-4" />
-        刷新
-      </Button>
-    </div>
+  <TaskPageLayout
+    :loading="loading"
+    :current="pagination.current"
+    :page-size="pagination.pageSize"
+    :total="pagination.total"
+    @page-change="handlePageChange"
+  >
+    <!-- 筛选条件 -->
+    <template #filters>
+      <div class="flex flex-wrap items-center gap-3">
+        <Select v-model="filterStatus" @update:model-value="handleFilterChange">
+          <SelectTrigger class="w-[150px]">
+            <SelectValue placeholder="全部状态" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem :value="null">全部状态</SelectItem>
+            <SelectItem :value="0">待处理</SelectItem>
+            <SelectItem :value="1">处理中</SelectItem>
+            <SelectItem :value="2">成功</SelectItem>
+            <SelectItem :value="3">失败</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button @click="handleRefresh" :disabled="loading">
+          <Icon v-if="loading" icon="lucide:loader-2" class="size-4 animate-spin" />
+          <Icon v-else icon="lucide:refresh-cw" class="size-4" />
+          刷新
+        </Button>
+      </div>
+    </template>
 
-    <!-- 列表 -->
-    <div class="table-wrapper">
+    <!-- 表格 -->
+    <template #table>
       <Table>
         <TableHeader>
           <TableRow>
@@ -102,49 +110,27 @@
           </TableRow>
         </TableBody>
       </Table>
-    </div>
+    </template>
 
-    <!-- 分页 -->
-    <div v-if="pagination.total > 0" class="pagination-section">
-      <span class="text-sm text-muted-foreground">
-        共 {{ pagination.total }} 条
-      </span>
-      <div class="flex gap-1">
-        <Button
-          variant="outline"
-          size="sm"
-          :disabled="pagination.current === 1"
-          @click="handlePageChange(pagination.current - 1)"
-        >
-          上一页
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          :disabled="pagination.current * pagination.pageSize >= pagination.total"
-          @click="handlePageChange(pagination.current + 1)"
-        >
-          下一页
-        </Button>
-      </div>
-    </div>
-
-    <!-- 提示词弹窗 -->
-    <Dialog v-model:open="promptModalVisible">
-      <DialogContent class="sm:max-w-[700px]">
-        <DialogHeader>
-          <DialogTitle>生成的提示词</DialogTitle>
-        </DialogHeader>
-        <div class="prompt-content">{{ currentPrompt }}</div>
-        <DialogFooter>
-          <Button @click="handleCopyCurrentPrompt">
-            <Icon icon="lucide:copy" class="size-4" />
-            复制到剪贴板
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  </div>
+    <!-- 弹窗 -->
+    <template #modals>
+      <!-- 提示词弹窗 -->
+      <Dialog v-model:open="promptModalVisible">
+        <DialogContent class="sm:max-w-[700px]">
+          <DialogHeader>
+            <DialogTitle>生成的提示词</DialogTitle>
+          </DialogHeader>
+          <div class="prompt-content">{{ currentPrompt }}</div>
+          <DialogFooter>
+            <Button @click="handleCopyCurrentPrompt">
+              <Icon icon="lucide:copy" class="size-4" />
+              复制到剪贴板
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </template>
+  </TaskPageLayout>
 </template>
 
 <script setup>
@@ -186,6 +172,7 @@ import {
 
 import { BenchmarkTaskApi } from '@/api/benchmarkTask'
 import { copyToClipboard } from '@/utils/clipboard'
+import TaskPageLayout from '@/views/system/task-management/components/TaskPageLayout.vue'
 
 const loading = ref(false)
 const taskList = ref([])
@@ -287,42 +274,6 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-.task-list-container {
-  padding: 0;
-  height: 100%;
-  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: var(--space-3);
-  margin-bottom: 0;
-}
-
-.table-wrapper {
-  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: var(--space-4);
-  border-top: 1px solid var(--border);
-}
-
 .prompt-content {
   padding: var(--space-4);
   background: var(--muted);
diff --git a/scripts/gemini-image-generator.js b/scripts/gemini-image-generator.js
new file mode 100644
index 0000000000..59c4e41ede
--- /dev/null
+++ b/scripts/gemini-image-generator.js
@@ -0,0 +1,906 @@
+/**
+ * Gemini Image Generator - 云雾API图片生成工具
+ *
+ * 功能：
+ * - 文生图（Text-to-Image）
+ * - 图生图（Image-to-Image）
+ * - 多种业务场景模板
+ * - 批量生成
+ * - 自定义输出目录
+ *
+ * 使用示例：
+ *   node gemini-image-generator.js generate "A cute cat" -o ./output -r 16:9
+ *   node gemini-image-generator.js edit "Add sunglasses" -i ./photo.jpg
+ *   node gemini-image-generator.js template logo --text "MyBrand"
+ *   node gemini-image-generator.js batch ./prompts.txt
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+// ============================================================================
+// 配置模块
+// ============================================================================
+
+const Config = {
+  // 云雾API配置 - 硬编码
+  api: {
+    baseUrl: 'https://yunwu.ai',
+    model: 'gemini-3.1-flash-image-preview',
+    endpoint: '/v1beta/models/gemini-3.1-flash-image-preview:generateContent',
+    key: 'sk-BjGv7Nf3KJHTBT8OB8LiGM0vHISl8yFcfCxZAWIZO4yogD7N'
+  },
+
+  // 默认输出配置
+  output: {
+    defaultDir: './output',
+    defaultFormat: 'png'
+  },
+
+  // 支持的宽高比
+  aspectRatios: ['1:1', '2:3', '3:2', '3:4', '4:3', '4:5', '5:4', '9:16', '16:9', '21:9'],
+
+  // 支持的分辨率
+  imageSizes: ['512', '1K', '2K', '4K'],
+
+  // 默认分辨率
+  defaultImageSize: '2K',
+
+  // 响应模式
+  responseModalities: {
+    textAndImage: ['TEXT', 'IMAGE'],
+    imageOnly: ['IMAGE'],
+    textOnly: ['TEXT']
+  },
+
+  // 超时设置（毫秒）
+  timeout: {
+    default: 120000,      // 默认2分钟
+    max: 300000          // 最大5分钟
+  }
+}
+
+// ============================================================================
+// 文件处理模块
+// ============================================================================
+
+const FileUtils = {
+  /**
+   * 确保目录存在
+   */
+  ensureDir(dirPath) {
+    if (!fs.existsSync(dirPath)) {
+      fs.mkdirSync(dirPath, { recursive: true })
+    }
+    return dirPath
+  },
+
+  /**
+   * 图片转Base64
+   */
+  imageToBase64(imagePath) {
+    const buffer = fs.readFileSync(imagePath)
+    const ext = path.extname(imagePath).toLowerCase()
+    const mimeTypes = {
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.webp': 'image/webp'
+    }
+    return {
+      mimeType: mimeTypes[ext] || 'image/png',
+      data: buffer.toString('base64')
+    }
+  },
+
+  /**
+   * Base64保存为图片
+   */
+  base64ToImage(base64Data, outputPath) {
+    const buffer = Buffer.from(base64Data, 'base64')
+    fs.writeFileSync(outputPath, buffer)
+    return outputPath
+  },
+
+  /**
+   * 生成唯一文件名
+   */
+  generateFilename(prefix = 'image', ext = 'png') {
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
+    const random = Math.random().toString(36).substring(2, 8)
+    return `${prefix}_${timestamp}_${random}.${ext}`
+  },
+
+  /**
+   * 读取提示词文件
+   */
+  readPromptsFile(filePath) {
+    const content = fs.readFileSync(filePath, 'utf-8')
+    return content.split('\n').filter(line => line.trim()).map(line => line.trim())
+  }
+}
+
+// ============================================================================
+// API调用模块
+// ============================================================================
+
+const GeminiAPI = {
+  /**
+   * 发送生成请求
+   */
+  async generateContent(contents, options = {}) {
+    const {
+      aspectRatio = '1:1',
+      imageSize = Config.defaultImageSize,
+      responseModalities = Config.responseModalities.textAndImage,
+      timeout = Config.timeout.default
+    } = options
+
+    const url = `${Config.api.baseUrl}${Config.api.endpoint}?key=${Config.api.key}`
+
+    const body = {
+      contents: contents,
+      generationConfig: {
+        responseModalities: responseModalities,
+        imageConfig: {
+          aspectRatio: aspectRatio,
+          imageSize: imageSize
+        }
+      }
+    }
+
+    console.log(`\n📡 API请求: ${Config.api.baseUrl}${Config.api.endpoint}`)
+    console.log(`📋 模型: ${Config.api.model}`)
+    console.log(`⏱️ 超时: ${timeout / 1000}秒`)
+
+    // 使用 AbortController 实现超时
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), timeout)
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${Config.api.key}`
+        },
+        body: JSON.stringify(body),
+        signal: controller.signal
+      })
+
+      if (!response.ok) {
+        const error = await response.text()
+        throw new Error(`API请求失败: ${response.status} - ${error}`)
+      }
+
+      return await response.json()
+    } finally {
+      clearTimeout(timeoutId)
+    }
+  },
+
+  /**
+   * 解析响应，提取图片和文本
+   */
+  parseResponse(response) {
+    const result = {
+      text: '',
+      images: []
+    }
+
+    if (!response.candidates || !response.candidates[0]) {
+      return result
+    }
+
+    const parts = response.candidates[0].content?.parts || []
+
+    for (const part of parts) {
+      if (part.text) {
+        result.text += part.text
+      }
+      if (part.inlineData) {
+        result.images.push({
+          mimeType: part.inlineData.mimeType,
+          data: part.inlineData.data
+        })
+      }
+    }
+
+    return result
+  }
+}
+
+// ============================================================================
+// 业务场景模板模块
+// ============================================================================
+
+const Templates = {
+  /**
+   * 写实照片模板
+   */
+  photorealistic: {
+    name: '写实照片',
+    generate(subject, options = {}) {
+      const {
+        shotType = 'close-up portrait',
+        lighting = 'soft, natural golden hour light',
+        mood = 'serene',
+        environment = '',
+        cameraDetails = '85mm lens, shallow depth of field'
+      } = options
+
+      return `A photorealistic ${shotType} of ${subject}. ${environment ? `Set in ${environment}. ` : ''}The scene is illuminated by ${lighting}, creating a ${mood} atmosphere. Captured with ${cameraDetails}. Ultra-realistic, with sharp focus on key details.`
+    }
+  },
+
+  /**
+   * 贴纸/图标模板
+   */
+  sticker: {
+    name: '贴纸/图标',
+    generate(subject, options = {}) {
+      const {
+        style = 'kawaii',
+        colorPalette = 'vibrant',
+        background = 'white'
+      } = options
+
+      return `A ${style}-style sticker of ${subject}. The design features bold, clean outlines, simple cel-shading, and a ${colorPalette} color palette. The background must be ${background}.`
+    }
+  },
+
+  /**
+   * Logo设计模板
+   */
+  logo: {
+    name: 'Logo设计',
+    generate(text, options = {}) {
+      const {
+        style = 'modern, minimalist',
+        colorScheme = 'black and white',
+        shape = 'circle'
+      } = options
+
+      return `Create a ${style} logo${text ? ` with the text "${text}"` : ''}. The text should be in a clean, bold, sans-serif font. The color scheme is ${colorScheme}. Put the logo in a ${shape}.`
+    }
+  },
+
+  /**
+   * 产品图模板
+   */
+  product: {
+    name: '产品图',
+    generate(product, options = {}) {
+      const {
+        surface = 'polished concrete surface',
+        lighting = 'three-point softbox setup',
+        angle = 'slightly elevated 45-degree shot',
+        background = 'minimalist'
+      } = options
+
+      return `A high-resolution, studio-lit product photograph of ${product}, presented on a ${surface}. The lighting is a ${lighting} designed to create soft, diffused highlights and eliminate harsh shadows. The camera angle is a ${angle} to showcase key features. Ultra-realistic. ${background} background.`
+    }
+  },
+
+  /**
+   * 极简设计模板
+   */
+  minimalist: {
+    name: '极简设计',
+    generate(subject, options = {}) {
+      const {
+        position = 'bottom-right',
+        backgroundColor = 'off-white canvas',
+        lighting = 'soft, diffused lighting from the top left'
+      } = options
+
+      return `A minimalist composition featuring a single, ${subject} positioned in the ${position} of the frame. The background is a vast, empty ${backgroundColor}, creating significant negative space for text. ${lighting}.`
+    }
+  },
+
+  /**
+   * 漫画/故事板模板
+   */
+  comic: {
+    name: '漫画/故事板',
+    generate(scene, options = {}) {
+      const {
+        style = 'gritty, noir',
+        panels = 3
+      } = options
+
+      return `Make a ${panels} panel comic in a ${style} art style with high-contrast black and white inks. ${scene}`
+    }
+  },
+
+  /**
+   * 风格转换模板
+   */
+  styleTransfer: {
+    name: '风格转换',
+    generate(targetStyle, options = {}) {
+      const {
+        preserveElements = 'composition and key elements'
+      } = options
+
+      return `Transform the provided image into the artistic style of ${targetStyle}. Preserve the original ${preserveElements} but render with the new stylistic elements.`
+    }
+  },
+
+  /**
+   * 图像编辑模板
+   */
+  edit: {
+    name: '图像编辑',
+    generate(instruction, options = {}) {
+      const {
+        preserve = 'Keep everything else unchanged, preserving the original style, lighting, and composition'
+      } = options
+
+      return `${instruction}. ${preserve}.`
+    }
+  },
+
+  /**
+   * 图像合成模板
+   */
+  composite: {
+    name: '图像合成',
+    generate(description, options = {}) {
+      return `Create a new image by combining the elements from the provided images. ${description} Generate a realistic result with proper lighting and shadows.`
+    }
+  }
+}
+
+// ============================================================================
+// 核心生成器类
+// ============================================================================
+
+class GeminiImageGenerator {
+  constructor(options = {}) {
+    this.outputDir = options.outputDir || Config.output.defaultDir
+    this.defaultAspectRatio = options.aspectRatio || '1:1'
+    this.defaultImageSize = options.imageSize || Config.defaultImageSize
+
+    if (!Config.api.key) {
+      console.warn('警告: 未设置API密钥')
+    }
+  }
+
+  /**
+   * 文生图
+   */
+  async textToImage(prompt, options = {}) {
+    const {
+      aspectRatio = this.defaultAspectRatio,
+      imageSize = this.defaultImageSize,
+      outputDir = this.outputDir,
+      filename = null
+    } = options
+
+    console.log(`\n🎨 生成图片: "${prompt.substring(0, 50)}..."`)
+    console.log(`📐 宽高比: ${aspectRatio}`)
+    console.log(`📏 分辨率: ${imageSize}`)
+
+    const contents = [{
+      role: 'user',
+      parts: [{ text: prompt }]
+    }]
+
+    const response = await GeminiAPI.generateContent(contents, { aspectRatio, imageSize })
+    const result = GeminiAPI.parseResponse(response)
+
+    if (result.text) {
+      console.log(`📝 模型回复: ${result.text}`)
+    }
+
+    const savedFiles = []
+    FileUtils.ensureDir(outputDir)
+
+    for (let i = 0; i < result.images.length; i++) {
+      const img = result.images[i]
+      const ext = img.mimeType.split('/')[1] || 'png'
+      const outputFilename = filename || FileUtils.generateFilename('generated', ext)
+      const outputPath = path.join(outputDir, outputFilename)
+
+      FileUtils.base64ToImage(img.data, outputPath)
+      savedFiles.push(outputPath)
+      console.log(`✅ 已保存: ${outputPath}`)
+    }
+
+    return {
+      text: result.text,
+      images: result.images,
+      savedFiles
+    }
+  }
+
+  /**
+   * 图生图（带参考图编辑）
+   */
+  async imageToImage(prompt, inputImages, options = {}) {
+    const {
+      aspectRatio = this.defaultAspectRatio,
+      imageSize = this.defaultImageSize,
+      outputDir = this.outputDir
+    } = options
+
+    console.log(`\n🖼️ 编辑图片: "${prompt.substring(0, 50)}..."`)
+    console.log(`📁 输入图片: ${Array.isArray(inputImages) ? inputImages.length : 1} 张`)
+    console.log(`📏 分辨率: ${imageSize}`)
+
+    const parts = [{ text: prompt }]
+
+    // 处理输入图片
+    const images = Array.isArray(inputImages) ? inputImages : [inputImages]
+    for (const imgPath of images) {
+      const { mimeType, data } = FileUtils.imageToBase64(imgPath)
+      parts.push({
+        inlineData: {
+          mime_type: mimeType,
+          data: data
+        }
+      })
+    }
+
+    const contents = [{
+      role: 'user',
+      parts: parts
+    }]
+
+    const response = await GeminiAPI.generateContent(contents, { aspectRatio, imageSize })
+    const result = GeminiAPI.parseResponse(response)
+
+    if (result.text) {
+      console.log(`📝 模型回复: ${result.text}`)
+    }
+
+    const savedFiles = []
+    FileUtils.ensureDir(outputDir)
+
+    for (let i = 0; i < result.images.length; i++) {
+      const img = result.images[i]
+      const ext = img.mimeType.split('/')[1] || 'png'
+      const outputFilename = FileUtils.generateFilename('edited', ext)
+      const outputPath = path.join(outputDir, outputFilename)
+
+      FileUtils.base64ToImage(img.data, outputPath)
+      savedFiles.push(outputPath)
+      console.log(`✅ 已保存: ${outputPath}`)
+    }
+
+    return {
+      text: result.text,
+      images: result.images,
+      savedFiles
+    }
+  }
+
+  /**
+   * 使用模板生成
+   */
+  async generateFromTemplate(templateName, ...args) {
+    const template = Templates[templateName]
+    if (!template) {
+      throw new Error(`未知的模板: ${templateName}。可用模板: ${Object.keys(Templates).join(', ')}`)
+    }
+
+    const options = args[args.length - 1] || {}
+    const prompt = template.generate(...args)
+
+    console.log(`📋 使用模板: ${template.name}`)
+    return this.textToImage(prompt, options)
+  }
+
+  /**
+   * 批量生成
+   */
+  async batchGenerate(prompts, options = {}) {
+    const results = []
+    const total = prompts.length
+
+    console.log(`\n🚀 开始批量生成，共 ${total} 个任务`)
+
+    for (let i = 0; i < prompts.length; i++) {
+      console.log(`\n[${i + 1}/${total}] 处理中...`)
+
+      try {
+        const result = await this.textToImage(prompts[i], {
+          ...options,
+          filename: `batch_${i + 1}.png`
+        })
+        results.push({ success: true, prompt: prompts[i], result })
+      } catch (error) {
+        console.error(`❌ 失败: ${error.message}`)
+        results.push({ success: false, prompt: prompts[i], error: error.message })
+      }
+    }
+
+    const successCount = results.filter(r => r.success).length
+    console.log(`\n✨ 批量生成完成: ${successCount}/${total} 成功`)
+
+    return results
+  }
+
+  /**
+   * 多轮对话编辑
+   */
+  createChatSession(options = {}) {
+    const history = []
+
+    return {
+      async send(message, inputImages = null) {
+        const parts = [{ text: message }]
+
+        // 如果有输入图片
+        if (inputImages) {
+          const images = Array.isArray(inputImages) ? inputImages : [inputImages]
+          for (const imgPath of images) {
+            const { mimeType, data } = FileUtils.imageToBase64(imgPath)
+            parts.push({
+              inlineData: {
+                mime_type: mimeType,
+                data: data
+              }
+            })
+          }
+        }
+
+        // 添加用户消息到历史
+        history.push({
+          role: 'user',
+          parts: parts
+        })
+
+        const response = await GeminiAPI.generateContent(history, options)
+        const result = GeminiAPI.parseResponse(response)
+
+        // 添加模型回复到历史（需要包含图片数据以便后续编辑）
+        const modelParts = []
+        if (result.text) {
+          modelParts.push({ text: result.text })
+        }
+        for (const img of result.images) {
+          modelParts.push({
+            inlineData: {
+              mime_type: img.mimeType,
+              data: img.data
+            }
+          })
+        }
+        if (modelParts.length > 0) {
+          history.push({
+            role: 'model',
+            parts: modelParts
+          })
+        }
+
+        // 保存图片
+        const savedFiles = []
+        FileUtils.ensureDir(options.outputDir || this.outputDir)
+
+        for (const img of result.images) {
+          const ext = img.mimeType.split('/')[1] || 'png'
+          const outputFilename = FileUtils.generateFilename('chat', ext)
+          const outputPath = path.join(options.outputDir || this.outputDir, outputFilename)
+
+          FileUtils.base64ToImage(img.data, outputPath)
+          savedFiles.push(outputPath)
+          console.log(`✅ 已保存: ${outputPath}`)
+        }
+
+        return {
+          text: result.text,
+          images: result.images,
+          savedFiles
+        }
+      },
+
+      getHistory() {
+        return history
+      }
+    }
+  }
+}
+
+// ============================================================================
+// CLI接口模块
+// ============================================================================
+
+const CLI = {
+  /**
+   * 解析命令行参数
+   */
+  parseArgs(args) {
+    const result = {
+      command: '',
+      params: [],
+      options: {}
+    }
+
+    let i = 0
+    while (i < args.length) {
+      const arg = args[i]
+
+      if (arg.startsWith('--')) {
+        const key = arg.substring(2)
+        const nextArg = args[i + 1]
+
+        if (nextArg && !nextArg.startsWith('-')) {
+          result.options[key] = nextArg
+          i += 2
+        } else {
+          result.options[key] = true
+          i++
+        }
+      } else if (arg.startsWith('-')) {
+        const key = arg.substring(1)
+        const shortOptions = {
+          'o': 'output',
+          'r': 'ratio',
+          's': 'size',
+          'i': 'input',
+          't': 'template',
+          'h': 'help'
+        }
+
+        const fullKey = shortOptions[key] || key
+        const nextArg = args[i + 1]
+
+        if (nextArg && !nextArg.startsWith('-')) {
+          result.options[fullKey] = nextArg
+          i += 2
+        } else {
+          result.options[fullKey] = true
+          i++
+        }
+      } else if (!result.command) {
+        result.command = arg
+      } else {
+        result.params.push(arg)
+      }
+    }
+
+    return result
+  },
+
+  /**
+   * 显示帮助信息
+   */
+  showHelp() {
+    console.log(`
+🎨 Gemini Image Generator - 云雾API图片生成工具
+📦 模型: ${Config.api.model}
+
+用法:
+  node gemini-image-generator.js <command> [options]
+
+命令:
+  generate <prompt>         文生图
+  edit <prompt>             图生图（需要 -i 指定输入图片）
+  template <name>           使用模板生成
+  batch <file>              批量生成（从文件读取提示词）
+  list-templates            列出所有可用模板
+
+选项:
+  -o, --output <dir>        输出目录 (默认: ./output)
+  -r, --ratio <ratio>       宽高比 (1:1, 16:9, 9:16, 3:2, 2:3 等)
+  -s, --size <size>         分辨率 (512, 1K, 2K, 4K，默认: 2K)
+  -i, --input <file>        输入图片路径（用于edit命令）
+  -t, --template <name>     模板名称
+  --text <text>             Logo文字（用于logo模板）
+  --subject <subject>       主题内容
+  --style <style>           风格
+  -h, --help                显示帮助信息
+
+示例:
+  # 基础文生图 16:9 2K分辨率
+  node gemini-image-generator.js generate "A cute cat wearing a hat" -o ./my-images -r 16:9 -s 2K
+
+  # 高分辨率4K图片
+  node gemini-image-generator.js generate "A landscape photo" -r 16:9 -s 4K
+
+  # 图生图编辑
+  node gemini-image-generator.js edit "Add sunglasses to this person" -i ./photo.jpg
+
+  # 使用Logo模板
+  node gemini-image-generator.js template logo --text "MyBrand" --style minimalist
+
+  # 使用产品图模板
+  node gemini-image-generator.js template product --subject "a minimalist ceramic coffee mug"
+
+  # 批量生成
+  node gemini-image-generator.js batch ./prompts.txt -o ./batch-output
+
+可用宽高比:
+  ${Config.aspectRatios.join(', ')}
+
+可用分辨率:
+  ${Config.imageSizes.join(', ')}
+
+可用模板:
+  ${Object.entries(Templates).map(([k, v]) => `${k} (${v.name})`).join('\n  ')}
+`)
+  },
+
+  /**
+   * 列出模板
+   */
+  listTemplates() {
+    console.log('\n📋 可用模板:\n')
+    for (const [key, template] of Object.entries(Templates)) {
+      console.log(`  ${key.padEnd(15)} - ${template.name}`)
+    }
+    console.log('')
+  },
+
+  /**
+   * 执行命令
+   */
+  async run(args) {
+    const { command, params, options } = this.parseArgs(args)
+
+    if (options.help || command === 'help' || !command) {
+      this.showHelp()
+      return
+    }
+
+    const generator = new GeminiImageGenerator({
+      outputDir: options.output || Config.output.defaultDir,
+      aspectRatio: options.ratio || '1:1',
+      imageSize: options.size || Config.defaultImageSize
+    })
+
+    switch (command) {
+      case 'generate': {
+        const prompt = params.join(' ')
+        if (!prompt) {
+          console.error('❌ 请提供生成提示词')
+          return
+        }
+        await generator.textToImage(prompt, {
+          aspectRatio: options.ratio,
+          imageSize: options.size,
+          outputDir: options.output
+        })
+        break
+      }
+
+      case 'edit': {
+        const prompt = params.join(' ')
+        const inputImages = options.input?.split(',').map(p => p.trim())
+
+        if (!prompt) {
+          console.error('❌ 请提供编辑指令')
+          return
+        }
+        if (!inputImages || inputImages.length === 0) {
+          console.error('❌ 请使用 -i 指定输入图片')
+          return
+        }
+
+        await generator.imageToImage(prompt, inputImages, {
+          aspectRatio: options.ratio,
+          imageSize: options.size,
+          outputDir: options.output
+        })
+        break
+      }
+
+      case 'template': {
+        const templateName = params[0] || options.template
+        if (!templateName) {
+          this.listTemplates()
+          return
+        }
+
+        const template = Templates[templateName]
+        if (!template) {
+          console.error(`❌ 未知的模板: ${templateName}`)
+          this.listTemplates()
+          return
+        }
+
+        // 根据模板类型处理参数
+        let templateOptions = { aspectRatio: options.ratio, outputDir: options.output }
+
+        switch (templateName) {
+          case 'logo':
+            await generator.generateFromTemplate('logo', options.text || '', {
+              style: options.style || 'modern, minimalist',
+              colorScheme: 'black and white'
+            }, templateOptions)
+            break
+
+          case 'product':
+            await generator.generateFromTemplate('product', options.subject || params.slice(1).join(' ') || 'a product', {
+              surface: 'polished concrete surface'
+            }, templateOptions)
+            break
+
+          case 'photorealistic':
+            await generator.generateFromTemplate('photorealistic', options.subject || params.slice(1).join(' ') || 'a person', {}, templateOptions)
+            break
+
+          case 'sticker':
+            await generator.generateFromTemplate('sticker', options.subject || params.slice(1).join(' ') || 'a cute character', {}, templateOptions)
+            break
+
+          default:
+            await generator.generateFromTemplate(templateName, params.slice(1).join(' ') || '', {}, templateOptions)
+        }
+        break
+      }
+
+      case 'batch': {
+        const filePath = params[0]
+        if (!filePath) {
+          console.error('❌ 请提供提示词文件路径')
+          return
+        }
+
+        const prompts = FileUtils.readPromptsFile(filePath)
+        await generator.batchGenerate(prompts, {
+          aspectRatio: options.ratio,
+          outputDir: options.output
+        })
+        break
+      }
+
+      case 'list-templates': {
+        this.listTemplates()
+        break
+      }
+
+      default:
+        console.error(`❌ 未知命令: ${command}`)
+        this.showHelp()
+    }
+  }
+}
+
+// ============================================================================
+// 导出模块
+// ============================================================================
+
+module.exports = {
+  // 核心类
+  GeminiImageGenerator,
+
+  // 模块
+  Config,
+  FileUtils,
+  GeminiAPI,
+  Templates,
+  CLI,
+
+  // 便捷方法
+  generate: async (prompt, options) => {
+    const generator = new GeminiImageGenerator(options)
+    return generator.textToImage(prompt, options)
+  },
+
+  edit: async (prompt, images, options) => {
+    const generator = new GeminiImageGenerator(options)
+    return generator.imageToImage(prompt, images, options)
+  },
+
+  fromTemplate: async (templateName, ...args) => {
+    const generator = new GeminiImageGenerator(args[args.length - 1] || {})
+    return generator.generateFromTemplate(templateName, ...args)
+  }
+}
+
+// ============================================================================
+// 主入口
+// ============================================================================
+
+// 如果直接运行此脚本
+if (require.main === module) {
+  const args = process.argv.slice(2)
+  CLI.run(args).catch(error => {
+    console.error(`\n❌ 错误: ${error.message}`)
+    process.exit(1)
+  })
+}