对话页换成组件库，桌面旁边可以打开本命盘（#106）。

输入框里左边选模型、右边发送。回答下的赞、踩、复制、重新生成和追问改用组件库按钮。不满意原因和兑换窗改用对话框，句子不变。桌面顶栏可以打开当前人物的本命盘，能拖宽，刷新后还在；手机没有这个入口。当前会话和流式状态从 Home() 移进已有会话 store，useState 从 33 减到 25。流式、停止、排队、撤回、退点和寒暄免费没有改。自测：tsc 退出码 0；lint 0 error、122 条警告；定向测试 275 通过、失败 0、取消 0；npm run build 退出码 0，/ 仍是 Static。首屏 gzip-9 639127，相对基线 634528 多 0.72%。隐私标记测试退出码 0。 Co-Authored-By: Grok (agent loop)
2026-10-25 03:15:13 +08:00
parent e4e240bf86
commit d25dfdbe1a
31 changed files with 921 additions and 249 deletions
@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+import type { PanelImperativeHandle } from "react-resizable-panels";
+
+import { ChatNatalChart } from "@/components/chat-natal-chart";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { CHAT_CHART_WIDTH_MAX, CHAT_CHART_WIDTH_MIN } from "@/lib/chat-chart-panel-state";
+
+export function ChatChartSplit({
+  open,
+  width,
+  subjectId,
+  onOpenChange,
+  onWidth,
+  children,
+}: {
+  open: boolean;
+  width: number;
+  subjectId: string;
+  onOpenChange: (open: boolean) => void;
+  onWidth: (width: number) => void;
+  children: ReactNode;
+}) {
+  const panelRef = useRef<PanelImperativeHandle | null>(null);
+
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    if (open && panel.isCollapsed()) panel.expand();
+    if (!open && !panel.isCollapsed()) panel.collapse();
+  }, [open]);
+
+  function onLayoutChanged(_layout: Record<string, number>, meta: { isUserInteraction: boolean }) {
+    if (!meta.isUserInteraction) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    if (panel.isCollapsed()) {
+      onOpenChange(false);
+      return;
+    }
+    onOpenChange(true);
+    const pixels = panel.getSize().inPixels;
+    if (pixels >= CHAT_CHART_WIDTH_MIN) onWidth(Math.round(pixels));
+  }
+
+  return (
+    <ResizablePanelGroup orientation="horizontal" className="chat-chart-split" onLayoutChanged={onLayoutChanged}>
+      <ResizablePanel id="chat-column" defaultSize="100%">
+        {children}
+      </ResizablePanel>
+      <ResizableHandle withHandle className="chat-chart-resize-handle" />
+      <ResizablePanel
+        id="chat-natal"
+        panelRef={panelRef}
+        collapsible
+        collapsedSize={0}
+        minSize={CHAT_CHART_WIDTH_MIN}
+        maxSize={CHAT_CHART_WIDTH_MAX}
+        defaultSize={open ? width : 0}
+        groupResizeBehavior="preserve-pixel-size"
+      >
+        <ChatNatalChart subjectId={subjectId} />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}