bi-sdk-react 0.0.76 → 0.0.77

package/src/components/plugins/@antd/item-props/SelectProps.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import {
   Form,
   Input,
@@ -8,9 +8,18 @@ import {
   Button,
   Space,
   type SelectProps as AntSelectProps,
+  Tooltip,
+  Drawer,
+  Flex,
 } from "antd";
 import type { PropEditorProps } from "./types";
-import { DeleteOutlined } from "@ant-design/icons";
+import {
+  DeleteOutlined,
+  FullscreenOutlined,
+  InfoCircleOutlined,
+} from "@ant-design/icons";
+import { IconFont } from "../../../icon/IconFont";
+import { Editor } from "@monaco-editor/react";
 
 export type SelectOption = { label: string; value: any };
 export type SelectModel = {
@@ -19,6 +28,8 @@ export type SelectModel = {
   size?: AntSelectProps["size"];
   allowClear?: boolean;
   multiple?: boolean;
+  source?: "local" | "script";
+  globalDatasetScript?: string;
   options: SelectOption[];
 };
 
@@ -26,6 +37,9 @@ export const SelectProps: React.FC<PropEditorProps<SelectModel>> = ({
   model,
   onChange,
 }) => {
+  const ref = useRef<any>(null);
+  const fullRef = useRef<any>(null);
+  const [fullScreen, setFullScreen] = useState(false);
   const trigger = (key: keyof SelectModel, value: any) =>
     onChange && onChange({ ...model, [key]: value });
   const setOption = (index: number, key: keyof SelectOption, value: any) => {
@@ -41,6 +55,16 @@ export const SelectProps: React.FC<PropEditorProps<SelectModel>> = ({
   const addOption = () => {
     trigger("options", [...(model.options || []), { label: "", value: "" }]);
   };
+  const format = () => {
+    // Monaco-react does not expose format directly; relying on editor action
+    const editor = (ref.current as any)?.editor;
+    editor?.getAction("editor.action.formatDocument")?.run();
+  };
+
+  const fullFormat = () => {
+    const editor = (fullRef.current as any)?.editor;
+    editor?.getAction("editor.action.formatDocument")?.run();
+  };
   const columns = [
     {
       title: "选项标签",
@@ -118,19 +142,156 @@ export const SelectProps: React.FC<PropEditorProps<SelectModel>> = ({
           onChange={(v) => trigger("multiple", v)}
         />
       </Form.Item>
-      <Form.Item labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
-        <Table
+      <Form.Item label="数据来源">
+        <Radio.Group
           size="small"
-          dataSource={model.options}
-          columns={columns as any}
-          pagination={false}
-          rowKey={(_, i) => String(i)}
-          bordered
-        />
-        <Button size="small" block onClick={addOption}>
-          添加选项
-        </Button>
+          value={model.source || "local"}
+          onChange={(e) => trigger("source", e.target.value)}
+        >
+          <Radio.Button value="local">本地选项</Radio.Button>
+          <Radio.Button value="script">JS 脚本</Radio.Button>
+        </Radio.Group>
       </Form.Item>
+      {model.source === "script" && (
+        <Form.Item
+          layout="vertical"
+          labelCol={{ span: 24 }}
+          wrapperCol={{ span: 24 }}
+          label={
+            <>
+              <Space>
+                JS 脚本{" "}
+                <Tooltip
+                  title={
+                    <>
+                      模板语法参考
+                      <ul style={{ padding: 0, listStyle: "none" }}>
+                        <li>变量调用：{`{{变量名}}`}</li>
+                        <li>全局变量：{`{{$g.变量名}}`}</li>
+                        <li>返回值：{`return {label: string, value: string|number}[]`}</li>
+                      </ul>
+                    </>
+                  }
+                >
+                  <InfoCircleOutlined />
+                </Tooltip>
+              </Space>
+              <Space>
+                <a onClick={() => setFullScreen(true)}>
+                  <FullscreenOutlined /> 全屏
+                </a>
+                <a onClick={format}>
+                  <IconFont type="icon-formate" /> 格式化
+                </a>
+              </Space>
+            </>
+          }
+          className="ant-form-item-label-space"
+        >
+          <div
+            style={{
+              border: "1px solid #d9d9d9",
+              borderRadius: 4,
+              textAlign: "left",
+            }}
+          >
+            <div
+              style={{
+                color: "#0000ff",
+                fontSize: 14,
+                padding: "0 50px",
+              }}
+            >
+              function getOptions(data) {"{"}{" "}
+            </div>
+            <Editor
+              onMount={(editor) => {
+                (ref.current as any) = { editor };
+              }}
+              height="400px"
+              defaultLanguage="javascript"
+              value={model.globalDatasetScript}
+              onChange={(v) => trigger("globalDatasetScript", v || "")}
+              options={{
+                minimap: { enabled: false },
+                scrollBeyondLastLine: false,
+                tabSize: 2,
+              }}
+            />
+            <div
+              style={{
+                color: "#0000ff",
+                fontSize: 14,
+                padding: "0 50px",
+              }}
+            >
+              {"}"}
+            </div>
+          </div>
+        </Form.Item>
+      )}
+      {model.source !== "script" && (
+        <Form.Item labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
+          <Table
+            size="small"
+            dataSource={model.options}
+            columns={columns as any}
+            pagination={false}
+            rowKey={(_, i) => String(i)}
+            bordered
+          />
+          <Button size="small" block onClick={addOption}>
+            添加选项
+          </Button>
+        </Form.Item>
+      )}
+      <Drawer
+        title={
+          <Flex justify="space-between" align="center">
+            JS 脚本
+            <Space>
+              <a key="format" onClick={fullFormat}>
+                <IconFont type="icon-formate" /> 格式化
+              </a>
+            </Space>
+          </Flex>
+        }
+        open={fullScreen}
+        width="100%"
+        onClose={() => setFullScreen(false)}
+        styles={{
+          body: {
+            padding: 0,
+          },
+        }}
+      >
+        <div
+          style={{
+            textAlign: "left",
+          }}
+        >
+          <div style={{ color: "#0000ff", fontSize: 14, padding: "0 50px" }}>
+            function getOptions(data) {"{"}{" "}
+          </div>
+          <Editor
+            onMount={(editor) => {
+              (fullRef.current as any) = { editor };
+            }}
+            height="calc(100vh - 100px)"
+            defaultLanguage="javascript"
+            value={model.globalDatasetScript}
+            onChange={(v) => trigger("globalDatasetScript", v || "")}
+            options={{
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              tabSize: 2,
+            }}
+          />
+          <div style={{ color: "#0000ff", fontSize: 14, padding: "0 50px" }}>
+            {"}"}
+          </div>
+        </div>
+      </Drawer>
     </Form>
   );
 };

package/src/components/plugins/@antd/items/SelectRender.tsx

@@ -1,5 +1,5 @@
 import { Select, type SelectProps } from "antd";
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import { PageContext } from "../../../context/PageContext";
 import { HtmlBaseProps, SchemaItemType } from "../../../typing";
 import { useEvent } from "../../../hooks/event";
@@ -10,6 +10,8 @@ export type SelectRenderProps = {
   placeholder?: string;
   allowClear?: boolean;
   multiple?: boolean;
+  source?: "local" | "script";
+  globalDatasetScript?: string;
   options?: { label: string; value: any }[];
   item: SchemaItemType;
   value?: any;
@@ -23,6 +25,8 @@ export const SelectRender: React.FC<SelectRenderProps> = ({
   placeholder = "请选择",
   allowClear = false,
   multiple = false,
+  source = "local",
+  globalDatasetScript = "",
   options = [],
   item,
   value,
@@ -30,7 +34,7 @@ export const SelectRender: React.FC<SelectRenderProps> = ({
   style = {},
   className,
 }) => {
-  const { handleCallback, setVar } = useContext(PageContext);
+  const { handleCallback, setVar, globalVars } = useContext(PageContext);
   const { handleEvent } = useEvent(item);
   const change = (v: any) => {
     if (onChange) onChange(v);
@@ -38,6 +42,51 @@ export const SelectRender: React.FC<SelectRenderProps> = ({
     handleCallback(item);
     handleEvent("change", v);
   };
+
+  const computedOptions = useMemo(() => {
+    if (source === "script") {
+      try {
+        const safeEval = new Function(
+          "console",
+          "Math",
+          "Date",
+          "Array",
+          "Object",
+          "String",
+          "Number",
+          "Boolean",
+          "$g",
+          `
+          "use strict";
+          const window = undefined;
+          const document = undefined;
+          const global = undefined;
+          const process = undefined;
+          const require = undefined;
+          const module = undefined;
+          const exports = undefined;
+          ${globalDatasetScript}
+        `,
+        );
+        return safeEval(
+          console,
+          Math,
+          Date,
+          Array,
+          Object,
+          String,
+          Number,
+          Boolean,
+          globalVars,
+        );
+      } catch (error) {
+        console.error("Options 脚本执行错误", error);
+        return [];
+      }
+    }
+    return options;
+  }, [source, options, globalVars]);
+
   return (
     <Select
       id={id}
@@ -46,7 +95,7 @@ export const SelectRender: React.FC<SelectRenderProps> = ({
       placeholder={placeholder}
       allowClear={allowClear}
       mode={multiple ? "multiple" : undefined}
-      options={options}
+      options={computedOptions}
       onChange={change}
       style={{ width: "100%", ...style }}
       className={className}