From 6750815b3811341e09d269a026226fca5fcbac63 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Thu, 3 Jul 2025 11:29:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=BE=E7=BD=AE=E9=A1=B5=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.prod                       |   2 +-
 src/components/setting/User.vue |  32 ++---
 src/layouts/default.vue         |  98 +++++++++------
 src/views/debug/index.vue       | 266 ++++++++++++++++------------------------
 src/views/setting/index.vue     | 124 ++++++++++---------
 5 files changed, 245 insertions(+), 277 deletions(-)

diff --git a/.env.prod b/.env.prod
index 0a20bef..22af368 100644
--- a/.env.prod
+++ b/.env.prod
@@ -2,6 +2,6 @@
 
 FT_NODE_ENV=prod
 
-FT_WS_URL=ws://192.168.8.168:8080/ws
+FT_WS_URL=ws://192.168.73.10:19001/ws
 FT_PROXY=http://192.168.8.168:8080
 FT_API_BASE=/api
\ No newline at end of file
diff --git a/src/components/setting/User.vue b/src/components/setting/User.vue
index 846bd24..5dcee65 100644
--- a/src/components/setting/User.vue
+++ b/src/components/setting/User.vue
@@ -79,20 +79,14 @@ const handleSelectionChange = (users: User.UserItem[]) => {
 <template>
   <div class="user">
     <div class="add-user">
-      <bt-button
-        type="primary"
-        button-text="新增用户"
-        @click="onAddUser"
-      />
+      <bt-button type="primary" button-text="新增用户" @click="onAddUser" />
     </div>
     <div class="user-table">
-      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table :data="tableData" style="width: 100%" height="100%" @selection-change="handleSelectionChange">
         <el-table-column prop="name" label="用户名" />
         <el-table-column prop="roleType" label="角色">
           <template #default="{ row }">
-            <span v-if="row.roleType === 'admin'">
-              管理员
-            </span>
+            <span v-if="row.roleType === 'admin'"> 管理员 </span>
             <span v-else>普通用户</span>
           </template>
         </el-table-column>
@@ -116,28 +110,28 @@ const handleSelectionChange = (users: User.UserItem[]) => {
 </template>
 
 <style lang="scss" scoped>
-.user{
+.user {
   height: 84vh;
   overflow: hidden;
   padding: 10px;
   background: $gradient-color;
-  .add-user{
-    padding: 2vw;
-    height: 12%;
-    display: flex  ;
+  .add-user {
+    margin: 10px;
+    //height: 12%;
+    display: flex;
     align-items: center;
   }
-  .user-table{
-    height: 85%;
-    max-height: 73vh;
+  .user-table {
+    height: 73vh;
     overflow: auto;
   }
 }
-.user-opera{
+.user-opera {
   display: flex;
   align-items: center;
 }
-.view-button, .delete-button {
+.view-button,
+.delete-button {
   border: none;
   padding: 4px 8px;
   border-radius: 3px;
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 77bfa74..fd858f7 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -104,12 +104,16 @@ watchEffect(() => {
   isLowCost.value = deviceStore.isLowCost
 })
 
-watch(() => systemStore.systemTime, (newVal) => {
-  if (timeInterval.value) {
-    clearInterval(timeInterval.value)
-  }
-  runSystemTime(newVal)
-}, { deep: true })
+watch(
+  () => systemStore.systemTime,
+  (newVal) => {
+    if (timeInterval.value) {
+      clearInterval(timeInterval.value)
+    }
+    runSystemTime(newVal)
+  },
+  { deep: true },
+)
 
 const runSystemTime = (time: number) => {
   if (time) {
@@ -130,7 +134,8 @@ onUnmounted(() => {
 const onLogout = () => {
   // 判断是否有正在执行的操作
   const hasEx = getDeviceStatus()
-  if (hasEx) { // 有正在执行的操作，给出提示
+  if (hasEx) {
+    // 有正在执行的操作，给出提示
     FtMessageBox.error('退出登录前请停止当前的操作')
     return
   }
@@ -164,8 +169,18 @@ const toggleLanguage = () => {
             >
               <template #default>
                 <div class="menu-tags">
-                  <img class="swing-icon" :src="((router.currentRoute.value.path.includes(item.path) ? item.meta!.activeIcon : item.meta!.icon) as string)" alt="">
-                  <span class="text" :class="{ 'active-text': router.currentRoute.value.path.includes(item.path) }">{{ item.meta!.title }}</span>
+                  <img
+                    class="swing-icon"
+                    :src="
+                      (router.currentRoute.value.path.includes(item.path)
+                        ? item.meta!.activeIcon
+                        : item.meta!.icon) as string
+                    "
+                    alt=""
+                  >
+                  <span class="text" :class="{ 'active-text': router.currentRoute.value.path.includes(item.path) }">{{
+                    item.meta!.title
+                  }}</span>
                 </div>
               </template>
             </el-tag>
@@ -177,15 +192,17 @@ const toggleLanguage = () => {
             <img v-else :src="WifiUnconnSvg" width="20" alt="">
           </span>
           <el-select v-model="languageType" class="select-language" :disabled="false" @change="toggleLanguage">
-            <el-option v-for="language in languages" :key="language.value" style="height: 2rem;" :value="language.value" :label="language.name">
+            <el-option
+              v-for="language in languages"
+              :key="language.value"
+              style="height: 2rem"
+              :value="language.value"
+              :label="language.name"
+            >
               {{ language.name }}
             </el-option>
           </el-select>
-          <bt-button
-            type="primary"
-            button-text="注销"
-            @click="onLogout"
-          />
+          <bt-button type="primary" button-text="注销" @click="onLogout" />
         </div>
       </div>
     </el-header>
@@ -223,7 +240,7 @@ const toggleLanguage = () => {
 .main {
   box-sizing: border-box;
   height: 100%;
-  background: #FAFAFA;
+  background: #fafafa;
   .header {
     height: 50px;
     width: 100%;
@@ -240,7 +257,7 @@ const toggleLanguage = () => {
     position: sticky;
   }
   .header {
-    color: #393F46;
+    color: #393f46;
     box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
 
     .logo {
@@ -249,8 +266,8 @@ const toggleLanguage = () => {
       display: flex;
       align-items: center;
       .title {
-        margin:0 10px;
-        color: #8799AB;
+        margin: 0 10px;
+        color: #8799ab;
         font-weight: 600;
       }
       img {
@@ -270,7 +287,7 @@ const toggleLanguage = () => {
       display: flex;
       align-items: center;
       height: 100%;
-      .header-menu{
+      .header-menu {
         width: 68vw;
       }
       .wifi-icon {
@@ -314,23 +331,24 @@ const toggleLanguage = () => {
   padding-left: 10px;
   display: flex;
   align-items: center;
-  .menu-tag{
-    height: 2.5rem;
-    border: 0px;
+  .menu-tag {
+    height: 30px;
+    border: 0;
     width: 10rem;
     display: flex;
     gap: 5px;
     font-size: 1.6vw;
     background: white;
+    transition: background-color 0.5s;
   }
-  .menu-tags{
+  .menu-tags {
     display: flex;
     align-items: center;
     .text {
       padding-left: 10px;
       color: #191919;
     }
-    .active-text{
+    .active-text {
       color: #ffffff;
     }
   }
@@ -342,7 +360,6 @@ const toggleLanguage = () => {
     display: flex;
     align-items: center;
     overflow: hidden;
-    height: 3.5vw;
     justify-content: center;
     min-width: 6rem;
     img {
@@ -350,7 +367,7 @@ const toggleLanguage = () => {
     }
   }
   .aside-item-active {
-    background: #1989FA;
+    background: #1989fa;
     display: flex;
     justify-content: center;
   }
@@ -361,11 +378,11 @@ const toggleLanguage = () => {
   //transition: all 0.1s ease;
   .aside-item {
     .text {
-      opacity: 0
+      opacity: 0;
     }
   }
   .aside-item-active {
-    background: rgba(0,0,0,0);
+    background: rgba(0, 0, 0, 0);
     color: #fff;
   }
 }
@@ -373,7 +390,7 @@ const toggleLanguage = () => {
   display: flex;
   align-items: center;
   height: 100%;
-  color: #393F46;
+  color: #393f46;
   font-weight: bold;
   img {
     height: 30px;
@@ -402,42 +419,43 @@ const toggleLanguage = () => {
       height: 100%;
     }
   }
-  .footer-left, .footer-right {
+  .footer-left,
+  .footer-right {
     width: 100%;
     height: 100%;
     background: #fff;
     border-radius: 5px;
-    display: flex ;
+    display: flex;
     align-items: center;
     padding: 0 20px;
   }
   .footer-left {
-    border-right: 5px solid #F6F6F6;
+    border-right: 5px solid #f6f6f6;
     img {
       height: 60%;
     }
     .text {
-      color: #1C1C1C                               ;
+      color: #1c1c1c;
       margin-left: 10px;
       font-size: 14px;
     }
   }
   .footer-right {
-    border-left: 10px solid #F6F6F6;
+    border-left: 10px solid #f6f6f6;
     .status {
       width: 15px;
       height: 15px;
       border-radius: 50%;
-      background: #4EE993;
+      background: #4ee993;
     }
     .text {
-      color: #1C1C1C                               ;
+      color: #1c1c1c;
       margin-left: 10px;
       font-size: 14px;
     }
   }
 
-  .ip-info{
+  .ip-info {
     font-size: 1.3rem;
     width: 22vw;
     padding-left: 1.3vw;
@@ -446,13 +464,13 @@ const toggleLanguage = () => {
     font-size: 1.5rem;
     width: 53vw;
     //padding-left: 1.3vw;
-    background: #F5F5F5;
+    background: #f5f5f5;
     height: 5vh;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
-    .alarm-workState{
+    .alarm-workState {
       margin-left: 5px;
     }
   }
diff --git a/src/views/debug/index.vue b/src/views/debug/index.vue
index 612ae3d..7232661 100644
--- a/src/views/debug/index.vue
+++ b/src/views/debug/index.vue
@@ -166,11 +166,7 @@ const printerDoTest = () => {
       <section class="debug-env">
         <!-- 左侧：H₂O₂ 传感器数据 -->
         <div class="debug-env-left">
-          <div
-            v-for="(item, index) in h2O2SensorData"
-            :key="index"
-            class="debug-left-lh env-lh"
-          >
+          <div v-for="(item, index) in h2O2SensorData" :key="index" class="debug-left-lh env-lh">
             <div class="debug-env-content">
               <div class="debug-label env-content-p" style="text-align: right; width: 8rem">
                 {{ index === 0 ? '仓内环境' : item.title || `探头${index}` }}
@@ -225,24 +221,13 @@ const printerDoTest = () => {
                 加液泵控制：
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="加液"
-                  @click="liquidFillingPumpDoLiquidFilling"
-                />
+                <bt-button type="primary" button-text="加液" @click="liquidFillingPumpDoLiquidFilling" />
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="排空"
-                  @click="liquidFillingPumpDoLiquidDischarge"
-                />
+                <bt-button type="primary" button-text="排空" @click="liquidFillingPumpDoLiquidDischarge" />
               </div>
               <div>
-                <bt-button
-                  button-text="停止"
-                  @click="liquidFillingPumpDoStop"
-                />
+                <bt-button button-text="停止" @click="liquidFillingPumpDoStop" />
               </div>
             </div>
             <div class="debug-left-lh">
@@ -250,17 +235,10 @@ const printerDoTest = () => {
                 空压机控制：
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="打开"
-                  @click="airCompressorDoOpen"
-                />
+                <bt-button type="primary" button-text="打开" @click="airCompressorDoOpen" />
               </div>
               <div>
-                <bt-button
-                  button-text="关闭"
-                  @click="airCompressorDoClose"
-                />
+                <bt-button button-text="关闭" @click="airCompressorDoClose" />
               </div>
             </div>
             <div class="debug-left-lh">
@@ -268,17 +246,10 @@ const printerDoTest = () => {
                 加热片控制：
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="打开"
-                  @click="heatingDoOpen"
-                />
+                <bt-button type="primary" button-text="打开" @click="heatingDoOpen" />
               </div>
               <div>
-                <bt-button
-                  button-text="关闭"
-                  @click="heatingDoClose"
-                />
+                <bt-button button-text="关闭" @click="heatingDoClose" />
               </div>
             </div>
             <div class="debug-left-lh">
@@ -286,18 +257,14 @@ const printerDoTest = () => {
                 气密性阀门模式：
               </div>
               <div class="debug-bw">
-                <el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%;">
+                <el-select v-model="airLeakDetectTestMode" placeholder="请选择模式" style="width: 100%">
                   <el-option label="消毒模式" value="disinfection" />
                   <el-option label="加压模式" value="inflation" />
                   <el-option label="泄露测试模式" value="leakTest" />
                 </el-select>
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="切换"
-                  @click="airLeakDetectTestModeDoSetMode"
-                />
+                <bt-button type="primary" button-text="切换" @click="airLeakDetectTestModeDoSetMode" />
               </div>
             </div>
           </div>
@@ -309,29 +276,23 @@ const printerDoTest = () => {
                 喷液泵控制：
               </div>
               <div class="debug-bw">
-                <el-select v-model="sprayPumpGpmValue" placeholder="请选择加液量" style="width: 100%;">
-                  <el-option v-for="opt in [2, 5, 8, 10, 15]" :key="opt" :label="`${opt} gpm`" :value="opt" />
+                <el-select v-model="sprayPumpGpmValue" placeholder="请选择加液量" style="width: 100%">
+                  <el-option
+                    v-for="opt in [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]"
+                    :key="opt"
+                    :label="`${opt} gpm`"
+                    :value="opt"
+                  />
                 </el-select>
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="喷液"
-                  @click="sprayPumpDoForward"
-                />
+                <bt-button type="primary" button-text="喷液" @click="sprayPumpDoForward" />
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="回流"
-                  @click="sprayPumpDoBackward"
-                />
+                <bt-button type="primary" button-text="回流" @click="sprayPumpDoBackward" />
               </div>
               <div>
-                <bt-button
-                  button-text="停止"
-                  @click="onClosePump"
-                />
+                <bt-button button-text="停止" @click="onClosePump" />
               </div>
             </div>
             <div class="debug-left-lh">
@@ -339,17 +300,10 @@ const printerDoTest = () => {
                 风机控制：
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="打开"
-                  @click="blowerDoOpen"
-                />
+                <bt-button type="primary" button-text="打开" @click="blowerDoOpen" />
               </div>
               <div>
-                <bt-button
-                  button-text="关闭"
-                  @click="blowerDoClose"
-                />
+                <bt-button button-text="关闭" @click="blowerDoClose" />
               </div>
             </div>
             <div class="debug-left-lh">
@@ -357,11 +311,7 @@ const printerDoTest = () => {
                 打印机测试：
               </div>
               <div>
-                <bt-button
-                  type="primary"
-                  button-text="测试"
-                  @click="printerDoTest"
-                />
+                <bt-button type="primary" button-text="测试" @click="printerDoTest" />
               </div>
             </div>
           </div>
@@ -372,102 +322,102 @@ const printerDoTest = () => {
 </template>
 
 <style lang="scss" scoped>
-  $lineHeight: 12vh;
-  .main-content{
-    height: $main-container-height;
-    overflow: hidden;
-    background: $gradient-color;
-    padding: 4vh;
-    font-size: 20px;
-    .debug-upper{
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: auto auto;
-    }
-    .debug-lower{
-      display: grid;
-      grid-template-columns: repeat(2,1fr);
-    }
-    .debug-left{
-      .debug-inside{
-        display: flex;
-        gap: 1rem;
-      }
-    }
+$lineHeight: 12vh;
+.main-content {
+  height: $main-container-height;
+  overflow: hidden;
+  background: $gradient-color;
+  padding: 4vh;
+  font-size: 20px;
+  .debug-upper {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto auto;
   }
-  .divider{
-    margin-top: 4vh;
-    margin-bottom: 4vh;
-  }
-  .debug-env {
-    display: flex;
-    align-items: flex-start;
+  .debug-lower {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
   }
-  .debug-left-lh{
-    display: flex;
-    gap: 1rem;
-    height: $lineHeight;
-    .debug-env-content{
+  .debug-left {
+    .debug-inside {
       display: flex;
-      .env-content-p{
-        padding: 5px;
-      }
+      gap: 1rem;
     }
   }
-
-  .debug-env-right {
+}
+.divider {
+  margin-top: 4vh;
+  margin-bottom: 4vh;
+}
+.debug-env {
+  display: flex;
+  align-items: flex-start;
+}
+.debug-left-lh {
+  display: flex;
+  gap: 1rem;
+  height: $lineHeight;
+  .debug-env-content {
     display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-left: 20rem;
-    align-items: flex-start;
+    .env-content-p {
+      padding: 5px;
+    }
   }
+}
 
-  .env-content-p {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 1rem;
-  }
+.debug-env-right {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-left: 20rem;
+  align-items: flex-start;
+}
 
-  .debug-env-right .env-content-p {
-    display: flex;
-    align-items: center;
-  }
+.env-content-p {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+}
 
-  .debug-env-right .env-content-p .label {
-    display: inline-block;
-    width: 6.5rem;    /* 根据最长文字“加热片电流”微调 */
-    text-align: right;
-    margin-right: 0.75rem;
-  }
+.debug-env-right .env-content-p {
+  display: flex;
+  align-items: center;
+}
 
-  .debug-env-right .env-content-p .value {
-    display: flex;
-    align-items: baseline;
-    gap: 0.2rem;
-  }
+.debug-env-right .env-content-p .label {
+  display: inline-block;
+  width: 6.5rem; /* 根据最长文字“加热片电流”微调 */
+  text-align: right;
+  margin-right: 0.75rem;
+}
 
-  .debug-env-right .env-content-p .debug-text {
-    font-weight: bold;
-    color: #2892F3;
-  }
+.debug-env-right .env-content-p .value {
+  display: flex;
+  align-items: baseline;
+  gap: 0.2rem;
+}
 
-  .debug-env-right .env-content-p .unit {
-    font-size: 0.9em;
-  }
-  .env-lh{
-    height: 5vh;
-  }
-  .debug-bw{
-    width: 10vw;
-  }
-  .debug-label{
-    width: 18vw;
-    text-align: end;
-  }
-  .debug-text{
-    color: #2892F3;
-    padding: 5px;
-  }
+.debug-env-right .env-content-p .debug-text {
+  font-weight: bold;
+  color: #2892f3;
+}
+
+.debug-env-right .env-content-p .unit {
+  font-size: 0.9em;
+}
+.env-lh {
+  height: 5vh;
+}
+.debug-bw {
+  width: 10vw;
+}
+.debug-label {
+  width: 18vw;
+  text-align: end;
+}
+.debug-text {
+  color: #2892f3;
+  padding: 5px;
+}
 </style>
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index e003c92..9dab0f3 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -24,7 +24,7 @@ const selectItem = (menuCode: string) => {
         <div class="menu-container">
           <ul class="menu-container">
             <li
-              v-for="(item) in settingMenus"
+              v-for="item in settingMenus"
               :key="item.code"
               :class="{ active: selectedMenuCode === item.code }"
               class="setting-menu-li menu-item"
@@ -55,68 +55,74 @@ const selectItem = (menuCode: string) => {
 </template>
 
 <style lang="scss" scoped>
-  .main-content{
-    display: grid;
-    grid-template-columns: repeat(3,1fr);
-    height: $main-container-height;
-    gap: 10px;
+.main-content {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  height: $main-container-height;
+  gap: 10px;
+  overflow: hidden;
+  .setting-left {
+    background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #ffffff 24%);
+    box-shadow: 0 0 4px #0000001f;
+    border-radius: 10px;
+    border: 1px solid #e1e1e1;
     overflow: hidden;
-    .setting-left{
-      background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #FFFFFF 24%);
-      box-shadow: 0px 0px 4px #0000001f;
-      border-radius: 10px;
-      border: 1px solid #e1e1e1;
-      overflow: hidden;
-    }
-    .setting-right{
-      grid-column:  2 / 4;
-      box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
-      background: #ffffff;
-      border: 1px solid #e1e1e1;
-      box-shadow: 0px 0px 4px #0000001f;
-      background: $gradient-color;
-      border-radius: 10px;
-      overflow: hidden;
-    }
-  }
-  .menu-container {
-    padding: 10px;
-    .setting-menu-li{
-      font-size: 1.5rem;
-    }
   }
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-  li {
-    padding: 15px 15px;
-    display: flex;
-    align-items: center;
+  .setting-right {
+    grid-column: 2 / 4;
+    box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
+    background: #ffffff;
+    border: 1px solid #e1e1e1;
+    background: $gradient-color;
     border-radius: 10px;
-    height: 5rem;
+    overflow: hidden;
   }
-  li.active {
-    // color: #e6f7ff;
-    background: #e8f3ff;
-    border-radius: 10px;
-    color: #2892F3;
+}
+.menu-container {
+  padding: 5px 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .setting-menu-li {
+    font-size: 18px;
   }
+}
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+li {
+  padding: 15px 15px;
+  font-size: 15px;
+  display: flex;
+  align-items: center;
+  //border-radius: 10px;
+  height: 60px;
+  border-left: 5px solid #fff;
+  transition: border-left-color 0.3s ease;
+}
+li.active {
+  border-left: 5px solid #2892f3;
+  // color: #e6f7ff;
+  background: #e8f3ff;
+  //border-radius: 10px;
+  color: #2892f3;
+}
 
-  .menu-container {
-    width: 100%; /* 占满父容器 */
-    background: #fff;
-    // border: 1px solid #eee;
-    overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
-  }
-  .menu-item {
-    padding: 14px 20px; /* 更大触摸区域 */
-    font-size: 15px;    /* 适配手机阅读 */
-    border-bottom: 1px solid #f5f5f5;
-  }
-  /* 最后一项去掉分隔线 */
-  .menu-item:last-child {
-    border-bottom: none;
-  }
+.menu-container {
+  width: 100%; /* 占满父容器 */
+  background: #fff;
+  // border: 1px solid #eee;
+  overflow: hidden; /* 配合圆角，避免阴影/边框溢出 */
+}
+.menu-item {
+  padding: 14px 20px; /* 更大触摸区域 */
+  font-size: 15px; /* 适配手机阅读 */
+  border-bottom: 1px solid #f5f5f5;
+}
+/* 最后一项去掉分隔线 */
+.menu-item:last-child {
+  border-bottom: none;
+}
 </style>