养护计划照片自己写样式

刘淇
1 parent 4570c70a
Showing 10 changed files with 629 additions and 393 deletions
api/index/index.js
components/uni-charts/uni-charts.vue
pages-sub/daily/maintain-manage/finish-plan-detail.vue
pages-sub/data/tree-archive/addTree.vue
pages-sub/data/tree-archive/editTree.vue
pages-sub/data/tree-archive/treeRecord.vue
pages/index/index.vue
pages/login/index.vue
pages/mine/index.vue
pages/workbench/index.vue
+
+import { post, get } from '@/common/utils/request';
+
+
+/**
+ * 任务完成情况统计
+ * @param {Object} params {mobile, password, code}
+ * @returns {Promise}
+ */
+export const getTaskCompletionSummary = (params) => {
+  return post('/app-api/homePage/summary/taskCompletionSummary', params);
+};
+
+
+/**
+ * 任务待办已办
+ * @param {Object} params {mobile, password, code}
+ * @returns {Promise}
+ */
+export const getTaskDetails = (params) => {
+  return post('/app-api/homePage/summary/taskDetails', params);
+};
+
@@ -88,7 +88,7 @@ export default {
         this.drawLine()
       }
     },
-    // 折线图绘制（终极版：Y轴整数 + 自适应极值 + 修复文字折叠 + 优化图例间距）
+    // 折线图绘制（移除平滑过渡，改为纯直线）
     drawLine () {
       if (!this.data.length || !this.categories.length) return;
@@ -100,8 +100,7 @@ export default {
         xAxis = {},
         yAxis = {},
         legend = {},
-        color = ['#25AF69', '#B34C17'],
-        lineSmooth = true
+        color = ['#25AF69', '#B34C17']
       } = this.option
       // 清空画布
@@ -154,7 +153,7 @@ export default {
         ctx.lineTo(width - gridRight, y)
         ctx.stroke()
-        // ========== 核心修改：Y轴显示整数（无小数点） ==========
+        // Y轴显示整数（无小数点）
         ctx.setFillStyle(yAxis.axisLabel?.color || '#666')
         ctx.setFontSize(yAxis.axisLabel?.fontSize || 12)
         const val = minVal + (i * yTickStep)
@@ -211,7 +210,7 @@ export default {
         })
       }
-      // 绘制平滑折线（无数据点）
+      // ========== 核心修改：移除平滑曲线，改为纯直线连接 ==========
       this.data.forEach((series, seriesIdx) => {
         const seriesColor = series.color || color[seriesIdx % color.length]
@@ -226,21 +225,8 @@ export default {
           if (index === 0) {
             ctx.moveTo(x, y)
           } else {
-            if (lineSmooth && index < series.data.length - 1) {
-              const prevX = gridLeft + (index - 1) * xStep
-              const prevY = gridTop + drawHeight - ((series.data[index - 1] - minVal) / valRange) * drawHeight
-              const nextX = gridLeft + (index + 1) * xStep
-              const nextY = gridTop + drawHeight - ((series.data[index + 1] - minVal) / valRange) * drawHeight
-
-              const cp1x = (prevX + x) / 2
-              const cp1y = prevY
-              const cp2x = (x + nextX) / 2
-              const cp2y = y
-
-              ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-            } else {
-              ctx.lineTo(x, y)
-            }
+            // 直接直线连接，移除所有贝塞尔曲线平滑逻辑
+            ctx.lineTo(x, y)
           }
         })
@@ -249,7 +235,7 @@ export default {
       ctx.draw()
     },
-    // K线图绘制（同步修改Y轴为整数）
+    // K线图绘制（同步修改Y轴为整数，K线本身无平滑逻辑，保持原样）
     drawKline () {
       const ctx = uni.createCanvasContext('uni-charts', this)
       this.ctx = ctx
@@ -322,7 +308,7 @@ export default {
         }
       })
