guanwei 1.1.1

package/src/components/ReportView.tsx

@@ -0,0 +1,211 @@
+// AI 解读报告结构化展示：按 Schema 匹配填充（命盘类/占问类）
+import type { AIReport } from '@/services/api';
+import { ResultCard } from '@/components/ResultCard';
+
+interface Props {
+  report: AIReport;
+  artName: string;
+  onExport: () => void;
+}
+
+export default function ReportView({ report, artName, onExport }: Props) {
+  const r = report;
+  return (
+    <div className="report-view">
+      {/* 标题与总述 */}
+      <div className="result-card">
+        <h3>{r.title || '观微解读报告'}</h3>
+        <p className="tiny muted" style={{ marginBottom: '.5rem' }}>术别：{artName}</p>
+        {r.overview && <p className="result-text" style={{ fontSize: '1rem', color: 'var(--ink)' }}>{r.overview}</p>}
+      </div>
+
+      {/* 适问之辨 */}
+      {r.suitability && (r.suitability.note || r.suitability.suggestion) && (
+        <div className={"result-card fit-card " + (r.suitability.suitable === true ? 'fit-ok' : r.suitability.suitable === 'partial' ? 'fit-partial' : 'fit-bad')}>
+          <h3>适问之辨</h3>
+          {r.suitability.note && <p className="result-text">{r.suitability.note}</p>}
+          {r.suitability.suggestion && <p className="result-text"><strong>✦ 建议：</strong>{r.suitability.suggestion}</p>}
+        </div>
+      )}
+
+      {/* 原始解读 */}
+      {(r.rawReading?.summary || r.rawReading?.keyPoints?.length) && (
+        <div className="result-card">
+          <h3>原始解读 · 先明盘面</h3>
+          {r.rawReading.summary && <p className="result-text">{r.rawReading.summary}</p>}
+          {r.rawReading.keyPoints.length > 0 && (
+            <ul className="report-list mt-2">
+              {r.rawReading.keyPoints.map((k, i) => <li key={i}>{k}</li>)}
+            </ul>
+          )}
+        </div>
+      )}
+
+      {/* 命盘类：性格/人生阶段/事业/爱情/财富 */}
+      {r.kind === 'mingpan' && (
+        <>
+          {r.character && (r.character.summary || r.character.traits.length > 0) && (
+            <div className="result-card">
+              <h3>命主性格</h3>
+              {r.character.summary && <p className="result-text">{r.character.summary}</p>}
+              {r.character.traits.length > 0 && (
+                <div className="trait-grid mt-3">
+                  {r.character.traits.map((t, i) => (
+                    <div className="trait-cell" key={i}>
+                      <div className="trait-name">{t.name}</div>
+                      <div className="trait-desc">{t.desc}</div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {r.lifeStages && r.lifeStages.length > 0 && (
+            <div className="result-card">
+              <h3>人生阶段</h3>
+              <div className="timeline mt-3">
+                {r.lifeStages.map((s, i) => (
+                  <div className="tl-item" key={i}>
+                    <div className="tl-marker"><span className="tl-dot" /></div>
+                    <div className="tl-body">
+                      <div className="tl-head"><strong>{s.stage}</strong><span className="tl-age">{s.age}</span></div>
+                      <p className="tl-summary">{s.summary}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {(r.family?.background || r.family?.parents || r.family?.imprint) && (
+            <div className="result-card">
+              <h3>原生家庭</h3>
+              {r.family.background && (
+                <div className="fam-block"><p className="tiny muted" style={{ margin: '.3rem 0 .4rem' }}>家境与氛围</p><p className="result-text">{r.family.background}</p></div>
+              )}
+              {r.family.parents && (
+                <div className="fam-block"><p className="tiny muted" style={{ margin: '.3rem 0 .4rem' }}>父母关系</p><p className="result-text">{r.family.parents}</p></div>
+              )}
+              {r.family.imprint && (
+                <div className="fam-block"><p className="tiny muted" style={{ margin: '.3rem 0 .4rem' }}>家庭印记</p><p className="result-text">{r.family.imprint}</p></div>
+              )}
+            </div>
+          )}
+
+          {(r.mind?.action || r.mind?.pattern || r.mind?.growth) && (
+            <div className="result-card">
+              <h3>心智与行动模式</h3>
+              {r.mind.action && (
+                <div className="mind-block"><p className="tiny muted" style={{ margin: '.3rem 0 .4rem' }}>行动力与坚持</p><p className="result-text">{r.mind.action}</p></div>
+              )}
+              {r.mind.pattern && (
+                <div className="mind-block"><p className="tiny muted" style={{ margin: '.3rem 0 .4rem' }}>行为循环</p><p className="result-text">{r.mind.pattern}</p></div>
+              )}
+              {r.mind.growth && (
+                <div className="mind-block"><p className="tiny muted" style={{ margin: '.3rem 0 .4rem' }}>成长方向</p><p className="result-text">{r.mind.growth}</p></div>
+              )}
+            </div>
+          )}
+
+          {(r.career?.summary || r.love?.summary || r.wealth?.summary || r.health?.summary) && (
+            <div className="result-card">
+              <h3>学业事业 · 爱情 · 财富 · 健康</h3>
+              <div className="domain-grid mt-3">
+                {r.career?.summary && (
+                  <div className="domain-cell">
+                    <div className="domain-name">学业 · 事业</div>
+                    <p>{r.career.summary}</p>
+                    {r.career.direction && <p className="tiny muted">宜向：{r.career.direction}</p>}
+                    {r.career.advice && <p className="tiny">建议：{r.career.advice}</p>}
+                  </div>
+                )}
+                {r.love?.summary && (
+                  <div className="domain-cell">
+                    <div className="domain-name">爱情</div>
+                    <p>{r.love.summary}</p>
+                    {r.love.advice && <p className="tiny">建议：{r.love.advice}</p>}
+                  </div>
+                )}
+                {r.wealth?.summary && (
+                  <div className="domain-cell">
+                    <div className="domain-name">财富</div>
+                    <p>{r.wealth.summary}</p>
+                    {r.wealth.advice && <p className="tiny">建议：{r.wealth.advice}</p>}
+                  </div>
+                )}
+                {r.health?.summary && (
+                  <div className="domain-cell">
+                    <div className="domain-name">健康</div>
+                    <p>{r.health.summary}</p>
+                    {r.health.advice && <p className="tiny">建议：{r.health.advice}</p>}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* 占问类：现状/趋势/时机 */}
+      {r.kind === 'zhanwen' && (
+        <div className="result-card">
+          <h3>局势 · 趋势 · 时机</h3>
+          <div className="domain-grid mt-3">
+            {r.situation && <div className="domain-cell"><div className="domain-name">当下局势</div><p>{r.situation}</p></div>}
+            {r.trend && <div className="domain-cell"><div className="domain-name">发展趋势</div><p>{r.trend}</p></div>}
+            {r.timing && <div className="domain-cell"><div className="domain-name">时机宜忌</div><p>{r.timing}</p></div>}
+          </div>
+        </div>
+      )}
+
+      {/* 建议 */}
+      {r.advice && (
+        <div className="result-card">
+          <h3>参详建议</h3>
+          <ul className="report-list mt-1">
+            {r.advice.split(/[;；]/).filter(Boolean).map((a, i) => <li key={i}>{a.trim()}</li>)}
+          </ul>
+        </div>
+      )}
+
+      {/* 结语 */}
+      {r.conclusion && (
+        <div className="result-card">
+          <h3>结语</h3>
+          <p className="result-text">{r.conclusion}</p>
+        </div>
+      )}
+
+      {/* AI 自定义扩展章节兜底（family/mind 之外的任意字段 / 旧版 chapters 结构）：任何内容都不丢失 */}
+      {((r as any).extraSections?.length > 0 || (r as any).chapters?.length > 0) && (
+        <div className="result-card">
+          <h3>更多参详</h3>
+          {(r as any).chapters?.map((c: any, i: number) => (
+            <div key={'ch' + i} style={{ marginBottom: 'var(--sp-2)' }}>
+              <p className="tag-cool" style={{ marginBottom: '.3rem' }}><strong>{c.skill || '参详'}</strong></p>
+              <p className="result-text" style={{ whiteSpace: 'pre-wrap' }}>{c.content}</p>
+            </div>
+          ))}
+          {(r as any).extraSections?.map((s: any, i: number) => (
+            <div key={'ex' + i} style={{ marginBottom: 'var(--sp-2)' }}>
+              <p className="tag-cool" style={{ marginBottom: '.3rem' }}><strong>{s.skill || '参详'}</strong></p>
+              <p className="result-text" style={{ whiteSpace: 'pre-wrap' }}>{s.content}</p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 免责 + 导出 */}
+      <p className="tiny muted" style={{ marginTop: 'var(--sp-2)' }}>{r.disclaimer}</p>
+      <div className="btn-row mt-3">
+        <button className="btn-seal btn-ghost" style={{ fontSize: '.82rem', padding: '.4rem 1.1rem' }} onClick={onExport}>
+          导 出 报 告
+        </button>
+        <button className="btn-seal btn-ghost" style={{ fontSize: '.82rem', padding: '.4rem 1.1rem' }} onClick={() => window.print()}>
+          存 为 PDF
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/ResultCard.tsx

@@ -0,0 +1,40 @@
+// 结果卡（各术结果渲染的基础容器，现代解读层正文）
+import type { ReactNode } from 'react';
+
+interface Cell { k: string; v: ReactNode; big?: boolean; hot?: boolean; cool?: boolean; }
+
+interface ResultCardProps {
+  title: string;
+  cells?: Cell[];
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ResultCard({ title, cells, children, className = '' }: ResultCardProps) {
+  return (
+    <div className={`result-card ${className}`}>
+      <h3>{title}</h3>
+      {cells && cells.length > 0 && (
+        <div className="result-grid">
+          {cells.map((c, i) => (
+            <div className="result-cell" key={i}>
+              <div className="k">{c.k}</div>
+              <div className={`v ${c.big ? 'big' : ''} ${c.hot ? 'hot' : ''} ${c.cool ? 'cool' : ''}`}>{c.v}</div>
+            </div>
+          ))}
+        </div>
+      )}
+      {children && <div className="result-text">{children}</div>}
+    </div>
+  );
+}
+
+// 结果占位（古风提示层）
+export function ResultPlaceholder({ glyph = '卦', text = '静候卦象 · 观微知著' }: { glyph?: string; text?: string }) {
+  return (
+    <div className="result-placeholder">
+      <div className="glyph" aria-hidden="true">{glyph}</div>
+      <p>{text}</p>
+    </div>
+  );
+}

package/src/components/SealButton.tsx

@@ -0,0 +1,18 @@
+// 印章式按钮（古风提示层文案约定：按钮字为文言短句）
+import { Link } from 'react-router-dom';
+
+interface Props {
+  children: React.ReactNode;
+  to?: string;
+  onClick?: () => void;
+  ghost?: boolean;
+  className?: string;
+}
+
+export default function SealButton({ children, to, onClick, ghost, className = '' }: Props) {
+  const cls = `btn-seal ${ghost ? 'btn-ghost' : ''} ${className}`;
+  if (to) {
+    return <Link to={to} className={cls} onClick={onClick}><span className="sb-label">{children}</span></Link>;
+  }
+  return <button className={cls} onClick={onClick}><span className="sb-label">{children}</span></button>;
+}

package/src/components/SiteFooter.tsx

@@ -0,0 +1,17 @@
+// 页脚：品牌 + 免责声明（古风提示层）
+export default function SiteFooter() {
+  return (
+    <footer className="site-foot">
+      <div className="wrap foot-inner">
+        <div className="foot-brand">
+          <span className="seal">观微</span>
+          <span>观微 · 玄学问道</span>
+        </div>
+        <div className="foot-meta">
+          <p>凡占问所得，仅供修身养性、怡情遣兴之用，不作决策依据。</p>
+          <p>术数乃先贤观天察地之遗智，敬而用之，勿迷勿执。</p>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/src/components/SiteNav.tsx

@@ -0,0 +1,103 @@
+// 顶部导航：首页 / 九术（分类下拉） / 法度 / 古籍 / 学馆 / 缘起 / 档案区（最右）
+// 历史入口移入登录后档案菜单
+import { Link, useLocation } from 'react-router-dom';
+import { currentUser, logout } from '@/utils/userStore';
+import { useState } from 'react';
+import { ARTS } from '@/data/arts';
+
+// 九术分类（参考「青囊」术数推演下拉的分组方式）
+const ART_GROUPS: { name: string; arts: string[] }[] = [
+  { name: '命理', arts: ['bazi', 'ziwei'] },
+  { name: '三式', arts: ['qimen', 'liuren'] },
+  { name: '象数 · 筮法', arts: ['meihua', 'liuyao', 'xiaoliuren'] },
+  { name: '西学镜鉴', arts: ['astrology', 'tarot'] },
+];
+
+export default function SiteNav() {
+  const location = useLocation();
+  const pathname = location.pathname;
+  const isArt = pathname.startsWith('/art/');
+
+  const isActive = (key: string): boolean => {
+    switch (key) {
+      case 'home': return pathname === '/' && !isArt;
+      case 'arts': return isArt;
+      case 'fa': return false;
+      case 'classics': return pathname.startsWith('/classics');
+      case 'academy': return pathname.startsWith('/academy');
+      case 'about': return pathname.startsWith('/about');
+      default: return false;
+    }
+  };
+
+  return (
+    <header className="site-head">
+      <div className="wrap head-inner">
+        <Link className="brand" to="/">
+          <span className="seal" aria-hidden="true">观微</span>
+          <span className="name">观微</span>
+          <span className="sub">以术问道 · 观微知著</span>
+        </Link>
+        <nav className="nav-links" aria-label="主导航">
+          <Link to="/" className={pathname === '/' && !isArt ? 'active' : ''}>首页</Link>
+          <ArtsDropdown active={isArt} />
+          <Link to="/classics" className={isActive('classics') ? 'active' : ''}>古籍</Link>
+          <Link to="/academy" className={isActive('academy') ? 'active' : ''}>学馆</Link>
+          <Link to="/about" className={isActive('about') ? 'active' : ''}>缘起</Link>
+        </nav>
+        <UserArea />
+      </div>
+    </header>
+  );
+}
+
+// 九术分类下拉（hover 展开）
+function ArtsDropdown({ active }: { active: boolean }) {
+  return (
+    <div className="has-sub">
+      <Link to="/" className={active ? 'active' : ''} onClick={e => { e.preventDefault(); document.getElementById('home-arts')?.scrollIntoView({ behavior: 'smooth' }); }}>九术 <svg className="chev-mini" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg></Link>
+      <div className="sub-menu arts-sub" style={{ minWidth: '13rem' }}>
+        {ART_GROUPS.map(g => (
+          <div key={g.name} className="sub-group">
+            <div className="sub-group-name">{g.name}</div>
+            {g.arts.map(a => {
+              const art = ARTS.find(x => x.id === a)!;
+              return <Link key={a} to={'/art/' + a}><span className="sub-glyph">{art.glyph}</span>{art.name}<span className="sub-poem">{art.poem.split('，')[0]}</span></Link>;
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// 档案区（最右）：未登录 → 入馆；登录后 → 名号下拉（档案/占问记录/离馆）
+function UserArea() {
+  const user = currentUser();
+  const [, force] = useState(0);
+  if (!user) {
+    return <Link to="/auth" className="btn-seal btn-ghost" style={{ fontSize: '.78rem', padding: '.3rem 1rem', letterSpacing: '.2em' }}><span className="sb-label">入 馆</span></Link>;
+  }
+  // 用户名限 4 字，超出省略
+  const shortName = user.username.length > 4 ? user.username.slice(0, 4) + '…' : user.username;
+  return (
+    <div className="has-sub user-menu">
+      <button className="user-chip" onClick={() => {}}>
+        <span className="user-seal">{user.username.slice(0, 1)}</span>
+        <span className="user-name">{shortName}</span>
+        <span className="user-caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg></span>
+      </button>
+      <div className="sub-menu" style={{ right: 0, left: 'auto', transform: 'none' }}>
+        <Link to="/auth">吾之档案</Link>
+        <Link to="/history">占问记录</Link>
+        <Link
+          to="/"
+          onClick={() => { logout(); force(x => x + 1); }}
+          style={{ color: 'var(--cinnabar)' }}
+        >
+          离 馆
+        </Link>
+      </div>
+    </div>
+  );
+}

package/src/components/SongDialog.tsx

@@ -0,0 +1,64 @@
+// SongDialog：宋式确认弹窗（替代系统 confirm/alert）
+import { createContext, useCallback, useContext, useState } from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+
+interface DialogState {
+  open: boolean;
+  title: string;
+  message: string;
+  confirmText: string;
+  danger: boolean;
+  resolve: ((ok: boolean) => void) | null;
+}
+
+const DialogContext = createContext<{
+  confirm: (message: string, opts?: { title?: string; confirmText?: string; danger?: boolean }) => Promise<boolean>;
+}>({ confirm: async () => false });
+
+export function useConfirm() {
+  return useContext(DialogContext).confirm;
+}
+
+export function SongDialogProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<DialogState>({ open: false, title: '', message: '', confirmText: '确 定', danger: false, resolve: null });
+
+  const confirm = useCallback((message: string, opts?: { title?: string; confirmText?: string; danger?: boolean }) => {
+    return new Promise<boolean>(resolve => {
+      setState({
+        open: true,
+        title: opts?.title || '慎问',
+        message,
+        confirmText: opts?.confirmText || '确 定',
+        danger: !!opts?.danger,
+        resolve,
+      });
+    });
+  }, []);
+
+  const close = (ok: boolean) => {
+    state.resolve?.(ok);
+    setState(s => ({ ...s, open: false, resolve: null }));
+  };
+
+  const dangerStyle: CSSProperties = state.danger ? { borderColor: 'var(--cinnabar)', color: 'var(--cinnabar)' } : {};
+
+  return (
+    <DialogContext.Provider value={{ confirm }}>
+      {children}
+      {state.open && (
+        <div className="song-dialog-mask" onClick={() => close(false)}>
+          <div className="song-dialog" onClick={e => e.stopPropagation()} role="dialog" aria-modal="true">
+            <div className="dlg-title">{state.title}</div>
+            <div className="dlg-body">{state.message}</div>
+            <div className="dlg-actions">
+              <button className="btn-seal btn-ghost" style={{ fontSize: '.85rem', padding: '.42rem 1.2rem' }} onClick={() => close(false)}>再 思</button>
+              <button className="btn-seal" style={{ fontSize: '.85rem', padding: '.42rem 1.2rem', ...dangerStyle }} onClick={() => close(true)}>
+                {state.confirmText}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </DialogContext.Provider>
+  );
+}

package/src/components/SongSearchSelect.tsx

@@ -0,0 +1,81 @@
+// SongSearchSelect：可搜索的自定义下拉（自有 UI，替代系统 select）
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+interface Props {
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  id?: string;
+  allowCustom?: boolean;  // 允许输入未收录之项（以输入值为准）
+}
+
+export default function SongSearchSelect({ value, options, onChange, placeholder = '择…', disabled, id, allowCustom }: Props) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  // 打开时聚焦搜索框
+  useEffect(() => {
+    if (open) setTimeout(() => inputRef.current?.focus(), 30);
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim();
+    if (!q) return options;
+    return options.filter(o => o.label.includes(q));
+  }, [options, query]);
+
+  const sel = options.find(o => o.value === value);
+  return (
+    <div className={'song-select song-search' + (open ? ' open' : '')} ref={ref}>
+      <button type="button" className="trigger" id={id} disabled={disabled} onClick={() => setOpen(v => !v)} aria-haspopup="listbox" aria-expanded={open}>
+        <span>{sel ? sel.label : placeholder}</span>
+        <svg className="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      {open && (
+        <div className="panel" role="listbox">
+          <div className="ss-search">
+            <input
+              ref={inputRef}
+              className="ss-input"
+              placeholder="输入以搜…"
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+            />
+          </div>
+          <div className="ss-list">
+            {filtered.map(o => (
+              <button
+                key={o.value}
+                type="button"
+                className={o.value === value ? 'sel' : ''}
+                onClick={() => { onChange(o.value); setOpen(false); setQuery(''); }}
+              >
+                {o.label}
+              </button>
+            ))}
+            {filtered.length === 0 && (allowCustom && query.trim() ? (
+              <button type="button" className="ss-custom" onClick={() => { onChange(query.trim()); setOpen(false); setQuery(''); }}>
+                取「{query.trim()}」为区县（以城坐标计）
+              </button>
+            ) : <div className="ss-empty">无契合之项</div>)}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/SongSelect.tsx

@@ -0,0 +1,61 @@
+// SongSelect：宋式自定义下拉（替代系统 select）
+import { useEffect, useRef, useState } from 'react';
+
+export interface SongOption { value: string; label: string }
+
+interface Props {
+  value: string;
+  options: SongOption[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  id?: string;
+}
+
+export default function SongSelect({ value, options, onChange, placeholder = '择…', disabled, id }: Props) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  const sel = options.find(o => o.value === value);
+  return (
+    <div className={'song-select' + (open ? ' open' : '')} ref={ref}>
+      <button
+        type="button"
+        className="trigger"
+        id={id}
+        disabled={disabled}
+        onClick={() => setOpen(v => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+      >
+        <span>{sel ? sel.label : placeholder}</span>
+        <svg className="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      {open && (
+        <div className="panel" role="listbox">
+          {options.map(o => (
+            <button
+              key={o.value}
+              type="button"
+              className={o.value === value ? 'sel' : ''}
+              onClick={() => { onChange(o.value); setOpen(false); }}
+            >
+              {o.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}