@chatbi-v/cli 1.0.7 → 1.0.9

package/dist/app/src/features/settings/PluginList.tsx.hbs

@@ -0,0 +1,115 @@
+import { SettingOutlined } from '@ant-design/icons';
+import { Plugin,pluginManager } from '@chatbi-v/core';
+import { Button, Empty, InputNumber, Switch, Tabs, Tag, Tooltip } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+
+interface PluginListProps {
+  plugins: Plugin[];
+  onToggle: (id: string, enabled: boolean) => void;
+  onOrderChange: (id: string, order: number) => void;
+  onGoToSettings: (plugin: Plugin) => void;
+}
+
+export const PluginList: React.FC<PluginListProps> = ({
+  plugins,
+  onToggle,
+  onOrderChange,
+  onGoToSettings,
+}) => {
+  
+  const renderPluginItem = useCallback((plugin: Plugin) => {
+    const state = pluginManager.getPluginState(plugin.id);
+    const hasSettings = pluginManager.getUnifiedCapabilities(plugin.id).configurable;
+
+    return (
+      <div
+        key={plugin.id}
+        className="rounded-lg px-4 py-3 shadow-sm flex items-center justify-between border transition-colors duration-200"
+        style={{
+          backgroundColor: 'rgb(var(--color-surface))',
+          borderColor: 'rgb(var(--color-border))',
+        }}
+      >
+        <div className="flex-1">
+          <div className="flex items-center gap-2 mb-1">
+            <span 
+              className="font-medium"
+              style={{ color: 'rgb(var(--color-text-main))' }}
+            >
+              {plugin.metadata.name}
+            </span>
+            <Tag color={plugin.metadata.type === 'business' ? 'blue' : 'green'}>{plugin.metadata.type}</Tag>
+          </div>
+          <div>
+            <div className="text-xs mb-1 font-mono" style={{ color: 'rgb(var(--color-text-muted))' }}>{plugin.id}</div>
+            <div className="text-sm" style={{ color: 'rgb(var(--color-text-muted))' }}>
+              {plugin.metadata.description || '暂无描述'}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4 ml-4">
+          {hasSettings && (
+             <Tooltip title="插件设置">
+               <Button 
+                 type="text" 
+                 icon={<SettingOutlined style={{ color: 'rgb(var(--color-text-muted))' }} />} 
+                 onClick={() => onGoToSettings(plugin)}
+               />
+             </Tooltip>
+          )}
+          <div className="flex items-center gap-2">
+            <span className="text-sm" style={{ color: 'rgb(var(--color-text-muted))' }}>排序:</span>
+            <InputNumber
+              size="small"
+              className="w-16"
+              value={state.order}
+              onChange={(val) => onOrderChange(plugin.id, val || 0)}
+            />
+          </div>
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="禁用"
+            checked={state.enabled}
+            onChange={(checked) => onToggle(plugin.id, checked)}
+          />
+        </div>
+      </div>
+    );
+  }, [onGoToSettings, onOrderChange, onToggle]);
+
+  const items = useMemo(() => {
+    const typeMap = {
+      all: '全部',
+      business: '业务插件',
+      renderer: '渲染插件',
+      theme: '主题插件',
+      functional: '功能插件',
+      view: '视图插件',
+    };
+
+    const categories = ['all', 'business', 'renderer', 'theme', 'functional', 'view'];
+
+    return categories.map(key => {
+       const filteredPlugins = key === 'all' 
+         ? plugins 
+         : plugins.filter(p => p.metadata.type === key);
+       
+       return {
+         key,
+         label: typeMap[key as keyof typeof typeMap],
+         children: filteredPlugins.length > 0 ? (
+           <div className="flex flex-col gap-3 pt-2">
+             {filteredPlugins.map(renderPluginItem)}
+           </div>
+         ) : (
+           <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无该类型插件" className="my-8" />
+         )
+       };
+    });
+  }, [plugins, renderPluginItem]);
+
+  return (
+    <Tabs defaultActiveKey="all" items={items} />
+  );
+};

package/dist/app/src/features/settings/PluginSettings.tsx.hbs

