From 7b97258b3f0847489790263ff046173692af4596 Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Wed, 9 Apr 2025 10:20:57 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81w-form-group=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=B8=83=E5=B1=80=202=E3=80=81w-tex?=
 =?UTF-8?q?tarea=E7=AD=89=E5=9F=BA=E7=A1=80=E7=BB=84=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=8F=92=E6=A7=BD=203=E3=80=81w-grid=E7=9A=84?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=93=8D=E5=BA=94=E5=BC=8F=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=204=E3=80=81w-grid=E7=9A=84td-content?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=BB=BB=E6=84=8F=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 io.sc.platform.core.frontend/package.json     |   2 +-
 .../components/checkbox/WCheckbox.vue         |  17 +-
 .../components/checkbox/WCheckboxGroup.vue    |  10 +-
 .../components/code-mirror/WCodeMirror.vue    |  23 +-
 .../platform/components/color/WColorInput.vue |  10 +-
 .../components/color/WColorInputPalette.vue   |  10 +-
 .../src/platform/components/cron/WCron.vue    |  10 +-
 .../src/platform/components/date/WDate.vue    |  10 +-
 .../platform/components/date/WDateRange.vue   |  10 +-
 .../src/platform/components/file/WFile.vue    |  10 +-
 .../platform/components/form/FormElement.vue  |   2 +-
 .../src/platform/components/form/FormField.ts |  92 +++++++-
 .../platform/components/form/FormGroup.vue    | 202 ++++++++++++++----
 .../platform/components/form/ts/Constant.ts   |  18 +-
 .../src/platform/components/form/ts/Form.ts   |   2 +-
 .../platform/components/grid/TdContent.vue    |   6 +-
 .../src/platform/components/grid/WGrid.vue    |   9 +
 .../platform/components/grid/extra/Editor.vue |   6 +-
 .../components/grid/ts/function/RequestApi.ts |   2 +-
 .../components/grid/ts/types/PropsType.ts     |   4 +-
 .../src/platform/components/icon/WIcon.vue    |  10 +-
 .../platform/components/number/WInteger.vue   |  10 +-
 .../platform/components/number/WNumber.vue    |  10 +-
 .../components/password/WPassword.vue         |  10 +-
 .../components/position/WPosition.vue         |  10 +-
 .../src/platform/components/radio/WRadio.vue  |  10 +-
 .../components/select/WGridSelect.vue         |  10 +-
 .../components/select/WInputSelect.vue        |  10 +-
 .../platform/components/select/WOrgSelect.vue |  10 +-
 .../components/select/WRoleSelect.vue         |  10 +-
 .../platform/components/select/WSelect.vue    |  10 +-
 .../components/select/WUserSelect.vue         |  10 +-
 .../src/platform/components/text/WText.vue    |  10 +-
 .../components/textarea/WTextarea.vue         |  19 +-
 34 files changed, 484 insertions(+), 120 deletions(-)

diff --git a/io.sc.platform.core.frontend/package.json b/io.sc.platform.core.frontend/package.json
index 024f74ca..026f5032 100644
--- a/io.sc.platform.core.frontend/package.json
+++ b/io.sc.platform.core.frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.2.60",
+  "version": "8.2.64",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "//main": "库的主文件",
   "main": "dist/platform-core.js",
diff --git a/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue
index 6e38083f..43c3430a 100644
--- a/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckbox.vue
@@ -25,6 +25,10 @@
             @update:model-value="fieldMethodsClass.updateValue"
           ></q-checkbox>
         </template>
+        <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+          <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+          <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+        </template>
       </q-field>
     </template>
     <template v-else>
@@ -35,18 +39,25 @@
         :readonly="fieldMethodsClass.getReadOnly(props, modelValue)"
         :disable="fieldMethodsClass.getDisable(props, modelValue)"
         @update:model-value="fieldMethodsClass.updateValue"
-      ></q-checkbox>
+      >
+        <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+          <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+          <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+        </template>
+      </q-checkbox>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const checkboxRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel({ type: Boolean, default: false });
 
 interface FieldProps extends FormFieldProps {
@@ -58,6 +69,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue
index 8b6f2412..768bb0ca 100644
--- a/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/checkbox/WCheckboxGroup.vue
@@ -40,16 +40,22 @@
           :disable="fieldMethodsClass.getDisable(props, modelValue)"
         />
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-field>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const checkboxGroupRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<Array<string> | Array<number>>();
 
 interface FieldProps extends FormFieldProps {
@@ -71,6 +77,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   },
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue b/io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue
index e8cce55c..9cb4c009 100644
--- a/io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/code-mirror/WCodeMirror.vue
@@ -20,26 +20,15 @@
         </div>
         <div ref="codemirrorContainerRef" :style="`width:100%; padding-top: ${lineNumber ? 4 : 2}px; overflow: auto;`"></div>
       </template>
-      <template v-if="!Tools.isEmpty(modelValue) && attrs.button" #append>
-        <q-btn
-          round
-          dense
-          flat
-          v-bind="attrs.button"
-          :style="{
-            content: '',
-            position: 'absolute',
-            bottom: '5px',
-            right: '5px',
-          }"
-          @click.stop.prevent="buttonClick(attrs.button)"
-        />
+      <template v-for="slotName in fieldMethods.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethods.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
       </template>
     </q-field>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, onUnmounted, watch } from 'vue';
