oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(module-management): R2b 表格设计面板 UI 归一

Browse Source 
- 字段库搜索/带标题/列宽输入 → 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 等死样式
This commit is contained in:
oneao committed 2026-08-28 16:37:58 +08:00
1 parent ce3a9d87f8
commit 8c506ae56c
2 files changed
+121 -297
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/fms-vue/src/layouts/DefaultLayout.vue
+2 -2
View File
@@ -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 模式直接管理，
code/fms/fms-vue/src/views/system/module-management/components/ModuleTableEditPanel.vue
+119 -295
View File
@@ -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%;