xinyu-pro 0.21.0

package/components/ui/PluginSlotRenderer.tsx

@@ -0,0 +1,76 @@
+// components/ui/PluginSlotRenderer.tsx - 插槽渲染器组件
+// 负责渲染指定插槽中的所有插件注册内容
+'use client';
+
+import React, { useCallback, useRef } from 'react';
+import { SlotRegistration, UISlotId } from '@/lib/plugin-types';
+import { getPluginRuntime } from '@/lib/plugin-runtime';
+
+interface PluginSlotRendererProps {
+  slotId: UISlotId;
+  registrations: SlotRegistration[];
+  className?: string;
+  direction?: 'horizontal' | 'vertical';
+  gap?: string;
+  style?: React.CSSProperties;
+}
+
+export function PluginSlotRenderer({
+  slotId,
+  registrations,
+  className,
+  direction = 'horizontal',
+  gap = '8px',
+  style,
+}: PluginSlotRendererProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 事件委托：处理 data-action 属性的点击事件
+  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    const actionEl = target.closest<HTMLElement>('[data-action]');
+    if (!actionEl) return;
+
+    const actionName = actionEl.getAttribute('data-action');
+    const pluginId = actionEl.closest<HTMLElement>('[data-plugin-id]')?.getAttribute('data-plugin-id');
+    const payload = actionEl.getAttribute('data-payload') || undefined;
+
+    if (actionName && pluginId) {
+      e.preventDefault();
+      e.stopPropagation();
+      const runtime = getPluginRuntime();
+      runtime.dispatchAction(pluginId, actionName, actionEl, payload);
+    }
+  }, []);
+
+  // 始终渲染容器（即使没有注册内容），确保 getContainerElement 能找到它
+  // 空容器使用 display:contents 避免影响布局
+  const isEmpty = !registrations || registrations.length === 0;
+
+  return (
+    <div
+      ref={containerRef}
+      id={`xinyu-${slotId}`}
+      data-plugin-slot={slotId}
+      className={className}
+      onClick={handleClick}
+      style={{
+        display: isEmpty ? 'contents' : 'flex',
+        flexDirection: direction === 'vertical' ? 'column' : 'row',
+        gap,
+        alignItems: direction === 'vertical' ? 'stretch' : 'center',
+        flexWrap: direction === 'horizontal' ? 'wrap' : 'nowrap',
+        ...style,
+      }}
+    >
+      {registrations.map((reg) => (
+        <div
+          key={reg.id}
+          data-plugin-registration-id={reg.id}
+          data-plugin-id={reg.pluginId}
+          dangerouslySetInnerHTML={{ __html: reg.content }}
+        />
+      ))}
+    </div>
+  );
+}

