# 工作台界面实现计划 > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** 根据 `prd/工作台.html` 原型，在用户中心 (`/yhzx`) 下新增工作台视图，包含统计卡片区、常用功能区、政策公告区，并重构侧边栏菜单结构。 **Architecture:** - 新建 `views/gzt/` 目录，创建工作台主视图 `index.vue` 和子视图（概览、我的供给、我的需求、绿色交易、订单管理） - 复用现有 `glxtSy.vue` 的侧边栏布局结构（t-menu），将其菜单配置重构为与原型一致的分组 - 工作台视图放在 `/yhzx/gzt` 路由下 **Tech Stack:** Vue2 + TDesign + Less --- ## 文件变更总览 | 操作 | 文件路径 | |------|---------| | 创建 | `src/pages/index/views/gzt/index.vue` | | 创建 | `src/pages/index/views/gzt/components/StatsCard.vue` | | 创建 | `src/pages/index/views/gzt/components/QuickActions.vue` | | 创建 | `src/pages/index/views/gzt/components/PolicyNews.vue` | | 创建 | `src/pages/index/views/gzt/config.js` | | 修改 | `src/pages/index/views/glxtSy/glxtSy.vue` | | 修改 | `src/pages/index/router/routes.js` | --- ## Task 1: 创建工作台目录结构和配置文件 **文件:** - 创建: `src/pages/index/views/gzt/config.js` - 创建: `src/pages/index/views/gzt/components/` - 创建: `src/pages/index/views/gzt/index.vue` - [ ] **Step 1: 创建 views/gzt 目录结构** 在 `src/pages/index/views/gzt/` 下创建： - `config.js` - 工作台侧边栏菜单配置 - `components/` - 子组件目录 - `index.vue` - 工作台主视图 config.js 内容： ```javascript // 工作台侧边栏菜单配置 // 注意：name 字段对应路由名，路由注册在 routes.js 中 // "绿色交易"、"消息中心" 使用已注册路由；其余为待注册占位路由 export default { // 业务导航分组 bizMenu: [ { id: 'gzt', title: '工作台', icon: 'home', name: 'gzt', isActive: true, }, { id: 'gaikuang', title: '概览', icon: 'dashboard', name: 'gaikuang', // TODO: 待注册路由 }, { id: 'wdgj', title: '我的供给', icon: 'list', name: 'wdgj', // TODO: 待注册路由 }, { id: 'wdxq', title: '我的需求', icon: 'search', name: 'wdxq', // TODO: 待注册路由 }, { id: 'lsjy', title: '绿色交易', icon: 'swap', name: 'lsjy', // 已注册路由 }, { id: 'ddgl', title: '订单管理', icon: 'order', name: 'ddgl', // TODO: 待注册路由 }, ], // 账号管理分组（对应原型中的分隔线下半部分） accountMenu: [ { id: 'zhgl', title: '账户设置', icon: 'setting', name: 'zhgl', // TODO: 待注册路由 }, { id: 'xxxzx', title: '消息中心', icon: 'mail', name: 'ggwhgl', // 已注册路由（对应消息中心） }, ], }; ``` --- ## Task 2: 创建 StatsCard 统计卡片组件 **文件:** - 创建: `src/pages/index/views/gzt/components/StatsCard.vue` - [ ] **Step 1: 创建 StatsCard.vue** 根据原型，工作台有4个统计卡片： | 卡片 | 数值 | 圆形颜色 | 跳转路由 | |------|------|---------|---------| | 我的供给 | 5条 | 亮绿色 #E8FFEA + 绿色边框 #48C666 | `/yhzx/wdgj`（待注册，见 Task 7）| | 我的需求 | 2条 | 灰色 #EDEDED | `/yhzx/wdxq`（待注册，见 Task 7）| | 绿色交易 | 1条 | 灰色 #EDEDED | `/yhzx/lsjy`（已注册）| | 待处理消息 | 6条 | 灰色 #EDEDED | `/yhzx/ggwhgl`（已注册）| 组件 Props： ```javascript props: { title: String, // 卡片标题 count: [String, Number], // 数值 unit: { type: String, default: '条' }, // 单位 bgColor: { type: String, default: '#EDEDED' }, // 圆形背景色 borderColor: { type: String, default: 'transparent' }, // 边框色（仅"我的供给"有绿色边框） iconName: String, // TDesign 图标名称 to: String, // 跳转路由 } ``` **图标规范：** 使用 TDesign 图标组件 ``，各卡片对应图标： | 卡片 | 图标名称 | |------|---------| | 我的供给 | `upload` 或 `publish` | | 我的需求 | `request` 或 `edit` | | 绿色交易 | `swap` | | 待处理消息 | `mail` | 样式要点： - 圆形背景 56×56px，使用 `border-radius: 50%` - 数字使用 26px 加粗字体 - "条"使用 12px 灰色字体 - 卡片宽度 116px，整体高度 56px - 使用 `cursor: pointer`，hover 时有轻微放大效果 --- ## Task 3: 创建 QuickActions 常用功能组件 **文件:** - 创建: `src/pages/index/views/gzt/components/QuickActions.vue` - [ ] **Step 1: 创建 QuickActions.vue** 四个快捷功能按钮（根据原型），使用现有实际注册路由： | 按钮 | 路由 | 说明 | |------|------|------| | 发布服务 | `/yhzx/tfwgj` | 现有碳服务供给页，可复用 | | 发布数据 | `/yhzx/tfwgj?action=publishData` | 复用碳服务供给页，action=publishData | | 发布需求 | `/yhzx/tfwxq` | 现有碳服务需求页 | | 质证申请 | `/yhzx/zzgl` | **新建路由**，对应原型"质证申请"功能 | **注意：** `/yhzx/zzgl` 路由需在 routes.js 中注册（见 Task 7）。 样式要点： - 使用 `t-button` 组件 - 按钮样式：白色背景 + 绿色边框 (#48C666) + 绿色文字 - 横向排列，gap 16px - 按钮宽度自适应文字，padding 12px 24px --- ## Task 4: 创建 PolicyNews 政策公告组件 **文件:** - 创建: `src/pages/index/views/gzt/components/PolicyNews.vue` - [ ] **Step 1: 创建 PolicyNews.vue** 三条政策公告列表，右侧边栏样式（位置 x=1099, y=283）。 每条公告包含： - 左侧竖线标记（4px宽）：不同颜色区分重要程度 - 第一条：蓝色 #3491FA - 第二条：黄色 #FADC19 - 第三条：灰色 #C7C7C7 - 标题文字（14px，#666666），超出宽度时换行（line-height 21px） 公告示例数据： ```javascript newsList: [ { id: 1, title: '关于做好2026年全国碳排放权交易市场有关工作的通知', leftBorderColor: '#3491FA', }, { id: 2, title: '第一财经研究院碳市场月报：2026年全国碳市场相关工作安排出炉，碳…', leftBorderColor: '#FADC19', }, { id: 3, title: '2026年全国碳市场重点工作来了!从存证到清缴,一步都不能少', leftBorderColor: '#C7C7C7', }, ] ``` **组件 Props：** ```javascript props: { title: String, // 区域标题，如"政策公告" newsList: { // 公告列表 type: Array, default: () => [], }, } newsList 项结构：`{ id, title, leftBorderColor }` 区域标题 "政策公告" - 18px 加粗，位置在公告列表上方。 --- ## Task 5: 创建工作台主视图 index.vue **文件:** - 创建: `src/pages/index/views/gzt/index.vue` - [ ] **Step 1: 创建工作台主视图 index.vue** 根据原型布局（页面宽度 1366px）： ``` ┌─────────────────────────────────────────────────────────────┐ │ 欢迎回来 │ │ ─────────────────────────────────────────────────────────── │ │ [我的供给5条] [我的需求2条] [绿色交易1条] [待处理消息6条] │ │ ─────────────────────────────────────────────────────────── │ │ │ │ 常用功能 │ │ [发布服务] [发布数据] [发布需求] [质证申请] │ │ ┌──────────────────┐ │ │ │ 政策公告 │ │ │ │ ▌公告1 │ │ │ │ ▌公告2 │ │ │ │ ▌公告3 │ │ │ └──────────────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` 布局要点： - 主内容区使用 Flexbox，左右分布 - 左侧：欢迎语 + 统计卡片（横向4列，gap 20px）+ 常用功能（标题 + 按钮组） - 右侧：政策公告区（固定宽度 249px，位置 x=1099） - 统计卡片区域有灰色分隔线（横向，从欢迎语下方到右侧边缘） - 常用功能区域也有灰色分隔线 样式要点： - "欢迎回来"：18px，#666666，颜色 - 页面背景色：#F5F5F5（与侧边栏背景一致） - 内容区白色背景卡片，白色内边距 - 使用 Less 嵌套语法，`lang="less" scoped` --- ## Task 6: 重构 glxtSy.vue 侧边栏菜单 **文件:** - 修改: `src/pages/index/views/glxtSy/glxtSy.vue` - [ ] **Step 1: 更新 cdList 菜单配置** 将现有 `cdList` 重构为与原型一致的分组结构，使用 `config.js` 中的配置： ```javascript import gztConfig from './gzt/config'; data() { return { // ... existing data cdList: [ // 上部分：业务导航（与原型"工作台"分组一致） ...gztConfig.bizMenu, // 分隔线（通过CSS实现，不作为菜单项） // 下部分：账号管理 ...gztConfig.accountMenu, ], }; } ``` - [ ] **Step 2: 添加"工作台"高亮逻辑** 当前 `defaultValue` 设为 `'qyrz'`，需改为根据路由动态判断： ```javascript defaultValue: 'gzt', // 默认选中工作台 ``` - [ ] **Step 3: 更新 gotoPage 方法** 确保跳转到工作台子路由时侧边栏正确高亮。 **布局说明：** `glxtSy.vue` 自身提供左侧侧边栏和右侧内容区，顶部导航由 `Main.vue` 提供（固定 64px 高度），Footer 在 glxtSy.vue 中已被注释掉（无需处理）。工作台视图不需要额外的 Nav 或 Footer 组件。 **原型顶部导航说明：** 原型 `prd/工作台.html` 中的顶部导航（可信碳信息网 Logo、菜单项、用户信息、"+ 发布信息"按钮）属于全局布局层，由 `Main.vue` 和 `new-nav/index.vue` 组件提供，不在工作台视图范围内。 --- ## Task 7: 配置工作台路由 **文件:** - 修改: `src/pages/index/router/routes.js` - [ ] **Step 1: 添加 gzt 路由 lazy-load 函数** 在 routes.js 顶部添加： ```javascript // 工作台 function gzt() { return import(/* webpackChunkName: "gzt" */ '@/pages/index/views/gzt/index.vue'); } ``` - [ ] **Step 2: 在 yhzx 路由的 children 中添加 gzt 子路由** 在 `yhzx` 路由的 `children` 数组中添加： ```javascript { path: 'gzt', component: gzt, name: 'gzt', meta: { title: '工作台', }, }, ``` 注意：现有 `yhzx` 路由使用父子路由结构（`children: [...]`），子路由通过 `router-view` 在 `glxtSy.vue` 右侧内容区渲染，因此只需要添加子路由即可。 - [ ] **Step 3: 添加 wdgj（我的供给）路由** 在 `yhzx` 路由的 `children` 数组中添加： ```javascript { path: 'wdgj', component: gzt, // 复用 gzt 组件作为占位视图，后续替换为我的供给页 name: 'wdgj', meta: { title: '我的供给', }, }, ``` - [ ] **Step 4: 添加 wdxq（我的需求）路由** 在 `yhzx` 路由的 `children` 数组中添加： ```javascript { path: 'wdxq', component: gzt, // 复用 gzt 组件作为占位视图，后续替换为我的需求页 name: 'wdxq', meta: { title: '我的需求', }, }, ``` - [ ] **Step 5: 添加 zzgl（质证申请）路由** 在 `yhzx` 路由的 `children` 数组末尾添加（对应快捷功能"质证申请"按钮）： ```javascript { path: 'zzgl', component: gzt, // 复用 gzt 组件作为占位视图，后续替换为质证申请页 name: 'zzgl', meta: { title: '质证申请', }, }, ``` **本计划范围说明：** 工作台侧边栏菜单中的"概览"、"我的供给"、"我的需求"、"订单管理"在本计划中仅注册路由占位，视图组件在后续计划中实现。当前计划只实现工作台主视图（gzt/index.vue）及必要的子路由配置。 --- ## 依赖关系 ``` Task 1 (目录结构/config) ← 无依赖，最先完成 Task 7 (路由：gzt/wdgj/wdxq/zzgl) ← 依赖 Task 1 Task 2 (StatsCard) ← 依赖 Task 1, 7 Task 3 (QuickActions) ← 依赖 Task 1, 7 Task 4 (PolicyNews) ← 依赖 Task 1 Task 5 (index.vue) ← 依赖 Task 2, 3, 4 Task 6 (侧边栏重构) ← 依赖 Task 1 ``` **建议执行顺序：** Task 1 → Task 7 → Task 2/3/4/5/6（可并行） **说明：** Task 7 需先于组件创建任务（Task 2-6）完成，因组件中 `this.$router.push()` 调用依赖对应路由已注册。Task 4 (PolicyNews) 无路由依赖，可与 Task 2/3 并行执行。