bi-sdk-react 0.0.71 → 0.0.73

package/package.json

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

package/src/components/layout/PageItem.tsx

@@ -107,6 +107,24 @@ const Toolbar: React.FC<{
             margin: "0 -24px",
           },
         }}
+        modalRender={(node) => (
+          <div
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+            }}
+            onMouseUp={(e) => {
+              e.stopPropagation();
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            {node}
+          </div>
+        )}
         footer={
           <Space>
             <Button
@@ -158,7 +176,11 @@ const Toolbar: React.FC<{
           }}
         />
       </Modal>
-      <ToolbarWrap>
+      <ToolbarWrap
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
         {!!ancestors?.length ? (
           <Dropdown
             placement="topLeft"

package/src/components/panel/ComponentPanel.tsx

@@ -1,9 +1,27 @@
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import React, { useContext, useEffect, useMemo, useRef } from "react";
+import {
+  Card,
+  CheckboxOptionType,
+  Empty,
+  Flex,
+  Input,
+  Modal,
+  Pagination,
+  Radio,
+  Space,
+  Typography,
+} from "antd";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { PageContext } from "../context/PageContext";
 import { IconFont } from "../icon/IconFont";
-import { PluginType } from "../typing";
+import {
+  ExampleItemType,
+  FetchType,
+  PluginType,
+  SchemaItemType,
+  TemplateItemType,
+} from "../typing";
 import { uuid } from "../utils";
 import { PaneHeader } from "./PaneHeader";
 
@@ -51,6 +69,237 @@ const Root = styled.div`
   }
 `;
 
+const EmptyImage = () => (
+  <svg
+    height="132"
+    version="1.1"
+    viewBox="0 0 148 132"
+    width="148"
+    xmlns="http://www.w3.org/2000/svg"
+    style={{
+      height: 80,
+      background: "#f5f5f5",
+    }}
+  >
+    <g node-id="23">
+      <path
+        d="M 116.04 26.83 L 95.88 26.83 L 95.88 19.15 C 95.88 18.62 95.45 18.19 94.92 18.19 L 88.20 18.19 C 87.67 18.19 87.24 18.62 87.24 19.15 L 87.24 26.83 L 56.52 26.83 L 56.52 19.15 C 56.52 18.62 56.09 18.19 55.56 18.19 L 48.84 18.19 C 48.31 18.19 47.88 18.62 47.88 19.15 L 47.88 26.83 L 27.72 26.83 C 26.70 26.83 25.72 27.24 25.00 27.96 C 24.28 28.68 23.88 29.65 23.88 30.67 L 23.88 110.35 C 23.88 111.37 24.28 112.35 25.00 113.07 C 25.72 113.79 26.70 114.19 27.72 114.19 L 116.04 114.19 C 117.06 114.20 118.04 113.79 118.76 113.07 C 119.48 112.35 119.88 111.37 119.88 110.36 L 119.88 30.67 C 119.88 29.65 119.48 28.67 118.76 27.95 C 118.04 27.23 117.06 26.83 116.04 26.83 Z"
+        fill="#e2e5f1"
+        fill-opacity="0.8"
+        fill-rule="nonzero"
+        group-id="1"
+        id="路径_2309"
+        node-id="3"
+        stroke="none"
+        target-height="96.005135"
+        target-width="96.00427"
+        target-x="23.878815"
+        target-y="18.189949"
+      />
+    </g>
+    <g node-id="24">
+      <path
+        d="M 29.95 122.53 L 27.74 118.71 L 46.79 107.71 L 49.00 111.53 Z M 54.50 99.05 L 16.39 121.05 L -0.00 92.66 L 38.10 70.66 L 54.49 99.05 Z M 21.46 95.65 L 17.57 110.02 C 17.54 110.12 17.55 110.23 17.61 110.31 C 17.66 110.40 17.74 110.47 17.84 110.50 L 20.30 111.15 C 20.40 111.18 20.51 111.16 20.60 111.11 C 20.69 111.06 20.76 110.98 20.79 110.88 L 23.91 99.34 L 31.57 101.37 C 31.68 101.40 31.78 101.39 31.87 101.33 C 31.96 101.28 32.03 101.19 32.05 101.10 L 37.43 81.25 C 37.46 81.15 37.45 81.04 37.39 80.95 C 37.34 80.86 37.25 80.80 37.15 80.77 L 34.69 80.13 C 34.48 80.07 34.27 80.20 34.21 80.40 L 29.60 97.41 L 21.94 95.38 C 21.84 95.36 21.73 95.37 21.65 95.43 C 21.55 95.47 21.49 95.56 21.46 95.66 Z"
+        fill="#417aff"
+        fill-opacity="0.8"
+        fill-rule="nonzero"
+        group-id="2"
+        id="联合_14"
+        node-id="4"
+        stroke="none"
+        target-height="51.876953"
+        target-width="54.5"
+        target-x="-0.00390625"
+        target-y="70.657715"
+      />
+    </g>
+    <g node-id="25">
+      <path
+        d="M 88.93 34.73 C 88.93 34.73 117.73 48.02 115.10 55.87 C 112.47 63.72 103.24 56.85 107.78 52.26 C 112.31 47.68 124.85 52.02 124.81 67.98 C 124.77 83.93 115.74 105.47 74.82 116.65"
+        fill="none"
+        group-id="3"
+        id="路径_2313"
+        node-id="5"
+        stroke="#c2c8d8"
+        stroke-dasharray="2 2"
+        stroke-linecap="butt"
+        stroke-opacity="0.8"
+        stroke-width="1"
+        target-height="81.921974"
+        target-width="50.02726"
+        target-x="74.82369"
+        target-y="34.732864"
+      />
+    </g>
+    <g node-id="26">
+      <g node-id="36">
+        <g node-id="38">
+          <path
+            d="M 142.32 93.93 C 139.32 93.93 136.89 91.50 136.89 88.49 C 136.89 85.49 139.32 83.06 142.32 83.06 C 145.33 83.06 147.76 85.49 147.76 88.49 C 147.74 91.49 145.32 93.91 142.32 93.93 Z M 142.32 84.92 C 140.35 84.92 138.76 86.52 138.76 88.49 C 138.76 90.46 140.35 92.06 142.32 92.06 C 144.29 92.06 145.89 90.46 145.89 88.49 C 145.88 86.53 144.29 84.94 142.32 84.92 Z"
+            fill="#a4bfff"
+            fill-opacity="0.8"
+            fill-rule="nonzero"
+            group-id="4,14,16"
+            id="路径_2292"
+            node-id="8"
+            stroke="none"
+            target-height="10.873993"
+            target-width="10.873993"
+            target-x="136.8869"
+            target-y="83.056"
+          />
+        </g>
+      </g>
+    </g>
+    <g node-id="27">
+      <g node-id="37">
+        <g node-id="39">
+          <path
+            d="M 24.03 49.65 L 15.77 41.38 L 24.03 33.12 L 32.30 41.38 Z M 18.66 41.38 L 24.11 46.84 L 29.57 41.38 L 24.11 35.92 Z"
+            fill="#c2c8d8"
+            fill-opacity="0.8"
+            fill-rule="nonzero"
+            group-id="5,15,17"
+            id="路径_2294"
+            node-id="11"
+            stroke="none"
+            target-height="16.531982"
+            target-width="16.531982"
+            target-x="15.768982"
+            target-y="33.115997"
+          />
+        </g>
+      </g>
+    </g>
+    <g node-id="28">
+      <path
+        d="M 60.87 132.43 C 60.31 132.43 59.87 131.98 59.87 131.43 L 59.87 127.81 L 56.25 127.81 C 55.70 127.81 55.25 127.36 55.25 126.81 L 55.25 125.72 C 55.25 125.17 55.70 124.72 56.25 124.72 L 59.87 124.72 L 59.87 121.11 C 59.87 120.55 60.31 120.11 60.87 120.11 L 61.95 120.11 C 62.50 120.11 62.95 120.55 62.95 121.11 L 62.95 124.72 L 66.57 124.72 C 67.12 124.72 67.57 125.17 67.57 125.72 L 67.57 126.81 C 67.57 127.36 67.12 127.81 66.57 127.81 L 62.95 127.81 L 62.95 131.43 C 62.95 131.98 62.50 132.43 61.95 132.43 Z"
+        fill="#c2c8d8"
+        fill-opacity="0.8"
+        fill-rule="nonzero"
+        group-id="6"
+        id="联合_16"
+        node-id="12"
+        stroke="none"
+        target-height="12.322006"
+        target-width="12.319"
+        target-x="55.247986"
+        target-y="120.106995"
+      />
+    </g>
+    <g node-id="29">
+      <path
+        d="M 9.55 20.92 C 9.00 20.92 8.55 20.47 8.55 19.92 L 8.55 17.36 L 6.00 17.36 C 5.44 17.36 5.00 16.92 5.00 16.36 L 5.00 15.99 C 5.00 15.44 5.44 14.99 6.00 14.99 L 8.55 14.99 L 8.55 12.44 C 8.55 11.88 9.00 11.44 9.55 11.44 L 9.92 11.44 C 10.48 11.44 10.92 11.88 10.92 12.44 L 10.92 14.99 L 13.48 14.99 C 14.03 14.99 14.48 15.44 14.48 15.99 L 14.48 16.36 C 14.48 16.91 14.03 17.36 13.48 17.36 L 10.92 17.36 L 10.92 19.92 C 10.92 20.47 10.48 20.92 9.92 20.92 Z"
+        fill="#417aff"
+        fill-opacity="0"
+        fill-rule="nonzero"
+        group-id="7"
+        id="联合_17"
+        node-id="13"
+        stroke="none"
+        target-height="9.483"
+        target-width="9.483"
+        target-x="4.9959717"
+        target-y="11.435974"
+      />
+    </g>
+    <g node-id="30">
+      <path
+        d="M 94.70 28.55 C 91.61 31.22 88.07 33.31 84.23 34.72 C 81.19 35.89 77.81 37.03 74.50 36.67 C 72.71 36.48 70.99 35.89 69.46 34.94 C 67.45 33.45 65.68 31.67 64.19 29.66 C 63.27 28.56 62.28 28.70 61.16 29.47 C 60.46 29.95 60.14 31.27 59.52 31.64 C 58.72 32.12 58.08 31.82 58.36 30.67 C 58.75 29.08 61.51 27.88 62.94 27.74 C 62.89 25.08 65.70 21.30 67.79 19.89 C 75.73 14.53 85.75 18.26 91.90 24.45 C 92.18 24.72 95.36 27.95 94.70 28.55 Z"
+        fill="#697391"
+        fill-opacity="0.8"
+        fill-rule="nonzero"
+        group-id="8"
+        id="路径_2314"
+        node-id="14"
+        stroke="none"
+        target-height="22.502167"
+        target-width="37.280975"
+        target-x="58.082336"
+        target-y="14.527588"
+      />
+    </g>
+    <g node-id="31">
+      <path
+        d="M 126.97 51.55 C 125.23 50.94 123.61 50.03 122.19 48.85 C 120.95 47.97 119.94 46.82 119.23 45.48 C 118.90 44.74 118.74 43.93 118.77 43.12 C 118.90 42.00 119.19 40.90 119.64 39.87 C 119.86 39.26 119.59 38.90 119.03 38.63 C 118.69 38.47 118.09 38.64 117.81 38.48 C 117.45 38.28 117.42 37.97 117.93 37.81 C 118.64 37.60 119.73 38.42 120.11 38.94 C 121.46 38.42 122.96 38.47 124.28 39.07 C 128.17 40.96 128.97 45.72 127.94 49.52 C 127.90 49.69 127.35 51.67 126.97 51.55 Z"
+        fill="#697391"
+        fill-opacity="0.8"
+        fill-rule="nonzero"
+        group-id="9"
+        id="路径_2316"
+        node-id="15"
+        stroke="none"
+        target-height="14.066719"
+        target-width="11.554443"
+        target-x="117.418564"
+        target-y="37.602352"
+      />
+    </g>
+    <g node-id="32">
+      <path
+        d="M 88.52 10.94 C 87.19 10.59 85.93 10.00 84.81 9.21 C 83.88 8.67 83.11 7.90 82.56 6.97 C 82.32 6.46 82.22 5.91 82.26 5.35 C 82.40 4.55 82.67 3.78 83.05 3.07 C 83.25 2.64 83.03 2.40 82.60 2.24 C 82.33 2.13 81.86 2.27 81.64 2.17 C 81.36 2.04 81.34 1.82 81.75 1.70 C 82.32 1.53 83.17 2.06 83.45 2.42 C 84.51 2.02 85.68 2.01 86.75 2.38 C 89.78 3.58 90.28 6.85 89.35 9.51 C 89.31 9.63 88.82 11.02 88.52 10.94 Z"
+        fill="#697391"
+        fill-opacity="0"
+        fill-rule="nonzero"
+        group-id="10"
+        id="路径_2317"
+        node-id="16"
+        stroke="none"
+        target-height="9.480836"
+        target-width="8.940781"
+        target-x="81.3402"
+        target-y="1.5345681"
+      />
+    </g>
+    <g node-id="33">
+      <path
+        d="M 110.05 85.50 C 111.54 83.78 112.70 81.80 113.49 79.67 C 114.27 77.97 114.64 76.11 114.57 74.25 C 114.47 73.25 114.14 72.29 113.61 71.44 C 112.78 70.32 111.79 69.33 110.67 68.51 C 110.06 68.00 110.13 67.44 110.56 66.82 C 110.83 66.43 111.57 66.24 111.77 65.90 C 112.04 65.46 111.87 65.10 111.23 65.25 C 110.34 65.47 109.68 67.02 109.60 67.81 C 108.11 67.78 106.01 69.35 105.22 70.51 C 102.24 74.93 104.32 80.51 107.76 83.94 C 107.92 84.09 109.72 85.87 110.05 85.50 Z"
+        fill="#697391"
+        fill-opacity="0"
+        fill-rule="nonzero"
+        group-id="11"
+        id="路径_2318"
+        node-id="17"
+        stroke="none"
+        target-height="20.767654"
+        target-width="12.403198"
+        target-x="102.238434"
+        target-y="65.100204"
+      />
+    </g>
+    <g node-id="34">
+      <path
+        d="M 104.48 112.46 C 105.55 112.38 106.59 112.11 107.56 111.66 C 108.38 111.36 109.12 110.87 109.72 110.22 C 110.01 109.86 110.22 109.43 110.33 108.97 C 110.42 108.32 110.42 107.67 110.33 107.02 C 110.30 106.65 110.51 106.49 110.86 106.43 C 111.07 106.39 111.38 106.57 111.56 106.52 C 111.79 106.47 111.86 106.29 111.59 106.13 C 111.23 105.91 110.50 106.20 110.21 106.44 C 109.53 105.94 108.68 105.74 107.86 105.88 C 105.40 106.36 104.24 108.90 104.24 111.18 C 104.24 111.28 104.25 112.47 104.48 112.46 Z"
+        fill="#697391"
+        fill-opacity="0"
+        fill-rule="nonzero"
+        group-id="12"
+        id="路径_2319"
+        node-id="18"
+        stroke="none"
+        target-height="6.72332"
+        target-width="7.620468"
+        target-x="104.23713"
+        target-y="105.74457"
+      />
+    </g>
+    <path
+      d="M 80.35 75.78 L 88.84 67.29 L 93.08 71.53 L 84.59 80.02 Z M 51.88 71.04 L 56.12 66.80 L 64.61 75.28 L 60.36 79.52 Z M 69.48 73.29 L 69.48 61.29 L 75.48 61.29 L 75.48 73.29 Z"
+      fill="#ffffff"
+      fill-opacity="0.8"
+      fill-rule="nonzero"
+      group-id="13"
+      id="联合_21"
+      node-id="19"
+      stroke="none"
+      target-height="18.728516"
+      target-width="41.197266"
+      target-x="51.88086"
+      target-y="61.29297"
+    />
+  </svg>
+);
+
 const PluginTile: React.FC<{ plugin: PluginType }> = ({ plugin }) => {
   const ref: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
 
@@ -88,8 +337,262 @@ const PluginTile: React.FC<{ plugin: PluginType }> = ({ plugin }) => {
   );
 };
 
+const cloneItem = (node: SchemaItemType): SchemaItemType => {
+  const newNode = { ...node, id: uuid() };
+
+  if (node.children) {
+    if (Array.isArray(node.children)) {
+      newNode.children = node.children.map(cloneItem);
+    } else {
+      const newChildren: Record<string, SchemaItemType[]> = {};
+      Object.keys(node.children).forEach((key) => {
+        newChildren[key] = (node.children as Record<string, SchemaItemType[]>)[
+          key
+        ].map(cloneItem);
+      });
+      newNode.children = newChildren;
+    }
+  }
+  return newNode;
+};
+
+const ExampleItem: React.FC<{
+  data: Omit<ExampleItemType, "item">;
+  fetch: FetchType;
+}> = ({ data, fetch }) => {
+  const ref: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+  const [item, setItem] = useState<ExampleItemType | null>(null);
+
+  const fetchDetail = async () => {
+    const res = await fetch?.exampleDetail?.(data.id);
+    setItem(res!);
+  };
+
+  /**
+   * 注册拖拽源：仅在设计模式下启用
+   */
+  useEffect(() => {
+    if (!item) {
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    const cleanup = draggable({
+      element: el,
+      getInitialData: () => {
+        const e = cloneItem(JSON.parse(JSON.stringify(item.item || {})));
+        return {
+          id: e.id,
+          data: e,
+        };
+      },
+      canDrag: () => true,
+      onDragStart: () => {},
+      onDrop: () => {},
+    });
+    return () => cleanup();
+  }, [item]);
+
+  useEffect(() => {
+    if (!data.id) return;
+    fetchDetail();
+  }, [data.id]);
+
+  return (
+    <div className="drag-move" ref={ref}>
+      <Card
+        size="small"
+        key={data.id}
+        cover={data.cover || <EmptyImage />}
+        variant="outlined"
+        style={{ cursor: "move" }}
+      >
+        <Card.Meta
+          title={data.name}
+          description={
+            <Typography.Text
+              ellipsis={{ tooltip: data.description || "暂无描述" }}
+              style={{ color: "var(--ant-color-text-description)" }}
+            >
+              {data.description}
+            </Typography.Text>
+          }
+        />
+      </Card>
+    </div>
+  );
+};
+
+const ExampleList: React.FC<{ fetch: FetchType }> = ({ fetch }) => {
+  const [total, setTotal] = useState(-1);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(20);
+  const [keyword, setKeyword] = useState("");
+  const [list, setList] = useState<Omit<ExampleItemType, "item">[]>([]);
+
+  const fetchList = async () => {
+    const res = await fetch.exampleList?.(page, size, keyword);
+    if (Array.isArray(res)) {
+      setList(res);
+      setTotal(-1);
+    } else if (typeof res === "object") {
+      setList(res.list || []);
+      setTotal(res.total);
+    }
+  };
+
+  useEffect(() => {
+    fetchList();
+  }, [page, size, keyword]);
+
+  return (
+    <Flex vertical={true} gap={12} style={{ height: "100%" }}>
+      <Input.Search
+        size="small"
+        value={keyword}
+        placeholder="输入关键字检索"
+        onChange={(e) => setKeyword(e.target.value)}
+      />
+      <Space orientation="vertical" style={{ flex: "auto", overflow: "auto" }}>
+        {list.map((item) => (
+          <ExampleItem key={item.id} data={item} fetch={fetch} />
+        ))}
+      </Space>
+      {total >= 0 && (
+        <Pagination
+          align="center"
+          size="small"
+          current={page}
+          pageSize={size}
+          total={total}
+          hideOnSinglePage={true}
+          onChange={(page, pageSize) => {
+            setPage(page);
+            setSize(pageSize);
+          }}
+        />
+      )}
+    </Flex>
+  );
+};
+
+const TemplateItem: React.FC<{
+  data: Omit<TemplateItemType, "schema">;
+  fetch: FetchType;
+}> = ({ data, fetch }) => {
+  const [item, setItem] = useState<TemplateItemType | null>(null);
+  const { schema, setSchema } = useContext(PageContext);
+
+  const fetchDetail = async () => {
+    const res = await fetch?.templateDetail?.(data.id);
+    setItem(res!);
+  };
+
+  const handleClick = () => {
+    if (!item?.schema) {
+      return;
+    }
+    const next = JSON.parse(JSON.stringify(item.schema));
+    if (schema.items.length === 0) {
+      setSchema(next);
+    } else {
+      Modal.confirm({
+        title: "提示",
+        content: "确认加载该模板页面，加载后会替换现有页面内容。",
+        okText: "确认",
+        cancelText: "取消",
+        onOk() {
+          setSchema(next);
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!data.id) return;
+    fetchDetail();
+  }, [data.id]);
+
+  return (
+    <Card
+      size="small"
+      key={data.id}
+      cover={data.cover || <EmptyImage />}
+      variant="outlined"
+      style={{ cursor: "pointer" }}
+      onClick={handleClick}
+    >
+      <Card.Meta
+        title={data.name}
+        description={
+          <Typography.Text
+            ellipsis={{ tooltip: data.description || "暂无描述" }}
+            style={{ color: "var(--ant-color-text-description)" }}
+          >
+            {data.description}
+          </Typography.Text>
+        }
+      />
+    </Card>
+  );
+};
+
+const TemplateList: React.FC<{ fetch: FetchType }> = ({ fetch }) => {
+  const [total, setTotal] = useState(-1);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(20);
+  const [keyword, setKeyword] = useState("");
+  const [list, setList] = useState<Omit<TemplateItemType, "schema">[]>([]);
+
+  const fetchList = async () => {
+    const res = await fetch.templateList?.(page, size, keyword);
+    if (Array.isArray(res)) {
+      setList(res);
+      setTotal(-1);
+    } else if (typeof res === "object") {
+      setList(res.list || []);
+      setTotal(res.total);
+    }
+  };
+
+  useEffect(() => {
+    fetchList();
+  }, [page, size, keyword]);
+
+  return (
+    <Flex vertical={true} gap={12} style={{ height: "100%" }}>
+      <Input.Search
+        size="small"
+        value={keyword}
+        placeholder="输入关键字检索"
+        onChange={(e) => setKeyword(e.target.value)}
+      />
+      <Space orientation="vertical" style={{ flex: "auto", overflow: "auto" }}>
+        {list.map((item) => (
+          <TemplateItem key={item.id} data={item} fetch={fetch} />
+        ))}
+      </Space>
+      {total >= 0 && (
+        <Pagination
+          align="center"
+          size="small"
+          current={page}
+          pageSize={size}
+          total={total}
+          hideOnSinglePage={true}
+          onChange={(page, pageSize) => {
+            setPage(page);
+            setSize(pageSize);
+          }}
+        />
+      )}
+    </Flex>
+  );
+};
+
 export const ComponentPanel: React.FC = () => {
-  const { plugins } = useContext(PageContext);
+  const { plugins, fetch } = useContext(PageContext);
+  const [tab, setTab] = useState("component");
   const grouped = useMemo(() => {
     const grouped: { group: string; items: PluginType[] }[] = [];
     plugins.forEach((item) => {
@@ -99,20 +602,64 @@ export const ComponentPanel: React.FC = () => {
     });
     return grouped;
   }, [plugins]);
+
+  const headerOptions: CheckboxOptionType<string>[] = useMemo(() => {
+    const options = [
+      {
+        label: "组件",
+        value: "component",
+      },
+    ];
+    if (fetch?.exampleList && fetch?.exampleDetail) {
+      options.push({
+        label: "片段",
+        value: "chunk",
+      });
+    }
+    if (fetch?.templateList && fetch?.templateDetail) {
+      options.push({
+        label: "模板",
+        value: "template",
+      });
+    }
+    return options;
+  }, [
+    fetch?.exampleList,
+    fetch?.exampleDetail,
+    fetch?.templateList,
+    fetch?.templateDetail,
+  ]);
   return (
     <Root className="component-panel">
-      <PaneHeader title="组件库" />
+      <PaneHeader
+        title={
+          headerOptions.length === 1 ? (
+            headerOptions[0].label
+          ) : (
+            <Radio.Group
+              size="small"
+              optionType="button"
+              value={tab}
+              options={headerOptions}
+              onChange={(e) => setTab(e.target.value)}
+            />
+          )
+        }
+      />
       <div className="body beautified_scrollbar">
-        {grouped.map((group) => (
-          <div className="plugin-group" key={group.group}>
-            <div className="group-title">{group.group}</div>
-            <div className="plugin-list">
-              {group.items.map((item) => (
-                <PluginTile key={item.key} plugin={item} />
-              ))}
+        {tab === "component" &&
+          grouped.map((group) => (
+            <div className="plugin-group" key={group.group}>
+              <div className="group-title">{group.group}</div>
+              <div className="plugin-list">
+                {group.items.map((item) => (
+                  <PluginTile key={item.key} plugin={item} />
+                ))}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        {tab === "chunk" && fetch && <ExampleList fetch={fetch} />}
+        {tab === "template" && fetch && <TemplateList fetch={fetch} />}
       </div>
     </Root>
   );

package/src/components/panel/PaneHeader.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from "react";
+import styled from "styled-components";
 
 export type PaneHeaderProps = {
-  title?: string
-  extra?: React.ReactNode
-  style?: React.CSSProperties
-}
+  title?: React.ReactNode;
+  extra?: React.ReactNode;
+  style?: React.CSSProperties;
+};
 
 const Header = styled.div`
   width: 100%;
@@ -23,13 +23,17 @@ const Header = styled.div`
   .extra {
     line-height: 32px;
   }
-`
+`;
 
-export const PaneHeader: React.FC<PaneHeaderProps> = ({ title = '', extra, style = {} }) => {
+export const PaneHeader: React.FC<PaneHeaderProps> = ({
+  title = "",
+  extra,
+  style = {},
+}) => {
   return (
     <Header className="pane-header" style={style}>
       <span className="title">{title}</span>
       <div className="extra">{extra}</div>
     </Header>
-  )
-}
+  );
+};