package/components/ui/ThemeCustomizer.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useTheme } from './ThemeProvider';
+import { Theme } from '@/lib/types';
+
+export function ThemeCustomizer() {
+  const { activeTheme, setCustomTheme, resetToPreset } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [localVars, setLocalVars] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    setLocalVars({ ...activeTheme.variables });
+  }, [activeTheme]);
+
+  const handleVarChange = (key: string, value: string) => {
+    setLocalVars((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleApply = () => {
+    const customTheme: Theme = {
+      id: 'custom',
+      name: '自定义主题',
+      description: '用户自定义主题',
+      isDark: activeTheme.isDark,
+      variables: localVars,
+    };
+    setCustomTheme(customTheme);
+    setIsOpen(false);
+  };
+
+  const handleReset = () => {
+    setLocalVars({ ...activeTheme.variables });
+  };
+
+  // 可修改的变量配置
+  const editableVars = [
+    { key: '--color-bg-primary', label: '主背景色', type: 'color' },
+    { key: '--color-bg-secondary', label: '次级背景色', type: 'color' },
+    { key: '--color-text-primary', label: '主文字色', type: 'color' },
+    { key: '--color-accent', label: '强调色', type: 'color' },
+    { key: '--color-accent-hover', label: '强调色悬停', type: 'color' },
+    { key: '--color-user-bubble', label: '用户气泡色', type: 'color' },
+    { key: '--color-ai-bubble', label: 'AI 气泡色', type: 'color' },
+    { key: '--color-border', label: '边框色', type: 'color' },
+    { key: '--border-radius', label: '圆角大小', type: 'text' },
+  ];
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors"
+        style={{
+          backgroundColor: 'var(--color-bg-tertiary)',
+          borderColor: 'var(--color-border)',
+          color: 'var(--color-text-primary)',
+        }}
+        title="自定义主题"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M12 3a9 9 0 0 0 9 9" />
+          <path d="M12 3a9 9 0 0 1 9 9" />
+          <path d="M12 3v9h9" />
+          <circle cx="12" cy="12" r="2" />
+        </svg>
+        <span className="text-sm hidden sm:inline">自定义</span>
+      </button>
+
+      {isOpen && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
+          <div
+            className="fixed right-4 top-20 w-100 max-h-[80vh] overflow-y-auto rounded-lg border shadow-xl z-50 p-4"
+            style={{
+              backgroundColor: 'var(--color-bg-secondary)',
+              borderColor: 'var(--color-border)',
+              boxShadow: '0 8px 32px var(--color-shadow)',
+            }}
+          >
+            <h3
+              className="text-lg font-bold mb-4"
+              style={{ color: 'var(--color-text-primary)' }}
+            >
+              自定义主题
+            </h3>
+
+            <div className="space-y-3">
+              {editableVars.map(({ key, label, type }) => (
+                <div key={key} className="flex items-center gap-3">
+                  <label
+                    className="text-sm w-24 shrink-0"
+                    style={{ color: 'var(--color-text-secondary)' }}
+                  >
+                    {label}
+                  </label>
+                  {type === 'color' ? (
+                    <div className="flex items-center gap-2 flex-1">
+                      <input
+                        type="color"
+                        value={localVars[key] || '#000000'}
+                        onChange={(e) => handleVarChange(key, e.target.value)}
+                        className="w-8 h-8 rounded cursor-pointer border-0 p-0"
+                      />
+                      <input
+                        type="text"
+                        value={localVars[key] || ''}
+                        onChange={(e) => handleVarChange(key, e.target.value)}
+                        className="flex-1 px-2 py-1 rounded text-sm border"
+                        style={{
+                          backgroundColor: 'var(--color-bg-tertiary)',
+                          borderColor: 'var(--color-border)',
+                          color: 'var(--color-text-primary)',
+                        }}
+                      />
+                    </div>
+                  ) : (
+                    <input
+                      type="text"
+                      value={localVars[key] || ''}
+                      onChange={(e) => handleVarChange(key, e.target.value)}
+                      className="flex-1 px-2 py-1 rounded text-sm border"
+                      style={{
+                        backgroundColor: 'var(--color-bg-tertiary)',
+                        borderColor: 'var(--color-border)',
+                        color: 'var(--color-text-primary)',
+                      }}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+
+            <div className="flex gap-2 mt-4">
+              <button
+                onClick={handleApply}
+                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',
+                }}
+              >
+                应用
+              </button>
+              <button
+                onClick={handleReset}
+                className="px-4 py-2 rounded-lg text-sm border transition-colors"
+                style={{
+                  borderColor: 'var(--color-border)',
+                  color: 'var(--color-text-secondary)',
+                }}
+              >
+                重置
+              </button>
+              <button
+                onClick={() => {
+                  resetToPreset('deep-night');
+                  setIsOpen(false);
+                }}
+                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>
+        </>
+      )}
+    </div>
+  );
+}

package/components/ui/ThemeProvider.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import { Theme, ThemeConfig } from '@/lib/types';
+import { presetThemes, findThemeById, getDefaultThemeConfig } from '@/lib/themes';
+import { getThemeConfig, saveThemeConfig } from '@/lib/storage';
+
+interface ThemeContextValue {
+  config: ThemeConfig;
+  activeTheme: Theme;
+  setActiveThemeId: (id: string) => void;
+  setCustomTheme: (theme: Theme) => void;
+  resetToPreset: (id: string) => void;
+  addImportedTheme: (theme: Theme) => void;
+  removeImportedTheme: (id: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return ctx;
+}
+
+/** 将主题变量应用到 document.documentElement */
+function applyThemeVariables(variables: Record<string, string>) {
+  const root = document.documentElement;
+  Object.entries(variables).forEach(([key, value]) => {
+    root.style.setProperty(key, value);
+  });
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [config, setConfig] = useState<ThemeConfig>(getDefaultThemeConfig());
+  const [mounted, setMounted] = useState(false);
+
+  // 初始化：从 localStorage 读取主题
+  useEffect(() => {
+    const stored = getThemeConfig();
+    // 合并预设主题（防止旧版本缺少新主题）
+    const mergedConfig: ThemeConfig = {
+      ...stored,
+      presets: presetThemes,
+      importedThemes: stored.importedThemes || [],
+    };
+    setConfig(mergedConfig);
+    setMounted(true);
+  }, []);
+
+  // 应用主题变量到 DOM
+  useEffect(() => {
+    if (!mounted) return;
+    const theme = findThemeById(config, config.activeThemeId);
+    if (theme) {
+      applyThemeVariables(theme.variables);
+    }
+  }, [config, mounted]);
+
+  const setActiveThemeId = useCallback((id: string) => {
+    setConfig((prev) => {
+      const updated = { ...prev, activeThemeId: id };
+      saveThemeConfig(updated);
+      return updated;
+    });
+  }, []);
+
+  const setCustomTheme = useCallback((theme: Theme) => {
+    setConfig((prev) => {
+      const updated = { ...prev, customTheme: theme, activeThemeId: 'custom' };
+      saveThemeConfig(updated);
+      return updated;
+    });
+  }, []);
+
+  const resetToPreset = useCallback((id: string) => {
+    setConfig((prev) => {
+      const updated = { ...prev, activeThemeId: id };
+      saveThemeConfig(updated);
+      return updated;
+    });
+  }, []);
+
+  const addImportedTheme = useCallback((theme: Theme) => {
+    setConfig((prev) => {
+      // 去重：如果已有相同 id 则替换
+      const filtered = (prev.importedThemes || []).filter(t => t.id !== theme.id);
+      const updated = {
+        ...prev,
+        importedThemes: [...filtered, theme],
+        activeThemeId: theme.id,
+      };
+      saveThemeConfig(updated);
+      return updated;
+    });
+  }, []);
+
+  const removeImportedTheme = useCallback((id: string) => {
+    setConfig((prev) => {
+      const filtered = (prev.importedThemes || []).filter(t => t.id !== id);
+      const updated = {
+        ...prev,
+        importedThemes: filtered,
+        activeThemeId: prev.activeThemeId === id ? 'deep-night' : prev.activeThemeId,
+      };
+      saveThemeConfig(updated);
+      return updated;
+    });
+  }, []);
+
+  const activeTheme = findThemeById(config, config.activeThemeId) || presetThemes[0];
+
+  // 防止闪烁：未挂载时隐藏内容（保持 DOM 结构完整，避免子组件 remount）
+  return (
+    <ThemeContext.Provider
+      value={{ config, activeTheme, setActiveThemeId, setCustomTheme, resetToPreset, addImportedTheme, removeImportedTheme }}
+    >
+      <div style={mounted ? undefined : { visibility: 'hidden' }}>
+        {children}
+      </div>
+    </ThemeContext.Provider>
+  );
+}

package/components/ui/ThemeSwitcher.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTheme } from './ThemeProvider';
+
+export function ThemeSwitcher({ buttonStyle = {} }: { buttonStyle?: React.CSSProperties }) {
+  const { config, activeTheme, setActiveThemeId } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors"
+        style={{
+          backgroundColor: 'var(--color-bg-tertiary)',
+          borderColor: 'var(--color-border)',
+          color: 'var(--color-text-primary)',
+            ...buttonStyle,
+        }}
+        title="切换主题"
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="12" cy="12" r="5" />
+          <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+        </svg>
+        <span className="text-sm hidden sm:inline">{activeTheme.name}</span>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <>
+          {/* 遮罩层 */}
+          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
+          {/* 下拉菜单 */}
+          <div
+            className="absolute right-0 top-full mt-2 w-56 rounded-lg border shadow-lg z-50 overflow-hidden"
+            style={{
+              backgroundColor: 'var(--color-bg-secondary)',
+              borderColor: 'var(--color-border)',
+              boxShadow: '0 4px 24px var(--color-shadow)',
+            }}
+          >
+            <div className="p-2">
+              <p
+                className="text-xs font-medium px-3 py-1 mb-1"
+                style={{ color: 'var(--color-text-muted)' }}
+              >
+                预设主题
+              </p>
+              {config.presets.map((theme) => (
+                <button
+                  key={theme.id}
+                  onClick={() => {
+                    setActiveThemeId(theme.id);
+                    setIsOpen(false);
+                  }}
+                  className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors"
+                  style={{
+                    backgroundColor:
+                      activeTheme.id === theme.id ? 'var(--color-bg-tertiary)' : 'transparent',
+                    color: 'var(--color-text-primary)',
+                  }}
+                >
+                  {/* 颜色预览 */}
+                  <div className="flex gap-1">
+                    <span
+                      className="w-4 h-4 rounded-full border"
+                      style={{
+                        backgroundColor: theme.variables['--color-bg-primary'],
+                        borderColor: theme.variables['--color-border'],
+                      }}
+                    />
+                    <span
+                      className="w-4 h-4 rounded-full"
+                      style={{ backgroundColor: theme.variables['--color-accent'] }}
+                    />
+                  </div>
+                  <div>
+                    <div className="text-sm font-medium">{theme.name}</div>
+                    <div className="text-xs" style={{ color: 'var(--color-text-muted)' }}>
+                      {theme.description}
+                    </div>
+                  </div>
+                  {activeTheme.id === theme.id && (
+                    <svg className="ml-auto" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M20 6L9 17l-5-5" />
+                    </svg>
+                  )}
+                </button>
+              ))}
+
+              {config.customTheme && (
+                <>
+                  <div className="my-1 border-t" style={{ borderColor: 'var(--color-border)' }} />
+                  <button
+                    onClick={() => {
+                      setActiveThemeId('custom');
+                      setIsOpen(false);
+                    }}
+                    className="w-full flex items-center gap-3 px-3 py-2 rounded-md text-left transition-colors"
+                    style={{
+                      backgroundColor:
+                        activeTheme.id === 'custom' ? 'var(--color-bg-tertiary)' : 'transparent',
+                      color: 'var(--color-text-primary)',
+                    }}
+                  >
+                    <div className="flex gap-1">
+                      <span
+                        className="w-4 h-4 rounded-full border"
+                        style={{
+                          backgroundColor: config.customTheme.variables['--color-bg-primary'],
+                          borderColor: config.customTheme.variables['--color-border'],
+                        }}
+                      />
+                      <span
+                        className="w-4 h-4 rounded-full"
+                        style={{ backgroundColor: config.customTheme.variables['--color-accent'] }}
+                      />
+                    </div>
+                    <div>
+                      <div className="text-sm font-medium">自定义主题</div>
+                    </div>
+                    {activeTheme.id === 'custom' && (
+                      <svg className="ml-auto" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <path d="M20 6L9 17l-5-5" />
+                      </svg>
+                    )}
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/components/ui/ToastProvider.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
+
+// ==================== 类型定义 ====================
+
+export type ToastType = 'info' | 'success' | 'error' | 'warning';
+
+interface Toast {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration: number;
+}
+
+interface ToastContextValue {
+  toast: (message: string, type?: ToastType, duration?: number) => void;
+}
+
+// ==================== Context ====================
+
+const ToastContext = createContext<ToastContextValue>({ toast: () => {} });
+
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+// ==================== 图标 ====================
+
+const ICONS: Record<ToastType, string> = {
+  info: 'fa-solid fa-circle-info',
+  success: 'fa-solid fa-circle-check',
+  error: 'fa-solid fa-circle-xmark',
+  warning: 'fa-solid fa-triangle-exclamation',
+};
+
+const COLORS: Record<ToastType, string> = {
+  info: 'var(--color-accent)',
+  success: '#22c55e',
+  error: '#ef4444',
+  warning: '#f59e0b',
+};
+
+// ==================== 单条 Toast ====================
+
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+  const [isLeaving, setIsLeaving] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const handleDismiss = useCallback(() => {
+    setIsLeaving(true);
+    setTimeout(() => onDismiss(toast.id), 300);
+  }, [toast.id, onDismiss]);
+
+  // 自动消失
+  React.useEffect(() => {
+    timerRef.current = setTimeout(handleDismiss, toast.duration);
+    return () => clearTimeout(timerRef.current);
+  }, [toast.duration, handleDismiss]);
+
+  // info 类型使用 CSS 变量，需要用 rgba 方式添加透明度；其他类型直接拼接 hex 透明度
+  const color = COLORS[toast.type];
+  const isInfo = toast.type === 'info';
+  const borderColor = isInfo ? `color-mix(in srgb, ${color} 19%, transparent)` : `${color}30`;
+  const shadowColor = isInfo ? `color-mix(in srgb, ${color} 8%, transparent)` : `${color}15`;
+
+  return (
+    <div
+      onClick={handleDismiss}
+      className="flex items-center gap-2 px-4 py-2.5 rounded-lg shadow-lg cursor-pointer select-none"
+      style={{
+        backgroundColor: 'var(--color-bg-secondary)',
+        border: `1px solid ${borderColor}`,
+        boxShadow: `0 4px 16px var(--color-shadow), 0 0 0 1px ${shadowColor}`,
+        transform: isLeaving ? 'translateY(100%) scale(0.95)' : 'translateY(0) scale(1)',
+        opacity: isLeaving ? 0 : 1,
+        transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease',
+        maxWidth: '400px',
+      }}
+    >
+      <i
+        className={ICONS[toast.type]}
+        style={{ color: COLORS[toast.type], fontSize: '14px', flexShrink: 0 }}
+      />
+      <span
+        className="text-sm flex-1"
+        style={{ color: 'var(--color-text-primary)' }}
+      >
+        {toast.message}
+      </span>
+      <i
+        className="fa-solid fa-xmark"
+        style={{ color: 'var(--color-text-muted)', fontSize: '10px', flexShrink: 0, opacity: 0.5 }}
+      />
+    </div>
+  );
+}
+
+// ==================== Toast 容器 ====================
+
+function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      className="fixed bottom-4 left-1/2 z-50 flex flex-col-reverse items-center gap-2"
+      style={{ transform: 'translateX(-50%)' }}
+    >
+      {toasts.map((t) => (
+        <ToastItem key={t.id} toast={t} onDismiss={onDismiss} />
+      ))}
+    </div>
+  );
+}
+
+// ==================== Provider ====================
+
+let toastIdCounter = 0;
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback(
+    (message: string, type: ToastType = 'info', duration: number = 3000) => {
+      const id = `toast_${++toastIdCounter}`;
+      setToasts((prev) => [...prev, { id, message, type, duration }]);
+    },
+    []
+  );
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <ToastContainer toasts={toasts} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  );
+}

package/lib/builtin-plugins.ts

@@ -0,0 +1,11 @@
+// lib/builtin-plugins.ts - 内置插件定义（当前无内置插件）
+
+import { PluginManifest } from './plugin-types';
+
+/** 所有内置插件定义 */
+export const builtinPlugins: PluginManifest[] = [];
+
+/** 安装内置插件到数据库 */
+export async function installBuiltinPlugins(): Promise<void> {
+  // 无内置插件
+}