first
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
---
|
||||
version: alpha
|
||||
name: LLM Wiki Oriental Editorial Atlas
|
||||
description: 东方编辑部与数字山水混合的知识图谱视觉系统。
|
||||
colors:
|
||||
background: "#F4EFE4"
|
||||
surface: "#FFFDF7"
|
||||
text: "#241F1A"
|
||||
muted_text: "#6F6559"
|
||||
border: "#D8CDBB"
|
||||
primary_action: "#8B2E24"
|
||||
success: "#3E6B4B"
|
||||
warning: "#B7791F"
|
||||
danger: "#A23B2A"
|
||||
info: "#315F72"
|
||||
ink: "#241F1A"
|
||||
rice_paper: "#F8F1E4"
|
||||
vellum: "#E9DDC9"
|
||||
cinnabar: "#8B2E24"
|
||||
jade: "#4B7564"
|
||||
mountain_line: "#CFC4B1"
|
||||
constellation: "#315F72"
|
||||
mist: "#ECE5D8"
|
||||
typography:
|
||||
display:
|
||||
fontFamily: "Noto Serif SC"
|
||||
fontSize: "32px"
|
||||
fontWeight: "700"
|
||||
lineHeight: "1.18"
|
||||
title:
|
||||
fontFamily: "Noto Serif SC"
|
||||
fontSize: "22px"
|
||||
fontWeight: "700"
|
||||
lineHeight: "1.28"
|
||||
heading:
|
||||
fontFamily: "Noto Sans SC"
|
||||
fontSize: "16px"
|
||||
fontWeight: "700"
|
||||
lineHeight: "1.45"
|
||||
body:
|
||||
fontFamily: "Noto Sans SC"
|
||||
fontSize: "14px"
|
||||
fontWeight: "400"
|
||||
lineHeight: "1.65"
|
||||
caption:
|
||||
fontFamily: "Noto Sans SC"
|
||||
fontSize: "12px"
|
||||
fontWeight: "400"
|
||||
lineHeight: "1.45"
|
||||
label:
|
||||
fontFamily: "Noto Sans SC"
|
||||
fontSize: "12px"
|
||||
fontWeight: "700"
|
||||
lineHeight: "1.2"
|
||||
rounded:
|
||||
sm: "6px"
|
||||
md: "10px"
|
||||
lg: "18px"
|
||||
pill: "999px"
|
||||
spacing:
|
||||
xs: "4px"
|
||||
sm: "8px"
|
||||
md: "16px"
|
||||
lg: "24px"
|
||||
xl: "36px"
|
||||
components:
|
||||
button-primary:
|
||||
backgroundColor: "#8B2E24"
|
||||
textColor: "#FFFDF7"
|
||||
borderColor: "#8B2E24"
|
||||
panel:
|
||||
backgroundColor: "#FFFDF7"
|
||||
textColor: "#241F1A"
|
||||
borderColor: "#D8CDBB"
|
||||
chip:
|
||||
backgroundColor: "#E9DDC9"
|
||||
textColor: "#241F1A"
|
||||
borderColor: "#D8CDBB"
|
||||
canvas:
|
||||
backgroundColor: "#F4EFE4"
|
||||
textColor: "#241F1A"
|
||||
borderColor: "#CFC4B1"
|
||||
warning-card:
|
||||
backgroundColor: "#F8E8C4"
|
||||
textColor: "#241F1A"
|
||||
borderColor: "#B7791F"
|
||||
design_system:
|
||||
reference_direction:
|
||||
id: enterprise_data_workspace
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
这套视觉系统用于 llm-wiki 的知识图谱 HTML。目标是把图谱从“功能 demo”提升为“可长期使用的高级知识地图”,同时保持搜索、筛选、panel、row、metadata、source、detail 等工作台能力。Reference direction: `enterprise_data_workspace`,并用 `premium_visual_showcase` 的克制展示机制强化中央图谱的首屏舞台感。
|
||||
|
||||
## Visual Theme
|
||||
|
||||
主题是“东方编辑部 × 数字山水”。东方感来自中文编辑排版、文献索引、朱砂批注、纸本地图和档案馆层级;数字感来自图谱节点、关系路径、社区地貌、轻微星图发光和数据状态。不要把东方感做成装饰贴纸,也不要把数字山水做成游戏 UI。
|
||||
|
||||
## Colors
|
||||
|
||||
底色使用米白、宣纸和旧地图册的暖中性色,避免纯白。正文使用墨色 `#241F1A`,弱文本使用 `#6F6559`。主要行动和选中状态使用朱砂 `#8B2E24`,信息状态使用夜青 `#315F72`,成功状态使用青绿 `#3E6B4B`,warning 使用琥珀 `#B7791F`,danger 使用更重的朱红 `#A23B2A`。
|
||||
|
||||
中央图谱可以出现极淡的山水等高线、雾层和社区色块,但所有背景色都必须低对比,不能压过节点、边和标签。
|
||||
|
||||
## Typography
|
||||
|
||||
标题和关键章节可用中文 serif 气质,正文和控件用清晰 sans。不要依赖外部付费字体或网络字体;实现时优先系统字体 fallback。标题要像出版物目录,不要像 marketing hero。节点标签和 metadata 要短、稳、可截断,英文、数字和置信度标签要保持等宽或紧凑节奏。
|
||||
|
||||
## Layout
|
||||
|
||||
整体仍是三层工作台:左侧索引导航,中间图谱画布,右侧详情抽屉。左侧像“文献目录”,中间像“知识舆图”,右侧像“批注札记”。顶栏不要像临时 toolbar,而要像产品标题区,展示知识库名称、当前视图、GitHub/项目入口和图谱状态。
|
||||
|
||||
13 寸屏优先保证图谱和详情可读,panel 宽度要克制。窄屏时不要硬塞三栏,可把左侧导航折叠,详情抽屉变成底部或全屏 detail view。
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
深度来自纸张叠层、细边框、轻阴影和局部墨色压边,不来自厚重玻璃拟态。图谱画布是最底层的地图纸,节点像贴在地图上的索引点,详情 panel 像覆盖其上的札记卡。hover 和 selected 可以增加一层极轻阴影或朱砂描边,但不能让页面变脏。
|
||||
|
||||
## Shapes
|
||||
|
||||
形状要克制:panel 使用 10px 到 18px 圆角,节点可以是圆角卡片、印签或小型地图标注。状态 chip 使用 pill。不要使用过多不规则手绘边框;如果使用 rough.js 质感,只用于少量重点元素,避免整页显得像草稿。
|
||||
|
||||
## Components
|
||||
|
||||
- Search input:default 清爽,hover 增加边框深度,pressed 或 active 显示朱砂细线,disabled 置灰但保留说明,focus 必须有可见 outline,error 显示明确文本。
|
||||
- Node:default 显示类型和短标签,hover 显示关系提示,focus 支持 keyboard 导航,selected 使用朱砂描边和轻微光晕,disabled/unavailable 降低透明度但保留可读标签,error 数据节点要显示警示而不是消失。
|
||||
- Edge:按置信度和权重区分线型;EXTRACTED 稳定,INFERRED 更细或虚线,AMBIGUOUS 用 warning 语义,UNVERIFIED 不应和确认关系混淆。
|
||||
- Detail panel:包含 source、metadata、neighbors、notes 和 actions;row 高度稳定,长文本渐进展开。
|
||||
- Buttons:primary action 用朱砂,default/hover/pressed/disabled/focus/error 状态都要设计;次要按钮只用墨色或细边框。
|
||||
- Data states:loading 显示地图纸上的轻量占位;empty 解释如何生成图谱;success 可以用短状态条;error 给出资源或数据失败原因;permission/unavailable 虽然本地 HTML 很少发生,也要有占位样式。
|
||||
|
||||
## Atlas Grammar
|
||||
|
||||
图谱画布必须像知识舆图,而不是一组浮动信息卡。普通节点默认是地图地名:轻量点位、短标题、低面板感,只承担定位和识别。重要节点是索引签条:用于推荐起点、搜索命中、核心节点和高权重节点,标题更完整,边框和纸面层次更明确。选中节点是朱砂批注:用朱砂描边、批注光晕和右侧札记栏形成呼应,但不能遮住相邻节点。
|
||||
|
||||
密度越高,节点越要减负。少量节点可以保留签条和短元信息;中量节点收为紧凑标签;大量节点只保留点位和少量重点标签。推荐起点、搜索命中和选中节点在任何密度下都不能降级成不可识别的点。
|
||||
|
||||
小地图是地图册右下角的方位图,不是第二张图谱。它使用低对比山水线和社区点位,当前视口用朱砂细框,选中节点用印点标记。小地图只负责定位、反馈当前视口和辅助回到空间关系,不能在视觉重量上抢过中央画布。
|
||||
|
||||
学习队列像书签条或札记条,不像横向 chip。每条最多两行标题,左侧用细线或色点表达类型,第二行承载类型、来源或札记状态。空队列只给真实空态,不放静态示例。
|
||||
|
||||
右侧详情分为常驻札记态和阅读态。首次打开或未选中时,它展示“从这里开始”的预览或当前范围提示;用户点击节点后进入阅读态,标题、来源路径、正文、wikilink 和代码块都要顺畅阅读。关闭阅读或回到全图时,画布重新成为主角。
|
||||
|
||||
首次打开必须是软引导:全局图保持中立,不自动选中推荐起点;推荐起点只以索引签条、弱高亮和右侧预览出现。用户点击推荐起点后,才进入选中节点、邻域高亮和阅读态。
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
桌面采用三栏,平板采用可折叠左栏和右侧抽屉,移动端采用“搜索/列表/详情优先”的降级结构。触控目标至少 44px,touch 状态不能只靠 hover。长标签、长来源名和多社区列表必须截断或折行,不允许横向撑破页面。
|
||||
|
||||
## Motion & Feedback
|
||||
|
||||
动效要像翻页、批注浮现、地图层级淡入,而不是弹跳和炫光。节点 hover 可以有 120-180ms 的轻微提升;抽屉打开使用 220-280ms。必须支持 reduced motion:关闭雾层流动、节点漂浮和过强光晕,只保留颜色、边框和透明度变化。
|
||||
|
||||
## Content Voice
|
||||
|
||||
文案像一位清楚的中文编辑:短句、具体、不卖弄。按钮和状态文案要告诉用户下一步,例如“查看相邻节点”“加入学习队列”“没有匹配结果,清除筛选”。不要用空泛的“AI-powered insight”“探索无限可能”。
|
||||
|
||||
## Do's and Don'ts
|
||||
|
||||
Do:
|
||||
|
||||
- 用文献目录、批注、札记、地图和索引隐喻建立高级感。
|
||||
- 让中央图谱有山水/星图舞台感,但只作为信息的背景层。
|
||||
- 明确区分 loading、empty、success、error、permission 和 unavailable。
|
||||
- 保证 keyboard、focus、44px touch、对比度和 reduced motion。
|
||||
- 使用真实 source、detail、metadata、panel 和 row 信息证明产品成熟。
|
||||
|
||||
Don't:
|
||||
|
||||
- 不复制任何具体品牌、logo、页面、专有字体或视觉系统。
|
||||
- 不做只有氛围、没有产品功能结构的展示页。
|
||||
- 不堆泛化 AI 渐变、玻璃拟态、荧光蓝紫和随机卡片。
|
||||
- 不把中国风做成纹样贴图或毛笔字堆叠。
|
||||
- 不让背景地形线、雾层、发光遮挡节点标签和关系边。
|
||||
|
||||
## Reference Direction
|
||||
|
||||
主参考方向是 `enterprise_data_workspace`。使用它的机制:高密度但清楚的工作台、搜索、filter、panel、row、metadata、source detail、状态和可重复使用效率。辅助参考 `premium_visual_showcase` 的机制:让核心对象在首屏可被检视,用克制的视觉舞台提升记忆点。只借机制,不复制任何外部品牌资产。
|
||||
|
||||
## Agent Guidance
|
||||
|
||||
生成设计时先出 2-3 个视觉 variant,再深入一个方向。所有 variant 都必须保留真实产品结构:左侧索引、中间图谱、右侧详情、搜索、筛选、洞察、图例或学习队列入口。不要生成纯展示图。实现建议优先通过 CSS token、背景层、节点样式、panel 样式和状态样式改造现有自包含 HTML,不要求引入大型框架或外部依赖。
|
||||
@@ -0,0 +1,10 @@
|
||||
# Oriental Atlas Design Reference
|
||||
|
||||
This directory contains the approved design baseline for the graph HTML refactor.
|
||||
|
||||
- `oriental-editorial-atlas.html`: approved prototype to match visually and structurally
|
||||
- `design-brief.md`: product and interaction brief
|
||||
- `DESIGN.md`: visual system and component guidance
|
||||
- `reviews/result-review.md`: prototype review notes and responsive findings
|
||||
|
||||
Implementation work should treat this directory as the local source of truth. Design workspace copies are not implementation branch contracts unless they are synchronized here.
|
||||
@@ -0,0 +1,170 @@
|
||||
# 设计 Brief:llm-wiki 知识图谱 HTML 重设计
|
||||
|
||||
## Project overview
|
||||
|
||||
llm-wiki 是一个把碎片化信息整理成可持续维护知识库的本地工具。当前知识图谱 HTML 已具备搜索、过滤、边权重、洞察面板、社区聚类、学习驾驶舱等功能,但视觉上仍显得像 demo。目标是为知识图谱生成一套可复用的重设计 brief,让后续 AI 设计工具或人工实现能产出更高级、更有识别度的图谱界面。
|
||||
|
||||
## Brief diagnosis
|
||||
|
||||
- 初始分数:42/100。
|
||||
- 初始等级:Weak brief。
|
||||
- 主要风险:只说“不像 demo”会导致下游工具生成泛化科技 UI、空洞发光图、或只换皮不改善产品质感。
|
||||
- 已补齐信息:第一印象、视觉方向、保留程度、输出边界和最终策略已确认。
|
||||
- 当前状态:可以稳定进入设计生成阶段,但仍建议先出 2-3 个视觉稿,不直接锁定最终实现。
|
||||
|
||||
## Target audience
|
||||
|
||||
- 主要用户:正在使用 llm-wiki 的个人学习者、研究者、内容整理者,希望在本地知识库里探索概念、实体、主题和来源关系。
|
||||
- 次要用户:在 README、演示 GIF 或 GitHub 页面上第一次看到 llm-wiki 的潜在安装者。
|
||||
- 使用场景:用户双击本地 HTML,在浏览器中离线探索知识图谱;也可能通过截图/GIF 判断这个项目是否值得安装。
|
||||
- 痛点:现有界面功能足够多,但视觉记忆点弱,容易被看成临时 demo 或开发者测试页。
|
||||
|
||||
## Business goal
|
||||
|
||||
让知识图谱成为 llm-wiki 的旗舰展示面:第一眼建立“这是成熟、用心、有审美的知识产品”的信任感,同时不牺牲真实使用效率。
|
||||
|
||||
## Design goal
|
||||
|
||||
将当前“水彩卡片风”升级为“东方编辑部 × 数字山水”的高级知识地图:既有东方中文编辑感、文献馆气质和朱砂批注细节,也让中央图谱具备山水/星图式舞台感。
|
||||
|
||||
## Core message
|
||||
|
||||
这不是一次性的可视化 demo,而是一张可以长期阅读、探索和维护的个人知识舆图。
|
||||
|
||||
Supporting points:
|
||||
|
||||
- 图谱是知识库的入口,不只是装饰。
|
||||
- 节点、边、置信度、社区和学习队列都要有清楚的信息角色。
|
||||
- 东方感来自排版、留白、批注、纸面层次和地图隐喻,不来自堆砌传统纹样。
|
||||
|
||||
## Required structure
|
||||
|
||||
1. 顶部品牌区:显示知识库标题、图谱定位、GitHub/项目入口和关键状态摘要。
|
||||
2. 左侧导航:社区、聚焦、搜索、学习队列、推荐起点保持清楚,视觉上像文献索引或编辑目录。
|
||||
3. 中央图谱画布:作为视觉主角,加入山水地形线、星图层次、纸面/雾层背景,但不能遮挡节点和边。
|
||||
4. 图谱节点:实体、主题、来源三类节点要有清楚区分;长标签安全截断,hover/focus/selected 状态明确。
|
||||
5. 图谱边:置信度和关系强度要可读;弱关系不应产生视觉噪声。
|
||||
6. 右侧详情抽屉:像札记、批注卡或档案页,包含摘要、来源、相邻节点、学习笔记和操作。
|
||||
7. 二级信息:小地图、洞察、图例、相邻节点可以折叠或弱化,但入口必须明确。
|
||||
8. 空/加载/错误状态:本地 HTML 需要清楚解释数据为空、脚本加载中、资源失败等状态。
|
||||
|
||||
## Visual direction
|
||||
|
||||
选定策略:东方编辑部 × 数字山水。
|
||||
|
||||
Tone keywords:
|
||||
|
||||
- 高级产品感
|
||||
- 中文编辑部
|
||||
- 文献馆
|
||||
- 知识舆图
|
||||
- 朱砂批注
|
||||
- 数字山水
|
||||
- 克制发光
|
||||
- 可长期阅读
|
||||
|
||||
Differentiators:
|
||||
|
||||
- 使用“地图册/档案馆/编辑批注”的系统隐喻,而不是普通 dashboard 卡片。
|
||||
- 中央图谱具备舞台感,但控制面板仍保持产品可用性。
|
||||
- 视觉细节优先服务信息结构:社区像地貌层,边像路径,节点像地名/索引条目,详情像札记。
|
||||
|
||||
Avoid:
|
||||
|
||||
- 泛化 AI 蓝紫渐变。
|
||||
- 过度玻璃拟态。
|
||||
- 卡片随机堆叠。
|
||||
- 装饰性中国风纹样。
|
||||
- 游戏化星图 UI。
|
||||
- 复制任何现成品牌、字体、图标或产品界面。
|
||||
|
||||
## Strategy options
|
||||
|
||||
### A. 东方编辑部 Knowledge Atlas
|
||||
|
||||
最稳的产品方向。保留工具效率,用编辑部、文献馆、批注、索引和知识地图构建高级感。
|
||||
|
||||
### B. 数字山水 Knowledge Constellation
|
||||
|
||||
最有记忆点的视觉方向。用山水等高线、雾层、星图节点和克制发光让首屏摆脱 demo 感。
|
||||
|
||||
### C. 现代文献馆 Research Library
|
||||
|
||||
最耐用的长期使用方向。强调检索、阅读、低疲劳和文档产品质感。
|
||||
|
||||
### D. 东方编辑部 × 数字山水
|
||||
|
||||
本 brief 采用的最终方向。用 A 的产品骨架承载功能,用 B 的首屏氛围提升记忆点。
|
||||
|
||||
## Brand context
|
||||
|
||||
- 品牌名:llm-wiki。
|
||||
- 已有定位:更适合国内用户的 K 神知识库,把碎片化信息变成持续积累、互相链接的知识库。
|
||||
- 现有视觉资产:README 中已有图谱 GIF 和预览图;图谱模板已有纸感、水彩、手绘字体方向,但需要升级。
|
||||
- 品牌语气:温暖、清楚、可信、略有中文编辑感;不要卖弄术语。
|
||||
|
||||
## DESIGN.md reference
|
||||
|
||||
使用本 brief 包内的 `DESIGN.md` 作为视觉系统。主参考方向是 `enterprise_data_workspace`,因为它最适合有搜索、过滤、状态、面板和元数据的工作台;辅助吸收 `premium_visual_showcase` 的克制展示机制,用于中央图谱首屏氛围。
|
||||
|
||||
## Asset list
|
||||
|
||||
- 真实数据:由现有图谱 JSON 注入,节点包含实体、主题、来源、社区、边权重和置信度。
|
||||
- 现有前端能力:D3 图谱、rough.js、marked、DOMPurify、搜索、筛选、抽屉、学习队列、小地图和洞察。
|
||||
- 可用文字资产:知识库标题、节点标签、来源摘要、关系名称、置信度标签。
|
||||
- 不应假设:真实 logo、商业客户 logo、外部插画、外部图片、付费字体。
|
||||
|
||||
## Interaction requirements
|
||||
|
||||
- 搜索输入、社区筛选、聚焦、学习队列、推荐起点必须保持可见或容易发现。
|
||||
- 节点 default、hover、focus、selected、disabled/unavailable 状态要区分清楚。
|
||||
- 节点必须遵守三层视觉语法:普通节点像地图地名,重要节点像索引签条,选中节点像朱砂批注;密集图谱不能把所有节点都渲染成完整卡片。
|
||||
- 小地图必须像地图册方位图:当前视口使用朱砂细框,选中节点使用印点,整体低对比,不抢中央画布。
|
||||
- 学习队列必须像书签条或札记条,长标题可读,不回到横向 chip。
|
||||
- 首次打开必须保持全局图和推荐起点预览,不自动选中推荐起点;用户点击后才进入选中阅读态。
|
||||
- 详情抽屉打开/关闭不能让主画布跳动到不可控;13 寸屏上仍能阅读。
|
||||
- 键盘可访问:搜索、列表项、节点、关闭按钮、主要操作要有可见 focus。
|
||||
- reduced motion 下保留可读状态变化,关闭不必要漂浮、发光或雾层动效。
|
||||
- 移动端可降级为“列表/详情优先,图谱可横向或缩略探索”,不要强行塞满三栏。
|
||||
|
||||
## Constraints
|
||||
|
||||
- 平台:单文件或自包含本地 HTML,双击即可使用。
|
||||
- 技术栈:延续当前 vanilla HTML/CSS/JS + D3 结构;设计稿不能要求引入大型前端框架。
|
||||
- 资源:避免新增外部图片、外部字体或网络依赖;字体使用系统中文 serif/sans fallback。
|
||||
- 响应式:优先 13 寸笔记本和桌面浏览器,兼顾平板/窄屏降级。
|
||||
- 可访问性:文字对比度要足够,交互目标至少 44px,状态不能只靠颜色。
|
||||
- 性能:背景纹理、发光、地形线和动效不能拖慢大图谱渲染。
|
||||
|
||||
## Forbidden directions
|
||||
|
||||
- 不做“炫酷但不可用”的暗色星图。
|
||||
- 不做通用 SaaS 卡片 dashboard。
|
||||
- 不做只换颜色的水彩皮肤。
|
||||
- 不堆龙纹、祥云、印章、毛笔字等表面中国风。
|
||||
- 不复制 Notion、Linear、Apple、Aesop、The New York Times 或任何具体品牌。
|
||||
- 不新增无法离线运行的依赖。
|
||||
|
||||
## Success criteria
|
||||
|
||||
- 首屏 10 秒内能看出这是成熟知识产品,不是 demo。
|
||||
- 首屏 10 秒内能看懂“从这里开始”,但页面没有替用户自动进入选中阅读态。
|
||||
- 截图/GIF 具有明确识别度:东方编辑部、知识地图、朱砂批注、数字山水层次。
|
||||
- 设计验收不只检查按钮和功能存在,也检查节点、小地图、学习队列、右侧札记和首次打开是否保住东方编辑部 × 数字山水身份。
|
||||
- 日常使用中搜索、筛选、节点阅读、详情查看不被装饰干扰。
|
||||
- 13 寸屏上三栏结构不拥挤;窄屏有清楚降级。
|
||||
- 空、加载、错误、无结果和资源失败状态都有设计。
|
||||
- 后续实现能主要通过现有 HTML/CSS/JS 模板落地,不需要重写整个应用。
|
||||
|
||||
## Open questions
|
||||
|
||||
- 最终是否要保留当前“水彩”命名,还是改成“atlas / editorial / shanshui”等新风格名称?
|
||||
- 后续实现时,是否接受为图谱模板增加一个新的 visual variant,而不是覆盖现有 wash 风格?
|
||||
- 是否需要额外为 README 生成一张新的静态预览图或 GIF?
|
||||
|
||||
## Assumptions
|
||||
|
||||
- 本次只生成 brief 包,不直接修改图谱代码。
|
||||
- 用户希望先看到多稿探索,再选定最终实现方向。
|
||||
- 图谱功能结构基本保留,重设计重点是视觉系统、层级、首屏氛围和组件状态。
|
||||
- 设计应默认支持中文知识库,但英文标签也不能崩坏。
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,68 @@
|
||||
# 结果评审
|
||||
|
||||
## 来源包
|
||||
|
||||
- Brief:`.briefpilot/graph-html-redesign/design-brief.json`
|
||||
- DESIGN.md:`.briefpilot/graph-html-redesign/DESIGN.md`
|
||||
- 已选策略:东方编辑部 × 数字山水
|
||||
- 目标工具:generic
|
||||
|
||||
## 评审证据
|
||||
|
||||
- 证据类型:local_file + screenshot_reference
|
||||
- 证据路径:`.briefpilot/graph-html-redesign/oriental-editorial-atlas.html`
|
||||
- 视觉证据:`/tmp/oriental-atlas-desktop.png`、`/tmp/oriental-atlas-tablet.png`、`/tmp/oriental-atlas-mobile.png`、`/tmp/oriental-atlas-mobile-lower.png`
|
||||
- 摘要:本地 HTML 页面已打开并截图检查。桌面宽度 1440、平板宽度 768、手机宽度 375 均无控制台错误、无横向溢出。页面整体采用米白纸面、墨色文字、朱砂强调、青绿/夜青辅助,包含左侧文献索引、中间图谱、右侧札记详情、搜索、筛选、置信度、状态切换和响应式降级。
|
||||
|
||||
## 保留点
|
||||
|
||||
- 视觉方向基本命中:首屏明显比 demo 更像成熟产品,东方编辑部气质来自文献索引、纸面、朱砂线、札记详情,而不是廉价纹样。
|
||||
- 信息结构完整:左侧导航、中间图谱、右侧详情三栏清楚,搜索、社区、学习队列、推荐起点、图例、洞察、相邻节点都有入口。
|
||||
- 设计 token 大体遵循 DESIGN.md:米白、墨色、朱砂、青绿、夜青、旧地图线和细边框体系一致。
|
||||
- 落地性较好:单文件 HTML,无外部网络资源;图谱、状态面板和交互用 vanilla HTML/CSS/JS 实现。
|
||||
- 技术检查通过:桌面、平板、手机截图无横向溢出;控制台无错误。
|
||||
|
||||
## 问题
|
||||
|
||||
| 严重程度 | Brief 依据 | 问题 | 证据 | 建议修改 |
|
||||
|---|---|---|---|---|
|
||||
| medium | `review-checklist.md`:触控目标至少 44px;`DESIGN.md` Responsive Behavior | 移动端部分按钮高度只有 36px,低于 44px 触控目标。 | 浏览器检查显示 `.segmented button` 和 `.state-button` 在 375px 下高 36px,`空` 按钮宽 34px。 | 将所有移动端交互按钮 `min-height` 调整到 44px;状态按钮在窄屏下用 2x2 或单行横向滚动,不要缩成 34x36。 |
|
||||
| medium | `design-brief.json`:首屏要看出“东方编辑部 × 数字山水”;移动端可降级但不能丢主信息 | 手机首屏只看到标题和文献索引,中央图谱和数字山水舞台要下滑很久才出现,移动端第一眼缺少“数字山水”。 | `/tmp/oriental-atlas-mobile.png` 首屏只显示 topbar、搜索、社区和学习队列,未露出图谱。 | 移动端在文献索引上方或标题下方加入一张紧凑“图谱预览卡”,或把主内容顺序改为标题 → 图谱预览 → 文献索引 → 详情。 |
|
||||
| low | `DESIGN.md` Components:Node 有 disabled/unavailable、error 状态;Buttons 有 pressed、disabled、error 状态 | 状态覆盖主要集中在 loading/empty/error,按钮和节点的 disabled/unavailable 展示不够明确。 | 源码有 loading/empty/error 和 selected/focus/hover,但未看到清楚的 disabled/unavailable 示例。 | 增加一个不可用节点或不可用来源示例,并补 `.is-disabled` / `[disabled]` 的视觉规则。 |
|
||||
| low | `review-checklist.md`:截图/GIF 有记忆点,适合 README | 桌面首屏很稳,但“数字山水”的视觉记忆点仍偏背景层,整体更像东方编辑部而不是混合方向。 | `/tmp/oriental-atlas-desktop.png` 中图谱背景线条克制,山水/星图层次存在但不强。 | 可以适度强化中图的地貌层:增加 1-2 层更有识别度的等高线/星点路径,但保持低对比,不遮挡节点。 |
|
||||
|
||||
## 视觉评审
|
||||
|
||||
- 状态:available_model_image
|
||||
- 来源:本地 HTML 截图 `/tmp/oriental-atlas-desktop.png`、`/tmp/oriental-atlas-tablet.png`、`/tmp/oriental-atlas-mobile.png`、`/tmp/oriental-atlas-mobile-lower.png`
|
||||
- 说明:已使用截图进行视觉检查。桌面版符合度高;移动端无横向溢出,但首屏策略弱化了图谱主角,部分按钮小于 44px。
|
||||
|
||||
## 决定
|
||||
|
||||
- 决定:tweak
|
||||
- 策略是否保留:true
|
||||
- 策略变化原因:无需改变策略,问题是局部响应式和状态覆盖不完整。
|
||||
- 提示意图:targeted_modification
|
||||
|
||||
## 下一轮提示摘要
|
||||
|
||||
保留:
|
||||
|
||||
- 保留米白纸面、墨色文字、朱砂强调、青绿/夜青辅助的视觉系统。
|
||||
- 保留左侧文献索引、中间知识舆图、右侧札记详情的桌面三栏结构。
|
||||
- 保留状态面板、置信度图例、社区导航、学习队列和推荐起点。
|
||||
- 保留无外部依赖、单文件 HTML、vanilla CSS/JS 的落地方式。
|
||||
|
||||
修改:
|
||||
|
||||
- 修正移动端触控目标,所有按钮和可点卡片至少 44px 高,窄按钮至少 44px 宽。
|
||||
- 调整移动端内容顺序或增加图谱预览卡,让 375px 首屏能看到“数字山水图谱”的存在。
|
||||
- 增加 disabled/unavailable 节点、来源或按钮状态示例。
|
||||
- 稍微强化中央图谱的山水/星图视觉记忆点,但不要遮挡节点和边。
|
||||
|
||||
验收检查:
|
||||
|
||||
- 375px 截图首屏能看到标题、关键状态和图谱预览,不只看到文献索引。
|
||||
- 所有 `button/input/a` 在移动端可点击区域不小于 44px。
|
||||
- 1440、768、375 三档无横向滚动,无控制台错误。
|
||||
- loading、empty、error、selected、focus、disabled/unavailable 状态都能被看见或触发。
|
||||
Reference in New Issue
Block a user