plain-design 1.0.0-beta.99 → 3.0.0

package/src/packages/components/AiChatBox/index.tsx

@@ -0,0 +1,306 @@
+import {designComponent, getComponentCls, iKeyboardEvent, PropType, reactive, useClasses, useModel, useRefs} from "@peryl/react-compose";
+import Input from "../Input";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import i18n from "../i18n";
+import Button from "../Button";
+import './ai-chat-box.scss';
+import $message from "../$message";
+import {uuid} from "@peryl/utils/uuid";
+import {$ai, iAiChatResponse, iAiChatStreamParameter, iAiConfiguration, iAiHistory} from "../$ai";
+import $configuration from "../$configuration";
+import Scroll from "../Scroll";
+import {delay} from "@peryl/utils/delay";
+import {toArray} from "@peryl/utils/toArray";
+import {lastItem} from "@peryl/utils/lastItem";
+import {createEffects} from "@peryl/utils/createEffects";
+
+export const AiChatBox = designComponent({
+  props: {
+    ...EditProps,
+    ...StyleProps,
+    /*ai配置信息*/
+    aiConfig: { type: Object as PropType<iAiConfiguration> },
+    /*填充高度*/
+    fitHeight: { type: Boolean },
+    /*已有的对话历史信息*/
+    histories: { type: Array as PropType<iChatBoxHistory[]> },
+    /*系统提示词*/
+    systemContent: { type: String },
+    /*用户输入的内容*/
+    modelValue: { type: String },
+    /*手动处理大模型返回的message*/
+    handleMessage: { type: Function as PropType<iChatBoxHandleMessage> },
+    /*处理流式响应内容*/
+    handleReceive: { type: Function as PropType<(data: { fullText?: string, chunkText?: string }) => void> },
+    /*在发送用户内容之前触发的动作函数*/
+    beforeSendUserContent: { type: Function as PropType<(data: { userContent: string, messages: iAiHistory[] }) => Promise<void>> },
+    /*手动处理流式调用模型服务*/
+    handleChatStream: { type: Function as PropType<(parameter: iAiChatStreamParameter & { userContent: string }) => Promise<any>> },
+    /*输入框最小高度*/
+    inputMinHeight: { type: String, default: '80px' },
+    /*输入框最大高度*/
+    inputMaxHeight: { type: String, default: '225px' },
+    /*是否启用记忆对话/多轮对话*/
+    enableMemory: { type: Boolean },
+    /*记忆对话最大记忆轮数*/
+    memoryLimit: { type: Number, default: 15 },
+  },
+  /*在顶部显示的插槽内容*/
+  slots: ['prepend'],
+  emits: {
+    onUpdateModelValue: (val?: string) => true,
+  },
+  setup({ props, slots, event: { emit } }) {
+
+    /*
+    * 定义双向绑定属性modelValue（非受控/自控属性）；自动维护一个内部变量“_moduleValue”，
+    * 当props.modelValue变化时将新值更新到“_modelValue”；当在组件内部执行赋值语句如“model.value = xxx”时，
+    * 将自动调用“emit.onUpdateModelValue(xxx)”函数派发事件“onUpdateModelValue”，触发绑定值更新事件；
+    */
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    /*获取Scroll组件的实例引用，流式对话期间，调用滚动容器的滚动方法滚动到底部，显示流式相应的最新内容；*/
+    const { refs, onRef } = useRefs({ scroll: Scroll });
+
+    /*
+    * 启用表单编辑组件控制功能；这样AiChatBox组件能够被父组件的只读/禁用控制，
+    * 同时也能够通过控制AiChatBox的只读/禁用属性来控制其内部的组件的只读/禁用状态；
+    */
+    useEdit();
+
+    /*
+    * 启动组件的样式控制，功能，道理类似于“编辑控制”，可以使得AiChatBox能够被其父组件控制主题样式、
+    * 也能够通过控制板AiChatBox来控制其子组件的状态样式；
+    */
+    const { styleComputed } = useStyle();
+
+    const aiConfig = props.aiConfig || $configuration.use('aiConfig');
+
+    const classes = useClasses(() => [
+      getComponentCls('ai-chat-box'),
+      `ai-chat-box-size-${styleComputed.value.size}`,
+      {
+        'ai-chat-box-fit-height': props.fitHeight
+      }
+    ]);
+
+    const state = reactive({
+      /*对话历史*/
+      histories: props.histories || [] as iChatBoxHistory[],
+      loading: false
+    });
+
+    /*执行流式调用的时候需要将“abortEffects”作为参数传递给调用参数，流式调用发起的时候会监听abortEffects.clear函数执行，当执行这个函数时会自动停止流式调用；*/
+    const { effects: abortEffects } = createEffects();
+
+    const methods = {
+      scrollEnd: async () => {
+        if (!!refs.scroll) {
+          await delay(78);
+          refs.scroll.methods.scrollEnd();
+        }
+      },
+      addHistory: async (...history: iChatBoxHistory[]) => {
+        state.histories.push(...history);
+        history = state.histories.slice(history.length * -1);
+        await methods.scrollEnd();
+        return history;
+      },
+      /*
+      * 发起流式调用
+      */
+      send: async (userContent: string) => {
+        /*发起流式调用的时候立即清空输入框内容*/
+        model.value = '';
+
+        /*将输入框的对话内容添加到对话历史中*/
+        const newUserHistory: iChatBoxHistory = { role: 'user', content: userContent, id: uuid() };
+        await methods.addHistory(newUserHistory);
+
+        /*const { message, chatData } = await $ai.chatSystem(userContent, props.systemContent, aiConfig);*/
+        let messages: iAiHistory[] = props.enableMemory ? state.histories : (() => {
+          const { role, content } = newUserHistory;
+          return [{ role, content }];
+        })();
+        messages = messages.slice(props.memoryLimit * -1);
+
+        /*发起流式调用前的处理动作*/
+        await props.beforeSendUserContent?.({ userContent, messages });
+
+        /*插入提示词*/
+        if (!!props.systemContent?.trim().length) {messages.unshift({ role: 'system', content: props.systemContent });}
+
+        /*大模型回复内容消息对象*/
+        let chatBoxHistory: iChatBoxHistory | undefined = undefined;
+        /*大模型回复的结果消息内容*/
+        let message = '';
+
+        /*流式调用参数*/
+        const aiChatStreamParameter: iAiChatStreamParameter & { userContent: string } = {
+          aiConfig,
+          messages,
+          userContent,
+          abortEffects,
+          onReceiving: ({ fullText, chunkText }) => {
+            // console.log('receiving', fullText);
+            props.handleReceive?.({ fullText, chunkText });
+            if (!chatBoxHistory) {
+              state.histories.push({ role: 'assistant', content: '', id: uuid() });
+              chatBoxHistory = lastItem(state.histories);
+            }
+            chatBoxHistory!.content = fullText;
+            methods.scrollEnd();
+          },
+          onFinish: (fullText) => {
+            message = fullText;
+          },
+        };
+
+        if (!!props.handleChatStream) {
+          /*手动处理流式调用*/
+          await props.handleChatStream(aiChatStreamParameter);
+        } else {
+          /*默认处理流式调用*/
+          await $ai.chatStream(aiChatStreamParameter);
+        }
+
+        /*大模型没有返回任何内容，抛出异常*/
+        if (!message.length) {
+          throw new Error('message is empty!');
+        }
+
+        /*可以手动处理返回的消息，自定义往对话框插入内容*/
+        const newHistory: void | iChatBoxHistory | iChatBoxHistory[] = await props.handleMessage?.({
+          message,
+          userContent,
+          // chatData,
+          addHistory: methods.addHistory,
+          histories: state.histories,
+          scrollEnd: methods.scrollEnd,
+        });
+
+        if (newHistory != null) {
+          await methods.addHistory(...toArray(newHistory));
+        }
+
+        return { message, /*chatData*/ };
+      },
+    };
+
+    const handler = {
+      /*
+      * 处理点击发送暂停按钮
+      */
+      onClickSend: async () => {
+
+        /*当前正处于流式调用期间，执行停止流式调用逻辑*/
+        if (state.loading) {
+          console.log('abort');
+          abortEffects.clear();
+          return;
+        }
+
+        /*当前未开始流式调用，准备执行流式调用*/
+        console.log('send');
+
+        /*先清理掉上次流式调用产生的副作用*/
+        abortEffects.clear();
+        /*新增一个副作用，使得流式调用结束之后，设置loading标识为false*/
+        abortEffects.push(() => state.loading = false);
+
+        /*设置loading标识为true*/
+        state.loading = true;
+        try {
+          const userContent = model.value;
+          if (!userContent?.trim().length) {
+            $message.error(i18n.$it('ai.require').d('提问的内容不能为空'));
+            return;
+          }
+          await methods.send(userContent);
+        } finally {
+          state.loading = false;
+        }
+      },
+      /*处理在输入框中执行回车按键*/
+      onEnterTextarea: (e: KeyboardEvent) => {
+        if (e.shiftKey) {return;}
+        handler.onClickSend();
+      },
+    };
+
+    return {
+      refer: {
+        refs,
+        aiConfig,
+        state,
+        methods,
+      },
+      render: () => (
+        <div className={classes.value}>
+          {slots.prepend.isExist() && (
+            <div className="ai-chat-box-history-prepend">
+              {slots.prepend()}
+            </div>
+          )}
+          {(!!state.histories.length || props.fitHeight || slots.prepend.isExist()) && (
+            <div className="ai-chat-box-histories">
+              {(() => {
+                const content = state.histories.map((history) => (
+                  <div className="ai-chat-box-history-item" key={history.id} data-role={history.role}>
+                    <div className="ai-chat-box-history-item-inner">
+                      {!!history.render ? history.render() : history.content}
+                    </div>
+                  </div>
+                ));
+                if (props.fitHeight) {
+                  return <Scroll ref={onRef.scroll}>{content}</Scroll>;
+                } else {
+                  return content;
+                }
+              })()}
+            </div>
+          )}
+          <div className="ai-chat-box-input">
+            <Input
+              readonly={state.loading}
+              textarea
+              v-model={model.value}
+              placeholder={props.placeholder || i18n.$it('ai.placeholder').d('请输入要发送给ai的内容如：你是谁')}
+              minHeight={props.inputMinHeight}
+              maxHeight={props.inputMaxHeight}
+              onEnter={handler.onEnterTextarea}
+            />
+            <Button shape="round" mode="fill" icon={state.loading ? 'ie-stop' : 'ie-send'} className="ai-chat-box-send-button" onClick={handler.onClickSend}/>
+          </div>
+        </div>
+      )
+    };
+  },
+});
+
+/*
+* AiChatBox对话历史行数据类型
+* 当行数据对象中存在render属性函数时，渲染内容调用这个render函数来渲染；
+* 当没有这个render属性函数时，渲染内容为消息文本字符串
+*/
+export interface iChatBoxHistory extends iAiHistory {
+  id: string,
+  render?: () => any,
+}
+
+export default AiChatBox;
+
+/*
+* 组件属性handleMessage函数类型
+*/
+export interface iChatBoxHandleMessage {
+  (param: {
+    message: string,
+    userContent: string,
+    chatData?: iAiChatResponse,
+    addHistory: (...history: iChatBoxHistory[]) => void,
+    histories: iChatBoxHistory[],
+    scrollEnd: () => Promise<void>,
+  }): void | iChatBoxHistory | iChatBoxHistory[] | Promise<void | iChatBoxHistory | iChatBoxHistory[]>;
+}

