@chenhui996/gg-cli 1.0.3 → 1.0.5

package/dist/template/zhiguan/src/layouts/BasicLayout.tsx

@@ -0,0 +1,174 @@
+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/zhiguan/src/main.tsx

@@ -0,0 +1,38 @@
+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 { ErrorBoundary } from '@/components/ErrorBoundary';
+import 'antd/dist/reset.css';
+import './style.less';
+
+createRoot(document.getElementById('root')!).render(
+  <ErrorBoundary>
+    <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>
+  </ErrorBoundary>,
+);

package/dist/template/zhiguan/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.js';
+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/zhiguan/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/zhiguan/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/zhiguan/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/zhiguan/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/zhiguan/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/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>
+  );
+}