From c64c436b9f30fe4c8aa9dd17c6098eb2aeae7c53 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Tue, 18 Mar 2025 18:36:20 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/js/components/SearchButton.vue     | 52 +++++++++++++++++++
 .../manage/components/ComplaintManagement.vue | 18 ++++---
 .../manage/components/ProjectArchived.vue     | 19 ++++---
 .../manage/components/ProjectManagement.vue   | 19 ++++---
 .../js/pages/manage/components/ReportMy.vue   | 19 ++++---
 .../pages/manage/components/ReportReceive.vue | 19 +++----
 .../pages/manage/components/TaskArchived.vue  | 18 +++----
 .../pages/manage/components/TaskDeleted.vue   | 18 +++----
 .../manage/components/TeamManagement.vue      | 19 +++----
 resources/assets/sass/pages/common.scss       |  4 ++
 10 files changed, 125 insertions(+), 80 deletions(-)
 create mode 100644 resources/assets/js/components/SearchButton.vue

diff --git a/resources/assets/js/components/SearchButton.vue b/resources/assets/js/components/SearchButton.vue
new file mode 100644
index 000000000..023d9b8bc
--- /dev/null
+++ b/resources/assets/js/components/SearchButton.vue
@@ -0,0 +1,52 @@
+<template>
+    <div v-if="windowTouch">
+        <Button :loading="loading" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
+        <Button v-if="filtering" type="text" @click="onCancelFilter">{{$L('取消筛选')}}</Button>
+        <Button v-else :loading="loading" type="text" icon="md-refresh" @click="onRefresh">{{$L('刷新')}}</Button>
+    </div>
+    <Tooltip
+        v-else
+        theme="light"
+        :placement="placement"
+        transfer-class-name="search-button-clear"
+        transfer>
+        <Button :loading="loading" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
+        <div slot="content">
+            <Button v-if="filtering" type="text" @click="onCancelFilter">{{$L('取消筛选')}}</Button>
+            <Button v-else :loading="loading" type="text" @click="onRefresh">{{$L('刷新')}}</Button>
+        </div>
+    </Tooltip>
+</template>
+
+<script>
+
+export default {
+    name: 'SearchButton',
+    props: {
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        filtering: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String,
+            default: 'bottom'
+        }
+    },
+
+    methods: {
+        onSearch() {
+            this.$emit('search');
+        },
+        onRefresh() {
+            this.$emit('refresh');
+        },
+        onCancelFilter() {
+            this.$emit('cancelFilter');
+        }
+    }
+};
+</script>
diff --git a/resources/assets/js/pages/manage/components/ComplaintManagement.vue b/resources/assets/js/pages/manage/components/ComplaintManagement.vue
index 739439525..1b28d872b 100644
--- a/resources/assets/js/pages/manage/components/ComplaintManagement.vue
+++ b/resources/assets/js/pages/manage/components/ComplaintManagement.vue
@@ -33,14 +33,13 @@
                     </div>
                 </li>
                 <li class="search-button">
-                    <Tooltip theme="light" placement="right" transfer-class-name="search-button-clear" transfer>
-                        <Button :loading="loadIng > 0" type="primary" icon="ios-search"
-                            @click="onSearch">{{ $L('搜索') }}</Button>
-                        <div slot="content">
-                            <Button v-if="keyIs" type="text" @click="keyIs = false">{{ $L('取消筛选') }}</Button>
-                            <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{ $L('刷新') }}</Button>
-                        </div>
-                    </Tooltip>
+                    <SearchButton
+                        :loading="loadIng > 0"
+                        :filtering="keyIs"
+                        placement="right"
+                        @search="onSearch"
+                        @refresh="getLists"
+                        @cancelFilter="keyIs=false"/>
                 </li>
             </ul>
         </div>
@@ -54,8 +53,11 @@
 </template>
 
 <script>
