From b6aac773ea8992c315b402aca610f7fd23b57247 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 10 Oct 2024 18:05:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=89=8B=E5=8A=A8=E5=88=B7=E6=96=B0=E6=8C=89=E9=92=AE=20(#6680?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs #6203
---
 frontend/src/components/index.ts              |  2 ++
 .../src/components/table-refresh/index.vue    | 19 +++++++++++++++++++
 .../src/components/table-setting/index.vue    |  2 +-
 .../src/views/container/compose/index.vue     |  3 ++-
 .../src/views/container/container/index.vue   |  1 +
 frontend/src/views/container/image/index.vue  |  3 ++-
 .../src/views/container/network/index.vue     |  3 ++-
 frontend/src/views/container/repo/index.vue   |  3 ++-
 .../src/views/container/template/index.vue    |  3 ++-
 frontend/src/views/container/volume/index.vue |  3 ++-
 frontend/src/views/cronjob/index.vue          |  3 ++-
 .../src/views/host/firewall/forward/index.vue |  3 ++-
 frontend/src/views/host/firewall/ip/index.vue |  3 ++-
 .../src/views/host/firewall/port/index.vue    |  3 ++-
 frontend/src/views/host/ssh/log/log.vue       |  5 +++--
 frontend/src/views/log/login/index.vue        |  3 ++-
 frontend/src/views/log/operation/index.vue    |  3 ++-
 frontend/src/views/log/task/index.vue         |  3 ++-
 .../views/setting/backup-account/index.vue    |  3 ++-
 frontend/src/views/setting/snapshot/index.vue |  3 ++-
 20 files changed, 56 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/table-refresh/index.vue

diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 3128c51a5..0adf7cde3 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -6,6 +6,7 @@ import ErrPrompt from './error-prompt/index.vue';
 import OpDialog from './del-dialog/index.vue';
 import TableSearch from './table-search/index.vue';
 import TableSetting from './table-setting/index.vue';
+import TableRefresh from './table-refresh/index.vue';
 import Tooltip from '@/components/tooltip/index.vue';
 import CopyButton from '@/components/copy-button/index.vue';
 import MsgInfo from '@/components/msg-info/index.vue';
@@ -22,6 +23,7 @@ export default {
         app.component(CopyButton.name, CopyButton);
         app.component(TableSearch.name, TableSearch);
         app.component(TableSetting.name, TableSetting);
+        app.component(TableRefresh.name, TableRefresh);
         app.component(MsgInfo.name, MsgInfo);
         app.component(MainDiv.name, MainDiv);
         app.component(DrawerPro.name, DrawerPro);
diff --git a/frontend/src/components/table-refresh/index.vue b/frontend/src/components/table-refresh/index.vue
new file mode 100644
index 000000000..317462111
--- /dev/null
+++ b/frontend/src/components/table-refresh/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <el-button class="fresh-button" icon="Refresh" @click="onRefresh"></el-button>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'TableRefresh' });
+
+const emit = defineEmits(['search']);
+
+const onRefresh = () => {
+    emit('search');
+};
+</script>
+
+<style lang="scss" scoped>
+.fresh-button {
+    float: right;
+}
+</style>
diff --git a/frontend/src/components/table-setting/index.vue b/frontend/src/components/table-setting/index.vue
index 8495d11f0..c1e226cca 100644
--- a/frontend/src/components/table-setting/index.vue
+++ b/frontend/src/components/table-setting/index.vue
@@ -2,7 +2,7 @@
     <div>
         <el-popover placement="bottom-start" :width="200" trigger="click">
             <template #reference>
-                <el-button class="timer-button" icon="Refresh"></el-button>
+                <el-button class="timer-button" icon="Clock"></el-button>
             </template>
             <el-select v-model="refreshRate" @change="changeRefresh">
                 <template #prefix>{{ $t('commons.table.refreshRate') }}</template>
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 42db4c661..3d1d899b1 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -31,7 +31,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="compose-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 25e13626a..401bf4fa6 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -106,6 +106,7 @@
                     {{ $t('container.includeAppstore') }}
                 </el-checkbox>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
