@lovrabet/rabetbase-cli 2.0.2-beta.1

package/templates/projects/sub-app-react-demo/src/api/api.ts

@@ -0,0 +1,83 @@
+/**
+ * Generated by Lovrabet CLI
+ * Created: 2026-01-16T10:07:17.932Z
+ *
+ * 这个文件包含了项目的模型配置，并自动注册到 SDK 中
+ * CLI 工具会自动维护这个文件，通常不需要手动修改
+ */
+
+import { registerModels, CONFIG_NAMES, type ModelsConfig } from "@lovrabet/sdk";
+
+export const RABETBASE_APP_CODE = "app-c4c89304";
+
+/**
+ * 项目的模型配置
+ * 使用数组格式，每个模型包含 datasetCode、tableName、name 和可选的 alias
+ *
+ * 访问方式：
+ * - 标准访问：client.models.dataset_[datasetCode]
+ * - 别名访问：client.models.[alias]（如果配置了 alias）
+ */
+export const RABETBASE_MODELS_CONFIG: ModelsConfig = {
+  appCode: RABETBASE_APP_CODE,
+  models: [
+    {
+      datasetCode: "3ff202af07164d0a9c5df7ddd8f83c23",
+      tableName: "dataset_f83c23",
+      name: "客户访谈记录",
+      alias: "datasetF83c23",
+    },
+    {
+      datasetCode: "a60f11c17c5344e7a26d5144212cf366",
+      tableName: "iterations",
+      name: "迭代信息",
+      alias: "iterations",
+    },
+    {
+      datasetCode: "d26ed512e878461ca97d287a47606fd3",
+      tableName: "requirements",
+      name: "需求",
+      alias: "requirements",
+    },
+    {
+      datasetCode: "f17f1ee941c1468e87e6a0ca655ce00e",
+      tableName: "requirement_types",
+      name: "需求类型",
+      alias: "requirementTypes",
+    },
+    {
+      datasetCode: "c6e55d6720b84ffcb21698b0a04ccd23",
+      tableName: "projects",
+      name: "项目",
+      alias: "projects",
+    },
+    {
+      datasetCode: "71494bcba13f4ec7858abe90794183ad",
+      tableName: "project_members",
+      name: "项目成员",
+      alias: "projectMembers",
+    },
+  ],
+} as const;
+
+/**
+ * 自动注册配置
+ * 配置名称: CONFIG_NAMES.DEFAULT
+ */
+registerModels(RABETBASE_MODELS_CONFIG, CONFIG_NAMES.DEFAULT);
+
+/**
+ * 如果需要支持多项目或多环境，可以注册额外的配置：
+ *
+ * // 开发环境配置
+ * registerModels({
+ *   appCode: 'app-dev-123',
+ *   models: [...]
+ * }, 'dev');
+ *
+ * // 其他项目配置
+ * registerModels({
+ *   appCode: 'other-project',
+ *   models: [...]
+ * }, 'project-b');
+ */

package/templates/projects/sub-app-react-demo/src/api/client.ts

@@ -0,0 +1,64 @@
+/**
+ * Lovrabet SDK 客户端实例
+ * Generated by Lovrabet CLI
+ * Created: 2026-01-16T10:07:17.967Z
+ *
+ * 这个文件负责创建和导出统一的客户端实例，供整个应用使用
+ * 通过导入 './api' 文件来自动执行配置注册
+ */
+
+import { createClient, CONFIG_NAMES } from "@lovrabet/sdk";
+import "./api"; // 导入配置文件，执行 registerModels() 注册
+
+/**
+ * 主要的客户端实例
+ * 使用配置名称 'CONFIG_NAMES.DEFAULT' 创建客户端
+ */
+export const lovrabetClient = createClient();
+
+/**
+ * 使用示例：
+ *
+ * // 在组件中使用
+ * import { lovrabetClient } from '@/api/client';
+ *
+ * // 获取数据列表
+ * const data = await lovrabetClient.models.datasetF83c23.getList({
+ *   currentPage: 1,
+ *   pageSize: 20
+ * });
+ *
+ * // 获取单条记录
+ * const record = await lovrabetClient.models.datasetF83c23.getOne('123');
+ *
+ * // 创建新记录
+ * const newRecord = await lovrabetClient.models.datasetF83c23.create({
+ *   // 记录数据
+ * });
+ */
+
+/**
+ * 其他创建客户端的方式（根据需要选择）：
+ *
+ * 1. 使用默认配置（无参数调用）：
+ * export const lovrabetClient = createClient();
+ *
+ * 2. 使用其他已注册的配置：
+ * export const devClient = createClient('dev');
+ * export const prodClient = createClient('prod');
+ *
+ * 3. 直接传入配置对象：
+ * import { RABETBASE_MODELS_CONFIG } from './api';
+ * export const lovrabetClient = createClient(RABETBASE_MODELS_CONFIG);
+ *
+ * 4. 通过 ClientConfig 指定配置名和其他选项：
+ * export const lovrabetClient = createClient({
+ *   apiConfigName: 'default',
+ *   token: 'custom-token',
+ *   env: 'daily'
+ * });
+ *
+ * 5. 多项目支持示例：
+ * export const projectAClient = createClient('project-a');
+ * export const projectBClient = createClient('project-b');
+ */

