优化前端控制台样式并更新文档

frontend/src/pages/SystemEnumsPage.vue

@@ -358,28 +358,58 @@ onMounted(loadEnums);
 }
 
 .enum-toolbar {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
   gap: 16px;
-  padding: 16px 18px 4px;
+  padding: 18px 22px 8px;
+  border-bottom: 1px solid #eef2f7;
+  background: #ffffff;
+}
+
+.enum-toolbar :deep(.el-form) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 14px;
 }
 
 .enum-toolbar :deep(.el-form-item) {
-  margin-bottom: 12px;
+  margin-right: 0;
+  margin-bottom: 10px;
+}
+
+.enum-toolbar :deep(.el-form-item__label) {
+  color: #475467;
+  font-weight: 600;
 }
 
 .enum-toolbar :deep(.el-input) {
-  width: 180px;
+  width: 196px;
 }
 
 .enum-table {
   width: 100%;
 }
 
+.enum-table :deep(.el-table__header-wrapper th) {
+  background: #f8fafc;
+  color: #667085;
+  font-weight: 700;
+}
+
+.enum-table :deep(.el-table__row td) {
+  color: #344054;
+}
+
+.enum-table :deep(.el-table__row:hover td) {
+  background: #f8fbff;
+}
+
 .enum-actions {
   display: flex;
+  justify-content: flex-end;
   gap: 8px;
+  padding-top: 1px;
 }
 
 .batch-base {
@@ -401,4 +431,37 @@ onMounted(loadEnums);
 .batch-table {
   width: 100%;
 }
+
+@media (max-width: 1080px) {
+  .enum-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .enum-actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 768px) {
+  .enum-toolbar {
+    padding: 14px 16px 8px;
+  }
+
+  .enum-toolbar :deep(.el-form) {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .enum-toolbar :deep(.el-input) {
+    width: 100%;
+  }
+
+  .enum-actions {
+    flex-wrap: wrap;
+  }
+
+  .batch-base {
+    grid-template-columns: 1fr;
+  }
+}
 </style>