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

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="isGlobalFlat && 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,18 +29,20 @@
 
 <script lang="ts" setup>
 import { computed, inject, readonly, ref } from 'vue';
+import { Notebook } from '@element-plus/icons-vue';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, TMagicIcon } from '@tmagic/design';
 
 import FormDialog from '../FormDialog.vue';
 import type { FieldProps, FormState, LinkConfig } from '../schema';
+import { isGlobalFlat } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({
   name: 'MFormLink',
 });
 
-const props = defineProps<FieldProps<LinkConfig>>();
+const props = defineProps<FieldProps<LinkConfig> & { theme?: string }>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/Number.vue

@@ -3,7 +3,7 @@
     v-if="model"
     v-model="value"
     clearable
-    controls-position="right"
+    :controls-position="isGlobalFlat ? '' : 'right'"
     :size="size"
     :max="config.max"
     :min="config.min"
@@ -21,6 +21,7 @@ import { inject, ref, watch } from 'vue';
 import { TMagicInputNumber } from '@tmagic/design';
 
 import type { FieldProps, FormState, NumberConfig } from '../schema';
+import { isGlobalFlat } from '../utils/config';
 import { useAddField } from '../utils/useAddField';
 
 defineOptions({

package/src/fields/RadioGroup.vue

@@ -1,5 +1,11 @@
 <template>
-  <TMagicRadioGroup v-if="model" :model-value="model[name]" :size="size" :disabled="disabled">
+  <TMagicRadioGroup
+    v-if="model"
+    :model-value="model[name]"
+    :size="size"
+    :disabled="disabled"
+    class="icon-{{ iconSize }}"
+  >
     <component
       v-for="option in config.options"
       :is="itemComponent"
@@ -8,9 +14,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>
@@ -45,13 +56,17 @@ const clickHandler = (item: string | number | boolean) => {
 
 useAddField(props.prop);
 
+// 这里换了设计稿里的图标，所以需要调整一下图标大小
 const iconSize = computed(() => {
+  if (props.config.iconSize) {
+    return props.config.iconSize;
+  }
   if (props.size === 'small') {
-    return '12';
+    return '14';
   }
   if (props.size === 'large') {
     return '16';
   }
-  return '14';
+  return '16';
 });
 </script>

package/src/fields/Text.vue

@@ -1,6 +1,31 @@
 <template>
-  <div class="m-fields-text">
+  <div :class="['m-fields-text', { 'm-fields-text--static': config.static }]">
+    <div v-if="config.disabled"></div>
+    <!-- 新增静态展示文本样式 -->
+    <template v-if="config.static">
+      <span v-if="config.prepend" class="m-fields-text__prepend">{{ config.prepend }}</span>
+      <span class="m-fields-text__value">{{ value }}</span>
+      <template v-if="appendConfig">
+        <TMagicButton
+          v-if="appendConfig.type === 'button'"
+          style="color: #0056ea"
+          :size="size"
+          @click.prevent="buttonClickHandler"
+        >
+          {{ appendConfig.text }}
+        </TMagicButton>
+        <img
+          v-else-if="appendConfig.type === 'icon'"
+          class="m-fields-text__icon"
+          :src="appendConfig.text"
+          @click="buttonClickHandler"
+        />
+        <span v-else>{{ appendConfig.text }}</span>
+      </template>
+    </template>
+
     <TMagicInput
+      v-else
       v-model="value"
       ref="input"
       :clearable="config.clearable ?? true"
@@ -17,17 +42,18 @@
       <template #append v-if="appendConfig">
         <TMagicButton
           v-if="appendConfig.type === 'button'"
-          style="color: #409eff"
+          style="color: #0056ea"
           :size="size"
           @click.prevent="buttonClickHandler"
         >
           {{ appendConfig.text }}
         </TMagicButton>
+        <img v-else-if="appendConfig.type === 'icon'" :src="appendConfig.text" @click="buttonClickHandler" />
         <span v-else>{{ appendConfig.text }}</span>
       </template>
     </TMagicInput>
 
-    <Teleport to="body">
+    <Teleport to="body" v-if="!config.static">
       <div v-if="popoverVisible" class="tmagic-form-text-popper m-form-item__content" ref="popoverEl">
         <div class="m-form-validate__warning">输入内容前后有空格，是否移除空格？</div>
         <div style="display: flex; justify-content: flex-end">
@@ -80,28 +106,26 @@ watch(
 );
 
 const appendConfig = computed(() => {
-  if (typeof props.config.append === 'string') {
+  const { append } = props.config;
+
+  // 字符串形态：纯文本 append。
+  if (typeof append === 'string') {
     return {
       type: 'text',
-      text: props.config.append,
+      text: append,
       handler: undefined,
     };
   }
-  if (typeof props.config.append === 'object') {
-    if (typeof props.config.append?.handler === 'function') {
-      return {
-        type: 'button',
-        text: props.config.append.text,
-        handler: props.config.append.handler,
-      };
-    }
-    if (props.config.append) {
-      if (props.config.append.value === 0) {
-        return false;
-      }
 
-      return props.config.append;
-    }
+  // 对象形态：按 schema 定义，`type` 可为 `'button' | 'icon'`，`handler` 可选。
+  //
+  // 旧逻辑里只要带 handler 就强制覆盖为 `type: 'button'`，导致 schema 中显式传入的
+  // `type: 'icon'` 在到达模板前被抹掉（参见 `@editor/utils/props.ts` 中 ID 字段
+  // 的复制按钮配置）。这里直接返回原对象，模板按 `type` 分支渲染 button / icon / text。
+  if (typeof append === 'object' && append) {
+    // `value === 0` 沿用旧约定：作为「隐藏 append」的开关。
+    if (append.value === 0) return false;
+    return append;
   }
 
   return false;

package/src/plugin.ts

@@ -50,11 +50,13 @@ import { setConfig } from './utils/config';
 import { registerTypeMatchRules, type TypeMatchValidator } from './utils/typeMatch';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
+import FormDrawer from './FormDrawer.vue';
 
 import './theme/index.scss';
 
 // #region FormInstallOptions
 export interface FormInstallOptions {
+  flat?: boolean;
   /** 自定义字段 type 的 typeMatch 校验规则，可覆盖内置规则或扩展业务字段 */
   typeMatchRules?: Record<string, TypeMatchValidator>;
   [key: string]: any;
@@ -76,6 +78,7 @@ export default {
 
     app.component('m-form', Form);
     app.component('m-form-dialog', FormDialog);
+    app.component('m-form-drawer', FormDrawer);
     app.component('m-form-container', Container);
     app.component('m-form-fieldset', Fieldset);
     app.component('m-form-group-list', TableGroupList);

package/src/submitForm.ts

@@ -18,6 +18,7 @@
 
 import { type AppContext, type Component, createApp, defineComponent, h, nextTick, type Ref, ref, watch } from 'vue';
 
+import { applyExtendState } from './utils/form';
 import Form from './Form.vue';
 import type { ChangeRecord, FormConfig, FormState } from './schema';
 
@@ -192,17 +193,10 @@ const mountFormInstance = <T>(options: MountFormInstanceOptions<T>): Promise<T>
                     console.error('[MForm] extendState failed:', e);
                     return;
                   }
-                  const apply = (state: Record<string, any> | null | undefined) => {
-                    if (!state) return;
-                    for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
-                      if ('value' in descriptor) {
-                        (form.formState as any)[key] = (state as any)[key];
-                      } else {
-                        descriptor.configurable = true;
-                        Object.defineProperty(form.formState, key, descriptor);
-                      }
-                    }
-                  };
+                  // 合并逻辑收口在 applyExtendState：props 派生的只读 getter 字段
+                  // （keyProp 等）以普通字段形式返回时会被跳过并告警，避免 proxy set 抛错
+                  const apply = (state: Record<string, any> | null | undefined) =>
+                    applyExtendState(form.formState, state);
                   if (result && typeof result.then === 'function') {
                     result.then(apply, (e: any) => console.error('[MForm] extendState failed:', e));
                   } else {

package/src/theme/container.scss

@@ -22,4 +22,7 @@
       background: #f7dadd;
     }
   }
+  .m-form-title-extra {
+    margin-left: 8px;
+  }
 }

package/src/theme/fieldset.scss

@@ -1,3 +1,54 @@
+.m-container-fieldset {
+  &.no-border-fieldset {
+    &.fieldset-in-row {
+      > fieldset.m-fieldset {
+        legend {
+          left: 0;
+        }
+      }
+    }
+    > fieldset.m-fieldset {
+      border: 0;
+      legend {
+        position: relative;
+        left: -5px;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        padding: 0;
+      }
+    }
+  }
+  &.fieldset-in-card-fit {
+    border-bottom: 1px solid #e6e6e6;
+    > fieldset.m-fieldset {
+      padding: 16px 0 16px 0 !important;
+      border: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+      legend {
+        position: relative;
+        top: 10px;
+        background-color: transparent;
+      }
+    }
+    &.fieldset-in-card-fit-last {
+      padding-bottom: 0 !important;
+      border-bottom: 0;
+    }
+    &.fieldset-in-card-fit-first {
+      padding-top: 0 !important;
+    }
+    &:last-child {
+      padding-bottom: 0 !important;
+      border-bottom: 0;
+    }
+    &:first {
+      padding-top: 0 !important;
+    }
+  }
+}
+
 fieldset.m-fieldset {
   position: relative;
   border: 1px solid rgb(229, 229, 229);

package/src/theme/form.scss

@@ -53,3 +53,9 @@
     margin-bottom: var(--td-comp-margin-xxl);
   }
 }
+
+.m-form-container {
+  .m-form-container-expand {
+    text-align: center;
+  }
+}

package/src/theme/group-list.scss

@@ -1,4 +1,8 @@
 .m-fields-group-list {
+  .m-fields-group-list-item.tmagic-design-card--flat:last-child {
+    border: 0;
+  }
+
   .el-button--text {
     padding: 0;
     margin-bottom: 7px;
@@ -19,14 +23,11 @@
     &:last-of-type {
       border-bottom: 0;
     }
-  }
 
-  .tmagic-design-card {
-    .el-card__header {
-      padding: 5px 20px;
-    }
-    .t-card__header {
-      padding: 5px 0;
+    .m-fields-group-list-item-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
   }
 
@@ -34,5 +35,6 @@
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
+    margin-bottom: 16px;
   }
 }

package/src/theme/index.scss

@@ -13,3 +13,4 @@
 @use "./tabs.scss";
 @use "./number-range.scss";
 @use "./form-box.scss";
+@use "./radio-group.scss";

package/src/theme/link.scss

@@ -1,3 +1,20 @@
 div.m-fields-link {
   width: fit-content;
 }
+a.magic-admin-link {
+  width: calc(100%);
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid #e6e6e6;
+  background-color: #fafafa;
+  padding: 0 8px;
+  height: 28px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  text-decoration: none;
+
+  i {
+    margin-right: 4px;
+  }
+}

package/src/theme/panel.scss

@@ -4,7 +4,7 @@
       background: #f2f6fc;
     }
     a {
-      color: #409eff;
+      color: var(--el-color-primary, #409eff);
     }
   }
 

package/src/theme/radio-group.scss

@@ -0,0 +1,23 @@
+// 单个 radio option 的内容容器：横向排列 icon + 文本，垂直居中对齐。
+// 这样多行文本（`text: '内联布局\n inline'`）能跟左侧 icon 在视觉中线对齐，
+// 不会出现 icon 顶到第一行的错位。
+.m-fields-radio-group__option {
+  display: flex;
+  align-items: center;
+}
+
+.m-fields-radio-group__text {
+  // `inline-block` 关键：inline span 的 line-height 会被父级 inline formatting
+  // context（如 `.el-radio-button__inner` 的 strut）覆盖，外观高度量出来会比
+  // `line-height` 大；显式声明 `inline-block` 让 span 有独立的格式化上下文，
+  // 自身 line-height 才真正生效。
+  display: inline-block;
+  vertical-align: middle;
+  // `pre-line` 让 `\n` 渲染为换行，同时保留自动折行。
+  white-space: pre-line;
+  line-height: 20px;
+}
+
+.m-fields-radio-group__icon_with_text {
+  margin-right: 8px;
+}

package/src/theme/tabs.scss

@@ -5,8 +5,8 @@
       margin-right: auto;
       min-width: 50px;
       outline: none;
-      border-color: #409eff;
-      color: #409eff;
+      border-color: var(--el-color-primary, #409eff);
+      color: var(--el-color-primary, #409eff);
       width: 10px;
       &::before {
         content: "添加";

package/src/theme/text.scss

@@ -2,6 +2,30 @@
   display: flex;
   align-items: center;
   width: 100%;
+
+  // 纯文本（非输入框）形态：保留 prepend / append 槽位的横向布局。
+  // 配合 `TextConfig.static = true` 使用，常见于 ID 之类「只读 + 操作 icon」场景。
+  &--static {
+    gap: 6px;
+    min-height: 32px;
+
+    .m-fields-text__prepend {
+      color: var(--el-text-color-secondary, #909399);
+    }
+
+    .m-fields-text__value {
+      color: var(--el-text-color-regular, #606266);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .m-fields-text__icon {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+  }
 }
 
 .m-form-validate__warning {
@@ -29,6 +53,20 @@
   }
 }
 
+.m-container-text {
+  &.m-fields-title-container {
+    .tmagic-design-form-item {
+      .el-form-item__label {
+        color: #0f1113;
+        font-weight: 500;
+        font-size: 16px;
+      }
+      line-height: 24px;
+      margin-bottom: 16px;
+    }
+  }
+}
+
 .tmagic-form-text-popper[data-popper-placement^="top"]
   > .tmagic-form-text-popper-arrow {
   bottom: -4px;

package/src/theme/themes/magic-admin/index.scss

@@ -0,0 +1,95 @@
+// magic-admin 主题：所有规则均以 `.m-form.m-form--magic-admin` 为前缀，
+// 仅在 `<MForm theme="magic-admin" />` 时生效，避免污染默认样式。
+@use "../../index.scss";
+
+.m-form.m-form--magic-admin {
+  // 精确匹配"只挂 `m-form-container` + `m-container-fieldset` 这两个 class"的元素：
+  // `.a.b` 只能保证"包含"这两个 class，多余的 class 也会命中；
+  // 用 `[class="..."]` 做全量字符串等值匹配即可排除第三个 class 的情况。
+  // 由于 Vue/框架不保证 class 拼接顺序，两种顺序都列出以覆盖到位。
+  [class="m-form-container m-container-fieldset"],
+  [class="m-container-fieldset m-form-container"] {
+    margin-top: 15px;
+  }
+
+  .m-container-tab:not(.magic-right-panel-tabs-top):not(
+      .magic-form-dynamic-tab
+    ) {
+    > .tmagic-design-tabs:not(.el-tabs--border-card) {
+      > .el-tabs__content {
+        background-color: #fff;
+        padding: 16px 16px 0 16px;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .m-container-tab.magic-form-dynamic-tab {
+  }
+
+  .m-form-tip {
+    color: rgba(0, 0, 0, 0.55);
+  }
+
+  .tmagic-design-form-item {
+    &.show-after-diff {
+      background: #d4edbc;
+    }
+
+    &.show-before-diff {
+      background: #fad2cf;
+    }
+  }
+  .m-fields-radio-group__text {
+    // `pre-line` 让 `\n` 渲染为换行，同时保留自动折行；线高与默认按钮组高度对齐。
+    white-space: pre-line;
+    line-height: 20px;
+  }
+  .el-form-item__content {
+    .tmagic-design-radio-group {
+      .tmagic-design-radio-button {
+        height: 32px;
+        .el-radio-button__inner {
+          height: 32px;
+          display: flex;
+          padding-top: 0;
+          padding-bottom: 0;
+          align-items: center;
+        }
+      }
+    }
+  }
+  .m-fields-data-source-field-select .tmagic-design-button {
+    margin-left: 8px;
+    span {
+      font-size: 16px;
+    }
+  }
+
+  .m-fields-group-list-item.tmagic-design-card--flat {
+    .el-card__body {
+      .m-fields-table-wrap {
+        .m-fields-table {
+          .el-table__header-wrapper {
+            thead {
+              height: 48px;
+            }
+          }
+        }
+      }
+    }
+    .m-fields-group-list-item-header {
+      position: relative;
+      .delete-button {
+        position: absolute;
+        right: 0;
+        color: #0f1113;
+      }
+    }
+  }
+  .m-form-container {
+    .m-form-container-expand {
+      text-align: left;
+    }
+  }
+}

package/src/utils/config.ts

@@ -17,11 +17,17 @@
  */
 
 import type { Component } from 'vue';
+import { ref } from 'vue';
 
 let $MAGIC_FORM = {} as any;
+// 用 ref 持有 flat 全局开关：const 引用本身不可变，符合 `import/no-mutable-exports`；
+// 通过 `.value` 改值仍保持模块级响应式语义，与 editor/plugin.ts、design/index.ts 里
+// 的同名变量写法对齐。
+const isGlobalFlat = ref(false);
 
 const setConfig = (option: any): void => {
   $MAGIC_FORM = option;
+  isGlobalFlat.value = option.flat ?? false;
 };
 
 const getConfig = <T = unknown>(key: string): T => $MAGIC_FORM[key];
@@ -39,4 +45,4 @@ const getField = (tagName: string): Component | undefined => fieldRegistry.get(t
 
 const deleteField = (tagName: string): boolean => fieldRegistry.delete(tagName);
 
-export { deleteField, getConfig, getField, registerField, setConfig };
+export { deleteField, getConfig, getField, isGlobalFlat, registerField, setConfig };

package/src/utils/form.ts

@@ -441,6 +441,43 @@ export const sortChange = (data: any[], { prop, order }: SortProp) => {
   }
 };
 
+/**
+ * 将 extendState 返回的扩展字段合并进 formState。
+ *
+ * - data 描述符（普通字段）通过 `formState[key] = value` 写入，走 reactive proxy 的 set，
+ *   触发依赖通知；
+ * - accessor 描述符（`{ get stage() { return ... } }`）按原样 defineProperty，调用方
+ *   可控制读时求值；强制 `configurable: true` 以便下一次合并可再 define。
+ *
+ * 注意：formState 上由 props 派生的字段（keyProp / popperClass / config / initValues /
+ * isCompare / lastValues / parentValues）是只读 getter（无 setter），extendState 若以
+ * 普通字段形式返回同名 key，直接赋值会让 proxy 的 set trap 失败并抛出
+ * `TypeError: 'set' on proxy: trap returned falsish`，这里统一跳过并告警；
+ * 如确需覆盖，可在 extendState 中以 get 访问器形式返回。
+ */
+export const applyExtendState = (formState: FormState, state: Record<string, any> | null | undefined): void => {
+  if (!state) return;
+
+  for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
+    if (!('value' in descriptor)) {
+      descriptor.configurable = true;
+      Object.defineProperty(formState, key, descriptor);
+      continue;
+    }
+
+    const targetDescriptor = Object.getOwnPropertyDescriptor(formState, key);
+    if (targetDescriptor && !('value' in targetDescriptor) && typeof targetDescriptor.set !== 'function') {
+      console.warn(
+        `[MForm] extendState: "${key}" is a read-only field derived from props and cannot be assigned a plain value. ` +
+          'Return it as a getter accessor if you really need to override it.',
+      );
+      continue;
+    }
+
+    (formState as any)[key] = (state as any)[key];
+  }
+};
+
 export const createObjectProp = (prop: string, key: string, name?: string | number) => {
   if (prop === '') {
     return key;