@langgraph-js/ui 2.1.2 → 2.2.0

package/src/chat/components/MessageTool.tsx

@@ -7,7 +7,7 @@ import remarkGfm from "remark-gfm";
 import { Highlight, themes } from "prism-react-renderer";
 import { MessagesBox } from "./MessageBox";
 
-const TOOL_COLORS = ["border-red-400", "border-blue-400", "border-green-500", "border-yellow-400", "border-purple-400", "border-pink-400", "border-indigo-400"];
+const TOOL_COLORS = ["bg-white", "bg-white", "bg-white", "bg-white", "bg-white", "bg-white", "bg-white"];
 
 interface MessageToolProps {
     message: ToolMessage & RenderMessage;
@@ -30,21 +30,21 @@ const getToolColorClass = (tool_name: string) => {
 const MessageTool: React.FC<MessageToolProps> = ({ message, client, getMessageContent, formatTokens, isCollapsed, onToggleCollapse }) => {
     const { getToolUIRender } = useChat();
     const render = getToolUIRender(message.name!);
-    const borderColorClass = getToolColorClass(message.name!);
+    const bgColorClass = getToolColorClass(message.name!);
     return (
         <div className="flex flex-col w-full">
             {render ? (
                 (render(message) as JSX.Element)
             ) : (
-                <div className={`flex flex-col w-full bg-white rounded-lg shadow-sm border-2 ${borderColorClass} overflow-hidden`}>
-                    <div className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 transition-colors" onClick={onToggleCollapse}>
-                        <div className="text-sm font-medium text-gray-700" onClick={() => console.log(message)}>
+                <div className={`flex flex-col w-full ${bgColorClass} rounded-2xl overflow-hidden`}>
+                    <div className="flex items-center justify-between px-5 py-3 cursor-pointer hover:bg-black/5 transition-colors" onClick={onToggleCollapse}>
+                        <div className="text-xs font-medium text-gray-600" onClick={() => console.log(message)}>
                             {message.node_name} | {message.name}
                         </div>
                     </div>
 
                     {!isCollapsed && (
-                        <div className="flex flex-col gap-4 p-4 border-t border-gray-100">
+                        <div className="flex flex-col gap-4 px-5 pb-4">
                             <Previewer content={message.tool_input || ""} />
                             <Previewer content={getMessageContent(message.content)} />
                             <UsageMetadata
@@ -59,7 +59,7 @@ const MessageTool: React.FC<MessageToolProps> = ({ message, client, getMessageCo
                 </div>
             )}
             {message.sub_agent_messages && (
-                <div className="flex flex-col pl-4 py-2 border-l border-gray-300">
+                <div className="flex flex-col pl-6 py-3 ml-4 border-l-2 border-gray-200">
                     <MessagesBox renderMessages={message.sub_agent_messages} collapsedTools={[]} toggleToolCollapse={(id) => {}} client={client} />
                 </div>
             )}
@@ -86,22 +86,22 @@ const Previewer = ({ content }: { content: string }) => {
     return (
         <div className={`flex flex-col`}>
             <div className="flex gap-2 mb-2">
-                <button onClick={copyToClipboard} className="px-2 py-1 text-xs font-medium text-gray-600 bg-green-100 rounded hover:bg-green-200 transition-colors">
+                <button onClick={copyToClipboard} className="px-3 py-1 text-xs font-medium text-gray-700 bg-white/60 rounded-lg hover:bg-white transition-colors">
                     copy
                 </button>
                 {isJSON && (
-                    <button onClick={() => setJsonMode(!jsonMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-orange-100 rounded hover:bg-orange-200 transition-colors">
+                    <button onClick={() => setJsonMode(!jsonMode)} className="px-3 py-1 text-xs font-medium text-gray-700 bg-white/60 rounded-lg hover:bg-white transition-colors">
                         json
                     </button>
                 )}
                 {isMarkdown && (
-                    <button onClick={() => setMarkdownMode(!markdownMode)} className="px-2 py-1 text-xs font-medium text-gray-600 bg-blue-100 rounded hover:bg-blue-200 transition-colors">
+                    <button onClick={() => setMarkdownMode(!markdownMode)} className="px-3 py-1 text-xs font-medium text-gray-700 bg-white/60 rounded-lg hover:bg-white transition-colors">
                         markdown
                     </button>
                 )}
             </div>
 
-            <div className="flex flex-col max-h-[300px] overflow-auto border border-gray-200 rounded p-2 w-full text-xs font-mono whitespace-pre-wrap">
+            <div className="flex flex-col max-h-[300px] overflow-auto bg-white/40 rounded-xl p-3 w-full text-xs font-mono whitespace-pre-wrap">
                 {jsonMode && isJSON ? (
                     <Highlight code={JSON.stringify(JSON.parse(content), null, 2)} language="json" theme={themes.oneLight}>
                         {({ className, style, tokens, getLineProps, getTokenProps }) => (

package/src/chat/components/UsageMetadata.tsx

@@ -3,6 +3,9 @@ interface UsageMetadataProps {
         input_tokens: number;
         output_tokens: number;
         total_tokens: number;
+        input_token_details?: {
+            cache_read?: number;
+        };
     }>;
     response_metadata?: {
         model_name?: string;
@@ -17,17 +20,18 @@ const formatTokens = (tokens: number) => {
 };
 export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, spend_time, response_metadata, id, tool_call_id }) => {
     const speed = spend_time ? ((usage_metadata.output_tokens || 0) * 1000) / (spend_time || 1) : 0;
+    spend_time = spend_time && !isNaN(spend_time) ? spend_time : 0;
     return (
-        <div className="flex items-center justify-between text-xs text-gray-500 mt-2">
+        <div className="flex items-center justify-between text-xs text-gray-400 mt-3">
             <div className="flex items-center gap-3">
                 <TokenPanel usage_metadata={usage_metadata} />
-                {spend_time && <span className="text-gray-500">{(spend_time / 1000).toFixed(2)}s</span>}
-                {speed && <span className="text-gray-500">{speed.toFixed(2)} TPS</span>}
+                {!!spend_time && <span className="text-gray-400">{(spend_time / 1000).toFixed(2)}s</span>}
+                {!!speed && <span className="text-gray-400">{speed.toFixed(2)} TPS</span>}
             </div>
             <div className="flex items-center gap-2">
-                {response_metadata?.model_name && <span className="text-gray-600">{response_metadata.model_name}</span>}
-                {tool_call_id && <span className="text-gray-500">Tool: {tool_call_id}</span>}
-                {id && <span className="text-gray-500">ID: {id}</span>}
+                {response_metadata?.model_name && <span className="text-gray-500">{response_metadata.model_name}</span>}
+                {tool_call_id && <span className="text-gray-400">Tool: {tool_call_id}</span>}
+                {id && <span className="text-gray-400">ID: {id}</span>}
             </div>
         </div>
     );
@@ -36,22 +40,49 @@ export const UsageMetadata: React.FC<UsageMetadataProps> = ({ usage_metadata, sp
 export const TokenPanel = ({ usage_metadata }: any) => {
     return (
         <div className="flex items-center gap-1">
-            <span className="flex items-center gap-1 group relative">
-                <span>📊</span>
-                {formatTokens(usage_metadata.total_tokens || 0)}
-                <div className="hidden group-hover:block absolute bottom-full ml-2 bg-gray-100 p-2 rounded text-xs shadow border">
-                    <div className="flex flex-col gap-1">
-                        <div className="flex flex-col gap-1">
-                            <span className="flex items-center gap-1">
-                                <span>📥</span>
-                                {formatTokens(usage_metadata.input_tokens || 0)}
-                                <div> {JSON.stringify(usage_metadata.prompt_tokens_details)}</div>
-                            </span>
-                            <span className="flex items-center gap-1">
-                                <span>📤</span>
-                                {formatTokens(usage_metadata.output_tokens || 0)}
-                                <div> {JSON.stringify(usage_metadata.completion_tokens_details)}</div>
-                            </span>
+            <span className="flex items-center gap-1.5 group relative">
+                <span className="text-xs">📊</span>
+                <span className="text-gray-400">{formatTokens(usage_metadata.total_tokens || 0)}</span>
+                <div className="hidden group-hover:block absolute bottom-full left-0 mb-2 bg-white/95 backdrop-blur-sm border border-gray-200 shadow-lg rounded-lg text-xs z-10 min-w-[280px]">
+                    <div className="p-3">
+                        <div className="text-sm font-medium text-gray-700 mb-3 border-b border-gray-100 pb-2">Token 使用详情</div>
+                        <div className="space-y-3">
+                            {/* 输入 Token */}
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <span className="text-green-600">📥</span>
+                                    <span className="text-gray-700 font-medium">输入 Token</span>
+                                </div>
+                                <span className="text-gray-900 font-mono">{formatTokens(usage_metadata.input_tokens || 0)}</span>
+                            </div>
+
+                            {/* 缓存读取 */}
+                            {!!usage_metadata.input_token_details?.cache_read && (
+                                <div className="flex items-center justify-between ml-6">
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-blue-600">💾</span>
+                                        <span className="text-gray-600 text-xs">缓存读取</span>
+                                    </div>
+                                    <span className="text-blue-700 font-mono text-xs">{formatTokens(usage_metadata.input_token_details.cache_read)}</span>
+                                </div>
+                            )}
+
+                            {/* 输出 Token */}
+                            <div className="flex items-center justify-between border-t border-gray-100 pt-3">
+                                <div className="flex items-center gap-2">
+                                    <span className="text-blue-600">📤</span>
+                                    <span className="text-gray-700 font-medium">输出 Token</span>
+                                </div>
+                                <span className="text-gray-900 font-mono">{formatTokens(usage_metadata.output_tokens || 0)}</span>
+                            </div>
+
+                            {/* 额外详情 */}
+                            {(usage_metadata.prompt_tokens_details || usage_metadata.completion_tokens_details) && (
+                                <div className="border-t border-gray-100 pt-3 mt-3">
+                                    <div className="text-xs text-gray-500 mb-2">详细数据</div>
+                                    <div className="text-xs text-gray-400 bg-gray-50 p-2 rounded">输入详情: {JSON.stringify(usage_metadata)}</div>
+                                </div>
+                            )}
                         </div>
                     </div>
                 </div>

package/src/chat/context/ChatContext.tsx

@@ -17,6 +17,7 @@ interface ChatProviderProps {
 import { globalChatStore } from "../store";
 import { UnionStore, useUnionStore } from "@langgraph-js/sdk";
 import { useStore } from "@nanostores/react";
+import { toast } from "../../sonner/toast";
 export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
     const store = useUnionStore(globalChatStore, useStore);
     useEffect(() => {
@@ -26,13 +27,26 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({ children }) => {
                 if (store.showHistory) {
                     store.refreshHistoryList();
                 }
-                console.log(res);
+                // console.log(res);
+                toast.success("Hello, LangGraph!");
             })
             .catch((err) => {
                 console.error(err);
-                const agentName = prompt("Failed to initialize chat client: " + store.currentAgent + "\n请输入 agent 名称");
-                localStorage.setItem("agent_name", agentName!);
-                location.reload();
+                toast.error("请检查服务器配置: ", "初始化客户端失败，" + store.currentAgent + "\n" + err, {
+                    duration: 10000,
+                    action: {
+                        label: "去设置",
+                        onClick: () => {
+                            document.getElementById("setting-button")?.click();
+                            setTimeout(() => {
+                                document.getElementById("server-login-button")?.click();
+                            }, 300);
+                        },
+                    },
+                });
+                // const agentName = prompt("Failed to initialize chat client: " + store.currentAgent + "\n请输入 agent 名称");
+                // localStorage.setItem("agent_name", agentName!);
+                // location.reload();
             });
     }, []);
 

package/src/chat/index.css

@@ -2,3 +2,22 @@
     white-space: pre-wrap;
     overflow: hidden;
 }
+
+/* Apple 风格的平滑滚动 */
+.langgraph-chat-container ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.langgraph-chat-container ::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.langgraph-chat-container ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+}
+
+.langgraph-chat-container ::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.15);
+}

package/src/chat/store/index.ts

@@ -42,13 +42,14 @@ export const memoryTool = createMemoryTool(db);
 const defaultHeaders = JSON.parse(localStorage.getItem("code") || "{}");
 
 export const globalChatStore = createChatStore(
-    localStorage.getItem("agent_name") || "",
+    localStorage.getItem("defaultAgent") || "",
     {
         apiUrl: localStorage.getItem("apiUrl") || "http://localhost:8123",
         defaultHeaders,
         callerOptions: {
             // 携带 cookie 的写法
             fetch: F,
+            maxRetries: 1,
         },
     },
     {

package/src/index.ts

@@ -1,3 +1,4 @@
 import "virtual:uno.css";
 import "@andypf/json-viewer/dist/iife/index.js";
 export { default as Chat } from "./chat/Chat";
+export { Toaster, toast } from "./sonner";

package/src/settings/LoginSettings.tsx

@@ -0,0 +1,234 @@
+import React, { useState, useEffect, useCallback, ChangeEvent } from "react";
+import { toast } from "../sonner";
+
+interface HeaderConfig {
+    key: string;
+    value: string;
+}
+
+interface LoginSettingsData {
+    headers: HeaderConfig[];
+    withCredentials: boolean;
+    apiUrl: string;
+    defaultAgent: string;
+}
+
+const initialLoginSettings: LoginSettingsData = {
+    headers: [{ key: "authorization", value: "" }],
+    withCredentials: false,
+    apiUrl: "",
+    defaultAgent: "assistant",
+};
+
+const LoginSettings: React.FC = () => {
+    const [formData, setFormData] = useState<LoginSettingsData>(() => {
+        try {
+            const storedHeaders = localStorage.getItem("code");
+            const storedWithCredentials = localStorage.getItem("withCredentials");
+            const storedApiUrl = localStorage.getItem("apiUrl");
+            const storedDefaultAgent = localStorage.getItem("defaultAgent");
+
+            let headers = initialLoginSettings.headers;
+            if (storedHeaders) {
+                const parsedHeaders = JSON.parse(storedHeaders);
+                // 检查是否是对象格式（旧格式），如果是则转换为数组格式
+                if (typeof parsedHeaders === "object" && !Array.isArray(parsedHeaders)) {
+                    headers = Object.entries(parsedHeaders).map(([key, value]) => ({ key, value: value as string }));
+                } else if (Array.isArray(parsedHeaders)) {
+                    headers = parsedHeaders;
+                }
+            }
+
+            return {
+                headers,
+                withCredentials: storedWithCredentials ? JSON.parse(storedWithCredentials) : initialLoginSettings.withCredentials,
+                apiUrl: storedApiUrl || initialLoginSettings.apiUrl,
+                defaultAgent: storedDefaultAgent || initialLoginSettings.defaultAgent,
+            };
+        } catch (error) {
+            console.error("Error reading login settings from localStorage:", error);
+            return initialLoginSettings;
+        }
+    });
+
+    useEffect(() => {
+        try {
+            localStorage.setItem("code", JSON.stringify(formData.headers));
+            localStorage.setItem("withCredentials", JSON.stringify(formData.withCredentials));
+            localStorage.setItem("apiUrl", formData.apiUrl);
+            localStorage.setItem("defaultAgent", formData.defaultAgent);
+        } catch (error) {
+            console.error("Error writing login settings to localStorage:", error);
+        }
+    }, [formData]);
+
+    const addHeader = useCallback(() => {
+        setFormData((prevData) => ({
+            ...prevData,
+            headers: [...prevData.headers, { key: "", value: "" }],
+        }));
+    }, []);
+
+    const removeHeader = useCallback((index: number) => {
+        setFormData((prevData) => ({
+            ...prevData,
+            headers: prevData.headers.filter((_, i) => i !== index),
+        }));
+    }, []);
+
+    const updateHeader = useCallback((index: number, field: "key" | "value", value: string) => {
+        setFormData((prevData) => {
+            const newHeaders = [...prevData.headers];
+            newHeaders[index][field] = value;
+            return { ...prevData, headers: newHeaders };
+        });
+    }, []);
+
+    const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+        const { name, value, type, checked } = e.target;
+        setFormData((prevData) => ({
+            ...prevData,
+            [name]: type === "checkbox" ? checked : value,
+        }));
+    }, []);
+
+    const handleSelectChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setFormData((prevData) => ({
+            ...prevData,
+            [name]: value,
+        }));
+    }, []);
+
+    const handleSave = () => {
+        // 保存逻辑已经通过 useEffect 处理了，这里可以添加其他保存后的操作，例如提示用户保存成功
+        toast.success("配置已保存！重启程序");
+        setTimeout(() => {
+            window.location.reload();
+        }, 500);
+    };
+
+    return (
+        <form className="space-y-6">
+            <div>
+                <label htmlFor="default-agent" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    默认 Agent 名称
+                </label>
+                <input
+                    type="text"
+                    id="defaultAgent"
+                    name="defaultAgent"
+                    value={formData.defaultAgent}
+                    onChange={handleInputChange}
+                    placeholder="例如: assistant"
+                    className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                />
+            </div>
+
+            <div>
+                <label htmlFor="api-url" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    API URL
+                </label>
+                <input
+                    type="text"
+                    id="apiUrl"
+                    name="apiUrl"
+                    value={formData.apiUrl}
+                    onChange={handleInputChange}
+                    placeholder="例如: http://localhost:8123"
+                    className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                />
+            </div>
+
+            <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">请求头配置</label>
+                <div className="space-y-3">
+                    {formData.headers.map((header, index) => (
+                        <div key={index} className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
+                            <div className="grid grid-cols-2 gap-4 mb-3">
+                                <div>
+                                    <input
+                                        type="text"
+                                        id={`header-key-${index}`}
+                                        value={header.key}
+                                        onChange={(e) => updateHeader(index, "key", e.target.value)}
+                                        placeholder="例如: authorization"
+                                        required
+                                        className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                                    />
+                                </div>
+                                <div>
+                                    <input
+                                        type="text"
+                                        id={`header-value-${index}`}
+                                        value={header.value}
+                                        onChange={(e) => updateHeader(index, "value", e.target.value)}
+                                        placeholder="例如: Bearer token；无则填 1"
+                                        required
+                                        className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                                    />
+                                </div>
+                            </div>
+                            {index > 0 && (
+                                <button
+                                    type="button"
+                                    onClick={() => removeHeader(index)}
+                                    className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 text-sm font-medium flex items-center space-x-1 transition-colors"
+                                >
+                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth="2"
+                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                        />
+                                    </svg>
+                                    <span>删除此请求头</span>
+                                </button>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <div className="flex items-center space-x-3">
+                <input
+                    type="checkbox"
+                    id="withCredentials"
+                    name="withCredentials"
+                    checked={formData.withCredentials}
+                    onChange={handleInputChange}
+                    className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600"
+                />
+                <label htmlFor="withCredentials" className="text-sm text-gray-700 dark:text-gray-300">
+                    启用 withCredentials（跨域请求时发送 Cookie）
+                </label>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-4 pt-4">
+                <button
+                    type="button"
+                    onClick={addHeader}
+                    className="flex-1 px-6 py-3 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors font-medium flex items-center justify-center space-x-2"
+                >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <span>添加请求头</span>
+                </button>
+                <button
+                    type="button"
+                    onClick={handleSave}
+                    className="flex-1 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center justify-center space-x-2"
+                >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    <span>保存配置</span>
+                </button>
+            </div>
+        </form>
+    );
+};
+
+export default LoginSettings;

package/src/settings/SettingFormBase.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect, useCallback, ChangeEvent } from "react";
+
+interface SettingFormBaseProps<T> {
+    settingKey: string;
+    initialData: T;
+    children: (data: T, handleChange: (e: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void) => React.ReactNode;
+}
+
+function SettingFormBase<T extends Record<string, any>>({ settingKey, initialData, children }: SettingFormBaseProps<T>) {
+    const [formData, setFormData] = useState<T>(initialData);
+
+    useEffect(() => {
+        try {
+            const storedData = localStorage.getItem(settingKey);
+            if (storedData) {
+                setFormData(JSON.parse(storedData));
+            }
+        } catch (error) {
+            console.error(`Error reading from localStorage for key ${settingKey}:`, error);
+        }
+    }, [settingKey]);
+
+    useEffect(() => {
+        try {
+            localStorage.setItem(settingKey, JSON.stringify(formData));
+        } catch (error) {
+            console.error(`Error writing to localStorage for key ${settingKey}:`, error);
+        }
+    }, [formData, settingKey]);
+
+    const handleChange = useCallback((e: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+        const { name, value, type, checked } = e.target as HTMLInputElement;
+        setFormData((prevData) => ({
+            ...prevData,
+            [name]: type === "checkbox" ? checked : value,
+        }));
+    }, []);
+
+    return <>{children(formData, handleChange)}</>;
+}
+
+export default SettingFormBase;

package/src/settings/SettingPanel.tsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect, ReactNode } from "react";
+import LoginSettings from "./LoginSettings"; // 导入新的 LoginSettings 组件
+
+interface SettingPanelProps {
+    isOpen: boolean;
+    onClose: () => void;
+    tabs?: SettingTab[]; // 外部传入的 tabs，可选
+}
+
+export interface SettingTab {
+    id: string;
+    title: string;
+    component: ReactNode;
+}
+
+const SettingPanel: React.FC<SettingPanelProps> = ({ isOpen, onClose, tabs: externalTabs }) => {
+    // 内部默认的 tabs
+    const defaultTabs: SettingTab[] = [
+        {
+            id: "general",
+            title: "通用",
+            component: <div className="text-gray-500 dark:text-gray-400">通用设置内容将在此显示</div>,
+        },
+        {
+            id: "server-login",
+            title: "服务器",
+            component: <LoginSettings />,
+        },
+        // 更多设置页面将在这里添加
+    ];
+
+    // 合并外部 tabs 和内部默认 tabs
+    const tabs = externalTabs ? [...defaultTabs, ...externalTabs] : defaultTabs;
+
+    // 设置默认激活的 tab 为第一个 tab
+    const [activeTab, setActiveTab] = useState<string>("general");
+
+    // 当 tabs 改变时，确保 activeTab 是有效的
+    useEffect(() => {
+        if (tabs.length > 0 && !tabs.find((tab) => tab.id === activeTab)) {
+            setActiveTab(tabs[0].id);
+        }
+    }, [tabs, activeTab]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 backdrop-blur-sm">
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl h-[80vh] flex flex-col relative overflow-hidden ring-1 ring-gray-900/5 dark:ring-white/10">
+                {/* 关闭按钮 */}
+                <button
+                    className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 z-10 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                    onClick={onClose}
+                    aria-label="关闭设置"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+
+                <div className="flex flex-1">
+                    {/* 左侧 Tab List */}
+                    <div className="w-1/4 border-r border-gray-200 dark:border-gray-700 p-4 flex flex-col">
+                        <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">设置</h2>
+                        <nav className="flex-1">
+                            <ul>
+                                {tabs.map((tab) => (
+                                    <li key={tab.id}>
+                                        <button
+                                            id={tab.id + "-button"}
+                                            className={`flex items-center w-full text-left py-2 px-3 rounded-md mb-2 text-base
+                        ${activeTab === tab.id ? "bg-blue-500 text-white font-semibold shadow-sm" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}
+                        transition-colors duration-200 ease-in-out`}
+                                            onClick={() => setActiveTab(tab.id)}
+                                        >
+                                            {tab.title}
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+                        </nav>
+                    </div>
+
+                    {/* 右侧 Form Content */}
+                    <div className="w-3/4 p-6 overflow-y-auto bg-gray-50 dark:bg-gray-900">
+                        <div className="max-w-md mx-auto">
+                            <h3 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">{tabs.find((tab) => tab.id === activeTab)?.title} 设置</h3>
+                            {tabs.find((tab) => tab.id === activeTab)?.component}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SettingPanel;