@tmagic/form 1.8.0-beta.7 → 1.8.0-manmanyu.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.7",
+  "version": "1.8.0-manmanyu.10",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -50,11 +50,11 @@
     "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "vue": "^3.5.34",
+    "vue": "^3.5.38",
     "typescript": "^6.0.3",
-    "@tmagic/utils": "1.8.0-beta.7",
-    "@tmagic/design": "1.8.0-beta.7",
-    "@tmagic/form-schema": "1.8.0-beta.7"
+    "@tmagic/design": "1.8.0-manmanyu.10",
+    "@tmagic/utils": "1.8.0-manmanyu.10",
+    "@tmagic/form-schema": "1.8.0-manmanyu.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -1,6 +1,10 @@
 <template>
   <TMagicForm
-    class="m-form"
+    :class="[
+      'm-form',
+      effectiveTheme ? `m-form--${effectiveTheme}` : '',
+      effectiveTheme ? `m-theme--${effectiveTheme}` : '',
+    ]"
     ref="tMagicForm"
     :model="values"
     :label-width="labelWidth"
@@ -32,10 +36,10 @@
 </template>
 
 <script setup lang="ts">
-import { provide, reactive, ref, shallowRef, toRaw, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, inject, provide, reactive, ref, shallowRef, toRaw, useTemplateRef, watch, watchEffect } from 'vue';
 import { cloneDeep, isEqual } from 'lodash-es';
 
