plain-design 1.0.0-beta.15 → 1.0.0-beta.151

package/src/packages/components/AutoTable/use/useTableOption.ai.tsx

@@ -0,0 +1,485 @@
+import {AutoModule} from "../utils/AutoModule";
+import i18n from "../../../i18n";
+import Tooltip from "../../Tooltip";
+import Button from "../../Button";
+import {iAutoTableAiConfig, iTableAiOperate, iTableAiOperateConfig, iTableAiOperatePlcMeta, iTableAiOperateSearch, iTableAiOperateSort} from "../utils/AutoTable.utils";
+import $configuration from "../../$configuration";
+import $dialog from "../../$dialog";
+import AiChatBox, {iChatBoxHistory} from "../../AiChatBox";
+import {createSimpleDate} from "../../createSimpleDate";
+import {iTableOptionSeniorFilterMeta} from "../setting/useTableOption.setting.senior.filter";
+import {iFilterFormSingleData} from "../../FilterFormSingle";
+import {PlainObject} from "@peryl/utils/event";
+import {FilterService} from "../../FilterService";
+import {mergeQueryParam} from "../../FilterService/utils/mergeQueryParam";
+import {eAutoTableFilterMode} from "../filter/useTableOption.filter.state";
+import $notice from "../../$notice";
+import {toArray} from "@peryl/utils/toArray";
+import {iFilterConfigSelect} from "../../FilterService/filter/filter.select";
+import {uuid} from "@peryl/utils/uuid";
+import {eAddressTypeEnum} from "../../$address/address.utils";
+import Alert from "../../Alert";
+import {$ai, iAiConfiguration} from "../../$ai";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      ai: ReturnType<typeof useTableOptionAi>;
+    }
+  }
+}
+
+export const useTableOptionAi = AutoModule.createRegistration((option) => {
+
+  /**
+   * 创建filterOptions的引用，直接用高级筛选的
+   * @author  韦胜健
+   * @date    2025/4/6 23:31
+   */
+  const filterOptions = option.filterState.createComputedFilterOptions(eAutoTableFilterMode.filterSenior);
+
+  const chatHistories: iChatBoxHistory[] = [];
+
+  const methods = {
+    /**
+     * 获取可用的字段
+     * @author  韦胜健
+     * @date    2025/4/6 23:31
+     */
+    getAvailableFields: async (): Promise<iTableAiOperatePlcMeta[]> => {
+      const availableFields: iTableAiOperatePlcMeta[] = [];
+      const plcData = await option.methods.getPlcData();
+      plcData.flatPlcList.forEach((plc, index) => {
+        const { title, field, filterType, width, fixed, hide, align } = plc.props;
+        if (!!field && !!title) {
+          availableFields.push({
+            field: field || "",
+            title,
+            order: index,
+            align: align || "left",
+            width,
+            fixed,
+            hide,
+
+            filterType,
+          });
+        }
+      });
+      return availableFields;
+    },
+    /**
+     * 打开AI对话弹窗
+     * @author  韦胜健
+     * @date    2025/4/6 23:31
+     */
+    openChat: async () => {
+
+      const availableFields = await methods.getAvailableFields();
+      console.log({ availableFields });
+
+      /**
+       * 对话提示词
+       * @author  韦胜健
+       * @date    2025/4/6 23:31
+       */
+      const systemContent = `
+
+        当前时间是：${createSimpleDate()["YYYY-MM-DD HH:mm:ss"]}
+        你是一名专业的自然语言分析师，你需要将用户对一个表格的需求描述转化为结构化的json数据；
+
+        这个json数据的结构如下 {type:"",data:""}，type表示用户对表格的操作类型，data为分析出来的数据，type有四种类型：
+        第1个是"search"，表明用户需求是搜索，也就是对数据进行筛选；
+        第2个是"sort"，表明用户需求是排序；
+        第3个是"config"，表明用户需求是配置表格；
+        第4个是"error"，表明用户的需求不支持，此时data属性值为不支持的原因；
+
+        你只能返回给我这个json数据，用户只能对表格进行搜索，排序，配置表格，其他的需求一律拒绝；也就是返回 {type:"error",data:""}，记住data要给出拒绝的原因；
+        如果用户同时存在两种及以上需求，比如同时要搜索以及排序，那么你返回的json数据应该是一个数组，比如 [{type:"search",data:""},{type:"sort",data:""}]；
+
+        我会以JSON数组的方式给你表格中支持操作的字段，这个数组中每一个元素的结构为字段类型结构，结构如下所示：{title, field, filterType, width, order, fixed, hide, align}，以下为结构中的每个属性说明：
+        title：字段的标题；
+        field：字段的唯一标识；
+        filterType：字段的筛选类型；
+        width：字段的宽度；
+        order：字段的顺序；
+        fixed：字段的冻结方式，如果是左冻结/左固定，那么值为left；如果是右冻结/右固定，那么值为right；
+        hide：字段是否隐藏，为布尔值；
+        align：字段的对齐方式，左对齐的话是left，居中对齐的话是center，右对齐的话是right；
+
+        表格中目前支持的字段：${JSON.stringify(availableFields)}
+
+        如果用户要配置的字段不存在，则拒绝并且给出拒绝原因；
+
+        如果用户操作为搜索或者说筛选，那么返回的结构数据中的data应该是一个对象，结构为{filters:[],filterExpression:""}，
+        结构中的filters为数组，数组中的每个元素结构如下所示：{id,field,filterHandler,value}，以下对元素结构中每个属性做解释：
+        id: 唯一标识，需要你生成，按照 FF_1, FF_2, FF_3 的递增规则生成；
+        field: 要搜索的字段的唯一标识；
+        filterHandler: 搜索方式；
+          如果用户要求字段等于某个值，此时filterHandler为"eq"；
+          如果用户要求字段约等于某个值，此时filterHandler为"like"；
+          如果用户要求字段匹配多个值，当字段的filterType既不是text也不是number，那么返回的filterHandler为"in"；否则filterHandler为"in_like"；
+          如果用户要求字段不包含或者排除某些值，那么此时如果字段的filterType为(text或者number)的话filterHandler为"not_in_like"，否则filterHandler为"not_in"；；
+          如果用户要求字段值为空，则filterHandler为"is_null"；
+          如果用户要求字段值不为空，则filterHandler为"is_not_null"；
+          如果用户要求字段处于某个范围，比如大于或者小于某个日期，比如大于或者小于某个数字，那么此时filterHandler为"range"；
+        value: 搜索的值；
+          如果用户对这个字段的搜索只有一个值，那么value应该是一个字符串；
+          如果用户对这个字段的搜索包含多个值或者用了包含，不包含，排除之类的字眼，此时value应该是json数组；
+          如果用户对这个字段的要求是一个范围，比如大于某个值小于某个值等等，那么value应该是一个对象{start,end}，start为开始时间或者最小值，end为结束时间或者最大值；
+          当字段要求是一个范围时，
+            如果这个字段的filterType为date，那么value为日期字符串，格式为YYYY-MM-DD；
+            如果这个字段的filterType为datetime，那么value为日期时间字符串，格式为YYYY-MM-DD HH:mm:ss；如果用户仅给出了日期没有给出时间，那么给一个默认的时间；如果是开始日期时间，这个时间的默认值为00:00:00；如果是结束日期时间，这个时间的默认值为23:59:59
+
+        data数据中的filterExpression为表达式，如果用户的搜索条件都是"并且"关系，那么filterHandler为空字符串；如果用户的搜索条件存在"或"关系，那么需要生成这个表达式字符串，表达式中用筛选条件的id来代替表达式；
+        比如用户要求搜索性别为男并且状态为在职的员工，你会给我返回两条数据[{id:'FF_1',field:'gender',filterHandler:'=',value:'男'},{id:'FF_2',field:'status',filterHandler:'=',value:'在职'}]，此时filterExpression为空字符串；
+        如果用户要求是搜索性别为男或者状态在职的员工，你除了要给我返回这两条数据之外，返回的filterExpression应该为"FF_1 or FF_2"；filterExpression表达式中的筛选条件如果是并且关系用and代替，如果是或者关系用or代替，如果用户需求带有小括号，那么需要保留小括号；
+
+        如果用户操作为排序，那么返回的结构数据中的data应该是一个数组，数组中每个元素结果如下所示：{field,desc,title}，以下对元素结构中每个属性做解释：
+        field：要搜索的字段的唯一标识；
+        desc：如果降序或者从大到小，那么值为true；如果升序或者从小到大模大，那么值为false；
+        title: 字段的标题；
+
+        如果用户操作为配置列表字段，那么返回数据的data为数组，每一个元素为字段类型结构；比如有一个字段，其标题为"商品名称"，其字段标识为"prodName"，如果用户要隐藏这个字段，那么返回的字段类型结构为 {field:"prodName", hide:true}
+
+      `;
+
+      // console.log(systemContent);
+      $dialog({
+        title: i18n.$it('table.aiButton').d('AI对话'),
+        position: 'right',
+        noFoot: true,
+        width: '500px',
+        render: () => (
+          <AiChatBox
+            histories={chatHistories}
+            fitHeight
+            systemContent={systemContent}
+            handleMessage={handleMessage}
+            placeholder={i18n.$it('ai.tableAiPlaceholder').d('你可以与ai对话实现对列表的查询、排序以及配置功能；比如：查询编号约等于129，创建时间大于前天的数据，先按照创建时间降序，再按照更新时间升序排序；最后是调宽编号字段的宽度')}
+            v-slots={{
+              prepend: () => <>
+                <Alert icon={null} size="mini">
+                  <div>1. 在列表中与AI对话你可以实现搜索、排序、配置等功能，以下为例：</div>
+                  <div>2. 搜索搜索[字段1]为[值1]并且(这里也可以用或者)[字段2]为[值2]，匹配的值可以是多个值；</div>
+                  <div>3. 先按照[字段1]降序再按照[字段2]升序排序</div>
+                  <div>4. 将[字段1]的宽度加宽一倍，将[字段2]放在[字段3]前面，[字段4]左固定</div>
+                  <div>5. 可以在一次对话中同时处理搜索、排序以及配置功能；</div>
+                </Alert>
+              </>
+            }}
+          />
+        )
+      });
+
+      const handleMessage = async ({ message }: { message: string }): Promise<iChatBoxHistory | iChatBoxHistory[] | void> => {
+        try {
+          const operateItems: iTableAiOperate[] = toArray(JSON.parse(message));
+          if (operateItems.length == 1 && operateItems[0].type === 'error') {
+            return;
+          }
+          await methods.apply(operateItems);
+          const workTitleMap = { search: '查询', sort: '排序', config: '配置', error: '' };
+          return [
+            { id: uuid(), role: 'assistant', content: message },
+            { id: uuid(), role: 'assistant', content: `已经为您执行 ${operateItems.map(i => workTitleMap[i.type]).join(',')} 工作` }
+          ];
+        } catch (e) {
+          console.error(e);
+          return;
+        }
+      };
+    },
+    /**
+     * 应用大模型返回的结果
+     * @author  韦胜健
+     * @date    2025/4/6 23:32
+     */
+    apply: async (operateItems: iTableAiOperate[]) => {
+
+      if (!filterOptions.value) {
+        const errorMessage = 'filterOptions.value is unavailable!';
+        $notice.error(errorMessage);
+        throw new Error(errorMessage);
+      }
+
+      const availableFields = await methods.getAvailableFields();
+
+      /*---------------------------------------处理搜索-------------------------------------------*/
+
+      let hasSearch = false;
+      const searchData: iTableAiOperateSearch['data'] | undefined = (operateItems as any).find((i: iTableAiOperate) => i.type === "search")?.data;
+      if (!!searchData) {
+
+        hasSearch = true;
+
+        /*构建查询表单对象用来存储字段的值*/
+        const searchFormData = searchData.filters.reduce((prev, item) => {
+          prev[item.field] = item.value;
+          return prev;
+        }, {} as PlainObject);
+
+        console.log({ searchFormData });
+
+        /*构建新的 iTableOptionSeniorFilterMeta 存储到高级筛选的状态中*/
+        option.settingSeniorFilter.edit.state.metas = await Promise.all(searchData.filters.map(async (f): Promise<iTableOptionSeniorFilterMeta> => {
+
+          /*要筛选的字段的plc props*/
+          const plcProps = availableFields.find(i => i.field === f.field);
+
+          if (!plcProps) {
+            const errorMessage = `can't find plc: ${f.field}`;
+            $notice.error(errorMessage);
+            throw new Error(errorMessage);
+          }
+
+          /*要筛选字段的 filterOption*/
+          let usingFilterOption = filterOptions.value!.find(i => i.field === f.field);
+          if (!usingFilterOption) {
+            const errorMessage = `can't recognise field ${f.field}`;
+            $notice.error(errorMessage);
+            throw new Error(errorMessage);
+          }
+
+          usingFilterOption = { ...usingFilterOption };
+          usingFilterOption.filterHandler = f.filterHandler;
+
+          /**
+           * 由于大模型返回对字段的筛选值都是显示值，某些情况下需要对这个显示值转化为实际值，才能用来进行搜索，以下做列举
+           * - 当筛选类型filterType为select时，无论filterHandler为任何值得情况下都要转化显示值为实际值；
+           * - 当筛选类型filterType为province/city/district时：
+           *    - 如果filterHandler为like，此时不需要将显示值转化为实际值，因为like这个filterHandler会在生成queryParam阶段将显示值转化；
+           *    - 如果filterHandler为其他情况，都要将显示值转化为实际值；
+           * @author  韦胜健
+           * @date    2025/4/6 23:34
+           */
+          await (async () => {
+            if (plcProps.filterType === 'select') {
+
+              const selectOptions = (usingFilterOption.filterConfig as iFilterConfigSelect).getSelectOptions();
+
+              const showValueList = toArray(f.value);
+              const resultValueList: string[] = [];
+              showValueList.forEach(showValue => {
+                const matchOption = selectOptions.find(i => i.label === showValue);
+                if (!!matchOption) {resultValueList.push(matchOption.val);}
+              });
+              searchFormData[f.field] = resultValueList.length == 0 ? undefined : f.filterHandler == 'eq' ? resultValueList[0] : resultValueList;
+            } else if (
+              (plcProps.filterType === 'date' ||
+                plcProps.filterType === 'datetime' ||
+                plcProps.filterType === 'number')
+              && f.filterHandler === 'range'
+            ) {
+              searchFormData[usingFilterOption.startField] = f.value.start;
+              searchFormData[usingFilterOption.endField] = f.value.end;
+            } else if (
+              plcProps.filterType === 'province' ||
+              plcProps.filterType === 'city' ||
+              plcProps.filterType === 'district'
+            ) {
+              const addressService = $configuration.get('address')!;
+              if (f.filterHandler !== 'like') {
+                const showValueList = toArray(f.value);
+                const resultValueList: string[] = [];
+                await Promise.all(showValueList.map(async (showValue) => {
+                  const metas = await addressService.getAddressByLabel(showValue,
+                    plcProps.filterType == 'province' ? eAddressTypeEnum.province :
+                      plcProps.filterType == 'city' ? eAddressTypeEnum.city :
+                        eAddressTypeEnum.district
+                  );
+                  metas.forEach(i => resultValueList.push(i.code));
+                }));
+                // console.log({ showValueList, resultValueList });
+                searchFormData[f.field] = resultValueList.length == 0 ? undefined : f.filterHandler == 'eq' ? resultValueList[0] : resultValueList;
+              }
+            }
+          })();
+
+          const queryParam = await FilterService.getQueryParam({ option: usingFilterOption, formData: searchFormData });
+          const filterQueryParam = !queryParam ? {} : mergeQueryParam(queryParam, {});
+
+          const fsd: iFilterFormSingleData = {
+            field: f.field,
+            filterHandler: usingFilterOption.filterHandler,
+            formData: searchFormData,
+            filterQueryParam,
+          };
+
+          return {
+            id: f.id,
+            data: fsd,
+          };
+        }));
+
+        option.settingSeniorFilter.edit.state.expression = searchData.filterExpression || searchData.filters.map(i => i.id).join(' and ');
+        option.settingSeniorFilter.edit.state.isCustomExpression = true;
+
+        // console.log(deepcopy(option.settingSeniorFilter.edit.state));
+        await option.settingSeniorFilter.query.apply(false);
+      }
+
+      /*---------------------------------------处理排序-------------------------------------------*/
+      let hasSort = false;
+      const sortData: iTableAiOperateSort['data'] | undefined = (operateItems as any).find((i: iTableAiOperate) => i.type === "sort")?.data;
+      if (!!sortData) {
+        hasSort = true;
+        option.settingSeniorSort.methods.update(sortData, false);
+      }
+
+      /*---------------------------------------处理配置-------------------------------------------*/
+      let hasConfig = false;
+      const configData: iTableAiOperateConfig['data'] | undefined = (operateItems as any).find((i: iTableAiOperate) => i.type === "config")?.data;
+      if (!!configData) {
+        hasConfig = true;
+        await option.settingConfig.methods.updateItemPlc({
+          customData: configData,
+          customSort: configData.length === availableFields.length,
+        });
+      }
+      /*---------------------------------------收尾-------------------------------------------*/
+      if (hasSearch || hasSort) {await option.methods.pageMethods.reload();}
+    },
+    /**
+     * 通过ai获取已经解析并且转化过的表单数据
+     * @author  韦胜健
+     * @date    2025/4/8 11:02
+     */
+    getFormDataByChat: async () => {
+      const availableFields = await methods.getAvailableFields();
+      const formDataList = await $ai.getFormDataByChat(availableFields);
+      const addressService = $configuration.get('address')!;
+
+      await Promise.all(formDataList.map(async (formDataItem) => {
+        await Promise.all(availableFields.map(async f => {
+
+          const showValue = formDataItem[f.field];
+
+          if (showValue == null) {return;}
+
+          if (f.filterType === 'select') {
+            let usingFilterOption = filterOptions.value!.find(i => i.field === f.field);
+            if (!usingFilterOption) {
+              console.error(`Can't convert select field: ${f.field}`);
+              formDataItem[f.field] = null;
+            } else {
+              const selectOptions = (usingFilterOption.filterConfig as iFilterConfigSelect).getSelectOptions();
+              const convertShowValue2Value = (showValue: any) => selectOptions.find(i => i.label == showValue)?.val;
+              formDataItem[f.field] = Array.isArray(showValue) ? showValue.map(i => convertShowValue2Value(i)) : convertShowValue2Value(showValue);
+            }
+          } else if (
+            f.filterType === 'province' ||
+            f.filterType === 'city' ||
+            f.filterType === 'district'
+          ) {
+            const metas = await addressService.getAddressByLabel(showValue,
+              f.filterType == 'province' ? eAddressTypeEnum.province :
+                f.filterType == 'city' ? eAddressTypeEnum.city :
+                  eAddressTypeEnum.district
+            );
+            formDataItem[f.field] = metas[0].code;
+          }
+        }));
+      }));
+
+      return formDataList;
+    },
+    /**
+     * ai对话批量新建
+     * @author  韦胜健
+     * @date    2025/4/8 10:51
+     */
+    aiInsert: async () => {
+      const formDataList = await methods.getFormDataByChat();
+      console.log(formDataList);
+      await option.methods.editMethods.batchInsert({ rows: formDataList.reverse() });
+    },
+    /**
+     * 智能填写表单
+     * @author  韦胜健
+     * @date    2025/4/8 11:29
+     */
+    smartFilling: async (formData: PlainObject) => {
+      const formDataList = await methods.getFormDataByChat();
+      Object.assign(formData, formDataList[0]);
+    },
+    testSearch: async () => {
+      const operateItems: iTableAiOperate[] = [
+        {
+          "type": "search",
+          "data": {
+            "filters": [
+              { "id": "FF_1", "field": "provinceVal", "filterHandler": "in", "value": ["山东省", "上海市"] },
+              { "id": "FF_2", "field": "ovVal", "filterHandler": "eq", "value": "秒杀折扣" }
+            ],
+            "filterExpression": ""
+          }
+        },
+        {
+          "type": "sort",
+          "data": [
+            { "field": "count", "desc": true, title: '计数' },
+            { "field": "numberVal", "desc": false, title: '数字' }
+          ]
+        },
+      ];
+      await methods.apply(operateItems);
+    },
+    testSearch2: async () => {
+      const operateItems: iTableAiOperate[] = [{ "type": "search", "data": { "filters": [{ "id": "FF_1", "field": "normalText", "filterHandler": "not_in", "value": ["hello"] }], "filterExpression": "" } }];
+      await methods.apply(operateItems);
+    },
+  };
+
+  const autoOptionAiConfig: iAutoTableAiConfig =
+    /*如果没有设置config.ai，则默认全部开启*/
+    option.config.ai == null ? { search: true, sort: true, config: true } :
+      /*设置为false则全部关闭*/
+      option.config.ai === false ? { search: false, sort: false, config: false } : {
+        /*只要不设置为false，就是默认开启*/
+
+        search: option.config.ai.search !== false,
+        sort: option.config.ai.sort !== false,
+        config: option.config.ai.config !== false,
+        ...option.config.ai,
+      };
+
+  const aiConfig: iAiConfiguration | undefined = autoOptionAiConfig.aiConfig || $configuration.get('aiConfig');
+
+  const ret = { methods, aiConfig };
+
+  if ((autoOptionAiConfig.search ||
+    autoOptionAiConfig.sort ||
+    autoOptionAiConfig.config)) {
+    if (!aiConfig) {
+      console.error("AutoTable lacks the AutoOption.aiConfig or the general configuration $configuration.aiConfig when the intelligent search/sorting/configuration is enabled.");
+    } else {
+      /**
+       * 渲染左侧操作栏时，渲染一个按钮用来打开AI对话框
+       * @author  韦胜健
+       * @date    2023.1.8 19:13
+       */
+      option.hooks.onRenderLeftOperation.use({
+        processor: ({ list, render }) => {list.push({ key: 'ai-chat-button', seq: 2, render });},
+        render: () => (
+          <>
+            <Tooltip message={i18n.$it('table.aiButton').d('AI对话')}><Button icon="ie-chat-ai-fill" onClick={methods.openChat}/></Tooltip>
+            {/*<Tooltip message="测试搜索"><Button icon="pi-bug" onClick={methods.testSearch}/></Tooltip>*/}
+            {/*<Tooltip message="测试搜索2"><Button icon="pi-bug" onClick={methods.testSearch2}/></Tooltip>*/}
+            {/*<Tooltip message="测试配置"><Button icon="pi-bug" onClick={methods.testSearch}/></Tooltip>*/}
+            {/*<Tooltip message="测试智能填充表单"><Button icon="pi-bug" onClick={methods.aiInsert}/></Tooltip>*/}
+          </>
+        ),
+      });
+    }
+  }
+
+  option.hooks.onBaseTableAttrs.use((attrs) => {
+    if (!!aiConfig) {
+      attrs.formEditorFootRender = (formData) => (
+        <Tooltip message={i18n.$it('ai.smartFilling').d('智能填写')}><Button style={{ order: 20 }} icon="ie-chat-ai-fill" onClick={() => methods.smartFilling(formData)}/></Tooltip>
+      );
+    }
+  });
+
+  return ret;
+});