Jesse_ChenandClaude Opus 5.5
b975617603
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017eEAG8HD3mm8gsKXgk8uU8
76 lines
6.8 KiB
Markdown
76 lines
6.8 KiB
Markdown
# 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。
|
||
|
||
## 开工前置命令
|
||
|
||
```bash
|
||
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
|
||
```
|