diff --git a/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml b/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml
index ace659f..6a1cbd0 100644
--- a/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml
+++ b/backend/xiaoqu-intellectual-web/src/main/resources/application-test.yml
@@ -2,7 +2,7 @@ server:
    port: 8095
 #redis 多DB配置
 redis:
-   host: 192.168.1.181
+   host: localhost
    port: 6379
    password: kaixinjiuhao
    timeout: 30000
@@ -47,13 +47,13 @@ spring:
   datasource:
     type: com.alibaba.druid.pool.DruidDataSource
     db1:
-     url: jdbc:mysql://192.168.1.181:3306/xiaoqu_comples_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true
+     url: jdbc:mysql://localhost:3306/xiaoqu_comples_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true&allowPublicKeyRetrieval=true
      username: root
      password: kaixinjiuhao
      driver-class-name: com.mysql.cj.jdbc.Driver
  
     db2:
-     url: jdbc:mysql://192.168.1.181:3306/xiaoqu_intellectual_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true
+     url: jdbc:mysql://localhost:3306/xiaoqu_intellectual_d?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai&allowMultiQueries=true&allowPublicKeyRetrieval=true
      username: root
      password: kaixinjiuhao
      driver-class-name: com.mysql.cj.jdbc.Driver
diff --git a/frontend/witcleansystem/src/Assets/css/base.scss b/frontend/witcleansystem/src/Assets/css/base.scss
index cd745f4..8da3463 100644
--- a/frontend/witcleansystem/src/Assets/css/base.scss
+++ b/frontend/witcleansystem/src/Assets/css/base.scss
@@ -1,95 +1,417 @@
 @charset "UTF-8";
-$default-begin-color: #6094fb;
-$default-end-color: #888afa;
-$default-color: #6d73fb;
-$menu-bg-color: #000;
+
+// Legacy SCSS variables (kept for any remaining references)
+$default-begin-color: #6366f1;
+$default-end-color: #818cf8;
+$default-color: #6366f1;
+$menu-bg-color: #1e293b;
+
+// ==========================================
+// Element Plus Theme Override via CSS Variables
+// ==========================================
+:root {
+  --el-color-primary: var(--color-primary);
+  --el-color-primary-light-3: var(--color-primary-light);
+  --el-color-primary-dark-2: var(--color-primary-dark);
+  --el-color-success: var(--color-success);
+  --el-color-warning: var(--color-warning);
+  --el-color-danger: var(--color-danger);
+  --el-color-info: var(--color-info);
+  --el-border-color: var(--color-border);
+  --el-border-color-light: var(--color-border-light);
+  --el-border-radius-base: var(--radius-sm);
+  --el-font-size-base: var(--font-size-base);
+  --el-text-color-primary: var(--color-text-primary);
+  --el-text-color-regular: var(--color-text-secondary);
+  --el-text-color-placeholder: var(--color-text-placeholder);
+  --el-bg-color-page: var(--color-bg-page);
+}
+
 .default-bg {
-  background-image: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    from(#6094fb),
-    to(#888afa)
-  );
-  background-image: linear-gradient(to right, #6094fb, #888afa);
+  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
 }
 
-/* 修改el-button 默认样式 */
-.el-button--primary.is-active,
-.el-button--primary:active {
-  background: #20b2aa !important;
-  border-color: #20b2aa !important;
-  color: #fff !important;
+// ==========================================
+// Element Plus Component Style Normalization
+// ==========================================
+
+// ---------- Global ----------
+* {
+  transition: background-color 0.2s, border-color 0.2s, color 0.15s, box-shadow 0.15s;
 }
 
-.el-button--primary:focus,
-.el-button--primary:hover {
-  background: #48d1cc !important;
-  border-color: #48d1cc !important;
-  color: #fff !important;
+// ---------- Button ----------
+.el-button {
+  border-radius: var(--radius-md);
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  transition: all 0.2s ease;
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary-light);
+    outline-offset: 1px;
+  }
+
+  &--primary {
+    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
+    &:hover, &:focus {
+      box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35);
+    }
+    &:active {
+      transform: scale(0.97);
+    }
+  }
+
+  &--success {
+    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.3);
+  }
+  &--warning {
+    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
+  }
+  &--danger {
+    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
+  }
+
+  &.is-round {
+    border-radius: 999px;
+  }
+
+  &.is-circle {
+    border-radius: 50%;
+  }
 }
 
