fix: 设置页修改

.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

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>
@@ -122,14 +116,13 @@ const handleSelectionChange = (users: User.UserItem[]) => {
   padding: 10px;
   background: $gradient-color;
   .add-user {
-    padding: 2vw;
-    height: 12%;
+    margin: 10px;
+    //height: 12%;
     display: flex;
     align-items: center;
   }
   .user-table {
-    height: 85%;
-    max-height: 73vh;
+    height: 73vh;
     overflow: auto;
   }
 }
@@ -137,7 +130,8 @@ const handleSelectionChange = (users: User.UserItem[]) => {
   display: flex;
   align-items: center;
 }
-.view-button, .delete-button {
+.view-button,
+.delete-button {
   border: none;
   padding: 4px 8px;
   border-radius: 3px;

src/layouts/default.vue

@@ -104,12 +104,16 @@ watchEffect(() => {
   isLowCost.value = deviceStore.isLowCost
 })
 
-watch(() => systemStore.systemTime, (newVal) => {
+watch(
+  () => systemStore.systemTime,
+  (newVal) => {
     if (timeInterval.value) {
       clearInterval(timeInterval.value)
     }
     runSystemTime(newVal)
-}, { deep: true })
+  },
+  { 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 {
@@ -250,7 +267,7 @@ const toggleLanguage = () => {
       align-items: center;
       .title {
         margin: 0 10px;
-        color: #8799AB;
+        color: #8799ab;
         font-weight: 600;
       }
       img {
@@ -315,13 +332,14 @@ const toggleLanguage = () => {
   display: flex;
   align-items: center;
   .menu-tag {
-    height: 2.5rem;
-    border: 0px;
+    height: 30px;
+    border: 0;
     width: 10rem;
     display: flex;
     gap: 5px;
     font-size: 1.6vw;
     background: white;
+    transition: background-color 0.5s;
   }
   .menu-tags {
     display: flex;
@@ -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,7 +378,7 @@ const toggleLanguage = () => {
   //transition: all 0.1s ease;
   .aside-item {
     .text {
-      opacity: 0
+      opacity: 0;
     }
   }
   .aside-item-active {
@@ -373,7 +390,7 @@ const toggleLanguage = () => {
   display: flex;
   align-items: center;
   height: 100%;
-  color: #393F46;
+  color: #393f46;
   font-weight: bold;
   img {
     height: 30px;
@@ -402,7 +419,8 @@ const toggleLanguage = () => {
       height: 100%;
     }
   }
-  .footer-left, .footer-right {
+  .footer-left,
+  .footer-right {
     width: 100%;
     height: 100%;
     background: #fff;
@@ -412,26 +430,26 @@ const toggleLanguage = () => {
     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;
     }
@@ -446,7 +464,7 @@ const toggleLanguage = () => {
     font-size: 1.5rem;
     width: 53vw;
     //padding-left: 1.3vw;
-    background: #F5F5F5;
+    background: #f5f5f5;
     height: 5vh;
     display: flex;
     align-items: center;

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>
@@ -450,7 +400,7 @@ const printerDoTest = () => {
 
 .debug-env-right .env-content-p .debug-text {
   font-weight: bold;
-    color: #2892F3;
+  color: #2892f3;
 }
 
 .debug-env-right .env-content-p .unit {
@@ -467,7 +417,7 @@ const printerDoTest = () => {
   text-align: end;
 }
 .debug-text {
-    color: #2892F3;
+  color: #2892f3;
   padding: 5px;
 }
 </style>

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"
@@ -62,27 +62,29 @@ const selectItem = (menuCode: string) => {
   gap: 10px;
   overflow: hidden;
   .setting-left {
-      background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #FFFFFF 24%);
-      box-shadow: 0px 0px 4px #0000001f;
+    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-right {
     grid-column: 2 / 4;
-      box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
+    box-shadow: 0 1px 5px 0 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;
+  padding: 5px 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
   .setting-menu-li {
-      font-size: 1.5rem;
+    font-size: 18px;
   }
 }
 ul {
@@ -92,16 +94,20 @@ const selectItem = (menuCode: string) => {
 }
 li {
   padding: 15px 15px;
+  font-size: 15px;
   display: flex;
   align-items: center;
-    border-radius: 10px;
-    height: 5rem;
+  //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;
+  //border-radius: 10px;
+  color: #2892f3;
 }
 
 .menu-container {