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

package/src/fields/Number.vue

@@ -3,7 +3,7 @@
     v-if="model"
     v-model="value"
     clearable
-    controls-position="right"
+    :controls-position="isMagicAdmin ? '' : 'right'"
     :size="size"
     :max="config.max"
     :min="config.min"
@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import { inject, ref, watch } from 'vue';
 
-import { TMagicInputNumber } from '@tmagic/design';
+import { isMagicAdminTheme, TMagicInputNumber } from '@tmagic/design';
 
 import type { FieldProps, FormState, NumberConfig } from '../schema';
 import { useAddField } from '../utils/useAddField';
@@ -34,6 +34,9 @@ const emit = defineEmits<{
   input: [values: number];
 }>();
 
+// magic-admin 主题下输入框走"无右侧上下箭头"的极简样式（控件位置置空回到 ElInputNumber 默认两侧布局）
+const isMagicAdmin = isMagicAdminTheme();
+
 const value = ref<number>();
 
 watch(

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>

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

@@ -49,6 +49,7 @@ import Timerange from './fields/Timerange.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
+import FormDrawer from './FormDrawer.vue';
 
 import './theme/index.scss';
 
@@ -67,6 +68,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/theme/container.scss

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

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;
     }
   }
 
@@ -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,91 @@
+// magic-admin 主题：所有规则均以 `.m-form.m-form--magic-admin` 为前缀，
+// 仅在 `<MForm theme="magic-admin" />` 时生效，避免污染默认样式。
+@use "../../index.scss";
+
+.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;
+    }
+  }
+}