profession/profession-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
profession-front/原型重构计划-方案D蓝天校园.md
T

11 KiB
Raw Permalink Blame History

前台原型重构计划（方案D · 蓝天校园）

创建日期：2026-09-28 原型文件：C:\Users\Allen\WorkBuddy\2026-09-27-04-36-54\design\variant-d-natural-green.html（最终版，"方案D · 蓝天校园 — 教师专业发展（全页面）"，7 页单文件演示） 设计说明：design/home-redesign-notes.md（现状分析 / 设计决策 / 布局规范 / 落地建议——本计划直接采纳） 前端项目：E:\YHXT\view\ProfessionView　后端项目：E:\YHXT\java\Profession 目标：前台 7 个页面按原型 DOM/样式重写，后端补齐原型所需接口与字段。

一、原型概览（7 页，与现有路由一一对应）

# 原型页 id 页面 对应现有路由
1 page-home 发展首页（hero 统计刊头 + 栏目条 + 组树/排行/积分排行 + 文章块墙） /home
2 page-list 栏目列表·全校（hero + 组树 + 工具栏 + 表格含年级/学科列） /module/list（无 userid）
3 page-space 栏目列表·个人空间（个人卡+统计+等级进度+栏目菜单+本月概览+访客 + 面包屑 + 工具栏含班级 + 表格含年级/班级/操作图标） /module/list?userid=
4 page-edit 发布/编辑（左栏个人卡+菜单+访客；右栏表单卡：标题/年级学科/公开/动态字段分隔区/正文编辑器/附件/操作） /record/new
5 page-detail 记录详情（左栏同上；右栏：面包屑+detail-card[标题/元信息/正文/附件内联预览/详细信息/最近浏览足迹/评论盒]） /record/detail
6 page-timeline 专业发展足迹（左栏同上；右栏：crumbs「我的首页」+ 年份块时间轴：日期/【栏目】/标题/摘要） /timeline
7 page-area 区级视图（栏目条含「区级视图」项；全区发布排行[奖牌+比例条] + 学校教师发布统计表 + 分页） /area

设计主题（方案D · 蓝天校园，:root tokens）

--bg:#eef5fc（天空渐变底）、--card:#fff、主靛蓝 --navy:#1f6fd0（hover #1857b8）、浅蓝 --sky:#e3f0fd、文字 --ink:#1c1e26/--ink-2、弱化 --muted:#8fa9c4、边框 --line:#e7e9ee、暖橙点缀 --gold:#c98a2b；标题衬线字体 Georgia/Songti（刊头），正文系统无衬线；容器 1180px；顶栏为透明白字（压在天空渐变上）。

原型关键构件

  • Hero 刊头：校园 SVG 场景 + campus-illo-v6.jpg 插画 + kicker/title/sub + 4 个统计胶囊（累计记录/活跃教师/发展栏目/本周新增，四色）
  • 栏目条：白底圆角卡内嵌条；项带序号（01/02/…）；选中态品牌色胶囊；末尾「更多▾」
  • 首页左列三面板：学科组（白底缩进树+绿色计数徽章「（3）126」）/ 发布排行（奖牌前3+比例条）/ 积分排行（新增）
  • 文章块：块头 = 栏目字章 chip（思/文/课/书/研/评/计/荣，各自配色）+ 名称 + 篇数 + 更多›；行 = 两位序号 + 标题 + 作者（内联）+ 右浮日期
  • 个人卡 space-head：圆形字章头像 + 姓名 + 角色/标签（原型演示数据）+ 积分；space-statrow（累计记录/获赞/被访问）；等级进度条（Lv.4 682/800）；栏目菜单（篇数徽章）；本月概览（本月发布/新获评论/新增阅读/新访客 四色）；最近访客（字章+「查看全部访客›」）
  • 面包屑 .crumbs：房子 SVG 图标（→我的首页）+ › 分隔 + 栏目名 + › + 当前页
  • 表格 .tbl：圆角卡内表格；操作列 = 查看/编辑/删除 SVG 线性图标（danger 红）
  • 详情页新增：detail-meta（撰写/发表时间/阅读·评论）、附件内联预览（iframe 660px）、footprint 最近浏览（字章+共 N 人浏览）、评论盒（字章头像+名+时间+内容+输入行）
  • 发布页新增：form-divider 分区（栏目动态字段/正文内容/附件）、附件 file-item 列表

