@chatbi-v/cli 1.0.7 → 1.0.9

package/templates/app/src/features/settings/ConfigRenderStrategy.tsx.hbs

@@ -0,0 +1,119 @@
+import type { PluginConfigItem } from '@chatbi-v/core';
+import { Form,Input, InputNumber, Select, Switch } from 'antd';
+import React from 'react';
+
+/**
+ * 配置渲染策略接口
+ */
+export type ConfigRenderer = (item: PluginConfigItem) => React.ReactNode;
+
+/**
+ * 配置渲染策略工厂
+ * @description 使用策略模式管理不同类型的配置项渲染逻辑，便于扩展新的配置类型
+ */
+class ConfigStrategyFactory {
+  private strategies: Map<string, ConfigRenderer> = new Map();
+
+  constructor() {
+    this.registerDefaults();
+  }
+
+  /**
+   * 注册默认的渲染策略
+   */
+  private registerDefaults() {
+    // Boolean -> Switch
+    this.register('boolean', (item) => (
+      <Form.Item
+        key={item.key}
+        label={item.label}
+        name={item.key}
+        tooltip={item.description}
+        extra={item.description}
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+    ));
+
+    // Number -> InputNumber
+    this.register('number', (item) => (
+      <Form.Item
+        key={item.key}
+        label={item.label}
+        name={item.key}
+        tooltip={item.description}
+        extra={item.description}
+      >
+        <InputNumber min={item.min} max={item.max} className="w-full" />
+      </Form.Item>
+    ));
+
+    // Select -> Select
+    this.register('select', (item) => (
+      <Form.Item
+        key={item.key}
+        label={item.label}
+        name={item.key}
+        tooltip={item.description}
+        extra={item.description}
+      >
+        <Select options={item.options} mode={item.mode} />
+      </Form.Item>
+    ));
+
+    // String -> Input
+    this.register('string', (item) => (
+      <Form.Item
+        key={item.key}
+        label={item.label}
+        name={item.key}
+        tooltip={item.description}
+        extra={item.description}
+      >
+        <Input />
+      </Form.Item>
+    ));
+    
+    // Default fallback
+    this.register('default', (item) => (
+      <Form.Item
+        key={item.key}
+        label={item.label}
+        name={item.key}
+        tooltip={item.description}
+        extra={item.description}
+      >
+        <Input />
+      </Form.Item>
+    ));
+  }
+
+  /**
+   * 注册自定义渲染策略
+   * @param type 配置类型
+   * @param renderer 渲染函数
+   */
+  register(type: string, renderer: ConfigRenderer) {
+    this.strategies.set(type, renderer);
+  }
+
+  /**
+   * 获取渲染策略
+   * @param type 配置类型
+   */
+  getRenderer(type: string): ConfigRenderer {
+    return this.strategies.get(type) || this.strategies.get('default')!;
+  }
+  
+  /**
+   * 渲染配置项
+   * @param item 配置定义
+   */
+  render(item: PluginConfigItem): React.ReactNode {
+      const renderer = this.getRenderer(item.type);
+      return renderer(item);
+  }
+}
+
+export const configStrategyFactory = new ConfigStrategyFactory();

package/templates/app/src/features/settings/ExtensionSettings.tsx.hbs

@@ -0,0 +1,52 @@
+import { Plugin, PluginExtension, Slot } from '@chatbi-v/core';
+import { Card, Divider, Empty } from 'antd';
+import React from 'react';
+
+import { SchemaSettingsRenderer } from './SchemaSettingsRenderer';
+
+interface ExtensionSettingsProps {
+  plugin: Plugin;
+}
+
+export const ExtensionSettings: React.FC<ExtensionSettingsProps> = ({ plugin }) => {
+  const settingsExt = plugin.metadata.extensions?.find(e => e.slot === Slot.Settings);
+  const hasSchema = plugin.metadata.configuration && plugin.metadata.configuration.length > 0;
+  
+  if (!settingsExt && !hasSchema) {
+    return (
+        <div className="h-full flex flex-col items-center justify-center">
+             <Empty description={<span style={{ color: 'rgb(var(--color-text-muted))' }}>该插件暂无配置项</span>} />
+        </div>
+    );
+  }
+
+  const title = settingsExt?.meta?.label || `${plugin.metadata.name} 配置`;
+
+  return (
+    <div className="max-w-3xl mx-auto">
+        <div className="mb-6">
+            <h2 className="text-xl font-medium mb-1" style={{ color: 'rgb(var(--color-text-main))' }}>{title}</h2>
+            <p className="text-sm" style={{ color: 'rgb(var(--color-text-muted))' }}>
+                {plugin.metadata.description}
+            </p>
+        </div>
+
+        <div 
+            className="rounded-lg p-6 border transition-colors duration-200"
+            style={{
+                backgroundColor: 'rgb(var(--color-surface))',
+                borderColor: 'rgb(var(--color-border))',
+            }}
+        >
+            {/* 1. Custom Component Settings */}
+            {settingsExt && <settingsExt.component />}
+            
+            {/* Divider if both exist */}
+            {settingsExt && hasSchema && <Divider style={{ borderColor: 'rgb(var(--color-border))', margin: '24px 0' }} />}
+
+            {/* 2. Schema Settings */}
+            {hasSchema && <SchemaSettingsRenderer plugin={plugin} />}
+        </div>
+    </div>
+  );
+};

package/templates/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/templates/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/templates/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/templates/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/templates/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/templates/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/templates/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;
+};