123 lines
11 KiB
Markdown
123 lines
11 KiB
Markdown
# 前台原型重构计划（方案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 既有接口微调
|
||
4. `MyTimeline` 行增加 `remark`（截 200 字，供时间轴摘要 t-excerpt）
|
||
5. `ModuleRecordList / ProfessionList` 增加 `grade` 筛选参数（全校列表年级下拉）
|
||
6. `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 不动
|