fix

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;
 }