-import { TMagicForm, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
+import { M_THEME_KEY, TMagicForm, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { setValueByKeyPath } from '@tmagic/utils';
 
 import Container from './containers/Container.vue';
@@ -107,6 +111,15 @@ const props = withDefaults(
      * 通过 provide 下发，对整棵表单的所有层级 Container 生效，只需在 MForm 这一层传一次。
      */
     selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+    /**
+     * 主题名称：对应 `packages/form/src/theme/themes/<theme>/index.scss` 的目录名。
+     *
+     * 设置后会在表单根元素上追加 `m-form--<theme>` 修饰类，配合按需引入
+     * `@tmagic/form/dist/themes/<theme>.css` 即可启用主题样式。
+     *
+     * 例如：`<MForm theme="magic-admin" />` + `import '@tmagic/form/dist/themes/magic-admin.css'`。
+     */
+    theme?: string;
   }>(),
   {
     config: () => [],
@@ -134,6 +147,27 @@ const fields = new Map<string, any>();
 
 const requestFuc = getConfig('request') as Function;
 
+/**
+ * 当前表单生效的主题名称：
+ * - 优先用本组件自己的 `props.theme`；
+ * - 没设置时回退到最近祖先 `<MEditor>` / `<MForm>` provide 的主题，便于内嵌于编辑器
+ *   时自动跟随外层主题，无需在每个 `MForm` 上重复传 `theme`。
+ *
+ * 同时把合并后的值再 provide 出去（见下方 `provide(M_THEME_KEY, ...)`），让 form 子树
+ * 里再嵌套的 portal 组件（`TMagicPopover` 等）依然能拿到非空主题。
+ */
+const ancestorTheme = inject(M_THEME_KEY, null);
+const effectiveTheme = computed(() => props.theme || ancestorTheme?.value || '');
+
+/**
+ * 拼到 `formState.popperClass` 上的主题修饰类（仅 `m-theme--<theme>`，
+ * 不带 `m-form` / `m-editor` 前缀，因为 Element Plus 弹层节点本身既不是 form 也不是 editor）。
+ *
+ * 这条类会随所有读 `mForm.popperClass` 的字段（Select / DateTime / Cascader 等）下发到
+ * Element Plus 的 `popper-class`，让 portal 节点也命中 `m-theme--<theme>` 上的 CSS 变量。
+ */
+const themeClass = computed(() => (effectiveTheme.value ? `m-theme--${effectiveTheme.value}` : ''));
+
 /**
  * formState 实现说明：
  *
@@ -150,13 +184,21 @@ const requestFuc = getConfig('request') as Function;
  *      把最新值刷进 formState。
  *    - accessor 描述符（`{ get stage() { return ... } }`）按原样写入，调用方可以控制
  *      读时求值，每次读取都会重新执行 getter。
+ *
+ * 4. `popperClass` 会自动拼接 `themeClass`：调用方传入的 `popperClass` + 当前主题
+ *    修饰类（含祖先 `<MEditor>` provide 的主题）。这样所有透传到 Element Plus 弹层
+ *    `popper-class` 的字段（Select / DateTime / Cascader 等）能自带主题作用域。
  */
 const formState: FormState = reactive<FormState>({
   get keyProp() {
     return props.keyProp;
   },
   get popperClass() {
-    return props.popperClass;
+    const userClass = props.popperClass ?? '';
+    const tc = themeClass.value;
+    if (!userClass) return tc;
+    if (!tc) return userClass;
+    return `${userClass} ${tc}`;
   },
   get config() {
     return props.config;
@@ -243,6 +285,13 @@ watchEffect(async (onCleanup) => {
 
 provide('mForm', formState);
 
+/**
+ * 把生效主题（自身或祖先）再 provide 出去，供 form 子树内含 `Teleport` 的组件
+ * （如 `TMagicPopover`）在传送目标上挂 `m-theme--<theme>` 类。
+ * 详见 `@tmagic/design/theme.ts`。
+ */
+provide(M_THEME_KEY, effectiveTheme);
+
 // 对比相关配置单独通过 provide 下发，所有层级的 Container 通过 inject 获取，无需逐层透传 prop。
 // 用 getter 对象保证读取时回到最新的 props 值，维持响应式。
 provide(FORM_DIFF_CONFIG_KEY, {

package/src/FormDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <TMagicDialog
     v-model="dialogVisible"
-    class="m-form-dialog"
+    :class="['m-form-dialog', effectiveTheme ? `m-theme--${effectiveTheme}` : '']"
     top="20px"
     append-to-body
     :title="title"
@@ -32,6 +32,7 @@
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
         :extend-state="extendState"
+        :theme="effectiveTheme"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -64,9 +65,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, inject, provide, ref } from 'vue';
 
-import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
+import { M_THEME_KEY, TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
 import { ContainerChangeEventData, FormConfig, FormState, FormValue, StepConfig } from './schema';
@@ -98,6 +99,12 @@ const props = withDefaults(
     showCancel?: boolean;
     /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 主题名。优先级：传入 `theme` prop > 祖先 `provide(M_THEME_KEY)` > 空串。
+     * 计算结果会再次 `provide` 出去，使得 Dialog 被 Teleport 到 body 后，内部子树
+     * （包括 `MForm` 以及更深的 popover / dropdown）仍能拿到主题。
+     */
+    theme?: string;
   }>(),
   {
     config: () => [],
@@ -111,6 +118,10 @@ const props = withDefaults(
   },
 );
 
+const ancestorTheme = inject(M_THEME_KEY, null);
+const effectiveTheme = computed(() => props.theme || ancestorTheme?.value || '');
+provide(M_THEME_KEY, effectiveTheme);
+
 const emit = defineEmits(['close', 'submit', 'error', 'change']);
 
 const form = ref<InstanceType<typeof Form>>();

package/src/FormDrawer.vue

@@ -1,8 +1,8 @@
 <template>
   <TMagicDrawer
-    class="m-form-drawer"
+    :class="['m-form-drawer', effectiveTheme ? `m-theme--${effectiveTheme}` : '']"
     ref="drawer"
-    v-model="visible"
+    v-model="dialogVisible"
     :title="title"
     :close-on-press-escape="closeOnPressEscape"
     :append-to-body="true"
@@ -16,7 +16,7 @@
     @close="closeHandler"
     @closed="closedHandler"
   >
-    <div v-if="visible" ref="drawerBody" class="m-drawer-body">
+    <div v-if="dialogVisible" ref="drawerBody" class="m-drawer-body">
       <Form
         ref="form"
         :size="size"
@@ -29,6 +29,7 @@
         :inline="inline"
         :prevent-submit-default="preventSubmitDefault"
         :extend-state="extendState"
+        :theme="effectiveTheme"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -55,18 +56,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { computed, inject, provide, ref, watchEffect } from 'vue';
 
-import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
+import { M_THEME_KEY, TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
 
 import Form from './Form.vue';
 import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from './schema';
 
 defineOptions({
-  name: 'MFormDialog',
+  name: 'MFormDrawer',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     config?: FormConfig;
     values?: Object;
@@ -86,6 +87,12 @@ withDefaults(
     beforeClose?: (_done: (_cancel?: boolean) => void) => void;
     /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 主题名。优先级：传入 `theme` prop > 祖先 `provide(M_THEME_KEY)` > 空串。
+     * 计算结果会再次 `provide` 出去，使得 Drawer 被 Teleport 到 body 后，内部子树
+     * （包括 `MForm` 以及更深的 popover / dropdown）仍能拿到主题。
+     */
+    theme?: string;
   }>(),
   {
     closeOnPressEscape: true,
@@ -95,12 +102,16 @@ withDefaults(
   },
 );
 
+const ancestorTheme = inject(M_THEME_KEY, null);
+const effectiveTheme = computed(() => props.theme || ancestorTheme?.value || '');
+provide(M_THEME_KEY, effectiveTheme);
+
 const emit = defineEmits(['close', 'closed', 'submit', 'error', 'change', 'open', 'opened']);
 
 const drawer = ref<InstanceType<typeof TMagicDrawer>>();
 const form = ref<InstanceType<typeof Form>>();
 const drawerBody = ref<HTMLDivElement>();
-const visible = ref(false);
+const dialogVisible = ref(false);
 const saveFetch = ref(false);
 const bodyHeight = ref(0);
 
@@ -141,25 +152,42 @@ const closedHandler = () => {
 };
 
 const show = () => {
-  visible.value = true;
+  dialogVisible.value = true;
 };
 
 const hide = () => {
-  visible.value = false;
+  dialogVisible.value = false;
+};
+const close = () => {
+  dialogVisible.value = false;
+};
+const cancel = () => {
+  hide();
 };
-
 /** 用于关闭 Drawer, 该方法会调用传入的 before-close 方法 */
 const handleClose = () => {
   drawer.value?.handleClose();
 };
 
+const save = async () => {
+  try {
+    const changeRecords = [...(form.value?.changeRecords || [])];
+    const values = await form.value?.submitForm();
+    emit('submit', values, { changeRecords });
+  } catch (e) {
+    emit('error', e);
+  }
+};
+
 defineExpose({
   form,
   saveFetch,
   bodyHeight,
-
+  close,
   show,
   hide,
+  save,
+  cancel,
   handleClose,
 });
 </script>

package/src/containers/Container.vue

@@ -33,6 +33,9 @@
               :label-title="config.labelTitle"
               :text="text"
             ></FormLabel>
+            <span class="m-form-tip m-form-title-extra" v-if="config.titleExtra && config.labelPosition === 'top'">
+              {{ config.titleExtra }}</span
+            >
           </slot>
         </template>
 
@@ -220,17 +223,23 @@
       </template>
     </template>
 
-    <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
-      <TMagicButton type="primary" size="small" :disabled="false" link @click="expandHandler">{{
-        expand ? '收起配置' : '展开更多配置'
-      }}</TMagicButton>
+    <div class="m-form-container-expand" v-if="config.expand && type !== 'fieldset'">
+      <TMagicButton
+        type="primary"
+        size="small"
+        :disabled="false"
+        link
+        @click="expandHandler"
+        :icon="expand ? ArrowUp : ArrowDown"
+        >{{ expand ? '收起配置' : '展开更多配置' }}</TMagicButton
+      >
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject, readonly, ref, toRaw, watch, watchEffect } from 'vue';
-import { WarningFilled } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowUp, WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';

package/src/containers/GroupListItem.vue

@@ -1,17 +1,19 @@
 <template>
-  <TMagicCard class="m-fields-group-list-item" :body-style="{ display: expand ? 'block' : 'none' }">
+  <TMagicCard class="m-fields-group-list-item" :flat="config.flat" :body-style="{ display: expand ? 'block' : 'none' }">
     <template #header>
-      <div>
-        <TMagicButton link :disabled="disabled" @click="expandHandler">
-          <TMagicIcon><CaretBottom v-if="expand" /><CaretRight v-else /></TMagicIcon><span v-html="title"></span>
+      <div class="m-fields-group-list-item-header">
+        <TMagicButton link :disabled="disabled" @click="expandHandler" class="expand-button">
+          <TMagicIcon><ArrowDown v-if="expand" /><ArrowRight v-else /></TMagicIcon>
         </TMagicButton>
 
+        <span v-html="title"></span>
+
         <TMagicButton
           v-if="!isCompare"
           v-show="showDelete"
-          type="danger"
-          size="small"
+          size="default"
           link
+          class="delete-button"
           :icon="Delete"
           :disabled="disabled"
           @click="removeHandler"
@@ -20,7 +22,7 @@
         <TMagicButton
           v-if="copyable && !isCompare"
           link
-          size="small"
+          size="default"
           type="primary"
           :icon="DocumentCopy"
           :disabled="disabled"
@@ -32,18 +34,18 @@
           <TMagicButton
             v-show="index !== 0"
             link
-            size="small"
+            size="default"
             :disabled="disabled"
-            :icon="CaretTop"
+            :icon="Top"
             @click="changeOrder(-1)"
             >上移</TMagicButton
           >
           <TMagicButton
             v-show="index !== length - 1"
             link
-            size="small"
+            size="default"
             :disabled="disabled"
-            :icon="CaretBottom"
+            :icon="Bottom"
             @click="changeOrder(1)"
             >下移</TMagicButton
           >
@@ -107,7 +109,7 @@
 
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
-import { CaretBottom, CaretRight, CaretTop, Delete, DocumentCopy, Position } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowRight, Bottom, Delete, DocumentCopy, Position, Top } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover } from '@tmagic/design';
 

package/src/containers/Panel.vue

@@ -3,10 +3,17 @@
     v-if="items && items.length"
     class="box-card m-form-panel"
     :body-style="{ display: expand ? 'block' : 'none' }"
+    :flat="config.flat"
   >
     <template #header>
       <div style="width: 100%; display: flex; align-items: center">
-        <TMagicButton style="padding: 0" link :icon="expand ? CaretBottom : CaretRight" @click="expand = !expand">
+        <TMagicButton
+          style="padding: 0; margin-right: 10px"
+          link
+          :icon="expand ? ArrowDown : ArrowRight"
+          @click="expand = !expand"
+          v-if="!hideExpand"
+        >
         </TMagicButton>
         <slot name="header">
           <span style="cursor: pointer" @click="expand = !expand">{{ filter(config.title) }}</span>
@@ -62,7 +69,7 @@
 
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue';
-import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicCard } from '@tmagic/design';
 
@@ -85,6 +92,7 @@ const props = defineProps<{
   prop?: string;
   size?: string;
   disabled?: boolean;
+  hideExpand?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -107,7 +115,6 @@ const onAddDiffCount = () => emit('addDiffCount');
 
 defineExpose({
   getExpand: () => expand.value,
-
   setExpand: (v: boolean) => {
     expand.value = v;
   },

package/src/containers/table/ActionsColumn.vue

@@ -9,15 +9,18 @@
     >
     </TMagicButton>
   </TMagicTooltip>
+
   <TMagicButton
     v-show="showDelete(index + 1 + currentPage * pageSize - 1)"
     size="small"
     type="danger"
     link
     title="删除"
-    :icon="config.deleteActionButtonIcon || Delete"
+    :icon="flat ? undefined : config.deleteActionButtonIcon || Delete"
     @click="removeHandler(index + 1 + currentPage * pageSize - 1)"
-  ></TMagicButton>
+  >
+    <template v-if="flat">删除</template>
+  </TMagicButton>
 
   <TMagicButton
     v-if="copyable(index + 1 + currentPage * pageSize - 1)"
@@ -25,10 +28,12 @@
     size="small"
     type="primary"
     title="复制"
-    :icon="config.copyActionButtonIcon || DocumentCopy"
+    :icon="flat ? undefined : config.copyActionButtonIcon || DocumentCopy"
     :disabled="disabled"
     @click="copyHandler(index + 1 + currentPage * pageSize - 1)"
-  ></TMagicButton>
+  >
+    <template v-if="flat">复制</template>
+  </TMagicButton>
 </template>
 
 <script setup lang="ts">
@@ -53,6 +58,7 @@ const props = defineProps<{
   row: any;
   prop?: string;
   sortKey?: string;
+  flat?: boolean;
 }>();
 
 const mForm = inject<FormState | undefined>('mForm');

package/src/containers/table/useTableColumns.ts

@@ -2,7 +2,7 @@ import { computed, h, inject, type Ref } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
-import { type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/design';
+import { isMagicAdminTheme, type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 import type { FormItemConfig, FormState, TableColumnConfig } from '@tmagic/form-schema';
 
 import type { ContainerChangeEventData } from '../../schema';
@@ -21,6 +21,9 @@ export const useTableColumns = (
   modelName: Ref<string | number>,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
+  // magic-admin 主题下「操作列」默认固定在右侧；其它主题保持原默认「左侧」。
+  // 调用方仍可通过 `config.fixed`（'left' | 'right' | false）显式覆盖。
+  const isMagicAdmin = isMagicAdminTheme();
 
   const display = (fuc: any) => displayFunc(mForm, fuc, props);
 
@@ -111,8 +114,9 @@ export const useTableColumns = (
         },
       });
     }
+    const defaultFixed: 'left' | 'right' = isMagicAdmin.value ? 'right' : 'left';
 
-    let actionFixed: 'left' | 'right' | undefined = props.config.fixed === false ? undefined : 'left';
+    let actionFixed: 'left' | 'right' | undefined = props.config.fixed === false ? undefined : defaultFixed;
 
     if (typeof props.config.fixed === 'string' && ['left', 'right'].includes(props.config.fixed)) {
       actionFixed = props.config.fixed;
@@ -122,12 +126,14 @@ export const useTableColumns = (
       props: {
         label: '操作',
         fixed: actionFixed,
+
         width: props.config.operateColWidth ?? (props.config.dropSortHandle && props.config.dropSort ? 132 : 112),
         align: 'center',
       },
       cell: ({ row, $index }: any) =>
         h(ActionsColumn, {
           row,
+          flat: props.config.flat,
           index: $index,
           model: props.model,
           config: props.config,

package/src/containers/table-group-list/TableGroupList.vue

@@ -37,11 +37,17 @@
         :size="addButtonSize"
         :plain="displayMode === 'table'"
         :icon="Plus"
+        text
         :disabled="disabled"
         v-bind="currentConfig.addButtonConfig?.props || { type: 'primary' }"
         @click="newHandler"
       >
-        {{ currentConfig.addButtonConfig?.text || (displayMode === 'table' ? '新增一行' : '新增') }}
+        {{
+          currentConfig.addButtonConfig?.text ||
+          (displayMode === 'table'
+            ? `新增一行${groupListConfig.titlePrefix || ''}`
+            : `新增${groupListConfig.titlePrefix || ''}`)
+        }}
       </TMagicButton>
     </template>
   </component>

package/src/fields/Link.vue

@@ -1,5 +1,16 @@
 <template>
-  <a v-if="config.href && !disabled" target="_blank" :href="href" :style="config.css || {}">{{ displayText }}</a>
+  <a
+    target="_blank"
+    :href="href"
+    v-if="isMagicAdmin && config.href && !disabled"
+    class="magic-admin-link"
+    :style="config.css || {}"
+  >
+    <TMagicButton link type="primary">
+      <TMagicIcon><Notebook /></TMagicIcon>{{ displayText }}
+    </TMagicButton>
+  </a>
+  <a v-else-if="config.href && !disabled" target="_blank" :href="href" :style="config.css || {}">{{ displayText }}</a>
   <span v-else-if="config.href && disabled" :style="config.disabledCss || {}">{{ displayText }}</span>
   <div v-else class="m-fields-link">
     <TMagicButton link type="primary" @click="editHandler">点击编辑</TMagicButton>
@@ -18,8 +29,9 @@
 
 <script lang="ts" setup>
 import { computed, inject, readonly, ref } from 'vue';
+import { Notebook } from '@element-plus/icons-vue';
 
-import { TMagicButton } from '@tmagic/design';
+import { isMagicAdminTheme, TMagicButton, TMagicIcon } from '@tmagic/design';
 
 import FormDialog from '../FormDialog.vue';
 import type { FieldProps, FormState, LinkConfig } from '../schema';
@@ -29,10 +41,12 @@ defineOptions({
   name: 'MFormLink',
 });
 
-const props = defineProps<FieldProps<LinkConfig>>();
+const props = defineProps<FieldProps<LinkConfig> & { theme?: string }>();
 
 const emit = defineEmits(['change']);
 
+const isMagicAdmin = isMagicAdminTheme(props);
+
 useAddField(props.prop);
 
 const formValue = ref({});

package/src/fields/RadioGroup.vue

@@ -8,9 +8,14 @@
       @click="clickHandler(option.value)"
     >
       <TMagicTooltip :disabled="!Boolean(option.tooltip)" placement="top-start" :content="option.tooltip">
-        <div>
-          <TMagicIcon v-if="option.icon" :size="iconSize"><component :is="option.icon"></component></TMagicIcon>
-          <span v-if="option.text">{{ option.text }}</span>
+        <div class="m-fields-radio-group__option">
+          <TMagicIcon
+            v-if="option.icon"
+            :size="iconSize"
+            :class="{ 'm-fields-radio-group__icon_with_text': !!option.text }"
+            ><component :is="option.icon"></component
+          ></TMagicIcon>
+          <span v-if="option.text" class="m-fields-radio-group__text">{{ option.text }}</span>
         </div>
       </TMagicTooltip>
     </component>
@@ -42,13 +47,14 @@ const clickHandler = (item: string | number | boolean) => {
 
 useAddField(props.prop);
 
+// 这里换了设计稿里的图标，所以需要调整一下图标大小
 const iconSize = computed(() => {
   if (props.size === 'small') {
-    return '12';
+    return '14';
   }
   if (props.size === 'large') {
     return '16';
   }
-  return '14';
+  return '16';
 });
 </script>