@chenhui996/gg-cli 1.0.7 → 1.0.9

package/dist/template/micro-app/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "micro-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --mode development",
+    "build:test": "tsc -b && vite build --mode test",
+    "build:prod": "tsc -b && vite build --mode production",
+    "build": "npm run build:prod",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "analyze": "cross-env ANALYZE=true npm run build:prod",
+    "lint": "eslint .",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,less,css,json,md}\"",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@garfish/bridge-react-v18": "^1.19.8",
+    "antd": "^6.3.3",
+    "axios": "^1.13.6",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "tslib": "^2.8.1",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@eslint/js": "^9.39.4",
+    "@rolldown/plugin-babel": "^0.2.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/coverage-v8": "^4.1.4",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "jsdom": "^29.0.2",
+    "less": "^4.6.4",
+    "prettier": "^3.8.1",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "terser": "^5.46.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^8.0.0",
+    "vite-plugin-cdn-import": "^1.0.1",
+    "vite-plugin-garfish-mf": "^1.0.4",
+    "vitest": "^4.1.4"
+  }
+}

package/dist/template/micro-app/src/api/user.ts

@@ -0,0 +1,21 @@
+import { request } from '../utils/request';
+
+// 定义接口返回的数据类型
+export interface UserInfo {
+  id: number;
+  name: string;
+  email: string;
+}
+
+// 示例 API 服务
+export const userService = {
+  // 获取用户信息
+  getUserInfo: (userId: number) => {
+    return request.get<UserInfo>(`/users/${userId}`);
+  },
+
+  // 更新用户信息
+  updateUserInfo: (userId: number, data: Partial<UserInfo>) => {
+    return request.put<UserInfo>(`/users/${userId}`, data);
+  },
+};

package/dist/template/micro-app/src/components/Chart/index.tsx

@@ -0,0 +1,22 @@
+import ReactECharts from 'echarts-for-react';
+import type { EChartsOption } from 'echarts';
+
+interface ChartProps {
+  option: EChartsOption;
+  style?: React.CSSProperties;
+  className?: string;
+  loading?: boolean;
+}
+
+export default function Chart({ option, style, className, loading = false }: ChartProps) {
+  return (
+    <ReactECharts
+      option={option}
+      style={{ height: '100%', width: '100%', ...style }}
+      className={className}
+      showLoading={loading}
+      notMerge={true}
+      lazyUpdate={true}
+    />
+  );
+}