-      // 绘制K线
+      // 绘制K线（K线本身就是直线，无平滑逻辑）
       this.data.forEach((item, index) => {
         const { open, high, low, close } = item
         const x = gridLeft + index * xStep + xStep / 2
@@ -331,7 +317,7 @@ export default {
         const yHigh = gridTop + drawHeight - ((high - minVal) / valRange) * drawHeight
         const yLow = gridTop + drawHeight - ((low - minVal) / valRange) * drawHeight
-        // 绘制高低线
+        // 绘制高低线（直线）
         ctx.setStrokeStyle(close >= open ? color[0] : color[1])
         ctx.setLineWidth(1)
         ctx.beginPath()
@@ -9,22 +9,15 @@
     ></up-loading-page>
     <!-- 内容容器 -->
-    <template v-else  >
-    <view class="content-wrap" v-for="(i, index) in orderDetail" :key="index">
-
+    <template v-else>
+      <view class="content-wrap" v-for="(i, index) in orderDetail" :key="index">
         <!-- 工单详情内容 -->
         <up-cell-group :border="false" inset>
           <!-- 1. 工单计划名称 -->
-          <up-cell
-              align="middle"
-          >
-
+          <up-cell align="middle">
             <template #title>
-              <view  class="up-line-1">{{i.planName || '--'}}</view>
+              <view class="up-line-1">{{i.planName || '--'}}</view>
             </template>
-<!--            <template #value>-->
-<!--              <view  class="up-line-1">{{i.remark || '&#45;&#45;'}}</view>-->
-<!--            </template>-->
           </up-cell>
           <!-- 2. 工单位置 -->
@@ -44,34 +37,42 @@
           <!-- 4. 情况描述 -->
           <up-cell
               title="计划有效期"
-              :value="`${timeFormat(i.beginTime,'yyyy-mm-dd')} 至 ${timeFormat(i. endTime,'yyyy-mm-dd')}`"
+              :value="`${timeFormat(i.beginTime,'yyyy-mm-dd')} 至 ${timeFormat(i.endTime,'yyyy-mm-dd')}`"
               align="middle"
           ></up-cell>
-          <!-- 5. 问题照片（核心修复：判断条件+空值处理） -->
+          <!-- 5. 问题照片（核心修复：兼容WebP + 强制尺寸） -->
           <up-cell title="照片">
             <template #value>
               <view class="cell-content-wrap">
-                <up-album
-                    v-if="!!i.beginImgList?.length"
-                    :urls="i.beginImgList || []"
-                    singleSize="70"
-                    :preview-full-image="true"
-                ></up-album>
+                <!-- 修复1：手动渲染图片，兼容WebP + 强制尺寸 -->
+                <view v-if="!!i.beginImgList?.length" class="album-container">
+                  <view
+                      class="album-item"
+                      v-for="(imgUrl, imgIndex) in formatImageUrls(i.beginImgList)"
+                      :key="imgIndex"
+                      @click="previewImage(imgUrl, formatImageUrls(i.beginImgList))"
+                  >
+                    <image
+                        :src="imgUrl"
+                        mode="widthFix"
+                        class="album-image"
+                        :style="{width: '70px', height: '70px', objectFit: 'cover'}"
+                    ></image>
+                  </view>
+                </view>
                 <text v-else class="empty-text">暂无问题照片</text>
               </view>
             </template>
           </up-cell>
           <!-- 7. 处理结果 -->
-          <up-cell
-              align="middle"
-          >
+          <up-cell align="middle">
             <template #title>
-              <view  style="min-width: 200rpx">巡查描述</view>
+              <view style="min-width: 200rpx">巡查描述</view>
             </template>
             <template #value>
-              <view  class="up-line-1 common-text-color" >{{i.remark || '--'}}</view>
+              <view class="up-line-1 common-text-color">{{i.remark || '--'}}</view>
             </template>
           </up-cell>
@@ -81,7 +82,6 @@
               align="middle"
           ></up-cell>
-
           <up-cell
               title="提交人"
               :value="i.userName || '--'"
@@ -89,7 +89,7 @@
               :border="false"
           ></up-cell>
         </up-cell-group>
-    </view>
+      </view>
     </template>
   </view>
 </template>
@@ -99,10 +99,44 @@ import {ref} from &#39;vue&#39;;
 import {detailList} from "@/api/maintain-manage/maintain-manage";
 import {onLoad} from '@dcloudio/uni-app';
 import {timeFormat} from '@/uni_modules/uview-plus';
+
 // 状态管理
 const loading = ref(true);
 const orderDetail = ref([]);
+/**
+ * 格式化图片URL（兼容WebP + 清理非法字符）
+ * @param urls 原始图片列表
+ */
+const formatImageUrls = (urls) => {
+  if (!Array.isArray(urls) || urls.length === 0) return [];
+
+  return urls.map(url => {
+    if (typeof url !== 'string') return '';
+    // 1. 清理URL开头的非法字符（如数字、空格）
+    const validStart = url.indexOf('http');
+    const cleanUrl = validStart > 0 ? url.substring(validStart) : url;
+    // 2. 小程序兼容：WebP转JPEG（可选，后端无转换则注释）
+    // return cleanUrl.replace('.webp', '.jpeg');
+    return cleanUrl;
+  }).filter(url => !!url);
+};
+
+/**
+ * 预览图片
+ * @param currentUrl 当前点击的图片
+ * @param allUrls 所有图片列表
+ */
+const previewImage = (currentUrl, allUrls) => {
+  uni.previewImage({
+    current: currentUrl,
+    urls: allUrls,
+    fail: (err) => {
+      console.error('预览图片失败：', err);
+      uni.showToast({title: '预览图片失败', icon: 'none'});
+    }
+  });
+};
 /**
  * 获取工单详情
@@ -111,14 +145,18 @@ const getOrderDetail = async (planNo: string) =&gt; {
   try {
     loading.value = true;
     let queryData = {
-      planNo:planNo,
-      pageSize:100,
-      pageNo:1,
-    }
+      planNo: planNo,
+      pageSize: 100,
+      pageNo: 1,
+    };
     const res = await detailList(queryData);
     console.log('接口返回：', res);
-    orderDetail.value = res.list;
+    // 修复2：正确解析接口数据（res.data.list 而非 res.list）
+    orderDetail.value = res.data?.list || res.list || [];
+
+    // 调试：打印格式化后的图片URL
+    console.log('格式化后图片URL：', formatImageUrls(orderDetail.value[0]?.beginImgList || []));
   } catch (error) {
     console.error('获取工单详情失败：', error);
     uni.showToast({title: '加载失败，请重试', icon: 'none'});
@@ -140,7 +178,6 @@ onLoad((options) =&gt; {
 </script>
 <style scoped lang="scss">
-
 // 内容容器
 .content-wrap {
   background: #fff;
@@ -149,5 +186,37 @@ onLoad((options) =&gt; {
   margin-bottom: 30rpx;
 }
+// 图片容器样式
+.cell-content-wrap {
+  padding: 10rpx 0;
+}
+
+// 自定义相册容器
+.album-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10rpx; // 图片间距
+}
+
+// 单张图片样式
+.album-item {
+  width: 70px;
+  height: 70px;
+  border-radius: 4rpx;
+  overflow: hidden;
+}
+// 图片样式（强制尺寸 + 覆盖）
+.album-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; // 保持比例裁剪，避免拉伸
+}
+
+// 空文本样式
+.empty-text {
+  color: #999;
+  font-size: 14px;
+  line-height: 70px; // 和图片高度对齐
+}
 </style>
 \ No newline at end of file
@@ -453,7 +453,7 @@ const submit = async () =&gt; {
 <style scoped lang="scss">
 .container {
-  padding: 25rpx;
+  padding: 15px;
   box-sizing: border-box;
   background: #fff;
 }
@@ -193,16 +193,16 @@
             <view class="card-body-inner">
               <view class="record-list-left" :style="`background-image: url(${item.treephotoone});`"></view>
               <view class="record-list-right">
-                <view class="record-list-right-title">
+                <view class="up-flex up-flex-items-center up-flex-between">
                   <view class="u-line-1 treetypeName">{{ item.treetype }}</view>
                   <view style="text-align: right">{{ timeFormat(item.updatetime) }}</view>
                 </view>
-                <view class=" fs-align__center" style="margin: 5px 0">
-                  <img src="../../../static/imgs/tree/tree-high.png" style="width:14px;height:14px;margin-right:6px;"
+                <view class=" fs-align__center" style="margin: 8px 0">
+                  <img src="../../../static/imgs/tree/tree-high.png" style="width:12px;height:12px;margin-right:6px;"
                        alt=""> 高度：{{ item.treeheight }} 米
                 </view>
                 <view class=" fs-align__center">
-                  <img src="../../../static/imgs/tree/treearound.png" style="width:14px;height:14px;margin-right:6px;"
+                  <img src="../../../static/imgs/tree/treearound.png" style="width:12px;height:12px;margin-right:6px;"
                        alt="">胸径：{{ item.dbh }} 厘米
                 </view>
               </view>
@@ -601,7 +601,8 @@ const toLogDetailPage = (i) =&gt; {
 }
 .base-info-wrap {
-  padding: 20rpx 15rpx;
+  padding: 15px 15px;
+  background: #fff;
 }
 .log-wrap {
@@ -614,7 +615,7 @@ const toLogDetailPage = (i) =&gt; {
 .treetypeName {
   flex: 1;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
 }
@@ -632,10 +633,6 @@ const toLogDetailPage = (i) =&gt; {
   overflow: hidden;
 }
-.record-list-right-title {
-  display: flex;
-  justify-content: space-between;
-}
 .treenumber-no {
   padding: 3px 10px;
@@ -646,6 +643,7 @@ const toLogDetailPage = (i) =&gt; {
 .card-body-inner {
   display: flex;
+  font-size: 12px;
 }
 .fs-align__center {
@@ -20,15 +20,15 @@
             <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view>
             <view class="record-list-right">
-              <view class="record-list-right-title">
+              <view class="up-flex up-flex-items-center up-flex-between">
                 <view class="u-line-1 treetypeName">{{ i.treetype }}</view>
                 <view style="text-align: right">{{ timeFormat(i.updatetime) }}</view>
               </view>
-              <view class="fs-align__center " style="margin: 5px 0">
-                <img src="../../../static/imgs/tree/tree-high.png" style="width: 14px;height: 14px;margin-right: 6px;" alt=""> 高度：{{ i.treeheight }} 米
+              <view class="up-flex up-flex-items-center" style="margin: 8px 0">
+                <img src="../../../static/imgs/tree/tree-high.png" style="width: 12px;height: 12px;margin-right: 6px;" alt=""> 高度：{{ i.treeheight }} 米
               </view>
-              <view class=" fs-align__center">
-                <img src="../../../static/imgs/tree/treearound.png" style="width: 14px;height: 14px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米
+              <view class="up-flex up-flex-items-center">
+                <img src="../../../static/imgs/tree/treearound.png" style="width: 12px;height: 12px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米
               </view>
             </view>
           </view>
@@ -124,7 +124,7 @@ const treeRoadQuery = async () =&gt; {
 .treetypeName {
   flex: 1;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
 }
@@ -142,10 +142,6 @@ const treeRoadQuery = async () =&gt; {
   overflow: hidden;
 }
-.record-list-right-title {
-  display: flex;
-  justify-content: space-between;
-}
 .treenumber-no {
   margin-top: 5px;
@@ -165,5 +161,6 @@ const treeRoadQuery = async () =&gt; {
 }
 .card-body-inner{
   display: flex;
+  font-size: 12px;
 }
 </style>
 \ No newline at end of file
 <template>
-  <view class="home-page">
+  <view class="page-container">
     <!-- 用户信息栏 -->
     <view class="user-info-bar">
       <view class="user-info">
@@ -9,7 +9,7 @@
         </view>
       </view>
       <view class="msg-icon" @click="handleMsgClick" hover-class="msg-icon--hover">
-        <up-icon name="chat" color="#fff" size="24" />
+        <up-icon name="chat" color="#fff" size="24"/>
         <view class="msg-badge" v-if="msgCount > 0">
           <up-badge type="error" max="999" :value="msgCount"></up-badge>
         </view>
@@ -24,13 +24,14 @@
       <view class="task-chart-card">
         <view class="card-header">
           <view class="unit-tip">单位: 个</view>
-          <view class="date-picker-wrap" @click="openDatePicker">
+          <view class="date-picker-wrap">
             <neo-datetime-pro
                 v-model="dateRange"
                 type="daterange"
                 :clearable="false"
                 placeholder="请选择日期范围"
                 @confirm="handleDateConfirm"
+                :max-date="maxDate"
             />
           </view>
         </view>
@@ -48,74 +49,85 @@
         </view>
       </view>
-      <!-- 待办/已办切换栏 -->
-      <view class="tab-switch-bar">
-        <view
-            class="tab-item"
-            :class="{ active: currentTab === 'todo' }"
-            @click="switchTab('todo')"
-            hover-class="tab-item--hover"
-        >
-          待办事项({{ todoList.length }})
-          <view class="tab-active-line" v-if="currentTab === 'todo'"></view>
-        </view>
-        <view
-            class="tab-item"
-            :class="{ active: currentTab === 'done' }"
-            @click="switchTab('done')"
-            hover-class="tab-item--hover"
-        >
-          已办事项({{ doneList.length }})
-          <view class="tab-active-line" v-if="currentTab === 'done'"></view>
-        </view>
-      </view>
-
-      <!-- 事项列表 -->
-      <view class="task-list-container">
-        <up-empty v-if="!currentTaskList.length" text="暂无相关事项" />
-        <view
-            class="task-item"
-            v-for="(item, index) in currentTaskList"
-            :key="index"
-            @click="handleTaskClick(item)"
-            hover-class="task-item--hover"
-        >
-          <view class="task-name">
-            {{ item.name }}
-          </view>
-          <view class="task-meta">
-            <view class="urgency-tag" :class="`urgency-tag--${getUrgencyType(item.urgency)}`">
-              {{ item.urgency || '普通' }}
+      <!-- 使用up-tabs组件实现Tab切换 -->
+      <up-tabs
+          :list="tabList"
+          active-color="#0A86F4"
+          inactive-color="#666"
+          font-size="14px"
+          line-width="40"
+          line-height="3"
+          @change="handleTabChange"
+          class="task-tab-container"
+          scrollable="false"
+      ></up-tabs>
+
+      <!-- z-paging分页列表 -->
+      <z-paging
+          ref="paging"
+          v-model="currentTaskList"
+          @query="queryList"
+          :auto-show-system-loading="true"
+          :page-size="10"
+          use-page-scroll
+      >
+        <template #empty>
+          <up-empty />
+        </template>
+        <view class="task-list-container">
+          <view
+              class="task-item"
+              v-for="(item,index) in currentTaskList"
+              :key="`${item.taskName}_${index}`"
+              hover-class="task-item--hover"
+              @click="handleTaskClick(item)"
+          >
+            <view class="task-item__content">
+              <view class="task-item__name u-line-1">
+                {{ item.taskName || '无' }}
+              </view>
+              <view class="task-item__footer u-flex common-item-center common-justify-between"
+                    style="font-size: 13px; margin-top: 5px;">
+                <view class="urgency-tag" >
+                  紧急程度： {{ item.pressingType }}
+                </view>
+                <view style="font-size: 13px;color: #333">{{
+                    timeFormat(item.busiDateTime, 'yyyy-mm-dd hh:MM:ss')
+                  }}
+                </view>
+              </view>
             </view>
-            <view class="task-time">{{ timeFormat(item.time) }}</view>
           </view>
         </view>
-      </view>
+      </z-paging>
     </view>
   </view>
 </template>
-<script setup>
-import { ref, watch, computed } from 'vue';
-import {  onShow } from '@dcloudio/uni-app'
-import { useUserStore } from '@/pinia/user';
-import { timeFormat } from '@/uni_modules/uview-plus';
+<script setup lang="ts">
+import {ref, watch, computed, reactive} from 'vue';
+import {onShow} from '@dcloudio/uni-app'
+import {useUserStore} from '@/pinia/user';
+import {timeFormat} from '@/uni_modules/uview-plus';
 import uniCharts from '@/components/uni-charts/uni-charts.vue';
-import { getUnreadCount } from "@/api/user";
-
-// ========== 1. 常量抽离 ==========
-const URGENCY_MAP = {
-  特急: 'urgent',
-  紧急: 'high',
-  一般: 'normal',
-  普通: 'normal',
-  '--': 'normal'
-};
+import {getUnreadCount} from "@/api/user";
+import {getTaskCompletionSummary, getTaskDetails} from "@/api/index/index";
+
 // ========== 2. 响应式数据 ==========
-const msgCount = ref();
-const currentTab = ref('todo');
+const msgCount = ref(0);
+const currentTab = ref('todo'); // todo:待办 done:已办
 const dateRange = ref([]);
+const maxDate = ref(timeFormat(new Date(), 'yyyy-mm-dd'));
+
+//  Tab列表配置
+const tabList = ref([]);
+const todoTotal = ref(0); // 待办事项总数
+const doneTotal = ref(0); // 已办事项总数
+
+// 分页相关
+const paging = ref(null);
+const currentTaskList = ref([]); // 当前显示的任务列表（分页数据）
 // 折线图数据配置
 const chartWidth = ref(0);
@@ -143,12 +155,12 @@ const klineOption = ref({
     bottom: '20%'
   },
   xAxis: {
-    axisLabel: { fontSize: 12, color: '#666' }
+    axisLabel: {fontSize: 12, color: '#666'}
   },
   yAxis: {
     min: 0,
-    splitLine: { lineStyle: { color: '#f5f5f7' } },
-    axisLabel: { fontSize: 12, color: '#666' }
+    splitLine: {lineStyle: {color: '#f5f5f7'}},
+    axisLabel: {fontSize: 12, color: '#666'}
   },
   tooltip: {
     trigger: 'axis',
@@ -161,100 +173,178 @@ const klineOption = ref({
   legend: {
     show: true,
     top: '5%',
-    textStyle: { fontSize: 12 }
+    textStyle: {fontSize: 12}
   }
 });
-// 任务列表数据
-const todoList = ref([
-  { name: '绿地卫生验收', urgency: '特急', time: '2025-12-31 15:45:23' },
-  { name: '阜成门内大街年度计划巡检', urgency: '--', time: '2025-12-31 09:02:00' },
-  { name: '金融街年度计划巡检', urgency: '--', time: '2025-12-31 09:02:00' },
-  { name: '示例事项', urgency: '一般', time: '2026-01-04 10:00:00' }
-]);
-const doneList = ref([
-  { name: '道路清洁验收', urgency: '普通', time: '2025-12-30 14:20:00' }
-]);
-
 // ========== 3. 计算属性 ==========
 const userStore = useUserStore();
 const userName = computed(() => userStore.userInfo?.user?.nickname || '用户');
-const currentTaskList = computed(() => {
-  return currentTab.value === 'todo' ? todoList.value : doneList.value;
-});
 // ========== 4. 工具函数 ==========
 const rpx2px = (rpx) => {
-  const systemInfo = wx.getSystemInfoSync();
+  const systemInfo = uni.getSystemInfoSync();
   return Math.floor(rpx * (systemInfo.screenWidth / 750));
 };
-const getUrgencyType = (urgency) => {
-  return URGENCY_MAP[urgency] || 'normal';
-};
-const initRecent7Days = () => {
+const initRecent7Days = async () => {
   const now = new Date();
   const sevenDaysAgo = new Date();
   sevenDaysAgo.setDate(now.getDate() - 6);
-  dateRange.value = [sevenDaysAgo, now];
+  // 格式化日期为 YYYY-MM-DD 格式
+  dateRange.value = [
+    timeFormat(sevenDaysAgo, 'yyyy-mm-dd'),
+    timeFormat(now, 'yyyy-mm-dd')
+  ];
+
+  initChartData(timeFormat(sevenDaysAgo, 'yyyy-mm-dd'), timeFormat(now, 'yyyy-mm-dd'));
 };
-const getUnread = async ()=>{
-  const res = await  getUnreadCount()
-  console.log(res)
-  msgCount.value = res
-}
+const getUnread = async () => {
+  try {
+    const res = await getUnreadCount();
+    msgCount.value = res || 0;
+  } catch (error) {
+    console.error('获取未读消息数失败:', error);
+    msgCount.value = 0;
+  }
+};
 /**
- * 初始化折线图数据
+ * 初始化图表数据
+ * @param {string} beginTime 开始时间
+ * @param {string} endTime 结束时间
  */
-const fetchKlineData = () => {
-  // 模拟数据
-  const rawData = [
-    { date: '12.21', done: 10, total: 110 },
-    { date: '12.22', done: 35, total: 70 },
-    { date: '12.23', done: 55, total: 728 },
-    { date: '12.24', done: 35, total: 65 },
-    { date: '12.25', done: 65, total: 78 },
-    { date: '12.26', done: 50, total: 272 },
-    { date: '12.27', done: 72, total: 92 }
-  ];
+const initChartData = async (beginTime, endTime) => {
+  try {
+    let postData = {
+      beginTime: beginTime,
+      endTime: endTime
+    };
+    const res = await getTaskCompletionSummary(postData);
+    console.log('图表数据:', res);
+    klineCategories.value = res.map(item => item.currentDate);
+    klineChartData.value[0].data = res.map(item => item.completedNum);
+    klineChartData.value[1].data = res.map(item => item.countpendingNum);
+  } catch (error) {
+    console.error('获取图表数据失败:', error);
+  }
+};
-  // 转换为图表格式
-  klineCategories.value = rawData.map(item => item.date);
-  klineChartData.value[0].data = rawData.map(item => item.done);
-  klineChartData.value[1].data = rawData.map(item => item.total);
+/**
+ *  获取所有Tab的总数（初始化时调用）
+ */
+const getAllTabTotal = async () => {
+  try {
+    // 同时请求待办和已办的总数（只请求第1页，每页1条，仅获取total）
+    const [todoRes, doneRes] = await Promise.all([
+      getTaskDetails({queryType: 1, pageNo: 1, pageSize: 1}),
+      getTaskDetails({queryType: 2, pageNo: 1, pageSize: 1})
+    ]);
+
+    // 更新总数
+    todoTotal.value = todoRes?.total || 0;
+    doneTotal.value = doneRes?.total || 0;
+    console.log('已办:')
+    console.log(doneRes)
+    tabList.value = [
+      {name: `待办事项(${todoTotal.value})`},
+      {name: `已办事项(${doneTotal.value})`},
+    ]
+    console.log('初始化总数：', {todoTotal: todoTotal.value, doneTotal: doneTotal.value});
+  } catch (error) {
+    console.error('获取Tab总数失败:', error);
+    // 保底：如果已办请求失败，至少保证待办数据正常
+  }
 };
 // ========== 5. 业务逻辑 ==========
-const switchTab = (tabType) => {
-  if (currentTab.value === tabType) return;
-  currentTab.value = tabType;
+/**
+ *  up-tabs切换事件处理
+ * @param {object} item 选中的Tab项
+ */
+const handleTabChange = (item) => {
+  // 解析Tab类型（todo/done）
+  console.log(item)
+  const newTab = item.name.includes('待办') ? 'todo' : 'done';
+  if (currentTab.value === newTab) return;
+
+  currentTab.value = newTab;
+  // 切换标签后刷新分页数据
+  paging.value?.reload();
 };
-const openDatePicker = () => {};
+/**
+ * 分页查询列表数据
+ * @param {number} pageNo 页码
+ * @param {number} pageSize 每页条数
+ */
+const queryList = async (pageNo, pageSize) => {
+  try {
+    // 1:待完成 2:已完成
+    const queryType = currentTab.value === 'todo' ? 1 : 2;
+    const postData = {
+      queryType,
+      pageNo,
+      pageSize,
+    };
+
+    const res = await getTaskDetails(postData);
+    console.log(`${currentTab.value}列表数据:`, res);
+
+    // 更新当前Tab的总数
+    if (currentTab.value === 'todo') {
+      todoTotal.value = res?.total || 0;
+    } else {
+      doneTotal.value = res?.total || 0;
+    }
+    // 适配z-paging分页（注意接口返回结构是res.data.list）
+    paging.value.complete(res?.list || [], res?.total || 0);
+  } catch (error) {
+    console.error(`加载${currentTab.value}列表失败：`, error);
+    paging.value?.complete(false);
+    uni.showToast({title: '加载失败，请重试', icon: 'none'});
+  }
+};
+
+// 日期选择确认事件
 const handleDateConfirm = (e) => {
-  if (!e?.value?.length) return;
-  fetchKlineData();
+  console.log('日期选择确认:', e);
+
+  // 更新选中的日期范围
+  dateRange.value = e;
+
+  // 加载选择日期后的图表数据
+  initChartData(e[0], e[1]);
 };
 const handleMsgClick = () => {
-  wx.navigateTo({ url: '/pages-sub/msg/index' });
+  uni.navigateTo({url: '/pages-sub/msg/index'});
 };
 const handleTaskClick = (item) => {
-  wx.navigateTo({ url: `/pages-sub/task/detail?id=${item.id || ''}` });
+  // uni.navigateTo({url: `/pages-sub/task/detail?id=${item.id || ''}`});
 };
 // ========== 6. 生命周期 ==========
-onShow(() => {
+onShow(async () => {
+  // 初始化图表尺寸
   chartWidth.value = rpx2px(750 - 60);
   chartHeight.value = rpx2px(300);
+
+  // 初始化默认日期范围（最近7天）
   initRecent7Days();
-  fetchKlineData();
-  getUnread()
+
+  // 获取未读消息数
+  getUnread();
+  await getAllTabTotal();
+
+  // 初始化分页数据（待办列表）
+  if (paging.value) {
+    paging.value.reload();
+  }
 });
 </script>
@@ -267,21 +357,22 @@ $text-color-light: #666;
 $text-color-placeholder: #999;
 $bg-color: #f5f5f7;
 $card-bg: #fff;
-$border-radius: 32rpx;
-$card-radius: 10rpx;
-$spacing-sm: 10rpx;
-$spacing-md: 20rpx;
-$spacing-lg: 30rpx;
-
-.home-page {
-  background-color: $bg-color;
+$border-radius: 16px;
+$card-radius: 5px;
+$spacing-sm: 5px;
+$spacing-md: 10px;
+$spacing-lg: 15px;
+$border-color: #e5e5e5; // 新增边框颜色变量
+
+.page-container {
   min-height: 100vh;
+  background-color: $bg-color;
 }
 .user-info-bar {
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
-  padding: 200rpx $spacing-lg 270rpx;
+  padding: 100px $spacing-lg 135px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -292,16 +383,16 @@ $spacing-lg: 30rpx;
   .username {
     font-size: 16px;
     font-weight: 500;
-    margin-bottom: 8rpx;
+    margin-bottom: 4px;
   }
   .login-desc {
-    font-size:  16px;
+    font-size: 16px;
   }
   .msg-icon {
     position: relative;
-    padding: 10rpx;
+    padding: 5px;
     border-radius: 50%;
     transition: background-color 0.2s;
@@ -311,27 +402,27 @@ $spacing-lg: 30rpx;
     .msg-badge {
       position: absolute;
-      top: -10rpx;
-      right: -10rpx;
+      top: -5px;
+      right: -5px;
     }
   }
 }
 .content-wrap {
-  margin-top: -245rpx;
+  margin-top: -122px;
   border-radius: $border-radius $border-radius 0 0;
   background-color: $bg-color;
   position: relative;
   z-index: 2;
   overflow: hidden;
+  padding-bottom: $spacing-lg;
 }
 .module-title {
-  padding: $spacing-lg $spacing-lg 0;
-  font-size: 30rpx;
+  padding: $spacing-lg;
+  font-size: 15px;
   font-weight: 600;
   color: $text-color-light;
-  margin-bottom: $spacing-sm;
 }
 .task-chart-card {
@@ -344,13 +435,13 @@ $spacing-lg: 30rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 24rpx;
+    font-size: 12px;
     color: $text-color-placeholder;
     margin-bottom: $spacing-md;
     .date-picker-wrap {
-      padding: 4rpx 8rpx;
-      border-radius: 6rpx;
+      padding: 2px 4px;
+      border-radius: 3px;
       transition: background-color 0.2s;
       &:active {
@@ -361,105 +452,58 @@ $spacing-lg: 30rpx;
   .chart-container {
     width: 100%;
-    height: 300rpx;
+    height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 }
-.tab-switch-bar {
-  display: flex;
-  margin: 0 $spacing-lg;
-  background-color: $card-bg;
-  border-radius: $card-radius $card-radius 0 0;
-
-  .tab-item {
-    flex: 1;
-    text-align: center;
-    padding: $spacing-md 0;
-    font-size: 28rpx;
-    color: $text-color-light;
-    position: relative;
-    transition: color 0.2s;
-
-    &--hover {
-      background-color: $bg-color;
-    }
-
-    &.active {
-      color: $primary-color;
-      font-weight: 500;
-    }
-
-    .tab-active-line {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 4rpx;
-      background-color: $primary-color;
-    }
-  }
+.task-tab-container {
+  position: relative;
+  z-index: 4;
+  margin: 0 $spacing-lg $spacing-sm;
 }
 .task-list-container {
-  background-color: $card-bg;
   margin: 0 $spacing-lg;
-  padding: $spacing-md;
-  border-radius: 0 0 $card-radius $card-radius;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-
-  .task-item {
-    padding: $spacing-md;
-    border-bottom: 1px solid $bg-color;
-    transition: background-color 0.2s;
-
-    &--hover {
-      background-color: $bg-color;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
+  background-color: $card-bg;
+  border-radius: $card-radius;
+  overflow: hidden; // 防止边框溢出圆角
+}
-    .task-name {
-      font-size: 28rpx;
-      color: $text-color;
-      margin-bottom: $spacing-sm;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+.task-item {
+  padding: $spacing-md;
+  transition: background-color 0.2s;
+  border-bottom: 1px solid $border-color;
+  &:last-child {
+    border-bottom: none;
+  }
-    .task-meta {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 24rpx;
+  &--hover {
+    background-color: $bg-color;
+  }
-      .urgency-tag {
-        padding: 2rpx 8rpx;
-        border-radius: 4rpx;
-        color: #fff;
+  &__content {
+    width: 100%;
+  }
-        &--urgent {
-          background-color: $danger-color;
-        }
+  &__name {
+    font-size: 13px;
+    color: $text-color;
+    margin-bottom: $spacing-sm;
+  }
-        &--high {
-          background-color: #fa8c16;
-        }
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
-        &--normal {
-          background-color: $text-color-placeholder;
-        }
-      }
+// 紧急程度标签样式
+.urgency-tag {
+  color: #7D7D7D;
-      .task-time {
-        color: $text-color-placeholder;
-      }
-    }
-  }
 }
 </style>
 \ No newline at end of file
 <template>
   <view class="login-page">
-    <!-- 顶部标题区 - 加高 + 左下大圆角 + 底部蓝色过滤阴影 + 从浅到深 蓝色渐变背景 -->
+    <!-- 顶部标题区 -->
     <view class="top-title">
       <text class="welcome-text">你好，欢迎光临</text>
       <text class="platform-name">全域智能运营管理平台</text>
     </view>
-    <!-- 登录表单区域 - 往上偏移 盖住top-title一部分 -->
+    <!-- 登录表单区域 -->
     <view class="login-form">
-      <!-- 登录标题 -->
-      <view class="login-title">账户登录</view>
+      <!-- uview-plus的Tabs组件 -->
+      <up-tabs
+          :list="tabList"
+          active-color="#0A86F4"
+          inactive-color="#666"
+          font-size="16px"
+          line-width="40"
+          line-height="3"
+          @change="handleTabChange"
+      ></up-tabs>
-      <!-- ✅ 核心：和工单页同款 up-form 表单校验容器 -->
+      <!-- 表单校验容器 -->
       <up-form
           label-position="left"
           :model="form"
           ref="loginFormRef"
           labelWidth="0"
       >
-        <!-- 账号输入框 + 校验 -->
-        <up-form-item
-            prop="account"
-        >
+        <!-- 手机号输入框 -->
+        <up-form-item v-if="loginType === '手机号登录'" prop="mobile">
+          <up-input
+              v-model="form.mobile"
+              border="surround"
+              clearable
+              maxlength="11"
+              input-align="left"
+              fontSize="16px"
+              :disabled="isLoading"
+              shape="circle"
+              placeholder="请输入手机号"
+              @blur="() => loginFormRef.validateField('mobile')"
+          />
+        </up-form-item>
+
+        <!-- 账号输入框 -->
+        <up-form-item v-else prop="account">
           <up-input
               v-model="form.account"
               border="surround"
@@ -32,15 +54,14 @@
               :disabled="isLoading"
               shape="circle"
               placeholder="请输入账户"
-              selectionStart="15"
-              selectionEnd="15"
               @blur="() => loginFormRef.validateField('account')"
           />
         </up-form-item>
-        <!-- 密码输入框 + 校验 -->
+        <!-- 密码输入框 -->
         <up-form-item
             prop="password"
+            class="password-item"
         >
           <up-input
               v-model="form.password"
@@ -52,11 +73,21 @@
               type="password"
               :disabled="isLoading"
               shape="circle"
-              selectionStart="5"
-              selectionEnd="5"
               @blur="() => loginFormRef.validateField('password')"
           />
         </up-form-item>
+
+        <!-- 记住密码单独一行，居右显示 -->
+        <view class="remember-wrap">
+          <up-checkbox
+              :customStyle="{marginBottom: '8px'}"
+              label="记住密码"
+              name="agree"
+              usedAlone
+              v-model:checked="rememberPwd"
+          >
+          </up-checkbox>
+        </view>
       </up-form>
       <!-- 登录按钮 -->
@@ -82,92 +113,165 @@ import { ref, reactive, onMounted, nextTick } from &#39;vue&#39;;
 import { useUserStore } from '@/pinia/user';
 import globalConfig from '@/common/config/global';
-// ========== 【全局实例 & 基础状态】 和工单页写法一致 ==========
+// 全局实例 & 基础状态
 const userStore = useUserStore();
-const loginFormRef = ref(null); // 表单ref 用于校验
-const isLoading = ref(false);   // 登录加载状态
+const loginFormRef = ref(null);
+const isLoading = ref(false);
+
+// Tabs配置（name直接存储显示文本）
+const tabList = ref([
+  { name: '手机号登录' },
+  { name: '账号登录' }
+]);
+const loginType = ref('手机号登录'); // 登录类型标识
+
+// 记住密码（默认选中）
+const rememberPwd = ref(true);
-// ========== 【表单数据】 和工单页一致的 reactive 声明 ==========
+// 表单数据
 const form = reactive({
-  account: '',  // 账号
-  password: ''  // 密码
+  account: '',    // 账号
+  mobile: '',     // 手机号
+  password: ''    // 密码
 });
-// ========== 【表单校验规则】 ✅核心 和工单页1:1同款校验规则写法 ==========
+// 表单校验规则
 const loginFormRules = reactive({
-  // 账号校验：必填 + 长度限制 2-30位（合理账号长度，可自行调整）
   account: [
     { type: 'string', required: true, message: '请输入登录账号', trigger: ['change', 'blur'] },
     { type: 'string', min: 2, max: 30, message: '账号长度为2-30个字符', trigger: ['change', 'blur'] }
   ],
-  // 密码校验：必填 + 长度限制 6-20位（行业通用密码长度，可自行调整）
+  mobile: [
+    { type: 'string', required: true, message: '请输入手机号', trigger: ['change', 'blur'] },
+    { type: 'string', pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: ['change', 'blur'] }
+  ],
   password: [
     { type: 'string', required: true, message: '请输入登录密码', trigger: ['change', 'blur'] },
     { type: 'string', min: 3, max: 20, message: '密码长度为3-20个字符', trigger: ['change', 'blur'] }
   ]
 });
-// ========== 【生命周期】 nextTick 设置校验规则 和工单页一致 ==========
+// Tabs切换事件
+const handleTabChange = ({name}) => {
+  console.log(name)
+  if (isLoading.value) return;
+  loginType.value = name;
+
+  // 切换时清空另一类输入框
+  if (name === '手机号登录') {
+    form.account = '';
+  } else {
+    form.mobile = '';
+  }
+
+  // 清空校验状态
+  nextTick(() => {
+    loginFormRef.value?.clearValidate();
+  });
+};
+
+// 生命周期
 onMounted(() => {
   // 检查登录态
   checkLoginStatus();
-  // nextTick确保表单挂载完成再赋值规则，修复校验不生效bug，和工单页写法一致
+
+  // 初始化表单校验规则
   nextTick(() => {
     loginFormRef.value?.setRules(loginFormRules);
   });
+
+  // 读取缓存的账号/密码
+  if (rememberPwd.value) {
+    try {
+      const savedAccount = uni.getStorageSync('login_account') || '';
+      const savedMobile = uni.getStorageSync('login_mobile') || '';
+      const savedPwd = uni.getStorageSync('login_password') || '';
+
+      if (savedAccount) {
+        form.account = savedAccount;
+        loginType.value = '账号登录';
+
+      } else if (savedMobile) {
+        form.mobile = savedMobile;
+        loginType.value = '手机号登录';
+      }
+      form.password = savedPwd;
+    } catch (err) {
+      console.warn('读取缓存密码失败：', err);
+    }
+  }
 });
-// ========== 【检查登录状态】 原有逻辑不变 ==========
+// 检查登录状态
 const checkLoginStatus = () => {
   try {
-    // 已登录则直接跳首页
     if (userStore.isLogin) {
       uni.switchTab({
         url: '/pages/workbench/index',
-        fail: () => {
-          uni.reLaunch({ url: '/pages/workbench/index' });
-        }
+        fail: () => uni.reLaunch({ url: '/pages/workbench/index' })
       });
-      return;
     }
   } catch (err) {
     console.warn('检查登录状态失败：', err);
   }
 };
-// ========== 【核心登录方法】 ✅ 完整表单校验 + 登录逻辑，和工单页submit提交逻辑一致 ==========
+// 登录方法
 const handleLogin = async () => {
   try {
-    // ✅ 第一步：先执行表单整体校验，通过后再执行登录逻辑（和工单页submitWorkOrder写法一致）
+    // 表单校验
     await loginFormRef.value.validate();
-
     isLoading.value = true;
-    // 执行登录请求
-    await userStore.login({
-      username: form.account,
-      password: form.password
-    });
-    uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 });
+    // 组装登录参数
+    const loginParams = { password: form.password };
+    if (loginType.value === '手机号登录') {
+      // loginParams.mobile = form.mobile;
+      loginParams.username = form.mobile;
+    } else {
+      loginParams.username = form.account;
+    }
+
+    // 执行登录
+    await userStore.login(loginParams);
-    // 登录成功后跳转首页
+    // 保存记住密码
+    if (rememberPwd.value) {
+      try {
+        if (loginType.value === '手机号登录') {
+          uni.setStorageSync('login_mobile', form.mobile);
+          uni.removeStorageSync('login_account');
+        } else {
+          uni.setStorageSync('login_account', form.account);
+          uni.removeStorageSync('login_mobile');
+        }
+        uni.setStorageSync('login_password', form.password);
+      } catch (err) {
+        console.warn('保存密码失败：', err);
+      }
+    } else {
+      // 清除缓存
+      uni.removeStorageSync('login_account');
+      uni.removeStorageSync('login_mobile');
+      uni.removeStorageSync('login_password');
+    }
+
+    // 登录成功提示+跳转
+    uni.showToast({ title: '登录成功', icon: 'success', duration: 1000 });
     setTimeout(() => {
       uni.switchTab({
         url: globalConfig.router.tabBarList[1].path,
-        fail: (err) => {
-          console.warn('tabBar跳转失败，切换为普通跳转：', err);
-          uni.reLaunch({ url: '/pages/workbench/index' });
-        }
+        fail: () => uni.reLaunch({ url: '/pages/workbench/index' })
       });
     }, 1000);
   } catch (err) {
-    // ✅ 校验失败/登录失败 统一捕获提示，和工单页异常处理一致
+    // 错误处理
     if (!Array.isArray(err)) {
       console.error('登录失败：', err);
       uni.showToast({
-        title: err.message || '账号或密码错误，请重试',
+        title: err.msg || '账号或密码错误，请重试',
         icon: 'none',
-        duration: 2000
+        duration: 1000
       });
     }
   } finally {
@@ -187,18 +291,16 @@ const handleLogin = async () =&gt; {
   background: #f5f7fa;
 }
-// 顶部：从左到右 由浅到深 线性渐变 过渡自然柔和 无突兀色块
+// 顶部样式
 .top-title {
-  //background: linear-gradient(120deg, #4299e1 0%, #2970e8 50%, #2563eb 100%);
+  background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
+  background-size: 100% 100%;
   color: #fff;
-  padding: 220rpx 30rpx 200rpx;
+  padding: 200rpx 0 200rpx 40rpx;
   text-align: left;
-  //border-bottom-left-radius: 120rpx;
   position: relative;
   z-index: 1;
-  //box-shadow: 0 25rpx 40rpx -15rpx rgba(37, 99, 235, 0.3);
-  background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
-  background-size: 100% 100%;
+
   .welcome-text {
     font-size: 23px;
     display: block;
@@ -223,37 +325,64 @@ const handleLogin = async () =&gt; {
   position: relative;
   z-index: 10;
   box-sizing: border-box;
+}
-  .login-title {
-    font-size: 19px;
-    font-weight: 600;
-    color: #666;
-    margin-bottom: 15px;
-    letter-spacing: 1px;
+// Tabs样式适配
+:deep(.u-tabs) {
+  margin-bottom: 15px;
+  .u-tabs__content {
+    height: auto !important;
+  }
+  .u-tab-item {
+    padding: 0 10px;
   }
 }
-// 适配表单校验的间距
+// 表单间距
 :deep(.u-form-item) {
   margin-bottom: 10px;
   position: relative;
 }
+// 密码项样式
+.password-item {
+  position: relative;
+  margin-bottom: 5px !important;
+}
+
+// ✅ 核心优化：记住密码完全居右对齐
+.remember-wrap {
+  //text-align: right;
+  padding: 0; // 移除多余内边距
+  margin: 10px 0 20px;
+
+  :deep(.u-checkbox) {
+    font-size: 12px;
+    color: #666;
+    justify-content: flex-end;
+    // 移除复选框的默认左边距，确保居右紧凑
+    margin-left: 0 !important;
+
+    .u-checkbox__label {
+      margin-left: 5px;
+    }
+  }
+}
+
 // 登录按钮
 .login-btn {
-  margin-top: 20px;
+  margin-top: 10px;
   width: 100%;
   height: 44px;
   line-height: 44px;
   border-radius: 4px;
   font-size: 16px;
-
   background: #0A86F4;
   box-shadow: 0px 4px 6px 1px rgba(25,94,215,0.5);
   border-radius: 23px;
 }
-
+// 版权信息
 .copyright {
   width: 100%;
   text-align: center;
 <template>
-  <view class="user-center-page">
+  <view class="page-container">
     <!-- 顶部用户信息栏 -->
     <view class="header-bg">
       <up-avatar
@@ -114,7 +114,7 @@ export default {
 </script>
 <style lang="scss" scoped>
-.user-center-page {
+.page-container {
 }
@@ -142,25 +142,25 @@ export default {
 }
 .user-info-content {
-  margin-left: 30rpx;
+  margin-left: 15px;
   flex: 1;
   .user-name {
-    font-size: 32rpx;
+    font-size: 16px;
     font-weight: 600;
     color: #ffffff;
-    margin-bottom: 10rpx;
-    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
+    margin-bottom: 5px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
   .user-phone {
-    font-size: 26rpx;
+    font-size: 13px;
     color: rgba(255, 255, 255, 0.9);
   }
 }
 // 退出登录按钮
 .logout-btn-wrap {
-  margin: 200rpx 20rpx 20rpx;
+  margin: 100px 10px 10px;
 }
 // 登录按钮
 .login-btn {
@@ -10,7 +10,6 @@
     <!-- 蓝色装饰块 -->
     <view class="blue-decor-block" v-show="!loading">
-      <!-- ✅ 修复1：增加可选链+默认值，防止数据为undefined报错 -->
       <text class="welcome-text u-line-1">你好{{userInfo?.user?.nickname || ''}}，欢迎登录</text>
       <text class="platform-name">全域智能运营管理平台</text>
     </view>
@@ -46,10 +45,10 @@
                 <u-image
                     :src="listItem.icon"
                     mode="aspectFit"
-                    width="80rpx"
-                    height="80rpx"
+                    width="40px"
+                    height="40px"
                     lazy-load
-                    radius="16rpx"
+                    radius="8px"
                     class="block-icon"
                 ></u-image>
                 <text class="grid-text">{{ listItem.name }}</text>
@@ -91,13 +90,11 @@ interface MenuItem {
 const loading = ref(true);
 const userStore = useUserStore();
 const moduleList = ref<MenuItem[]>([]);
-// ✅ 修复2：声明全局的用户信息变量，模板可访问 + 初始化空对象兜底，杜绝undefined
 const userInfo = ref<any>(cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {});
 // 计算属性：过滤出有子节点的父模块（children 存在且长度 > 0）
 const filteredModuleList = computed(() => {
   return moduleList.value.filter(item => {
-    // 确保 children 是数组且长度大于 0
     return Array.isArray(item.children) && item.children.length > 0;
   });
 });
@@ -105,24 +102,19 @@ const filteredModuleList = computed(() =&gt; {
 onShow(async () => {
   try {
     loading.value = true;
-    // ✅ 修复3：重新赋值全局userInfo，保证数据最新
     userInfo.value = cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {};
     // 登录状态判断（多维度校验，确保准确性）
     const isLogin = () => {
-      // 从缓存获取token（核心登录标识）
       const token = cache.get(globalConfig.cache.tokenKey) || userStore.token;
-      // 从全局变量取值，无需再声明局部变量
       const userInfoVal = userInfo.value;
       console.log('当前用户信息：', userInfoVal?.user);
-      // 满足任一核心条件即视为已登录
       return !!token && !!userInfoVal;
     };
     // 未登录处理：跳转登录页，阻止后续逻辑执行
     if (!isLogin()) {
       uni.showToast({ title: '请先登录', icon: 'none', duration: 1500 });
-      // 延迟跳转，确保提示语正常显示
       setTimeout(() => {
         uni.reLaunch({
           url: '/pages/login/index',
@@ -174,15 +166,14 @@ const handleMenuClick = (item: MenuItem) =&gt; {
   top: 0;
   left: 0;
   width: 100%;
-  height: 260px;
+  padding: 90px 15px 135px;
   background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
   background-size: 100% 100%;
   z-index: 1;
   color:#fff;
   text-align: left;
-  padding-left: 20px;
+
   .welcome-text {
-    padding-top: 80px;
     font-size: 16px;
     display: block;
     margin-bottom: 10px;
@@ -200,10 +191,10 @@ const handleMenuClick = (item: MenuItem) =&gt; {
 .content-wrap {
   position: relative;
   z-index: 2;
-  padding: 140px 0 0;
+  padding: 150px 0 0;
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: 10px;
 }
 .menu-card-wrap {
@@ -212,25 +203,24 @@ const handleMenuClick = (item: MenuItem) =&gt; {
 .card-container {
   --u-card-content-padding: 0;
-  border-radius: 8rpx;
+  border-radius: 4px;
   overflow: hidden;
 }
 .card-content {
   display: flex;
   flex-wrap: wrap;
-  gap: 20rpx;
-  //padding: 20rpx; // ✅ 优化：增加内边距，内容不贴边
+  gap: 10px;
 }
 .content-block {
-  width: calc((100% - 3 * 20rpx) / 4);
+  width: calc((100% - 3 * 10px) / 4);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 14rpx 0;
-  border-radius: 8rpx;
+  padding: 7px 0;
+  border-radius: 4px;
   touch-action: manipulation;
   transition: background-color 0.2s;
 }
@@ -245,10 +235,10 @@ const handleMenuClick = (item: MenuItem) =&gt; {
 }
 .grid-text {
-  font-size: 26rpx;
+  font-size: 13px;
   color: #333;
   text-align: center;
-  margin-top: 10rpx;
+  margin-top: 5px;
   display: block;
 }
 </style>
 \ No newline at end of file