guanwei 1.1.1

package/src/pages/ModulePage.tsx

@@ -0,0 +1,320 @@
+// 九术模块工作台：输入面板 + 起占状态机 + 结果渲染 + AI 入口 + 免责声明
+import { useParams, Link } from 'react-router-dom';
+import { artById } from '@/data/arts';
+import Disclaimer from '@/components/Disclaimer';
+import { ResultPlaceholder } from '@/components/ResultCard';
+import { useDivine } from '@/hooks/useDivine';
+import { useAIInterpret } from '@/hooks/useAIInterpret';
+import { artPairOf } from '@/arts/registry';
+import { saveRecord } from '@/utils/recordStore';
+import { downloadReport, apiDivine, type AIReport } from '@/services/api';
+import ReportView from '@/components/ReportView';
+import { currentUser, addSampleProfile } from '@/utils/userStore';
+import { analyzeQuestionFit } from '@core/engine/questionFit';
+import type { UserProfile } from '@/utils/userStore';
+import { useEffect, useRef, useState } from 'react';
+import { BaziPanel, BaziResult } from '@/components/arts/BaziArt';
+import { ZiweiPanel, ZiweiResult } from '@/components/arts/ZiweiArt';
+import { QimenPanel, QimenResultView } from '@/components/arts/QimenArt';
+import { MeihuaPanel, MeihuaResult } from '@/components/arts/MeihuaArt';
+import { LiuyaoPanel, LiuyaoResult } from '@/components/arts/LiuyaoArt';
+import { LiurenPanel, LiurenResult } from '@/components/arts/LiurenArt';
+import { XiaoliurenPanel, XiaoliurenResult } from '@/components/arts/XiaoliurenArt';
+import { AstrologyPanel, AstrologyResult } from '@/components/arts/AstrologyArt';
+import { TarotPanel, TarotResult } from '@/components/arts/TarotArt';
+import type { ComponentType } from 'react';
+
+interface ArtPair {
+  Panel: ComponentType<{ onDivine: (fn: () => unknown) => void }>;
+  Result: ComponentType<{ data: unknown }>;
+  placeholder: string;
+}
+
+const ART_PAIRS: Record<string, ArtPair> = {
+  bazi:       { Panel: BaziPanel, Result: BaziResult, placeholder: '静候四柱 · 观五行流转' },
+  ziwei:      { Panel: ZiweiPanel, Result: ZiweiResult, placeholder: '静候星布 · 观十四主星' },
+  qimen:      { Panel: QimenPanel, Result: QimenResultView, placeholder: '静候局成 · 观九宫遁甲' },
+  meihua:     { Panel: MeihuaPanel, Result: MeihuaResult, placeholder: '静候心动 · 观梅花开落' },
+  liuyao:     { Panel: LiuyaoPanel, Result: LiuyaoResult, placeholder: '静候钱落 · 观六爻成象' },
+  liuren:     { Panel: LiurenPanel, Result: LiurenResult, placeholder: '静候课起 · 观天地人盘' },
+  xiaoliuren: { Panel: XiaoliurenPanel, Result: XiaoliurenResult, placeholder: '静候指落 · 观掌诀玄机' },
+  astrology: { Panel: AstrologyPanel, Result: AstrologyResult, placeholder: '静候星布 · 观天穹为书' },
+  tarot: { Panel: TarotPanel, Result: TarotResult, placeholder: '静候牌启 · 观镜照本心' },
+};
+
+const PANEL_META: Record<string, { panelTitle: string; btn: string; btnSmall: string }> = {
+  bazi:       { panelTitle: '布盘', btn: '排 盘', btnSmall: '布四柱 · 观五行 · 推十神' },
+  ziwei:      { panelTitle: '布盘', btn: '布 盘', btnSmall: '安命宫 · 定紫微 · 布主星' },
+  qimen:      { panelTitle: '起局', btn: '起 局', btnSmall: '定时 · 定局 · 布三奇六仪' },
+  meihua:     { panelTitle: '起卦', btn: '起 卦', btnSmall: '定本卦 · 推互变 · 辨体用' },
+  liuyao:     { panelTitle: '摇卦', btn: '掷 钱 成 卦', btnSmall: '六掷成卦 · 观变断象' },
+  liuren:     { panelTitle: '起课', btn: '起 课', btnSmall: '立天地盘 · 布四课 · 取三传' },
+  xiaoliuren: { panelTitle: '占时', btn: '掐 指 一 算', btnSmall: '大安起月 · 月上起日 · 日上起时' },
+  astrology:  { panelTitle: '布盘', btn: '布 星 图', btnSmall: '推行星黄经 · 布十二宫' },
+  tarot:      { panelTitle: '问镜', btn: '洗 牌 抽 牌', btnSmall: '静心默问 · 凭心取牌' },
+};
+
+export default function ModulePage() {
+  const { artId } = useParams<{ artId: string }>();
+  const art = artId ? artById(artId) : undefined;
+  const { status, result, divineId, errorMsg: divineError, divine, reset } = useDivine();
+  const ai = useAIInterpret();
+
+  // 面板上报的出生档案（供存为档案）
+  const profileRef = useRef<UserProfile | null>(null);
+  const questionRef = useRef('');
+  const inputsRef = useRef<unknown>(null);
+  const profileIdRef = useRef('main');
+  const [fit, setFit] = useState<{ suitable: boolean | 'partial'; reason: string; suggestion: string } | null>(null);
+  const divineWithProfile = async (inputs: unknown, profile?: UserProfile, question?: string, profileId?: string) => {
+    // 新起占：重置 AI 解读状态，避免内容区残留上一档案的报告（含在途流式结果作废）
+    ai.reset();
+    if (profile) profileRef.current = profile;
+    inputsRef.current = inputs;
+    profileIdRef.current = profileId || 'main';
+    if (question !== undefined) questionRef.current = question;
+    // 问题适配性分析（无问题时不提示）
+    const q = question !== undefined ? question : ((document.getElementById('q-input') as HTMLInputElement)?.value || '');
+    setFit(q.trim() ? analyzeQuestionFit(art?.id || '', q.trim()) : null);
+    // 游客不允许：未登录直接提示
+    const user = currentUser();
+    if (!user) {
+      alert('请先入馆（登录）再起占');
+      return;
+    }
+    divine(async () => {
+      const r = await apiDivine(user.username, art?.id || '', inputs, profile || user.profile, q.trim() || undefined, profileId || 'main');
+      return { resultRaw: r.resultRaw, divineId: r.divineId };
+    });
+  };
+  const isProfileArt = ['bazi', 'ziwei', 'astrology'].includes(art?.id || '');
+  const exportReport = (rep: AIReport) => {
+    const lines = [
+      '# ' + (rep.title || '观微解读报告'),
+      '',
+      '> 术别：' + art.name + '　·　' + new Date().toLocaleString('zh-CN'),
+      '',
+      '## 总述',
+      '',
+      rep.overview,
+      '',
+      '## 原始解读',
+      '',
+      rep.rawReading?.summary || '',
+      ...(rep.rawReading?.keyPoints || []).map(k => '- ' + k),
+      '',
+      ...(rep.character ? ['## 命主性格', '', rep.character.summary || '', ...(rep.character.traits || []).map(t => '- **' + t.name + '**：' + t.desc), ''] : []),
+      ...(rep.lifeStages ? ['## 人生阶段', '', ...rep.lifeStages.map(s => '**' + s.stage + '（' + s.age + '）**：' + s.summary), ''] : []),
+      ...(rep.career?.summary ? ['## 学业 · 事业', '', rep.career.summary, '宜向：' + (rep.career.direction || ''), '建议：' + (rep.career.advice || ''), ''] : []),
+      ...(rep.love?.summary ? ['## 爱情', '', rep.love.summary, '建议：' + (rep.love.advice || ''), ''] : []),
+      ...(rep.wealth?.summary ? ['## 财富', '', rep.wealth.summary, '建议：' + (rep.wealth.advice || ''), ''] : []),
+      ...(rep.health?.summary ? ['## 健康', '', rep.health.summary, '建议：' + (rep.health.advice || ''), ''] : []),
+      ...(rep.situation ? ['## 当下局势', '', rep.situation, ''] : []),
+      ...(rep.trend ? ['## 发展趋势', '', rep.trend, ''] : []),
+      ...(rep.timing ? ['## 时机宜忌', '', rep.timing, ''] : []),
+      ...(rep.advice ? ['## 参详建议', '', ...rep.advice.split(/[;；]/).filter(Boolean).map(a => (a.trim() ? '- ' + a.trim() : '')), ''] : []),
+      ...(rep.conclusion ? ['## 结语', '', rep.conclusion, ''] : []),
+      '---',
+      rep.disclaimer || '',
+    ].filter(Boolean);
+    const blob = new Blob(['\uFEFF' + lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = (rep.title || '观微报告') + '.md';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const [saveName, setSaveName] = useState('');
+  const [saveMsg, setSaveMsg] = useState('');
+  const doSaveProfile = () => {
+    if (!profileRef.current) return;
+    const u = addSampleProfile(saveName, profileRef.current);
+    setSaveMsg(u ? '已存为示例档案「' + (saveName.trim() || '未名档案') + '」' : '请先入馆，方可存档');
+    setSaveName('');
+  };
+
+  // 后端起占记录的 divineId（AI 解读用）
+  const divineIdRef = useRef<string | null>(null);
+  divineIdRef.current = divineId;
+
+  // 起占成功 → 自动存档（StrictMode 防重复：以 result 引用去重）
+  const savedRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (status === 'done' && result && art && savedRef.current !== result) {
+      savedRef.current = result;
+      const loc = profileRef.current?.location;
+      const prof = profileRef.current;
+      saveRecord({
+        artId: art.id,
+        createdAt: Date.now(),
+        result,
+        location: loc ? { lng: loc.lng, lat: loc.lat, province: loc.province, city: loc.city, district: loc.district } : undefined,
+        profileId: profileIdRef.current,
+        profile: prof ? { birthDate: prof.birthDate, birthTime: prof.birthTime, gender: prof.gender, location: prof.location } : null,
+        inputs: inputsRef.current,
+        question: questionRef.current || undefined,
+      });
+    }
+  }, [status, result, art]);
+
+  if (!art) {
+    return (
+      <div className="wrap" style={{ paddingTop: 'var(--sp-7)', textAlign: 'center' }}>
+        <div className="result-placeholder">
+          <div className="glyph">无</div>
+          <p>术无此名 · 请返册页再择</p>
+        </div>
+        <div className="mt-4"><Link className="btn-seal btn-ghost" to="/">返 册 页</Link></div>
+      </div>
+    );
+  }
+
+  const pair = artPairOf(art.id);
+  const meta = PANEL_META[art.id];
+  const PairPanel = pair?.Panel;
+  const PairResult = pair?.Result;
+
+  return (
+    <>
+      <section className="module-hero compact">
+        <div className="wrap">
+          <div className="mh-row">
+            <Link className="back-link" to="/" onClick={() => setTimeout(() => document.getElementById('home-arts')?.scrollIntoView(), 60)}>
+              ‹ 返册页
+            </Link>
+            <h2 className="module-title"><span className="cn">{art.name}</span><span className="mh-sub">{art.poem}</span></h2>
+            <p className="mh-kicker">{art.kicker}</p>
+          </div>
+          <details className="mh-intro">
+            <summary>术之源流 · 点击展卷</summary>
+            <p>{art.intro}</p>
+            <p className="source">{art.source}</p>
+          </details>
+        </div>
+      </section>
+
+      <div className="wrap">
+        <div className="altar">
+          <aside className="altar-panel" aria-label={`${art.name}输入`}>
+            <h3 className="panel-title">{meta?.panelTitle ?? '问占'}</h3>
+            {PairPanel ? <PairPanel onDivine={divineWithProfile} /> : (
+              <div className="result-placeholder" style={{ minHeight: 260, marginTop: 'var(--sp-3)' }}>
+                <div className="glyph" style={{ fontSize: '2rem' }}>{art.glyph}</div>
+                <p>此术之具，静候铺陈</p>
+              </div>
+            )}
+          </aside>
+          <div className="altar-result stagger">
+            {fit && fit.suitable !== true && (
+              <div className="fit-note" role="note">
+                <strong>{fit.suitable === 'partial' ? '适问之辨 · 部分相契' : '适问之辨 · 不甚相契'}</strong>
+                <p>{fit.reason}</p>
+                {fit.suggestion && <p className="fit-suggest">✦ {fit.suggestion}</p>}
+              </div>
+            )}
+            {status === 'idle' && <ResultPlaceholder glyph={art.glyph} text={pair?.placeholder ?? '静候卦象 · 观微知著'} />}
+            {status === 'casting' && (
+              <div className="result-placeholder">
+                <div className="casting-ring"><div className="casting-glyph" style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-zm)', fontSize: '1.6rem', color: 'var(--celadon-deep)' }}>{art.glyph}</div></div>
+                <p>凝神静气 · 卦象将成</p>
+              </div>
+            )}
+            {status === 'done' && result && PairResult && <PairResult data={result} />}
+            {status === 'error' && (
+              <ResultPlaceholder glyph="滞" text={divineError || '推演未应机 · 请稍后再试'} />
+            )}
+            {status === 'done' && result && (
+              <div className="result-card mt-3">
+                <h3>AI 深度解读</h3>
+                {ai.status === 'idle' && (
+                  <div className="result-text">
+                    <p>排盘既成，可召 AI 以现代语言为君详解；引经据典处，另依古籍话术标注出处。</p>
+                    <button
+                      className="btn-seal"
+                      style={{ marginTop: 'var(--sp-2)', fontSize: '.9rem', padding: '.5rem 1.4rem' }}
+                      onClick={() => {
+                      console.log('[观微 AI] 点击召请，artId=', art.id, 'question=', questionRef.current, 'API_BASE=', (window as any).__API_BASE__ || '/api');
+                      ai.interpret({ artId: art.id, divineId: divineIdRef.current || undefined, question: questionRef.current || undefined, profile: profileRef.current || undefined, reportMode: true, fit: fit || undefined });
+                    }}
+                    >
+                      召 AI 成报告
+                    </button>
+                  </div>
+                )}
+                {ai.status === 'streaming' && (
+                  <div className="ai-streaming">
+                    <div className="ai-stream-head">
+                      <span className="ai-spinner" aria-hidden="true" />
+                      <span className="tag-cool">AI 依术呈卷中……（Skills 编排 · 分章成文）</span>
+                    </div>
+                    <p className="tiny muted" style={{ marginTop: '.3rem' }}>已生成 <span className="ai-count" style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--celadon-deep)', fontWeight: 600 }}>{ai.text.length}</span> 字 · 长文约需 20-60 秒，请稍候</p>
+                    <div className="ai-stream-body" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 48, padding: 'var(--sp-2) 0' }}>
+                      <p className="muted" style={{ fontSize: 'var(--fs-sm)', letterSpacing: '.3em', animation: 'pulse-soft 1.8s ease-in-out infinite' }}>静候呈卷 · 成文后即展全篇</p>
+                    </div>
+                  </div>
+                )}
+                {ai.status === 'done' && (
+                  <div className="result-text">
+                    {ai.truncated && (
+                      <div className="ai-error" style={{ marginBottom: 'var(--sp-2)' }}>
+                        <p className="tag-hot"><strong>内容截断</strong>：本次呈卷因篇幅限制未能完整生成，可重试。</p>
+                      </div>
+                    )}
+                    {ai.quality === 'poor' && (
+                      <div className="ai-error" style={{ marginBottom: 'var(--sp-2)' }}>
+                        <p className="tag-hot"><strong>内容不完整</strong>：本次解读部分章节缺失，可重试。</p>
+                      </div>
+                    )}
+                    {ai.report ? (
+                      <ReportView report={ai.report} artName={art.name} onExport={() => exportReport(ai.report!)} />
+                    ) : ai.sections.length > 0 ? ai.sections.map((s, i) => (
+                      <div key={i} style={{ marginBottom: 'var(--sp-2)' }}>
+                        <p className="tag-cool" style={{ marginBottom: '.3rem' }}><strong>{s.title}</strong></p>
+                        <p style={{ whiteSpace: 'pre-wrap' }}>{s.content}</p>
+                      </div>
+                    )) : ai.text ? <p style={{ whiteSpace: 'pre-wrap' }}>{ai.text}</p> : null}
+                    {!ai.report && <p className="tiny muted" style={{ marginTop: 'var(--sp-2)', borderTop: '1px solid var(--line-soft)', paddingTop: '.6rem' }}>凡占问所得，仅供修身养性、怡情遣兴之用，不构成决策依据。</p>}
+                  </div>
+                )}
+                {ai.status === 'error' && (
+                  <div className="ai-error">
+                    <p className="tag-hot"><strong>AI 未应机</strong>：{ai.errorMsg || 'AI 解读暂未应机，请稍后再试。'}</p>
+                    {ai.errorCode === 'AI_UNCONFIGURED' ? (
+                      <div className="ai-config-hint" style={{ marginTop: '.5rem', padding: '.6rem .8rem', border: '1px dashed var(--cinnabar)', borderRadius: 'var(--r-sm)' }}>
+                        <p className="tiny"><strong>尚未配置 AI 服务的 API Key</strong>——配置后即可生成 AI 报告：</p>
+                        <ol className="tiny muted" style={{ margin: '.4rem 0 0 1.2rem', lineHeight: 1.8 }}>
+                          <li>终端进入项目目录，运行 <code style={{ background: 'rgba(0,0,0,.06)', padding: '0 .3rem' }}>./scripts/setup.sh --key 你的APIKey</code>（Windows：<code style={{ background: 'rgba(0,0,0,.06)', padding: '0 .3rem' }}>scripts\setup.bat --key 你的APIKey</code>）</li>
+                          <li>Key 申请入口与详细步骤见 <a href="https://github.com/RubyCcll/guanwei#%F0%9F%94%91-%E8%8E%B7%E5%8F%96-api-key" target="_blank" rel="noreferrer">README · 获取 API Key</a>（DeepSeek 等 5 家任选）</li>
+                          <li>配置后重启服务即可；也可运行 <code style={{ background: 'rgba(0,0,0,.06)', padding: '0 .3rem' }}>guanwei doctor</code> 检查配置</li>
+                        </ol>
+                      </div>
+                    ) : (
+                      <p className="tiny muted">古法规则解读为备，可先依上列排盘自行观照；若为 AI 服务异常，可于服务端检查 LLM 配置后重试。</p>
+                    )}
+                    <div className="btn-row" style={{ marginTop: 'var(--sp-2)' }}>
+                      <button className="btn-seal" style={{ fontSize: '.82rem', padding: '.4rem 1.1rem' }} onClick={() => ai.interpret({ artId: art.id, resultRaw: result, question: questionRef.current || undefined, profile: profileRef.current || undefined, reportMode: true, fit: fit || undefined })}>重 试</button>
+                      <button className="btn-seal btn-ghost" style={{ fontSize: '.82rem', padding: '.4rem 1.1rem' }} onClick={ai.reset}>收 起</button>
+                    </div>
+                  </div>
+                )}
+                {isProfileArt && currentUser() && (
+                  <div className="no-print" style={{ marginTop: 'var(--sp-3)', paddingTop: 'var(--sp-2)', borderTop: '1px solid var(--line-soft)' }}>
+                    <p className="tiny muted" style={{ marginBottom: '.4rem' }}>存此排盘入馆为示例档案（主档案唯一，此为示例）：</p>
+                    <div className="btn-row" style={{ gap: '.5rem' }}>
+                      <input className="input-line" style={{ maxWidth: 240 }} placeholder="档案名，如：1995 生辰" value={saveName} onChange={e => setSaveName(e.target.value)} />
+                      <button className="btn-seal" style={{ fontSize: '.8rem', padding: '.35rem 1rem' }} onClick={doSaveProfile}>存 档</button>
+                    </div>
+                    {saveMsg && <p className={"tiny mt-1 " + (saveMsg.includes('已存') ? 'tag-cool' : 'tag-hot')}>{saveMsg}</p>}
+                  </div>
+                )}
+                <button className="btn-seal btn-ghost no-print" style={{ marginTop: 'var(--sp-3)', fontSize: '.9rem', padding: '.5rem 1.4rem' }} onClick={() => { ai.reset(); reset(); }}>再 起 一 占</button>
+              </div>
+            )}
+          </div>
+        </div>
+        <Disclaimer />
+      </div>
+    </>
+  );
+}