二、现状 vs 原型差异（要点）

模块 现状 原型 动作
顶栏 白底 icon+应用名+头像 透明压天空渐变：校名（品牌蓝）+ 你好 XX + 心情/应用中心/退出 SVG 重写 layout.vue 顶栏
首页刊头 图片轮播 180px 校园插画 hero + 标语 + 4 统计胶囊 App.vue 层重写（数据需新接口）
栏目条 绿底 #39cb7c 白底圆角卡内嵌、项带序号 ModuleBar.vue 重写
首页左列 组树+排行 2 面板 组树/发布排行/积分排行 3 面板，树改白底缩进+徽章，排行加比例条 Home.vue 重写（积分排行需新接口）
文章块 名称+篇数+更多 字章 chip + 序号行 Home.vue（字章/配色前端派生）
列表(全校) 无 hero、无年级/学科列与筛选 hero + 组树侧栏 + 年级/学科筛选 + 表格年级/学科列 ModuleList.vue 重写（后端加 grade 筛选）
列表(个人) 自制侧栏（名+积分+菜单+访客） 个人卡+统计行+等级条+本月概览+访客字章+「查看全部」 SpaceSide.vue 重写（后端加 SpaceOverview 聚合）
面包屑 BreadcrumbNav 文字条 .crumbs：房子图标+›+层级（每页内嵌） BreadcrumbNav 重写 + 各页接入
时间轴 年徽章+行（无摘要） ydot+年份+篇数，行=日期/【栏目】/标题/摘要 Timeline.vue 样式重写（后端补 remark）
详情 卡片式 detail-card + 附件内联预览 + footprint + 评论盒 RecordDetail.vue 重写
发布 表单平铺 form-card + form-divider 分区 + 附件列表 RecordEdit.vue 重写
区级 警告条+两面板 栏目条含区级项 + 排行(比例条) + 统计表+分页 AreaHome.vue 重写
主题 绿色 #39cb7c 蓝天校园 tokens（--navy 等）+ 天空渐变底 + 衬线刊头 新增 profession-ui.css（原型 CSS 移植）

三、后端任务（com.yunhai.profession）

任务 B1 新增聚合接口（ProfessionController / ProfessionService）

  1. GET /{platform}/profession/HomeStats → { recordTotal, teacherTotal, moduleTotal, weekNew } （record 总数 / 有记录的教师数 / 栏目数 / 本周新增记录数；都按 schId）
  2. GET /{platform}/profession/PointsRank?top=8 → [{ teacherId, teacherName, points }] （发布+评论积分合计排行，对齐首页「积分排行」面板）
  3. GET /{platform}/profession/SpaceOverview?userid= → 个人空间聚合： { teacherName, points, recordTotal, visitTotal, moduleCounts:[{id,name,count}], month:{ publish, comments, reads, visitors } } （本月概览按当月时间窗聚合；reads=该教师记录 read_count 增量，首版用总和近似）

任务 B2 既有接口微调

  1. MyTimeline 行增加 remark（截 200 字，供时间轴摘要 t-excerpt）
  2. ModuleRecordList / ProfessionList 增加 grade 筛选参数（全校列表年级下拉）
  3. ProfessionList（全校）行已含 discussCount/readCount/grade/subject ✓ 无需改

任务 B3 数据口径

  • 附件内联预览：/file/Preview 已有（PDF 浏览器直显）；docx 在线预览需外部转换服务（kkfileview 等）→ 本期 iframe 直连 Preview，docx 标记为下载，计划文档注明待办
  • 空间角色/标签（"语文教师·七年级(3)班"、"教研组长"）、获赞、等级：平台无数据源 → 首版省略（space-head 仅头像/姓名/积分；等级条以积分为刻度显示"积分 682 分"，去掉 Lv 假数据）——文档注明