package/templates/projects/sub-app-react-demo/src/layouts/MainLayout.tsx

@@ -0,0 +1,311 @@
+import React, { useState } from "react";
+import { isInIcestark } from "@ice/stark-app";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
+import {
+  Layout,
+  Menu,
+  Button,
+  Breadcrumb,
+  Avatar,
+  Space,
+  Dropdown,
+} from "antd";
+import type { MenuProps } from "antd";
+import {
+  HomeOutlined,
+  DashboardOutlined,
+  ApiOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  UserOutlined,
+  BarChartOutlined,
+  FileTextOutlined,
+  AuditOutlined,
+} from "@ant-design/icons";
+
+const { Header, Sider, Content } = Layout;
+
+// 路由配置，用于生成面包屑
+const routeConfig = [
+  { path: "/", title: "首页" },
+  { path: "/workbench", title: "工作台" },
+  { path: "/dashboard", title: "数据看板" },
+  { path: "/sdk-demo", title: "SDK 演示" },
+  { path: "/data-screen", title: "数据大屏" },
+  { path: "/ceo-audit", title: "CEO 审计" },
+];
+
+const MainLayout: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // 菜单收起/展开状态
+  const [collapsed, setCollapsed] = useState(false);
+  // 菜单是否完全隐藏
+  const [menuHidden, setMenuHidden] = useState(false);
+
+  const menuItems: MenuProps["items"] = [
+    {
+      key: "/",
+      icon: <HomeOutlined />,
+      label: "首页",
+    },
+    {
+      key: "/sdk-demo",
+      icon: <ApiOutlined />,
+      label: "SDK 演示",
+    },
+    {
+      key: "page-examples",
+      icon: <FileTextOutlined />,
+      label: "页面案例",
+      children: [
+        {
+          key: "/workbench",
+          icon: <DashboardOutlined />,
+          label: "工作台",
+        },
+        {
+          key: "/dashboard",
+          icon: <DashboardOutlined />,
+          label: "数据看板",
+        },
+        {
+          key: "/data-screen",
+          icon: <BarChartOutlined />,
+          label: "数据大屏",
+        },
+      ],
+    },
+  ];
+
+  const handleMenuClick = ({ key }: { key: string }) => {
+    // 如果是外部链接（以 http:// 或 https:// 开头），在新标签页打开
+    if (key.startsWith("http://") || key.startsWith("https://")) {
+      window.open(key, "_blank", "noopener,noreferrer");
+    } else {
+      navigate(key);
+    }
+  };
+
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const toggleMenuHidden = () => {
+    setMenuHidden(!menuHidden);
+    // 如果隐藏菜单，同时收起菜单
+    if (!menuHidden) {
+      setCollapsed(true);
+    }
+  };
+
+  // 生成面包屑
+  const getBreadcrumbItems = () => {
+    const items: any[] = [{ title: "首页" }];
+    const currentRoute = routeConfig.find((r) => r.path === location.pathname);
+    if (currentRoute && currentRoute.path !== "/") {
+      items.push({ title: currentRoute.title });
+    }
+    return items;
+  };
+
+  // 用户菜单
+  const userMenuItems: MenuProps["items"] = [
+    {
+      key: "profile",
+      label: "个人中心",
+      icon: <UserOutlined />,
+    },
+    {
+      key: "settings",
+      label: "系统设置",
+    },
+    {
+      type: "divider",
+    },
+    {
+      key: "logout",
+      label: "退出登录",
+      danger: true,
+    },
+  ];
+
+  // 可选：根据isInIcestark()判断当前运行环境，被嵌入时，不渲染layout布局
+  if (isInIcestark()) {
+    return <Outlet />;
+  }
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      {!menuHidden && (
+        <Sider
+          trigger={null}
+          collapsible
+          collapsed={collapsed}
+          width={220}
+          style={{ background: "#fff" }}
+        >
+          {/* 系统标题 */}
+          <div
+            style={{
+              height: 64,
+              padding: collapsed ? "16px 8px" : "16px 20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: collapsed ? "center" : "flex-start",
+              background: "#fff",
+              borderBottom: "1px solid #f0f0f0",
+            }}
+          >
+            {!collapsed ? (
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <img
+                  src="/logo.svg"
+                  alt="Logo"
+                  style={{ height: 28, width: 28 }}
+                />
+                <span
+                  style={{
+                    fontSize: 16,
+                    fontWeight: 600,
+                  }}
+                >
+                  Lovrabet System
+                </span>
+              </div>
+            ) : (
+              <img
+                src="/logo.svg"
+                alt="Logo"
+                style={{ height: 28, width: 28 }}
+              />
+            )}
+          </div>
+          <Menu
+            mode="inline"
+            selectedKeys={[location.pathname]}
+            items={menuItems}
+            onClick={handleMenuClick}
+            style={{
+              height: "calc(100vh - 64px)",
+              borderRight: 0,
+            }}
+            className="custom-menu"
+          />
+        </Sider>
+      )}
+      <Layout>
+        <Header
+          style={{
+            padding: "0 24px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            boxShadow: "0 2px 8px 0 rgba(29,35,41,.05)",
+            height: 64,
+            background: "#fff",
+            borderBottom: "1px solid #f0f0f0",
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+            <Button
+              type="text"
+              icon={
+                menuHidden ? (
+                  <MenuUnfoldOutlined />
+                ) : collapsed ? (
+                  <MenuUnfoldOutlined />
+                ) : (
+                  <MenuFoldOutlined />
+                )
+              }
+              onClick={menuHidden ? toggleMenuHidden : toggleCollapsed}
+              style={{
+                fontSize: 16,
+                width: 40,
+                height: 40,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            />
+            {menuHidden && (
+              <Button
+                type="text"
+                icon={<MenuUnfoldOutlined />}
+                onClick={toggleMenuHidden}
+                style={{
+                  fontSize: 14,
+                  height: 32,
+                }}
+              >
+                显示菜单
+              </Button>
+            )}
+            {/* 面包屑导航 */}
+            <Breadcrumb
+              items={getBreadcrumbItems()}
+              style={{
+                marginLeft: menuHidden ? 0 : 16,
+                fontSize: 14,
+              }}
+              itemRender={(route, params, routes, paths) => {
+                const isLast = routes.indexOf(route) === routes.length - 1;
+                return (
+                  <span
+                    style={{
+                      color: isLast ? "#262626" : "#595959",
+                      fontWeight: isLast ? 500 : 400,
+                    }}
+                  >
+                    {route.title}
+                  </span>
+                );
+              }}
+            />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+            {/* 用户信息 */}
+            <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
+              <Space
+                style={{
+                  cursor: "pointer",
+                  padding: "4px 8px",
+                  borderRadius: 4,
+                  transition: "background 0.3s",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "rgba(0,0,0,0.06)";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "transparent";
+                }}
+              >
+                <Avatar
+                  size="small"
+                  icon={<UserOutlined />}
+                  style={{ background: "#1890ff" }}
+                />
+                <span style={{ fontSize: 14 }}>管理员</span>
+              </Space>
+            </Dropdown>
+          </div>
+        </Header>
+        <Content
+          style={{
+            margin: "16px",
+            padding: 24,
+            minHeight: 280,
+            background: "#fff",
+            borderRadius: 8,
+          }}
+        >
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default MainLayout;

package/templates/projects/sub-app-react-demo/src/main.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { isInIcestark } from "@ice/stark-app";
+import { ConfigProvider } from "antd";
+import zhCN from "antd/locale/zh_CN";
+import App from "./router";
+import "./style.css";
+
+// 可选：根据 isInIcestark() 判断当前的运行环境，可同时兼容独立使用和嵌入使用
+if (!isInIcestark()) {
+  const container = document.getElementById("root");
+  if (container) {
+    const root = createRoot(container);
+    root.render(
+      <ConfigProvider locale={zhCN}>
+        <App />
+      </ConfigProvider>,
+    );
+  }
+}
+
+// 关键：暴露 mount 供主应用加载时调用
+export function mount({
+  container,
+  customProps,
+}: {
+  container: HTMLElement;
+  customProps: object;
+}) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <ConfigProvider locale={zhCN}>
+        <App {...customProps} />
+      </ConfigProvider>
+    </React.StrictMode>,
+  );
+  return root;
+}
+
+// 关键：暴露 unmount 供主应用卸载时调用
+export function unmount({ container }: { container: HTMLElement }) {
+  // React 18 中不再需要手动卸载，但为了兼容性保留
+  const root = (container as any)._reactRoot;
+  if (root) {
+    root.unmount();
+  }
+}