profession-front/发展首页重构计划.md

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