@lovrabet/cli 1.1.0

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

@@ -0,0 +1,63 @@
+/**
+ * Lovrabet SDK 客户端实例
+ *
+ * 这个文件负责创建和导出统一的客户端实例，供整个应用使用
+ * 通过导入 './api' 文件来自动执行配置注册
+ */
+
+import { createClient } from "@lovrabet/sdk";
+import "./api"; // 导入配置文件，执行 registerModels() 注册
+
+/**
+ * 主要的客户端实例
+ * 使用最简洁的方式创建：无参数调用，自动使用已注册的 'default' 配置
+ */
+export const lovrabetClient = createClient();
+
+/**
+ * 使用示例：
+ *
+ * // 在组件中使用
+ * import { lovrabetClient } from '@/api/client';
+ *
+ * // 获取数据列表
+ * const requirements = await lovrabetClient.models.Requirements.getList({
+ *   currentPage: 1,
+ *   pageSize: 20
+ * });
+ *
+ * // 获取单条记录
+ * const requirement = await lovrabetClient.models.Requirements.getOne('123');
+ *
+ * // 创建新记录
+ * const newRequirement = await lovrabetClient.models.Requirements.create({
+ *   title: '新需求',
+ *   description: '需求描述'
+ * });
+ */
+
+/**
+ * 其他创建客户端的方式（根据需要选择）：
+ *
+ * 1. 明确指定配置名称：
+ * export const lovrabetClient = createClient('default');
+ *
+ * 2. 使用其他已注册的配置：
+ * export const devClient = createClient('dev');
+ * export const prodClient = createClient('prod');
+ *
+ * 3. 直接传入配置对象：
+ * import { LOVRABET_MODELS_CONFIG } from './api';
+ * export const lovrabetClient = createClient(LOVRABET_MODELS_CONFIG);
+ *
+ * 4. 通过 ClientConfig 指定配置名和其他选项：
+ * export const lovrabetClient = createClient({
+ *   modelConfigName: '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/components/ApiUrlDisplay.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { Typography, Tag, Divider } from "antd";
+
+const { Title } = Typography;
+
+interface ApiUrlDisplayProps {
+  apiUrl: string;
+}
+
+const ApiUrlDisplay: React.FC<ApiUrlDisplayProps> = ({ apiUrl }) => {
+  let domain = "https://runtime.lovrabet.com";
+  let pathParts: string[];
+
+  try {
+    // 尝试解析为完整URL
+    const fullUrl = new URL(apiUrl);
+    domain = `${fullUrl.protocol}//${fullUrl.host}`;
+    pathParts = fullUrl.pathname.split("/");
+  } catch {
+    // 如果不是完整URL，按相对路径处理
+    pathParts = apiUrl.split("/");
+  }
+
+  const apiPrefix = pathParts[1]; // api (固定开头)
+  const appCode = pathParts[2]; // app-{appCode}
+  const datasetCode = pathParts[3]; // 数据集code
+  const apiName = pathParts[4]; // 接口名称
+
+  return (
+    <div
+      style={{
+        marginTop: "24px",
+        padding: "20px",
+        background: "#f5f5f5",
+        borderRadius: "8px",
+      }}
+    >
+      <Title level={4} style={{ marginBottom: "18px" }}>
+        API 接口解析
+      </Title>
+      <div style={{ marginBottom: "18px", fontSize: "16px" }}>
+        <Tag color="geekblue" style={{ fontSize: "14px", padding: "4px 8px" }}>
+          {domain}
+        </Tag>
+        <span style={{ margin: "0 4px" }}>/</span>
+        <Tag color="blue" style={{ fontSize: "14px", padding: "4px 8px" }}>
+          {apiPrefix}
+        </Tag>
+        <span style={{ margin: "0 4px" }}>/</span>
+        <Tag color="purple" style={{ fontSize: "14px", padding: "4px 8px" }}>
+          {appCode}
+        </Tag>
+        <span style={{ margin: "0 4px" }}>/</span>
+        <Tag color="red" style={{ fontSize: "14px", padding: "4px 8px" }}>
+          {datasetCode}
+        </Tag>
+        <span style={{ margin: "0 4px" }}>/</span>
+        <Tag color="cyan" style={{ fontSize: "14px", padding: "4px 8px" }}>
+          {apiName}
+        </Tag>
+      </div>
+      <Divider style={{ margin: "18px 0" }} />
+      <div style={{ fontSize: "14px", color: "#666", lineHeight: "1.8" }}>
+        <div style={{ marginBottom: "8px" }}>
+          <Tag color="geekblue">域名地址</Tag> {domain} - API服务域名
+        </div>
+        <div style={{ marginBottom: "8px" }}>
+          <Tag color="blue">固定前缀</Tag> {apiPrefix} - API固定开头
+        </div>
+        <div style={{ marginBottom: "8px" }}>
+          <Tag color="purple">应用代码</Tag> {appCode} - 应用唯一标识
+        </div>
+        <div style={{ marginBottom: "8px" }}>
+          <Tag color="red">数据集代码</Tag> {datasetCode} - 数据集唯一标识
+        </div>
+        <div style={{ marginBottom: "8px" }}>
+          <Tag color="cyan">接口名称</Tag> {apiName} - 具体的API接口名
+        </div>
+      </div>
+
+      <Divider style={{ margin: "20px 0" }} />
+      <div
+        style={{
+          fontSize: "14px",
+          color: "#d46b08",
+          background: "#fff7e6",
+          padding: "12px",
+          borderRadius: "6px",
+          border: "1px solid #ffd591",
+        }}
+      >
+        <Title level={5} style={{ color: "#d46b08", marginBottom: "12px" }}>
+          ⚠️ 常见问题说明
+        </Title>
+        <div style={{ lineHeight: "1.8" }}>
+          <div style={{ marginBottom: "8px" }}>
+            <Tag color="warning">无权限</Tag>
+            如果接口返回无权限，请先确认是否是自己有权限的应用，在{" "}
+            <code>app.lovrabet.com</code> 是否已经登录
+          </div>
+          <div style={{ marginBottom: "8px" }}>
+            <Tag color="error">跨域问题</Tag>
+            出现跨域错误，确保项目运行在 <code>dev.lovrabet.com</code> 域名下
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApiUrlDisplay;

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

@@ -0,0 +1,116 @@
+import React from "react";
+import { isInIcestark } from "@ice/stark-app";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
+import { Layout, Menu, theme } from "antd";
+import {
+  SmileOutlined,
+  PieChartOutlined,
+  TableOutlined,
+  FolderOutlined,
+  RocketOutlined,
+} from "@ant-design/icons";
+
+const { Header, Sider, Content } = Layout;
+
+const MainLayout: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  const menuItems = [
+    {
+      key: "/",
+      icon: <SmileOutlined />,
+      label: "Hello World",
+    },
+    {
+      key: "/dashboard",
+      icon: <SmileOutlined />,
+      label: "Dashboard静态模板",
+    },
+    {
+      key: "/chart-fetch",
+      icon: <PieChartOutlined />,
+      label: "数据图表",
+    },
+    {
+      key: "/table-display",
+      icon: <TableOutlined />,
+      label: "数据表格",
+    },
+    {
+      key: "/sdk-demo",
+      icon: <FolderOutlined />,
+      label: "Lovrabet SDK使用案例",
+    },
+  ];
+
+  const handleMenuClick = ({ key }: { key: string }) => {
+    navigate(key);
+  };
+
+  // 可选：根据isInIcestark()判断当前运行环境，被嵌入时，不渲染layout布局
+  if (isInIcestark()) {
+    return (
+      <div style={{ padding: "16px 20px" }}>
+        <Outlet />
+      </div>
+    );
+  }
+
+  return (
+    <Layout style={{ minHeight: "100vh" }}>
+      <Sider
+        breakpoint="lg"
+        collapsedWidth="0"
+        style={{
+          background: colorBgContainer,
+        }}
+      >
+        <div
+          style={{
+            height: 32,
+            margin: 16,
+            background: "rgba(255, 255, 255, 0.2)",
+            textAlign: "center",
+          }}
+        >
+          <img src="/vite.svg" alt="logo" />
+        </div>
+        <Menu
+          mode="inline"
+          selectedKeys={[location.pathname]}
+          items={menuItems}
+          onClick={handleMenuClick}
+          style={{ height: "100%", borderRight: 0 }}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{ padding: 0, background: colorBgContainer }}>
+          <div
+            style={{ padding: "0 24px", fontSize: "18px", fontWeight: "bold" }}
+          >
+            React SPA 应用
+          </div>
+        </Header>
+        <Content style={{ margin: "0 16px" }}>
+          <div
+            style={{
+              padding: 24,
+              minHeight: 360,
+              background: colorBgContainer,
+              borderRadius: borderRadiusLG,
+              margin: "16px 0",
+            }}
+          >
+            <Outlet />
+          </div>
+        </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();
+  }
+}

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

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from "react";
+import { Card, Spin, Alert, Typography } from "antd";
+import ReactECharts from "echarts-for-react";
+import ApiUrlDisplay from "../../components/ApiUrlDisplay";
+import { apiRequest } from "../../utils/api";
+
+const { Title, Paragraph } = Typography;
+
+const API_URL = "/api/app-c4055413/76a873945291498498737bc85677983d/getList";
+
+function ChartFetch() {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [chartData, setChartData] = useState([]);
+
+  useEffect(() => {
+    // 获取客户数据
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        // 数据统计接口
+        const data = await apiRequest(API_URL, {
+          method: "POST",
+          body: JSON.stringify({ pageSize: 20, currentPage: 1 }),
+        });
+
+        if (data.success) {
+          // 字段类型名称映射
+          const typeNameMap: Record<string, string> = {
+            TEXT: "文本字段",
+            RADIO: "单选字段",
+            SELECT: "下拉选择",
+            NUMBER: "数字字段",
+            DATE: "日期字段",
+          };
+
+          // 根据新的API格式，统计tableColumns中的字段类型分布
+          const typeMap: Record<string, number> = {};
+          data.data.tableColumns.forEach((column: any) => {
+            const dataIndex = column.dataIndex || "未知类型";
+            // 按字段类型前缀分类（如 TEXT_, RADIO_, SELECT_ 等）
+            const typePrefix = dataIndex.split("_")[0] || "其他";
+            typeMap[typePrefix] = (typeMap[typePrefix] || 0) + 1;
+          });
+
+          // 转换为饼图数据格式
+          const pieData = Object.keys(typeMap).map((key) => ({
+            name: typeNameMap[key] || key,
+            value: typeMap[key],
+          }));
+
+          setChartData(pieData);
+        }
+      } catch (err) {
+        console.error("数据获取失败:", err);
+        setError(err.message || "数据字段信息加载失败");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // 饼图配置
+  const getOption = () => ({
+    title: {
+      text: "数据字段类型分布",
+      left: "center",
+    },
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b}: {c} ({d}%)",
+    },
+    legend: {
+      orient: "vertical",
+      left: "left",
+    },
+    series: [
+      {
+        name: "字段类型",
+        type: "pie",
+        radius: "50%",
+        data: chartData,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+        },
+      },
+    ],
+  });
+
+  return (
+    <div style={{ padding: "24px" }}>
+      <Card>
+        <Title level={2}>数据字段统计图表</Title>
+        <Paragraph>
+          这是一个从真实API获取数据并展示的饼图示例，展示了数据表字段类型的分布情况。
+        </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
+          />
+        ) : (
+          <>
+            <ReactECharts
+              option={getOption()}
+              style={{ height: "400px" }}
+              notMerge={true}
+              lazyUpdate={true}
+            />
+            <ApiUrlDisplay apiUrl={API_URL} />
+          </>
+        )}
+      </Card>
+    </div>
+  );
+}
+
+export default ChartFetch;