四、前端任务（ProfessionView）

任务 F1 主题移植

  • 新增 src/assets/styles/profession-ui.css：原样移植原型 <style> 全部 377 行（tokens/顶栏/hero/栏目条/panel/block-card/tbl/space-head/crumbs/detail/timeline/pagination/visitors），仅做两点适配：
    1. 删除 html{min-width} 与 body overflow 改由应用壳控制；2. 滚动容器适配 .main-wrapper
  • 插画资源：campus-illo-v6.jpg 已复制到 src/assets/image/
  • 引入顺序：main.ts 中 profession-ui.css 置于最末（覆盖旧 profession-theme.css，后者保留向后兼容）

任务 F2 全局框架

  • layout.vue：顶栏改原型 .topbar（brand-school 校名〔GetUserInfo.school.name〕+ welcome + 心情/应用中心/退出 SVG 按钮；透明压天空渐变）
  • App.vue：.app-frame 内改为 hero 刊头（SVG 场景 + 插画 + copy + 4 统计胶囊〔HomeStats 数据，全局只加载一次〕）+ ModuleBar（重写：白底圆角内嵌条 + 序号项 + 更多▾）+ .app-frame-body
  • BreadcrumbNav.vue：重写为原型 .crumbs（房子 SVG → 层级）；从布局层移入各页 col-main 顶部（原型即页内元素）

任务 F3 页面重写（DOM/类名对齐原型）

  1. Home.vue → page-home：左列 3 面板（组树白底缩进/发布排行比例条/积分排行）+ block-wall（字章 chip + idx 行）
  2. ModuleList.vue → page-list + page-space 双模式（保留 userid 判定）：全校=hero 下组树+工具栏(年级/学科/搜索/发布)+表格(年级/学科列)；个人=space-head/statrow/points-bar/menu+本月概览+访客 + crumbs+工具栏(年级/班级)+表格(年级/班级/操作图标)
  3. RecordEdit.vue → page-edit：左栏（个人卡简版+菜单+访客）+ form-card（标题/年级学科/公开/动态字段 divider/正文编辑器/附件 file-item/取消+保存并发布）
  4. RecordDetail.vue → page-detail：detail-card（标题/meta/正文/附件内联预览 iframe/详细信息/footprint/评论盒）
  5. Timeline.vue → page-timeline：crumbs「我的首页」+ 年份块时间轴（ydot/日期/【栏目】/标题/摘要）
  6. AreaHome.vue → page-area：栏目条高亮区级项 + 全区排行（比例条）+ 统计表 + 分页

任务 F4 字章/配色派生

  • 栏目 chip：取栏目名首字，颜色按栏目索引从原型八色板派生（#1f6fd0/#7c5cbf/#2c7a7b/#1a72d8/#c98a2b/#c0504d/#3b82c4/#d69e2e 循环）——不改库表

五、实施顺序与验收

阶段 内容 验收
一 后端 B1/B2（3 新接口 + 2 微调） mvn compile 通过，Postman 数据正确
二 F1 主题 + F2 框架（顶栏/hero/栏目条/面包屑） 全页呈蓝天校园主题，hero 统计为真实数据
三 F3 首页/列表(双模式) 与原型 DOM 对齐，数据真实，筛选/分页可用
四 F3 详情/发布/时间轴/区级 同上；附件预览/评论/足迹可用
五 build + 浏览器逐页走查 + 计划文档状态更新 npm run build 通过；对照原型截图核对

六、省略与待确认

  1. space-role/space-tags/获赞/等级 Lv：无数据源，首版省略（保留扩展位）
  2. docx 附件在线预览：需外部转换服务，本期 iframe 直显 + 提供下载
  3. 所属区域省市级联：字段类型已支持 province_city，省市区数据源后续接入（首版按既有字段类型渲染）
  4. hero 统计口径：累计记录/活跃教师/栏目数/本周新增按学校维度
  5. 本期仅重写前台 8081；后台 8082 不动
Reference in New Issue View Git Blame Copy Permalink