@lovrabet/cli 1.1.12 → 1.1.13

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

@@ -10,7 +10,7 @@
       "dependencies": {
         "@ant-design/icons": "^6.0.0",
         "@ice/stark-app": "^1.5.0",
-        "@lovrabet/sdk": "^1.1.16",
+        "@lovrabet/sdk": "^1.1.17",
         "antd": "^5.26.7",
         "echarts": "^5.6.0",
         "echarts-for-react": "^3.0.2",
@@ -33,16 +33,27 @@
     },
     "../../../gitlab/yuntoo/open/lovrabet-node-sdk": {
       "name": "@lovrabet/sdk",
-      "version": "1.1.4",
-      "extraneous": true,
+      "version": "1.1.17",
+      "license": "SEE LICENSE IN LICENSE",
       "devDependencies": {
         "@types/bun": "latest",
-        "javascript-obfuscator": "^4.1.1"
+        "@vitest/coverage-v8": "^2.1.9",
+        "@vitest/ui": "^2.1.8",
+        "c8": "^10.1.2",
+        "chokidar-cli": "^3.0.0",
+        "javascript-obfuscator": "^4.1.1",
+        "vitest": "^2.1.8"
       },
       "peerDependencies": {
         "typescript": "^5"
       }
     },
+    "../lovrabet-node-sdk": {
+      "extraneous": true
+    },
+    "../lovrabet-node-sdk/dist/index.js": {
+      "extraneous": true
+    },
     "node_modules/@ant-design/colors": {
       "version": "8.0.0",
       "license": "MIT",
@@ -450,13 +461,8 @@
       }
     },
     "node_modules/@lovrabet/sdk": {
-      "version": "1.1.16",
-      "resolved": "https://registry.npmjs.org/@lovrabet/sdk/-/sdk-1.1.16.tgz",
-      "integrity": "sha512-Pbw7bK54QrPidliob6RkYNcAAy1kBk7Fvpj2y+z3K6PON8ptdjAeQs6vjBtBYei/Uuv3ggjkNVZh6Ickqand9g==",
-      "license": "SEE LICENSE IN LICENSE",
-      "peerDependencies": {
-        "typescript": "^5"
-      }
+      "resolved": "../../../gitlab/yuntoo/open/lovrabet-node-sdk",
+      "link": true
     },
     "node_modules/@rc-component/async-validator": {
       "version": "5.0.4",
@@ -2563,6 +2569,7 @@
     },
     "node_modules/typescript": {
       "version": "5.8.3",
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",

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

@@ -11,7 +11,7 @@
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
     "@ice/stark-app": "^1.5.0",
-    "@lovrabet/sdk": "^1.1.16",
+    "@lovrabet/sdk": "^1.1.18",
     "antd": "^5.26.7",
     "echarts": "^5.6.0",
     "echarts-for-react": "^3.0.2",

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

@@ -8,6 +8,7 @@ import {
   TableOutlined,
   FolderOutlined,
   RocketOutlined,
+  DownOutlined,
 } from "@ant-design/icons";
 
 const { Header, Sider, Content } = Layout;
@@ -30,16 +31,6 @@ const MainLayout: React.FC = () => {
       icon: <SmileOutlined />,
       label: "Dashboard静态模板",
     },
-    {
-      key: "/chart-fetch",
-      icon: <PieChartOutlined />,
-      label: "数据图表",
-    },
-    {
-      key: "/table-display",
-      icon: <TableOutlined />,
-      label: "数据表格",
-    },
     {
       key: "/sdk-demo",
       icon: <FolderOutlined />,

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

@@ -1,5 +1,15 @@
 import React, { useState, useEffect } from "react";
-import { Button, Table, Card, Typography, Space, message, Select } from "antd";
+import {
+  Button,
+  Table,
+  Card,
+  Typography,
+  Space,
+  message,
+  Select,
+  Input,
+  Tag,
+} from "antd";
 import { ApiOutlined } from "@ant-design/icons";
 import { lovrabetClient } from "../../api/client";
 import { SortOrder } from "@lovrabet/sdk";
@@ -12,6 +22,9 @@ export default function SdkDemo() {
   const [columns, setColumns] = useState<any[]>([]);
   const [modelList, setModelList] = useState<string[]>([]);
   const [selectedModel, setSelectedModel] = useState<string>("");
+  const [selectOptions, setSelectOptions] = useState<any[]>([]);
+  const [codeField, setCodeField] = useState<string>("id");
+  const [labelField, setLabelField] = useState<string>("");
 
   /**
    * 加载可用的数据模型列表
@@ -105,6 +118,42 @@ export default function SdkDemo() {
     message.success(successMessage);
   };
 
+  /**
+   * 获取下拉选项
+   */
+  const loadSelectOptions = async () => {
+    if (!selectedModel) {
+      message.warning("请先选择一个数据模型");
+      return;
+    }
+
+    if (!codeField || !labelField) {
+      message.warning("请输入 code 和 label 字段名");
+      return;
+    }
+
+    setLoading(true);
+    setSelectOptions([]);
+
+    try {
+      const options = await lovrabetClient.models[
+        selectedModel
+      ].getSelectOptions({
+        code: codeField,
+        label: labelField,
+      });
+
+      setSelectOptions(options);
+      message.success(`成功获取 ${options.length} 个下拉选项`);
+      console.log("下拉选项数据:", options);
+    } catch (error: any) {
+      console.error("获取下拉选项失败:", error);
+      message.error(`获取下拉选项失败: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   /**
    * 处理错误
    */
@@ -225,7 +274,7 @@ const response = await model.getList({
 
       {/* 数据表格 */}
       {data.length > 0 && (
-        <Card title="数据结果" size="small">
+        <Card title="数据结果" size="small" style={{ marginBottom: 16 }}>
           <Table
             columns={columns}
             dataSource={data}
@@ -236,6 +285,121 @@ const response = await model.getList({
           />
         </Card>
       )}
+
+      {/* 获取下拉选项 */}
+      <Card title="📋 获取下拉选项" size="small" style={{ marginBottom: 16 }}>
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <div style={{ color: "#666" }}>
+            用于获取数据表的下拉选项数据，适用于 Select、Radio、Checkbox
+            等表单组件（仅 WebAPI 模式支持）
+          </div>
+
+          {/* 显示可用字段 */}
+          {columns.length > 0 && (
+            <div style={{ marginBottom: 8 }}>
+              <span style={{ color: "#666", marginRight: 8 }}>
+                可用字段（点击快速填入）：
+              </span>
+              <Space wrap size={[4, 4]}>
+                {columns.map((column: any) => (
+                  <Tag
+                    key={column.dataIndex}
+                    color="blue"
+                    style={{ cursor: "pointer" }}
+                    onClick={() => {
+                      if (!codeField) {
+                        setCodeField(column.dataIndex);
+                        message.success(
+                          `已填入 Code 字段: ${column.dataIndex}`,
+                        );
+                      } else if (!labelField) {
+                        setLabelField(column.dataIndex);
+                        message.success(
+                          `已填入 Label 字段: ${column.dataIndex}`,
+                        );
+                      } else {
+                        message.info("Code 和 Label 已填写，如需更换请先清空");
+                      }
+                    }}
+                  >
+                    {column.dataIndex}
+                  </Tag>
+                ))}
+              </Space>
+            </div>
+          )}
+
+          <Space wrap>
+            <span>Code 字段：</span>
+            <Input
+              placeholder="用作选项值的字段名"
+              value={codeField}
+              onChange={(e) => setCodeField(e.target.value)}
+              style={{ width: 200 }}
+              allowClear
+            />
+            <span>Label 字段：</span>
+            <Input
+              placeholder="用作显示文本的字段名"
+              value={labelField}
+              onChange={(e) => setLabelField(e.target.value)}
+              style={{ width: 200 }}
+              allowClear
+            />
+            <Button
+              type="primary"
+              loading={loading}
+              onClick={loadSelectOptions}
+              icon={<ApiOutlined />}
+              disabled={!selectedModel || !codeField || !labelField}
+            >
+              获取选项
+            </Button>
+          </Space>
+
+          <pre
+            style={{
+              background: "#f5f5f5",
+              padding: "12px",
+              borderRadius: "4px",
+              margin: "8px 0 0 0",
+              fontSize: "13px",
+              border: "1px solid #d9d9d9",
+            }}
+          >
+            {`// 调用示例
+const options = await lovrabetClient
+  .models.${selectedModel || "Requirements"}.getSelectOptions({
+    code: "${codeField || "id"}",
+    label: "${labelField || "name"}"
+  });
+
+// 返回格式：[{ label: "显示文本", value: "选项值" }]`}
+          </pre>
+        </Space>
+      </Card>
+
+      {/* 下拉选项结果 */}
+      {selectOptions.length > 0 && (
+        <Card
+          title={`下拉选项结果（共 ${selectOptions.length} 个）`}
+          size="small"
+        >
+          <pre
+            style={{
+              background: "#f5f5f5",
+              padding: "12px",
+              borderRadius: "4px",
+              margin: 0,
+              fontSize: "13px",
+              maxHeight: "400px",
+              overflow: "auto",
+            }}
+          >
+            {JSON.stringify(selectOptions, null, 2)}
+          </pre>
+        </Card>
+      )}
     </div>
   );
 }

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

@@ -1,111 +0,0 @@
-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/pages/chart-fetch/index.tsx

@@ -1,137 +0,0 @@
-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;

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

@@ -1,130 +0,0 @@
-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;