feat: 前端 UI 样式全面优化

- 建立 Design Token 体系（variables.scss），统一颜色、间距、圆角、阴影、字体
- Element Plus 主题对接，通过 CSS 变量覆盖组件样式，删除所有 !important 按钮覆盖
- 统一侧边栏/头部/标签栏配色，侧边栏背景跟随主色调
- 全局组件样式规范化（按钮、输入框、表格、弹窗、抽屉、标签、分页等圆角和交互统一）
- 左侧树面板改为搜索区级联选择器（7个基础信息页面+计划任务）
- 搜索区封装为 qu-search-area 卡片式组件，超过5项自动展开/收起
- 表格操作按钮集成到 qu-table 组件工具栏
- 表格高度自动撑满（ResizeObserver），列宽自动伸缩（min-width）
- 新增主题设置（主色切换+调色板+暗色/浅色模式+跟随系统）
- 新增上下布局模式（顶部水平导航菜单+页面标题）
- 暗色模式完整适配（表格、弹窗、分页、斑马纹等）
- 布局优化：tags+头像合并一行，收缩按钮改为侧边栏半圆触发器
- 后端 MySQL 配置添加 allowPublicKeyRetrieval=true

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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