deerflow-code/frontend-web/src/pages/NotebookAIWritingPage.tsx

import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import AIWritingPage from '@/open-canvas/pages/AIWritingPage';
import { getNotebookApiBaseURL } from '@/core/config';
import { useTheme, type ThemeType } from '@/contexts/ThemeContext';

const VALID_THEMES: ThemeType[] = ['dark', 'light', 'lightblue', 'lightgreen'];

interface NotebookTokenData {
  doc_ids: number[];
  search_space_id: number;
  user_id: string;
  user_token: string;
}

export default function NotebookAIWritingPage() {
  const [searchParams] = useSearchParams();
  const token = searchParams.get('token');
  const themekey = searchParams.get('themekey');
  const { setTheme } = useTheme();

  // 跟随调用方传入的 themekey 切换主题；缺省或非法值兜底为 light
  useEffect(() => {
    const next = themekey && VALID_THEMES.includes(themekey as ThemeType)
      ? (themekey as ThemeType)
      : 'light';
    setTheme(next);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [themekey]);

  const [data, setData] = useState<NotebookTokenData | null>(null);
  const [spaceName, setSpaceName] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!token) {
      setError('缺少 token 参数');
      return;
    }
    const base = getNotebookApiBaseURL();
    fetch(`${base}/api/v1/ai-writing/notebook-token/${token}`)
      .then((res) => {
        if (!res.ok) throw new Error(`请求失败 ${res.status}`);
        return res.json() as Promise<NotebookTokenData>;
      })
      .then((d) => {
        setData(d);
        return fetch(`${base}/api/v1/searchspaces/${d.search_space_id}`, {
          headers: { Authorization: `Bearer ${d.user_token}` },
        });
      })
      .then((res) => {
        if (!res.ok) return null;
        return res.json() as Promise<{ name: string }>;
      })
      .then((space) => {
        if (space?.name) setSpaceName(space.name);
      })
      .catch((e: Error) => setError(e.message));
  }, [token]);

  // Keep-alive：每 50 秒 ping 一次 token 接口，防止 Redis TTL 过期
  useEffect(() => {
    if (!token) return;
    const base = getNotebookApiBaseURL();
    const id = setInterval(() => {
      fetch(`${base}/api/v1/ai-writing/notebook-token/${token}`).catch(() => {});
    }, 50_000);
    return () => clearInterval(id);
  }, [token]);

  return (
    <div className="h-full flex flex-col overflow-hidden">
      {/* 索财笔记 Header —— 只承载空间信息（品牌 / 右侧标签已移除） */}
      <div className="relative flex items-center gap-3 px-5 h-[52px] shrink-0 bg-gradient-to-r from-[#1e3a5f] to-[#1a3255] border-b border-[#2a4a70]">
        {/* 顶部极细品牌高光线 */}
        <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#7fb3e8]/55 to-transparent" />

        {/* 空间信息：精致玻璃胶囊 */}
        {data?.search_space_id && (
          <div
            className="inline-flex h-7 items-center gap-2 rounded-full border border-[#7fb3e8]/30 bg-gradient-to-b from-[#2d5080]/55 to-[#1a3a60]/55 pl-2 pr-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_1px_2px_rgba(0,0,0,0.18)] backdrop-blur-sm transition-all hover:border-[#7fb3e8]/55 hover:-translate-y-px hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_2px_10px_-2px_rgba(59,130,246,0.45)]"
            title={`当前空间：${spaceName ?? data.search_space_id}`}
          >
            {/* 图标徽标 */}
            <span className="flex size-[18px] items-center justify-center rounded-[5px] bg-gradient-to-br from-[#3b82f6] to-[#1d4ed8] shadow-[0_0_0_1px_rgba(127,179,232,0.25),0_2px_6px_-1px_rgba(29,78,216,0.6)]">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-[11px] text-[#e0f0ff]"
              >
                <polygon points="12 2 2 7 12 12 22 7 12 2" />
                <polyline points="2 17 12 22 22 17" />
                <polyline points="2 12 12 17 22 12" />
              </svg>
            </span>
            <span className="text-[11px] font-medium tracking-wide text-[#7fb3e8]">空间</span>
            <span className="h-3 w-px bg-[#7fb3e8]/25" />
            <span className="max-w-[200px] truncate text-[12.5px] font-semibold text-[#d6e8fb]">
              {spaceName ?? data.search_space_id}
            </span>
            {/* 已连接状态点 */}
            <span className="size-1.5 shrink-0 rounded-full bg-[#4ade80] shadow-[0_0_0_2px_rgba(74,222,128,0.18)]" />
          </div>
        )}

        {/* 弹性占位 */}
        <div className="flex-1" />
      </div>

      {/* 主体 */}
      <div className="flex-1 min-h-0 overflow-hidden">
        {error ? (
          <div className="flex items-center justify-center h-full text-red-400 text-sm">{error}</div>
        ) : !data ? (
          <div className="flex items-center justify-center h-full text-[#7fb3e8] text-sm">加载中…</div>
        ) : (
          <AIWritingPage
            hideAdvancedFields
            initialNotebookId={data.search_space_id}
            initialDocumentIds={data.doc_ids}
            studioToken={data.user_token}
          />
        )}
      </div>
    </div>
  );
}