fix: 审计页面;配方页面; 设置页面ui优化; 按钮统一

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;

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;
   }

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>
-      <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;
+    align-items: center;
+    .el-button {
+      width: 100px;
     }
-  .config-btn {
-    //height: 3rem;
-    //width: 8rem;
   }
 }
 

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,32 +147,31 @@ 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>
   </div>
 </template>
 
 <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;
+    align-items: center;
+    .el-button {
+      width: 100px;
     }
-  .config-btn {
-    height: 3rem;
-    width: 8rem;
   }
 }
 

src/layouts/default.vue

@@ -227,9 +227,7 @@ 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"
@@ -255,7 +253,6 @@ const handleCloseAll = async () => {
           </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="">
@@ -272,8 +269,7 @@ const handleCloseAll = async () => {
             {{ language.name }}
           </el-option>
         </el-select>
-          <bt-button type="primary" button-text="注销" @click="onLogout" />
-        </div>
+        <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,12 +397,14 @@ 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;
-      height: 100%;
-      .header-menu {
-        width: 68vw;
+      justify-content: center;
     }
     .wifi-icon {
       width: 40px;
@@ -417,19 +418,17 @@ const handleCloseAll = async () => {
         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,20 +465,16 @@ const handleCloseAll = async () => {
 :deep(.el-popover) {
   padding: 10px !important;
 }
-.aside {
-  overflow: hidden;
-  padding-left: 10px;
-  display: flex;
-  align-items: center;
 .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: background-color 0.5s;
+  transition: all 0.5s;
 }
 .menu-tags {
   display: flex;
@@ -510,7 +505,7 @@ const handleCloseAll = async () => {
   background: #1989fa;
   display: flex;
   justify-content: center;
-  }
+  border-radius: 10px;
 }
 
 .aside-off {
@@ -544,7 +539,7 @@ const handleCloseAll = async () => {
 }
 .content {
   width: 100%;
-  height: $main-container-height;
+  height: 100%;
   padding: 10px;
 }
 .footer-expand {

src/views/formula/index.vue

@@ -82,6 +82,7 @@ const selectedIndexRest = () => {
     border-radius: 10px;
     overflow: hidden;
     position: relative;
+    padding: 10px;
   }
 }
 </style>

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>