profession-front/原型重构执行计划-2026-09-29.md

原型重构执行计划（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 进程即可，生产零影响