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