@chatbi-v/cli 1.0.7 → 1.0.9

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

@@ -0,0 +1,182 @@
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  SettingOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+import { AvatarSkeleton,type PluginExtension, pluginManager, PluginSlot, SidebarIconSkeleton, Slot } from '@chatbi-v/core';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { chatbiConfig } from '../../chatbi.config';
+import { NavSkeleton } from '../components/LayoutSkeletons';
+import { useUIStore } from '../stores/useUIStore';
+
+// 导航图标组件
+export const NavIcon = React.memo(({
+  icon,
+  active,
+  onClick,
+  title,
+  label,
+  expanded,
+}: {
+  icon: React.ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+  title?: string;
+  label?: string;
+  expanded?: boolean;
+}) => (
+  <div
+    onClick={onClick}
+    title={title}
+    className={`flex items-center cursor-pointer transition-all duration-300 relative group
+      ${expanded ? 'w-full' : 'w-12'} px-3 h-11 rounded-xl
+      ${
+      active
+        ? 'bg-primary/15 text-primary font-semibold shadow-sm ring-1 ring-primary/20 dark:bg-primary/20'
+        : 'text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white hover:scale-105 active:scale-95'
+    }`}
+  >
+    <div className="w-6 h-6 flex items-center justify-center shrink-0">
+       <div className={`text-xl transition-transform duration-300 ${!expanded && active ? 'scale-110' : ''}`}>{icon}</div>
+    </div>
+    
+    <div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${
+      expanded ? 'w-auto opacity-100 ml-3' : 'w-0 opacity-0 ml-0'
+    }`}>
+      <span className="text-sm block">
+        {label}
+      </span>
+    </div>
+
+  </div>
+));
+
+interface SidebarNavProps {
+  activeTab: string;
+  pluginsLoaded: boolean;
+}
+
+export const SidebarNav: React.FC<SidebarNavProps> = React.memo(({
+  activeTab,
+  pluginsLoaded,
+}) => {
+  const navigate = useNavigate();
+  const { 
+    collapsed, setCollapsed, 
+    setIsSettingsOpen, isMaximized 
+  } = useUIStore();
+
+  const renderSidebarBottomItem = React.useCallback(({ key, extension }: { key: string, extension: PluginExtension }) => {
+    const Component = extension.component;
+    return (
+      <Component key={key} collapsed={collapsed} />
+    );
+  }, [collapsed]);
+
+  const renderSidebarSystemItem = React.useCallback(({ key, extension }: { key: string, extension: PluginExtension }) => {
+    const Component = extension.component;
+    return (
+        <div key={key} className={`flex items-center gap-3 transition-all duration-300 relative group
+            ${collapsed ? 'w-12 justify-center' : 'w-full px-4'} rounded-xl`}
+        >
+              {Component ? <Component collapsed={collapsed} /> : null}
+        </div>
+    );
+  }, [collapsed]);
+
+  return (
+    <nav className={`relative z-20 flex flex-col items-center py-4 gap-[var(--layout-gap)] transition-all duration-500 ease-[cubic-bezier(0.2,0,0,1)] 
+      border-r border-slate-200/60 dark:border-white/10 backdrop-blur-xl bg-white/80 dark:bg-slate-900/80
+      ${isMaximized ? 'w-0 overflow-hidden opacity-0 p-0 border-none' : (collapsed ? 'w-[72px]' : 'w-[var(--layout-sidebar-width)]')}
+      h-screen
+    `}>
+      {!pluginsLoaded ? (
+        <NavSkeleton />
+      ) : (
+        <>
+          {/* 品牌标识 */}
+          <div className={`flex items-center gap-3 mb-6 transition-all duration-300 ${!collapsed ? 'w-full px-5' : 'justify-center'}`}>
+            <div className="w-12 h-12 rounded-2xl bg-gradient-to-tr from-primary to-secondary flex items-center justify-center shadow-lg shadow-primary/20 shrink-0 group cursor-pointer hover:scale-105 transition-transform duration-300">
+              <ThunderboltOutlined className="text-2xl text-white" />
+            </div>
+            {!collapsed && (
+              <div className="flex flex-col animate-in fade-in slide-in-from-left-4 duration-500">
+                <span className="font-bold text-xl leading-tight tracking-tight text-slate-800 dark:text-slate-100">{chatbiConfig.system.title}</span>
+              </div>
+            )}
+          </div>
+
+          {/* 导航项 */}
+          <div className="flex-1 w-full flex flex-col gap-[var(--layout-gap)] overflow-y-auto no-scrollbar items-center transition-all duration-300 px-3 pt-2">
+            <PluginSlot 
+              slot={Slot.Sidebar} 
+              className="flex flex-col gap-[var(--layout-gap)] w-full items-center"
+              skeleton={
+                <div className="flex flex-col gap-[var(--layout-gap)] w-full items-center">
+                   {[1, 2, 3].map(i => <SidebarIconSkeleton key={i} />)}
+                </div>
+              }
+              renderItem={({ key, extension }: { key: string, extension: PluginExtension }) => (
+                <NavIcon
+                  key={key}
+                  icon={extension.meta?.icon}
+                  label={extension.meta?.label}
+                  active={
+                    // Support multi-level route matching
+                    // e.g., activeTab='scene/10/tables' should match path='/scene'
+                    // Remove leading slash for consistency
+                    activeTab === (extension.meta?.path || extension.meta?.key)?.replace(/^\//, '') ||
+                    activeTab.startsWith(((extension.meta?.path || extension.meta?.key)?.replace(/^\//, '') || '') + '/')
+                  }
+                  onClick={() => navigate(extension.meta?.path || '/')}
+                  expanded={!collapsed}
+                />
+              )}
+            />
+          </div>
+
+          {/* 底部操作区 */}
+          <div className="w-full flex flex-col gap-[var(--layout-gap)] mt-auto mb-2 items-center transition-all duration-300 px-3">
+            <PluginSlot
+              slot={Slot.SidebarBottom}
+              className="w-full flex flex-col gap-[var(--layout-gap)]"
+              skeleton={<SidebarIconSkeleton />}
+              renderItem={renderSidebarBottomItem}
+            />
+            <NavIcon
+              icon={<SettingOutlined />}
+              onClick={() => setIsSettingsOpen(true)}
+              title="系统设置"
+              label="设置"
+              expanded={!collapsed}
+            />
+            
+            <div className={`h-px bg-slate-200 dark:bg-white/10 my-2 transition-all duration-300 ${collapsed ? 'w-8' : 'w-full'}`} />
+            
+            <PluginSlot
+                slot={Slot.SidebarSystem}
+                className={`w-full transition-all duration-300 ${collapsed ? 'flex justify-center' : ''}`}
+                skeleton={
+                   <div className={`flex items-center gap-3 transition-all duration-300 ${collapsed ? 'w-12 justify-center' : 'w-full px-4'}`}>
+                      <AvatarSkeleton />
+                   </div>
+                }
+                renderItem={renderSidebarSystemItem}
+            />
+            
+            <NavIcon  
+              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} 
+              onClick={() => setCollapsed(!collapsed)} 
+              title={collapsed ? "展开侧边栏" : "折叠侧边栏"} 
+              label={collapsed ? "展开" : "折叠"}
+              expanded={!collapsed}
+            />
+          </div>
+        </>
+      )}
+    </nav>
+  );
+});

package/dist/app/src/main.tsx.hbs

@@ -0,0 +1,43 @@
+import 'antd/dist/reset.css'
+import './index.css'
+
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { HashRouter } from 'react-router-dom'
+
+import App from './App'
+import { GlobalErrorBoundary } from './components'
+import { api } from './services/api'
+
+// 挂载全局 API 实例供插件使用
+// 插件可以通过 window.chatbi.api 访问核心请求实例
+declare global {
+  interface Window {
+    chatbi: {
+      api: typeof api;
+    };
+  }
+}
+
+window.chatbi = {
+  api
+};
+
+// API Mock 策略说明：
+// Mock 逻辑已移至 services/api/index.ts 中统一处理
+// 开启方式：
+// 1. URL 参数: ?mock=true (优先级最高)
+// 2. 环境变量: VITE_USE_MOCK=true (在 .env.development 中配置)
+
+// 应用启动
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    {/* 全局错误边界，捕获渲染过程中的未处理异常 */}
+    <GlobalErrorBoundary>
+        {/* 路由模式：默认使用 HashRouter，如果需要 history 模式请改为 BrowserRouter */}
+        <HashRouter>
+          <App />
+        </HashRouter>
+      </GlobalErrorBoundary>
+  </React.StrictMode>,
+)

package/dist/app/src/providers/AppProviders.tsx.hbs

@@ -0,0 +1,36 @@
+import { XProvider } from '@ant-design/x';
+import { ApiProvider, pluginManager, PluginProvider } from '@chatbi-v/core';
+import { App as AntdApp, ConfigProvider } from 'antd';
+import React, { ReactNode } from 'react';
+
+import { useThemeSync } from '../hooks/useThemeSync';
+import { api } from '../services/api';
+
+interface AppProvidersProps {
+  children: ReactNode;
+}
+
+/**
+ * 应用全局 Providers
+ * @description 封装所有全局 Context Provider，包括 API, Plugin, Theme, Antd 等
+ * @note 使用 reduceRight 组合 Provider，避免嵌套地狱 (Provider Hell)
+ */
+export const AppProviders: React.FC<AppProvidersProps> = ({ children }) => {
+  const themeConfig = useThemeSync();
+
+  // 定义 Provider 列表，顺序从外到内
+  const providers: Array<[React.ComponentType<any>, Record<string, any>]> = [
+    // 核心服务
+    [ApiProvider, { api }],
+    [PluginProvider, { manager: pluginManager }],
+    // UI 主题配置
+    [ConfigProvider, { theme: themeConfig }],
+    [AntdApp, {}],
+    [XProvider, { theme: themeConfig }],
+  ];
+
+  // 使用 reduceRight 从内向外包裹 children
+  return providers.reduceRight((acc, [Provider, props]) => {
+    return <Provider {...props}>{acc}</Provider>;
+  }, children);
+};

package/dist/app/src/services/api/index.ts.hbs

@@ -0,0 +1,37 @@
+import { ApiEngine, AxiosAdapter, createLogger, isMockMode } from '@chatbi-v/core';
+import { MockAdapter } from '@chatbi-v/mocks';
+
+const logger = createLogger('Api');
+
+// 从环境变量获取配置
+const baseURL = import.meta.env.VITE_API_BASE_URL || '/api';
+const timeout = Number(import.meta.env.VITE_API_TIMEOUT) || 10000;
+
+// 统一 Mock 模式决策
+const useMock = isMockMode();
+
+if (useMock) {
+  logger.info(`⚠️ Mock 模式已启用 (基于核心库 isMockMode 判断)`);
+} else {
+  logger.debug(`正在以真实模式运行`);
+}
+
+// 创建适配器 (根据 Mock 模式切换)
+const adapter = useMock 
+  ? new MockAdapter(100) // 100ms 延迟模拟
+  : new AxiosAdapter(baseURL, timeout);
+
+// 创建 API 引擎实例
+export const api = new ApiEngine(adapter);
+
+// 自动加载 ./modules 下的所有配置文件
+// 使用 Vite 的 import.meta.glob 功能
+const modules = import.meta.glob('./modules/*.ts', { eager: true });
+
+Object.entries(modules).forEach(([path, module]: [string, any]) => {
+  // 从路径中提取模块名 (e.g., './modules/auth.ts' -> 'auth')
+  const name = path.match(/\.\/modules\/(.*)\.ts$/)?.[1];
+  if (name && module.default) {
+    api.register({ [name]: module.default });
+  }
+});

package/dist/app/src/services/api/modules/auth.ts.hbs

@@ -0,0 +1,18 @@
+export default {
+  login: {
+    url: '/auth/login',
+    method: 'POST',
+    desc: '用户登录',
+    mock: true,
+    mockData: {
+      code: 0,
+      message: 'success',
+      data: { token: 'mock-token-123', user: { id: 1, name: 'Admin' } },
+    },
+  },
+  logout: {
+    url: '/auth/logout',
+    method: 'POST',
+    desc: '用户登出',
+  },
+};

package/dist/app/src/services/config-service.ts.hbs

@@ -0,0 +1,48 @@
+import { pluginManager, dateUtils } from '@chatbi-v/core';
+
+export const exportSystemConfig = () => {
+  const exportData: Record<string, any> = {
+    pluginStates: {},
+    configs: {},
+    timestamp: dateUtils.dayjs().toISOString(),
+    environment: {
+      userAgent: navigator.userAgent,
+      language: navigator.language,
+    },
+  };
+
+  // 1. Export Plugin States
+  const allPlugins = pluginManager.getPlugins();
+  allPlugins.forEach((p) => {
+    exportData.pluginStates[p.id] = pluginManager.getPluginState(p.id);
+  });
+
+  // 2. Export Configs (scan localStorage for plugin related keys)
+  // We look for keys starting with 'plugin:' and global config keys
+  const globalKeys = ['chatbi-theme', 'chatbi-layout'];
+  
+  // Global configs
+  globalKeys.forEach(key => {
+      const val = localStorage.getItem(key);
+      if (val) exportData.configs[key] = val;
+  });
+
+  // Plugin specific configs and System configs
+  for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && (key.startsWith('plugin:') || key.startsWith('system:'))) {
+          exportData.configs[key] = localStorage.getItem(key);
+      }
+  }
+
+  // Create and download file
+  const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `chatbi-config-${dateUtils.formatDate()}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};

package/dist/app/src/stores/storage-adapter.ts.hbs

@@ -0,0 +1,29 @@
+import { pluginManager } from '@chatbi-v/core';
+import { StateStorage } from 'zustand/middleware';
+
+export const createZustandStorage = (scope: 'system' | 'shared' = 'system'): StateStorage => {
+  return {
+    getItem: (name: string): string | null => {
+      // Lazy access to ensure pluginManager is ready (though it's a singleton)
+      const storageManager = pluginManager.getStorageManager();
+      const storage = scope === 'system' 
+        ? storageManager.getSystemStorage()
+        : storageManager.getSharedStorage();
+      return storage.getItem(name);
+    },
+    setItem: (name: string, value: string): void => {
+      const storageManager = pluginManager.getStorageManager();
+      const storage = scope === 'system' 
+        ? storageManager.getSystemStorage()
+        : storageManager.getSharedStorage();
+      storage.setItem(name, value);
+    },
+    removeItem: (name: string): void => {
+      const storageManager = pluginManager.getStorageManager();
+      const storage = scope === 'system' 
+        ? storageManager.getSystemStorage()
+        : storageManager.getSharedStorage();
+      storage.removeItem(name);
+    },
+  };
+};

package/dist/app/src/stores/useSessionStore.ts.hbs

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { createJSONStorage,persist } from 'zustand/middleware';
+
+import { createZustandStorage } from './storage-adapter';
+
+export interface SessionState {
+  activeSession: string | null;
+  setActiveSession: (id: string | null) => void;
+}
+
+export const useSessionStore = create<SessionState>()(
+  persist(
+    (set) => ({
+      activeSession: null,
+      setActiveSession: (id) => set({ activeSession: id }),
+    }),
+    {
+      name: 'chatbi-session-storage',
+      storage: createJSONStorage(() => createZustandStorage('system')),
+    }
+  )
+);

package/dist/app/src/stores/useUIStore.ts.hbs

@@ -0,0 +1,64 @@
+import { create } from 'zustand';
+import { createJSONStorage,persist } from 'zustand/middleware';
+
+import { createZustandStorage } from './storage-adapter';
+
+export interface UIState {
+  collapsed: boolean;
+  toggleCollapsed: () => void;
+  setCollapsed: (v: boolean) => void;
+  
+  isRightPanelOpen: boolean;
+  toggleRightPanel: () => void;
+  setIsRightPanelOpen: (v: boolean) => void;
+  
+  isMaximized: boolean;
+  toggleMaximized: () => void;
+  setIsMaximized: (v: boolean) => void;
+  
+  isSettingsOpen: boolean;
+  setIsSettingsOpen: (v: boolean) => void;
+
+  currentThemeId: string;
+  themeMode: 'dark' | 'light';
+  setThemeId: (id: string) => void;
+  setThemeMode: (mode: 'dark' | 'light') => void;
+  toggleThemeMode: () => void;
+}
+
+export const useUIStore = create<UIState>()(
+  persist(
+    (set) => ({
+      collapsed: false,
+      toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
+      setCollapsed: (v) => set({ collapsed: v }),
+      
+      isRightPanelOpen: true,
+      toggleRightPanel: () => set((state) => ({ isRightPanelOpen: !state.isRightPanelOpen })),
+      setIsRightPanelOpen: (v) => set({ isRightPanelOpen: v }),
+      
+      isMaximized: false,
+      toggleMaximized: () => set((state) => ({ isMaximized: !state.isMaximized })),
+      setIsMaximized: (v) => set({ isMaximized: v }),
+      
+      isSettingsOpen: false,
+      setIsSettingsOpen: (v) => set({ isSettingsOpen: v }),
+
+      currentThemeId: 'default',
+      themeMode: 'dark',
+      setThemeId: (id) => set({ currentThemeId: id }),
+      setThemeMode: (mode) => set({ themeMode: mode }),
+      toggleThemeMode: () => set((state) => ({ themeMode: state.themeMode === 'light' ? 'dark' : 'light' })),
+    }),
+    {
+      name: 'chatbi-ui-storage',
+      storage: createJSONStorage(() => createZustandStorage('system')),
+      partialize: (state) => ({ 
+          currentThemeId: state.currentThemeId, 
+          themeMode: state.themeMode,
+          collapsed: state.collapsed,
+          isRightPanelOpen: state.isRightPanelOpen
+      }),
+    }
+  )
+);

package/dist/app/tailwind.config.cjs.hbs

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [
+    require('@chatbi-v/tailwind-config')
+  ],
+  darkMode: 'class',
+  content: [
+    './index.html',
+    './src/**/*.{ts,tsx}',
+    './.chatbi/core/src/**/*.{ts,tsx}',
+    './.chatbi/plugin-*/**/*.{ts,tsx}'
+  ],
+  plugins: []
+}

