新增配置列表和配置新增页面

app/styles/components/button.css

@@ -1,16 +1,16 @@
-/**
+/* *
  * 按钮组件样式
  */
 
-/* 基础按钮 */
+/* 基础按钮
 .btn {
   @apply inline-flex items-center justify-center px-4 py-2 
          border border-transparent rounded-md font-medium text-sm 
          focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
          disabled:opacity-50 disabled:cursor-not-allowed;
-}
+} */
 
-/* 按钮尺寸 */
+/* 按钮尺寸
 .btn-xs {
   @apply px-2.5 py-1 text-xs;
 }
@@ -21,13 +21,17 @@
 
 .btn-lg {
   @apply px-5 py-2.5 text-base;
-}
+} */
 
-/* 按钮类型 */
+/* 按钮类型
 .btn-primary {
   @apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
 }
 
+.btn-default {
+  @apply bg-white text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
+}
+
 .btn-secondary {
   @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
 }
@@ -44,9 +48,9 @@
 .btn-text {
   @apply bg-transparent text-[#00684a] shadow-none border-none 
          hover:bg-[rgba(0,104,74,0.05)] focus:ring-0;
-}
+} */
 
-/* 图标按钮 */
+/* 图标按钮
 .btn-icon {
   @apply p-2 rounded-full;
 }
@@ -57,9 +61,9 @@
 
 .btn-icon i, .btn-icon svg {
   @apply text-current w-5 h-5;
-}
+} */
 
