@lovrabet/rabetbase-cli 2.4.3 → 2.4.4-beta.1

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

@@ -1,536 +0,0 @@
-import React, { useState, useEffect } from "react";
-import {
-  Button,
-  Table,
-  Card,
-  Typography,
-  Space,
-  message,
-  Select,
-  Input,
-  Tag,
-} from "antd";
-import {
-  ApiOutlined,
-  CheckOutlined,
-  CopyOutlined,
-  DownOutlined,
-  UpOutlined,
-} from "@ant-design/icons";
-import { lovrabetClient } from "@/api/client";
-import DemoPageContainer from "@/components/demo-page-container/DemoPageContainer";
-
-const { Title, Paragraph, Text } = Typography;
-
-interface CollapsibleCodeBlockProps {
-  title: string;
-  code: string;
-  accent?: boolean;
-  defaultExpanded?: boolean;
-  maxHeight?: number;
-}
-
-function CollapsibleCodeBlock({
-  title,
-  code,
-  accent = false,
-  defaultExpanded = false,
-  maxHeight,
-}: CollapsibleCodeBlockProps) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    try {
-      if (navigator.clipboard?.writeText) {
-        await navigator.clipboard.writeText(code);
-      }
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 2000);
-    } catch (error) {
-      console.error("复制代码失败:", error);
-      message.error("复制代码失败");
-    }
-  };
-
-  return (
-    <div
-      style={{
-        border: `1px solid ${accent ? "#1890ff" : "#d9d9d9"}`,
-        borderRadius: 6,
-        overflow: "hidden",
-        background: "#fff",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          gap: 12,
-          padding: "10px 12px",
-          background: accent ? "#f0f8ff" : "#fafafa",
-          borderBottom: expanded
-            ? `1px solid ${accent ? "#1890ff" : "#d9d9d9"}`
-            : "none",
-        }}
-      >
-        <Text strong>{title}</Text>
-        <Space size={8}>
-          <Button
-            size="small"
-            icon={copied ? <CheckOutlined /> : <CopyOutlined />}
-            onClick={handleCopy}
-          >
-            {copied ? "已复制" : "复制"}
-          </Button>
-          <Button
-            size="small"
-            icon={expanded ? <UpOutlined /> : <DownOutlined />}
-            onClick={() => setExpanded((current) => !current)}
-          >
-            {expanded ? "收起" : "展开"}
-          </Button>
-        </Space>
-      </div>
-      {expanded && (
-        <pre
-          style={{
-            background: accent ? "#f0f8ff" : "#f5f5f5",
-            padding: "16px",
-            margin: 0,
-            fontSize: "13px",
-            maxHeight,
-            overflow: "auto",
-          }}
-        >
-          {code}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-export default function SdkDemo() {
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<any[]>([]);
-  const [columns, setColumns] = useState<any[]>([]);
-  const [modelList, setModelList] = useState<
-    Array<{
-      value: string;
-      label: string;
-      alias?: string;
-      name?: string;
-      datasetCode: string;
-    }>
-  >([]);
-  const [selectedModel, setSelectedModel] = useState<string>("");
-  const [selectOptions, setSelectOptions] = useState<any[]>([]);
-  const [codeField, setCodeField] = useState<string>("id");
-  const [labelField, setLabelField] = useState<string>("");
-
-  // 获取选中模型的信息（用于代码示例展示 alias）
-  const selectedModelInfo = modelList.find((m) => m.value === selectedModel);
-
-  const filterCodeExample = `// ========== 方式一：标准 dataset_code 模式（推荐 AI/LLM 使用）==========
-const response = await lovrabetClient
-  .models['${selectedModel || "dataset_xxx"}'].filter({
-    currentPage: 1,
-    pageSize: 10
-  });
-${
-  selectedModelInfo?.alias
-    ? `
-// ========== 方式二：人类友好的 alias 模式 ==========
-const response = await lovrabetClient
-  .models.${selectedModelInfo.alias}.filter({
-    currentPage: 1,
-    pageSize: 10
-  });
-`
-    : ""
-}
-// ========== 完整查询示例（所有参数均为可选）==========
-const response = await lovrabetClient
-  .models['${selectedModel || "dataset_xxx"}'].filter({
-    // where: 条件查询（可选）
-    // where: {
-    //   age: { $gte: 18 },
-    //   status: { $eq: 'active' }
-    // },
-
-    // select: 字段选择（可选）
-    // select: ['id', 'name', 'age'],
-
-    // orderBy: 排序（可选）
-    // orderBy: [{ createTime: 'desc' }],
-
-    // 分页参数（必需）
-    currentPage: 1,
-    pageSize: 10
-  });
-
-// 其他可用参数（仅示例，以实际字段为准）：
-// - where: 支持 $eq, $ne, $gte, $lte, $in, $contain, $startWith, $endWith 等操作符
-// - where: 支持 $and, $or 逻辑组合
-// - select: 数组形式，指定返回的字段
-// - orderBy: 数组形式，支持多字段排序 [{ field1: 'desc' }, { field2: 'asc' }]`;
-
-  const selectOptionsCodeExample = `// ========== 方式一：标准 dataset_code 模式（推荐 AI/LLM 使用）==========
-const options = await lovrabetClient
-  .models['${selectedModel || "dataset_xxx"}'].getSelectOptions({
-    code: "${codeField || "id"}",
-    label: "${labelField || "name"}"
-  });
-${
-  selectedModelInfo?.alias
-    ? `
-// ========== 方式二：人类友好的 alias 模式 ==========
-const options = await lovrabetClient
-  .models.${selectedModelInfo.alias}.getSelectOptions({
-    code: "${codeField || "id"}",
-    label: "${labelField || "name"}"
-  });
-`
-    : ""
-}
-// 返回格式：[{ label: "显示文本", value: "选项值" }]`;
-
-  /**
-   * 加载可用的数据模型列表
-   */
-  useEffect(() => {
-    try {
-      // 使用 getModelListDetails 获取人类友好的模型列表
-      const models = lovrabetClient.getModelListDetails();
-      setModelList(models);
-      // 默认选择第一个模型
-      if (models.length > 0) {
-        setSelectedModel(models[0].value);
-      }
-    } catch (error) {
-      console.error("获取模型列表失败:", error);
-      message.error("获取模型列表失败");
-    }
-  }, []);
-
-  /**
-   * 使用 filter 接口查询数据
-   */
-  const loadData = async () => {
-    if (!selectedModel) {
-      message.warning("请先选择一个数据模型");
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      // 使用 filter 接口进行查询
-      const response = await lovrabetClient.models[selectedModel].filter({
-        currentPage: 1,
-        pageSize: 10,
-      });
-
-      processResponse(response, "查询成功！");
-    } catch (error: any) {
-      handleError(error, "查询");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  /**
-   * 处理响应数据
-   */
-  const processResponse = (response: any, successMessage: string) => {
-    try {
-      // filter 接口返回的数据结构
-      const tableData = response?.tableData || response?.data || [];
-
-      // 确保 tableData 是数组
-      if (!Array.isArray(tableData)) {
-        console.error("返回的数据不是数组格式:", tableData);
-        message.error("返回数据格式错误，请检查 API 响应");
-        return;
-      }
-
-      setData(tableData);
-
-      // 优先使用 tableColumns 配置
-      if (response?.tableColumns && Array.isArray(response.tableColumns)) {
-        // 如果有 tableColumns，优先使用它
-        const tableColumns = response.tableColumns.map((column: any) => ({
-          title:
-            column.title || column.dataIndex || column.key || String(column),
-          dataIndex: column.dataIndex || column.key || String(column),
-          key: column.dataIndex || column.key || String(column),
-          // 处理对象/数组类型的值，避免 React Error #31
-          render: (value: any) => {
-            if (value === null || value === undefined) {
-              return "-";
-            }
-            if (typeof value === "object") {
-              return JSON.stringify(value);
-            }
-            return String(value);
-          },
-        }));
-        setColumns(tableColumns);
-      } else if (tableData.length > 0) {
-        // 如果没有 tableColumns，从第一条数据中提取字段名作为列
-        const firstRow = tableData[0];
-        if (firstRow && typeof firstRow === "object") {
-          const tableColumns = Object.keys(firstRow).map((key) => ({
-            title: key,
-            dataIndex: key,
-            key: key,
-            // 处理对象/数组类型的值，避免 React Error #31
-            render: (value: any) => {
-              if (value === null || value === undefined) {
-                return "-";
-              }
-              if (typeof value === "object") {
-                return JSON.stringify(value);
-              }
-              return String(value);
-            },
-          }));
-          setColumns(tableColumns);
-        }
-      } else {
-        // 如果没有数据也没有列定义，清空列
-        setColumns([]);
-      }
-
-      message.success(successMessage);
-    } catch (error: any) {
-      console.error("处理响应数据失败:", error);
-      message.error(`处理数据失败: ${error.message}`);
-    }
-  };
-
-  /**
-   * 获取下拉选项
-   */
-  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);
-    }
-  };
-
-  /**
-   * 处理错误
-   */
-  const handleError = (error: any, action: string) => {
-    console.error(`${action}失败:`, error);
-    message.error(`${action}失败: ${error.message}`);
-  };
-
-  return (
-    <DemoPageContainer>
-      <div>
-        {/* 标题 */}
-        <Title level={2}>
-          <ApiOutlined /> Lovrabet SDK 简单演示
-        </Title>
-
-        <Paragraph style={{ color: "#666", marginBottom: 24 }}>
-          演示 Lovrabet SDK 的 <Text strong>filter</Text> 接口使用方法。filter
-          接口支持复杂条件查询、字段选择、多字段排序等功能。
-          <br />
-          <strong>注意：</strong>代码示例中的 "Requirements"
-          是假设已经存在的数据模型名称，实际使用时请根据下拉框中的可用模型进行选择。
-        </Paragraph>
-
-        {/* 数据模型选择 */}
-        <Card title="选择数据模型" size="small" style={{ marginBottom: 16 }}>
-          <Space>
-            <Select
-              placeholder="选择要查询的数据模型"
-              style={{ width: 350 }}
-              value={selectedModel}
-              onChange={setSelectedModel}
-              showSearch
-              optionFilterProp="label"
-              options={modelList}
-            />
-            <Button
-              type="primary"
-              loading={loading}
-              onClick={loadData}
-              icon={<ApiOutlined />}
-              disabled={!selectedModel}
-            >
-              查询数据
-            </Button>
-          </Space>
-        </Card>
-
-        {/* 数据表格 */}
-        {data.length > 0 && (
-          <Card title="数据结果" size="small" style={{ marginBottom: 16 }}>
-            <Table
-              columns={columns}
-              dataSource={data}
-              rowKey={(_, index) => index?.toString() || "0"}
-              pagination={false}
-              size="small"
-              scroll={{ x: true }}
-            />
-          </Card>
-        )}
-
-        {/* 代码示例 */}
-        <Card title="代码示例" size="small" style={{ marginBottom: 16 }}>
-          <CollapsibleCodeBlock
-            title="filter 查询代码"
-            code={filterCodeExample}
-            accent
-            defaultExpanded
-          />
-        </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>
-
-            <CollapsibleCodeBlock
-              title="getSelectOptions 代码"
-              code={selectOptionsCodeExample}
-              defaultExpanded
-            />
-          </Space>
-        </Card>
-
-        {/* 下拉选项结果 */}
-        {selectOptions.length > 0 && (
-          <Card
-            title={`下拉选项结果（共 ${selectOptions.length} 个）`}
-            size="small"
-          >
-            <CollapsibleCodeBlock
-              title="下拉选项 JSON"
-              code={JSON.stringify(selectOptions, null, 2)}
-              defaultExpanded
-              maxHeight={400}
-            />
-          </Card>
-        )}
-
-        {/* API 参考文档 */}
-        <Card size="small" style={{ marginTop: 24, background: "#f5f5f5" }}>
-          <Paragraph style={{ margin: 0, textAlign: "center" }}>
-            <Text type="secondary">
-              技术开发文档指引：{" "}
-              <a
-                href="https://qizhiyuntu.feishu.cn/wiki/CMfxw6l2li01EVkBTcBcshD3nSe"
-                target="_blank"
-                rel="noopener noreferrer"
-                style={{ color: "#1890ff" }}
-              >
-                https://qizhiyuntu.feishu.cn/wiki/CMfxw6l2li01EVkBTcBcshD3nSe
-              </a>
-            </Text>
-          </Paragraph>
-        </Card>
-      </div>
-    </DemoPageContainer>
-  );
-}