+import { ref, useAttrs, onMounted, onUnmounted, watch, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { EditorView } from '@codemirror/view';
 import { EditorState, StateEffect, Compartment } from '@codemirror/state';
@@ -62,10 +51,12 @@ import Toolbar from '@/platform/components/math/toolbar/Toolbar.vue';
 
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const fieldRef = ref();
 const codemirrorContainerRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 let editorView = null;
 
@@ -127,6 +118,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
 });
 
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_: any) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue b/io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue
index 0fe82dfd..a162ab54 100644
--- a/io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/color/WColorInput.vue
@@ -51,17 +51,23 @@
           @click="restoreDefaultValue"
         ></q-btn>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
+import { ref, toRaw, computed, useAttrs, onBeforeMount, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const colorRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 const isShow = ref(false);
@@ -76,6 +82,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   restore: false,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     isShow.value = false;
     if (props['onUpdateValue']) {
diff --git a/io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue b/io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue
index b11b0620..c23e1cfc 100644
--- a/io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/color/WColorInputPalette.vue
@@ -56,18 +56,24 @@
           @click="restoreDefaultValue"
         ></q-btn>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
+import { ref, toRaw, computed, useAttrs, onBeforeMount, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
 import { quasarColors } from './quasarColors';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const colorRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 const isShow = ref(false);
@@ -82,6 +88,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   restore: false,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     modelValue.value = value_;
     isShow.value = false;
diff --git a/io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue b/io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue
index ef84f648..35dedb3a 100644
--- a/io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/cron/WCron.vue
@@ -55,11 +55,15 @@
           </q-popup-proxy>
         </q-btn>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import SecondSegment from './w-cron-segment/SecondSegment.vue';
 import MinuteSegment from './w-cron-segment/MinuteSegment.vue';
@@ -70,9 +74,11 @@ import WeekSegment from './w-cron-segment/WeekSegment.vue';
 import YearSegment from './w-cron-segment/YearSegment.vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const cronRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 const isShow = ref(false);
@@ -91,6 +97,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/date/WDate.vue b/io.sc.platform.core.frontend/src/platform/components/date/WDate.vue
index cbcf3843..a3101cf6 100644
--- a/io.sc.platform.core.frontend/src/platform/components/date/WDate.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/date/WDate.vue
@@ -29,18 +29,24 @@
           </q-popup-proxy>
         </q-icon>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs, watch } from 'vue';
+import { ref, useAttrs, watch, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const dateRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 interface FieldProps extends FormFieldProps {}
@@ -48,6 +54,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue b/io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue
index 96a382d8..f8d9527d 100644
--- a/io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/date/WDateRange.vue
@@ -30,18 +30,24 @@
           </q-popup-proxy>
         </q-icon>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs, computed } from 'vue';
+import { ref, useAttrs, computed, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const dateRangeRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<object>();
 
 interface FieldProps extends FormFieldProps {}
@@ -49,6 +55,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/file/WFile.vue b/io.sc.platform.core.frontend/src/platform/components/file/WFile.vue
index 01453397..c4fc05db 100644
--- a/io.sc.platform.core.frontend/src/platform/components/file/WFile.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/file/WFile.vue
@@ -20,17 +20,23 @@
       <template v-if="!fieldMethodsClass.getReadOnly(props, modelValue)" #append>
         <q-icon name="attachment" />
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-file>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const fileRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<File | Array<File>>();
 
 interface FieldProps extends FormFieldProps {
@@ -41,6 +47,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   type: 'file',
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/FormElement.vue b/io.sc.platform.core.frontend/src/platform/components/form/FormElement.vue
index fd566f48..81e98682 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/FormElement.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/FormElement.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-if="field.type === Constant.GROUP_TYPE">
-    <FormGroup v-if="showFormGroupComputed" v-bind="field" :fields="field.fields" :style="form.getFieldStyle(field)"></FormGroup>
+    <FormGroup v-if="showFormGroupComputed" v-bind="field" :fields="field.fields" :component-style="form.getFieldStyle(field)"></FormGroup>
   </template>
   <template v-else>
     <Field :field="props.field"></Field>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/FormField.ts b/io.sc.platform.core.frontend/src/platform/components/form/FormField.ts
index 303c4456..5ceefecc 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/FormField.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/form/FormField.ts
@@ -9,22 +9,73 @@ export interface FormFieldProps {
   readOnlyIf?: boolean | (() => void); // 是否只读
   disableIf?: boolean | (() => void); // 是否禁用
   rules?: Array<() => void>; // 验证规则集合
+  slot?: object; // 插槽集合
   onUpdateValue?: () => void; // 值改变事件函数
 }
 
 export abstract class FormFieldMethods {
-  // 值改变事件
+  /**
+   * 是否是在模板中配置的插槽
+   */
+  isTemplateSlot?: boolean;
+  /**
+   * 用户配置的插槽名称集合
+   */
+  slotNames?: string[];
+  /**
+   * 值改变事件
+   * @param value_
+   */
   abstract updateValue(value_): void;
-  // 验证方法
+  /**
+   * 验证方法
+   */
   abstract validate(): Promise<boolean> | boolean;
-  // 设置值
+  /**
+   * 设置值
+   * @param value_
+   */
   abstract setValue(value_): void;
-  // 获取值
+  /**
+   * 获取值
+   */
   abstract getValue(): any;
-  // 清空值
+  /**
+   * 清空值
+   */
   abstract clearValue(): void;
 
-  // 获取验证规则集结果
+  /**
+   * 获取插槽类型
+   * @param slots
+   * @returns
+   */
+  getSlotType(slots: any) {
+    return Object.keys(slots).length > 0;
+  }
+
+  /**
+   * 获取插槽名称数组
+   * @param slots
+   * @param props
+   */
+  getSlotNames(slots: any, props: any) {
+    if (Object.keys(slots).length > 0) {
+      return Object.keys(slots);
+    } else if (props['slot']) {
+      return Object.keys(props['slot']);
+    }
+    return [];
+  }
+
+  /**
+   * 获取验证规则集结果
+   * @param props_
+   * @param value_
+   * @param componentRef_
+   * @param defaultValue_
+   * @returns
+   */
   getRules(props_, value_, componentRef_, defaultValue_) {
     let result = props_.rules || <any>[];
     if (!Tools.isEmpty(defaultValue_)) {
@@ -42,8 +93,12 @@ export abstract class FormFieldMethods {
     }
     return result;
   }
-
-  // 获取是否必填结果
+  /**
+   * 获取是否必填结果
+   * @param props_
+   * @param value_
+   * @returns
+   */
   getRequired(props_, value_) {
     if (!Tools.isEmpty(props_.requiredIf)) {
       if (typeof props_.requiredIf === 'boolean') {
@@ -54,7 +109,12 @@ export abstract class FormFieldMethods {
     }
     return false;
   }
-  // 获取是否显示结果
+  /**
+   * 获取是否显示结果
+   * @param props_
+   * @param value_
+   * @returns
+   */
   getShow(props_, value_) {
     if (!Tools.isEmpty(props_.showIf)) {
       if (typeof props_.showIf === 'boolean') {
@@ -65,7 +125,12 @@ export abstract class FormFieldMethods {
     }
     return true;
   }
-  // 获取是否只读结果
+  /**
+   * 获取是否只读结果
+   * @param props_
+   * @param value_
+   * @returns
+   */
   getReadOnly(props_, value_) {
     if (props_.form && props_.form.getStatus() === 'view') {
       return true;
@@ -79,7 +144,12 @@ export abstract class FormFieldMethods {
     }
     return false;
   }
-  // 获取是否禁用结果
+  /**
+   * 获取是否禁用结果
+   * @param props_
+   * @param value_
+   * @returns
+   */
   getDisable(props_, value_) {
     if (!Tools.isEmpty(props_.disableIf)) {
       if (typeof props_.disableIf === 'boolean') {
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue b/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue
index ba499efc..6a14245a 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/FormGroup.vue
@@ -1,23 +1,34 @@
 <template>
-  <div>
-    <q-card flat bordered>
-      <q-item dense style="padding: 0px">
-        <q-item-section>
-          <q-item-label header :style="headerStyleComputed">
-            <q-icon v-if="props.icon" :name="props.icon" size="sm" v-bind="props.iconAttrs" />
-            <span style="margin-left: 5px">{{ label }}</span>
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-      <q-separator />
-      <q-card-section style="padding: 8px">
-        <div class="grid" :style="layoutStyleComputed">
-          <template v-for="(field, index) in fields as any" :key="String(index)">
-            <FormElement :field="field"></FormElement>
-          </template>
+  <div :style="componentStyle">
+    <div v-if="cardModeComputed">
+      <q-card flat bordered>
+        <q-item dense style="padding: 0px">
+          <q-item-section>
+            <q-item-label header :style="cardModeHeaderStyleComputed">
+              <q-icon v-if="props.icon" :name="props.icon" size="sm" v-bind="props.iconAttrs" />
+              <span style="margin-left: 5px">{{ label }}</span>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-separator />
+        <q-card-section style="padding: 8px">
+          <div :class="props.class" :style="contentStyleComputed">
+            <template v-for="(field, index) in fields as any" :key="String(index)">
+              <div :class="field.class" :style="formElementDivStyle(field)">
+                <FormElement :field="field"></FormElement>
+              </div>
+            </template>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div v-else :class="props.class" :style="contentStyleComputed">
+      <template v-for="(field, index) in fields as any" :key="String(index)">
+        <div :class="field.class" :style="formElementDivStyle(field)">
+          <FormElement :field="field"></FormElement>
         </div>
-      </q-card-section>
-    </q-card>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -26,6 +37,7 @@ import { inject, computed } from 'vue';
 import { useQuasar } from 'quasar';
 import { Tools } from '@/platform';
 import { Form } from './ts/Form';
+import { Constant } from './ts/Constant';
 import FormElement from './FormElement.vue';
 
 const $q = useQuasar();
@@ -53,16 +65,35 @@ const colors = [red, orange, yellow, green, teal, blue, purple, grey];
 const colorJson = { red, orange, yellow, green, teal, blue, purple, grey };
 
 const props = defineProps({
-  // 分组标签名
+  // 分组模式
+  mode: { type: String, default: Constant.FORM_GROUP_MODE.CONTAINER },
+  // card模式-分组标签名
   label: { type: String, default: '' },
-  // 分组头背景色
-  color: { type: String, default: undefined },
-  // 分组图标
+  // card模式-分组头背景色
+  headerBgColor: { type: String, default: undefined },
+  // card模式-分组图标
   icon: { type: String, default: undefined },
-  // 分组图标其余属性
+  // card模式-分组图标其余属性
   iconAttrs: { type: Object, default: undefined },
-  // 分组内一行放几个字段，与 form 保持一致，可配置具体值，也可配置屏幕断点显示值
+  // 分组div`class`，card模式下作用在内容块div上，container模式下作用在整个分组div上
+  class: { type: String, default: undefined },
+  // 分组div样式，card模式下作用在内容块div上，container模式下作用在整个分组div上
+  style: { type: String, default: undefined },
+  // 内置分组div快速布局配置，支持left、right、center、between、form；
+  // 解释：
+  // left = display: flex; justify-content: flex-start;
+  // right = display: flex; justify-content: flex-end;
+  // center = display: flex; justify-content: center;
+  // between = display: flex; justify-content: space-between;
+  // form = 与 form 相同的布局方式（每行放置固定列数）;
+  // 注意：当class、style、align都配置的情况下，首先在div上配置class与style，align对应的样式会追加到style中
+  align: { type: String, default: undefined },
+  // 分组内一行放几个字段，仅 `align` 为 `form` 时有效，与 form 保持一致，可配置具体值，也可配置屏幕断点显示值
   colsNum: { type: [Number, Object], default: 0 },
+  // 使用align配置布局时的x轴间隙（像素点）
+  xGap: { type: Number, default: 8 },
+  // 使用align配置布局时的y轴间隙（像素点）
+  yGap: { type: Number, default: 4 },
   // 字段集合
   fields: {
     type: Array,
@@ -70,9 +101,75 @@ const props = defineProps({
       return [];
     },
   },
+  // 组件样式(组件嵌套最外层的样式属性，不提供给用户配置)
+  componentStyle: {
+    type: Object,
+    default: undefined,
+  },
+});
+/**
+ * 当前屏幕断点一列应该显示的元素个数
+ */
+const screenColsNumComputed = computed(() => {
+  if (typeof props.colsNum === 'number' && props.colsNum > 0) {
+    return props.colsNum;
+  } else if (typeof props.colsNum === 'object') {
+    const screen = { ...form.cm.screenCols, ...props.colsNum };
+    return screen[$q.screen.name];
+  }
+  return form.cm.screenCols[$q.screen.name];
+});
+/**
+ * 使用form布局时的样式
+ */
+const useFormLayoutStyleComputed = computed(() => {
+  const style = { display: 'grid' };
+  if (typeof props.colsNum === 'number' && props.colsNum > 0) {
+    style['grid-template-columns'] = 'repeat(' + props.colsNum + ', minmax(0, 1fr))';
+  } else {
+    style['grid-template-columns'] = 'repeat(' + screenColsNumComputed.value + ', minmax(0, 1fr))';
+  }
+  style['column-gap'] = form.props.xGap + 'px';
+  style['row-gap'] = form.props.yGap + 'px';
+  return style;
 });
 
-const headerStyleComputed = computed(() => {
+const jsonStyle2String = (json: any) => {
+  return Object.entries(json)
+    .map(([k, v]) => `${k}:${v}`)
+    .join(';');
+};
+
+/**
+ * 快速布局对应的样式
+ */
+const alignJson = {
+  left: {
+    value: 'left',
+    style: 'display:flex; justify-content: flex-start;' + 'column-gap: ' + props.xGap + 'px;' + 'row-gap: ' + props.yGap + 'px;',
+  },
+  right: {
+    value: 'right',
+    style: 'display:flex; justify-content: flex-end;' + 'column-gap: ' + props.xGap + 'px;' + 'row-gap: ' + props.yGap + 'px;',
+  },
+  center: {
+    value: 'center',
+    style: 'display:flex; justify-content: center;' + 'column-gap: ' + props.xGap + 'px;' + 'row-gap: ' + props.yGap + 'px;',
+  },
+  between: {
+    value: 'between',
+    style: 'display:flex; justify-content: space-between;' + 'column-gap: ' + props.xGap + 'px;' + 'row-gap: ' + props.yGap + 'px;',
+  },
+  form: {
+    value: 'form',
+    style: jsonStyle2String(useFormLayoutStyleComputed.value),
+  },
+};
+
+/**
+ * card模式标题块样式
+ */
+const cardModeHeaderStyleComputed = computed(() => {
   const style = {
     // 垂直居中
     display: 'flex',
@@ -81,16 +178,16 @@ const headerStyleComputed = computed(() => {
     color: '#000',
     padding: '5px',
   };
-  if (props.color) {
+  if (props.headerBgColor) {
     // 背景颜色
-    if (props.color === 'auto') {
+    if (props.headerBgColor === 'auto') {
       const index = form.fieldArray.value.findIndex((item) => item.label === props.label);
       let colorIndex = index > -1 && index < colors.length ? index : getRandomInt();
       style['background-color'] = colors[colorIndex];
-    } else if (Tools.hasOwnProperty(colorJson, props.color)) {
-      style['background-color'] = colorJson[props.color];
+    } else if (Tools.hasOwnProperty(colorJson, props.headerBgColor)) {
+      style['background-color'] = colorJson[props.headerBgColor];
     } else {
-      style['background-color'] = props.color;
+      style['background-color'] = props.headerBgColor;
     }
   }
   return style;
@@ -103,25 +200,36 @@ const getRandomInt = () => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
 
-const screenColsNumComputed = computed(() => {
-  if (typeof props.colsNum === 'number' && props.colsNum > 0) {
-    return props.colsNum;
-  } else if (typeof props.colsNum === 'object') {
-    const screen = { ...form.cm.screenCols, ...props.colsNum };
-    return screen[$q.screen.name];
-  }
-  return form.cm.screenCols[$q.screen.name];
+/**
+ * 当前为card模式
+ */
+const cardModeComputed = computed(() => {
+  return props.mode === Constant.FORM_GROUP_MODE.CARD;
 });
 
-const layoutStyleComputed = computed(() => {
-  const style = {};
-  if (typeof props.colsNum === 'number' && props.colsNum > 0) {
-    style['grid-template-columns'] = 'repeat(' + props.colsNum + ', minmax(0, 1fr))';
-  } else {
-    style['grid-template-columns'] = 'repeat(' + screenColsNumComputed.value + ', minmax(0, 1fr))';
+/**
+ * 分组下内容块使用的样式
+ */
+const contentStyleComputed = computed(() => {
+  let styleStr = '';
+  if (props.style) {
+    // 初始化用户配置的样式，如果没有以分号结尾，增加分号
+    styleStr = props.style + (props.style.trim().endsWith(';') ? '' : ';');
   }
-  style['column-gap'] = form.props.xGap + 'px';
-  style['row-gap'] = form.props.yGap + 'px';
-  return style;
+  if (props.align && Tools.hasOwnProperty(alignJson, props.align)) {
+    styleStr += alignJson[props.align]['style'];
+  }
+  return styleStr;
 });
+
+const formElementDivStyle = (field: any) => {
+  let styleStr = '';
+  if (field.style) {
+    styleStr = field.style + (field.style.trim().endsWith(';') ? '' : ';');
+  }
+  if (props.align && props.align === alignJson.form.value) {
+    styleStr += jsonStyle2String(form.getFieldStyle(field));
+  }
+  return styleStr;
+};
 </script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts b/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts
index fb9b171c..0c23bfe3 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/form/ts/Constant.ts
@@ -1,3 +1,14 @@
+class FormGroupMode {
+  /**
+   * 卡片模式，可以配置 `icon` 与 `label`
+   */
+  static CARD = 'card';
+  /**
+   * 容器模式，无任何额外样式，仅在 `fields` 元素集外层嵌套一个 `div`
+   */
+  static CONTAINER = 'container';
+}
+
 /**
  * 常量
  */
@@ -8,7 +19,12 @@ export class Constant {
   static STATUS_ADD = 'add';
 
   /**
-   * 用于分组的字段类型
+   * 用于分组的类型
    */
   static GROUP_TYPE = 'w-form-group';
+
+  /**
+   * `w-form-group`组件的模式
+   */
+  static FORM_GROUP_MODE = FormGroupMode;
 }
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/ts/Form.ts b/io.sc.platform.core.frontend/src/platform/components/form/ts/Form.ts
index f41353b8..cc908e51 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/ts/Form.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/form/ts/Form.ts
@@ -102,7 +102,7 @@ export class Form {
       } else {
         if (field.colSpan === 'full') {
           // col-span-${screenColsNumComputed.value}
-          style['grid-column'] = `span ${screenColsNum} / span ${screenColsNum}`;
+          style['grid-column'] = `1 / -1`;
         } else {
           if (field.colSpan && screenColsNum >= field.colSpan) {
             // col-span-${field.colSpan}
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/TdContent.vue b/io.sc.platform.core.frontend/src/platform/components/grid/TdContent.vue
index 75b327e5..1d3d4979 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/TdContent.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/TdContent.vue
@@ -22,10 +22,8 @@ import { Constant, GridTools } from './ts/index';
 const tools = <GridTools>inject('tools');
 const props = defineProps({
   value: {
-    type: [Object, String, Number],
-    default: () => {
-      return '';
-    },
+    type: null,
+    default: '',
   },
   col: {
     type: Object,
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
index 4e307a9b..72cd5992 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -108,6 +108,15 @@ watch(
   },
 );
 
+// 按钮监听，当按钮发生变化后重新设置props
+watch(
+  () => props.toolbarActions,
+  (newVal, oldVal) => {
+    tools.props = props;
+    getTopRef()?.handleToolbarActions();
+  },
+);
+
 eventBus.on('onLocaleChanged', (local) => {
   nextTick(() => {
     topRef.value?.handleQueryFormShowField();
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue b/io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue
index 4f672945..356a15d5 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/extra/Editor.vue
@@ -105,8 +105,6 @@ const addData = (dialogFormData) => {
   } else {
     tools.apiFM.localMode.addLocalData(dialogFormData, undefined);
   }
-  //事件触发
-  tools.em.afterEditorDataSubmit({ grid: tools.instance, data: dialogFormData });
 };
 const updateData = (dialogFormData) => {
   const selected = tools.apiFM.getData.getSelectedRow();
@@ -121,8 +119,6 @@ const updateData = (dialogFormData) => {
     dialogFormData['children'] = selected['children'];
   }
   tools.apiFM.localMode.updateLocalData(dialogFormData);
-  //事件触发
-  tools.em.afterEditorDataSubmit({ grid: tools.instance, data: dialogFormData });
 };
 
 const localModeSave = (dialogFormData: any, formStatus: string, closeDialog: boolean) => {
@@ -132,6 +128,8 @@ const localModeSave = (dialogFormData: any, formStatus: string, closeDialog: boo
     updateData(dialogFormData);
   }
   saveLoading.value = false;
+  //事件触发
+  tools.em.afterEditorDataSubmit(dialogFormData);
   if (closeDialog) {
     dialogRef.value.hide();
   }
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts
index fb7c3907..c30a30d0 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/RequestApi.ts
@@ -130,7 +130,7 @@ export class RequestApi extends Base {
           callback(resp);
         }
         NotifyManager.info($t('tip.operationSuccess') || '');
-        this.tools?.em.afterEditorDataSubmit({ grid: this.instance, data: resp.data });
+        this.tools?.em.afterEditorDataSubmit(resp.data);
       })
       .catch((error) => {
         if (error?.code === 1001) {
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts
index df5c7498..09c1dc5d 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/types/PropsType.ts
@@ -58,7 +58,7 @@ export type PropsType = {
   /**
    * 自定义获取数据函数，若表格内置的查询参数或方式（GET、POST）等不满足使用场景，可使用该函数自定义进行查询，只需返回的结果结构与内置查询一致即可。
    */
-  customFetch: Function | undefined,
+  customFetch?: Function | undefined,
   /**
    * 表格整体紧凑模式
    */
@@ -170,7 +170,7 @@ export type PropsType = {
   /**
    * 分组显示内容，仅 alone 模式有效，支持字符串 `format` 使用分组字段列定义中配置的format进行内容显示处理，函数支持自定义显示内容
    */
-  groupByTitle: string | Function,
+  groupByTitle?: string | Function,
   /**
    * 表格追加行，添加到当前表格数据行尾，可添加多行，支持跨行跨列配置，用于添加合计或者额外信息。
    */
diff --git a/io.sc.platform.core.frontend/src/platform/components/icon/WIcon.vue b/io.sc.platform.core.frontend/src/platform/components/icon/WIcon.vue
index fcfc0872..08697062 100644
--- a/io.sc.platform.core.frontend/src/platform/components/icon/WIcon.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/icon/WIcon.vue
@@ -88,11 +88,15 @@
           @click="restoreDefaultValue"
         ></q-btn>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
+import { ref, toRaw, computed, useAttrs, onBeforeMount, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
@@ -103,9 +107,11 @@ import eva from './icons/eva-icons.json';
 import fontawesomeBrands from './icons/fontawesome-v6-icons-brands.json';
 import fontawesomeRegular from './icons/fontawesome-v6-icons-regular.json';
 import fontawesomeSolid from './icons/fontawesome-v6-icons-solid.json';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const iconRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 const leftWidthRef = ref(30);
@@ -123,6 +129,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   restore: false,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/number/WInteger.vue b/io.sc.platform.core.frontend/src/platform/components/number/WInteger.vue
index 5a49385f..a7d701ff 100644
--- a/io.sc.platform.core.frontend/src/platform/components/number/WInteger.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/number/WInteger.vue
@@ -16,22 +16,30 @@
       @update:model-value="fieldMethodsClass.updateValue"
     >
       <template #label><w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { FormValidators } from '@/platform/components';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const numberRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<number>();
 
 interface FieldProps extends FormFieldProps {}
 const props = withDefaults(defineProps<FieldProps>(), { showIf: true }); // 使用withDefaults设置属性默认值
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   // 继承FieldMethods抽象类，该类中包含必须实现的抽象方法并提供了一些获取计算后的是否必填，是否显示等静态方法
   updateValue = (value_) => {
     const floatValue = parseInt(value_);
diff --git a/io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue b/io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue
index db06847a..ca032bc6 100644
--- a/io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/number/WNumber.vue
@@ -16,18 +16,24 @@
       @update:model-value="fieldMethodsClass.updateValue"
     >
       <template #label><w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, computed } from 'vue';
+import { ref, useAttrs, computed, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormValidators } from '@/platform/components';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const numberRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<number>();
 
 interface FieldProps extends FormFieldProps {
@@ -36,6 +42,8 @@ interface FieldProps extends FormFieldProps {
 }
 const props = withDefaults(defineProps<FieldProps>(), { precision: undefined, showIf: true }); // 使用withDefaults设置属性默认值
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   // 继承FieldMethods抽象类，该类中包含必须实现的抽象方法并提供了一些获取计算后的是否必填，是否显示等静态方法
   updateValue = (value_) => {
     const floatValue = parseFloat(value_);
diff --git a/io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue b/io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue
index deb04886..750ad45e 100644
--- a/io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/password/WPassword.vue
@@ -16,17 +16,23 @@
       @update:model-value="fieldMethodsClass.updateValue"
     >
       <template #label><w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const pwdRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 interface FieldProps extends FormFieldProps {}
@@ -34,6 +40,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue b/io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue
index 63faacea..2627cbf2 100644
--- a/io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/position/WPosition.vue
@@ -57,17 +57,23 @@
           @click="restoreDefaultValue"
         ></q-btn>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, toRaw, computed, useAttrs, onBeforeMount } from 'vue';
+import { ref, toRaw, computed, useAttrs, onBeforeMount, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const positionRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 const positionList = ['top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'];
@@ -83,6 +89,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   restore: false,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     isShow.value = false;
     modelValue.value = value_;
diff --git a/io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue b/io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue
index 11df1e63..b12590bf 100644
--- a/io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/radio/WRadio.vue
@@ -59,17 +59,23 @@
           @click.stop.prevent="fieldMethodsClass.clearValue"
         ></q-btn>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-field>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const radioRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string | boolean | number>();
 
 interface FieldProps extends FormFieldProps {
@@ -93,6 +99,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   },
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue
index 724f258d..0011232e 100644
--- a/io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WGridSelect.vue
@@ -50,19 +50,25 @@
       <template v-if="counter" #counter>
         <div>{{ modelValue?.length }}</div>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-field>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useAttrs, toRaw, watch, onMounted, nextTick } from 'vue';
+import { ref, computed, useAttrs, toRaw, watch, onMounted, nextTick, useSlots } from 'vue';
 import { Tools, axios } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const textSelectRef = ref();
 const gridRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string | Array<string>>(); // 模型值
 const modelDisplayValue = ref(''); // 模型显示值（通过下拉按钮打开表格后选择的）
 const customDisplayValue = ref(''); // 客户自定义显示值（通过setDisplayValue设置的）
@@ -103,6 +109,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   selectableIf: undefined,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   // 组件值改变事件调用的方法
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue
index 8f54be73..79516922 100644
--- a/io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WInputSelect.vue
@@ -35,18 +35,24 @@
       <template v-if="counter" #counter>
         <div>{{ modelValue?.length }}</div>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onBeforeMount, ref, useAttrs, watch, useSlots } from 'vue';
 import { Tools } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
-import { onBeforeMount, ref, useAttrs, watch } from 'vue';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const textSelectRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 const modelDisplayValue = ref(''); // 模型显示值
 
@@ -61,6 +67,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   counter: false, // 显示右下角计数器
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue
index 8a367b0a..2f9382ac 100644
--- a/io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WOrgSelect.vue
@@ -60,18 +60,24 @@
       <template v-if="counter" #counter>
         <div>{{ modelValue?.length }}</div>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useAttrs, toRaw, watch, onMounted, onBeforeMount } from 'vue';
+import { ref, computed, useAttrs, toRaw, watch, onMounted, onBeforeMount, useSlots } from 'vue';
 import { Tools, axios, Environment, Formater } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const textSelectRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string | Array<string>>();
 const modelObjectValue = ref(<any>[]); // 模型值包含实际值与显示值的对象集合。
 const orgGridRef = ref();
@@ -141,6 +147,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   queryCriteria: undefined,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WRoleSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WRoleSelect.vue
index 260dd469..7fbd2338 100644
--- a/io.sc.platform.core.frontend/src/platform/components/select/WRoleSelect.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WRoleSelect.vue
@@ -74,18 +74,24 @@
       <template v-if="counter" #counter>
         <div>{{ modelValue?.length }}</div>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useAttrs, toRaw, watch, onMounted } from 'vue';
+import { ref, computed, useAttrs, toRaw, watch, onMounted, useSlots } from 'vue';
 import { Tools, axios, Environment, Formater } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const textSelectRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string | Array<string>>();
 const modelObjectValue = ref(<any>[]); // 模型值包含实际值与显示值的对象集合。
 const roleGridRef = ref();
@@ -123,6 +129,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   queryCriteria: undefined, // 角色列表criteria查询条件
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue
index 73e1e690..982892e6 100644
--- a/io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WSelect.vue
@@ -16,17 +16,23 @@
       @update:model-value="fieldMethodsClass.updateValue"
     >
       <template #label><w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-select>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
+import { ref, useAttrs, useSlots } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const selectRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string | number | boolean | Array<string> | Array<number> | Array<boolean>>();
 
 interface FieldProps extends FormFieldProps {}
@@ -34,6 +40,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue b/io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue
index ad32dc2d..1c334498 100644
--- a/io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/select/WUserSelect.vue
@@ -107,18 +107,24 @@
       <template v-if="counter" #counter>
         <div>{{ modelValue?.length }}</div>
       </template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, useAttrs, toRaw, watch, onMounted, onBeforeMount } from 'vue';
+import { ref, reactive, computed, useAttrs, toRaw, watch, onMounted, onBeforeMount, useSlots } from 'vue';
 import { Tools, axios, Environment, Formater, $t, SessionManager } from '@/platform';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const textSelectRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string | Array<string>>();
 const modelObjectValue = ref(<any>[]); // 模型值包含实际值与显示值的对象集合。
 const userGridRef = ref();
@@ -184,6 +190,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   roleQueryCriteria: undefined, // 角色查询条件
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/text/WText.vue b/io.sc.platform.core.frontend/src/platform/components/text/WText.vue
index 78ff3c0e..3f13a320 100644
--- a/io.sc.platform.core.frontend/src/platform/components/text/WText.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/text/WText.vue
@@ -15,16 +15,22 @@
       @update:model-value="fieldMethodsClass.updateValue"
     >
       <template #label><w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs, computed } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { ref, useAttrs, useSlots } from 'vue';
 import { FormFieldMethods } from '../form/FormField';
+import FormElementSlot from '../form/FormElementSlot.vue';
 
 const textRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 interface FieldProps extends FormFieldProps {}
@@ -32,6 +38,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({
diff --git a/io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue b/io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue
index 465611f8..e105a96e 100644
--- a/io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/textarea/WTextarea.vue
@@ -15,26 +15,23 @@
       @update:model-value="fieldMethodsClass.updateValue"
     >
       <template #label><w-label :required="fieldMethodsClass.getRequired(props, modelValue)" :label="attrs.label"></w-label></template>
-      <template #default><slot></slot></template>
-      <template #prepend><slot name="prepend"></slot></template>
-      <template #append><slot name="append"></slot></template>
-      <template #before><slot name="before"></slot></template>
-      <template #after><slot name="after"></slot></template>
-      <template #error><slot name="error"></slot></template>
-      <template #hint><slot name="hint"></slot></template>
-      <template #counter><slot name="counter"></slot></template>
-      <template #loading><slot name="loading"></slot></template>
+      <template v-for="slotName in fieldMethodsClass.slotNames" :key="slotName" #[slotName]>
+        <slot v-if="fieldMethodsClass.isTemplateSlot" :name="slotName"></slot>
+        <FormElementSlot v-else :slot-name="slotName" :slot-content="props['slot'][slotName]"></FormElementSlot>
+      </template>
     </q-input>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from 'vue';
 import { FormFieldProps } from '@/platform/components/form/FormField.ts';
+import { ref, useAttrs, useSlots } from 'vue';
+import FormElementSlot from '../form/FormElementSlot.vue';
 import { FormFieldMethods } from '../form/FormField';
 
 const textareaRef = ref();
 const attrs = useAttrs();
+const slots = useSlots();
 const modelValue = defineModel<string>();
 
 interface FieldProps extends FormFieldProps {}
@@ -42,6 +39,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
   showIf: true,
 });
 class FieldMethods extends FormFieldMethods {
+  isTemplateSlot = this.getSlotType(slots);
+  slotNames = this.getSlotNames(slots, props);
   updateValue = (value_) => {
     if (props['onUpdateValue']) {
       props['onUpdateValue']({