98 lines
7.3 KiB
Markdown
98 lines
7.3 KiB
Markdown
# 发展首页重构计划（对照老系统 /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 应用，本期无）
|