bi-sdk-react 0.0.1

package/src/components/layout/PageCanvas.tsx

@@ -0,0 +1,145 @@
+import React, {
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styled from "styled-components";
+import { DropContainer } from "../dnd/DropContainer";
+import { CallbacksType, EnvType } from "../typing";
+import { DesignerContext } from "../context/DesignerContext";
+import { EnvProvider } from "../context/EnvContext";
+
+export type PageCanvasProps = {
+  device?: "desktop" | "mobile" | "tablet";
+};
+
+const Wrapper = styled.div`
+  .empty-container.designable {
+    min-width: 10px;
+    min-height: 30px;
+    background-color: #f5f5f5;
+    border: 1px dashed #d9d9d9;
+  }
+  .page-canvas {
+    // display: flex;
+    // flex-direction: column;
+    // gap: 16px;
+    padding: 12px;
+    padding-bottom: 24px;
+    min-width: 0;
+    max-width: 100%;
+    overflow-x: hidden;
+    user-select: none;
+    background: #ffffff;
+
+    .page-item-component.designable {
+      position: relative;
+    }
+    .page-item-component.designable:hover {
+      outline: 1px dashed #1890ff;
+      cursor: move;
+    }
+    .page-item-component.designable.ant-row {
+      padding: 6px;
+    }
+    .page-item-component.designable.selected {
+      position: relative;
+      outline: 1px solid #1890ff;
+    }
+  }
+`;
+
+export const PageCanvas = React.forwardRef<any, PageCanvasProps>(
+  function PageCanvas({ device = "desktop" }, ref) {
+    const { schema, forceUpdate } = useContext(DesignerContext);
+    const rootRef = useRef<HTMLDivElement | null>(null);
+    const [canvasWidth, setCanvasWidth] = useState(0);
+    const [callbacks, setCallbacks] = useState<CallbacksType>({});
+    const [env, setEnv] = useState<EnvType>({ global: {}, local: {} });
+
+    const items = useMemo(() => schema.items || [], [schema.items]);
+
+    const [localList, setLocalList] = useState(items);
+
+    useEffect(() => {
+      setLocalList(schema.items || []);
+    }, [schema.items]);
+
+    const onLocalListChange = (list: any[]) => {
+      const newList = [...list];
+      schema.items = newList;
+      setLocalList(newList);
+      forceUpdate?.();
+    };
+
+    useEffect(() => {
+      const nextGlobal: Record<string, any> = {};
+      (schema.variables || []).forEach((item) => {
+        nextGlobal[item.name] = item.value;
+      });
+      setEnv((e) => ({ ...e, global: nextGlobal }));
+    }, [schema.variables]);
+
+    const computeCanvasWidth = () => {
+      const parent = rootRef.current?.parentElement;
+      const rect = parent?.getBoundingClientRect();
+      const width = rect?.width || 0;
+      if (width <= 100) {
+        setTimeout(computeCanvasWidth, 10);
+        return;
+      }
+      setCanvasWidth(width ? width - 36 : 0);
+    };
+
+    const initCallback = ({
+      id,
+      callback,
+    }: {
+      id: string;
+      callback: (v: any) => void;
+    }) => {
+      setCallbacks((c) => ({ ...c, [id]: callback }));
+    };
+
+    useEffect(() => {
+      computeCanvasWidth();
+    }, [device]);
+
+    useEffect(() => {
+      const onResize = () => computeCanvasWidth();
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      handleResize() {
+        computeCanvasWidth();
+      },
+      get dom() {
+        return rootRef.current;
+      },
+    }));
+
+    return (
+      <EnvProvider
+        deviceWidth={canvasWidth}
+        env={env}
+        callbacks={callbacks}
+        initCallback={initCallback}
+      >
+        <Wrapper ref={rootRef}>
+          <DropContainer
+            list={localList}
+            onListChange={onLocalListChange}
+            className="page-canvas"
+          />
+        </Wrapper>
+      </EnvProvider>
+    );
+  }
+);
+
+export default PageCanvas;

