@chenhui996/gg-cli 1.0.4 → 1.0.6

package/dist/template/zhiguan/src/pages/home/index.tsx

@@ -0,0 +1,217 @@
+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 './index.less';
+
+const { Title, Text } = Typography;
+
+// --- Components ---
+
+/**
+ * 欢迎语组件 (WelcomeHeader)
+ * 展示用户个性化问候语和任务概览
+ */
+const WelcomeHeader = () => (
+  <div className="welcome-header">
+    <Title level={2}>下午好，你有3件待办任务...</Title>
+  </div>
+);
+
+/**
+ * 搜索区域组件 (SearchSection)
+ * 包含搜索框和快捷操作标签 (Tag)
+ * 样式位于 ./index.less
+ */
+const SearchSection = () => (
+  <div className="search-section">
+    {/* 搜索输入框 */}
+    <div className="search-box">
+      <PaperClipOutlined className="search-icon" />
+      <Input
+        bordered={false}
+        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
+              bordered={false}
+              bodyStyle={{
+                padding: '24px 12px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 12,
+              }}
+              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>
+  );
+};
+
+/**
+ * 待办任务组件 (TaskList)
+ * 展示用户今日待办事项，支持紧急程度标记
+ */
+const TaskList = () => {
+  // 模拟任务数据
+  const tasks = [
+    { time: '16:30', content: '确认：交易对手方授信额度调整', tag: '紧急', tagColor: '#EF4444' },
+    { time: '17:00', content: '复核：昨日异常交易流水', tag: '', tagColor: '' },
+    { time: '17:12', content: '复核：昨日异常交易流水', tag: '', tagColor: '' },
+  ];
+
+  return (
+    <div style={{ maxWidth: 1000, margin: '0 auto' }}>
+      <Text type="secondary" style={{ marginBottom: 16, display: 'block', paddingLeft: 8 }}>
+        待办任务
+      </Text>
+      <List
+        dataSource={tasks}
+        renderItem={(item) => (
+          <List.Item
+            style={{
+              background: '#fff',
+              borderRadius: 12,
+              marginBottom: 12,
+              padding: '20px 24px',
+              border: '1px solid #f0f0f0',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
+              <Text type="secondary" style={{ width: 60, marginRight: 16 }}>
+                {item.time}
+              </Text>
+              <Text style={{ fontSize: 15, fontWeight: 500 }}>{item.content}</Text>
+            </div>
+
+            <Space size={16}>
+              {item.tag && (
+                <Tag
+                  color={item.tagColor}
+                  style={{ borderRadius: 4, border: 'none', marginRight: 0 }}
+                >
+                  {item.tag}
+                </Tag>
+              )}
+              <Button type="link" size="small">
+                处理
+              </Button>
+            </Space>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+
+// --- Main Page ---
+
+export default function Home() {
+  return (
+    <div className="home-page">
+      <WelcomeHeader />
+      <SearchSection />
+      <QuickActions />
+      <TaskList />
+    </div>
+  );
+}

package/dist/template/zhiguan/src/pages/settings/index.tsx

@@ -0,0 +1,8 @@
+export default function Settings() {
+  return (
+    <div>
+      <h2>Settings Page</h2>
+      <p>This is a modern React template generated by gg-cli.</p>
+    </div>
+  );
+}

package/dist/template/zhiguan/src/pages/workspace/index.tsx

@@ -0,0 +1,8 @@
+export default function Workspace() {
+  return (
+    <div>
+      <h2>Workspace Page</h2>
+      <p>This is a modern React template generated by gg-cli.</p>
+    </div>
+  );
+}

package/dist/template/zhiguan/src/router/index.tsx

@@ -0,0 +1,81 @@
+/**
+ * 路由配置 (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 About = lazy(() => import('@/pages/about'));
+const Dashboard = lazy(() => import('@/pages/dashboard'));
+const Workspace = lazy(() => import('@/pages/workspace'));
+const Calendar = lazy(() => import('@/pages/calendar'));
+const Settings = lazy(() => import('@/pages/settings'));
+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>
+  );
+}
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    // 根布局：BasicLayout (包含侧边栏和 Header)
+    element: <BasicLayout />,
+    // 子路由：渲染在 BasicLayout 的 <Outlet /> 中
+    children: [
+      {
+        index: true, // 默认子路由 (首页)
+        element: withSuspense(Home),
+      },
+      {
+        path: 'dashboard',
+        element: withSuspense(Dashboard),
+      },
+      {
+        path: 'about',
+        element: withSuspense(About),
+      },
+      {
+        path: 'workspace',
+        element: withSuspense(Workspace),
+      },
+      {
+        path: 'calendar',
+        element: withSuspense(Calendar),
+      },
+      {
+        path: 'settings',
+        element: withSuspense(Settings),
+      },
+      // 404 页面配置
+      {
+        path: '*',
+        element: withSuspense(NotFound),
+      },
+    ],
+  },
+]);

package/dist/template/zhiguan/src/setupTests.ts

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

package/dist/template/zhiguan/src/store/useCounterStore.ts

@@ -0,0 +1,24 @@
+import { create } from 'zustand';
+
+// 1. 定义状态接口
+interface CounterState {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+}
+
+/**
+ * 全局计数器状态 (Zustand Store)
+ * 这是一个简单的状态管理示例，演示如何使用 Zustand
+ *
+ * @example
+ * // 在组件中使用
+ * const { count, increment } = useCounterStore()
+ */
+export const useCounterStore = create<CounterState>()((set) => ({
+  // 初始状态
+  count: 0,
+  // 修改状态的方法 (Action)
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+}));

package/dist/template/zhiguan/src/style.less

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

package/dist/template/zhiguan/src/utils/request/index.ts

@@ -0,0 +1,108 @@
+/**
+ * 通用网络请求工具 (Axios Encapsulation)
+ * 封装了全局请求拦截、响应处理和错误统一处理
+ */
+import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios';
+
+// 定义通用的后端响应结构
+export interface BaseResponse<T = unknown> {
+  code: number; // 业务状态码 (0/200: 成功, 其他: 失败)
+  data: T; // 业务数据
+  message: string; // 提示信息
+}
+
+// 创建 Axios 实例的工厂函数
+function createRequest(config: AxiosRequestConfig) {
+  const instance = axios.create(config);
+
+  // 请求拦截器
+  instance.interceptors.request.use(
+    (reqConfig) => {
+      // 在发送请求之前做些什么，例如添加 token
+      const token = localStorage.getItem('token');
+      if (token && reqConfig.headers) {
+        reqConfig.headers.Authorization = `Bearer ${token}`;
+      }
+      return reqConfig;
+    },
+    (error) => {
+      return Promise.reject(error);
+    },
+  );
+
+  // 响应拦截器
+  instance.interceptors.response.use(
+    (response: AxiosResponse<BaseResponse>) => {
+      const { data } = response;
+      // 根据自定义的 code 判断请求是否成功 (假设 0 或 200 为成功)
+      if (data.code === 0 || data.code === 200) {
+        return data.data as any; // 拆包返回 data
+      } else {
+        // 处理业务错误，例如提示用户
+        console.error(data.message || '请求失败');
+        return Promise.reject(new Error(data.message || '请求失败'));
+      }
+    },
+    (error) => {
+      // 处理 HTTP 错误，例如 401, 404, 500 等
+      if (error.response) {
+        const status = error.response.status;
+        switch (status) {
+          case 401:
+            console.error('未授权，请重新登录');
+            // 执行登出逻辑等
+            break;
+          case 403:
+            console.error('拒绝访问');
+            break;
+          case 404:
+            console.error('请求地址错误');
+            break;
+          case 500:
+            console.error('服务器内部错误');
+            break;
+          default:
+            console.error(`请求错误: ${status}`);
+        }
+      } else {
+        console.error('网络连接异常,请稍后再试!');
+      }
+      return Promise.reject(error);
+    },
+  );
+
+  // 返回封装好的请求方法对象
+  return {
+    /**
+     * 发送 GET 请求
+     * @param url 请求地址
+     * @param config Axios 配置
+     */
+    get: <T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> => {
+      return instance.get(url, config);
+    },
+    /**
+     * 发送 POST 请求
+     * @param url 请求地址
+     * @param data 请求体数据
+     * @param config Axios 配置
+     */
+    post: <T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> => {
+      return instance.post(url, data, config);
+    },
+    put: <T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> => {
+      return instance.put(url, data, config);
+    },
+    delete: <T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> => {
+      return instance.delete(url, config);
+    },
+  };
+}
+
+// 导出默认 request 实例
+// 可以直接 import { request } from '@/utils/request' 使用
+export const request = createRequest({
+  // 从环境变量 VITE_API_BASE_URL 获取基础地址，默认为 /api
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
+  timeout: 10000, // 超时时间 10s
+});

package/dist/template/zhiguan/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <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;
+}

package/dist/template/zhiguan/tsconfig.app.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client", "node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/dist/template/zhiguan/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/dist/template/zhiguan/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/template/zhiguan/vite.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig } from 'vitest/config'
+import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import babel from '@rolldown/plugin-babel'
+import path from 'path'
+import { visualizer } from 'rollup-plugin-visualizer'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({ presets: [reactCompilerPreset()] }),
+    process.env.ANALYZE === 'true' && visualizer({
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+      filename: 'dist/stats.html',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  // 生产环境打包配置
+  build: {
+    // 消除打包大小超过 500kb 警告
+    chunkSizeWarningLimit: 2000,
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: process.env.NODE_ENV === 'production',
+        drop_debugger: process.env.NODE_ENV === 'production',
+      },
+    },
+    rollupOptions: {
+      output: {
+        // 静态资源分类打包
+        chunkFileNames: 'assets/js/[name]-[hash].js',
+        entryFileNames: 'assets/js/[name]-[hash].js',
+        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
+        // 手动分包策略
+        manualChunks(id) {
+          // 1. 将 react 核心全家桶打包到一起
+          if (id.includes('node_modules/react') || id.includes('node_modules/react-dom') || id.includes('node_modules/react-router-dom')) {
+            return 'vendor-react';
+          }
+          // 2. 将 echarts 单独打包 (体积较大)
+          if (id.includes('node_modules/echarts') || id.includes('node_modules/zrender')) {
+            return 'vendor-echarts';
+          }
+          // 3. 将 antd 和图标单独打包
+          if (id.includes('node_modules/antd') || id.includes('node_modules/@ant-design')) {
+            return 'vendor-antd';
+          }
+        },
+      },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  },
+  // Vitest 测试配置
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './src/setupTests.ts',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: ['node_modules/', 'src/setupTests.ts', 'dist/'],
+    },
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chenhui996/gg-cli",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "一个轻量级的现代前端脚手架工具，公网测试",
   "type": "module",
   "main": "dist/index.js",