plain-design 1.0.0-beta.133 → 1.0.0-beta.135

package/src/packages/components/AutoTable/utils/AutoTable.utils.ts

@@ -1,6 +1,8 @@
 import {tScopeSlotsType, tSlotsType} from "@peryl/react-compose";
 import {iTableCellRenderScope} from "../../Table/table/utils/table.utils";
 import {TableOptionSpace} from "./TableOption.space";
+import {iAiConfiguration} from "../../$ai";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
 
 /**
  * AutoTable插槽类型
@@ -43,3 +45,76 @@ export interface iAutoTablePageData {
   hasNext: boolean,
   total?: null | number,
 }
+
+/**
+ * AutoOption中配置AI的相关设置
+ * @author  韦胜健
+ * @date    2025/4/6 10:58
+ */
+export interface iAutoTableAiConfig {
+  search: boolean,
+  sort: boolean,
+  config: boolean,
+  aiConfig?: iAiConfiguration,
+}
+
+/**
+ * settingConfig中编辑的数据类型
+ * @author  韦胜健
+ * @date    2025/4/7 22:43
+ */
+export interface iPlcConfigData {
+  field: string,
+  title?: string,
+  order: number,
+  align: string,
+  width: number,
+  fixed: string,
+  hide?: boolean,
+
+  plcRef: () => tPlc,
+  key: string,
+}
+
+/**
+ * 通过外部数据源的方式配置字段信息的数据类型
+ * @author  韦胜健
+ * @date    2025/4/7 22:43
+ */
+export type iPlcCustomData = Partial<Omit<iPlcConfigData, 'plcRef' | 'key' | 'field'>> & { field: string }
+
+/*---------------------------------------table ai types-------------------------------------------*/
+
+/*ai返回列表搜索的数据类型*/
+export interface iTableAiOperateSearch {
+  type: 'search',
+  data: { filters: { id: string, field: string, filterHandler: string, value: any }[], filterExpression: string }
+}
+
+/*ai返回列表排序的数据类型*/
+export interface iTableAiOperateSort {
+  type: 'sort',
+  data: { field: string, desc: boolean, title: string }[]
+}
+
+/*ai返回列表字段配置的数据类型*/
+export interface iTableAiOperateConfig {
+  type: 'config',
+  data: iTableAiOperatePlcMeta[]
+}
+
+/*ai返回的解析错误的数据类型*/
+export interface iTableAiOperateError {
+  type: 'error',
+  data: string
+}
+
+/**
+ * ai返回的配置字段的耽搁字段配置数据类型
+ * @author  韦胜健
+ * @date    2025/4/7 22:47
+ */
+export type iTableAiOperatePlcMeta = iPlcCustomData & { filterType: string }
+
+/*ai返回的数据类型*/
+export type iTableAiOperate = iTableAiOperateSearch | iTableAiOperateSort | iTableAiOperateConfig | iTableAiOperateError

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -1,6 +1,6 @@
 import {PlainObject} from "@peryl/utils/event";
 import {iHttp} from "../../createHttp";
