@chenhui996/gg-cli 1.0.0 → 1.0.2

package/dist/template/{react-temp2 → operations-tem}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-temp2",
+  "name": "react-temp1",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -10,8 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "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-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "tslib": "^2.8.1",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
@@ -27,6 +35,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
+    "less": "^4.6.4",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.56.1",
     "vite": "^8.0.0"

package/dist/template/operations-tem/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/operations-tem/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/operations-tem/src/layouts/BasicLayout.tsx

@@ -0,0 +1,183 @@
+import { Outlet, Link, useLocation, useNavigate } from "react-router-dom";
+import {
+  Layout,
+  Menu,
+  Avatar,
+  Badge,
+  Space,
+  Typography,
+  Button,
+} from "antd";
+import {
+  MessageOutlined,
+  AppstoreOutlined,
+  FolderOutlined,
+  CalendarOutlined,
+  SettingOutlined,
+  BellOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+
+const { Header, Content, Sider } = Layout;
+const { Text } = Typography;
+
+/**
+ * 侧边栏菜单配置
+ * 使用数据驱动的方式定义菜单项，方便后续扩展
+ * @property {string} key - 路由路径，用于 Link 跳转和菜单高亮
+ * @property {ReactNode} icon - 菜单图标组件
+ * @property {string} label - 菜单显示名称
+ */
+const MENU_ITEMS = [
+  {
+    key: "/",
+    icon: <MessageOutlined />,
+    label: "聊天",
+  },
+  {
+    key: "/dashboard",
+    icon: <AppstoreOutlined />,
+    label: "功能大厅",
+  },
+  {
+    key: "/workspace", // 暂未实现
+    icon: <FolderOutlined />,
+    label: "工作空间",
+  },
+  {
+    key: "/calendar", // 暂未实现
+    icon: <CalendarOutlined />,
+    label: "日历",
+  },
+];
+
+/**
+ * 基础布局组件 (BasicLayout)
+ * 
+ * 整体布局结构：
+ * - Sider (左侧侧边栏)
+ *   - Logo
+ *   - Menu (动态渲染)
+ *   - UserProfile (底部固定)
+ * - Layout (右侧主体)
+ *   - Header (顶部导航)
+ *   - Content (路由出口 Outlet)
+ * 
+ * @returns {JSX.Element} 布局组件
+ */
+export default function BasicLayout() {
+  // 获取当前路由路径，用于菜单高亮
+  const location = useLocation();
+  // 路由跳转钩子，用于编程式导航
+  const navigate = useNavigate();
+
+  // 渲染侧边栏底部用户信息区域
+  const renderUserProfile = () => (
+    <div
+      style={{
+        padding: "16px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+      }}
+    >
+      <Space>
+        <Avatar
+          src="https://api.dicebear.com/7.x/miniavs/svg?seed=1"
+          icon={<UserOutlined />}
+        />
+        <Text strong style={{ fontSize: 14 }}>
+          国泰海通-张三
+        </Text>
+      </Space>
+      <Button type="text" icon={<SettingOutlined />} onClick={() => navigate('/settings')} />
+    </div>
+  );
+
+  return (
+    <Layout style={{ minHeight: "100vh", position: "relative" }}>
+      {/* 左侧侧边栏 */}
+      <Sider
+        width={240}
+        theme="light"
+        style={{
+          borderRight: "1px solid #f0f0f0",
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", height: '100%', position: 'relative' }}>
+          {/* Logo 区域 */}
+          <div
+            style={{
+              height: 64,
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: 24,
+              fontSize: 20,
+              fontWeight: "bold",
+              color: "#333",
+            }}
+          >
+            PILOTCORE
+          </div>
+
+          {/* 菜单区域 - flex: 1 撑满剩余空间 */}
+          <div style={{ flex: 1, overflowY: "auto" }}>
+            <Menu
+              mode="inline"
+              selectedKeys={[location.pathname]}
+              style={{ borderRight: 0, paddingBottom: 16, borderBottom: "1px solid #f0f0f0" }}
+              items={MENU_ITEMS.map((item) => ({
+                ...item,
+                label: <Link to={item.key}>{item.label}</Link>,
+              }))}
+            />
+          </div>
+
+          {/* 底部用户信息 */}
+          <div style={{ position: "absolute", bottom: 0, width: '100%' }}>
+            {renderUserProfile()}
+          </div>
+        </div>
+      </Sider>
+
+      {/* 右侧主体区域 */}
+      <Layout>
+        {/* 顶部导航栏 */}
+        <Header
+          style={{
+            padding: "0 24px",
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            backgroundColor: "transparent", // 透明背景融入整体
+          }}
+        >
+          <Space size={24}>
+            {/* 通知图标 */}
+            <Badge count={3} offset={[2, 2]} color="#1677ff">
+              <Button
+                icon={<BellOutlined />}
+                shape="circle"
+                style={{
+                  border: "none",
+                  background: "#fff",
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.05)",
+                }}
+              />
+            </Badge>
+          </Space>
+        </Header>
+
+        {/* 内容区域 */}
+        <Content
+          style={{
+            margin: "0 24px 24px",
+            minHeight: 280,
+          }}
+        >
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+}

package/dist/template/operations-tem/src/main.tsx

@@ -0,0 +1,38 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider } from 'react-router-dom'
+import { ConfigProvider } from 'antd'
+import zhCN from 'antd/locale/zh_CN'
+import { router } from './router'
+import 'antd/dist/reset.css'
+import './style.less'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ConfigProvider
+      locale={zhCN}
+      theme={{
+        token: {
+          colorPrimary: '#4F46E5', // 调整为更接近设计稿的深蓝色
+          borderRadius: 8, // 全局圆角
+          colorBgLayout: '#F9FAFB', // 极淡的背景灰
+        },
+        components: {
+          Layout: {
+            siderBg: '#ffffff', // 侧边栏白色背景
+            headerBg: '#ffffff', // 顶栏白色背景
+          },
+          Menu: {
+            itemSelectedBg: '#EFF6FF', // 选中项浅蓝背景
+            itemSelectedColor: '#4F46E5', // 选中项文字颜色
+          },
+          Card: {
+            borderRadiusLG: 12, // 卡片大圆角
+          },
+        },
+      }}
+    >
+      <RouterProvider router={router} />
+    </ConfigProvider>
+  </StrictMode>,
+)

package/dist/template/operations-tem/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/operations-tem/src/pages/about/index.tsx

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

package/dist/template/operations-tem/src/pages/calendar/index.tsx

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

package/dist/template/operations-tem/src/pages/dashboard/index.tsx

@@ -0,0 +1,72 @@
+import { Card, Row, Col } from 'antd';
+import Chart from '../../components/Chart';
+import type { EChartsOption } from 'echarts';
+
+export default function Dashboard() {
+  // 柱状图配置
+  const barOption: EChartsOption = {
+    title: { text: '周访问量' },
+    tooltip: { trigger: 'axis' },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: { type: 'value' },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
+        itemStyle: { color: '#1677ff' },
+      },
+    ],
+  };
+
+  // 饼图配置
+  const pieOption: EChartsOption = {
+    title: { text: '用户来源' },
+    tooltip: { trigger: 'item' },
+    legend: { top: 'bottom' },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: { show: false, position: 'center' },
+        emphasis: {
+          label: { show: true, fontSize: 20, fontWeight: 'bold' },
+        },
+        data: [
+          { value: 1048, name: 'Search Engine' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' },
+        ],
+      },
+    ],
+  };
+
+  return (
+    <div>
+      <h2 style={{ marginBottom: 24 }}>数据看板 (Dashboard)</h2>
+      <Row gutter={[24, 24]}>
+        <Col xs={24} md={12}>
+          <Card styles={{ body: { height: 400, padding: 0 } }}>
+            <Chart option={barOption} />
+          </Card>
+        </Col>
+        <Col xs={24} md={12}>
+          <Card styles={{ body: { height: 400, padding: 0 } }}>
+            <Chart option={pieOption} />
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+}

package/dist/template/operations-tem/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/operations-tem/src/pages/home/index.tsx

@@ -0,0 +1,188 @@
+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/operations-tem/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/operations-tem/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>
+  );
+}