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