xinyu-pro 0.21.0

package/app/settings/page.tsx

@@ -0,0 +1,1490 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useRouterHistory } from '@/lib/router-history';
+import { AppSettings, Theme } from '@/lib/types';
+import { APP_VERSION, APP_NAME, APP_DESCRIPTION, formatVersion } from '@/lib/version';
+import {
+  getDefaultAppSettings,
+  getGameSessions,
+  deleteGameSession,
+  clearAllGameSessions,
+  getPlugins,
+  getPluginBindings,
+  upsertPluginBinding,
+  deletePlugin, getPlugin,
+} from '@/lib/storage';
+import { PluginManifest, PluginBinding, PLUGIN_TYPE_LABELS } from '@/lib/plugin-types';
+import { useTheme } from '@/components/ui/ThemeProvider';
+import { usePluginContext } from '@/components/ui/PluginProvider';
+import ConfirmDialog from '@/components/ui/ConfirmDialog';
+import { broadcastPluginBindingChange } from '@/lib/plugin-events';
+import { useToast } from '@/components/ui/ToastProvider';
+import PageHeader from '@/components/ui/PageHeader';
+import { PluginIcon } from '@/components/ui/PluginIcon';
+
+// ==================== 通用组件 ====================
+
+function SettingRow({ label, description, children }: {
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-start gap-3 py-2.5" style={{ borderBottom: '1px solid var(--color-border)' }}>
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium" style={{ color: 'var(--color-text-primary)' }}>{label}</div>
+        {description && (
+          <div className="text-xs mt-0.5" style={{ color: 'var(--color-text-muted)' }}>{description}</div>
+        )}
+      </div>
+      <div className="shrink-0">{children}</div>
+    </div>
+  );
+}
+
+function SettingCard({ title, button, children }: { title: string; button?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="rounded-xl border overflow-hidden" style={{
+      backgroundColor: 'var(--color-bg-secondary)',
+      borderColor: 'var(--color-border)',
+    }}>
+      <div className="flex px-4 py-2.5 font-bold text-sm justify-between items-center" style={{
+        color: 'var(--color-text-primary)',
+        borderBottom: '1px solid var(--color-border)',
+      }}>
+        <span>{title}</span>
+        {button}
+      </div>
+      <div className="px-4 py-3">{children}</div>
+    </div>
+  );
+}
+
+/** 分列布局：每列最多 maxPerCol 个子元素，列宽固定，支持横向滚动 */
+function ColumnLayout({ children, maxPerCol = 3 }: { children: React.ReactNode; maxPerCol?: number }) {
+  const items = React.Children.toArray(children);
+  const columns: React.ReactNode[][] = [];
+  for (let i = 0; i < items.length; i += maxPerCol) {
+    columns.push(items.slice(i, i + maxPerCol));
+  }
+  return (
+    <div
+      className="flex gap-4 overflow-x-auto overflow-y-auto pb-2"
+      style={{ minHeight: 0 }}
+    >
+      {columns.map((col, i) => (
+        <div
+          key={i}
+          className="flex flex-col gap-4 shrink-0"
+          style={{ width: '425px' }}
+        >
+          {col}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TextField({ value, onChange, placeholder, mono = false, type = 'text' }: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  mono?: boolean;
+  type?: string;
+}) {
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="w-full px-3 py-1.5 rounded-lg text-sm border outline-none transition-colors"
+      style={{
+        backgroundColor: 'var(--color-bg-tertiary)',
+        borderColor: 'var(--color-border)',
+        color: 'var(--color-text-primary)',
+        fontFamily: mono ? 'monospace' : 'inherit',
+      }}
+      onFocus={(e) => (e.target.style.borderColor = 'var(--color-accent)')}
+      onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')}
+    />
+  );
+}
+
+// ==================== API 预设 ====================
+
+const API_PRESETS = [
+  { name: 'OpenAI', base: 'https://api.openai.com/v1', model: 'gpt-4o' },
+  { name: 'DeepSeek', base: 'https://api.deepseek.com/v1', model: 'deepseek-chat' },
+  { name: '通义千问', base: 'https://dashscope.aliyuncs.com/compatible-mode/v1', model: 'qwen-turbo' },
+  { name: 'Claude', base: 'https://api.anthropic.com/v1', model: 'claude-3-5-sonnet-20241022' },
+];
+
+// ==================== 分类定义 ====================
+
+const CATEGORIES = [
+  { id: 'api', label: 'AI 模型', icon: '🤖' },
+  { id: 'chat', label: '对话偏好', icon: '💬' },
+  { id: 'theme', label: '主题外观', icon: '🎨' },
+  { id: 'extensions', label: '插件', icon: '🔌' },
+  { id: 'data', label: '数据管理', icon: '📦' },
+  { id: 'about', label: '关于', icon: 'ℹ️' },
+] as const;
+
+type CategoryId = (typeof CATEGORIES)[number]['id'];
+
+// ==================== 页面 ====================
+
+export default function SettingsPage() {
+  const { toast } = useToast();
+  const { navigate, back } = useRouterHistory();
+  const { config, activeTheme, setActiveThemeId, addImportedTheme, removeImportedTheme } = useTheme();
+  const { reloadPlugins, updateToastSettings } = usePluginContext();
+  const [settings, setSettings] = useState<AppSettings>(getDefaultAppSettings());
+  const [showKey, setShowKey] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [initialSettings, setInitialSettings] = useState<AppSettings | null>(null);
+  const [activeCategory, setActiveCategory] = useState<CategoryId>('api');
+  const [sessions, setSessions] = useState<Array<{ id: string; title: string; era: string; count: number }>>([]);
+
+  // 自定义主题编辑状态
+  const [isEditingCustom, setIsEditingCustom] = useState(false);
+  const [editingThemeId, setEditingThemeId] = useState<string | null>(null);
+  const [customVars, setCustomVars] = useState<Record<string, string>>({});
+  const [customIsDark, setCustomIsDark] = useState<boolean>(true);
+  const importThemeRef = useRef<HTMLInputElement>(null);
+  // API 测试连接
+  const [testingApi, setTestingApi] = useState(false);
+  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
+  // AI 生成主题
+  const [aiThemePrompt, setAiThemePrompt] = useState('');
+  const [aiThemeFormat, setAiThemeFormat] = useState<'svg' | 'json'>('json');
+  const [generatingTheme, setGeneratingTheme] = useState(false);
+  // 退出确认弹窗
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmConfig, setConfirmConfig] = useState<{ title: string; message: string; danger?: boolean; onConfirm: () => void }>({ title: '', message: '', onConfirm: () => {} });
+
+  // 插件管理状态
+  const [plugins, setPlugins] = useState<PluginManifest[]>([]);
+  const [pluginBindings, setPluginBindings] = useState<PluginBinding[]>([]);
+
+  const refreshSessions = async () => {
+    const all = await getGameSessions();
+    setSessions(all.map((s) => ({
+      id: s.id,
+      title: s.worldSetting.title,
+      era: s.worldSetting.era,
+      count: s.messages.length,
+    })));
+  };
+
+  const refreshPlugins = useCallback(async () => {
+    const [allPlugins, allBindings] = await Promise.all([
+      getPlugins(),
+      getPluginBindings('global'),
+    ]);
+    setPlugins(allPlugins);
+    setPluginBindings(allBindings);
+  }, []);
+
+  const handleTogglePlugin = useCallback(async (pluginId: string, enabled: boolean) => {
+    const existing = pluginBindings.find(b => b.extensionId === pluginId);
+    if (existing) {
+      await upsertPluginBinding({ id: existing.id, extensionId: pluginId, scope: 'global', enabled, config: existing.config, sortOrder: existing.sortOrder });
+    } else {
+      await upsertPluginBinding({ extensionId: pluginId, scope: 'global', enabled, config: {}, sortOrder: 0 });
+    }
+    // 全局禁用时：同步禁用所有世界级绑定，防止游戏内残留启用状态
+    if (!enabled) {
+      const allWorldBindings = await getPluginBindings('world');
+      const worldBindingsForPlugin = allWorldBindings.filter(b => b.extensionId === pluginId);
+      for (const wb of worldBindingsForPlugin) {
+        await upsertPluginBinding({
+          extensionId: pluginId,
+          scope: 'world',
+          worldId: wb.worldId,
+          enabled: false,
+          config: wb.config || {},
+          sortOrder: wb.sortOrder || 0,
+        });
+      }
+    }
+    await refreshPlugins();
+    const plugin = await getPlugin(pluginId);
+    toast(enabled ? `已启用「${plugin?.name}」` : `已禁用「${plugin?.name}」`, 'success')
+    // 广播变更事件，通知游戏页实时响应
+    broadcastPluginBindingChange({ pluginId, enabled, source: 'global' });
+  }, [pluginBindings, refreshPlugins]);
+
+  // 一键禁用所有插件
+  const handleDisableAllPlugins = useCallback(async () => {
+    const enabledBindings = pluginBindings.filter(b => b.enabled);
+    if (enabledBindings.length === 0) return;
+    for (const binding of enabledBindings) {
+      await upsertPluginBinding({
+        id: binding.id,
+        extensionId: binding.extensionId,
+        scope: 'global',
+        enabled: false,
+        config: binding.config,
+        sortOrder: binding.sortOrder,
+      });
+      // 同步禁用所有世界级绑定，防止游戏内残留启用状态
+      const allWorldBindings = await getPluginBindings('world');
+      const worldBindingsForPlugin = allWorldBindings.filter(b => b.extensionId === binding.extensionId);
+      for (const wb of worldBindingsForPlugin) {
+        await upsertPluginBinding({
+          extensionId: binding.extensionId,
+          scope: 'world',
+          worldId: wb.worldId,
+          enabled: false,
+          config: wb.config || {},
+          sortOrder: wb.sortOrder || 0,
+        });
+      }
+      broadcastPluginBindingChange({ pluginId: binding.extensionId, enabled: false, source: 'global' });
+    }
+    await refreshPlugins();
+    toast(`已禁用全部 ${enabledBindings.length} 个插件`, 'success');
+  }, [pluginBindings, refreshPlugins]);
+
+  const handleRefreshAllPlugins = useCallback(async () => {
+    await reloadPlugins();
+    await refreshPlugins();
+    toast('已刷新全部插件', 'success');
+  }, [reloadPlugins, refreshPlugins]);
+
+  const handleDeletePlugin = useCallback((plugin: PluginManifest) => {
+    setConfirmConfig({
+      title: '删除插件',
+      message: `确定要删除插件「${plugin.name}」吗？此操作不可撤销。`,
+      danger: true,
+      onConfirm: async () => {
+        await deletePlugin(plugin.id);
+        await refreshPlugins();
+        setConfirmOpen(false);
+      },
+    });
+    setConfirmOpen(true);
+  }, [refreshPlugins]);
+
+  useEffect(() => {
+    // 从后端加载设置，失败时使用默认值
+    fetch('/api/settings')
+      .then(r => r.json())
+      .then(data => {
+        if (data && !data.error) {
+          const merged = { ...getDefaultAppSettings(), ...data };
+          setSettings(merged);
+          setInitialSettings(merged);
+          return;
+        }
+        throw new Error('API error');
+      })
+      .catch(() => {
+        const defaults = getDefaultAppSettings();
+        setSettings(defaults);
+        setInitialSettings(defaults);
+      });
+    refreshSessions().then();
+    refreshPlugins().then();
+  }, [refreshPlugins]);
+
+  const updateSetting = useCallback(<K extends keyof AppSettings>(key: K, value: AppSettings[K]) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+    setSaved(false);
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(settings),
+      });
+      if (!res.ok) throw new Error();
+      setInitialSettings({ ...settings });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+      // 同步 toast 设置到 PluginProvider
+      updateToastSettings(settings.pluginToastEnabled, settings.pluginToastLevels);
+    } catch {
+      toast('保存失败', 'error');
+    } finally {
+      setSaving(false);
+    }
+  }, [settings, updateToastSettings]);
+
+  const handleReset = useCallback(async () => {
+    const defaults = getDefaultAppSettings();
+    setSettings(defaults);
+    setSaving(true);
+    try {
+      await fetch('/api/settings', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(defaults),
+      });
+    } catch {
+      // ignore
+    }
+    setInitialSettings(defaults);
+    setSaving(false);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  }, []);
+
+  const handleClearSessions = useCallback(() => {
+    setConfirmConfig({
+      title: '清除全部游戏记录',
+      message: '确定要删除所有游戏记录吗？此操作不可撤销。',
+      danger: true,
+      onConfirm: async () => {
+        await clearAllGameSessions();
+        await refreshSessions();
+        setConfirmOpen(false);
+      },
+    });
+    setConfirmOpen(true);
+  }, []);
+
+  const handleDeleteSession = useCallback((id: string) => {
+    setConfirmConfig({
+      title: '删除游戏记录',
+      message: '确定要删除这条游戏记录吗？',
+      danger: true,
+      onConfirm: async () => {
+        await deleteGameSession(id);
+        await refreshSessions();
+        setConfirmOpen(false);
+      },
+    });
+    setConfirmOpen(true);
+  }, []);
+
+  const handlePresetSelect = useCallback((preset: (typeof API_PRESETS)[number]) => {
+    setSettings((prev) => ({ ...prev, aiApiBase: preset.base, aiModel: preset.model }));
+    setSaved(false);
+  }, []);
+
+  const handleStartCustomTheme = useCallback(() => {
+    setCustomVars({ ...activeTheme.variables });
+    setCustomIsDark(activeTheme.isDark);
+    setEditingThemeId(null);
+    setIsEditingCustom(true);
+  }, [activeTheme]);
+
+  const handleEditCustomTheme = useCallback((theme: Theme) => {
+    setCustomVars({ ...theme.variables });
+    setCustomIsDark(theme.isDark);
+    setEditingThemeId(theme.id);
+    setIsEditingCustom(true);
+  }, []);
+
+  const handleApplyCustomTheme = useCallback(() => {
+    const theme: Theme = {
+      id: editingThemeId || `custom-${Date.now()}`,
+      name: editingThemeId
+        ? (config.importedThemes || []).find(t => t.id === editingThemeId)?.name || '自定义主题'
+        : '自定义主题',
+      description: '用户自定义主题',
+      isDark: customIsDark,
+      variables: customVars,
+    };
+    addImportedTheme(theme);
+    setIsEditingCustom(false);
+    setEditingThemeId(null);
+  }, [editingThemeId, config.importedThemes, activeTheme, customVars, addImportedTheme]);
+
+  const handleDeleteCustomTheme = useCallback((id: string) => {
+    removeImportedTheme(id);
+    if (editingThemeId === id) {
+      setIsEditingCustom(false);
+      setEditingThemeId(null);
+    }
+  }, [removeImportedTheme, editingThemeId]);
+
+  // ---- API 测试连接 ----
+  const handleTestApi = useCallback(async () => {
+    setTestingApi(true);
+    setTestResult(null);
+    try {
+      const res = await fetch('/api/test-api', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          apiKey: settings.aiApiKey,
+          apiBase: settings.aiApiBase,
+          model: settings.aiModel,
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        setTestResult({ success: true, message: data.message });
+      } else {
+        setTestResult({ success: false, message: data.error + (data.detail ? `: ${data.detail}` : '') });
+      }
+    } catch {
+      setTestResult({ success: false, message: '网络请求失败' });
+    } finally {
+      setTestingApi(false);
+      setTimeout(() => setTestResult(null), 5000);
+    }
+  }, [settings]);
+
+  // ---- AI 生成主题 ----
+  const handleGenerateTheme = useCallback(async () => {
+    if (!aiThemePrompt.trim()) return;
+    setGeneratingTheme(true);
+    try {
+      const res = await fetch('/api/generate-theme', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt: aiThemePrompt,
+          format: aiThemeFormat,
+          apiConfig: {
+            apiKey: settings.aiApiKey,
+            apiBase: settings.aiApiBase,
+            model: settings.aiModel,
+          },
+        }),
+      });
+      const data = await res.json();
+      if (data.error) { alert(data.error); return; }
+
+      if (data.type === 'json' && data.content) {
+        const d = data.content;
+        const theme: Theme = {
+          id: `ai-${Date.now()}`,
+          name: d.name || aiThemePrompt.slice(0, 20),
+          description: d.description || `AI 生成: ${aiThemePrompt.slice(0, 30)}`,
+          isDark: d.isDark ?? true,
+          variables: d.variables || {},
+          preview: { type: 'json', content: JSON.stringify(d, null, 2) },
+        };
+        addImportedTheme(theme);
+      } else if (data.type === 'svg' && data.content) {
+        const svgText = data.content;
+        const colorMatches = svgText.match(/#[0-9a-fA-F]{3,8}/g) || [];
+        const bg = colorMatches[0] || '#1a1a2e';
+        const accent = colorMatches.find((c: string) => c !== bg) || '#d4a843';
+        const theme: Theme = {
+          id: `ai-${Date.now()}`,
+          name: aiThemePrompt.slice(0, 20),
+          description: `AI 生成 SVG: ${aiThemePrompt.slice(0, 30)}`,
+          isDark: true,
+          variables: {
+            '--color-bg-primary': bg,
+            '--color-bg-secondary': bg,
+            '--color-bg-tertiary': accent + '33',
+            '--color-text-primary': '#e8e0f0',
+            '--color-text-secondary': '#a89bc2',
+            '--color-text-muted': '#6b5f85',
+            '--color-accent': accent,
+            '--color-accent-hover': accent,
+            '--color-border': accent + '44',
+            '--color-shadow': 'rgba(0,0,0,0.5)',
+            '--color-user-bubble': accent + '33',
+            '--color-ai-bubble': bg,
+            '--font-body': "'Noto Sans SC', sans-serif",
+            '--font-heading': "'Noto Sans SC', serif",
+            '--border-radius': '12px',
+          },
+          preview: { type: 'svg', content: svgText },
+        };
+        addImportedTheme(theme);
+      }
+    } catch {
+      alert('生成主题失败');
+    } finally {
+      setGeneratingTheme(false);
+    }
+  }, [aiThemePrompt, aiThemeFormat, settings, addImportedTheme]);
+
+  // ---- 导出自定义主题 ----
+  const customThemes = (config.importedThemes || []).filter(t => t.id.startsWith('custom-'));
+
+  const handleExportThemeById = useCallback((theme: Theme, format: 'svg' | 'json') => {
+    const vars = theme.variables;
+    const name = theme.name;
+    if (format === 'json') {
+      const data = {
+        name,
+        description: `${name} 配色方案`,
+        isDark: theme.isDark,
+        variables: vars,
+      };
+      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url; a.download = `${name}.json`; a.click();
+      URL.revokeObjectURL(url);
+    } else {
+      // 生成 SVG 色卡
+      const bg = vars['--color-bg-primary'] || '#1a1a2e';
+      const bgSec = vars['--color-bg-secondary'] || bg;
+      const bgTer = vars['--color-bg-tertiary'] || '#2a2a4e';
+      const textPri = vars['--color-text-primary'] || '#e8e0f0';
+      const textSec = vars['--color-text-secondary'] || '#a89bc2';
+      const textMut = vars['--color-text-muted'] || '#6b5f85';
+      const accent = vars['--color-accent'] || '#d4a843';
+      const border = vars['--color-border'] || '#3a3a5e';
+      const userBub = vars['--color-user-bubble'] || '#d4a84333';
+      const aiBub = vars['--color-ai-bubble'] || '#2a2a4e';
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 560">
+  <metadata><isDark>${theme.isDark}</isDark></metadata>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="${bg}"/>
+      <stop offset="100%" stop-color="${bgSec}"/>
+    </linearGradient>
+  </defs>
+  <rect width="400" height="560" fill="url(#bg)" rx="16"/>
+  <text x="200" y="50" text-anchor="middle" fill="${accent}" font-size="22" font-weight="bold" font-family="sans-serif">${name}</text>
+  <text x="200" y="75" text-anchor="middle" fill="${textMut}" font-size="12" font-family="sans-serif">Color Palette</text>
+  ${[
+    ['背景色', bg], ['次背景', bgSec], ['三级背景', bgTer],
+    ['主文字', textPri], ['次文字', textSec], ['弱化文字', textMut],
+    ['强调色', accent], ['边框色', border], ['用户气泡', userBub], ['AI气泡', aiBub],
+  ].map(([label, color], i) => {
+    const y = 105 + i * 42;
+    return `<rect x="40" y="${y}" width="36" height="28" rx="6" fill="${color}" stroke="${border}" stroke-width="0.5"/>
+  <text x="88" y="${y + 18}" fill="${textPri}" font-size="13" font-family="sans-serif">${label}</text>
+  <text x="360" y="${y + 18}" text-anchor="end" fill="${textSec}" font-size="11" font-family="monospace">${color}</text>`;
+  }).join('\n  ')}
+</svg>`;
+      const blob = new Blob([svg], { type: 'image/svg+xml' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url; a.download = `${name}.svg`; a.click();
+      URL.revokeObjectURL(url);
+    }
+  }, []);
+
+  const hasChanges = initialSettings ? JSON.stringify(settings) !== JSON.stringify(initialSettings) : false;
+
+  // ---- 导入主题 ----
+  const handleImportTheme = useCallback(async (file: File) => {
+    try {
+      const text = await file.text();
+      const ext = file.name.split('.').pop()?.toLowerCase();
+      let theme: Theme | null = null;
+
+      if (ext === 'svg') {
+        // SVG 主题：提取 script 标签中的 JSON，如果没有则用默认变量
+        const dataMatch = text.match(/<script[^>]*id="world-data"[^>]*>([\s\S]*?)<\/script>/i);
+        let themeData: Record<string, unknown> = {};
+        if (dataMatch) {
+          try { themeData = JSON.parse(dataMatch[1]); } catch { /* ignore */ }
+        }
+        // 从 SVG 中提取 isDark
+        const isDarkMatch = text.match(/<isDark>(true|false)<\/isDark>/i);
+        const svgIsDark = isDarkMatch ? isDarkMatch[1].toLowerCase() === 'true' : null;
+        // 从 SVG 中提取颜色作为主题变量
+        const colorMatches = text.match(/#[0-9a-fA-F]{3,8}/g) || [];
+        const bg = colorMatches[0] || '#1a1a2e';
+        const accent = colorMatches.find((c: string) => c !== bg) || '#d4a843';
+        theme = {
+          id: `imported-${Date.now()}`,
+          name: file.name.replace(/\.svg$/i, ''),
+          description: '从 SVG 导入的主题',
+          isDark: svgIsDark ?? true,
+          variables: {
+            '--color-bg-primary': bg,
+            '--color-bg-secondary': bg,
+            '--color-bg-tertiary': accent + '33',
+            '--color-text-primary': '#e8e0f0',
+            '--color-text-secondary': '#a89bc2',
+            '--color-text-muted': '#6b5f85',
+            '--color-accent': accent,
+            '--color-accent-hover': accent,
+            '--color-border': accent + '44',
+            '--color-shadow': 'rgba(0,0,0,0.5)',
+            '--color-user-bubble': accent + '33',
+            '--color-ai-bubble': bg,
+            '--font-body': "'Noto Sans SC', sans-serif",
+            '--font-heading': "'Noto Sans SC', serif",
+            '--border-radius': '12px',
+          },
+          preview: { type: 'svg', content: text },
+        };
+        // 如果 SVG 中有 _labels 数据，用 title 命名
+        if (themeData.title) theme.name = String(themeData.title);
+      } else if (ext === 'json') {
+        // JSON 主题：解析为主题变量
+        const data = JSON.parse(text);
+        if (data.variables && typeof data.variables === 'object') {
+          theme = {
+            id: `imported-${Date.now()}`,
+            name: data.name || file.name.replace(/\.json$/i, ''),
+            description: data.description || '从 JSON 导入的主题',
+            isDark: data.isDark ?? true,
+            variables: data.variables,
+            preview: { type: 'json', content: JSON.stringify(data, null, 2) },
+          };
+        } else {
+          // 尝试从 JSON 中提取颜色
+          const allColors = JSON.stringify(data).match(/#[0-9a-fA-F]{3,8}/g) || [];
+          if (allColors.length >= 2) {
+            theme = {
+              id: `imported-${Date.now()}`,
+              name: data.title || data.name || file.name.replace(/\.json$/i, ''),
+              description: '从 JSON 导入的主题',
+              isDark: true,
+              variables: {
+                '--color-bg-primary': allColors[0] || '#1a1a2e',
+                '--color-bg-secondary': allColors[0] || '#1a1a2e',
+                '--color-bg-tertiary': (allColors[1] || '#d4a843') + '33',
+                '--color-text-primary': '#e8e0f0',
+                '--color-text-secondary': '#a89bc2',
+                '--color-text-muted': '#6b5f85',
+                '--color-accent': allColors[1] || '#d4a843',
+                '--color-accent-hover': allColors[1] || '#d4a843',
+                '--color-border': (allColors[1] || '#d4a843') + '44',
+                '--color-shadow': 'rgba(0,0,0,0.5)',
+                '--color-user-bubble': (allColors[1] || '#d4a843') + '33',
+                '--color-ai-bubble': allColors[0] || '#1a1a2e',
+                '--font-body': "'Noto Sans SC', sans-serif",
+                '--font-heading': "'Noto Sans SC', serif",
+                '--border-radius': '12px',
+              },
+              preview: { type: 'json', content: JSON.stringify(data, null, 2) },
+            };
+          }
+        }
+      }
+
+      if (theme) {
+        addImportedTheme(theme);
+      } else {
+        alert('无法识别的主题文件格式');
+      }
+    } catch {
+      alert('导入主题失败：文件格式不正确');
+    }
+  }, [addImportedTheme]);
+
+  // ==================== 颜色编辑器变量 ====================
+  const colorVars = [
+    { key: '--color-bg-primary', label: '主背景色' },
+    { key: '--color-bg-secondary', label: '次级背景色' },
+    { key: '--color-text-primary', label: '主文字色' },
+    { key: '--color-accent', label: '强调色' },
+    { key: '--color-accent-hover', label: '强调色悬停' },
+    { key: '--color-user-bubble', label: '用户气泡色' },
+    { key: '--color-ai-bubble', label: 'AI 气泡色' },
+    { key: '--color-border', label: '边框色' },
+  ];
+
+  // ==================== 渲染右侧内容 ====================
+
+  const renderContent = () => {
+    switch (activeCategory) {
+      case 'api':
+        return (
+          <ColumnLayout>
+            <SettingCard title="API 供应商预设">
+              <div className="py-3 flex flex-wrap gap-2">
+                {API_PRESETS.map((p) => (
+                  <button key={p.name} onClick={() => handlePresetSelect(p)}
+                    className="px-3 py-1.5 rounded-lg text-xs border transition-colors"
+                    style={{
+                      borderColor: settings.aiApiBase === p.base ? 'var(--color-accent)' : 'var(--color-border)',
+                      backgroundColor: settings.aiApiBase === p.base ? 'var(--color-bg-tertiary)' : 'transparent',
+                      color: settings.aiApiBase === p.base ? 'var(--color-accent)' : 'var(--color-text-secondary)',
+                    }}
+                  >{p.name}</button>
+                ))}
+              </div>
+            </SettingCard>
+
+            <SettingCard title="连接配置">
+              <SettingRow label="API Key" description="仅存储在本地浏览器中，不会上传">
+                <div className="relative">
+                  <input
+                    type={showKey ? 'text' : 'password'}
+                    value={settings.aiApiKey}
+                    onChange={(e) => updateSetting('aiApiKey', e.target.value)}
+                    placeholder="sk-..."
+                    className="w-52 px-3 py-1.5 rounded-lg text-sm border outline-none transition-colors pr-9"
+                    style={{
+                      backgroundColor: 'var(--color-bg-tertiary)',
+                      borderColor: 'var(--color-border)',
+                      color: 'var(--color-text-primary)',
+                      fontFamily: 'monospace',
+                    }}
+                    onFocus={(e) => (e.target.style.borderColor = 'var(--color-accent)')}
+                    onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')}
+                  />
+                  <button type="button" onClick={() => setShowKey(!showKey)}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5"
+                    style={{ color: 'var(--color-text-muted)' }}
+                  >
+                    {showKey ? (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+                        <line x1="1" y1="1" x2="23" y2="23" />
+                      </svg>
+                    ) : (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+              </SettingRow>
+              <SettingRow label="API 地址" description="兼容 OpenAI 格式的端点">
+                <TextField value={settings.aiApiBase} onChange={(v) => updateSetting('aiApiBase', v)} placeholder="https://api.openai.com/v1" mono />
+              </SettingRow>
+              <SettingRow label="模型名称">
+                <TextField value={settings.aiModel} onChange={(v) => updateSetting('aiModel', v)} placeholder="gpt-4o" mono />
+              </SettingRow>
+              {/* 测试连接 */}
+              <div>
+                {testResult && (
+                    <div className="text-xs pt-2" style={{ color: testResult.success ? '#22c55e' : '#ef4444' }}>
+                    <i className={`fa-solid ${testResult.success ? 'fa-circle-check' : 'fa-circle-xmark'} mr-1`} />
+                      {testResult.message}
+                  </div>
+                )}
+                <div className="flex justify-end pt-2">
+                  <button onClick={handleTestApi} disabled={testingApi || !settings.aiApiKey}
+                    className="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                    style={{ backgroundColor: 'var(--color-accent)', color: activeTheme.isDark ? '#000' : '#fff', opacity: (testingApi || !settings.aiApiKey) ? 0.5 : 1 }}>
+                    {testingApi ? '测试中...' : '测试连接'}
+                  </button>
+                </div>
+              </div>
+            </SettingCard>
+
+            <SettingCard title="生成参数">
+              <SettingRow label="Temperature" description="越高回复越有创意，越低越稳定">
+                <div className="flex items-center gap-3 w-52">
+                  <input type="range" min={0} max={2} step={0.1} value={settings.aiTemperature}
+                    onChange={(e) => updateSetting('aiTemperature', parseFloat(e.target.value))}
+                    className="flex-1 h-1.5 rounded-full appearance-none cursor-pointer"
+                    style={{ backgroundColor: 'var(--color-bg-tertiary)', accentColor: 'var(--color-accent)' }}
+                  />
+                  <span className="text-xs font-mono w-8 text-right" style={{ color: 'var(--color-text-secondary)' }}>
+                    {settings.aiTemperature.toFixed(1)}
+                  </span>
+                </div>
+              </SettingRow>
+              <SettingRow label="最大 Token 数" description="单次回复的最大长度">
+                <div className="flex items-center gap-3 w-52">
+                  <input type="range" min={128} max={4096} step={128} value={settings.aiMaxTokens}
+                    onChange={(e) => updateSetting('aiMaxTokens', parseInt(e.target.value))}
+                    className="flex-1 h-1.5 rounded-full appearance-none cursor-pointer"
+                    style={{ backgroundColor: 'var(--color-bg-tertiary)', accentColor: 'var(--color-accent)' }}
+                  />
+                  <span className="text-xs font-mono w-10 text-right" style={{ color: 'var(--color-text-secondary)' }}>
+                    {settings.aiMaxTokens}
+                  </span>
+                </div>
+              </SettingRow>
+            </SettingCard>
+          </ColumnLayout>
+        );
+
+      case 'chat':
+        return (
+          <ColumnLayout>
+          <SettingCard title="全局追加指令">
+            <div className="py-3">
+              <p className="text-xs mb-2" style={{ color: 'var(--color-text-muted)' }}>
+                追加到每次 AI 对话的 system prompt 末尾，适用于所有游戏。可用于控制回复风格、长度等。
+              </p>
+              <textarea
+                value={settings.systemPromptExtra}
+                onChange={(e) => updateSetting('systemPromptExtra', e.target.value)}
+                placeholder="例如：请用更简洁的语言回复，每次不超过200字"
+                rows={5}
+                className="w-full px-3 py-2 rounded-lg text-sm border outline-none resize-none transition-colors"
+                style={{
+                  backgroundColor: 'var(--color-bg-tertiary)',
+                  borderColor: 'var(--color-border)',
+                  color: 'var(--color-text-primary)',
+                }}
+                onFocus={(e) => (e.target.style.borderColor = 'var(--color-accent)')}
+                onBlur={(e) => (e.target.style.borderColor = 'var(--color-border)')}
+              />
+            </div>
+          </SettingCard>
+          </ColumnLayout>
+        );
+
+      case 'theme':
+        return (
+          <ColumnLayout>
+            <SettingCard title="预设主题">
+              <div className="py-3 grid grid-cols-2 gap-2">
+                {config.presets.map((theme) => (
+                  <button key={theme.id} onClick={() => { setActiveThemeId(theme.id); setIsEditingCustom(false); }}
+                    className="flex items-center gap-3 px-3 py-2.5 rounded-lg border text-left transition-colors"
+                    style={{
+                      borderColor: activeTheme.id === theme.id ? 'var(--color-accent)' : 'var(--color-border)',
+                      backgroundColor: activeTheme.id === theme.id ? 'var(--color-bg-tertiary)' : 'transparent',
+                    }}
+                  >
+                    <div className="flex gap-1 shrink-0">
+                      <span className="w-5 h-5 rounded-full border" style={{
+                        backgroundColor: theme.variables['--color-bg-primary'],
+                        borderColor: theme.variables['--color-border'],
+                      }} />
+                      <span className="w-5 h-5 rounded-full" style={{
+                        backgroundColor: theme.variables['--color-accent'],
+                      }} />
+                    </div>
+                    <div className="min-w-0">
+                      <div className="text-sm font-medium truncate" style={{ color: 'var(--color-text-primary)' }}>
+                        {theme.name}
+                        {activeTheme.id === theme.id && (
+                          <span className="ml-1" style={{ color: 'var(--color-accent)' }}>✓</span>
+                        )}
+                      </div>
+                      <div className="text-xs truncate" style={{ color: 'var(--color-text-muted)' }}>
+                        {theme.description}
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </SettingCard>
+
+            <SettingCard title="导入主题">
+              <div className="py-3">
+                <input ref={importThemeRef} type="file" accept=".svg,.json" className="hidden"
+                  onChange={(e) => { const f = e.target.files?.[0]; if (f) handleImportTheme(f); e.target.value = ''; }} />
+                <button onClick={() => importThemeRef.current?.click()}
+                  className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors"
+                  style={{ borderColor: 'var(--color-accent)', color: 'var(--color-accent)', backgroundColor: 'transparent' }}>
+                  <i className="fa-solid fa-file-import" style={{ fontSize: '12px' }} />
+                  导入 SVG 或 JSON 主题文件
+                </button>
+                <p className="text-xs mt-2" style={{ color: 'var(--color-text-muted)' }}>
+                  SVG 文件会自动提取配色方案，JSON 文件需包含 variables 字段
+                </p>
+              </div>
+            </SettingCard>
+
+            <SettingCard title="自定义主题">
+              <div className="py-3">
+                {isEditingCustom ? (
+                  <div className="space-y-3">
+                    <div className="text-xs font-medium" style={{ color: 'var(--color-text-muted)' }}>
+                      {editingThemeId ? '编辑自定义主题' : '创建自定义主题'}
+                    </div>
+                    <div className="flex items-center gap-3 mb-2">
+                      <span className="text-xs" style={{ color: 'var(--color-text-secondary)' }}>主题类型</span>
+                      <button
+                        onClick={() => setCustomIsDark(false)}
+                        className="px-3 py-1 rounded-lg text-xs border transition-colors"
+                        style={{
+                          borderColor: !customIsDark ? 'var(--color-accent)' : 'var(--color-border)',
+                          backgroundColor: !customIsDark ? 'var(--color-accent)' : 'transparent',
+                          color: !customIsDark ? (activeTheme.isDark ? '#000' : '#fff') : 'var(--color-text-secondary)',
+                        }}
+                      >☀️ 浅色</button>
+                      <button
+                        onClick={() => setCustomIsDark(true)}
+                        className="px-3 py-1 rounded-lg text-xs border transition-colors"
+                        style={{
+                          borderColor: customIsDark ? 'var(--color-accent)' : 'var(--color-border)',
+                          backgroundColor: customIsDark ? 'var(--color-accent)' : 'transparent',
+                          color: customIsDark ? (activeTheme.isDark ? '#000' : '#fff') : 'var(--color-text-secondary)',
+                        }}
+                      >🌙 深色</button>
+                    </div>
+                    <div className="grid grid-cols-2 gap-x-4 gap-y-2.5">
+                      {colorVars.map(({ key, label }) => (
+                        <div key={key} className="flex items-center gap-2">
+                          <span className="text-xs w-20 shrink-0" style={{ color: 'var(--color-text-secondary)' }}>
+                            {label}
+                          </span>
+                          <input type="color" value={customVars[key] || '#000000'}
+                            onChange={(e) => setCustomVars((p) => ({ ...p, [key]: e.target.value }))}
+                            className="w-7 h-7 rounded cursor-pointer border-0 p-0 shrink-0"
+                          />
+                          <input type="text" value={customVars[key] || ''}
+                            onChange={(e) => setCustomVars((p) => ({ ...p, [key]: e.target.value }))}
+                            className="flex-1 min-w-0 px-2 py-1 rounded text-xs border"
+                            style={{
+                              backgroundColor: 'var(--color-bg-tertiary)',
+                              borderColor: 'var(--color-border)',
+                              color: 'var(--color-text-primary)',
+                              fontFamily: 'monospace',
+                            }}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                    <div className="flex gap-2 pt-1">
+                      <button onClick={handleApplyCustomTheme}
+                        className="flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                        style={{ backgroundColor: 'var(--color-accent)', color: activeTheme.isDark ? '#000' : '#fff' }}
+                      >{editingThemeId ? '保存修改' : '添加主题'}</button>
+                      <button onClick={() => { setIsEditingCustom(false); setEditingThemeId(null); }}
+                        className="px-4 py-2 rounded-lg text-sm border transition-colors"
+                        style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-secondary)' }}
+                      >取消</button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <button onClick={handleStartCustomTheme}
+                      className="w-full px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors mb-3"
+                      style={{
+                        borderColor: 'var(--color-accent)',
+                        color: 'var(--color-accent)',
+                        backgroundColor: 'transparent',
+                      }}
+                    >
+                      <i className="fa-solid fa-plus mr-1" style={{ fontSize: '11px' }} />
+                      创建自定义主题
+                    </button>
+                    {customThemes.length > 0 ? (
+                      <div className="space-y-2">
+                        {customThemes.map((t) => (
+                          <div key={t.id} className="flex items-center gap-3 px-3 py-2.5 rounded-lg border group"
+                            style={{
+                              borderColor: activeTheme.id === t.id ? 'var(--color-accent)' : 'var(--color-border)',
+                              backgroundColor: activeTheme.id === t.id ? 'var(--color-bg-tertiary)' : 'transparent',
+                            }}>
+                            <div className="w-10 h-14 rounded flex flex-col items-center justify-center gap-0.5 shrink-0"
+                              style={{ backgroundColor: t.variables['--color-bg-primary'], border: `1px solid ${t.variables['--color-border']}` }}>
+                              <span className="w-4 h-4 rounded-full" style={{ backgroundColor: t.variables['--color-accent'] }} />
+                              <span className="w-4 h-4 rounded-full" style={{ backgroundColor: t.variables['--color-text-primary'] }} />
+                            </div>
+                            <div className="flex-1 min-w-0 cursor-pointer" onClick={() => setActiveThemeId(t.id)}>
+                              <div className="text-sm font-medium truncate" style={{ color: 'var(--color-text-primary)' }}>
+                                {t.name}
+                                {activeTheme.id === t.id && <span className="ml-1" style={{ color: 'var(--color-accent)' }}>✓</span>}
+                              </div>
+                              <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                                {t.isDark ? '深色' : '浅色'} · 自定义
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+                              <button onClick={() => handleEditCustomTheme(t)} title="编辑"
+                                className="p-1.5 rounded transition-colors"
+                                style={{ color: 'var(--color-text-muted)' }}>
+                                <i className="fa-solid fa-pen" style={{ fontSize: '10px' }} />
+                              </button>
+                              <button onClick={() => handleExportThemeById(t, 'json')} title="导出 JSON"
+                                className="p-1.5 rounded transition-colors"
+                                style={{ color: 'var(--color-text-muted)' }}>
+                                <i className="fa-solid fa-file-arrow-down" style={{ fontSize: '10px' }} />
+                              </button>
+                              <button onClick={() => handleExportThemeById(t, 'svg')} title="导出 SVG"
+                                className="p-1.5 rounded transition-colors"
+                                style={{ color: 'var(--color-text-muted)' }}>
+                                <i className="fa-solid fa-palette" style={{ fontSize: '10px' }} />
+                              </button>
+                              <button onClick={() => handleDeleteCustomTheme(t.id)} title="删除"
+                                className="p-1.5 rounded transition-colors"
+                                style={{ color: '#ef4444' }}>
+                                <i className="fa-solid fa-trash-can" style={{ fontSize: '10px' }} />
+                              </button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center py-8 gap-2 opacity-40">
+                        <i className="fa-regular fa-palette" style={{ color: 'var(--color-text-muted)', fontSize: '28px' }} />
+                        <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>暂无自定义主题</p>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            </SettingCard>
+
+            <SettingCard title="AI 生成配色方案">
+              <div className="py-3 space-y-3">
+                <textarea
+                  value={aiThemePrompt}
+                  onChange={(e) => setAiThemePrompt(e.target.value)}
+                  placeholder="描述你想要的配色风格，例如：深海蓝绿色调、温暖日落橙、赛博朋克霓虹..."
+                  className="w-full px-3 py-2 rounded-lg text-sm border outline-none resize-none"
+                  style={{
+                    backgroundColor: 'var(--color-bg-tertiary)',
+                    borderColor: 'var(--color-border)',
+                    color: 'var(--color-text-primary)',
+                    minHeight: '60px',
+                  }}
+                  rows={2}
+                />
+                <div className="flex items-center gap-3">
+                  <div className="flex rounded-lg border overflow-hidden" style={{ borderColor: 'var(--color-border)' }}>
+                    <button onClick={() => setAiThemeFormat('json')}
+                      className="px-3 py-1.5 text-xs transition-colors"
+                      style={{
+                        backgroundColor: aiThemeFormat === 'json' ? 'var(--color-accent)' : 'transparent',
+                        color: aiThemeFormat === 'json' ? (activeTheme.isDark ? '#000' : '#fff') : 'var(--color-text-secondary)',
+                      }}>JSON</button>
+                    <button onClick={() => setAiThemeFormat('svg')}
+                      className="px-3 py-1.5 text-xs transition-colors"
+                      style={{
+                        backgroundColor: aiThemeFormat === 'svg' ? 'var(--color-accent)' : 'transparent',
+                        color: aiThemeFormat === 'svg' ? (activeTheme.isDark ? '#000' : '#fff') : 'var(--color-text-secondary)',
+                      }}>SVG 色卡</button>
+                  </div>
+                  <button onClick={handleGenerateTheme} disabled={generatingTheme || !aiThemePrompt.trim()}
+                    className="flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+                    style={{ backgroundColor: 'var(--color-accent)', color: activeTheme.isDark ? '#000' : '#fff', opacity: (generatingTheme || !aiThemePrompt.trim()) ? 0.5 : 1 }}>
+                    {generatingTheme ? '生成中...' : 'AI 生成'}
+                  </button>
+                </div>
+              </div>
+            </SettingCard>
+
+            {(config.importedThemes || []).length > 0 && (
+              <SettingCard title="已导入主题">
+                <div className="py-3 space-y-2">
+                  {(config.importedThemes || []).map((t) => (
+                    <div key={t.id} className="flex items-center gap-3 px-3 py-2.5 rounded-lg border group"
+                      style={{
+                        borderColor: activeTheme.id === t.id ? 'var(--color-accent)' : 'var(--color-border)',
+                        backgroundColor: activeTheme.id === t.id ? 'var(--color-bg-tertiary)' : 'transparent',
+                        cursor: 'pointer',
+                      }}
+                      onClick={() => setActiveThemeId(t.id)}>
+                      {t.preview?.type === 'svg' ? (
+                        <div className="w-10 h-14 rounded overflow-hidden shrink-0" style={{ backgroundColor: 'var(--color-bg-tertiary)' }}>
+                          <iframe srcDoc={t.preview.content} className="w-full h-full pointer-events-none"
+                            style={{ border: 'none', display: 'block', transform: 'scale(1.5)', transformOrigin: 'top left' }}
+                            title={t.name} />
+                        </div>
+                      ) : (
+                        <div className="w-10 h-14 rounded flex flex-col items-center justify-center gap-0.5 shrink-0"
+                          style={{ backgroundColor: t.variables['--color-bg-primary'], border: `1px solid ${t.variables['--color-border']}` }}>
+                          <span className="w-4 h-4 rounded-full" style={{ backgroundColor: t.variables['--color-accent'] }} />
+                          <span className="w-4 h-4 rounded-full" style={{ backgroundColor: t.variables['--color-text-primary'] }} />
+                        </div>
+                      )}
+                      <div className="flex-1 min-w-0">
+                        <div className="text-sm font-medium truncate" style={{ color: 'var(--color-text-primary)' }}>
+                          {t.name}
+                          {activeTheme.id === t.id && <span className="ml-1" style={{ color: 'var(--color-accent)' }}>✓</span>}
+                        </div>
+                        <div className="text-xs truncate" style={{ color: 'var(--color-text-muted)' }}>
+                          {t.description} · {t.preview?.type === 'svg' ? 'SVG' : 'JSON'}
+                        </div>
+                      </div>
+                      <button onClick={(e) => { e.stopPropagation(); removeImportedTheme(t.id); }}
+                        className="opacity-0 group-hover:opacity-100 p-1 rounded transition-opacity shrink-0"
+                        style={{ color: 'var(--color-text-muted)' }} title="删除">
+                        <i className="fa-solid fa-xmark" style={{ fontSize: '11px' }} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </SettingCard>
+            )}
+          </ColumnLayout>
+        );
+
+      case 'extensions':
+        return (
+          <ColumnLayout>
+            {/* 插件消息提示设置 */}
+            <SettingCard title="插件消息提示">
+              <div className="py-3 space-y-4">
+                {/* 总开关 */}
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm" style={{ color: 'var(--color-text-primary)' }}>
+                      显示插件提示消息
+                    </p>
+                    <p className="text-xs mt-0.5" style={{ color: 'var(--color-text-muted)' }}>
+                      控制是否显示插件通过 xinyu.ui.toast() 发送的消息
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => {
+                      setSettings(prev => ({ ...prev, pluginToastEnabled: !prev.pluginToastEnabled }));
+                      setSaved(false);
+                    }}
+                    className="relative w-9 h-5 rounded-full transition-colors shrink-0"
+                    style={{
+                      backgroundColor: settings.pluginToastEnabled ? 'var(--color-accent)' : 'var(--color-bg-tertiary)',
+                      border: `1px solid ${settings.pluginToastEnabled ? 'var(--color-accent)' : 'var(--color-border)'}`,
+                    }}
+                  >
+                    <span className="absolute top-0.5 w-3.5 h-3.5 rounded-full transition-all"
+                      style={{
+                        backgroundColor: settings.pluginToastEnabled ? (activeTheme.isDark ? '#000' : '#fff') : 'var(--color-text-muted)',
+                        left: settings.pluginToastEnabled ? 'calc(100% - 16px)' : '2px',
+                      }}
+                    />
+                  </button>
+                </div>
+
+                {/* 级别过滤 */}
+                {settings.pluginToastEnabled && (
+                  <div>
+                    <p className="text-xs mb-2" style={{ color: 'var(--color-text-muted)' }}>
+                      允许显示的消息级别
+                    </p>
+                    <div className="flex flex-wrap gap-2">
+                      {([
+                        { key: 'info' as const, label: '信息', color: '#3b82f6', icon: 'fa-circle-info' },
+                        { key: 'success' as const, label: '成功', color: '#22c55e', icon: 'fa-circle-check' },
+                        { key: 'warning' as const, label: '警告', color: '#f59e0b', icon: 'fa-triangle-exclamation' },
+                        { key: 'error' as const, label: '错误', color: '#ef4444', icon: 'fa-circle-xmark' },
+                      ]).map(level => {
+                        const active = settings.pluginToastLevels.includes(level.key);
+                        return (
+                          <button
+                            key={level.key}
+                            onClick={() => {
+                              setSettings(prev => ({
+                                ...prev,
+                                pluginToastLevels: active
+                                  ? prev.pluginToastLevels.filter(l => l !== level.key)
+                                  : [...prev.pluginToastLevels, level.key],
+                              }));
+                              setSaved(false);
+                            }}
+                            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs border transition-colors"
+                            style={{
+                              borderColor: active ? level.color : 'var(--color-border)',
+                              backgroundColor: active ? `${level.color}15` : 'transparent',
+                              color: active ? level.color : 'var(--color-text-muted)',
+                            }}
+                          >
+                            <i className={`fa-solid ${level.icon}`} style={{ fontSize: '10px' }} />
+                            {level.label}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </SettingCard>
+
+            {/* 插件管理入口 */}
+            <SettingCard title="插件管理">
+              <div className="py-3 space-y-3">
+                <p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
+                  前往插件管理页面，可以创建新插件、导入导出插件，以及进行更详细的配置。
+                </p>
+                <button
+                  onClick={() => navigate('/extensions')}
+                  className="w-full px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors"
+                  style={{
+                    borderColor: 'var(--color-border)',
+                    color: 'var(--color-text-secondary)',
+                  }}
+                >
+                  <i className="fa-solid fa-puzzle-piece mr-1.5" style={{ fontSize: '12px' }} />
+                  打开插件管理页面
+                </button>
+              </div>
+            </SettingCard>
+
+            {/* 开发教程入口 */}
+            <SettingCard title="开发教程">
+              <div className="py-3 space-y-3">
+                <p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
+                  查看插件开发教程，了解插件系统的设计理念和 API 使用方法，快速上手插件开发。
+                </p>
+                <button
+                  onClick={() => navigate('/extensions/tutorial')}
+                  className="w-full px-4 py-2.5 rounded-lg text-sm font-medium border transition-colors"
+                  style={{
+                    borderColor: 'var(--color-border)',
+                    color: 'var(--color-text-secondary)',
+                  }}
+                >
+                  <i className="fa-solid fa-book mr-1.5" style={{ fontSize: '12px' }} />
+                  查看开发教程
+                </button>
+              </div>
+            </SettingCard>
+
+            {/* 插件列表 */}
+            <SettingCard
+                title={`已安装插件 (${plugins.length})`}
+                button={
+                    pluginBindings.some(b => b.enabled) && (
+                        <div className='flex gap-1.5'>
+                          <button
+                              onClick={handleDisableAllPlugins}
+                              className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5"
+                              style={{
+                                borderColor: '#ef4444',
+                                color: '#ef4444',
+                                backgroundColor: 'transparent',
+                              }}
+                              title="禁用所有已启用的插件"
+                          >
+                            <i className="fa-solid fa-power-off" style={{ fontSize: '11px' }} />
+                            全部禁用
+                          </button>
+                          <button
+                              onClick={handleRefreshAllPlugins}
+                              className="px-3 py-1.5 rounded-lg text-xs border flex items-center gap-1.5"
+                              style={{
+                                borderColor: 'var(--color-border)',
+                                color: 'var(--color-text-secondary)',
+                                backgroundColor: 'transparent',
+                              }}
+                              title="重新加载所有插件"
+                          >
+                            <i className="fa-solid fa-arrows-rotate" style={{ fontSize: '11px' }} />
+                            刷新全部
+                          </button>
+                        </div>)
+                }>
+              <div className="py-3">
+                {plugins.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-8 gap-2 opacity-40">
+                      <i className="fa-solid fa-puzzle-piece" style={{ color: 'var(--color-text-muted)', fontSize: '28px' }} />
+                      <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>暂无已安装的插件</p>
+                    </div>
+                ) : (
+                    <div className="space-y-2 max-h-96 overflow-y-auto">
+                      {plugins.map((plugin) => {
+                        const binding = pluginBindings.find(b => b.extensionId === plugin.id);
+                        const isEnabled = binding ? binding.enabled : false;
+                        const typeInfo = PLUGIN_TYPE_LABELS[plugin.type] || { label: plugin.type, icon: '📦' };
+                        return (
+                            <div key={plugin.id} className="flex items-center gap-3 px-3 py-2.5 rounded-lg border group select-none"
+                                 style={{
+                                   borderColor: 'var(--color-border)',
+                                   backgroundColor: 'transparent',
+                                 }}
+                            >
+                              {/* 插件图标 */}
+                              <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 text-lg"
+                                   style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
+                              >
+                                <PluginIcon icon={plugin.icon} pluginId={plugin.id} fallback={typeInfo.icon} size={20} />
+                              </div>
+                              {/* 插件信息 */}
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2">
+                              <span className="text-sm font-medium truncate" style={{ color: 'var(--color-text-primary)' }}>
+                                {plugin.name}
+                              </span>
+                                  <span className="text-xs px-1.5 py-0.5 rounded" style={{
+                                    backgroundColor: 'var(--color-bg-tertiary)',
+                                    color: 'var(--color-text-muted)',
+                                  }}>
+                                {typeInfo.label}
+                              </span>
+                                </div>
+                                <div className="text-xs truncate" style={{ color: 'var(--color-text-muted)' }}>
+                                  v{plugin.version}{plugin.author ? ` · ${plugin.author}` : ''}
+                                </div>
+                              </div>
+                              {/* 操作按钮 */}
+                              <div className="flex items-center gap-1 shrink-0">
+                                {/* 编辑按钮 */}
+                                <button
+                                    onClick={() => navigate(`/extensions/edit/${plugin.id}`)}
+                                    className="opacity-0 group-hover:opacity-100 p-1.5 rounded transition-opacity"
+                                    style={{ color: 'var(--color-text-muted)' }}
+                                    title="编辑插件"
+                                >
+                                  <i className="fa-solid fa-pen" style={{ fontSize: '10px' }} />
+                                </button>
+                                {/* 删除按钮 */}
+                                <button
+                                    onClick={() => handleDeletePlugin(plugin)}
+                                    className="opacity-0 group-hover:opacity-100 p-1.5 rounded transition-opacity"
+                                    style={{ color: '#ef4444' }}
+                                    title="删除插件"
+                                >
+                                  <i className="fa-solid fa-trash-can" style={{ fontSize: '10px' }} />
+                                </button>
+                                {/* 启用/禁用开关 */}
+                                <button
+                                    onClick={() => handleTogglePlugin(plugin.id, !isEnabled)}
+                                    className="relative w-9 h-5 rounded-full transition-colors shrink-0"
+                                    style={{
+                                      backgroundColor: isEnabled ? 'var(--color-accent)' : 'var(--color-bg-tertiary)',
+                                      border: `1px solid ${isEnabled ? 'var(--color-accent)' : 'var(--color-border)'}`,
+                                    }}
+                                    title={isEnabled ? '禁用插件' : '启用插件'}
+                                >
+                              <span className="absolute top-0.5 w-3.5 h-3.5 rounded-full transition-all"
+                                    style={{
+                                      backgroundColor: isEnabled ? (activeTheme.isDark ? '#000' : '#fff') : 'var(--color-text-muted)',
+                                      left: isEnabled ? 'calc(100% - 16px)' : '2px',
+                                    }}
+                              />
+                                </button>
+                              </div>
+                            </div>
+                        );
+                      })}
+                    </div>
+                )}
+              </div>
+            </SettingCard>
+          </ColumnLayout>
+        );
+      case 'data':
+        return (
+          <ColumnLayout>
+            <SettingCard title="游戏记录">
+              <div className="py-3">
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                    共 {sessions.length} 个游戏会话
+                  </span>
+                  {sessions.length > 0 && (
+                    <button onClick={handleClearSessions}
+                      className="px-3 py-1 rounded-lg text-xs border transition-colors"
+                      style={{
+                        borderColor: 'rgba(220, 38, 38, 0.3)',
+                        color: '#ef4444',
+                        backgroundColor: 'rgba(220, 38, 38, 0.05)',
+                      }}
+                    >清除全部</button>
+                  )}
+                </div>
+                {sessions.length === 0 ? (
+                  <div className="text-center py-6">
+                    <div className="text-2xl mb-1">📭</div>
+                    <p className="text-xs" style={{ color: 'var(--color-text-muted)' }}>暂无游戏记录</p>
+                  </div>
+                ) : (
+                  <div className="space-y-1.5 max-h-64 overflow-y-auto">
+                    {sessions.map((s) => (
+                      <div key={s.id} className="flex items-center justify-between px-3 py-2 rounded-lg group"
+                        style={{ backgroundColor: 'var(--color-bg-tertiary)' }}
+                      >
+                        <div className="min-w-0 flex-1">
+                          <div className="text-sm font-medium truncate" style={{ color: 'var(--color-text-primary)' }}>
+                            {s.title}
+                          </div>
+                          <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                            {s.era} · {s.count} 条消息
+                          </div>
+                        </div>
+                        <button onClick={() => handleDeleteSession(s.id)}
+                          className="opacity-0 group-hover:opacity-100 p-1 rounded transition-opacity shrink-0 ml-2"
+                          style={{ color: 'var(--color-text-muted)' }}
+                          title="删除"
+                        >
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                            <polyline points="3 6 5 6 21 6" />
+                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                          </svg>
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </SettingCard>
+          </ColumnLayout>
+        );
+
+      case 'about':
+        return (
+          <ColumnLayout>
+          <SettingCard title="关于星语">
+            <div className="py-3 space-y-2">
+              {[
+                ['应用名称', APP_NAME],
+                ['版本', formatVersion(APP_VERSION)],
+                ['描述', APP_DESCRIPTION],
+                ['技术栈', 'Next.js 14 + TypeScript + Tailwind CSS'],
+              ].map(([k, v]) => (
+                <div key={k} className="flex justify-between text-sm">
+                  <span style={{ color: 'var(--color-text-secondary)' }}>{k}</span>
+                  <span style={{ color: 'var(--color-text-primary)' }}>{v}</span>
+                </div>
+              ))}
+            </div>
+          </SettingCard>
+          </ColumnLayout>
+        );
+    }
+  };
+
+  return (
+    <>
+    <div className="h-screen flex flex-col overflow-hidden" style={{ backgroundColor: 'var(--color-bg-primary)' }}>
+      {/* 顶部导航 */}
+      <PageHeader
+        title="⚙ 设置"
+        showBack={true}
+        onBeforeBack={() => {
+          if (hasChanges) {
+            setConfirmConfig({
+              title: '设置未保存',
+              message: '你有未保存的设置更改，确定要离开吗？',
+              onConfirm: () => { setConfirmOpen(false); back(); },
+            });
+            setConfirmOpen(true);
+            return false;
+          }
+          return true;
+        }}
+        sticky
+        actions={
+          <div className="flex items-center gap-3">
+            {saved && <span className="text-xs" style={{ color: 'var(--color-accent)' }}>✓ 已保存</span>}
+            {hasChanges && !saved && <span className="text-xs" style={{ color: 'var(--color-text-muted)' }}>有未保存的更改</span>}
+            <button onClick={handleReset} className="px-3 py-1.5 rounded-lg text-xs border transition-colors"
+              style={{ borderColor: 'var(--color-border)', color: 'var(--color-text-secondary)' }}
+            >恢复默认</button>
+            <button onClick={handleSave} disabled={saving} className="px-4 py-1.5 rounded-lg text-xs font-medium transition-colors"
+              style={{ backgroundColor: 'var(--color-accent)', color: activeTheme.isDark ? '#000' : '#fff', opacity: saving ? 0.6 : 1 }}
+            >{saving ? '保存中...' : '保存设置'}</button>
+          </div>
+        }
+      />
+
+      {/* 主体：左侧标签 + 右侧内容 */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* 左侧分类标签 */}
+        <nav
+          className="w-40 sm:w-48 shrink-0 border-r overflow-y-auto py-3 px-2 space-y-1"
+          style={{ borderColor: 'var(--color-border)', backgroundColor: 'var(--color-bg-secondary)' }}
+        >
+          {CATEGORIES.map((cat) => (
+            <button key={cat.id} onClick={() => setActiveCategory(cat.id)}
+              className="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-left transition-colors"
+              style={{
+                backgroundColor: activeCategory === cat.id ? 'var(--color-bg-tertiary)' : 'transparent',
+                color: activeCategory === cat.id ? 'var(--color-accent)' : 'var(--color-text-secondary)',
+                fontWeight: activeCategory === cat.id ? 600 : 400,
+              }}
+            >
+              <span className="text-base">{cat.icon}</span>
+              {cat.label}
+            </button>
+          ))}
+        </nav>
+
+        {/* 右侧配置内容 */}
+        <main className="flex-1 overflow-y-auto px-4 sm:px-6 py-5">
+          <div>{renderContent()}</div>
+        </main>
+      </div>
+    </div>
+
+    <ConfirmDialog
+      open={confirmOpen}
+      title={confirmConfig.title}
+      message={confirmConfig.message}
+      danger={confirmConfig.danger}
+      onConfirm={confirmConfig.onConfirm}
+      onCancel={() => setConfirmOpen(false)}
+    />
+    </>
+  );
+}