txw/docs/superpowers/plans/2026-04-05-工作台界面实现计划.md

工作台界面实现计划

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 内容：

// 工作台侧边栏菜单配置
// 注意：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：

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 图标组件 <t-icon name={iconName} />，各卡片对应图标：

卡片	图标名称
我的供给	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）

公告示例数据：

newsList: [
  {
    id: 1,
    title: '关于做好2026年全国碳排放权交易市场有关工作的通知',
    leftBorderColor: '#3491FA',
  },
  {
    id: 2,
    title: '第一财经研究院碳市场月报：2026年全国碳市场相关工作安排出炉，碳…',
    leftBorderColor: '#FADC19',
  },
  {
    id: 3,
    title: '2026年全国碳市场重点工作来了!从存证到清缴,一步都不能少',
    leftBorderColor: '#C7C7C7',
  },
]

组件 Props：

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'，需改为根据路由动态判断：

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 顶部添加：

// 工作台
function gzt() {
  return import(/* webpackChunkName: "gzt" */ '@/pages/index/views/gzt/index.vue');
}

• Step 2: 在 yhzx 路由的 children 中添加 gzt 子路由

在 yhzx 路由的 children 数组中添加：

{
  path: 'gzt',
  component: gzt,
  name: 'gzt',
  meta: {
    title: '工作台',
  },
},

注意：现有 yhzx 路由使用父子路由结构（children: [...]），子路由通过 router-view 在 glxtSy.vue 右侧内容区渲染，因此只需要添加子路由即可。

• Step 3: 添加 wdgj（我的供给）路由

在 yhzx 路由的 children 数组中添加：

{
  path: 'wdgj',
  component: gzt,  // 复用 gzt 组件作为占位视图，后续替换为我的供给页
  name: 'wdgj',
  meta: {
    title: '我的供给',
  },
},

• Step 4: 添加 wdxq（我的需求）路由

在 yhzx 路由的 children 数组中添加：

{
  path: 'wdxq',
  component: gzt,  // 复用 gzt 组件作为占位视图，后续替换为我的需求页
  name: 'wdxq',
  meta: {
    title: '我的需求',
  },
},

• Step 5: 添加 zzgl（质证申请）路由

在 yhzx 路由的 children 数组末尾添加（对应快捷功能"质证申请"按钮）：

{
  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 并行执行。