-.el-button--primary {
-  color: #fff !important;
-  /* background-color: #20b2aa; */
-  background-image: -webkit-gradient(
-    linear,
-    left top,
-    right top,
-    from(#6094fb),
-    to(#888afa)
-  ) !important;
-  background-image: linear-gradient(to right, #6094fb, #888afa) !important;
-  border-color: #6094fb !important;
+// ---------- Input / Select / Cascader / DatePicker ----------
+.el-input__wrapper,
+.el-textarea__inner {
+  border-radius: var(--radius-md);
+  transition: box-shadow 0.2s, border-color 0.2s;
 }
 
+.el-select .el-input__wrapper,
+.el-cascader .el-input__wrapper,
+.el-date-editor.el-input__wrapper {
+  border-radius: var(--radius-md);
+}
+
+.el-input-group__append,
+.el-input-group__prepend {
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+.el-input-group__prepend {
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+// ---------- Form ----------
 .el-form-item__label-wrap {
-  margin-left: 5px !important;
+  margin-left: 5px;
 }
 
 .el-form--inline .el-form-item {
-  margin-bottom: 10px !important;
+  margin-bottom: 10px;
 }
 
-.el-pagination--small .el-pagination__sizes .el-input--mini .el-input__inner {
-  height: 22px;
-  line-height: 22px !important;
+.el-form-item__label {
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+// ---------- Table ----------
+.el-table {
+  font-size: var(--font-size-base);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  --el-table-bg-color: var(--color-bg-card);
+  --el-table-tr-bg-color: var(--color-bg-card);
+  --el-table-header-bg-color: var(--color-bg-page);
+  --el-table-border-color: var(--color-border);
+  background-color: var(--color-bg-card);
+
+  // 所有表头单元格（含左上角索引列表头）
+  th.el-table__cell {
+    background-color: var(--color-bg-page) !important;
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-size: var(--font-size-sm);
+  }
+
+  // 所有行背景
+  tr {
+    background-color: var(--color-bg-card) !important;
+  }
+
+  // 所有单元格背景继承行
+  td.el-table__cell {
+    background-color: inherit !important;
+  }
+
+  // 斑马纹偶行
+  &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+    background-color: var(--color-bg-page) !important;
+  }
+
+  // hover 行
+  .el-table__body tr:hover > td.el-table__cell {
+    background-color: var(--color-primary-bg) !important;
+  }
+
+  // 空数据区
+  .el-table__empty-block {
+    background-color: var(--color-bg-card);
+  }
+
+  // 内部容器
+  .el-table__inner-wrapper::before {
+    background-color: var(--color-border);
+  }
+
+  // 底部横向滚动条加大
+  .el-scrollbar__bar.is-horizontal {
+    height: 10px;
+  }
+  .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
+    border-radius: 5px;
+  }
 }
 
 body .el-table th.gutter {
-  display: none !important;
-  width: 0px !important;
+  display: none;
+  width: 0;
 }
 
 body .el-table colgroup.gutter {
-  display: none !important;
-  width: 0px !important;
+  display: none;
+  width: 0;
 }
 
+// ---------- Pagination ----------
+.el-pagination {
+  .el-pager li,
+  .btn-prev,
+  .btn-next {
+    border-radius: var(--radius-sm);
+  }
+
+  .el-pager li.is-active {
+    font-weight: 600;
+  }
+}
+
+// ---------- Dialog ----------
+.el-dialog {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+
+  .el-dialog__header {
+    padding: var(--spacing-lg) var(--spacing-xl);
+    border-bottom: 1px solid var(--color-border-light);
+    margin-right: 0;
+  }
+
+  .el-dialog__title {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .el-dialog__headerbtn {
+    top: var(--spacing-lg);
+    right: var(--spacing-xl);
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-sm);
+    transition: background 0.2s;
+    &:hover {
+      background: var(--color-border-light);
+    }
+  }
+
+  .el-dialog__body {
+    padding: var(--spacing-xl);
+  }
+
+  .el-dialog__footer {
+    padding: var(--spacing-md) var(--spacing-xl);
+    border-top: 1px solid var(--color-border-light);
+  }
+}
+
+// ---------- Drawer ----------
+.el-drawer {
+  .el-drawer__header {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin-bottom: 0;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    border-bottom: 1px solid var(--color-border-light);
+  }
+
+  .el-drawer__body {
+    padding: var(--spacing-xl);
+  }
+
+  .el-drawer__footer {
+    padding: var(--spacing-md) var(--spacing-xl);
+    border-top: 1px solid var(--color-border-light);
+  }
+}
+
+// ---------- Tag ----------
+.el-tag {
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+}
+
+.el-tag--round {
+  border-radius: 999px;
+}
+
+// ---------- Menu ----------
+.el-menu {
+  border-right: none;
+  border-bottom: none;
+}
+
+// ---------- Tabs ----------
+.el-tabs__item {
+  transition: color 0.2s;
+}
+
+// ---------- Popover / Tooltip ----------
+.el-popover.el-popper {
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.el-tooltip__popper {
+  border-radius: var(--radius-sm);
+}
+
+// ---------- Dropdown ----------
+.el-dropdown-menu {
+  border-radius: var(--radius-md);
+  padding: var(--spacing-xs) 0;
+  box-shadow: var(--shadow-md);
+}
+
+.el-dropdown-menu__item {
+  border-radius: var(--radius-sm);
+  margin: 0 var(--spacing-xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+  transition: background 0.15s, color 0.15s;
+}
+
+// ---------- Message / MessageBox ----------
+.el-message {
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.el-message-box {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+
+  .el-message-box__header {
+    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-md);
+  }
+
+  .el-message-box__title {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+  }
+
+  .el-message-box__btns .el-button {
+    border-radius: var(--radius-md);
+  }
+}
+
+// ---------- Notification ----------
+.el-notification {
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+// ---------- Card ----------
+.el-card {
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--color-border-light);
+}
+
+// ---------- Tree ----------
+.el-tree-node__content {
+  border-radius: var(--radius-sm);
+  transition: background-color 0.15s;
+}
+
+// ---------- Checkbox / Radio ----------
+.el-checkbox__inner,
+.el-radio__inner {
+  border-radius: var(--radius-sm);
+  transition: all 0.2s;
+}
+
+.el-radio__inner {
+  border-radius: 50%;
+}
+
+// ---------- Switch ----------
+.el-switch__core {
+  border-radius: 999px;
+}
+
+// ---------- Skeleton ----------
+.el-skeleton__item {
+  border-radius: var(--radius-sm);
+}
+
+// ---------- Badge ----------
+.el-badge__content {
+  border-radius: 999px;
+}
+
+// ---------- Upload ----------
+.el-upload-dragger {
+  border-radius: var(--radius-md);
+  transition: border-color 0.2s;
+}
+
+// ---------- Popover row buttons ----------
 .btn-popover {
-  min-width: auto !important;
+  min-width: auto;
+  border-radius: var(--radius-md);
 }
 
 .btn-popover .row-buttons {
   text-align: center;
+  background: var(--color-primary-bg);
+  border-radius: var(--radius-sm);
+  margin-bottom: 4px;
+  transition: background 0.2s;
 }
 
 .btn-popover .row-buttons:hover {
-  background: #20b2aa;
+  background: var(--color-primary);
 }
 
 .btn-popover .row-buttons:hover button {
-  color: #fff !important;
+  color: #fff;
   display: block;
   width: 100%;
   height: 100%;
 }
 
+.btn-popover .row-buttons button {
+  color: var(--color-primary);
+}
+
 .btn-popover .row-button {
-  /* border-right: 1px solid #f2f2f2; */
   text-align: center;
 }
 
+// ---------- Image viewer ----------
 .el-image-viewer__wrapper .el-image-viewer__mask {
   background: #fff;
   opacity: 0.8;
@@ -97,104 +419,204 @@ body .el-table colgroup.gutter {
 
 .el-image-viewer__wrapper > .el-image-viewer__btn.el-image-viewer__close {
   color: #ffffff;
-  background-color: grey;
+  background-color: var(--color-info);
+  border-radius: 50%;
 }
 
+// ---------- Loading ----------
 .overall-loading .el-loading-text {
   color: rgba(255, 255, 255, 0.76);
 }
 
 .overall-loading .el-loading-spinner i {
-  color: rgba(255, 255, 255, 0.781);
+  color: rgba(255, 255, 255, 0.78);
   font-size: 40px;
 }
 
 .el-loading-mask {
-  -webkit-transition: opactiy 0.1s !important;
-  transition: opactiy 0.1s !important;
-  z-index: 9999 !important;
+  transition: opacity 0.1s;
+  z-index: 9999;
 }
+
+// ==========================================
+// Global Layout Utility Classes
+// ==========================================
+
 .main-container {
-  background-color: #fff;
-  padding: 0 10px;
+  background-color: var(--color-bg-card);
+  padding: 0 var(--spacing-md);
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--page-top-offset));
 }
+
+// Unified page container
+.page-container {
+  padding: var(--spacing-lg);
+  background-color: var(--color-bg-card);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--page-top-offset));
+}
+
+// Unified search area
+.search-area {
+  padding: var(--spacing-md) var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+// Unified table area — fill remaining space
+.main-table {
+  padding: 0;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+// Unified task-box height
+.task-box {
+  box-sizing: border-box;
+  height: calc(100vh - var(--page-top-offset));
+  display: flex;
+  flex-direction: column;
+}
+
+// Search wrapper — no shrink
+.grid-right-btn,
+.top-screen {
+  flex-shrink: 0;
+}
+
+// Common page containers — flex column fill
+.regional-grid,
+.plan-task,
+.user-manage {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--page-top-offset));
+  box-sizing: border-box;
+  background-color: var(--color-bg-card);
+  overflow: hidden;
+  padding-bottom: 0;
+}
+
+// ==========================================
+// Form & Search Field Widths
+// ==========================================
+
 .screen-item {
-  width: 150px;
+  width: 160px;
   display: inline-block;
 }
 
 .screen-item .el-input {
   width: 100%;
 }
+
 .form-item {
   width: 180px;
 }
+
 .form-item .el-input {
   width: 100%;
 }
+
 .form-item .el-date-editor.el-input,
 .form-item .el-date-editor.el-input__inner {
   width: 100%;
 }
+
 .form-tip {
-  margin-left: 10px;
-  color: blue;
+  margin-left: var(--spacing-md);
+  color: var(--color-primary);
   cursor: pointer;
 }
+
+// ==========================================
+// Left-Right Split Layout (tree + table)
+// ==========================================
+
+.split-layout {
+  display: flex;
+  box-sizing: border-box;
+  height: calc(100vh - var(--page-top-offset));
+
+  .split-layout-left {
+    width: var(--tree-panel-width);
+    min-width: var(--tree-panel-width);
+    box-sizing: border-box;
+    padding: var(--spacing-xl);
+    background-color: var(--color-bg-card);
+    border-right: 1px solid var(--color-border-light);
+    overflow: auto;
+  }
+
+  .split-layout-right {
+    flex: 1;
+    min-width: 0;
+    padding: var(--spacing-md);
+    background-color: var(--color-bg-card);
+    overflow: auto;
+  }
+}
+
+// ==========================================
+// Dialog / Hand-box Styles
+// ==========================================
+
+// Dialog form standard spacing (replaces margin-top: -20px hack)
+.dialog-form {
+  padding: var(--spacing-xl) 0;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+}
+
 .hand-box .hand-box-title {
   font-weight: bold;
   font-size: 18px;
   line-height: 40px;
-  border-bottom: 1px solid #f2f2f2;
+  border-bottom: 1px solid var(--color-border-light);
 }
 
 .hand-box .hand-box-title > span {
-  font-size: 12px;
-  color: grey;
-  margin-left: 20px;
+  font-size: var(--font-size-xs);
+  color: var(--color-info);
+  margin-left: var(--spacing-xl);
 }
 
 .hand-box .hand-box-con {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   width: 100%;
-  padding: 10px 0;
-  flex-wrap: wrap;
+  padding: var(--spacing-md) 0;
 }
 
 .hand-box .hand-box-con .handle-item {
   width: 50%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
   justify-content: flex-start;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -ms-flex-line-pack: center;
   align-content: center;
-  margin-bottom: 10px;
+  margin-bottom: var(--spacing-md);
 }
 
 .hand-box .hand-box-con .handle-item.upload {
   width: 100%;
-  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
 
 .hand-box .hand-box-con .handle-item .handle-label {
   width: 120px;
-  color: #000;
+  color: var(--color-text-primary);
 }
 
 .hand-box .hand-box-con .handle-item .handle-value {
-  color: grey;
+  color: var(--color-info);
 }
 
 .hand-box .hand-box-con .handle-item .upload-item,
@@ -204,20 +626,12 @@ body .el-table colgroup.gutter {
 }
 
 .hand-box .hand-box-con .handle-item .upload-item {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
   justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -ms-flex-line-pack: center;
   align-content: center;
-  border: 1px dashed #f2f2f2;
+  border: 1px dashed var(--color-border-light);
   position: relative;
   cursor: pointer;
 }
@@ -242,14 +656,13 @@ body .el-table colgroup.gutter {
 
 .hand-box .hand-box-con .handle-item .img-item {
   text-align: center;
-  margin-left: 20px;
+  margin-left: var(--spacing-xl);
   overflow: hidden;
 }
 
 .hand-box .hand-box-con .handle-item .img-item .img-box {
   width: 100%;
-  padding: 10px;
-  -webkit-box-sizing: border-box;
+  padding: var(--spacing-md);
   box-sizing: border-box;
   position: relative;
 }
@@ -267,7 +680,7 @@ body .el-table colgroup.gutter {
   right: 0;
   top: 0;
   border-radius: 50%;
-  background-color: #f2f2f2f2;
+  background-color: var(--color-border-light);
   line-height: 20px;
   text-align: center;
   cursor: pointer;
@@ -275,20 +688,18 @@ body .el-table colgroup.gutter {
 }
 
 .hand-box .hand-box-con .handle-item .img-item .img-box span:hover {
-  background-color: blue;
+  background-color: var(--color-primary);
   color: #fff;
 }
 
 .qu-dialog {
   position: absolute;
   width: 100%;
-  background-color: #fff;
+  background-color: var(--color-bg-card);
 }
 
 .qu-dialog .el-dialog {
-  margin: 0 !important;
-  width: 100% !important;
-  -webkit-box-shadow: 0 0px 0px !important;
-  box-shadow: 0 0px 0px !important;
+  margin: 0;
+  width: 100%;
+  box-shadow: none;
 }
-/*# sourceMappingURL=base.css.map */
diff --git a/frontend/witcleansystem/src/Assets/css/variables.scss b/frontend/witcleansystem/src/Assets/css/variables.scss
new file mode 100644
index 0000000..c9d8953
--- /dev/null
+++ b/frontend/witcleansystem/src/Assets/css/variables.scss
@@ -0,0 +1,120 @@
+:root {
+  // 主色
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+  --color-primary-bg: #eef2ff;
+
+  // 语义色
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+  --color-info: #6b7280;
+
+  // 中性色
+  --color-text-primary: #1f2937;
+  --color-text-secondary: #6b7280;
+  --color-text-placeholder: #9ca3af;
+  --color-border: #e5e7eb;
+  --color-border-light: #f3f4f6;
+  --color-bg-page: #f5f7fa;
+  --color-bg-card: #ffffff;
+
+  // 侧边栏（跟随主色）
+  --sidebar-bg: var(--color-primary-dark);
+  --sidebar-text: rgba(255, 255, 255, 0.75);
+  --sidebar-active: #fff;
+  --sidebar-width: 200px;
+  --sidebar-collapsed-width: 64px;
+
+  // 间距（8px 基准栅格）
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+
+  // 头部 & 标签栏高度（tags+头像合并为一行）
+  --header-height: 50px;
+  --topbar-height: 40px;
+  --tags-height: 0px;
+  --content-padding-top: calc(var(--topbar-height) + 4px);
+  --page-top-offset: var(--content-padding-top);
+
+  // 圆角
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  // 阴影
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+
+  // 字体
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 20px;
+
+  // 树面板（左右分栏布局）
+  --tree-panel-width: 280px;
+}
+
+// 暗色模式
+[data-theme="dark"] {
+  --color-text-primary: #e5e7eb;
+  --color-text-secondary: #9ca3af;
+  --color-text-placeholder: #6b7280;
+  --color-border: #374151;
+  --color-border-light: #1f2937;
+  --color-bg-page: #111827;
+  --color-bg-card: #1f2937;
+
+  --sidebar-bg: #0f172a;
+  --sidebar-text: #94a3b8;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+
+  // Element Plus 暗色适配
+  --el-bg-color: #1f2937;
+  --el-bg-color-overlay: #374151;
+  --el-bg-color-page: #111827;
+  --el-text-color-primary: #e5e7eb;
+  --el-text-color-regular: #d1d5db;
+  --el-text-color-secondary: #9ca3af;
+  --el-text-color-placeholder: #6b7280;
+  --el-border-color: #374151;
+  --el-border-color-light: #4b5563;
+  --el-border-color-lighter: #374151;
+  --el-border-color-extra-light: #1f2937;
+  --el-fill-color: #374151;
+  --el-fill-color-light: #1f2937;
+  --el-fill-color-lighter: #111827;
+  --el-fill-color-blank: #1f2937;
+  --el-mask-color: rgba(0, 0, 0, 0.6);
+
+  // 表格暗色
+  --el-table-bg-color: var(--color-bg-card);
+  --el-table-tr-bg-color: var(--color-bg-card);
+  --el-table-header-bg-color: var(--color-bg-page);
+  --el-table-row-hover-bg-color: #374151;
+  --el-table-current-row-bg-color: #374151;
+  --el-table-border-color: #374151;
+  --el-table-text-color: var(--color-text-primary);
+  --el-table-header-text-color: var(--color-text-secondary);
+  // stripe 斑马纹（偶行比奇行略浅）
+  --el-fill-color-lighter: #263345;
+  --el-color-white: var(--color-bg-card);
+
+  // 分页暗色
+  --el-pagination-bg-color: transparent;
+  --el-pagination-button-bg-color: #374151;
+  --el-pagination-hover-color: var(--color-primary);
+
+  // 对话框/抽屉暗色
+  --el-dialog-bg-color: #1f2937;
+  --el-drawer-bg-color: #1f2937;
+}
diff --git a/frontend/witcleansystem/src/Components/common/headerCom.vue b/frontend/witcleansystem/src/Components/common/headerCom.vue
index 43a6fd2..531dfc5 100644
--- a/frontend/witcleansystem/src/Components/common/headerCom.vue
+++ b/frontend/witcleansystem/src/Components/common/headerCom.vue
@@ -1,45 +1,90 @@
 <template>
-  <el-header class="main-header" height="50px">
-    <div class="header-container">
-      <div class="collapsed-button">
-        <el-icon v-if="collapsed" @click="collapseChange" :size="20" color="grey">
-          <expand />
+  <div class="header-actions">
+    <!-- 全屏 -->
+    <div class="btn-action" @click="handleFullScreen">
+      <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
+        <el-icon :size="14">
+          <full-screen />
         </el-icon>
-        <el-icon v-else @click="collapseChange" :size="20" color="#409EFC">
-          <fold />
-        </el-icon>
-      </div>
-      <div class="header-right">
-        <div class="header-user-con">
-          <!-- 全屏显示 -->
-          <div class="btn-fullscreen" @click="handleFullScreen">
-            <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
-              <el-icon :size="15">
-                <full-screen />
-              </el-icon>
-            </el-tooltip>
-          </div>
-          <!-- 用户头像 -->
+      </el-tooltip>
+    </div>
 
-          <!-- 用户名下拉菜单 -->
-          <el-dropdown class="user-name" trigger="hover" tabindex="-1" @command="handleCommand">
-            <div class="user-avator">
-              <img src="../../Assets/img/newHeadPortrait.png" />
-              <span class="a-dropdown-link">
-                {{ user.userName }}
-                <i class="a-icon-caret-bottom"></i>
-              </span>
+    <!-- 用户名下拉菜单 -->
+    <el-dropdown class="user-name" trigger="hover" tabindex="-1" @command="handleCommand">
+      <div class="user-avator">
+        <img src="../../Assets/img/newHeadPortrait.png" />
+        <span class="a-dropdown-link">{{ user.userName }}</span>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item command="theme">主题设置</el-dropdown-item>
+          <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+
+  <!-- 主题设置抽屉 -->
+  <el-drawer v-model="showThemeDrawer" direction="rtl" size="320px" :with-header="false">
+    <div class="theme-drawer-header">主题设置</div>
+
+    <div class="theme-section">
+      <div class="theme-label">系统主色</div>
+      <div class="theme-colors">
+        <div
+          v-for="item in themeColors"
+          :key="item.value"
+          class="color-dot"
+          :style="{ background: item.value }"
+          :class="{ active: currentColor === item.value }"
+          @click="changeColor(item.value)"
+        >
+          <el-icon v-if="currentColor === item.value" color="#fff" :size="14"><check /></el-icon>
+        </div>
+        <el-color-picker v-model="customColor" size="small" @change="onCustomColor" />
+      </div>
+    </div>
+
+    <div class="theme-section">
+      <div class="theme-label">外观模式</div>
+      <el-radio-group v-model="currentMode" @change="changeMode">
+        <el-radio-button label="light">浅色</el-radio-button>
+        <el-radio-button label="dark">深色</el-radio-button>
+        <el-radio-button label="system">跟随系统</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div class="theme-section">
+      <div class="theme-label">导航布局</div>
+      <div class="theme-layouts">
+        <div
+          class="layout-option"
+          :class="{ active: currentLayout === 'sidebar' }"
+          @click="changeLayout('sidebar')"
+        >
+          <div class="layout-preview layout-preview--sidebar">
+            <div class="lp-side"></div>
+            <div class="lp-main">
+              <div class="lp-header"></div>
+              <div class="lp-content"></div>
             </div>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          </div>
+          <span class="layout-option-label">左右布局</span>
+        </div>
+        <div
+          class="layout-option"
+          :class="{ active: currentLayout === 'topnav' }"
+          @click="changeLayout('topnav')"
+        >
+          <div class="layout-preview layout-preview--topnav">
+            <div class="lp-topbar"></div>
+            <div class="lp-content"></div>
+          </div>
+          <span class="layout-option-label">上下布局</span>
         </div>
       </div>
     </div>
-  </el-header>
+  </el-drawer>
 </template>
 
 <script setup>
@@ -47,18 +92,15 @@ import { computed, getCurrentInstance, ref } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage as $message } from "element-plus";
 import { memberService } from "@/ApiService/memberService";
-import tagsCom from "@/Components/common/tagsCom.vue";
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    required: true,
-    default: false,
-  },
-});
+import { themeColors, applyThemeColor, applyDarkMode, applyLayout, getLayout } from "@/Utils/themeUtils";
 
 const fullscreen = ref(false);
+const showThemeDrawer = ref(false);
+const currentColor = ref(localStorage.getItem('theme-color') || '#6366f1');
+const customColor = ref(null);
+const currentMode = ref(localStorage.getItem('theme-mode') || 'light');
+const currentLayout = ref(getLayout());
 
-const emit = defineEmits();
 const $router = useRouter();
 const $common = getCurrentInstance().appContext.config.globalProperties.$common;
 
@@ -66,9 +108,29 @@ const user = computed(() => {
   return $common.getUser();
 });
 
-const collapseChange = () => {
-  emit("update:collapsed", !props.collapsed);
+const changeColor = (hex) => {
+  currentColor.value = hex;
+  customColor.value = null;
+  applyThemeColor(hex);
 };
+
+const onCustomColor = (hex) => {
+  if (hex) {
+    currentColor.value = hex;
+    applyThemeColor(hex);
+  }
+};
+
+const changeMode = (mode) => {
+  applyDarkMode(mode);
+};
+
+const changeLayout = (layout) => {
+  currentLayout.value = layout;
+  applyLayout(layout);
+  window.dispatchEvent(new Event('layout-change'));
+};
+
 const handleFullScreen = () => {
   let element = document.documentElement;
   if (fullscreen.value) {
@@ -89,14 +151,16 @@ const handleFullScreen = () => {
     } else if (element.mozRequestFullScreen) {
       element.mozRequestFullScreen();
     } else if (element.msRequestFullscreen) {
-      // IE11
       element.msRequestFullscreen();
     }
   }
   fullscreen.value = !fullscreen.value;
 };
+
 const handleCommand = (command) => {
-  if (command == "loginout") {
+  if (command === "theme") {
+    showThemeDrawer.value = true;
+  } else if (command === "loginout") {
     memberService.logOut().then((res) => {
       if (res.code == 0) {
         $message.success("退出成功");
@@ -105,7 +169,6 @@ const handleCommand = (command) => {
           sessionStorage.removeItem("loginInfo");
           sessionStorage.removeItem("phone");
         }, 500);
-
       } else {
         $message.error(res.err);
       }
@@ -115,86 +178,170 @@ const handleCommand = (command) => {
 </script>
 
 <style lang="scss" scoped>
-.main-header {
-  width: 100%;
-  background: #fff;
-  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
-  transition: all 0.2s ease-in-out;
-}
-
-.header-container {
+.header-actions {
   display: flex;
-  justify-content: space-between;
-  width: 100%;
+  align-items: center;
   height: 100%;
-  align-content: center;
+  padding: 0 var(--spacing-lg);
+  gap: var(--spacing-md);
+  flex-shrink: 0;
 }
 
-.collapsed-button {
+.btn-action {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
   cursor: pointer;
-  line-height: 60px;
-  color: #000;
-  display: flex;
-  align-content: center;
-  align-items: center;
-}
+  color: var(--color-text-secondary);
+  transition: color 0.2s, background 0.2s;
 
-.header-right {
-  float: right;
-  padding-right: 0px;
-  display: flex;
-  align-content: center;
-  align-items: center;
-}
-
-.header-user-con {
-  display: flex;
-  align-items: center;
-}
-
-.btn-fullscreen {
-  font-size: 24px;
-  color: #000;
-}
-
-.btn-bell,
-.btn-fullscreen {
-  position: relative;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  border-radius: 15px;
-  cursor: pointer;
-}
-
-.btn-bell-badge {
-  position: absolute;
-  right: 0;
-  top: -2px;
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background: #f56c6c;
-  color: #222d32;
-}
-
-.btn-bell .el-icon-bell {
-  color: #222d32;
+  &:hover {
+    color: var(--color-primary);
+    background: var(--color-primary-bg);
+  }
 }
 
 .user-avator {
-  margin-left: 20px;
   display: flex;
-  justify-content: space-around;
-  align-content: center;
   align-items: center;
+  cursor: pointer;
 }
 
 .user-avator img {
   display: block;
-  width: 30px;
-  height: 30px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
-  margin-right: 10px;
+  margin-right: 6px;
+}
+
+.a-dropdown-link {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+/* 主题设置 */
+.theme-drawer-header {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-xl);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.theme-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.theme-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+.theme-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+}
+
+.color-dot {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s, box-shadow 0.15s;
+  border: 2px solid transparent;
+}
+
+.color-dot:hover {
+  transform: scale(1.15);
+}
+
+.color-dot.active {
+  box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 4px currentColor;
+}
+
+/* 布局选项 */
+.theme-layouts {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.layout-option {
+  cursor: pointer;
+  text-align: center;
+
+  &.active .layout-preview {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px var(--color-primary-bg);
+  }
+
+  &.active .layout-option-label {
+    color: var(--color-primary);
+    font-weight: 600;
+  }
+}
+
+.layout-option-label {
+  display: block;
+  margin-top: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+.layout-preview {
+  width: 80px;
+  height: 56px;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    border-color: var(--color-primary-light);
+  }
+}
+
+.layout-preview--sidebar {
+  display: flex;
+  .lp-side {
+    width: 20px;
+    background: var(--sidebar-bg);
+  }
+  .lp-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    .lp-header {
+      height: 10px;
+      background: var(--color-border-light);
+    }
+    .lp-content {
+      flex: 1;
+      background: var(--color-bg-page);
+    }
+  }
+}
+
+.layout-preview--topnav {
+  display: flex;
+  flex-direction: column;
+  .lp-topbar {
+    height: 14px;
+    background: var(--sidebar-bg);
+  }
+  .lp-content {
+    flex: 1;
+    background: var(--color-bg-page);
+  }
 }
 </style>
diff --git a/frontend/witcleansystem/src/Components/common/sideMenuCom.vue b/frontend/witcleansystem/src/Components/common/sideMenuCom.vue
index 2f0b79d..b46cd8f 100644
--- a/frontend/witcleansystem/src/Components/common/sideMenuCom.vue
+++ b/frontend/witcleansystem/src/Components/common/sideMenuCom.vue
@@ -1,9 +1,9 @@
 <template>
   <el-menu
     class="sidebar-el-menu"
-    background-color="#000"
-    text-color="#f2f2f2"
-    active-text-color="#20a0ff"
+    :background-color="sidebarBg"
+    :text-color="sidebarText"
+    :active-text-color="sidebarActive"
     :collapse-transition="false"
     :default-active="onRoutes"
     unique-opened
@@ -24,7 +24,7 @@
         <el-sub-menu :index="item.id + ''">
           <template #title>
             <el-icon>
-              <my-icon :type="item.icon" :style="{ color: '#fff' }"></my-icon>
+              <my-icon :type="item.icon"></my-icon>
             </el-icon>
             <span class="sub-title">{{ item.title }}</span>
           </template>
@@ -86,22 +86,28 @@ let onRoutes = ref();
 const $router = useRouter();
 const $route = useRoute();
 
+// 从 CSS 变量读取颜色传给 el-menu prop
+const sidebarBg = ref('#1e293b');
+const sidebarText = ref('rgba(255,255,255,0.75)');
+const sidebarActive = ref('#ffffff');
+
+const readCssColors = () => {
+  const style = getComputedStyle(document.documentElement);
+  sidebarBg.value = style.getPropertyValue('--sidebar-bg').trim() || '#1e293b';
+  sidebarText.value = 'rgba(255,255,255,0.75)';
+  sidebarActive.value = '#ffffff';
+};
+
 onMounted(() => {
-  // const menus = [
-  //   {
-  //     icon: "icon-shezhi",
-  //     isTableShow: 1,
-  //     path: "",
-  //     title: "用户中心",
-  //     type: 2,
-  //     webId: 61,
-  //   },
-  // ];
-  // menuArr.push(...menus);
-  // onRoutes.value = $route.path.replace("/", "");
+  readCssColors();
+  // 监听主题切换
+  window.addEventListener('layout-change', readCssColors);
+  // MutationObserver 监听 style 属性变化（主色切换时）
+  const observer = new MutationObserver(() => readCssColors());
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
+
   fetchSidebarData().then((res) => {
     menuArr.push(...res);
-
     onRoutes.value = $route.path;
   });
 });
@@ -126,8 +132,136 @@ const navTo = (menu, item) => {
 };
 </script>
 <style lang="scss" scoped>
-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-  min-height: 400px;
+.sidebar-el-menu {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background-color: transparent;
+
+  // 一级菜单项
+  :deep(.el-menu-item) {
+    height: 40px;
+    line-height: 40px;
+    margin: 2px 0;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    transition: all 0.2s;
+
+    .el-icon { font-size: 16px; }
+
+    &:hover, &:focus {
+      background: rgba(255, 255, 255, 0.12) !important;
+    }
+  }
+
+  // 一级菜单项选中 — 和 hover 类似的高亮效果
+  :deep(.el-menu-item.is-active) {
+    background: rgba(255, 255, 255, 0.12) !important;
+    font-weight: 600;
+  }
+
+  // 子菜单标题
+  :deep(.el-sub-menu > .el-sub-menu__title) {
+    height: 40px;
+    line-height: 40px;
+    margin: 2px 0;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    transition: all 0.2s;
+
+    .el-icon { font-size: 16px; }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.12) !important;
+    }
+  }
+
+  // 含激活子路由的顶级子菜单 — 标题高亮
+  :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+    background: rgba(255, 255, 255, 0.12) !important;
+    font-weight: 600;
+  }
+
+  // 二级/三级子菜单项
+  :deep(.el-sub-menu .el-menu .el-menu-item) {
+    height: 36px;
+    line-height: 36px;
+    font-size: var(--font-size-xs);
+    padding-left: 48px !important;
+    margin: 1px 0;
+    border-radius: var(--radius-sm);
+
+    &:hover, &:focus {
+      background: rgba(255, 255, 255, 0.1) !important;
+    }
+  }
+
+  // 子菜单项选中
+  :deep(.el-sub-menu .el-menu .el-menu-item.is-active) {
+    background: rgba(255, 255, 255, 0.12) !important;
+    font-weight: 600;
+  }
+
+  // 三级子菜单标题
+  :deep(.el-sub-menu .el-menu .el-sub-menu > .el-sub-menu__title) {
+    &:hover {
+      background: rgba(255, 255, 255, 0.1) !important;
+    }
+  }
+
+  // 折叠态图标居中
+  &.el-menu--collapse {
+    :deep(.el-menu-item) {
+      padding: 0 !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .el-icon { margin: 0; }
+    }
+    :deep(.el-sub-menu__title) {
+      padding: 0 !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .el-icon { margin: 0; }
+      .el-sub-menu__icon-arrow { display: none; }
+    }
+  }
+}
+</style>
+
+<!-- 侧边栏弹出子菜单（渲染在 body 下，需非 scoped） -->
+<style lang="scss">
+.el-menu--popup {
+  background-color: var(--color-bg-card);
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+
+  .el-menu-item {
+    color: var(--color-text-primary);
+    border-radius: var(--radius-sm);
+    margin: 1px 0;
+    font-size: var(--font-size-sm);
+
+    &:hover {
+      background: var(--color-primary-bg);
+      color: var(--color-primary);
+    }
+
+    &.is-active {
+      color: var(--color-primary);
+      background: var(--color-primary-bg);
+      font-weight: 500;
+    }
+  }
+
+  .el-sub-menu__title {
+    color: var(--color-text-primary);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+
+    &:hover {
+      background: var(--color-primary-bg);
+    }
+  }
 }
 </style>
diff --git a/frontend/witcleansystem/src/Components/common/tagsCom.vue b/frontend/witcleansystem/src/Components/common/tagsCom.vue
index 0a927f0..8751e86 100644
--- a/frontend/witcleansystem/src/Components/common/tagsCom.vue
+++ b/frontend/witcleansystem/src/Components/common/tagsCom.vue
@@ -4,7 +4,7 @@
       <el-tab-pane v-for="item in tagsList" :key="item.path" :label="item.title" :name="item.name">
         <template #label>
           <div class="custom-tabs-label">
-            <el-icon @click="reload">
+            <el-icon @click="reload" :size="12">
               <refresh />
             </el-icon>
             <span class="lable-text">{{ item.title }}</span>
@@ -62,9 +62,6 @@ const closeTags = (name) => {
   }
 };
 const setTags = (routeObj) => {
-  // const isExist = tagsList.value.some((item) => {
-  //   return item.name === routeObj.name;
-  // });
   let isExist = -1;
   tagsList.value.map((item, index) => {
     if (item.name === routeObj.name) {
@@ -100,7 +97,6 @@ const navTo = (to) => {
 const handleTags = (command) => {
   command === "other" ? closeOther() : closeAll();
 };
-// 关闭全部标签
 const closeAll = () => {
   tagsList.value.map(item => {
     $store.commit('outTagList', item.name)
@@ -108,17 +104,14 @@ const closeAll = () => {
   tagsList.value = [];
   $router.push("/");
 };
-// 关闭其他标签
 const closeOther = () => {
   const curItem = tagsList.value.filter((item) => {
     return item.path === $route.fullPath;
   });
-
   tagsList.value.map(item => {
     if (item.name != $route.name) {
       $store.commit('outTagList', item.name)
     }
-
   })
   tagsList.value = curItem;
 };
@@ -127,42 +120,42 @@ const closeOther = () => {
 <style lang="scss" scoped>
 .tags-list {
   align-items: center;
-  padding: 0 15px;
-  width: 100%;
+  padding: 0 var(--spacing-sm);
+  flex: 1;
+  min-width: 0;
   box-sizing: border-box;
   display: flex;
-  background-color: #ebebeb;
-
-  &:after {
-    clear: both;
-  }
+  height: 100%;
 }
 
 .action-btns {
-  width: 3%;
+  flex-shrink: 0;
+  margin-left: var(--spacing-xs);
 
   :deep(.el-icon--right) {
-    width: 2em;
-    height: 2em;
-    background-color: #fff;
+    width: 1.6em;
+    height: 1.6em;
+    background-color: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
     margin-left: 0;
+    cursor: pointer;
   }
 }
 
 .main-tabs {
-  padding: 5px 15px;
   box-sizing: border-box;
-  width: 97%;
+  flex: 1;
+  min-width: 0;
 
-  // float: left;
   :deep(.el-tabs__header) {
     margin-bottom: 0;
     border-bottom: none;
 
     .el-tabs__nav-prev,
     .el-tabs__nav-next {
-      font-size: 16px;
-      line-height: 36px;
+      font-size: 12px;
+      line-height: 26px;
     }
 
     .el-tabs__nav-wrap:after {
@@ -170,14 +163,21 @@ const closeOther = () => {
     }
 
     .el-tabs__item {
-      background-color: #fff;
+      background-color: var(--color-bg-card);
+      border: 1px solid var(--color-border-light);
       margin-left: 0;
-      margin-right: 10px;
-      padding: 0 10px;
-      height: 32px;
-      line-height: 32px;
-      // display: flex;
-      // align-items: center;
+      margin-right: 6px;
+      padding: 0 8px;
+      height: 26px;
+      line-height: 26px;
+      font-size: var(--font-size-xs);
+      border-radius: var(--radius-sm);
+    }
+
+    .el-tabs__item.is-active {
+      color: var(--color-primary);
+      border-color: var(--color-primary-bg);
+      background: var(--color-primary-bg);
     }
 
     .el-tabs__active-bar {
@@ -189,7 +189,7 @@ const closeOther = () => {
       align-items: center;
 
       .lable-text {
-        margin-left: 5px;
+        margin-left: 3px;
       }
     }
   }
diff --git a/frontend/witcleansystem/src/Components/common/topMenuCom.vue b/frontend/witcleansystem/src/Components/common/topMenuCom.vue
new file mode 100644
index 0000000..f12b94d
--- /dev/null
+++ b/frontend/witcleansystem/src/Components/common/topMenuCom.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="top-nav-bar">
+    <div class="top-nav-left">
+      <div class="top-nav-logo">
+        <span class="top-nav-logo-text">智慧清洁</span>
+      </div>
+      <el-menu
+        class="top-nav-menu"
+        mode="horizontal"
+        :default-active="onRoutes"
+        :ellipsis="false"
+        :background-color="sidebarBg"
+        :text-color="sidebarText"
+        :active-text-color="sidebarActive"
+      >
+        <template v-for="item in menuArr" :key="item.id">
+          <template v-if="!item.children || item.children.length == 0">
+            <el-menu-item :index="item.path" @click="navTo(item)">
+              <el-icon><my-icon :type="item.icon"></my-icon></el-icon>
+              <span>{{ item.title }}</span>
+            </el-menu-item>
+          </template>
+          <template v-else>
+            <el-sub-menu :index="item.id + ''" popper-class="top-nav-popper">
+              <template #title>
+                <el-icon><my-icon :type="item.icon"></my-icon></el-icon>
+                <span>{{ item.title }}</span>
+              </template>
+              <template v-for="subItem in item.children" :key="subItem.id">
+                <template v-if="!subItem.children || subItem.children.length == 0">
+                  <el-menu-item :index="subItem.path" @click="navTo(subItem)">
+                    <span>{{ subItem.title }}</span>
+                  </el-menu-item>
+                </template>
+                <template v-else>
+                  <el-sub-menu :index="subItem.id + ''" popper-class="top-nav-popper top-nav-sub-popper">
+                    <template #title>
+                      <span>{{ subItem.title }}</span>
+                    </template>
+                    <el-menu-item
+                      v-for="thirdItem in subItem.children"
+                      :key="thirdItem.id"
+                      :index="thirdItem.path"
+                      @click="navTo(thirdItem)"
+                    >
+                      <span>{{ thirdItem.title }}</span>
+                    </el-menu-item>
+                  </el-sub-menu>
+                </template>
+              </template>
+            </el-sub-menu>
+          </template>
+        </template>
+      </el-menu>
+    </div>
+
+    <div class="top-nav-right">
+      <header-com></header-com>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "topMenuCom",
+};
+</script>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { commonService } from "../../ApiService/commonService";
+import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+import headerCom from "@/Components/common/headerCom.vue";
+
+let menuArr = reactive([]);
+let onRoutes = ref();
+const $router = useRouter();
+const $route = useRoute();
+
+const sidebarBg = ref('#1e293b');
+const sidebarText = ref('rgba(255,255,255,0.75)');
+const sidebarActive = ref('#ffffff');
+
+const readCssColors = () => {
+  const style = getComputedStyle(document.documentElement);
+  sidebarBg.value = style.getPropertyValue('--sidebar-bg').trim() || '#1e293b';
+  sidebarText.value = 'rgba(255,255,255,0.75)';
+  sidebarActive.value = '#ffffff';
+};
+
+onMounted(() => {
+  readCssColors();
+  window.addEventListener('layout-change', readCssColors);
+  const observer = new MutationObserver(() => readCssColors());
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
+
+  fetchSidebarData().then((res) => {
+    menuArr.push(...res);
+    onRoutes.value = $route.path;
+  });
+});
+
+onBeforeRouteUpdate((to) => {
+  onRoutes.value = to.path;
+});
+
+const fetchSidebarData = () => {
+  return new Promise((resolve) => {
+    commonService.sidebarData().then((res) => {
+      if (res.code == 0) {
+        resolve(res.data.children);
+      }
+    });
+  });
+};
+
+const navTo = (item) => {
+  $router.push({
+    path: item.path,
+    query: { wId: item.webId, pageType: item.type },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.top-nav-bar {
+  display: flex;
+  align-items: center;
+  height: var(--header-height);
+  background: var(--sidebar-bg);
+  padding: 0 var(--spacing-xl);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+}
+
+.top-nav-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  height: 100%;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.top-nav-logo {
+  flex-shrink: 0;
+  margin-right: var(--spacing-2xl);
+  padding-right: var(--spacing-xl);
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  height: 60%;
+  display: flex;
+  align-items: center;
+}
+
+.top-nav-logo-text {
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff;
+  letter-spacing: 2px;
+  white-space: nowrap;
+}
+
+.top-nav-menu {
+  flex-shrink: 0;
+  border-bottom: none;
+  height: 100%;
+
+  :deep(.el-menu-item),
+  :deep(.el-sub-menu__title) {
+    height: var(--header-height);
+    line-height: var(--header-height);
+    padding: 0 var(--spacing-lg);
+    border-bottom: 2px solid transparent;
+    font-size: var(--font-size-sm);
+    transition: all 0.2s;
+    color: var(--sidebar-text) !important;
+
+    span, i, .el-icon {
+      color: inherit !important;
+    }
+
+    &:hover {
+      color: #fff !important;
+      background: rgba(255, 255, 255, 0.06);
+      span, i, .el-icon { color: inherit !important; }
+    }
+  }
+
+  :deep(.el-menu-item.is-active) {
+    color: #fff !important;
+    background: rgba(255, 255, 255, 0.1);
+    border-bottom-color: var(--sidebar-active);
+    font-weight: 500;
+    span, i, .el-icon { color: inherit !important; }
+  }
+
+  :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+    color: #fff !important;
+    border-bottom-color: var(--sidebar-active);
+    font-weight: 500;
+    span, i, .el-icon { color: inherit !important; }
+  }
+}
+
+.top-nav-right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-left: var(--spacing-lg);
+  padding-left: var(--spacing-lg);
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+
+  :deep(.header-actions) {
+    padding: 0;
+    gap: var(--spacing-sm);
+  }
+
+  :deep(.a-dropdown-link) {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  :deep(.user-avator img) {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  :deep(.btn-action) {
+    color: rgba(255, 255, 255, 0.6);
+    &:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+</style>
+
+<!-- 弹出菜单样式（非 scoped） -->
+<style lang="scss">
+.top-nav-popper {
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+
+  .el-menu {
+    background: var(--color-bg-card) !important;
+    padding: var(--spacing-xs);
+  }
+
+  .el-menu-item {
+    background: transparent !important;
+    border-radius: var(--radius-sm);
+    margin: 1px 0;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-primary) !important;
+
+    &:hover {
+      background: var(--color-primary-bg) !important;
+      color: var(--color-primary) !important;
+    }
+    &.is-active {
+      color: var(--color-primary) !important;
+      background: var(--color-primary-bg) !important;
+      font-weight: 500;
+    }
+  }
+
+  .el-sub-menu__title {
+    background: transparent !important;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-primary) !important;
+    &:hover {
+      background: var(--color-primary-bg) !important;
+      color: var(--color-primary) !important;
+    }
+  }
+
+  .el-sub-menu.is-active > .el-sub-menu__title {
+    color: var(--color-primary) !important;
+  }
+}
+
+</style>
diff --git a/frontend/witcleansystem/src/Components/public/quButttonGroup/buttonGroup.vue b/frontend/witcleansystem/src/Components/public/quButttonGroup/buttonGroup.vue
index a6a7c62..8d63691 100644
--- a/frontend/witcleansystem/src/Components/public/quButttonGroup/buttonGroup.vue
+++ b/frontend/witcleansystem/src/Components/public/quButttonGroup/buttonGroup.vue
@@ -4,6 +4,7 @@
       <el-button
         :type="item.theme == '' ? 'primary' : item.theme"
         class="button-item"
+        size="small"
         :icon="item.icon"
         :class="item.className"
         @click="buttonClick(item)"
@@ -32,9 +33,9 @@ const buttonClick = (button) => {
 <style lang="scss" scoped>
 .button-group {
   width: 100%;
-  padding: 15px 0;
+  padding: var(--spacing-sm) 0;
   .button-item {
-    margin-right: 10px;
+    margin-right: var(--spacing-sm);
   }
 }
 </style>
diff --git a/frontend/witcleansystem/src/Components/public/quSearchArea/searchArea.vue b/frontend/witcleansystem/src/Components/public/quSearchArea/searchArea.vue
new file mode 100644
index 0000000..4f5757b
--- /dev/null
+++ b/frontend/witcleansystem/src/Components/public/quSearchArea/searchArea.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="qu-search-area" ref="rootRef">
+    <div class="qu-search-card">
+      <div class="qu-search-card-header">
+        <el-icon :size="14" class="qu-search-card-icon"><search /></el-icon>
+        <span class="qu-search-card-title">筛选查询</span>
+      </div>
+      <el-form
+        ref="inlineFormRef"
+        :model="model"
+        inline
+        size="small"
+        class="qu-search-inline"
+        :class="{ 'qu-search--collapsed': hasAdvanced && !expanded }"
+      >
+        <slot></slot>
+        <el-form-item class="qu-search-form-actions">
+          <el-button type="primary" icon="Search" size="small" @click="handleSearch">查询</el-button>
+          <el-button icon="Refresh" size="small" @click="handleReset">重置</el-button>
+          <el-button
+            v-if="hasAdvanced"
+            link
+            type="primary"
+            size="small"
+            @click="expanded = !expanded"
+          >
+            {{ expanded ? '收起' : '展开' }}
+            <el-icon>
+              <arrow-up v-if="expanded" />
+              <arrow-down v-else />
+            </el-icon>
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "qu-search-area",
+};
+</script>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+
+const props = defineProps({
+  model: {
+    type: Object,
+    default: () => ({}),
+  },
+  maxVisible: {
+    type: Number,
+    default: 5,
+  },
+});
+
+const $emit = defineEmits(["search", "reset"]);
+
+const inlineFormRef = ref();
+const rootRef = ref();
+const hasAdvanced = ref(false);
+const expanded = ref(false);
+const hiddenItems = ref([]);
+
+onMounted(async () => {
+  await nextTick();
+  const formEl = inlineFormRef.value?.$el;
+  if (formEl) {
+    const items = formEl.querySelectorAll(":scope > .el-form-item:not(.qu-search-form-actions)");
+    hasAdvanced.value = items.length > props.maxVisible;
+    if (hasAdvanced.value) {
+      items.forEach((item, idx) => {
+        if (idx >= props.maxVisible) {
+          hiddenItems.value.push(item);
+          item.style.display = "none";
+        }
+      });
+    }
+  }
+});
+
+// 展开/收起切换
+import { watch } from "vue";
+watch(expanded, (val) => {
+  hiddenItems.value.forEach((item) => {
+    item.style.display = val ? "" : "none";
+  });
+});
+
+const handleSearch = () => {
+  $emit("search");
+};
+
+const handleReset = () => {
+  $emit("reset");
+};
+
+defineExpose({
+  resetFields: () => {
+    inlineFormRef.value?.resetFields();
+  },
+  get clientHeight() {
+    return rootRef.value?.clientHeight || 0;
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.qu-search-area {
+  padding: var(--spacing-sm) var(--spacing-md);
+  flex-shrink: 0;
+}
+
+.qu-search-card {
+  background: var(--color-bg-page);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.qu-search-card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-sm);
+  gap: var(--spacing-xs);
+}
+
+.qu-search-card-icon {
+  color: var(--color-primary);
+}
+
+.qu-search-card-title {
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+}
+
+.qu-search-inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.qu-search-form-actions {
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/witcleansystem/src/Components/public/quTable/table.vue b/frontend/witcleansystem/src/Components/public/quTable/table.vue
index 6974f45..25a11dc 100644
--- a/frontend/witcleansystem/src/Components/public/quTable/table.vue
+++ b/frontend/witcleansystem/src/Components/public/quTable/table.vue
@@ -1,6 +1,19 @@
 <template>
-  <div style="width: 100%; background: #fff">
-    <el-table ref="quTabel" :data="tableData" :max-height="height" class="qu-table" :row-class-name="tableRowClassName"
+  <div class="qu-table-wrap" ref="tableWrapRef">
+    <div class="table-toolbar" v-if="tableButtons && tableButtons.length">
+      <div class="table-toolbar-buttons">
+        <el-button
+          v-for="(item, index) in tableButtons"
+          :key="index"
+          :type="item.theme == '' ? 'primary' : item.theme"
+          size="small"
+          :icon="item.icon"
+          :class="item.className"
+          @click="$emits('buttonClick', item)"
+        >{{ item.cnName }}</el-button>
+      </div>
+    </div>
+    <el-table ref="quTabel" :data="tableData" :max-height="autoTableHeight" class="qu-table" :row-class-name="tableRowClassName"
       highlight-current-row style="width: 100%" stripe border @header-dragend="headerDragend" @select-all="selectAll"
       @select="select" @selection-change="selectionChange" @sort-change="sortChange">
       <el-table-column type="selection" width="55" v-if="showSelect" fixed />
@@ -14,7 +27,7 @@
         </template>
       </el-table-column>
       <template v-for="(header, index) in tableHeader" :key="index">
-        <el-table-column :prop="header.enName" :label="header.cnName" :width="header.width" v-if="header.isTableShow"
+        <el-table-column :prop="header.enName" :label="header.cnName" :min-width="header.width" v-if="header.isTableShow"
           :fixed="header.fixed" :sortable="header.isSelect == 1 ? 'custom' : false"
           :show-overflow-tooltip="showOverflowTooltip">
           <template #default="scope">
@@ -73,7 +86,7 @@
                 </div>
               </template>
               <template #reference>
-                <el-button icon="more-filled" class="get-more" size="small" :circle="true" color="#0084ff"
+                <el-button icon="more-filled" class="get-more" size="small" :circle="true" color="var(--color-primary)"
                   style="color: white; font-size: 14px">
                 </el-button>
               </template>
@@ -82,7 +95,7 @@
         </el-table-column>
       </template>
     </el-table>
-    <el-pagination style="padding: 10px" v-if="showPage" v-model:currentPage="pageProps.page"
+    <el-pagination class="qu-table-pagination" v-if="showPage" v-model:currentPage="pageProps.page"
       :page-size="pageProps.rows" :page-sizes="[10, 20, 50, 100]" small="small" :background="true"
       layout="total, prev, pager, next,sizes" :total="pageProps.records" @size-change="handleSizeChange"
       @current-change="handleCurrentChange"></el-pagination>
@@ -131,7 +144,7 @@ export default {
 };
 </script>
 <script setup>
-import { ref, getCurrentInstance, watch } from "vue";
+import { ref, computed, getCurrentInstance, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
 import { useRoute } from "vue-router";
 import draggable from "vuedraggable";
 const props = defineProps({
@@ -190,6 +203,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  // 表格顶部操作按钮（可选，不传则不显示）
+  tableButtons: {
+    type: Array,
+    default: () => [],
+  },
 });
 // 定义emits方法
 const $emits = defineEmits([
@@ -201,7 +219,48 @@ const $emits = defineEmits([
   "sortChange",
   "pageChange",
   "rowButtonClick",
+  "buttonClick",
 ]);
+// 自动高度计算
+const tableWrapRef = ref();
+const observedHeight = ref(0);
+let resizeObserver = null;
+
+const autoTableHeight = computed(() => {
+  if (observedHeight.value > 0) return observedHeight.value;
+  return props.height;
+});
+
+const calcTableHeight = () => {
+  const wrap = tableWrapRef.value;
+  if (!wrap || !wrap.parentElement) return;
+  // 用父容器高度计算，避免循环
+  const parentHeight = wrap.parentElement.clientHeight;
+  if (parentHeight <= 0) return;
+  const toolbar = wrap.querySelector('.table-toolbar');
+  const pagination = wrap.querySelector('.qu-table-pagination');
+  const toolbarH = toolbar ? toolbar.offsetHeight : 0;
+  const paginationH = pagination ? pagination.offsetHeight : 0;
+  const available = parentHeight - toolbarH - paginationH;
+  if (available > 100) {
+    observedHeight.value = available;
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    calcTableHeight();
+    if (tableWrapRef.value?.parentElement) {
+      resizeObserver = new ResizeObserver(() => calcTableHeight());
+      resizeObserver.observe(tableWrapRef.value.parentElement);
+    }
+  });
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+
 // 定义数据
 const showSetDialog = ref(false); //自定义表头 弹窗  隐藏/显示
 let custTableHeader = ref([]); //自定义表头数据
@@ -209,7 +268,7 @@ const quTabel = ref(); //表格ref
 const { $common } = getCurrentInstance().appContext.config.globalProperties;
 
 let selectItems = ref([]);
-const selectItemsColors = ["#67C23A", "#E6A23C", "#F56C6C", "#336600", "#660066", "#CC3366", "#666699", "#FF6600", "#66CCFF", "#996600", "#909399"];
+const selectItemsColors = ["#22c55e", "#f59e0b", "#ef4444", "#6366f1", "#8b5cf6", "#ec4899", "#6b7280", "#f97316", "#06b6d4", "#a16207", "#9ca3af"];
 let route = useRoute()
 watch(
   () => [props.tableHeader, props.tableData],
@@ -355,7 +414,39 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+.qu-table-wrap {
+  width: 100%;
+  height: 100%;
+  background: var(--color-bg-card);
+  display: flex;
+  flex-direction: column;
+}
+
+.qu-table-pagination {
+  padding: 10px var(--spacing-sm) 2px;
+  flex-shrink: 0;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+
+  .table-toolbar-buttons {
+    display: flex;
+    gap: var(--spacing-xs);
+  }
+}
+
 .qu-table {
+  flex: 1;
+  min-height: 0;
+
+  :deep(.el-table__header) th .cell {
+    white-space: nowrap;
+  }
+
   :deep(.warning-row) {
     td.el-table__cell {
       background: var(--el-color-warning-light-9) !important;
@@ -369,9 +460,19 @@ defineExpose({
   }
 
   .table-tag {
-    padding: 2px 5px;
+    padding: 2px 8px;
     color: #fff;
-    border-radius: 5px;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xs);
+  }
+
+  // 表格底部分隔修饰——区分表格与分页，标识滚动边界
+  &::after {
+    content: '';
+    display: block;
+    height: 3px;
+    background: linear-gradient(to right, var(--color-primary-bg), var(--color-primary-light), var(--color-primary-bg));
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
   }
 }
 
diff --git a/frontend/witcleansystem/src/Components/public/quTree/tree.vue b/frontend/witcleansystem/src/Components/public/quTree/tree.vue
index 52fe6ee..517ddba 100644
--- a/frontend/witcleansystem/src/Components/public/quTree/tree.vue
+++ b/frontend/witcleansystem/src/Components/public/quTree/tree.vue
@@ -20,7 +20,7 @@
       :default-expanded-keys="defaultExpandedKeys"
     >
       <template #default="{ node, data }">
-        <div style="line-height: 16px">
+        <div class="tree-node-label">
           <span>{{ node.label }}</span>
         </div>
       </template>
@@ -71,9 +71,17 @@ const nodeClick = (dom, node, cb) => {
 .qu-tree {
   width: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: var(--spacing-xl);
 }
 .top-input {
-  margin-bottom: 20px;
+  margin-bottom: var(--spacing-lg);
+}
+.tree-node-label {
+  font-size: var(--font-size-base);
+  line-height: 28px;
+}
+
+:deep(.el-tree-node__content) {
+  height: 32px;
 }
 </style>
diff --git a/frontend/witcleansystem/src/Components/taskCenter/purifierTaskDetailCom.vue b/frontend/witcleansystem/src/Components/taskCenter/purifierTaskDetailCom.vue
index 4bb20e6..9cd7aae 100644
--- a/frontend/witcleansystem/src/Components/taskCenter/purifierTaskDetailCom.vue
+++ b/frontend/witcleansystem/src/Components/taskCenter/purifierTaskDetailCom.vue
@@ -458,7 +458,7 @@ const taskObjAndWork = reactive({
 
 <style lang="scss" scoped>
 .collapse-item {
-  margin-top: -20px;
+  padding-top: 20px;
   :deep(.el-collapse-item__header) {
     background-color: #f0f0f0;
   }
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ObjectDataManage.vue b/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ObjectDataManage.vue
index 391f428..b372ee7 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ObjectDataManage.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ObjectDataManage.vue
@@ -2,122 +2,109 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 对象数据管理 -->
   <div class="regional-grid" v-if="!pageBasicsData.loading">
-    <!-- 左侧树结构区域 -->
-    <div class="regional-grid-left">
-      <qu-tree
-        suffixIcon="Search"
-        :treeData="pageBasicsData.treeData[0].childrenNode"
-        :defaultProps="{ children: 'childrenNode', label: 'name' }"
-        @nodeClick="nodeClick"
-      />
+    <!-- 顶部功能按钮 -->
+    <div class="grid-right-btn" ref="topSearchRef">
+      <!-- 搜索区域 -->
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+          <el-form-item label="所属站点" prop="districtId">
+            <div class="screen-item">
+              <el-select
+                filterable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.districtId"
+              >
+                <el-option
+                  :label="item.name"
+                  :value="item.id"
+                  v-for="item in pageBasicsData.districtList"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="对象分类">
+            <el-cascader
+              ref="gridCascaderRef"
+              v-model="gridCascaderValue"
+              :options="gridTreeOptions"
+              :props="{
+                children: 'childrenNode',
+                label: 'name',
+                value: 'name',
+                checkStrictly: true,
+                emitPath: false,
+              }"
+              clearable
+              filterable
+              placeholder="请选择对象分类"
+              style="width: 200px"
+              @change="gridCascaderChange"
+            />
+          </el-form-item>
+          <el-form-item label="对象名称" prop="name">
+            <div class="screen-item">
+              <el-input
+                placeholder="请输入对象名称"
+                clearable
+                :disabled="!!gridCascaderValue"
+                v-model="pageBasicsData.screenForm.name"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="分类级别" prop="level">
+            <div class="screen-item">
+              <el-select
+                clearable
+                filterable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.level"
+              >
+                <el-option
+                  :label="item.key"
+                  :value="item.value"
+                  v-for="item in pageBasicsData.classifyLevelList"
+                  :key="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="停/启用状态" prop="status">
+            <div class="screen-item">
+              <el-select
+                filterable
+                clearable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.status"
+              >
+                <el-option
+                  :label="item.key"
+                  :value="item.value"
+                  v-for="item in pageBasicsData.statusList"
+                  :key="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+        </qu-search-area>
     </div>
-    <!-- 右侧区域 -->
-    <div class="regional-grid-right">
-      <!-- 顶部功能按钮 -->
-      <div class="grid-right-btn" ref="topSearchRef">
-        <qu-button-group
-          :buttonList="pageBasicsData.buttonList"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-        <!-- 搜索区域 -->
-        <div class="grid-right-search">
-          <el-form
-            ref="screenFormRef"
-            :model="pageBasicsData.screenForm"
-            inline
-            size="small"
-          >
-            <el-form-item label="所属站点" prop="districtId">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.districtId"
-                >
-                  <el-option
-                    :label="item.name"
-                    :value="item.id"
-                    v-for="item in pageBasicsData.districtList"
-                    :key="item.id"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item label="对象名称" prop="name">
-              <div class="screen-item">
-                <el-input
-                  placeholder="请输入对象名称"
-                  clearable
-                  v-model="pageBasicsData.screenForm.name"
-                ></el-input>
-              </div>
-            </el-form-item>
-            <el-form-item label="分类级别" prop="level">
-              <div class="screen-item">
-                <el-select
-                  clearable
-                  filterable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.level"
-                >
-                  <el-option
-                    :label="item.key"
-                    :value="item.value"
-                    v-for="item in pageBasicsData.classifyLevelList"
-                    :key="item.value"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item label="停/启用状态" prop="status">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  clearable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.status"
-                >
-                  <el-option
-                    :label="item.key"
-                    :value="item.value"
-                    v-for="item in pageBasicsData.statusList"
-                    :key="item.value"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" round @click="restSearch"
-                >查询</el-button
-              >
-              <el-button
-                round
-                icon="Refresh"
-                type="warning"
-                @click="clearScreen"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
 
-      <!-- 表格 -->
-      <div class="main-table">
-        <qu-table
-          :custom="true"
-          :showPage="true"
-          :showIndex="true"
-          :height="pageBasicsData.tableHeight"
-          :tableData="tableData"
-          :tableHeader="tableHeader"
-          :pageProps="pageProps"
-          @pageChange="pageChange"
-          :rowButtons="rowButtons"
-          @rowButtonClick="rowButtonClick"
-          @fetchTableAttr="fetchTableAttr"
-        ></qu-table>
-      </div>
+    <!-- 表格 -->
+    <div class="main-table">
+      <qu-table
+        :custom="true"
+        :showPage="true"
+        :showIndex="true"
+        :height="pageBasicsData.tableHeight"
+        :tableData="tableData"
+        :tableHeader="tableHeader"
+        :pageProps="pageProps"
+        @pageChange="pageChange"
+        :rowButtons="rowButtons"
+        @rowButtonClick="rowButtonClick"
+        @fetchTableAttr="fetchTableAttr"
+        :tableButtons="pageBasicsData.buttonList"
+        @buttonClick="buttonClick"
+      ></qu-table>
     </div>
   </div>
 
@@ -145,12 +132,7 @@
     @close="closeAddDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="addRef"
       :model="addForm"
@@ -312,12 +294,7 @@
     @close="closeEditDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="editRef"
       :model="editForm"
@@ -455,7 +432,7 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, reactive, onMounted, watch, nextTick } from "vue";
+import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
 import templateHooks from "@/Hooks/templateHooks.js";
 import { objectManageService } from "@/ApiService/basicInfoService";
 import { dropdownService } from "@/ApiService/dropdownService";
@@ -464,7 +441,7 @@ import $api from "@/Apis/api";
 
 // 页面基础数据
 const pageBasicsData = reactive({
-  treeData: [{ childrenNode: [] }], // 左侧树结构数据
+  treeData: [{ childrenNode: [] }], // 网格树结构数据
   tableHeight: 200, //表格高度
   loading: true, // 加载状态
   screenForm: {
@@ -474,6 +451,7 @@ const pageBasicsData = reactive({
     level: "",
     status: "",
     treeFlag: 0,
+    objectName: "",
   },
   buttonList: [
     // 顶部按钮列表
@@ -524,6 +502,20 @@ const pageBasicsData = reactive({
   action: "",
 });
 
+// 网格级联选择器
+const gridCascaderValue = ref('');
+const gridCascaderRef = ref();
+
+// 网格级联选择器数据（来自树结构）
+const gridTreeOptions = computed(() => pageBasicsData.treeData[0]?.childrenNode || []);
+
+// 网格级联选择器变更事件
+const gridCascaderChange = (val) => {
+  pageBasicsData.screenForm.treeFlag = val ? 1 : 0;
+  pageBasicsData.screenForm.objectName = val || '';
+  pageBasicsData.screenForm.name = val || '';
+};
+
 // 新增弹窗字段
 let addForm = reactive({
   districtId: "",
@@ -606,6 +598,8 @@ watch(
           pageBasicsData.screenForm[key] = "";
         }
       }
+      gridCascaderValue.value = '';
+      fetchTree();
     }
   }
 );
@@ -763,13 +757,7 @@ const fetchData = () => {
     });
 };
 
-// 左侧树结构点击事件
-const nodeClick = ({ dom }) => {
-  pageBasicsData.screenForm.treeFlag = 1;
-  pageBasicsData.screenForm.name = dom.name;
-  fetchData();
-};
-// 左侧树结构数据
+// 网格树结构数据
 const fetchTree = () => {
   const { districtId } = pageBasicsData.screenForm;
   dropdownService.getObjectTree({ districtId }).then(async (res) => {
@@ -791,13 +779,15 @@ const fetchParentObject = (id) => {
 //查询
 const restSearch = () => {
   pageProps.page = 1;
-  pageBasicsData.screenForm.treeFlag = 0;
   fetchData();
   fetchTree();
 };
 // 清空搜索
 const clearScreen = () => {
   screenFormRef.value.resetFields();
+  gridCascaderValue.value = '';
+  pageBasicsData.screenForm.objectName = '';
+  pageBasicsData.screenForm.treeFlag = 0;
   fetchData();
   fetchTree();
 };
@@ -834,32 +824,18 @@ export default {
 <style lang="scss" scoped>
 .regional-grid {
   box-sizing: border-box;
-  .regional-grid-left {
-    position: fixed;
-    z-index: 999;
-    left: 223px;
-    min-width: 260px;
-    height: calc(100vh - 126px);
-    padding: 20px;
-    box-sizing: border-box;
-    background-color: #fff;
-    border-right: 1px solid #eee;
-    overflow: auto;
+  height: calc(100vh - var(--page-top-offset));
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-card);
+  overflow: auto;
+
+  .grid-right-search {
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    align-items: center;
   }
-  .regional-grid-right {
-    height: calc(100vh - 146px);
-    margin-left: 294px;
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
-    .grid-right-search {
-      padding: 10px 0 10px 10px;
-      display: flex;
-      align-items: center;
-    }
-    .el-form {
-      margin: 8px 0;
-    }
+  .el-form {
+    margin: var(--spacing-sm) 0;
   }
 }
 .dialog-footer button:first-child {
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/SceneObjectManage.vue b/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/SceneObjectManage.vue
index a5bf39f..703e3c8 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/SceneObjectManage.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/SceneObjectManage.vue
@@ -2,49 +2,46 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 场景对象管理 -->
   <div class="regional-grid" v-if="!pageBasicsData.loading">
-    <!-- 左侧树结构区域 -->
-    <div class="regional-grid-left">
-      <qu-tree
-        suffixIcon="Search"
-        :treeData="pageBasicsData.sceneNameData[0].childNode"
-        :defaultProps="{ children: 'childNode', label: 'name' }"
-        @nodeClick="nodeClick"
-      />
-    </div>
-
-    <!-- 右侧区域 -->
-    <div class="regional-grid-right">
-      <!-- 顶部功能按钮 -->
-      <div class="grid-right-btn" ref="topSearchRef">
-        <qu-button-group
-          :buttonList="pageBasicsData.buttonList"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-        <!-- 搜索区域 -->
-        <div class="grid-right-search">
-          <el-form
-            ref="screenFormRef"
-            :model="pageBasicsData.screenForm"
-            inline
-            size="small"
-          >
-            <el-form-item label="所属站点" prop="districtId">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.districtId"
-                >
-                  <el-option
-                    :label="item.name"
-                    :value="item.id"
-                    v-for="item in pageBasicsData.districtList"
-                    :key="item.id"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item label="对象" prop="objectIds">
+    <!-- 顶部功能按钮 -->
+    <div class="grid-right-btn" ref="topSearchRef">
+      <!-- 搜索区域 -->
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+          <el-form-item label="所属站点" prop="districtId">
+            <div class="screen-item">
+              <el-select
+                filterable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.districtId"
+              >
+                <el-option
+                  :label="item.name"
+                  :value="item.id"
+                  v-for="item in pageBasicsData.districtList"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="网格">
+            <el-cascader
+              ref="gridCascaderRef"
+              v-model="gridCascaderValue"
+              :options="gridTreeOptions"
+              :props="{
+                children: 'childNode',
+                label: 'name',
+                value: 'gridId',
+                checkStrictly: true,
+                emitPath: false,
+              }"
+              clearable
+              filterable
+              placeholder="请选择网格"
+              style="width: 200px"
+              @change="gridCascaderChange"
+            />
+          </el-form-item>
+          <el-form-item label="对象" prop="objectIds">
               <div class="screen-item">
                 <el-cascader
                   ref="screenObjectRef"
@@ -104,38 +101,26 @@
                 ></el-input>
               </div>
             </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" round @click="restSearch"
-                >查询</el-button
-              >
-              <el-button
-                round
-                icon="Refresh"
-                type="warning"
-                @click="clearScreen"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
+        </qu-search-area>
+    </div>
 
-      <!-- 表格 -->
-      <div class="main-table">
-        <qu-table
-          :custom="true"
-          :showPage="true"
-          :showIndex="true"
-          :height="pageBasicsData.tableHeight"
-          :tableData="tableData"
-          :tableHeader="tableHeader"
-          :pageProps="pageProps"
-          @pageChange="pageChange"
-          :rowButtons="rowButtons"
-          @rowButtonClick="rowButtonClick"
-          @fetchTableAttr="fetchTableAttr"
-        ></qu-table>
-      </div>
+    <!-- 表格 -->
+    <div class="main-table">
+      <qu-table
+        :custom="true"
+        :showPage="true"
+        :showIndex="true"
+        :height="pageBasicsData.tableHeight"
+        :tableData="tableData"
+        :tableHeader="tableHeader"
+        :pageProps="pageProps"
+        @pageChange="pageChange"
+        :rowButtons="rowButtons"
+        @rowButtonClick="rowButtonClick"
+        @fetchTableAttr="fetchTableAttr"
+        :tableButtons="pageBasicsData.buttonList"
+        @buttonClick="buttonClick"
+      ></qu-table>
     </div>
   </div>
 
@@ -147,12 +132,7 @@
     @close="closeAddDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="addRef"
       :model="addForm"
@@ -297,12 +277,7 @@
     @close="closeEditDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="editRef"
       :model="editForm"
@@ -411,7 +386,7 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, reactive, onMounted, watch, nextTick } from "vue";
+import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
 import templateHooks from "@/Hooks/templateHooks.js";
 import { sceneMatterManageService } from "@/ApiService/basicInfoService";
 import { dropdownService } from "@/ApiService/dropdownService";
@@ -516,6 +491,11 @@ const addRef = ref(); // 新增弹窗ref,表单校验
 const editRef = ref(); // 新增弹窗ref,表单校验
 const screenFormRef = ref(); //搜索区ref元素
 const currentScenesRef = ref(); //场景名称
+const gridCascaderRef = ref(); // 网格级联ref
+const gridCascaderValue = ref(''); // 网格级联选中值
+
+// 网格级联选项数据（来自场景树）
+const gridTreeOptions = computed(() => pageBasicsData.sceneNameData[0].childNode);
 
 onMounted(() => {
   fetchDistricts();
@@ -574,6 +554,17 @@ watch(
     }
   }
 );
+watch(
+  () => pageBasicsData.screenForm.districtId,
+  () => {
+    gridCascaderValue.value = '';
+    pageBasicsData.screenForm.treeFlag = 0;
+    pageBasicsData.screenForm.isscene = undefined;
+    pageBasicsData.screenForm.level = undefined;
+    pageBasicsData.screenForm.sceneId = undefined;
+    pageBasicsData.screenForm.gridId = undefined;
+  }
+);
 // #endregion watch定义end
 
 // #region 函数定义start
@@ -728,7 +719,7 @@ const fetchData = () => {
     });
 };
 
-// 左侧场景树结构点击事件
+// 左侧场景树结构点击事件（保留以兼容潜在调用）
 const nodeClick = ({ dom }) => {
   pageBasicsData.screenForm.treeFlag = 1;
   pageBasicsData.screenForm.isscene = dom.isscene;
@@ -737,6 +728,24 @@ const nodeClick = ({ dom }) => {
   pageBasicsData.screenForm.gridId = dom.gridId;
   fetchData();
 };
+// 网格级联选择change事件
+const gridCascaderChange = (val) => {
+  if (val) {
+    const checkedNodes = gridCascaderRef.value.getCheckedNodes();
+    const node = checkedNodes && checkedNodes[0] ? checkedNodes[0].data : null;
+    pageBasicsData.screenForm.treeFlag = 1;
+    pageBasicsData.screenForm.isscene = node ? node.isscene : undefined;
+    pageBasicsData.screenForm.level = node ? node.level : undefined;
+    pageBasicsData.screenForm.sceneId = node ? node.sceneId : undefined;
+    pageBasicsData.screenForm.gridId = val;
+  } else {
+    pageBasicsData.screenForm.treeFlag = 0;
+    pageBasicsData.screenForm.isscene = undefined;
+    pageBasicsData.screenForm.level = undefined;
+    pageBasicsData.screenForm.sceneId = undefined;
+    pageBasicsData.screenForm.gridId = undefined;
+  }
+};
 // 左侧场景树数据
 const fetchSceneTree = (id, isAdd) => {
   const { districtId } = pageBasicsData.screenForm;
@@ -775,7 +784,6 @@ const fetchObjectTree = (id, isAdd) => {
 //查询
 const restSearch = () => {
   pageProps.page = 1;
-  pageBasicsData.screenForm.treeFlag = 0;
   fetchData();
   fetchSceneTree();
   fetchObjectTree();
@@ -783,6 +791,12 @@ const restSearch = () => {
 // 清空搜索
 const clearScreen = () => {
   screenFormRef.value.resetFields();
+  gridCascaderValue.value = '';
+  pageBasicsData.screenForm.treeFlag = 0;
+  pageBasicsData.screenForm.isscene = undefined;
+  pageBasicsData.screenForm.level = undefined;
+  pageBasicsData.screenForm.sceneId = undefined;
+  pageBasicsData.screenForm.gridId = undefined;
   fetchData();
   fetchSceneTree();
 };
@@ -816,33 +830,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 .regional-grid {
+  height: calc(100vh - var(--page-top-offset));
   box-sizing: border-box;
-  .regional-grid-left {
-    position: fixed;
-    z-index: 999;
-    left: 223px;
-    min-width: 260px;
-    height: calc(100vh - 126px);
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #fff;
-    border-right: 1px solid #eee;
-    overflow: auto;
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-card);
+  overflow: auto;
+  .grid-right-search {
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    align-items: center;
   }
-  .regional-grid-right {
-    height: calc(100vh - 146px);
-    margin-left: 294px;
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
-    .grid-right-search {
-      padding: 10px 0 10px 10px;
-      display: flex;
-      align-items: center;
-    }
-    .el-form {
-      margin: 8px 0;
-    }
+  .el-form {
+    margin: 8px 0;
   }
 }
 .dialog-footer button:first-child {
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ServeMatterManage.vue b/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ServeMatterManage.vue
index acc299e..2137b73 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ServeMatterManage.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/ObjectManage/ServeMatterManage.vue
@@ -2,115 +2,101 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 服务事项管理 -->
   <div class="regional-grid" v-if="!pageBasicsData.loading">
-    <!-- 左侧树结构区域 -->
-    <div class="regional-grid-left">
-      <qu-tree
-        suffixIcon="Search"
-        :treeData="pageBasicsData.treeData[0].childrenNode"
-        :defaultProps="{ children: 'childrenNode', label: 'name' }"
-        @nodeClick="nodeClick"
-      />
+    <!-- 顶部功能按钮 -->
+    <div class="grid-right-btn" ref="topSearchRef">
+      <!-- 搜索区域 -->
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+          <el-form-item label="所属站点" prop="districtId">
+            <div class="screen-item">
+              <el-select
+                filterable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.districtId"
+              >
+                <el-option
+                  :label="item.name"
+                  :value="item.id"
+                  v-for="item in pageBasicsData.districtList"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="对象分类">
+            <el-cascader
+              ref="gridCascaderRef"
+              v-model="gridCascaderValue"
+              :options="gridTreeOptions"
+              :props="{
+                children: 'childrenNode',
+                label: 'name',
+                value: 'name',
+                checkStrictly: true,
+                emitPath: false,
+              }"
+              clearable
+              filterable
+              placeholder="请选择对象分类"
+              style="width: 200px"
+              @change="gridCascaderChange"
+            />
+          </el-form-item>
+          <el-form-item label="事项名称" prop="name">
+            <div class="screen-item">
+              <el-input
+                placeholder="请输入事项名称"
+                clearable
+                v-model="pageBasicsData.screenForm.name"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="对象名称" prop="objectName">
+            <div class="screen-item">
+              <el-input
+                placeholder="请输入对象名称"
+                clearable
+                :disabled="!!gridCascaderValue"
+                v-model="pageBasicsData.screenForm.objectName"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="停/启用状态" prop="status">
+            <div class="screen-item">
+              <el-select
+                filterable
+                clearable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.status"
+              >
+                <el-option
+                  :label="item.key"
+                  :value="item.value"
+                  v-for="item in pageBasicsData.statusList"
+                  :key="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+        </qu-search-area>
     </div>
 
-    <!-- 右侧区域 -->
-    <div class="regional-grid-right">
-      <!-- 顶部功能按钮 -->
-      <div class="grid-right-btn" ref="topSearchRef">
-        <qu-button-group
-          :buttonList="pageBasicsData.buttonList"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-        <!-- 搜索区域 -->
-        <div class="grid-right-search">
-          <el-form
-            ref="screenFormRef"
-            :model="pageBasicsData.screenForm"
-            inline
-            size="small"
-          >
-            <el-form-item label="所属站点" prop="districtId">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.districtId"
-                >
-                  <el-option
-                    :label="item.name"
-                    :value="item.id"
-                    v-for="item in pageBasicsData.districtList"
-                    :key="item.id"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item label="事项名称" prop="name">
-              <div class="screen-item">
-                <el-input
-                  placeholder="请输入事项名称"
-                  clearable
-                  v-model="pageBasicsData.screenForm.name"
-                ></el-input>
-              </div>
-            </el-form-item>
-            <el-form-item label="对象名称" prop="objectName">
-              <div class="screen-item">
-                <el-input
-                  placeholder="请输入对象名称"
-                  clearable
-                  v-model="pageBasicsData.screenForm.objectName"
-                ></el-input>
-              </div>
-            </el-form-item>
-            <el-form-item label="停/启用状态" prop="status">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  clearable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.status"
-                >
-                  <el-option
-                    :label="item.key"
-                    :value="item.value"
-                    v-for="item in pageBasicsData.statusList"
-                    :key="item.value"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" round @click="restSearch"
-                >查询</el-button
-              >
-              <el-button
-                round
-                icon="Refresh"
-                type="warning"
-                @click="clearScreen"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
-
-      <!-- 表格 -->
-      <div class="main-table">
-        <qu-table
-          :custom="true"
-          :showPage="true"
-          :showIndex="true"
-          :height="pageBasicsData.tableHeight"
-          :tableData="tableData"
-          :tableHeader="tableHeader"
-          :pageProps="pageProps"
-          @pageChange="pageChange"
-          :rowButtons="rowButtons"
-          @rowButtonClick="rowButtonClick"
-          @fetchTableAttr="fetchTableAttr"
-        ></qu-table>
-      </div>
+    <!-- 表格 -->
+    <div class="main-table">
+      <qu-table
+        :custom="true"
+        :showPage="true"
+        :showIndex="true"
+        :height="pageBasicsData.tableHeight"
+        :tableData="tableData"
+        :tableHeader="tableHeader"
+        :pageProps="pageProps"
+        @pageChange="pageChange"
+        :rowButtons="rowButtons"
+        @rowButtonClick="rowButtonClick"
+        @fetchTableAttr="fetchTableAttr"
+        :tableButtons="pageBasicsData.buttonList"
+        @buttonClick="buttonClick"
+      ></qu-table>
     </div>
   </div>
 
@@ -289,10 +275,10 @@
     @close="closeEditDialog"
   >
     <el-form
+      class="dialog-form"
       style="
         border-top: 1px solid #dcdfe6;
         border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
         padding-bottom: 40px;
       "
       label-width="130px"
@@ -508,6 +494,11 @@ const objectNameRef = ref();
 const addRef = ref(); // 新增弹窗ref,表单校验
 const editRef = ref(); // 新增弹窗ref,表单校验
 const screenFormRef = ref(); //搜索区ref元素
+const gridCascaderRef = ref(); // 网格级联选择器ref
+const gridCascaderValue = ref(""); // 网格级联选择器选中值
+
+// 网格级联选择器选项数据（来自左侧树结构数据）
+const gridTreeOptions = ref([]);
 
 onMounted(() => {
   fetchDistricts();
@@ -567,6 +558,7 @@ watch(
           pageBasicsData.screenForm[key] = "";
         }
       }
+      gridCascaderValue.value = "";
     }
   }
 );
@@ -733,11 +725,10 @@ const fetchData = () => {
       }
     });
 };
-// 左侧树结构点击事件
-const nodeClick = ({ dom }) => {
-  pageBasicsData.screenForm.objectName = dom.name;
-  pageBasicsData.screenForm.treeFlag = 1;
-  fetchData();
+// 网格级联选择器 change 事件
+const gridCascaderChange = (val) => {
+  pageBasicsData.screenForm.objectName = val || "";
+  pageBasicsData.screenForm.treeFlag = val ? 1 : 0;
 };
 // 左侧树结构数据
 const fetchTree = (id, isAdd) => {
@@ -750,6 +741,7 @@ const fetchTree = (id, isAdd) => {
         newData.push(res.data);
         if (!isAdd) {
           pageBasicsData.treeData = newData;
+          gridTreeOptions.value = pageBasicsData.treeData[0].childrenNode || [];
         } else {
           pageBasicsData.addTreeData = newData;
           setTreeData(pageBasicsData.addTreeData[0].childrenNode);
@@ -770,13 +762,15 @@ const setTreeData = (arr) => {
 //查询
 const restSearch = () => {
   pageProps.page = 1;
-  pageBasicsData.screenForm.treeFlag = 0;
   fetchData();
   fetchTree();
 };
 // 清空搜索
 const clearScreen = () => {
   screenFormRef.value.resetFields();
+  gridCascaderValue.value = "";
+  pageBasicsData.screenForm.objectName = "";
+  pageBasicsData.screenForm.treeFlag = 0;
   fetchData();
   fetchTree();
 };
@@ -810,33 +804,18 @@ export default {
 </script>
 <style lang="scss" scoped>
 .regional-grid {
+  height: calc(100vh - var(--page-top-offset));
   box-sizing: border-box;
-  .regional-grid-left {
-    position: fixed;
-    z-index: 999;
-    left: 223px;
-    min-width: 260px;
-    height: calc(100vh - 126px);
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #fff;
-    border-right: 1px solid #eee;
-    overflow: auto;
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-card);
+  overflow: auto;
+  .grid-right-search {
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    align-items: center;
   }
-  .regional-grid-right {
-    height: calc(100vh - 146px);
-    margin-left: 294px;
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
-    .grid-right-search {
-      padding: 10px 0 10px 10px;
-      display: flex;
-      align-items: center;
-    }
-    .el-form {
-      margin: 8px 0;
-    }
+  .el-form {
+    margin: 8px 0;
   }
 }
 .dialog-footer button:first-child {
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/RegionalGridManage.vue b/frontend/witcleansystem/src/Page/BasicInfo/RegionalGridManage.vue
index 8cf6123..a92d07b 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/RegionalGridManage.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/RegionalGridManage.vue
@@ -2,122 +2,107 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 区域网格管理 -->
   <div class="regional-grid" v-if="!pageBasicsData.loading">
-    <!-- 左侧树结构区域 -->
-    <div class="regional-grid-left">
-      <qu-tree
-        suffixIcon="Search"
-        :treeData="pageBasicsData.treeData[0].childNode"
-        @nodeClick="nodeClick"
-      />
+    <!-- 顶部区域 -->
+    <div class="grid-right-btn" ref="topSearchRef">
+      <!-- 搜索区域 -->
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+          <el-form-item label="所属站点" prop="districtId">
+            <div class="screen-item">
+              <el-select
+                filterable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.districtId"
+              >
+                <el-option
+                  :label="item.name"
+                  :value="item.id"
+                  v-for="item in pageBasicsData.districtList"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="网格">
+            <el-cascader
+              ref="gridCascaderRef"
+              v-model="gridCascaderValue"
+              :options="pageBasicsData.treeData[0].childNode"
+              :props="{
+                children: 'childNode',
+                label: 'name',
+                value: 'gridId',
+                checkStrictly: true,
+                emitPath: false,
+              }"
+              clearable
+              filterable
+              placeholder="请选择网格"
+              style="width: 200px"
+              @change="gridCascaderChange"
+            />
+          </el-form-item>
+          <el-form-item label="网格名称" prop="name">
+            <div class="screen-item">
+              <el-input
+                placeholder="请输入网格名称"
+                clearable
+                v-model="pageBasicsData.screenForm.name"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="网格级别" prop="gridLevel">
+            <div class="screen-item">
+              <el-select
+                filterable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.gridLevel"
+              >
+                <el-option
+                  :label="item.key"
+                  :value="item.value"
+                  v-for="item in pageBasicsData.gridRankList"
+                  :key="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="负责人" prop="userId">
+            <div class="screen-item">
+              <el-select
+                filterable
+                clearable
+                placeholder="请选择"
+                v-model="pageBasicsData.screenForm.userId"
+              >
+                <el-option
+                  :label="item.name"
+                  :value="item.id"
+                  v-for="item in pageBasicsData.princiPalList"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+      </qu-search-area>
     </div>
 
-    <!-- 右侧区域 -->
-    <div class="regional-grid-right">
-      <!-- 右侧顶部区域 -->
-      <div class="grid-right-btn" ref="topSearchRef">
-        <!-- 顶部功能按钮 -->
-        <qu-button-group
-          :buttonList="pageBasicsData.buttonList"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-        <!-- 搜索区域 -->
-        <div class="grid-right-search">
-          <el-form
-            ref="screenFormRef"
-            :model="pageBasicsData.screenForm"
-            inline
-            size="small"
-          >
-            <el-form-item label="所属站点" prop="districtId">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.districtId"
-                >
-                  <el-option
-                    :label="item.name"
-                    :value="item.id"
-                    v-for="item in pageBasicsData.districtList"
-                    :key="item.id"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item label="网格名称" prop="name">
-              <div class="screen-item">
-                <el-input
-                  placeholder="请输入网格名称"
-                  clearable
-                  v-model="pageBasicsData.screenForm.name"
-                ></el-input>
-              </div>
-            </el-form-item>
-            <el-form-item label="网格级别" prop="gridLevel">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.gridLevel"
-                >
-                  <el-option
-                    :label="item.key"
-                    :value="item.value"
-                    v-for="item in pageBasicsData.gridRankList"
-                    :key="item.value"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item label="负责人" prop="userId">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  clearable
-                  placeholder="请选择"
-                  v-model="pageBasicsData.screenForm.userId"
-                >
-                  <el-option
-                    :label="item.name"
-                    :value="item.id"
-                    v-for="item in pageBasicsData.princiPalList"
-                    :key="item.id"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" round @click="restSearch"
-                >查询</el-button
-              >
-              <el-button
-                round
-                icon="Refresh"
-                type="warning"
-                @click="clearScreen"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
-
-      <!-- 表格 -->
-      <div class="main-table">
-        <qu-table
-          :custom="true"
-          :showPage="true"
-          :showIndex="true"
-          :height="pageBasicsData.tableHeight"
-          :tableData="tableData"
-          :tableHeader="tableHeader"
-          :pageProps="pageProps"
-          @pageChange="pageChange"
-          :rowButtons="rowButtons"
-          @rowButtonClick="rowButtonClick"
-          @fetchTableAttr="fetchTableAttr"
-        ></qu-table>
-      </div>
+    <!-- 表格 -->
+    <div class="main-table">
+      <qu-table
+        :custom="true"
+        :showPage="true"
+        :showIndex="true"
+        :height="pageBasicsData.tableHeight"
+        :tableData="tableData"
+        :tableHeader="tableHeader"
+        :pageProps="pageProps"
+        @pageChange="pageChange"
+        :rowButtons="rowButtons"
+        @rowButtonClick="rowButtonClick"
+        @fetchTableAttr="fetchTableAttr"
+        :tableButtons="pageBasicsData.buttonList"
+        @buttonClick="buttonClick"
+      ></qu-table>
     </div>
   </div>
 
@@ -146,12 +131,7 @@
     @close="closeAddDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="addRef"
       :model="addForm"
@@ -290,12 +270,7 @@
     @close="closeEditDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="editRef"
       :model="editForm"
@@ -539,6 +514,9 @@ const gridRef = ref(); // 上级网格ref
 const addRef = ref(); // 新增弹窗ref,
 const editRef = ref(); // 编辑弹窗ref,
 const screenFormRef = ref(); //搜索区ref
+const searchAreaRef = ref(); // 搜索区组件ref
+const gridCascaderValue = ref(''); // 网格级联选择器值
+const gridCascaderRef = ref(); // 网格级联选择器ref
 
 onMounted(() => {
   const devKey = $common.devKey;
@@ -606,6 +584,7 @@ watch(
       }
     }
     pageBasicsData.screenForm.gridLevel = 1;
+    gridCascaderValue.value = '';
   }
 );
 // 监听添加时所属站点change
@@ -766,13 +745,28 @@ const fetchData = () => {
   });
 };
 
-// 左侧树结构点击事件
+// 左侧树结构点击事件（保留，逻辑复用于级联选择器）
 const nodeClick = ({ dom }) => {
   pageBasicsData.screenForm.gridLevel = dom.gridLevel + 1;
   pageBasicsData.screenForm.gridId = dom.gridId;
   pageBasicsData.screenForm.userId = "";
   fetchData();
 };
+// 网格级联选择器 change 事件
+const gridCascaderChange = (val) => {
+  if (!val) {
+    pageBasicsData.screenForm.gridId = '';
+    pageBasicsData.screenForm.gridLevel = 1;
+    return;
+  }
+  const checkedNodes = gridCascaderRef.value?.getCheckedNodes();
+  if (checkedNodes && checkedNodes.length > 0) {
+    const node = checkedNodes[0].data;
+    pageBasicsData.screenForm.gridLevel = node.gridLevel + 1;
+    pageBasicsData.screenForm.gridId = node.gridId;
+    pageBasicsData.screenForm.userId = '';
+  }
+};
 // 左侧树结构数据
 const fetchTree = () => {
   const { districtId } = pageBasicsData.screenForm;
@@ -870,6 +864,7 @@ const clearScreen = () => {
   screenFormRef.value.resetFields();
   pageBasicsData.screenForm.districtId = pageBasicsData.districtList[0].id;
   pageBasicsData.screenForm.gridId = "";
+  gridCascaderValue.value = '';
   fetchData();
   fetchTree();
 };
@@ -905,32 +900,17 @@ export default {
 <style lang="scss" scoped>
 .regional-grid {
   box-sizing: border-box;
-  .regional-grid-left {
-    position: fixed;
-    z-index: 999;
-    left: 223px;
-    min-width: 260px;
-    height: calc(100vh - 126px);
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #fff;
-    border-right: 1px solid #eee;
-    overflow: auto;
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-card);
+  overflow: auto;
+
+  .grid-right-search {
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    align-items: center;
   }
-  .regional-grid-right {
-    height: calc(100vh - 146px);
-    margin-left: 294px;
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
-    .grid-right-search {
-      padding: 10px 0 10px 10px;
-      display: flex;
-      align-items: center;
-    }
-    .el-form {
-      margin: 8px 0;
-    }
+  .el-form {
+    margin: var(--spacing-sm) 0;
   }
 }
 .dialog-footer button:first-child {
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/SceneManage.vue b/frontend/witcleansystem/src/Page/BasicInfo/SceneManage.vue
index b8cfb8d..2f7a2e4 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/SceneManage.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/SceneManage.vue
@@ -2,46 +2,13 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 场景管理 -->
   <div class="regional-grid" v-if="!pageBasicsData.loading">
-    <!-- 左侧树结构区域 -->
-    <div class="regional-grid-left">
-      <qu-tree
-        suffixIcon="Search"
-        :treeData="pageBasicsData.treeData"
-        @nodeClick="nodeClick"
-      ></qu-tree>
-    </div>
-
-    <!-- 右侧区域 -->
-    <div class="regional-grid-right">
+    <!-- 内容区域 -->
+    <div class="regional-grid-content">
       <div>
         <!-- 顶部功能按钮 -->
         <div class="grid-right-btn" ref="topSearchRef">
-          <qu-button-group
-            :buttonList="[
-              {
-                cnName: '新建',
-                enName: 'add',
-                theme: 'success',
-                icon: 'plus',
-              },
-              {
-                cnName: '导出',
-                enName: 'export',
-                theme: 'primary',
-                icon: 'top',
-              },
-            ]"
-            @buttonClick="buttonClick"
-          ></qu-button-group>
-
           <!-- 搜索区域 -->
-          <div class="grid-right-search">
-            <el-form
-              ref="screenFormRef"
-              :model="pageBasicsData.screenForm"
-              inline
-              size="small"
-            >
+          <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
               <el-form-item label="所属站点" prop="districtId">
                 <div class="screen-item">
                   <el-select
@@ -58,6 +25,25 @@
                   </el-select>
                 </div>
               </el-form-item>
+              <el-form-item label="网格">
+                <el-cascader
+                  ref="gridCascaderRef"
+                  v-model="gridCascaderValue"
+                  :options="gridTreeOptions"
+                  :props="{
+                    children: 'childNode',
+                    label: 'name',
+                    value: 'gridId',
+                    checkStrictly: true,
+                    emitPath: false,
+                  }"
+                  clearable
+                  filterable
+                  placeholder="请选择网格"
+                  style="width: 200px"
+                  @change="gridCascaderChange"
+                />
+              </el-form-item>
               <el-form-item label="场景名称" prop="name">
                 <div class="screen-item">
                   <el-input
@@ -143,24 +129,7 @@
                   </el-select>
                 </div>
               </el-form-item>
-              <el-form-item>
-                <el-button
-                  type="primary"
-                  icon="Search"
-                  round
-                  @click="restSearch"
-                  >查询</el-button
-                >
-                <el-button
-                  round
-                  icon="Refresh"
-                  type="warning"
-                  @click="clearScreen"
-                  >重置</el-button
-                >
-              </el-form-item>
-            </el-form>
-          </div>
+          </qu-search-area>
         </div>
       </div>
       <!-- 表格 -->
@@ -177,6 +146,21 @@
           :rowButtons="rowButtons"
           @rowButtonClick="rowButtonClick"
           @fetchTableAttr="fetchTableAttr"
+          :tableButtons="[
+            {
+              cnName: '新建',
+              enName: 'add',
+              theme: 'success',
+              icon: 'plus',
+            },
+            {
+              cnName: '导出',
+              enName: 'export',
+              theme: 'primary',
+              icon: 'top',
+            },
+          ]"
+          @buttonClick="buttonClick"
         ></qu-table>
       </div>
     </div>
@@ -460,12 +444,7 @@
     @close="closeEditDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="140px"
       ref="editRef"
       :model="editForm"
@@ -645,7 +624,7 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, reactive, onMounted, watch, nextTick } from "vue";
+import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
 import templateHooks from "@/Hooks/templateHooks.js";
 import { sceneManageService } from "@/ApiService/basicInfoService";
 import { dropdownService } from "@/ApiService/dropdownService";
@@ -707,6 +686,11 @@ const topSearchRef = ref(); // 顶部搜索区域ref
 const addRef = ref(); // 新增弹窗ref,表单校验
 const editRef = ref(); // 编辑弹窗ref,表单校验
 const screenFormRef = ref(); // 搜索区ref元素
+const gridCascaderRef = ref(); // 搜索区网格级联ref
+const gridCascaderValue = ref(""); // 搜索区网格级联选中值
+
+// 搜索区网格级联数据（与左侧树结构共用同一份数据）
+const gridTreeOptions = computed(() => pageBasicsData.treeData);
 
 onMounted(() => {
   fetchDistricts();
@@ -771,6 +755,7 @@ watch(
         }
       }
       pageBasicsData.screenForm.scenesLevel = 1;
+      gridCascaderValue.value = "";
     }
   }
 );
@@ -974,11 +959,7 @@ const fetchDistricts = () => {
   });
 };
 // 获取列表数据
-const fetchData = (isLeftClick) => {
-  if (!isLeftClick) {
-    delete pageBasicsData.screenForm.gridLevel;
-    delete pageBasicsData.screenForm.gridId;
-  }
+const fetchData = () => {
   const { page, rows } = pageProps;
   return new Promise(() => {
     sceneManageService
@@ -1009,12 +990,33 @@ const fetchSuperiorScenes = (data) => {
     });
   });
 };
-// 左侧树结构点击事件
+// 左侧树结构点击事件（保留供内部复用逻辑参考）
 const nodeClick = ({ dom }) => {
   pageBasicsData.screenForm.gridLevel = dom.gridLevel;
   pageBasicsData.screenForm.gridId = dom.gridId;
   fetchData(true);
 };
+// 搜索区网格级联选择事件
+const gridCascaderChange = (val) => {
+  if (val) {
+    const findNode = (list, gridId) => {
+      for (const item of list) {
+        if (item.gridId === gridId) return item;
+        if (item.childNode && item.childNode.length) {
+          const found = findNode(item.childNode, gridId);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    const node = findNode(pageBasicsData.treeData, val);
+    pageBasicsData.screenForm.gridLevel = node ? node.gridLevel : "";
+    pageBasicsData.screenForm.gridId = val;
+  } else {
+    delete pageBasicsData.screenForm.gridLevel;
+    delete pageBasicsData.screenForm.gridId;
+  }
+};
 // 左侧树结构数据
 const fetchTree = (id, isAdd) => {
   const { districtId } = pageBasicsData.screenForm;
@@ -1049,6 +1051,9 @@ const restSearch = () => {
 // 清空搜索
 const clearScreen = () => {
   screenFormRef.value.resetFields();
+  gridCascaderValue.value = "";
+  delete pageBasicsData.screenForm.gridLevel;
+  delete pageBasicsData.screenForm.gridId;
   pageBasicsData.screenForm.districtId = pageBasicsData.districtList[0].id;
   fetchData();
   fetchTree();
@@ -1083,26 +1088,14 @@ export default {
 <style lang="scss" scoped>
 .regional-grid {
   box-sizing: border-box;
-  .regional-grid-left {
-    position: fixed;
-    z-index: 999;
-    left: 223px;
-    min-width: 260px;
-    height: calc(100vh - 126px);
-    padding: 20px;
-    box-sizing: border-box;
-    background-color: #fff;
-    border-right: 1px solid #eee;
+  height: calc(100vh - var(--page-top-offset));
+  .regional-grid-content {
+    height: 100%;
+    padding: var(--spacing-md);
+    background-color: var(--color-bg-card);
     overflow: auto;
-  }
-  .regional-grid-right {
-    height: calc(100vh - 146px);
-    margin-left: 294px;
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
     .grid-right-search {
-      padding: 10px 0 10px 10px;
+      padding: var(--spacing-md) var(--spacing-lg);
       display: flex;
       align-items: center;
     }
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/ToolMange.vue b/frontend/witcleansystem/src/Page/BasicInfo/ToolMange.vue
index 0cdbaac..527ac9d 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/ToolMange.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/ToolMange.vue
@@ -6,31 +6,8 @@
     <div class="regional-grid-right">
       <!-- 顶部功能按钮 -->
       <div class="grid-right-btn" ref="topSearchRef">
-        <qu-button-group
-          :buttonList="[
-            {
-              cnName: '新建',
-              enName: 'add',
-              theme: 'success',
-              icon: 'plus',
-            },
-            {
-              cnName: '导出',
-              enName: 'export',
-              theme: 'primary',
-              icon: 'top',
-            },
-          ]"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
         <!-- 搜索区域 -->
-        <div class="grid-right-search">
-          <el-form
-            ref="screenFormRef"
-            :model="pageBasicsData.screenForm"
-            inline
-            size="small"
-          >
+        <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
             <el-form-item label="所属站点" prop="districtId">
               <div class="screen-item">
                 <el-select
@@ -90,20 +67,7 @@
                 </el-select>
               </div>
             </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" round @click="restSearch"
-                >查询</el-button
-              >
-              <el-button
-                round
-                icon="Refresh"
-                type="warning"
-                @click="clearScreen"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
+          </qu-search-area>
       </div>
 
       <!-- 表格 -->
@@ -120,6 +84,21 @@
           :rowButtons="rowButtons"
           @rowButtonClick="rowButtonClick"
           @fetchTableAttr="fetchTableAttr"
+          :tableButtons="[
+            {
+              cnName: '新建',
+              enName: 'add',
+              theme: 'success',
+              icon: 'plus',
+            },
+            {
+              cnName: '导出',
+              enName: 'export',
+              theme: 'primary',
+              icon: 'top',
+            },
+          ]"
+          @buttonClick="buttonClick"
         ></qu-table>
       </div>
     </div>
@@ -134,13 +113,7 @@
     @close="closeAddDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-        padding-top: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="addRef"
       :model="addForm"
@@ -283,13 +256,7 @@
     @close="closeEditDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-        padding-top: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="editRef"
       :model="editForm"
@@ -704,12 +671,12 @@ export default {
 .regional-grid {
   box-sizing: border-box;
   .regional-grid-right {
-    height: calc(100vh - 146px);
+    height: calc(100vh - var(--page-top-offset));
     flex: 1;
     padding: 10px;
-    background-color: #fff;
+    background-color: var(--color-bg-card);
     .grid-right-search {
-      padding: 10px 0 10px 10px;
+      padding: var(--spacing-md) var(--spacing-lg);
       display: flex;
       align-items: center;
     }
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/ManageScheme.vue b/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/ManageScheme.vue
index 9230eee..b083a91 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/ManageScheme.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/ManageScheme.vue
@@ -2,118 +2,105 @@
   <el-skeleton :rows="30" :loading="data.loading" animated />
   <!-- 服务事项管理 -->
   <div class="regional-grid" v-if="!data.loading">
-    <!-- 左侧树结构区域 -->
-    <div class="regional-grid-left">
-      <qu-tree
-        suffixIcon="Search"
-        :treeData="data.treeData[0].childrenNode"
-        :defaultProps="{ children: 'childrenNode', label: 'name' }"
-      />
+    <!-- 顶部功能按钮 -->
+    <div class="grid-right-btn" ref="topSearchRef">
+      <!-- 搜索区域 -->
+      <qu-search-area :model="data.screenForm" @search="restSearch" @reset="clearScreen">
+          <el-form-item label="所属站点" prop="districtId">
+            <div class="screen-item">
+              <el-select
+                filterable
+                placeholder="请选择"
+                v-model="data.screenForm.districtId"
+              >
+                <el-option
+                  :label="item.name"
+                  :value="item.id"
+                  v-for="item in data.theirDistrict"
+                  :key="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+          <el-form-item label="对象分类">
+            <el-cascader
+              ref="gridCascaderRef"
+              v-model="gridCascaderValue"
+              :options="gridTreeOptions"
+              :props="{
+                children: 'childrenNode',
+                label: 'name',
+                value: 'name',
+                checkStrictly: true,
+                emitPath: false,
+              }"
+              clearable
+              filterable
+              placeholder="请选择对象分类"
+              style="width: 200px"
+              @change="gridCascaderChange"
+            />
+          </el-form-item>
+          <el-form-item label="事项名称" prop="name">
+            <div class="screen-item">
+              <el-input
+                placeholder="请输入事项名称"
+                clearable
+                v-model="data.screenForm.name"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="对象名称" prop="objectName">
+            <div class="screen-item">
+              <el-input
+                placeholder="请输入对象名称"
+                clearable
+                :disabled="!!gridCascaderValue"
+                v-model="data.screenForm.objectName"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="停/启用状态" prop="status">
+            <div class="screen-item">
+              <el-select
+                filterable
+                clearable
+                placeholder="请选择"
+                v-model="data.screenForm.status"
+              >
+                <el-option
+                  :label="item.key"
+                  :value="item.value"
+                  v-for="item in data.statusList"
+                  :key="item.value"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-form-item>
+        </qu-search-area>
     </div>
 
-    <!-- 右侧区域 -->
-    <div class="regional-grid-right">
-      <!-- 顶部功能按钮 -->
-      <div class="grid-right-btn" ref="topSearchRef">
-        <qu-button-group
-          :buttonList="data.buttonList"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-        <!-- 搜索区域 -->
-        <div class="grid-right-search">
-          <el-form
-            ref="screenFormRef"
-            :model="data.screenForm"
-            inline
-            size="small"
-          >
-            <el-form-item label="所属站点" prop="districtId">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  placeholder="请选择"
-                  v-model="data.screenForm.districtId"
-                >
-                  <el-option
-                    :label="item.name"
-                    :value="item.id"
-                    v-for="item in data.theirDistrict"
-                    :key="item.id"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item label="事项名称" prop="name">
-              <div class="screen-item">
-                <el-input
-                  placeholder="请输入事项名称"
-                  clearable
-                  v-model="data.screenForm.name"
-                ></el-input>
-              </div>
-            </el-form-item>
-            <el-form-item label="对象名称" prop="objectName">
-              <div class="screen-item">
-                <el-input
-                  placeholder="请输入对象名称"
-                  clearable
-                  v-model="data.screenForm.objectName"
-                ></el-input>
-              </div>
-            </el-form-item>
-            <el-form-item label="停/启用状态" prop="status">
-              <div class="screen-item">
-                <el-select
-                  filterable
-                  clearable
-                  placeholder="请选择"
-                  v-model="data.screenForm.status"
-                >
-                  <el-option
-                    :label="item.key"
-                    :value="item.value"
-                    v-for="item in data.statusList"
-                    :key="item.value"
-                  ></el-option>
-                </el-select>
-              </div>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" round @click="restSearch"
-                >查询</el-button
-              >
-              <el-button
-                round
-                icon="Refresh"
-                type="warning"
-                @click="clearScreen"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
-
-      <!-- 表格 -->
-      <div class="main-table">
-        <qu-table
-          :custom="true"
-          :showPage="true"
-          :showIndex="true"
-          :height="data.tableHeight"
-          :tableData="tableData"
-          :tableHeader="
-            data.customTableHeader.length > 0
-              ? data.customTableHeader
-              : tableHeader
-          "
-          :pageProps="pageProps"
-          @pageChange="pageChange"
-          :rowButtons="rowButtons"
-          @rowButtonClick="rowButtonClick"
-          @fetchTableAttr="fetchTableAttr"
-        ></qu-table>
-      </div>
+    <!-- 表格 -->
+    <div class="main-table">
+      <qu-table
+        :custom="true"
+        :showPage="true"
+        :showIndex="true"
+        :height="data.tableHeight"
+        :tableData="tableData"
+        :tableHeader="
+          data.customTableHeader.length > 0
+            ? data.customTableHeader
+            : tableHeader
+        "
+        :pageProps="pageProps"
+        @pageChange="pageChange"
+        :rowButtons="rowButtons"
+        @rowButtonClick="rowButtonClick"
+        @fetchTableAttr="fetchTableAttr"
+        :tableButtons="data.buttonList"
+        @buttonClick="buttonClick"
+      ></qu-table>
     </div>
   </div>
 
@@ -126,12 +113,7 @@
     @close="closeAddDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="addRef"
       :model="addForm"
@@ -294,12 +276,7 @@
     @close="closeEditDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="editRef"
       :model="editForm"
@@ -413,7 +390,7 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, reactive, onMounted, watch, nextTick } from "vue";
+import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
 import templateHooks from "@/Hooks/templateHooks.js";
 import { serveMatterManageService } from "@/ApiService/basicInfoService";
 import { dropdownService } from "@/ApiService/dropdownService";
@@ -427,6 +404,7 @@ const data = reactive({
   screenForm: {
     // 顶部搜索字段
     districtId: "",
+    gridId: "",
     name: "",
     objectName: "",
     status: "",
@@ -498,6 +476,18 @@ let cascaderRef = ref();
 let addRef = ref(""); // 新增弹窗ref,表单校验
 let editRef = ref(""); // 新增弹窗ref,表单校验
 let screenFormRef = ref(); //搜索区ref元素
+const gridCascaderValue = ref("");
+const gridCascaderRef = ref();
+// 网格级联选择器数据源（来自左侧树结构）
+const gridTreeOptions = computed(() => {
+  if (data.treeData.length > 0 && data.treeData[0].childNode) {
+    return data.treeData[0].childNode;
+  }
+  if (data.treeData.length > 0 && data.treeData[0].childrenNode) {
+    return data.treeData[0].childrenNode;
+  }
+  return [];
+});
 
 onMounted(() => {
   fetchData();
@@ -559,6 +549,13 @@ watch(
     }
   }
 );
+watch(
+  () => data.screenForm.districtId,
+  () => {
+    gridCascaderValue.value = "";
+    data.screenForm.gridId = "";
+  }
+);
 // 对象名称级联配置
 const objectNameProps = {
   expandTrigger: "hover",
@@ -576,11 +573,12 @@ const buttonClick = ({ enName }) => {
   }
   if (enName == "export") {
     const { page, rows } = pageProps;
-    const { districtId, name, objectName, status } = data.screenForm;
+    const { districtId, gridId, name, objectName, status } = data.screenForm;
     serveMatterManageService.matterExport({
       page,
       rows,
       districtId,
+      gridId,
       name,
       objectName,
       status,
@@ -590,6 +588,10 @@ const buttonClick = ({ enName }) => {
     data.isImportDialog = true;
   }
 };
+// 搜索区网格级联change事件
+const gridCascaderChange = (val) => {
+  data.screenForm.objectName = val || "";
+};
 // 新增级联change事件
 const objectHandleChange = (val) => {
   let checkArr = cascaderRef.value.getCheckedNodes();
@@ -697,12 +699,13 @@ const fetchTheirDistrict = () => {
 // 获取列表数据
 const fetchData = () => {
   const { page, rows } = pageProps;
-  const { districtId, name, objectName, status } = data.screenForm;
+  const { districtId, gridId, name, objectName, status } = data.screenForm;
   serveMatterManageService
     .matterPageList({
       page,
       rows,
       districtId,
+      gridId,
       name,
       objectName,
       status,
@@ -731,6 +734,9 @@ const fetchTree = (id) => {
 // 清空搜索
 const clearScreen = () => {
   screenFormRef.value.resetFields();
+  gridCascaderValue.value = "";
+  data.screenForm.objectName = "";
+  data.screenForm.gridId = "";
   fetchData();
 };
 // 自定义表格头
@@ -766,32 +772,16 @@ export default {
 <style lang="scss" scoped>
 .regional-grid {
   box-sizing: border-box;
-  .regional-grid-left {
-    position: fixed;
-    z-index: 999;
-    left: 223px;
-    min-width: 260px;
-    height: calc(100vh - 126px);
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #fff;
-    border-right: 1px solid #eee;
-    overflow: auto;
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-card);
+  overflow: auto;
+  .grid-right-search {
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    align-items: center;
   }
-  .regional-grid-right {
-    height: calc(100vh - 146px);
-    margin-left: 294px;
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
-    .grid-right-search {
-      padding: 10px 0 10px 10px;
-      display: flex;
-      align-items: center;
-    }
-    .el-form {
-      margin: 8px 0;
-    }
+  .el-form {
+    margin: 8px 0;
   }
 }
 .dialog-footer button:first-child {
diff --git a/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/WorkDataManage.vue b/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/WorkDataManage.vue
index 25e9dba..bb3ff06 100644
--- a/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/WorkDataManage.vue
+++ b/frontend/witcleansystem/src/Page/BasicInfo/WorkManage/WorkDataManage.vue
@@ -2,32 +2,10 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 作业数据管理 -->
   <div class="regional-grid" v-if="!pageBasicsData.loading">
-    <!-- 左侧树结构区域 -->
-    <div class="regional-grid-left">
-      <qu-tree
-        suffixIcon="Search"
-        :treeData="pageBasicsData.treeData[0].childrenNode"
-        :defaultProps="{ children: 'childrenNode', label: 'name' }"
-        @nodeClick="nodeClick"
-      />
-    </div>
-
-    <!-- 右侧区域 -->
-    <div class="regional-grid-right">
-      <!-- 顶部功能按钮 -->
-      <div class="grid-right-btn" ref="topSearchRef">
-        <qu-button-group
-          :buttonList="pageBasicsData.buttonList"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
+    <!-- 顶部功能按钮 -->
+    <div class="grid-right-btn" ref="topSearchRef">
         <!-- 搜索区域 -->
-        <div class="grid-right-search">
-          <el-form
-            ref="screenFormRef"
-            :model="pageBasicsData.screenForm"
-            inline
-            size="small"
-          >
+        <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
             <el-form-item label="所属站点" prop="districtId">
               <div class="screen-item">
                 <el-select
@@ -44,6 +22,25 @@
                 </el-select>
               </div>
             </el-form-item>
+            <el-form-item label="对象分类">
+              <el-cascader
+                ref="gridCascaderRef"
+                v-model="gridCascaderValue"
+                :options="gridTreeOptions"
+                :props="{
+                  children: 'childrenNode',
+                  label: 'name',
+                  value: 'name',
+                  checkStrictly: true,
+                  emitPath: false,
+                }"
+                clearable
+                filterable
+                placeholder="请选择对象分类"
+                style="width: 200px"
+                @change="gridCascaderChange"
+              />
+            </el-form-item>
             <el-form-item label="作业名称" prop="name">
               <div class="screen-item">
                 <el-input
@@ -75,6 +72,7 @@
                 <el-input
                   placeholder="请输入对象名称"
                   clearable
+                  :disabled="!!gridCascaderValue"
                   v-model="pageBasicsData.screenForm.objectName"
                 ></el-input>
               </div>
@@ -96,20 +94,7 @@
                 </el-select>
               </div>
             </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" round @click="restSearch"
-                >查询</el-button
-              >
-              <el-button
-                round
-                icon="Refresh"
-                type="warning"
-                @click="clearScreen"
-                >重置</el-button
-              >
-            </el-form-item>
-          </el-form>
-        </div>
+          </qu-search-area>
       </div>
 
       <!-- 表格 -->
@@ -126,9 +111,10 @@
           :rowButtons="rowButtons"
           @rowButtonClick="rowButtonClick"
           @fetchTableAttr="fetchTableAttr"
+          :tableButtons="pageBasicsData.buttonList"
+          @buttonClick="buttonClick"
         ></qu-table>
       </div>
-    </div>
   </div>
 
   <!-- 新建弹窗 -->
@@ -139,12 +125,7 @@
     @close="closeAddDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="addRef"
       :model="addForm"
@@ -352,12 +333,7 @@
     @close="closeEditDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="editRef"
       :model="editForm"
@@ -685,7 +661,7 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, reactive, onMounted, watch, nextTick } from "vue";
+import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
 import templateHooks from "@/Hooks/templateHooks.js";
 import { operationManageService } from "@/ApiService/basicInfoService";
 import { dropdownService } from "@/ApiService/dropdownService";
@@ -804,6 +780,13 @@ const screenFormRef = ref(); //搜索区ref元素
 const objectNameRef = ref();
 const workToolRef = ref();
 
+// 网格级联选择器
+const gridCascaderValue = ref('');
+const gridCascaderRef = ref();
+const gridTreeOptions = computed(() => {
+  return pageBasicsData.treeData[0]?.childrenNode || [];
+});
+
 // 作业方案列表搜索
 let schemeForm = reactive({
   districtId: "",
@@ -877,6 +860,7 @@ watch(
           pageBasicsData.screenForm[key] = "";
         }
       }
+      gridCascaderValue.value = '';
     }
   }
 );
@@ -1055,11 +1039,15 @@ const fetchParentObject = (id) => {
   });
 };
 
-// 左侧树结构点击事件
+// 左侧树结构点击事件（保留，供内部逻辑复用）
 const nodeClick = ({ dom }) => {
   pageBasicsData.screenForm.objectName = dom.name;
   fetchData();
 };
+// 网格级联选择器 change 事件
+const gridCascaderChange = (val) => {
+  pageBasicsData.screenForm.objectName = val || '';
+};
 // 左侧树结构数据
 const fetchTree = (id, isAdd) => {
   const { districtId } = pageBasicsData.screenForm;
@@ -1113,7 +1101,10 @@ const restSearch = () => {
 // 清空搜索
 const clearScreen = () => {
   screenFormRef.value.resetFields();
+  gridCascaderValue.value = '';
+  pageBasicsData.screenForm.objectName = '';
   fetchData();
+  fetchTree();
 };
 // 自定义表格头
 const fetchTableAttr = (tableAttr) => {
@@ -1146,38 +1137,22 @@ export default {
 <style lang="scss" scoped>
 .regional-grid {
   box-sizing: border-box;
-  .regional-grid-left {
-    position: fixed;
-    z-index: 999;
-    left: 223px;
-    min-width: 260px;
-    height: calc(100vh - 126px);
-    box-sizing: border-box;
-    padding: 20px;
-    background-color: #fff;
-    border-right: 1px solid #eee;
-    overflow: auto;
+  height: calc(100vh - var(--page-top-offset));
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-card);
+  overflow: auto;
+  .grid-right-search {
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    align-items: center;
   }
-  .regional-grid-right {
-    height: calc(100vh - 146px);
-    margin-left: 294px;
-    flex: 1;
-    padding: 10px;
-    background-color: #fff;
-    .grid-right-search {
-      padding: 10px 0 10px 10px;
-      display: flex;
-      align-items: center;
-    }
-    .el-form {
-      margin: 8px 0;
-    }
+  .el-form {
+    margin: 8px 0;
   }
 }
 .dialog-footer button:first-child {
   margin-right: 10px;
 }
-
 .dialog-item {
   width: 100%;
   display: flex;
diff --git a/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/ConfigureWorkCredits.vue b/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/ConfigureWorkCredits.vue
index ee56abe..6b4f574 100644
--- a/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/ConfigureWorkCredits.vue
+++ b/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/ConfigureWorkCredits.vue
@@ -2,27 +2,21 @@
     <div class='user-manage'>
         <!-- <el-skeleton :rows='10' animated v-if='!isLoaded' :throttle='500' /> -->
         <div class='main-container'>
-            <div ref='buttonGroupRef'>
-                <qu-button-group :buttonList='tableButtons' @buttonClick='buttonClick'></qu-button-group>
-            </div>
             <div class='top-screen' ref='topScreenRef'>
-                <el-form :model='screenForm' ref='screenFormRef' inline size='small'>
+                <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
                     <el-form-item label="所属站点" prop="districtId">
                         <div class="screen-item">
                             <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"
                                 @districtChange="districtChange"></district-screen>
                         </div>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button type='primary' icon='search' size='small' @click='restSearch'>查询</el-button>
-                        <el-button icon='Refresh' size='small' @click='clearScreen(screenFormRef)'>重置</el-button>
-                    </el-form-item>
-                </el-form>
+                </qu-search-area>
             </div>
             <div class='main-table' style="padding-bottom:20px">
                 <qu-table :tableData='tableData' v-model:tableHeader='tableHeader' :height='tableHeight'
                     :showPage="false" :pageProps='pageProps' :rowButtons='rowButtons' @rowButtonClick='rowButtonClick'
-                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading'></qu-table>
+                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading'
+                    :tableButtons='tableButtons' @buttonClick='buttonClick'></qu-table>
             </div>
             <div v-if="showEditForm">
                 <el-dialog :title="currentRow.data.id ? '编辑' : '新建'" v-model="showEditForm" width="30%">
@@ -83,7 +77,6 @@ import { computed } from '@vue/reactivity';
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref()
-const buttonGroupRef = ref()
 const tableHeight = ref(500)
 const districtScreenRef = ref();
 const showEditForm = ref(false)
diff --git a/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/PointWagesConfig.vue b/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/PointWagesConfig.vue
index 5bf1fed..a3c83c1 100644
--- a/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/PointWagesConfig.vue
+++ b/frontend/witcleansystem/src/Page/ConfigCenter/HEConfig/PointWagesConfig.vue
@@ -2,27 +2,21 @@
     <div class='user-manage'>
         <!-- <el-skeleton :rows='10' animated v-if='!isLoaded' :throttle='500' /> -->
         <div class='main-container'>
-            <div ref='buttonGroupRef'>
-                <qu-button-group :buttonList='tableButtons' @buttonClick='buttonClick'></qu-button-group>
-            </div>
             <div class='top-screen' ref='topScreenRef'>
-                <el-form :model='screenForm' ref='screenFormRef' inline size='small'>
+                <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
                     <el-form-item label="所属站点" prop="districtId">
                         <div class="screen-item">
                             <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"
                                 @districtChange="districtChange"></district-screen>
                         </div>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button type='primary' icon='search' size='small' @click='restSearch'>查询</el-button>
-                        <el-button icon='Refresh' size='small' @click='clearScreen(screenFormRef)'>重置</el-button>
-                    </el-form-item>
-                </el-form>
+                </qu-search-area>
             </div>
             <div class='main-table' style="padding-bottom:20px">
                 <qu-table :tableData='tableData' v-model:tableHeader='tableHeader' :height='tableHeight'
                     :pageProps='pageProps' :showPage="false" :rowButtons='rowButtons' @rowButtonClick='rowButtonClick'
-                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading'></qu-table>
+                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading'
+                    :tableButtons='tableButtons' @buttonClick='buttonClick'></qu-table>
             </div>
             <div v-if="showEditForm">
                 <el-dialog :title="currentRow.data.id ? '编辑' : '新建'" v-model="showEditForm" width="30%">
@@ -74,7 +68,6 @@ import { HEConfigService } from '@/ApiService/configService';
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref()
-const buttonGroupRef = ref()
 const tableHeight = ref(500)
 const districtScreenRef = ref()
 const showEditForm = ref(false)
diff --git a/frontend/witcleansystem/src/Page/Home.vue b/frontend/witcleansystem/src/Page/Home.vue
index 99883be..16bb304 100644
--- a/frontend/witcleansystem/src/Page/Home.vue
+++ b/frontend/witcleansystem/src/Page/Home.vue
@@ -1,58 +1,81 @@
 <template>
-  <el-container id="components-layout-demo-custom-trigger">
-    <el-aside class="sider-com" :trigger="null" collapsible :style="{ width: collapsed ? '64px' : '200px' }">
+  <!-- 左右布局（侧边栏模式） -->
+  <el-container v-if="layout === 'sidebar'" id="layout-sidebar">
+    <el-aside class="sider-com" :trigger="null" collapsible :style="{ width: collapsed ? 'var(--sidebar-collapsed-width)' : 'var(--sidebar-width)' }">
       <el-scrollbar>
         <div class="logo">
-          <div class="logo-box"></div>
+          <template v-if="!collapsed">
+            <span class="logo-text">智慧清洁</span>
+          </template>
+          <template v-else>
+            <img class="logo-avatar" src="@/Assets/img/newHeadPortrait.png" />
+          </template>
         </div>
         <side-menu :collapsed="collapsed"></side-menu>
       </el-scrollbar>
-    </el-aside>
-    <el-container :style="{ paddingLeft: collapsed ? '64px' : '200px' }" direction="vertical">
-      <div :style="{
-        position: 'fixed',
-        width: collapsed ? 'calc(100% - 64px)' : 'calc(100% - 200px)',
-        zIndex: '1000',
-      }">
-        <header-com v-model:collapsed="collapsed"></header-com>
-        <tags-com-vue></tags-com-vue>
+      <div class="collapse-trigger" @click="collapsed = !collapsed">
+        <el-icon :size="14" color="#fff">
+          <d-arrow-right v-if="collapsed" />
+          <d-arrow-left v-else />
+        </el-icon>
       </div>
-
-      <el-main :style="{
-        padding: '100px 24px 24px 24px',
-        background: '#ebebeb',
-        width: '100%',
-        height: '100vh',
-        overflow: 'hidden',
-        boxSizing: 'border-box',
+    </el-aside>
+    <el-container :style="{ paddingLeft: collapsed ? 'var(--sidebar-collapsed-width)' : 'var(--sidebar-width)' }" direction="vertical">
+      <div class="top-bar" :style="{
+        width: collapsed ? 'calc(100% - var(--sidebar-collapsed-width))' : 'calc(100% - var(--sidebar-width))',
       }">
-        <el-scrollbar :height="elMainHeight + 'px'"
-          style="width: 100%; overflow: hidden; border-top: 1px solid #f7f7f7">
-          <router-view v-slot="{ Component }" v-if="isRouterAlive">
-            <keep-alive :include="tagList">
-              <component :is="Component" />
-            </keep-alive>
-          </router-view>
-        </el-scrollbar>
+        <tags-com-vue class="top-bar-tags"></tags-com-vue>
+        <header-com></header-com>
+      </div>
+      <el-main class="main-content">
+        <router-view v-slot="{ Component }" v-if="isRouterAlive">
+          <keep-alive :include="tagList">
+            <component :is="Component" />
+          </keep-alive>
+        </router-view>
       </el-main>
     </el-container>
   </el-container>
+
+  <!-- 上下布局（顶部导航模式） -->
+  <el-container v-else id="layout-topnav" direction="vertical">
+    <top-menu></top-menu>
+    <el-main class="main-content main-content--topnav">
+      <div class="page-title-bar" v-if="pageTitle">
+        <h2 class="page-title">{{ pageTitle }}</h2>
+      </div>
+      <router-view v-slot="{ Component }" v-if="isRouterAlive">
+        <keep-alive :include="tagList">
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+    </el-main>
+  </el-container>
 </template>
 
 <script setup>
-import { getCurrentInstance, nextTick, provide, ref, computed } from "vue";
+import { nextTick, provide, ref, computed, watch } from "vue";
 import sideMenu from "@/Components/common/sideMenuCom.vue";
 import headerCom from "@/Components/common/headerCom.vue";
 import tagsComVue from "@/Components/common/tagsCom.vue";
+import topMenu from "@/Components/common/topMenuCom.vue";
 import templateHooks from "../Hooks/templateHooks";
+import { getLayout } from "@/Utils/themeUtils";
+
 const collapsed = ref(false);
-const $common = getCurrentInstance().appContext.config.globalProperties.$common;
-const elMainHeight = ref($common.comElMainHeight());
 const isRouterAlive = ref(true);
-const { $route, $store } = templateHooks()
+const layout = ref(getLayout());
+const { $route, $store } = templateHooks();
+
 const tagList = computed(() => {
-  return $store.state.tagList.join(',')
-})
+  return $store.state.tagList.join(',');
+});
+
+const pageTitle = computed(() => {
+  const sideList = $store.state.sideList;
+  return sideList?.get($route.name) || $route.meta?.title || '';
+});
+
 const reload = () => {
   isRouterAlive.value = false;
   nextTick(() => {
@@ -62,27 +85,128 @@ const reload = () => {
 
 provide("reload", reload);
 
+// 监听 localStorage 变化（主题设置切换布局时触发）
+window.addEventListener('storage', (e) => {
+  if (e.key === 'theme-layout') {
+    layout.value = e.newValue || 'sidebar';
+  }
+});
+
+// 也监听自定义事件（同页面内切换）
+window.addEventListener('layout-change', () => {
+  layout.value = getLayout();
+});
 </script>
 
 <style lang="scss" scoped>
+/* ============= 侧边栏布局 ============= */
 .logo {
   width: 100%;
-  padding: 10px 20px;
+  height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
-  border-right: solid 1px #eef1f6;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 
-  .logo-box {
-    height: 40px;
-    box-sizing: border-box;
-    background: grey;
+  .logo-text {
+    font-size: 18px;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: 3px;
+    white-space: nowrap;
+  }
+
+  .logo-avatar {
+    width: 34px;
+    height: 34px;
+    border-radius: var(--radius-md);
+    border: 2px solid rgba(255, 255, 255, 0.15);
+    object-fit: cover;
+    transition: transform 0.2s;
+    &:hover {
+      transform: scale(1.06);
+      border-color: rgba(255, 255, 255, 0.3);
+    }
   }
 }
 
 .sider-com {
-  overflow: auto;
+  overflow: visible;
   height: 100vh;
   position: fixed;
   left: 0;
-  background: #000;
+  background: var(--sidebar-bg);
+  z-index: 1001;
+  transition: width 0.25s ease;
+}
+
+.collapse-trigger {
+  position: absolute;
+  right: -12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 40px;
+  background: var(--sidebar-bg);
+  border-radius: 0 6px 6px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1002;
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  .sider-com:hover & {
+    opacity: 0.6;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.top-bar {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  background: var(--color-bg-card);
+  box-shadow: var(--shadow-sm);
+  transition: width 0.2s;
+}
+
+.top-bar-tags {
+  flex: 1;
+  min-width: 0;
+}
+
+.main-content {
+  padding: var(--content-padding-top) var(--spacing-sm) 0 var(--spacing-sm);
+  background: var(--color-bg-page);
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+/* ============= 顶部导航布局 ============= */
+.main-content--topnav {
+  padding: calc(var(--header-height) + var(--spacing-xs)) var(--spacing-sm) 0 var(--spacing-sm);
+}
+
+.page-title-bar {
+  flex-shrink: 0;
+  padding: var(--spacing-md) var(--spacing-md) 0;
+}
+
+.page-title {
+  font-size: var(--font-size-xl);
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: 0.5px;
 }
 </style>
diff --git a/frontend/witcleansystem/src/Page/Login.vue b/frontend/witcleansystem/src/Page/Login.vue
index efd73f7..230f1d9 100644
--- a/frontend/witcleansystem/src/Page/Login.vue
+++ b/frontend/witcleansystem/src/Page/Login.vue
@@ -300,7 +300,7 @@ const sendSms = () => {
     }
     .forget {
       a {
-        color: #868bfb;
+        color: var(--color-primary);
       }
     }
   }
diff --git a/frontend/witcleansystem/src/Page/MainPage.vue b/frontend/witcleansystem/src/Page/MainPage.vue
index ea1dd8d..4b5e4e7 100644
--- a/frontend/witcleansystem/src/Page/MainPage.vue
+++ b/frontend/witcleansystem/src/Page/MainPage.vue
@@ -97,7 +97,7 @@
         </qu-table>
         <h1>设置表格行按钮</h1>
         <qu-table :tableData="tableData" :tableHeader="tableHeader" ref="tableDemo" :pageProps="pageProps"
-          :rowButtons="rowButtons" @rowButtonClick="rowButtonClick"></qu-table>
+          :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
       </div>
     </el-tab-pane>
     <el-tab-pane label="Tree" name="tree">
@@ -122,7 +122,6 @@
       <p>
         <code>buttonList</code>,为按钮列表数据。<code>buttonClick</code>为按钮点击事件回调函数。可接收参数按钮对象。
       </p>
-      <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
     </el-tab-pane>
   </el-tabs>
 </template>
diff --git a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/DistrictStatistics.vue b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/DistrictStatistics.vue
index 0011427..38f7972 100644
--- a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/DistrictStatistics.vue
+++ b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/DistrictStatistics.vue
@@ -4,69 +4,45 @@
   <!-- 人员人效统计 -->
   <div class="task-box" v-if="!pageBasicsData.loading">
     <div ref="topSearchRef">
-      <!-- 顶部功能按钮 start-->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 顶部功能按钮 end-->
-
       <!-- 搜索区域 start-->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
-          <el-form-item prop="timeArr" label="查询日期">
-            <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
-          </el-form-item>
-          <el-form-item label="所属站点" prop="districtId">
-            <div class="screen-item">
-              <el-select
-                filterable
-                placeholder="请选择所属站点"
-                v-model="pageBasicsData.screenForm.districtId"
-              >
-                <el-option
-                  v-for="item in pageBasicsData.districtList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="任务状态" prop="status">
-            <div class="screen-item">
-              <el-select
-                filterable
-                clearable
-                placeholder="请选择任务状态"
-                v-model="pageBasicsData.screenForm.status"
-              >
-                <el-option
-                  v-for="item in selectItems['status']"
-                  :key="item.key"
-                  :label="item.value"
-                  :value="item.key"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="restSearch"
-              >查询</el-button
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+        <el-form-item prop="timeArr" label="查询日期">
+          <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
+        </el-form-item>
+        <el-form-item label="所属站点" prop="districtId">
+          <div class="screen-item">
+            <el-select
+              filterable
+              placeholder="请选择所属站点"
+              v-model="pageBasicsData.screenForm.districtId"
             >
-            <el-button round icon="Refresh" type="warning" @click="clearScreen"
-              >重置</el-button
+              <el-option
+                v-for="item in pageBasicsData.districtList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="任务状态" prop="status">
+          <div class="screen-item">
+            <el-select
+              filterable
+              clearable
+              placeholder="请选择任务状态"
+              v-model="pageBasicsData.screenForm.status"
             >
-          </el-form-item>
-        </el-form>
-      </div>
+              <el-option
+                v-for="item in selectItems['status']"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+      </qu-search-area>
       <!-- 搜索区域 end-->
     </div>
     <!-- 表格 start-->
@@ -82,6 +58,8 @@
         @rowButtonClick="rowButtonClick"
         @fetchTableAttr="fetchTableAttr"
         showOverflowTooltip
+        :tableButtons="[{ cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' }]"
+        @buttonClick="buttonClick"
       />
     </div>
     <!-- 表格 end-->
diff --git a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/EfficiencyStatement.vue b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/EfficiencyStatement.vue
index 5c5ffb4..78b917f 100644
--- a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/EfficiencyStatement.vue
+++ b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/EfficiencyStatement.vue
@@ -4,51 +4,28 @@
   <!-- 人员人效统计 -->
   <div class="task-box" v-if="!pageBasicsData.loading">
     <div ref="topSearchRef">
-      <!-- 顶部功能按钮 start-->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 顶部功能按钮 end-->
       <!-- 搜索区域 start-->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
-          <el-form-item prop="timeArr" label="查询日期">
-            <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
-          </el-form-item>
-          <el-form-item label="所属站点" prop="districtId">
-            <div class="screen-item">
-              <el-select
-                filterable
-                placeholder="请选择"
-                v-model="pageBasicsData.screenForm.districtId"
-              >
-                <el-option
-                  v-for="item in pageBasicsData.districtList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="restSearch"
-              >查询</el-button
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+        <el-form-item prop="timeArr" label="查询日期">
+          <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
+        </el-form-item>
+        <el-form-item label="所属站点" prop="districtId">
+          <div class="screen-item">
+            <el-select
+              filterable
+              placeholder="请选择"
+              v-model="pageBasicsData.screenForm.districtId"
             >
-            <el-button round icon="Refresh" type="warning" @click="clearScreen"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
+              <el-option
+                v-for="item in pageBasicsData.districtList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+      </qu-search-area>
       <!-- 搜索区域 end-->
     </div>
     <!-- 表格 start-->
@@ -67,6 +44,8 @@
         @fetchTableAttr="fetchTableAttr"
         @sortChange="sortChange"
         showOverflowTooltip
+        :tableButtons="[{ cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' }]"
+        @buttonClick="buttonClick"
       />
     </div>
     <!-- 表格 end-->
diff --git a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/PersonStatistics.vue b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/PersonStatistics.vue
index 036ba7f..b9e0328 100644
--- a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/PersonStatistics.vue
+++ b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/PersonStatistics.vue
@@ -4,124 +4,94 @@
   <!-- 人员人效统计 -->
   <div class="task-box" v-if="!pageBasicsData.loading">
     <div ref="topSearchRef">
-      <!-- 顶部功能按钮 start-->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-          {
-            cnName: '生成人效报表',
-            enName: 'createEfficiencyStatement',
-            theme: 'success',
-            icon: 'pointer',
-          },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 顶部功能按钮 end-->
-
       <!-- 搜索区域 start-->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
-          <el-form-item prop="timeArr" label="查询日期">
-            <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
-          </el-form-item>
-          <el-form-item label="所属站点" prop="districtId">
-            <div class="screen-item">
-              <el-select
-                filterable
-                placeholder="请选择所属站点"
-                v-model="pageBasicsData.screenForm.districtId"
-              >
-                <el-option
-                  v-for="item in pageBasicsData.districtList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="人员名称" prop="userName">
-            <div class="screen-item">
-              <el-select
-                filterable
-                clearable
-                placeholder="请选择人员名称"
-                v-model="pageBasicsData.screenForm.userName"
-                @focus="
-                  () => {
-                    if (pageBasicsData.personSelectList?.length <= 0) {
-                      $message.warning('当前选择的所属站点暂无任务人员!');
-                    }
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+        <el-form-item prop="timeArr" label="查询日期">
+          <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
+        </el-form-item>
+        <el-form-item label="所属站点" prop="districtId">
+          <div class="screen-item">
+            <el-select
+              filterable
+              placeholder="请选择所属站点"
+              v-model="pageBasicsData.screenForm.districtId"
+            >
+              <el-option
+                v-for="item in pageBasicsData.districtList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="人员名称" prop="userName">
+          <div class="screen-item">
+            <el-select
+              filterable
+              clearable
+              placeholder="请选择人员名称"
+              v-model="pageBasicsData.screenForm.userName"
+              @focus="
+                () => {
+                  if (pageBasicsData.personSelectList?.length <= 0) {
+                    $message.warning('当前选择的所属站点暂无任务人员!');
                   }
-                "
-              >
-                <el-option
-                  v-for="item in pageBasicsData.personSelectList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.name"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="手机号码" prop="mobile">
-            <div class="screen-item">
-              <el-input
-                placeholder="请输入手机号码"
-                clearable
-                v-model="pageBasicsData.screenForm.mobile"
-              ></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="角色类型" prop="appRole">
-            <div class="screen-item">
-              <el-select
-                filterable
-                placeholder="请选择角色类型"
-                v-model="pageBasicsData.screenForm.appRole"
-              >
-                <el-option
-                  v-for="item in selectItems['appRole']"
-                  :key="item.key"
-                  :label="item.value"
-                  :value="item.key"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="任务状态" prop="status">
-            <div class="screen-item">
-              <el-select
-                filterable
-                clearable
-                placeholder="请选择任务状态"
-                v-model="pageBasicsData.screenForm.status"
-              >
-                <el-option
-                  v-for="item in selectItems['status']"
-                  :key="item.key"
-                  :label="item.value"
-                  :value="item.key"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="restSearch"
-              >查询</el-button
+                }
+              "
             >
-            <el-button round icon="Refresh" type="warning" @click="clearScreen"
-              >重置</el-button
+              <el-option
+                v-for="item in pageBasicsData.personSelectList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.name"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="手机号码" prop="mobile">
+          <div class="screen-item">
+            <el-input
+              placeholder="请输入手机号码"
+              clearable
+              v-model="pageBasicsData.screenForm.mobile"
+            ></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="角色类型" prop="appRole">
+          <div class="screen-item">
+            <el-select
+              filterable
+              placeholder="请选择角色类型"
+              v-model="pageBasicsData.screenForm.appRole"
             >
-          </el-form-item>
-        </el-form>
-      </div>
+              <el-option
+                v-for="item in selectItems['appRole']"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="任务状态" prop="status">
+          <div class="screen-item">
+            <el-select
+              filterable
+              clearable
+              placeholder="请选择任务状态"
+              v-model="pageBasicsData.screenForm.status"
+            >
+              <el-option
+                v-for="item in selectItems['status']"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+      </qu-search-area>
       <!-- 搜索区域 end-->
 
       <!-- 任务统计区域 start-->
@@ -147,6 +117,11 @@
         @rowButtonClick="rowButtonClick"
         @fetchTableAttr="fetchTableAttr"
         showOverflowTooltip
+        :tableButtons="[
+          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
+          { cnName: '生成人效报表', enName: 'createEfficiencyStatement', theme: 'success', icon: 'pointer' },
+        ]"
+        @buttonClick="buttonClick"
       />
     </div>
     <!-- 表格 end-->
diff --git a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/TaskStatistics.vue b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/TaskStatistics.vue
index ef1a68a..25357dc 100644
--- a/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/TaskStatistics.vue
+++ b/frontend/witcleansystem/src/Page/PersonEfficiencyCenter/TaskStatistics.vue
@@ -4,172 +4,148 @@
   <!-- 任务人效统计 -->
   <div class="task-box" v-if="!pageBasicsData.loading">
     <div ref="topSearchRef">
-      <!-- 顶部功能按钮 start-->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 顶部功能按钮 end-->
-
       <!-- 搜索区域 start-->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
-          <el-form-item prop="timeArr" label="查询日期">
-            <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
-          </el-form-item>
-          <el-form-item label="所属站点" prop="districtId">
-            <div class="screen-item">
-              <el-select
-                filterable
-                placeholder="请选择"
-                v-model="pageBasicsData.screenForm.districtId"
-              >
-                <el-option
-                  v-for="item in pageBasicsData.districtList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="任务派单号" prop="no">
-            <div class="screen-item">
-              <el-input
-                placeholder="请输入任务派单号"
-                clearable
-                v-model="pageBasicsData.screenForm.no"
-              ></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="任务名称" prop="name">
-            <div class="screen-item">
-              <el-input
-                placeholder="请输入任务名称"
-                clearable
-                v-model="pageBasicsData.screenForm.name"
-              ></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item label="任务位置" prop="taskScene">
-            <div class="screen-item">
-              <el-cascader
-                ref="taskSceneRef"
-                collapse-tags
-                :show-all-levels="false"
-                clearable
-                v-model="pageBasicsData.screenForm.taskScene"
-                :options="pageBasicsData.taskSceneList"
-                :props="pageBasicsData.areaGridSelectProps"
-                @change="taskSceneHandleChange"
-                @focus="
-                  () => {
-                    if (pageBasicsData.taskSceneList.length <= 0) {
-                      $message.warning(
-                        '当前选择的所属站点暂无任务位置,请重新选择!'
-                      );
-                    }
-                  }
-                "
-              >
-                <template #default="{ data }">
-                  <span>{{ data.name }}</span>
-                </template>
-              </el-cascader>
-            </div>
-          </el-form-item>
-          <el-form-item label="任务类型" prop="taskType">
-            <div class="screen-item">
-              <el-select
-                filterable
-                clearable
-                placeholder="请选择任务类型"
-                v-model="pageBasicsData.screenForm.taskType"
-              >
-                <el-option
-                  v-for="item in selectItems['taskType']"
-                  :key="item.key"
-                  :label="item.value"
-                  :value="item.key"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="派发方式" prop="manualAllocation">
-            <div class="screen-item">
-              <el-select
-                filterable
-                clearable
-                placeholder="请选择派发方式"
-                v-model="pageBasicsData.screenForm.manualAllocation"
-              >
-                <el-option
-                  v-for="item in selectItems['manualAllocation']"
-                  :key="item.key"
-                  :label="item.value"
-                  :value="item.key"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="接单人员" prop="taskAcceptUser">
-            <div class="screen-item">
-              <el-select
-                filterable
-                clearable
-                placeholder="请选择接单人员"
-                v-model="pageBasicsData.screenForm.taskAcceptUser"
-                @focus="
-                  () => {
-                    if (pageBasicsData.personSelectList?.length <= 0) {
-                      $message.warning('当前选择的所属站点暂无任务接单人员!');
-                    }
-                  }
-                "
-              >
-                <el-option
-                  v-for="item in pageBasicsData.personSelectList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.name"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item label="任务状态" prop="status">
-            <div class="screen-item">
-              <el-select
-                filterable
-                clearable
-                placeholder="请选择任务状态"
-                v-model="pageBasicsData.screenForm.status"
-              >
-                <el-option
-                  v-for="item in selectItems['status']"
-                  :key="item.key"
-                  :label="item.value"
-                  :value="item.key"
-                ></el-option>
-              </el-select>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="restSearch"
-              >查询</el-button
+      <qu-search-area :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
+        <el-form-item prop="timeArr" label="查询日期">
+          <qu-time-select v-model.date="pageBasicsData.screenForm.timeArr" />
+        </el-form-item>
+        <el-form-item label="所属站点" prop="districtId">
+          <div class="screen-item">
+            <el-select
+              filterable
+              placeholder="请选择"
+              v-model="pageBasicsData.screenForm.districtId"
             >
-            <el-button round icon="Refresh" type="warning" @click="clearScreen"
-              >重置</el-button
+              <el-option
+                v-for="item in pageBasicsData.districtList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="任务派单号" prop="no">
+          <div class="screen-item">
+            <el-input
+              placeholder="请输入任务派单号"
+              clearable
+              v-model="pageBasicsData.screenForm.no"
+            ></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="任务名称" prop="name">
+          <div class="screen-item">
+            <el-input
+              placeholder="请输入任务名称"
+              clearable
+              v-model="pageBasicsData.screenForm.name"
+            ></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="任务位置" prop="taskScene">
+          <div class="screen-item">
+            <el-cascader
+              ref="taskSceneRef"
+              collapse-tags
+              :show-all-levels="false"
+              clearable
+              v-model="pageBasicsData.screenForm.taskScene"
+              :options="pageBasicsData.taskSceneList"
+              :props="pageBasicsData.areaGridSelectProps"
+              @change="taskSceneHandleChange"
+              @focus="
+                () => {
+                  if (pageBasicsData.taskSceneList.length <= 0) {
+                    $message.warning(
+                      '当前选择的所属站点暂无任务位置,请重新选择!'
+                    );
+                  }
+                }
+              "
             >
-          </el-form-item>
-        </el-form>
-      </div>
+              <template #default="{ data }">
+                <span>{{ data.name }}</span>
+              </template>
+            </el-cascader>
+          </div>
+        </el-form-item>
+        <el-form-item label="任务类型" prop="taskType">
+          <div class="screen-item">
+            <el-select
+              filterable
+              clearable
+              placeholder="请选择任务类型"
+              v-model="pageBasicsData.screenForm.taskType"
+            >
+              <el-option
+                v-for="item in selectItems['taskType']"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="派发方式" prop="manualAllocation">
+          <div class="screen-item">
+            <el-select
+              filterable
+              clearable
+              placeholder="请选择派发方式"
+              v-model="pageBasicsData.screenForm.manualAllocation"
+            >
+              <el-option
+                v-for="item in selectItems['manualAllocation']"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="接单人员" prop="taskAcceptUser">
+          <div class="screen-item">
+            <el-select
+              filterable
+              clearable
+              placeholder="请选择接单人员"
+              v-model="pageBasicsData.screenForm.taskAcceptUser"
+              @focus="
+                () => {
+                  if (pageBasicsData.personSelectList?.length <= 0) {
+                    $message.warning('当前选择的所属站点暂无任务接单人员!');
+                  }
+                }
+              "
+            >
+              <el-option
+                v-for="item in pageBasicsData.personSelectList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.name"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+        <el-form-item label="任务状态" prop="status">
+          <div class="screen-item">
+            <el-select
+              filterable
+              clearable
+              placeholder="请选择任务状态"
+              v-model="pageBasicsData.screenForm.status"
+            >
+              <el-option
+                v-for="item in selectItems['status']"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key"
+              ></el-option>
+            </el-select>
+          </div>
+        </el-form-item>
+      </qu-search-area>
       <!-- 搜索区域 end-->
 
       <!-- 任务统计区域 start-->
@@ -197,6 +173,8 @@
         @rowButtonClick="rowButtonClick"
         @fetchTableAttr="fetchTableAttr"
         showOverflowTooltip
+        :tableButtons="[{ cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' }]"
+        @buttonClick="buttonClick"
       />
     </div>
     <!-- 表格 end-->
diff --git a/frontend/witcleansystem/src/Page/SystemSet/AuthSet/AuthManage/Index.vue b/frontend/witcleansystem/src/Page/SystemSet/AuthSet/AuthManage/Index.vue
index 3ebe7b2..7574580 100644
--- a/frontend/witcleansystem/src/Page/SystemSet/AuthSet/AuthManage/Index.vue
+++ b/frontend/witcleansystem/src/Page/SystemSet/AuthSet/AuthManage/Index.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="auth-page">
-    <div ref="buttonGroupRef">
-      <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-    </div>
     <div class="top-screen" ref="topScreenRef">
-      <el-form :model="screenForm" ref="screenFormRef" :inline="true" size="small">
+      <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
         <template v-if="userType == 1">
           <el-form-item label="渠道商">
             <div class="screen-item">
@@ -28,17 +25,13 @@
             <el-input v-model="screenForm.name" placeholder clearable></el-input>
           </div>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
-          <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef)">重置</el-button>
-        </el-form-item>
-      </el-form>
+      </qu-search-area>
     </div>
     <div class="auth-group">
       <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
       <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
         :rowButtons="rowButtons" @rowButtonClick="rowButtonCall" @pageChange="pageChange" @sortChange="sortChange"
-        @fetchTableAttr="fetchTableAttr" v-loading="mainLoading" v-else></qu-table>
+        @fetchTableAttr="fetchTableAttr" v-loading="mainLoading" v-else :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
     </div>
     <div v-if="showgroupForm">
       <el-dialog :title="groupFormData.id ? '编辑权限组' : '新增权限组'" v-model="showgroupForm" width="400px">
@@ -90,8 +83,7 @@ let mainLoading = ref(false),
 const delTip = ref(false),
   tableHeight = ref(0),
   showPeople = ref(false);
-const buttonGroupRef = ref(),
-  addformRef = ref(),
+const addformRef = ref(),
   topScreenRef = ref();
 
 const isLoaded = ref(false);
@@ -300,8 +292,7 @@ watch(tableButtons, val => {
     nextTick(() => {
       const windowHeight = document.body.clientHeight
       console.log(topScreenRef.value.clientHeight);
-      console.log(buttonGroupRef.value.clientHeight);
-      tableHeight.value = windowHeight - topScreenRef.value.clientHeight - buttonGroupRef.value.clientHeight - 170
+      tableHeight.value = windowHeight - topScreenRef.value.clientHeight - 170
     })
 
   }
diff --git a/frontend/witcleansystem/src/Page/SystemSet/PageManage/Index.vue b/frontend/witcleansystem/src/Page/SystemSet/PageManage/Index.vue
index 8c44331..7451421 100644
--- a/frontend/witcleansystem/src/Page/SystemSet/PageManage/Index.vue
+++ b/frontend/witcleansystem/src/Page/SystemSet/PageManage/Index.vue
@@ -18,7 +18,7 @@
       <template #default="{ data }">
         <div class="custom-tree-node">
           <div class="node-title">
-            <el-icon :size="10">
+            <el-icon :size="14">
               <my-icon :type="data.icon" v-if="data.icon"></my-icon>
             </el-icon>
             <span class="title-text">{{ data.title }}</span>
@@ -304,14 +304,11 @@ const addPageAction = () => {
     justify-content: flex-end;
   }
   .main-tree {
-    /* background-color: red; */
-    .title {
-      font-size: 12px;
-    }
+    font-size: var(--font-size-base);
+
     :deep(.el-tree-node) {
       .el-tree-node__content {
-        height: 40px !important;
-        // border-bottom: 1px solid #f1f1f1;
+        height: 40px;
       }
     }
   }
diff --git a/frontend/witcleansystem/src/Page/SystemSet/SystemParamSet/Index.vue b/frontend/witcleansystem/src/Page/SystemSet/SystemParamSet/Index.vue
index 22af421..b3fb38e 100644
--- a/frontend/witcleansystem/src/Page/SystemSet/SystemParamSet/Index.vue
+++ b/frontend/witcleansystem/src/Page/SystemSet/SystemParamSet/Index.vue
@@ -2,14 +2,8 @@
   <div class="user-manage">
     <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group
-          :buttonList="tableButtons"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-      </div>
       <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" inline size="small">
+        <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
           <el-form-item label="所属站点" prop="districtId">
             <div class="screen-item">
               <district-screen
@@ -18,22 +12,7 @@
               ></district-screen>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              icon="search"
-              size="small"
-              @click="restSearch"
-              >查询</el-button
-            >
-            <el-button
-              icon="Refresh"
-              size="small"
-              @click="clearScreen(screenFormRef)"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
+        </qu-search-area>
       </div>
       <div class="main-table" v-if="isLoaded">
         <qu-table
@@ -46,6 +25,8 @@
           @pageChange="pageChange"
           @sortChange="sortChange"
           v-loading="tableLoading"
+          :tableButtons="tableButtons"
+          @buttonClick="buttonClick"
         ></qu-table>
       </div>
       <div v-if="showAddForm">
@@ -133,7 +114,6 @@ import { systemParamSetService } from "@/ApiService/systemSetService";
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref();
-const buttonGroupRef = ref();
 const tableHeight = ref(500);
 const districtScreenRef = ref();
 const showAddForm = ref(false);
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolPlan.vue b/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolPlan.vue
index 2924221..4acaae6 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolPlan.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolPlan.vue
@@ -2,11 +2,7 @@
     <div class='user-manage'>
 
         <div class='main-container'>
-            <div ref='buttonGroupRef'>
-                <qu-button-group :buttonList='tableButtons' @buttonClick='buttonClick'></qu-button-group>
-            </div>
-            <div class='top-screen' ref='topScreenRef'>
-                <el-form :model='screenForm' ref='screenFormRef' inline>
+            <qu-search-area ref='topScreenRef' :model='screenForm' @search='restSearch' @reset="clearScreen(screenFormRef, ['districtId', 'timeArr'])">
                     <el-form-item label="查询日期" prop="timeArr">
                         <TimeSelectCom v-model="screenForm.timeArr" clearable></TimeSelectCom>
                     </el-form-item>
@@ -51,18 +47,13 @@
                             </el-select>
                         </div>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button type='primary' icon='search' @click='restSearch'>查询</el-button>
-                        <el-button icon='Refresh' @click="clearScreen(screenFormRef, ['districtId', 'timeArr'])">重置
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
+            </qu-search-area>
             <el-skeleton :rows='10' animated v-if='!isLoaded' :throttle='500' />
             <div class='main-table' v-if='isLoaded'>
                 <qu-table :tableData='tableData' v-model:tableHeader='tableHeader' :height='tableHeight'
                     :pageProps='pageProps' :rowButtons='rowButtons' @rowButtonClick='rowButtonClick'
-                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading' showOverflowTooltip>
+                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading' showOverflowTooltip
+                    :tableButtons='tableButtons' @buttonClick='buttonClick'>
                 </qu-table>
             </div>
             <div v-if="showWorkTimeForm">
@@ -117,7 +108,6 @@ import prioritySetCom from "@/Components/taskCenter/taskSet/prioritySetCom.vue";
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref()
-const buttonGroupRef = ref()
 const tableHeight = ref(500)
 const showWorkTimeForm = ref(false)
 const rules = ref({
@@ -312,7 +302,6 @@ watch(tableButtons, (val) => {
             tableHeight.value =
                 document.body.clientHeight -
                 topScreenRef.value.clientHeight -
-                buttonGroupRef.value.clientHeight -
                 170;
             console.log(tableHeight.value);
         });
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTask.vue b/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTask.vue
index f7cf0ad..45a0cb9 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTask.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTask.vue
@@ -2,11 +2,7 @@
     <div class='user-manage'>
         <!-- <el-skeleton :rows='10' animated v-if='!isLoaded' :throttle='500' /> -->
         <div class='main-container'>
-            <div ref='buttonGroupRef'>
-                <qu-button-group :buttonList='tableButtons' @buttonClick='buttonClick'></qu-button-group>
-            </div>
-            <div class='top-screen' ref='topScreenRef'>
-                <el-form :model='screenForm' ref='screenFormRef' inline>
+            <qu-search-area ref='topScreenRef' :model='screenForm' @search='restSearch' @reset="clearScreen(screenFormRef, ['districtId', 'timeArr'])">
                     <el-form-item label="查询日期" prop="timeArr">
                         <TimeSelectCom v-model="screenForm.timeArr" clearable></TimeSelectCom>
                     </el-form-item>
@@ -53,14 +49,7 @@
                             </el-select>
                         </div>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button type='primary' icon='search' size='small' @click='restSearch'>查询</el-button>
-                        <el-button icon='Refresh' size='small'
-                            @click="clearScreen(screenFormRef, ['districtId', 'timeArr'])">重置
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
+            </qu-search-area>
             <div class='main-table' v-if='isLoaded'>
                 <el-card class="box-card">
                     <template #header>
@@ -82,7 +71,8 @@
                 </el-card>
                 <qu-table :tableData='tableData' v-model:tableHeader='tableHeader' :height='tableHeight'
                     :pageProps='pageProps' :rowButtons='rowButtons' @rowButtonClick='rowButtonClick'
-                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading' showOverflowTooltip>
+                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading' showOverflowTooltip
+                    :tableButtons='tableButtons' @buttonClick='buttonClick'>
                 </qu-table>
             </div>
             <div v-if="showDetail">
@@ -191,7 +181,6 @@ const { $route, $router, $store, $message, $messageBox, $common, screenForm, scr
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref()
-const buttonGroupRef = ref()
 const tableHeight = ref(500)
 const showDetail = ref(false)
 const showCancelForm = ref(false)
@@ -376,7 +365,6 @@ watch(tableButtons, (val) => {
             tableHeight.value =
                 document.body.clientHeight -
                 topScreenRef.value.clientHeight -
-                buttonGroupRef.value.clientHeight -
                 320;
         });
     }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTaskList.vue b/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTaskList.vue
index e98c7a1..14b82be 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTaskList.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/PatrolTask/PatrolTaskList.vue
@@ -2,11 +2,7 @@
     <div class='user-manage'>
 
         <div class='main-container'>
-            <div ref='buttonGroupRef'>
-                <qu-button-group :buttonList='tableButtons' @buttonClick='buttonClick'></qu-button-group>
-            </div>
-            <div class='top-screen' ref='topScreenRef'>
-                <el-form :model='screenForm' ref='screenFormRef' inline>
+            <qu-search-area ref='topScreenRef' :model='screenForm' @search='restSearch' @reset="clearScreen(screenFormRef, ['timeArr', 'districtId'])">
                     <el-form-item label="查询日期" prop="name">
                         <TimeSelectCom v-model="screenForm.timeArr" clearable></TimeSelectCom>
                     </el-form-item>
@@ -60,19 +56,13 @@
                             </el-select>
                         </div>
                     </el-form-item>
-                    <el-form-item>
-                        <el-button type='primary' icon='search' size='small' @click='restSearch'>查询</el-button>
-                        <el-button icon='Refresh' size='small'
-                            @click="clearScreen(screenFormRef, ['timeArr', 'districtId'])">重置
-                        </el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
+            </qu-search-area>
             <el-skeleton :rows='10' animated v-if='!isLoaded' :throttle='500' />
             <div class='main-table' v-if='isLoaded'>
                 <qu-table :tableData='tableData' v-model:tableHeader='tableHeader' :height='tableHeight'
                     :pageProps='pageProps' :rowButtons='rowButtons' @rowButtonClick='rowButtonClick'
-                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading' showOverflowTooltip>
+                    @pageChange='pageChange' @sortChange='sortChange' v-loading='tableLoading' showOverflowTooltip
+                    :tableButtons='tableButtons' @buttonClick='buttonClick'>
                 </qu-table>
             </div>
             <div v-if="showPatrolDetail">
@@ -125,7 +115,6 @@ import TimeSelectCom from '@/Components/taskCenter/timeSelectCom.vue';
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref()
-const buttonGroupRef = ref()
 const tableHeight = ref(500)
 const showPatrolDetail = ref(false)
 const districtScreenRef = ref()
@@ -300,7 +289,6 @@ watch(tableButtons, (val) => {
             tableHeight.value =
                 document.body.clientHeight -
                 topScreenRef.value.clientHeight -
-                buttonGroupRef.value.clientHeight -
                 170;
         });
     }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/PunchRecord.vue b/frontend/witcleansystem/src/Page/TaskCenter/PunchRecord.vue
index 6ad4c31..2f51459 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/PunchRecord.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/PunchRecord.vue
@@ -2,11 +2,7 @@
   <div class="user-manage">
     <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-      </div>
-      <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" inline size="small">
+      <qu-search-area ref="topScreenRef" :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef)">
           <el-form-item label="打卡日期" prop="name">
             <el-date-picker v-model="screenForm.timeArr" type="datetimerange" range-separator="To"
               start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" />
@@ -66,16 +62,11 @@
               </el-select>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
-            <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef)">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
+      </qu-search-area>
       <div class="main-table" v-if="isLoaded">
         <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
           :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
-          v-loading="tableLoading"></qu-table>
+          v-loading="tableLoading" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
       </div>
     </div>
   </div>
@@ -88,7 +79,6 @@ import { attendanceService } from "@/ApiService/taskCenterService";
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref();
-const buttonGroupRef = ref();
 const tableHeight = ref(500);
 const userList = ref([]);
 const districtScreenRef = ref();
@@ -225,11 +215,9 @@ watch(tableButtons, (val) => {
       nextTick(() => {
         const windowHeight = document.body.clientHeight;
         console.log(topScreenRef.value.clientHeight);
-        console.log(buttonGroupRef.value.clientHeight);
         tableHeight.value =
           windowHeight -
           topScreenRef.value.clientHeight -
-          buttonGroupRef.value.clientHeight -
           170;
       });
     }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordDetail.vue b/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordDetail.vue
index 213dbb5..4982a05 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordDetail.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordDetail.vue
@@ -2,14 +2,7 @@
   <div class="user-manage">
     <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group
-          :buttonList="tableButtons"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-      </div>
-      <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" inline size="small">
+      <qu-search-area ref="topScreenRef" :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef, ['districtId'])">
           <el-form-item label="打卡日期" prop="name">
             <el-date-picker
               v-model="screenForm.dateArr"
@@ -81,23 +74,7 @@
               </el-cascader>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              icon="search"
-              size="small"
-              @click="restSearch"
-              >查询</el-button
-            >
-            <el-button
-              icon="Refresh"
-              size="small"
-              @click="clearScreen(screenFormRef, ['districtId'])"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
+      </qu-search-area>
       <div class="main-table" v-if="isLoaded">
         <qu-table
           :tableData="tableData"
@@ -109,6 +86,8 @@
           @pageChange="pageChange"
           @sortChange="sortChange"
           v-loading="tableLoading"
+          :tableButtons="tableButtons"
+          @buttonClick="buttonClick"
         ></qu-table>
       </div>
     </div>
@@ -183,7 +162,6 @@ screenForm.dateArr = [];
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref();
-const buttonGroupRef = ref();
 let tableHeight = ref(500);
 let taskSceneList = ref([]);
 let personSelectList = ref([]);
@@ -296,7 +274,6 @@ watch(tableButtons, (val) => {
       tableHeight.value =
         windowHeight -
         topScreenRef.value.clientHeight -
-        buttonGroupRef.value.clientHeight -
         170;
     });
   }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordList.vue b/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordList.vue
index f80ee29..62c1627 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordList.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/PunchRecords/PunchRecordList.vue
@@ -2,14 +2,7 @@
   <div class="user-manage">
     <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group
-          :buttonList="tableButtons"
-          @buttonClick="buttonClick"
-        ></qu-button-group>
-      </div>
-      <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" inline size="small">
+      <qu-search-area ref="topScreenRef" :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef, ['districtId'])">
           <el-form-item label="打卡日期" prop="name">
             <el-date-picker
               v-model="screenForm.dateArr"
@@ -81,23 +74,7 @@
               </el-cascader>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button
-              type="primary"
-              icon="search"
-              size="small"
-              @click="restSearch"
-              >查询</el-button
-            >
-            <el-button
-              icon="Refresh"
-              size="small"
-              @click="clearScreen(screenFormRef, ['districtId'])"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
+      </qu-search-area>
       <div class="main-table" v-if="isLoaded">
         <qu-table
           :tableData="tableData"
@@ -109,6 +86,8 @@
           @pageChange="pageChange"
           @sortChange="sortChange"
           v-loading="tableLoading"
+          :tableButtons="tableButtons"
+          @buttonClick="buttonClick"
         ></qu-table>
       </div>
     </div>
@@ -184,7 +163,6 @@ screenForm.dateArr = [];
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref();
-const buttonGroupRef = ref();
 let tableHeight = ref(500);
 let taskSceneList = ref([]);
 let personSelectList = ref([]);
@@ -296,7 +274,6 @@ watch(tableButtons, (val) => {
       tableHeight.value =
         windowHeight -
         topScreenRef.value.clientHeight -
-        buttonGroupRef.value.clientHeight -
         170;
     });
   }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/PurifierTask.vue b/frontend/witcleansystem/src/Page/TaskCenter/PurifierTask.vue
index db964fa..d49bde0 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/PurifierTask.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/PurifierTask.vue
@@ -2,22 +2,7 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 保洁任务 -->
   <div class="task-box" v-if="!pageBasicsData.loading">
-    <div ref="topSearchRef">
-      <!-- 顶部功能按钮 -->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 搜索区域 -->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
+    <qu-search-area ref="topSearchRef" :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
           <el-form-item prop="dateType">
             <el-select
               style="width: 110px"
@@ -196,17 +181,7 @@
               </el-cascader>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="restSearch"
-              >查询</el-button
-            >
-            <el-button round icon="Refresh" type="warning" @click="clearScreen"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
+    </qu-search-area>
 
     <!-- 表格 -->
     <div class="main-table">
@@ -222,6 +197,10 @@
         :rowButtons="rowButtons"
         @rowButtonClick="rowButtonClick"
         @fetchTableAttr="fetchTableAttr"
+        :tableButtons="[
+          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
+        ]"
+        @buttonClick="buttonClick"
       ></qu-table>
     </div>
   </div>
@@ -242,12 +221,7 @@
     @close="closeCancelDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="cancelRef"
       :model="cancelRelevant.cancelForm"
@@ -696,12 +670,12 @@ export default {
 <style lang="scss" scoped>
 .task-box {
   box-sizing: border-box;
-  height: calc(100vh - 146px);
+  height: calc(100vh - var(--page-top-offset));
   flex: 1;
   padding: 10px;
-  background-color: #fff;
+  background-color: var(--color-bg-card);
   .search-area {
-    padding: 10px 0 10px 10px;
+    padding: var(--spacing-md) var(--spacing-lg);
     display: flex;
     align-items: center;
   }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/AssignTask/Index.vue b/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/AssignTask/Index.vue
index db326a8..9f6a8ff 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/AssignTask/Index.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/AssignTask/Index.vue
@@ -2,23 +2,7 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 指派任务 -->
   <div class="task-box" v-if="!pageBasicsData.loading">
-    <div ref="topSearchRef">
-      <!-- 顶部功能按钮 -->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '新建', enName: 'add', theme: 'success', icon: 'plus' },
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 搜索区域 -->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
+    <qu-search-area ref="topSearchRef" :model="pageBasicsData.screenForm" @search="queryScreen" @reset="resetScreen">
           <el-form-item prop="dateType">
             <el-select
               style="width: 110px"
@@ -124,17 +108,7 @@
               </el-select>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="queryScreen"
-              >查询</el-button
-            >
-            <el-button round icon="Refresh" type="warning" @click="resetScreen"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
+    </qu-search-area>
     <!-- 表格 -->
     <div class="main-table">
       <qu-table
@@ -150,6 +124,11 @@
         :rowButtons="rowButtons"
         @rowButtonClick="rowButtonClick"
         @fetchTableAttr="fetchTableAttr"
+        :tableButtons="[
+          { cnName: '新建', enName: 'add', theme: 'success', icon: 'plus' },
+          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
+        ]"
+        @buttonClick="buttonClick"
       />
     </div>
     <el-dialog
@@ -1662,12 +1641,12 @@ export default {
 <style lang="scss" scoped>
 .task-box {
   box-sizing: border-box;
-  height: calc(100vh - 146px);
+  height: calc(100vh - var(--page-top-offset));
   flex: 1;
   padding: 10px;
-  background-color: #fff;
+  background-color: var(--color-bg-card);
   .search-area {
-    padding: 10px 0 10px 10px;
+    padding: var(--spacing-md) var(--spacing-lg);
     display: flex;
     align-items: center;
   }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/DeviceTask/Index.vue b/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/DeviceTask/Index.vue
index d4a0ad6..4c296d2 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/DeviceTask/Index.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/DeviceTask/Index.vue
@@ -2,11 +2,7 @@
   <div class="user-manage">
     <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
     <div class="main-container" v-show="isLoaded">
-      <div ref="buttonGroupRef">
-        <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-      </div>
-      <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" inline size="small">
+      <qu-search-area ref="topScreenRef" :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef, ['districtId'])">
           <el-form-item label="所属站点" prop="districtId">
             <div class="screen-item">
               <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"></district-screen>
@@ -38,16 +34,11 @@
               </el-select>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
-            <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef, ['districtId'])">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
+      </qu-search-area>
       <div class="main-table">
         <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
           :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
-          v-loading="tableLoading"></qu-table>
+          v-loading="tableLoading" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
       </div>
       <div v-if="showSet">
         <el-dialog v-model="showSet" :title="
@@ -236,7 +227,6 @@ import prioritySetCom from "@/Components/taskCenter/taskSet/prioritySetCom.vue";
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const topScreenRef = ref();
-const buttonGroupRef = ref();
 const districtScreenRef = ref();
 const editDistrictRef = ref();
 const windowHeight = ref(0);
@@ -743,7 +733,6 @@ watch(tableButtons, (val) => {
         tableHeight.value =
           windowHeight.value -
           topScreenRef.value.clientHeight -
-          buttonGroupRef.value.clientHeight -
           170;
       });
     }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/PlanTask/Index.vue b/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/PlanTask/Index.vue
index fc115a2..7cd5e88 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/PlanTask/Index.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/TaskSet/PlanTask/Index.vue
@@ -1,19 +1,6 @@
 <template>
   <div class="plan-task">
-    <el-container style="background: #fff">
-      <el-aside width="200px" :style="{ height: windowHeight - 130 + 'px' }">
-        <el-scrollbar>
-          <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
-          <qu-tree :treeData="treeData" v-if="isLoaded" @nodeClick="nodeClick">
-          </qu-tree>
-        </el-scrollbar>
-      </el-aside>
-      <el-main style="padding: 0">
-        <div ref="buttonGroupRef">
-          <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-        </div>
-        <div class="top-screen" ref="topScreenRef">
-          <el-form :model="screenForm" ref="screenFormRef" inline size="small">
+        <qu-search-area ref="topScreenRef" :model="screenForm" @search="restSearch" @reset="clearGridAndScreen">
             <el-form-item label="查询日期" prop="name">
               <el-date-picker v-model="screenForm.timeArr" type="datetimerange" range-separator="To"
                 start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" />
@@ -24,6 +11,25 @@
                   @districtChange="districtChange"></district-screen>
               </div>
             </el-form-item>
+            <el-form-item label="网格" prop="gridCascader">
+              <el-cascader
+                ref="gridCascaderRef"
+                v-model="gridCascaderValue"
+                :options="treeData"
+                :props="{
+                  children: 'childNode',
+                  label: 'name',
+                  value: 'gridId',
+                  checkStrictly: true,
+                  emitPath: false,
+                }"
+                clearable
+                filterable
+                placeholder="请选择网格"
+                style="width: 200px"
+                @change="gridCascaderChange"
+              />
+            </el-form-item>
             <el-form-item label="任务名称" prop="taskName">
               <div class="screen-item">
                 <el-input v-model="screenForm.taskName" placeholder="请输入任务名称" clearable></el-input>
@@ -97,17 +103,12 @@
                 </el-select>
               </div>
             </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
-              <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef, ['districtId'])">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
+        </qu-search-area>
         <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
         <div class="main-table" v-if="isLoaded">
           <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight"
             :pageProps="pageProps" :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange"
-            @sortChange="sortChange" v-loading="tableLoading"></qu-table>
+            @sortChange="sortChange" v-loading="tableLoading" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
         </div>
         <!-- <div v-if="showAddForm"> -->
         <el-dialog :title="currentRow.data.id ? '编辑' : '新建'" v-model="showAddForm" fullscreen center
@@ -134,8 +135,6 @@
             </el-form>
           </el-dialog>
         </div>
-      </el-main>
-    </el-container>
   </div>
 
   <!-- 优先级设置弹窗 start-->
@@ -166,10 +165,11 @@ import prioritySetCom from "@/Components/taskCenter/taskSet/prioritySetCom.vue";
 const isLoaded = ref(false);
 const tableLoading = ref(false);
 const treeData = ref([]);
+const gridCascaderValue = ref(null);
+const gridCascaderRef = ref();
 const districtScreenRef = ref();
 const tableHeight = ref(500);
 const topScreenRef = ref();
-const buttonGroupRef = ref();
 const windowHeight = ref(0);
 const showAddForm = ref(false);
 const addFormRef = ref();
@@ -345,23 +345,27 @@ const getPlanListInfo = () => {
       });
   });
 };
-const nodeClick = (obj) => {
-  const { sceneId, gridId, isscene, level, name } = obj.dom;
-  let scene = {
-    isscene,
-    level,
-    name,
-    id: null,
-  };
-  let id = null;
-  // console.log("isscene", isscene);
-  // console.log("gridId", gridId);
-  // console.log("sceneId", sceneId);
-  isscene == 1 ? (id = sceneId) : (id = gridId);
-  // console.log("id", id);
-  scene.id = id;
-  screenForm.scenes = [scene];
-  fetchData();
+// 级联选择器变化
+const gridCascaderChange = (val) => {
+  if (!val) {
+    screenForm.scenes = [];
+    return;
+  }
+  const checkedNodes = gridCascaderRef.value?.getCheckedNodes();
+  if (checkedNodes && checkedNodes.length > 0) {
+    const nodeData = checkedNodes[0].data;
+    const { sceneId, gridId, isscene, level, name } = nodeData;
+    const id = isscene == 1 ? sceneId : gridId;
+    screenForm.scenes = [{ isscene, level, name, id }];
+  } else {
+    screenForm.scenes = [];
+  }
+};
+// 重置搜索（含网格级联）
+const clearGridAndScreen = () => {
+  gridCascaderValue.value = null;
+  screenForm.scenes = [];
+  clearScreen(screenFormRef, ['districtId']);
 };
 const fetchData = () => {
   const { page, rows, sord, sidx } = pageProps;
@@ -422,20 +426,15 @@ const fetchTeams = () => {
 };
 // 监听站点变化
 const districtChange = (obj) => {
-  //   screenForm.serviceEvents = "";
-  //   screenForm.serviceAreas = "";
   screenForm.scenes = [];
-  screenForm.wageId = null
+  screenForm.wageId = null;
+  gridCascaderValue.value = null;
   if (obj) {
-    // fetchGridTree();
-    // fetchMatter();
     fetchTree();
-    fetchWageTypes()
+    fetchWageTypes();
   } else {
-    // serviceAreaOptions.value = [];
-    // eventData.value = [];
-    treeData.value = []
-    wageTypes.value = []
+    treeData.value = [];
+    wageTypes.value = [];
   }
 };
 // 根据站点获取时薪类型
@@ -575,7 +574,6 @@ watch(tableButtons, (val) => {
         tableHeight.value =
           windowHeight.value -
           topScreenRef.value.clientHeight -
-          buttonGroupRef.value.clientHeight -
           170;
       });
     }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/UserReportManage.vue b/frontend/witcleansystem/src/Page/TaskCenter/UserReportManage.vue
index 74ccb14..b22b07a 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/UserReportManage.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/UserReportManage.vue
@@ -1,23 +1,7 @@
 <template>
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <div class="task-box" v-if="!pageBasicsData.loading">
-    <div ref="topSearchRef">
-      <!-- 顶部功能按钮 -->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '新建', enName: 'add', theme: 'success', icon: 'plus' },
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 搜索区域 -->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
+    <qu-search-area ref="topSearchRef" :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
           <el-form-item label="所属站点" prop="districtId">
             <div class="screen-item">
               <el-select
@@ -61,17 +45,7 @@
               ></el-input>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="restSearch"
-              >查询</el-button
-            >
-            <el-button round icon="Refresh" type="warning" @click="clearScreen"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
+    </qu-search-area>
     <!-- 表格 -->
     <div class="main-table">
       <qu-table
@@ -87,6 +61,11 @@
         @rowButtonClick="rowButtonClick"
         @fetchTableAttr="fetchTableAttr"
         showOverflowTooltip
+        :tableButtons="[
+          { cnName: '新建', enName: 'add', theme: 'success', icon: 'plus' },
+          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
+        ]"
+        @buttonClick="buttonClick"
       ></qu-table>
     </div>
 
@@ -543,12 +522,12 @@ export default {
 <style lang="scss" scoped>
 .task-box {
   box-sizing: border-box;
-  height: calc(100vh - 146px);
+  height: calc(100vh - var(--page-top-offset));
   flex: 1;
   padding: 10px;
-  background-color: #fff;
+  background-color: var(--color-bg-card);
   .search-area {
-    padding: 10px 0 10px 10px;
+    padding: var(--spacing-md) var(--spacing-lg);
     display: flex;
     align-items: center;
   }
diff --git a/frontend/witcleansystem/src/Page/TaskCenter/UserReportTask.vue b/frontend/witcleansystem/src/Page/TaskCenter/UserReportTask.vue
index edd954f..1c591de 100644
--- a/frontend/witcleansystem/src/Page/TaskCenter/UserReportTask.vue
+++ b/frontend/witcleansystem/src/Page/TaskCenter/UserReportTask.vue
@@ -2,22 +2,7 @@
   <el-skeleton :rows="30" :loading="pageBasicsData.loading" animated />
   <!-- 用户上报任务 -->
   <div class="task-box" v-if="!pageBasicsData.loading">
-    <div ref="topSearchRef">
-      <!-- 顶部功能按钮 -->
-      <qu-button-group
-        :buttonList="[
-          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
-        ]"
-        @buttonClick="buttonClick"
-      />
-      <!-- 搜索区域 -->
-      <div class="search-area">
-        <el-form
-          ref="screenFormRef"
-          :model="pageBasicsData.screenForm"
-          inline
-          size="small"
-        >
+    <qu-search-area ref="topSearchRef" :model="pageBasicsData.screenForm" @search="restSearch" @reset="clearScreen">
           <el-form-item prop="dateType">
             <el-select
               style="width: 110px"
@@ -206,17 +191,7 @@
               </el-select>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="Search" round @click="restSearch"
-              >查询</el-button
-            >
-            <el-button round icon="Refresh" type="warning" @click="clearScreen"
-              >重置</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
+    </qu-search-area>
 
     <!-- 表格 -->
     <div class="main-table">
@@ -234,6 +209,10 @@
         @fetchTableAttr="fetchTableAttr"
         showOverflowTooltip
         @sortChange="sortChange"
+        :tableButtons="[
+          { cnName: '导出', enName: 'export', theme: 'primary', icon: 'top' },
+        ]"
+        @buttonClick="buttonClick"
       ></qu-table>
     </div>
   </div>
@@ -256,12 +235,7 @@
     @close="closeCancelDialog"
   >
     <el-form
-      style="
-        border-top: 1px solid #dcdfe6;
-        border-bottom: 1px solid #dcdfe6;
-        margin-top: -20px;
-        padding-bottom: 40px;
-      "
+      class="dialog-form"
       label-width="130px"
       ref="cancelRef"
       :model="cancelRelevant.cancelForm"
@@ -932,12 +906,12 @@ export default {
 <style lang="scss" scoped>
 .task-box {
   box-sizing: border-box;
-  height: calc(100vh - 146px);
+  height: calc(100vh - var(--page-top-offset));
   flex: 1;
   padding: 10px;
-  background-color: #fff;
+  background-color: var(--color-bg-card);
   .search-area {
-    padding: 10px 0 10px 10px;
+    padding: var(--spacing-md) var(--spacing-lg);
     display: flex;
     align-items: center;
   }
diff --git a/frontend/witcleansystem/src/Page/UserCenter/SkillManage.vue b/frontend/witcleansystem/src/Page/UserCenter/SkillManage.vue
index 1acd2ee..5d80ec6 100644
--- a/frontend/witcleansystem/src/Page/UserCenter/SkillManage.vue
+++ b/frontend/witcleansystem/src/Page/UserCenter/SkillManage.vue
@@ -2,11 +2,8 @@
   <div class="skill-manage">
 
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-      </div>
       <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" label-width="80px" inline size="small">
+        <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef, ['districtId'])">
           <el-form-item label="所属站点" prop="districtId">
             <div class="screen-item">
               <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"></district-screen>
@@ -17,17 +14,13 @@
               <el-input v-model="screenForm.skillName" clearable></el-input>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
-            <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef, ['districtId'])">重置</el-button>
-          </el-form-item>
-        </el-form>
+        </qu-search-area>
       </div>
       <div class="main-table">
         <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
         <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
           :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
-          v-loading="tableLoading" v-if="isLoaded">
+          v-loading="tableLoading" v-if="isLoaded" :tableButtons="tableButtons" @buttonClick="buttonClick">
           <template #colorValue="scope">
             <span class="custom-color" :style="{ background: scope.row.colorValue }"></span>
           </template>
@@ -96,7 +89,6 @@ const districtId = computed(() => {
 })
 const tableHeight = ref(500)
 const topScreenRef = ref()
-const buttonGroupRef = ref()
 const districtScreenRef = ref()
 // 数据定义 end
 const buttonClick = (button) => {
@@ -254,7 +246,7 @@ watch(tableButtons, val => {
     if (val && val.length != 0) {
       nextTick(() => {
         const windowHeight = document.body.clientHeight
-        tableHeight.value = windowHeight - topScreenRef.value.clientHeight - buttonGroupRef.value.clientHeight - 170
+        tableHeight.value = windowHeight - topScreenRef.value.clientHeight - 170
       })
 
     }
diff --git a/frontend/witcleansystem/src/Page/UserCenter/TagsManage.vue b/frontend/witcleansystem/src/Page/UserCenter/TagsManage.vue
index 3816204..5b92e9f 100644
--- a/frontend/witcleansystem/src/Page/UserCenter/TagsManage.vue
+++ b/frontend/witcleansystem/src/Page/UserCenter/TagsManage.vue
@@ -2,11 +2,8 @@
   <div class="tags-manage">
 
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-      </div>
       <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" label-width="80px" inline size="small">
+        <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef, ['districtId'])">
           <el-form-item label="所属站点" prop="districtId">
             <div class="screen-item">
               <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"></district-screen>
@@ -17,17 +14,13 @@
               <el-input v-model="screenForm.labelName" clearable></el-input>
             </div>
           </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
-            <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef, ['districtId'])">重置</el-button>
-          </el-form-item>
-        </el-form>
+        </qu-search-area>
       </div>
       <div class="main-table">
         <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
         <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
           :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
-          v-loading="tableLoading" v-if="isLoaded">
+          v-loading="tableLoading" v-if="isLoaded" :tableButtons="tableButtons" @buttonClick="buttonClick">
           <template #colorValue="scope">
             <span class="custom-color" :style="{ background: scope.row.colorValue }"></span>
           </template>
@@ -93,7 +86,6 @@ const predefineColors = ref([
 const districtId = computed(() => {
   return Number($route.query.districtId)
 })
-const buttonGroupRef = ref()
 const topScreenRef = ref()
 const tableHeight = ref(500)
 const districtScreenRef = ref()
@@ -250,7 +242,7 @@ watch(tableButtons, val => {
     if (val && val.length != 0) {
       nextTick(() => {
         const windowHeight = document.body.clientHeight
-        tableHeight.value = windowHeight - topScreenRef.value.clientHeight - buttonGroupRef.value.clientHeight - 170
+        tableHeight.value = windowHeight - topScreenRef.value.clientHeight - 170
       })
 
     }
diff --git a/frontend/witcleansystem/src/Page/UserCenter/TeamManage.vue b/frontend/witcleansystem/src/Page/UserCenter/TeamManage.vue
index aa22386..16b0e09 100644
--- a/frontend/witcleansystem/src/Page/UserCenter/TeamManage.vue
+++ b/frontend/witcleansystem/src/Page/UserCenter/TeamManage.vue
@@ -1,11 +1,8 @@
 <template>
   <div class="user-manage">
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-      </div>
       <div class="top-screen" ref="topScreenRef">
-        <el-form :model="screenForm" ref="screenFormRef" size="small" inline>
+        <qu-search-area :model="screenForm" @search="restSearch" @reset="clearScreen(screenFormRef, ['districtId'])">
           <el-form-item label="所属站点" prop="districtId">
             <div class="screen-item">
               <district-screen v-model:districtId="screenForm.districtId" ref="districtScreenRef"
@@ -17,18 +14,13 @@
               <el-input v-model="screenForm.workGroupName" clearable></el-input>
             </div>
           </el-form-item>
-
-          <el-form-item>
-            <el-button type="primary" icon="search" size="small" @click="restSearch">查询</el-button>
-            <el-button icon="Refresh" size="small" @click="clearScreen(screenFormRef, ['districtId'])">重置</el-button>
-          </el-form-item>
-        </el-form>
+        </qu-search-area>
       </div>
       <div class="main-table">
         <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
         <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
           :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
-          v-loading="tableLoading" v-if="isLoaded"></qu-table>
+          v-loading="tableLoading" v-if="isLoaded" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
       </div>
       <div v-if="showEditForm">
         <el-dialog :title="currentRow.data.id ? '编辑' : '新建'" v-model="showEditForm" width="30%">
@@ -80,7 +72,6 @@ const defaultProps = computed(() => {
     buttonId: currentButton.data.buttonId,
   };
 });
-const buttonGroupRef = ref();
 const topScreenRef = ref();
 // 数据定义 end
 const buttonClick = (button) => {
@@ -247,11 +238,9 @@ watch(tableButtons, (val) => {
       nextTick(() => {
         const windowHeight = document.body.clientHeight;
         console.log(topScreenRef.value.clientHeight);
-        console.log(buttonGroupRef.value.clientHeight);
         tableHeight.value =
           windowHeight -
           topScreenRef.value.clientHeight -
-          buttonGroupRef.value.clientHeight -
           170;
       });
     }
diff --git a/frontend/witcleansystem/src/Page/UserCenter/UserManage.vue b/frontend/witcleansystem/src/Page/UserCenter/UserManage.vue
index d2ec38f..f272881 100644
--- a/frontend/witcleansystem/src/Page/UserCenter/UserManage.vue
+++ b/frontend/witcleansystem/src/Page/UserCenter/UserManage.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="user-manage">
     <div class="main-container">
-      <div ref="buttonGroupRef">
-        <qu-button-group :buttonList="tableButtons" @buttonClick="buttonClick"></qu-button-group>
-      </div>
       <div class="top-screen" ref="topScreenRef">
         <userManageScreen v-model:screenForm="screenForm" :selectItems="selectItems" @restSearch="restSearch"
           @clearScreen="clearScreen">
@@ -13,7 +10,7 @@
         <el-skeleton :rows="10" animated v-if="!isLoaded" :throttle="500" />
         <qu-table :tableData="tableData" v-model:tableHeader="tableHeader" :height="tableHeight" :pageProps="pageProps"
           :rowButtons="rowButtons" @rowButtonClick="rowButtonClick" @pageChange="pageChange" @sortChange="sortChange"
-          v-loading="tableLoading" v-if="isLoaded"></qu-table>
+          v-loading="tableLoading" v-if="isLoaded" :tableButtons="tableButtons" @buttonClick="buttonClick"></qu-table>
       </div>
       <div v-if="showEditForm">
         <el-dialog v-model="showEditForm" :title="currentRow.data.id ? '编辑' : '新建'" width="600px">
@@ -46,7 +43,6 @@ const tableLoading = ref(false);
 const showEditForm = ref(false);
 const testColor = ref("blue");
 const tableHeight = ref(500);
-const buttonGroupRef = ref();
 const topScreenRef = ref();
 // 数据定义 end
 const buttonClick = (button) => {
@@ -198,7 +194,6 @@ watch(tableButtons, (val) => {
         tableHeight.value =
           windowHeight -
           topScreenRef.value.clientHeight -
-          buttonGroupRef.value.clientHeight -
           170;
       });
     }
diff --git a/frontend/witcleansystem/src/Utils/themeUtils.js b/frontend/witcleansystem/src/Utils/themeUtils.js
new file mode 100644
index 0000000..7c47bec
--- /dev/null
+++ b/frontend/witcleansystem/src/Utils/themeUtils.js
@@ -0,0 +1,119 @@
+/**
+ * 主题管理工具
+ * - 主色调切换（预设色板）
+ * - 暗色/浅色模式（手动切换 + 跟随系统）
+ */
+
+// 预设主色调
+export const themeColors = [
+  { name: '靛蓝', value: '#6366f1' },
+  { name: '天蓝', value: '#3b82f6' },
+  { name: '青色', value: '#06b6d4' },
+  { name: '翠绿', value: '#10b981' },
+  { name: '琥珀', value: '#f59e0b' },
+  { name: '玫红', value: '#ec4899' },
+  { name: '紫色', value: '#8b5cf6' },
+  { name: '红色', value: '#ef4444' },
+];
+
+// 根据主色生成衍生色
+function generatePalette(hex) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return {
+    '--color-primary': hex,
+    '--color-primary-light': lighten(r, g, b, 0.25),
+    '--color-primary-dark': darken(r, g, b, 0.15),
+    '--color-primary-bg': lighten(r, g, b, 0.9),
+    '--sidebar-bg': darken(r, g, b, 0.35),
+  };
+}
+
+function lighten(r, g, b, amount) {
+  return rgbToHex(
+    Math.round(r + (255 - r) * amount),
+    Math.round(g + (255 - g) * amount),
+    Math.round(b + (255 - b) * amount)
+  );
+}
+
+function darken(r, g, b, amount) {
+  return rgbToHex(
+    Math.round(r * (1 - amount)),
+    Math.round(g * (1 - amount)),
+    Math.round(b * (1 - amount))
+  );
+}
+
+function rgbToHex(r, g, b) {
+  return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
+}
+
+// 应用主色调
+export function applyThemeColor(hex) {
+  const palette = generatePalette(hex);
+  const root = document.documentElement;
+  Object.entries(palette).forEach(([key, val]) => {
+    root.style.setProperty(key, val);
+  });
+  // 同步 Element Plus 主色
+  root.style.setProperty('--el-color-primary', hex);
+  localStorage.setItem('theme-color', hex);
+}
+
+// 暗色模式: 'light' | 'dark' | 'system'
+export function applyDarkMode(mode) {
+  const root = document.documentElement;
+  localStorage.setItem('theme-mode', mode);
+
+  if (mode === 'system') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    root.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+  } else {
+    root.setAttribute('data-theme', mode);
+  }
+}
+
+// 监听系统主题变化
+export function watchSystemTheme() {
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+  mql.addEventListener('change', (e) => {
+    const mode = localStorage.getItem('theme-mode') || 'light';
+    if (mode === 'system') {
+      document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
+    }
+  });
+}
+
+// 布局模式: 'sidebar' | 'topnav'
+export function applyLayout(layout) {
+  localStorage.setItem('theme-layout', layout);
+  document.documentElement.setAttribute('data-layout', layout);
+  const root = document.documentElement;
+  if (layout === 'topnav') {
+    // header(50px) + spacing(4px) + 标题栏(40px)
+    root.style.setProperty('--page-top-offset', 'calc(var(--header-height) + 44px)');
+  } else {
+    root.style.setProperty('--page-top-offset', 'var(--content-padding-top)');
+  }
+}
+
+export function getLayout() {
+  return localStorage.getItem('theme-layout') || 'sidebar';
+}
+
+// 初始化主题（页面加载时调用）
+export function initTheme() {
+  const savedColor = localStorage.getItem('theme-color');
+  if (savedColor) {
+    applyThemeColor(savedColor);
+  }
+
+  const savedMode = localStorage.getItem('theme-mode') || 'light';
+  applyDarkMode(savedMode);
+  watchSystemTheme();
+
+  const savedLayout = getLayout();
+  applyLayout(savedLayout);
+}
diff --git a/frontend/witcleansystem/src/main.js b/frontend/witcleansystem/src/main.js
index 6a6d763..f61f252 100644
--- a/frontend/witcleansystem/src/main.js
+++ b/frontend/witcleansystem/src/main.js
@@ -8,6 +8,9 @@ import locale from "element-plus/lib/locale/lang/zh-cn";
 import { createFromIconfontCN } from "@ant-design/icons-vue";
 import * as ElIconModules from "@element-plus/icons-vue";
 import "default-passive-events";
+import "./Assets/css/variables.scss";
+import { initTheme } from "./Utils/themeUtils";
+initTheme();
 
 import "./Router/router-guard";
 import "./Utils/resizeWindow";
@@ -18,6 +21,7 @@ import quTree from "./Components/public/quTree/tree.vue";
 import quButtonGroup from "./Components/public/quButttonGroup/buttonGroup.vue";
 import districtScreen from "./Components/common/districtScreenCom.vue";
 import quTimeSelect from "./Components/public/quTimeSelect/timeSelect.vue";
+import quSearchArea from "./Components/public/quSearchArea/searchArea.vue";
 
 
 const MyIcon = createFromIconfontCN({
@@ -44,4 +48,5 @@ app.component("qu-tree", quTree);
 app.component("qu-button-group", quButtonGroup);
 app.component("district-screen", districtScreen);
 app.component("qu-time-select", quTimeSelect);
+app.component("qu-search-area", quSearchArea);
 app.mount("#app");
diff --git a/frontend/witcleansystem/vite.config.js b/frontend/witcleansystem/vite.config.js
index ac9d2ea..dc2673d 100644
--- a/frontend/witcleansystem/vite.config.js
+++ b/frontend/witcleansystem/vite.config.js
@@ -26,7 +26,7 @@ export default defineConfig({
     proxy: {
       "/api": {
         // target: "https://b.ququsearch.com",
-        target: "http://192.168.1.182:8095",
+        target: "http://100.93.0.28:8095",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },