From 091e3d2d05d4b92f5c10d25eb2f50a6fba799eb3 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Sat, 17 Jan 2026 19:33:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .claude/settings.local.json                   |   7 +-
 .../scripts/__pycache__/core.cpython-312.pyc  | Bin 0 -> 10994 bytes
 docs/SQL建表语句.sql                          | 296 ++++++
 frontend/app/web-gold/src/App.vue             |  77 ++
 .../src/components/GradientButton.vue         |   3 -
 .../web-gold/src/components/SidebarNav.vue    |   1 -
 .../web-gold/src/layouts/LayoutExamples.vue   | 237 +++++
 .../app/web-gold/src/layouts/MainLayout.vue   |   2 +-
 frontend/app/web-gold/src/layouts/README.md   | 297 ++++++
 .../src/layouts/components/BasicLayout.vue    | 125 +++
 .../src/layouts/components/CardLayout.vue     | 155 ++++
 .../src/layouts/components/FormLayout.vue     | 194 ++++
 .../layouts/components/FullWidthLayout.vue    | 122 +++
 .../src/layouts/components/TabLayout.vue      | 182 ++++
 .../web-gold/src/layouts/components/index.js  |   6 +
 frontend/app/web-gold/src/style.less          |  55 +-
 .../src/views/content-style/Benchmark.vue     |  63 +-
 .../components/BenchmarkTable.vue             |  98 +-
 .../app/web-gold/src/views/dh/VoiceCopy.vue   |  52 +-
 .../src/views/material/MaterialList.vue       | 848 ------------------
 .../src/views/material/MaterialListNew.vue    |  30 +-
 .../web-gold/src/views/trends/Forecast.vue    | 250 ++----
 22 files changed, 1871 insertions(+), 1229 deletions(-)
 create mode 100644 .claude/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc
 create mode 100644 docs/SQL建表语句.sql
 create mode 100644 frontend/app/web-gold/src/layouts/LayoutExamples.vue
 create mode 100644 frontend/app/web-gold/src/layouts/README.md
 create mode 100644 frontend/app/web-gold/src/layouts/components/BasicLayout.vue
 create mode 100644 frontend/app/web-gold/src/layouts/components/CardLayout.vue
 create mode 100644 frontend/app/web-gold/src/layouts/components/FormLayout.vue
 create mode 100644 frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
 create mode 100644 frontend/app/web-gold/src/layouts/components/TabLayout.vue
 create mode 100644 frontend/app/web-gold/src/layouts/components/index.js
 delete mode 100644 frontend/app/web-gold/src/views/material/MaterialList.vue

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 67459dec40..71975880b0 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -53,7 +53,12 @@
       "Skill(openspec:proposal:*)",
       "Bash(cmd /c:*)",
       "Bash(npx oxlint:*)",
-      "Bash(pnpm:*)"
+      "Bash(pnpm:*)",
+      "mcp__server-mysql__list_tables",
+      "mcp__server-mysql__connect_db",
+      "Skill(ui-ux-pro-max)",
+      "Skill(ui-ux-pro-max:*)",
+      "Bash(python:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/.claude/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc b/.claude/skills/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..39222d1a1a3c3ecb12d460aeca65fae0ec40a040
GIT binary patch
literal 10994
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
EKP_gz^8f$<

literal 0
HcmV?d00001

diff --git a/docs/SQL建表语句.sql b/docs/SQL建表语句.sql
new file mode 100644
index 0000000000..ffb84696c4
--- /dev/null
+++ b/docs/SQL建表语句.sql
@@ -0,0 +1,296 @@
+-- Yudao 风格建表语句
+-- 包含多租户概念，使用 TenantBaseDO
+
+-- ===============================================
+-- 1. 积分管理模块
+-- ===============================================
+
+-- 积分兑换配置表
+CREATE TABLE `member_point_exchange_config` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `exchange_rate` int NOT NULL DEFAULT 1 COMMENT '兑换比例(1元兑换多少积分)',
+  `adjust_reason` varchar(200) NOT NULL DEFAULT '' COMMENT '调整原因',
+  `operator_id` bigint NOT NULL DEFAULT 0 COMMENT '操作人用户编号',
+  `operator_name` varchar(64) NOT NULL DEFAULT '' COMMENT '操作人账号',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_create_time` (`create_time`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='积分兑换配置表';
+
+-- 积分签到配置表
+CREATE TABLE `member_point_signin_config` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `daily_points` int NOT NULL DEFAULT 0 COMMENT '每日签到赠送积分',
+  `continuous_days` int NOT NULL DEFAULT 0 COMMENT '连续签到天数',
+  `bonus_points` int NOT NULL DEFAULT 0 COMMENT '连续签到奖励积分',
+  `reset_days` int NOT NULL DEFAULT 0 COMMENT '重置签到天数(0表示不重置)',
+  `adjust_reason` varchar(200) NOT NULL DEFAULT '' COMMENT '调整原因',
+  `operator_id` bigint NOT NULL DEFAULT 0 COMMENT '操作人用户编号',
+  `operator_name` varchar(64) NOT NULL DEFAULT '' COMMENT '操作人账号',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_continuous_days` (`continuous_days`) USING BTREE,
+  KEY `idx_create_time` (`create_time`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='积分签到配置表';
+
+-- 积分充值配置表
+CREATE TABLE `member_point_recharge_config` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `recharge_amount` decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT '充值金额',
+  `bonus_points` int NOT NULL DEFAULT 0 COMMENT '赠送积分数',
+  `adjust_reason` varchar(200) NOT NULL DEFAULT '' COMMENT '调整原因',
+  `operator_id` bigint NOT NULL DEFAULT 0 COMMENT '操作人用户编号',
+  `operator_name` varchar(64) NOT NULL DEFAULT '' COMMENT '操作人账号',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_recharge_amount` (`recharge_amount`) USING BTREE,
+  KEY `idx_create_time` (`create_time`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='积分充值配置表';
+
+-- 积分记录表
+CREATE TABLE `member_point_record` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `user_id` bigint NOT NULL DEFAULT 0 COMMENT '用户编号',
+  `mobile` varchar(20) NOT NULL DEFAULT '' COMMENT '手机号',
+  `type` varchar(20) NOT NULL DEFAULT '' COMMENT '变动类型(increase-增加 decrease-减少)',
+  `point_amount` int NOT NULL DEFAULT 0 COMMENT '变动积分数量(正数为增加，负数为减少)',
+  `balance` int NOT NULL DEFAULT 0 COMMENT '变动后余额',
+  `reason` varchar(100) NOT NULL DEFAULT '' COMMENT '变动原因',
+  `biz_type` varchar(50) NOT NULL DEFAULT '' COMMENT '业务类型(signin-签到 recharge-充值 exchange-兑换 admin-后台调整 gift-礼包赠送)',
+  `biz_id` varchar(64) NOT NULL DEFAULT '' COMMENT '业务关联ID',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  PRIMARY KEY (`id`) USING BTREE,
+  KEY `idx_tenant_id_user_id` (`tenant_id`, `user_id`) USING BTREE,
+  KEY `idx_user_id_create_time` (`user_id`, `create_time`) USING BTREE,
+  KEY `idx_type` (`type`) USING BTREE,
+  KEY `idx_biz_type` (`biz_type`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='积分记录表';
+
+-- ===============================================
+-- 2. 客户管理模块
+-- ===============================================
+
+-- 会员用户表
+CREATE TABLE `member_user` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `user_id` varchar(32) NOT NULL COMMENT '用户ID',
+  `mobile` varchar(20) NOT NULL COMMENT '手机号',
+  `register_time` datetime NOT NULL COMMENT '注册时间',
+  `last_login_time` datetime NOT NULL COMMENT '最后登录时间',
+  `total_points` int NOT NULL DEFAULT 0 COMMENT '账户总积分',
+  `used_points` int NOT NULL DEFAULT 0 COMMENT '账户消耗积分',
+  `remaining_points` int NOT NULL DEFAULT 0 COMMENT '账户剩余积分',
+  `total_storage` decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT '云空间总容量(GB)',
+  `used_storage` decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT '云空间已用容量(GB)',
+  `remaining_storage` decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT '云空间剩余容量(GB)',
+  `total_recharge` decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT '总充值金额',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  UNIQUE KEY `uk_user_id` (`user_id`) USING BTREE,
+  UNIQUE KEY `uk_mobile` (`mobile`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_register_time` (`register_time`) USING BTREE,
+  KEY `idx_last_login_time` (`last_login_time`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='会员用户表';
+
+-- 充值记录表
+CREATE TABLE `member_recharge_record` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `user_id` bigint NOT NULL DEFAULT 0 COMMENT '用户编号',
+  `mobile` varchar(20) NOT NULL COMMENT '手机号',
+  `recharge_amount` decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT '充值金额',
+  `recharge_type` varchar(20) NOT NULL DEFAULT '' COMMENT '充值方式(alipay-支付宝 wechat-微信 admin-人工)',
+  `order_type` varchar(50) NOT NULL DEFAULT '' COMMENT '订单类型(purchase-权限购买 exchange-积分兑换)',
+  `permission_type` varchar(100) NOT NULL DEFAULT '' COMMENT '购买权限类型',
+  `bonus_points` int NOT NULL DEFAULT 0 COMMENT '获得积分',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-失败 1-成功)',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  PRIMARY KEY (`id`) USING BTREE,
+  KEY `idx_tenant_id_user_id` (`tenant_id`, `user_id`) USING BTREE,
+  KEY `idx_user_id_create_time` (`user_id`, `create_time`) USING BTREE,
+  KEY `idx_recharge_type` (`recharge_type`) USING BTREE,
+  KEY `idx_order_type` (`order_type`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='充值记录表';
+
+-- ===============================================
+-- 3. 礼包管理模块
+-- ===============================================
+
+-- 礼包表
+CREATE TABLE `member_gift_package` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `package_id` varchar(32) NOT NULL COMMENT '礼包ID',
+  `package_name` varchar(100) NOT NULL COMMENT '礼包名称',
+  `sort_order` int NOT NULL DEFAULT 0 COMMENT 'C端展示排序',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `price` decimal(10,2) NOT NULL DEFAULT 0.00 COMMENT '购买价格',
+  `validity_days` int NOT NULL DEFAULT 0 COMMENT '有效期(天)',
+  `bonus_points` int NOT NULL DEFAULT 0 COMMENT '赠送积分',
+  `applications` text NOT NULL COMMENT '关联应用(JSON格式)',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `operator_id` bigint NOT NULL DEFAULT 0 COMMENT '操作人用户编号',
+  `operator_name` varchar(64) NOT NULL DEFAULT '' COMMENT '操作人账号',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  UNIQUE KEY `uk_package_id` (`package_id`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_sort_order` (`sort_order`) USING BTREE,
+  KEY `idx_status` (`status`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='礼包表';
+
+-- ===============================================
+-- 4. 模型管理模块
+-- ===============================================
+
+-- AI模型表
+CREATE TABLE `ai_model` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `model_name` varchar(100) NOT NULL COMMENT '模型名称',
+  `model_code` varchar(100) NOT NULL COMMENT '模型标识/编码',
+  `platform` varchar(50) NOT NULL COMMENT '所属平台',
+  `api_key` varchar(200) NOT NULL COMMENT 'API秘钥',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `temperature` decimal(3,2) NOT NULL DEFAULT 0.70 COMMENT '温度参数',
+  `max_tokens` int NOT NULL DEFAULT 0 COMMENT '回复数Token数',
+  `daily_limit` int NOT NULL DEFAULT 0 COMMENT '每日请求次数',
+  `model_type` varchar(50) NOT NULL COMMENT '模型类型(image-图像 text-文本 video-视频 audio-音频)',
+  `consume_points` int NOT NULL DEFAULT 0 COMMENT '消耗积分',
+  `max_text_length` int NOT NULL DEFAULT 0 COMMENT '最大文本数量',
+  `max_image_size` varchar(50) NOT NULL DEFAULT '' COMMENT '图片最大像素',
+  `max_video_duration` int NOT NULL DEFAULT 0 COMMENT '视频最大时长(秒)',
+  `max_video_quality` varchar(20) NOT NULL DEFAULT '' COMMENT '视频最大质量',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_platform` (`platform`) USING BTREE,
+  KEY `idx_model_type` (`model_type`) USING BTREE,
+  KEY `idx_status` (`status`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='AI模型表';
+
+-- ===============================================
+-- 5. 应用功能管理模块
+-- ===============================================
+
+-- 应用功能表
+CREATE TABLE `ai_application` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `app_id` varchar(32) NOT NULL COMMENT '应用ID',
+  `app_name` varchar(100) NOT NULL COMMENT '应用名称',
+  `api_key` varchar(200) NOT NULL COMMENT '第三方API秘钥',
+  `consume_points` int NOT NULL DEFAULT 0 COMMENT '单位消耗积分',
+  `unit_type` varchar(20) NOT NULL COMMENT '消耗单位(time-时长 count-次数)',
+  `unit_value` varchar(50) NOT NULL COMMENT '单位值(如：1min、20次)',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  UNIQUE KEY `uk_app_id` (`app_id`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_app_name` (`app_name`) USING BTREE,
+  KEY `idx_status` (`status`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='应用功能表';
+
+-- ===============================================
+-- 6. 智能体配置模块
+-- ===============================================
+
+-- 智能体表
+CREATE TABLE `ai_agent` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `agent_id` varchar(32) NOT NULL COMMENT '智能体ID',
+  `agent_name` varchar(100) NOT NULL COMMENT '智能体名称',
+  `icon` varchar(200) NOT NULL DEFAULT '' COMMENT '图标URL',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-禁用 1-启用)',
+  `description` text NOT NULL COMMENT '设定描述',
+  `system_prompt` text NOT NULL COMMENT '预置提示词',
+  `remark` varchar(500) NOT NULL DEFAULT '' COMMENT '备注',
+  `operator_id` bigint NOT NULL DEFAULT 0 COMMENT '操作人用户编号',
+  `operator_name` varchar(64) NOT NULL DEFAULT '' COMMENT '操作人账号',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  `updater` varchar(64) NOT NULL DEFAULT '' COMMENT '更新者',
+  `deleted` bit NOT NULL DEFAULT b'0' COMMENT '是否删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  UNIQUE KEY `uk_agent_id` (`agent_id`) USING BTREE,
+  KEY `idx_tenant_id` (`tenant_id`) USING BTREE,
+  KEY `idx_agent_name` (`agent_name`) USING BTREE,
+  KEY `idx_status` (`status`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='智能体表';
+
+-- ===============================================
+-- 7. 权限管理表
+-- ===============================================
+
+-- 用户权限表
+CREATE TABLE `member_user_permission` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
+  `tenant_id` bigint NOT NULL DEFAULT 0 COMMENT '租户编号',
+  `user_id` bigint NOT NULL DEFAULT 0 COMMENT '用户编号',
+  `permission_type` varchar(100) NOT NULL COMMENT '权限类型',
+  `package_id` bigint NOT NULL DEFAULT 0 COMMENT '礼包ID',
+  `validity_start` datetime NOT NULL COMMENT '有效期开始时间',
+  `validity_end` datetime NOT NULL COMMENT '有效期结束时间',
+  `status` tinyint NOT NULL DEFAULT 1 COMMENT '状态(0-过期 1-有效)',
+  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+  `creator` varchar(64) NOT NULL DEFAULT '' COMMENT '创建者',
+  PRIMARY KEY (`id`) USING BTREE,
+  KEY `idx_tenant_id_user_id` (`tenant_id`, `user_id`) USING BTREE,
+  KEY `idx_user_id` (`user_id`) USING BTREE,
+  KEY `idx_package_id` (`package_id`) USING BTREE,
+  KEY `idx_validity_end` (`validity_end`) USING BTREE
+) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='用户权限表';
diff --git a/frontend/app/web-gold/src/App.vue b/frontend/app/web-gold/src/App.vue
index 9dda5e2600..6243dcd0b4 100644
--- a/frontend/app/web-gold/src/App.vue
+++ b/frontend/app/web-gold/src/App.vue
@@ -10,12 +10,59 @@ const themeToken = ref({
   token: {
     colorPrimary: '#3B82F6',
     colorInfo: '#2563EB',
+    colorSuccess: '#10B981',
+    colorWarning: '#F59E0B',
+    colorError: '#EF4444',
     colorBgBase: '#F8FAFC',
     colorBgContainer: '#FFFFFF',
+    colorBgElevated: '#FFFFFF',
     colorTextBase: '#334155',
     colorTextSecondary: '#64748B',
+    colorTextTertiary: '#94A3B8',
     colorBorder: '#E2E8F0',
+    colorBorderSecondary: '#F1F5F9',
     borderRadius: 8,
+    borderRadiusSM: 4,
+    borderRadiusLG: 12,
+    wireframe: false,
+    fontSize: 14,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    fontSizeHeading1: 32,
+    fontSizeHeading2: 24,
+    fontSizeHeading3: 20,
+    fontSizeHeading4: 16,
+    fontSizeHeading5: 14,
+    motionDurationMid: '0.15s',
+    motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    boxShadowSecondary: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+    boxShadowTertiary: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+  },
+  algorithm: undefined, // 可以设置为 theme.darkAlgorithm 用于暗色主题
+  components: {
+    Button: {
+      controlHeight: 32,
+      controlHeightSM: 24,
+      controlHeightLG: 40,
+      borderRadius: 8,
+    },
+    Card: {
+      borderRadius: 12,
+      boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    },
+    Input: {
+      borderRadius: 8,
+      controlHeight: 32,
+    },
+    Table: {
+      borderRadius: 8,
+      headerBg: '#F8FAFC',
+    },
+    Menu: {
+      itemHeight: 40,
+      itemMarginInline: 4,
+      itemMarginBlock: 2,
+    },
   }
 })
 
@@ -36,4 +83,34 @@ onMounted(async () => {})
     text-align: center;
     display: flex;
 }
+
+.ant-select-selector {
+  background: var(--color-bg) !important;
+  border: 1px solid var(--color-border) !important;
+  border-radius: 4px !important;
+  transition: all 0.2s !important;
+  min-height: 32px !important;
+}
+
+.ant-select-selection-item,
+.ant-select-selection-placeholder {
+  line-height: 30px !important;
+  color: var(--color-text) !important;
+}
+
+.ant-select-focused .ant-select-selector {
+  border-color: var(--color-primary) !important;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1) !important;
+}
+
+.ant-select:hover .ant-select-selector {
+  border-color: var(--color-primary) !important;
+}
+
+.ant-select-arrow {
+  color: var(--color-text-secondary) !important;
+}
+.ant-modal .ant-modal-footer {
+ display: flex;
+}
 </style>
diff --git a/frontend/app/web-gold/src/components/GradientButton.vue b/frontend/app/web-gold/src/components/GradientButton.vue
index 455c344e63..a3cbbf4205 100644
--- a/frontend/app/web-gold/src/components/GradientButton.vue
+++ b/frontend/app/web-gold/src/components/GradientButton.vue
@@ -103,14 +103,11 @@ const buttonClass = computed(() => {
   cursor: pointer;
   transition: all 0.2s ease;
   background: var(--color-slate-900);
-  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
   user-select: none;
 }
 
 .gradient-button:hover {
   background: var(--color-slate-800);
-  transform: translateY(-1px);
-  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3), 0 10px 10px -5px rgba(59, 130, 246, 0.15);
 }
 
 .gradient-button:active {
diff --git a/frontend/app/web-gold/src/components/SidebarNav.vue b/frontend/app/web-gold/src/components/SidebarNav.vue
index 15a4c0397d..aa1cf75d4f 100644
--- a/frontend/app/web-gold/src/components/SidebarNav.vue
+++ b/frontend/app/web-gold/src/components/SidebarNav.vue
@@ -45,7 +45,6 @@ const items = computed(() => {
       children: [
         { name: '素材列表', label: '素材列表', icon: 'grid' },
         { name: '智能混剪', label: '智能混剪', icon: 'scissors' },
-        { name: '素材分组', label: '素材分组', icon: 'folder' },
       ]
     },
     {
diff --git a/frontend/app/web-gold/src/layouts/LayoutExamples.vue b/frontend/app/web-gold/src/layouts/LayoutExamples.vue
new file mode 100644
index 0000000000..a68f616981
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/LayoutExamples.vue
@@ -0,0 +1,237 @@
+<script setup>
+import { ref } from 'vue'
+import {
+  BasicLayout,
+  CardLayout,
+  TabLayout,
+  FullWidthLayout,
+  FormLayout
+} from './components'
+
+// Tab Layout 示例数据
+const tabs = ref([
+  {
+    key: 'tab1',
+    tab: '标签页1',
+    forceRender: true
+  },
+  {
+    key: 'tab2',
+    tab: '标签页2',
+    forceRender: true
+  },
+  {
+    key: 'tab3',
+    tab: '标签页3',
+    forceRender: false
+  }
+])
+
+const activeTabKey = ref('tab1')
+
+// Form Layout 示例
+const formData = ref({
+  name: '',
+  email: '',
+  description: ''
+})
+
+const submitLoading = ref(false)
+
+const handleFormSubmit = () => {
+  submitLoading.value = true
+  setTimeout(() => {
+    submitLoading.value = false
+    console.log('表单提交:', formData.value)
+  }, 2000)
+}
+
+const handleFormCancel = () => {
+  console.log('表单取消')
+}
+</script>
+
+<template>
+  <div class="layout-examples">
+    <h2>布局组件使用示例</h2>
+
+    <!-- 1. BasicLayout 示例 -->
+    <h3>1. BasicLayout - 基础布局</h3>
+    <BasicLayout
+      title="基础布局页面"
+      subtitle="这是一个基础布局的示例，适用于大部分页面"
+      :show-back="true"
+      @back="console.log('返回')"
+    >
+      <template #extra>
+        <a-button type="primary">额外操作</a-button>
+      </template>
+
+      <div class="example-content">
+        <p>这里放置页面内容...</p>
+        <a-table :columns="[]" :data-source="[]" />
+      </div>
+    </BasicLayout>
+
+    <!-- 2. CardLayout 示例 -->
+    <h3>2. CardLayout - 卡片布局</h3>
+    <CardLayout
+      title="卡片布局页面"
+      subtitle="这是一个卡片布局的示例"
+      :show-back="true"
+      :show-padding="true"
+    >
+      <template #extra>
+        <a-button type="primary">操作</a-button>
+      </template>
+
+      <div class="example-content">
+        <p>卡片内容...</p>
+        <a-form layout="vertical">
+          <a-form-item label="名称">
+            <a-input v-model:value="formData.name" placeholder="请输入名称" />
+          </a-form-item>
+        </a-form>
+      </div>
+    </CardLayout>
+
+    <!-- 3. TabLayout 示例 -->
+    <h3>3. TabLayout - 标签页布局</h3>
+    <TabLayout
+      :tabs="tabs"
+      v-model:active-key="activeTabKey"
+      :show-back="true"
+    >
+      <template #extra>
+        <a-button type="primary">标签页操作</a-button>
+      </template>
+
+      <template #tab1>
+        <div class="tab-content">
+          <h4>标签页1的内容</h4>
+          <p>这是第一个标签页的内容...</p>
+        </div>
+      </template>
+
+      <template #tab2>
+        <div class="tab-content">
+          <h4>标签页2的内容</h4>
+          <p>这是第二个标签页的内容...</p>
+        </div>
+      </template>
+
+      <template #tab3>
+        <div class="tab-content">
+          <h4>标签页3的内容</h4>
+          <p>这是第三个标签页的内容...</p>
+        </div>
+      </template>
+    </TabLayout>
+
+    <!-- 4. FullWidthLayout 示例 -->
+    <h3>4. FullWidthLayout - 全宽布局</h3>
+    <FullWidthLayout
+      :show-back="true"
+      :show-padding="true"
+    >
+      <template #header>
+        <div class="custom-header">
+          <h2>自定义头部</h2>
+          <p>这是全宽布局的自定义头部</p>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button type="primary">全宽操作</a-button>
+      </template>
+
+      <div class="example-content">
+        <p>全宽内容...</p>
+        <a-table :columns="[]" :data-source="[]" />
+      </div>
+    </FullWidthLayout>
+
+    <!-- 5. FormLayout 示例 -->
+    <h3>5. FormLayout - 表单布局</h3>
+    <FormLayout
+      title="表单布局页面"
+      subtitle="这是一个表单布局的示例"
+      :show-back="true"
+      :submit-loading="submitLoading"
+      @submit="handleFormSubmit"
+      @cancel="handleFormCancel"
+    >
+      <a-form layout="vertical">
+        <a-form-item label="名称">
+          <a-input v-model:value="formData.name" placeholder="请输入名称" />
+        </a-form-item>
+
+        <a-form-item label="邮箱">
+          <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
+        </a-form-item>
+
+        <a-form-item label="描述">
+          <a-textarea
+            v-model:value="formData.description"
+            placeholder="请输入描述"
+            :rows="4"
+          />
+        </a-form-item>
+      </a-form>
+    </FormLayout>
+  </div>
+</template>
+
+<style scoped lang="less">
+.layout-examples {
+  padding: 24px;
+  background: var(--color-bg);
+  min-height: 100vh;
+
+  h2 {
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--color-text);
+    margin-bottom: 32px;
+  }
+
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--color-text);
+    margin: 32px 0 16px 0;
+    padding-bottom: 8px;
+    border-bottom: 2px solid var(--color-primary);
+  }
+
+  .example-content {
+    padding: 24px;
+    background: var(--color-surface);
+    border-radius: var(--radius-card);
+    border: 1px solid var(--color-border);
+    margin-top: 16px;
+  }
+
+  .tab-content {
+    padding: 24px;
+    background: var(--color-bg);
+    border-radius: var(--radius-card);
+    min-height: 300px;
+  }
+
+  .custom-header {
+    h2 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin: 0 0 8px 0;
+    }
+
+    p {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      margin: 0;
+    }
+  }
+}
+</style>
diff --git a/frontend/app/web-gold/src/layouts/MainLayout.vue b/frontend/app/web-gold/src/layouts/MainLayout.vue
index 9689ad207d..660dbd4587 100644
--- a/frontend/app/web-gold/src/layouts/MainLayout.vue
+++ b/frontend/app/web-gold/src/layouts/MainLayout.vue
@@ -42,6 +42,6 @@ import SidebarNav from '@/components/SidebarNav.vue'
 .content-scroll {
   flex: 1 1 auto;
   overflow: auto; /* 右侧内容区域滚动 */
-  padding: 0 16px 0 16px;
+  padding: 16px 0px 16px 16px;
 }
 </style>
diff --git a/frontend/app/web-gold/src/layouts/README.md b/frontend/app/web-gold/src/layouts/README.md
new file mode 100644
index 0000000000..ead4b13832
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/README.md
@@ -0,0 +1,297 @@
+# 统一布局组件
+
+为项目提供5种不同类型的布局组件，保持设计一致性和代码复用性。
+
+## 布局组件类型
+
+### 1. BasicLayout - 基础布局
+最通用的布局组件，适用于大多数页面。
+
+**特点：**
+- 标准页面头部（标题 + 副标题）
+- 灵活的内容区域
+- 支持返回按钮和额外操作
+
+**使用场景：**
+- 列表页面
+- 详情页面
+- 数据统计页面
+
+**示例：**
+```vue
+<template>
+  <BasicLayout
+    title="用户列表"
+    subtitle="管理系统中的所有用户"
+    :show-back="true"
+    @back="handleBack"
+  >
+    <template #extra>
+      <a-button type="primary">新增用户</a-button>
+    </template>
+
+    <a-table :columns="columns" :data-source="data" />
+  </BasicLayout>
+</template>
+```
+
+### 2. CardLayout - 卡片布局
+内容包装在卡片中，提供更好的视觉层次。
+
+**特点：**
+- Ant Design Card 容器
+- 可配置的边距
+- 灵活的标题栏
+
+**使用场景：**
+- 表单页面
+- 配置页面
+- 详情展示页面
+
+**示例：**
+```vue
+<template>
+  <CardLayout
+    title="用户信息"
+    :show-back="true"
+    :show-padding="true"
+  >
+    <template #extra>
+      <a-button>编辑</a-button>
+    </template>
+
+    <a-form layout="vertical">
+      <a-form-item label="姓名">
+        <a-input v-model:value="form.name" />
+      </a-form-item>
+    </a-form>
+  </CardLayout>
+</template>
+```
+
+### 3. TabLayout - 标签页布局
+多标签页内容组织。
+
+**特点：**
+- 动态标签页
+- 支持懒加载
+- 自定义标签页内容
+
+**使用场景：**
+- 设置页面
+- 数据对比
+- 多模块内容
+
+**示例：**
+```vue
+<template>
+  <TabLayout
+    :tabs="tabs"
+    v-model:active-key="activeKey"
+    @change="handleTabChange"
+  >
+    <template #tab1>
+      <div>标签页1内容</div>
+    </template>
+
+    <template #tab2>
+      <div>标签页2内容</div>
+    </template>
+  </TabLayout>
+</template>
+
+<script setup>
+const tabs = ref([
+  { key: 'tab1', tab: '基础信息', forceRender: true },
+  { key: 'tab2', tab: '高级设置', forceRender: false }
+])
+</script>
+```
+
+### 4. FullWidthLayout - 全宽布局
+充分利用屏幕宽度的布局。
+
+**特点：**
+- 全宽度内容
+- 自定义头部
+- 无卡片包装
+
+**使用场景：**
+- 数据可视化
+- 宽屏内容展示
+- 全屏应用
+
+**示例：**
+```vue
+<template>
+  <FullWidthLayout :show-back="true">
+    <template #header>
+      <h2>数据分析仪表板</h2>
+    </template>
+
+    <template #extra>
+      <a-button-group>
+        <a-button>导出</a-button>
+        <a-button>刷新</a-button>
+      </a-button-group>
+    </template>
+
+    <div class="dashboard-grid">
+      <!-- 图表组件 -->
+    </div>
+  </FullWidthLayout>
+</template>
+```
+
+### 5. FormLayout - 表单布局
+专门用于表单页面。
+
+**特点：**
+- 居中的表单容器
+- 内置提交/取消按钮
+- 加载状态管理
+
+**使用场景：**
+- 创建/编辑页面
+- 复杂表单
+- 向导式表单
+
+**示例：**
+```vue
+<template>
+  <FormLayout
+    title="创建用户"
+    :submit-loading="submitting"
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="姓名" required>
+        <a-input v-model:value="form.name" />
+      </a-form-item>
+
+      <a-form-item label="邮箱" required>
+        <a-input v-model:value="form.email" />
+      </a-form-item>
+    </a-form>
+  </FormLayout>
+</template>
+```
+
+## 设计特色
+
+### 1. 统一的设计语言
+- 使用项目的设计令牌（Design Tokens）
+- 一致的颜色、字体、间距
+- Notion 风格的标签页设计
+
+### 2. 响应式设计
+- 移动端友好
+- 自适应布局
+- 弹性内容区域
+
+### 3. 可访问性
+- 语义化 HTML
+- 键盘导航支持
+- 屏幕阅读器友好
+
+### 4. 性能优化
+- 懒加载支持
+- keep-alive 兼容
+- 轻量级实现
+
+## 导入方式
+
+```javascript
+// 单独导入
+import BasicLayout from '@/layouts/components/BasicLayout.vue'
+import CardLayout from '@/layouts/components/CardLayout.vue'
+import TabLayout from '@/layouts/components/TabLayout.vue'
+import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
+import FormLayout from '@/layouts/components/FormLayout.vue'
+
+// 批量导入
+import {
+  BasicLayout,
+  CardLayout,
+  TabLayout,
+  FullWidthLayout,
+  FormLayout
+} from '@/layouts/components'
+```
+
+## Props 说明
+
+### 通用 Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| showBack | Boolean | false | 是否显示返回按钮 |
+| title | String | '' | 页面标题 |
+| subtitle | String | '' | 页面副标题 |
+
+### TabLayout 特有 Props
+
+| 属性 | 类型 | 必需 | 说明 |
+|------|------|------|------|
+| tabs | Array | 是 | 标签页配置数组 |
+| activeKey | String | 否 | 当前激活的标签页 |
+
+### FormLayout 特有 Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| submitText | String | '提交' | 提交按钮文字 |
+| cancelText | String | '取消' | 取消按钮文字 |
+| showCancel | Boolean | true | 是否显示取消按钮 |
+| submitLoading | Boolean | false | 提交按钮加载状态 |
+
+## 插槽（Slots）
+
+### 通用插槽
+
+- `#extra` - 头部右侧额外操作区域
+- `#header` - 自定义头部内容（某些布局）
+
+### TabLayout 插槽
+
+- `#tab1`, `#tab2`, ... - 标签页内容，名称为 tabs 中的 key
+
+## 事件（Events）
+
+### 通用事件
+
+- `@back` - 点击返回按钮时触发
+
+### TabLayout 事件
+
+- `@change(key)` - 标签页切换时触发
+
+### FormLayout 事件
+
+- `@submit` - 点击提交按钮时触发
+- `@cancel` - 点击取消按钮时触发
+
+## 最佳实践
+
+1. **选择合适的布局**
+   - 简单内容 → BasicLayout
+   - 需要卡片容器 → CardLayout
+   - 多标签内容 → TabLayout
+   - 宽屏内容 → FullWidthLayout
+   - 表单页面 → FormLayout
+
+2. **保持一致性**
+   - 使用统一的设计令牌
+   - 遵循项目的设计规范
+   - 保持交互行为一致
+
+3. **性能优化**
+   - 设置合适的 `forceRender` 属性
+   - 使用 `keep-alive` 缓存组件
+   - 避免不必要的重渲染
+
+4. **可访问性**
+   - 为所有交互元素添加适当的标签
+   - 确保键盘导航正常工作
+   - 提供适当的焦点管理
diff --git a/frontend/app/web-gold/src/layouts/components/BasicLayout.vue b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
new file mode 100644
index 0000000000..0589564f6c
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/components/BasicLayout.vue
@@ -0,0 +1,125 @@
+<script setup>
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'BasicLayout' })
+
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  extra: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Emits
+const emit = defineEmits(['back'])
+
+// Methods
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="basic-layout">
+    <!-- 页面头部 -->
+    <div class="basic-layout__header">
+      <div class="header-left">
+        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+        </a-button>
+        <h1 v-if="title" class="header-title">{{ title }}</h1>
+      </div>
+      <div class="header-right">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <!-- 页面内容 -->
+    <div class="basic-layout__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.basic-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.basic-layout__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.back-btn {
+  padding: var(--space-xs);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 16px;
+  line-height: 1;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.basic-layout__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background: var(--bg-primary);
+  padding: var(--space-md);
+}
+</style>
diff --git a/frontend/app/web-gold/src/layouts/components/CardLayout.vue b/frontend/app/web-gold/src/layouts/components/CardLayout.vue
new file mode 100644
index 0000000000..8845e8a428
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/components/CardLayout.vue
@@ -0,0 +1,155 @@
+<script setup>
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'CardLayout' })
+
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  showPadding: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Emits
+const emit = defineEmits(['back'])
+
+// Methods
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="card-layout">
+    <!-- 页面头部 -->
+    <div class="card-layout__header">
+      <div class="header-left">
+        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+        </a-button>
+        <h1 v-if="title" class="header-title">{{ title }}</h1>
+      </div>
+      <div class="header-right">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <!-- 卡片内容 -->
+    <div class="card-layout__card" :class="{ 'no-padding': !showPadding }">
+      <div v-if="!$slots.title && title" class="card-header">
+        {{ title }}
+      </div>
+      <slot v-else name="title"></slot>
+
+      <div class="card-layout__content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.card-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.card-layout__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.back-btn {
+  padding: var(--space-xs);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 16px;
+  line-height: 1;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.card-layout__card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+
+  &.no-padding {
+    .card-layout__content {
+      padding: 0;
+    }
+  }
+}
+
+.card-header {
+  padding: var(--space-md) var(--space-lg);
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-light);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.card-layout__content {
+  flex: 1;
+  padding: var(--space-md);
+  overflow: auto;
+  background: var(--bg-primary);
+}
+</style>
diff --git a/frontend/app/web-gold/src/layouts/components/FormLayout.vue b/frontend/app/web-gold/src/layouts/components/FormLayout.vue
new file mode 100644
index 0000000000..81ff17c468
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/components/FormLayout.vue
@@ -0,0 +1,194 @@
+<script setup>
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'FormLayout' })
+
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  submitText: {
+    type: String,
+    default: '提交'
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  showCancel: {
+    type: Boolean,
+    default: true
+  },
+  submitLoading: {
+    type: Boolean,
+    default: false
+  },
+  showFooter: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Emits
+const emit = defineEmits(['submit', 'cancel', 'back'])
+
+// Methods
+const handleSubmit = () => {
+  emit('submit')
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="form-layout">
+    <!-- 页面头部 -->
+    <div class="form-layout__header">
+      <div class="header-left">
+        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+        </a-button>
+        <h1 v-if="title" class="header-title">{{ title }}</h1>
+      </div>
+      <div class="header-right">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <!-- 表单内容 -->
+    <div class="form-layout__content">
+      <div class="form-container">
+        <slot></slot>
+      </div>
+    </div>
+
+    <!-- 底部操作栏 -->
+    <div v-if="showFooter" class="form-layout__footer">
+      <div class="footer-content">
+        <a-space :size="12">
+          <a-button v-if="showCancel" @click="handleCancel">
+            {{ cancelText }}
+          </a-button>
+          <a-button
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            {{ submitText }}
+          </a-button>
+        </a-space>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.form-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+}
+
+.form-layout__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.back-btn {
+  padding: var(--space-xs);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 16px;
+  line-height: 1;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.form-layout__content {
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-md);
+  background: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.form-container {
+  width: 100%;
+  max-width: 600px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  padding: var(--space-2xl);
+}
+
+.form-layout__footer {
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.footer-content {
+  max-width: 600px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue b/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
new file mode 100644
index 0000000000..21cfb71813
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'FullWidthLayout' })
+
+// Props
+const props = defineProps({
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  showPadding: {
+    type: Boolean,
+    default: true
+  }
+})
+
+// Emits
+const emit = defineEmits(['back'])
+
+// Methods
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="full-width-layout">
+    <!-- 页面头部 -->
+    <div v-if="$slots.header || showBack" class="full-width-layout__header">
+      <div class="header-left">
+        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+        </a-button>
+        <div class="header-content">
+          <slot name="header"></slot>
+        </div>
+      </div>
+      <div class="header-right">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <!-- 全宽内容 -->
+    <div
+      class="full-width-layout__content"
+      :class="{ 'no-padding': !showPadding }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.full-width-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+
+.full-width-layout__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.back-btn {
+  padding: var(--space-xs);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 16px;
+  line-height: 1;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+}
+
+.header-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.full-width-layout__content {
+  flex: 1;
+  overflow: auto;
+  background: var(--bg-secondary);
+
+  &.no-padding {
+    padding: 0;
+  }
+}
+</style>
diff --git a/frontend/app/web-gold/src/layouts/components/TabLayout.vue b/frontend/app/web-gold/src/layouts/components/TabLayout.vue
new file mode 100644
index 0000000000..877d928e51
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/components/TabLayout.vue
@@ -0,0 +1,182 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'TabLayout' })
+
+// Props
+const props = defineProps({
+  tabs: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  activeKey: {
+    type: String,
+    default: ''
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:activeKey', 'change', 'back'])
+
+// State
+const activeTabKey = ref(props.activeKey)
+
+// Watch for external changes
+watch(() => props.activeKey, (newKey) => {
+  if (newKey !== activeTabKey.value) {
+    activeTabKey.value = newKey
+  }
+})
+
+// Methods
+const handleTabChange = (key) => {
+  activeTabKey.value = key
+  emit('update:activeKey', key)
+  emit('change', key)
+}
+
+const handleBack = () => {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="tab-layout">
+    <!-- 页面头部 -->
+    <div v-if="$slots.header || showBack" class="tab-layout__header">
+      <div class="header-left">
+        <a-button v-if="showBack" type="text" @click="handleBack" class="back-btn">
+          <template #icon>
+            <ArrowLeftOutlined />
+          </template>
+        </a-button>
+        <div class="header-content">
+          <slot name="header"></slot>
+        </div>
+      </div>
+      <div class="header-right">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <!-- 标签页导航 -->
+    <div class="tab-nav">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="tab-item"
+        :class="{ 'active': activeTabKey === tab.key }"
+        @click="handleTabChange(tab.key)"
+      >
+        {{ tab.tab }}
+      </button>
+    </div>
+
+    <!-- 标签页内容 -->
+    <div class="tab-content">
+      <slot :name="activeTabKey"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.tab-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.tab-layout__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-primary);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex: 1;
+  min-width: 0;
+}
+
+.back-btn {
+  padding: var(--space-xs);
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 16px;
+  line-height: 1;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+}
+
+.header-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.tab-nav {
+  display: flex;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+}
+
+.tab-item {
+  padding: var(--space-sm) var(--space-lg);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+  }
+
+  &.active {
+    color: var(--text-primary);
+    border-bottom-color: var(--text-primary);
+    background: var(--bg-primary);
+  }
+}
+
+.tab-content {
+  flex: 1;
+  overflow: auto;
+  background: var(--bg-primary);
+  padding: var(--space-md);
+}
+</style>
diff --git a/frontend/app/web-gold/src/layouts/components/index.js b/frontend/app/web-gold/src/layouts/components/index.js
new file mode 100644
index 0000000000..627b51137b
--- /dev/null
+++ b/frontend/app/web-gold/src/layouts/components/index.js
@@ -0,0 +1,6 @@
+// 布局组件统一导出
+export { default as BasicLayout } from './BasicLayout.vue'
+export { default as CardLayout } from './CardLayout.vue'
+export { default as TabLayout } from './TabLayout.vue'
+export { default as FullWidthLayout } from './FullWidthLayout.vue'
+export { default as FormLayout } from './FormLayout.vue'
diff --git a/frontend/app/web-gold/src/style.less b/frontend/app/web-gold/src/style.less
index 6dd30fa1eb..679d5a60af 100644
--- a/frontend/app/web-gold/src/style.less
+++ b/frontend/app/web-gold/src/style.less
@@ -48,7 +48,7 @@
   --color-gray-400: #9ca3af;
   --color-gray-700: #374151;
 
-  /* 主题设计令牌 */
+  /* 主题设计令牌 - 现代化风格 */
   --color-bg: var(--color-slate-50);
   --color-surface: #ffffff;
   --color-header: var(--color-slate-900);
@@ -61,6 +61,24 @@
   --color-primary: var(--color-blue-500);
   --color-primary-hover: var(--color-blue-600);
 
+  /* 新增：现代化的功能色 */
+  --color-success: #10b981;
+  --color-success-bg: #ecfdf5;
+  --color-warning: #f59e0b;
+  --color-warning-bg: #fffbeb;
+  --color-error: #ef4444;
+  --color-error-bg: #fef2f2;
+
+  /* 新增：Ant Design Vue 主题覆盖 */
+  --ant-primary-color: var(--color-primary);
+  --ant-primary-color-hover: var(--color-primary-hover);
+  --ant-primary-color-active: var(--color-blue-700);
+  --ant-success-color: var(--color-success);
+  --ant-warning-color: var(--color-warning);
+  --ant-error-color: var(--color-error);
+  --ant-border-radius-base: var(--radius-button);
+  --ant-border-radius-sm: 4px;
+
   /* 尺寸系统 */
   --radius-card: 12px;
   --radius-button: 8px;
@@ -81,6 +99,41 @@
   --space-5: 20px;
   --space-6: 24px;
   --space-8: 32px;
+
+  /* ================================
+     Notion 风格设计变量
+     ================================ */
+  /* 极简配色 */
+  --bg-primary: #ffffff;
+  --bg-secondary: #fafafa;
+  --bg-hover: #f7f6f3;
+  --bg-selected: #e9e9e7;
+
+  /* 文字颜色 */
+  --text-primary: #37352f;
+  --text-secondary: #787774;
+  --text-tertiary: #9b9a97;
+  --text-quaternary: #c1c0bd;
+
+  /* 边框和分割线 */
+  --border-light: #e9e9e7;
+  --border-medium: #d3d3d1;
+  --border-strong: #c1c0bd;
+
+  /* 圆角 */
+  --radius-none: 0;
+  --radius-sm: 3px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+
+  /* 间距 */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --space-2xl: 48px;
+  --space-3xl: 64px;
 }
 
 /* ================================
diff --git a/frontend/app/web-gold/src/views/content-style/Benchmark.vue b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
index b7f3dc9925..3154be4241 100644
--- a/frontend/app/web-gold/src/views/content-style/Benchmark.vue
+++ b/frontend/app/web-gold/src/views/content-style/Benchmark.vue
@@ -23,7 +23,6 @@ const promptStore = usePromptStore()
 const {
   data,
   selectedRowKeys,
-  expandedRowKeys,
   saveTableDataToSession,
   loadTableDataFromSession,
   processApiResponse,
@@ -36,10 +35,9 @@ const {
   batchAnalyzeLoading,
   globalLoading,
   globalLoadingText,
-  analyzeVideo,
   batchAnalyze,
   getVoiceText,
-} = useBenchmarkAnalysis(data, expandedRowKeys, saveTableDataToSession)
+} = useBenchmarkAnalysis(data, saveTableDataToSession)
 
 // ==================== 表单状态 ====================
 const form = ref({
@@ -110,8 +108,8 @@ async function handleExportToExcel() {
     return
   }
 
-  if (selectedRowKeys.value.length > 10) {
-    message.warning('最多只能导出10条数据，请重新选择')
+  if (selectedRowKeys.value.length > 20) {
+    message.warning('最多只能导出20条数据，请重新选择')
     return
   }
 
@@ -189,26 +187,13 @@ async function handleResetForm() {
   await clearData()
 }
 
-// ==================== 提示词操作函数 ====================
-function handleCopyPrompt(row) {
-  if (!row.prompt) {
-    message.warning('没有提示词可复制')
-    return
-  }
-  
-  navigator.clipboard.writeText(row.prompt).then(() => {
-    message.success('提示词已复制到剪贴板')
-  }).catch(() => {
-    message.error('复制失败')
-  })
-}
-
+// ==================== 批量提示词操作函数 ====================
 function handleCopyBatchPrompt(prompt) {
   if (!prompt || !prompt.trim()) {
     message.warning('没有提示词可复制')
     return
   }
-  
+
   navigator.clipboard.writeText(prompt).then(() => {
     message.success('提示词已复制到剪贴板')
   }).catch(() => {
@@ -216,40 +201,25 @@ function handleCopyBatchPrompt(prompt) {
   })
 }
 
-// ==================== 创作相关函数 ====================
-function handleCreateContent(row) {
-  promptStore.setPrompt(row.prompt, row)
-  router.push('/content-style/copywriting')
-}
-
 function handleUseBatchPrompt(prompt) {
   if (!prompt || !prompt.trim()) {
     message.warning('暂无批量生成的提示词')
     return
   }
-  
+
   promptStore.setPrompt(prompt, { batch: true })
   router.push('/content-style/copywriting')
 }
 
 // ==================== 保存提示词到服务器 ====================
-function handleOpenSavePromptModal(row, batchPrompt = null) {
-  if (row) {
-    // 单个视频的提示词
-    if (!row.prompt || !row.prompt.trim()) {
-      message.warning('没有提示词可保存')
-      return
-    }
-    savePromptContent.value = row.prompt
-  } else {
-    // 批量提示词：使用传入的 batchPrompt（AI 生成的内容），而不是原始的 mergedText
-    const promptToSave = batchPrompt || batchPromptMergedText.value
-    if (!promptToSave || !promptToSave.trim()) {
-      message.warning('没有提示词可保存')
-      return
-    }
-    savePromptContent.value = promptToSave
+function handleOpenSavePromptModal(batchPrompt = null) {
+  // 批量提示词：使用传入的 batchPrompt（AI 生成的内容），而不是原始的 mergedText
+  const promptToSave = batchPrompt || batchPromptMergedText.value
+  if (!promptToSave || !promptToSave.trim()) {
+    message.warning('没有提示词可保存')
+    return
   }
+  savePromptContent.value = promptToSave
   savePromptModalVisible.value = true
 }
 
@@ -277,14 +247,9 @@ defineOptions({ name: 'ContentStyleBenchmark' })
         <BenchmarkTable
           :data="data"
           v-model:selectedRowKeys="selectedRowKeys"
-          v-model:expandedRowKeys="expandedRowKeys"
           :loading="loading"
-          @analyze="analyzeVideo"
           @export="handleExportToExcel"
           @batch-analyze="handleBatchAnalyze"
-          @copy="handleCopyPrompt"
-          @save-to-server="handleOpenSavePromptModal"
-          @create-content="handleCreateContent"
         />
 
         <!-- 空态显示 -->
@@ -312,7 +277,7 @@ defineOptions({ name: 'ContentStyleBenchmark' })
       :merged-text="batchPromptMergedText"
       :text-count="batchPromptTextCount"
       @copy="handleCopyBatchPrompt"
-      @save="(prompt) => handleOpenSavePromptModal(null, prompt)"
+      @save="(prompt) => handleOpenSavePromptModal(prompt)"
       @use="handleUseBatchPrompt"
     />
     
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 eb39c2666e..4e7fe094d3 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
@@ -1,8 +1,6 @@
 <script setup>
 import { reactive, h } from 'vue'
-import { DownloadOutlined } from '@ant-design/icons-vue'
 import { formatTime } from '../utils/benchmarkUtils'
-import ExpandedRowContent from './ExpandedRowContent.vue'
 import GradientButton from '@/components/GradientButton.vue'
 
  defineProps({
@@ -14,10 +12,6 @@ import GradientButton from '@/components/GradientButton.vue'
     type: Array,
     required: true,
   },
-  expandedRowKeys: {
-    type: Array,
-    required: true,
-  },
   loading: {
     type: Boolean,
     default: false,
@@ -26,34 +20,28 @@ import GradientButton from '@/components/GradientButton.vue'
 
 const emit = defineEmits([
   'update:selectedRowKeys',
-  'update:expandedRowKeys',
-  'analyze',
   'export',
   'batchAnalyze',
-  'copy',
-  'saveToServer',
-  'createContent',
 ])
 
 const defaultColumns = [
   { title: '封面', key: 'cover', dataIndex: 'cover', width: 120, resizable: true },
   { title: '描述', key: 'desc', dataIndex: 'desc', width: 280, resizable: true, ellipsis: true },
-  { title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true, 
+  { title: '点赞', key: 'digg_count', dataIndex: 'digg_count', width: 90, resizable: true,
     sorter: (a, b) => (a.digg_count || 0) - (b.digg_count || 0), defaultSortOrder: 'descend' },
-  { title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true, 
+  { title: '评论', key: 'comment_count', dataIndex: 'comment_count', width: 90, resizable: true,
     sorter: (a, b) => (a.comment_count || 0) - (b.comment_count || 0) },
-  { title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true, 
+  { title: '分享', key: 'share_count', dataIndex: 'share_count', width: 90, resizable: true,
     sorter: (a, b) => (a.share_count || 0) - (b.share_count || 0) },
-  { title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true, 
+  { title: '收藏', key: 'collect_count', dataIndex: 'collect_count', width: 90, resizable: true,
     sorter: (a, b) => (a.collect_count || 0) - (b.collect_count || 0) },
-  { title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true, 
+  { title: '时长(s)', key: 'duration_s', dataIndex: 'duration_s', width: 90, resizable: true,
     sorter: (a, b) => (a.duration_s || 0) - (b.duration_s || 0) },
   { title: '置顶', key: 'is_top', dataIndex: 'is_top', width: 70, resizable: true },
-  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true, 
+  { title: '创建时间', key: 'create_time', dataIndex: 'create_time', width: 160, resizable: true,
     sorter: (a, b) => (a.create_time || 0) - (b.create_time || 0) },
   { title: '链接', key: 'share_url', dataIndex: 'share_url', width: 80, resizable: true,
     customRender: ({ record }) => record.share_url ? h('a', { href: record.share_url, target: '_blank' }, '打开') : null },
-  { title: '操作', key: 'action', width: 100, resizable: true, fixed: 'right' },
 ]
 
 const columns = reactive([...defaultColumns])
@@ -61,57 +49,36 @@ const columns = reactive([...defaultColumns])
 function onSelectChange(selectedKeys) {
   emit('update:selectedRowKeys', selectedKeys)
 }
-
-function onExpandedRowKeysChange(keys) {
-  emit('update:expandedRowKeys', keys)
-}
 </script>
 
 <template>
   <section class="card results-card" v-if="data.length > 0">
     <div class="section-header">
       <div class="section-title">分析结果</div>
-      <a-space align="center">
-        <a-button 
-          size="small" 
-          type="default" 
-          @click="$emit('export')"
-          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 10">
-          <template #icon>
-            <DownloadOutlined />
-          </template>
-          导出Excel ({{ selectedRowKeys.length }}/10)
-        </a-button>
+      <div class="button-group">
         <GradientButton
-          :text="`批量分析 (${selectedRowKeys.length})`"
+          :text="`导出Excel (${selectedRowKeys.length}/20)`"
+          size="small"
+          @click="$emit('export')"
+          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
+          icon="download"
+        />
+        <GradientButton
+          :text="`批量分析 (${selectedRowKeys.length}/20)`"
           size="small"
           @click="$emit('batchAnalyze')"
-          :disabled="selectedRowKeys.length === 0"
+          :disabled="data.length === 0 || selectedRowKeys.length === 0 || selectedRowKeys.length > 20"
         />
-      </a-space>
+      </div>
     </div>
-    <a-table 
-      :dataSource="data" 
-      :columns="columns" 
-      :pagination="false" 
-      :row-selection="{ selectedRowKeys, onChange: onSelectChange, hideSelectAll: true }"
-      :expandedRowKeys="expandedRowKeys"
-      @expandedRowsChange="onExpandedRowKeysChange"
-      :expandable="{ 
-        expandRowByClick: false
-      }"
+    <a-table
+      :dataSource="data"
+      :columns="columns"
+      :pagination="false"
+      :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
       :rowKey="(record) => String(record.id)"
       :loading="loading"
       class="benchmark-table">
-      <template #expandedRowRender="{ record }">
-        <ExpandedRowContent
-          :record="record"
-          @analyze="(row) => $emit('analyze', row)"
-          @copy="(row) => $emit('copy', row)"
-          @save-to-server="(row) => $emit('saveToServer', row)"
-          @create-content="(row) => $emit('createContent', row)"
-        />
-      </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'cover'">
           <img v-if="record.cover" :src="record.cover" alt="cover" loading="lazy"
@@ -147,18 +114,6 @@ function onExpandedRowKeysChange(keys) {
           <a v-if="record.share_url" :href="record.share_url" target="_blank" class="link-btn">打开</a>
           <span v-else>-</span>
         </template>
-        <template v-else-if="column.key === 'action'">
-          <a-space>
-            <GradientButton
-              text="分析"
-              size="small"
-              :loading="record._analyzing"
-              loading-text="分析中…"
-              :disabled="record._analyzing"
-              @click="$emit('analyze', record)"
-            />
-          </a-space>
-        </template>
       </template>
     </a-table>
   </section>
@@ -184,15 +139,10 @@ function onExpandedRowKeysChange(keys) {
   margin-bottom: 12px;
 }
 
-.section-header .ant-space {
+.button-group {
   display: flex;
   align-items: center;
-}
-
-.section-header .ant-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  gap: 12px;
 }
 
 .section-title {
diff --git a/frontend/app/web-gold/src/views/dh/VoiceCopy.vue b/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
index 99728bb827..2e7fb472d8 100644
--- a/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
+++ b/frontend/app/web-gold/src/views/dh/VoiceCopy.vue
@@ -1,17 +1,15 @@
 <template>
-  <div class="voice-copy-page">
-    <!-- 页面头部 -->
-    <div class="page-header">
-      <h1>配音管理</h1>
-      <a-button type="primary" @click="handleCreate">
-        <PlusOutlined />
-        新建配音
-      </a-button>
-    </div>
-
+  <BasicLayout
+    title="配音管理"
+    :show-back="false"
+  >
     <!-- 搜索栏 -->
     <div class="search-bar">
       <a-space>
+        <a-button type="primary" @click="handleCreate">
+          <PlusOutlined />
+          新建配音
+        </a-button>
         <a-input
           v-model:value="searchParams.name"
           placeholder="搜索配音名称"
@@ -20,7 +18,7 @@
         >
           <SearchOutlined />
         </a-input>
-        <a-button type="primary" @click="handleSearch">查询</a-button>
+        <a-button @click="handleSearch">查询</a-button>
         <a-button @click="handleReset">重置</a-button>
       </a-space>
     </div>
@@ -101,7 +99,7 @@
     </a-modal>
 
     <audio ref="audioPlayer" style="display: none" />
-  </div>
+  </BasicLayout>
 </template>
 
 <script setup>
@@ -112,6 +110,7 @@ import { VoiceService } from '@/api/voice'
 import { MaterialService } from '@/api/material'
 import { useUpload } from '@/composables/useUpload'
 import dayjs from 'dayjs'
+import BasicLayout from '@/layouts/components/BasicLayout.vue'
 
 // ========== 常量 ==========
 const DEFAULT_FORM_DATA = {
@@ -411,38 +410,17 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.voice-copy-page {
-  padding: 24px;
-  background: var(--color-bg);
+.search-bar {
+  background: var(--color-surface);
+  border-radius: var(--radius-card);
+  margin-bottom: 16px;
 }
 
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.page-header .ant-btn {
-  display: inline-flex;
-  align-items: center;
-}
-
-.search-bar,
 .table-container {
   background: var(--color-surface);
   border-radius: var(--radius-card);
 }
 
-.search-bar {
-  margin-bottom: 16px;
-  padding: 16px;
-}
-
-.table-container {
-  padding: 16px;
-}
-
 .voice-name {
   font-weight: 500;
   color: var(--color-text);
diff --git a/frontend/app/web-gold/src/views/material/MaterialList.vue b/frontend/app/web-gold/src/views/material/MaterialList.vue
deleted file mode 100644
index a0f488b1b2..0000000000
--- a/frontend/app/web-gold/src/views/material/MaterialList.vue
+++ /dev/null
@@ -1,848 +0,0 @@
-<template>
-  <div class="material-list">
-    <div class="material-list__header">
-      <h1 class="material-list__title">素材列表</h1>
-      <div class="material-list__actions">
-        <a-button type="primary" @click="handleOpenUploadModal">
-          <template #icon>
-            <UploadOutlined />
-          </template>
-          上传素材
-        </a-button>
-        <a-button
-          v-if="selectedFileIds.length > 0"
-          type="primary"
-          ghost
-          @click="handleOpenGroupModal"
-        >
-          批量分组 ({{ selectedFileIds.length }})
-        </a-button>
-        <a-button
-          type="primary"
-          ghost
-          @click="$router.push('/material/mix')"
-        >
-          素材混剪
-        </a-button>
-        <a-button
-          v-if="selectedFileIds.length > 0"
-          type="primary"
-          status="danger"
-          @click="handleBatchDelete"
-        >
-          批量删除 ({{ selectedFileIds.length }})
-        </a-button>
-      </div>
-    </div>
-
-    <!-- 筛选条件 -->
-    <div class="material-list__filters">
-      <a-space>
-        <a-select
-          v-model:value="filters.fileCategory"
-          style="width: 120px"
-          placeholder="文件分类"
-          @change="handleFilterChange"
-        >
-          <a-select-option value="">全部分类</a-select-option>
-          <a-select-option value="video">视频</a-select-option>
-          <a-select-option value="generate">生成</a-select-option>
-          <a-select-option value="audio">音频</a-select-option>
-          <a-select-option value="mix">混剪</a-select-option>
-          <a-select-option value="voice">配音</a-select-option>
-        </a-select>
-
-        <a-input
-          v-model="filters.fileName"
-          placeholder="搜索文件名"
-          style="width: 200px"
-          allow-clear
-          @press-enter="handleFilterChange"
-        >
-          <template #prefix>
-            <SearchOutlined />
-          </template>
-        </a-input>
-        <a-range-picker
-          v-model:value="filters.createTime"
-          style="width: 300px"
-          format="YYYY-MM-DD"
-          value-format="YYYY-MM-DD"
-          :placeholder="['开始日期', '结束日期']"
-          @change="handleFilterChange"
-        />
-        <a-button type="primary" @click="handleFilterChange">查询</a-button>
-        <a-button @click="handleResetFilters">重置</a-button>
-      </a-space>
-    </div>
-
-    <!-- 文件列表 -->
-    <div class="material-list__content">
-      <a-spin :spinning="loading" tip="加载中..." style="width: 100%; min-height: 400px;">
-        <template v-if="fileList.length > 0">
-          <div class="material-grid">
-            <div
-              v-for="file in fileList"
-              :key="file.id"
-              class="material-item"
-              :class="{ 'material-item--selected': selectedFileIds.includes(file.id) }"
-              @click="handleFileClick(file)"
-            >
-              <div class="material-item__content">
-              <!-- 预览图 -->
-              <div class="material-item__preview">
-                <!-- 视频文件：只使用 coverBase64（本地缓存），不使用任何OSS URL -->
-                <img
-                  v-if="file.isVideo && file.coverBase64"
-                  :src="file.coverBase64"
-                  :alt="file.fileName"
-                  @error="handleImageError"
-                />
-                <!-- 视频文件：如果没有封面，显示占位符（不使用视频标签） -->
-                <div v-else-if="file.isVideo" class="material-item__placeholder">
-                  <FileOutlined />
-                </div>
-                <!-- 图片或其他文件：使用图片标签 -->
-                <img
-                  v-else-if="!file.isVideo && (file.coverUrl || file.coverBase64 || file.previewUrl)"
-                  :src="file.coverUrl || file.coverBase64 || file.previewUrl"
-                  :alt="file.fileName"
-                  @error="handleImageError"
-                />
-                <div v-else class="material-item__placeholder">
-                  <FileOutlined />
-                </div>
-                <!-- 文件类型标识 -->
-                <div class="material-item__badge">
-                  <a-tag v-if="file.isVideo" color="red">视频</a-tag>
-                  <a-tag v-else-if="file.isImage" color="blue">图片</a-tag>
-                  <a-tag v-else color="gray">文件</a-tag>
-                </div>
-                <!-- 分组图标（仅视频文件显示） -->
-                <div v-if="file.isVideo" class="material-item__group" @click.stop="handleSingleGroup(file)">
-                  <TagsOutlined />
-                </div>
-                <!-- 下载图标 -->
-                <div class="material-item__download" @click.stop="handleDownloadFile(file)">
-                  <DownloadOutlined />
-                </div>
-                <!-- 删除图标 -->
-                <div class="material-item__delete" @click.stop="handleDeleteFile(file)">
-                  <DeleteOutlined />
-                </div>
-              </div>
-              <!-- 文件信息 -->
-              <div class="material-item__info">
-                <div class="material-item__name" :title="file.fileName">
-                  {{ file.fileName }}
-                </div>
-                <div class="material-item__meta">
-                  <span>{{ formatFileSize(file.fileSize) }}</span>
-                  <span>{{ formatDate(file.createTime) }}</span>
-                  <span v-if="file.groupId" class="material-item__group-name">
-                    <TagsOutlined /> {{ getGroupName(file.groupId) }}
-                  </span>
-                </div>
-              </div>
-              </div>
-            </div>
-          </div>
-        </template>
-        <template v-else>
-          <a-empty description="暂无素材" />
-        </template>
-      </a-spin>
-    </div>
-
-    <!-- 分页 -->
-    <div class="material-list__pagination">
-      <a-pagination
-        v-model:current="pagination.pageNo"
-        v-model:page-size="pagination.pageSize"
-        :total="pagination.total"
-        :show-total="(total) => `共 ${total} 条`"
-        :show-size-changer="true"
-        @change="handlePageChange"
-      />
-    </div>
-
-    <!-- 上传对话框 -->
-    <MaterialUploadModal
-      v-model:visible="uploadModalVisible"
-      :uploading="uploading"
-      :file-category="filters.fileCategory"
-      @confirm="handleConfirmUpload"
-      @cancel="handleUploadCancel"
-    />
-
-    <!-- 批量分组模态框 -->
-    <MaterialBatchGroupModal
-      v-model:open="groupModalVisible"
-      :group-list="groupList"
-      :file-count="selectedFileIds.length"
-      :file-name="groupingFileName"
-      @confirm="handleBatchGroup"
-      @cancel="handleGroupCancel"
-    />
-
-    <!-- 素材混剪模态框 -->
-    <MaterialMixModal
-      ref="mixModalRef"
-      v-model:open="mixModalVisible"
-      :loading="mixing"
-      :group-list="groupList"
-      :all-audio-files="allAudioFiles"
-      @confirm="handleMixConfirm"
-      @cancel="handleMixCancel"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, computed } from 'vue'
-import { message, Modal } from 'ant-design-vue'
-import {
-  UploadOutlined,
-  SearchOutlined,
-  FileOutlined,
-  DeleteOutlined,
-  TagsOutlined,
-  DownloadOutlined
-} from '@ant-design/icons-vue'
-import { MaterialService, MaterialGroupService } from '@/api/material'
-import MaterialUploadModal from '@/components/material/MaterialUploadModal.vue'
-import MaterialBatchGroupModal from '@/components/material/MaterialBatchGroupModal.vue'
-import MaterialMixModal from '@/components/material/MaterialMixModal.vue'
-import { formatFileSize, formatDate } from '@/utils/file'
-import { MixTaskService } from '@/api/mixTask'
-
-// 数据
-const loading = ref(false)
-const fileList = ref([])
-const selectedFileIds = ref([])
-const uploadModalVisible = ref(false)
-const uploading = ref(false)
-const mixModalVisible = ref(false)
-const mixing = ref(false)
-
-// 分组相关
-const groupModalVisible = ref(false)
-const groupList = ref([])
-const groupingFileId = ref(null) // 当前正在分组的单个文件ID
-
-// 获取单个文件分组的文件名
-const groupingFileName = computed(() => {
-  if (!groupingFileId.value) return ''
-  const file = fileList.value.find(f => f.id === groupingFileId.value)
-  return file?.fileName || ''
-})
-
-// 获取分组名称（根据groupId）
-const getGroupName = (groupId) => {
-  if (!groupId) return ''
-  const group = groupList.value.find(g => g.id === groupId)
-  return group?.name || ''
-}
-
-// 混剪相关
-const mixModalRef = ref(null) // 混剪模态框的 ref
-
-// 筛选条件
-const filters = reactive({
-  fileCategory: 'video', // 默认分类为视频
-  fileName: '',
-  createTime: undefined
-})
-
-// 分页
-const pagination = reactive({
-  pageNo: 1,
-  pageSize: 20,
-  total: 0
-})
-
-// 构建查询参数
-const buildQueryParams = () => {
-  const params = {
-    pageNo: pagination.pageNo,
-    pageSize: pagination.pageSize,
-    fileCategory: filters.fileCategory || undefined,
-    fileName: filters.fileName || undefined
-  }
-
-  // 处理日期范围
-  if (filters.createTime && Array.isArray(filters.createTime) && filters.createTime.length === 2) {
-    params.createTime = [
-      `${filters.createTime[0]} 00:00:00`,
-      `${filters.createTime[1]} 23:59:59`
-    ]
-  }
-
-  return params
-}
-
-// 加载文件列表
-const loadFileList = async () => {
-  loading.value = true
-  try {
-    const res = await MaterialService.getFilePage(buildQueryParams())
-    if (res.code === 0) {
-      const files = res.data.list || []
-
-      fileList.value = files
-      pagination.total = res.data.total || 0
-    } else {
-      message.error(res.msg || '加载失败')
-    }
-  } catch (error) {
-    console.error('加载文件列表失败:', error)
-    message.error('加载失败，请重试')
-  } finally {
-    loading.value = false
-  }
-}
-
-// 打开上传对话框
-const handleOpenUploadModal = () => {
-  uploadModalVisible.value = true
-}
-
-// 确认上传
-const handleConfirmUpload = async (filesWithCover, fileCategory) => {
-  if (!filesWithCover?.length) {
-    message.warning('请选择文件')
-    return
-  }
-
-  uploading.value = true
-  const uploadCategory = fileCategory || 'video'
-
-  try {
-    const results = await Promise.allSettled(
-      filesWithCover.map(({ file, coverBase64 }) =>
-        MaterialService.uploadFile(file, uploadCategory, coverBase64)
-      )
-    )
-
-    const successCount = results.filter(r => r.status === 'fulfilled').length
-    const failCount = results.length - successCount
-
-    if (successCount > 0) {
-      message.success(`成功上传 ${successCount} 个文件${failCount ? `，${failCount} 个失败` : ''}`)
-      uploadModalVisible.value = false
-      loadFileList()
-    } else {
-      message.error('所有文件上传失败，请重试')
-    }
-  } catch (error) {
-    console.error('上传失败:', error)
-    message.error(error.message || '上传失败，请重试')
-  } finally {
-    uploading.value = false
-  }
-}
-
-// 取消上传
-const handleUploadCancel = () => {
-  uploadModalVisible.value = false
-}
-
-// 删除文件
-const handleBatchDelete = () => {
-  if (selectedFileIds.value.length === 0) return
-
-  // 二次确认弹窗
-  Modal.confirm({
-    title: '确认删除',
-    content: `确定要删除选中的 ${selectedFileIds.value.length} 个文件吗？删除后无法恢复。`,
-    okText: '确定删除',
-    cancelText: '取消',
-    okType: 'danger',
-    onOk: async () => {
-      try {
-        await MaterialService.deleteFiles(selectedFileIds.value)
-        message.success('删除成功')
-
-        selectedFileIds.value = []
-        loadFileList()
-      } catch (error) {
-        console.error('删除失败:', error)
-        message.error(error.message || '删除失败，请重试')
-      }
-    }
-  })
-}
-
-// 删除单个文件
-const handleDeleteFile = (file) => {
-  if (!file?.id) return
-
-  Modal.confirm({
-    title: '确认删除',
-    content: `确定要删除文件 "${file.fileName}" 吗？删除后无法恢复。`,
-    okText: '确定删除',
-    cancelText: '取消',
-    okType: 'danger',
-    onOk: async () => {
-      try {
-        await MaterialService.deleteFiles([file.id])
-        message.success('删除成功')
-        const index = selectedFileIds.value.indexOf(file.id)
-        if (index > -1) {
-          selectedFileIds.value.splice(index, 1)
-        }
-        loadFileList()
-      } catch (error) {
-        console.error('删除失败:', error)
-        message.error(error.message || '删除失败，请重试')
-      }
-    }
-  })
-}
-
-// 下载文件
-const handleDownloadFile = (file) => {
-  console.log('下载文件:', file)
-  if (!file?.previewUrl) {
-    message.warning('文件地址无效')
-    return
-  }
-
-  const fileUrl =  file.previewUrl
-  const link = document.createElement('a')
-  link.href = fileUrl
-  link.download = file.fileName || 'download'
-  link.target = '_blank'
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-  message.success('开始下载')
-}
-
-// 文件点击
-const handleFileClick = (file) => {
-  const index = selectedFileIds.value.indexOf(file.id)
-  if (index > -1) {
-    selectedFileIds.value.splice(index, 1)
-  } else {
-    selectedFileIds.value.push(file.id)
-  }
-}
-
-// 筛选
-const handleFilterChange = () => {
-  pagination.pageNo = 1
-  loadFileList()
-}
-
-const handleResetFilters = () => {
-  filters.fileCategory = 'video'
-  filters.fileName = ''
-  filters.createTime = undefined
-  pagination.pageNo = 1
-  loadFileList()
-}
-
-// 分页
-const handlePageChange = (page, pageSize) => {
-  pagination.pageNo = page
-  if (pageSize && pageSize !== pagination.pageSize) {
-    pagination.pageSize = pageSize
-    pagination.pageNo = 1
-  }
-  loadFileList()
-}
-
-// 图片加载错误处理（简化版，不使用coverUrl）
-const handleImageError = (e) => {
-  const img = e.target
-  const currentSrc = img.src
-
-  // 找到对应的文件对象
-  const file = fileList.value.find(f =>
-    f.coverBase64 === currentSrc ||
-    f.previewUrl === currentSrc
-  )
-
-  if (file && !file.isVideo) {
-    // 非视频文件：尝试其他图片源（不使用coverUrl）
-    if (file.coverBase64 && file.coverBase64 !== currentSrc && file.coverBase64.startsWith('data:image')) {
-      img.src = file.coverBase64
-      return
-    }
-    if (file.previewUrl && file.previewUrl !== currentSrc) {
-      img.src = file.previewUrl
-      return
-    }
-  }
-
-  // 如果所有图片源都失败，隐藏图片
-  img.style.display = 'none'
-}
-
-const handleOpenMixModal = async () => {
-  // 重置混剪表单（调用子组件方法）
-  mixModalRef.value?.resetForm()
-
-  // 加载分组列表
-  await loadGroupList()
-
-  mixModalVisible.value = true
-}
-
-const handleMixCancel = () => {
-  mixModalVisible.value = false
-}
-
-const handleMixConfirm = async (params) => {
-  mixing.value = true
-  try {
-    // 纯画面模式：仅传入 title 和 videoUrls
-    const { title, videoUrls } = params
-
-    const taskParams = {
-      title,
-      videoUrls,
-      produceCount: 1 // 固定生成1个
-    }
-
-    const { data } = await MixTaskService.createTask(taskParams)
-    if (data) {
-      message.success('混剪任务提交成功，正在处理中...')
-      mixModalVisible.value = false
-
-      // 跳转到任务列表页面
-      setTimeout(() => {
-        window.open('/material/mix-task', '_blank')
-      }, 1000)
-    }
-  } catch (error) {
-    console.error('混剪失败:', error)
-    message.error(error?.message || '混剪任务提交失败，请重试')
-  } finally {
-    mixing.value = false
-  }
-}
-
-// 初始化
-onMounted(() => {
-  loadFileList()
-  loadGroupList()
-})
-
-// 加载分组列表
-const loadGroupList = async () => {
-  try {
-    const res = await MaterialGroupService.getGroupList()
-    if (res.code === 0) {
-      groupList.value = res.data || []
-    } else {
-      console.error('[MaterialList] 分组列表加载失败:', res.msg)
-    }
-  } catch (error) {
-    console.error('[MaterialList] 加载分组列表失败:', error)
-    message.error('加载分组列表失败: ' + (error.message || error))
-  }
-}
-
-// 打开批量分组模态框
-const handleOpenGroupModal = () => {
-  if (selectedFileIds.value.length === 0) {
-    message.warning('请先选择要分组的文件')
-    return
-  }
-
-  // 检查选中的文件是否都是视频
-  const selectedFiles = fileList.value.filter(f => selectedFileIds.value.includes(f.id))
-  const nonVideoFiles = selectedFiles.filter(f => !f.isVideo)
-  if (nonVideoFiles.length > 0) {
-    message.warning('只能对视频文件进行分组')
-    return
-  }
-
-  groupingFileId.value = null // 清空单个文件分组标记
-  groupModalVisible.value = true
-}
-
-// 单个文件分组
-const handleSingleGroup = (file) => {
-  groupingFileId.value = file.id // 标记是单个文件分组
-  groupModalVisible.value = true
-}
-
-// 执行批量分组
-const handleBatchGroup = async (groupId) => {
-  if (!groupId) {
-    message.warning('请选择分组')
-    return
-  }
-
-  try {
-    let fileIds
-    let successMessage
-
-    if (groupingFileId.value) {
-      // 单个文件分组
-      fileIds = [groupingFileId.value]
-      successMessage = '文件分组成功'
-    } else {
-      // 批量分组
-      fileIds = selectedFileIds.value
-      successMessage = '批量分组成功'
-    }
-
-    await MaterialGroupService.addFilesToGroups({
-      fileIds: fileIds,
-      groupIds: [groupId]
-    })
-    message.success(successMessage)
-
-    // 重置状态
-    groupModalVisible.value = false
-    groupingFileId.value = null
-
-    // 如果是批量分组，清除选中状态
-    if (!groupingFileId.value) {
-      selectedFileIds.value = []
-    }
-
-    loadGroupList() // 刷新分组列表以更新文件计数
-  } catch (error) {
-    console.error('分组失败:', error)
-    message.error(error.message || '分组失败，请重试')
-  }
-}
-
-// 取消分组操作
-const handleGroupCancel = () => {
-  groupModalVisible.value = false
-  groupingFileId.value = null
-}
-</script>
-
-<style scoped>
-.material-list {
-  padding: 24px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.material-list__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.material-list__title {
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0;
-}
-
-.material-list__actions {
-  display: flex;
-  gap: 12px;
-}
-
-.material-list__filters {
-  margin-bottom: 24px;
-  padding: 16px;
-  background: var(--color-surface);
-  border-radius: var(--radius-card);
-  border: 1px solid var(--color-border);
-}
-
-.material-list__content {
-  flex: 1;
-  overflow-y: auto;
-  margin-bottom: 24px;
-  position: relative;
-}
-
-.material-list__content :deep(.arco-spin) {
-  min-height: 400px;
-}
-
-.material-list__content :deep(.arco-spin-content) {
-  min-height: 400px;
-}
-
-.material-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 16px;
-}
-
-.material-list__pagination {
-  display: flex;
-  justify-content: center;
-}
-
-.material-item {
-  cursor: pointer;
-}
-
-.material-item__content {
-  background: var(--color-surface);
-  border: 2px solid transparent;
-  border-radius: var(--radius-card);
-  overflow: hidden;
-  transition: border-color 0.2s;
-}
-
-.material-item--selected .material-item__content {
-  border-color: var(--color-primary);
-}
-
-.material-item__preview {
-  position: relative;
-  width: 100%;
-  padding-top: 56.25%; /* 16:9 */
-  background: var(--color-bg-2);
-  overflow: hidden;
-}
-
-.material-item__preview img,
-.material-item__preview video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.material-item__preview video {
-  pointer-events: none; /* 禁用视频交互，避免点击播放 */
-}
-
-.material-item__placeholder {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 48px;
-  color: var(--color-text-3);
-}
-
-.material-item__badge {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-}
-
-.material-item__delete {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  width: 28px;
-  height: 28px;
-  background: rgba(255, 77, 79, 0.9);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.3s;
-  font-size: 16px;
-}
-
-.material-item__group {
-  position: absolute;
-  bottom: 8px;
-  right: 76px; /* 在下载按钮左边 */
-  width: 28px;
-  height: 28px;
-  background: rgba(24, 144, 255, 0.9);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.3s;
-  font-size: 16px;
-}
-
-.material-item__download {
-  position: absolute;
-  bottom: 8px;
-  right: 42px; /* 在删除按钮左边 */
-  width: 28px;
-  height: 28px;
-  background: rgba(82, 196, 26, 0.9);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.3s;
-  font-size: 16px;
-}
-
-.material-item:hover .material-item__delete {
-  opacity: 1;
-}
-
-.material-item:hover .material-item__group {
-  opacity: 1;
-}
-
-.material-item:hover .material-item__download {
-  opacity: 1;
-}
-
-.material-item__delete:hover {
-  background: rgb(255, 77, 79);
-  transform: scale(1.1);
-}
-
-.material-item__group:hover {
-  background: rgb(24, 144, 255);
-  transform: scale(1.1);
-}
-
-.material-item__download:hover {
-  background: rgb(82, 196, 26);
-  transform: scale(1.1);
-}
-
-.material-item__info {
-  padding: 12px;
-}
-
-.material-item__name {
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.material-item__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--color-text-3);
-}
-
-.material-item__group-name {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--color-primary);
-  background-color: var(--color-primary-bg);
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-</style>
-
diff --git a/frontend/app/web-gold/src/views/material/MaterialListNew.vue b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
index 84a50b410f..984adfc6c6 100644
--- a/frontend/app/web-gold/src/views/material/MaterialListNew.vue
+++ b/frontend/app/web-gold/src/views/material/MaterialListNew.vue
@@ -465,11 +465,10 @@ onMounted(() => {
 
 .category-tabs {
   display: flex;
-  background: #f5f5f5;
-  border-radius: 8px;
-  padding: 3px;
+  background: transparent;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0;
   margin-bottom: 16px;
-  border: 1px solid #e8e8e8;
 }
 
 .category-tab {
@@ -478,21 +477,22 @@ onMounted(() => {
   text-align: center;
   cursor: pointer;
   background: transparent;
-  border-radius: 6px;
   font-weight: 400;
-  font-size: 13px;
-  color: #666;
-  border: 1px solid transparent;
+  font-size: 14px;
+  color: #6b7280;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s ease;
+  margin-bottom: -1px;
+
   &:hover {
-    color: #1890ff;
-    background: rgba(24, 144, 255, 0.05);
+    color: #374151;
+    background: rgba(243, 244, 246, 0.5);
   }
 
   &--active {
-    background: #fff;
-    color: #1890ff;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #d9d9d9;
+    color: #2563eb;
+    border-bottom-color: #2563eb;
+    font-weight: 500;
   }
 }
 
@@ -536,8 +536,6 @@ onMounted(() => {
 }
 
 .sidebar-section {
-  margin-top: 16px;
-
   &__header {
     padding: 8px 12px;
     font-weight: 500;
diff --git a/frontend/app/web-gold/src/views/trends/Forecast.vue b/frontend/app/web-gold/src/views/trends/Forecast.vue
index 9709958c9b..6ab3bc8e16 100644
--- a/frontend/app/web-gold/src/views/trends/Forecast.vue
+++ b/frontend/app/web-gold/src/views/trends/Forecast.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { message } from 'ant-design-vue'
+import { message, Select } from 'ant-design-vue'
 import TikhubService, { InterfaceType, MethodType, ParamType } from '@/api/tikhub'
 import { CommonService } from '@/api/common'
 import { UserPromptApi } from '@/api/userPrompt'
@@ -25,10 +25,10 @@ const generatedContent = ref('')
 const searchParams = reactive({
   keyword: '',
   offset: 0,
-  sort_type: 1,
-  publish_time: 7,
+  sort_type: '1',
+  publish_time: '7',
   filter_duration: '0',
-  content_type: 0
+  content_type: '0'
 })
 
 // 创作详情
@@ -450,42 +450,42 @@ onMounted(async () => {
             <div class="param-row">
               <div class="param-item">
                 <label class="param-label">排序方式</label>
-                <select v-model="searchParams.sort_type" class="param-select">
-                  <option value="0">综合排序</option>
-                  <option value="1">最多点赞</option>
-                  <option value="2">最新发布</option>
-                </select>
+                <a-select v-model:value="searchParams.sort_type" class="param-select">
+                  <a-select-option value="0">综合排序</a-select-option>
+                  <a-select-option value="1">最多点赞</a-select-option>
+                  <a-select-option value="2">最新发布</a-select-option>
+                </a-select>
               </div>
-              
+
               <div class="param-item">
                 <label class="param-label">发布时间</label>
-                <select v-model="searchParams.publish_time" class="param-select">
-                  <option value="0">不限</option>
-                  <option value="1">最近一天</option>
-                  <option value="7">最近一周</option>
-                  <option value="180">最近半年</option>
-                </select>
+                <a-select v-model:value="searchParams.publish_time" class="param-select">
+                  <a-select-option value="0">不限</a-select-option>
+                  <a-select-option value="1">最近一天</a-select-option>
+                  <a-select-option value="7">最近一周</a-select-option>
+                  <a-select-option value="180">最近半年</a-select-option>
+                </a-select>
               </div>
-              
+
               <div class="param-item">
                 <label class="param-label">视频时长</label>
-                <select v-model="searchParams.filter_duration" class="param-select">
-                  <option value="0">不限</option>
-                  <option value="0-1">1分钟以内</option>
-                  <option value="1-5">1-5分钟</option>
-                  <option value="5-10000">5分钟以上</option>
-                </select>
+                <a-select v-model:value="searchParams.filter_duration" class="param-select">
+                  <a-select-option value="0">不限</a-select-option>
+                  <a-select-option value="0-1">1分钟以内</a-select-option>
+                  <a-select-option value="1-5">1-5分钟</a-select-option>
+                  <a-select-option value="5-10000">5分钟以上</a-select-option>
+                </a-select>
               </div>
             </div>
             
             <div class="param-row">
               <div class="param-item">
                 <label class="param-label">内容类型</label>
-                <select v-model="searchParams.content_type" class="param-select">
-                  <option value="0">不限</option>
-                  <option value="1">视频</option>
-                  <option value="2">图集</option>
-                </select>
+                <a-select v-model:value="searchParams.content_type" class="param-select">
+                  <a-select-option value="0">不限</a-select-option>
+                  <a-select-option value="1">视频</a-select-option>
+                  <a-select-option value="2">图集</a-select-option>
+                </a-select>
               </div>
             </div>
           </div>
@@ -693,22 +693,18 @@ onMounted(async () => {
           <!-- 生成文案按钮 -->
           <div class="pt-2">
             <button
-              class="cyber-button"
-              :class="{ 
-                'cyber-button--disabled': !topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating,
-                'cyber-button--loading': isGenerating
-              }"
+              class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white py-3 rounded-lg font-bold shadow-lg shadow-indigo-500/30 transition flex items-center justify-center group"
+              style="color: white !important;"
               :disabled="!topicDetails.copywriting?.trim() || !topicDetails.stylePromptId || isGenerating"
               @click="handleGenerate"
             >
-              <span v-if="isGenerating" class="cyber-button__loading">
-                <span class="cyber-button__spinner"></span>
-                <span class="cyber-button__text">生成中...</span>
+              <span v-if="isGenerating" class="flex items-center justify-center" style="color: white;">
+                <span class="spinner mr-2"></span>
+                <span>生成中...</span>
               </span>
-              <span v-else class="cyber-button__content">
-                <span class="cyber-button__glow"></span>
-                <span class="cyber-button__text">生成爆款</span>
-                <span class="cyber-button__arrow">→</span>
+              <span v-else class="flex items-center justify-center" style="color: white;">
+                <i class="fa-solid fa-wand-magic-sparkles mr-2 group-hover:rotate-12 transition" style="color: white;"></i>
+                <span>生成爆款</span>
               </span>
             </button>
           </div>
@@ -833,24 +829,9 @@ onMounted(async () => {
 
 .param-select {
   width: 100%;
-  padding: 6px 8px;
   font-size: 14px;
-  color: var(--color-text);
-  background: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  transition: all 0.2s;
 }
 
-.param-select:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
-}
-
-.param-select:hover {
-  border-color: var(--color-primary);
-}
 
 .search-input-wrapper {
   display: flex;
@@ -1270,149 +1251,6 @@ onMounted(async () => {
   user-select: none;
 }
 
-/* 赛博朋克风格按钮 - 蓝色主题 */
-.cyber-button {
-  position: relative;
-  width: 100%;
-  padding: 12px 24px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--color-primary);
-  background: transparent;
-  border: 1px solid var(--color-primary);
-  border-radius: 0;
-  cursor: pointer;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  box-shadow:
-    0 0 10px rgba(59, 130, 246, 0.3),
-    inset 0 0 10px rgba(59, 130, 246, 0.1);
-}
-
-.cyber-button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
-  transition: left 0.5s ease;
-}
-
-.cyber-button:hover::before {
-  left: 100%;
-}
-
-.cyber-button:hover:not(.cyber-button--disabled) {
-  background: rgba(59, 130, 246, 0.1);
-  box-shadow:
-    0 0 20px rgba(59, 130, 246, 0.5),
-    0 0 40px rgba(59, 130, 246, 0.3),
-    inset 0 0 20px rgba(59, 130, 246, 0.2);
-  transform: translateY(-1px);
-}
-
-.cyber-button:active:not(.cyber-button--disabled) {
-  transform: translateY(0);
-  box-shadow:
-    0 0 15px rgba(59, 130, 246, 0.4),
-    inset 0 0 15px rgba(59, 130, 246, 0.15);
-}
-
-.cyber-button__content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  z-index: 1;
-}
-
-.cyber-button__glow {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(59, 130, 246, 0.4);
-  transform: translate(-50%, -50%);
-  transition: width 0.6s ease, height 0.6s ease;
-  pointer-events: none;
-}
-
-.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__glow {
-  width: 200px;
-  height: 200px;
-}
-
-.cyber-button__text {
-  position: relative;
-  z-index: 2;
-  text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
-}
-
-.cyber-button__arrow {
-  position: relative;
-  z-index: 2;
-  transition: transform 0.3s ease;
-  font-size: 16px;
-}
-
-.cyber-button:hover:not(.cyber-button--disabled) .cyber-button__arrow {
-  transform: translateX(4px);
-}
-
-.cyber-button__loading {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  z-index: 1;
-}
-
-.cyber-button__spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(59, 130, 246, 0.3);
-  border-top-color: var(--color-primary);
-  border-radius: 50%;
-  animation: cyber-spin 0.8s linear infinite;
-}
-
-@keyframes cyber-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.cyber-button--disabled,
-.cyber-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  border-color: rgba(59, 130, 246, 0.3);
-  box-shadow: none;
-  color: rgba(59, 130, 246, 0.5);
-}
-
-.cyber-button--disabled:hover,
-.cyber-button:disabled:hover {
-  background: transparent;
-  box-shadow: none;
-  transform: none;
-}
-
-.cyber-button--loading {
-  cursor: wait;
-}
-
-.cyber-button--loading:hover {
-  transform: none;
-}
 
 /* 语音分析loading指示器 */
 .analyzing-indicator {
@@ -1426,4 +1264,20 @@ onMounted(async () => {
 .analyzing-text {
   color: var(--color-primary);
 }
+
+/* 按钮加载动画 */
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>