@@ -0,0 +1,123 @@
+import { AppstoreOutlined, DownloadOutlined, SettingOutlined } from '@ant-design/icons';
+import { Plugin, pluginManager } from '@chatbi-v/core';
+import type { MenuProps } from 'antd';
+import { Button, Card,Layout, Menu, Switch } from 'antd';
+import React, { useMemo, useState } from 'react';
+
+import { usePluginSettings } from '../../hooks/usePluginSettings';
+import { exportSystemConfig } from '../../services/config-service';
+import { useUIStore } from '../../stores/useUIStore';
+import { ExtensionSettings } from './ExtensionSettings';
+import { PluginList } from './PluginList';
+
+const { Sider, Content } = Layout;
+
+export const PluginSettings: React.FC = () => {
+  const { plugins, togglePlugin, setPluginOrder } = usePluginSettings();
+  const [selectedKey, setSelectedKey] = useState('manager');
+
+  const handleToggle = (id: string, enabled: boolean) => {
+    togglePlugin(id, enabled);
+  };
+
+  const handleOrderChange = (id: string, order: number) => {
+    setPluginOrder(id, order);
+  };
+  
+  const handleGoToSettings = (plugin: Plugin) => {
+    setSelectedKey(plugin.id);
+  };
+
+  const handleExportConfig = () => {
+    exportSystemConfig();
+  };
+
+  const menuItems: MenuProps['items'] = useMemo(() => {
+    const items: MenuProps['items'] = [
+      { key: 'manager', label: '插件管理', icon: <AppstoreOutlined /> },
+      { type: 'divider' },
+      { 
+        key: 'group-settings', 
+        label: '插件配置', 
+        type: 'group', 
+        children: plugins
+          .filter(p => pluginManager.getUnifiedCapabilities(p.id).configurable)
+          .map(p => ({ 
+            key: p.id, 
+            label: p.metadata.name,
+            icon: <SettingOutlined />
+          })) 
+      }
+    ];
+    return items;
+  }, [plugins]);
+
+  const renderContent = () => {
+    if (selectedKey === 'manager') {
+      return (
+        <div className="h-full flex flex-col">
+          <div className="flex justify-between items-center mb-6">
+             <div>
+                <h2 className="text-xl font-medium mb-1" style={{ color: 'rgb(var(--color-text-main))' }}>插件管理</h2>
+                <p className="text-sm" style={{ color: 'rgb(var(--color-text-muted))' }}>管理系统中安装的所有插件及其状态</p>
+             </div>
+             <Button icon={<DownloadOutlined />} onClick={handleExportConfig}>导出配置</Button>
+          </div>
+          <div className="flex-1 overflow-auto">
+            <PluginList
+              plugins={plugins}
+              onToggle={handleToggle}
+              onOrderChange={handleOrderChange}
+              onGoToSettings={handleGoToSettings}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    const selectedPlugin = plugins.find(p => p.id === selectedKey);
+    if (selectedPlugin) {
+      return (
+          <div className="h-full overflow-auto">
+             <ExtensionSettings plugin={selectedPlugin} />
+          </div>
+      );
+    }
+    
+    return null;
+  };
+
+  return (
+    <Layout className="h-full bg-transparent">
+      <Sider 
+        width={240} 
+        theme="light" 
+        className="border-r h-full"
+        style={{
+           backgroundColor: 'rgb(var(--color-surface))',
+           borderColor: 'rgb(var(--color-border))',
+        }}
+      >
+         <div className="overflow-auto h-full py-2">
+            <Menu
+              mode="inline"
+              selectedKeys={[selectedKey]}
+              onClick={(e) => setSelectedKey(e.key)}
+              items={menuItems}
+              style={{ 
+                  backgroundColor: 'transparent', 
+                  borderRight: 'none',
+                  color: 'rgb(var(--color-text-main))'
+              }}
+            />
+         </div>
+      </Sider>
+      <Content 
+        className="h-full p-4 overflow-hidden"
+        style={{ backgroundColor: 'rgb(var(--color-surface))' }}
+      >
+        {renderContent()}
+      </Content>
+    </Layout>
+  );
+};

package/dist/app/src/features/settings/SchemaSettingsRenderer.tsx.hbs

@@ -0,0 +1,56 @@
+import { Plugin } from '@chatbi-v/core';
+import { pluginManager } from '@chatbi-v/core';
+import { Form } from 'antd';
+import React, { useEffect, useMemo } from 'react';
+
+import { configStrategyFactory } from './ConfigRenderStrategy';
+
+export const SchemaSettingsRenderer: React.FC<{ plugin: Plugin }> = ({ plugin }) => {
+  const [form] = Form.useForm();
+  const configSchema = useMemo(() => plugin.metadata.configuration || [], [plugin.metadata.configuration]);
+
+  useEffect(() => {
+    // Load config
+    const values: Record<string, any> = {};
+    const storage = pluginManager.getStorageManager().getContextStorage(plugin.id);
+
+    configSchema.forEach(item => {
+      // 优先从 StorageManager 获取 (自动处理 JSON 解析)
+      const stored = storage.get(item.key);
+      
+      if (stored !== null) {
+        // 如果存储的是原始字符串 (旧数据兼容)，可能需要类型转换
+        // 但 StorageManager.get 已经尝试 JSON.parse
+        // 这里做简单的类型校验兜底
+        if (item.type === 'boolean' && typeof stored === 'string') {
+             values[item.key] = stored === 'true';
+        } else if (item.type === 'number' && typeof stored === 'string') {
+             values[item.key] = Number(stored);
+        } else {
+             values[item.key] = stored;
+        }
+      } else {
+        values[item.key] = item.default;
+      }
+    });
+    form.setFieldsValue(values);
+  }, [plugin, configSchema, form]);
+
+  const handleValuesChange = (changedValues: any) => {
+    Object.entries(changedValues).forEach(([key, value]) => {
+      pluginManager.updatePluginConfig(plugin.id, key, value);
+    });
+  };
+
+  if (configSchema.length === 0) return null;
+
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      onValuesChange={handleValuesChange}
+    >
+      {configSchema.map(item => configStrategyFactory.render(item))}
+    </Form>
+  );
+};

package/dist/app/src/hooks/useAppRoutes.ts.hbs

@@ -0,0 +1,39 @@
+import { pluginManager, RouteConfig } from '@chatbi-v/core';
+import { useEffect, useMemo, useState } from 'react';
+
+export const useAppRoutes = () => {
+  // 使用 State 管理路由，以便在插件加载完成后触发更新
+  const [routes, setRoutes] = useState<RouteConfig[]>(() => pluginManager.getRoutes());
+
+  useEffect(() => {
+    // 2. 订阅插件状态变更 (加载/启用/禁用)
+    const unsubscribe = pluginManager.subscribe(() => {
+      const updatedRoutes = pluginManager.getRoutes();
+      setRoutes(updatedRoutes);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  // 计算默认路由
+  // 策略：
+  // 1. 查找是否有显式标记为默认的路由
+  // 2. 回退到第一个可用路由
+  const defaultRoute = useMemo(() => {
+    if (routes.length === 0) return null;
+
+    // 优先尝试标记为 default 的路由
+    const markedDefault = routes.find(r => (r as any).meta?.default);
+    if (markedDefault) return markedDefault.path;
+
+    // 回退到第一个
+    return routes[0].path;
+  }, [routes]);
+
+  return {
+    routes,
+    defaultRoute
+  };
+};

package/dist/app/src/hooks/usePluginLoader.ts.hbs

@@ -0,0 +1,22 @@
+import { usePluginLoader as useCorePluginLoader } from '@chatbi-v/core';
+import { useMemo } from 'react';
+
+import { chatbiConfig } from '../../chatbi.config';
+import { api } from '../services/api';
+
+/**
+ * 应用级插件加载 Hook
+ * @description 封装核心库的 usePluginLoader，并注入应用特定的配置和服务
+ */
+export const usePluginLoader = () => {
+  // 注入应用级配置和服务
+  const options = useMemo(() => ({
+    discoveryRules: chatbiConfig.system.discoveryRules,
+    pluginConfigs: chatbiConfig.plugins,
+    sharedContext: { api },
+    // 预注册内置插件 (可选，目前已通过 AutoLoader 自动发现)
+    registry: {}
+  }), []);
+
+  return useCorePluginLoader(options);
+};

package/dist/app/src/hooks/usePluginSettings.ts.hbs

@@ -0,0 +1,29 @@
+import { pluginManager } from '@chatbi-v/core';
+import { Plugin } from '@chatbi-v/core';
+import { useMemo, useState } from 'react';
+
+export const usePluginSettings = () => {
+  // Local state to trigger re-renders when plugin state changes
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const plugins = useMemo(() => {
+    return pluginManager.getPlugins();
+  }, [refreshKey]);
+
+  const togglePlugin = (id: string, enabled: boolean) => {
+    pluginManager.togglePlugin(id, enabled);
+    setRefreshKey((prev) => prev + 1);
+  };
+
+  const setPluginOrder = (id: string, order: number) => {
+    pluginManager.setPluginOrder(id, order);
+    setRefreshKey((prev) => prev + 1);
+  };
+
+  return {
+    plugins,
+    togglePlugin,
+    setPluginOrder,
+    refreshKey
+  };
+};

package/dist/app/src/hooks/useThemeSync.ts.hbs

@@ -0,0 +1,108 @@
+import { pluginManager, configManager } from '@chatbi-v/core';
+import { themes } from '@chatbi-v/plugin-theme-manager';
+import { theme } from 'antd';
+import { useEffect, useMemo } from 'react';
+
+import { useUIStore } from '../stores/useUIStore';
+
+/**
+ * 主题同步 Hook
+ * @description 负责监听主题配置变更，同步 Ant Design 和 Tailwind 主题状态
+ */
+export const useThemeSync = () => {
+  const {
+    currentThemeId,
+    setThemeId,
+    themeMode,
+    setThemeMode,
+  } = useUIStore();
+
+  // 1. 初始同步：从 configManager 获取当前生效的配置
+  useEffect(() => {
+    // 直接从导出的 configManager 获取
+    const config = configManager.get('theme-manager');
+    if (config?.theme) {
+      const themeId = config.theme;
+      setThemeId(themeId);
+      
+      const themeDef = themes.find((t) => t.id === themeId);
+      const isLight = themeDef ? themeDef.type === 'light' : themeId === 'light';
+      setThemeMode(isLight ? 'light' : 'dark');
+    }
+  }, [setThemeId, setThemeMode]);
+
+  // 2. 监听配置变更事件 (来自 settings 面板或 ThemeToggle)
+  useEffect(() => {
+    const handleConfigChange = (data: { pluginId: string, key: string, value: any }) => {
+      const { pluginId, key, value } = data;
+      // 这里的 pluginId 必须与 ThemePlugin.id 一致 ('theme-manager')
+      if (pluginId === 'theme-manager' && key === 'theme') {
+        const themeId = value;
+        setThemeId(themeId);
+        
+        const themeDef = themes.find((t) => t.id === themeId);
+        const isLight = themeDef ? themeDef.type === 'light' : themeId === 'light';
+        setThemeMode(isLight ? 'light' : 'dark');
+      }
+    };
+
+    const unsubscribe = pluginManager.eventBus.on('config:changed', handleConfigChange);
+    return () => {
+      unsubscribe();
+    };
+  }, [setThemeId, setThemeMode]);
+
+  // 3. 同步 Tailwind Dark Mode 类名
+  useEffect(() => {
+    if (themeMode === 'dark') {
+      document.documentElement.classList.add('dark');
+      document.documentElement.removeAttribute('data-theme');
+    } else {
+      document.documentElement.classList.remove('dark');
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
+  }, [themeMode]);
+
+  // 计算 Ant Design 主题配置
+  const antdThemeConfig = useMemo(() => {
+    const currentThemeDef = themes.find((t) => t.id === currentThemeId);
+    const primaryColor = currentThemeDef
+      ? `rgb(${currentThemeDef.colors['--color-primary'].replace(/ /g, ',')})`
+      : '#6366f1';
+
+    return {
+      primaryColor,
+      algorithm: themeMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      token: {
+        colorPrimary: primaryColor,
+        colorBorder: themeMode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
+      },
+      components: {
+        Button: {
+          colorPrimary: primaryColor,
+          algorithm: true,
+        },
+        Modal: {
+          contentBg: 'rgb(var(--color-surface))',
+          headerBg: 'rgb(var(--color-surface))',
+        },
+        Input: {
+          colorBgContainer: 'rgba(var(--color-surface), 0.5)',
+        },
+        InputNumber: {
+          colorBgContainer: 'rgba(var(--color-surface), 0.5)',
+        },
+        TextArea: {
+          colorBgContainer: 'rgba(var(--color-surface), 0.5)',
+        },
+        Select: {
+          colorBgContainer: 'rgba(var(--color-surface), 0.5)',
+          selectorBg: 'rgba(var(--color-surface), 0.5)',
+          optionSelectedBg: 'rgba(var(--color-primary), 0.2)',
+        },
+      },
+    };
+  }, [currentThemeId, themeMode]);
+
+  return antdThemeConfig;
+};

package/dist/app/src/index.css.hbs

@@ -0,0 +1,45 @@
+@import 'antd/dist/reset.css';
+@import './custom-antd.less'; /* 注入变量 */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Default Dark Theme (Slate/Indigo) */
+    --color-background: 15 23 42; /* slate-900 #0f172a */
+    --color-surface: 30 41 59; /* slate-800 #1e293b */
+    --color-primary: 99 102 241; /* indigo-500 #6366f1 */
+    --color-secondary: 168 85 247; /* purple-500 #a855f7 */
+    --color-accent: 34 211 238; /* cyan-400 #22d3ee */
+    --color-text-main: 226 232 240; /* slate-200 */
+    --color-text-muted: 148 163 184; /* slate-400 */
+    --color-border: 51 65 85; /* slate-700 */
+
+    /* Layout Variables Default (Compact) */
+    --layout-sidebar-width: 240px;
+    --layout-content-padding: 16px;
+    --layout-gap: 8px;
+    --layout-font-scale: 1;
+  }
+
+  [data-theme='light'] {
+    /* Light Theme */
+    --color-background: 248 250 252; /* slate-50 */
+    --color-surface: 255 255 255; /* white */
+    --color-primary: 79 70 229; /* indigo-600 */
+    --color-secondary: 147 51 234; /* purple-600 */
+    --color-accent: 6 182 212; /* cyan-500 */
+    --color-text-main: 15 23 42; /* slate-900 */
+    --color-text-muted: 100 116 139; /* slate-500 */
+    --color-border: 226 232 240; /* slate-200 */
+  }
+
+  body {
+    @apply bg-background text-text-main overflow-hidden antialiased;
+  }
+}
+
+@layer utilities {
+}

package/dist/app/src/layouts/BackgroundEffects.tsx.hbs

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const BackgroundEffects: React.FC = () => {
+  return (
+    <div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
+      <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-primary/10 rounded-full blur-[120px]" />
+      <div className="absolute bottom-[-20%] right-[-10%] w-[40%] h-[40%] bg-secondary/10 rounded-full blur-[100px]" />
+    </div>
+  );
+};

package/dist/app/src/layouts/MainContent.tsx.hbs

@@ -0,0 +1,58 @@
+import { PluginSlot, Slot, StatusBarItemSkeleton } from '@chatbi-v/core';
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import { ContentSkeleton } from '../components/LayoutSkeletons';
+import { useAppRoutes } from '../hooks/useAppRoutes';
+
+interface MainContentProps {
+  pluginsLoaded: boolean;
+  sharedProps: any;
+}
+
+export const MainContent: React.FC<MainContentProps> = React.memo(({
+  pluginsLoaded,
+  sharedProps,
+}) => {
+  const { routes, defaultRoute } = useAppRoutes();
+
+  return (
+    <main className="flex-1 flex flex-col relative z-10 overflow-hidden bg-white/50 dark:bg-black/20 backdrop-blur-sm">
+      {!pluginsLoaded ? (
+        <ContentSkeleton />
+      ) : (
+        <>
+          <div className="flex-1 relative overflow-hidden min-h-0">
+            <Routes>
+              {routes.map((route) => (
+                <Route 
+                  key={route.path} 
+                  path={route.path} 
+                  element={<route.component {...sharedProps} />} 
+                />
+              ))}
+              
+              {/* 默认路由重定向 */}
+              {defaultRoute ? (
+                  <Route path="/" element={<Navigate to={defaultRoute} replace />} />
+              ) : (
+                  <Route path="/" element={<div className="flex h-full items-center justify-center text-slate-500">请在设置中启用至少一个业务插件</div>} />
+              )}
+
+              {/* 404 / Catch-all: 重定向到默认路由 */}
+              <Route path="*" element={
+                defaultRoute ? <Navigate to={defaultRoute} replace /> : <Navigate to="/" replace />
+              } />
+            </Routes>
+          </div>
+          
+          {/* Status Bar Slot */}
+          <div className="h-6 bg-slate-100 dark:bg-slate-900 border-t border-slate-200 dark:border-white/5 flex items-center px-2 text-xs text-slate-500 gap-4">
+            <div className="flex-1">Ready</div>
+            <PluginSlot slot={Slot.StatusBar} skeleton={<StatusBarItemSkeleton />} />
+          </div>
+        </>
+      )}
+    </main>
+  );
+});