package/dist/app/tsconfig.json.hbs

@@ -0,0 +1,26 @@
+{
+  "extends": "{{tsconfigPath}}",
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
+    "composite": false,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": []
+}

package/dist/app/vite.config.ts.hbs

@@ -0,0 +1,89 @@
+import react from '@vitejs/plugin-react';
+import fs from 'fs';
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+/**
+ * 分包策略函数
+ * 用于将依赖打包成独立的 chunk，利用浏览器缓存优化加载性能
+ */
+function manualChunks(id: string) {
+  // 1. ChatBI 核心层
+  if (id.includes('@chatbi-v/core')) return 'chatbi-core';
+
+  // 2. 第三方依赖 (Node Modules)
+  if (id.includes('node_modules')) {
+    // React 核心 (将 React 相关包分组)
+    if (
+      /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom|scheduler)[\\/]/.test(
+        id,
+      )
+    ) {
+      return 'react-vendor';
+    }
+
+    // UI 组件库 (Ant Design)
+    if (id.includes('antd') || id.includes('@ant-design')) {
+        return 'antd-vendor';
+    }
+    
+    // 其他通用依赖
+    return 'vendor';
+  }
+}
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  
+  return {
+    base: env.VITE_APP_BASE_URL || '/',
+    
+    plugins: [
+      react(),
+      // 自动读取 tsconfig.json 中的 paths 配置，实现别名映射
+      tsconfigPaths(), 
+    ],
+    
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+      // 强制统一核心依赖实例，避免多副本导致的 Context 失效
+      dedupe: [
+        'react',
+        'react-dom',
+        'react-router',
+        'react-router-dom',
+        'antd',
+        '@ant-design/icons',
+        '@ant-design/x',
+        '@chatbi-v/core'
+      ],
+    },
+    
+    // 开发服务器配置
+    server: {
+      host: true,
+      port: 3000,
+      // 增量配置：如果需要代理后端接口，可在此配置
+      // proxy: {
+      //   '/api': {
+      //     target: 'http://localhost:8080',
+      //     changeOrigin: true,
+      //     rewrite: (path) => path.replace(/^\/api/, '')
+      //   }
+      // }
+    },
+    
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks,
+        },
+      },
+      chunkSizeWarningLimit: 1000,
+    },
+  };
+});