From 6ae9f49b4c5bd0cf1813a804fe4564fc6f28f3b7 Mon Sep 17 00:00:00 2001
From: Yaosanqi137 <zxc18023571263@outlook.com>
Date: Mon, 6 Apr 2026 14:26:18 +0800
Subject: [PATCH] refactor(web-ai): split chat and settings pages

---
 apps/web/src/App.tsx                          |  84 +-
 .../src/components/ai/ai-assistant-panel.tsx  | 811 ------------------
 apps/web/src/components/ai/ai-shared.ts       |  72 ++
 apps/web/src/pages/ai-chat-page.tsx           | 443 ++++++++++
 apps/web/src/pages/placeholder-page.tsx       |  26 +
 apps/web/src/pages/settings-page.tsx          | 474 ++++++++++
 apps/web/src/pages/todo-shell-page.tsx        |   5 +-
 7 files changed, 1090 insertions(+), 825 deletions(-)
 delete mode 100644 apps/web/src/components/ai/ai-assistant-panel.tsx
 create mode 100644 apps/web/src/components/ai/ai-shared.ts
 create mode 100644 apps/web/src/pages/ai-chat-page.tsx
 create mode 100644 apps/web/src/pages/placeholder-page.tsx
 create mode 100644 apps/web/src/pages/settings-page.tsx

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 4c6384e..dd51c3b 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -17,8 +17,11 @@ import {
 import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { AiChatPage } from "@/pages/ai-chat-page";
 import { EmailLoginPage } from "@/pages/email-login-page";
 import { OAuthCallbackPage } from "@/pages/oauth-callback-page";
+import { PlaceholderPage } from "@/pages/placeholder-page";
+import { SettingsPage } from "@/pages/settings-page";
 import { TodoShellPage } from "@/pages/todo-shell-page";
 import { revokeRefreshToken, type EmailLoginResult } from "@/services/auth-api";
 import {
@@ -38,17 +41,18 @@ type SidebarItem = {
   key: string;
   label: string;
   icon: LucideIcon;
+  path: string;
 };
 
 const SIDEBAR_ITEMS: SidebarItem[] = [
-  { key: "dashboard", label: "概览面板", icon: LayoutDashboard },
-  { key: "todo", label: "待办事项", icon: ListTodo },
-  { key: "ai", label: "AI 建议", icon: Sparkles },
-  { key: "notice", label: "提醒中心", icon: Bell },
-  { key: "settings", label: "系统设置", icon: Settings }
+  { key: "dashboard", label: "概览面板", icon: LayoutDashboard, path: "/dashboard" },
+  { key: "todo", label: "待办事项", icon: ListTodo, path: "/todo" },
+  { key: "ai", label: "AI 助手", icon: Sparkles, path: "/ai" },
+  { key: "notice", label: "提醒中心", icon: Bell, path: "/notice" },
+  { key: "settings", label: "系统设置", icon: Settings, path: "/settings" }
 ];
 
-const READY_SIDEBAR_KEYS = new Set(["todo", "ai"]);
+const READY_SIDEBAR_KEYS = new Set(["todo", "ai", "settings"]);
 
 function toWebSession(payload: EmailLoginResult): WebSession {
   return {
@@ -106,7 +110,7 @@ function App() {
     saveSession(nextSession);
     setSession(nextSession);
     setMobileSidebarOpen(false);
-    navigate("/", { replace: true });
+    navigate("/todo", { replace: true });
   }
 
   function handleBootstrapSession(nextSession: WebSession): void {
@@ -138,14 +142,21 @@ function App() {
           <nav className="space-y-1">
             {SIDEBAR_ITEMS.map((item) => {
               const ItemIcon = item.icon;
+              const isActive =
+                location.pathname === item.path || location.pathname.startsWith(`${item.path}/`);
               return (
                 <button
                   key={item.key}
                   type="button"
                   className={cn(
                     "group flex w-full items-center rounded-xl border border-transparent px-3 py-2.5 text-left transition-colors",
-                    "gap-3 hover:border-primary/25 hover:bg-primary/10"
+                    "gap-3 hover:border-primary/25 hover:bg-primary/10",
+                    isActive ? "border-primary/25 bg-primary/10" : null
                   )}
+                  onClick={() => {
+                    navigate(item.path);
+                    setMobileSidebarOpen(false);
+                  }}
                 >
                   <ItemIcon className="size-5 shrink-0 text-primary" />
                   {collapsed ? null : (
@@ -212,7 +223,10 @@ function App() {
                 path="/auth/callback/:provider"
                 element={<OAuthCallbackPage onBootstrapSession={handleBootstrapSession} />}
               />
-              <Route path="*" element={<Navigate to={session ? "/" : "/login/email"} replace />} />
+              <Route
+                path="*"
+                element={<Navigate to={session ? "/todo" : "/login/email"} replace />}
+              />
             </Routes>
           </div>
         </main>
@@ -298,6 +312,23 @@ function App() {
               <Routes>
                 <Route
                   path="/"
+                  element={<Navigate to={session ? "/todo" : "/login/email"} replace />}
+                />
+                <Route
+                  path="/dashboard"
+                  element={
+                    session ? (
+                      <PlaceholderPage
+                        title="概览面板正在整理"
+                        description="这里后续会放任务统计、今日重点、AI 使用概况和提醒概览。当前先把导航和页面结构拆清楚。"
+                      />
+                    ) : (
+                      <Navigate to="/login/email" replace />
+                    )
+                  }
+                />
+                <Route
+                  path="/todo"
                   element={
                     session ? (
                       <TodoShellPage session={session} />
@@ -306,9 +337,42 @@ function App() {
                     )
                   }
                 />
+                <Route
+                  path="/ai"
+                  element={
+                    session ? (
+                      <AiChatPage session={session} />
+                    ) : (
+                      <Navigate to="/login/email" replace />
+                    )
+                  }
+                />
+                <Route
+                  path="/notice"
+                  element={
+                    session ? (
+                      <PlaceholderPage
+                        title="提醒中心即将接入"
+                        description="邮件提醒、Web Push 推送、任务到期前通知都会独立收敛到这里，而不是继续堆在任务页里。"
+                      />
+                    ) : (
+                      <Navigate to="/login/email" replace />
+                    )
+                  }
+                />
+                <Route
+                  path="/settings"
+                  element={
+                    session ? (
+                      <SettingsPage session={session} />
+                    ) : (
+                      <Navigate to="/login/email" replace />
+                    )
+                  }
+                />
                 <Route
                   path="*"
-                  element={<Navigate to={session ? "/" : "/login/email"} replace />}
+                  element={<Navigate to={session ? "/todo" : "/login/email"} replace />}
                 />
               </Routes>
             </div>
diff --git a/apps/web/src/components/ai/ai-assistant-panel.tsx b/apps/web/src/components/ai/ai-assistant-panel.tsx
deleted file mode 100644
index 7939ab8..0000000
--- a/apps/web/src/components/ai/ai-assistant-panel.tsx
+++ /dev/null
@@ -1,811 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  Bot,
-  CheckCircle2,
-  CircleAlert,
-  Globe2,
-  KeyRound,
-  LoaderCircle,
-  PlugZap,
-  RefreshCw,
-  SendHorizontal,
-  Settings2,
-  Sparkles
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import {
-  chatWithAi,
-  listAiBindings,
-  upsertAiBinding,
-  type UpsertWebAiBindingInput,
-  type WebAiBindingSummary,
-  type WebAiBindingsResponse,
-  type WebAiChannel,
-  WebAiApiError
-} from "@/services/ai-api";
-import type { WebSession } from "@/services/session-storage";
-
-type AiAssistantPanelProps = {
-  session: WebSession;
-};
-
-type AiBindingFormState = {
-  providerName: string;
-  model: string;
-  endpoint: string;
-  apiKey: string;
-  configId: string;
-  configName: string;
-  isEnabled: boolean;
-};
-
-type AiMessageRecord = {
-  id: string;
-  role: "user" | "assistant" | "system";
-  content: string;
-  meta?: string;
-};
-
-type PanelNotice = {
-  tone: "success" | "error";
-  message: string;
-};
-
-const CHANNEL_ORDER: WebAiChannel[] = ["USER_KEY", "ASTRBOT", "PUBLIC_POOL"];
-
-const CHANNEL_META: Record<
-  WebAiChannel,
-  {
-    title: string;
-    description: string;
-    icon: typeof KeyRound;
-    accentClassName: string;
-  }
-> = {
-  USER_KEY: {
-    title: "自备厂商",
-    description: "用户自己接入厂商接口",
-    icon: KeyRound,
-    accentClassName: "from-sky-500/15 via-transparent to-sky-500/5"
-  },
-  ASTRBOT: {
-    title: "AstrBot",
-    description: "复用 AstrBot 内已接入模型",
-    icon: PlugZap,
-    accentClassName: "from-amber-500/15 via-transparent to-amber-500/5"
-  },
-  PUBLIC_POOL: {
-    title: "公共 AI",
-    description: "使用站点管理员开放的公共通道",
-    icon: Globe2,
-    accentClassName: "from-emerald-500/15 via-transparent to-emerald-500/5"
-  }
-};
-
-function createFormState(binding?: WebAiBindingSummary | null): AiBindingFormState {
-  return {
-    providerName: binding?.providerName ?? "",
-    model: binding?.model ?? "",
-    endpoint: binding?.endpoint ?? "",
-    apiKey: "",
-    configId: binding?.configId ?? "",
-    configName: binding?.configName ?? "",
-    isEnabled: binding?.isEnabled ?? true
-  };
-}
-
-function createEmptyMessages(): Record<WebAiChannel, AiMessageRecord[]> {
-  return {
-    USER_KEY: [],
-    ASTRBOT: [],
-    PUBLIC_POOL: []
-  };
-}
-
-function createEmptySessionIds(): Partial<Record<WebAiChannel, string>> {
-  return {};
-}
-
-function formatTimeLabel(date = new Date()): string {
-  return date.toLocaleTimeString("zh-CN", {
-    hour: "2-digit",
-    minute: "2-digit"
-  });
-}
-
-function trimOptionalValue(value: string): string | undefined {
-  const normalized = value.trim();
-  return normalized.length > 0 ? normalized : undefined;
-}
-
-function buildBindingPayload(
-  channel: Exclude<WebAiChannel, "PUBLIC_POOL">,
-  formState: AiBindingFormState,
-  currentBinding: WebAiBindingSummary | null
-): UpsertWebAiBindingInput {
-  return {
-    channel,
-    providerName: trimOptionalValue(formState.providerName),
-    model: trimOptionalValue(formState.model),
-    endpoint: trimOptionalValue(formState.endpoint),
-    configId: trimOptionalValue(formState.configId),
-    configName: trimOptionalValue(formState.configName),
-    apiKey: trimOptionalValue(formState.apiKey) ?? undefined,
-    isEnabled: formState.isEnabled ?? currentBinding?.isEnabled ?? true
-  };
-}
-
-function appendMessage(
-  records: Record<WebAiChannel, AiMessageRecord[]>,
-  channel: WebAiChannel,
-  message: AiMessageRecord
-): Record<WebAiChannel, AiMessageRecord[]> {
-  return {
-    ...records,
-    [channel]: [...records[channel], message]
-  };
-}
-
-export function AiAssistantPanel({ session }: AiAssistantPanelProps) {
-  const [bindingsResponse, setBindingsResponse] = useState<WebAiBindingsResponse | null>(null);
-  const [loadingBindings, setLoadingBindings] = useState(true);
-  const [refreshingBindings, setRefreshingBindings] = useState(false);
-  const [activeChannel, setActiveChannel] = useState<WebAiChannel>("USER_KEY");
-  const [settingsOpen, setSettingsOpen] = useState(true);
-  const [userKeyForm, setUserKeyForm] = useState<AiBindingFormState>(() => createFormState());
-  const [astrbotForm, setAstrbotForm] = useState<AiBindingFormState>(() => createFormState());
-  const [savingChannel, setSavingChannel] = useState<WebAiChannel | null>(null);
-  const [panelNotice, setPanelNotice] = useState<PanelNotice | null>(null);
-  const [messagesByChannel, setMessagesByChannel] = useState<
-    Record<WebAiChannel, AiMessageRecord[]>
-  >(() => createEmptyMessages());
-  const [sessionIds, setSessionIds] = useState<Partial<Record<WebAiChannel, string>>>(() =>
-    createEmptySessionIds()
-  );
-  const [draftMessage, setDraftMessage] = useState("");
-  const [sending, setSending] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement | null>(null);
-
-  const bindingMap = useMemo(() => {
-    const map = new Map<WebAiChannel, WebAiBindingSummary>();
-    for (const binding of bindingsResponse?.bindings ?? []) {
-      map.set(binding.channel, binding);
-    }
-    return map;
-  }, [bindingsResponse]);
-
-  const currentBinding =
-    activeChannel === "PUBLIC_POOL" ? null : (bindingMap.get(activeChannel) ?? null);
-  const currentMessages = messagesByChannel[activeChannel];
-  const publicPool = bindingsResponse?.publicPool ?? null;
-
-  const loadBindings = useCallback(
-    async (mode: "initial" | "refresh" = "refresh"): Promise<void> => {
-      if (mode === "initial") {
-        setLoadingBindings(true);
-      } else {
-        setRefreshingBindings(true);
-      }
-
-      try {
-        const response = await listAiBindings(session);
-        setBindingsResponse(response);
-        setUserKeyForm(
-          createFormState(response.bindings.find((item) => item.channel === "USER_KEY"))
-        );
-        setAstrbotForm(
-          createFormState(response.bindings.find((item) => item.channel === "ASTRBOT"))
-        );
-      } catch (error) {
-        setPanelNotice({
-          tone: "error",
-          message: error instanceof Error ? error.message : "AI ??????"
-        });
-      } finally {
-        setLoadingBindings(false);
-        setRefreshingBindings(false);
-      }
-    },
-    [session]
-  );
-
-  useEffect(() => {
-    void loadBindings("initial");
-  }, [loadBindings]);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({
-      block: "end",
-      behavior: "smooth"
-    });
-  }, [activeChannel, currentMessages.length]);
-
-  useEffect(() => {
-    if (!panelNotice) {
-      return;
-    }
-
-    const timer = window.setTimeout(() => {
-      setPanelNotice(null);
-    }, 2800);
-
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, [panelNotice]);
-
-  const sendBlockedReason = useMemo(() => {
-    if (activeChannel === "PUBLIC_POOL") {
-      if (!publicPool?.enabled) {
-        return "管理员尚未开放公共 AI。";
-      }
-
-      return null;
-    }
-
-    if (!currentBinding) {
-      return activeChannel === "USER_KEY" ? "请先保存自备厂商配置。" : "请先保存 AstrBot 配置。";
-    }
-
-    if (!currentBinding.isEnabled) {
-      return "当前渠道已关闭，请先启用后再发起对话。";
-    }
-
-    return null;
-  }, [activeChannel, currentBinding, publicPool]);
-
-  const channelStatusText = useMemo(() => {
-    if (activeChannel === "PUBLIC_POOL") {
-      return publicPool?.enabled ? "管理员已开放" : "当前不可用";
-    }
-
-    if (!currentBinding) {
-      return "尚未配置";
-    }
-
-    return currentBinding.isEnabled ? "已配置并启用" : "已配置但停用";
-  }, [activeChannel, currentBinding, publicPool]);
-
-  async function handleSaveChannel(channel: Exclude<WebAiChannel, "PUBLIC_POOL">): Promise<void> {
-    const formState = channel === "USER_KEY" ? userKeyForm : astrbotForm;
-    const binding = bindingMap.get(channel) ?? null;
-
-    try {
-      setSavingChannel(channel);
-      await upsertAiBinding(session, buildBindingPayload(channel, formState, binding));
-      setPanelNotice({
-        tone: "success",
-        message: channel === "USER_KEY" ? "自备厂商配置已保存。" : "AstrBot 配置已保存。"
-      });
-      if (channel === "USER_KEY") {
-        setUserKeyForm((current) => ({
-          ...current,
-          apiKey: ""
-        }));
-      } else {
-        setAstrbotForm((current) => ({
-          ...current,
-          apiKey: ""
-        }));
-      }
-      await loadBindings("refresh");
-    } catch (error) {
-      setPanelNotice({
-        tone: "error",
-        message: error instanceof Error ? error.message : "AI 配置保存失败"
-      });
-    } finally {
-      setSavingChannel(null);
-    }
-  }
-
-  async function handleSendMessage(): Promise<void> {
-    const message = draftMessage.trim();
-    if (!message || sendBlockedReason || sending) {
-      return;
-    }
-
-    const channel = activeChannel;
-    setSending(true);
-    setDraftMessage("");
-    setMessagesByChannel((current) =>
-      appendMessage(current, channel, {
-        id: crypto.randomUUID(),
-        role: "user",
-        content: message,
-        meta: formatTimeLabel()
-      })
-    );
-
-    try {
-      const response = await chatWithAi(session, {
-        channel,
-        message,
-        sessionId: sessionIds[channel]
-      });
-
-      setSessionIds((current) => ({
-        ...current,
-        [channel]: response.sessionId ?? current[channel]
-      }));
-      setMessagesByChannel((current) =>
-        appendMessage(current, channel, {
-          id: crypto.randomUUID(),
-          role: "assistant",
-          content: response.content,
-          meta: `${CHANNEL_META[response.channel].title} · ${response.providerName}${response.model ? ` · ${response.model}` : ""}`
-        })
-      );
-    } catch (error) {
-      const apiError =
-        error instanceof WebAiApiError
-          ? error
-          : new WebAiApiError(error instanceof Error ? error.message : "AI 请求失败");
-      const firstFailedAttempt = apiError.attempts?.find((item) => item.reasonMessage);
-      const content =
-        firstFailedAttempt?.reasonMessage && firstFailedAttempt.reasonMessage !== apiError.message
-          ? `${apiError.message}\n${firstFailedAttempt.reasonMessage}`
-          : apiError.message;
-
-      setMessagesByChannel((current) =>
-        appendMessage(current, channel, {
-          id: crypto.randomUUID(),
-          role: "system",
-          content,
-          meta: "调用失败"
-        })
-      );
-    } finally {
-      setSending(false);
-    }
-  }
-
-  function renderChannelButton(channel: WebAiChannel) {
-    const channelMeta = CHANNEL_META[channel];
-    const ChannelIcon = channelMeta.icon;
-    const selected = activeChannel === channel;
-    const binding = channel === "PUBLIC_POOL" ? null : (bindingMap.get(channel) ?? null);
-    const enabled =
-      channel === "PUBLIC_POOL" ? Boolean(publicPool?.enabled) : Boolean(binding?.isEnabled);
-    const statusLabel =
-      channel === "PUBLIC_POOL"
-        ? publicPool?.enabled
-          ? "可使用"
-          : "未开放"
-        : binding
-          ? enabled
-            ? "已启用"
-            : "已停用"
-          : "未配置";
-
-    return (
-      <button
-        key={channel}
-        type="button"
-        className={cn(
-          "rounded-2xl border px-3 py-3 text-left transition-all",
-          "bg-gradient-to-br shadow-sm",
-          channelMeta.accentClassName,
-          selected
-            ? "border-primary/50 bg-primary/8 ring-2 ring-primary/20"
-            : "border-border/70 hover:border-primary/25 hover:bg-muted/40"
-        )}
-        onClick={() => setActiveChannel(channel)}
-      >
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex items-center gap-2">
-            <span className="rounded-xl bg-background/85 p-2 text-primary shadow-sm">
-              <ChannelIcon className="size-4" />
-            </span>
-            <div>
-              <div className="text-sm font-semibold text-foreground">{channelMeta.title}</div>
-              <div className="mt-0.5 text-xs text-muted-foreground">{channelMeta.description}</div>
-            </div>
-          </div>
-          <span
-            className={cn(
-              "rounded-full border px-2 py-0.5 text-[11px] font-medium",
-              enabled
-                ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
-                : "border-border bg-background/70 text-muted-foreground"
-            )}
-          >
-            {statusLabel}
-          </span>
-        </div>
-      </button>
-    );
-  }
-
-  function renderNotice() {
-    if (!panelNotice) {
-      return null;
-    }
-
-    return (
-      <div
-        className={cn(
-          "flex items-start gap-2 rounded-2xl border px-3 py-2 text-sm",
-          panelNotice.tone === "success"
-            ? "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
-            : "border-destructive/20 bg-destructive/10 text-destructive"
-        )}
-      >
-        {panelNotice.tone === "success" ? (
-          <CheckCircle2 className="mt-0.5 size-4 shrink-0" />
-        ) : (
-          <CircleAlert className="mt-0.5 size-4 shrink-0" />
-        )}
-        <span>{panelNotice.message}</span>
-      </div>
-    );
-  }
-
-  function renderPrivateConfigForm(channel: Exclude<WebAiChannel, "PUBLIC_POOL">) {
-    const formState = channel === "USER_KEY" ? userKeyForm : astrbotForm;
-    const setFormState = channel === "USER_KEY" ? setUserKeyForm : setAstrbotForm;
-    const binding = bindingMap.get(channel) ?? null;
-
-    return (
-      <div className="space-y-3">
-        <div className="grid gap-3 sm:grid-cols-2">
-          <label className="space-y-1.5">
-            <span className="text-xs font-medium text-muted-foreground">服务商标识</span>
-            <input
-              className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
-              value={formState.providerName}
-              onChange={(event) =>
-                setFormState((current) => ({
-                  ...current,
-                  providerName: event.target.value
-                }))
-              }
-              placeholder={channel === "USER_KEY" ? "如 openai / dashscope / deepseek" : "可选"}
-            />
-          </label>
-
-          <label className="space-y-1.5">
-            <span className="text-xs font-medium text-muted-foreground">模型</span>
-            <input
-              className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
-              value={formState.model}
-              onChange={(event) =>
-                setFormState((current) => ({
-                  ...current,
-                  model: event.target.value
-                }))
-              }
-              placeholder={channel === "USER_KEY" ? "如 gpt-4o-mini" : "可选"}
-            />
-          </label>
-        </div>
-
-        <label className="space-y-1.5">
-          <span className="text-xs font-medium text-muted-foreground">
-            {channel === "USER_KEY" ? "接口地址" : "AstrBot 地址"}
-          </span>
-          <input
-            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
-            value={formState.endpoint}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                endpoint: event.target.value
-              }))
-            }
-            placeholder={
-              channel === "USER_KEY" ? "如 https://api.openai.com/v1" : "如 http://100.64.0.21:6185"
-            }
-          />
-        </label>
-
-        {channel === "ASTRBOT" ? (
-          <div className="grid gap-3 sm:grid-cols-2">
-            <label className="space-y-1.5">
-              <span className="text-xs font-medium text-muted-foreground">configId</span>
-              <input
-                className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
-                value={formState.configId}
-                onChange={(event) =>
-                  setFormState((current) => ({
-                    ...current,
-                    configId: event.target.value
-                  }))
-                }
-                placeholder="如 default"
-              />
-            </label>
-
-            <label className="space-y-1.5">
-              <span className="text-xs font-medium text-muted-foreground">configName</span>
-              <input
-                className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
-                value={formState.configName}
-                onChange={(event) =>
-                  setFormState((current) => ({
-                    ...current,
-                    configName: event.target.value
-                  }))
-                }
-                placeholder="可选"
-              />
-            </label>
-          </div>
-        ) : null}
-
-        <label className="space-y-1.5">
-          <span className="text-xs font-medium text-muted-foreground">
-            {channel === "USER_KEY" ? "API Key" : "AstrBot API Key"}
-          </span>
-          <input
-            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
-            value={formState.apiKey}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                apiKey: event.target.value
-              }))
-            }
-            placeholder={binding?.hasApiKey ? "留空则保持当前密钥不变" : "请输入密钥"}
-          />
-          {binding?.maskedApiKey ? (
-            <div className="text-xs text-muted-foreground">
-              当前已保存密钥：{binding.maskedApiKey}
-            </div>
-          ) : null}
-        </label>
-
-        <label className="flex items-center gap-2 rounded-2xl border border-border/70 bg-background/70 px-3 py-2 text-sm text-foreground">
-          <input
-            type="checkbox"
-            checked={formState.isEnabled}
-            onChange={(event) =>
-              setFormState((current) => ({
-                ...current,
-                isEnabled: event.target.checked
-              }))
-            }
-          />
-          <span>保存后立即启用该渠道</span>
-        </label>
-
-        <div className="flex items-center justify-between gap-3">
-          <p className="text-xs leading-5 text-muted-foreground">
-            {channel === "USER_KEY"
-              ? "当前自备厂商通道按用户单独保存，适合个人独享密钥。"
-              : "AstrBot 通道按用户单独保存，可直接复用你在 AstrBot 中维护的模型配置。"}
-          </p>
-          <Button
-            type="button"
-            className="shrink-0"
-            onClick={() => void handleSaveChannel(channel)}
-            disabled={savingChannel === channel}
-          >
-            {savingChannel === channel ? (
-              <>
-                <LoaderCircle className="size-4 animate-spin" />
-                保存中
-              </>
-            ) : (
-              "保存配置"
-            )}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  function renderPublicPoolCard() {
-    return (
-      <div className="space-y-3">
-        <div className="rounded-2xl border border-border/70 bg-background/70 p-3">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-semibold text-foreground">
-                {publicPool?.providerName || "公共 AI"}
-              </div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                {publicPool?.model ? `默认模型：${publicPool.model}` : "管理员尚未设置默认模型"}
-              </div>
-            </div>
-            <span
-              className={cn(
-                "rounded-full border px-2 py-0.5 text-[11px] font-medium",
-                publicPool?.enabled
-                  ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
-                  : "border-border bg-background text-muted-foreground"
-              )}
-            >
-              {publicPool?.enabled ? "可用" : "不可用"}
-            </span>
-          </div>
-          <div className="mt-3 text-xs leading-5 text-muted-foreground">
-            公共 AI 由管理后台统一维护，普通用户仅可选择使用，不可查看或修改密钥。
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <section className="flex min-h-[720px] flex-col overflow-hidden rounded-[2rem] border border-border/70 bg-card/92 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)] xl:sticky xl:top-0 xl:max-h-[calc(100vh-7rem)] xl:min-h-0">
-      <div className="border-b border-border/70 bg-gradient-to-br from-primary/12 via-background to-background px-5 py-4">
-        <div className="flex items-start justify-between gap-3">
-          <div>
-            <div className="flex items-center gap-2 text-sm font-medium text-primary">
-              <Sparkles className="size-4" />
-              AI 助手
-            </div>
-            <h2 className="mt-1 text-xl font-semibold tracking-tight text-foreground">
-              三路通道，按用户独立配置
-            </h2>
-            <p className="mt-1 text-sm text-muted-foreground">
-              你可以随时切换 AstrBot、自备厂商与公共 AI 进行问答和任务统筹。
-            </p>
-          </div>
-          <Button
-            type="button"
-            size="icon-sm"
-            variant="outline"
-            className="shrink-0"
-            onClick={() => void loadBindings("refresh")}
-            disabled={refreshingBindings}
-            aria-label="刷新 AI 配置"
-          >
-            {refreshingBindings ? (
-              <LoaderCircle className="size-4 animate-spin" />
-            ) : (
-              <RefreshCw className="size-4" />
-            )}
-          </Button>
-        </div>
-      </div>
-
-      <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden p-4">
-        {renderNotice()}
-
-        <div className="grid gap-2 sm:grid-cols-3 xl:grid-cols-1">
-          {CHANNEL_ORDER.map((channel) => renderChannelButton(channel))}
-        </div>
-
-        <div className="rounded-2xl border border-border/70 bg-background/80 p-3">
-          <div className="flex items-center justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <span className="rounded-xl bg-primary/10 p-2 text-primary">
-                <Bot className="size-4" />
-              </span>
-              <div>
-                <div className="text-sm font-semibold text-foreground">
-                  {CHANNEL_META[activeChannel].title}
-                </div>
-                <div className="text-xs text-muted-foreground">{channelStatusText}</div>
-              </div>
-            </div>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="shrink-0"
-              onClick={() => setSettingsOpen((current) => !current)}
-            >
-              <Settings2 className="size-4" />
-              {settingsOpen ? "收起配置" : "配置渠道"}
-            </Button>
-          </div>
-        </div>
-
-        {settingsOpen ? (
-          <div className="rounded-2xl border border-border/70 bg-card/75 p-4">
-            {loadingBindings ? (
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <LoaderCircle className="size-4 animate-spin" />
-                正在加载 AI 配置...
-              </div>
-            ) : activeChannel === "PUBLIC_POOL" ? (
-              renderPublicPoolCard()
-            ) : (
-              renderPrivateConfigForm(activeChannel)
-            )}
-          </div>
-        ) : null}
-
-        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-border/70 bg-background/90">
-          <div className="border-b border-border/70 px-4 py-3">
-            <div className="text-sm font-semibold text-foreground">对话记录</div>
-            <div className="mt-1 text-xs text-muted-foreground">
-              当前渠道：{CHANNEL_META[activeChannel].title}
-            </div>
-          </div>
-
-          <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4">
-            {currentMessages.length === 0 ? (
-              <div className="rounded-2xl border border-dashed border-border bg-muted/35 p-4 text-sm leading-6 text-muted-foreground">
-                <div className="font-medium text-foreground">还没有对话记录。</div>
-                <div className="mt-1">
-                  发送一句话试试看，例如“帮我根据当前未完成任务安排今天下午的执行顺序”。
-                </div>
-              </div>
-            ) : (
-              currentMessages.map((message) => (
-                <div
-                  key={message.id}
-                  className={cn(
-                    "max-w-[92%] rounded-2xl px-4 py-3 text-sm leading-6 shadow-sm",
-                    message.role === "user"
-                      ? "ml-auto bg-primary text-primary-foreground"
-                      : message.role === "assistant"
-                        ? "border border-border/70 bg-card text-foreground"
-                        : "border border-destructive/15 bg-destructive/8 text-foreground"
-                  )}
-                >
-                  <div className="whitespace-pre-wrap break-words">{message.content}</div>
-                  {message.meta ? (
-                    <div
-                      className={cn(
-                        "mt-2 text-[11px]",
-                        message.role === "user"
-                          ? "text-primary-foreground/80"
-                          : "text-muted-foreground"
-                      )}
-                    >
-                      {message.meta}
-                    </div>
-                  ) : null}
-                </div>
-              ))
-            )}
-            <div ref={messagesEndRef} />
-          </div>
-
-          <div className="border-t border-border/70 p-4">
-            {sendBlockedReason ? (
-              <div className="mb-3 rounded-2xl border border-amber-500/15 bg-amber-500/10 px-3 py-2 text-xs leading-5 text-amber-700 dark:text-amber-300">
-                {sendBlockedReason}
-              </div>
-            ) : null}
-
-            <textarea
-              value={draftMessage}
-              onChange={(event) => setDraftMessage(event.target.value)}
-              placeholder="输入你的问题，例如：结合我当前待办，帮我排一下今天的优先级。"
-              className="min-h-[120px] w-full rounded-2xl border border-border bg-background px-4 py-3 text-sm leading-6 outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
-            />
-
-            <div className="mt-3 flex items-center justify-between gap-3">
-              <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                {activeChannel === "PUBLIC_POOL" ? (
-                  <Globe2 className="size-4" />
-                ) : activeChannel === "ASTRBOT" ? (
-                  <PlugZap className="size-4" />
-                ) : (
-                  <KeyRound className="size-4" />
-                )}
-                <span>发送时将自动附带当前未完成任务摘要。</span>
-              </div>
-
-              <Button
-                type="button"
-                className="shrink-0"
-                onClick={() => void handleSendMessage()}
-                disabled={sending || draftMessage.trim().length === 0 || sendBlockedReason !== null}
-              >
-                {sending ? (
-                  <>
-                    <LoaderCircle className="size-4 animate-spin" />
-                    发送中
-                  </>
-                ) : (
-                  <>
-                    <SendHorizontal className="size-4" />
-                    发送
-                  </>
-                )}
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/apps/web/src/components/ai/ai-shared.ts b/apps/web/src/components/ai/ai-shared.ts
new file mode 100644
index 0000000..c0fa0e0
--- /dev/null
+++ b/apps/web/src/components/ai/ai-shared.ts
@@ -0,0 +1,72 @@
+import type { UpsertWebAiBindingInput, WebAiBindingSummary, WebAiChannel } from "@/services/ai-api";
+
+export type AiBindingFormState = {
+  providerName: string;
+  model: string;
+  endpoint: string;
+  apiKey: string;
+  configId: string;
+  configName: string;
+  isEnabled: boolean;
+};
+
+export const CHANNEL_ORDER: WebAiChannel[] = ["USER_KEY", "ASTRBOT", "PUBLIC_POOL"];
+
+export const CHANNEL_META: Record<
+  WebAiChannel,
+  {
+    title: string;
+    description: string;
+    accentClassName: string;
+  }
+> = {
+  USER_KEY: {
+    title: "自备厂商",
+    description: "用户自行接入 OpenAI-Compatible 服务",
+    accentClassName: "from-sky-500/15 via-transparent to-sky-500/5"
+  },
+  ASTRBOT: {
+    title: "AstrBot",
+    description: "复用你在 AstrBot 中维护的模型配置",
+    accentClassName: "from-amber-500/15 via-transparent to-amber-500/5"
+  },
+  PUBLIC_POOL: {
+    title: "公共 AI",
+    description: "使用管理员开放的站点公共通道",
+    accentClassName: "from-emerald-500/15 via-transparent to-emerald-500/5"
+  }
+};
+
+export function createAiBindingFormState(binding?: WebAiBindingSummary | null): AiBindingFormState {
+  return {
+    providerName: binding?.providerName ?? "",
+    model: binding?.model ?? "",
+    endpoint: binding?.endpoint ?? "",
+    apiKey: "",
+    configId: binding?.configId ?? "",
+    configName: binding?.configName ?? "",
+    isEnabled: binding?.isEnabled ?? true
+  };
+}
+
+export function trimAiOptionalValue(value: string): string | undefined {
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : undefined;
+}
+
+export function buildAiBindingPayload(
+  channel: Exclude<WebAiChannel, "PUBLIC_POOL">,
+  formState: AiBindingFormState,
+  currentBinding: WebAiBindingSummary | null
+): UpsertWebAiBindingInput {
+  return {
+    channel,
+    providerName: trimAiOptionalValue(formState.providerName),
+    model: trimAiOptionalValue(formState.model),
+    endpoint: trimAiOptionalValue(formState.endpoint),
+    configId: trimAiOptionalValue(formState.configId),
+    configName: trimAiOptionalValue(formState.configName),
+    apiKey: trimAiOptionalValue(formState.apiKey) ?? undefined,
+    isEnabled: formState.isEnabled ?? currentBinding?.isEnabled ?? true
+  };
+}
diff --git a/apps/web/src/pages/ai-chat-page.tsx b/apps/web/src/pages/ai-chat-page.tsx
new file mode 100644
index 0000000..607e71d
--- /dev/null
+++ b/apps/web/src/pages/ai-chat-page.tsx
@@ -0,0 +1,443 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Bot,
+  CircleAlert,
+  Globe2,
+  KeyRound,
+  LoaderCircle,
+  PlugZap,
+  SendHorizontal
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  chatWithAi,
+  listAiBindings,
+  type WebAiBindingSummary,
+  type WebAiBindingsResponse,
+  type WebAiChannel,
+  WebAiApiError
+} from "@/services/ai-api";
+import type { WebSession } from "@/services/session-storage";
+import { CHANNEL_META, CHANNEL_ORDER } from "@/components/ai/ai-shared";
+
+type AiChatPageProps = {
+  session: WebSession;
+};
+
+type AiMessageRecord = {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  meta?: string;
+};
+
+function createEmptyMessages(): Record<WebAiChannel, AiMessageRecord[]> {
+  return {
+    USER_KEY: [],
+    ASTRBOT: [],
+    PUBLIC_POOL: []
+  };
+}
+
+function createEmptySessionIds(): Partial<Record<WebAiChannel, string>> {
+  return {};
+}
+
+function formatTimeLabel(date = new Date()): string {
+  return date.toLocaleTimeString("zh-CN", {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+
+function appendMessage(
+  records: Record<WebAiChannel, AiMessageRecord[]>,
+  channel: WebAiChannel,
+  message: AiMessageRecord
+): Record<WebAiChannel, AiMessageRecord[]> {
+  return {
+    ...records,
+    [channel]: [...records[channel], message]
+  };
+}
+
+export function AiChatPage({ session }: AiChatPageProps) {
+  const navigate = useNavigate();
+  const [bindingsResponse, setBindingsResponse] = useState<WebAiBindingsResponse | null>(null);
+  const [loadingBindings, setLoadingBindings] = useState(true);
+  const [refreshingBindings, setRefreshingBindings] = useState(false);
+  const [activeChannel, setActiveChannel] = useState<WebAiChannel>("USER_KEY");
+  const [messagesByChannel, setMessagesByChannel] = useState<
+    Record<WebAiChannel, AiMessageRecord[]>
+  >(() => createEmptyMessages());
+  const [sessionIds, setSessionIds] = useState<Partial<Record<WebAiChannel, string>>>(() =>
+    createEmptySessionIds()
+  );
+  const [draftMessage, setDraftMessage] = useState("");
+  const [sending, setSending] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+  const bindingMap = useMemo(() => {
+    const map = new Map<WebAiChannel, WebAiBindingSummary>();
+    for (const binding of bindingsResponse?.bindings ?? []) {
+      map.set(binding.channel, binding);
+    }
+    return map;
+  }, [bindingsResponse]);
+
+  const currentBinding =
+    activeChannel === "PUBLIC_POOL" ? null : (bindingMap.get(activeChannel) ?? null);
+  const publicPool = bindingsResponse?.publicPool ?? null;
+  const currentMessages = messagesByChannel[activeChannel];
+
+  const loadBindings = useCallback(async (): Promise<void> => {
+    setRefreshingBindings(true);
+    setLoadError(null);
+
+    try {
+      const response = await listAiBindings(session);
+      setBindingsResponse(response);
+    } catch (error) {
+      setLoadError(error instanceof Error ? error.message : "AI 配置加载失败");
+    } finally {
+      setLoadingBindings(false);
+      setRefreshingBindings(false);
+    }
+  }, [session]);
+
+  useEffect(() => {
+    void loadBindings();
+  }, [loadBindings]);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({
+      block: "end",
+      behavior: "smooth"
+    });
+  }, [activeChannel, currentMessages.length]);
+
+  const sendBlockedReason = useMemo(() => {
+    if (activeChannel === "PUBLIC_POOL") {
+      if (!publicPool?.enabled) {
+        return "管理员尚未开放公共 AI。";
+      }
+
+      return null;
+    }
+
+    if (!currentBinding) {
+      return activeChannel === "USER_KEY"
+        ? "你还没有配置自备厂商，请先前往系统设置 > AI 配置。"
+        : "你还没有配置 AstrBot，请先前往系统设置 > AI 配置。";
+    }
+
+    if (!currentBinding.isEnabled) {
+      return "当前渠道已关闭，请先在系统设置 > AI 配置中启用。";
+    }
+
+    return null;
+  }, [activeChannel, currentBinding, publicPool]);
+
+  async function handleSendMessage(): Promise<void> {
+    const message = draftMessage.trim();
+    if (!message || sendBlockedReason || sending) {
+      return;
+    }
+
+    const channel = activeChannel;
+    setSending(true);
+    setDraftMessage("");
+    setMessagesByChannel((current) =>
+      appendMessage(current, channel, {
+        id: crypto.randomUUID(),
+        role: "user",
+        content: message,
+        meta: formatTimeLabel()
+      })
+    );
+
+    try {
+      const response = await chatWithAi(session, {
+        channel,
+        message,
+        sessionId: sessionIds[channel]
+      });
+
+      setSessionIds((current) => ({
+        ...current,
+        [channel]: response.sessionId ?? current[channel]
+      }));
+      setMessagesByChannel((current) =>
+        appendMessage(current, channel, {
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: response.content,
+          meta: `${CHANNEL_META[response.channel].title} · ${response.providerName}${response.model ? ` · ${response.model}` : ""}`
+        })
+      );
+    } catch (error) {
+      const apiError =
+        error instanceof WebAiApiError
+          ? error
+          : new WebAiApiError(error instanceof Error ? error.message : "AI 请求失败");
+      const firstAttempt = apiError.attempts?.find((item) => item.reasonMessage);
+      const content =
+        firstAttempt?.reasonMessage && firstAttempt.reasonMessage !== apiError.message
+          ? `${apiError.message}\n${firstAttempt.reasonMessage}`
+          : apiError.message;
+
+      setMessagesByChannel((current) =>
+        appendMessage(current, channel, {
+          id: crypto.randomUUID(),
+          role: "system",
+          content,
+          meta: "调用失败"
+        })
+      );
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="rounded-[2rem] border border-border/70 bg-card/92 p-6 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <div className="flex items-center gap-2 text-sm font-medium text-primary">
+              <Bot className="size-4" />
+              AI 助手
+            </div>
+            <h1 className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
+              在独立页面中发起 AI 对话
+            </h1>
+            <p className="mt-2 text-sm leading-7 text-muted-foreground">
+              聊天页面只负责问答和任务统筹。所有渠道配置统一放在系统设置中的 AI 配置页面。
+            </p>
+          </div>
+
+          <div className="flex gap-3">
+            <Button type="button" variant="outline" onClick={() => navigate("/settings")}>
+              前往 AI 配置
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => void loadBindings()}
+              disabled={refreshingBindings}
+            >
+              {refreshingBindings ? (
+                <>
+                  <LoaderCircle className="size-4 animate-spin" />
+                  刷新中
+                </>
+              ) : (
+                "刷新状态"
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]">
+        <aside className="space-y-4 rounded-[2rem] border border-border/70 bg-card/92 p-4 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+          <div>
+            <div className="text-sm font-semibold text-foreground">选择渠道</div>
+            <div className="mt-1 text-xs leading-6 text-muted-foreground">
+              前端只会使用你当前明确选中的那一个渠道。
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            {CHANNEL_ORDER.map((channel) => {
+              const selected = activeChannel === channel;
+              const binding = channel === "PUBLIC_POOL" ? null : (bindingMap.get(channel) ?? null);
+              const enabled =
+                channel === "PUBLIC_POOL"
+                  ? Boolean(publicPool?.enabled)
+                  : Boolean(binding?.isEnabled);
+              const statusLabel =
+                channel === "PUBLIC_POOL"
+                  ? publicPool?.enabled
+                    ? "可使用"
+                    : "未开放"
+                  : binding
+                    ? enabled
+                      ? "已启用"
+                      : "已停用"
+                    : "未配置";
+              const Icon =
+                channel === "PUBLIC_POOL" ? Globe2 : channel === "ASTRBOT" ? PlugZap : KeyRound;
+
+              return (
+                <button
+                  key={channel}
+                  type="button"
+                  className={cn(
+                    "w-full rounded-2xl border bg-gradient-to-br px-3 py-3 text-left transition-all",
+                    CHANNEL_META[channel].accentClassName,
+                    selected
+                      ? "border-primary/45 ring-2 ring-primary/15"
+                      : "border-border/70 hover:border-primary/25 hover:bg-muted/35"
+                  )}
+                  onClick={() => setActiveChannel(channel)}
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex items-start gap-3">
+                      <span className="rounded-xl bg-background/85 p-2 text-primary shadow-sm">
+                        <Icon className="size-4" />
+                      </span>
+                      <div>
+                        <div className="text-sm font-semibold text-foreground">
+                          {CHANNEL_META[channel].title}
+                        </div>
+                        <div className="mt-1 text-xs leading-5 text-muted-foreground">
+                          {CHANNEL_META[channel].description}
+                        </div>
+                      </div>
+                    </div>
+                    <span
+                      className={cn(
+                        "rounded-full border px-2 py-0.5 text-[11px] font-medium",
+                        enabled
+                          ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+                          : "border-border bg-background text-muted-foreground"
+                      )}
+                    >
+                      {statusLabel}
+                    </span>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {loadError ? (
+            <div className="rounded-2xl border border-destructive/15 bg-destructive/8 px-3 py-2 text-sm text-destructive">
+              {loadError}
+            </div>
+          ) : null}
+
+          <div className="rounded-2xl border border-border/70 bg-background/80 px-3 py-3 text-xs leading-6 text-muted-foreground">
+            <div className="font-medium text-foreground">当前渠道状态</div>
+            <div className="mt-1">
+              {loadingBindings
+                ? "正在加载配置..."
+                : activeChannel === "PUBLIC_POOL"
+                  ? publicPool?.enabled
+                    ? "公共 AI 已开放，可直接发送。"
+                    : "公共 AI 未开放。"
+                  : currentBinding
+                    ? currentBinding.isEnabled
+                      ? "已配置并启用。"
+                      : "已配置，但当前关闭。"
+                    : "尚未配置。"}
+            </div>
+          </div>
+        </aside>
+
+        <div className="flex min-h-[720px] flex-col overflow-hidden rounded-[2rem] border border-border/70 bg-card/92 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+          <div className="border-b border-border/70 px-5 py-4">
+            <div className="text-sm font-semibold text-foreground">
+              {CHANNEL_META[activeChannel].title}
+            </div>
+            <div className="mt-1 text-xs text-muted-foreground">
+              发送消息时会自动附带你当前未完成任务的摘要。
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-5 py-4">
+            {currentMessages.length === 0 ? (
+              <div className="rounded-2xl border border-dashed border-border bg-muted/35 p-4 text-sm leading-7 text-muted-foreground">
+                <div className="font-medium text-foreground">暂无对话记录。</div>
+                <div className="mt-1">
+                  你可以输入“帮我根据当前未完成任务安排今天下午的执行顺序”直接开始。
+                </div>
+              </div>
+            ) : (
+              currentMessages.map((message) => (
+                <div
+                  key={message.id}
+                  className={cn(
+                    "max-w-[92%] rounded-2xl px-4 py-3 text-sm leading-7 shadow-sm",
+                    message.role === "user"
+                      ? "ml-auto bg-primary text-primary-foreground"
+                      : message.role === "assistant"
+                        ? "border border-border/70 bg-background text-foreground"
+                        : "border border-destructive/15 bg-destructive/8 text-foreground"
+                  )}
+                >
+                  <div className="whitespace-pre-wrap break-words">{message.content}</div>
+                  {message.meta ? (
+                    <div
+                      className={cn(
+                        "mt-2 text-[11px]",
+                        message.role === "user"
+                          ? "text-primary-foreground/80"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      {message.meta}
+                    </div>
+                  ) : null}
+                </div>
+              ))
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          <div className="border-t border-border/70 p-5">
+            {sendBlockedReason ? (
+              <div className="mb-3 rounded-2xl border border-amber-500/15 bg-amber-500/10 px-3 py-2 text-sm leading-6 text-amber-700 dark:text-amber-300">
+                {sendBlockedReason}
+              </div>
+            ) : null}
+
+            <textarea
+              value={draftMessage}
+              onChange={(event) => setDraftMessage(event.target.value)}
+              placeholder="输入你的问题，例如：结合我当前待办，帮我排一下今天的优先级。"
+              className="min-h-[140px] w-full rounded-2xl border border-border bg-background px-4 py-3 text-sm leading-7 outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+            />
+
+            <div className="mt-3 flex items-center justify-between gap-3">
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <CircleAlert className="size-4" />
+                <span>当前只会使用你选中的渠道，不会在前端静默切换。</span>
+              </div>
+              <div className="flex gap-3">
+                {sendBlockedReason ? (
+                  <Button type="button" variant="outline" onClick={() => navigate("/settings")}>
+                    去系统设置
+                  </Button>
+                ) : null}
+                <Button
+                  type="button"
+                  onClick={() => void handleSendMessage()}
+                  disabled={
+                    sending || draftMessage.trim().length === 0 || sendBlockedReason !== null
+                  }
+                >
+                  {sending ? (
+                    <>
+                      <LoaderCircle className="size-4 animate-spin" />
+                      发送中
+                    </>
+                  ) : (
+                    <>
+                      <SendHorizontal className="size-4" />
+                      发送
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/pages/placeholder-page.tsx b/apps/web/src/pages/placeholder-page.tsx
new file mode 100644
index 0000000..ba4c099
--- /dev/null
+++ b/apps/web/src/pages/placeholder-page.tsx
@@ -0,0 +1,26 @@
+import type { LucideIcon } from "lucide-react";
+import { Construction } from "lucide-react";
+
+type PlaceholderPageProps = {
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+};
+
+export function PlaceholderPage({
+  title,
+  description,
+  icon: Icon = Construction
+}: PlaceholderPageProps) {
+  return (
+    <section className="rounded-[2rem] border border-border/70 bg-card/92 p-8 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+      <div className="mx-auto max-w-2xl text-center">
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+          <Icon className="size-7" />
+        </div>
+        <h1 className="mt-5 text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
+        <p className="mt-3 text-sm leading-7 text-muted-foreground">{description}</p>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/src/pages/settings-page.tsx b/apps/web/src/pages/settings-page.tsx
new file mode 100644
index 0000000..b5145ad
--- /dev/null
+++ b/apps/web/src/pages/settings-page.tsx
@@ -0,0 +1,474 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { CheckCircle2, Globe2, KeyRound, LoaderCircle, PlugZap, Settings2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  listAiBindings,
+  upsertAiBinding,
+  type WebAiBindingSummary,
+  type WebAiBindingsResponse,
+  type WebAiChannel
+} from "@/services/ai-api";
+import type { WebSession } from "@/services/session-storage";
+import {
+  buildAiBindingPayload,
+  createAiBindingFormState,
+  type AiBindingFormState
+} from "@/components/ai/ai-shared";
+
+type SettingsPageProps = {
+  session: WebSession;
+};
+
+type SettingsTab = "ai" | "general";
+
+type NoticeState = {
+  tone: "success" | "error";
+  message: string;
+};
+
+function AiConfigCard({
+  channel,
+  title,
+  description,
+  icon: Icon,
+  formState,
+  onChange,
+  onSave,
+  saving,
+  binding
+}: {
+  channel: Exclude<WebAiChannel, "PUBLIC_POOL">;
+  title: string;
+  description: string;
+  icon: typeof KeyRound;
+  formState: AiBindingFormState;
+  onChange: React.Dispatch<React.SetStateAction<AiBindingFormState>>;
+  onSave: () => Promise<void>;
+  saving: boolean;
+  binding: WebAiBindingSummary | null;
+}) {
+  return (
+    <section className="rounded-[2rem] border border-border/70 bg-card/92 p-5 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-start gap-3">
+          <span className="rounded-2xl bg-primary/10 p-3 text-primary">
+            <Icon className="size-5" />
+          </span>
+          <div>
+            <h2 className="text-lg font-semibold tracking-tight text-foreground">{title}</h2>
+            <p className="mt-1 text-sm leading-6 text-muted-foreground">{description}</p>
+          </div>
+        </div>
+        <span
+          className={cn(
+            "rounded-full border px-2 py-0.5 text-[11px] font-medium",
+            formState.isEnabled
+              ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+              : "border-border bg-background text-muted-foreground"
+          )}
+        >
+          {formState.isEnabled ? "已启用" : "已停用"}
+        </span>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-2">
+        <label className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">服务商标识</span>
+          <input
+            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+            value={formState.providerName}
+            onChange={(event) =>
+              onChange((current) => ({
+                ...current,
+                providerName: event.target.value
+              }))
+            }
+            placeholder={channel === "USER_KEY" ? "如 openai / deepseek / dashscope" : "可选"}
+          />
+        </label>
+
+        <label className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">模型</span>
+          <input
+            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+            value={formState.model}
+            onChange={(event) =>
+              onChange((current) => ({
+                ...current,
+                model: event.target.value
+              }))
+            }
+            placeholder={channel === "USER_KEY" ? "如 gpt-4o-mini" : "可选"}
+          />
+        </label>
+      </div>
+
+      <div className="mt-3 grid gap-3">
+        <label className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            {channel === "USER_KEY" ? "接口地址" : "AstrBot 地址"}
+          </span>
+          <input
+            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+            value={formState.endpoint}
+            onChange={(event) =>
+              onChange((current) => ({
+                ...current,
+                endpoint: event.target.value
+              }))
+            }
+            placeholder={
+              channel === "USER_KEY" ? "如 https://api.openai.com/v1" : "如 http://100.64.0.21:6185"
+            }
+          />
+        </label>
+
+        {channel === "ASTRBOT" ? (
+          <div className="grid gap-3 sm:grid-cols-2">
+            <label className="space-y-1.5">
+              <span className="text-xs font-medium text-muted-foreground">configId</span>
+              <input
+                className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+                value={formState.configId}
+                onChange={(event) =>
+                  onChange((current) => ({
+                    ...current,
+                    configId: event.target.value
+                  }))
+                }
+                placeholder="如 default"
+              />
+            </label>
+
+            <label className="space-y-1.5">
+              <span className="text-xs font-medium text-muted-foreground">configName</span>
+              <input
+                className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+                value={formState.configName}
+                onChange={(event) =>
+                  onChange((current) => ({
+                    ...current,
+                    configName: event.target.value
+                  }))
+                }
+                placeholder="可选"
+              />
+            </label>
+          </div>
+        ) : null}
+
+        <label className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            {channel === "USER_KEY" ? "API Key" : "AstrBot API Key"}
+          </span>
+          <input
+            className="h-10 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition-colors focus:border-primary/40"
+            value={formState.apiKey}
+            onChange={(event) =>
+              onChange((current) => ({
+                ...current,
+                apiKey: event.target.value
+              }))
+            }
+            placeholder={binding?.hasApiKey ? "留空则保持当前密钥不变" : "请输入密钥"}
+          />
+          {binding?.maskedApiKey ? (
+            <div className="text-xs text-muted-foreground">
+              当前已保存密钥：{binding.maskedApiKey}
+            </div>
+          ) : null}
+        </label>
+      </div>
+
+      <label className="mt-3 flex items-center gap-2 rounded-2xl border border-border/70 bg-background/70 px-3 py-2 text-sm text-foreground">
+        <input
+          type="checkbox"
+          checked={formState.isEnabled}
+          onChange={(event) =>
+            onChange((current) => ({
+              ...current,
+              isEnabled: event.target.checked
+            }))
+          }
+        />
+        <span>保存后立即启用该渠道</span>
+      </label>
+
+      <div className="mt-4 flex items-center justify-between gap-3">
+        <p className="text-xs leading-6 text-muted-foreground">
+          {channel === "USER_KEY"
+            ? "该配置按用户单独保存，适合接入你自己的服务商密钥。"
+            : "该配置按用户单独保存，适合直接复用 AstrBot 中已有的模型能力。"}
+        </p>
+
+        <Button type="button" onClick={() => void onSave()} disabled={saving}>
+          {saving ? (
+            <>
+              <LoaderCircle className="size-4 animate-spin" />
+              保存中
+            </>
+          ) : (
+            "保存配置"
+          )}
+        </Button>
+      </div>
+    </section>
+  );
+}
+
+export function SettingsPage({ session }: SettingsPageProps) {
+  const [activeTab, setActiveTab] = useState<SettingsTab>("ai");
+  const [bindingsResponse, setBindingsResponse] = useState<WebAiBindingsResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [notice, setNotice] = useState<NoticeState | null>(null);
+  const [savingChannel, setSavingChannel] = useState<WebAiChannel | null>(null);
+  const [userKeyForm, setUserKeyForm] = useState<AiBindingFormState>(() =>
+    createAiBindingFormState()
+  );
+  const [astrbotForm, setAstrbotForm] = useState<AiBindingFormState>(() =>
+    createAiBindingFormState()
+  );
+
+  const bindingMap = useMemo(() => {
+    const map = new Map<WebAiChannel, WebAiBindingSummary>();
+    for (const binding of bindingsResponse?.bindings ?? []) {
+      map.set(binding.channel, binding);
+    }
+    return map;
+  }, [bindingsResponse]);
+
+  const loadBindings = useCallback(async (): Promise<void> => {
+    setRefreshing(true);
+
+    try {
+      const response = await listAiBindings(session);
+      setBindingsResponse(response);
+      setUserKeyForm(
+        createAiBindingFormState(response.bindings.find((item) => item.channel === "USER_KEY"))
+      );
+      setAstrbotForm(
+        createAiBindingFormState(response.bindings.find((item) => item.channel === "ASTRBOT"))
+      );
+    } catch (error) {
+      setNotice({
+        tone: "error",
+        message: error instanceof Error ? error.message : "AI 配置加载失败"
+      });
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, [session]);
+
+  useEffect(() => {
+    void loadBindings();
+  }, [loadBindings]);
+
+  useEffect(() => {
+    if (!notice) {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      setNotice(null);
+    }, 2800);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [notice]);
+
+  async function handleSaveChannel(channel: Exclude<WebAiChannel, "PUBLIC_POOL">): Promise<void> {
+    const formState = channel === "USER_KEY" ? userKeyForm : astrbotForm;
+    const binding = bindingMap.get(channel) ?? null;
+
+    try {
+      setSavingChannel(channel);
+      await upsertAiBinding(session, buildAiBindingPayload(channel, formState, binding));
+      setNotice({
+        tone: "success",
+        message: channel === "USER_KEY" ? "自备厂商配置已保存。" : "AstrBot 配置已保存。"
+      });
+      if (channel === "USER_KEY") {
+        setUserKeyForm((current) => ({
+          ...current,
+          apiKey: ""
+        }));
+      } else {
+        setAstrbotForm((current) => ({
+          ...current,
+          apiKey: ""
+        }));
+      }
+      await loadBindings();
+    } catch (error) {
+      setNotice({
+        tone: "error",
+        message: error instanceof Error ? error.message : "AI 配置保存失败"
+      });
+    } finally {
+      setSavingChannel(null);
+    }
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="rounded-[2rem] border border-border/70 bg-card/92 p-6 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <div className="flex items-center gap-2 text-sm font-medium text-primary">
+              <Settings2 className="size-4" />
+              系统设置
+            </div>
+            <h1 className="mt-2 text-2xl font-semibold tracking-tight text-foreground">
+              把配置和功能页面彻底拆开
+            </h1>
+            <p className="mt-2 text-sm leading-7 text-muted-foreground">
+              AI 问答在独立的 AI 助手页面中使用，渠道配置统一维护在这里，不再悬挂在任务页右侧。
+            </p>
+          </div>
+
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => void loadBindings()}
+            disabled={refreshing}
+          >
+            {refreshing ? (
+              <>
+                <LoaderCircle className="size-4 animate-spin" />
+                刷新中
+              </>
+            ) : (
+              "刷新配置"
+            )}
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-3">
+        <Button
+          type="button"
+          variant={activeTab === "ai" ? "default" : "outline"}
+          onClick={() => setActiveTab("ai")}
+        >
+          AI 配置
+        </Button>
+        <Button
+          type="button"
+          variant={activeTab === "general" ? "default" : "outline"}
+          onClick={() => setActiveTab("general")}
+        >
+          其他设置
+        </Button>
+      </div>
+
+      {notice ? (
+        <div
+          className={cn(
+            "flex items-start gap-2 rounded-2xl border px-3 py-2 text-sm",
+            notice.tone === "success"
+              ? "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+              : "border-destructive/20 bg-destructive/10 text-destructive"
+          )}
+        >
+          <CheckCircle2 className="mt-0.5 size-4 shrink-0" />
+          <span>{notice.message}</span>
+        </div>
+      ) : null}
+
+      {activeTab === "ai" ? (
+        loading ? (
+          <div className="rounded-[2rem] border border-border/70 bg-card/92 p-6 text-sm text-muted-foreground shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+            正在加载 AI 配置...
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <AiConfigCard
+              channel="USER_KEY"
+              title="自备厂商"
+              description="当前支持 OpenAI-Compatible 接口。Google 原生协议、阿里云原生协议将单独适配。"
+              icon={KeyRound}
+              formState={userKeyForm}
+              onChange={setUserKeyForm}
+              onSave={() => handleSaveChannel("USER_KEY")}
+              saving={savingChannel === "USER_KEY"}
+              binding={bindingMap.get("USER_KEY") ?? null}
+            />
+
+            <AiConfigCard
+              channel="ASTRBOT"
+              title="AstrBot"
+              description="填写 AstrBot 地址与 API Key 后，即可在 AI 助手页面中使用你的 AstrBot 渠道。"
+              icon={PlugZap}
+              formState={astrbotForm}
+              onChange={setAstrbotForm}
+              onSave={() => handleSaveChannel("ASTRBOT")}
+              saving={savingChannel === "ASTRBOT"}
+              binding={bindingMap.get("ASTRBOT") ?? null}
+            />
+
+            <section className="rounded-[2rem] border border-border/70 bg-card/92 p-5 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex items-start gap-3">
+                  <span className="rounded-2xl bg-primary/10 p-3 text-primary">
+                    <Globe2 className="size-5" />
+                  </span>
+                  <div>
+                    <h2 className="text-lg font-semibold tracking-tight text-foreground">
+                      公共 AI
+                    </h2>
+                    <p className="mt-1 text-sm leading-6 text-muted-foreground">
+                      该渠道由管理员统一维护，普通用户仅可查看状态和使用，不可修改。
+                    </p>
+                  </div>
+                </div>
+                <span
+                  className={cn(
+                    "rounded-full border px-2 py-0.5 text-[11px] font-medium",
+                    bindingsResponse?.publicPool?.enabled
+                      ? "border-emerald-500/25 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+                      : "border-border bg-background text-muted-foreground"
+                  )}
+                >
+                  {bindingsResponse?.publicPool?.enabled ? "已开放" : "未开放"}
+                </span>
+              </div>
+
+              <div className="mt-4 rounded-2xl border border-border/70 bg-background/80 p-4 text-sm leading-7 text-muted-foreground">
+                <div>
+                  提供商：
+                  <span className="ml-2 text-foreground">
+                    {bindingsResponse?.publicPool?.providerName || "未设置"}
+                  </span>
+                </div>
+                <div>
+                  模型：
+                  <span className="ml-2 text-foreground">
+                    {bindingsResponse?.publicPool?.model || "未设置"}
+                  </span>
+                </div>
+                <div>
+                  接口地址：
+                  <span className="ml-2 break-all text-foreground">
+                    {bindingsResponse?.publicPool?.endpoint || "未设置"}
+                  </span>
+                </div>
+              </div>
+            </section>
+          </div>
+        )
+      ) : (
+        <section className="rounded-[2rem] border border-border/70 bg-card/92 p-8 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)]">
+          <h2 className="text-xl font-semibold tracking-tight text-foreground">其他设置</h2>
+          <p className="mt-3 text-sm leading-7 text-muted-foreground">
+            这里后续会接入站点外观、提醒偏好、存储配额展示等系统设置项。当前先把 AI
+            配置独立出来，避免继续堆在任务页面。
+          </p>
+        </section>
+      )}
+    </section>
+  );
+}
diff --git a/apps/web/src/pages/todo-shell-page.tsx b/apps/web/src/pages/todo-shell-page.tsx
index 825c185..b1cdd5f 100644
--- a/apps/web/src/pages/todo-shell-page.tsx
+++ b/apps/web/src/pages/todo-shell-page.tsx
@@ -9,7 +9,6 @@ import {
   ServerCrash
 } from "lucide-react";
 import { useSyncEngine, type SyncEngineStatus } from "@/hooks/use-sync-engine";
-import { AiAssistantPanel } from "@/components/ai/ai-assistant-panel";
 import { TaskRichEditor } from "@/components/task-rich-editor";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -921,7 +920,7 @@ export function TodoShellPage({ session }: TodoShellPageProps) {
       <div className="space-y-4">
         <SyncStatusCard syncStatus={syncStatus} onTriggerSync={triggerSync} />
 
-        <div className="grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)_360px]">
+        <div className="grid gap-4 lg:grid-cols-[320px_minmax(0,1fr)]">
           <TaskListPanel
             tasks={taskList}
             selectedTaskId={selectedTaskId}
@@ -947,8 +946,6 @@ export function TodoShellPage({ session }: TodoShellPageProps) {
             onDdlChange={handleDdlChange}
             onEditorChange={handleEditorChange}
           />
-
-          <AiAssistantPanel session={session} />
         </div>
       </div>
     </>