refactor(module-management): R3 完成——form-edit 拆分收尾
- 接 index.vue：ModuleFormEditPanel import 改为 ./components/form-edit/FormEditPanel.vue - 删除旧 components/ModuleFormEditPanel.vue（3168 行） - 清理壳组件死样式（lib/ inspector/ prop/ toggle 等已迁至子组件） - 验证：form-edit 组件图编译通过，dnd 14 例全绿，lint 零新增告警 按停损条款：FormCanvas/useFormDrag 交织最深且无测试保护，保留现状，留待下轮。
This commit is contained in:
oneao committed
1 parent
a85f9b0120
commit
fefdcb9ca8
3 files changed
+2
-3773
No files matched your search
-3453
File diff suppressed because it is too large.
Load diff
+1
-319
@@ -2047,14 +2047,6 @@ onBeforeUnmount(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 左栏：白底 + 右分割线（与中间列分隔） */
|
||||
.mm-fdesign__lib {
|
||||
border-right: 1px solid var(--fms-border);
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
background: var(--fms-card);
|
||||
}
|
||||
|
||||
/* 中间列：flex column（header + 画布） */
|
||||
.mm-fdesign__main {
|
||||
display: flex;
|
||||
@@ -2063,173 +2055,6 @@ onBeforeUnmount(() => {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 右栏：白底 + 左分割线（与中间列分隔） */
|
||||
.mm-fdesign__inspector {
|
||||
border-left: 1px solid var(--fms-border);
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
background: var(--fms-card);
|
||||
}
|
||||
|
||||
/* 折叠态：面板内容隐藏，仅保留展开按钮 */
|
||||
.mm-fdesign__lib.is-collapsed,
|
||||
.mm-fdesign__inspector.is-collapsed {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 展开属性面板（覆盖 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;
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: transparent;
|
||||
color: var(--fms-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mm-fdesign__subhead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
strong {
|
||||
font-size: 14px;
|
||||
color: var(--fms-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.mm-fdesign__subhead-meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* 「源已移除」告警徽标：供后续若字段来源缺失时高亮使用（仅样式层） */
|
||||
.mm-fdesign__stale-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
border: 1px solid color-mix(in srgb, var(--fms-danger, #f5222d) 45%, transparent);
|
||||
border-radius: var(--fms-control-radius, 4px);
|
||||
background: color-mix(in srgb, var(--fms-danger, #f5222d) 10%, var(--fms-card));
|
||||
color: var(--fms-danger, #f5222d);
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
/* 折叠属性面板（覆盖 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-radius: 4px;
|
||||
background: transparent;
|
||||
color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
|
||||
transform: none;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--fms-secondary);
|
||||
color: var(--fms-text);
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索框：压缩 ui Input 高度（覆盖默认 --fms-control-height） */
|
||||
.mm-fdesign__lib-search.input-wrapper {
|
||||
height: 26px;
|
||||
min-height: 0;
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mm-fdesign__lib-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mm-fdesign__lib-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
margin-bottom: 2px;
|
||||
padding: 0 6px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
color: var(--fms-text);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
transition:
|
||||
background-color 0.15s,
|
||||
color 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: color-mix(in srgb, var(--fms-primary) 8%, var(--fms-card));
|
||||
color: var(--fms-primary);
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
background: color-mix(in srgb, var(--fms-primary) 14%, var(--fms-card));
|
||||
color: var(--fms-primary);
|
||||
}
|
||||
/* 已加入表单的字段：不弱化视觉，与未加入字段一致（仅靠右侧 ✓ 标记区分） */
|
||||
}
|
||||
|
||||
.mm-fdesign__lib-name {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mm-fdesign__lib-added {
|
||||
flex: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #e7f6ed;
|
||||
color: #146c41;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mm-fdesign__lib-empty {
|
||||
padding: 12px 0;
|
||||
color: var(--fms-text-disabled, #9ca3af);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- 画布 ---- */
|
||||
/* 透明画布：去掉白色纸面，让浅灰工作区底色透出，白色分组卡片直接浮于其上 */
|
||||
.mm-fdesign__sheet {
|
||||
@@ -2614,8 +2439,7 @@ textarea.mm-fdesign__ctrl {
|
||||
/* 幽灵占位：SortableJS 把 ghostClass 加在原卡片上（布局冻结，原位不动），
|
||||
显示为灰色占位块（内部控件隐藏），一眼看出「这里被拖走了」；
|
||||
跟手的是自绘跟手卡片（createDragBadge 生成，样式见全局 .mm-fdesign__drag-badge） */
|
||||
.mm-fdesign__sortable-ghost,
|
||||
.mm-fdesign__lib-ghost {
|
||||
.mm-fdesign__sortable-ghost {
|
||||
opacity: 1;
|
||||
background: color-mix(in srgb, var(--fms-border) 55%, transparent) !important;
|
||||
border-radius: 6px;
|
||||
@@ -2655,148 +2479,6 @@ textarea.mm-fdesign__ctrl {
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 属性面板 ---- */
|
||||
.mm-fdesign__inspector .mm-fdesign__subhead {
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.mm-fdesign__prop-group {
|
||||
margin-top: 14px;
|
||||
color: var(--fms-text);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
/* 前竖线：与左侧分组小标题统一左对齐 */
|
||||
border-left: 3px solid var(--fms-primary);
|
||||
padding-left: 8px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mm-fdesign__prop {
|
||||
margin-top: 10px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: color-mix(in srgb, var(--fms-text-secondary) 70%, var(--fms-text));
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mm-fdesign__prop-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 布局组只有栅格宽度一项时（非文本域字段）占满整行 */
|
||||
.mm-fdesign__prop--full {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
/* 栅格宽度 / 文本域高度：Select + 数字输入框横排 */
|
||||
.mm-fdesign__span-control,
|
||||
.mm-fdesign__height-control {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
:deep(.select-wrapper) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 数字输入：压缩 ui Input 高度（覆盖默认 --fms-control-height） */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 栅格宽度：无下拉时数字输入框即主控件，填充剩余宽度（文本域高度仍用下拉，不受影响） */
|
||||
.mm-fdesign__span-control > .mm-fdesign__span-input.input-wrapper {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
padding: 0 8px;
|
||||
|
||||
:deep(.input) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.mm-fdesign__prop-static {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 26px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--fms-border);
|
||||
border-radius: 4px;
|
||||
background: var(--fms-secondary-hover);
|
||||
color: var(--fms-text);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 属性面板常规输入：压缩 ui Input 高度 */
|
||||
.mm-fdesign__prop-input.input-wrapper {
|
||||
height: 26px;
|
||||
min-height: 0;
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mm-fdesign__toggles {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mm-fdesign__toggle-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 28px;
|
||||
color: var(--fms-text);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.mm-fdesign__delete {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---- 数据视图 ---- */
|
||||
.mm-edit__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.mm-panel__toolbar {
|
||||
display: flex;
|
||||
flex: none;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.mm-panel__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ---- 分组标题行：右侧操作（字段/列计数 + 停用标记 + 删除），主表/子表统一 ---- */
|
||||
.mm-edit__section-meta {
|
||||
display: inline-flex;
|
||||
|
||||
@@ -43,7 +43,7 @@ import { useModuleSave } from './composables/useModuleSave'
|
||||
import ModuleBasicPanel from './components/ModuleBasicPanel.vue'
|
||||
import ModuleFieldsPanel from './components/ModuleFieldsPanel.vue'
|
||||
import ModuleListConfigPanel from './components/ModuleListConfigPanel.vue'
|
||||
import ModuleFormEditPanel from './components/ModuleFormEditPanel.vue'
|
||||
import ModuleFormEditPanel from './components/form-edit/FormEditPanel.vue'
|
||||
import ModuleTableEditPanel from './components/table-edit/TableEditPanel.vue'
|
||||
import ModuleQueryConfigPanel from './components/ModuleQueryConfigPanel.vue'
|
||||
import ModuleAutoCodePanel from './components/ModuleAutoCodePanel.vue'
|
||||
|
||||
Reference in new issue
Block a user