package/src/pages/SpreadEditor.tsx

@@ -0,0 +1,230 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Plus, Trash2, Save, ArrowLeft, GripVertical } from 'lucide-react';
+import type { Spread, SpreadPosition } from '@/types';
+import { saveCustomSpread, getCustomSpreads, deleteCustomSpread } from '@/utils/spreadStorage';
+
+export default function SpreadEditor() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const isEdit = !!id;
+
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [positions, setPositions] = useState<SpreadPosition[]>([
+    { id: 0, name: '现状', description: '当前状态', x: 50, y: 50 },
+  ]);
+  const [draggingIdx, setDraggingIdx] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (isEdit && id) {
+      const custom = getCustomSpreads();
+      const spread = custom.find(s => s.id === id);
+      if (spread) {
+        setName(spread.name);
+        setDescription(spread.description);
+        setPositions(spread.positions);
+      }
+    }
+  }, [id, isEdit]);
+
+  const addPosition = () => {
+    if (positions.length >= 12) return;
+    const newId = positions.length;
+    const cols = Math.ceil(Math.sqrt(positions.length + 1));
+    const row = Math.floor(positions.length / cols);
+    const col = positions.length % cols;
+    setPositions([
+      ...positions,
+      {
+        id: newId,
+        name: `位置${newId + 1}`,
+        description: '请输入描述',
+        x: 15 + (col * 70 / (cols - 1 || 1)),
+        y: 15 + (row * 70 / (cols - 1 || 1)),
+      },
+    ]);
+  };
+
+  const updatePosition = (idx: number, field: keyof SpreadPosition, value: string | number) => {
+    setPositions(positions.map((p, i) => i === idx ? { ...p, [field]: value } : p));
+  };
+
+  const removePosition = (idx: number) => {
+    if (positions.length <= 2) return;
+    setPositions(positions.filter((_, i) => i !== idx).map((p, i) => ({ ...p, id: i })));
+  };
+
+  const handleSave = () => {
+    if (!name.trim() || positions.length < 2) return;
+
+    const spread: Spread = {
+      id: isEdit && id ? id : `custom-${Date.now()}`,
+      name: name.trim(),
+      description: description.trim() || '我的自定义牌阵',
+      positions,
+      category: 'custom',
+      isCustom: true,
+      scene: ['general'],
+    };
+
+    saveCustomSpread(spread);
+    navigate('/spread-library');
+  };
+
+  const handleDelete = () => {
+    if (!isEdit || !id) return;
+    if (confirm('确定删除这个牌阵？')) {
+      deleteCustomSpread(id);
+      navigate('/spread-library');
+    }
+  };
+
+  const handlePositionDrag = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (draggingIdx === null) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    setPositions(positions.map((p, i) => i === draggingIdx ? { ...p, x: Math.max(5, Math.min(95, x)), y: Math.max(5, Math.min(95, y)) } : p));
+  };
+
+  return (
+    <div className="relative min-h-screen pt-20 pb-16 px-4">
+      <div className="max-w-5xl mx-auto">
+        <button
+          onClick={() => navigate(-1)}
+          className="inline-flex items-center gap-2 text-stardust/60 hover:text-ancient text-sm mb-6"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          返回
+        </button>
+
+        <h1 className="font-display text-3xl text-ancient tracking-wider mb-8">
+          {isEdit ? '编辑牌阵' : '创建自定义牌阵'}
+        </h1>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Editor Form */}
+          <div className="space-y-6">
+            <div className="glass-panel p-6">
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-ancient/80 text-sm mb-2">牌阵名称</label>
+                  <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="例：感情发展三步"
+                    className="w-full bg-void/50 border border-ancient/20 rounded px-3 py-2 text-stardust placeholder-stardust/30 focus:border-ancient/60 focus:outline-none"
+                  />
+                </div>
+                <div>
+                  <label className="block text-ancient/80 text-sm mb-2">牌阵描述</label>
+                  <textarea
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder="描述这个牌阵的用途..."
+                    className="w-full bg-void/50 border border-ancient/20 rounded px-3 py-2 text-stardust placeholder-stardust/30 focus:border-ancient/60 focus:outline-none resize-none h-20"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="glass-panel p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="font-display text-ancient text-sm tracking-wider">牌位（{positions.length}/12）</h3>
+                <button
+                  onClick={addPosition}
+                  disabled={positions.length >= 12}
+                  className="inline-flex items-center gap-1 px-3 py-1 bg-ancient/20 border border-ancient/50 text-ancient rounded-sm text-xs hover:bg-ancient/30 transition-all disabled:opacity-30"
+                >
+                  <Plus className="w-3 h-3" />
+                  增加
+                </button>
+              </div>
+
+              <div className="space-y-3 max-h-96 overflow-y-auto">
+                {positions.map((pos, idx) => (
+                  <div key={pos.id} className="bg-abyss/40 border border-ancient/10 rounded p-3 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-ancient/60">#{idx + 1}</span>
+                      <button
+                        onClick={() => removePosition(idx)}
+                        disabled={positions.length <= 2}
+                        className="text-stardust/40 hover:text-crimson disabled:opacity-30"
+                      >
+                        <Trash2 className="w-3 h-3" />
+                      </button>
+                    </div>
+                    <input
+                      type="text"
+                      value={pos.name}
+                      onChange={(e) => updatePosition(idx, 'name', e.target.value)}
+                      placeholder="牌位名称"
+                      className="w-full bg-void/50 border border-ancient/20 rounded px-2 py-1 text-sm text-stardust focus:border-ancient/60 focus:outline-none"
+                    />
+                    <input
+                      type="text"
+                      value={pos.description}
+                      onChange={(e) => updatePosition(idx, 'description', e.target.value)}
+                      placeholder="牌位含义"
+                      className="w-full bg-void/50 border border-ancient/20 rounded px-2 py-1 text-xs text-stardust focus:border-ancient/60 focus:outline-none"
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={handleSave}
+                disabled={!name.trim() || positions.length < 2}
+                className="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-ancient/20 border border-ancient/50 text-ancient hover:bg-ancient/30 transition-all rounded-sm disabled:opacity-30"
+              >
+                <Save className="w-4 h-4" />
+                {isEdit ? '保存修改' : '保存牌阵'}
+              </button>
+              {isEdit && (
+                <button
+                  onClick={handleDelete}
+                  className="inline-flex items-center gap-2 px-4 py-3 border border-crimson/40 text-crimson/70 hover:border-crimson hover:text-crimson transition-all rounded-sm"
+                >
+                  <Trash2 className="w-4 h-4" />
+                  删除
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* Layout Preview */}
+          <div className="glass-panel p-6">
+            <h3 className="font-display text-ancient text-sm tracking-wider mb-4">布局预览</h3>
+            <p className="text-xs text-stardust/40 mb-4">点击下方画布的牌位可拖拽调整位置</p>
+            <div
+              className="relative w-full bg-void/40 border border-ancient/20 rounded-lg"
+              style={{ aspectRatio: '1', minHeight: '300px' }}
+              onMouseMove={handlePositionDrag}
+              onMouseUp={() => setDraggingIdx(null)}
+              onMouseLeave={() => setDraggingIdx(null)}
+            >
+              {positions.map((pos, idx) => (
+                <div
+                  key={pos.id}
+                  onMouseDown={() => setDraggingIdx(idx)}
+                  className="absolute -translate-x-1/2 -translate-y-1/2 cursor-move group"
+                  style={{ left: `${pos.x}%`, top: `${pos.y}%` }}
+                >
+                  <div className="w-16 h-24 bg-abyss border-2 border-ancient/60 rounded flex flex-col items-center justify-center text-center p-1 group-hover:border-ancient transition-colors">
+                    <GripVertical className="w-3 h-3 text-ancient/40 absolute -top-3 opacity-0 group-hover:opacity-100" />
+                    <span className="text-[9px] text-ancient/60">#{idx + 1}</span>
+                    <span className="text-[10px] text-stardust truncate w-full">{pos.name}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/SpreadEditorPage.tsx

@@ -0,0 +1,105 @@
+// 自创牌阵：创建/编辑自定义塔罗牌阵（2-10 位，localStorage）
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { getCustomTarotSpreads, saveCustomTarotSpread, deleteCustomTarotSpread } from '@core/data/tarotSpreads';
+import { useConfirm } from '@/components/SongDialog';
+
+export default function SpreadEditorPage() {
+  const navigate = useNavigate();
+  const confirm = useConfirm();
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [positions, setPositions] = useState<{ id: number; name: string; description: string }[]>([
+    { id: 0, name: '现况', description: '当下的状况' },
+    { id: 1, name: '指引', description: '可为之径' },
+  ]);
+
+  const addPos = () => {
+    if (positions.length >= 10) return;
+    setPositions([...positions, { id: positions.length, name: '位' + (positions.length + 1), description: '请书其义' }]);
+  };
+
+  const removePos = (i: number) => {
+    if (positions.length <= 2) return;
+    setPositions(positions.filter((_, j) => j !== i).map((p, j) => ({ ...p, id: j })));
+  };
+
+  const upd = (i: number, field: 'name' | 'description', v: string) => {
+    setPositions(positions.map((p, j) => j === i ? { ...p, [field]: v } : p));
+  };
+
+  const save = () => {
+    if (!name.trim() || positions.length < 2) return;
+    const spread = {
+      id: 'custom-' + Date.now(),
+      name: name.trim(),
+      description: description.trim() || '君之自创牌阵',
+      positions,
+      isCustom: true,
+    };
+    saveCustomTarotSpread(spread);
+    navigate('/art/tarot');
+  };
+
+  const clearAll = async () => {
+    const custom = getCustomTarotSpreads();
+    if (!custom.length) return;
+    const ok = await confirm('将尽除所创牌阵，共 ' + custom.length + ' 个，是否确然？', { title: '慎问', confirmText: '尽 除', danger: true });
+    if (ok) {
+      custom.forEach(s => deleteCustomTarotSpread(s.id));
+      navigate('/art/tarot');
+    }
+  };
+
+  const customList = getCustomTarotSpreads();
+
+  return (
+    <div className="wrap" style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-6)', maxWidth: 760 }}>
+      <Link className="back-link" to="/art/tarot">‹ 返问镜</Link>
+      <div className="module-kicker">镜鉴 · 自创</div>
+      <div className="module-title-row">
+        <h2 className="module-title"><span className="cn">自创牌阵</span>布位立义</h2>
+      </div>
+      <p className="module-intro">为所问之事，自定牌位之序与其义。二至十位皆可。</p>
+
+      <div className="altar-panel" style={{ position: 'static', marginTop: 'var(--sp-4)' }}>
+        <div className="field"><label>牌阵名</label>
+          <input className="input-line" placeholder="例：吾之三问" value={name} onChange={e => setName(e.target.value)} /></div>
+        <div className="field"><label>牌阵述</label>
+          <input className="input-line" placeholder="此阵为何而设…" value={description} onChange={e => setDescription(e.target.value)} /></div>
+        <div className="field"><label>牌位（{positions.length}/10）</label>
+          {positions.map((p, i) => (
+            <div key={p.id} style={{ display: 'flex', gap: '.5rem', marginBottom: '.5rem', alignItems: 'center' }}>
+              <span className="tiny muted" style={{ width: '1.6rem', textAlign: 'right' }}>#{i + 1}</span>
+              <input className="input-line" style={{ maxWidth: 180 }} placeholder="位名" value={p.name} onChange={e => upd(i, 'name', e.target.value)} />
+              <input className="input-line" placeholder="位义" value={p.description} onChange={e => upd(i, 'description', e.target.value)} />
+              <button className="pill hot" style={{ cursor: 'pointer', flexShrink: 0 }} onClick={() => removePos(i)} disabled={positions.length <= 2}>删</button>
+            </div>
+          ))}
+          <button className="btn-seal btn-ghost" style={{ fontSize: '.8rem', padding: '.35rem 1rem' }} onClick={addPos} disabled={positions.length >= 10}>增 位</button>
+        </div>
+        <div style={{ display: 'flex', gap: '.8rem', marginTop: 'var(--sp-3)' }}>
+          <button className="btn-divine" style={{ width: 'auto', padding: '.7rem 2rem', marginTop: 0 }} onClick={save}>存 阵</button>
+          <button className="btn-seal btn-ghost" style={{ fontSize: '.85rem', padding: '.5rem 1.2rem' }} onClick={clearAll}>清 所 创</button>
+        </div>
+      </div>
+
+      {customList.length > 0 && (
+        <div className="mt-4">
+          <h3 className="tag-cool" style={{ letterSpacing: '.25em', marginBottom: 'var(--sp-2)' }}>已创牌阵</h3>
+          {customList.map(s => (
+            <div className="result-card" key={s.id} style={{ marginBottom: '.8rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div>
+                <strong>{s.name}</strong> <span className="tiny muted">· {s.positions.length} 位 · {s.description}</span>
+              </div>
+              <button className="pill hot" style={{ cursor: 'pointer' }} onClick={async () => {
+                const ok = await confirm('除「' + s.name + '」此阵？', { title: '慎问', confirmText: '除 之', danger: true });
+                if (ok) { deleteCustomTarotSpread(s.id); navigate(0); }
+              }}>删</button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}