@tmagic/form 1.8.0-beta.8 → 1.8.0-manmanyu.9

package/src/theme/fieldset.scss

@@ -1,3 +1,53 @@
+.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;
+      }
+    }
+    &.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;
     }
   }
 

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,89 @@
+// magic-admin 主题：所有规则均以 `.m-form.m-form--magic-admin` 为前缀，
+// 仅在 `<MForm theme="magic-admin" />` 时生效，避免污染默认样式。
+.m-form.m-form--magic-admin {
+  .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 {
+        margin-right: 8px;
+        height: 32px;
+        .el-radio-button__inner {
+          outline: none !important;
+          border: 0 !important;
+          height: 32px;
+          height: 32px;
+          border-radius: 16px;
+          padding: 0 16px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: 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/types/index.d.ts

@@ -217,6 +217,15 @@ type __VLS_Props$30 = {
    * 通过 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;
 };
 declare const __VLS_base$5: import("@vue/runtime-core").DefineComponent<__VLS_Props$30, {
   values: import("@vue/reactivity").Ref<schema_d_exports.FormValue, schema_d_exports.FormValue>;
@@ -284,6 +293,12 @@ type __VLS_Props$29 = {
   showClose?: boolean;
   showCancel?: boolean; /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
   extendState?: (_state: schema_d_exports.FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /**
+   * 主题名。优先级：传入 `theme` prop > 祖先 `provide(M_THEME_KEY)` > 空串。
+   * 计算结果会再次 `provide` 出去，使得 Dialog 被 Teleport 到 body 后，内部子树
+   * （包括 `MForm` 以及更深的 popover / dropdown）仍能拿到主题。
+   */
+  theme?: string;
 };
 declare var __VLS_19: {}, __VLS_34: {}, __VLS_42: {};
 type __VLS_Slots$4 = {} & {
@@ -320,6 +335,7 @@ declare const __VLS_base$4: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean) | undefined;
       readonly selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]) | undefined;
+      readonly theme?: string | undefined;
       readonly onError?: ((...args: any[]) => any) | undefined;
       readonly onChange?: ((...args: any[]) => any) | undefined;
       readonly "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -361,6 +377,7 @@ declare const __VLS_base$4: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean;
       selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+      theme?: string;
     }> & Readonly<{
       onError?: ((...args: any[]) => any) | undefined;
       onChange?: ((...args: any[]) => any) | undefined;
@@ -452,6 +469,7 @@ declare const __VLS_base$4: import("@vue/runtime-core").DefineComponent<__VLS_Pr
       config: any;
     }) => boolean;
     selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+    theme?: string;
   }> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
@@ -496,6 +514,7 @@ declare const __VLS_base$4: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean) | undefined;
       readonly selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]) | undefined;
+      readonly theme?: string | undefined;
       readonly onError?: ((...args: any[]) => any) | undefined;
       readonly onChange?: ((...args: any[]) => any) | undefined;
       readonly "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -537,6 +556,7 @@ declare const __VLS_base$4: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean;
       selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+      theme?: string;
     }> & Readonly<{
       onError?: ((...args: any[]) => any) | undefined;
       onChange?: ((...args: any[]) => any) | undefined;
@@ -628,6 +648,7 @@ declare const __VLS_base$4: import("@vue/runtime-core").DefineComponent<__VLS_Pr
       config: any;
     }) => boolean;
     selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+    theme?: string;
   }> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
@@ -699,6 +720,12 @@ type __VLS_Props$28 = {
   preventSubmitDefault?: boolean; /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
   beforeClose?: (_done: (_cancel?: boolean) => void) => void; /** 透传给内部 `MForm`，用于扩展 `formState`（如注入 `$message` / `$store` 等） */
   extendState?: (_state: schema_d_exports.FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /**
+   * 主题名。优先级：传入 `theme` prop > 祖先 `provide(M_THEME_KEY)` > 空串。
+   * 计算结果会再次 `provide` 出去，使得 Drawer 被 Teleport 到 body 后，内部子树
+   * （包括 `MForm` 以及更深的 popover / dropdown）仍能拿到主题。
+   */
+  theme?: string;
 };
 declare var __VLS_23: {}, __VLS_38: {}, __VLS_46: {};
 type __VLS_Slots$3 = {} & {
@@ -735,6 +762,7 @@ declare const __VLS_base$3: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean) | undefined;
       readonly selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]) | undefined;
