bi-sdk-react 0.0.59 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bi-sdk-react",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "private": false,
   "type": "module",
   "main": "dist/umd/js/bi-sdk.umd.min.js",

package/src/components/icon/IconFont.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { createFromIconfontCN } from "@ant-design/icons";
 
 const IconFontCN = createFromIconfontCN({
-  scriptUrl: "https://at.alicdn.com/t/c/font_5072483_30lly4gkmhf.js",
+  scriptUrl: "https://at.alicdn.com/t/c/font_5072483_qyp3hlby2nr.js",
 });
 
 export type IconFontProps = {

package/src/components/plugins/@antd/index.ts

@@ -24,6 +24,7 @@ import {
   SwitchProps,
   TableProps,
   TextProps,
+  AnchorProps,
 } from "./item-props";
 import {
   ButtonRender,
@@ -47,6 +48,7 @@ import {
   SwitchRender,
   TableRender,
   TextRender,
+  AnchorRender,
 } from "./items";
 
 export const TextPlugin: PluginType = {
@@ -140,7 +142,8 @@ export const TablePlugin: PluginType = {
       source: "custom",
       datasourceId: null,
       scriptId: null,
-      custom: "[{\"name\":\"苹果\",\"count\":12},{\"name\":\"华为\",\"count\":803},{\"name\":\"OPPO\",\"count\":654},{\"name\":\"vivo\",\"count\":719}]",
+      custom:
+        '[{"name":"苹果","count":12},{"name":"华为","count":803},{"name":"OPPO","count":654},{"name":"vivo","count":719}]',
     },
     props: {
       size: "default",
@@ -232,6 +235,31 @@ return {
   ],
 };
 
+export const AnchorPlugin: PluginType = {
+  group: "基础组件",
+  key: "b-anchor",
+  label: "锚点",
+  icon: "icon-anchor",
+  component: AnchorRender,
+  formComponent: AnchorProps,
+  defaultOptions: {
+    props: {
+      items: [
+        { href: "#item1", title: "<i class='icon-dict'></i>项目1" },
+        { href: "#item2", title: "<i class='icon-dict'></i>项目2" },
+        { href: "#item3", title: "<i class='icon-dict'></i>项目3" },
+      ],
+      linePosition: 10,
+      lineColor: "rgba(5, 5, 5, 0.06)",
+      lineWidth: 2,
+      gap: 30,
+      itemClassNames: [],
+      itemTitleClassNames: [],
+      indicatorClassNames: [],
+    },
+  },
+};
+
 export const InputPlugin: PluginType = {
   group: "表单组件",
   key: "b-input",
@@ -462,7 +490,7 @@ export const ModalPlugin: PluginType = {
   events: [
     { name: "打开", handler: "open" },
     { name: "关闭", handler: "close" },
-  ]
+  ],
 };
 
 export const DrawerPlugin: PluginType = {
@@ -492,7 +520,7 @@ export const DrawerPlugin: PluginType = {
   events: [
     { name: "打开", handler: "open" },
     { name: "关闭", handler: "close" },
-  ]
+  ],
 };
 
 export const plugins: PluginType[] = [
@@ -504,6 +532,7 @@ export const plugins: PluginType[] = [
   ListPlugin,
   HtmlPlugin,
   EchartsPlugin,
+  AnchorPlugin,
   InputPlugin,
   InputNumberPlugin,
   SelectPlugin,

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

@@ -0,0 +1,223 @@
+import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
+import {
+  AutoComplete,
+  Button,
+  ColorPicker,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Select,
+  Space,
+  Table,
+} from "antd";
+import React, { useContext, useMemo, useState } from "react";
+import { AnchorItem, AnchorRenderProps } from "../items/AnchorRender";
+import type { PropEditorProps } from "./types";
+import { PageContext } from "../../../context/PageContext";
+
+export const AnchorProps: React.FC<PropEditorProps<AnchorRenderProps>> = ({
+  model,
+  onChange,
+}) => {
+  const { schema } = useContext(PageContext);
+
+  const trigger = (key: keyof AnchorRenderProps, value: any) =>
+    onChange && onChange({ ...model, [key]: value });
+  const setColumn = (index: number, col: Partial<AnchorItem>) => {
+    const items = [...(model.items || [])];
+    items[index] = { ...items[index], ...col };
+    trigger("items", items);
+  };
+  const removeColumn = (index: number) => {
+    const items = [...(model.items || [])];
+    items.splice(index, 1);
+    trigger("items", items);
+  };
+  const addColumn = () => {
+    trigger("items", [
+      ...(model.items || []),
+      { title: "", href: "", key: "" },
+    ]);
+  };
+  const [editVisible, setEditVisible] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const editingForm =
+    editingIndex != null && model.items?.[editingIndex]
+      ? model.items[editingIndex]
+      : { title: "", href: "", key: "" };
+  const columns = [
+    {
+      title: "标题",
+      dataIndex: "title",
+      render: (v: string) => (
+        <div dangerouslySetInnerHTML={{ __html: v }}></div>
+      ),
+    },
+    {
+      title: "操作",
+      width: 80,
+      align: "center" as const,
+      render: (_: any, r: AnchorItem, i: number) => (
+        <Space>
+          <a
+            onClick={() => {
+              setEditingIndex(i);
+              setEditVisible(true);
+            }}
+          >
+            <EditOutlined />
+          </a>
+          <a onClick={() => removeColumn(i)}>
+            <DeleteOutlined />
+          </a>
+        </Space>
+      ),
+    },
+  ];
+
+  const items = useMemo(() => {
+    const list: any[] = [];
+    const compute = (arr?: any[]) => {
+      if (!Array.isArray(arr)) return;
+      arr.forEach((item) => {
+        list.push(item);
+        if (Array.isArray(item.children)) {
+          compute(item.children);
+        } else if (typeof item.children === "object" && item.children) {
+          Object.keys(item.children).forEach((k) => compute(item.children[k]));
+        }
+      });
+    };
+    compute(schema?.items || []);
+    return list;
+  }, [schema]);
+
+  return (
+    <div>
+      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+        <Form.Item label="线位置（left）">
+          <InputNumber
+            size="small"
+            style={{ width: "100px" }}
+            value={model.linePosition}
+            suffix="px"
+            onChange={(v) => trigger("linePosition", v)}
+          />
+        </Form.Item>
+        <Form.Item label="线颜色">
+          <ColorPicker
+            size="small"
+            value={model.lineColor}
+            onChange={(v) => trigger("lineColor", v.toHexString())}
+            allowClear={true}
+          />
+        </Form.Item>
+        <Form.Item label="线宽度">
+          <InputNumber
+            size="small"
+            style={{ width: "100px" }}
+            value={model.lineWidth}
+            suffix="px"
+            onChange={(v) => trigger("lineWidth", v)}
+          />
+        </Form.Item>
+        <Form.Item label="间距">
+          <InputNumber
+            size="small"
+            style={{ width: "100px" }}
+            value={model.gap}
+            suffix="px"
+            onChange={(v) => trigger("gap", v)}
+          />
+        </Form.Item>
+
+        <Divider style={{ marginTop: 10 }}>样式设置</Divider>
+        <Form.Item
+          label="链接项类名"
+          layout="vertical"
+          labelCol={{ span: 24 }}
+          wrapperCol={{ span: 24 }}
+        >
+          <Select
+            mode="tags"
+            size="small"
+            value={model.itemClassNames || []}
+            onChange={(e) => trigger("itemClassNames", e)}
+          />
+        </Form.Item>
+        <Form.Item
+          label="标题文字类名"
+          layout="vertical"
+          labelCol={{ span: 24 }}
+          wrapperCol={{ span: 24 }}
+        >
+          <Select
+            mode="tags"
+            size="small"
+            value={model.itemTitleClassNames || []}
+            onChange={(e) => trigger("itemTitleClassNames", e)}
+          />
+        </Form.Item>
+        <Form.Item
+          label="指示器类名"
+          layout="vertical"
+          labelCol={{ span: 24 }}
+          wrapperCol={{ span: 24 }}
+        >
+          <Select
+            mode="tags"
+            size="small"
+            value={model.indicatorClassNames || []}
+            onChange={(e) => trigger("indicatorClassNames", e)}
+          />
+        </Form.Item>
+      </Form>
+      <Divider>锚点项设置</Divider>
+      <Table
+        size="small"
+        dataSource={model.items}
+        rowKey={(_, i) => String(i)}
+        columns={columns as any}
+        pagination={false}
+        bordered
+      />
+      <Button size="small" onClick={addColumn} block>
+        添加列
+      </Button>
+      <Modal
+        title="编辑列"
+        open={editVisible}
+        footer={null}
+        width={400}
+        onCancel={() => setEditVisible(false)}
+      >
+        <Form layout="vertical" size="small">
+          <Form.Item
+            label="锚点内容"
+            tooltip="支持HTML标签"
+            style={{ marginBottom: 10 }}
+          >
+            <Input.TextArea
+              value={editingForm.title}
+              onChange={(e) =>
+                setColumn(editingIndex!, { title: e.target.value })
+              }
+            />
+          </Form.Item>
+          <Form.Item label="锚点链接" style={{ marginBottom: 10 }}>
+            <AutoComplete
+              value={editingForm.href}
+              onChange={(e) => setColumn(editingIndex!, { href: e })}
+              options={items.map((i) => ({
+                value: i.id,
+                label: i.name,
+              }))}
+            />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+};

package/src/components/plugins/@antd/item-props/index.ts

@@ -19,4 +19,4 @@ export { ColProps } from './ColProps'
 export { ModalProps } from './ModalProps'
 export { SpaceProps } from './SpaceProps'
 export { DrawerProps } from './DrawerProps'
-
+export { AnchorProps } from './AnchorProps'

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

@@ -0,0 +1,114 @@
+import { Anchor, Space } from "antd";
+import React, { useContext, useMemo } from "react";
+import { IconFont } from "../../../icon/IconFont";
+import styled from "styled-components";
+import { PageContext } from "../../../context/PageContext";
+import { HtmlBaseProps } from "../../../typing";
+
+export type AnchorItem = {
+  key?: string;
+  href: string;
+  title: string;
+};
+
+export type AnchorRenderProps = {
+  id?: string;
+  item: any;
+  items?: AnchorItem[];
+  style?: React.CSSProperties;
+  linePosition?: number;
+  lineColor?: string;
+  lineWidth?: number;
+  gap?: number;
+  itemClassNames?: string[];
+  itemTitleClassNames?: string[];
+  indicatorClassNames?: string[];
+} & HtmlBaseProps;
+
+/**
+ * AnchorRender 组件
+ * 用途：渲染自定义 HTML 模板，支持数据源变量插值
+ * 参数：
+ * - id：组件唯一标识
+ * - template：HTML 模板字符串，支持 {{ expr }} 插值
+ * - item：当前元素数据（含 datasource）
+ * - style：样式
+ * - className：类名
+ * - ref：转发到 div 的引用（HTMLDivElement）
+ */
+export const AnchorRender: React.FC<AnchorRenderProps> = ({
+  id,
+  item,
+  items = [],
+  style,
+  linePosition = 0,
+  lineColor = "rgba(5, 5, 5, 0.06)",
+  lineWidth = 2,
+  gap = 30,
+  itemClassNames = [],
+  itemTitleClassNames = [],
+  indicatorClassNames = [],
+  className,
+}) => {
+  const { designable } = useContext(PageContext);
+  const anchorItems = useMemo(
+    () =>
+      items.map((item, index) => ({
+        ...item,
+        key: item.key || index,
+        title: <div dangerouslySetInnerHTML={{ __html: item.title }}></div>,
+        href: `#page-item-${item.href}`,
+      })),
+    [items],
+  );
+
+  const StyledAnchor = styled(Anchor)`
+    .ant-anchor:before {
+      inset-inline-start: ${linePosition || 0}px !important;
+      border-inline-start-color: ${lineColor ||
+      "rgba(5, 5, 5, 0.06)"} !important;
+      border-inline-start-width: ${lineWidth || 2}px !important;
+    }
+    .ant-anchor .ant-anchor-ink.ant-anchor-ink-visible {
+      left: ${linePosition || 0}px !important;
+      width: ${lineWidth || 2}px !important;
+    }
+    div.ant-anchor-link + div.ant-anchor-link {
+      margin-top: ${gap || 30}px;
+    }
+  `;
+
+  return (
+    <div id={id} className={className}>
+      <StyledAnchor
+        style={style}
+        items={anchorItems}
+        getContainer={() =>
+          designable
+            ? (document.querySelector(
+                ".center > .body.beautified_scrollbar.always",
+              ) as HTMLElement)
+            : window
+        }
+        classNames={{
+          item: (itemClassNames || []).join(" "),
+          itemTitle: (itemTitleClassNames || []).join(" "),
+          indicator: (indicatorClassNames || []).join(" "),
+        }}
+        styles={{
+          item: {
+            paddingTop: 0,
+            paddingBottom: 0,
+          },
+          itemTitle: {
+            // backgroundColor: "#ffffff",
+          },
+          indicator: {
+            left: `${linePosition || 0}px !important`,
+            width: `${lineWidth || 2}px !important`,
+          },
+        }}
+      />
+    </div>
+  );
+};

package/src/components/plugins/@antd/items/index.ts

@@ -19,3 +19,4 @@ export { DatePickerRender } from './DatePickerRender'
 export { SwitchRender } from './SwitchRender'
 export { ModalRender } from './ModalRender'
 export { DrawerRender } from './DrawerRender'
+export { AnchorRender } from './AnchorRender'