+import SearchButton from "../../../components/SearchButton.vue";
+
 export default {
     name: "ComplaintManagement",
+    components: {SearchButton},
     data() {
         const typeList = [
             { id: 10, label: "诈骗诱导转账" },
diff --git a/resources/assets/js/pages/manage/components/ProjectArchived.vue b/resources/assets/js/pages/manage/components/ProjectArchived.vue
index 747b1a66a..01e3a4556 100644
--- a/resources/assets/js/pages/manage/components/ProjectArchived.vue
+++ b/resources/assets/js/pages/manage/components/ProjectArchived.vue
@@ -17,17 +17,13 @@
                     </div>
                 </li>
                 <li class="search-button">
-                    <Tooltip
-                        theme="light"
+                    <SearchButton
+                        :loading="loadIng > 0"
+                        :filtering="keyIs"
                         placement="right"
-                        transfer-class-name="search-button-clear"
-                        transfer>
-                        <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
-                        <div slot="content">
-                            <Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
-                            <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
-                        </div>
-                    </Tooltip>
+                        @search="onSearch"
+                        @refresh="getLists"
+                        @cancelFilter="keyIs=false"/>
                 </li>
             </ul>
         </div>
@@ -55,8 +51,11 @@
 </template>
 
 <script>
+import SearchButton from "../../../components/SearchButton.vue";
+
 export default {
     name: "ProjectArchived",
+    components: {SearchButton},
     data() {
         return {
             loadIng: 0,
diff --git a/resources/assets/js/pages/manage/components/ProjectManagement.vue b/resources/assets/js/pages/manage/components/ProjectManagement.vue
index 877cb1474..ce5dc786a 100644
--- a/resources/assets/js/pages/manage/components/ProjectManagement.vue
+++ b/resources/assets/js/pages/manage/components/ProjectManagement.vue
@@ -41,17 +41,13 @@
                     </div>
                 </li>
                 <li class="search-button">
-                    <Tooltip
-                        theme="light"
+                    <SearchButton
+                        :loading="loadIng > 0"
+                        :filtering="keyIs"
                         placement="right"
-                        transfer-class-name="search-button-clear"
-                        transfer>
-                        <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
-                        <div slot="content">
-                            <Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
-                            <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
-                        </div>
-                    </Tooltip>
+                        @search="onSearch"
+                        @refresh="getLists"
+                        @cancelFilter="keyIs=false"/>
                 </li>
             </ul>
         </div>
@@ -79,8 +75,11 @@
 </template>
 
 <script>
+import SearchButton from "../../../components/SearchButton.vue";
+
 export default {
     name: "ProjectManagement",
+    components: {SearchButton},
     data() {
         return {
             loadIng: 0,
diff --git a/resources/assets/js/pages/manage/components/ReportMy.vue b/resources/assets/js/pages/manage/components/ReportMy.vue
index b4457ca44..1daa91175 100644
--- a/resources/assets/js/pages/manage/components/ReportMy.vue
+++ b/resources/assets/js/pages/manage/components/ReportMy.vue
@@ -36,17 +36,13 @@
                         </div>
                     </li>
                     <li class="search-button">
-                        <Tooltip
-                            theme="light"
+                        <SearchButton
+                            :loading="loadIng > 0"
+                            :filtering="keyIs"
                             placement="right"
-                            transfer-class-name="search-button-clear"
-                            transfer>
-                            <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
-                            <div slot="content">
-                                <Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
-                                <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
-                            </div>
-                        </Tooltip>
+                            @search="onSearch"
+                            @refresh="getLists"
+                            @cancelFilter="keyIs=false"/>
                     </li>
                 </ul>
             </div>
@@ -79,8 +75,11 @@
 </template>
 
 <script>
+import SearchButton from "../../../components/SearchButton.vue";
+
 export default {
     name: "ReportMy",
+    components: {SearchButton},
     data() {
         return {
             loadIng: 0,
diff --git a/resources/assets/js/pages/manage/components/ReportReceive.vue b/resources/assets/js/pages/manage/components/ReportReceive.vue
index ca56f0c34..3d706e3d2 100644
--- a/resources/assets/js/pages/manage/components/ReportReceive.vue
+++ b/resources/assets/js/pages/manage/components/ReportReceive.vue
@@ -66,17 +66,13 @@
                     </div>
                 </li>
                 <li class="search-button">
-                    <Tooltip
-                        theme="light"
+                    <SearchButton
+                        :loading="loadIng > 0"
+                        :filtering="keyIs"
                         placement="right"
-                        transfer-class-name="search-button-clear"
-                        transfer>
-                        <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
-                        <div slot="content">
-                            <Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
-                            <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
-                        </div>
-                    </Tooltip>
+                        @search="onSearch"
+                        @refresh="getLists"
+                        @cancelFilter="keyIs=false"/>
                 </li>
             </ul>
         </div>
@@ -129,10 +125,11 @@
 
 <script>
 import Forwarder from "./Forwarder/index.vue";
+import SearchButton from "../../../components/SearchButton.vue";
 
 export default {
     name: "ReportReceive",
-    components: {Forwarder},
+    components: {SearchButton, Forwarder},
     data() {
         return {
             loadIng: 0,
diff --git a/resources/assets/js/pages/manage/components/TaskArchived.vue b/resources/assets/js/pages/manage/components/TaskArchived.vue
index 41764e65d..f37a7e02a 100644
--- a/resources/assets/js/pages/manage/components/TaskArchived.vue
+++ b/resources/assets/js/pages/manage/components/TaskArchived.vue
@@ -45,17 +45,13 @@
                     </div>
                 </li>
                 <li class="search-button">
-                    <Tooltip
-                        theme="light"
+                    <SearchButton
+                        :loading="loadIng > 0"
+                        :filtering="keyIs"
                         placement="right"
-                        transfer-class-name="search-button-clear"
-                        transfer>
-                        <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
-                        <div slot="content">
-                            <Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
-                            <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
-                        </div>
-                    </Tooltip>
+                        @search="onSearch"
+                        @refresh="getLists"
+                        @cancelFilter="keyIs=false"/>
                 </li>
             </ul>
         </div>
@@ -84,9 +80,11 @@
 
 <script>
 import {mapState} from "vuex";
+import SearchButton from "../../../components/SearchButton.vue";
 
 export default {
     name: "TaskArchived",
+    components: {SearchButton},
     props: {
         projectId: {
             type: Number,
diff --git a/resources/assets/js/pages/manage/components/TaskDeleted.vue b/resources/assets/js/pages/manage/components/TaskDeleted.vue
index 95bd1098e..abb82eeff 100644
--- a/resources/assets/js/pages/manage/components/TaskDeleted.vue
+++ b/resources/assets/js/pages/manage/components/TaskDeleted.vue
@@ -45,17 +45,13 @@
                     </div>
                 </li>
                 <li class="search-button">
-                    <Tooltip
-                        theme="light"
+                    <SearchButton
+                        :loading="loadIng > 0"
+                        :filtering="keyIs"
                         placement="right"
-                        transfer-class-name="search-button-clear"
-                        transfer>
-                        <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
-                        <div slot="content">
-                            <Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
-                            <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
-                        </div>
-                    </Tooltip>
+                        @search="onSearch"
+                        @refresh="getLists"
+                        @cancelFilter="keyIs=false"/>
                 </li>
             </ul>
         </div>
@@ -84,9 +80,11 @@
 
 <script>
 import {mapState} from "vuex";
+import SearchButton from "../../../components/SearchButton.vue";
 
 export default {
     name: "TaskDeleted",
+    components: {SearchButton},
     props: {
         projectId: {
             type: Number,
diff --git a/resources/assets/js/pages/manage/components/TeamManagement.vue b/resources/assets/js/pages/manage/components/TeamManagement.vue
index 0b64c3868..6cb29030b 100644
--- a/resources/assets/js/pages/manage/components/TeamManagement.vue
+++ b/resources/assets/js/pages/manage/components/TeamManagement.vue
@@ -142,17 +142,13 @@
                             </div>
                         </li>
                         <li class="search-button">
-                            <Tooltip
-                                theme="light"
+                            <SearchButton
+                                :loading="loadIng > 0"
+                                :filtering="keyIs"
                                 placement="bottom"
-                                transfer-class-name="search-button-clear"
-                                transfer>
-                                <Button :loading="loadIng > 0" type="primary" icon="ios-search" @click="onSearch">{{$L('搜索')}}</Button>
-                                <div slot="content">
-                                    <Button v-if="keyIs" type="text" @click="keyIs=false">{{$L('取消筛选')}}</Button>
-                                    <Button v-else :loading="loadIng > 0" type="text" @click="getLists">{{$L('刷新')}}</Button>
-                                </div>
-                            </Tooltip>
+                                @search="onSearch"
+                                @refresh="getLists"
+                                @cancelFilter="keyIs=false"/>
                         </li>
                     </ul>
                 </div>
@@ -369,11 +365,12 @@ import UserSelect from "../../../components/UserSelect.vue";
 import UserAvatarTip from "../../../components/UserAvatar/tip.vue";
 import ImgUpload from "../../../components/ImgUpload";
 import ResizeLine from "../../../components/ResizeLine.vue";
+import SearchButton from "../../../components/SearchButton.vue";
 import {mapState} from "vuex";
 
 export default {
     name: "TeamManagement",
-    components: {ResizeLine, UserAvatarTip, UserSelect, ImgUpload},
+    components: {SearchButton, ResizeLine, UserAvatarTip, UserSelect, ImgUpload},
     props: {
         checkinMode: {
             type: Boolean,
diff --git a/resources/assets/sass/pages/common.scss b/resources/assets/sass/pages/common.scss
index d1d65f07e..b93e0bee5 100755
--- a/resources/assets/sass/pages/common.scss
+++ b/resources/assets/sass/pages/common.scss
@@ -660,6 +660,10 @@ body {
                 > button + button {
                     margin-left: 8px;
                 }
+
+                .ivu-btn-text {
+                    box-shadow: none;
+                }
             }
         }
     }