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:
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;
|
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 + 画布) */
|
/* 中间列:flex column(header + 画布) */
|
||||||
.mm-fdesign__main {
|
.mm-fdesign__main {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -2063,173 +2055,6 @@ onBeforeUnmount(() => {
|
|||||||
min-height: 0;
|
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 {
|
.mm-fdesign__sheet {
|
||||||
@@ -2614,8 +2439,7 @@ textarea.mm-fdesign__ctrl {
|
|||||||
/* 幽灵占位:SortableJS 把 ghostClass 加在原卡片上(布局冻结,原位不动),
|
/* 幽灵占位:SortableJS 把 ghostClass 加在原卡片上(布局冻结,原位不动),
|
||||||
显示为灰色占位块(内部控件隐藏),一眼看出「这里被拖走了」;
|
显示为灰色占位块(内部控件隐藏),一眼看出「这里被拖走了」;
|
||||||
跟手的是自绘跟手卡片(createDragBadge 生成,样式见全局 .mm-fdesign__drag-badge) */
|
跟手的是自绘跟手卡片(createDragBadge 生成,样式见全局 .mm-fdesign__drag-badge) */
|
||||||
.mm-fdesign__sortable-ghost,
|
.mm-fdesign__sortable-ghost {
|
||||||
.mm-fdesign__lib-ghost {
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: color-mix(in srgb, var(--fms-border) 55%, transparent) !important;
|
background: color-mix(in srgb, var(--fms-border) 55%, transparent) !important;
|
||||||
border-radius: 6px;
|
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 {
|
.mm-edit__section-meta {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ import { useModuleSave } from './composables/useModuleSave'
|
|||||||
import ModuleBasicPanel from './components/ModuleBasicPanel.vue'
|
import ModuleBasicPanel from './components/ModuleBasicPanel.vue'
|
||||||
import ModuleFieldsPanel from './components/ModuleFieldsPanel.vue'
|
import ModuleFieldsPanel from './components/ModuleFieldsPanel.vue'
|
||||||
import ModuleListConfigPanel from './components/ModuleListConfigPanel.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 ModuleTableEditPanel from './components/table-edit/TableEditPanel.vue'
|
||||||
import ModuleQueryConfigPanel from './components/ModuleQueryConfigPanel.vue'
|
import ModuleQueryConfigPanel from './components/ModuleQueryConfigPanel.vue'
|
||||||
import ModuleAutoCodePanel from './components/ModuleAutoCodePanel.vue'
|
import ModuleAutoCodePanel from './components/ModuleAutoCodePanel.vue'
|
||||||
|
|||||||
Reference in new issue
Block a user