package/dist/template/micro-app/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,82 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { Result, Button } from 'antd';
+
+interface Props {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+/**
+ * 全局错误边界组件 (Error Boundary)
+ * 用于捕获 React 组件树中的渲染错误，防止整个应用白屏崩溃
+ * 同时可在此处进行错误日志上报
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    // 更新 state 以致于下一次渲染能够显示降级后的 UI
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // 在这里你可以将错误日志上报给服务器
+    console.error('Uncaught error in React component tree:', error, errorInfo);
+
+    // 示例：如果在生产环境，调用监控 SDK
+    // if (import.meta.env.PROD) {
+    //   logService.error('REACT_RENDER_ERROR', { error, errorInfo });
+    // }
+  }
+
+  private handleReset = () => {
+    // 重置错误状态，尝试恢复组件渲染
+    this.setState({ hasError: false, error: undefined });
+    // 也可以选择刷新整个页面
+    // window.location.reload();
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      // 渲染自定义的降级 UI，或者使用默认的 500 页面
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <Result
+          status="500"
+          title="抱歉，页面加载出错了"
+          subTitle={
+            import.meta.env.DEV
+              ? this.state.error?.message
+              : "我们正在努力修复此问题，请稍后再试。"
+          }
+          extra={
+            <Button type="primary" onClick={this.handleReset}>
+              重试
+            </Button>
+          }
+          style={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            background: '#fff',
+            borderRadius: 8,
+            margin: 24,
+          }}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/dist/template/micro-app/src/layouts/BasicLayout.tsx

@@ -0,0 +1,21 @@
+import { Outlet } from 'react-router-dom';
+
+/**
+ * 子应用基础布局组件 (BasicLayout)
+ * 
+ * 作为微前端的业务模块，子应用不需要包含侧边栏 (Sider) 和顶栏 (Header)。
+ * 它只需要作为一个纯粹的视图容器，将自身的路由内容渲染到主应用的 Content 区域中。
+ */
+export default function BasicLayout() {
+  return (
+    <div className="micro-app-container" style={{ minHeight: '100%', backgroundColor: '#fff', borderRadius: 8 }}>
+      {/* 
+        此处可以放置子应用全局共享的逻辑，例如：
+        - 子应用级别的 ErrorBoundary
+        - 子应用级别的权限校验
+        - 子应用特有的水印等
+      */}
+      <Outlet />
+    </div>
+  );
+}

package/dist/template/micro-app/src/main.tsx

@@ -0,0 +1,47 @@
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { reactBridge } from '@garfish/bridge-react-v18';
+import { ConfigProvider } from 'antd';
+import { router } from '@/router';
+import { useGlobalStore } from '@/store/useGlobalStore';
+import './style.less';
+
+// 微前端环境下，由于主应用已经引入了 reset.css 或类似的全局重置样式，
+// 子应用再引入会导致切换时样式的重复挂载和卸载，从而引发全局界面的重绘闪烁。
+if (!window.__GARFISH__) {
+  import('antd/dist/reset.css');
+}
+
+// 定义子应用专属的样式前缀
+const MICRO_PREFIX_CLS = 'micro1';
+
+export const provider = reactBridge({
+  el: '#root',
+  // Garfish 会将主应用传递的 appInfo 作为参数传入
+  rootComponent: (appInfo: any) => {
+    console.log('appInfo', appInfo);
+    
+    // 拦截主应用传来的数据，并同步到子应用的全局状态中
+    if (appInfo?.props?.globalState) {
+      // 避免 React render 阶段直接触发 zustand 更新警告，我们利用微任务或者只在初始化时设置
+      useGlobalStore.getState().setGlobalState(appInfo.props.globalState);
+    }
+    
+    // 使用 ConfigProvider 包裹路由，并设置专属的 CSS 前缀和独立的 cssVar
+    return (
+      <ConfigProvider prefixCls={MICRO_PREFIX_CLS} theme={{ cssVar: { key: 'micro-app' }, hashed: false }}>
+        <RouterProvider router={router} />
+      </ConfigProvider>
+    );
+  },
+  errorBoundary: () => <div>子应用加载异常，请稍后重试</div>,
+});
+
+// src/main.js
+if (!window.__GARFISH__) {
+  createRoot(document.getElementById('root')!).render(
+    <ConfigProvider prefixCls={MICRO_PREFIX_CLS} theme={{ cssVar: { key: 'micro-app' }, hashed: false }}>
+      <RouterProvider router={router} />
+    </ConfigProvider>
+  );
+}

package/dist/template/micro-app/src/pages/404.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import NotFound from './404';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('NotFound (404) 页面组件', () => {
+  it('应当正确渲染 404 状态码和提示信息', () => {
+    // Arrange: 渲染组件 (需要包裹在 Router 中因为内部使用了 useNavigate)
+    render(
+      <BrowserRouter>
+        <NotFound />
+      </BrowserRouter>
+    );
+
+    // Assert: 验证页面中是否出现了 404 和相关提示文字
+    expect(screen.getByText('404')).toBeInTheDocument();
+    expect(screen.getByText('抱歉，您访问的页面不存在。')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '返回首页' })).toBeInTheDocument();
+  });
+});

package/dist/template/micro-app/src/pages/404.tsx

@@ -0,0 +1,32 @@
+import { Button, Result } from 'antd';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * 404 页面组件
+ * 当用户访问不存在的路由时展示
+ */
+export default function NotFound() {
+  const navigate = useNavigate();
+
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle="抱歉，您访问的页面不存在。"
+      extra={
+        <Button type="primary" onClick={() => navigate('/')}>
+          返回首页
+        </Button>
+      }
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        background: '#fff',
+        borderRadius: 8,
+        margin: 24,
+      }}
+    />
+  );
+}

package/dist/template/micro-app/src/pages/home/index.less