+                <TableRefresh @search="search()" class="mr-2.5" />
                 <TableSetting title="container-refresh" @search="refresh()" class="mr-2.5" />
                 <fu-table-column-select
                     :columns="columns"
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index 5f661ff12..b2d34f2bd 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -26,7 +26,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="image-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" :heightDiff="300">
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index 97be480c0..cdfed7e53 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -20,7 +20,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="network-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index bf6a5ed53..fdf210828 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -14,7 +14,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="repo-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index 4438d18aa..ee2a0ffe9 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -17,7 +17,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="template-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 51a21a5a3..1bae03fd3 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -20,7 +20,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="volume-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/cronjob/index.vue b/frontend/src/views/cronjob/index.vue
index 80a4678ab..d3a8ff99e 100644
--- a/frontend/src/views/cronjob/index.vue
+++ b/frontend/src/views/cronjob/index.vue
@@ -27,7 +27,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="cronjob-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/host/firewall/forward/index.vue b/frontend/src/views/host/firewall/forward/index.vue
index 296f8cca0..d95189069 100644
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@@ -28,7 +28,8 @@
                     </template>
                     <template #rightToolBar>
                         <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                        <TableSetting @search="search()" />
+                        <TableRefresh @search="search()" class="mr-2.5" />
+                        <TableSetting title="firewall-forward-refresh" @search="search()" />
                     </template>
                     <template #main>
                         <ComplexTable
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 396eaf0cb..2ca8d7d00 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -35,7 +35,8 @@
                             <el-option :label="$t('firewall.deny')" value="drop"></el-option>
                         </el-select>
                         <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                        <TableSetting @search="search()" />
+                        <TableRefresh @search="search()" class="mr-2.5" />
+                        <TableSetting title="firewall-ip-refresh" @search="search()" />
                     </template>
                     <template #main>
                         <ComplexTable
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index e65793a3d..30d8e0839 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -57,7 +57,8 @@
                             <el-option :label="$t('firewall.drop')" value="drop"></el-option>
                         </el-select>
                         <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                        <TableSetting @search="search()" />
+                        <TableRefresh @search="search()" class="mr-2.5" />
+                        <TableSetting title="firewall-port-refresh" @search="search()" />
                     </template>
                     <template #main>
                         <ComplexTable
diff --git a/frontend/src/views/host/ssh/log/log.vue b/frontend/src/views/host/ssh/log/log.vue
index 8b5c39ddf..5e673fea7 100644
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@@ -12,8 +12,9 @@
                     <el-option :label="$t('commons.status.success')" value="Success"></el-option>
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
-                <TableSetting @search="search()" class="mr-2.5" />
-                <TableSearch @search="search()" v-model:searchName="searchInfo" />
+                <TableSearch @search="search()" v-model:searchName="searchInfo" class="mr-2.5" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="ssh-log-refresh" @search="search()" />
             </template>
 
             <template #main>
diff --git a/frontend/src/views/log/login/index.vue b/frontend/src/views/log/login/index.vue
index 9cd5f1435..55612146b 100644
--- a/frontend/src/views/log/login/index.vue
+++ b/frontend/src/views/log/login/index.vue
@@ -17,7 +17,8 @@
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
                 <TableSearch @search="search()" v-model:searchName="searchIP" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="login-log-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" :heightDiff="370">
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 792a56774..805a39b39 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -32,7 +32,8 @@
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                 </el-select>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="operation-log-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" :heightDiff="370">
diff --git a/frontend/src/views/log/task/index.vue b/frontend/src/views/log/task/index.vue
index cae7031bb..5b4dc9c66 100644
--- a/frontend/src/views/log/task/index.vue
+++ b/frontend/src/views/log/task/index.vue
@@ -12,7 +12,8 @@
                     <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
                     <el-option :label="$t('logs.taskRunning')" value="Running"></el-option>
                 </el-select>
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="task-log-refresh" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search" :heightDiff="370">
diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue
index 0f9d9638f..a8240bcd5 100644
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/frontend/src/views/setting/backup-account/index.vue
@@ -8,7 +8,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="paginationConfig.name" class="mr-2.5" />
-                <TableSetting @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="backup-account-refresh" @search="search()" />
             </template>
             <template #main>
                 <el-alert type="info" :closable="false" class="common-div">
diff --git a/frontend/src/views/setting/snapshot/index.vue b/frontend/src/views/setting/snapshot/index.vue
index c533ab74c..1fcb26152 100644
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@@ -17,7 +17,8 @@
             </template>
             <template #rightToolBar>
                 <TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
-                <TableSetting ref="timerRef" @search="search()" />
+                <TableRefresh @search="search()" class="mr-2.5" />
+                <TableSetting title="snapshot-refresh" ref="timerRef" @search="search()" />
             </template>
             <template #main>
                 <ComplexTable