# 发展首页重构计划（对照老系统 /ProfessionPage/）

> 创建日期：2026-09-26
> **执行状态（2026-09-26）：任务 1~4 全部完成并浏览器验证。**
> 后端新增 `GET /{platform}/profession/SubjectGroupTree`（用户中心组树 + 教师篇数，组节点 count=子树合计，mvn 编译通过、8107 已重启）；
> Home.vue 已按老首页重写：轮播占位图、横向栏目条（>10 折叠「更多栏目」下拉，实测展开正确）、
> 学科组树（递归组件 GroupTreeNode.vue，任意层级，叶子点击跳个人空间）、栏目文章块墙
> （老样式"栏目名[ N篇 ]+更多»"，行=·标题【作者】+右浮日期，空栏目隐藏）、发布排行+我的积分卡；
> `npm run build` 通过，浏览器实测全部通过。
> 已知数据项：本地用户中心（schId=3 云海中学）未配置组/教师树，首页组树仅显示学校根节点——接口逻辑已验证，
> 真实环境配置组树后即完整显示。
> 待办：轮播图真实运营图源（当前渐变占位）。
> 参考页面：https://oa.bestsch.com/ProfessionPage/（账号 jcbx / jcbx@146，已实测登录：上海市进才中学北校，真实业务数据）
> 目标文件：`E:\YHXT\view\ProfessionView\src\views\profession\Home.vue`（重写）
> 配套：`src/api/module/profession.ts`（加组树接口）、后端 `ProfessionController`（新增 SubjectGroupTree）

---

## 一、老首页逻辑实录（jcbx 实测）

### 1.1 整体布局
```
┌────────────────────────────────────────────────────┐
│ 顶栏：上海市进才中学北校  你好，进北管理员            │
│       （我的空间 | 个人信息 | 应用列表 | 退出登录）    │
├────────────────────────────────────────────────────┤
│ ① 轮播图（ivu-carousel，2 张）                       │
├────────────────────────────────────────────────────┤
│ ② 横向栏目条：网站首页 | 教学设计 | 发展规划 | …      │
│    （>10 个折叠为「更多栏目▼」下拉，每项带 Tooltip）  │
├──────┬──────────────────────────────┬──────────────┤
│ ③ 左 │ ④ 中：栏目文章块 × N          │ ⑤ 右         │
│ 学科 │  ┌ 教学设计[1869篇]  更多» ┐  │ 发布排行      │
│ 组树 │  │ ·标题 【作者】   日期    │  │ 许蓉          │
│ 体育 │  └─────────────────────┘  │ 陆佳俊        │
│ 组 20│  ┌ 数学… ┐ ┌ 语文… ┐      │ 孙微 …        │
│ …    │  （每栏目一块，块内 6 行）   │ （点击跳空间） │
│ 语文 │                              │              │
│ 教研 │  （另有隐藏的标题搜索表格，    │              │
│ 组 55│    老页面 display:none）     │              │
└──────┴──────────────────────────────┴──────────────┘
```

### 1.2 实测交互与数据
- **横向栏目条**：仅显示启用栏目；超过 10 个折叠进「更多栏目」（Dropdown），解决长列表溢出；点击栏目 → `/ProfessionPage/?mouid=` 栏目文章列表页
- **学科组树**（GetSubjectGroupTree）：节点 = `组名 + 空格 + 篇数`（体育组 20 / 语文组 49 / 语文教研组 55 …，篇数=子树教师发布合计）；叶子=教师；**点击叶子 → 教师个人空间**（TeachMyselfTimer?userid=）
- **栏目文章块**（Getdatemodulelist）：块头 = `栏目名[ N篇 ]` + 右侧"更多»"（→ 栏目列表页）；块内最新 6 行 = `· 标题 【作者姓名】 …… 日期(右浮)`，点击行 → 记录详情（mouid+pid+userid）；**无记录的栏目不显示块**
- **发布排行**（ReleaseRankingList）：教师姓名列表（按发布数），点击 → 个人空间
- **轮播图**：静态 2 张图，纯展示
- 首页**无**积分卡/最近访客（那些在"我的空间"页）

---

## 二、新版现状 vs 老首页差距

| 方面 | 老首页 | 新版现状 | 结论 |
|---|---|---|---|
| 轮播图 | 顶部 2 张静态图 | 无 | **新增占位轮播** |
| 栏目条 | 横向 + 超过 10 个折叠「更多栏目」 | Tag 流平铺 | **改为横向条+折叠** |
| 学科组树 | 左栏组树（组=篇数，叶子=教师，点击跳空间） | 无 | **新增（需后端新接口）** |
| 文章块 | 栏目名[N篇]+更多»，行=·标题【作者】日期右浮 | 栏目名+更多，行=标题/作者/时间 | **样式对齐**，数据已有 |
| 发布排行 | 人名列表（点击跳空间） | 有（含篇数） | 保留增强 |
| 我的积分 | 首页无积分卡 | 右栏积分卡 | 保留（新版增强，放右栏底部） |
| 空栏目 | 无记录的栏目不显示块 | 显示"暂无记录"块 | **对齐：隐藏空块** |

---

## 三、修改任务

### 任务 1：后端新增学科组树接口
`GET /{platform}/profession/SubjectGroupTree`：
- 复用 `UserCenterService.getSchoolAllTree(schId)`（用户中心组树：组→教师，type 1/2 节点）
- 叠加 `recordRepository.countGroupByTeacher(schId)`（教师篇数）
- 输出节点 `{ id, name, count, children }`：教师节点 count=个人篇数；组节点 count=子树合计；count=0 的教师/组不裁剪（保持树形），树按原顺序
- 验收：`mvn compile` 通过，Postman 返回树形 JSON

### 任务 2：前端 API
`profession.ts` 增加 `groupTree()` → `GET /api/profession/SubjectGroupTree`，类型 `GroupNode { id:number; name:string; count:number; children?:GroupNode[] }`

### 任务 3：Home.vue 重写（核心）
1. **轮播图**：Carousel 两张本地占位图（assets/skin 静态资源），纯展示
2. **横向栏目条**：启用栏目横向排列；≤10 全显，>10 折叠「更多栏目」Dropdown；点击 → `/module/list?mouid=`
3. **主体三栏**（左 5 / 中 14 / 右 5）：
   - 左：学科组树（Tree 组件或递归列表，节点显示 `组名 count`），叶子（无 children）点击 → `/timeline?userid=`；组节点可展开/收起
   - 中：栏目文章块墙（两列 Card 流）：块头 `栏目名（N 篇）`+「更多 »」（→ 栏目列表）；行 = `· 标题 【作者】` + 右浮日期；点击 → `/record/detail?serid=`；**recordCount=0 的栏目不渲染块**
   - 右：发布排行（名次徽标+姓名+篇数，点击 → 个人空间）+ 我的积分卡（保留现版：总分/发布/评论/查看我的空间）
4. 空态：无启用栏目/无记录的兜底提示
5. modId 100、路由不变

### 任务 4：验证
- `npm run build` 通过；`mvn compile` 通过
- 浏览器走查：首页渲染轮播/栏目条折叠/组树/文章块/排行；点击各入口跳转正确；数据库核对组树篇数

## 四、不做 / 后续
- 轮播图真实运营图源（本期本地占位图）
- 隐藏的标题搜索面板（老页面 display:none，弃用）
- 档案袋入口图（老站独立 /ArchivesPage 应用，本期无）