+      readonly theme?: string | undefined;
       readonly onError?: ((...args: any[]) => any) | undefined;
       readonly onChange?: ((...args: any[]) => any) | undefined;
       readonly "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -776,6 +804,7 @@ declare const __VLS_base$3: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean;
       selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+      theme?: string;
     }> & Readonly<{
       onError?: ((...args: any[]) => any) | undefined;
       onChange?: ((...args: any[]) => any) | undefined;
@@ -867,6 +896,7 @@ declare const __VLS_base$3: import("@vue/runtime-core").DefineComponent<__VLS_Pr
       config: any;
     }) => boolean;
     selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+    theme?: string;
   }> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
@@ -911,6 +941,7 @@ declare const __VLS_base$3: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean) | undefined;
       readonly selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]) | undefined;
+      readonly theme?: string | undefined;
       readonly onError?: ((...args: any[]) => any) | undefined;
       readonly onChange?: ((...args: any[]) => any) | undefined;
       readonly "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -952,6 +983,7 @@ declare const __VLS_base$3: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean;
       selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+      theme?: string;
     }> & Readonly<{
       onError?: ((...args: any[]) => any) | undefined;
       onChange?: ((...args: any[]) => any) | undefined;
@@ -1043,6 +1075,7 @@ declare const __VLS_base$3: import("@vue/runtime-core").DefineComponent<__VLS_Pr
       config: any;
     }) => boolean;
     selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+    theme?: string;
   }> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
@@ -1148,6 +1181,7 @@ declare const __VLS_base$2: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean) | undefined;
       readonly selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]) | undefined;
+      readonly theme?: string | undefined;
       readonly onError?: ((...args: any[]) => any) | undefined;
       readonly onChange?: ((...args: any[]) => any) | undefined;
       readonly "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -1189,6 +1223,7 @@ declare const __VLS_base$2: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean;
       selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+      theme?: string;
     }> & Readonly<{
       onError?: ((...args: any[]) => any) | undefined;
       onChange?: ((...args: any[]) => any) | undefined;
@@ -1280,6 +1315,7 @@ declare const __VLS_base$2: import("@vue/runtime-core").DefineComponent<__VLS_Pr
       config: any;
     }) => boolean;
     selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+    theme?: string;
   }> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
@@ -1324,6 +1360,7 @@ declare const __VLS_base$2: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean) | undefined;
       readonly selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]) | undefined;
+      readonly theme?: string | undefined;
       readonly onError?: ((...args: any[]) => any) | undefined;
       readonly onChange?: ((...args: any[]) => any) | undefined;
       readonly "onField-input"?: ((...args: any[]) => any) | undefined;
@@ -1365,6 +1402,7 @@ declare const __VLS_base$2: import("@vue/runtime-core").DefineComponent<__VLS_Pr
         config: any;
       }) => boolean;
       selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+      theme?: string;
     }> & Readonly<{
       onError?: ((...args: any[]) => any) | undefined;
       onChange?: ((...args: any[]) => any) | undefined;
@@ -1456,6 +1494,7 @@ declare const __VLS_base$2: import("@vue/runtime-core").DefineComponent<__VLS_Pr
       config: any;
     }) => boolean;
     selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
+    theme?: string;
   }> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
@@ -1592,6 +1631,7 @@ type __VLS_Props$23 = {
   prop?: string;
   size?: string;
   disabled?: boolean;
+  hideExpand?: boolean;
 };
 declare var __VLS_16: {}, __VLS_18: {};
 type __VLS_Slots = {} & {
@@ -1841,7 +1881,9 @@ declare const __VLS_export$4: import("@vue/runtime-core").DefineComponent<__VLS_
 declare const _default$8: typeof __VLS_export$4;
 //#endregion
 //#region temp/packages/form/src/fields/Link.vue.d.ts
-type __VLS_Props$3 = schema_d_exports.FieldProps<schema_d_exports.LinkConfig>;
+type __VLS_Props$3 = schema_d_exports.FieldProps<schema_d_exports.LinkConfig> & {
+  theme?: string;
+};
 declare const __VLS_export$3: import("@vue/runtime-core").DefineComponent<__VLS_Props$3, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
   change: (...args: any[]) => void;
 }, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props$3> & Readonly<{