From f9f3184f988b136c03e56aefc7e13e6d08508032 Mon Sep 17 00:00:00 2001 From: Cheney Date: Fri, 7 Aug 2026 14:46:52 +0800 Subject: [PATCH] fix --- .gitignore | 3 +- docs/需求.md | 10 ++- public/css/style.css | 98 +++++++++++++++++++++- public/index.html | 36 +++++++- public/js/app.js | 111 +++++++++++++++++++++++-- src/services/configService.js | 149 +++++++++++++++++++++++----------- src/utils/validator.js | 35 +++++++- test/configService.test.js | 90 +++++++++++++++++++- test/validator.test.js | 110 +++++++++++++++++++++++++ 9 files changed, 572 insertions(+), 70 deletions(-) create mode 100644 test/validator.test.js diff --git a/.gitignore b/.gitignore index 22b3e24..dea7c50 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ node_modules/ data/projects.json data/system.json data/configs/*.json -*.log +*.log +.reasonix/* \ No newline at end of file diff --git a/docs/需求.md b/docs/需求.md index 54c3ddc..aacac8a 100644 --- a/docs/需求.md +++ b/docs/需求.md @@ -31,11 +31,14 @@ - **FR-3-3**:每个配置项必须有说明(description),用于文档化配置用途 - **FR-3-4**:支持配置项的新增、修改、删除 - **FR-3-5**:配置值根据类型进行格式校验 +- **FR-3-8**:配置项支持「是否必须」(required,规划模式设置)与「是否存在」(exists,编辑模式设置)两个标志;required 且 exists 时编辑模式值必填,exists 关闭视为该配置项当前不存在、允许值为空 +- **FR-3-9**:值范围支持正则约束(`/pattern/flags` 格式,string 类型常用),前端提供手机号、邮箱、身份证、IPv4、URL、端口、字母数字等常见格式预设 +- **FR-3-10**:配置项支持默认值(defaultValue,规划模式设置,需符合值类型);编辑模式下值为空时表格回退展示默认值 ### 2.4 三种工作模式 -- **FR-4-1**:规划模式——定义配置结构,包括字段名、类型、用途、值范围约束,类似"配置 Schema 设计" -- **FR-4-2**:编辑模式——在规划好的结构基础上填写实际配置值 +- **FR-4-1**:规划模式——定义配置结构,包括字段名、类型、用途、值范围约束、是否必须(required),类似"配置 Schema 设计" +- **FR-4-2**:编辑模式——在规划好的结构基础上填写实际配置值,可设置配置项是否存在(exists) - **FR-4-3**:只读模式——仅可查看配置,不可修改,用于日常查阅和审计 ### 2.5 持久化方案 @@ -49,9 +52,10 @@ - **FR-6-1**:左侧树形导航,按“path 维度前缀 + 嵌套键”逐级展开,视觉风格参考 Windows 注册表编辑器 - **FR-6-2**:右侧详情面板,顶部为配置导航地址栏,下方展示选中节点的配置项列表 -- **FR-6-3**:每个配置项展示:键名、值、类型、说明 +- **FR-6-3**:每个配置项展示:键名、值、类型、状态(必填/存在)、说明 - **FR-6-4**:标题栏(应用名+当前项目)与工具栏分离;工具栏按项目/模式/配置/数据分组 - **FR-6-5**:维度栏独立展示已启用维度的筛选器与映射方式,并提供映射配置入口 +- **FR-6-6**:配置项编辑/查看使用右侧抽屉式弹出,占屏幕至少 60% 面积 ## 3. 非功能需求 diff --git a/public/css/style.css b/public/css/style.css index d62a418..4149d97 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -269,10 +269,11 @@ body { background: #f8fbff; } -.col-key { width: 22%; } -.col-value { width: 26%; } -.col-type { width: 10%; } -.col-desc { width: 30%; } +.col-key { width: 18%; } +.col-value { width: 24%; } +.col-type { width: 8%; } +.col-status { width: 12%; } +.col-desc { width: 26%; } .col-actions { width: 12%; } .config-key-cell { @@ -294,6 +295,59 @@ body { color: #0078d4; } +/* 状态徽标:必填 / 存在 / 不存在 */ +.config-status-cell { + white-space: nowrap; +} + +.status-badge { + display: inline-block; + padding: 1px 8px; + border-radius: 10px; + font-size: 11px; + margin-right: 4px; + border: 1px solid transparent; +} + +.badge-required { + background: #fff3e0; + color: #b45309; + border-color: #f0c98f; +} + +.badge-exists { + background: #e8f5e9; + color: #2e7d32; + border-color: #b5dfb8; +} + +.badge-missing { + background: #fdecea; + color: #c62828; + border-color: #f2b8b5; +} + +/* 不存在(未生效)的配置行 */ +.row-not-exists td { + color: #999; + background: #fafafa; +} + +.row-not-exists .config-key-cell { + color: #999; + text-decoration: line-through; +} + +.value-missing { + color: #bbb; +} + +/* 默认值回退展示(配置值为空时) */ +.value-default { + color: #8a8a8a; + font-style: italic; +} + .empty-row td { text-align: center; color: #999; @@ -353,6 +407,42 @@ body { overflow: hidden; } +/* 右侧抽屉:配置项编辑/查看使用,占屏幕至少 60% */ +.drawer-overlay { + justify-content: flex-end; + align-items: stretch; + padding: 0; +} + +.drawer-overlay .modal { + width: 68vw; + max-width: none; + height: 100vh; + max-height: 100vh; + border-radius: 0; + display: flex; + flex-direction: column; + box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25); + animation: drawer-in 0.22s ease-out; +} + +.drawer-overlay .modal-body { + flex: 1; + max-height: none; + overflow-y: auto; +} + +/* 抽屉内表单内容限宽,避免超宽屏下字段过度拉伸 */ +.drawer-overlay .modal-body .form-group, +.drawer-overlay .modal-body .form-row { + max-width: 780px; +} + +@keyframes drawer-in { + from { transform: translateX(100%); } + to { transform: translateX(0); } +} + .modal-sm { width: 360px; } diff --git a/public/index.html b/public/index.html index fe16164..ff7e224 100644 --- a/public/index.html +++ b/public/index.html @@ -98,13 +98,14 @@ 键名 值 类型 + 状态 说明 操作 - 请在左侧选择节点查看配置 + 请在左侧选择节点查看配置 @@ -204,8 +205,8 @@ - -