package/src/components/layout/PageItem.tsx

@@ -0,0 +1,182 @@
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import React, { useContext, useEffect, useState } from "react";
+import { DesignerContext } from "../context/DesignerContext";
+import { SchemaItemType } from "../typing";
+
+export type PageItemProps = {
+  id?: string;
+  item: SchemaItemType;
+  onDelete?: () => void;
+  parentList?: any[];
+  onListChange?: (list: any[]) => void;
+  index?: number;
+};
+
+/**
+ * PageItem 组件
+ * 用途：渲染单个页面元素，并在设计模式下支持拖拽
+ * 参数：
+ * - deviceWidth：设备宽度
+ * - item：元素数据
+ * - selectedItem：选中元素
+ * - env：环境对象
+ * - designable：是否开启设计模式
+ * - initCallback：初始化回调注册
+ * - callbacks：回调字典
+ * - onSelect：选择回调
+ * - onDelete：删除回调
+ * - parentList：所属列表引用，用于拖拽跨容器移动
+ * - index：当前元素索引
+ */
+export const PageItem: React.FC<PageItemProps> = ({
+  item,
+  onDelete,
+  parentList,
+  onListChange,
+  index,
+}) => {
+  const { designable, selectedItem, setSelectedItem: onSelect, plugins } =
+    useContext(DesignerContext);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const Comp = plugins.find((p) => p.key === item.type)?.component as
+    | React.ComponentType<any>
+    | undefined;
+
+  useEffect(() => {
+    const updateToolbarPosition = () => {
+      if (!toolbarEl.current) return;
+      const target = document.getElementById(`page-item-${item.id}`);
+      if (!target) {
+        removeToolbar();
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) {
+        toolbarEl.current.style.display = "none";
+        return;
+      } else {
+        toolbarEl.current.style.display = "flex";
+      }
+      const scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop ||
+        0;
+      const scrollLeft =
+        window.pageXOffset ||
+        document.documentElement.scrollLeft ||
+        document.body.scrollLeft ||
+        0;
+      toolbarEl.current.style.top = `${rect.top + scrollTop - 22}px`;
+      toolbarEl.current.style.left = `${rect.left + scrollLeft - 1}px`;
+    };
+    const toolbarEl = { current: null as HTMLDivElement | null };
+    const removeToolbar = () => {
+      if (toolbarEl.current) {
+        const link = toolbarEl.current.querySelector("a");
+        link && link.removeEventListener("click", handleDelete);
+        if (document.body.contains(toolbarEl.current))
+          document.body.removeChild(toolbarEl.current);
+        toolbarEl.current = null;
+        window.removeEventListener("scroll", updateToolbarPosition, true);
+        window.removeEventListener("resize", updateToolbarPosition);
+      }
+    };
+    const handleDelete = (e: any) => {
+      e.stopPropagation();
+      if (onDelete) onDelete();
+    };
+    if (selectedItem && selectedItem === item && designable) {
+      const div = document.createElement("div");
+      div.style.position = "absolute";
+      div.style.zIndex = "9999";
+      div.style.display = "flex";
+      div.style.gap = "4px";
+      const text = document.createElement("span");
+      text.innerText = item.name || item.type + `(${item.id})`;
+      text.style.background = "#1890ff";
+      text.style.color = "#fff";
+      text.style.fontSize = "12px";
+      text.style.borderTopLeftRadius = "4px";
+      text.style.borderTopRightRadius = "4px";
+      text.style.padding = "2px 8px";
+      text.style.cursor = "pointer";
+      text.style.userSelect = "none";
+      div.appendChild(text);
+      const link = document.createElement("a");
+      link.innerText = "X";
+      link.style.background = "#1890ff";
+      link.style.color = "#fff";
+      link.style.fontSize = "12px";
+      link.style.borderTopLeftRadius = "4px";
+      link.style.borderTopRightRadius = "4px";
+      link.style.padding = "2px 8px";
+      link.style.cursor = "pointer";
+      link.style.userSelect = "none";
+      div.appendChild(link);
+      link.addEventListener("click", handleDelete);
+      document.body.appendChild(div);
+      toolbarEl.current = div;
+      updateToolbarPosition();
+      window.addEventListener("scroll", updateToolbarPosition, true);
+      window.addEventListener("resize", updateToolbarPosition);
+      return () => removeToolbar();
+    } else {
+      return;
+    }
+    
+  }, [selectedItem, designable, item, onDelete]);
+
+  /**
+   * 注册拖拽源：仅在设计模式下启用
+   */
+  useEffect(() => {
+    const el = document.getElementById(`page-item-${item.id}`);
+    if (!el || !designable) return;
+    const cleanup = draggable({
+      element: el,
+      getInitialData: () => ({
+        id: item.id,
+        index,
+        list: parentList,
+        onListChange,
+        data: item,
+      }),
+      canDrag: () => !!designable,
+      onDragStart: () => {
+        setIsDragging(true);
+      },
+      onDrop: () => {
+        setIsDragging(false);
+      },
+    });
+    const handleClick = (e: MouseEvent) => {
+      e.stopPropagation();
+      onSelect && onSelect(item);
+    }
+    designable && el.addEventListener("click", handleClick);
+    return () => {
+      cleanup();
+      designable && el.removeEventListener("click", handleClick);
+    }
+  }, [designable, item, index, parentList]);
+
+  if (!Comp) return null;
+
+  return (
+    <Comp
+      id={`page-item-${item.id}`}
+      data-item-id={item.id}
+      {...(item.props || {})}
+      item={item}
+      className={`page-item-component ${designable ? "designable" : ""} ${
+        selectedItem === item ? "selected" : ""
+      }`}
+      style={{
+        ...(item.style || {}),
+        opacity: isDragging ? 0.5 : 1,
+      }}
+    />
+  );
+};

