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

frontend/src/layouts/AdminLayout.vue

@@ -7,15 +7,6 @@ import {
   Files,
   Grid,
 } from '@element-plus/icons-vue';
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { useAppStore } from '@/stores/app';
-
-const route = useRoute();
-const appStore = useAppStore();
-
-const pageTitle = computed(() => String(route.meta.title ?? 'Common Agent'));
 
 const menuItems = [
   { path: '/dashboard', label: '工作台', icon: DataBoard },
@@ -47,13 +38,6 @@ const menuItems = [
     </el-aside>
 
     <el-container>
-      <el-header class="admin-header">
-        <div>
-          <h1>{{ pageTitle }}</h1>
-          <p>{{ appStore.environmentName }}</p>
-        </div>
-      </el-header>
-
       <el-main class="admin-main">
         <RouterView />
       </el-main>

frontend/src/layouts/__tests__/AdminLayout.spec.ts

@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils';
+import ElementPlus from 'element-plus';
+import { createPinia } from 'pinia';
+import { describe, expect, it, vi } from 'vitest';
+
+import AdminLayout from '../AdminLayout.vue';
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({ meta: { title: '系统枚举' } }),
+}));
+
+describe('AdminLayout', () => {
+  it('does not render a duplicate page header above the main page content', () => {
+    const wrapper = mount(AdminLayout, {
+      global: {
+        plugins: [createPinia(), ElementPlus],
+        mocks: {
+          $route: { path: '/system/enums' },
+        },
+        stubs: {
+          RouterView: { template: '<main data-test="router-view" />' },
+        },
+      },
+    });
+
+    expect(wrapper.find('.admin-header').exists()).toBe(false);
+    expect(wrapper.find('[data-test="router-view"]').exists()).toBe(true);
+  });
+});

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>

frontend/src/styles/global.css

@@ -1,6 +1,13 @@
 :root {
+  --app-bg: #f5f7fb;
+  --app-border: #e3e8f0;
+  --app-border-soft: #eef2f7;
+  --app-primary: #1677ff;
+  --app-primary-soft: #eaf3ff;
+  --app-text: #172033;
+  --app-text-muted: #667085;
   color: #1f2937;
-  background: #f4f6f8;
+  background: var(--app-bg);
   font-family:
     Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     sans-serif;
@@ -27,90 +34,96 @@ a {
 
 .admin-layout {
   min-height: 100vh;
+  background: var(--app-bg);
 }
 
 .admin-sidebar {
-  border-right: 1px solid #d9dee7;
+  border-right: 1px solid var(--app-border);
   background: #ffffff;
+  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
 }
 
 .brand {
   display: flex;
   align-items: center;
   gap: 10px;
-  height: 64px;
-  padding: 0 18px;
-  border-bottom: 1px solid #e5e9f0;
-  color: #182433;
+  height: 72px;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--app-border-soft);
+  color: var(--app-text);
   font-size: 17px;
   font-weight: 700;
 }
 
+.brand .el-icon {
+  color: var(--app-primary);
+}
+
 .side-menu {
   border-right: 0;
-  padding: 10px 8px;
+  padding: 14px 12px;
 }
 
 .side-menu .el-menu-item {
-  height: 42px;
-  border-radius: 6px;
+  height: 44px;
+  border-radius: 8px;
   margin-bottom: 4px;
+  color: #344054;
+  font-size: 15px;
 }
 
-.admin-header {
-  display: flex;
-  align-items: center;
-  height: 64px;
-  border-bottom: 1px solid #d9dee7;
-  background: #ffffff;
+.side-menu .el-menu-item:hover {
+  background: #f3f7fd;
 }
 
-.admin-header h1 {
-  margin: 0;
-  color: #172033;
-  font-size: 18px;
+.side-menu .el-menu-item.is-active {
+  background: var(--app-primary-soft);
+  color: var(--app-primary);
   font-weight: 700;
-  letter-spacing: 0;
 }
 
-.admin-header p {
-  margin: 4px 0 0;
-  color: #667085;
-  font-size: 12px;
+.side-menu .el-menu-item .el-icon {
+  font-size: 18px;
 }
 
 .admin-main {
-  padding: 20px;
-  background: #f4f6f8;
+  min-width: 0;
+  padding: 24px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 180px),
+    var(--app-bg);
 }
 
 .page-panel {
-  min-height: calc(100vh - 104px);
-  border: 1px solid #d9dee7;
-  border-radius: 6px;
+  min-height: calc(100vh - 48px);
+  border: 1px solid var(--app-border);
+  border-radius: 8px;
   background: #ffffff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }
 
 .page-panel__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 56px;
-  padding: 0 18px;
-  border-bottom: 1px solid #edf0f4;
+  min-height: 64px;
+  padding: 0 22px;
+  border-bottom: 1px solid var(--app-border-soft);
+  background: linear-gradient(180deg, #ffffff, #fbfcff);
 }
 
 .page-panel__header h2 {
   margin: 0;
-  color: #1f2937;
-  font-size: 16px;
+  color: var(--app-text);
+  font-size: 18px;
   font-weight: 700;
   letter-spacing: 0;
 }
 
 .page-panel__header span {
-  color: #768195;
+  color: var(--app-text-muted);
   font-size: 12px;
+  font-weight: 600;
 }
 
 .not-found {
@@ -126,3 +139,43 @@ a {
   font-size: 48px;
   letter-spacing: 0;
 }
+
+@media (max-width: 768px) {
+  .admin-layout {
+    display: block;
+  }
+
+  .admin-sidebar {
+    width: 100% !important;
+    border-right: 0;
+    border-bottom: 1px solid var(--app-border);
+  }
+
+  .brand {
+    height: 60px;
+  }
+
+  .side-menu {
+    display: flex;
+    overflow-x: auto;
+    padding: 10px 12px;
+  }
+
+  .side-menu .el-menu-item {
+    flex: 0 0 auto;
+    margin: 0 6px 0 0;
+  }
+
+  .admin-main {
+    padding: 14px;
+  }
+
+  .page-panel {
+    min-height: calc(100vh - 148px);
+  }
+
+  .page-panel__header {
+    min-height: 58px;
+    padding: 0 16px;
+  }
+}