From 16a29ee12b15a9780623a8d74d507147327b1dd7 Mon Sep 17 00:00:00 2001
From: Yaosanqi137 <zxc18023571263@outlook.com>
Date: Sun, 21 Sep 2025 00:21:20 +0800
Subject: [PATCH] feat: mobile UI adaptation but not work perfectly

---
 src/fronted/src/assets/responsive.css         |  52 +++++++
 src/fronted/src/components/AppHeader.vue      | 101 +++++++++++-
 src/fronted/src/main.js                       |   1 +
 src/fronted/src/views/Dashboard.vue           | 146 +++++++++---------
 src/fronted/src/views/FinanceRecordDetail.vue |  56 +++++--
 src/fronted/src/views/Settings.vue            |  55 +++++++
 6 files changed, 326 insertions(+), 85 deletions(-)
 create mode 100644 src/fronted/src/assets/responsive.css

diff --git a/src/fronted/src/assets/responsive.css b/src/fronted/src/assets/responsive.css
new file mode 100644
index 0000000..042efb2
--- /dev/null
+++ b/src/fronted/src/assets/responsive.css
@@ -0,0 +1,52 @@
+/* 手机UI适配 */
+html, body, #app {
+  height: 100%;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Utility visibility helpers */
+.mobile-hidden { display: block; }
+.mobile-only { display: none; }
+
+@media (max-width: 768px) {
+  body {
+    -webkit-tap-highlight-color: transparent;
+    font-size: 14px;
+  }
+
+  .mobile-hidden { display: none !important; }
+  .mobile-only { display: block !important; }
+
+  /* Element Plus common components */
+  .el-card__body {
+    padding: 12px;
+  }
+
+  .el-dialog {
+    width: 96% !important;
+    margin: 6vh auto !important;
+  }
+
+  .el-button, .el-input__inner, .el-select, .el-textarea__inner {
+    font-size: 14px;
+  }
+
+  .el-form-item {
+    margin-bottom: 12px;
+  }
+
+  .el-message-box {
+    width: 90% !important;
+  }
+}
+
+/* ipad适配 */
+@media (max-width: 1500px) {
+  .mobile-hidden { display: none !important; }
+  .mobile-only { display: block !important; }
+}
diff --git a/src/fronted/src/components/AppHeader.vue b/src/fronted/src/components/AppHeader.vue
index 45d4c6f..33ff9fb 100644
--- a/src/fronted/src/components/AppHeader.vue
+++ b/src/fronted/src/components/AppHeader.vue
@@ -1,7 +1,12 @@
 <template>
   <el-header class="app-header">
     <div class="header-content">
-      <h1 class="logo">爱特工作室物品管理及财务管理系统</h1>
+      <div class="left-wrap">
+        <el-button type="text" class="menu-toggle mobile-only" @click="drawerVisible = true" aria-label="打开导航">
+          <el-icon><Menu /></el-icon>
+        </el-button>
+        <h1 class="logo">爱特工作室物品管理及财务管理系统</h1>
+      </div>
       <el-menu
           mode="horizontal"
           :default-active="$route.path"
@@ -38,16 +43,56 @@
         </el-menu-item>
       </el-menu>
       <div class="header-actions">
-        <el-button type="text" class="settings-btn" @click="goToSettings">
+        <el-button type="text" class="settings-btn" @click="goToSettings" aria-label="设置">
           <el-icon><Setting /></el-icon>
         </el-button>
       </div>
     </div>
+
+    <!-- 移动端抽屉导航 -->
+    <el-drawer v-model="drawerVisible" title="导航" size="80%" :with-header="true">
+      <el-menu
+        mode="vertical"
+        :default-active="$route.path"
+        router
+        class="mobile-menu"
+        @select="drawerVisible = false"
+      >
+        <el-menu-item index="/">
+          <el-icon><House /></el-icon>
+          物品统计
+        </el-menu-item>
+        <el-menu-item index="/items">
+          <el-icon><Box /></el-icon>
+          物品管理
+        </el-menu-item>
+        <el-menu-item index="/usage">
+          <el-icon><Document /></el-icon>
+          使用记录
+        </el-menu-item>
+        <el-menu-item index="/personnel">
+          <el-icon><User /></el-icon>
+          人员管理
+        </el-menu-item>
+        <el-menu-item index="/department-management">
+          <el-icon><OfficeBuilding /></el-icon>
+          部门管理
+        </el-menu-item>
+        <el-menu-item index="/finance">
+          <el-icon><Money /></el-icon>
+          财务管理
+        </el-menu-item>
+        <el-menu-item index="/finance/records">
+          <el-icon><Tickets /></el-icon>
+          财务记录
+        </el-menu-item>
+      </el-menu>
+    </el-drawer>
   </el-header>
 </template>
 
 <script>
