@lovrabet/rabetbase-cli 2.2.4 → 2.2.5-beta.2

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

@@ -10,11 +10,107 @@ import {
   Input,
   Tag,
 } from "antd";
-import { ApiOutlined } from "@ant-design/icons";
+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[]>([]);
@@ -36,6 +132,70 @@ export default function SdkDemo() {
   // 获取选中模型的信息（用于代码示例展示 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: "选项值" }]`;
+
   /**
    * 加载可用的数据模型列表
    */
@@ -195,259 +355,182 @@ export default function SdkDemo() {
   };
 
   return (
-    <div style={{ padding: "24px" }}>
-      {/* 标题 */}
-      <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>
-
-      {/* 代码示例 */}
-      <Card title="代码示例" size="small" style={{ marginBottom: 16 }}>
-        <pre
-          style={{
-            background: "#f0f8ff",
-            padding: "16px",
-            borderRadius: "4px",
-            margin: 0,
-            fontSize: "13px",
-            border: "1px solid #1890ff",
-            overflow: "auto",
-          }}
-        >
-          {`// ========== 方式一：标准 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' }]`}
-        </pre>
-      </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>
-      )}
+    <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 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
+        {/* 数据模型选择 */}
+        <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={loadSelectOptions}
+              onClick={loadData}
               icon={<ApiOutlined />}
-              disabled={!selectedModel || !codeField || !labelField}
+              disabled={!selectedModel}
             >
-              获取选项
+              查询数据
             </Button>
           </Space>
+        </Card>
 
-          <pre
-            style={{
-              background: "#f5f5f5",
-              padding: "12px",
-              borderRadius: "4px",
-              margin: "8px 0 0 0",
-              fontSize: "13px",
-              border: "1px solid #d9d9d9",
-            }}
-          >
-            {`// ========== 方式一：标准 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: "选项值" }]`}
-          </pre>
-        </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>
 
-      {/* 下拉选项结果 */}
-      {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 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>
-      )}
 
-      {/* API 参考文档 */}
-      <Card size="small" style={{ marginTop: 24, background: "#f5f5f5" }}>
-        <Paragraph style={{ margin: 0, textAlign: "center" }}>
-          <Text type="secondary">
-            技术开发文档指引：{" "}
-            <a
-              href="https://open.lovrabet.com/docs/guides/tutorial"
-              target="_blank"
-              rel="noopener noreferrer"
-              style={{ color: "#1890ff" }}
-            >
-              https://open.lovrabet.com/docs/guides/tutorial
-            </a>
-          </Text>
-        </Paragraph>
-      </Card>
-    </div>
+        {/* 下拉选项结果 */}
+        {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>
   );
 }

package/templates/projects/sub-app-react-demo/src/pages/workbench/index.module.css

@@ -1,12 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap");
 
+/* workbench 的页面级外层 gutter 由 DemoPageContainer 负责。
+   这里不要再加根节点 padding，否则会和共享容器叠出双层间距。 */
 .page {
-  font-family: 'Noto Sans SC', system-ui, sans-serif;
+  font-family: "Noto Sans SC", system-ui, sans-serif;
   background: #f5f5f7;
-  padding: 20px;
-  min-height: 100vh;
-  margin: -16px;
   color: #1d1d1f;
+  border-radius: 16px;
 }
 
 /* 欢迎区域 - 简洁直接 */
@@ -45,7 +45,9 @@
   border-radius: 12px;
   padding: 20px;
   border: 1px solid #e5e5e7;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
   cursor: default;
 }