From 3859e2e70a60f7d6ede863cc71e2fd8624e025e3 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Mon, 7 Jul 2025 16:15:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=85=8D=E6=96=B9=E9=A1=B5ui=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/formula/FormulaConfig.vue        |  4 +-
 src/components/formula/FormulaTable.vue         | 16 +++++---
 src/components/formula/SettingFormulaConfig.vue |  8 ++--
 src/components/setting/User.vue                 | 12 +++++-
 src/views/formula/index.vue                     | 51 +++++++++++++------------
 src/views/setting/index.vue                     |  8 ++--
 6 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/src/components/formula/FormulaConfig.vue b/src/components/formula/FormulaConfig.vue
index f3d088a..54ed486 100644
--- a/src/components/formula/FormulaConfig.vue
+++ b/src/components/formula/FormulaConfig.vue
@@ -325,8 +325,8 @@ const validateName = (rule: any, value: any, callback: any) => {
     justify-content: center;
   }
   .config-btn {
-    height: 3rem;
-    width: 8rem;
+    //height: 3rem;
+    //width: 8rem;
   }
 }
 
diff --git a/src/components/formula/FormulaTable.vue b/src/components/formula/FormulaTable.vue
index 72241fc..527ef69 100644
--- a/src/components/formula/FormulaTable.vue
+++ b/src/components/formula/FormulaTable.vue
@@ -86,7 +86,11 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
           <el-button class="view-button" @click.stop="onStartFormula(item)">
             执行配方
           </el-button>
-          <el-button v-if="systemStore.systemUser?.name === 'admin'" class="delete-button" @click.stop="deleteRecipe(item)">
+          <el-button
+            v-if="systemStore.systemUser?.name === 'admin'"
+            class="delete-button"
+            @click.stop="deleteRecipe(item)"
+          >
             删除
           </el-button>
         </div>
