From 8c506ae56c14db5428c6b29164a33dd301ea9605 Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Fri, 28 Aug 2026 16:37:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor(module-management):=20R2b=20=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=AE=BE=E8=AE=A1=E9=9D=A2=E6=9D=BF=20UI=20=E5=BD=92?=
 =?UTF-8?q?=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 字段库搜索/带标题/列宽输入 → ui Input（change 载荷改为值）
- 编辑方式切换 → ui RadioGroup；设计/数据视图切换 → ui Tabs(nav-only)
- 帮助气泡 → ui Popover(hover)，删除自绘 help-pop 样式
- 属性面板折叠/步进钮 → ui Button；状态开关×5 → ui Switch
- 删除 .mm-fdesign__toggle、.mm-edit__mode-btn、__view-btn 等死样式
---
 .../fms/fms-vue/src/layouts/DefaultLayout.vue |   4 +-
 .../components/ModuleTableEditPanel.vue       | 414 +++++-------------
 2 files changed, 121 insertions(+), 297 deletions(-)

diff --git a/code/fms/fms-vue/src/layouts/DefaultLayout.vue b/code/fms/fms-vue/src/layouts/DefaultLayout.vue
index 7c621740..e72ba990 100644
--- a/code/fms/fms-vue/src/layouts/DefaultLayout.vue
+++ b/code/fms/fms-vue/src/layouts/DefaultLayout.vue
@@ -316,8 +316,8 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   overflow: auto hidden;
-  /* 四边统一 4px padding */
-  padding: 4px;
+  /* 上下 4px，左右 0 */
+  padding: 4px 0;
 }
 
 /* 页面过渡外层包裹：稳定的 DOM 根，供 transition 的 out-in 模式直接管理，
diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
index 07ea400b..d1aecd38 100644
--- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
+++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
@@ -22,7 +22,17 @@ import {
   Pencil,
   FolderPlus,
 } from '@lucide/vue'
-import { Message, Button, Select } from '@/components/ui'
+import {
+  Message,
+  Button,
+  Input,
+  Popover,
+  Radio,
+  RadioGroup,
+  Select,
+  Switch,
+  Tabs,
+} from '@/components/ui'
 import ModuleStructureTree from './structure-tree/ModuleStructureTree.vue'
 import FmsTable from '@/components/fms-table/FmsTable.vue'
 import { createTempId } from '@/utils/tempId'
@@ -226,12 +236,12 @@ function onWidthChange(value) {
 
 // 数字输入框逐键 input 只更新显示；
 // change（失焦/回车）提交一次，与原值不同才真正写入
-function onWidthCommit(event) {
+function onWidthCommit(value) {
   const row = selectedRow.value
   if (!row || props.loading) return
-  const value = Math.min(600, Math.max(40, Number(event.target.value) || 120))
-  if (value === widthOf(row)) return
-  row.b_width = value
+  const width = Math.min(600, Math.max(40, Number(value) || 120))
+  if (width === widthOf(row)) return
+  row.b_width = width
   emitUpdate()
 }
 
@@ -703,13 +713,13 @@ function deleteBand(band) {
   )
 }
 
-function onBandTitleChange(event) {
+function onBandTitleChange(value) {
   const band = selectedBand.value
   if (!band || props.loading) return
-  const value = event.target.value.trim()
-  if (band.group.b_title === value) return
+  const title = String(value ?? '').trim()
+  if (band.group.b_title === title) return
   const updated = (props.groups || []).map((g) =>
-    String(g.b_id) === String(band.gid) ? { ...g, b_title: value } : g,
+    String(g.b_id) === String(band.gid) ? { ...g, b_title: title } : g,
   )
   emit('updateGroups', updated)
 }
@@ -1235,12 +1245,7 @@ onBeforeUnmount(() => {
     <!-- ================= 设计视图：上预览表 / 下分组树+属性 ================= -->
     <div v-show="viewMode === 'design'" class="mm-fdesign">
       <aside class="mm-fdesign__lib" aria-label="字段列表">
-        <input
-          v-model="libSearch"
-          class="mm-fdesign__lib-search"
-          type="text"
-          placeholder="搜索字段名 / 编码"
-        />
+        <Input v-model="libSearch" class="mm-fdesign__lib-search" placeholder="搜索字段名 / 编码" />
         <div class="mm-fdesign__lib-group">
           <div class="mm-fdesign__lib-list">
             <button
@@ -1274,50 +1279,30 @@ onBeforeUnmount(() => {
       <div class="mm-fdesign__main">
         <div class="mm-edit__head">
           <div class="mm-edit__head-left">
-            <div class="mm-edit__mode" role="group" aria-label="编辑方式">
-              <button
-                type="button"
-                class="mm-edit__mode-btn"
-                :class="{ 'is-active': (editMode || 'form') === 'form' }"
-                title="主表：以表单形式编辑"
-                :disabled="loading"
-                @click="onEditModeChange('form')"
-              >
-                主表表单
-              </button>
-              <button
-                type="button"
-                class="mm-edit__mode-btn"
-                :class="{ 'is-active': (editMode || 'form') === 'table' }"
-                title="子表：以表格形式编辑"
-                :disabled="loading"
-                @click="onEditModeChange('table')"
-              >
-                子表表格
-              </button>
-            </div>
+            <RadioGroup
+              class="mm-edit__mode"
+              role="group"
+              aria-label="编辑方式"
+              :model-value="editMode || 'form'"
+              :disabled="loading"
+              @update:model-value="onEditModeChange"
+            >
+              <Radio value="form" title="主表：以表单形式编辑">主表表单</Radio>
+              <Radio value="table" title="子表：以表格形式编辑">子表表格</Radio>
+            </RadioGroup>
           </div>
           <div class="mm-edit__head-center">
-            <div class="mm-edit__view-switch" role="tablist" aria-label="视图切换">
-              <button
-                type="button"
-                class="mm-edit__view-btn"
-                :class="{ 'is-active': viewMode === 'design' }"
-                data-view="design"
-                @click="switchView('design')"
-              >
-                设计
-              </button>
-              <button
-                type="button"
-                class="mm-edit__view-btn"
-                :class="{ 'is-active': viewMode === 'data' }"
-                data-view="data"
-                @click="switchView('data')"
-              >
-                数据
-              </button>
-            </div>
+            <Tabs
+              class="mm-edit__view-switch"
+              nav-only
+              :items="[
+                { key: 'design', label: '设计' },
+                { key: 'data', label: '数据' },
+              ]"
+              :model-value="viewMode"
+              aria-label="视图切换"
+              @update:model-value="switchView"
+            />
           </div>
           <div class="mm-edit__head-right">
             <Button type="outline" :disabled="loading" @click="addRootGroup">
@@ -1331,9 +1316,11 @@ onBeforeUnmount(() => {
             >
               <Trash2 :size="14" /> 删除
             </Button>
-            <div class="mm-edit__help">
-              <span class="mm-edit__help-icon" aria-hidden="true">?</span>
-              <div class="mm-edit__help-pop">
+            <Popover trigger="hover" placement="bottom-end" :arrow="false" :offset="8">
+              <template #trigger>
+                <span class="mm-edit__help-icon" aria-hidden="true">?</span>
+              </template>
+              <template #content>
                 <div class="mm-edit__help-title">操作说明</div>
                 <ul class="mm-edit__help-list">
                   <li>上方表格仅作预览，拖列头右缘可调列宽</li>
@@ -1344,8 +1331,8 @@ onBeforeUnmount(() => {
                   <li><kbd>Ctrl+V</kbd> 粘贴属性到选中列</li>
                   <li><kbd>Delete</kbd> 删除选中列 / 分组带</li>
                 </ul>
-              </div>
-            </div>
+              </template>
+            </Popover>
           </div>
         </div>
 
@@ -1535,16 +1522,16 @@ onBeforeUnmount(() => {
         :class="{ 'is-collapsed': inspectorCollapsed }"
         aria-label="属性面板"
       >
-        <button
+        <Button
           v-if="inspectorCollapsed"
-          type="button"
+          type="ghost"
           class="mm-fdesign__panel-expand"
           title="展开属性面板"
           aria-label="展开属性面板"
           @click="inspectorCollapsed = false"
         >
           <PanelRightOpen :size="14" />
-        </button>
+        </Button>
         <template v-else>
           <div class="mm-fdesign__subhead">
             <strong>属性</strong>
@@ -1556,15 +1543,15 @@ onBeforeUnmount(() => {
                     ? selectedBand.group.b_title || '分组'
                     : '未选中'
               }}</span>
-              <button
-                type="button"
+              <Button
+                type="ghost"
                 class="mm-fdesign__collapse"
                 title="折叠属性面板"
                 aria-label="折叠属性面板"
                 @click="inspectorCollapsed = true"
               >
                 <PanelRightClose :size="13" />
-              </button>
+              </Button>
             </span>
           </div>
 
@@ -1589,80 +1576,67 @@ onBeforeUnmount(() => {
                   :options="columnWidthOptions"
                   @update:model-value="onWidthChange"
                 />
-                <button
-                  type="button"
+                <Button
+                  type="ghost"
                   class="mm-fdesign__step"
                   :disabled="loading || widthOf(selectedRow) <= 40"
                   aria-label="列宽减 10"
                   @click="onWidthStep(-10)"
                 >
                   −
-                </button>
-                <input
+                </Button>
+                <Input
                   type="number"
-                  min="40"
-                  max="600"
-                  :value="widthOf(selectedRow)"
+                  class="mm-fdesign__span-input"
+                  :model-value="widthOf(selectedRow)"
                   :disabled="loading"
                   aria-label="自定义列宽"
                   @change="onWidthCommit"
                 />
-                <button
-                  type="button"
+                <Button
+                  type="ghost"
                   class="mm-fdesign__step"
                   :disabled="loading || widthOf(selectedRow) >= 600"
                   aria-label="列宽加 10"
                   @click="onWidthStep(10)"
                 >
                   +
-                </button>
+                </Button>
               </div>
             </div>
             <div class="mm-fdesign__prop-group">状态</div>
             <div class="mm-fdesign__toggles">
               <div class="mm-fdesign__toggle-line">
                 <span>必填</span>
-                <button
-                  type="button"
-                  class="mm-fdesign__toggle"
-                  :class="{ 'is-on': Number(selectedRow.b_required) === 1 }"
-                  :aria-pressed="Number(selectedRow.b_required) === 1"
+                <Switch
+                  :model-value="Number(selectedRow.b_required) === 1"
                   :disabled="loading"
-                  @click="toggleInspector('b_required')"
-                ></button>
+                  @update:model-value="() => toggleInspector('b_required')"
+                />
               </div>
               <div class="mm-fdesign__toggle-line">
                 <span>只读</span>
-                <button
-                  type="button"
-                  class="mm-fdesign__toggle"
-                  :class="{ 'is-on': Number(selectedRow.b_readonly) === 1 }"
-                  :aria-pressed="Number(selectedRow.b_readonly) === 1"
+                <Switch
+                  :model-value="Number(selectedRow.b_readonly) === 1"
                   :disabled="loading"
-                  @click="toggleInspector('b_readonly')"
-                ></button>
+                  @update:model-value="() => toggleInspector('b_readonly')"
+                />
               </div>
               <div class="mm-fdesign__toggle-line">
                 <span>禁用</span>
-                <button
-                  type="button"
-                  class="mm-fdesign__toggle"
-                  :class="{ 'is-on': Number(selectedRow.b_disabled) === 1 }"
-                  :aria-pressed="Number(selectedRow.b_disabled) === 1"
+                <Switch
+                  :model-value="Number(selectedRow.b_disabled) === 1"
                   :disabled="loading"
-                  @click="toggleInspector('b_disabled')"
-                ></button>
+                  @update:model-value="() => toggleInspector('b_disabled')"
+                />
               </div>
               <div class="mm-fdesign__toggle-line">
                 <span>显示</span>
-                <button
-                  type="button"
-                  class="mm-fdesign__toggle"
-                  :class="{ 'is-on': Number(selectedRow.b_visible) === 1 }"
-                  :aria-pressed="Number(selectedRow.b_visible) === 1"
+                <Switch
+                  :model-value="Number(selectedRow.b_visible) === 1"
                   :disabled="loading"
-                  @click="toggleInspector('b_visible')"
-                ></button>
+                  @update:model-value="() => toggleInspector('b_visible')"
+                />
               </div>
             </div>
             <div class="mm-fdesign__prop-group">操作</div>
@@ -1681,12 +1655,11 @@ onBeforeUnmount(() => {
             <div class="mm-fdesign__prop-group">分组带</div>
             <div class="mm-fdesign__prop">
               <label for="mm-tdesign-band-title">带标题</label>
-              <input
+              <Input
                 id="mm-tdesign-band-title"
                 class="mm-fdesign__prop-input"
-                type="text"
                 maxlength="100"
-                :value="selectedBand.group.b_title || ''"
+                :model-value="selectedBand.group.b_title || ''"
                 :disabled="loading"
                 placeholder="分组名称"
                 @change="onBandTitleChange"
@@ -1705,14 +1678,11 @@ onBeforeUnmount(() => {
             <div class="mm-fdesign__toggles">
               <div class="mm-fdesign__toggle-line">
                 <span>启用</span>
-                <button
-                  type="button"
-                  class="mm-fdesign__toggle"
-                  :class="{ 'is-on': Number(selectedBand.group.b_canuse) === 1 }"
-                  :aria-pressed="Number(selectedBand.group.b_canuse) === 1"
+                <Switch
+                  :model-value="Number(selectedBand.group.b_canuse) === 1"
                   :disabled="loading"
-                  @click="toggleBandEnable"
-                ></button>
+                  @update:model-value="toggleBandEnable"
+                />
               </div>
             </div>
             <div class="mm-fdesign__prop-group">操作</div>
@@ -1833,81 +1803,17 @@ onBeforeUnmount(() => {
   justify-content: flex-end;
 }
 
+/* 编辑方式：ui RadioGroup（紧凑字号） */
 .mm-edit__mode {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 3px;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  background: var(--fms-secondary);
-}
-
-.mm-edit__mode-btn {
-  height: 26px;
-  padding: 0 12px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--fms-text-secondary);
   font-size: 12px;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &.is-active {
-    background: var(--fms-card);
-    color: var(--fms-text);
-    font-weight: 600;
-    box-shadow: 0 1px 3px rgba(30, 45, 64, 0.12);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
 }
 
