@oinone/kunlun-vue-admin-base 7.1.0 → 7.2.0

package/src/components/select/organizational-structure-tree/OrganizationalStructureTree.vue

@@ -2,13 +2,16 @@
 import {
   OrganizationalStructureType,
   type PamirsDepartment,
-  type PamirsOrganizationalStructure
+  type PamirsOrganizationalStructure,
+  type PamirsOrganizationalStructureService,
+  type QueryWrapper,
+  translateValueByKey
 } from '@oinone/kunlun-engine';
 import type { OioTreeNode } from '@oinone/kunlun-shared';
 import { OioCheckbox, OioIcon, OioTree, SelectMode } from '@oinone/kunlun-vue-ui-antd';
 import { Radio as ARadio } from 'ant-design-vue';
 import { computed, createVNode, defineComponent, onMounted, type PropType, type VNode } from 'vue';
-import type { TreeStateLoadFunction } from '../../quick-utils';
+import type { TreeState, TreeStateLoadFunction } from '../../quick-utils';
 import { useOrganizationalStructureTree } from './init';
 
 export default defineComponent({
@@ -73,6 +76,18 @@ export default defineComponent({
   },
   emits: ['update:loading', 'update:checkedKeys', 'update:selectedKeys', 'init', 'change'],
   setup(props, { emit, expose }) {
+    const defaultLoadFunction = ((
+      res: TreeState<PamirsOrganizationalStructure>,
+      service: PamirsOrganizationalStructureService,
+      queryWrapper: QueryWrapper
+    ) => {
+      return service.queryListByFilter({
+        model: props.model,
+        companyModel: props.companyModel,
+        rsql: queryWrapper.rsql
+      });
+    }) as TreeStateLoadFunction<PamirsOrganizationalStructure>;
+
     const {
       state,
       filterData,
@@ -86,7 +101,7 @@ export default defineComponent({
       mode: props.selectMode,
       getCheckedKeys: () => props.checkedKeys,
       getSearchValue: () => props.searchValue,
-      load: props.load
+      load: props.load || defaultLoadFunction
     });
 
     const loading = computed({
@@ -112,6 +127,14 @@ export default defineComponent({
       updateTreeData();
     };
 
+    const onSelected = ({ node }: { node: OioTreeNode<PamirsDepartment> }) => {
+      if (props.selectMode === SelectMode.multiple) {
+        onUpdateChecked(node, node.checked !== true);
+      } else if (node.selectable !== false && props.selectMode === SelectMode.single) {
+        onUpdateChecked(node, node.key !== state.checkedKeys[0]);
+      }
+    };
+
     const updateTreeData = () => {
       state.data = [...state.data];
       emit('update:checkedKeys', state.checkedKeys);
@@ -152,7 +175,8 @@ export default defineComponent({
       halfCheckedAll,
       onUpdateExpandedKeys,
       onUpdateCheckedAll,
-      onUpdateChecked
+      onUpdateChecked,
+      onSelected
     };
   },
   render() {
@@ -170,6 +194,7 @@ export default defineComponent({
       showCheckedAll,
       selectable,
       selectedKeys,
+      onSelected,
       onUpdateExpandedKeys,
       onUpdateCheckedAll,
       onUpdateChecked
@@ -182,6 +207,7 @@ export default defineComponent({
       selectable: selectable || false,
       selectedKeys,
       'onUpdate:selectedKeys': (val) => this.$emit('update:selectedKeys', val),
+      onSelected,
       expandedKeys: state.expandedKeys,
       'onUpdate:expandedKeys': onUpdateExpandedKeys
     };
@@ -237,7 +263,7 @@ export default defineComponent({
     if (!!filterData.length && selectMode === SelectMode.multiple && showCheckedAll) {
       return createVNode('div', { class: `${mainClassName}-wrapper oio-scrollbar` }, [
         createVNode('div', { class: `${mainClassName}-node ${mainClassName}-node-checked-all` }, [
-          createVNode('div', { class: `${mainClassName}-node-title` }, '全选'),
+          createVNode('div', { class: `${mainClassName}-node-title` }, translateValueByKey('全选')),
           createVNode(OioCheckbox, {
             checked: checkedAll,
             indeterminate: halfCheckedAll,

package/src/components/select/table-select/TableSelect.vue

@@ -130,8 +130,17 @@ export default defineComponent({
       props.change?.(newRecord);
     };
 
+    /**
+     * 当 vxe-table 加载数据数量过多，scrollHeight 达到一定高度时，会出现 bodyHeight === scrollHeight 参数异常的问题
+     * 此参数用于保留第一次滚动的有效值
+     */
+    let bodyHeight: number | undefined;
+
     const onScroll = (e: { scrollHeight: number; scrollTop: number; bodyHeight: number }) => {
-      const { scrollHeight, scrollTop, bodyHeight } = e;
+      const { scrollHeight, scrollTop } = e;
+      if (bodyHeight == null) {
+        bodyHeight = e.bodyHeight;
+      }
       if (scrollHeight - scrollTop - 1 <= bodyHeight) {
         if (props.loadCompleted) {
           return;

package/src/components/sortable-group/SortableGroup.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script lang="ts">
-import type { RuntimeModelField } from '@oinone/kunlun-engine';
+import { RuntimeModelField } from '@oinone/kunlun-engine';
 import { EDirection } from '@oinone/kunlun-service';
 import { OioButton, OioIcon, OioInput } from '@oinone/kunlun-vue-ui-antd';
 import { computed, defineComponent, type PropType, ref, watch } from 'vue';

package/src/components/upload/UploadDraggable.vue

@@ -32,9 +32,9 @@
 </template>
 
 <script lang="ts">
+import { InboxOutlined } from '@ant-design/icons-vue';
 import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
 import { defineComponent } from 'vue';
-import { InboxOutlined } from '@ant-design/icons-vue';
 import { UploadCommonProps } from '../prop';
 import UploadCom from './Upload.vue';
 

package/src/components/user-prefer/SimpleUserPreferSetting.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { OioCheckbox, OioEmptyData, OioIcon, OioInputSearch, PropRecordHelper } from '@oinone/kunlun-vue-ui-antd';
 import { Popover as APopover } from 'ant-design-vue';
 import { computed, createVNode, defineComponent, type PropType, ref, watch } from 'vue';
@@ -168,7 +169,7 @@ export default defineComponent({
           const contentChildren = [
             createVNode(OioInputSearch, {
               value: searchValue,
-              placeholder: '请输入关键字',
+              placeholder: translateValueByKey('请输入关键字'),
               'onUpdate:value': onUpdateSearchValue
             })
           ];

package/src/container/collapse/DefaultCollapsePanel.vue

@@ -93,6 +93,7 @@ export default defineComponent({
             [`${DEFAULT_PREFIX}-collapse-panel`],
             getCurrentInstance()?.parent?.attrs?.class as string
           ),
+          title: this.$translate((getCurrentInstance()?.parent?.attrs?.title as string) || ''),
           ref: 'origin',
           forceRender: this.forceRender,
           collapsible: this.collapsible,

package/src/container/group/DefaultGroup.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { DslDefinition } from '@oinone/kunlun-dsl';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import type { CSSStyle } from '@oinone/kunlun-shared';
 import { FormLayout, OioGroup, PropRecordHelper, useOioFormLayoutContext } from '@oinone/kunlun-vue-ui-antd';
 import { createVNode, defineComponent, type PropType, type Slot, vShow, withDirectives } from 'vue';
@@ -19,7 +18,7 @@ export default defineComponent({
     },
     title: {
       type: String,
-      default: translateValueByKey('分组')
+      default: '分组'
     },
     description: {
       type: String,
@@ -97,7 +96,7 @@ export default defineComponent({
         OioGroup,
         {
           ...PropRecordHelper.collectionBasicProps($attrs, ['oio-default-group']),
-          title: !title && titleToolbarInvisible ? false : title,
+          title: !title && titleToolbarInvisible ? false : this.$translate(title),
           bizStyle,
           description,
           border,
@@ -105,7 +104,7 @@ export default defineComponent({
           wrapperStyle,
           toolbarClassName,
           toolbarStyle,
-          help
+          help: this.$translate(help)
         },
         children
       ),

package/src/container/tabs/DefaultTabWidget.ts

@@ -1,3 +1,4 @@
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { SPI } from '@oinone/kunlun-spi';
 import { BooleanHelper, CallChaining, DEFAULT_TAB_TITLE, useTabBar } from '@oinone/kunlun-vue-ui-antd';
 import { Widget } from '@oinone/kunlun-vue-widget';
@@ -92,7 +93,7 @@ export class DefaultTabWidget extends BasePackWidget {
       },
       {
         ...slots,
-        tab: () => [useTabBar(this.title, this.help)]
+        tab: () => [useTabBar(translateValueByKey(this.title), translateValueByKey(this.help as string))]
       }
     );
   }

package/src/field/detail/date/DetailWeekPickerFieldWidget.ts

@@ -0,0 +1,13 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { FormFieldWidget } from '../../../basic';
+import { DetailDateFieldWidget } from './DetailDateFieldWidget';
+
+@SPI.ClassFactory(
+  FormFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Date,
+    widget: 'WeekPicker'
+  })
+)
+export class DetailWeekPickerFieldWidget extends DetailDateFieldWidget {}

package/src/field/detail/date/index.ts

@@ -3,3 +3,4 @@ export * from './DetailDateTimeFieldWidget';
 export * from './DetailDateFieldWidget';
 export * from './DetailTimeFieldWidget';
 export * from './DetailYearFieldWidget';
+export * from './DetailWeekPickerFieldWidget';

package/src/field/detail/date/range/use-date-time-range-picker.ts

@@ -10,7 +10,7 @@ export function useDateTimeRangePicker(props) {
     } else if (isDate(value)) {
       dateValue = value;
     } else if (value) {
-      console.warn(`无法识别的日期值, 显示的值可能出现异常. value=${value}`);
+      console.warn(`Unrecognized date value, the displayed value may be abnormal. value =${ value}`);
       return toString(value);
     } else {
       return '';

package/src/field/detail/date/use-date-time-picker.ts

@@ -28,7 +28,7 @@ export function useDateTimePicker(props) {
       } else if (isDate(value)) {
         dateValue = value;
       } else {
-        console.warn(`无法识别的日期值, 显示的值可能出现异常. value=${value}`);
+        console.warn(`Unrecognized date value, the displayed value may be abnormal. value =${ value}`);
       }
       if (dateValue) {
         return dateValue;

package/src/field/detail/index.ts

@@ -2,6 +2,7 @@ export * from './date';
 export * from './m2m';
 export * from './o2m';
 export * from './map';
+export * from './number';
 export * from './string';
 
 export * from './common/DetailCommonFieldWidget';
@@ -14,4 +15,3 @@ export * from './html/DetailHtmlFieldWidget';
 export * from './m2o/DetailM2OSelectFieldWidget';
 export * from './m2o/upload/DetailM2OUploadWidget';
 export * from './o2o/DetailO2OSelectFieldWidget';
-export * from './number/DetailNumberWidget';

package/src/field/detail/m2m/table/DetailM2MTableFieldWidget.ts

@@ -2,6 +2,7 @@ import type { ActiveRecord, RuntimeM2MField } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewMode, ViewType } from '@oinone/kunlun-meta';
 import type { ReturnPromise } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
+import { isDetailViewState, Widget } from '@oinone/kunlun-vue-widget';
 import { BaseFieldWidget, FormSubviewListFieldWidget, RelationQueryHelper } from '../../../../basic';
 import { TABLE_WIDGET } from '../../../../typing';
 
@@ -19,7 +20,22 @@ export class DetailM2MTableFieldWidget extends FormSubviewListFieldWidget<Runtim
     }
   }
 
+  @Widget.Reactive()
+  protected get disabledRelationQuery() {
+    if (this.viewState && isDetailViewState(this.viewState)) {
+      if (this.inline) {
+        return this.viewState.disabledRelationQuery;
+      }
+      return this.viewState.disabledRelationQuery || this.globalState?.disabledRelationQuery;
+    }
+    return this.globalState?.disabledRelationQuery;
+  }
+
   protected initSubviewData(): ReturnPromise<void> {
+    if (this.disabledRelationQuery) {
+      super.initSubviewData();
+      return;
+    }
     const view = this.runtimeSubviewContext.view;
     if (!view) {
       super.initSubviewData();

package/src/field/detail/number/DetailFloatFieldWidget.ts

@@ -0,0 +1,12 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { BaseFieldWidget } from '../../../basic';
+import { DetailNumberWidget } from './DetailNumberWidget';
+
+@SPI.ClassFactory(
+  BaseFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Float
+  })
+)
+export class DetailFloatFieldWidget extends DetailNumberWidget {}

package/src/field/detail/number/DetailIntegerFieldWidget.ts

@@ -0,0 +1,12 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { BaseFieldWidget } from '../../../basic';
+import { DetailNumberWidget } from './DetailNumberWidget';
+
+@SPI.ClassFactory(
+  BaseFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Integer
+  })
+)
+export class DetailIntegerFieldWidget extends DetailNumberWidget {}

package/src/field/detail/number/DetailMoneyFieldWidget.ts

@@ -0,0 +1,12 @@
+import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
+import { SPI } from '@oinone/kunlun-spi';
+import { BaseFieldWidget } from '../../../basic';
+import { DetailNumberWidget } from './DetailNumberWidget';
+
+@SPI.ClassFactory(
+  BaseFieldWidget.Token({
+    viewType: ViewType.Detail,
+    ttype: ModelFieldType.Currency
+  })
+)
+export class DetailMoneyFieldWidget extends DetailNumberWidget {}

package/src/field/detail/number/DetailNumberWidget.ts

@@ -1,18 +1,9 @@
-import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
-import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { toString } from 'lodash-es';
-import { FormFieldWidget } from '../../../basic/field';
 import { FormNumberAbstractFieldWidget } from '../../form/abstract/FormNumberAbstractFieldWidget';
 import { numberAddThousandth, numberZeroFill } from '../../util';
 import DetailString from '../string/default/DetailString.vue';
 
-@SPI.ClassFactory(
-  FormFieldWidget.Token({
-    viewType: ViewType.Detail,
-    ttype: [ModelFieldType.Integer, ModelFieldType.Long, ModelFieldType.Float, ModelFieldType.Currency]
-  })
-)
 export class DetailNumberWidget extends FormNumberAbstractFieldWidget {
   public initialize(props) {
     super.initialize(props);

package/src/field/detail/number/index.ts

@@ -0,0 +1,4 @@
+export * from './DetailFloatFieldWidget';
+export * from './DetailIntegerFieldWidget';
+export * from './DetailMoneyFieldWidget';
+export * from './DetailNumberWidget';

package/src/field/detail/o2m/table/DetailO2MTableFieldWidget.ts

@@ -3,6 +3,7 @@ import { ModelFieldType, ViewMode, ViewType } from '@oinone/kunlun-meta';
 import { Condition } from '@oinone/kunlun-request';
 import type { ReturnPromise } from '@oinone/kunlun-shared';
 import { SPI } from '@oinone/kunlun-spi';
+import { isDetailViewState, Widget } from '@oinone/kunlun-vue-widget';
 import { BaseFieldWidget, FormSubviewListFieldWidget, RelationQueryHelper } from '../../../../basic';
 import { TABLE_WIDGET } from '../../../../typing';
 
@@ -20,7 +21,22 @@ export class DetailO2MTableFieldWidget extends FormSubviewListFieldWidget<Runtim
     }
   }
 
+  @Widget.Reactive()
+  protected get disabledRelationQuery() {
+    if (this.viewState && isDetailViewState(this.viewState)) {
+      if (this.inline) {
+        return this.viewState.disabledRelationQuery;
+      }
+      return this.viewState.disabledRelationQuery || this.globalState?.disabledRelationQuery;
+    }
+    return this.globalState?.disabledRelationQuery;
+  }
+
   protected initSubviewData(): ReturnPromise<void> {
+    if (this.disabledRelationQuery) {
+      super.initSubviewData();
+      return;
+    }
     const view = this.runtimeSubviewContext.view;
     if (!view) {
       super.initSubviewData();

package/src/field/detail/string/color/DefaultColorPicker.vue

@@ -4,7 +4,7 @@
       :value="realValue"
       :default-value="defaultValue"
       :has-input="hasInput"
-      :input-placeholder="placeholder"
+      :input-placeholder="$translate(placeholder)"
       :disabled="disabled"
       readonly
       :predefine="predefine"
@@ -19,7 +19,6 @@
 import { ColorFormat, ColorInputPlacement, DEFAULT_PREDEFINE } from '@oinone/kunlun-vue-ui-common';
 import { OioColorPicker } from '@oinone/kunlun-vue-ui-el';
 import { defineComponent, type PropType } from 'vue';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../../basic';
 import DetailCommonField from '../../common/DetailCommonField.vue';
 
@@ -49,7 +48,7 @@ export default defineComponent({
     },
     placeholder: {
       type: String,
-      default: translateValueByKey('请选择颜色')
+      default: '请选择颜色'
     },
     inputPlacement: {
       type: [String, Object] as PropType<ColorInputPlacement>,

package/src/field/form/abstract/department/AbstractFormDepartmentFieldWidget.ts

@@ -1,5 +1,6 @@
 import { PamirsDepartment, RuntimeRelationField } from '@oinone/kunlun-engine';
 import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { SelectFieldWidget } from '../../../../basic';
 import { DepartmentSelect } from '../../../../components';
@@ -9,6 +10,16 @@ export abstract class AbstractFormDepartmentFieldWidget<
   Value extends PamirsDepartment | PamirsDepartment[] = PamirsDepartment | PamirsDepartment[],
   Field extends RuntimeRelationField = RuntimeRelationField
 > extends SelectFieldWidget<Option, Value, Field> {
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
+  protected defaultConstructDataTrigger() {
+    return [WidgetTrigger.change];
+  }
+
+  protected defaultClearFieldsTrigger() {
+    return [WidgetTrigger.change];
+  }
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(DepartmentSelect);

package/src/field/form/abstract/employee/AbstractFormEmployeeFieldWidget.ts

@@ -1,5 +1,6 @@
 import { PamirsEmployee, RuntimeRelationField } from '@oinone/kunlun-engine';
 import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { SelectFieldWidget } from '../../../../basic';
 import { EmployeeSelect } from '../../../../components';
@@ -9,6 +10,16 @@ export abstract class AbstractFormEmployeeFieldWidget<
   Value extends PamirsEmployee | PamirsEmployee[] = PamirsEmployee | PamirsEmployee[],
   Field extends RuntimeRelationField = RuntimeRelationField
 > extends SelectFieldWidget<Option, Value, Field> {
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
+  protected defaultConstructDataTrigger() {
+    return [WidgetTrigger.change];
+  }
+
+  protected defaultClearFieldsTrigger() {
+    return [WidgetTrigger.change];
+  }
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(EmployeeSelect);

package/src/field/form/abstract/radio/FormRelationFieldRadioWidget.ts

@@ -9,7 +9,7 @@ import {
 } from '@oinone/kunlun-engine';
 import { Expression, type ExpressionRunParam } from '@oinone/kunlun-expression';
 import { BooleanHelper, NumberHelper } from '@oinone/kunlun-shared';
-import { type SelectItem, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
+import { type SelectItem, ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { FormComplexFieldWidget } from '../../../../basic/field/complex/FormComplexFieldWidget';
 import { isValidatorSuccess, type ValidatorInfo } from '../../../../typing';
@@ -239,6 +239,8 @@ export abstract class FormRelationFieldRadioWidget<
     );
   }
 
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
   protected defaultConstructDataTrigger() {
     return [WidgetTrigger.CHANGE];
   }

package/src/field/form/abstract/role/AbstractFormRoleFieldWidget.ts

@@ -1,5 +1,6 @@
 import { AuthRole, RuntimeRelationField } from '@oinone/kunlun-engine';
 import { BooleanHelper, StringHelper } from '@oinone/kunlun-shared';
+import { ValidateTrigger, WidgetTrigger } from '@oinone/kunlun-vue-ui-common';
 import { Widget } from '@oinone/kunlun-vue-widget';
 import { SelectFieldWidget } from '../../../../basic';
 import { RoleSelect } from '../../../../components';
@@ -9,6 +10,16 @@ export abstract class AbstractFormRoleFieldWidget<
   Value extends AuthRole | AuthRole[] = AuthRole | AuthRole[],
   Field extends RuntimeRelationField = RuntimeRelationField
 > extends SelectFieldWidget<Option, Value, Field> {
+  public defaultValidateTrigger: ValidateTrigger[] = [ValidateTrigger.change];
+
+  protected defaultConstructDataTrigger() {
+    return [WidgetTrigger.change];
+  }
+
+  protected defaultClearFieldsTrigger() {
+    return [WidgetTrigger.change];
+  }
+
   public initialize(props) {
     super.initialize(props);
     this.setComponent(RoleSelect);

package/src/field/form/abstract/select/DefaultMultipleSelect.vue

@@ -12,6 +12,7 @@
     </div>
     <div v-else>
       <a-select
+        :id="id"
         ref="selectRef"
         mode="multiple"
         class="oio-select"

package/src/field/form/abstract/select/DefaultSingleSelect.vue

@@ -12,6 +12,7 @@
     </div>
     <div v-else>
       <a-select
+        :id="id"
         ref="selectRef"
         class="oio-select"
         label-in-value

package/src/field/form/enum/thumbnail/FormEnumThumbnail.vue

@@ -2,14 +2,15 @@
   <div class="form-enum-thumbnail" :class="readonly && 'readonly'">
     <div v-for="item in realOptions" class="thumbnail-item" :key="item.key" @click.stop.prevent="selectThumbnail(item)">
       <div class="item" :class="[item.value === value && 'selected']">
-        <img alt="暂时无法加载" :src="item.data.thumbnail" />
+        <img :alt="$translate('暂时无法加载')" :src="computeThumbnailSrc(item.data.thumbnail)" />
       </div>
       <span class="label">{{ item.label }}</span>
     </div>
   </div>
 </template>
 <script lang="ts">
-import type { RuntimeEnumerationOption } from '@oinone/kunlun-engine';
+import { genStaticPath, RuntimeEnumerationOption } from '@oinone/kunlun-engine';
+import { UrlHelper } from '@oinone/kunlun-shared';
 import type { SelectItem } from '@oinone/kunlun-vue-ui-common';
 import { computed, defineComponent, type PropType } from 'vue';
 import { OioCommonProps, OioMetadataProps, useMetadataProps } from '../../../../basic';
@@ -50,10 +51,21 @@ export default defineComponent({
       props.change && props.change(item.value);
     };
 
+    const computeThumbnailSrc = (source: string | undefined) => {
+      if (!source) {
+        return undefined;
+      }
+      if (source.startsWith('/')) {
+        return genStaticPath(UrlHelper.relativePath(source));
+      }
+      return source;
+    };
+
     return {
       realValue,
       realOptions,
-      selectThumbnail
+      selectThumbnail,
+      computeThumbnailSrc
     };
   }
 });

package/src/field/form/integer/FormIntegerSliderFieldWidget.ts

@@ -40,7 +40,7 @@ export class FormIntegerSliderFieldWidget extends FormIntegerFieldWidget {
     let max = NumberHelper.toNumber(this.getDsl().max);
     if (isNil(max)) {
       if (isDev()) {
-        console.warn(`滑动输入框必须配置最大值`);
+        console.warn(`The slider input box must have a maximum value configured.`);
       }
       max = 100;
     }

package/src/field/form/m2m/upload/FormM2MUploadDraggableFieldWidget.ts

@@ -1,7 +1,7 @@
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import { FormFieldWidget } from '../../../../basic';
 import { UploadDraggable } from '../../../../components';
 import { FormM2MUploadFieldWidget } from './FormM2MUploadFieldWidget';
@@ -32,7 +32,7 @@ export class FormM2MUploadDraggableFieldWidget extends FormM2MUploadFieldWidget
     return this.getDsl().draggableTipText || '点击 或 拖拽文件到这里上传';
   }
 
-  // 是否展示支持拓展名
+  // 是否展示支持扩展名
   @Widget.Reactive()
   public get showDraggableExtendsionsText() {
     return this.getDsl().showDraggableExtendsionsText ?? true;
@@ -42,6 +42,6 @@ export class FormM2MUploadDraggableFieldWidget extends FormM2MUploadFieldWidget
   @Widget.Reactive()
   public get draggableExtendsionsText() {
     const allowdFileExtensionsString = this.limitFileExtensions || translateValueByKey('全部');
-    return translateValueByKey('支持拓展名: ') + allowdFileExtensionsString;
+    return translateValueByKey('支持扩展名: ${fileExtensions}', { fileExtensions: allowdFileExtensionsString });
   }
 }

package/src/field/form/m2o/upload/FormM2OUploadDraggableFieldWidget.ts

@@ -1,7 +1,7 @@
+import { translateValueByKey } from '@oinone/kunlun-engine';
 import { ModelFieldType, ViewType } from '@oinone/kunlun-meta';
 import { SPI } from '@oinone/kunlun-spi';
 import { Widget } from '@oinone/kunlun-vue-widget';
-import { translateValueByKey } from '@oinone/kunlun-engine';
 import { FormFieldWidget } from '../../../../basic';
 import { UploadDraggable } from '../../../../components';
 import { FormM2OUploadFieldWidget } from './FormM2OUploadFieldWidget';
@@ -32,7 +32,7 @@ export class FormM2OUploadDraggableFieldWidget extends FormM2OUploadFieldWidget
     return this.getDsl().draggableTipText || '点击 或 拖拽文件到这里上传';
   }
 
-  // 是否展示支持拓展名
+  // 是否展示支持扩展名
   @Widget.Reactive()
   public get showDraggableExtendsionsText() {
     return this.getDsl().showDraggableExtendsionsText ?? true;
@@ -42,6 +42,6 @@ export class FormM2OUploadDraggableFieldWidget extends FormM2OUploadFieldWidget
   @Widget.Reactive()
   public get draggableExtendsionsText() {
     const allowdFileExtensionsString = this.limitFileExtensions || translateValueByKey('全部');
-    return translateValueByKey('支持拓展名: ') + allowdFileExtensionsString;
+    return translateValueByKey('支持扩展名: ${fileExtensions}', { fileExtensions: allowdFileExtensionsString });
   }
 }