package/src/packages/components/Alert/index.tsx

@@ -1,5 +1,5 @@
 import './alert.scss';
-import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, mergeAttrs, PropType, reactive, useClasses, useRefs} from "@peryl/react-compose";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import CollapseTransition from "../CollapseTransition";
 import Icon from "../Icon";

package/src/packages/components/Application/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentPrefix, PropType} from "plain-design-composition";
+import {computed, designComponent, getComponentPrefix, PropType} from "@peryl/react-compose";
 import {ApplicationConfigurationProvider, ApplicationHooks, iApplicationConfiguration} from "./utils/application.utils";
 import {DeepPartial} from "../../utils/type";
 import './application.scss';

package/src/packages/components/Application/service/createApplicationService.tsx

@@ -1,6 +1,6 @@
 import {ApplicationHolder, iApplicationHolderData, iApplicationManagerData} from "./useApplicationService";
-import {defer} from "plain-utils/utils/defer";
-import {App} from "plain-design-composition";
+import {defer} from "@peryl/utils/defer";
+import {App} from "@peryl/react-compose";
 import {createError} from "../../../utils/createError";
 
 export function createApplicationService<ManagerComponent extends { use: { class: { props: { getManagerData: () => iApplicationManagerData }, event: { emit: { onReady: () => void } } } } },