-/* 按钮组 */
+/* 按钮组
 .btn-group {
   @apply inline-flex;
 }
@@ -74,4 +78,29 @@
 
 .btn-group .btn:last-child {
   @apply rounded-r-md;
-} 
+}  */
+
+
+/* 按钮样式 */
+.ant-btn {
+  @apply inline-flex items-center justify-center px-4 py-2 
+       border border-transparent rounded-md font-medium text-sm 
+       focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
+       disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+.ant-btn-primary {
+  @apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
+}
+
+.ant-btn-default {
+  @apply bg-white border border-gray-300 text-gray-800 hover:border-[#00684a] focus:ring-[#00684a];
+}
+
+.ant-btn-danger {
+  @apply bg-[#f5222d] text-white hover:bg-[#cf1f29] focus:ring-[#f5222d];
+}
+
+.ant-btn-sm {
+  @apply px-3 py-1.5 text-sm;
+}

app/styles/components/form.css

@@ -32,7 +32,7 @@
   }
 
   .form-select {
-    @apply pr-10;
+    @apply pr-10 border-gray-300 border-[1px];
   }
 
   .form-textarea {

app/styles/main.css

@@ -214,30 +214,6 @@
   
   /* === UI组件 === */
   
-  /* 按钮样式 */
-  .ant-btn {
-    @apply inline-flex items-center justify-center px-4 py-2 
-         border border-transparent rounded-md font-medium text-sm 
-         focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
-         disabled:opacity-50 disabled:cursor-not-allowed;
-  }
-  
-  .ant-btn-primary {
-    @apply bg-[#00684a] text-white hover:bg-[#005a3f] focus:ring-[#00684a];
-  }
-  
-  .ant-btn-default {
-    @apply bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-300;
-  }
-  
-  .ant-btn-danger {
-    @apply bg-[#f5222d] text-white hover:bg-[#cf1f29] focus:ring-[#f5222d];
-  }
-  
-  .ant-btn-sm {
-    @apply px-3 py-1.5 text-sm;
-  }
-  
   /* 卡片组件 */
   .card {
     @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;

app/styles/pages/config-lists_index.css

@@ -0,0 +1,89 @@
+/**
+ * 配置列表页样式
+ */
+
+/* 配置页面容器 */
+.config-lists {
+  @apply p-6;
+}
+
+/* 表格区域 */
+.config-lists .config-table {
+  @apply w-full;
+}
+
+/* 选择框focus状态 */
+.config-lists .form-select:focus {
+  border-color: #00684a;
+  box-shadow: 0 0 0 2px rgba(0, 104, 74, 0.2);
+  outline: none;
+}
+
+/* 环境标签 */
+.config-lists .env-tag {
+  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+}
+
+.config-lists .env-tag-dev {
+  @apply bg-blue-100 text-blue-900;
+}
+
+.config-lists .env-tag-test {
+  @apply bg-yellow-100 text-yellow-900;
+}
+
+.config-lists .env-tag-prod {
+  @apply bg-green-100 text-green-900;
+}
+
+/* 操作列样式 */
+.config-lists .operations-cell {
+  @apply flex space-x-2;
+}
+
+.config-lists .operation-btn {
+  @apply text-sm flex items-center text-[--color-primary] bg-transparent hover:underline p-2;  
+}
+
+
+.config-lists .operation-btn i {
+  @apply mr-1;
+}
+
+/* 详情模态框样式 */
+.config-lists .config-detail-content {
+  @apply space-y-4;
+}
+
+.config-lists .config-detail-item {
+  @apply mb-4;
+}
+
+.config-lists .config-detail-label {
+  @apply text-sm text-gray-500 mb-1;
+}
+
+.config-lists .config-detail-value {
+  @apply text-base;
+}
+
+.config-lists .config-detail-code {
+  @apply bg-gray-50 p-3 rounded text-sm overflow-x-auto;
+}
+
+.config-lists .ant-btn-primary{
+    @apply !text-white
+}
+
+/* 响应式调整 */
+@screen md {
+  .config-lists .config-filter-form {
+    @apply grid-cols-2;
+  }
+}
+
+@screen lg {
+  .config-lists .config-filter-form {
+    @apply grid-cols-4;
+  }
+} 

app/styles/pages/config-lists_new.css

@@ -0,0 +1,139 @@
+/**
+ * 配置新增/编辑页样式
+ */
+
+/* 页面容器 */
+.config-new-page {
+  @apply p-6;
+}
+
+/* 表单卡片 */
+.config-new-page .config-form-card {
+  @apply p-6;
+}
+
+/* 表单样式 */
+.config-new-page .config-form {
+  @apply space-y-6;
+}
+
+.config-new-page .form-row {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
+}
+
+.config-new-page .form-row-full {
+  @apply md:col-span-2;
+}
+
+.config-new-page .form-group {
+  @apply mb-4;
+}
+
+.config-new-page .form-label {
+  @apply block text-sm font-medium mb-1 text-gray-700;
+}
+
+.config-new-page .form-label.required::after {
+  content: " *";
+  @apply text-red-500;
+}
+
+.config-new-page .form-input,
+.config-new-page .form-select,
+.config-new-page .form-textarea {
+  @apply block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
+}
+
+.config-new-page .form-textarea {
+  @apply font-mono;
+}
+
+.config-new-page .form-checkbox {
+  @apply h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary-500;
+}
+
+.config-new-page .form-checkbox-label {
+  @apply ml-2 block text-sm text-gray-900;
+}
+
+.config-new-page .input-error {
+  @apply border-red-500;
+}
+
+.config-new-page .error-message {
+  @apply text-sm text-red-500 mt-1;
+}
+
+.config-new-page .general-error {
+  @apply bg-red-50 p-3 rounded text-center;
+}
+
+.config-new-page .form-help {
+  @apply text-xs text-gray-500 mt-1;
+}
+
+.config-new-page .form-actions {
+  @apply flex justify-end space-x-3;
+}
+
+.config-new-page .inline {
+  @apply inline-block;
+}
+
+/* 标签按钮样式 */
+.config-new-page .tag-buttons {
+  @apply flex flex-wrap gap-2;
+}
+
+.config-new-page .tag-button {
+  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium 
+         bg-gray-100 text-gray-700 border border-gray-200 cursor-pointer transition-all duration-200
+         hover:bg-[rgba(0,104,74,0.1)] hover:border-[#00684a] hover:text-[#00684a];
+}
+
+.config-new-page .tag-button.active {
+  @apply bg-[rgba(0,104,74,0.15)] border-[#00684a] text-[#00684a];
+}
+
+/* JSON编辑器 */
+.config-new-page .json-editor {
+  @apply w-full min-h-[320px] font-mono text-sm leading-relaxed 
+         border border-gray-300 rounded-md p-3 bg-gray-50 text-gray-800
+         focus:outline-none focus:ring-primary-500 focus:border-primary-500;
+}
+
+.config-new-page .editor-actions {
+  @apply text-right mt-2;
+}
+
+/* 示例卡片 */
+.config-new-page .example-card {
+  @apply h-full flex flex-col bg-gray-50 rounded-md border border-gray-200 overflow-hidden;
+}
+
+.config-new-page .example-header {
+  @apply p-3 border-b border-gray-200 bg-gray-100;
+}
+
+.config-new-page .example-title {
+  @apply font-medium text-gray-700;
+}
+
+.config-new-page .example-content {
+  @apply p-3 flex-grow overflow-auto;
+}
+
+.config-new-page .example-pre {
+  @apply m-0 font-mono text-sm leading-relaxed text-gray-800;
+}
+
+.config-new-page .example-footer {
+  @apply p-3 border-t border-gray-200 bg-gray-100;
+}
+
+/* 代码语法高亮基础样式 */
+.config-new-page .code-json .key { @apply text-blue-600; }
+.config-new-page .code-json .string { @apply text-green-600; }
+.config-new-page .code-json .number { @apply text-purple-600; }
+.config-new-page .code-json .boolean { @apply text-blue-600; }
+.config-new-page .code-json .null { @apply text-gray-500; } 

app/styles/pages/home.css

@@ -96,22 +96,26 @@
   @apply flex items-center;
 }
 
-/* 状态标签 - 与status-badge.css重复，已注释
+/* 状态标签 */
 .status-badge {
-  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
 }
 
 .status-badge.status-success {
-  @apply bg-[rgba(0,104,74,0.1)] text-[#00684a];
+  @apply bg-green-100 text-green-900;
 }
 
 .status-badge.status-warning {
-  @apply bg-[rgba(250,173,20,0.1)] text-[#faad14];
+  @apply bg-yellow-100 text-yellow-900;
 }
 
 .status-badge.status-error {
-  @apply bg-[rgba(245,34,45,0.1)] text-[#f5222d];
-} */
+  @apply bg-red-100 text-red-900;
+}
+
+.status-badge.status-processing {
+  @apply bg-blue-100 text-blue-900;
+}
 
 /* 卡片样式 */
 .dashboard-card {