@@ -104,21 +108,23 @@ const deleteRecipe = (item: Formula.FormulaItem) => {
 
 <style scoped>
 .recipe-management {
-  border: 1px solid #ccc;
-  padding: 10px;
   border-radius: 5px;
   overflow: auto;
-  width: 30vw;
+  width: 100%;
 }
 
 .recipe-list {
   list-style: none;
   padding: 0;
   margin: 0;
+  width: 100%;
   .formula-name {
     font-size: 1.2rem;
     color: var(--el-text-color-regular);
-    width: 10rem;
+    width: 50%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 }
 
diff --git a/src/components/formula/SettingFormulaConfig.vue b/src/components/formula/SettingFormulaConfig.vue
index 56a7b78..eccdffe 100644
--- a/src/components/formula/SettingFormulaConfig.vue
+++ b/src/components/formula/SettingFormulaConfig.vue
@@ -146,10 +146,10 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
         </template>
       </el-form-item>
     </el-form>
-    <div :style="{ marginLeft: '33%' }">
+    <div>
       <slot name="formulaBtn">
         <div class="default-btn">
-          <el-button v-if="editable" type="primary" class="config-btn" @click="handleSubmit">
+          <el-button v-if="editable" type="primary" @click="handleSubmit">
             确定
           </el-button>
         </div>
@@ -165,7 +165,9 @@ const validatePass = (rule: any, value: any, callback: any, config: Formula.Form
   padding-left: 15px;
   align-items: center;
   .default-btn {
-    margin-top: 1rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
   }
   .config-btn {
     height: 3rem;
diff --git a/src/components/setting/User.vue b/src/components/setting/User.vue
index 31869a0..2874850 100644
--- a/src/components/setting/User.vue
+++ b/src/components/setting/User.vue
@@ -93,10 +93,18 @@ const handleSelectionChange = (users: User.UserItem[]) => {
         <el-table-column prop="detail" label="操作" width="250">
           <template #default="scoped">
             <div class="user-opera">
-              <el-button v-if="scoped.row.id === systemStore.systemUser?.id || systemStore.systemUser?.roleType === 'admin'" class="view-button" @click.stop="updatePwd(scoped.row)">
+              <el-button
+                v-if="scoped.row.id === systemStore.systemUser?.id || systemStore.systemUser?.roleType === 'admin'"
+                type="primary"
+                @click.stop="updatePwd(scoped.row)"
+              >
                 修改密码
               </el-button>
-              <el-button v-if="systemStore.systemUser?.roleType === 'admin'" class="delete-button" @click.stop="onDelUser(scoped.row)">
+              <el-button
+                v-if="systemStore.systemUser?.roleType === 'admin'"
+                type="danger"
+                @click.stop="onDelUser(scoped.row)"
+              >
                 删 除
               </el-button>
             </div>
diff --git a/src/views/formula/index.vue b/src/views/formula/index.vue
index 9d1792d..22d1353 100644
--- a/src/views/formula/index.vue
+++ b/src/views/formula/index.vue
@@ -23,13 +23,7 @@ const selectedIndexRest = () => {
     <main class="main-content">
       <div class="formula-left">
         <div v-if="systemStore.systemUser?.roleType === 'admin'" class="formula-add">
-          <bt-button
-            type="primary"
-            button-text="新增配方"
-            text-size="1.3rem"
-            class="formula-add-btn"
-            @click="onAddFormula"
-          >
+          <bt-button type="primary" button-text="新增配方" @click="onAddFormula">
             <template #icon>
               <el-icon>
                 <Plus />
@@ -37,12 +31,15 @@ const selectedIndexRest = () => {
             </template>
           </bt-button>
         </div>
-        <div class="formula-list">
-          <FormulaTable ref="tableRef" />
-        </div>
+        <FormulaTable ref="tableRef" class="formula-list" />
       </div>
       <div class="formula-right">
-        <FormulaConfig ref="formRef" type="formula" :formula-name-visible="true" :editable="systemStore.systemUser?.roleType === 'admin'" />
+        <FormulaConfig
+          ref="formRef"
+          type="formula"
+          :formula-name-visible="true"
+          :editable="systemStore.systemUser?.roleType === 'admin'"
+        />
       </div>
     </main>
   </div>
@@ -51,33 +48,39 @@ const selectedIndexRest = () => {
 <style lang="scss" scoped>
 .main-content {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  height: $main-container-height;
-  gap: 5px;
+  grid-template-columns: 1fr 2fr;
+  height: 100%;
+  gap: 10px;
   overflow: hidden;
   .formula-left {
-    box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
-    background: $gradient-color;
+    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;
+    padding: 10px 0;
     .formula-add {
-      margin: 10px;
-    }
-    .formula-add-btn {
       display: flex;
       align-items: center;
-      height: 3rem;
+      justify-content: center;
+      height: 40px;
       border-radius: 5px;
     }
     .formula-list {
       display: flex;
       justify-content: center;
-      height: 74vh;
-      max-height: 74vh;
+      height: calc(100% - 40px);
+      padding-top: 10px;
     }
   }
   .formula-right {
     grid-column: 2 / 4;
-    box-shadow: 0px 1px 5px 0px rgba(9, 39, 62, 0.15);
-    background: $gradient-color;
+    box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
+    background: #ffffff;
+    border: 1px solid #e1e1e1;
+    background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #ffffff 24%);
+    border-radius: 10px;
+    overflow: hidden;
     position: relative;
   }
 }
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index cc484e4..ae9a2a5 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -39,9 +39,7 @@ const selectItem = (menuCode: string) => {
       </div>
       <div class="setting-right">
         <div v-if="selectedMenuCode === 'defaultFormula'">
-          <SettingFormulaConfig
-            :editable="systemStore.systemUser?.roleType === 'admin'"
-          />
+          <SettingFormulaConfig :editable="systemStore.systemUser?.roleType === 'admin'" />
         </div>
         <template v-if="selectedMenuCode === 'user'">
           <User />
@@ -61,7 +59,7 @@ const selectItem = (menuCode: string) => {
 .main-content {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  height: $main-container-height;
+  height: 100%;
   gap: 10px;
   overflow: hidden;
   .setting-left {
@@ -76,7 +74,7 @@ const selectItem = (menuCode: string) => {
     box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
     background: #ffffff;
     border: 1px solid #e1e1e1;
-    background: $gradient-color;
+    background: linear-gradient(180deg, rgba(147, 203, 255, 0.01) 50%, #ffffff 24%);
     border-radius: 10px;
     overflow: hidden;
     padding: 10px;