@@ -0,0 +1,59 @@
+.home-page {
+  padding: 20px 0;
+
+  .welcome-header {
+    text-align: center;
+    margin-bottom: 40px;
+    margin-top: 40px;
+
+    h2.ant-typography {
+      margin-bottom: 8px;
+    }
+  }
+
+  .search-section {
+    max-width: 800px;
+    margin: 0 auto 48px;
+
+    .search-box {
+      background: #fff;
+      border-radius: 12px;
+      padding: 8px 8px 8px 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+      border: 1px solid #f0f0f0;
+      display: flex;
+      align-items: center;
+
+      .search-icon {
+        font-size: 18px;
+        color: #999;
+        margin-right: 12px;
+      }
+
+      .search-input {
+        flex: 1;
+        font-size: 14px;
+      }
+
+      .search-btn {
+        margin-left: 8px;
+      }
+    }
+
+    .search-tags {
+      margin-top: 16px;
+      display: flex;
+      gap: 8px;
+      justify-content: flex-start;
+      padding-left: 4px;
+
+      .tag-item {
+        border-radius: 16px;
+        padding: 4px 12px;
+        border: 1px solid #e5e7eb;
+        background: #fff;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/dist/template/micro-app/src/pages/home/index.tsx

@@ -0,0 +1,165 @@
+import { Input, Tag, Card, Row, Col, List, Button, Typography, Space } from 'antd';
+import {
+  ArrowUpOutlined,
+  AppstoreOutlined,
+  SettingOutlined,
+  SafetyCertificateOutlined,
+  AuditOutlined,
+  WalletOutlined,
+  DatabaseOutlined,
+  PaperClipOutlined,
+} from '@ant-design/icons';
+import { useGlobalStore } from '@/store/useGlobalStore';
+import './index.less';
+
+const { Title, Text } = Typography;
+
+// --- Components ---
+
+/**
+ * 欢迎语组件 (WelcomeHeader)
+ * 展示用户个性化问候语和任务概览
+ */
+const WelcomeHeader = () => {
+  // 从全局 Store 中获取由主应用透传过来的用户信息
+  const user = useGlobalStore((state) => state.user);
+  const token = useGlobalStore((state) => state.token);
+
+  console.log('[micro-app user]', user);
+  console.log('[micro-app token]', token);
+  
+  const displayName = user?.name || '游客';
+  const roleInfo = user?.dept ? `[${user.dept}] ` : '';
+
+  return (
+    <div className="welcome-header">
+      <Title level={2}>
+        下午好，{roleInfo}{displayName}，你有3件待办任务...
+      </Title>
+    </div>
+  );
+};
+
+/**
+ * 搜索区域组件 (SearchSection)
+ * 包含搜索框和快捷操作标签 (Tag)
+ * 样式位于 ./index.less
+ */
+const SearchSection = () => (
+  <div className="search-section">
+    {/* 搜索输入框 */}
+    <div className="search-box">
+      <PaperClipOutlined className="search-icon" />
+      <Input
+        variant="borderless"
+        placeholder="输入您想查询的数据、指令或功能，例如：帮我分析一下NVDA的最新财报..."
+        className="search-input"
+      />
+      <Button type="primary" shape="circle" icon={<ArrowUpOutlined />} className="search-btn" />
+    </div>
+
+    {/* 快捷标签 */}
+    <div className="search-tags">
+      <Tag className="tag-item">分析财报</Tag>
+      <Tag className="tag-item">查询头寸</Tag>
+      <Tag className="tag-item">压力测试</Tag>
+    </div>
+  </div>
+);
+
+/**
+ * 常用功能组件 (QuickActions)
+ * 使用 Grid 布局展示应用的核心功能入口
+ * 每个卡片包含：图标、标题和背景色
+ */
+const QuickActions = () => {
+  // 功能入口配置数据
+  const actions = [
+    {
+      title: '工作空间',
+      icon: <AppstoreOutlined style={{ fontSize: 24, color: '#4F46E5' }} />,
+      color: '#EEF2FF',
+    },
+    {
+      title: '规则配置',
+      icon: <SettingOutlined style={{ fontSize: 24, color: '#0EA5E9' }} />,
+      color: '#F0F9FF',
+    },
+    {
+      title: '事后风控',
+      icon: <SafetyCertificateOutlined style={{ fontSize: 24, color: '#F59E0B' }} />,
+      color: '#FFFBEB',
+    },
+    {
+      title: '交易审批',
+      icon: <AuditOutlined style={{ fontSize: 24, color: '#10B981' }} />,
+      color: '#ECFDF5',
+    },
+    {
+      title: '证券池管理',
+      icon: <WalletOutlined style={{ fontSize: 24, color: '#3B82F6' }} />,
+      color: '#EFF6FF',
+    },
+    {
+      title: '数据审批',
+      icon: <DatabaseOutlined style={{ fontSize: 24, color: '#06B6D4' }} />,
+      color: '#ECFEFF',
+    },
+  ];
+
+  return (
+    <div style={{ maxWidth: 1000, margin: '0 auto 48px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginBottom: 16,
+          padding: '0 8px',
+        }}
+      >
+        <Text type="secondary">常用功能</Text>
+        <Button type="link" size="small" style={{ color: '#999' }}>
+          更多
+        </Button>
+      </div>
+      <Row gutter={[16, 16]}>
+        {actions.map((action) => (
+          <Col span={4} key={action.title}>
+            <Card
+              hoverable
+              variant="borderless"
+              style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.02)' }}
+            >
+              <div
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: 12,
+                  background: action.color,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                {action.icon}
+              </div>
+              <Text style={{ fontSize: 13, fontWeight: 500 }}>{action.title}</Text>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+};
+
+// --- Main Page ---
+
+export default function Home() {
+  return (
+    <div className="home-page">
+      <WelcomeHeader />
+      <SearchSection />
+      <QuickActions />
+    </div>
+  );
+}

package/dist/template/micro-app/src/router/index.tsx

@@ -0,0 +1,62 @@
+/**
+ * 路由配置 (React Router Data API)
+ * 采用对象配置模式，便于管理和扩展
+ */
+import { lazy, Suspense, type ComponentType, type LazyExoticComponent } from 'react';
+import { createBrowserRouter } from 'react-router-dom';
+import { Spin } from 'antd';
+import BasicLayout from '@/layouts/BasicLayout';
+
+// 路由懒加载配置
+const Home = lazy(() => import('@/pages/home'));
+const NotFound = lazy(() => import('@/pages/404'));
+
+// 全局 Loading 组件
+const Loading = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+      minHeight: 400,
+    }}
+  >
+    <Spin size="large" />
+  </div>
+);
+
+// 包装懒加载组件，统一添加 Suspense
+function withSuspense(Component: LazyExoticComponent<ComponentType<any>>) {
+  return (
+    <Suspense fallback={<Loading />}>
+      <Component />
+    </Suspense>
+  );
+}
+
+const routes = [
+  {
+    path: '/',
+    // 根布局：BasicLayout
+    element: <BasicLayout />,
+    // 子路由：渲染在 BasicLayout 的 <Outlet /> 中
+    children: [
+      {
+        index: true, // 默认子路由 (首页)
+        element: withSuspense(Home),
+      },
+      // 404 页面配置
+      {
+        path: '*',
+        element: withSuspense(NotFound),
+      },
+    ],
+  },
+];
+
+// 根据是否在 Garfish 环境中运行来决定 basename
+// 主应用中注册的子应用激活路径为 /micro-react-1
+const basename = window.__GARFISH__ ? '/micro-react-1' : '/';
+
+export const router = createBrowserRouter(routes, { basename });

package/dist/template/micro-app/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/template/micro-app/src/store/useGlobalStore.ts

@@ -0,0 +1,20 @@
+import { create } from 'zustand';
+
+export interface UserInfo {
+  name: string;
+  role: string;
+  dept: string;
+}
+
+interface GlobalState {
+  user: UserInfo | null;
+  token: string | null;
+  // 更新全局状态的方法
+  setGlobalState: (state: Partial<GlobalState>) => void;
+}
+
+export const useGlobalStore = create<GlobalState>((set) => ({
+  user: null,
+  token: null,
+  setGlobalState: (state) => set((prev) => ({ ...prev, ...state })),
+}));

package/dist/template/micro-app/src/vite-env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ENV: string;
+  readonly VITE_API_BASE_URL: string;
+  readonly VITE_APP_TITLE: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+interface Window {
+  __GARFISH__?: boolean;
+}

package/dist/template/{react19 → micro-app}/tsconfig.app.json

@@ -5,7 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "types": ["vite/client"],
+    "types": ["vite/client", "node"],
     "skipLibCheck": true,
 
     /* Bundler mode */
@@ -16,6 +16,12 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,