-import {iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
+import {iAutoTableAiConfig, iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
 import {iUrl, tGetDefaultUrlConfig} from "./TableOption.url";
 import {iTableOperation, iTableOperationPermitConfig} from "../../Table/standard/PlcOperation/PlcOperation.utils";
 import {iTableRefer} from "../../Table/table/Table";
@@ -43,6 +43,7 @@ export namespace TableOptionSpace {
     setCache: (cacheData: iTableOptionCacheData) => void,               // 保存缓存配置信息
     size?: typeof ThemeSize.TYPE,                                       // 表格尺寸
     filterFormColumn: number,                                           // 查询表单列数
+    ai?: false | Partial<iAutoTableAiConfig>,                           // AI设置
   }
 
   /**

package/src/packages/components/FilterService/filter/filter.select.tsx

@@ -8,6 +8,7 @@ import i18n from "../../i18n";
 
 export interface iFilterConfigSelect {
   renderOptions: () => RenderNode,
+  getSelectOptions: () => { label: string, val: any }[]
 }
 
 /**

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

@@ -3,9 +3,9 @@ import './image.scss';
 import {unit} from "@peryl/utils/unit";
 import {createEnum} from "@peryl/utils/createEnum";
 import {Icon} from "../Icon";
-import {$image} from "../$image";
 import {LoadingMask} from "../LoadingMask";
 import i18n from "../i18n";
+import {$previewer} from "../$previewer";
 
 /**
  * 图片填充类型
@@ -135,7 +135,7 @@ export const Image = designComponent({
     const handler = {
       onClick: (e: iMouseEvent) => {
         if (state.status === eImageStatus.success && props.previewOnClick) {
-          $image.preview(state.src!);
+          $previewer.preview(state.src!, e.currentTarget as any);
         }
         emit.onClick(e);
       }

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

@@ -1,9 +1,8 @@
-import {computed, designComponent, getComponentCls, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {computed, designComponent, getComponentCls, iMouseEvent, PropType, reactive, useClasses, useModel, useRefs, useStyles, watch} from "@peryl/react-compose";
 import {unit} from "@peryl/utils/unit";
 import {deepcopy} from "@peryl/utils/deepcopy";
 import {defer} from "@peryl/utils/defer";
 import {Image, ImagePropsOptions} from "../Image";
-import {$image} from "../$image";
 import {Icon} from "../Icon";
 import {PlainObject} from "@peryl/utils/event";
 import {createEnum} from "@peryl/utils/createEnum";
@@ -13,6 +12,7 @@ import $configuration from "../$configuration";
 import {iUploadService} from "../$upload/createUploadService";
 import i18n from "../i18n";
 import {iUploadServiceConfig} from "../$upload/upload.utils";
+import {$previewer} from "../$previewer";
 
 /**
  * ImageUploader的状态
@@ -174,7 +174,7 @@ export const ImageUploader = designComponent({
         if (!editComputed.value.editable) return;
         await methods.choose();
       },
-      onClickImage: async () => {
+      onClickImage: async (e: iMouseEvent) => {
         if (state.status === eImageUploaderStatus.error) {
           return await handler.onClick();
         }
@@ -182,7 +182,7 @@ export const ImageUploader = designComponent({
         if (!!props.handlePreview) {
           return props.handlePreview(url);
         } else {
-          !!url && $image.preview(url);
+          !!url && $previewer.preview(url, e.currentTarget as any);
         }
       },
       onClickDelete: async () => {

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

@@ -1,13 +1,13 @@
-import {computed, designComponent, PropType} from "@peryl/react-compose";
+import {computed, designComponent, iMouseEvent, PropType} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../Table/plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
 import {injectPlainTable} from "../Table/table/Table";
-import {$image} from "../$image";
 import {FileServiceUploadConfig} from "../$file";
 import $configuration from "../$configuration";
 import {formatImagePath, Image} from "../Image";
 import {usePlc} from "../Table/plc/use/usePlc";
 import ImageUploader from "../ImageUploader";
+import {$previewer} from "../$previewer";
 
 export const PlcImage = designComponent({
   name: 'plc-image',
@@ -35,8 +35,8 @@ export const PlcImage = designComponent({
 
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
 
-    const preview = (index: number) => {
-      $image.preview((table.dataRef.value.data || []).map(i => formatImagePath(i[props.field!], urlPrefix.value)), index);
+    const preview = (index: number, e: iMouseEvent) => {
+      $previewer.preview({ current: index, urls: (table.dataRef.value.data || []).map(i => formatImagePath(i[props.field!], urlPrefix.value)) }, e.currentTarget as any);
     };
 
     return usePlc({
@@ -56,7 +56,7 @@ export const PlcImage = designComponent({
             minHeight={size.value}
             hideTips
             fit="cover"
-            onClick={() => preview(node.state.index)}
+            onClick={(e) => preview(node.state.index, e)}
           />
         ),
         edit: ({ row, plc }) => !plc.props.field ? null :

package/src/packages/components/Table/editor/PlcSelect.tsx

@@ -51,6 +51,7 @@ export const PlcSelect = designComponent({
     const filterConfig = computed((): iFilterConfigSelect => {
       return {
         renderOptions: () => slots.default(),
+        getSelectOptions: () => selectOptionDecoder.options.map((so: any) => ({ label: so.props.label, val: so.props.val })),
         ...props.filterConfig,
       };
     });

package/src/packages/components/Table/table/use/useTableFormEditor.tsx

@@ -115,40 +115,44 @@ export function useTableFormEditor(
                 handleCancel={handler.handleCancel}
                 position="right"
                 initialize
-              >
-                <Form
-                  rules={rules}
-                  ref={onRef.form}
-                  column={1}
-                  modelValue={node.state.editRow}
-                  labelAlign="right"
-                  validateMessagePosition="bottom-left"
-                >
-                  {showPlcArray.value.map((plc, index) => {
-                    if (plc.props.editColSpan === 0) {
-                      return null;
-                    }
-                    const { bodyCell } = cellBodyArray.value[index];
-                    const { editable, body } = bodyCell.value();
-                    const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
-                    return (
-                      <FormItem
-                        key={index}
-                        label={plc.props.formLabel || plc.props.title}
-                        field={plc.props.field}
-                        required={plc.props.required}
-                        rules={plc.props.rules}
-                        validator={plc.props.validator}
-                        tip={plc.props.tip}
-                        disabled={!editable}
-                        {...validateAttrs}
-                      >
-                        {body}
-                      </FormItem>
-                    );
-                  })}
-                </Form>
-              </Dialog>
+                v-slots={{
+                  default: () => (
+                    <Form
+                      rules={rules}
+                      ref={onRef.form}
+                      column={1}
+                      modelValue={node.state.editRow}
+                      labelAlign="right"
+                      validateMessagePosition="bottom-left"
+                    >
+                      {showPlcArray.value.map((plc, index) => {
+                        if (plc.props.editColSpan === 0) {
+                          return null;
+                        }
+                        const { bodyCell } = cellBodyArray.value[index];
+                        const { editable, body } = bodyCell.value();
+                        const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
+                        return (
+                          <FormItem
+                            key={index}
+                            label={plc.props.formLabel || plc.props.title}
+                            field={plc.props.field}
+                            required={plc.props.required}
+                            rules={plc.props.rules}
+                            validator={plc.props.validator}
+                            tip={plc.props.tip}
+                            disabled={!editable}
+                            {...validateAttrs}
+                          >
+                            {body}
+                          </FormItem>
+                        );
+                      })}
+                    </Form>
+                  ),
+                  foot: () => props.formEditorFootRender?.(node.state.editRow)
+                }}
+              />
             );
           },
         }));

package/src/packages/components/Table/table/utils/table.utils.ts

@@ -39,6 +39,7 @@ export const TablePropsOptions = {
   spanMethod: { type: Function as PropType<TablePropsSpanMethod> },     // 合并表体单元格的方法
   size: { ...StyleProps["size"] },                                      // 表格尺寸
   loading: { type: Boolean },                                           // 开启加载状态
+  formEditorFootRender: { type: Function as PropType<(formData: PlainObject) => any> },// 表单编辑器的foot渲染内容
 
   rowClassFunc: { type: Function as PropType<TablePropsRowClassFunc> },// 行 className 的计算函数
   cellClassFunc: { type: Function as PropType<TablePropsCellClassFunc> },// 单元格 className 的计算函数

package/src/packages/components/useDialog/DialogService.tsx

@@ -136,7 +136,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
         /*wrap handleConfirm*/
         dialogProps.handleConfirm = async (close: () => void) => {
           if (!!targetOption.value.customOption.editRequired) {
-            if (state.editValue == null || !state.editValue.trim().length) {
+            if (state.editValue == null || (typeof state.editValue === "string" && !state.editValue.trim().length)) {
               $message.warn('不能为空！');
               return false;
             }

package/src/packages/entry.tsx

@@ -135,6 +135,10 @@ export {ImagePreviewer} from './components/ImagePreviewer/ImagePreviewer';
 export {Corner} from './components/Corner';
 export {useContextmenuOptions} from './components/useContextmenuOptions';
 export type {iContextmenuOption} from './components/useContextmenuOptions';
+export {AiChatBox} from './components/AiChatBox';
+export type {iChatBoxHistory} from './components/AiChatBox';
+export {$ai} from './components/$ai';
+export type {iAiChoice, iAiChatResponse, iAiConfiguration} from './components/$ai';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';

package/src/packages/i18n/lang/en-us.ts

@@ -29,7 +29,7 @@ export const EnUsLocale: tZhCnLocale = {
     main: 'Main',
     fixed: 'Fixed',
     hide: 'Hidden',
-    exportData: 'Export data',
+    exportData: 'Export Data',
     custom: 'Custom',
     setting: 'Setting',
     asc: 'Asc',
@@ -176,21 +176,22 @@ export const EnUsLocale: tZhCnLocale = {
     configSeniorFilter: 'Senior filter',
     formFilter: 'Form filter',
     formQuery: 'Form query',
+    aiButton: 'AI Chat',
     searchBar: 'Search bar',
     pleaseEditSearchParam: 'Please input search param directly',
-    allFilter: 'All filter',
+    allFilter: 'All Filter',
     noFilter: 'No filter',
     clearAll: 'Clear all',
     pleaseInputThConfigurationName: 'Please input configuration name',
     bak: 'Backup',
     areYouSureToOverrideTheConfiguration: 'Are you sure to override "{title}" to be the latest configuration',
-    cacheSetting: 'Cache setting',
+    cacheSetting: 'Cache Setting',
     clearFilterSortAndConfiguration: 'Clear filter, sort and configuration',
     withoutAnyConfiguration: 'Use none configuration',
     saveToNewConfiguration: 'Save current to be new configuration',
     cacheName: 'Cache name',
     createTime: 'Create time',
-    customSetting: 'Custom setting',
+    customSetting: 'Custom Setting',
     title: 'Title',
     alignType: 'Align type',
     alignLeft: 'Left',
@@ -210,20 +211,21 @@ export const EnUsLocale: tZhCnLocale = {
     exportShowData: 'Export show data',
     fieldName: 'Field name',
     exportAgain: 'Export again',
-    importData: 'Import data',
+    importData: 'Import Data',
     pleaseEnterCompleteParamsForCondition: 'Please input complete param for the {invalidIndex} condition ',
-    seniorFilter: 'Senior filter',
+    seniorFilter: 'Senior Filter',
     pleaseAddFilterCondition: 'Please add filter condition',
-    seniorQuery: 'Senior query',
+    seniorQuery: 'Senior Query',
     ascOrDesc: 'Asc Or Desc',
-    formEdit: 'Form edit',
-    batchCreate: 'Batch create',
-    batchDelete: 'Batch delete',
-    batchEdit: 'Batch edit',
-    batchModify: 'Batch modify',
-    seniorSort: 'Senior sort',
+    formEdit: 'Form Edit',
+    batchCreate: 'Batch Create',
+    aiCreate: 'AI Create',
+    batchDelete: 'Batch Delete',
+    batchEdit: 'Batch Edit',
+    batchModify: 'Batch Modify',
+    seniorSort: 'Senior Sort',
     canNotDeleteUsingCache: 'Can not delete cache which is using',
-    columnFilter: 'Column filter',
+    columnFilter: 'Column Filter',
     distinctFilter: 'Distinct filter',
     filterTipInclude: '{field} includes {val}',
     clearDistinctFilter: 'Clear distinct filter',
@@ -316,4 +318,11 @@ export const EnUsLocale: tZhCnLocale = {
     searchHistory: 'Search History',
     favorite: 'Favorite'
   },
+  ai: {
+    placeholder: 'Please enter the content to be sent to the AI, such as: Who are you?',
+    require: 'The content of the question cannot be empty',
+    tableAiPlaceholder: 'You can have a conversation with the AI to achieve the functions of querying, sorting, and configuring the list. For example, query the data with the number approximately equal to 129 and the creation time greater than the day before yesterday, sort it in descending order by the creation time first, and then in ascending order by the update time. Finally, adjust the width of the number field.',
+    formAiPlaceholder: 'Describe the data content you want to edit in one sentence.',
+    smartFilling: 'Smart Filling',
+  }
 };

package/src/packages/i18n/lang/zh-cn.ts

@@ -47,7 +47,7 @@ export const ZhCnLocale = {
     invalidAmount: '无效金额',
     province: '省',
     city: '市',
-    district: '区/县',
+    district: '区县',
     lookUp: '查看',
     operation: '操作',
     noFilter: '暂无筛选',
@@ -174,6 +174,7 @@ export const ZhCnLocale = {
     configSeniorFilter: '配置高级查询',
     formFilter: '表单筛选',
     formQuery: '表单查询',
+    aiButton: 'AI对话',
     searchBar: '搜索栏',
     pleaseEditSearchParam: '请直接编辑搜索栏筛选参数',
     allFilter: '所有筛选',
@@ -216,6 +217,7 @@ export const ZhCnLocale = {
     ascOrDesc: '升序还是降序',
     formEdit: '表单编辑',
     batchCreate: '批量新建',
+    aiCreate: '智能新建',
     batchDelete: '批量删除',
     batchEdit: '批量编辑',
     batchModify: '批量修改',
@@ -314,6 +316,13 @@ export const ZhCnLocale = {
     searchHistory: '搜索历史',
     favorite: '收藏'
   },
+  ai: {
+    placeholder: '请输入要发送给ai的内容如：你是谁',
+    require: '提问的内容不能为空',
+    tableAiPlaceholder: '你可以与ai对话实现对列表的查询、排序以及配置功能；比如：查询编号约等于129，创建时间大于前天的数据，先按照创建时间降序，再按照更新时间升序排序；最后是调宽编号字段的宽度',
+    formAiPlaceholder: '一句话描述你要编辑的数据内容',
+    smartFilling:'智能填写',
+  }
 } as const;
 
 type ZhCnLocaleUtils<T> = { [k in keyof T]: T[k] extends string ? string : ZhCnLocaleUtils<T[k]> }