bi-sdk-react 0.0.4 → 0.0.6

package/src/example.tsx

@@ -1,10 +1,18 @@
 import { CloseOutlined, EditOutlined, PlusOutlined } from "@ant-design/icons";
 import { Button, Col, Divider, Drawer, Form, Input, Row, Table } from "antd";
-import React, { useEffect, useRef, useState } from "react";
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import styled from "styled-components";
 import { PageDesigner } from "./components";
 import { schema } from "./components/example";
 import { plugins } from "./components/plugins/@antd";
+import { DatasetSelectorFunction, FieldType } from "./components/typing";
+import { uuid } from "./components/utils";
 
 type Agent = { id: string | number; name: string };
 
@@ -32,7 +40,20 @@ const EditDrawer = styled(Drawer)`
 export const Example: React.FC = () => {
   const editDrawerRef = useRef<any>(null);
   const [editVisible, setEditVisible] = useState(false);
-  const [agentList, setAgentList] = useState<Agent[]>([]);
+  const [agentList, setAgentList] = useState<Agent[]>([
+    {
+      id: 1,
+      name: "教师数据集",
+    },
+    {
+      id: 2,
+      name: "学生数据集",
+    },
+    {
+      id: 3,
+      name: "教学数据集",
+    },
+  ]);
   const [params, setParams] = useState<{ name: string }>({ name: "" });
   const columns = [
     { title: "名称", dataIndex: "name", key: "name" },
@@ -61,16 +82,6 @@ export const Example: React.FC = () => {
     }, 0);
   };
 
-  useEffect(() => {
-    const initAgentList = async () => {
-      try {
-        setAgentList([]);
-      } catch {
-        setAgentList([]);
-      }
-    };
-    initAgentList();
-  }, []);
   return (
     <div style={{ padding: 20 }}>
       <Row justify="space-around">
@@ -117,20 +128,340 @@ export const Example: React.FC = () => {
           }}
         >
           <PageDesigner
+            pageId="1"
             ref={editDrawerRef}
             agentList={agentList}
             plugins={plugins}
             headerExtra={
               <>
-                <Divider type="vertical" />
+                <Divider orientation="vertical" />
                 <a className="toolbar" onClick={() => setEditVisible(false)}>
                   <CloseOutlined />
                 </a>
               </>
             }
+            datasourceEnable={false}
+            datasetPanel={DatasetPanel}
+            datasetSelector={datasetSelector()}
+            fetch={{
+              ai: {
+                chat: async (bizType, bizId, conversationId, request) =>
+                  new Promise((resolve) => {
+                    setTimeout(() => {
+                      resolve({ ...example.chatResponse, id: uuid() });
+                    }, 5000);
+                  }),
+                conversationList: async (bizType, bizId) =>
+                  Promise.resolve(example.conversationList),
+                messageList: async (bizType, bizId, conversationId) =>
+                  Promise.resolve(
+                    example.messageList.filter(
+                      (m) => m.conversationId === conversationId
+                    )
+                  ),
+                removeConversation: async (bizType, bizId, conversationId) =>
+                  Promise.resolve(true),
+                removeMessage: async (bizType, bizId, messageId) =>
+                  Promise.resolve(true),
+              },
+              upload: async (file) =>
+                Promise.resolve({ id: uuid(), name: file.name }),
+            }}
           />
         </EditDrawer>
       )}
     </div>
   );
 };
+
+const DatasetPanel = forwardRef<{ handleAdd: () => void }, any>(({}, ref) => {
+  useImperativeHandle(ref, () => ({
+    handleAdd: () => {
+      console.log("handleAdd");
+    },
+  }));
+  return <>dataset panel</>;
+});
+
+function datasetSelector(): DatasetSelectorFunction {
+  return (onSelect) => {
+    return (
+      <a
+        onClick={() =>
+          onSelect({
+            id: "1",
+            name: "数据集1",
+            output: {
+              fields: [
+                { key: "name", name: "名称", type: FieldType.STRING },
+                { key: "age", name: "年龄", type: FieldType.NUMBER },
+                {
+                  key: "gender",
+                  name: "性别",
+                  type: FieldType.STRING,
+                },
+                {
+                  key: "project",
+                  name: "项目",
+                  type: FieldType.ARRAY,
+                  schema: {
+                    fields: [
+                      {
+                        key: "name",
+                        name: "项目名称",
+                        type: FieldType.STRING,
+                      },
+                      {
+                        key: "startDate",
+                        name: "开始日期",
+                        type: FieldType.STRING,
+                      },
+                      {
+                        key: "endDate",
+                        name: "结束日期",
+                        type: FieldType.STRING,
+                      },
+                    ],
+                  },
+                },
+                {
+                  key: "deptInfo",
+                  name: "单位信息",
+                  type: FieldType.OBJECT,
+                  schema: {
+                    fields: [
+                      {
+                        key: "name",
+                        name: "单位名称",
+                        type: FieldType.STRING,
+                      },
+                      {
+                        key: "code",
+                        name: "单位编码",
+                        type: FieldType.STRING,
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          })
+        }
+      >
+        数据集1
+      </a>
+    );
+  };
+}
+
+const nowStr = new Date().toISOString();
+const y = new Date();
+y.setDate(y.getDate() - 1);
+const yStr = y.toISOString();
+const m = new Date();
+m.setDate(3);
+const mStr = m.toISOString();
+const o = new Date();
+o.setFullYear(o.getFullYear() - 1);
+const oStr = o.toISOString();
+const example = {
+  conversationList: [
+    {
+      id: "c1",
+      name: "学业表现概览（本学期）",
+      createdAt: nowStr,
+      isActived: true,
+    },
+    {
+      id: "c2",
+      name: "出勤与纪律（本周）",
+      createdAt: yStr,
+      isActived: false,
+    },
+    {
+      id: "c3",
+      name: "课程满意度（本月）",
+      createdAt: mStr,
+      isActived: false,
+    },
+    {
+      id: "c4",
+      name: "教师教学概览（上学期）",
+      createdAt: oStr,
+      isActived: false,
+    },
+  ],
+  messageList: [
+    {
+      id: "m1",
+      conversationId: "c1",
+      question:
+        "制作学业表现看板：顶部选择学期与年级；左侧展示各科平均分与分数段；右侧显示班级排名TOP5与优秀率趋势。整体风格简洁，重点信息强化。",
+      answer: {
+        answer:
+          "已生成草稿：包含学期与年级筛选、科目均分柱状、分数段分布、班级TOP5榜单及优秀率折线，主色清爽，关键数字加粗。",
+        plans: [
+          { name: "计划1", description: "计划1描述" },
+          { name: "计划2", description: "计划2描述" },
+        ],
+        extra: [
+          { id: "e1", element: "科目均分", action: "新增", area: "左侧" },
+          { id: "e2", element: "分数段分布", action: "新增", area: "左侧" },
+          { id: "e3", element: "班级排名TOP5", action: "新增", area: "右侧" },
+          { id: "e4", element: "优秀率趋势", action: "新增", area: "右侧" },
+        ],
+      },
+      files: [
+        { id: "f-excel-c1-1", name: "本学期成绩汇总.xlsx", extension: "xlsx" },
+        { id: "f-audio-c1-1", name: "教学反馈录音.m4a", extension: "m4a" },
+      ],
+      agents: [
+        { id: "a-performance", name: "学业表现助理" },
+        { id: "a-analytics", name: "数据分析助理" },
+      ],
+      createdAt: nowStr,
+    },
+    {
+      id: "m2",
+      conversationId: "c1",
+      question:
+        "补充信息区：在看板顶部显示学生总人数与及格率；底部增加异常波动提醒区，突出近一周变化。",
+      answer: {
+        answer:
+          "已更新草稿：加入人数与及格率标签，底部提醒区高亮近一周波动，便于快速关注。",
+        plans: [
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+          { name: "计划3计划3计划3计划3计划3计划3", description: "计划3描述" },
+        ],
+        extra: [
+          { id: "e5", element: "学生总人数标签", action: "新增", area: "顶部" },
+          { id: "e6", element: "及格率标签", action: "新增", area: "顶部" },
+          { id: "e7", element: "异常波动提醒区", action: "新增", area: "底部" },
+        ],
+      },
+      files: [
+        { id: "f-excel-c1-2", name: "年级学生清单.xlsx", extension: "xlsx" },
+        { id: "f-audio-c1-2", name: "家长会语音纪要.mp3", extension: "mp3" },
+      ],
+      agents: [
+        { id: "a-performance", name: "学业表现助理" },
+        { id: "a-alert", name: "预警提醒助理" },
+      ],
+      createdAt: nowStr,
+    },
+    {
+      id: "m3",
+      conversationId: "c2",
+      question:
+        "制作出勤与纪律页：上方日期范围；中间左侧出勤率每日走势；右侧迟到与请假占比；下方列出异常班级与提醒。",
+      answer: {
+        answer:
+          "已生成草稿：曲线展示出勤率，环形占比呈现迟到与请假，卡片列出异常班级与提醒事项。",
+        plans: [
+          { name: "计划4", description: "计划4描述" },
+        ],
+        extra: [
+          { id: "e8", element: "出勤率走势", action: "新增", area: "中间左侧" },
+          {
+            id: "e9",
+            element: "迟到与请假占比",
+            action: "新增",
+            area: "中间右侧",
+          },
+          { id: "e10", element: "异常班级卡片", action: "新增", area: "底部" },
+        ],
+      },
+      files: [
+        { id: "f-excel-c2-1", name: "本周出勤记录.xlsx", extension: "xlsx" },
+        { id: "f-audio-c2-1", name: "晨会纪律通报.wav", extension: "wav" },
+      ],
+      agents: [
+        { id: "a-attendance", name: "出勤助理" },
+        { id: "a-discipline", name: "纪律管理助理" },
+      ],
+      createdAt: yStr,
+    },
+    {
+      id: "m4",
+      conversationId: "c3",
+      question:
+        "制作课程满意度页：顶部选择课程与授课教师；中间评分分布与意见词语聚合；右侧列出改善建议清单。",
+      answer: {
+        answer:
+          "已生成草稿：评分分布清晰，热门意见词语聚合展示，建议清单分组呈现，便于教学改进。",
+        plans: [
+          { name: "计划5", description: "计划5描述" },
+        ],
+        extra: [
+          { id: "e11", element: "评分分布", action: "新增", area: "中间" },
+          { id: "e12", element: "意见词语聚合", action: "新增", area: "中间" },
+          { id: "e13", element: "改善建议清单", action: "新增", area: "右侧" },
+        ],
+      },
+      files: [
+        { id: "f-excel-c3-1", name: "课程评价问卷.xlsx", extension: "xlsx" },
+        { id: "f-audio-c3-1", name: "学生访谈片段.m4a", extension: "m4a" },
+      ],
+      agents: [
+        { id: "a-satisfaction", name: "满意度分析助理" },
+        { id: "a-teacher", name: "教学改进助理" },
+      ],
+      createdAt: mStr,
+    },
+    {
+      id: "m5",
+      conversationId: "c4",
+      question:
+        "制作教师教学概览：左侧本学期授课时长与班级覆盖；右侧课后作业批改及时率与反馈质量，并在顶部展示总览卡片。",
+      answer: {
+        answer:
+          "已生成草稿：时长条形展示、覆盖范围统计、及时率仪表与反馈质量等级卡片，顶部总览卡片汇总核心信息。",
+        plans: [
+          { name: "计划6", description: "计划6描述" },
+        ],
+        extra: [
+          { id: "e14", element: "授课时长", action: "新增", area: "左侧" },
+          { id: "e15", element: "班级覆盖", action: "新增", area: "左侧" },
+          { id: "e16", element: "批改及时率", action: "新增", area: "右侧" },
+          { id: "e17", element: "反馈质量", action: "新增", area: "右侧" },
+          { id: "e18", element: "总览卡片", action: "新增", area: "顶部" },
+        ],
+      },
+      files: [
+        { id: "f-excel-c4-1", name: "教师授课统计.xlsx", extension: "xlsx" },
+        { id: "f-audio-c4-1", name: "教研组会议录音.mp3", extension: "mp3" },
+      ],
+      agents: [
+        { id: "a-teacher", name: "教师教学助理" },
+        { id: "a-analytics", name: "数据分析助理" },
+      ],
+      createdAt: oStr,
+    },
+  ],
+  chatResponse: {
+    id: "1",
+    answer: {
+      answer:
+        "已更新草稿：加入人数与及格率标签，底部提醒区高亮近一周波动，便于快速关注。",
+      plans: [
+        { name: "计划3", description: "计划3描述" },
+      ],
+      extra: [
+        { id: "e1", element: "学生总人数标签", action: "新增", area: "顶部" },
+        { id: "e2", element: "及格率标签", action: "新增", area: "顶部" },
+        { id: "e3", element: "异常波动提醒区", action: "新增", area: "底部" },
+      ],
+    },
+    createdAt: nowStr,
+  },
+};