-import {Box, Document, House, Money, OfficeBuilding, Setting, Tickets, User} from '@element-plus/icons-vue'
+import {Box, Document, House, Money, OfficeBuilding, Setting, Tickets, User, Menu} from '@element-plus/icons-vue'
 
 export default {
   name: 'AppHeader',
@@ -59,7 +104,13 @@ export default {
     Tickets,
     Setting,
     User,
-    OfficeBuilding
+    OfficeBuilding,
+    Menu
+  },
+  data() {
+    return {
+      drawerVisible: false
+    }
   },
   methods: {
     goToSettings() {
@@ -89,6 +140,19 @@ export default {
   position: relative;
 }
 
+.left-wrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.menu-toggle {
+  display: none;
+  color: #606266;
+  font-size: 18px;
+  padding: 10px;
+}
+
 .logo {
   color: #409eff;
   font-size: 20px;
@@ -131,4 +195,33 @@ export default {
 .settings-btn:hover {
   color: #409eff;
 }
+
+/* 移动端/平板端样式覆盖，避免标题、菜单与设置按钮堆叠 */
+@media (max-width: 1500px) {
+  .app-header {
+    height: auto !important;
+    padding: 8px 12px;
+  }
+  .header-content {
+    position: static;
+    justify-content: space-between;
+  }
+  .logo {
+    position: static;
+    font-size: 16px;
+    max-width: 60vw;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nav-menu {
+    display: none !important;
+  }
+  .menu-toggle {
+    display: inline-flex;
+  }
+  .header-actions {
+    position: static;
+  }
+}
 </style>
diff --git a/src/fronted/src/main.js b/src/fronted/src/main.js
index 0685209..0ac930b 100644
--- a/src/fronted/src/main.js
+++ b/src/fronted/src/main.js
@@ -5,6 +5,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import './assets/responsive.css'
 
 const debounce = (fn, delay) => {
   let timeoutId
diff --git a/src/fronted/src/views/Dashboard.vue b/src/fronted/src/views/Dashboard.vue
index 84fb8e0..b0361e8 100644
--- a/src/fronted/src/views/Dashboard.vue
+++ b/src/fronted/src/views/Dashboard.vue
@@ -2,7 +2,7 @@
   <AppHeader />
   <div class="dashboard">
     <el-row :gutter="42">
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon available">
@@ -15,7 +15,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon in-use">
@@ -28,7 +28,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon total">
@@ -41,7 +41,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon maintenance">
@@ -54,7 +54,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon damaged">
@@ -67,7 +67,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon lost">
@@ -80,7 +80,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon abandoned">
@@ -93,7 +93,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="6">
+      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
         <el-card class="stat-card">
           <div class="stat-content">
             <div class="stat-icon prohibited">
@@ -109,48 +109,52 @@
     </el-row>
 
     <el-row :gutter="20" style="margin-top: 20px;">
-      <el-col :span="12">
+      <el-col :xs="24" :sm="24" :md="12">
         <el-card>
           <template #header>
             <span>当前使用中的物品</span>
           </template>
-          <el-table :data="currentUsages" style="width: 100%" max-height="300">
-            <el-table-column prop="item_name" label="物品名称" />
-            <el-table-column prop="user" label="使用者" />
-            <el-table-column prop="start_time" label="开始时间">
-              <template #default="scope">
-                {{ formatDate(scope.row.start_time) }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="purpose" label="使用目的">
-              <template #default="scope">
-                {{ scope.row.purpose || '无' }}
-              </template>
-            </el-table-column>
-          </el-table>
+          <div class="table-wrapper">
+            <el-table :data="currentUsages" style="width: 100%" max-height="300" size="small">
+              <el-table-column prop="item_name" label="物品名称" />
+              <el-table-column prop="user" label="使用者" />
+              <el-table-column prop="start_time" label="开始时间">
+                <template #default="scope">
+                  {{ formatDate(scope.row.start_time) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="purpose" label="使用目的">
+                <template #default="scope">
+                  {{ scope.row.purpose || '无' }}
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </el-card>
       </el-col>
-      <el-col :span="12">
+      <el-col :xs="24" :sm="24" :md="12">
         <el-card>
           <template #header>
             <span>最新添加的物品</span>
           </template>
-          <el-table :data="recentItems" style="width: 100%" max-height="300">
-            <el-table-column prop="name" label="物品名称" />
-            <el-table-column prop="category" label="类别" />
-            <el-table-column prop="status" label="状态">
-              <template #default="scope">
-                <el-tag :type="getStatusType(scope.row.status)">
-                  {{ getStatusText(scope.row.status) }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column prop="created_at" label="添加时间">
-              <template #default="scope">
-                {{ formatDate(scope.row.created_at) }}
-              </template>
-            </el-table-column>
-          </el-table>
+          <div class="table-wrapper">
+            <el-table :data="recentItems" style="width: 100%" max-height="300" size="small">
+              <el-table-column prop="name" label="物品名称" />
+              <el-table-column prop="category" label="类别" />
+              <el-table-column prop="status" label="状态">
+                <template #default="scope">
+                  <el-tag :type="getStatusType(scope.row.status)">
+                    {{ getStatusText(scope.row.status) }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="created_at" label="添加时间">
+                <template #default="scope">
+                  {{ formatDate(scope.row.created_at) }}
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -271,37 +275,14 @@ export default {
   color: white;
 }
 
-.stat-icon.available {
-  background-color: #67c23a;
-}
-
-.stat-icon.in-use {
-  background-color: #e6a23c;
-}
-
-.stat-icon.total {
-  background-color: #409eff;
-}
-
-.stat-icon.maintenance {
-  background-color: #909399;
-}
-
-.stat-icon.damaged {
-  background-color: #f56c6c;
-}
-
-.stat-icon.lost {
-  background-color: #f59e0b;
-}
-
-.stat-icon.abandoned {
-  background-color: #8e8e8e;
-}
-
-.stat-icon.prohibited {
-  background-color: #409eff;
-}
+.stat-icon.available { background-color: #67c23a; }
+.stat-icon.in-use { background-color: #e6a23c; }
+.stat-icon.total { background-color: #409eff; }
+.stat-icon.maintenance { background-color: #909399; }
+.stat-icon.damaged { background-color: #f56c6c; }
+.stat-icon.lost { background-color: #f59e0b; }
+.stat-icon.abandoned { background-color: #8e8e8e; }
+.stat-icon.prohibited { background-color: #409eff; }
 
 .stat-info h3 {
   margin: 0;
@@ -313,4 +294,27 @@ export default {
   margin: 5px 0 0 0;
   color: #666;
 }
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table-wrapper .el-table {
+  min-width: 600px; /* allow horizontal scroll on small screens */
+}
+
+@media (max-width: 768px) {
+  .dashboard { padding: 12px; }
+
+  .stat-icon {
+    width: 44px;
+    height: 44px;
+    font-size: 18px;
+    margin-right: 12px;
+  }
+
+  .stat-info h3 { font-size: 22px; }
+  .stat-info p { font-size: 12px; }
+}
 </style>
diff --git a/src/fronted/src/views/FinanceRecordDetail.vue b/src/fronted/src/views/FinanceRecordDetail.vue
index 7416d13..a7ef61b 100644
--- a/src/fronted/src/views/FinanceRecordDetail.vue
+++ b/src/fronted/src/views/FinanceRecordDetail.vue
@@ -3,7 +3,7 @@
     <AppHeader />
     <div class="finance-detail-container">
       <div class="detail-header">
-        <el-button @click="$router.go(-1)" style="margin-bottom: 20px;">
+        <el-button @click="$router.go(-1)" class="back-btn">
           <el-icon><ArrowLeft /></el-icon>
           返回
         </el-button>
@@ -20,13 +20,13 @@
 
         <div class="record-details">
           <el-row :gutter="20">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="detail-item">
                 <label>标题：</label>
                 <span>{{ record.title }}</span>
               </div>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="detail-item">
                 <label>金额：</label>
                 <span class="amount" :class="record.record_type">
@@ -37,7 +37,7 @@
           </el-row>
 
           <el-row :gutter="20">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="detail-item">
                 <label>类型：</label>
                 <el-tag :type="record.record_type === 'income' ? 'success' : 'danger'">
@@ -45,7 +45,7 @@
                 </el-tag>
               </div>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="detail-item">
                 <label>交易日期：</label>
                 <span>{{ record.transaction_date }}</span>
@@ -54,13 +54,13 @@
           </el-row>
 
           <el-row :gutter="20">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="detail-item">
                 <label>所属部门：</label>
                 <span>{{ record.department ? record.department.name : '-' }}</span>
               </div>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="detail-item">
                 <label>类别：</label>
                 <span>{{ record.category ? record.category.name : '-' }}</span>
@@ -78,7 +78,7 @@
           </el-row>
 
           <el-row :gutter="20">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="detail-item">
                 <label>批准人：</label>
                 <span>{{ record.fund_manager || '-' }}</span>
@@ -143,7 +143,7 @@
 
 <script>
 import {API_BASE_URL_WITHOUT_API, financeService} from '@/services/api';
-import {Delete, Plus} from '@element-plus/icons-vue';
+import {Delete, Plus, ArrowLeft} from '@element-plus/icons-vue';
 import AppHeader from "@/components/AppHeader.vue";
 import FinanceRecordForm from './FinanceRecordForm.vue';
 
@@ -153,7 +153,8 @@ export default {
     AppHeader,
     FinanceRecordForm,
     Plus,
-    Delete
+    Delete,
+    ArrowLeft
   },
   data() {
     return {
@@ -232,6 +233,11 @@ export default {
   color: #666;
 }
 
+.detail-item span,
+.description {
+  word-break: break-word;
+}
+
 .amount.income {
   color: #67c23a;
   font-weight: bold;
@@ -302,4 +308,34 @@ export default {
   max-height: 70vh;
   object-fit: contain;
 }
+
+.back-btn {
+  /* visually larger target on phones */
+  padding: 10px 14px;
+}
+
+@media (max-width: 768px) {
+  .finance-detail-container {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .images-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .proof-image {
+    height: 180px;
+  }
+
+  .back-btn {
+    width: 100%;
+  }
+}
 </style>
diff --git a/src/fronted/src/views/Settings.vue b/src/fronted/src/views/Settings.vue
index 81829c4..3188e41 100644
--- a/src/fronted/src/views/Settings.vue
+++ b/src/fronted/src/views/Settings.vue
@@ -480,6 +480,7 @@ export default {
   align-items: center;
   padding: 20px 0;
   border-bottom: 1px solid #f0f2f5;
+  gap: 16px;
 }
 
 .setting-item:last-child {
@@ -600,6 +601,7 @@ export default {
   background-color: #f8f9fa;
   border-radius: 6px;
   border: 1px solid #e9ecef;
+  gap: 12px;
 }
 
 .email-info {
@@ -635,6 +637,7 @@ export default {
   align-items: center;
   gap: 10px;
   width: 100%;
+  flex-wrap: wrap;
 }
 
 .delete-email-btn {
@@ -717,4 +720,56 @@ export default {
 .dark .content-section li {
   color: #d1d5db;
 }
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .settings-container {
+    padding: 12px;
+  }
+  .settings-header h2 {
+    font-size: 20px;
+  }
+  .setting-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 14px 0;
+  }
+  .setting-control {
+    width: 100%;
+  }
+  .email-management-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .email-actions {
+    width: 100%;
+    margin-top: 8px;
+  }
+  .email-actions .el-button {
+    width: auto;
+  }
+  .new-email-form .form-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .form-row .el-input {
+    width: 100% !important;
+    margin-right: 0 !important;
+  }
+  .form-row .el-switch {
+    margin-right: 0 !important;
+    margin-bottom: 10px;
+  }
+  .form-row .el-button {
+    width: 100%;
+  }
+  .content-section h3 {
+    font-size: 16px;
+    margin: 16px 0 8px 0;
+  }
+  .content-section p,
+  .content-section li {
+    font-size: 13px;
+  }
+}
 </style>