Jyotisha/docs/tasks/TASK-chart-dasha-western-redesign-20260924.md

TASK · 星盘页大运 Tab 与西洋盘 Tab 改版（2026-09-24）

原型（产品 09-24 已同意全部设计，相位线一直显示）：https://claude.ai/artifact/DYovEPMqD1xwNgna5xVTre

基线

• origin/staging 当前 head（含已部署 1420471a）。分支 codex/chart-dasha-western-redesign-20260924。
• 串行：排在 TASK-chart-ephemeris-fixes-20260924.md T1（Chara 0 年）合入之后——两单都改 chart-dasha-tab.tsx / chart-view-mapper.ts 的大运显示；本单沿用那一单定下的「0 年照实显示、灰色、不展开」口径。与 TASK-chart-page-skeleton-wait 已合入的西洋骨架（WesternWheelSvg skeleton + EMPTY_WESTERN_WHEEL）必须兼容。

事故实证（按 origin/staging）

大运：frontend/src/components/chart-page/chart-dasha-tab.tsx ChartDashaTab → 两个 Track（Vimshottari / Chara），每段大运 li.chart-page-dasha-period 下平铺全部子运 <ul>：Vimshottari 9×9 = 81 行、Chara 12×12 = 144 行，无折叠、无"现在"摘要、无时间总览。CSS globals.css .chart-page-dasha*。

西洋盘：frontend/src/components/chart-page/western-wheel-svg.tsx：viewBox 0 0 400 400，OUTER=188 / ZODIAC=168 / HOUSE=128 / INNER=78，CSS .chart-page-western-svg text { font-size:16px } 统一 16 号；

• 星座名在 r=178 的 20 单位窄带内，近水平轴时压过两条环线；
• 宫位号放在宫头角度（不是宫中），被宫头线穿过；
• 行星两字中文名在 r=113，与宫位号同一带，无避让——虚构 1990-01-01 12:00 北京实测 23 处标签重叠（摩羯座五星群互相重叠并压宫位号）；
• 「升」字 x = polar(192,180).x - 8 = 0、textAnchor="end" → 画在 viewBox 外；
• 无度数、无逆行标记；SVG 无 max-width，窄屏一栏时盘撑满面板（可达 ~1050px）。
• chart-western-tab.tsx 相位表复用 .chart-page-planet-table（min-width: 34rem、nowrap），侧栏约 480px 时横向溢出；整个 Tab 没有行星位置表。

根因

大运：信息全量平铺、缺层级。西洋盘：固定字号 + 行星与宫位号同圈 + 无碰撞处理 + 标签坐标错误 + 继承了印度盘表格宽度。

决策记录（产品 2026-09-24，照原型）

大运 Tab

• D1 每条轨道顶部「现在」卡：当前大运 / 当前小运 / 小运剩余（月）。
• D2 横向时间条：整个周期按时长分段上色，当前段描边，竖线标今天，轴两端写起止 YYYY.MM。
• D3 大运列表默认折叠，只展开当前段；子运逐行 名称 · YYYY.MM – YYYY.MM，当前子运高亮；日期等宽数字右对齐。
• D4 0 年段：灰色、0 年、不可展开（沿用 chart-ephemeris-fixes D1）。
• D5 布局：≥1024px 左 Vimshottari、右 Chara 并排；窄屏上下排。底部保留双轨说明句（现 dualTrackNote）。
• D6 折叠用原生 <details>/<summary>，不引第三方；当前段 open。

西洋盘 Tab

• D7 盘 viewBox 0 0 520 520，容器 max-width: 520px 居中。三圈：外圈星座（按元素用四个语义色：火 / 土 / 风 / 水，token 化、深浅色各一套）、中圈行星（符号 + 星座内度数，逆行加 ℞）、内圈宫位号（放宫中角度，不压线）。
• D8 行星避让：按黄经排序，相邻显示角 < 11° 时沿圆周推开（迭代），在真实位置画外圈刻度并用细线连到显示位置。
• D9 ASC / MC 在盘内标注，四轴线加粗；不再画盘外「升」。
• D10 相位线一直显示，和谐（三分 / 六分 / 合）绿、紧张（刑 / 冲）红，使用语义 token；点行星或行星表行 → 只高亮该星及其相位，其它变淡，再点取消；相位表同步只列该星相位。
• D11 右侧：要点 chips（上升 / 太阳 / 月亮 / 元素最多 / 星群）→ 新增行星位置表（星体、星座、度数、宫位、逆行）→ 主要相位表（星体对、相位、容许度）→ 口径说明句。表格用新的 .chart-page-western-table，不继承 min-width: 34rem；外包 overflow-x:auto。
• D12 数据全部来自现有 view.western（planets、houses、aspects、ascendantLongitude、MC 若无字段则从第 10 宫头取）；不新增请求、不改接口字段。若缺字段，写进进度记录，不在前端编造。
• D13 骨架兼容：skeleton 模式仍只画三圈与分割线，不画星座名 / 行星 / 宫位号 / 相位。

硬红线

1. 不改 /api/chart-view 与引擎；不改 HEAVY_COMPUTE_PATHS / 并发。
2. 不复制印度盘几何；西洋盘只改 western-wheel-svg.tsx 自身。
3. 新颜色必须是 :root token 且有暗色值；不得在组件里写死色值。
4. 无 spinner；骨架规则不变。44px 触控；断点沿用 1024（星盘既有）。
5. /chart 保持 ○ Static；既有断言三栏；测试总数不低于基线。

任务分解

• T1 大运（chart-dasha-tab.tsx、chart-view-mapper.ts 若需补"当前子运"字段、globals.css）。验收：chart-page-view.test.tsx 渲染 golden（真实引擎 fixture）→ 每轨一个「现在」卡、时间条段数 = 大运数、仅当前段 open、0 年段不可展开；无 81/144 行平铺（未展开段不渲染子运 li，或渲染在关闭的 <details> 内均可，但默认不可见）。
• T2 西洋盘（western-wheel-svg.tsx、chart-western-tab.tsx、globals.css）。验收：纯函数 layoutWesternLabels(planets) 测试——虚构 1990-01-01 golden 下任意两颗行星显示角间距 ≥ 11°、每个标签包围盒在 viewBox 内、宫位号角度 = 宫中；无「升」出界；行星表行数 = 行星数；点选过滤相位表；骨架模式无文字节点。
• T3 记录：DESIGN §15 大运 / 西洋小节（结构、颜色 token、避让规则）；VOICE（「现在」卡文案、「小运剩余 N 个月」）；CHANGELOG；PROGRESS；docs/testing/chart-dasha-western-20260924.md（375 / 1280 宽度；摩羯星群不重叠；点行星过滤；暗色模式元素色可读）。产品改版，不开 BUG 号（西洋溢出若需记账可并入一条 BUG-1029，开工时定）。

让步顺序

1. 避让迭代在极端星群（≥6 颗落 30° 内）仍重叠时，允许第二层半径（两行错开），不得缩小字号到 < 12。
2. 若 view.western 无 MC，允许只标 ASC，并写进进度记录。
3. 不得让步：D8（避让）、D10（相位线常显）、红线 1、红线 3。

开工前置命令

git fetch origin --prune
git log --oneline origin/staging | grep -i "chara\|0 年\|1023"   # 确认 chart-ephemeris-fixes T1 已合入
git worktree add -b codex/chart-dasha-western-redesign-20260924 .worktrees/chart-dasha-western-redesign-20260924 origin/staging
cd .worktrees/chart-dasha-western-redesign-20260924/frontend
./node_modules/.bin/tsc --noEmit && npm run lint && npm test 2>&1 | tail -5