@tmagic/form 1.8.0-beta.13 → 1.8.0-beta.14

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.13",
+  "version": "1.8.0-beta.14",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -52,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.40",
     "typescript": "^6.0.3",
-    "@tmagic/form-schema": "1.8.0-beta.13",
-    "@tmagic/utils": "1.8.0-beta.13",
-    "@tmagic/design": "1.8.0-beta.13"
+    "@tmagic/utils": "1.8.0-beta.14",
+    "@tmagic/design": "1.8.0-beta.14",
+    "@tmagic/form-schema": "1.8.0-beta.14"
   },
   "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,15 +36,27 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, provide, reactive, ref, shallowRef, toRaw, useTemplateRef, watch, watchEffect } from 'vue';
+import {
+  computed,
+  inject,
+  nextTick,
+  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';
 import { getConfig } from './utils/config';
-import { initValue } from './utils/form';
+import { applyExtendState, initValue } from './utils/form';
 import type {
   ChangeRecord,
   ContainerChangeEventData,
@@ -116,6 +132,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: () => [],
@@ -149,6 +174,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 实现说明：
  *
@@ -165,13 +211,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;
@@ -222,11 +276,10 @@ const formState: FormState = reactive<FormState>({
  * 这里不再重复同步；因此 `props.initValues` 这类高频变化也不会再触发
  * `extendState` 重跑（旧版的性能问题修复点）。
  *
- * 实现细节：
- * - data 描述符：通过 `formState[key] = value` 走 reactive proxy 的 set，
- *   触发依赖通知；与旧版「逐项赋值」语义完全等价。
- * - accessor 描述符（`{ get stage() {...} }`）按原样写入 formState，调用方
- *   可以自行控制读时求值；强制 `configurable: true` 以便下一次重跑可再 define。
+ * 实现细节：合并逻辑统一收口在 `applyExtendState`（utils/form）——
+ * data 描述符走 reactive proxy 的 set 触发依赖通知（与旧版「逐项赋值」语义等价），
+ * accessor 描述符按原样 defineProperty 支持读时求值；
+ * props 派生的只读 getter 字段（keyProp 等）以普通字段形式返回时会被跳过并告警。
  */
 watchEffect(async (onCleanup) => {
   const { extendState } = props;
@@ -246,18 +299,18 @@ watchEffect(async (onCleanup) => {
   }
   if (stale) return;
 
-  for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
-    if ('value' in descriptor) {
-      (formState as any)[key] = (state as any)[key];
-    } else {
-      descriptor.configurable = true;
-      Object.defineProperty(formState, key, descriptor);
-    }
-  }
+  applyExtendState(formState, state);
 });
 
 provide('mForm', formState);
 
+/**
+ * 把生效主题（自身或祖先）再 provide 出去，供 form 子树内含 `Teleport` 的组件
+ * （如 `TMagicPopover`）在传送目标上挂 `m-theme--<theme>` 类。
+ * 详见 `@tmagic/design/theme.ts`。
+ */
+provide(M_THEME_KEY, effectiveTheme);
+provide('formInline', props.inline);
 // 对比相关配置单独通过 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"
@@ -34,6 +34,7 @@
         :use-field-text-in-error="useFieldTextInError"
         :type-match-valid="typeMatchValid"
         :extend-state="extendState"
+        :theme="effectiveTheme"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -66,9 +67,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';
@@ -104,6 +105,12 @@ const props = withDefaults(
     useFieldTextInError?: 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: () => [],
@@ -118,6 +125,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"
@@ -31,6 +31,7 @@
         :use-field-text-in-error="useFieldTextInError"
         :type-match-valid="typeMatchValid"
         :extend-state="extendState"
+        :theme="effectiveTheme"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -57,18 +58,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;
@@ -92,6 +93,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,
@@ -102,12 +109,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);
 
@@ -148,25 +159,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

@@ -35,6 +35,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>
 
@@ -222,17 +225,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';
@@ -440,8 +449,10 @@ const formItemProps = computed(() => ({
   prop: itemProp.value,
   labelWidth: itemLabelWidth.value,
   labelPosition: props.config.labelPosition,
+
   rules: rule.value,
   extra: filterFunction(mForm, props.config.extra, props),
+  extraTips: props.config.extraTips,
 }));
 
 const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);

package/src/containers/GroupList.vue

@@ -2,7 +2,7 @@
   <div class="m-fields-group-list">
     <div v-if="config.extra" v-html="config.extra" style="color: rgba(0, 0, 0, 0.45)"></div>
     <div v-if="!model[name] || !model[name].length" class="el-table__empty-block">
-      <span class="el-table__empty-text t-table__empty">暂无数据</span>
+      <span class="el-table__empty-text t-table__empty">暂无{{ config.titlePrefix || '' }}数据</span>
     </div>
 
     <MFieldsGroupListItem

package/src/containers/GroupListItem.vue

@@ -1,26 +1,29 @@
 <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>
 
-        <TMagicButton
-          v-if="!isCompare"
-          v-show="showDelete"
-          type="danger"
-          size="small"
-          link
-          :icon="Delete"
-          :disabled="disabled"
-          @click="removeHandler"
-        ></TMagicButton>
+        <span v-html="title"></span>
+        <TMagicTooltip :content="`删除 ${title}`">
+          <TMagicButton
+            v-if="!isCompare"
+            v-show="showDelete"
+            size="default"
+            link
+            class="delete-button"
+            :icon="Delete"
+            :disabled="disabled"
+            @click="removeHandler"
+          ></TMagicButton>
+        </TMagicTooltip>
 
         <TMagicButton
           v-if="copyable && !isCompare"
           link
-          size="small"
+          size="default"
           type="primary"
           :icon="DocumentCopy"
           :disabled="disabled"
@@ -32,18 +35,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,9 +110,9 @@
 
 <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';
+import { TMagicButton, TMagicCard, TMagicIcon, TMagicInputNumber, TMagicPopover, TMagicTooltip } from '@tmagic/design';
 
 import type { ContainerChangeEventData, FormState, GroupListConfig } from '../schema';
 import { filterFunction } from '../utils/form';
@@ -152,7 +155,10 @@ const rowConfig = computed(() => ({
 
 const title = computed(() => {
   if (props.config.titleKey && props.model[props.config.titleKey]) {
-    return props.model[props.config.titleKey];
+    const { titlePrefix } = props.config;
+    return titlePrefix
+      ? `${titlePrefix} ${String(props.index + 1)}: ${props.model[props.config.titleKey]}`
+      : `${props.model[props.config.titleKey]}`;
   }
 
   if (props.config.title) {

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/Table.vue

@@ -27,6 +27,7 @@
             :key="updateKey"
             @select="selectHandle"
             @sort-change="sortChangeHandler"
+            :empty-text="`暂无${config.titlePrefix || ''}数据`"
           ></TMagicTable>
         </TMagicTooltip>
 

package/src/containers/table/useTableColumns.ts

@@ -6,6 +6,7 @@ import { type TableColumnOptions, TMagicIcon, TMagicTooltip } from '@tmagic/desi
 import type { FormItemConfig, FormState, TableColumnConfig } from '@tmagic/form-schema';
 
 import type { ContainerChangeEventData } from '../../schema';
+import { isGlobalFlat } from '../../utils/config';
 import { display as displayFunc, getDataByPage, sortArray } from '../../utils/form';
 import Container from '../Container.vue';
 
@@ -111,23 +112,26 @@ export const useTableColumns = (
         },
       });
     }
-
-    let actionFixed: 'left' | 'right' | undefined = props.config.fixed === false ? undefined : 'left';
-
+    const defaultFixed: 'left' | 'right' = isGlobalFlat.value ? 'right' : '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;
     }
 
+    const actionFlat = props.config.flat === undefined && isGlobalFlat.value ? true : props.config.flat;
+
     const actionColumn = {
       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: actionFlat,
           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>