@lovrabet/cli 1.2.4 → 1.2.5-beta.1

package/templates/projects/sub-app-react-demo/src/pages/workbench/index.tsx

@@ -1,27 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 import { useNavigate } from "react-router-dom";
+import styles from "./index.module.css";
 import {
-  Card,
-  Row,
-  Col,
-  Statistic,
-  Typography,
-  Space,
-  Button,
-  List,
-  Avatar,
-  Tag,
-  Progress,
-  Timeline,
-  Empty,
-} from "antd";
-import {
-  RocketOutlined,
   DashboardOutlined,
   ApiOutlined,
   BarChartOutlined,
   FileTextOutlined,
-  SettingOutlined,
   UserOutlined,
   ShoppingOutlined,
   DollarOutlined,
@@ -29,441 +13,143 @@ import {
   ClockCircleOutlined,
   CheckCircleOutlined,
   ExclamationCircleOutlined,
-  ArrowRightOutlined,
 } from "@ant-design/icons";
 
-const { Title, Text, Paragraph } = Typography;
-
-// Mock 数据
 const mockData = {
-  // 统计数据
   statistics: [
-    {
-      title: "今日访问",
-      value: 1256,
-      prefix: <UserOutlined />,
-      color: "#1890ff",
-      trend: "+12.5%",
-    },
-    {
-      title: "待处理订单",
-      value: 89,
-      prefix: <ShoppingOutlined />,
-      color: "#52c41a",
-      trend: "+8.3%",
-    },
-    {
-      title: "本月收入",
-      value: 896523,
-      prefix: <DollarOutlined />,
-      color: "#fa8c16",
-      suffix: "元",
-      trend: "+15.6%",
-    },
-    {
-      title: "完成率",
-      value: 89.5,
-      prefix: <TrophyOutlined />,
-      color: "#eb2f96",
-      suffix: "%",
-      trend: "+3.2%",
-    },
+    { title: "今日访问", value: "1,256", icon: <UserOutlined />, trend: "+12.5%" },
+    { title: "待处理订单", value: "89", icon: <ShoppingOutlined />, trend: "+8.3%" },
+    { title: "本月收入", value: "¥89.6万", icon: <DollarOutlined />, trend: "+15.6%" },
+    { title: "完成率", value: "89.5%", icon: <TrophyOutlined />, trend: "+3.2%" },
   ],
-
-  // 快捷操作
   quickActions: [
-    {
-      key: "/sdk-demo",
-      title: "SDK 演示",
-      icon: <ApiOutlined />,
-      description: "查看 SDK 使用示例",
-      color: "#1890ff",
-    },
-    {
-      key: "/dashboard",
-      title: "数据看板",
-      icon: <DashboardOutlined />,
-      description: "查看业务数据统计",
-      color: "#52c41a",
-    },
-    {
-      key: "/data-screen",
-      title: "数据大屏",
-      icon: <BarChartOutlined />,
-      description: "可视化数据展示",
-      color: "#fa8c16",
-    },
-    {
-      key: "https://open.lovrabet.com",
-      title: "查看文档",
-      icon: <FileTextOutlined />,
-      description: "访问完整文档",
-      color: "#722ed1",
-      external: true,
-    },
+    { key: "/sdk-demo", title: "SDK 演示", desc: "查看 SDK 使用示例", icon: <ApiOutlined /> },
+    { key: "/dashboard", title: "数据看板", desc: "查看业务数据统计", icon: <DashboardOutlined /> },
+    { key: "/data-screen", title: "数据大屏", desc: "可视化数据展示", icon: <BarChartOutlined /> },
+    { key: "https://open.lovrabet.com", title: "查看文档", desc: "访问完整文档", icon: <FileTextOutlined />, external: true },
   ],
-
-  // 最近访问
   recentAccess: [
     { name: "SDK 演示", path: "/sdk-demo", time: "2 小时前" },
     { name: "数据看板", path: "/dashboard", time: "5 小时前" },
     { name: "数据大屏", path: "/data-screen", time: "1 天前" },
   ],
-
-  // 待办事项
   todos: [
-    {
-      id: 1,
-      title: "完成 SDK 集成文档",
-      priority: "high",
-      status: "pending",
-      dueDate: "2025-01-15",
-    },
-    {
-      id: 2,
-      title: "优化数据大屏性能",
-      priority: "medium",
-      status: "in-progress",
-      dueDate: "2025-01-20",
-    },
-    {
-      id: 3,
-      title: "更新 API 文档",
-      priority: "low",
-      status: "pending",
-      dueDate: "2025-01-25",
-    },
+    { title: "完成 SDK 集成文档", priority: "高", status: "pending", date: "2025-01-15" },
+    { title: "优化数据大屏性能", priority: "中", status: "progress", date: "2025-01-20" },
+    { title: "更新 API 文档", priority: "低", status: "pending", date: "2025-01-25" },
   ],
-
-  // 系统公告
   announcements: [
-    {
-      id: 1,
-      title: "SDK v1.1.22 版本发布",
-      content: "新增 filter 接口支持，支持复杂条件查询",
-      time: "2025-01-10",
-      type: "update",
-    },
-    {
-      id: 2,
-      title: "CLI v1.1.15 版本更新",
-      content: "优化菜单同步功能，支持中文菜单名",
-      time: "2025-01-08",
-      type: "feature",
-    },
-    {
-      id: 3,
-      title: "文档中心更新",
-      content: "新增 API 使用指南和最佳实践",
-      time: "2025-01-05",
-      type: "info",
-    },
+    { title: "SDK v1.1.22 版本发布", content: "新增 filter 接口支持，支持复杂条件查询", time: "2025-01-10" },
+    { title: "CLI v1.1.15 版本更新", content: "优化菜单同步功能，支持中文菜单名", time: "2025-01-08" },
+    { title: "文档中心更新", content: "新增 API 使用指南和最佳实践", time: "2025-01-05" },
   ],
 };
 
 const Workbench: React.FC = () => {
   const navigate = useNavigate();
-  const [todos] = useState(mockData.todos);
-
-  const handleQuickAction = (action: any) => {
-    if (action.external) {
-      window.open(action.key, "_blank");
-    } else {
-      navigate(action.key);
-    }
-  };
-
-  const getPriorityColor = (priority: string) => {
-    const colors: Record<string, string> = {
-      high: "red",
-      medium: "orange",
-      low: "blue",
-    };
-    return colors[priority] || "default";
-  };
 
   const getStatusIcon = (status: string) => {
-    if (status === "completed") {
-      return <CheckCircleOutlined style={{ color: "#52c41a" }} />;
-    }
-    if (status === "in-progress") {
-      return <ClockCircleOutlined style={{ color: "#1890ff" }} />;
-    }
-    return <ExclamationCircleOutlined style={{ color: "#fa8c16" }} />;
+    if (status === "done") return <CheckCircleOutlined style={{ color: "#34c759" }} />;
+    if (status === "progress") return <ClockCircleOutlined style={{ color: "#007aff" }} />;
+    return <ExclamationCircleOutlined style={{ color: "#ff9500" }} />;
   };
 
-  const getAnnouncementIcon = (type: string) => {
-    const icons: Record<string, any> = {
-      update: <RocketOutlined style={{ color: "#1890ff" }} />,
-      feature: <TrophyOutlined style={{ color: "#52c41a" }} />,
-      info: <FileTextOutlined style={{ color: "#fa8c16" }} />,
-    };
-    return icons[type] || <FileTextOutlined />;
+  const getPriorityClass = (priority: string) => {
+    const map: Record<string, string> = { 高: "high", 中: "medium", 低: "low" };
+    return map[priority] || "low";
   };
 
   return (
-    <div>
-      {/* 欢迎区域 */}
-      <Card
-        style={{
-          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-          border: "none",
-          marginBottom: 24,
-        }}
-      >
-        <Row align="middle" gutter={24}>
-          <Col xs={24} md={16}>
-            <Title level={2} style={{ color: "#fff", margin: 0 }}>
-              <RocketOutlined /> 工作台
-            </Title>
-            <Paragraph style={{ color: "#fff", fontSize: 16, marginTop: 8, marginBottom: 0 }}>
-              欢迎回来！这里是您的开发工作台，可以快速访问常用功能和查看系统状态。
-            </Paragraph>
-          </Col>
-          <Col xs={24} md={8} style={{ textAlign: "right" }}>
-            <Space>
-              <Button
-                type="primary"
-                size="large"
-                icon={<FileTextOutlined />}
-                href="https://open.lovrabet.com"
-                target="_blank"
-                style={{
-                  background: "#fff",
-                  color: "#667eea",
-                  border: "none",
-                }}
-              >
-                查看文档
-              </Button>
-            </Space>
-          </Col>
-        </Row>
-      </Card>
-
-      {/* 统计数据 */}
-      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
-        {mockData.statistics.map((stat, index) => (
-          <Col xs={24} sm={12} lg={6} key={index}>
-            <Card>
-              <Statistic
-                title={stat.title}
-                value={stat.value}
-                prefix={
-                  <span style={{ color: stat.color, marginRight: 8 }}>
-                    {stat.prefix}
-                  </span>
-                }
-                suffix={stat.suffix}
-                valueStyle={{ color: stat.color, fontSize: 24, fontWeight: "bold" }}
-              />
-              <div style={{ marginTop: 8, fontSize: 12, color: "#52c41a" }}>
-                {stat.trend} 较昨日
-              </div>
-            </Card>
-          </Col>
+    <div className={styles.page}>
+      {/* 欢迎区 */}
+      <div className={styles.welcome}>
+        <h2>工作台</h2>
+        <p>欢迎回来，这里是您的开发工作台</p>
+      </div>
+
+      {/* 统计数据 - Bento Grid */}
+      <div className={styles.bentoGrid}>
+        {mockData.statistics.map((item, i) => (
+          <div key={i} className={styles.statCard}>
+            <div className={styles.statLabel}>{item.title}</div>
+            <div className={styles.statValue}>{item.value}</div>
+            <div className={styles.statTrend}>{item.trend} 较昨日</div>
+          </div>
         ))}
-      </Row>
+      </div>
 
-      <Row gutter={[16, 16]}>
+      <div className={styles.row}>
         {/* 快捷操作 */}
-        <Col xs={24} lg={12}>
-          <Card
-            title={
-              <Space>
-                <RocketOutlined style={{ color: "#1890ff" }} />
-                <span>快捷操作</span>
-              </Space>
-            }
-            style={{ height: "100%" }}
-          >
-            <Row gutter={[12, 12]}>
-              {mockData.quickActions.map((action) => (
-                <Col xs={12} sm={12} key={action.key}>
-                  <Card
-                    hoverable
-                    onClick={() => handleQuickAction(action)}
-                    style={{
-                      textAlign: "center",
-                      cursor: "pointer",
-                      border: `1px solid ${action.color}20`,
-                    }}
-                    bodyStyle={{ padding: 16 }}
-                  >
-                    <div
-                      style={{
-                        fontSize: 32,
-                        color: action.color,
-                        marginBottom: 8,
-                      }}
-                    >
-                      {action.icon}
-                    </div>
-                    <div style={{ fontWeight: "bold", marginBottom: 4 }}>
-                      {action.title}
-                    </div>
-                    <div style={{ fontSize: 12, color: "#666" }}>
-                      {action.description}
-                    </div>
-                  </Card>
-                </Col>
+        <div className={styles.card}>
+          <div className={styles.cardHead}>快捷操作</div>
+          <div className={styles.cardBody}>
+            <div className={styles.actions}>
+              {mockData.quickActions.map((item) => (
+                <div
+                  key={item.key}
+                  className={styles.actionItem}
+                  onClick={() => item.external ? window.open(item.key, "_blank") : navigate(item.key)}
+                >
+                  <div className={styles.actionIcon}>{item.icon}</div>
+                  <div className={styles.actionTitle}>{item.title}</div>
+                  <div className={styles.actionDesc}>{item.desc}</div>
+                </div>
               ))}
-            </Row>
-          </Card>
-        </Col>
+            </div>
+          </div>
+        </div>
 
         {/* 最近访问 */}
-        <Col xs={24} lg={12}>
-          <Card
-            title={
-              <Space>
-                <ClockCircleOutlined style={{ color: "#1890ff" }} />
-                <span>最近访问</span>
-              </Space>
-            }
-            style={{ height: "100%" }}
-          >
-            {mockData.recentAccess.length > 0 ? (
-              <List
-                dataSource={mockData.recentAccess}
-                renderItem={(item) => (
-                  <List.Item
-                    style={{ cursor: "pointer", padding: "12px 0" }}
-                    onClick={() => navigate(item.path)}
-                    actions={[
-                      <Button
-                        type="link"
-                        icon={<ArrowRightOutlined />}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate(item.path);
-                        }}
-                      />,
-                    ]}
-                  >
-                    <List.Item.Meta
-                      avatar={
-                        <Avatar
-                          style={{
-                            background: "#1890ff",
-                          }}
-                          icon={<FileTextOutlined />}
-                        />
-                      }
-                      title={item.name}
-                      description={
-                        <Text type="secondary" style={{ fontSize: 12 }}>
-                          {item.time}
-                        </Text>
-                      }
-                    />
-                  </List.Item>
-                )}
-              />
-            ) : (
-              <Empty description="暂无访问记录" />
-            )}
-          </Card>
-        </Col>
+        <div className={styles.card}>
+          <div className={styles.cardHead}>最近访问</div>
+          <div className={styles.cardBody}>
+            {mockData.recentAccess.map((item, i) => (
+              <div key={i} className={styles.listItem} onClick={() => navigate(item.path)}>
+                <div className={styles.listMain}>
+                  <div className={styles.listAvatar}><FileTextOutlined /></div>
+                  <div>
+                    <div className={styles.listName}>{item.name}</div>
+                    <div className={styles.listTime}>{item.time}</div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
 
         {/* 待办事项 */}
-        <Col xs={24} lg={12}>
-          <Card
-            title={
-              <Space>
-                <ExclamationCircleOutlined style={{ color: "#fa8c16" }} />
-                <span>待办事项</span>
-                <Tag color="red">{todos.filter((t) => t.status === "pending").length}</Tag>
-              </Space>
-            }
-            style={{ height: "100%" }}
-          >
-            {todos.length > 0 ? (
-              <List
-                dataSource={todos}
-                renderItem={(item) => (
-                  <List.Item>
-                    <List.Item.Meta
-                      avatar={getStatusIcon(item.status)}
-                      title={
-                        <Space>
-                          <span>{item.title}</span>
-                          <Tag color={getPriorityColor(item.priority)}>
-                            {item.priority === "high"
-                              ? "高"
-                              : item.priority === "medium"
-                                ? "中"
-                                : "低"}
-                          </Tag>
-                        </Space>
-                      }
-                      description={
-                        <div>
-                          <Text type="secondary" style={{ fontSize: 12 }}>
-                            截止日期：{item.dueDate}
-                          </Text>
-                          <div style={{ marginTop: 8 }}>
-                            <Progress
-                              percent={
-                                item.status === "completed"
-                                  ? 100
-                                  : item.status === "in-progress"
-                                    ? 50
-                                    : 0
-                              }
-                              size="small"
-                              status={
-                                item.status === "completed" ? "success" : "active"
-                              }
-                            />
-                          </div>
-                        </div>
-                      }
-                    />
-                  </List.Item>
-                )}
-              />
-            ) : (
-              <Empty description="暂无待办事项" />
-            )}
-          </Card>
-        </Col>
+        <div className={styles.card}>
+          <div className={styles.cardHead}>待办事项</div>
+          <div className={styles.cardBody}>
+            {mockData.todos.map((item, i) => (
+              <div key={i} className={styles.todoItem}>
+                <div className={styles.todoHeader}>
+                  {getStatusIcon(item.status)}
+                  <span className={styles.todoTitle}>{item.title}</span>
+                  <span className={`${styles.todoTag} ${styles.todoTag[getPriorityClass(item.priority)]}`}>{item.priority}</span>
+                </div>
+                <div className={styles.todoDate}>截止：{item.date}</div>
+              </div>
+            ))}
+          </div>
+        </div>
 
         {/* 系统公告 */}
-        <Col xs={24} lg={12}>
-          <Card
-            title={
-              <Space>
-                <FileTextOutlined style={{ color: "#1890ff" }} />
-                <span>系统公告</span>
-              </Space>
-            }
-            style={{ height: "100%" }}
-          >
-            <Timeline
-              items={mockData.announcements.map((announcement) => ({
-                dot: getAnnouncementIcon(announcement.type),
-                children: (
-                  <div>
-                    <div style={{ fontWeight: "bold", marginBottom: 4 }}>
-                      {announcement.title}
-                    </div>
-                    <div style={{ color: "#666", fontSize: 13, marginBottom: 4 }}>
-                      {announcement.content}
-                    </div>
-                    <Text type="secondary" style={{ fontSize: 12 }}>
-                      {announcement.time}
-                    </Text>
-                  </div>
-                ),
-              }))}
-            />
-          </Card>
-        </Col>
-      </Row>
+        <div className={styles.card}>
+          <div className={styles.cardHead}>系统公告</div>
+          <div className={styles.cardBody}>
+            {mockData.announcements.map((item, i) => (
+              <div key={i} className={styles.timelineItem}>
+                <div className={styles.timelineTitle}>{item.title}</div>
+                <div className={styles.timelineContent}>{item.content}</div>
+                <div className={styles.timelineTime}>{item.time}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
 
 export default Workbench;
-

package/templates/projects/sub-app-react-demo/src/style.css

@@ -24,22 +24,22 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
+  background: #d1d5db;
   border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
+  background: #9ca3af;
 }
 
-/* 自定义菜单样式 - B端专业风格 */
+/* 自定义菜单样式 */
 .custom-menu.ant-menu {
-  background: #fafafa !important;
+  border-right: none !important;
+  background: #fff !important;
 }
 
 .custom-menu .ant-menu-item {
@@ -47,19 +47,10 @@ body {
   border-radius: 4px !important;
   height: 40px !important;
   line-height: 40px !important;
-  color: #262626 !important;
-}
-
-.custom-menu .ant-menu-item-icon {
   color: #595959 !important;
 }
 
 .custom-menu .ant-menu-item:hover {
-  background: #e6f7ff !important;
-  color: #1890ff !important;
-}
-
-.custom-menu .ant-menu-item:hover .ant-menu-item-icon {
   color: #1890ff !important;
 }
 
@@ -84,3 +75,18 @@ body {
     z-index: 999;
   }
 }
+
+/* 面包屑导航颜色 */
+.ant-breadcrumb-link {
+  color: #595959 !important;
+}
+
+.ant-breadcrumb-separator {
+  color: #d9d9d9 !important;
+}
+
+/* 最后一个面包屑（当前页面）颜色更深 */
+.ant-breadcrumb-item:last-child .ant-breadcrumb-link {
+  color: #262626 !important;
+  font-weight: 500 !important;
+}

package/templates/projects/sub-app-react-demo/vite.config.ts

@@ -59,19 +59,24 @@ export default defineConfig(async ({ mode }) => {
     // 这些配置不是必须的，你也可以使用 proxy 等任意手段自行处理跨域问题
     server: isDev
       ? {
-        port,
-        open: `https://dev.lovrabet.com:${port}`,
-        strictPort: true,
-        host: "0.0.0.0",
-        https: httpsConfig,
-        headers: {
-          "Access-Control-Allow-Origin": "*",
-          "Access-Control-Allow-Methods":
-            "GET, POST, PUT, DELETE, PATCH, OPTIONS",
-          "Access-Control-Allow-Headers":
-            "X-Requested-With, Content-Type, Authorization",
-        },
-      }
+          port,
+          open: `https://dev.lovrabet.com:${port}`,
+          strictPort: true,
+          host: "0.0.0.0",
+          https: httpsConfig,
+          hmr: {
+            host: "dev.lovrabet.com",
+            port: 5173,
+            protocol: "wss",
+          },
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods":
+              "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+            "Access-Control-Allow-Headers":
+              "X-Requested-With, Content-Type, Authorization",
+          },
+        }
       : undefined,
     // preview 模式也使用 https
     preview: {