@lovrabet/rabetbase-cli 2.0.2-beta.1

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

@@ -0,0 +1,293 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
+
+.page {
+  font-family: 'Noto Sans SC', system-ui, sans-serif;
+  background: #f5f5f7;
+  padding: 20px;
+  min-height: 100vh;
+  margin: -16px;
+  color: #1d1d1f;
+}
+
+/* 欢迎区域 - 简洁直接 */
+.welcome {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 20px;
+  border: 1px solid #e5e5e7;
+}
+
+.welcome h2 {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 6px 0;
+  color: #1d1d1f;
+}
+
+.welcome p {
+  font-size: 14px;
+  color: #86868b;
+  margin: 0;
+}
+
+/* Bento Grid 布局 */
+.bentoGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+/* 统计卡片 */
+.statCard {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1px solid #e5e5e7;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: default;
+}
+
+.statCard:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+}
+
+.statLabel {
+  font-size: 13px;
+  color: #86868b;
+  margin-bottom: 8px;
+}
+
+.statValue {
+  font-size: 28px;
+  font-weight: 600;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.statTrend {
+  font-size: 12px;
+  color: #34c759;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* 两列布局 */
+.row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+/* 通用卡片 */
+.card {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #e5e5e7;
+  overflow: hidden;
+}
+
+.cardHead {
+  padding: 16px 20px;
+  border-bottom: 1px solid #f5f5f7;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1d1d1f;
+}
+
+.cardBody {
+  padding: 16px 20px;
+}
+
+/* 快捷操作网格 */
+.actions {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.actionItem {
+  background: #f5f5f7;
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.actionItem:hover {
+  background: #fff;
+  border-color: #007aff;
+  transform: scale(1.02);
+  box-shadow: 0 2px 12px rgba(0, 122, 255, 0.1);
+}
+
+.actionIcon {
+  font-size: 28px;
+  color: #007aff;
+  margin-bottom: 10px;
+}
+
+.actionTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.actionDesc {
+  font-size: 12px;
+  color: #86868b;
+}
+
+/* 列表项 */
+.listItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f7;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  margin: 0 -20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.listItem:hover {
+  background: #f5f5f7;
+}
+
+.listItem:last-child {
+  border-bottom: none;
+}
+
+.listMain {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.listAvatar {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, #007aff, #5ac8fa);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 16px;
+}
+
+.listName {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d1d1f;
+}
+
+.listTime {
+  font-size: 12px;
+  color: #86868b;
+}
+
+/* 待办事项 */
+.todoItem {
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f7;
+}
+
+.todoItem:last-child {
+  border-bottom: none;
+}
+
+.todoHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.todoTitle {
+  font-size: 14px;
+  color: #1d1d1f;
+  flex: 1;
+}
+
+.todoTag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.todoTag.high {
+  background: #ff3b30;
+  color: #fff;
+}
+
+.todoTag.medium {
+  background: #ff9500;
+  color: #fff;
+}
+
+.todoTag.low {
+  background: #32d74b;
+  color: #fff;
+}
+
+.todoDate {
+  font-size: 12px;
+  color: #86868b;
+  padding-left: 28px;
+}
+
+/* 时间线 */
+.timelineItem {
+  padding: 12px 0;
+  border-bottom: 1px solid #f5f5f7;
+}
+
+.timelineItem:last-child {
+  border-bottom: none;
+}
+
+.timelineTitle {
+  font-size: 14px;
+  font-weight: 500;
+  color: #1d1d1f;
+  margin-bottom: 4px;
+}
+
+.timelineContent {
+  font-size: 13px;
+  color: #6e6e73;
+  margin-bottom: 4px;
+  line-height: 1.5;
+}
+
+.timelineTime {
+  font-size: 12px;
+  color: #86868b;
+}
+
+/* 响应式 */
+@media (max-width: 1024px) {
+  .bentoGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .bentoGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .row {
+    grid-template-columns: 1fr;
+  }
+}

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

@@ -0,0 +1,155 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import styles from "./index.module.css";
+import {
+  DashboardOutlined,
+  ApiOutlined,
+  BarChartOutlined,
+  FileTextOutlined,
+  UserOutlined,
+  ShoppingOutlined,
+  DollarOutlined,
+  TrophyOutlined,
+  ClockCircleOutlined,
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+} from "@ant-design/icons";
+
+const mockData = {
+  statistics: [
+    { 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 演示", 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: [
+    { 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: [
+    { 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 getStatusIcon = (status: string) => {
+    if (status === "done") return <CheckCircleOutlined style={{ color: "#34c759" }} />;
+    if (status === "progress") return <ClockCircleOutlined style={{ color: "#007aff" }} />;
+    return <ExclamationCircleOutlined style={{ color: "#ff9500" }} />;
+  };
+
+  const getPriorityClass = (priority: string) => {
+    const map: Record<string, string> = { 高: "high", 中: "medium", 低: "low" };
+    return map[priority] || "low";
+  };
+
+  return (
+    <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>
+        ))}
+      </div>
+
+      <div className={styles.row}>
+        {/* 快捷操作 */}
+        <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>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 最近访问 */}
+        <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>
+
+        {/* 待办事项 */}
+        <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>
+
+        {/* 系统公告 */}
+        <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/router/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import { getBasename } from "@ice/stark-app";
+import MainLayout from "../layouts/MainLayout";
+import routes from "~react-pages";
+
+const router = createBrowserRouter(
+  [
+    {
+      path: "/",
+      element: <MainLayout />,
+      children: routes,
+    },
+  ],
+  {
+    // 可选：通过getBasename()获取到微应用运行时的basename并传入
+    basename: getBasename() || "/",
+  },
+);
+
+// console.log("MicroAppRouter:", {
+//   routes: router.routes,
+//   basename: router.basename,
+// });
+
+const AppRouter: React.FC = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default AppRouter;

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

@@ -0,0 +1,92 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
+}
+
+/* 自定义滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* 自定义菜单样式 */
+.custom-menu.ant-menu {
+  border-right: none !important;
+  background: #fff !important;
+}
+
+.custom-menu .ant-menu-item {
+  margin: 4px 8px !important;
+  border-radius: 4px !important;
+  height: 40px !important;
+  line-height: 40px !important;
+  color: #595959 !important;
+}
+
+.custom-menu .ant-menu-item:hover {
+  color: #1890ff !important;
+}
+
+.custom-menu .ant-menu-item-selected {
+  background: #1890ff !important;
+  color: #fff !important;
+}
+
+.custom-menu .ant-menu-item-selected .ant-menu-item-icon {
+  color: #fff !important;
+}
+
+.custom-menu .ant-menu-item-selected::after {
+  display: none !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .ant-layout-sider {
+    position: fixed !important;
+    height: 100vh;
+    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/src/utils/api.ts

@@ -0,0 +1,12 @@
+// 简单封装 apiRequest
+export const apiRequest = async (path: string, options: RequestInit = {}) => {
+  const response = await fetch(`https://runtime.lovrabet.com${path}`, {
+    credentials: "include", // 关键配置：跨域请求携带Cookie
+    headers: {
+      "Content-Type": "application/json",
+      ...(options.headers || {}),
+    },
+    ...options,
+  });
+  return response.json();
+};

package/templates/projects/sub-app-react-demo/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />

package/templates/projects/sub-app-react-demo/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": true,
+    "importHelpers": true,
+    "skipLibCheck": true,
+    "target": "es2017",
+    "module": "es2022",
+    "strict": false,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["ESNext", "DOM"],
+    "jsx": "react",
+    "declaration": true,
+    "downlevelIteration": true,
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "paths": {
+      "@": ["./src"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "types"]
+}