package/src/packages/components/Application/service/createApplicationServiceComponent.tsx

@@ -1,4 +1,4 @@
-import {designComponent, onMounted, RenderNode} from "plain-design-composition";
+import {designComponent, onMounted, RenderNode} from "@peryl/react-compose";
 
 /**
  * 创建应用服务组件

package/src/packages/components/Application/service/createApplicationServiceManager.tsx

@@ -1,6 +1,6 @@
-import {designComponent, onMounted, PropType, ref, toRaw, useRefList} from "plain-design-composition";
+import {designComponent, onMounted, PropType, ref, toRaw, useRefList} from "@peryl/react-compose";
 import {iApplicationManagerData} from "./useApplicationService";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {createCounter} from "@peryl/utils/createCounter";
 import {createServiceReadyObserver} from "../utils/createServiceReadyObserver";
 
 const nextCount = createCounter('manager-service');

package/src/packages/components/Application/service/useApplicationService.tsx

@@ -1,6 +1,6 @@
-import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "plain-design-composition";
-import {defer, DFD} from 'plain-utils/utils/defer';
-import {createCounter} from "plain-utils/utils/createCounter";
+import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "@peryl/react-compose";
+import {defer, DFD} from '@peryl/utils/defer';
+import {createCounter} from "@peryl/utils/createCounter";
 import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
 import {$previewer} from "../../$previewer";
 

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,6 +1,7 @@
-import {ComputedRef, createRenderHook, inject, provide} from "plain-design-composition";
+import {ComputedRef, createRenderHook, inject, provide} from "@peryl/react-compose";
 import {iThemeConfiguration} from "../theme/theme";
 import {UseStyleProvideData} from "../../../uses/useStyle";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export interface iApplicationConfiguration {
   theme: iThemeConfiguration;
@@ -17,6 +18,4 @@ export const ApplicationConfigurationProvider = (() => {
 
 export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
 
-export const ApplicationHooks = {
-  onRender: createRenderHook(),
-};
+export const ApplicationHooks = { onRender: createRenderHook({ effects: createEffects().effects }), };

package/src/packages/components/Application/utils/createServiceReadyObserver.ts

@@ -1,4 +1,4 @@
-import {createHooks, toRaw} from "plain-design-composition";
+import {createHooks, toRaw} from "@peryl/react-compose";
 
 export function createServiceReadyObserver<Option>() {
   const hook = createHooks<(data: { option: Option, ins: any }) => void>();

package/src/packages/components/ArrowStep/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, getCurrentDesignInstance, useClasses, useRefs} from "@peryl/react-compose";
 import Triangle from "../Triangle";
 import {ArrowStepCollector} from "../ArrowStepGroup";
 import {StepStatus, StepUtils} from "../StepGroup/step.utils";

package/src/packages/components/ArrowStepGroup/index.tsx

@@ -1,9 +1,9 @@
 import './arrow-step.scss';
-import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, onMounted, reactive, ref, useClasses, useCollect, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../Dialog";
 import {StepUtils} from "../StepGroup/step.utils";
 import ArrowStep from "../ArrowStep";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 
 export const ArrowStepGroup = designComponent({
   name: 'arrow-step-group',

package/src/packages/components/AutoLoadingObserver/index.tsx

@@ -1,6 +1,6 @@
-import {computed, onBeforeUnmount, reactive} from "plain-design-composition";
-import {createCounter} from 'plain-utils/utils/createCounter';
-import {delay} from "plain-utils/utils/delay";
+import {computed, onBeforeUnmount, reactive} from "@peryl/react-compose";
+import {createCounter} from '@peryl/utils/createCounter';
+import {delay} from "@peryl/utils/delay";
 
 export const AutoLoadingObserver = (() => {
 

package/src/packages/components/AutoTable/AutoTable.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, onBeforeUnmount, PropType, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, onBeforeUnmount, PropType, useClasses, useRefs} from "@peryl/react-compose";
 import {AutoTableScopeSlotsOption, AutoTableSlotsOption, iAutoTableRefer} from "./utils/AutoTable.utils";
 import './auto-table.scss';
 import {StyleProps, useStyle} from "../../uses/useStyle";

package/src/packages/components/AutoTable/auto-table.scss

@@ -16,9 +16,10 @@
       .table-operation-bar-left {
         @include comp(input-group) {
           display: inline-flex;
-          & + button {
-            margin-left: $margin;
-          }
+        }
+
+        & > * + * {
+          margin-left: calc(#{$margin} / 2);
         }
       }
     }
@@ -38,6 +39,21 @@
       }
     }
 
+    @include comp(table) {
+      &.table-border {
+        margin: $margin 0;
+      }
+    }
+
+    @include comp(auto-table-tips) {
+
+      & + .#{componentName(table)} {
+        &.table-border {
+          margin-top: 0;
+        }
+      }
+    }
+
     & + .#{componentName(auto-table)}, & + .#{componentName(tab-group)} {
       margin-top: $margin;
     }
@@ -146,6 +162,12 @@
       }
     }
 
+    &[data-no-clear=true] {
+      .auto-table-tips-label {
+        padding-right: 4px
+      }
+    }
+
     /*    & + .#{componentName(button)} {
           @include comp(icon) {
             position: relative;

package/src/packages/components/AutoTable/createTableOptionUser.tsx

@@ -29,6 +29,7 @@ import {useTableOptionState} from "./use/useTableOption.state";
 import {useTableOptionHooks} from "./use/useTableOption.hooks";
 import {useTableOptionPermission} from "./use/useTableOption.permission";
 import {AutoModule} from "./utils/AutoModule";
+import {useTableOptionAi} from "./use/useTableOption.ai";
 
 AutoModule.globalRegistrationManager.use(0, '_', (option) => {
   const applicationConfiguration = ApplicationConfigurationProvider.inject();
@@ -63,8 +64,9 @@ AutoModule.globalRegistrationManager.use(19, 'tips', useTableOptionTips);
 AutoModule.globalRegistrationManager.use(20, 'fill', useTableOptionFill);                               // 自动行数
 AutoModule.globalRegistrationManager.use(21, 'table', useTableOptionTable);                             // 渲染表格主体
 AutoModule.globalRegistrationManager.use(22, 'parent', useTableOptionParent);                           // 父表
+AutoModule.globalRegistrationManager.use(23, 'ai', useTableOptionAi);                                 // AI对话
 
-AutoModule.globalRegistrationManager.use(23, 'settingAllFilter', useTableOptionSettingAllFilter);       // 设置：所有筛选
+AutoModule.globalRegistrationManager.use(24, 'settingAllFilter', useTableOptionSettingAllFilter);       // 设置：所有筛选
 AutoModule.globalRegistrationManager.use(25, 'settingCache', useTableOptionSettingCache);               // 设置：缓存设置
 AutoModule.globalRegistrationManager.use(26, 'settingImport', useTableOptionSettingImport);             // 设置：导入数据
 AutoModule.globalRegistrationManager.use(27, 'settingExport', useTableOptionSettingExport);             // 设置：导出数据

package/src/packages/components/AutoTable/filter/useTableOption.filter.form.tsx

@@ -1,9 +1,9 @@
 import {eAutoTableFilterMode} from "./useTableOption.filter.state";
-import {computed, reactive, useRefs} from "plain-design-composition";
+import {computed, reactive, useRefs} from "@peryl/react-compose";
 import {FilterFormMultiple, iFilterFormMultipleData} from "../../FilterFormMultiple";
 import {Button} from "../../Button";
 import {Tooltip} from "../../Tooltip";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {FilterService} from "../../FilterService";
 import {TableOptionSpace} from "../utils/TableOption.space";
 import '../utils/TableOption.space';
@@ -160,11 +160,14 @@ export const useTableOptionFilterForm = AutoModule.createRegistration((
   });
 
   hooks.onTableOuterRender.use({
-    processor: ({ list, render }) => {list.push({ seq: 0, key: 'form-filter', render, });},
-    render: () => (
+    processor: ({ list, render }) => {
       !!filterOptions.value &&
       filterOptions.value.length > 0 &&
-      state.show && <FilterFormMultiple
+      state.show &&
+      list.push({ seq: 0, key: 'form-filter', render, });
+    },
+    render: () => (
+      <FilterFormMultiple
         ref={onRef.filter}
         filterOptions={filterOptions.value!}
         initialState={state.data}

package/src/packages/components/AutoTable/filter/useTableOption.filter.search.tsx

@@ -1,7 +1,7 @@
 import {eAutoTableFilterMode} from "./useTableOption.filter.state";
 import {FilterFormSingle, iFilterFormSingleData} from "../../FilterFormSingle";
-import {computed, reactive, useRefs} from "plain-design-composition";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {computed, reactive, useRefs} from "@peryl/react-compose";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {$message} from "../../$message";
 import {TableOptionSpace} from "../utils/TableOption.space";
 import '../utils/TableOption.space';

package/src/packages/components/AutoTable/filter/useTableOption.filter.state.ts

@@ -1,8 +1,8 @@
 import {iTableOptionApplyCacheParam, iTableOptionGetCacheParam} from "../use/useTableOption.cache.utils";
-import {computed, reactive, RenderNode} from "plain-design-composition";
+import {computed, getCurrentDesignInstance, reactive, RenderNode} from "@peryl/react-compose";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
 import {createFilterOptions, iFilterOption} from "../../FilterService/utils/filter.service.utils";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import '../utils/TableOption.space';
 import {AutoModule} from "../utils/AutoModule";
 
@@ -84,9 +84,11 @@ export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks,
    * @author  韦胜健
    * @date    2023.1.3 21:29
    */
