From eb7a9e9b88247977f53bfbd4f0595a9b0e73e3b7 Mon Sep 17 00:00:00 2001
From: owen <itcsx@126.com>
Date: Wed, 23 Sep 2026 08:08:44 +0800
Subject: [PATCH] ow

---
 .../src/components/basic/OperatorStation.vue  | 38 +++++++++++--------
 .../basic/OperatorStationDelete.vue           | 20 +++++++---
 .../basic/OperatorStationFamily.vue           | 22 +++++++----
 WebVue/src/components/basic/Toolbar.vue       | 10 ++---
 4 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/WebVue/src/components/basic/OperatorStation.vue b/WebVue/src/components/basic/OperatorStation.vue
index 4f06092..de20a2e 100644
--- a/WebVue/src/components/basic/OperatorStation.vue
+++ b/WebVue/src/components/basic/OperatorStation.vue
@@ -3,42 +3,42 @@
     <a-col flex="auto">
       <a-row>
         <a-col flex="400px">
-          <a-row justify="start">
-            <a-col :span="2" style="margin-left: 8px">
+          <a-row justify="start" class="ops-row">
+            <a-col flex="32px" style="margin-left: 8px">
               <a-tooltip title="新建文件夹">
                 <a-button v-if="canCreate" class="nav-btn" :icon="h(FolderAddOutlined)"
                   @click="$emit('create-folder')"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2">
+            <a-col flex="32px">
               <a-tooltip title="上传文件">
                 <a-button v-if="canCreate" :icon="h(UploadOutlined)" type="primary" class="nav-btn"
                   @click="triggerUpload">
                 </a-button> </a-tooltip></a-col>
-            <a-col :span="2" v-if="!isDirectorySelected && isSingleItem">
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
               <a-tooltip title="下载">
                 <a-button class="nav-btn" :icon="h(DownloadOutlined)" :disabled="!canAmend"
                   @click="onDownload"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
+            <a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
               <a-tooltip title="共享">
                 <a-button class="nav-btn" :icon="h(ShareAltOutlined)" @click="onShare"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="isSingleItem">
+            <a-col flex="32px" v-if="isSingleItem">
               <a-tooltip title="重命名">
                 <a-button class="nav-btn" :icon="h(EditOutlined)" :disabled="!canAmend"
                   @click="$emit('rename', selectedItems)"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="isSingleItem">
+            <a-col flex="32px" v-if="isSingleItem">
               <a-tooltip title="移动">
                 <a-button class="nav-btn" :icon="h(RotateRightOutlined)" :disabled="!canAmend"
                   @click="$emit('move', selectedItems)"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="hasSelection">
+            <a-col flex="32px" v-if="hasSelection">
               <a-tooltip title="删除">
                 <a-popconfirm title="确定是否删除?" ok-text="是" cancel-text="否" @confirm="$emit('delete', selectedItems)">
                   <a-button class="nav-btn" :icon="h(DeleteOutlined, { style: { color: 'red' } })"
@@ -46,24 +46,24 @@
                 </a-popconfirm>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
+            <a-col flex="32px" v-if="!isDirectorySelected && (isSingleItem || isSameMediaTypeSelected)">
               <a-tooltip :title="publishTooltip">
                 <a-button class="nav-btn" :icon="h(NotificationOutlined)" @click="onPublish"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="!isDirectorySelected && isSingleItem">
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
               <a-tooltip :title="previewTooltip">
                 <a-button class="nav-btn" @click="onViewPreview"><cust-icon-font size="16"
                     type="icon-qingbaojiankong" /></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
               <a-tooltip>
                 <a-button class="nav-btn" @click="onPlayVideo"><cust-icon-font size="16"
                     type="icon-foldervideo" /></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="2" v-if="!isDirectorySelected && isSingleItem && isSingleAudio" style="margin-left: 4px">
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
               <a-tooltip v-if="selectedItem.IsPlay != 'Y'">
                 <a-button class="nav-btn" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
                   @click="onPlayAudio"></a-button>
