From 4bca79cd5b91b549b9431eaa593fb205254b7191 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 7 Jul 2025 16:36:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=A1=E8=AE=A1=E9=A1=B5=E9=9D=A2;?=
 =?UTF-8?q?=E9=85=8D=E6=96=B9=E9=A1=B5=E9=9D=A2;=20=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2ui=E4=BC=98=E5=8C=96;=20=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/audit/History.vue                |   8 +-
 src/components/audit/OperationRecord.vue        |   9 +-
 src/components/formula/FormulaConfig.vue        |  76 +++------
 src/components/formula/SettingFormulaConfig.vue |  30 ++--
 src/layouts/default.vue                         | 211 ++++++++++++------------
 src/views/formula/index.vue                     |   1 +
 src/views/setting/index.vue                     |   7 +-
 7 files changed, 153 insertions(+), 189 deletions(-)

diff --git a/src/components/audit/History.vue b/src/components/audit/History.vue
index e865966..2d02c6d 100644
--- a/src/components/audit/History.vue
+++ b/src/components/audit/History.vue
@@ -133,10 +133,10 @@ const deleteBtnVisible = computed(() => {
         <el-table-column prop="detail" label="操作" width="200">
           <template #default="scoped">
             <div class="user-opera">
-              <el-button class="view-button" @click.stop="showDetail(scoped.row)">
+              <el-button type="primary" @click.stop="showDetail(scoped.row)">
                 查看
               </el-button>
-              <el-button class="print-button" title="打印" @click.stop="printDetail(scoped.row)">
+              <el-button type="primary" @click.stop="printDetail(scoped.row)">
                 打印
               </el-button>
             </div>
@@ -162,7 +162,9 @@ const deleteBtnVisible = computed(() => {
   padding: 10px;
   background: $gradient-color;
   .history-export {
-    margin: 10px;
+    height: 50px;
+    display: flex;
+    align-items: center;
   }
   .history-table {
     height: 73vh;
diff --git a/src/components/audit/OperationRecord.vue b/src/components/audit/OperationRecord.vue
index 2f6cf03..b6ca172 100644
--- a/src/components/audit/OperationRecord.vue
+++ b/src/components/audit/OperationRecord.vue
@@ -83,12 +83,7 @@ const handleCurrentChange = (page: number) => {
   getAuditList()
 }
 
-const formatIndex = (
-  _row: unknown,
-  _column: TableColumnCtx<unknown>,
-  _cellValue: unknown,
-  index: number,
-): number => {
+const formatIndex = (_row: unknown, _column: TableColumnCtx<unknown>, _cellValue: unknown, index: number): number => {
   return (pageNum.value - 1) * pageSize.value + index + 1
 }
 </script>
@@ -121,7 +116,7 @@ const formatIndex = (
   background: $gradient-color;
   .audit-export {
     height: 50px;
-    padding: 0 10px;
+    //padding: 0 10px;
     display: flex;
     align-items: center;
   }
diff --git a/src/components/formula/FormulaConfig.vue b/src/components/formula/FormulaConfig.vue
index 54ed486..07f19a4 100644
--- a/src/components/formula/FormulaConfig.vue
+++ b/src/components/formula/FormulaConfig.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
 import { ElMessage } from 'element-plus'
 import { formulaNameMap } from 'libs/constant'
 import { cloneDeep } from 'lodash'
@@ -14,8 +13,6 @@ const homeStore = useHomeStore()
 
 const formulaStore = useFormulaStore()
 
-const targetInputRef = ref<HTMLInputElement | null>(null)
-
 const isFlip = ref(true)
 /**
  * 当前表单数据
@@ -28,21 +25,6 @@ const formData = ref<Record<string, any>>({})
 const inputValue = ref<string>('')
 
 /**
- * 软键盘是否可见
- */
-const keyboardVisible = ref(false)
-
-/**
- * 软键盘类型：'text' 或 'number'
- */
-const keyboardType = ref<'text' | 'number'>('number')
-
-/**
- * 软键盘组件引用
- */
-const softKeyboardRef = ref()
-
-/**
  * 当前聚焦的输入字段名称
  */
 const focusedInput = ref<string | null>(null)
@@ -178,14 +160,6 @@ const deviceState = computed(() => {
   return disinfectionState.value.state === 'idle' || disinfectionState.value.state === 'finished'
 })
 
-/**
- * 确认输入值
- * @param {string} value - 输入值
- */
-const handleConfirm = (value: string) => {
-  console.log('确认输入:', value)
-}
-
 const size = 'default'
 // 新增配方方法
 const addFormula = async () => {
@@ -229,7 +203,15 @@ const validateName = (rule: any, value: any, callback: any) => {
 <template>
   <transition name="slide-right">
     <div v-if="isFlip" class="formula-form">
-      <el-form ref="formRef" :model="formData" label-width="auto" label-position="right" :size="size" inline>
+      <el-form
+        ref="formRef"
+        :model="formData"
+        class="form-box"
+        label-width="auto"
+        label-position="right"
+        :size="size"
+        inline
+      >
         <el-form-item
           label="配方名称"
           style="width: 93%"
@@ -289,27 +271,11 @@ const validateName = (rule: any, value: any, callback: any) => {
           </template>
         </el-form-item>
       </el-form>
-      <div>
-        <slot name="formulaBtn">
-          <div class="default-btn">
-            <el-button type="primary" class="config-btn" @click="handleSubmit">
-              确定
-            </el-button>
-          </div>
-        </slot>
+      <div class="default-btn">
+        <el-button type="primary" class="config-btn" @click="handleSubmit">
+          确定
+        </el-button>
       </div>
-      <Teleport to="body">
-        <SoftKeyboard
-          ref="softKeyboardRef"
-          v-model="inputValue"
-          :is-visible="keyboardVisible"
-          :keyboard-type="keyboardType"
-          :target-input="targetInputRef"
-          @confirm="handleConfirm"
-          @update-keyboard-visible="visible => (keyboardVisible = visible)"
-          @close="keyboardVisible = false"
-        />
-      </Teleport>
     </div>
   </transition>
 </template>
@@ -317,16 +283,20 @@ const validateName = (rule: any, value: any, callback: any) => {
 <style lang="scss" scoped>
 .formula-form {
   font-size: 20px !important;
-  padding: 5px 5px 5px 15px;
   align-items: center;
+  height: 100%;
+  .form-box {
+    height: calc(100% - 50px);
+    overflow: auto;
+  }
   .default-btn {
-    margin-top: 1rem;
+    height: 50px;
     display: flex;
     justify-content: center;
-  }
-  .config-btn {
-    //height: 3rem;
-    //width: 8rem;
+    align-items: center;
+    .el-button {
+      width: 100px;
+    }
   }
 }
 
diff --git a/src/components/formula/SettingFormulaConfig.vue b/src/components/formula/SettingFormulaConfig.vue
index eccdffe..67bb37c 100644
--- a/src/components/formula/SettingFormulaConfig.vue
+++ b/src/components/formula/SettingFormulaConfig.vue
@@ -84,6 +84,7 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
   <div class="formula-form">
     <el-form
       ref="settingFormRef"
+      class="form-box"
       :disabled="!props.editable"
       :model="formData"
       label-width="auto"
@@ -146,14 +147,10 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
         </template>
       </el-form-item>
     </el-form>
-    <div>
-      <slot name="formulaBtn">
-        <div class="default-btn">
-          <el-button v-if="editable" type="primary" @click="handleSubmit">
-            确定
-          </el-button>
-        </div>
-      </slot>
+    <div class="default-btn">
+      <el-button v-if="editable" type="primary" @click="handleSubmit">
+        确定
+      </el-button>
     </div>
   </div>
 </template>
@@ -161,17 +158,20 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
 <style lang="scss" scoped>
 .formula-form {
   font-size: 20px !important;
-  padding: 5px;
-  padding-left: 15px;
+  height: 100%;
   align-items: center;
+  .form-box {
+    height: calc(100% - 50px);
+    overflow: auto;
+  }
   .default-btn {
-    width: 100%;
+    height: 50px;
     display: flex;
     justify-content: center;
-  }
-  .config-btn {
-    height: 3rem;
-    width: 8rem;
+    align-items: center;
+    .el-button {
+      width: 100px;
+    }
   }
 }
 
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 8808d60..13ac666 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -227,53 +227,49 @@ const handleCloseAll = async () => {
       <div class="logo">
         <img src="../assets/images/logo.svg" alt="">
       </div>
-      <div class="header-right">
-        <div class="header-menu">
-          <div class="aside">
-            <el-tag
-              v-for="item in menuList.filter(item => item.meta!.isDefault)"
-              :key="item.path"
-              class="menu-tag"
-              :class="{ 'aside-item-active': router.currentRoute.value.path.includes(item.path) }"
-              @click="router.push(item.path)"
-            >
-              <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>
-                </div>
-              </template>
-            </el-tag>
-          </div>
-        </div>
-        <div class="user">
-          <span v-if="deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B">
-            <img v-if="websocketConnected" width="20" :src="WifiConnSvg" alt="">
-            <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; font-size: 1rem"
-              :value="language.value"
-              :label="language.name"
-            >
-              {{ language.name }}
-            </el-option>
-          </el-select>
-          <bt-button type="primary" button-text="注销" @click="onLogout" />
-        </div>
+      <div class="header-menu">
+        <el-tag
+          v-for="item in menuList.filter(item => item.meta!.isDefault)"
+          :key="item.path"
+          class="menu-tag"
+          :class="{ 'aside-item-active': router.currentRoute.value.path.includes(item.path) }"
+          @click="router.push(item.path)"
+        >
+          <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>
+            </div>
+          </template>
+        </el-tag>
+      </div>
+      <div class="user">
+        <span v-if="deviceType === deviceStore.deviceTypeMap.LargeSpaceDM_B">
+          <img v-if="websocketConnected" width="20" :src="WifiConnSvg" alt="">
+          <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; font-size: 1rem"
+            :value="language.value"
+            :label="language.name"
+          >
+            {{ language.name }}
+          </el-option>
+        </el-select>
+        <bt-button style="margin-left: auto" type="primary" button-text="注销" @click="onLogout" />
       </div>
     </el-header>
     <el-container class="container">
@@ -374,6 +370,9 @@ const handleCloseAll = async () => {
   .header {
     color: #393f46;
     box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
+    display: flex;
+    padding: 0 10px;
+    justify-content: center;
 
     .logo {
       height: 22px;
@@ -398,38 +397,38 @@ const handleCloseAll = async () => {
         transition: all 0.3s;
       }
     }
-    .header-right {
+    .header-menu {
+      flex: 1;
+      width: 50%;
+      height: 100%;
       display: flex;
+      padding: 0 10px;
       align-items: center;
+      justify-content: center;
+    }
+    .wifi-icon {
+      width: 40px;
       height: 100%;
-      .header-menu {
-        width: 68vw;
-      }
-      .wifi-icon {
-        width: 40px;
-        height: 100%;
-        background: #fff;
-        border-radius: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        img {
-          height: 50%;
-        }
+      background: #fff;
+      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        height: 50%;
       }
     }
     .user {
-      width: 20vw;
+      //width: 20vw;
       text-align: right;
-      right: 5px;
+      margin-left: auto;
       display: flex;
       align-items: center;
-      gap: 25px;
       padding-left: 10px;
       .select-language {
-        width: 100px;
+        width: 80px;
         border-radius: 5px;
-        margin-right: 5px;
+        margin: 0 10px;
       }
       .user-logout {
         margin-left: auto;
@@ -466,52 +465,48 @@ const handleCloseAll = async () => {
 :deep(.el-popover) {
   padding: 10px !important;
 }
-.aside {
-  overflow: hidden;
-  padding-left: 10px;
+.menu-tag {
+  height: 36px;
+  border: 0;
+  width: 10rem;
+  display: flex;
+  border-radius: 3px;
+  gap: 5px;
+  font-size: 1.6vw;
+  background: rgba(0, 0, 0, 0);
+  transition: all 0.5s;
+}
+.menu-tags {
   display: flex;
   align-items: center;
-  .menu-tag {
-    height: 36px;
-    border: 0;
-    width: 10rem;
-    display: flex;
-    gap: 5px;
-    font-size: 1.6vw;
-    background: rgba(0, 0, 0, 0);
-    transition: background-color 0.5s;
-  }
-  .menu-tags {
-    display: flex;
-    align-items: center;
-    .text {
-      padding-left: 10px;
-      color: #191919;
-    }
-    .active-text {
-      color: #ffffff;
-    }
+  .text {
+    padding-left: 10px;
+    color: #191919;
   }
-  .aside-item {
-    height: 50px;
-    border-radius: 10px;
-    margin: 10px 0;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    justify-content: center;
-    min-width: 6rem;
-    img {
-      margin-right: 10px;
-    }
+  .active-text {
+    color: #ffffff;
   }
-  .aside-item-active {
-    background: #1989fa;
-    display: flex;
-    justify-content: center;
+}
+.aside-item {
+  height: 50px;
+  border-radius: 10px;
+  margin: 10px 0;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  justify-content: center;
+  min-width: 6rem;
+  img {
+    margin-right: 10px;
   }
 }
+.aside-item-active {
+  background: #1989fa;
+  display: flex;
+  justify-content: center;
+  border-radius: 10px;
+}
 
 .aside-off {
   width: 70px;
@@ -544,7 +539,7 @@ const handleCloseAll = async () => {
 }
 .content {
   width: 100%;
-  height: $main-container-height;
+  height: 100%;
   padding: 10px;
 }
 .footer-expand {
diff --git a/src/views/formula/index.vue b/src/views/formula/index.vue
index 22d1353..47d9f04 100644
--- a/src/views/formula/index.vue
+++ b/src/views/formula/index.vue
@@ -82,6 +82,7 @@ const selectedIndexRest = () => {
     border-radius: 10px;
     overflow: hidden;
     position: relative;
+    padding: 10px;
   }
 }
 </style>
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index ae9a2a5..199b167 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -38,9 +38,10 @@ const selectItem = (menuCode: string) => {
         </div>
       </div>
       <div class="setting-right">
-        <div v-if="selectedMenuCode === 'defaultFormula'">
-          <SettingFormulaConfig :editable="systemStore.systemUser?.roleType === 'admin'" />
-        </div>
+        <SettingFormulaConfig
+          v-if="selectedMenuCode === 'defaultFormula'"
+          :editable="systemStore.systemUser?.roleType === 'admin'"
+        />
         <template v-if="selectedMenuCode === 'user'">
           <User />
         </template>