guanwei 1.1.1

package/src/components/arts/QimenArt.tsx

@@ -0,0 +1,86 @@
+// 奇门遁甲：起局面板 + 九宫盘渲染
+import { useState } from 'react';
+import { qimenCalc } from '@core/engine/qimen';
+import type { QimenResult } from '@core/types';
+import { ResultCard } from '@/components/ResultCard';
+import SongSelect from '@/components/SongSelect';
+
+const USES = ['择时出行', '谋事求财', '讼事纠纷', '考试功名', '婚恋姻缘', '疾病求医', '其他'];
+const QM_POS: Record<number, [number, number]> = { 1: [0, 2], 8: [1, 2], 3: [2, 2], 4: [2, 1], 5: [1, 1], 9: [2, 0], 2: [0, 0], 7: [1, 0], 6: [0, 1] };
+const QM_NAME: Record<number, string> = { 1: '坎', 2: '坤', 3: '震', 4: '巽', 5: '中', 6: '乾', 7: '兑', 8: '艮', 9: '离' };
+
+function nowLocal() {
+  const d = new Date();
+  const p = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+interface PanelProps { onDivine: (inputs: unknown, profile?: unknown, question?: string) => void; }
+
+export function QimenPanel({ onDivine }: PanelProps) {
+  const [dt, setDt] = useState(nowLocal());
+  const [use, setUse] = useState('择时出行');
+  const [question, setQuestion] = useState('');
+  const go = () => onDivine({ datetime: dt }, undefined, question.trim());
+  return (
+    <>
+      <div className="field"><label htmlFor="qm-datetime">用事时刻（公历）</label>
+        <input className="input-line" type="datetime-local" id="qm-datetime" value={dt} onChange={e => setDt(e.target.value)} /></div>
+      <div className="field"><label htmlFor="qm-use">所问之属</label>
+        <SongSelect id="qm-use" value={use} options={USES.map(u => ({ value: u, label: u }))} onChange={setUse} />
+      </div>
+      <div className="field"><label htmlFor="q-input">所问之事</label>
+        <input className="input-line" id="q-input" placeholder="默念所问，书之于此…" maxLength={60} value={question} onChange={e => setQuestion(e.target.value)} />
+      </div>
+      <button className="btn-divine" onClick={go}>起 局<span className="small">定时 · 定局 · 布三奇六仪</span></button>
+      <p className="hint" style={{ marginTop: '.8rem' }}>节气取精确万年历定阴阳遁，三候取局，九宫布盘。</p>
+    </>
+  );
+}
+
+export function QimenResultView({ data }: { data: QimenResult }) {
+  const r = data;
+  return (
+    <>
+      <ResultCard title={`${r.jqName} · ${r.yin ? '阴遁' : '阳遁'}${r.ju}局 · ${r.dayGZ}日 ${r.hourGZ}时`}>
+        <p>旬首 <strong>{r.xunshouName}</strong>（{r.xunShou}），值符 <strong>{r.zfStar}</strong>，值使 <strong>{r.zsMen}</strong>。</p>
+        <p>三奇六仪以 {r.yin ? '逆' : '顺'}布于九宫，{r.yin ? '阴遁主静，宜守' : '阳遁主动，宜进'}。用神所临之宫，即事之机枢。</p>
+      </ResultCard>
+      <div className="result-card">
+        <h3>九宫盘</h3>
+        <div className="qimen-grid" style={{ marginTop: '1rem' }}>
+          {[1, 8, 3, 4, 9, 2, 7, 6, 5].map(p => {
+            const cell = r.pan[p];
+            const [c, rw] = QM_POS[p];
+            return (
+              <div className="qm-cell" key={p} style={{ gridColumn: c + 1, gridRow: rw + 1 }}>
+                <div className="qm-name">{QM_NAME[p]}{p === 5 ? ' · 中' : ''}</div>
+                <div className="qm-items">{p === 5 ? '中五寄坤' : `${cell.yi} · ${cell.men}门`}</div>
+                <div className="qm-star">{p === 5 ? '天禽' : cell.star}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <ResultCard title="用事之示">
+        <p>九宫之中，值符 {r.zfStar} 所在之{QM_NAME[r.zfPalace]}宫为发端；{r.zsMen}门为使，主行事之出入。择时用事，宜察 {r.yin ? '开、休、生' : '景、惊、伤'} 之吉凶（简示）。</p>
+        <p className="mt-2"><strong>用神参详：</strong>{qimenAdvice(r)}</p>
+      </ResultCard>
+    </>
+  );
+}
+// 奇门用神参详（值符宫/值使门/门星组合，现代语言）
+function qimenAdvice(r: any): string {
+  const dirMap: Record<number, string> = { 1: '北', 2: '西南', 3: '东', 4: '东南', 5: '中', 6: '西北', 7: '西', 8: '东北', 9: '南' };
+  const parts: string[] = [];
+  parts.push('值符' + r.zfStar + '落' + QM_NAME[r.zfPalace] + '宫（' + dirMap[r.zfPalace] + '方），为当下气场之枢纽，谋事可借' + dirMap[r.zfPalace] + '方之势。');
+  const door: Record<string, string> = {
+    开: '开门吉门，主动通达，宜开创进取', 休: '休门吉门，主修养安顿，宜休整待机',
+    生: '生门吉门，主生机财源，宜经营求财', 伤: '伤门凶门，主损伤争斗，宜避其锋',
+    杜: '杜门平门，主闭塞隐藏，宜守不宜攻', 景: '景门平门，主文书声名，宜宣传谋名',
+    死: '死门凶门，主停滞死寂，宜止不宜行', 惊: '惊门凶门，主惊恐口舌，宜慎言防变',
+  };
+  parts.push('值使' + r.zsMen + '门，' + (door[r.zsMen] || '主行事出入') + '。');
+  parts.push(r.yin ? '阴遁之局，气机内收，宜守成蓄势，谋定后动。' : '阳遁之局，气机外放，宜主动作为，顺势而进。');
+  return parts.join('');
+}

package/src/components/arts/TarotArt.tsx

@@ -0,0 +1,110 @@
+// 塔罗：问镜面板（牌阵选择）+ 扇形翻牌（未翻开不示牌名）+ 牌阵之示
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { tarotDraw, SUIT } from '@core/engine/tarot';
+import { allTarotSpreads, type TarotSpread } from '@core/data/tarotSpreads';
+import type { TarotCardData } from '@core/types';
+import { ResultCard } from '@/components/ResultCard';
+import SongSelect from '@/components/SongSelect';
+
+interface PanelProps { onDivine: (inputs: unknown, profile?: unknown, question?: string) => void; }
+
+export function TarotPanel({ onDivine }: PanelProps) {
+  const [q, setQ] = useState('');
+  const [qType, setQType] = useState('other');
+  const spreads = allTarotSpreads();
+  const [spreadId, setSpreadId] = useState('three');
+  const spread = spreads.find(s => s.id === spreadId) || spreads[0];
+  const go = () => onDivine({ spread: spread.id, n: spread.positions.length }, undefined, q.trim());
+  return (
+    <>
+      <p className="small muted" style={{ marginTop: '.6rem', lineHeight: 2 }}>静思所问，心中默念。洗牌之后，凭直觉取牌。</p>
+      <div className="field"><label htmlFor="tarot-qtype">所问之属</label>
+        <SongSelect id="tarot-qtype" value={qType} options={[{ value: 'love', label: '情感姻缘' }, { value: 'career', label: '事业学业' }, { value: 'wealth', label: '财运投资' }, { value: 'health', label: '健康' }, { value: 'travel', label: '出行方位' }, { value: 'lost', label: '寻物' }, { value: 'decision', label: '抉择决策' }, { value: 'other', label: '其他' }]} onChange={setQType} />
+      </div>
+      <div className="field"><label htmlFor="q-input">所问之事</label>
+        <input className="input-line" id="q-input" placeholder="默念所问，书之于此…" maxLength={60} value={q} onChange={e => setQ(e.target.value)} /></div>
+      <div className="field"><label htmlFor="tarot-spread">牌阵</label>
+        <SongSelect id="tarot-spread" value={spreadId} options={spreads.map(s => ({ value: s.id, label: s.name + ' · ' + s.positions.length + '张' }))} onChange={setSpreadId} />
+        <span className="hint">{spread.description}</span>
+      </div>
+      <button className="btn-divine" onClick={go}>洗 牌 抽 牌<span className="small">静心默问 · 凭心取牌</span></button>
+      <div className="mt-2" style={{ textAlign: 'center' }}>
+        <Link className="tiny muted" to="/spread-editor" style={{ letterSpacing: '.15em' }}>自 创 牌 阵 ›</Link>
+      </div>
+    </>
+  );
+}
+
+interface DrawResult {
+  spread: TarotSpread;
+  cards: TarotCardData[];
+}
+
+export function TarotResult({ data }: { data: DrawResult }) {
+  const { spread, cards } = data;
+  const [revealed, setRevealed] = useState<boolean[]>(cards.map(() => false));
+  const flip = (i: number) => setRevealed(prev => prev.map((v, j) => j === i ? true : v));
+  const allUp = revealed.every(Boolean);
+  return (
+    <>
+      <ResultCard title={`洗牌 · 抽牌 · 翻牌 · ${spread.name}`}>
+        <p>{spread.description} —— 凭心取 {cards.length} 张，点击牌面翻启。</p>
+      </ResultCard>
+      <div className="tarot-stage">
+        <div className="tarot-fan" style={{ flexWrap: cards.length > 5 ? 'wrap' : 'nowrap', maxWidth: cards.length > 5 ? 520 : undefined, gap: cards.length > 5 ? '1.2rem' : '2px' }}>
+          {cards.map((c, i) => (
+            <div className="tarot-slot" key={i}>
+              <button
+                className={"tarot-card " + (revealed[i] ? 'revealed picked' : 'face-down')}
+                onClick={() => flip(i)}
+                aria-label={"翻牌 " + c.name}
+              >
+                <div className="card-inner">
+                  <span className="en">{c.en}</span>
+                  <span className="sigil">{c.major ? (c.num ?? '') : (c.suit ? c.suit[0] : '')}</span>
+                  <span className="cn">{c.name}</span>
+                  <span className="en">{c.reversed ? '逆位' : '正位'}</span>
+                </div>
+              </button>
+              <span className="slot-label">{spread.positions[i]?.name || ('位' + (i + 1))}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <ResultCard title="牌阵之示">
+        {cards.map((c, i) => {
+          const pos = spread.positions[i];
+          // 未翻开：只示位置，不示牌名
+          if (!revealed[i]) {
+            return <p key={i} className="muted"><strong>{pos?.name || ('位' + (i + 1))}</strong> —— <span className="tiny">牌未翻启，静候君手</span></p>;
+          }
+          return (
+            <p key={i}>
+              <strong>{pos?.name || ('位' + (i + 1))}</strong> · {c.name}（{c.reversed ? '逆位' : '正位'}）：{c.reversed ? c.rev : c.up}{c.suit ? ` · ${SUIT[c.suit].e} · ${SUIT[c.suit].mean}` : ''}
+            </p>
+          );
+        })}
+        {allUp && (
+          <>
+            <p className="mt-2"><strong>全阵参详：</strong>{tarotSummary(cards, spread)}</p>
+            <p>塔罗非断命之器，乃照心之镜。观照自身，反求诸己。</p>
+          </>
+        )}
+      </ResultCard>
+    </>
+  );
+}
+// 塔罗全阵参详（正逆位比例 + 元素侧重，现代语言）
+function tarotSummary(cards: any[], spread: any): string {
+  const rev = cards.filter(c => c.reversed).length;
+  const majors = cards.filter(c => c.major).length;
+  const parts: string[] = [];
+  if (majors === cards.length) parts.push('全为大阿卡纳，此事于你人生分量颇重，非寻常小事。');
+  else if (majors > 0) parts.push('大阿卡纳' + majors + '张，此事有' + (majors > cards.length / 2 ? '较深' : '一定') + '的命途意味，宜郑重观之。');
+  else parts.push('皆小阿卡纳，此事多系日常实务，脚踏实地即可。');
+  if (rev === 0) parts.push('诸牌皆正，能量顺畅外放，时机可进。');
+  else if (rev <= cards.length / 2) parts.push('逆位' + rev + '张，有' + (rev === 1 ? '一处' : '几处') + '内耗或阻滞，宜先理顺再行。');
+  else parts.push('逆位居多，此事内在功课为重，先安己心，外境自转。');
+  return parts.join('');
+}

package/src/components/arts/XiaoliurenArt.tsx

@@ -0,0 +1,93 @@
+// 小六壬：掐指占时面板 + 掌诀/推演轨迹渲染
+import { useState } from 'react';
+import { xiaoliurenCalc } from '@core/engine/xiaoliuren';
+import { XLR_ORDER, XLR } from '@core/data/xiaoliuren';
+import { mod } from '@core/data/ganzhi';
+import type { XiaoliurenResult } from '@core/types';
+import { ResultCard } from '@/components/ResultCard';
+import SongSelect from '@/components/SongSelect';
+
+interface PanelProps { onDivine: (inputs: unknown, profile?: unknown, question?: string) => void; }
+
+export function XiaoliurenPanel({ onDivine }: PanelProps) {
+  const [mode, setMode] = useState<'time' | 'num'>('time');
+  const [m, setM] = useState(1);
+  const [d, setD] = useState(1);
+  const [h, setH] = useState(1);
+  const [n1, setN1] = useState(3);
+  const [n2, setN2] = useState(5);
+  const [n3, setN3] = useState(7);
+  const [q, setQ] = useState('');
+  const [qType, setQType] = useState('other');
+  const go = () => onDivine({ mode, m, d, h, n1, n2, n3 }, undefined, q.trim());
+  return (
+    <>
+      <div className="field"><label htmlFor="xlr-mode">取数之法</label>
+        <SongSelect id="xlr-mode" value={mode} options={[{ value: 'time', label: '以当下农历月、日、时占' }, { value: 'num', label: '随取三数占（1–12）' }]} onChange={v => setMode(v as 'time' | 'num')} />
+      </div>
+      {mode === 'time' ? (
+        <div className="field-row">
+          <div className="field"><label htmlFor="xlr-m">月</label>
+            <SongSelect id="xlr-m" value={String(m)} options={Array.from({ length: 12 }, (_, i) => ({ value: String(i + 1), label: String(i + 1) }))} onChange={v => setM(Number(v))} />
+          </div>
+          <div className="field"><label htmlFor="xlr-d">日</label>
+            <SongSelect id="xlr-d" value={String(d)} options={Array.from({ length: 30 }, (_, i) => ({ value: String(i + 1), label: String(i + 1) }))} onChange={v => setD(Number(v))} />
+          </div>
+        </div>
+      ) : (
+        <div className="field-row">
+          <div className="field"><label htmlFor="xlr-n1">一数</label><input className="input-line" type="number" id="xlr-n1" min={1} max={12} value={n1} onChange={e => setN1(Number(e.target.value))} /></div>
+          <div className="field"><label htmlFor="xlr-n2">二数</label><input className="input-line" type="number" id="xlr-n2" min={1} max={12} value={n2} onChange={e => setN2(Number(e.target.value))} /></div>
+        </div>
+      )}
+      <div className="field"><label htmlFor="xlr-h">时（时辰序）</label>
+        <SongSelect id="xlr-h" value={String(h)} options={['子(1)', '丑(2)', '寅(3)', '卯(4)', '辰(5)', '巳(6)', '午(7)', '未(8)', '申(9)', '酉(10)', '戌(11)', '亥(12)'].map((t, i) => ({ value: String(i + 1), label: t }))} onChange={v => setH(Number(v))} />
+      </div>
+      {mode === 'num' && (
+        <div className="field"><label htmlFor="xlr-n3">三数</label><input className="input-line" type="number" id="xlr-n3" min={1} max={12} value={n3} onChange={e => setN3(Number(e.target.value))} /></div>
+      )}
+      <div className="field"><label htmlFor="xlr-qtype">所问之属</label>
+        <SongSelect id="xlr-qtype" value={qType} options={[{ value: 'love', label: '情感姻缘' }, { value: 'career', label: '事业学业' }, { value: 'wealth', label: '财运投资' }, { value: 'health', label: '健康' }, { value: 'travel', label: '出行方位' }, { value: 'lost', label: '寻物' }, { value: 'decision', label: '抉择决策' }, { value: 'other', label: '其他' }]} onChange={setQType} />
+      </div>
+      <div className="field"><label htmlFor="q-input">所问之事</label>
+        <input className="input-line" id="q-input" placeholder="默念所问，书之于此…" maxLength={60} value={q} onChange={e => setQ(e.target.value)} />
+      </div>
+      <button className="btn-divine" onClick={go}>掐 指 一 算<span className="small">大安起月 · 月上起日 · 日上起时</span></button>
+    </>
+  );
+}
+
+export function XiaoliurenResult({ data }: { data: XiaoliurenResult }) {
+  const r = data;
+  const jiClass = r.detail.ji === '吉' ? 'tag-cool' : 'tag-hot';
+  const step1 = mod(r.a - 1, 6);
+  const step2 = mod(step1 + (r.b - 1), 6);
+  return (
+    <>
+      <ResultCard title={`掌诀 · ${r.name}`}
+        cells={[
+          { k: '吉凶', v: r.detail.ji, big: true, cool: r.detail.ji === '吉', hot: r.detail.ji !== '吉' },
+          { k: '五行', v: r.detail.wx },
+          { k: '主数', v: r.detail.num },
+          { k: '方位', v: r.detail.dir },
+        ]}>
+        <p><span className={jiClass}><strong>{r.name}</strong></span> · {r.detail.poem}</p>
+        <p>「{r.detail.text}」</p>
+      </ResultCard>
+      <ResultCard title="推演轨迹">
+        <p>{r.a} 月 {r.b} 日 {r.c} 时占：大安起月 → 月{r.a}落 <strong>{XLR_ORDER[step1]}</strong> → 日{r.b}落 <strong>{XLR_ORDER[step2]}</strong> → 时{r.c}终落 <strong className={jiClass}>{r.name}</strong>。</p>
+        <p className="mt-2"><strong>断语参详：</strong>{xlrAdvice(r)}</p>
+      </ResultCard>
+    </>
+  );
+}
+// 小六壬断语参详（结合吉凶/五行/方位，现代语言）
+function xlrAdvice(r: any): string {
+  const d = r.detail;
+  const parts: string[] = [];
+  parts.push('此占得' + r.name + '，为' + (d.ji === '吉' ? '吉占' : '凶占') + '。');
+  if (d.ji === '吉') parts.push('主数' + d.num + '、方位' + d.dir + '，谋事于' + d.dir + '向或' + d.num.replace(/、/g, '、') + '之数日时，多有应合。');
+  else parts.push('此占宜静不宜动，避' + d.dir + '向之事，慎口舌之争；事缓则圆，过此一时再图。');
+  parts.push('五行属' + d.wx + '，' + (d.wx === '火' ? '火性急，事可速决' : d.wx === '水' ? '水性流，事有迁延' : d.wx === '木' ? '木性生，事有转机' : d.wx === '金' ? '金性刚，事须决断' : '土性厚，事在积累') + '。');
+  return parts.join('');
+}

package/src/components/arts/ZiweiArt.tsx

@@ -0,0 +1,296 @@
+// 紫微斗数：输入面板（干支年/农历月日时 + 地点经度校正）+ 紫微盘渲染
+import { useState } from 'react';
+import { ziweiCalc } from '@core/engine/ziwei';
+import { ZW_STARS, ZW_STAR_MEAN, PALACE_NAMES } from '@core/data/ziwei';
+import { interpretZiwei } from '@core/engine/ziweiInterpret';
+import { ganZhiIndex, GAN, ZHI, NAYIN } from '@core/data/ganzhi';
+import { timeToHourIndex, hourIndexLabel } from '@/data/shichen';
+import TimeShichenInput from '@/components/TimeShichenInput';
+import type { ZiweiResult, GeoLocation } from '@core/types';
+import type { UserProfile } from '@/utils/userStore';
+import { Solar } from 'lunar-typescript';
+import DateInput from '@/components/DateInput';
+import ProfilePicker from '@/components/ProfilePicker';
+import { currentUser } from '@/utils/userStore';
+import LocationPicker from '@/components/LocationPicker';
+import SongSelect from '@/components/SongSelect';
+import { ResultCard } from '@/components/ResultCard';
+import { isChinaDSTDate } from '@/utils/dst';
+import { ziweiTone } from '@/utils/panTone';
+import LifeEventsInput, { type LifeEvent } from '@/components/LifeEventsInput';
+
+const DIZHI = ['寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥', '子', '丑'];
+const mod = (a: number, n: number) => ((a % n) + n) % n;
+
+// 干支年选项（1950-2010）
+function ganzhiOptions() {
+  const out: { gz: string; year: number }[] = [];
+  for (let y = 1950; y <= 2010; y++) {
+    const i = ((y - 4) % 60 + 60) % 60;
+    out.push({ gz: GAN[i % 10] + ZHI[i % 12], year: y });
+  }
+  return out;
+}
+
+interface PanelProps { onDivine: (inputs: unknown, profile?: UserProfile, question?: string, profileId?: string) => void; }
+
+export function ZiweiPanel({ onDivine }: PanelProps) {
+  const p = currentUser()?.profile;
+  const [date, setDate] = useState(p?.birthDate || '1990-06-15');
+  const [birthTime, setBirthTime] = useState(p?.birthTime || '00:00');
+  const [hourUnknown, setHourUnknown] = useState(p?.birthTimeUnknown || false);
+  const [gender, setGender] = useState<'男' | '女'>(p?.gender || '男');
+  const [loc, setLoc] = useState<GeoLocation | null>(p?.location || null);
+  const [question, setQuestion] = useState('');
+  const [profileSrc, setProfileSrc] = useState<{ id: string; name: string } | null>(null);
+  const [lifeEvents, setLifeEvents] = useState<LifeEvent[]>(p?.lifeEvents || []);
+  const dst = isChinaDSTDate(date);
+
+  const [formMsg, setFormMsg] = useState('');
+  const go = () => {
+    const [yy, mm, dd] = date.split('-').map(Number);
+    if (!yy || !mm || !dd) { setFormMsg('⚠ 请先填写有效的出生日期'); return; }
+    if (new Date(yy, mm - 1, dd).getMonth() !== mm - 1) { setFormMsg('⚠ 出生日期不合法，请检查'); return; }
+    setFormMsg('');
+    // 公历 → 农历（万年历），紫微依农历排盘
+    let lm = 1, ld = 1, gz = '甲子', birthYear = yy;
+    try {
+      const lunar = Solar.fromYmd(yy, mm, dd).getLunar();
+      const rawMonth = lunar.getMonth();
+      ld = lunar.getDay();
+      // 闰月（lunar 返回负数）：按 iztro fixLeap 规则，后半月算下月
+      lm = Math.abs(rawMonth) + (rawMonth < 0 && ld > 15 ? 1 : 0);
+      gz = lunar.getYearInGanZhi();
+      birthYear = lunar.getYear();
+    } catch { /* 非法日期回退默认 */ }
+    // 时辰未知：紫微以午时示例排盘（仅命局五行参考），档案标记未知供 AI 解读约束
+    const hourIdx = hourUnknown ? 6 : timeToHourIndex(birthTime);
+    const profile: UserProfile = { birthDate: date, birthTime: hourUnknown ? '' : birthTime, birthHourIndex: hourIdx, birthTimeUnknown: hourUnknown || undefined, gender, location: loc, lifeEvents: lifeEvents.length ? lifeEvents : undefined };
+    onDivine(
+      { ganzhi: gz, month: lm, day: ld, hour: hourIdx, time: hourUnknown ? undefined : birthTime, location: loc ?? undefined, gender, birthYear: yy, solarDate: [yy, mm, dd] },
+      profile,
+      question.trim(),
+      profileSrc?.id || 'main'
+    );
+  };
+
+  return (
+    <>
+      <ProfilePicker onPick={(p, src) => { setDate(p.birthDate); setBirthTime(p.birthTime || '00:00'); setHourUnknown(!!p.birthTimeUnknown); setGender(p.gender); setLoc(p.location); if (src) setProfileSrc(src); }} />
+      <div className="field"><label htmlFor="zw-date">出生日期（公历 / 农历，紫微依农历排盘）</label>
+        <DateInput id="zw-date" value={date} onChange={setDate} />
+      </div>
+      {dst && <p className="tag-hot" style={{ marginTop: '.3rem' }}>⚠ 该日期处于中国夏令时期间（1986-1991 年 4-9 月，钟表拨快 1 小时）——请按出生时钟表时间填写，排盘会自动回拨校正。</p>}
+
+      <div className="field"><label htmlFor="zw-gender">性别（定大限顺逆）</label>
+        <SongSelect id="zw-gender" value={gender} options={[{ value: '男', label: '男' }, { value: '女', label: '女' }]} onChange={v => setGender(v as '男' | '女')} />
+      </div>
+      <div className="field"><label htmlFor="zw-time">出生时刻</label>
+        {hourUnknown
+          ? <p className="hint" style={{ padding: '.45rem 0' }}>时辰未录——紫微暂以午时示例排盘（仅观命局五行），AI 解读不涉命宫/身宫/大限细节。</p>
+          : <TimeShichenInput id="zw-time" value={birthTime} onChange={setBirthTime} />}
+      </div>
+      <div className="field">
+        <label style={{ display: 'flex', alignItems: 'center', gap: '.45rem', cursor: 'pointer', fontSize: '.9rem', fontWeight: 400 }}>
+          <input type="checkbox" checked={hourUnknown} onChange={e => setHourUnknown(e.target.checked)} />
+          时辰未知（未录）
+        </label>
+      </div>
+      {formMsg && <p className="tag-hot" style={{ marginTop: '.3rem' }}>{formMsg}</p>}
+      <div className="field">
+        <label>出生地点（时辰经度校正）</label>
+        <LocationPicker value={loc} onChange={setLoc} previewHourIndex={hourUnknown ? 6 : timeToHourIndex(birthTime)} />
+        {!loc && <p className="hint" style={{ marginTop: '.3rem' }}>未选地点：将按北京时间直接排盘（不做真太阳时校正）</p>}
+      </div>
+            <div className="field"><label htmlFor="q-input">所问之事（可选）</label>
+        <input className="input-line" id="q-input" placeholder="可书所问，AI 报告将由此而发…" maxLength={60} value={question} onChange={e => setQuestion(e.target.value)} />
+      </div>
+      <LifeEventsInput value={lifeEvents} onChange={setLifeEvents} />
+<button className="btn-divine" onClick={go}>布 盘<span className="small">安命宫 · 定紫微 · 布主星</span></button>
+      <p className="hint" style={{ marginTop: '.8rem' }}>演示级简盘：十四主星入十二宫，辅曜从略。时辰未录时以午时示例布盘，命宫/身宫仅供参考。</p>
+    </>
+  );
+}
+
+// 4×4 网格布局（十二地支顺时针环布 + 中央中宫）
+const GRID_POS: [string, number, number][] = [
+  ['寅', 0, 3], ['卯', 0, 2], ['辰', 0, 1], ['巳', 0, 0],
+  ['午', 1, 0], ['未', 2, 0], ['申', 3, 0], ['酉', 3, 1],
+  ['戌', 3, 2], ['亥', 3, 3], ['子', 2, 3], ['丑', 1, 3],
+];
+
+export function ZiweiResult({ data }: { data: ZiweiResult }) {
+  const r = data;
+  const cellStars: Record<number, string[]> = {};
+  Object.keys(r.zwStars).forEach(s => {
+    const pos = r.zwStars[s];
+    if (!cellStars[pos]) cellStars[pos] = [];
+    cellStars[pos].push(s);
+  });
+  const cellFu: Record<number, string[]> = {};
+  Object.keys(r.fuStars || {}).forEach(s => {
+    const pos = r.fuStars[s];
+    if (!cellFu[pos]) cellFu[pos] = [];
+    cellFu[pos].push(s);
+  });
+  const sihuaMark: Record<number, string[]> = {};
+  (Object.keys(r.sihuaPos || {}) as Array<'lu' | 'quan' | 'ke' | 'ji'>).forEach(k => {
+    const pos = r.sihuaPos![k];
+    if (pos !== undefined) {
+      if (!sihuaMark[pos]) sihuaMark[pos] = [];
+      sihuaMark[pos].push(k === 'lu' ? '禄' : k === 'quan' ? '权' : k === 'ke' ? '科' : '忌');
+    }
+  });
+  const cells = GRID_POS.map(([zhi, c, rw]) => {
+    const pos = DIZHI.indexOf(zhi);
+    const stars = cellStars[pos] || [];
+    const fus = cellFu[pos] || [];
+    const marks = sihuaMark[pos] || [];
+    const palIdx = Object.keys(r.palaces).find(k => r.palaces[Number(k)] === pos);
+    const palName = palIdx !== undefined ? PALACE_NAMES[Number(palIdx)] : '';
+    const isMing = r.ming === pos;
+    const isShen = r.shen === pos;
+    return { zhi, c, rw, stars, fus, marks, palName, isMing, isShen, pos };
+  });
+  return (
+    <>
+      <ResultCard title={"命盘 · " + r.juName + ' · ' + r.nayin}>
+        <p>命宫安于 <strong>{DIZHI[r.ming]}</strong>{r.ming === r.zwPos ? '（紫微同宫）' : ''}，紫微星落 <strong>{DIZHI[r.zwPos]}</strong> 宫。时辰经度校正：{hourIndexLabel(r.correctedHour)}。</p>
+      </ResultCard>
+      <div className="result-card stagger">
+        <h3>星曜布列</h3>
+        <div className="ziwei-grid" style={{ marginTop: '1rem' }}>
+          <div className="zw-cell center" style={{ gridColumn: '2/4', gridRow: '2/4' }}>
+            <div className="zw-name">观微</div><div className="tiny muted">紫微简盘</div><div className="tiny muted">{r.juName}</div>
+          </div>
+          {cells.sort((a, b) => a.rw === b.rw ? a.c - b.c : a.rw - b.rw).map(c => (
+            <div className={"zw-cell" + (c.isMing ? ' ming-cell' : '')} key={c.zhi} style={{ gridColumn: c.c + 1, gridRow: c.rw + 1 }}>
+              <div className="zw-name">
+                <span>{c.zhi} · {c.palName || '—'}</span>
+                {c.marks.map((m, i) => <span key={i} className="zw-extra" style={{ color: m === '忌' ? 'var(--cinnabar)' : 'var(--celadon-deep)' }}>{m}</span>)}
+                {c.isMing ? <span className="zw-extra" style={{ color: 'var(--cinnabar)' }}>命</span> : null}
+                {c.isShen ? <span className="zw-extra" style={{ color: 'var(--celadon-deep)' }}>身</span> : null}
+              </div>
+              <div className="zw-stars">{c.stars.map(s => {
+                const hot = ['紫微', '七杀', '破军', '贪狼', '廉贞'].includes(s);
+                const cool = ['天机', '天同', '天相', '天梁', '天府'].includes(s);
+                const b = (r.brightness || {})[s] || '';
+                return <span key={s} className={"star-name " + (hot ? 'star-hot' : cool ? 'star-cool' : '')}>{s}<em className="tiny" style={{ fontStyle: 'normal', opacity: .65 }}>{b}</em></span>;
+              })}{c.stars.length === 0 && <span className="muted">—</span>}</div>
+              {c.fus.length > 0 && <div className="tiny muted" style={{ marginTop: '.15rem', lineHeight: 1.5 }}>{c.fus.join('·')}</div>}
+            </div>
+          ))}
+        </div>
+      </div>
+      <ResultCard title="命宫参详">
+        <p>{ziweiTone(r).mingNote}</p>
+        <p className="tiny muted">简盘仅列十四主星，辅曜从略；此参详为现代语言之概览。</p>
+      </ResultCard>
+      <ResultCard title="命盘基础">
+        <p>五行局 <strong>{r.juName}</strong>（{r.nayin}），起运 <strong>{r.startAge} 岁</strong>，大限{' '}
+          <strong>{r.forward ? '顺行' : '逆行'}</strong>（{r.nominalAge} 虚岁，行至第 {((r.curDayunIdx ?? 0) + 1)} 大限）。</p>
+        <p>命宫在<strong>{DIZHI[r.ming]}</strong>，身宫在<strong>{DIZHI[r.shen]}</strong>{r.shen === r.ming ? '（与命宫同宫）' : ''}；紫微星落<strong>{DIZHI[r.zwPos]}</strong>宫。</p>
+        <p>生年四化：{r.sihua.lu}化禄、{r.sihua.quan}化权、{r.sihua.ke}化科、{r.sihua.ji}化忌（{r.sihua.lu}化禄主财缘流通，化忌之星须防其暗伤）。</p>
+        <p className="tiny muted">大限起运岁数按五行局数计；四化为斗数断流年吉凶之枢。</p>
+      </ResultCard>
+      <ResultCard title="格局">
+        {r.geju.length > 0 ? (
+          <>
+            <p>{r.geju.map((g, i) => (
+              <span key={i}><strong className={g.ji === '吉' ? 'tag-cool' : g.ji === '凶' ? 'tag-hot' : ''}>{g.name}</strong>{g.ji === '吉' ? '（吉格）' : g.ji === '凶' ? '（凶格）' : '（平格）'}　</span>
+            ))}</p>
+            {r.geju.map((g, i) => (
+              <p key={i} style={{ marginTop: '.5rem' }}><strong>{g.name}</strong>：{g.desc}<span className="tiny muted">（{g.why}）</span></p>
+            ))}
+          </>
+        ) : <p>本命未会明显格局，以主星庙陷与四化合参论之。</p>}
+        <p className="tiny muted" style={{ marginTop: '.5rem' }}>格局为星曜组合之定式：成格者一生趋向鲜明，破格者（煞忌冲破）则吉格亦减力。</p>
+      </ResultCard>
+      {r.dayun && r.dayun.length > 0 && (
+        <div className="result-card stagger">
+          <h3>大限行运</h3>
+          <div className="result-grid" style={{ gridTemplateColumns: 'repeat(auto-fit,minmax(140px,1fr))' }}>
+            {r.dayun.map((d, i) => {
+              const palIdx = Object.keys(r.palaces).find(k => r.palaces[Number(k)] === d.palaceIdx);
+              const palName = palIdx !== undefined ? PALACE_NAMES[Number(palIdx)] : '';
+              const stars = Object.keys(r.zwStars).filter(s => r.zwStars[s] === d.palaceIdx);
+              const isCur = i === r.curDayunIdx;
+              return (
+                <div className="result-cell" key={i} style={isCur ? { borderColor: 'var(--cinnabar)', boxShadow: '0 0 0 1px rgba(165,64,45,.2)' } : undefined}>
+                  <div className="k">{d.start}–{d.end} 岁{isCur ? ' · 今' : ''}</div>
+                  <div className="v" style={isCur ? { color: 'var(--cinnabar)' } : undefined}>{palName}</div>
+                  <div className="tiny muted">{stars.join('、') || '主星未临'}</div>
+                  <div className="tiny muted">{dayunTone(stars)}</div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+      <ResultCard title="流年之示">
+        <p>{r.nominalAge} 虚岁，流年命宫落 <strong>{r.liunianPalaceName}</strong>（{DIZHI[r.liunianIdx ?? 0]}），流年主星：<strong>{r.liunianStars?.join('、') || '主星未临'}</strong>。</p>
+        <div className="mt-2">
+          {[1, 2, 3].map(offset => {
+            const pos = mod(r.ming + (r.nominalAge ?? 34) - 1 + offset, 12);
+            const stars = Object.keys(r.zwStars).filter(s => r.zwStars[s] === pos);
+            const pname = PALACE_NAMES[Number(Object.keys(r.palaces).find(k => r.palaces[Number(k)] === pos)) || 0];
+            return <p key={offset} className="tiny" style={{ lineHeight: 2 }}>来年{offset === 1 ? '' : offset + '年'} · {pname}宫（{DIZHI[pos]}）· 主星{stars.join('、') || '未临'} —— {futureTone(stars)}</p>;
+          })}
+        </div>
+        <p className="tiny muted">流年为当年太岁行运之要，主星吉凶与宫位庙陷须合参；简盘仅供参考。</p>
+      </ResultCard>
+      {interpretZiwei(r).map((ins, i) => {
+        if (ins.title === '十二宫要览') {
+          // 结构化排版：每宫一卡（宫名/地支/主星/主题）
+          const palaces = Object.keys(r.palaces).map(k => ({
+            name: PALACE_NAMES[Number(k)],
+            pos: r.palaces[Number(k)],
+            stars: Object.keys(r.zwStars).filter(s => r.zwStars[s] === r.palaces[Number(k)]),
+          }));
+          return (
+            <div className="result-card" key={i}>
+              <h3>十二宫概览</h3>
+              <div className="zw-palace-grid">
+                {palaces.map(p => (
+                  <div key={p.name} className={'zw-palace-cell' + (p.pos === r.ming ? ' is-ming' : '') + (p.stars.length ? '' : ' empty')}>
+                    <div className="zp-head"><span className="zp-name">{p.name}</span><span className="zp-zhi">{DIZHI[p.pos]}</span>{p.pos === r.ming && <span className="zp-ming">命</span>}</div>
+                    <div className="zp-stars">{p.stars.length ? p.stars.join(' ') : '主星未临'}</div>
+                    <div className="zp-theme">{palaceThemeOf(p.name)}</div>
+                  </div>
+                ))}
+              </div>
+              <div className="result-text mt-3">
+                {ins.content.split('\n\n').map((para, j) => <p key={j}>{para}</p>)}
+              </div>
+            </div>
+          );
+        }
+        return (<ResultCard key={i} title={ins.title}><p>{ins.content}</p></ResultCard>);
+      })}
+    </>
+  );
+}
+// 宫位主题（渲染层用）
+function palaceThemeOf(name: string): string {
+  const map: Record<string, string> = {
+    命宫: '根基底色', 兄弟: '手足同侪', 夫妻: '姻缘伴侣', 子女: '子息晚辈',
+    财帛: '求财理财', 疾厄: '体魄健康', 迁移: '外出环境', 仆役: '部属朋友',
+    官禄: '事业名位', 田宅: '家宅置业', 福德: '福分心境', 父母: '荫庇长辈',
+  };
+  return map[name] || '';
+}
+// 大限/流年吉凶语（按主星吉凶性，现代语言）
+const GOOD = ['紫微', '天同', '天府', '天相', '天梁', '太阴', '太阳', '武曲'];
+const BAD = ['七杀', '破军', '贪狼', '廉贞', '巨门'];
+function dayunTone(stars: string[]): string {
+  if (!stars.length) return '平淡之运';
+  if (stars.every(s => GOOD.includes(s))) return '顺遂之运';
+  if (stars.some(s => BAD.includes(s)) && !stars.some(s => GOOD.includes(s))) return '多动之运';
+  return '起伏之运';
+}
+function futureTone(stars: string[]): string {
+  if (!stars.length) return '宜守成';
+  if (stars.every(s => GOOD.includes(s))) return '机缘可观，可谋进取';
+  if (stars.some(s => BAD.includes(s))) return '变动较多，宜稳中求进';
+  return '平稳过渡';
+}