@tmagic/form 1.8.0-beta.2 → 1.8.0-beta.21

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-dialog.scss

@@ -7,7 +7,7 @@
     padding: 0 20px;
   }
 
-  .el-table .m-form-item .el-form-item {
+  .el-table .m-form-item .el-form-item:not(.is-error) {
     margin-bottom: 0;
   }
 }

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,7 @@
 .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,20 +22,28 @@
     &: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;
     }
   }
 
   .m-fields-group-list-footer {
-    display: flex;
     justify-content: space-between;
     margin-top: 10px;
+    margin-bottom: 16px;
+  }
+}
+
+/** 最外层的groupList需要每个item需要增加空白区域界限时，增加outer-gorup_list可以实现 */
+.m-container-group-list {
+  &.outer-gorup_list {
+    > .m-fields-group-list {
+      > .m-fields-group-list-item {
+        margin-bottom: 10px;
+      }
+    }
   }
 }

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/table.scss

@@ -26,6 +26,16 @@
   }
 }
 
+.el-form-item {
+  .m-fields-table {
+    .el-form-item {
+      &.is-error {
+        margin-bottom: 18px;
+      }
+    }
+  }
+}
+
 .m-fields-table {
   width: 100%;
 
@@ -62,7 +72,7 @@
     }
   }
 
-  .el-form-item {
+  .el-form-item:not(.is-error) {
     margin-bottom: 0;
   }
 

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,106 @@
+// 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;
+    }
+  }
+
+  .m-fields-group-list {
+    .el-table__empty-block {
+      .el-table__empty-text {
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.03);
+        margin-top: 8px;
+        border-radius: 4px;
+      }
+    }
+  }
+}

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

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-import { readonly } from 'vue';
+import { ComputedRef, readonly } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
 
+import { getDesignConfig } from '@tmagic/design';
 import { getValueByKeyPath } from '@tmagic/utils';
 
 import type {
@@ -39,6 +40,61 @@ import type {
   TypeFunction,
 } from '../schema';
 
+import { createTypeMatchValidator } from './typeMatch';
+
+type AsyncValidatorFn = (rule: any, value: any, callback: Function, source?: any, options?: any) => any;
+
+const isTDesignAdapter = () => getDesignConfig('adapterType') === 'tdesign-vue-next';
+
+/**
+ * 将 async-validator（Element Plus）风格的 validator 适配到当前 UI 库。
+ * TDesign 调用签名为 `(val) => boolean | CustomValidateObj | Promise`，无 callback。
+ */
+export const adaptFormValidator = (validator: AsyncValidatorFn): AsyncValidatorFn => {
+  return (arg1: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any) => {
+    if (!isTDesignAdapter()) {
+      return validator(arg1, arg2, arg3, arg4, arg5);
+    }
+
+    // TDesign: validator(val)
+    const value = arg1;
+    return new Promise((resolve) => {
+      let settled = false;
+      const callback = (error?: Error | string | (Error | string)[]) => {
+        if (settled) return;
+        settled = true;
+        // async-validator 约定 callback 也可接收错误数组，TDesign 只能展示一条，取首条
+        const first = Array.isArray(error) ? error[0] : error;
+        if (first) {
+          resolve({
+            result: false,
+            message: typeof first === 'string' ? first : first.message,
+          });
+        } else {
+          resolve(true);
+        }
+      };
+
+      try {
+        // 异步 validator 会先返回 undefined，稍后再调 callback，这里不能当成 thenable 取值
+        const result = validator(undefined, value, callback);
+        if (result && typeof (result as PromiseLike<unknown>).then === 'function') {
+          Promise.resolve(result).then(
+            () => {
+              if (!settled) callback();
+            },
+            (err) => {
+              callback(err instanceof Error ? err : new Error(String(err)));
+            },
+          );
+        }
+      } catch (e) {
+        callback(e instanceof Error ? e : new Error(String(e)));
+      }
+    });
+  };
+};
+
 interface DefaultItem {
   defaultValue: any;
   type: string;
@@ -253,36 +309,54 @@ export const display = function (mForm: FormState | undefined, config: any, prop
   return true;
 };
 
-export const getRules = function (mForm: FormState | undefined, rules: Rule[] | Rule = [], props: any) {
-  rules = cloneDeep(rules);
+export const getRules = function (
+  mForm: FormState | undefined,
+  r: Rule[] | Rule = [],
+  props: any,
+  typeMatchValid?: ComputedRef<boolean>,
+) {
+  let rules = cloneDeep(r);
 
   if (typeof rules === 'object' && !Array.isArray(rules)) {
     rules = [rules];
   }
 
+  if (typeMatchValid?.value && !rules.some((r) => typeof r.typeMatch !== 'undefined')) {
+    rules.push({
+      typeMatch: true,
+    });
+  }
+
   return rules.map((item) => {
+    if (item.typeMatch) {
+      (item as any).validator = adaptFormValidator(createTypeMatchValidator(mForm, props, item));
+      return item;
+    }
+
     if (typeof item.validator === 'function') {
       const fnc = item.validator;
 
-      (item as any).validator = (rule: any, value: any, callback: Function, source: any, options: any) =>
-        fnc(
-          {
-            rule,
-            value: props.config.names ? props.model : value,
-            callback,
-            source,
-            options,
-          },
-          {
-            values: mForm?.initValues || {},
-            model: props.model,
-            parent: mForm?.parentValues || {},
-            formValue: mForm?.values || props.model,
-            prop: props.prop,
-            config: props.config,
-          },
-          mForm,
-        );
+      (item as any).validator = adaptFormValidator(
+        (rule: any, value: any, callback: Function, source: any, options: any) =>
+          fnc(
+            {
+              rule,
+              value: props.config.names ? props.model : value,
+              callback,
+              source,
+              options,
+            },
+            {
+              values: mForm?.initValues || {},
+              model: props.model,
+              parent: mForm?.parentValues || {},
+              formValue: mForm?.values || props.model,
+              prop: props.prop,
+              config: props.config,
+            },
+            mForm,
+          ),
+      );
     }
     return item;
   });
@@ -370,6 +444,54 @@ 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。
+ *
+ * 注意：extendState 只能向 formState「新增」字段，不允许覆盖其已有 key。
+ * 调用方可通过 `reservedKeys` 传入合并前已存在的内置 key 快照（keyProp / popperClass /
+ * config / initValues / isCompare / lastValues / parentValues / values / $emit / fields /
+ * post 等），命中这些 key 时统一跳过并告警。
+ *
+ * 兜底：未传 `reservedKeys` 时，仍会拦截 props 派生的只读 getter 字段（无 setter），
+ * 否则以普通字段形式赋值会让 proxy 的 set trap 抛出
+ * `TypeError: 'set' on proxy: trap returned falsish`。
+ */
+export const applyExtendState = (
+  formState: FormState,
+  state: Record<string, any> | null | undefined,
+  reservedKeys?: Set<string | symbol>,
+): void => {
+  if (!state) return;
+
+  for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
+    if (reservedKeys?.has(key)) {
+      continue;
+    }
+
+    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;