179 lines
14 KiB
Markdown
179 lines
14 KiB
Markdown
# 原型重构执行计划（2026-09-29 · 补全 + 点赞 + 冒烟）
|
||
|
||
> 原型：`C:\Users\Allen\WorkBuddy\2026-09-27-04-36-54\design\variant-d-natural-green.html`（方案D · 蓝天校园，7 页）
|
||
> 前端：`E:\YHXT\view\ProfessionView`（8081） 后端：`E:\YHXT\java\Profession`（8107）
|
||
> 前置计划：`原型重构计划-方案D蓝天校园.md`（2026-09-28，已部分执行，本计划为补全篇）
|
||
>
|
||
> **✅ 本计划已于 2026-09-29 全部执行完成**（含冒烟测试与 6 个 bug 修复，详见文末执行记录）
|
||
|
||
---
|
||
|
||
## 一、现状盘点（2026-09-29 凌晨会话已完成部分）
|
||
|
||
| 模块 | 状态 | 说明 |
|
||
|---|---|---|
|
||
| profession-ui.css | ✅ 已建（377 行原型 CSS 移植，main.ts 最后引入） | |
|
||
| App.vue / layout.vue | ✅ 已对齐 | app-frame 容器 + 玻璃 topbar（校名/你好/心情/九宫格/退出） |
|
||
| HomeHero.vue | ✅ 已对齐 | 蓝天横幅 + 插画 + 4 统计胶囊（HomeStats 真数据） |
|
||
| ModuleBar.vue | ✅ 已对齐 | 白底胶囊条 + 序号 + 更多▾ + 区级项；⚠ 更多菜单序号基准待核对 |
|
||
| Home.vue | ✅ 已对齐 | 组树/发布排行/积分排行 + block-wall 块墙（chip 字章） |
|
||
| ModuleList.vue | ✅ 已对齐 | 全校（hero+组树+年级学科筛选+表格）/ 个人（space-head 内联侧栏+年级班级+操作图标）双模式 |
|
||
| AreaHome.vue | ✅ 已对齐 | 区级排行 + 学校统计表 + 分页 |
|
||
| 后端 HomeStats/PointsRank/SpaceOverview | ✅ 已实现 | Controller + 前端 api 均有 |
|
||
| **SpaceSide.vue** | ❌ 旧版（ss-* 类，绿色旧皮肤） | 需重写为原型 space-head/space-statrow/points-wrap/space-menu/visitors |
|
||
| **CrumbTags.vue** | ❌ 旧版（文字链） | 需重写为原型 .crumbs 玻璃胶囊（房子图标 › 层级 › cur 白胶囊） |
|
||
| **Timeline.vue** | ❌ 自制 tl-* 类 | 需重写为原型 crumbs + year-block 时间轴（ydot/ycnt/t-date/【栏目】/t-excerpt 摘要） |
|
||
| **RecordEdit.vue** | ❌ 09-28 绿色旧版 | 需重写为原型 form-card（form-row/f-inline/f-radio/form-divider/file-item/form-actions） |
|
||
| **RecordDetail.vue** | ❌ 09-28 旧版（commbox） | 需重写为原型 detail-card（meta/att-preview/detail-info/footprint/comment-box）+ **点赞** |
|
||
| **点赞功能** | ❌ 前后端均无 | 用户明确要求：点赞、浏览、评论大家都有 |
|
||
| profession.ts | ⚠ homeStats/pointsRank/spaceOverview **重复定义两遍**（152-174 行） | 清理 |
|
||
|
||
## 二、业务规则（自洽性契约）
|
||
|
||
| 场景 | 行为 |
|
||
|---|---|
|
||
| 发展首页 | 全校视角：栏目块墙、组树、双排行；点标题→记录详情；点栏目名/更多→栏目列表·全校 |
|
||
| 栏目列表·全校 | 任何人**只能查看**（无编辑/删除操作列）；年级/学科筛选+搜索；点作者名→**他人**个人空间（只读） |
|
||
| 栏目列表·个人空间 | **他人空间（userid≠登录人）**：仅查看（操作列只有查看图标，无编辑/删除）；**自己的空间（userid=登录人或无 userid）**：查看/编辑/删除三图标 |
|
||
| 发布/编辑 | 仅登录人给自己的栏目发布；编辑仅作者可进（后端校验「仅作者可编辑」，非作者跳详情页） |
|
||
| 记录详情 | 浏览（进页即记足迹+阅读+1）、评论（发表/编辑/删除自己的）、**点赞（新增，toggle）**——三者**所有人**可用 |
|
||
| 专业发展足迹 | 我的首页=本人时间轴（发布记录入口）；他人=只读时间轴 |
|
||
| 删除 | 仅作者或超管（后端已校验） |
|
||
|
||
## 三、后端任务（com.yunhai.profession）
|
||
|
||
### B1 点赞功能（新增）
|
||
1. 实体 `ProfessionLike`：id/schId/recordId/teacherId/teacherName/createTime；唯一约束 (recordId, teacherId)
|
||
2. `ProfessionRecord` 增 `likeCount` 冗余计数（默认 0）
|
||
3. 建表 DDL 追加到 `profession_schema.sql`（JPA ddl-auto=update 会自动加列/建表）
|
||
4. 接口 `POST /profession/LikeCreate?recordId=`：toggle——已赞→取消（删行、likeCount-1、liked=false），未赞→点赞（插行、likeCount+1、liked=true）；返回 `{liked, likeCount}`
|
||
5. `ProfessionDetail` 返回增加 `likeCount`、`liked`（当前登录人是否已赞）
|
||
6. `SpaceOverview` 增加 `likeTotal`（该教师全部记录 like_count 合计 =「获赞」），space-statrow 三格数据齐（累计记录/获赞/被访问）
|
||
7. 权限：登录即可（不限作者）；RecordRepository 增合计查询
|
||
|
||
### B2 复查项
|
||
- Edit/Delete 作者校验已有 ✅（ProfessionService:120/136）
|
||
- MyTimeline 已含 remark ✅；ModuleRecordList 已含 grade 筛选 ✅（核对即可）
|
||
|
||
## 四、前端任务（ProfessionView）
|
||
|
||
### F1 SpaceSide.vue 重写（原型类名，三页共用）
|
||
- 结构：`panel > space-head（蓝渐变头：字章头像/姓名/角色行省略/积分）+ space-statrow（累计记录/获赞/被访问）+ points-wrap（等级进度条：以积分换算，Lv 假数据不做，条显示 myPoints/学期目标 或隐藏——首版按积分刻度显示）+ space-menu（sm-item 栏目菜单+篇数）`；随后独立 `panel 本月概览（ov-grid 四色）` + `panel 最近访客（visitors 圆字章 + vplus + 查看全部访客›）`
|
||
- props 增加 `overview`（SpaceOverview 数据：statrow/获赞）、`mode: full|mini`（mini=edit/detail 精简：无 statrow/无本月概览，对齐原型页4/页5）
|
||
- 字章头像=姓名首字；访客字章=姓名首字
|
||
|
||
### F2 CrumbTags.vue 重写
|
||
- 原型 `.crumbs`：玻璃胶囊（rgba 白 + blur），首项可渲染**房子 SVG 图标**（tag.home=true 时），中间 › SVG 分隔，当前项白色胶囊 `.cur`；props 沿用 tags（text/to/home）
|
||
|
||
### F3 Timeline.vue 重写（page-timeline）
|
||
- col-main：crumbs 单级「我的/他的首页」+ panel（padding 20 28）内 `timeline`：year-block（ydot 圆点/year-hd 年份+ycnt 篇数/可折叠）+ tl-item（tdot/t-date/t-module【栏目】/t-title/t-excerpt 摘要=remark 去标签截 120 字）
|
||
- 侧栏换新 SpaceSide（full 模式）+ SpaceOverview；面板头「发展足迹·共N条 + 发布记录按钮」保留（与 09-28 改版一致）
|
||
|
||
### F4 RecordEdit.vue 模板重写（page-edit）
|
||
- 左：SpaceSide mini + 最近访客 panel；右：crumbs（房子›栏目›发布/编辑栏目名）+ `form-card`
|
||
- form-row（92px 标签列）：标题 f-input / 年级段+学科 f-inline f-select / 是否公开 f-radio
|
||
- `form-divider 栏目动态字段`：动态字段（text/number/date/radio/checkbox/select/province_city 原控件保留，套 f-* 皮肤）
|
||
- `form-divider 正文内容`：wangEditor 容器（.editor-mock 皮肤：toolbar 浅灰条+正文区）
|
||
- `form-divider 附件`：UploadFile + file-item 列表
|
||
- form-actions：取消（router.back）/ 保存并发布（save 逻辑不变：必填校验/contents JSON/fileIds/发布→详情跳转）
|
||
|
||
### F5 RecordDetail.vue 模板重写（page-detail）
|
||
- 左：SpaceSide mini（作者）+ 最近访客 panel；右：crumbs（房子›栏目›查看栏目名）
|
||
- `detail-card`：detail-title 居中 / detail-meta（撰写|发表时间|阅读 N·评论 N·**点赞按钮+数**）/ detail-body v-html / 附件 att-preview（iframe Preview，图片直显）/ detail-info（dinfo-row：年级段/学科/动态字段/附件下载）/ footprint（最近浏览字章+共 N 人浏览）/ comment-box（comment-item 字章头像+名+时间+内容+自己的评论可编辑删除；comment-input 发表）
|
||
- 点赞按钮：❤/👍 图标 + likeCount，已赞高亮，点击调 LikeCreate toggle
|
||
- 进页 visitCreate 足迹逻辑保留
|
||
|
||
### F6 profession.ts 清理
|
||
- 删除 152-174 行重复的 homeStats/pointsRank/spaceOverview
|
||
- 新增 `likeCreate(recordId)` → POST LikeCreate
|
||
|
||
### F7 杂项
|
||
- ModuleBar「更多▾」下拉序号：以全量菜单索引为基准（核对 no(i + MENU_MAX) 是否与被截断栏目的全局序号一致）
|
||
- SpaceSide 旧 ss-* 样式清理；Timeline 旧 tl-* 样式清理
|
||
|
||
## 五、实施顺序
|
||
|
||
| # | 内容 | 验收 |
|
||
|---|---|---|
|
||
| 1 | B1 后端点赞（实体/接口/Detail/SpaceOverview） | mvn compile ✅；接口手测 toggle 正确 |
|
||
| 2 | F6 profession.ts 清理+点赞 API | tsc 无重复定义 |
|
||
| 3 | F1/F2 SpaceSide + CrumbTags 重写 | 三旧页引用不变即兼容 |
|
||
| 4 | F3 Timeline 重写 | DOM 对齐原型 page-timeline |
|
||
| 5 | F4 RecordEdit 重写 | DOM 对齐原型 page-edit；发布/编辑功能回归 |
|
||
| 6 | F5 RecordDetail 重写 | DOM 对齐原型 page-detail；点赞/评论/足迹可用 |
|
||
| 7 | F7 杂项 + npm run build | build 通过 |
|
||
| 8 | 冒烟测试（下节） | 全部通过 |
|
||
| 9 | 计划文档状态更新 | |
|
||
|
||
## 六、冒烟测试清单（mock 方案）
|
||
|
||
环境：后端 8107（真库）+ mock-stub(18087 假 /api/base/GetUserInfo 等登录态) + vite.visual(8083 代理到 stub) + 浏览器截图核对（对照原型 PNG）。
|
||
|
||
**逐页走查**（以登录人=测试教师 A、他人=教师 B 双视角）：
|
||
1. /home：hero 4 统计有真数据；块墙/组树/双排行渲染；点栏目→全校列表；点标题→详情
|
||
2. /module/list（全校）：年级/学科筛选、搜索、分页；表格年级/学科列；无操作列（只读）✓；点作者→他人空间
|
||
3. /module/list?userid=他人：侧栏他人姓名；操作列**仅查看**；点查看→详情
|
||
4. /module/list?userid=自己（或无参）：操作列 查看/编辑/删除；删除确认→列表刷新
|
||
5. /record/new?mouid=：动态字段渲染、必填校验、附件上传、发布→跳详情
|
||
6. /record/edit（自己记录）：回显完整；改后保存→详情更新
|
||
7. /record/edit（他人记录 serid）：被拒跳详情（权限自洽）
|
||
8. /record/detail：阅读+1；评论发表/编辑/删除（仅自己的）；**点赞 toggle（再点取消）**；足迹记录；附件预览/下载
|
||
9. /timeline?userid=自己：年份折叠、摘要、发布记录按钮；?userid=他人：只读
|
||
10. /area（区局账号）：排行+统计表+分页（本地非区局账号则显示提示，可跳过）
|
||
11. 控制台无报错；路由 hash 直链可达
|
||
|
||
**已知历史坑复查**：表格定高裁行、page-panel 叠盖、同组件路由复用 onMounted 不重跑（RecordEdit watch 已有，重写后保留）。
|
||
|
||
## 七、省略与说明
|
||
1. space-role/space-tags（"语文教师·七年级(3)班"等）：平台无数据源，省略
|
||
2. 等级 Lv/升级提示：假数据不做；points-wrap 显示积分与刻度
|
||
3. docx 在线预览：iframe 直连 /file/Preview（docx 提供下载）
|
||
4. 「查看全部访客›」：跳转该教师足迹页（访客数据在侧栏已展示前 N 个）
|
||
5. 后台 Console(8082) 不在本次范围
|
||
|
||
---
|
||
|
||
## 八、执行记录（2026-09-29 完成）
|
||
|
||
### 已完成
|
||
| 任务 | 结果 |
|
||
|---|---|
|
||
| B1 点赞 | ✅ ProfessionLike 实体/表（唯一约束 record+teacher）、record.like_count 冗余列、LikeCreate toggle 接口、Detail 返回 likeCount+liked、SpaceOverview.likeTotal（获赞）、种子 149 条 |
|
||
| F1 SpaceSide 重写 | ✅ 原型类名（space-head 蓝渐变/字章头像/space-statrow 三格含获赞/points-wrap/space-menu/本月概览/最近访客圆字章），mode full/mini |
|
||
| F2 CrumbTags 重写 | ✅ .crumbs 玻璃胶囊（房子 SVG › 层级 › cur 白胶囊） |
|
||
| F3 Timeline 重写 | ✅ crumbs + year-block 时间轴（ydot/ycnt/t-date/【栏目】/t-excerpt 摘要 120 字）+ 面板头「发展足迹·共N条+发布按钮（仅本人）」 |
|
||
| F4 RecordEdit 重写 | ✅ form-card（form-row/f-inline/f-radio/动态字段原生化/editor-mock 皮肤 wangEditor/+选择文件上传/取消+保存并发布） |
|
||
| F5 RecordDetail 重写 | ✅ detail-card（meta 阅读·评论·点赞按钮/附件按类型内联预览/dinfo-row/footprint 字章/评论盒） |
|
||
| F6 profession.ts | ✅ 去重 + likeCreate |
|
||
| ModuleList 补齐 | ✅ statrow 三格（获赞）+ 最近访客面板 |
|
||
|
||
### 冒烟测试（真后端通道，2026-09-29 全过）
|
||
**通道**：vite.visual.ts（8083）→ 代理 /api 改写为 /manage（绕本地 CAS url-pattern /api/*）+ header 注入 currentrole={userId:10001,schId:3}；后端 ControllerUserContextAspect 无 BoaUser 时从 currentrole 兜底身份（生产 CAS 下不触发）。全真库 124 条记录。
|
||
|
||
| # | 用例 | 结果 |
|
||
|---|---|---|
|
||
| 1 | 首页 hero 统计/块墙/双排行/栏目条 | ✅ 真数据 |
|
||
| 2 | 全校列表年级筛选（初一→3条）/搜索（背影→1条）/无操作列（只读） | ✅ |
|
||
| 3 | 他人空间（?userid=10003）：侧栏他人卡+仅查看图标 | ✅ |
|
||
| 4 | 自己空间：查看/编辑/删除三图标；删除→确认→列表刷新 | ✅ |
|
||
| 5 | 详情：阅读数/点赞 toggle（1→2→1）/评论发表（自己的可编辑删）/足迹字章 | ✅ |
|
||
| 6 | 发布：动态字段/必填校验/保存→跳详情 serid | ✅ |
|
||
| 7 | 编辑：回显完整→改标题→保存→详情更新 | ✅ |
|
||
| 8 | 他人记录编辑：被拒跳详情（仅作者可编辑） | ✅ |
|
||
| 9 | 时间轴我的（25条/发布按钮）/他的（24条/无按钮/「他的首页」） | ✅ |
|
||
| 10 | 区级页：非区局账号显示提示 Alert | ✅ |
|
||
| 11 | 控制台无报错；npm run build + mvn compile 通过 | ✅ |
|
||
|
||
### 冒烟发现并修复的 bug
|
||
1. **搜索只匹配标题不匹配作者**（recordSpec keyword）→ 改 title OR teacherName LIKE
|
||
2. **LikeCreate 回读命中一级缓存旧计数**（toggle 返回 2 而非 0/1）→ 增 findLikeCount JPQL 直查
|
||
3. **Timeline 同组件路由复用**（我的→他的不刷新）→ 加 watch route.query.userid + applyRoute 抽取
|
||
4. **RecordDetail 同组件路由复用**（详情A→详情B）→ 加 watch route.query.serid
|
||
5. **开发兜底名 teacher-xxx 写库/显示**（评论/足迹/点赞/记录/MyPoints）→ 五处统一「teacher- 前缀 → 记录冗余真名」兜底
|
||
6. **BaseApiController.schIdOf NPE**（无 BoaUser 时）→ null 判断
|
||
|
||
### 遗留说明
|
||
- 学科组树叶子教师：本地用户中心（base.yunhaixingtong.com）不可达仅显示学校根节点；生产环境正常
|
||
- 浏览器自动化 fill 对 .search-box input 的 v-model 写入无效（IAB 键盘事件怪癖，真实用户无此问题）
|
||
- vite.visual.ts + 8083 通道**保留运行**供人工验收（免登录注入 10001 王建军）；不需要时删除该文件并停 8083 进程即可，生产零影响
|