@chenhui996/gg-cli 1.0.4 → 1.0.5

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