fix:首页配方名ui优化

src/components/home/HomeFormula.vue

@@ -13,13 +13,15 @@ watchEffect(() => {
 
 <template>
   <div class="home-right-title">
-    <div>
     <div class="title-formula">
       <el-icon style="color: #31cb7a; font-size: 1.5rem">
         <SuccessFilled />
       </el-icon>
-        <div>{{ formulaInfo?.name || '默认' }}</div>
+      <el-tooltip :content="formulaInfo?.name || '默认'" placement="bottom-start">
+        <div class="name-text">
+          {{ formulaInfo?.name || '默认' }}
         </div>
+      </el-tooltip>
     </div>
     <div v-if="formulaInfo && formulaInfo.injection_pump_speed" class="title-spend">
       <span>速率</span>
@@ -38,12 +40,20 @@ watchEffect(() => {
   grid-template-columns: 1fr 1fr;
   font-size: 1.5rem;
   .title-formula {
+    width: 100%;
     display: flex;
     align-items: center;
     gap: 5px;
-    padding: 10px;
+    padding-left: 10px;
     font-size: 1.5rem;
     flex-wrap: nowrap;
+    .name-text {
+      // 不换行显示省略号
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
   .title-formula {
     flex: 1 1 auto;