修改自适应

backend/src/components/CommonAside.vue

@@ -574,11 +574,9 @@ h3 {
 }
 
 // 响应式设计
+// 注意：手机端（≤768px）侧栏的抽屉式布局由 Main.vue 统一控制（fixed 定位 + transform 动画），
+// 此处不要再对 .common-aside 设置 width，避免覆盖父级布局逻辑。
 @media (max-width: 768px) {
-  .common-aside {
-    width: 100% !important;
-  }
-
   :deep(.el-menu) {
     padding: 12px 4px;
   }

backend/src/components/CommonHeader.vue

@@ -484,6 +484,30 @@ onUnmounted(() => {
   }
 }
 
+// 手机端（≤768px）：隐藏左侧折叠按钮区（侧栏抽屉由 Main.vue 的 .mobile-menu-btn 控制）
+@media (max-width: 768px) {
+  .l-content {
+    display: none;
+  }
+
+  // 顶栏左侧为汉堡按钮预留空间，右侧收紧间距，避免空洞与拥挤
+  .header {
+    padding: 0 12px 0 60px;
+  }
+
+  .r-content {
+    gap: 10px;
+
+    .el-dropdown-link {
+      gap: 8px;
+
+      .user-name {
+        max-width: 72px;
+      }
+    }
+  }
+}
+
 .r-content {
   position: relative;
   // z-index: 1000;

backend/src/stores/index.js

@@ -5,6 +5,8 @@ import { ref, computed, reactive } from 'vue';
 function initState() {
   return {
     isCollapse: false,
+    // 手机端抽屉式侧栏是否展开（仅 ≤768px 生效）
+    mobileAsideOpen: false,
   };
 }
 
@@ -15,11 +17,30 @@ export const useAllDataStore = defineStore('allData', () => {
   function increment() {
     count.value++;
   }
+
+  // 是否为手机端（≤768px），通过 matchMedia 响应式监听
+  const mobileQuery = window.matchMedia('(max-width: 768px)');
+  const isMobile = ref(mobileQuery.matches);
+  const handleMobileQueryChange = (e) => {
+    isMobile.value = e.matches;
+    // 从手机端切回桌面端时，自动收起抽屉侧栏
+    if (!e.matches) {
+      state.mobileAsideOpen = false;
+    }
+  };
+  if (typeof mobileQuery.addEventListener === 'function') {
+    mobileQuery.addEventListener('change', handleMobileQueryChange);
+  } else {
+    // 兼容旧版 Safari
+    mobileQuery.addListener(handleMobileQueryChange);
+  }
+
   return {
     state,
     count,
     doubleCount,
     increment,
+    isMobile,
   };
 });
 

backend/src/views/Main.vue

@@ -3,8 +3,8 @@ import CommonAside from '@/components/CommonAside.vue';
 import CommonHeader from '@/components/CommonHeader.vue';
 import { useTabsStore } from '@/stores';
 import { useRouter, useRoute } from 'vue-router';
-import { ref, watch, reactive, nextTick, onMounted, computed } from 'vue';
+import { ref, watch, reactive, nextTick, onMounted, onBeforeUnmount, computed } from 'vue';
-import { More, Close, CircleClose, ArrowUp } from '@element-plus/icons-vue';
+import { More, Close, CircleClose, ArrowUp, Fold, Expand } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
 const tabsStore = useTabsStore();
@@ -12,6 +12,44 @@ const router = useRouter();
 const route = useRoute();
 const defaultDashboardPath = '/home';
 
+// ========== 手机端侧栏抽屉控制 ==========
+const MOBILE_QUERY = '(max-width: 768px)';
+const mobileMedia = window.matchMedia(MOBILE_QUERY);
+const isMobile = ref(mobileMedia.matches);
+// 手机端侧栏默认隐藏，桌面端无影响（CSS 仅在媒体查询内生效）
+const sidebarVisible = ref(false);
+
+const handleMobileMediaChange = (e) => {
+  isMobile.value = e.matches;
+  // 切回桌面端时重置侧栏状态，避免残留
+  if (!e.matches) {
+    sidebarVisible.value = false;
+  }
+};
+
+// 兼容旧版 Safari 的 addListener 写法
+if (typeof mobileMedia.addEventListener === 'function') {
+  mobileMedia.addEventListener('change', handleMobileMediaChange);
+} else {
+  mobileMedia.addListener(handleMobileMediaChange);
+}
+
+onBeforeUnmount(() => {
+  if (typeof mobileMedia.removeEventListener === 'function') {
+    mobileMedia.removeEventListener('change', handleMobileMediaChange);
+  } else {
+    mobileMedia.removeListener(handleMobileMediaChange);
+  }
+});
+
+const toggleMobileSidebar = () => {
+  sidebarVisible.value = !sidebarVisible.value;
+};
+
+const closeMobileSidebar = () => {
+  sidebarVisible.value = false;
+};
+
 // 根据当前路由恢复 tab（刷新时使用）
 function restoreTabFromRoute() {
   const currentPath = route.fullPath;
@@ -88,6 +126,10 @@ watch(
   (newPath) => {
     if (newPath) {
       restoreTabFromRoute();
+      // 路由变化时自动关闭手机端侧栏
+      if (isMobile.value) {
+        sidebarVisible.value = false;
+      }
     }
   },
   { immediate: false }
@@ -410,8 +452,33 @@ const canCloseRight = computed(() => {
 
 <template>
   <div class="common-layout">
+    <!-- 手机端汉堡菜单按钮（仅 ≤768px 显示，CSS 控制） -->
+    <button
+      class="mobile-menu-btn"
+      :aria-label="sidebarVisible ? '关闭菜单' : '打开菜单'"
+      @click="toggleMobileSidebar"
+    >
+      <el-icon :size="20">
+        <Expand v-if="sidebarVisible" />
+        <Fold v-else />
+      </el-icon>
+    </button>
+
+    <!-- 手机端遮罩层，点击关闭侧栏 -->
+    <transition name="mask-fade">
+      <div
+        v-if="isMobile && sidebarVisible"
+        class="mobile-sidebar-mask"
+        @click="closeMobileSidebar"
+      ></div>
+    </transition>
+
     <el-container class="main-container">
-      <common-aside @menu-click="handleAsideMenuClick" />
+      <common-aside
+        class="common-aside-wrapper"
+        :class="{ 'mobile-open': sidebarVisible }"
+        @menu-click="handleAsideMenuClick"
+      />
       <el-container>
         <el-header class="main-header">
           <common-header />
@@ -666,6 +733,91 @@ const canCloseRight = computed(() => {
   border-right: none !important;
 }
 
+// ========== 手机端侧栏抽屉（仅 ≤768px 生效，桌面端不受影响） ==========
+// 汉堡按钮：默认隐藏，手机端显示
+.mobile-menu-btn {
+  display: none;
+  position: fixed;
+  top: 20px;
+  left: 12px;
+  z-index: 2200;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: var(--el-color-primary);
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(57, 115, 255, 0.35);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:active {
+    transform: scale(0.92);
+  }
+}
+
+// 遮罩层
+.mobile-sidebar-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(2px);
+}
+
+.mask-fade-enter-active,
+.mask-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.mask-fade-enter-from,
+.mask-fade-leave-to {
+  opacity: 0;
+}
+
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
+
+  // 覆盖 el-aside 的 :width 内联宽度（200px/64px），改为 fixed 抽屉
+  .common-layout .common-aside-wrapper {
+    position: fixed !important;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 260px !important;
+    max-width: 80vw;
+    height: 100vh;
+    z-index: 2100;
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: none;
+
+    &.mobile-open {
+      transform: translateX(0);
+      box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  // 内容区不再为侧栏预留空间
+  .main-container {
+    :deep(.el-header),
+    :deep(.el-main) {
+      width: 100%;
+    }
+  }
+
+  .right-main {
+    padding: 64px 12px 12px;
+  }
+}
+
 // 回到顶部按钮样式
 .backtop-button {
   width: 40px;

backend/src/views/analytics/users/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="statistics-container">
     <el-row :gutter="20" class="data-overview">
-      <el-col :span="6" v-for="item in summaryData" :key="item.title">
+      <el-col :span="6" :xs="12" v-for="item in summaryData" :key="item.title">
         <el-card shadow="hover" class="data-card">
           <div class="card-content">
             <div class="icon-box" :style="{ backgroundColor: item.color }">
@@ -21,12 +21,12 @@
     </el-row>
 
     <el-row :gutter="20" class="charts-row">
-      <el-col :span="16">
+      <el-col :span="16" :xs="24">
         <el-card shadow="hover" header="用户增长趋势">
           <div ref="lineChartRef" class="chart-box"></div>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <el-card shadow="hover" header="用户等级分布">
           <div ref="pieChartRef" class="chart-box"></div>
         </el-card>
@@ -193,4 +193,89 @@ onUnmounted(() => {
   font-size: 16px;
   border-bottom: 1px solid #ebeef5;
 }
+
+// 手机端适配：概览卡片一行 2 个，图表卡片一行 1 个
+@media (max-width: 768px) {
+  .statistics-container {
+    padding: 12px;
+    overflow-x: hidden;
+
+    // el-row gutter 通过负 margin + col padding 实现，手机端缩小间距并防止横向溢出
+    .data-overview {
+      margin-left: -5px !important;
+      margin-right: -5px !important;
+      margin-bottom: 12px;
+
+      :deep(.el-col) {
+        padding-left: 5px !important;
+        padding-right: 5px !important;
+        margin-bottom: 10px;
+
+        &:nth-last-child(-n + 2) {
+          margin-bottom: 0;
+        }
+      }
+
+      .data-card {
+        :deep(.el-card__body) {
+          padding: 12px;
+        }
+
+        .card-content {
+          .icon-box {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            margin-right: 10px;
+            font-size: 18px;
+          }
+
+          .text-box {
+            min-width: 0;
+
+            .title {
+              font-size: 12px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+
+            .value {
+              font-size: 18px;
+              margin: 2px 0;
+            }
+
+            .trend {
+              font-size: 11px;
+            }
+          }
+        }
+      }
+    }
+
+    .charts-row {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+
+      :deep(.el-col) {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-bottom: 12px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .chart-box {
+        height: 280px;
+      }
+    }
+  }
+
+  :deep(.el-card__header) {
+    font-size: 14px;
+    padding: 12px 16px;
+  }
+}
 </style>

backend/src/views/apps/erp/dashboard/index.vue

@@ -2,7 +2,7 @@
   <div class="erp-dashboard">
     <!-- 第一行统计卡片 -->
     <el-row :gutter="16" class="stat-row">
-      <el-col :span="4" v-for="(item, index) in firstRowStats" :key="'first-' + index">
+      <el-col :span="4" :xs="12" v-for="(item, index) in firstRowStats" :key="'first-' + index">
         <div class="stat-card">
           <div class="stat-header">
             <span class="stat-label">{{ item.label }}</span>
@@ -18,7 +18,7 @@
 
     <!-- 第二行统计卡片 -->
     <el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
-      <el-col :span="4" v-for="(item, index) in secondRowStats" :key="'second-' + index">
+      <el-col :span="4" :xs="12" v-for="(item, index) in secondRowStats" :key="'second-' + index">
         <div class="stat-card">
           <div class="stat-header">
             <span class="stat-label">{{ item.label }}</span>
@@ -34,19 +34,19 @@
 
     <!-- 图表区域 -->
     <el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">销售统计</div>
           <div ref="salesChartRef" class="chart-container"></div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">零售统计</div>
           <div ref="retailChartRef" class="chart-container"></div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">采购统计</div>
           <div ref="purchaseChartRef" class="chart-container"></div>
@@ -324,6 +324,66 @@ onUnmounted(() => {
   .chart-container {
     flex: 1;
     min-height: 0;
+    width: 100%;
+  }
+}
+
+// 手机端适配：统计卡片每行 2 个，图表卡片每行 1 个
+@media (max-width: 768px) {
+  .erp-dashboard {
+    overflow-x: hidden;
+  }
+
+  // el-row gutter 通过负 margin + col padding 实现，手机端缩小间距并防止横向溢出
+  .stat-row {
+    margin-left: -4px !important;
+    margin-right: -4px !important;
+
+    :deep(.el-col) {
+      padding-left: 4px !important;
+      padding-right: 4px !important;
+      margin-bottom: 8px;
+
+      &:nth-last-child(-n + 2) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .chart-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+
+    :deep(.el-col) {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      margin-bottom: 12px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // 一行两个统计卡片，缩小内边距与字号防止挤压
+  .stat-card {
+    padding: 10px 12px;
+
+    .stat-header {
+      margin-bottom: 8px;
+
+      .stat-label {
+        font-size: 12px;
+      }
+    }
+
+    .stat-value .number {
+      font-size: 16px;
+    }
+  }
+
+  .chart-card {
+    height: 280px;
   }
 }
 </style>

backend/src/views/apps/oa/dashboard/index.vue

@@ -2,7 +2,7 @@
   <div class="erp-dashboard">
     <!-- 第一行统计卡片 -->
     <el-row :gutter="16" class="stat-row">
-      <el-col :span="4" v-for="(item, index) in firstRowStats" :key="'first-' + index">
+      <el-col :span="4" :xs="12" v-for="(item, index) in firstRowStats" :key="'first-' + index">
         <div class="stat-card">
           <div class="stat-header">
             <span class="stat-label">{{ item.label }}</span>
@@ -18,7 +18,7 @@
 
     <!-- 第二行统计卡片 -->
     <el-row :gutter="16" class="stat-row" style="margin-top: 16px;">
-      <el-col :span="4" v-for="(item, index) in secondRowStats" :key="'second-' + index">
+      <el-col :span="4" :xs="12" v-for="(item, index) in secondRowStats" :key="'second-' + index">
         <div class="stat-card">
           <div class="stat-header">
             <span class="stat-label">{{ item.label }}</span>
@@ -34,19 +34,19 @@
 
     <!-- 图表区域 -->
     <el-row :gutter="16" class="chart-row" style="margin-top: 16px;">
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">销售统计</div>
           <div ref="salesChartRef" class="chart-container"></div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">零售统计</div>
           <div ref="retailChartRef" class="chart-container"></div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <div class="chart-card">
           <div class="chart-title">采购统计</div>
           <div ref="purchaseChartRef" class="chart-container"></div>
@@ -324,6 +324,66 @@ onUnmounted(() => {
   .chart-container {
     flex: 1;
     min-height: 0;
+    width: 100%;
+  }
+}
+
+// 手机端适配：统计卡片每行 2 个，图表卡片每行 1 个
+@media (max-width: 768px) {
+  .erp-dashboard {
+    overflow-x: hidden;
+  }
+
+  // el-row gutter 通过负 margin + col padding 实现，手机端缩小间距并防止横向溢出
+  .stat-row {
+    margin-left: -4px !important;
+    margin-right: -4px !important;
+
+    :deep(.el-col) {
+      padding-left: 4px !important;
+      padding-right: 4px !important;
+      margin-bottom: 8px;
+
+      &:nth-last-child(-n + 2) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .chart-row {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+
+    :deep(.el-col) {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      margin-bottom: 12px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // 一行两个统计卡片，缩小内边距与字号防止挤压
+  .stat-card {
+    padding: 10px 12px;
+
+    .stat-header {
+      margin-bottom: 8px;
+
+      .stat-label {
+        font-size: 12px;
+      }
+    }
+
+    .stat-value .number {
+      font-size: 16px;
+    }
+  }
+
+  .chart-card {
+    height: 280px;
   }
 }
 </style>

backend/src/views/apps/oa/reimburse/components/detail.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-dialog v-model="visible" title="报销详情" width="980px" destroy-on-close>
+  <el-dialog v-model="visible" title="报销详情" width="980px" class="reimburse-detail-dialog" destroy-on-close>
-    <el-descriptions v-if="detail" :column="3" border>
+    <el-descriptions v-if="detail" :column="isMobile ? 1 : 3" border>
       <el-descriptions-item label="状态">
         <el-tag :type="statusType(detail.status)">{{ statusLabel(detail.status) }}</el-tag>
       </el-descriptions-item>
@@ -46,6 +46,7 @@
         </template>
         。识别结果可修改，确认后请保存。
       </p>
+      <div class="table-scroll">
       <el-table :data="amountCompare.details" border size="small" max-height="280">
         <el-table-column prop="expense_type" label="费用类型" min-width="100" />
         <el-table-column prop="name" label="发票文件" min-width="160" show-overflow-tooltip />
@@ -72,6 +73,7 @@
           </template>
         </el-table-column>
       </el-table>
+      </div>
       <div class="compare-actions">
         <el-button v-if="isDraft" type="primary" size="small" :loading="amountSaving" @click="handleSaveReceiptAmounts">
           保存发票金额
@@ -80,6 +82,7 @@
       </div>
     </div>
 
+    <div class="table-scroll">
     <el-table :data="detail?.items || []" border size="small">
       <el-table-column prop="expense_type" label="费用类型" min-width="120" />
       <el-table-column prop="expense_date" label="发生日期" width="120" />
@@ -140,6 +143,7 @@
       </el-table-column>
       <template #empty><el-empty description="暂无费用明细" :image-size="60" /></template>
     </el-table>
+    </div>
 
     <input
       ref="invoiceFileInputRef"
@@ -150,7 +154,7 @@
       @change="handleInvoiceFileInputChange"
     />
 
-    <el-dialog v-model="receiptPreviewVisible" title="查看票据" width="980px" append-to-body destroy-on-close>
+    <el-dialog v-model="receiptPreviewVisible" title="查看票据" width="980px" class="receipt-preview-dialog" append-to-body destroy-on-close>
       <div v-if="receiptList.length" class="receipt-preview">
         <aside class="receipt-list">
           <el-select
@@ -242,6 +246,7 @@
       v-model="manualConfirmVisible"
       title="手动确认"
       width="420px"
+      class="manual-confirm-dialog"
       append-to-body
       destroy-on-close
     >
@@ -280,7 +285,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { uploadFile } from '@/api/file'
 import { deleteReimbursementItem, submitReimbursement, updateReimbursementItem, updateReimbursementStatus } from '@/api/reimburse'
@@ -353,6 +358,18 @@ const amountSaving = ref(false)
 const amountCompare = ref(null)
 const pendingAmountCompare = ref(false)
 
+const isMobile = ref(false)
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', checkMobile)
+})
+
 const compareSummary = computed(() => {
   if (!amountCompare.value?.details) {
     return {
@@ -1125,4 +1142,97 @@ const formatDateTime = value => value ? new Date(value).toLocaleString('zh-CN',
   color: #67c23a;
   font-weight: 600;
 }
+
+.table-scroll {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .section-header {
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 16px;
+  }
+
+  .section-actions {
+    flex-wrap: wrap;
+  }
+
+  .table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    :deep(.el-table) {
+      min-width: 640px;
+    }
+  }
+
+  .amount-compare-card {
+    padding: 12px;
+  }
+
+  .amount-compare-summary {
+    gap: 12px 20px;
+  }
+
+  .compare-item strong {
+    font-size: 16px;
+  }
+
+  .receipt-preview {
+    flex-direction: column;
+    min-height: 0;
+    gap: 12px;
+  }
+
+  .receipt-list {
+    flex: 0 0 auto;
+    max-height: 170px;
+    padding-right: 0;
+    padding-bottom: 10px;
+    border-right: 0;
+    border-bottom: 1px solid var(--el-border-color-light);
+  }
+
+  .receipt-thumb {
+    min-height: 56px;
+  }
+
+  .receipt-image {
+    max-height: 420px;
+  }
+
+  .receipt-pdf {
+    height: 420px;
+  }
+
+  .detail-toolbar {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+}
+</style>
+
+<style lang="less">
+/* 弹窗会 teleport 到 body，需非 scoped 样式覆盖宽度 */
+@media (max-width: 768px) {
+  .reimburse-detail-dialog,
+  .receipt-preview-dialog,
+  .manual-confirm-dialog,
+  .reimburse-edit-dialog,
+  .reimburse-item-form-dialog,
+  .expense-type-dialog,
+  .expense-type-form-dialog {
+    width: 92% !important;
+    margin-top: 6vh;
+
+    .el-dialog__body {
+      padding: 16px;
+    }
+  }
+
+  .reimburse-item-form-dialog .item-form .el-form-item__label {
+    width: 70px !important;
+  }
+}
 </style>

backend/src/views/apps/oa/reimburse/components/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="visible" :title="title" width="720px" destroy-on-close>
+  <el-dialog v-model="visible" :title="title" width="720px" class="reimburse-edit-dialog" destroy-on-close>
     <el-form ref="formRef" :model="form" :rules="formRules" label-width="90px">
       <el-form-item label="申请日期" prop="apply_date">
         <el-date-picker

backend/src/views/apps/oa/reimburse/components/expenseTypeDialog.vue

@@ -3,6 +3,7 @@
     v-model="visible"
     title="报销类别管理"
     width="720px"
+    class="expense-type-dialog"
     append-to-body
     destroy-on-close
     @open="loadList"
@@ -12,6 +13,7 @@
       <el-button type="primary" :icon="Plus" @click="openForm()">新增专有费项</el-button>
     </div>
 
+    <div class="table-scroll">
     <el-table v-loading="loading" :data="list" stripe max-height="420">
       <el-table-column prop="name" label="费项名称" min-width="140" />
       <el-table-column prop="sort_order" label="排序" width="80" align="center" />
@@ -40,11 +42,13 @@
       </el-table-column>
       <template #empty><el-empty description="暂无费项" /></template>
     </el-table>
+    </div>
 
     <el-dialog
       v-model="formVisible"
       :title="editingId ? '编辑专有费项' : '新增专有费项'"
       width="420px"
+      class="expense-type-form-dialog"
       append-to-body
       destroy-on-close
     >
@@ -193,4 +197,29 @@ const handleDelete = async row => {
   color: #c0c4cc;
   font-size: 13px;
 }
+
+.table-scroll {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+
+    .el-button {
+      margin-left: 0;
+    }
+  }
+
+  .table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    :deep(.el-table) {
+      min-width: 520px;
+    }
+  }
+}
 </style>

backend/src/views/apps/oa/reimburse/components/itemForm.vue

@@ -3,6 +3,7 @@
     v-model="visible"
     :title="editingItemId ? '编辑费用明细' : '添加费用明细'"
     width="860px"
+    class="reimburse-item-form-dialog"
     append-to-body
     destroy-on-close
   >
@@ -34,7 +35,7 @@
 
         <el-form :model="item" :rules="rules" label-width="80px" class="item-form">
           <el-row :gutter="16">
-            <el-col :span="8">
+            <el-col :span="8" :xs="24">
               <el-form-item label="费用类型" prop="expense_type">
                 <el-select v-model="item.expense_type" placeholder="请选择" style="width: 100%">
                   <el-option
@@ -46,7 +47,7 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="8" :xs="24">
               <el-form-item label="发生日期" prop="expense_date">
                 <el-date-picker
                   v-model="item.expense_date"
@@ -56,7 +57,7 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="8" :xs="24">
               <el-form-item label="金额" prop="amount">
                 <el-input-number
                   v-model="item.amount"
@@ -250,4 +251,22 @@ watch(
     margin-bottom: 0;
   }
 }
+
+@media (max-width: 768px) {
+  .batch-toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .item-list {
+    max-height: none;
+    padding-right: 0;
+  }
+
+  .item-card {
+    :deep(.el-card__body) {
+      padding: 12px;
+    }
+  }
+}
 </style>

backend/src/views/apps/oa/reimburse/index.vue

@@ -30,7 +30,7 @@
             v-model="filters.status"
             clearable
             placeholder="全部状态"
-            style="width: 150px"
+            class="status-select"
           >
             <el-option
               v-for="item in statusOptions"
@@ -50,7 +50,8 @@
     </div>
 
     <div class="table-card">
-      <el-table v-loading="loading" :data="list" stripe>
+      <div class="table-scroll">
+        <el-table v-loading="loading" :data="list" stripe>
         <el-table-column prop="status" label="状态" width="80">
           <template #default="{ row }">
             <el-tag :type="statusType(row.status)">{{
@@ -76,12 +77,17 @@
         >
           <template #default="{ row }">{{ row.description || "-" }}</template>
         </el-table-column>
-        <el-table-column prop="create_time" label="创建时间" width="175">
+        <el-table-column
+          v-if="!isMobile"
+          prop="create_time"
+          label="创建时间"
+          width="175"
+        >
           <template #default="{ row }">{{
             formatDateTime(row.create_time)
           }}</template>
         </el-table-column>
-        <el-table-column label="操作" fixed="right" width="300">
+        <el-table-column label="操作" fixed="right" :width="isMobile ? 220 : 300">
           <template #default="{ row }">
             <el-button link type="primary" @click="openDetail(row.id)"
               >详情</el-button
@@ -117,13 +123,14 @@
           </template>
         </el-table-column>
         <template #empty><el-empty description="暂无报销记录" /></template>
-      </el-table>
+        </el-table>
+      </div>
       <div class="pagination">
         <el-pagination
           :current-page="pagination.page"
           :page-size="pagination.pageSize"
           :total="pagination.total"
-          layout="total, sizes, prev, pager, next, jumper"
+          :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
           @update:current-page="pagination.page = $event"
           @update:page-size="pagination.pageSize = $event"
           @current-change="loadList"
@@ -156,7 +163,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Plus, Refresh, Search, Setting } from "@element-plus/icons-vue";
 import ReimburseEdit from "./components/edit.vue";
@@ -196,6 +203,11 @@ const records = ref([]);
 const expenseTypeOptions = ref([]);
 const exportingId = ref(0);
 
+const isMobile = ref(false);
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768;
+};
+
 const emptyForm = () => ({
   apply_date: new Date().toISOString().slice(0, 10),
   description: "",
@@ -360,9 +372,15 @@ const statusType = (value) =>
     5: "success",
   })[value] || "info";
 onMounted(() => {
+  checkMobile();
+  window.addEventListener("resize", checkMobile);
   loadExpenseTypes();
   loadList();
 });
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", checkMobile);
+});
 </script>
 
 <style lang="less" scoped>
@@ -413,6 +431,14 @@ onMounted(() => {
   margin-bottom: 0;
 }
 
+.status-select {
+  width: 150px;
+}
+
+.table-scroll {
+  width: 100%;
+}
+
 .pagination {
   display: flex;
   justify-content: flex-end;
@@ -425,12 +451,64 @@ onMounted(() => {
   }
 
   .page-header {
+    flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }
 
+  .header-actions {
+    width: 100%;
+    flex-wrap: wrap;
+
+    .el-button {
+      margin-left: 0;
+    }
+  }
+
+  .page-header h2 {
+    font-size: 18px;
+  }
+
+  .filter-card,
+  .table-card {
+    padding: 12px;
+  }
+
   .filter-card {
+    :deep(.el-form--inline .el-form-item) {
+      display: block;
+      width: 100%;
+      margin-right: 0;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    :deep(.el-form-item__content) {
+      width: 100%;
+      flex-wrap: wrap;
+    }
+
+    :deep(.el-input),
+    .status-select {
+      width: 100%;
+    }
+  }
+
+  .table-scroll {
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    :deep(.el-table) {
+      min-width: 560px;
+    }
+  }
+
+  .pagination {
+    justify-content: center;
+    margin-top: 12px;
   }
 }
 </style>

backend/src/views/dashboard/index.vue

@@ -741,32 +741,134 @@ onMounted(async () => {
   }
 }
 
+// 手机端适配：统计卡片一行 2 个、标题区截断、卡片高度自适应、按钮点击区域 ≥40px
 @media (max-width: 768px) {
-  .welcome-section {
+  .dashboard {
-    padding: 24px 16px;
+    overflow-x: hidden;
+  }
 
-    .welcome-title {
+  // 欢迎区：缩小 padding 与字号，长文本截断
-      font-size: 24px;
+  .welcome-section {
+    padding: 16px;
+    margin-bottom: 12px;
+    border-radius: 8px;
+
+    .welcome-content {
+      min-width: 0;
+
+      .welcome-title {
+        margin: 0 0 6px;
+        font-size: 20px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .welcome-subtitle {
+        font-size: 13px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 
+  // 统计卡片一行 2 个，间距缩小
   .stats-grid {
     grid-template-columns: repeat(2, 1fr);
-    gap: 12px;
+    gap: 10px;
+    margin-bottom: 12px;
   }
 
   .stat-card {
-    padding: 16px;
+    padding: 12px;
+    gap: 10px;
+    border-radius: 8px;
 
-    .stat-value {
+    .stat-icon-wrapper {
-      font-size: 24px;
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+
+      .el-icon {
+        font-size: 20px;
+      }
+    }
+
+    .stat-content {
+      .stat-value {
+        font-size: 18px;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .stat-label {
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    // 趋势徐章移到卡片右上角，避免挤压数值区
+    .stat-trend {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      font-size: 11px;
+      padding: 2px 6px;
     }
   }
-}
 
-@media (max-width: 480px) {
+  // 列表卡片：缩小内边距与标题字号，高度改自适应防止溢出
-  .stats-grid {
+  .lists-section {
-    grid-template-columns: 1fr;
+    gap: 12px;
+
+    .list-card {
+      padding: 16px;
+      border-radius: 8px;
+
+      .card-header {
+        margin-bottom: 12px;
+
+        .card-title {
+          font-size: 16px;
+        }
+
+        // 按钮点击区域 ≥40px
+        :deep(.el-button) {
+          min-height: 40px;
+          padding: 0 12px;
+        }
+      }
+
+      .list-content {
+        // 手机端适当减小最小高度（桌面端 400px），高度自适应防止溢出
+        min-height: 200px;
+
+        // 触屏上禁用 hover 负 margin 外扩效果，避免布局异常
+        .task-item,
+        .activity-item {
+          &:hover {
+            margin: 0;
+            padding-left: 0;
+            padding-right: 0;
+          }
+        }
+
+        // 分页按钮点击区域 ≥40px
+        .pagination-wrapper {
+          :deep(.el-pager li),
+          :deep(.el-pagination button) {
+            min-width: 40px;
+            min-height: 40px;
+            line-height: 40px;
+          }
+        }
+      }
+    }
   }
 }
 

backend/src/views/home/index.vue

@@ -616,7 +616,162 @@ onMounted(() => {
 
     .modules-section {
       .module-grid {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+  }
+
+  // ===== 移动端优先适配（手机端为主要使用场景）=====
+  @media (max-width: 768px) {
+    .home-top {
+      .toolbar {
+        padding: 8px 12px;
+
+        .toolbar-left {
+          min-width: 0;
+          flex-shrink: 1;
+
+          .system-name {
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .toolbar-right {
+          gap: 6px;
+          flex-shrink: 0;
+
+          // 扩大移动端点击区域（≥44px）
+          .toolbar-btn {
+            width: 40px;
+            height: 40px;
+          }
+
+          .user-dropdown-link {
+            padding: 6px 8px;
+            min-height: 40px;
+
+            .user-name {
+              max-width: 72px;
+            }
+          }
+        }
+      }
+    }
+
+    .home-wrapper {
+      padding: 20px 12px;
+
+      .modules-section {
+        margin-top: 8px;
+
+        .category-section {
+          margin-bottom: 24px;
+
+          .category-title {
+            margin-bottom: 14px;
+          }
+        }
+
+        .module-grid {
+          gap: 12px;
+        }
+
+        .module-card {
+          height: auto;
+          min-height: 132px;
+          padding: 16px;
+          border-radius: 10px;
+
+          .card-header {
+            gap: 8px;
+
+            .card-title {
+              font-size: 16px;
+              word-break: break-all;
+            }
+
+            .card-icon-wrapper {
+              width: 24px;
+              height: 24px;
+              font-size: 24px;
+              flex-shrink: 0;
+            }
+          }
+
+          .card-divider {
+            margin: 12px 0;
+          }
+
+          .card-content .card-desc {
+            font-size: 13px;
+            -webkit-line-clamp: 2;
+          }
+        }
+      }
+
+      .empty-state {
+        padding: 48px 16px;
+      }
+    }
+  }
+
+  // 超窄屏手机：保持每行 2 个卡片，收紧间距避免溢出，用户名隐藏只保留头像
+  @media (max-width: 480px) {
+    .home-top {
+      .toolbar {
+        padding: 8px 10px;
+
+        .toolbar-right {
+          .user-dropdown-link {
+            padding: 6px 4px;
+
+            .user-name {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .home-wrapper {
+      padding: 16px 10px;
+
+      .modules-section {
+        .module-grid {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 8px;
+        }
+
+        .module-card {
+          min-height: 0;
+          padding: 12px;
+          border-radius: 8px;
+
+          .card-header {
+            gap: 6px;
+
+            .card-title {
+              font-size: 14px;
+            }
+
+            .card-icon-wrapper {
+              width: 20px;
+              height: 20px;
+              font-size: 20px;
+            }
+          }
+
+          .card-divider {
+            margin: 10px 0;
+          }
+
+          .card-content .card-desc {
+            font-size: 12px;
+          }
+        }
       }
     }
   }