fix:配方页ui优化

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

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

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;

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>

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

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;