第十周

一、主要任务

（一）数据层任务

1. 数据接收与读取：从全局状态管理获取后端返回的总分、各分项评分、维度名称、评语、满分值等 JSON 数据。
2. 数据预处理：分数格式化、计算得分占比、匹配评分等级（优秀 / 良好 / 合格等），处理空数据、异常数据兜底。
3. 数据透传：将处理后的分项数据向下传递给可视化子组件。

（二）布局与 UI 搭建任务

1. 卡片结构划分：拆分总分主卡片、分项评分子卡片两大模块。
2. 卡片式布局实现：使用 CSS 实现自适应卡片排列，适配 PC / 移动端不同屏幕。
3. 视觉样式统一：统一卡片圆角、阴影、边距、配色、字体，保证整体视觉风格一致。
4. 空状态 / 加载状态兜底：数据未返回、加载中、无数据时展示占位提示。

（三）组件渲染与交互任务

1. 总分卡片渲染：展示总分数、评分等级、综合评语。
2. 分项卡片渲染：循环遍历分项数据，逐个渲染维度名称、单项分数、单项点评。
3. 评分可视化：集成进度环、仪表盘、柱状图 / 雷达图等组件，直观展示得分情况。
4. 交互优化：卡片 hover 效果、分数动态过渡动画，提升浏览体验。

（四）复用与维护任务

1. 组件封装：将评分卡片、分数可视化控件抽为通用复用组件，支持多处调用。
2. 逻辑解耦：把分数计算、等级判断等业务逻辑抽入工具函数，和视图分离。

二、技术理解

1. 技术栈核心

基于 Vue3 + TypeScript + Pinia + CSS 实现，搭配 SVG/ECharts 做分数可视化，属于典型数据驱动视图的前端开发模式。

2. 核心架构思想

（1）分层思想（解耦）

• 状态层：统一存放原始评分 JSON 数据，跨组件共享、保证数据一致性；
• 工具层：纯函数处理分数计算、格式化、等级判定，只处理数据不操作视图；
• 页面容器层：负责整体布局、数据整合、循环渲染卡片；
• 通用组件层：纯 UI 组件，仅接收 props 渲染视图，高复用、低耦合。

（2）卡片布局技术原理

采用 CSS Grid / Flex 实现卡片流式布局：

• grid + auto-fit + minmax：自动根据屏幕宽度调整一行展示的卡片数量，实现响应式；
• 卡片使用 border-radius + box-shadow 实现悬浮卡片质感，是后台 / 数据展示类项目通用 UI 方案。

（3）列表渲染逻辑

分项评分是一组同结构数据，使用 Vue v-for 循环批量生成卡片，一套模板渲染所有分项，新增评分维度无需改动视图代码，扩展性强。

（4）分数可视化原理

• SVG 环形进度：通过圆周长 + stroke-dasharray /stroke-dashoffset 计算进度比例，结合分数区间动态变色；
• ECharts 图表：解析 JSON 分项数据，组装图表配置项，渲染雷达图 / 柱状图做多维度对比。

（5）体验与容错设计

• 加载 / 空数据兜底：避免页面报错、空白；
• 分数动画、卡片 hover：优化视觉体验；
• 类型约束（TS）：规范评分数据格式，减少线上类型错误。

3. 模块关联关系

后端接口返回评分 JSON → Pinia 存储数据 → 页面组件读取数据 + 工具函数处理数据 → 卡片布局 + 循环渲染分项 → 可视化组件展示分数。 整个流程单向数据流，逻辑清晰、便于调试和后期迭代。