@chatbi-v/cli 2.0.1 → 2.0.2

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

@@ -2,13 +2,11 @@ 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';
 
@@ -32,21 +30,21 @@ export const NavIcon = React.memo(({
     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
+      ${expanded ? 'w-full px-3' : 'w-10 justify-center'} h-10 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 className="w-5 h-5 flex items-center justify-center shrink-0">
+       <div className={`text-lg 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'
+      expanded ? 'w-auto opacity-100 ml-2' : 'w-0 opacity-0 ml-0'
     }`}>
-      <span className="text-sm block">
+      <span className="text-[13px] font-medium block">
         {label}
       </span>
     </div>
@@ -66,9 +64,12 @@ export const SidebarNav: React.FC<SidebarNavProps> = React.memo(({
   const navigate = useNavigate();
   const { 
     collapsed, setCollapsed, 
-    setIsSettingsOpen, isMaximized 
+    setIsSettingsOpen, isMaximized,
+    currentLayoutId
   } = useUIStore();
 
+  const isTopLayout = currentLayoutId === 'top-bottom';
+
   const renderSidebarBottomItem = React.useCallback(({ key, extension }: { key: string, extension: PluginExtension }) => {
     const Component = extension.component;
     return (
@@ -79,8 +80,8 @@ export const SidebarNav: React.FC<SidebarNavProps> = React.memo(({
   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`}
+        <div key={key} className={`flex items-center transition-all duration-300 relative group
+            ${collapsed ? 'w-10 justify-center' : 'w-full'} rounded-xl`}
         >
               {Component ? <Component collapsed={collapsed} /> : null}
         </div>
@@ -99,12 +100,12 @@ export const SidebarNav: React.FC<SidebarNavProps> = React.memo(({
         <>
           {/* 品牌标识 */}
           <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 className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0 group cursor-pointer hover:scale-105 transition-transform duration-300">
+              <div className="w-6 h-6 bg-primary rounded-md" />
             </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>
+                <span className="font-bold text-lg leading-tight tracking-tight text-slate-800 dark:text-slate-100">{{projectTitle}}</span>
               </div>
             )}
           </div>
@@ -126,7 +127,7 @@ export const SidebarNav: React.FC<SidebarNavProps> = React.memo(({
                   label={extension.meta?.label}
                   active={
                     // Support multi-level route matching
-                    // e.g., activeTab='scene/10/tables' should match path='/scene'
+                    // e.g., activeTab='feature/10/sub' should match path='/feature'
                     // Remove leading slash for consistency
                     activeTab === (extension.meta?.path || extension.meta?.key)?.replace(/^\//, '') ||
                     activeTab.startsWith(((extension.meta?.path || extension.meta?.key)?.replace(/^\//, '') || '') + '/')

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

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

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

@@ -4,6 +4,7 @@ import { App as AntdApp, ConfigProvider } from 'antd';
 import React, { ReactNode } from 'react';
 
 import { useThemeSync } from '../hooks/useThemeSync';
+import { usePluginStateSync } from '../hooks/usePluginStateSync';
 import { api } from '../services/api';
 
 interface AppProvidersProps {
@@ -17,6 +18,7 @@ interface AppProvidersProps {
  */
 export const AppProviders: React.FC<AppProvidersProps> = ({ children }) => {
   const themeConfig = useThemeSync();
+  usePluginStateSync();
 
   // 定义 Provider 列表，顺序从外到内
   const providers: Array<[React.ComponentType<any>, Record<string, any>]> = [

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

@@ -15,7 +15,7 @@ export const useSessionStore = create<SessionState>()(
       setActiveSession: (id) => set({ activeSession: id }),
     }),
     {
-      name: 'chatbi-session-storage',
+      name: '{{projectName}}-session-storage',
       storage: createJSONStorage(() => createZustandStorage('system')),
     }
   )

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

@@ -24,6 +24,12 @@ export interface UIState {
   setThemeId: (id: string) => void;
   setThemeMode: (mode: 'dark' | 'light') => void;
   toggleThemeMode: () => void;
+
+  currentLayoutId: string;
+  setLayoutId: (id: string) => void;
+
+  /** 通用状态更新 */
+  updateState: (key: string, value: any) => void;
 }
 
 export const useUIStore = create<UIState>()(
@@ -48,16 +54,29 @@ export const useUIStore = create<UIState>()(
       themeMode: 'dark',
       setThemeId: (id) => set({ currentThemeId: id }),
       setThemeMode: (mode) => set({ themeMode: mode }),
-      toggleThemeMode: () => set((state) => ({ themeMode: state.themeMode === 'light' ? 'dark' : 'light' })),
+      toggleThemeMode: () => set((state) => ({ themeMode: state.themeMode === 'dark' ? 'light' : 'dark' })),
+
+      currentLayoutId: 'left-right',
+      setLayoutId: (id) => set({ currentLayoutId: id }),
+
+      updateState: (key, value) => set((state) => {
+        // 简单的映射逻辑，或者直接 set({ [key]: value })
+        // 为了安全起见，可以检查 key 是否存在
+        if (key in state) {
+          return { [key]: value };
+        }
+        return {};
+      }),
     }),
     {
-      name: 'chatbi-ui-storage',
+      name: '{{projectName}}-ui-storage',
       storage: createJSONStorage(() => createZustandStorage('system')),
       partialize: (state) => ({ 
           currentThemeId: state.currentThemeId, 
           themeMode: state.themeMode,
           collapsed: state.collapsed,
-          isRightPanelOpen: state.isRightPanelOpen
+          isRightPanelOpen: state.isRightPanelOpen,
+          currentLayoutId: state.currentLayoutId
       }),
     }
   )

package/templates/app/src/vite-env.d.ts.hbs

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -1,14 +1,33 @@
+const path = require('path');
+
 /** @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}'
+    path.resolve(__dirname, './index.html'),
+    path.resolve(__dirname, './src/**/*.{js,ts,jsx,tsx}'),
+    path.resolve(__dirname, '../../plugins/*/src/**/*.{js,ts,jsx,tsx}'),
+    path.resolve(__dirname, '../../apps/*/src/**/*.{js,ts,jsx,tsx}'),
   ],
+  theme: {
+    extend: {
+      colors: {
+        background: 'rgb(var(--color-background) / <alpha-value>)',
+        surface: 'rgb(var(--color-surface) / <alpha-value>)',
+        primary: {
+          DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
+        },
+        secondary: {
+          DEFAULT: 'rgb(var(--color-secondary) / <alpha-value>)',
+        },
+        accent: {
+          DEFAULT: 'rgb(var(--color-accent) / <alpha-value>)',
+        },
+        'text-main': 'rgb(var(--color-text-main) / <alpha-value>)',
+        'text-muted': 'rgb(var(--color-text-muted) / <alpha-value>)',
+        border: 'rgb(var(--color-border) / <alpha-value>)',
+      }
+    }
+  },
   plugins: []
 }

package/templates/app/tsconfig.json.hbs

@@ -14,10 +14,7 @@
     "declaration": false,
     "declarationMap": false,
     "composite": false,
-    "jsx": "react-jsx",
-    "types": ["vite/client", "node"],
-    "baseUrl": "."
+    "jsx": "react-jsx"
   },
-  "include": ["src"],
-  "references": []
+  "include": ["src"]
 }

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

@@ -2,17 +2,51 @@ 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';
+
+/**
+ * 动态获取 Workspace 中的包，用于 exclude
+ */
+function getWorkspacePackages() {
+  try {
+    const pkgPath = path.resolve(__dirname, 'package.json');
+    if (!fs.existsSync(pkgPath)) return [];
+
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+    const dependencies = { ...pkg.dependencies, ...pkg.devDependencies };
+
+    return Object.keys(dependencies).filter((key) => {
+      const version = dependencies[key];
+      return version.startsWith('workspace:');
+    });
+  } catch (e) {
+    console.error('解析 package.json 获取工作区包失败', e);
+    return [];
+  }
+}
 
 /**
  * 分包策略函数
- * 用于将依赖打包成独立的 chunk，利用浏览器缓存优化加载性能
  */
 function manualChunks(id: string) {
-  // 1. ChatBI 核心层
-  if (id.includes('@chatbi-v/core')) return 'chatbi-core';
+  // 1. ChatBI X (XCML) 核心包
+  if (id.includes('@chatbi-x/xcml') || id.includes('chatbi-x/packages/xcml')) {
+    return 'chatbi-xcml';
+  }
+
+  // 2. ChatBI 插件 (Workspace)
+  if (id.includes('/plugins/')) {
+    const matches = id.match(/\/plugins\/([^/]+)\//);
+    if (matches && matches[1]) {
+      const pluginName = matches[1];
+      // 统一分包名称格式为 plugin-{name}
+      return pluginName.startsWith('plugin-') ? pluginName : `plugin-${pluginName}`;
+    }
+  }
+
+  // 3. ChatBI 核心层 (Workspace)
+  if (id.includes('/packages/core/') || id.includes('@chatbi-v/core')) return 'chatbi-core';
 
-  // 2. 第三方依赖 (Node Modules)
+  // 4. 第三方依赖 (Node Modules)
   if (id.includes('node_modules')) {
     // React 核心 (将 React 相关包分组)
     if (
@@ -23,12 +57,19 @@ function manualChunks(id: string) {
       return 'react-vendor';
     }
 
-    // UI 组件库 (Ant Design)
-    if (id.includes('antd') || id.includes('@ant-design')) {
-        return 'antd-vendor';
+    // Node Modules 通用拆分
+    // 自动根据包名处理 antd, @ant-design, utils 等依赖
+    const parts = id.split('/node_modules/');
+    if (parts.length > 1) {
+      const pkgPath = parts[parts.length - 1];
+      // 处理 Scoped 包 (例如 @scope/pkg)
+      const match = pkgPath.match(/^((?:@[^/]+\/)?[^/]+)/);
+      if (match) {
+        const pkgName = match[1].replace('@', '').replace('/', '-');
+        return `vendor-${pkgName}`;
+      }
     }
-    
-    // 其他通用依赖
+
     return 'vendor';
   }
 }
@@ -36,66 +77,40 @@ function manualChunks(id: string) {
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
-  
-  // 加载内核生成的虚拟别名
-  let coreAlias = {};
-  const aliasPath = path.resolve(__dirname, './.chatbi/vite.alias.json');
-  if (fs.existsSync(aliasPath)) {
-    try {
-      coreAlias = JSON.parse(fs.readFileSync(aliasPath, 'utf-8'));
-    } catch (e) {
-      console.error('Failed to load core aliases:', e);
-    }
-  }
 
   return {
     base: env.VITE_APP_BASE_URL || '/',
-    
     plugins: [
       react(),
-      // 自动读取 tsconfig.json 中的 paths 配置，实现别名映射
-      tsconfigPaths(), 
     ],
-    
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
-        ...coreAlias
+        '@chatbi-plugins': path.resolve(__dirname, '../../plugins'),
+        '@chatbi-apps': path.resolve(__dirname, '../../apps'),
       },
-      // 强制统一核心依赖实例，避免多副本导致的 Context 失效
-      dedupe: [
-        'react',
-        'react-dom',
-        'react-router',
-        'react-router-dom',
-        'antd',
-        '@ant-design/icons',
-        '@ant-design/x',
-        '@chatbi-v/core'
-      ],
+      // 强制统一核心依赖实例
+      dedupe: ['react', 'react-dom', 'antd', '@ant-design/x', '@chatbi-v/core'],
+    },
+    optimizeDeps: {
+      // 动态排除 workspace 包，避免开发时重复构建
+      exclude: getWorkspacePackages(),
     },
-    
-    // 开发服务器配置
-    server: {
-      host: true,
-      port: 3000,
-      // 增量配置：如果需要代理后端接口，可在此配置
-      // proxy: {
-      //   '/api': {
-      //     target: 'http://localhost:8080',
-      //     changeOrigin: true,
-      //     rewrite: (path) => path.replace(/^\/api/, '')
-      //   }
-      // }
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true, // antd 需要
+        },
+      },
     },
-    
     build: {
+      sourcemap: true,
+      chunkSizeLimit: 2000,
       rollupOptions: {
         output: {
           manualChunks,
         },
       },
-      chunkSizeWarningLimit: 1000,
     },
   };
 });

package/templates/monorepo/package.json.hbs

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "typescript": "^5.0.0",
-    "@chatbi-v/cli": "^1.0.9",
+    "@chatbi-v/cli": "^2.0.2",
     "@ant-design/icons": "^5.6.1",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",

package/templates/plugin/README.md.hbs

@@ -0,0 +1,36 @@
+# {{pluginDisplayName}}
+
+{{pluginDescription}}
+
+## 安装
+
+作为 Monorepo 插件，在主应用中通过 `pnpm add {{pluginPackageName}}` 安装。
+
+## 开发
+
+1. **进入插件目录**
+   ```bash
+   cd packages/plugins/{{pluginFolderName}}
+   ```
+
+2. **启动开发模式**
+   ```bash
+   pnpm dev
+   ```
+
+3. **构建插件**
+   ```bash
+   pnpm build
+   ```
+
+## 插件配置
+
+在主应用的 `chatbi.config.ts` 中进行配置：
+
+```typescript
+plugins: {
+  '{{pluginPackageName}}': {
+    // 配置项
+  }
+}
+```

package/templates/plugin/package.json.hbs

@@ -1,30 +1,35 @@
 {
-  "name": "{{name}}",
-  "version": "1.0.0",
-  "type": "module",
-  "plugin": true,
-  "pluginType": "{{pluginType}}",
-  "main": "src/index.tsx",
-  "module": "src/index.tsx",
+  "name": "{{pluginPackageName}}",
+  "private": true,
+  "version": "{{pluginVersion}}",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "exports": {
-    ".": "./src/index.tsx"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
   },
   "scripts": {
-    "dev": "chatbi-cli dev",
-    "build": "chatbi-cli build"
+    "build": "chatbi-cli build",
+    "dev": "chatbi-cli build --watch"
   },
-  "devDependencies": {
-    "@ant-design/icons": "^5.2.6",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+  "plugin": true,
+  "peerDependencies": {
+    "@chatbi-v/core": "^2.0.2",
     "antd": "^5.20.0",
-    "typescript": "^5.3.3"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "antd": ">=5.0.0"
+  "devDependencies": {
+    "@chatbi-v/core": "^2.0.2",
+    "@chatbi-v/tsconfig": "^2.0.2",
+    "tsup": "^8.5.1",
+    "vite": "^5.0.0"
   }
 }

package/templates/plugin/src/api/index.ts.hbs

@@ -0,0 +1,3 @@
+export const apiConfig = {
+  // 在此定义 API 契约
+};

package/templates/plugin/src/components/MainView.tsx.hbs

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const MainView: React.FC = () => {
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold mb-4">{{pluginDisplayName}}</h1>
+      <p className="text-slate-500">欢迎使用 {{pluginDisplayName}} 插件。</p>
+    </div>
+  );
+};
+
+export default MainView;