复古像素风写作仪表盘webnovel-writer Dashboard 前端设计规范PIXEL WRITER HUB实战解读【免费下载链接】webnovel-writer基于 Claude Code 的长篇网文辅助创作系统解决 AI 写作中的「遗忘」和「幻觉」问题支持 200 万字量级 连载创作。项目地址: https://gitcode.com/GitHub_Trending/we/webnovel-writer本文围绕 webnovel-writer/dashboard/frontend/design.md 展开系统解读 PIXEL WRITER HUB 的「复古像素 / 8-bit 游戏」视觉设计规范色板、字体、组件、ECharts 像素主题、六大页面图表规格与大数据量适配策略并结合index.css、charts.js、各页面组件源码逐一印证落地实现。读完你将掌握一套可直接复用的「RPG 状态面板 × 写作仪表盘」前端主题化方案以及长篇小说数据可视化中的分页窗口、时间轴动画与甘特图定制技巧。一、设计定位当 RPG 状态面板遇上写作仪表盘webnovel-writer 是一套面向 200 万字量级长篇连载的 AI 辅助创作系统其 Dashboard 前端PIXEL WRITER HUB承担着章节质量、伏笔回收、角色关系、写作节奏等叙事数据的可视化任务。设计规范文档为其定下的视觉基调是复古像素 / 8-bit 游戏——「像 RPG 状态面板遇上写作仪表盘有趣、nerd、像素级精确」。这一风格的选择并非纯为外观而是有工程上的落点像素级精确要求所有尺寸、间距、描边、对齐都有明确数值无圆角、硬描边、硬阴影天然约束 UI 一致性与长篇小说「分卷、分章、伏笔回收」的叙事结构形成主题呼应——伏笔状态、Strand 编织、审查得分这些概念借用了游戏化的表达方式设计规范中明确列出了「不做的事」从反面锁定了风格边界避免样式漂移。原文档的 HTML 原型预览位于 docs/archive/architecture/dashboard-prototype.html可作为最终实现的视觉参考基准。二、色板体系CSS 变量与语义化色彩设计规范定义了完整色板全部以 CSS 自定义属性形式暴露实际落地在 index.css 的:root中变量色值用途源码确认--bg-main#fff7e8页面背景带 14px 网格线✅:root定义 body 背景--bg-panel#fffdf6表格/面板内背景✅.table-wrap--bg-card#fffaf0卡片背景✅.card--bg-card-2#fff3d5表头、次级卡片✅.data-table th--text-main#2a220f主文字✅ 全局color--text-sub#5d5035次要文字✅.stat-sub等--text-mute#8f7f5c标签、占位✅.stat-label等--accent-blue#26a8ff主强调数值、active 态✅.stat-value、.filter-btn.active--accent-purple#7f5af0次强调Strand、badge✅ Strand 色 /.badge-purple--accent-green#2ec27e成功审查通过、已回收✅.badge-green--accent-amber#f5a524警告紧急伏笔、中等分数✅.badge-amber--accent-red#d7263d危险blocking、超期✅.badge-red--accent-cyan#00b8d4信息badge✅.badge-cyan--border-main#2a220f主边框✅ 卡片/按钮描边--border-soft#8f7f5c次级边框✅.table-wrap等此外index.css 还补充定义了文档未列出的阴影与字体变量构成完整 token 集--shadow-main: 6px 6px 0 #2a220f; /* 卡片硬阴影 */ --shadow-soft: 3px 3px 0 #8f7f5c; /* 次级容器硬阴影 */ --font-display: Press Start 2P, monospace; --font-body: Noto Sans SC, Microsoft YaHei, Segoe UI, sans-serif;页面背景的 14px 网格线由body的双向线性渐变叠加实现background-size: 14px 14px这是「像素级精确」最直观的呈现——网格刻度本身就是设计语言的一部分。2.1 ECharts 系列色序图表系列色序固定为 7 色循环[#26a8ff, #f5a524, #7f5af0, #2ec27e, #d7263d, #00b8d4, #ff5c8a]该色序在 lib/charts.js 的PIXEL_THEME.color中被完整落地保证所有图表与 CSS 色板严格同源。2.2 Strand 专用色Strand 是项目中「线索编织」的叙事概念三种 Strand 拥有固定色值与 CSS 类Strand色值CSS 类Quest#26a8ff.strand-questFire#ff5c8a.strand-fireConstellation#7f5af0.strand-constellation源码中对应 lib/charts.js 的STRAND_COLORS常量对象总览页的 Strand 环形图与节奏雷达页的堆叠柱状图均直接引用它给数据上色。2.3 伏笔状态色伏笔foreshadowing生命周期被映射为四档状态色同时规定了对应的 Badge 类状态色值Badge超期 (overdue)#d7263d.badge-red紧急 (urgent)#f5a524.badge-amber活跃 (active)#26a8ff.badge-blue已回收 (resolved)#2ec27e.badge-green源码中对应 lib/charts.js 的FORESHADOWING_COLORS被伏笔甘特图、紧急伏笔 Top 5 表格、完整伏笔列表共同使用Badge 的 7 种 toneblue/green/amber/red/purple/cyan/neutral映射实现在 components/Badge.jsx 的TONE_CLASS中各 tone 在前景色/背景色上做了对比度调整如.badge-red为#8f1d30前景 #ffe0e5背景保证 12px 字号下仍可读。三、字体体系像素标题 × 中文正文双轨制用途字体规格标题/LogoPress Start 2P11px字间距 0.08em正文/数据Noto Sans SC14pxfont-weight 500–700数字tabular-nums等宽数字避免跳变图例/小标签Noto Sans SC13pxfont-weight 600落地细节字体通过 Google Fontsimport引入index.css中文字体回退链为Noto Sans SC, Microsoft YaHei, Segoe UI, sans-serif.sidebar-header h1即 PIXEL WRITER HUB Logo正是 11px 0.08em 字间距 --font-display的实现设计文档的「小标签」使用.section-label/.mini-label类9px/8px 的Press Start 2P大写、0.1em 字间距用于卡片标题上方的小节标签如REVIEW TREND、ENTITY INDEXtabular-nums通过font-variant-numeric: tabular-nums应用到.stat-value、.data-table、.badge等所有数字密集区域保证翻页、刷新时数字宽度稳定。四、边框与阴影像素风的「硬边」法则卡片3px solid #2a220f边框 6px 6px 0 #2a220f硬阴影无模糊半径次级容器2px solid #8f7f5c边框 3px 3px 0 #8f7f5c硬阴影无圆角0px——像素风不用圆角包括 ECharts 的 tooltip 与 bar所有边框保持硬直线。源码对应.card3px 主边框 --shadow-main与.summary-card/.table-wrap2px 次级边框 --shadow-soft。硬阴影本质上是「偏移复制」主边框色营造出 8-bit 游戏 UI 的浮雕感这也是「不做 soft shadow」规则的直接后果。五、组件规范七大基础组件的像素化实现5.1 Badge2px solid #2a220f边框padding3px 8pxmin-height: 28px配色走.badge-*系列类蓝/绿/琥珀/红/紫/青/中性。实现见 components/Badge.jsx 与 index.csstone 参数直接映射 CSS 类标题属性透传title以支持长文本悬浮查看。5.2 表格.table-wrap包裹2px 次级边框 --bg-panel背景 横向滚动表头.data-table th用--bg-card-2底色 2px 下边框行 hover 高亮#fff4d8支持分页。通用表格组件见 components/DataTable.jsx列配置支持render自定义渲染如嵌入 Badge、章节格式化rowKey支持函数式取值。5.3 进度条12px 高2px 硬边框background: #f8e3b8轨道 linear-gradient(90deg, #26a8ff, #7f5af0)填充渐变进度条是文档明确允许使用渐变的唯一例外。总览页「总字数」统计卡用它展示目标达成率宽度由Math.max(0, Math.min(100, progress))%钳制。5.4 按钮 / 导航2px solid 边框hover 时整体微移translate(-1px, -1px)0.08s 过渡active 态蓝底蓝边。.nav-item侧边导航与.page-btn/.tab-btn/.filter-btn操作按钮共享这套交互语言.page-btn:disabled降为 50% 透明度并禁止点击。5.5 统计卡.stat-card三段式结构.stat-labelmute 色 13px 600标签.stat-valueaccent-blue 28px tabular-nums数值可选.plain变体恢复主文字色.stat-subsub 色 13px 500补充说明。5.6 翻页器 (Pager)布局为← 前 N/页码信息/下一页 →/跳到最新 →按钮统一.page-btn样式。实现见 components/Pager.jsxstepLabel默认为 50即一次翻 50 章页码信息形如「第 X-Y 章 · 第 A/B 页」跳到最新用于从历史窗口快速回到最新章节。5.7 筛选按钮组.filter-groupflex 排列.filter-btn2px 边框active 态蓝底蓝边。伏笔追踪页的「全部 / 紧急 / 活跃 / 已回收」与角色图鉴页的类型筛选均复用它。六、ECharts 像素风主题从 CSS 到 canvas 的统一6.1 主题注册机制图表统一注册为pixel主题所有实例通过echarts.init(el, pixel)使用。落地实现位于 lib/charts.jsconst PIXEL_THEME_NAME pixel const PIXEL_THEME { color: [#26a8ff, #f5a524, #7f5af0, #2ec27e, #d7263d, #00b8d4, #ff5c8a], backgroundColor: transparent, textStyle: { fontFamily: Noto Sans SC, Microsoft YaHei, sans-serif, color: #2a220f }, title: { textStyle: { fontFamily: Press Start 2P, monospace, fontSize: 11, color: #2a220f } }, legend: { textStyle: { color: #5d5035, fontSize: 13, fontWeight: 600 } }, tooltip: { backgroundColor: #fffaf0, borderColor: #2a220f, borderWidth: 2, textStyle: { color: #2a220f, fontSize: 13 }, extraCssText: border-radius:0;box-shadow:3px 3px 0 #2a220f;, }, categoryAxis: { axisLine: { lineStyle: { color: #8f7f5c, width: 2 } }, axisTick: { lineStyle: { color: #8f7f5c } }, axisLabel: { color: #8f7f5c, fontSize: 12 }, splitLine: { lineStyle: { color: #e8dcc4, type: dashed } }, }, valueAxis: { /* 与 categoryAxis 相同 */ }, grid: { left: 50, right: 24, top: 30, bottom: 48 }, } export function ensurePixelTheme() { if (themeRegistered) return echarts.registerTheme(PIXEL_THEME_NAME, PIXEL_THEME) themeRegistered true }关键点ensurePixelTheme()通过模块级themeRegistered标志保证只注册一次避免重复注册告警ECharts 采用按需引入echarts/core charts/components/renderers 手动use仅打包折线、柱状、饼图、箱线、力导向图、custom 系列等实际用到的模块与 CanvasRenderer配合 tree-shaking 控制包体积统一封装组件 components/ChartWrapper.jsx 通过echarts-for-react/lib/core挂载固定themepixel、renderer: canvas、notMergelazyUpdate所有页面图表零配置获得同一主题。6.2 图表通用规则规则说明无圆角tooltip、bar、节点均不用 borderRadius硬描边所有 itemborderColor: #2a220f, borderWidth: 2方形符号折线图数据点symbol: rect, symbolSize: 8线宽 3px折线图lineStyle.width: 3不用 smoothbar 无圆角柱状图默认方形面积填充用 20% 透明度线性渐变到透明markLine均值线/当前章节线用dashed或solid颜色匹配语义这些规则在总览页与节奏雷达页的折线图中得到统一执行例如审查得分趋势的均值线即为#f5a524虚线钩子强度走势则用rgba(245,165,36,0.32) → rgba(245,165,36,0)的纵向线性渐变做面积填充。七、各页面图表规格六大页面的数据叙事Dashboard 共六个页面总览、角色图鉴、节奏雷达、伏笔追踪、文档浏览、系统状态其中前四页承载主要图表。7.1 总览页 (OverviewPage)图表类型数据交互审查得分趋势折线图 (line)每章 overall_score翻页每页 50 章 均值 markLine字数分布柱状图 (bar)按卷汇总字数标签显示万字Strand 整体分布环形图 (pie)quest/fire/constellation 计数百分比标签紧急伏笔 Top 5表格内容、状态、埋设章、目标章、紧急度—实现见 pages/OverviewPage.jsx另有 5 张统计卡总字数 目标进度、当前章节、Story Runtime 健康态、最近 50 章审查均分、紧急伏笔数与「最近 3 章概要」摘要卡。源码细节常量WINDOW_SIZE 50趋势窗口经fetchChapterTrend({ limit: 50, offset: windowIndex * 50 })分页拉取窗口索引归零即回到最新均值 markLine对窗口内review_score求均值后渲染#f5a524虚线label 显示「均值 X」字数柱状图通过 lib/story.js 的groupChaptersByVolume按卷聚合依据progress.volumes_planned的chapters_range解析归属Y 轴 formatter 自动换算「万」Strand 环形图统计strand_tracker.history中各 strand 出现次数标签{b}\n{d}%双行显示名称与占比紧急伏笔 Top 5 按FORESHADOW_PRIORITYoverdue 4 urgent 3 active 2 resolved 1排序同优先级再按urgencyScore降序取前 5 条。7.2 角色图鉴页 (CharactersPage)图表类型数据交互关系图谱graph (力导向)entities relationships章节时间轴滑块 播放/暂停关系图时间轴规格实现见 pages/CharactersPage.jsx滑块input typerange控制当前章节范围 1 ~ 最新章节点按first_appearance 当前章过滤显示主角与关联实体强制可见边按chapter 当前章过滤且用「关系事件」的最新记录覆盖基础关系标签随章节演化如「初识」→「宿敌」播放按钮setInterval(120ms)每拍步进 5 章到最新章自动停止再次点击从第 1 章重播右侧 badge 实时显示当前章节号 可见节点数 关系数节点方形symbol: rect主角加大34px并着金色#f5a524普通节点按 tierS/A 30/26其余 22分级边直线 标签curveness: 0.1类别色角色#26a8ff、势力#7f5af0、地点#2ec27e源码中TYPE_COLORS还扩展了「法宝」#f5a524其余归入「其他」#00b8d4力导向参数repulsion: 360, edgeLength: [120, 200], gravity: 0.08roam: true支持拖拽缩放emphasis.focus: adjacency聚焦相邻节点。此外该页还包含「实体列表 / 关系图谱」双 Tab列表 Tab 为实体索引表 右侧 sticky 详情卡类型、ID、首末现章、当前状态 JSON、状态变化历史详情数据经fetchStateChanges({ entity, limit: 30 })拉取。7.3 节奏雷达页 (PacingPage)图表类型数据交互钩子强度走势面积折线图 (lineareaStyle)每章 hook_strength翻页每页 50 章Strand 分布堆叠柱状图 (bar, stack)逐章 strand 分配翻页字数分布箱线图 (boxplot)按卷分组—实现见 pages/PacingPage.jsx钩子强度 Y 轴范围 0–5axisLabel.formatter将 1/3/5 映射为 weak/medium/strong 文本折线#f5a5243px 20% 透明度面积渐变Strand 堆叠柱每个章节按 strand 归属置 1仅 Quest/Fire/Constellation 三系Y 轴max: 1直观呈现「每章走哪条线」箱线图数据由 lib/charts.js 的buildBoxplotData计算先过滤非有限值、升序排序再用线性插值分位数25%/50%/75%输出[min, q1, median, q3, max]空组回退[0,0,0,0,0]——这是「分卷字数分布」的核心算法也是数据鲁棒性的体现非法值直接剔除。7.4 伏笔追踪页 (ForeshadowingPage)图表类型数据交互伏笔时间线自定义 bar (custom series)埋设章→目标章当前章蓝线 (z:10置顶)按状态着色甘特图规格实现见 pages/ForeshadowingPage.jsxY 轴伏笔名称inverse: true反转紧急在上X 轴章节范围axisLabel.formatter: 第N章Bar 颜色overdue#d7263d、urgent#f5a524、active#26a8ff、resolved#2ec27e当前章节竖线以独立 line 系列挂markLine于xAxis: currentChapter蓝色 3px 实线label.position: end显示「当前 N 章」默认只显示 活跃紧急已回收折叠filter all时rows.filter(row row.level ! resolved)横轴范围自动适配取所有埋设/目标/当前章的最小值与最大值并各外扩 5 章不铺满 1-最大章。自定义渲染核心是renderItem用api.coord将[埋设章, 目标章]映射到像素坐标绘制type: rect矩形高度取api.size([0,1])[1] * 0.55填充色来自每行数据第 4 项按状态映射的FORESHADOWING_COLORS值描边统一#2a220f2px。页面上方另有「总伏笔 / 活跃 / 已回收 / 紧急·超期」四张统计卡与完整的伏笔明细表格状态、埋设章、目标章、紧急度、分值。7.5 系统状态页 (SystemPage)纯统计卡 表格无图表。展示 Story Runtime 健康、fallback 源、环境状态、提交记录、契约摘要等运维信息对应 api.js 的fetchEnvStatus、fetchCommits、fetchContractsSummary等接口延续同一套像素组件语言。八、布局与导航8.1 整体布局侧边栏固定 240px金色渐变#ffe8b8 → #ffe19f3px 右边框主区域可滚动padding 22px统计卡网格repeat(auto-fill, minmax(220px, 1fr))自适应列数图表卡片全宽高度默认 320px关系图等用.tall420px甘特图用.gantt380px。落地于 index.css.app-layout为240px minmax(0,1fr)双栏 grid.main-contentpadding 22px.stat-grid用 auto-fill 网格.chart-box/.chart-box.tall/.chart-box.gantt分别定义 320/420/380px 最小高度。响应式断点分三级≤1180px双列卡片、左右分栏、文件浏览布局坍缩为单列sticky 卡取消吸附≤820px侧边栏移至上方的横向导航grid-template-columns: 1fr导航横向滚动min-width: 128px的导航项图表高度统一降到 300px≤560px统计卡单列滑块、分页按钮全宽铺开卡片 padding 收紧。8.2 导航与路由图标标签路由总览/角色图鉴/characters节奏雷达/pacing伏笔追踪/foreshadowing文档浏览/files⚙️系统状态/system设计文档导航表中的 emoji 为语义占位示意实际实现由 Pixelarticons SVG 组件承担路由配置在 App.jsx 的NAV_ITEMS中图标组件统一从 icons.jsx 导入NavLink通过isActive切换.active态蓝底蓝边。侧边栏底部还有一个 SSE 实时连接指示器wifi/wifi-off图标 「实时同步中 / 实时连接断开」连接状态由 api.js 的subscribeSSE/api/events驱动——写作进程的每次提交都会触发refreshToken递增进而重拉所有页面数据。九、大数据量适配200 万字量级下的渲染策略长篇连载动辄数百章、数千实体设计规范给出四条硬性适配策略全部在源码中落实时序图表窗口化所有时序图表默认只显示最近 50 章窗口通过 Pager 支持「前 50 章 / 下一页 / 跳到最新」配合 API 的limit offset分页fetchChapterTrend({ limit: 50, offset })按卷聚合字数分布不逐章铺开而是经groupChaptersByVolume按卷汇总未分卷章节归入「未分卷」桶并排在最末甘特图默认折叠已回收伏笔时间线默认仅渲染活跃紧急已回收可点筛选展开避免长列表拖垮 custom 渲染时间轴播放步进关系图播放时每 120ms 步进 5 章而非逐章渲染配合startTransition平滑更新 420px 高度的力导向图避免动画卡顿。此外关系数据接口以limit: 1000关系与limit: 5000关系事件上限拉取节点按「首现 ≤ 当前章」过滤进一步压缩单帧渲染量。十、图标体系Pixelarticons 与像素对齐图标统一使用 Pixelarticonspixelarticonsnpm 包24×24 网格无抗锯齿纯像素风SVGfillcurrentColor颜色继承父元素天然适配色板无需额外主题色React 组件按需导入tree-shakeable尺寸使用 24px 整数倍24/48保持像素对齐。导航图标映射页面图标名组件总览chart-barChartBar /角色图鉴usersUsers /节奏雷达trending-upTrendingUp /伏笔追踪bookmarkBookmark /文档浏览folderFolder /系统状态slidersSliders /其他常用图标播放/暂停play/pause翻页chevron-left/chevron-right跳到最新chevrons-right刷新/诊断reload连接状态wifi/wifi-off搜索/筛选search/filter。注意「不做的事」中明确要求不用 emoji 做图标全部使用 Pixelarticons——这保证了 20px 图标在任意color上下文中的一致性。十一、工程运行与依赖Dashboard 前端为 Vite React 19 工程配置见 package.json依赖echarts ^5.6.0、echarts-for-react ^3.0.2、react ^19.0.0、react-dom ^19.0.0、react-router-dom ^7.0.0开发依赖vite ^6.2.0、vitejs/plugin-react ^4.4.0脚本npm run dev本地开发、npm run build生产构建、npm run preview预览构建产物。后端通过 api.js 以相对路径/api/*访问BASE 由同源服务代理核心端点包括/api/project/info、/api/stats/chapter-trend、/api/chapters、/api/entities、/api/relationships、/api/relationship-events、/api/state-changes、/api/foreshadowing相关数据与/api/eventsSSE 推送fetchJSON会自动剔除undefined/null/的查询参数方便统一分页与筛选。部署运行方式可参考仓库内 webnovel-writer/dashboard/main.py 与 webnovel-writer/dashboard/server.py 提供的服务端接入。十二、风格边界「不做的事」清单设计规范以否定句锁定风格边界是保证像素风不跑偏的护栏不用圆角不用渐变背景进度条除外不用 soft shadow不用 glassmorphism / neumorphism不用 emoji 做图标——用 Pixelarticons不用 3D 图表原 react-force-graph-3d 替换为 ECharts 2D graph。最后一条尤其值得注意关系图谱从 3D 力导向库迁移到 ECharts 2D graph既是性能考量章节时间轴逐帧演化的渲染开销也是风格考量3D 旋转、辉光与 8-bit 像素风相悖。这份「不做清单」与前面的正向规范共同构成完整的设计契约任何新页面只需对照色板变量、组件类与图表通用规则即可无缝融入 PIXEL WRITER HUB。参考资料设计规范 webnovel-writer/dashboard/frontend/design.md样式实现 index.css图表主题 lib/charts.js页面组件 OverviewPage.jsx、CharactersPage.jsx、PacingPage.jsx、ForeshadowingPage.jsx布局导航 App.jsx通用组件 ChartWrapper.jsx、Pager.jsx、Badge.jsx聚合逻辑 lib/story.js。【免费下载链接】webnovel-writer基于 Claude Code 的长篇网文辅助创作系统解决 AI 写作中的「遗忘」和「幻觉」问题支持 200 万字量级 连载创作。项目地址: https://gitcode.com/GitHub_Trending/we/webnovel-writer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 复古像素风写作仪表盘：webnovel-writer Dashboard 前端设计规范（PIXEL WRITER HUB）实战解读
复古像素风写作仪表盘webnovel-writer Dashboard 前端设计规范PIXEL WRITER HUB实战解读【免费下载链接】webnovel-writer基于 Claude Code 的长篇网文辅助创作系统解决 AI 写作中的「遗忘」和「幻觉」问题支持 200 万字量级 连载创作。项目地址: https://gitcode.com/GitHub_Trending/we/webnovel-writer本文围绕 webnovel-writer/dashboard/frontend/design.md 展开系统解读 PIXEL WRITER HUB 的「复古像素 / 8-bit 游戏」视觉设计规范色板、字体、组件、ECharts 像素主题、六大页面图表规格与大数据量适配策略并结合index.css、charts.js、各页面组件源码逐一印证落地实现。读完你将掌握一套可直接复用的「RPG 状态面板 × 写作仪表盘」前端主题化方案以及长篇小说数据可视化中的分页窗口、时间轴动画与甘特图定制技巧。一、设计定位当 RPG 状态面板遇上写作仪表盘webnovel-writer 是一套面向 200 万字量级长篇连载的 AI 辅助创作系统其 Dashboard 前端PIXEL WRITER HUB承担着章节质量、伏笔回收、角色关系、写作节奏等叙事数据的可视化任务。设计规范文档为其定下的视觉基调是复古像素 / 8-bit 游戏——「像 RPG 状态面板遇上写作仪表盘有趣、nerd、像素级精确」。这一风格的选择并非纯为外观而是有工程上的落点像素级精确要求所有尺寸、间距、描边、对齐都有明确数值无圆角、硬描边、硬阴影天然约束 UI 一致性与长篇小说「分卷、分章、伏笔回收」的叙事结构形成主题呼应——伏笔状态、Strand 编织、审查得分这些概念借用了游戏化的表达方式设计规范中明确列出了「不做的事」从反面锁定了风格边界避免样式漂移。原文档的 HTML 原型预览位于 docs/archive/architecture/dashboard-prototype.html可作为最终实现的视觉参考基准。二、色板体系CSS 变量与语义化色彩设计规范定义了完整色板全部以 CSS 自定义属性形式暴露实际落地在 index.css 的:root中变量色值用途源码确认--bg-main#fff7e8页面背景带 14px 网格线✅:root定义 body 背景--bg-panel#fffdf6表格/面板内背景✅.table-wrap--bg-card#fffaf0卡片背景✅.card--bg-card-2#fff3d5表头、次级卡片✅.data-table th--text-main#2a220f主文字✅ 全局color--text-sub#5d5035次要文字✅.stat-sub等--text-mute#8f7f5c标签、占位✅.stat-label等--accent-blue#26a8ff主强调数值、active 态✅.stat-value、.filter-btn.active--accent-purple#7f5af0次强调Strand、badge✅ Strand 色 /.badge-purple--accent-green#2ec27e成功审查通过、已回收✅.badge-green--accent-amber#f5a524警告紧急伏笔、中等分数✅.badge-amber--accent-red#d7263d危险blocking、超期✅.badge-red--accent-cyan#00b8d4信息badge✅.badge-cyan--border-main#2a220f主边框✅ 卡片/按钮描边--border-soft#8f7f5c次级边框✅.table-wrap等此外index.css 还补充定义了文档未列出的阴影与字体变量构成完整 token 集--shadow-main: 6px 6px 0 #2a220f; /* 卡片硬阴影 */ --shadow-soft: 3px 3px 0 #8f7f5c; /* 次级容器硬阴影 */ --font-display: Press Start 2P, monospace; --font-body: Noto Sans SC, Microsoft YaHei, Segoe UI, sans-serif;页面背景的 14px 网格线由body的双向线性渐变叠加实现background-size: 14px 14px这是「像素级精确」最直观的呈现——网格刻度本身就是设计语言的一部分。2.1 ECharts 系列色序图表系列色序固定为 7 色循环[#26a8ff, #f5a524, #7f5af0, #2ec27e, #d7263d, #00b8d4, #ff5c8a]该色序在 lib/charts.js 的PIXEL_THEME.color中被完整落地保证所有图表与 CSS 色板严格同源。2.2 Strand 专用色Strand 是项目中「线索编织」的叙事概念三种 Strand 拥有固定色值与 CSS 类Strand色值CSS 类Quest#26a8ff.strand-questFire#ff5c8a.strand-fireConstellation#7f5af0.strand-constellation源码中对应 lib/charts.js 的STRAND_COLORS常量对象总览页的 Strand 环形图与节奏雷达页的堆叠柱状图均直接引用它给数据上色。2.3 伏笔状态色伏笔foreshadowing生命周期被映射为四档状态色同时规定了对应的 Badge 类状态色值Badge超期 (overdue)#d7263d.badge-red紧急 (urgent)#f5a524.badge-amber活跃 (active)#26a8ff.badge-blue已回收 (resolved)#2ec27e.badge-green源码中对应 lib/charts.js 的FORESHADOWING_COLORS被伏笔甘特图、紧急伏笔 Top 5 表格、完整伏笔列表共同使用Badge 的 7 种 toneblue/green/amber/red/purple/cyan/neutral映射实现在 components/Badge.jsx 的TONE_CLASS中各 tone 在前景色/背景色上做了对比度调整如.badge-red为#8f1d30前景 #ffe0e5背景保证 12px 字号下仍可读。三、字体体系像素标题 × 中文正文双轨制用途字体规格标题/LogoPress Start 2P11px字间距 0.08em正文/数据Noto Sans SC14pxfont-weight 500–700数字tabular-nums等宽数字避免跳变图例/小标签Noto Sans SC13pxfont-weight 600落地细节字体通过 Google Fontsimport引入index.css中文字体回退链为Noto Sans SC, Microsoft YaHei, Segoe UI, sans-serif.sidebar-header h1即 PIXEL WRITER HUB Logo正是 11px 0.08em 字间距 --font-display的实现设计文档的「小标签」使用.section-label/.mini-label类9px/8px 的Press Start 2P大写、0.1em 字间距用于卡片标题上方的小节标签如REVIEW TREND、ENTITY INDEXtabular-nums通过font-variant-numeric: tabular-nums应用到.stat-value、.data-table、.badge等所有数字密集区域保证翻页、刷新时数字宽度稳定。四、边框与阴影像素风的「硬边」法则卡片3px solid #2a220f边框 6px 6px 0 #2a220f硬阴影无模糊半径次级容器2px solid #8f7f5c边框 3px 3px 0 #8f7f5c硬阴影无圆角0px——像素风不用圆角包括 ECharts 的 tooltip 与 bar所有边框保持硬直线。源码对应.card3px 主边框 --shadow-main与.summary-card/.table-wrap2px 次级边框 --shadow-soft。硬阴影本质上是「偏移复制」主边框色营造出 8-bit 游戏 UI 的浮雕感这也是「不做 soft shadow」规则的直接后果。五、组件规范七大基础组件的像素化实现5.1 Badge2px solid #2a220f边框padding3px 8pxmin-height: 28px配色走.badge-*系列类蓝/绿/琥珀/红/紫/青/中性。实现见 components/Badge.jsx 与 index.csstone 参数直接映射 CSS 类标题属性透传title以支持长文本悬浮查看。5.2 表格.table-wrap包裹2px 次级边框 --bg-panel背景 横向滚动表头.data-table th用--bg-card-2底色 2px 下边框行 hover 高亮#fff4d8支持分页。通用表格组件见 components/DataTable.jsx列配置支持render自定义渲染如嵌入 Badge、章节格式化rowKey支持函数式取值。5.3 进度条12px 高2px 硬边框background: #f8e3b8轨道 linear-gradient(90deg, #26a8ff, #7f5af0)填充渐变进度条是文档明确允许使用渐变的唯一例外。总览页「总字数」统计卡用它展示目标达成率宽度由Math.max(0, Math.min(100, progress))%钳制。5.4 按钮 / 导航2px solid 边框hover 时整体微移translate(-1px, -1px)0.08s 过渡active 态蓝底蓝边。.nav-item侧边导航与.page-btn/.tab-btn/.filter-btn操作按钮共享这套交互语言.page-btn:disabled降为 50% 透明度并禁止点击。5.5 统计卡.stat-card三段式结构.stat-labelmute 色 13px 600标签.stat-valueaccent-blue 28px tabular-nums数值可选.plain变体恢复主文字色.stat-subsub 色 13px 500补充说明。5.6 翻页器 (Pager)布局为← 前 N/页码信息/下一页 →/跳到最新 →按钮统一.page-btn样式。实现见 components/Pager.jsxstepLabel默认为 50即一次翻 50 章页码信息形如「第 X-Y 章 · 第 A/B 页」跳到最新用于从历史窗口快速回到最新章节。5.7 筛选按钮组.filter-groupflex 排列.filter-btn2px 边框active 态蓝底蓝边。伏笔追踪页的「全部 / 紧急 / 活跃 / 已回收」与角色图鉴页的类型筛选均复用它。六、ECharts 像素风主题从 CSS 到 canvas 的统一6.1 主题注册机制图表统一注册为pixel主题所有实例通过echarts.init(el, pixel)使用。落地实现位于 lib/charts.jsconst PIXEL_THEME_NAME pixel const PIXEL_THEME { color: [#26a8ff, #f5a524, #7f5af0, #2ec27e, #d7263d, #00b8d4, #ff5c8a], backgroundColor: transparent, textStyle: { fontFamily: Noto Sans SC, Microsoft YaHei, sans-serif, color: #2a220f }, title: { textStyle: { fontFamily: Press Start 2P, monospace, fontSize: 11, color: #2a220f } }, legend: { textStyle: { color: #5d5035, fontSize: 13, fontWeight: 600 } }, tooltip: { backgroundColor: #fffaf0, borderColor: #2a220f, borderWidth: 2, textStyle: { color: #2a220f, fontSize: 13 }, extraCssText: border-radius:0;box-shadow:3px 3px 0 #2a220f;, }, categoryAxis: { axisLine: { lineStyle: { color: #8f7f5c, width: 2 } }, axisTick: { lineStyle: { color: #8f7f5c } }, axisLabel: { color: #8f7f5c, fontSize: 12 }, splitLine: { lineStyle: { color: #e8dcc4, type: dashed } }, }, valueAxis: { /* 与 categoryAxis 相同 */ }, grid: { left: 50, right: 24, top: 30, bottom: 48 }, } export function ensurePixelTheme() { if (themeRegistered) return echarts.registerTheme(PIXEL_THEME_NAME, PIXEL_THEME) themeRegistered true }关键点ensurePixelTheme()通过模块级themeRegistered标志保证只注册一次避免重复注册告警ECharts 采用按需引入echarts/core charts/components/renderers 手动use仅打包折线、柱状、饼图、箱线、力导向图、custom 系列等实际用到的模块与 CanvasRenderer配合 tree-shaking 控制包体积统一封装组件 components/ChartWrapper.jsx 通过echarts-for-react/lib/core挂载固定themepixel、renderer: canvas、notMergelazyUpdate所有页面图表零配置获得同一主题。6.2 图表通用规则规则说明无圆角tooltip、bar、节点均不用 borderRadius硬描边所有 itemborderColor: #2a220f, borderWidth: 2方形符号折线图数据点symbol: rect, symbolSize: 8线宽 3px折线图lineStyle.width: 3不用 smoothbar 无圆角柱状图默认方形面积填充用 20% 透明度线性渐变到透明markLine均值线/当前章节线用dashed或solid颜色匹配语义这些规则在总览页与节奏雷达页的折线图中得到统一执行例如审查得分趋势的均值线即为#f5a524虚线钩子强度走势则用rgba(245,165,36,0.32) → rgba(245,165,36,0)的纵向线性渐变做面积填充。七、各页面图表规格六大页面的数据叙事Dashboard 共六个页面总览、角色图鉴、节奏雷达、伏笔追踪、文档浏览、系统状态其中前四页承载主要图表。7.1 总览页 (OverviewPage)图表类型数据交互审查得分趋势折线图 (line)每章 overall_score翻页每页 50 章 均值 markLine字数分布柱状图 (bar)按卷汇总字数标签显示万字Strand 整体分布环形图 (pie)quest/fire/constellation 计数百分比标签紧急伏笔 Top 5表格内容、状态、埋设章、目标章、紧急度—实现见 pages/OverviewPage.jsx另有 5 张统计卡总字数 目标进度、当前章节、Story Runtime 健康态、最近 50 章审查均分、紧急伏笔数与「最近 3 章概要」摘要卡。源码细节常量WINDOW_SIZE 50趋势窗口经fetchChapterTrend({ limit: 50, offset: windowIndex * 50 })分页拉取窗口索引归零即回到最新均值 markLine对窗口内review_score求均值后渲染#f5a524虚线label 显示「均值 X」字数柱状图通过 lib/story.js 的groupChaptersByVolume按卷聚合依据progress.volumes_planned的chapters_range解析归属Y 轴 formatter 自动换算「万」Strand 环形图统计strand_tracker.history中各 strand 出现次数标签{b}\n{d}%双行显示名称与占比紧急伏笔 Top 5 按FORESHADOW_PRIORITYoverdue 4 urgent 3 active 2 resolved 1排序同优先级再按urgencyScore降序取前 5 条。7.2 角色图鉴页 (CharactersPage)图表类型数据交互关系图谱graph (力导向)entities relationships章节时间轴滑块 播放/暂停关系图时间轴规格实现见 pages/CharactersPage.jsx滑块input typerange控制当前章节范围 1 ~ 最新章节点按first_appearance 当前章过滤显示主角与关联实体强制可见边按chapter 当前章过滤且用「关系事件」的最新记录覆盖基础关系标签随章节演化如「初识」→「宿敌」播放按钮setInterval(120ms)每拍步进 5 章到最新章自动停止再次点击从第 1 章重播右侧 badge 实时显示当前章节号 可见节点数 关系数节点方形symbol: rect主角加大34px并着金色#f5a524普通节点按 tierS/A 30/26其余 22分级边直线 标签curveness: 0.1类别色角色#26a8ff、势力#7f5af0、地点#2ec27e源码中TYPE_COLORS还扩展了「法宝」#f5a524其余归入「其他」#00b8d4力导向参数repulsion: 360, edgeLength: [120, 200], gravity: 0.08roam: true支持拖拽缩放emphasis.focus: adjacency聚焦相邻节点。此外该页还包含「实体列表 / 关系图谱」双 Tab列表 Tab 为实体索引表 右侧 sticky 详情卡类型、ID、首末现章、当前状态 JSON、状态变化历史详情数据经fetchStateChanges({ entity, limit: 30 })拉取。7.3 节奏雷达页 (PacingPage)图表类型数据交互钩子强度走势面积折线图 (lineareaStyle)每章 hook_strength翻页每页 50 章Strand 分布堆叠柱状图 (bar, stack)逐章 strand 分配翻页字数分布箱线图 (boxplot)按卷分组—实现见 pages/PacingPage.jsx钩子强度 Y 轴范围 0–5axisLabel.formatter将 1/3/5 映射为 weak/medium/strong 文本折线#f5a5243px 20% 透明度面积渐变Strand 堆叠柱每个章节按 strand 归属置 1仅 Quest/Fire/Constellation 三系Y 轴max: 1直观呈现「每章走哪条线」箱线图数据由 lib/charts.js 的buildBoxplotData计算先过滤非有限值、升序排序再用线性插值分位数25%/50%/75%输出[min, q1, median, q3, max]空组回退[0,0,0,0,0]——这是「分卷字数分布」的核心算法也是数据鲁棒性的体现非法值直接剔除。7.4 伏笔追踪页 (ForeshadowingPage)图表类型数据交互伏笔时间线自定义 bar (custom series)埋设章→目标章当前章蓝线 (z:10置顶)按状态着色甘特图规格实现见 pages/ForeshadowingPage.jsxY 轴伏笔名称inverse: true反转紧急在上X 轴章节范围axisLabel.formatter: 第N章Bar 颜色overdue#d7263d、urgent#f5a524、active#26a8ff、resolved#2ec27e当前章节竖线以独立 line 系列挂markLine于xAxis: currentChapter蓝色 3px 实线label.position: end显示「当前 N 章」默认只显示 活跃紧急已回收折叠filter all时rows.filter(row row.level ! resolved)横轴范围自动适配取所有埋设/目标/当前章的最小值与最大值并各外扩 5 章不铺满 1-最大章。自定义渲染核心是renderItem用api.coord将[埋设章, 目标章]映射到像素坐标绘制type: rect矩形高度取api.size([0,1])[1] * 0.55填充色来自每行数据第 4 项按状态映射的FORESHADOWING_COLORS值描边统一#2a220f2px。页面上方另有「总伏笔 / 活跃 / 已回收 / 紧急·超期」四张统计卡与完整的伏笔明细表格状态、埋设章、目标章、紧急度、分值。7.5 系统状态页 (SystemPage)纯统计卡 表格无图表。展示 Story Runtime 健康、fallback 源、环境状态、提交记录、契约摘要等运维信息对应 api.js 的fetchEnvStatus、fetchCommits、fetchContractsSummary等接口延续同一套像素组件语言。八、布局与导航8.1 整体布局侧边栏固定 240px金色渐变#ffe8b8 → #ffe19f3px 右边框主区域可滚动padding 22px统计卡网格repeat(auto-fill, minmax(220px, 1fr))自适应列数图表卡片全宽高度默认 320px关系图等用.tall420px甘特图用.gantt380px。落地于 index.css.app-layout为240px minmax(0,1fr)双栏 grid.main-contentpadding 22px.stat-grid用 auto-fill 网格.chart-box/.chart-box.tall/.chart-box.gantt分别定义 320/420/380px 最小高度。响应式断点分三级≤1180px双列卡片、左右分栏、文件浏览布局坍缩为单列sticky 卡取消吸附≤820px侧边栏移至上方的横向导航grid-template-columns: 1fr导航横向滚动min-width: 128px的导航项图表高度统一降到 300px≤560px统计卡单列滑块、分页按钮全宽铺开卡片 padding 收紧。8.2 导航与路由图标标签路由总览/角色图鉴/characters节奏雷达/pacing伏笔追踪/foreshadowing文档浏览/files⚙️系统状态/system设计文档导航表中的 emoji 为语义占位示意实际实现由 Pixelarticons SVG 组件承担路由配置在 App.jsx 的NAV_ITEMS中图标组件统一从 icons.jsx 导入NavLink通过isActive切换.active态蓝底蓝边。侧边栏底部还有一个 SSE 实时连接指示器wifi/wifi-off图标 「实时同步中 / 实时连接断开」连接状态由 api.js 的subscribeSSE/api/events驱动——写作进程的每次提交都会触发refreshToken递增进而重拉所有页面数据。九、大数据量适配200 万字量级下的渲染策略长篇连载动辄数百章、数千实体设计规范给出四条硬性适配策略全部在源码中落实时序图表窗口化所有时序图表默认只显示最近 50 章窗口通过 Pager 支持「前 50 章 / 下一页 / 跳到最新」配合 API 的limit offset分页fetchChapterTrend({ limit: 50, offset })按卷聚合字数分布不逐章铺开而是经groupChaptersByVolume按卷汇总未分卷章节归入「未分卷」桶并排在最末甘特图默认折叠已回收伏笔时间线默认仅渲染活跃紧急已回收可点筛选展开避免长列表拖垮 custom 渲染时间轴播放步进关系图播放时每 120ms 步进 5 章而非逐章渲染配合startTransition平滑更新 420px 高度的力导向图避免动画卡顿。此外关系数据接口以limit: 1000关系与limit: 5000关系事件上限拉取节点按「首现 ≤ 当前章」过滤进一步压缩单帧渲染量。十、图标体系Pixelarticons 与像素对齐图标统一使用 Pixelarticonspixelarticonsnpm 包24×24 网格无抗锯齿纯像素风SVGfillcurrentColor颜色继承父元素天然适配色板无需额外主题色React 组件按需导入tree-shakeable尺寸使用 24px 整数倍24/48保持像素对齐。导航图标映射页面图标名组件总览chart-barChartBar /角色图鉴usersUsers /节奏雷达trending-upTrendingUp /伏笔追踪bookmarkBookmark /文档浏览folderFolder /系统状态slidersSliders /其他常用图标播放/暂停play/pause翻页chevron-left/chevron-right跳到最新chevrons-right刷新/诊断reload连接状态wifi/wifi-off搜索/筛选search/filter。注意「不做的事」中明确要求不用 emoji 做图标全部使用 Pixelarticons——这保证了 20px 图标在任意color上下文中的一致性。十一、工程运行与依赖Dashboard 前端为 Vite React 19 工程配置见 package.json依赖echarts ^5.6.0、echarts-for-react ^3.0.2、react ^19.0.0、react-dom ^19.0.0、react-router-dom ^7.0.0开发依赖vite ^6.2.0、vitejs/plugin-react ^4.4.0脚本npm run dev本地开发、npm run build生产构建、npm run preview预览构建产物。后端通过 api.js 以相对路径/api/*访问BASE 由同源服务代理核心端点包括/api/project/info、/api/stats/chapter-trend、/api/chapters、/api/entities、/api/relationships、/api/relationship-events、/api/state-changes、/api/foreshadowing相关数据与/api/eventsSSE 推送fetchJSON会自动剔除undefined/null/的查询参数方便统一分页与筛选。部署运行方式可参考仓库内 webnovel-writer/dashboard/main.py 与 webnovel-writer/dashboard/server.py 提供的服务端接入。十二、风格边界「不做的事」清单设计规范以否定句锁定风格边界是保证像素风不跑偏的护栏不用圆角不用渐变背景进度条除外不用 soft shadow不用 glassmorphism / neumorphism不用 emoji 做图标——用 Pixelarticons不用 3D 图表原 react-force-graph-3d 替换为 ECharts 2D graph。最后一条尤其值得注意关系图谱从 3D 力导向库迁移到 ECharts 2D graph既是性能考量章节时间轴逐帧演化的渲染开销也是风格考量3D 旋转、辉光与 8-bit 像素风相悖。这份「不做清单」与前面的正向规范共同构成完整的设计契约任何新页面只需对照色板变量、组件类与图表通用规则即可无缝融入 PIXEL WRITER HUB。参考资料设计规范 webnovel-writer/dashboard/frontend/design.md样式实现 index.css图表主题 lib/charts.js页面组件 OverviewPage.jsx、CharactersPage.jsx、PacingPage.jsx、ForeshadowingPage.jsx布局导航 App.jsx通用组件 ChartWrapper.jsx、Pager.jsx、Badge.jsx聚合逻辑 lib/story.js。【免费下载链接】webnovel-writer基于 Claude Code 的长篇网文辅助创作系统解决 AI 写作中的「遗忘」和「幻觉」问题支持 200 万字量级 连载创作。项目地址: https://gitcode.com/GitHub_Trending/we/webnovel-writer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考