-  const clearAll = (reload?: boolean) => {
-    state.filters.forEach(i => i.clear());
-    reload !== false && methods.pageMethods.reload();
+  const clearAll = async (reload?: boolean) => {
+    await hooks.onClearFilter.exec(undefined);
+    /*等待所有filtersClear之后自动reload*/
+    await Promise.all(state.filters.map(i => i.clear()));
+    reload !== false && await methods.pageMethods.reload();
   };
 
   /**
@@ -102,6 +104,9 @@ export const useTableOptionFilterState = AutoModule.createRegistration(({ hooks,
   const sourceFlatPlcList = computed(() => state.getSourceFlatPlcList?.().filter(i => (!!i.props.searchField || !!i.props.field) && !i.props.noFilter));
 
   const createComputedFilterOptions = (filterMode: typeof eAutoTableFilterMode.TYPE) => {
+    if (!getCurrentDesignInstance()) {
+      console.error(`createComputedFilterOptions can not use without component context.`);
+    }
     return computed(() => sourceFlatPlcList.value?.map((
       {
         props: {
@@ -176,8 +181,8 @@ export interface iFilterStateInitialization<CacheData> {
   applyCache: (param: iTableOptionApplyCacheParam<CacheData>) => void,            // 应用缓存
   getCache: (param: iTableOptionGetCacheParam) => any,                            // 获取缓存
   getActiveFilterCount: () => number,                                             // 显示当前有多少激活的筛选条件
-  getDisplay: () => (() => RenderNode),                                            // 在【所有筛选】面板中展示
-  clear: () => void,                                                              // 清空筛选条件
+  getDisplay: () => (() => RenderNode),                                           // 在【所有筛选】面板中展示
+  clear: () => void | Promise<void>,                                              // 清空筛选条件
 }
 
 /**

package/src/packages/components/AutoTable/setting/useTableOption.setting.all.fitler.tsx

@@ -1,5 +1,5 @@
 import {iFilterStateInitialization} from "../filter/useTableOption.filter.state";
-import {reactive, RenderNode} from "plain-design-composition";
+import {reactive, RenderNode} from "@peryl/react-compose";
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
 import {Empty} from "../../Empty";
 import {Button} from "../../Button";

package/src/packages/components/AutoTable/setting/useTableOption.setting.cache.tsx

@@ -1,9 +1,9 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 import {iTableOptionCacheData, iTableOptionCacheItemData} from "../use/useTableOption.cache.utils";
-import {defer} from "plain-utils/utils/defer";
+import {defer} from "@peryl/utils/defer";
 import {$message} from "../../$message";
 import {$dialog} from "../../$dialog";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {eTableOptionSettingView} from "./useTableOption.setting.utils";
 import {Button} from "../../Button";
 import {Tooltip} from "../../Tooltip";