411 lines
13 KiB
Markdown
411 lines
13 KiB
Markdown
# 工作台界面实现计划
|
||
|
||
> **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 图标组件 `<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）
|
||
|
||
公告示例数据：
|
||
```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 并行执行。
|