@lovrabet/cli 1.1.0

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

@@ -0,0 +1,182 @@
+import React, { useState } from "react";
+import { Button, Table, Card, Typography, Space, message } from "antd";
+import { ApiOutlined } from "@ant-design/icons";
+import { lovrabetClient } from "../../api/client";
+
+const { Title, Paragraph } = Typography;
+
+export default function SdkDemo() {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<any[]>([]);
+  const [columns, setColumns] = useState<any[]>([]);
+
+  /**
+   * 语法糖模式 - 最优雅的调用方式
+   */
+  const loadDataWithSyntaxSugar = async () => {
+    setLoading(true);
+
+    try {
+      // 1. 直接通过模型名访问 - 最优雅的方式
+      const response = await lovrabetClient.models.Requirements.getList({
+        currentPage: 1,
+        pageSize: 10,
+      });
+
+      processResponse(response, "语法糖模式调用成功！");
+    } catch (error: any) {
+      handleError(error, "语法糖模式");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * 正常调用模式 - 编程式调用方式
+   */
+  const loadDataWithNormalMode = async () => {
+    setLoading(true);
+
+    try {
+      // 1. 先获取模型实例
+      const model = lovrabetClient.getModel('Requirements');
+
+      // 2. 调用模型方法
+      const response = await model.getList({
+        currentPage: 1,
+        pageSize: 10,
+      });
+
+      processResponse(response, "正常模式调用成功！");
+    } catch (error: any) {
+      handleError(error, "正常模式");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * 处理响应数据
+   */
+  const processResponse = (response: any, successMessage: string) => {
+    // 处理返回的数据
+    setData(response.tableData || []);
+
+    // 动态生成表格列
+    if (response.tableColumns) {
+      const tableColumns = response.tableColumns.map((column: any) => ({
+        title: column.title || column.dataIndex,
+        dataIndex: column.dataIndex,
+        key: column.dataIndex,
+      }));
+      setColumns(tableColumns);
+    }
+
+    message.success(successMessage);
+  };
+
+  /**
+   * 处理错误
+   */
+  const handleError = (error: any, mode: string) => {
+    console.error(`${mode}加载失败:`, error);
+    message.error(`${mode}加载失败: ${error.message}`);
+  };
+
+  return (
+    <div style={{ padding: "24px" }}>
+      {/* 标题 */}
+      <Title level={2}>
+        <ApiOutlined /> Lovrabet SDK 简单演示
+      </Title>
+
+      <Paragraph style={{ color: "#666", marginBottom: 24 }}>
+        演示 Lovrabet SDK 的两种调用方式。对比体验语法糖模式和正常模式的差异。
+      </Paragraph>
+
+      {/* 操作按钮 */}
+      <Space style={{ marginBottom: 16 }}>
+        <Button
+          type="primary"
+          loading={loading}
+          onClick={loadDataWithSyntaxSugar}
+          icon={<ApiOutlined />}
+        >
+          🍬 语法糖模式
+        </Button>
+        <Button
+          loading={loading}
+          onClick={loadDataWithNormalMode}
+          icon={<ApiOutlined />}
+        >
+          🔧 正常模式
+        </Button>
+      </Space>
+
+      {/* 代码示例 */}
+      <Card title="两种调用方式对比" size="small" style={{ marginBottom: 16 }}>
+        <div style={{ display: 'flex', gap: '16px' }}>
+          {/* 语法糖模式 */}
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#1890ff' }}>
+              🍬 语法糖模式（推荐）
+            </div>
+            <pre style={{
+              background: "#f0f8ff",
+              padding: "12px",
+              borderRadius: "4px",
+              margin: 0,
+              fontSize: "13px",
+              border: "1px solid #1890ff"
+            }}>
+              {`// 一行代码搞定！
+const response = await lovrabetClient
+  .models.Requirements.getList({
+    currentPage: 1,
+    pageSize: 10
+  });`}
+            </pre>
+          </div>
+
+          {/* 正常模式 */}
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 'bold', marginBottom: '8px', color: '#666' }}>
+              🔧 正常模式
+            </div>
+            <pre style={{
+              background: "#f5f5f5",
+              padding: "12px",
+              borderRadius: "4px",
+              margin: 0,
+              fontSize: "13px",
+              border: "1px solid #d9d9d9"
+            }}>
+              {`// 分步骤调用
+const model = lovrabetClient
+  .getModel('Requirements');
+
+const response = await model.getList({
+  currentPage: 1,
+  pageSize: 10
+});`}
+            </pre>
+          </div>
+        </div>
+      </Card>
+
+      {/* 数据表格 */}
+      {data.length > 0 && (
+        <Card title="数据结果" size="small">
+          <Table
+            columns={columns}
+            dataSource={data}
+            rowKey={(_, index) => index?.toString() || "0"}
+            pagination={false}
+            size="small"
+            scroll={{ x: true }}
+          />
+        </Card>
+      )}
+    </div>
+  );
+}

package/templates/projects/sub-app-react-demo/src/pages/table-display.tsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from "react";
+import { Card, Spin, Alert, Typography, Table } from "antd";
+import ApiUrlDisplay from "../components/ApiUrlDisplay";
+import { apiRequest } from "../utils/api";
+
+const { Title, Paragraph } = Typography;
+
+const API_URL = "/api/app-c4055413/76a873945291498498737bc85677983d/getList";
+
+function TableDisplay() {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [tableData, setTableData] = useState([]);
+  const [columns, setColumns] = useState([]);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+  });
+
+  const fetchData = async (page: number = 1, size: number = 20) => {
+    try {
+      setLoading(true);
+      // 数据表格接口
+      const data = await apiRequest(API_URL, {
+        method: "POST",
+        body: JSON.stringify({ pageSize: size, currentPage: page }),
+      });
+
+      if (data.success) {
+        // 设置表格数据
+        setTableData(data.data.tableData || []);
+
+        // 设置分页信息
+        setPagination({
+          current: data.data.paging?.currentPage || page,
+          pageSize: data.data.paging?.pageSize || size,
+          total: data.data.paging?.totalCount || 0,
+        });
+
+        // 根据 tableColumns 动态生成表格列配置
+        if (data.data.tableColumns && data.data.tableColumns.length > 0) {
+          const tableColumns = data.data.tableColumns.map((column: any) => ({
+            title: column.title || column.dataIndex,
+            dataIndex: column.dataIndex,
+            key: column.dataIndex,
+            width: 150,
+            ellipsis: true,
+            render: (text: any) => {
+              // 处理复杂数据类型的显示
+              if (Array.isArray(text) && text.length > 0 && text[0]?.label) {
+                return text.map((item: any) => item.label).join(", ");
+              }
+              if (typeof text === "object" && text !== null) {
+                return JSON.stringify(text);
+              }
+              return text;
+            },
+          }));
+          setColumns(tableColumns);
+        }
+      }
+    } catch (err: any) {
+      console.error("数据获取失败:", err);
+      setError(err.message || "表格数据加载失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const handleTableChange = (paginationConfig: any) => {
+    fetchData(paginationConfig.current, paginationConfig.pageSize);
+  };
+
+  return (
+    <div style={{ padding: "24px" }}>
+      <Card>
+        <Title level={2}>数据表格展示</Title>
+        <Paragraph>
+          这是一个从真实API获取数据并展示的表格示例，展示了接口返回的tableData中的所有数据。
+        </Paragraph>
+        <Paragraph>数据来源：{API_URL}</Paragraph>
+        <Paragraph>
+          访问请先确保：1. app.lovrabet.com已登录 2.应用有权限 3. 接口有权限
+        </Paragraph>
+      </Card>
+
+      <Card style={{ marginTop: "24px" }}>
+        {loading ? (
+          <div style={{ textAlign: "center", padding: "50px" }}>
+            <Spin size="large" tip="正在加载表格数据..." />
+          </div>
+        ) : error ? (
+          <Alert
+            message="表格数据加载失败，请检查接口权限，可以替换为自己有权限的接口"
+            description={error}
+            type="error"
+            showIcon
+          />
+        ) : (
+          <>
+            <Table
+              dataSource={tableData}
+              columns={columns}
+              pagination={{
+                ...pagination,
+                showSizeChanger: true,
+                showQuickJumper: true,
+                showTotal: (total, range) =>
+                  `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
+                pageSizeOptions: ["10", "20", "50", "100"],
+              }}
+              scroll={{ x: 1200 }}
+              onChange={handleTableChange}
+              rowKey={(record, index) => `${record.id || index}`}
+              size="middle"
+            />
+            <ApiUrlDisplay apiUrl={API_URL} />
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+export default TableDisplay;

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,47 @@
+* {
+  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: #f1f1f1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .ant-layout-sider {
+    position: fixed !important;
+    height: 100vh;
+    z-index: 999;
+  }
+}

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"]
+}

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

@@ -0,0 +1,88 @@
+import { defineConfig, loadEnv } from "vite";
+import { dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+import htmlPlugin from "vite-plugin-index-html";
+import pluginExternal from "vite-plugin-external";
+import Pages from "vite-plugin-pages";
+import pkgJson from "./package.json";
+
+const version = pkgJson.version;
+const appName = pkgJson.name.split("/").pop();
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// https://vitejs.dev/config/
+export default defineConfig(async ({ mode }) => {
+  const env = loadEnv(mode, __dirname);
+  const isDev = mode === "development";
+  const port = Number(env.PORT) || 5173;
+  const isCdn = !isDev && Boolean(process.env.CDN_DOMAIN);
+  const outDir = isCdn ? `dist/${appName}/${version}` : "dist";
+  const base = isCdn ? `${process.env.CDN_DOMAIN}${outDir}/` : "/";
+
+  return {
+    base,
+    envDir: __dirname,
+    plugins: [
+      react(),
+      Pages({
+        dirs: "src/pages",
+        extensions: ["tsx"],
+        routeStyle: "remix", // 使用 remix 风格，更好兼容 React Router v6
+        importMode: "sync", // 使用同步导入避免 Suspense 问题
+      }),
+      htmlPlugin({
+        input: "/src/main.tsx", // 使用绝对路径避免嵌套路由问题
+        preserveEntrySignatures: "exports-only",
+      }),
+      pluginExternal({
+        externals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          antd: "antd",
+          dayjs: "dayjs",
+        },
+      }),
+    ],
+    resolve: {
+      alias: {
+        "@": "/src",
+      },
+    },
+    // 可选配置：提供https自签名证书及跨域访问能力
+    // 因为接口域名为 runtime.lovrabet.com 存在跨域，服务端配置了允许 dev.lovrabet.com 的跨域请求，从而实现本地开发能够正常请求接口
+    // 这些配置不是必须的，你也可以使用 proxy 等任意手段自行处理跨域问题
+    server: isDev
+      ? {
+          port,
+          open: `https://dev.lovrabet.com:${port}`,
+          strictPort: true,
+          host: "0.0.0.0",
+          https: await (
+            await fetch("https://g.yuntooai.com/cert/lovrabet-dev.json")
+          ).json(),
+          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,
+    build: {
+      outDir,
+      target: "esnext",
+      rollupOptions: {
+        output: {
+          format: "es" as const,
+          entryFileNames: `assets/[name].js`,
+          assetFileNames: `assets/[name].css`,
+        },
+      },
+    },
+    optimizeDeps: {
+      include: ["react", "react-dom", "antd", "dayjs"],
+    },
+  };
+});