+/* 视图切换：ui Tabs nav-only */
 .mm-edit__view-switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 3px;
-  border: 1px solid var(--fms-border);
-  border-radius: var(--fms-control-radius);
-  background: var(--fms-secondary);
-}
-
-.mm-edit__view-btn {
-  height: 26px;
-  padding: 0 12px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--fms-text-secondary);
   font-size: 12px;
-  cursor: pointer;
-
-  &.is-active {
-    background: var(--fms-card);
-    color: var(--fms-text);
-    font-weight: 600;
-    box-shadow: 0 1px 3px rgba(30, 45, 64, 0.12);
-  }
-}
-
-/* ---- 快捷键帮助（右上角 ? 图标，hover 展示） ---- */
-.mm-edit__help {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  align-self: center;
-
-  &:hover .mm-edit__help-pop,
-  &:focus-within .mm-edit__help-pop {
-    display: block;
-  }
 }
 
+/* ---- 快捷键帮助（右上角 ? 图标，ui Popover hover 展示） ---- */
 .mm-edit__help-icon {
   display: inline-flex;
   align-items: center;
@@ -1935,20 +1841,6 @@ onBeforeUnmount(() => {
   }
 }
 
-.mm-edit__help-pop {
-  display: none;
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
-  z-index: 50;
-  width: 230px;
-  padding: 10px 12px;
-  border: 1px solid var(--fms-border);
-  border-radius: 8px;
-  background: var(--fms-card);
-  box-shadow: 0 6px 20px rgba(30, 45, 64, 0.14);
-}
-
 .mm-edit__help-title {
   margin-bottom: 6px;
   color: var(--fms-text);
@@ -2115,19 +2007,20 @@ onBeforeUnmount(() => {
   overflow: hidden;
 }
 
-.mm-fdesign__panel-expand {
+/* 展开属性面板（覆盖 ui Button 默认尺寸） */
+.mm-fdesign__panel-expand.button {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   width: 100%;
   height: 100%;
+  min-height: 0;
   padding-top: 10px;
-  border: none;
   background: transparent;
   color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-  cursor: pointer;
 
-  &:hover {
+  &:hover:not(:disabled) {
+    background: transparent;
     color: var(--fms-primary);
   }
 }
@@ -2154,49 +2047,34 @@ onBeforeUnmount(() => {
   font-size: 10px;
 }
 
-.mm-fdesign__collapse {
+/* 折叠属性面板（覆盖 ui Button 默认尺寸） */
+.mm-fdesign__collapse.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
+  min-height: 0;
   padding: 0;
-  border: none;
   border-radius: 4px;
   background: transparent;
   color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
-  cursor: pointer;
-  transition:
-    background 0.15s,
-    color 0.15s;
+  transform: none;
 
-  &:hover {
+  &:hover:not(:disabled) {
     background: var(--fms-secondary);
     color: var(--fms-text);
   }
 }
 
 /* ---- 左栏字段库 ---- */
-.mm-fdesign__lib-search {
-  width: 100%;
+/* 搜索框：压缩 ui Input 高度（覆盖默认 --fms-control-height） */
+.mm-fdesign__lib-search.input-wrapper {
   height: 26px;
+  min-height: 0;
   padding: 0 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  color: var(--fms-text);
-  background: var(--fms-card);
   font-size: 11px;
   margin-bottom: 10px;
-  outline: none;
-
-  &::placeholder {
-    color: var(--fms-text-placeholder, #9ca3af);
-  }
-
-  &:focus {
-    border-color: var(--fms-primary);
-    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fms-primary) 25%, transparent);
-  }
 }
 
 .mm-fdesign__lib-group {
@@ -2631,25 +2509,12 @@ onBeforeUnmount(() => {
   font-size: 11px;
 }
 
-.mm-fdesign__prop-input {
-  width: 100%;
+/* 带标题：压缩 ui Input 高度 */
+.mm-fdesign__prop-input.input-wrapper {
   height: 26px;
+  min-height: 0;
   padding: 0 8px;
-  border: 1px solid var(--fms-border);
-  border-radius: 4px;
-  background: var(--fms-card);
-  color: var(--fms-text);
   font-size: 11px;
-  outline: none;
-
-  &:focus {
-    border-color: var(--fms-primary);
-    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fms-primary) 20%, transparent);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-  }
 }
 
 .mm-fdesign__span-control {
@@ -2660,34 +2525,28 @@ onBeforeUnmount(() => {
     flex: 1;
     min-width: 0;
   }
+}
 
-  input[type='number'] {
-    flex: none;
-    width: 48px;
-    height: 26px;
-    padding: 0 4px;
-    border: 1px solid var(--fms-border);
-    border-radius: 4px;
-    background: var(--fms-card);
-    color: var(--fms-text);
-    font-size: 11px;
+/* 自定义列宽数字输入：压缩 ui Input 高度 */
+.mm-fdesign__span-input.input-wrapper {
+  flex: none;
+  width: 48px;
+  height: 26px;
+  min-height: 0;
+  padding: 0 4px;
+  font-size: 11px;
+
+  :deep(.input) {
     text-align: center;
-    outline: none;
-
-    &:focus {
-      border-color: var(--fms-primary);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-    }
   }
 }
 
-.mm-fdesign__step {
+/* 列宽步进钮（覆盖 ui Button 默认尺寸） */
+.mm-fdesign__step.button {
   flex: none;
   width: 22px;
   height: 26px;
+  min-height: 0;
   padding: 0;
   border: 1px solid var(--fms-border);
   border-radius: 4px;
@@ -2695,7 +2554,6 @@ onBeforeUnmount(() => {
   color: var(--fms-text-secondary);
   font-size: 12px;
   line-height: 1;
-  cursor: pointer;
 
   &:hover:not(:disabled) {
     border-color: var(--fms-primary);
@@ -2721,40 +2579,6 @@ onBeforeUnmount(() => {
   font-size: 11px;
 }
 
-.mm-fdesign__toggle {
-  width: 30px;
-  height: 16px;
-  padding: 2px;
-  border: none;
-  border-radius: 999px;
-  background: #bdc7d2;
-  cursor: pointer;
-  transition: background-color 0.16s ease;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: #fff;
-    transition: transform 0.16s ease;
-  }
-
-  &.is-on {
-    background: var(--fms-primary);
-
-    &::after {
-      transform: translateX(14px);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
 .mm-fdesign__delete {
   margin-top: 10px;
   width: 100%;