@@ -298,13 +298,21 @@ const onContinueAudio = () => {
 </script>
 
 <style scoped>
+/* 按钮之间统一 8px 间距。
+   原来是靠 24 栅格 span=2 撑开的，间距会随容器宽度变化（400px 时只有 1px 左右），
+   现在按钮列固定 32px（与 .nav-btn 同宽），真正的间距交给 gap：8px */
+.ops-row {
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
 .nav-btn {
-  width: 28px;
-  height: 26px;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: 8px;
 }
 
 .nav-btn:hover:not(:disabled) {
diff --git a/WebVue/src/components/basic/OperatorStationDelete.vue b/WebVue/src/components/basic/OperatorStationDelete.vue
index 44adac4..5658580 100644
--- a/WebVue/src/components/basic/OperatorStationDelete.vue
+++ b/WebVue/src/components/basic/OperatorStationDelete.vue
@@ -3,21 +3,21 @@
         <a-col flex="auto">
             <a-row>
                 <a-col flex="300px">
-                    <a-row justify="start">
-                        <a-col :span="3" style="margin-left: 8px">
+                    <a-row justify="start" class="ops-row">
+                        <a-col flex="28px" style="margin-left: 8px">
                             <a-tooltip title="还原">
                                 <a-button class="nav-btn" :icon="h(UndoOutlined)" style="color:green;"
                                     :disabled="!hasSelection" @click="$emit('restore', selectedItems)"></a-button>
                             </a-tooltip>
                         </a-col>
-                        <a-col :span="3">
+                        <a-col flex="28px">
                             <a-tooltip title="下载">
                                 <a-button class="nav-btn" :icon="h(DownloadOutlined)"
                                     :disabled="!hasSelection || isDirectorySelected || !isSingleItem"
                                     @click="onDownload"></a-button>
                             </a-tooltip>
                         </a-col>
-                        <a-col :span="3" v-if="hasSelection">
+                        <a-col flex="28px" v-if="hasSelection">
                             <a-tooltip title="删除">
                                 <a-popconfirm title="确定是否删除?" ok-text="是" cancel-text="否"
                                     @confirm="$emit('delete', selectedItems)">
@@ -25,13 +25,13 @@
                                         :disabled="!canCreate"></a-button></a-popconfirm>
                             </a-tooltip>
                         </a-col>
-                        <a-col :span="3" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
+                        <a-col flex="28px" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
                             <a-tooltip>
                                 <a-button class="nav-btn" @click="onPlayVideo"><cust-icon-font size="16"
                                         type="icon-foldervideo" /></a-button>
                             </a-tooltip>
                         </a-col>
-                        <a-col :span="3" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
+                        <a-col flex="28px" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
                             <a-tooltip v-if="selectedItem.IsPlay != 'Y'">
                                 <a-button class="nav-btn" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
                                     @click="onPlayAudio"></a-button>
@@ -184,6 +184,14 @@ const onContinueAudio = () => {
 </script>
 
 <style scoped>
+/* 按钮之间统一 8px 间距。
+   原来是靠 24 栅格 span=3 撑开的，间距会随容器宽度变化，
+   现在按钮列固定 28px（与 .nav-btn 同宽），真正的间距交给 gap */
+.ops-row {
+    gap: 8px;
+    flex-wrap: nowrap;
+}
+
 .nav-btn {
     width: 28px;
     height: 26px;
diff --git a/WebVue/src/components/basic/OperatorStationFamily.vue b/WebVue/src/components/basic/OperatorStationFamily.vue
index 3f46236..a24cecd 100644
--- a/WebVue/src/components/basic/OperatorStationFamily.vue
+++ b/WebVue/src/components/basic/OperatorStationFamily.vue
@@ -3,33 +3,33 @@
     <a-col flex="auto">
       <a-row>
         <a-col flex="300px">
-          <a-row justify="start">
-            <a-col :span="3" style="margin-left: 8px">
+          <a-row justify="start" class="ops-row">
+            <a-col flex="32px" style="margin-left: 8px">
               <a-tooltip title="新建文件夹">
                 <a-button class="nav-btn" v-if="canCreate" :icon="h(FolderAddOutlined)" :disabled="isDirectoryTop"
                   @click="$emit('create-folder')"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="3" v-if="!isDirectorySelected && isSingleItem">
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem">
               <a-tooltip title="下载">
                 <a-button class="nav-btn" :icon="h(DownloadOutlined)"
                   :disabled="!hasSelection || isDirectorySelected || !isSingleItem" @click="onDownload"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="3" v-if="hasSelection">
+            <a-col flex="32px" v-if="hasSelection">
               <a-tooltip title="删除">
                 <a-popconfirm title="确定是否删除?" ok-text="是" cancel-text="否" @confirm="$emit('delete', selectedItems)">
                   <a-button class="nav-btn" :icon="h(DeleteOutlined)" style="color:red;"></a-button>
                 </a-popconfirm>
               </a-tooltip>
             </a-col>
-            <a-col :span="3" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleVideo">
               <a-tooltip >
                 <a-button class="nav-btn" @click="onPlayVideo"><cust-icon-font size="16"
                     type="icon-foldervideo" /></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="3" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
+            <a-col flex="32px" v-if="!isDirectorySelected && isSingleItem && isSingleAudio">
               <a-tooltip v-if="selectedItem.IsPlay != 'Y'">
                 <a-button class="nav-btn" :icon="h(PlayCircleOutlined, { style: { color: 'red' } })"
                   @click="onPlayAudio"></a-button>
@@ -42,7 +42,7 @@
                   @click="onContinueAudio"></a-button>
               </a-tooltip>
             </a-col>
-            <a-col :span="3" v-if="isDirectorySelected">
+            <a-col flex="32px" v-if="isDirectorySelected">
               <a-tooltip :title="favorite">
                 <a-button class="nav-btn" :icon="h(ShareAltOutlined)"
                   @click="$emit('set-share-folder')"></a-button>
@@ -211,6 +211,14 @@ const onContinueAudio = () => {
 </script>
 
 <style scoped>
+/* 按钮之间统一 8px 间距。
+   原来是靠 24 栅格 span=3 撑开的，间距会随容器宽度变化，
+   现在按钮列固定 32px，真正的间距交给 gap */
+.ops-row {
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
 .operator-station {
   display: flex;
   align-items: center;
diff --git a/WebVue/src/components/basic/Toolbar.vue b/WebVue/src/components/basic/Toolbar.vue
index d0b030b..5669fc2 100644
--- a/WebVue/src/components/basic/Toolbar.vue
+++ b/WebVue/src/components/basic/Toolbar.vue
@@ -109,7 +109,7 @@
             >
             </a-input-search>
             <a-button size="small" type="default"  @click="viewMode = 'list'" style="height: 32px;">
-              <cust-icon-font  size="16" type="icon-gongcheng" />
+              <cust-icon-font  size="32" type="icon-gongcheng" />
             </a-button>
           </div>
         </a-col> </a-row
@@ -133,7 +133,7 @@
           margin-right: 20px;
           display: flex;
           justify-content: center;
-          gap: 4px;
+          gap: 8px;
         "
       >
         <a-button size="small" type="default" @click="viewMode = 'search'">
@@ -156,7 +156,7 @@
           margin-right: 20px;
           display: flex;
           justify-content: center;
-          gap: 4px;
+          gap: 8px;
         "
       >
         <a-button
@@ -263,11 +263,11 @@ const onRefresh = () => {
 <style lang="less">
 .nav-btn {
   width: 36px;
-  height: 32px;
+  height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: 8px;
 }
 
 .nav-btn:hover:not(:disabled) {