157 lines
16 KiB
Markdown
157 lines
16 KiB
Markdown
# 2026-08-26 工作日志
|
||
|
||
## Ardot 画布 - 备考中枢高保真原型（继续）
|
||
|
||
### 本轮完成：桌面端 7 个缺页补齐
|
||
- 背景：桌面端侧边栏 9 个导航项，此前仅 2 页有真实页面。用户确认「全套补齐」。
|
||
- 采用「复制壳 + 改高亮/页头 + 删旧内容 + 新建内容」的可复用翻页流程，保持视觉一致。
|
||
|
||
### 新建桌面页（Ardot 文件 718570750880145）
|
||
| 页面 | 节点 | x 坐标 | 内容要点 |
|
||
|---|---|---|---|
|
||
| 桌面-刷题中心 | 44:1 | 3900 | 5模块卡+碎片组卷时长+CTA |
|
||
| 桌面-模考分析 | 45:40 | 5460 | 3 KPI + 趋势SVG折线 + 历次模考列表 |
|
||
| 桌面-备考计划 | 45:176 | 7020 | 4 KPI + 今日任务 + 周计划 |
|
||
| 桌面-要闻 | 45:307 | 7780 | 置顶公告渐变卡 + 分类筛选 + 3文章卡 |
|
||
| 桌面-我的 | 45:446 | 8540 | 个人卡 + 数据与设置2列 + 备考概览4统计 |
|
||
| 桌面-数据导入 | 45:585 | 10060 | 导入/导出/多端同步三卡 |
|
||
| 桌面-设置 | 45:713 | 11580 | 偏好设置 + 通知与数据 双列设置卡 |
|
||
|
||
- 9 个桌面页完整排布：题库录入 x0 → 数据中枢 x2360 → 刷题中心 x3900 → 模考分析 x5460 → 备考计划 x7020 → 要闻 x7780 → 我的 x8540 → 数据导入 x10060 → 设置 x11580。
|
||
|
||
### 关键经验（可复用）
|
||
1. **复制壳翻页**：`C()` 复制后子节点 ID 重建，必须先 read 再 update；导航高亮需同时改 container plus icon plus text 三处。
|
||
2. **`for` 循环在 batch_edit 不生效**：会整行跳过，必须逐个显式写操作。
|
||
3. **fill_container 在 hug_contents 父容器会解析成固定值**，导致另一列塌成 1px；需手动设固定宽（如 568px）。
|
||
4. **SVG 注入易报 degenerate geometry**：改用 frame 填充 + 文本符号图标（⇪⇩↻）。
|
||
5. **颜色用 `$3:N` 变量引用**；中文 Sarasa Gothic SC，数字 Inter。
|
||
|
||
### 设计规范沿用
|
||
- 页面 1440×900，画布 bg $3:3；侧边栏 220px 白 + border；主区 padding 32/24 gap 20；卡片 $3:4 + borderSubtle stroke + 圆角16；导航高亮 = 容器 $3:6 + 图标/文字白。
|
||
|
||
### 本批修改（用户反馈驱动）
|
||
- **数据中枢补侧边栏**：`C()` 题库录入侧边栏进 6:435，高亮改「数据中枢」，删「数据导入导出」项，`M(...,0)` 移到左侧。因 horizontal flexbox 子节点 x 被忽略，只认顺序。
|
||
- **刷题中心补齐三态**：新增分段切换（刷题/错题本/申论，44px, 圆角22，三等高段，选中 `$3:6`）。三态独立成帧——
|
||
- 刷题态 44:1（原帧，补分段切换）
|
||
- 错题本态 48:8（x13120）：副标题「错题归因，逐个击破」，错因分布卡(3行) + 最近错题2卡
|
||
- 申论态 48:170（x14660）：副标题「申论写作与智能评分」，评分卡(四维) + 写一篇 + 历史习作2卡
|
||
- **删除数据导入导出页**：删 45:585；从全部桌面页侧边栏删「数据导入导出」导航项（6:341, 44:18, 45:57/194/325/467/730, 48:26/189）。导航组2 现统一为 题库管理 → 设置。
|
||
- 验证：6:435 / 44:1 / 48:8 / 48:170 / 45:40 / 45:176 / 45:307 / 45:446 / 45:713 / 6:304 均截图通过，无「数据导入导出」残留。
|
||
|
||
### 用户反馈：刷题中心去掉页内 tab，改为侧边栏二级子菜单
|
||
- **需求**：`pc端的刷题中心不需要做成tab了，拆成三个二级子菜单吧`。
|
||
- **实现**：
|
||
1. 建可复用组件「刷题中心子菜单 组件」(51:1)：父项「刷题中心」头行(icon+文字+展开箭头 chevron) + 3 个二级子项(刷题/错题本/申论，左缩进 36px，高32 圆角8)。父项高40。
|
||
2. 在全部 10 个桌面页侧边栏，把原单个「刷题中心」导航项替换为该组件实例（`D()` 旧项 + `I(ref:51:1)` + `M(...,1)` 移到 index1 数据中枢之后 + `U width:fill_container`）。
|
||
3. 高亮态：当前页所属子项填充 `$3:6` + 文字白；父项「刷题中心」标题文字也置 `$3:6` 以示激活。中性页（非刷题三态）无子项高亮。
|
||
- 刷题态 44:1 → 高亮「刷题」；错题本态 48:8 → 高亮「错题本」；申论态 48:170 → 高亮「申论」。
|
||
4. 删除三页页内分段切换控件：48:1 / 48:15 / 48:177。
|
||
- **关键坑**：给组件实例子节点设属性必须用实例路径 `51:23;51:10`（单分号），不能把 binding 名与 `;x` 拼接成 `a1+";51:10"`（会解析成 `51:23;;51:10` 双分号而跳过）。
|
||
- 验证：44:1 / 48:8 / 48:170 / 6:435 / 45:40 截图通过；全部 10 页导出 PNG + PDF 概览已更新到 deliverables/prototype/。
|
||
|
||
### 用户反馈：侧边栏整体做成组件（与 TabBar 对齐）
|
||
- **需求**：用户质疑为何只做「刷题中心子菜单」组件而非整个菜单组件，并要求对齐 TabBar 的标准——把整个侧边栏做成一个组件，用实例覆盖高亮项驱动。
|
||
- **实现**：
|
||
1. 建可复用组件「侧边栏 组件」(52:1)：完整包含 Logo区(徽标+备考中枢)、导航组1（数据中枢/刷题中心+内嵌51:1子菜单/模考分析/备考计划/要闻/我的）、导航组2（题库管理/设置）。全部图标用 SVG 重绘统一风格（grid/文档/宝箱/日历/新闻/人像/题库/齿轮），颜色 `#6B7280`。
|
||
2. 替换全部 10 个桌面页侧边栏：`D()` 旧侧边栏帧 + `I(ref:52:1)` + `M(...,0)` 移到 index0（horizontal 布局靠左）。实例 ID：52:48题库录入 / 52:49数据中枢 / 52:50刷题态 / 52:51模考 / 52:52备考 / 52:53要闻 / 52:54我的 / 52:55设置 / 52:56错题本态 / 52:57申论态。
|
||
3. 高亮通过**三级实例路径**覆写：导航组项 `52:4X;52:N`（容器/图标/文字），刷题子菜单项 `52:4X;52:16;51:Y`（父标题51:7、刷题51:10/11、错题本51:12/13、申论51:14/15）。
|
||
4. 中性页高亮：数据中枢→52:49;52:9/10/15，模考→52:51;52:17/18/21，备考→52:52;52:22/23/26，要闻→52:53;52:27/28/31，我的→52:54;52:32/33/36，设置→52:55;52:43/44/47，题库录入→52:48;52:38/39/42。
|
||
- **关键坑**：删除侧边栏后实例默认落到 x:1220（horizontal 布局末尾），必须 `M(...,0)` 移到 index0 才能靠左；实例高度需保持 `hug_contents`。
|
||
- 验证：全部 10 页截图通过（6:435/44:1/48:8/48:170/45:40/45:176/45:307/45:446/45:713/6:304），交付物 PNG + PDF 已更新。
|
||
|
||
### 用户反馈：删除独立的「刷题中心子菜单」组件(51:1)
|
||
- **需求**：`之前那个子菜单组件删掉`。即删掉此前独立散落在画布(x:16200)上的「刷题中心子菜单 组件」(51:1)。
|
||
- **前置核实**：51:1 被侧边栏组件(52:1)内嵌引用（实例52:16），直接删会连带 10 个页面侧边栏里的子菜单全散架。故先物化。
|
||
- **实现**：
|
||
1. **物化**：删掉 52:16 实例，在侧边栏组件导航组1 内重建结构相同的自包含普通 frame(52:58 刷题中心子菜单 + 52:59 头行/52:64标题/52:67刷题/52:69错题本/52:71申论)。侧边栏组件从此完全自包含。
|
||
2. **重覆写三态高亮**：物化后原 `52:4X;52:16;51:Y` 实例路径失效，改用新 frame 路径：
|
||
- 刷题态52:50 → 52:50;52:67/68/64；错题本态52:56 → 52:56;52:69/70/64；申论态52:57 → 52:57;52:71/72/64。
|
||
3. 确认侧边栏组件无 INSTANCE 引用 51:1 后，`D("51:1")` 安全删除。
|
||
- **关键坑**：删除组件前必须检查是否被其他组件/页面以实例方式引用；被引用的要先物化（instance→普通结构）再删。物化后实例路径会变，需重新读结构再覆写。
|
||
- 验证：侧边栏组件52:1 及三态页(44:1/48:8/48:170)截图通过，PDF 概览已更新。
|
||
|
||
### 本轮：原型精修（逐项排查 + 自动补齐内容密度 + 修复移动端裁剪）
|
||
用户明确要求「逐项排查 + 动手精修」，选择「自动补齐内容密度 + 一并修复移动端问题」。
|
||
|
||
#### 已解决的空白密度问题
|
||
| 页面 | 节点 | 空白(原) | 补充内容 |
|
||
|---|---|---|---|
|
||
| 桌面-数据中枢 6:435 | 左栏 | - | 补「模块掌握度」卡:5 模块进度条(言语82%/数量58%/判断71%/资料75%/常识65%) `52:73~52:102` |
|
||
| 桌面-设置 45:713 | 71% | - | 补「数据管理」区3行 + 「关于与版本」卡 `52:103~52:129`，空白 71%→26% |
|
||
| 桌面-刷题中心 44:1 | 错题归因区 | - | 重建为「错因分布全宽卡(审题24%/计算21%/公式18%/思路15%/遗忘13%) + 待复习&推荐动作两卡并排」`52:182~52:233`（首次建三卡堆叠 → 删除重建）|
|
||
| 桌面-要闻 45:307 | 31% | 补 2 条文章卡(申论大纲/基层治理) `59:113~59:126` |
|
||
| 桌面-我的 45:446 | 43% | 补「备考里程碑」4徽章卡 + 「学习建议」条 `59:54~59:112`，空白 43%→23% |
|
||
|
||
#### 已解决的移动端裁剪/空白
|
||
| 页面 | 节点 | 问题 | 处理 |
|
||
|---|---|---|---|
|
||
| 移动首页 4:24 | 最近模考区 | 内容850px>视口844，TabBar(y724)遮住最近模考卡45px | 全面压缩 padding/gap( Hero 20→12, 错题卡20→10, 快捷入口76→72, 模考卡gap8→4)，内容 850→722px，完整收在 TabBar 上方 |
|
||
| 移动-备考计划 6:244 | 18%空白 | - | 补「明日预告」卡(2任务行+徽标) `59:1~59:20`，绝对定位 y569 |
|
||
| 移动-我的 28:12 | 16%空白 | - | 补「偏好设置」卡(外观主题/学习提醒/隐私设置 3行) `59:21~59:52`，绝对定位 y587，去卡头行高45 |
|
||
|
||
#### 关键坑（新增）
|
||
1. **SVG 长条/旗类 path 易解析失败**：flag(banner)多次报 degenerate geometry，但 `<circle>`/常规 stroke 图标成功。改为靶心/星形等规整闭合图形最稳。
|
||
2. **移动端多卡页面是 absPosition 而非 flow**：新插卡直接进父容器会落到 flow 首位(y117)，需 `layoutPositioning:"ABSOLUTE"` + x/y 手动定位。
|
||
3. **SVG 图标帧 + 文本不可用 emoji**：徽章图标用 frame 嵌 SVG，文字色 `#FFFFFF` 不能写 `white`。
|
||
4. **fill_container 失效**：折线图所在父容器 layout:none，画布高必须给明确像素(如 560px)而非 fill_container。
|
||
|
||
#### 验证
|
||
- 截图通过：4:24(首页完整无遮挡) / 6:244(明日预告) / 28:12(偏好设置) / 45:307(5文章卡) / 45:446(里程碑+建议) / 6:435 / 45:713 / 44:1 / 45:40(折线铺满)。
|
||
- 所有修改页 problemsOnly 布局检查通过，无 OUTSIDE_PARENT / LARGE_EMPTY_AREA 残留（45:446 剩余 128px 留白属正常页脚留白）。
|
||
|
||
### 用户本轮要求：删除所有「数据导入/导出/备份/还原」操作内容
|
||
- 用户明确「将原型中所有有关数据导入导出备份还原等操作的内容全部删除」。
|
||
|
||
#### 已删除（3 处页面）
|
||
| 页面 | 节点 | 删除内容 |
|
||
|---|---|---|
|
||
| 桌面-设置 45:713 | - | 数据管理区(数据导出/还原/跨平台/Docker数据目录) `52:103~52:105` + 重置数据按钮 `45:758` + 通知卡「数据自动备份」行 `45:816`；通知卡标题「通知与数据」→「通知」 `45:809` |
|
||
| 桌面-我的 45:446 | 45:553 数据与设置卡 | 数据导出 `45:557` / 数据还原 `45:560` / 跨平台录入 `45:563`，保留目标设置 `45:566`；卡名「数据与设置卡」→「设置卡」，标题「数据与设置」→「设置」 `45:555` |
|
||
| 移动-我的 28:12 | 28:37 数据管理卡 | 数据导出 `28:40` / 数据还原 `28:50` / 跨平台录入 `28:60` / Docker数据目录 `28:73` + 3分隔线；卡头「数据管理」→「设置」 `28:39`，卡名「数据管理卡」→「设置卡`28:37`；偏好设置卡 `59:21` 上移 y587→384 消除断层 |
|
||
|
||
#### 甄别原则（关键，防误删）
|
||
- **名字是「导入真题」但实际是功能按钮**：订阅推送/自定义组卷/周报复盘/编辑资料/错题重做/历年真题/导出报告/导出PDF。全是通过组件复用遗留的命名，**不能按 name 删**，必须按 characters 实际文本甄别。
|
||
- **保留（非数据操作）**：导出PDF(周报复告)/导出报告(模考报告) = 功能报告导出；导入真题 = 题库资源导入；模考成绩录入 = 录入考试分数(业务数据)；关于卡副标题「数据归你所有」= 品牌定位口号，非操作。
|
||
|
||
#### 结果
|
||
- 3 处页面均无数据操作残留，截图验证通过（移动-我的 28:12 个人卡+设置卡+偏好设置卡紧凑无断层；桌面-设置 45:713 偏好设置+通知+关于；桌面-我的 45:446 设置卡仅剩目标设置）。
|
||
- 桌面-设置截图偶发 1-bit 空图，为渲染服务临时问题，重截图即恢复 8-bit 正常图。
|
||
|
||
### 本轮：画布整体重新排布（网格化）
|
||
- 用户要求「把画布整体重新排布一下」，原坐标零散(移动端散在 y=0/944/3028，桌面端散在 y=0/1888，组件混排)。
|
||
|
||
#### 最终网格
|
||
- **移动端(390×844)在上方**，行距 100，列距 60：
|
||
- 第1行 y0：首页4:24/刷题36:13/切错题本40:1/切申论40:100/要闻35:8/模考6:94/计划6:244/我的28:12 (x:0/450/900/1350/1800/2250/2700/3150)
|
||
- 第2行 y944：作答9:1/结果9:49/AI讲解9:96/错题详情12:1/模考录入11:28/申论编辑12:63/周报13:1 (x:0/450/900/1350/1800/2250/2700)
|
||
- 第3行 y1888：空错题29:1/空模考29:25/空计划29:49/TabBar组件4:23 (x:0/450/900/1350)
|
||
- **桌面端(1440×900)在下方**，统一 y2832，列距 60：题库录入6:304/数据中枢6:435/刷题中心44:1/模考45:40/备考计划45:176/要闻45:307/我的45:446/设置45:713/刷题中心错题态48:8/刷题中心申论态48:170/侧边栏组件52:1 (x:0/1500/3000/4500/6000/7500/9000/10500/12000/13500/15000)
|
||
|
||
#### 关键经验
|
||
1. **只动顶层帧 x/y，不改内部**：重排仅调整 21 个顶层节点的 x/y，页面内部结构/内容零改动，避免破坏已编号节点引用。
|
||
2. **行距统一 100 / 列距统一 60**：移动端行 y=0→944→1888→2832，桌面全部 y=2832；列 x 递增 450(移动)/1500(桌面)，帧间留 60px 呼吸空间。
|
||
3. **组件归入所属设备区**：TabBar组件4:23 归移动端第3行末尾，侧边栏组件52:1 归桌面端末尾。
|
||
4. **验证**：截取移动首页/桌面数据中枢/桌面题库录入 3 处确认新坐标渲染正常(8-bit 有效图)，仅位置移动内容不变。
|
||
|
||
### 本轮：版本定稿固化
|
||
- 用户确认「差不多了，这个版本可以固化了」。
|
||
- **交付动作**：
|
||
- 按最新状态统一重新导出全部 28 页高清图(2x)到 deliverables/prototype/，覆盖此前 12:48 的初版图。
|
||
- 清理过渡命名冗余图(精修/删除数据管理 8 张)。
|
||
- 重新生成合并 PDF 概览「备考中枢-全页概览-20260826.pdf」(4MB，含全部页面)。
|
||
- 新增「版本说明-备考中枢-20260826.md」记录版本范围/关键变更/设计规范/交付清单。
|
||
- **最终交付物清单**：桌面 10 PNG + 移动 18 PNG + 1 合并 PDF + 1 版本说明。
|
||
- 抽验移动-我的(个人卡+设置卡+偏好设置卡，无数据操作) 与 桌面-设置(偏好+通知+关于，数据区已删) 确认定稿状态正确。
|
||
|
||
### 本轮：设计规范文档 + 令牌可视化
|
||
- 用户要求「光看图不够直观，设计规范和配色等细节也得提供」。
|
||
- **数据来源（真实提取，非臆造）**：
|
||
- `fetch_variables` 提取 Color 变量集(3:2)，16 个语义色变量：bgCanvas #F7F6F2 / bgCard #FFF / bgSoft #EFEFF5 / primary #2B4C8F / primaryDeep #1B2D5B / primaryBright #3A6BD8 / textPrimary #1A1F2E / textSecondary #6B7280 / textMuted #9CA2AD / borderSubtle #E8E6E0 / success #1B9266 / warning #DC9A1E / danger #D14C55 + 3 浅底(successSoft/warningSoft/dangerSoft)。
|
||
- `get_available_fonts` 确认中文 Sarasa Gothic SC / 数字英文 Inter。
|
||
- 读取 6:437/6:448/6:465 实测排印层级：H1 24px Bold、数据大字 22px Bold(Inter)、卡标题 15px SemiBold、标签 12px、副标题 13px、趋势指数 11px Medium。
|
||
- **交付**：
|
||
- `design-token 设计规范-备考中枢-20260826.md`：完整设计系统文档(理念/色彩/排印/CSS变量/圆角阴影/组件/间距/图标/动效)。
|
||
- show_widget 生成色板+排印可视化图(真实 token)。
|
||
- **经验**：设计规范不能凭空写，必须用 `fetch_variables`+`batch_read` 从画布真实读取变量与字号校准，才与实际原型一致。
|
||
|