From 5fa44883f5e416d0db3bdfd927fd4ea96bc1346b Mon Sep 17 00:00:00 2001
From: pnoker <pnokers@gmail.com>
Date: Sat, 2 May 2026 00:49:48 +0800
Subject: [PATCH] style(toolbar): insert vertical divider between pagination
 and refresh/sort

A 1x18px divider separates the pagination sizer dropdown from the
refresh / sort circle buttons so the two control groups read as
distinct clusters instead of running into each other.
---
 src/components/card/tool/ToolCard.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/card/tool/ToolCard.vue b/src/components/card/tool/ToolCard.vue
index a1d436f6e..7732c62db 100644
--- a/src/components/card/tool/ToolCard.vue
+++ b/src/components/card/tool/ToolCard.vue
@@ -55,6 +55,7 @@
             @size-change="onSizeChange"
             @current-change="onCurrentChange"
           />
+          <span class="tool-card-footer-divider" aria-hidden="true" />
           <el-tooltip :content="t('common.refresh')" effect="dark" placement="top">
             <el-button :icon="Refresh" circle @click="onRefresh" />
           </el-tooltip>
@@ -212,6 +213,17 @@
         display: flex;
         align-items: center;
         gap: 8px;
+
+        // Vertical divider between the pagination sizer dropdown and the
+        // refresh / sort circles, so the two groups read as separate
+        // controls instead of running into each other.
+        .tool-card-footer-divider {
+          display: inline-block;
+          width: 1px;
+          height: 18px;
+          margin: 0 4px;
+          background: var(--el-border-color);
+        }
       }
     }