package/src/components/panel/AiPanel.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import styled from "styled-components";
+import { Tooltip, Space, Card } from "antd";
+import { HistoryOutlined, MessageOutlined } from "@ant-design/icons";
+import { PaneHeader } from "./PaneHeader";
+import { ChatInput } from "./ChatInput";
+
+export type AiPanelProps = {
+  agentList?: { id: string; name: string }[];
+};
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+  }
+  .conversation-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .conversation-list li {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    justify-content: space-between;
+    padding: 4px 8px;
+    background: var(--link-bg-color);
+    border-radius: 2px;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  .conversation-list li a {
+    color: var(--ant-color-text-secondary);
+    flex: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .conversation-list li small {
+    white-space: nowrap;
+  }
+`;
+
+const DEFAULT_AGENT_LIST: any[] = [];
+
+export const AiPanel: React.FC<AiPanelProps> = ({
+  agentList = DEFAULT_AGENT_LIST,
+}) => {
+  return (
+    <Root>
+      <PaneHeader
+        title="智能助理"
+        extra={
+          <Space>
+            <Tooltip title="新对话" placement="topRight">
+              <a>
+                <MessageOutlined />
+              </a>
+            </Tooltip>
+            <Tooltip title="历史记录" placement="topRight">
+              <a>
+                <HistoryOutlined />
+              </a>
+            </Tooltip>
+          </Space>
+        }
+      />
+      <div className="body">
+        <div style={{ flex: "1 1 auto" }} />
+        <Card
+          title="历史记录"
+          size="small"
+          variant="borderless"
+          styles={{
+            header: {
+              padding: 0,
+              border: "none",
+            },
+            body: {
+              padding: 0,
+            },
+          }}
+        >
+          <ul className="conversation-list">
+            <li>
+              <a>
+                <MessageOutlined />
+                你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
+              </a>
+              <small>刚刚</small>
+            </li>
+            <li>
+              <a>
+                <MessageOutlined />
+                你好
+              </a>
+              <small>刚刚</small>
+            </li>
+          </ul>
+        </Card>
+        <ChatInput agentList={agentList} />
+      </div>
+    </Root>
+  );
+};

package/src/components/panel/CascadePanel.tsx

@@ -0,0 +1,163 @@
+import React, { useContext, useMemo } from "react";
+import { Dropdown, Menu, Popconfirm, Space } from "antd";
+import {
+  PlusOutlined,
+  CaretDownOutlined,
+  DeleteOutlined,
+} from "@ant-design/icons";
+import { PaneHeader } from "./PaneHeader";
+import { IconFont } from "../icon/IconFont";
+import styled from "styled-components";
+import { DesignerContext } from "../context/DesignerContext";
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  ul,
+  li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    border-bottom: 1px dotted #d9d9d9;
+  }
+  li > div:first-child {
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  li:last-child {
+    border-bottom: none;
+  }
+  a.toolbar {
+    font-size: 16px;
+    color: var(--ant-color-text-secondary);
+  }
+`;
+
+export const CascadePanel: React.FC = ({}) => {
+  const { schema, selectedItem, setSelectedItem, plugins, forceUpdate } =
+    useContext(DesignerContext);
+  const pluginMap = useMemo(() => {
+    return (plugins || []).reduce((prev: Record<string, any>, cur: any) => {
+      prev[cur.key] = cur;
+      return prev;
+    }, {});
+  }, [plugins]);
+  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]);
+  const itemMap = useMemo(() => {
+    return items.reduce((prev: Record<string, any>, cur: any) => {
+      if (cur.id) prev[cur.id] = cur;
+      return prev;
+    }, {});
+  }, [items]);
+
+  const onChange = (ids: string[]) => {
+    if (!selectedItem) return;
+    setSelectedItem(Object.assign(selectedItem, { cascadeIds: ids }));
+    forceUpdate();
+  };
+
+  return (
+    <Root className="cascade-panel">
+      <PaneHeader
+        title="联动"
+        extra={
+          selectedItem?.cascadeIds ? (
+            <Space>
+              <Dropdown
+                menu={{
+                  onClick: ({ key }) => {
+                    const ids = [...(selectedItem?.cascadeIds || [])];
+                    ids.push(String(key));
+                    onChange && onChange(ids);
+                  },
+                  items: items.map((it) => ({
+                    key: it.id,
+                    label: (
+                      <a>
+                        <IconFont type={pluginMap[it.type]?.icon} />{" "}
+                        {it.name || pluginMap[it.type]?.label} ({it.id})
+                      </a>
+                    ),
+                  })),
+                }}
+                placement="bottomLeft"
+                trigger={["click"]}
+              >
+                <a className="toolbar">
+                  <PlusOutlined />
+                  <CaretDownOutlined
+                    style={{ fontSize: 8, verticalAlign: "sub" }}
+                  />
+                </a>
+              </Dropdown>
+            </Space>
+          ) : null
+        }
+      />
+      <div className="body">
+        {selectedItem?.cascadeIds && (
+          <ul>
+            {(selectedItem.cascadeIds || []).map(
+              (id: string, index: number) => (
+                <li key={id}>
+                  <div>
+                    <IconFont type={pluginMap[itemMap[id]?.type]?.icon} />{" "}
+                    {itemMap[id]?.name || pluginMap[itemMap[id]?.type]?.label} (
+                    {id})
+                  </div>
+                  <Popconfirm
+                    title="确认删除吗？"
+                    okText="确认"
+                    cancelText="取消"
+                    onConfirm={() => {
+                      const ids = [...(selectedItem.cascadeIds || [])];
+                      ids.splice(index, 1);
+                      onChange && onChange(ids);
+                    }}
+                  >
+                    <a>
+                      <DeleteOutlined />
+                    </a>
+                  </Popconfirm>
+                </li>
+              )
+            )}
+          </ul>
+        )}
+      </div>
+    </Root>
+  );
+};