优化展示

src/components/PigBatchList.vue

@@ -29,20 +29,31 @@
           </div>
         </div>
         <div class="batch-actions">
-          <el-button size="small" type="primary" @click.stop="showAddPenDialog(batch)" :disabled="!batch.is_active">
-            增加猪栏
-          </el-button>
-          <el-button
-            size="small"
-            type="success"
-            @click.stop="emitTransferPigs(batch)"
-            :disabled="!batch.is_active || !batch.pens || batch.pens.length < 2"
-            title="将猪从一个猪栏转移到同一批次的另一个猪栏"
-          >
-            群内调栏
-          </el-button>
-          <el-button size="small" @click.stop="emitEditBatch(batch)">编辑</el-button>
-          <el-button size="small" type="danger" @click.stop="emitDeleteBatch(batch)">删除</el-button>
+          <el-dropdown trigger="click" class="batch-dropdown">
+            <el-button type="primary" size="small">
+              管理猪群<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="showAddPenDialog(batch)" :disabled="!batch.is_active">增加猪栏</el-dropdown-item>
+                <el-dropdown-item @click="emitEditBatch(batch)">编辑</el-dropdown-item>
+                <el-dropdown-item @click="emitDeleteBatch(batch)" divided>删除</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-dropdown trigger="click" class="batch-dropdown">
+            <el-button type="success" size="small">
+              调栏<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item 
+                  @click="emitTransferPigs(batch)"
+                  :disabled="!batch.is_active || !batch.pens || batch.pens.length < 2"
+                >群内调栏</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </div>
       <div v-if="batch.isExpanded" class="batch-content">
@@ -96,12 +107,14 @@ import PigBatchPenCard from './PigBatchPenCard.vue';
 import AllocatePigsDialog from './AllocatePigsDialog.vue';
 import {getAllPens, getAllPigHouses, movePigsIntoPen} from '../api/pigBatch';
 import {formatRFC3339} from '../utils/format'; // 导入格式化函数
+import { ArrowDown } from '@element-plus/icons-vue'; // 导入 ArrowDown 图标
 
 export default {
   name: 'PigBatchList',
   components: {
     PigBatchPenCard,
-    AllocatePigsDialog
+    AllocatePigsDialog,
+    ArrowDown // 注册 ArrowDown 图标
   },
   props: {
     pigBatches: {
@@ -253,6 +266,10 @@ export default {
   gap: 10px;
 }
 
+.batch-dropdown {
+  margin-left: 10px; /* 为下拉菜单添加左边距 */
+}
+
 .batch-content {
   padding: 16px;
   border-top: 1px solid #eee;