From b4f2da66be2245edbc38c765b4cc78db983edd55 Mon Sep 17 00:00:00 2001
From: Pang <aipaw@live.cn>
Date: Sun, 10 Mar 2024 11:03:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=81=B6=E5=B0=94=E6=97=A0=E6=95=88=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/UserSelect.vue |  7 +++--
 resources/assets/js/pages/manage.vue          | 11 ++++---
 .../pages/manage/components/DialogWrapper.vue | 13 ++++-----
 .../pages/manage/components/ProjectList.vue   | 11 ++++---
 .../assets/js/pages/manage/messenger.vue      | 28 +++++++++---------
 .../assets/sass/components/user-select.scss   | 29 ++++++++++++++-----
 .../sass/pages/components/dialog-wrapper.scss | 10 +++++--
 .../sass/pages/components/project-list.scss   | 12 ++++++--
 resources/assets/sass/pages/page-manage.scss  | 29 +++++++++++--------
 .../assets/sass/pages/page-messenger.scss     | 12 ++++++--
 10 files changed, 98 insertions(+), 64 deletions(-)

diff --git a/resources/assets/js/components/UserSelect.vue b/resources/assets/js/components/UserSelect.vue
index 96b1af92a..d5356fddc 100755
--- a/resources/assets/js/components/UserSelect.vue
+++ b/resources/assets/js/components/UserSelect.vue
@@ -52,12 +52,13 @@
                         </li>
                     </ul>
                 </Scrollbar>
-                <Input class="search-input" v-model="searchKey" :placeholder="localPlaceholder" clearable>
-                    <div class="search-pre" slot="prefix">
+                <div class="search-input">
+                    <div class="search-pre">
                         <Loading v-if="loadIng > 0"/>
                         <Icon v-else type="ios-search" />
                     </div>
-                </Input>
+                    <Input v-model="searchKey" :placeholder="localPlaceholder" clearable/>
+                </div>
             </div>
 
             <!-- 切换 -->
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index d765790a7..41de22fe8 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -173,12 +173,11 @@
             <div
                 v-if="(projectSearchShow || projectTotal > 20) && windowHeight > 600"
                 class="manage-project-search">
-                <Input v-model="projectKeyValue" :placeholder="$L(`共${projectTotal || cacheProjects.length}个项目，搜索...`)" clearable>
-                    <div class="search-pre" slot="prefix">
-                        <Loading v-if="projectKeyLoading > 0"/>
-                        <Icon v-else type="ios-search" />
-                    </div>
-                </Input>
+                <div class="search-pre">
+                    <Loading v-if="projectKeyLoading > 0"/>
+                    <Icon v-else type="ios-search" />
+                </div>
+                <Input v-model="projectKeyValue" :placeholder="$L(`共${projectTotal || cacheProjects.length}个项目，搜索...`)" clearable/>
             </div>
             <ButtonGroup class="manage-box-new-group">
                 <Button class="manage-box-new" type="primary" icon="md-add" @click="onAddShow">{{$L('新建项目')}}</Button>
diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue
index bc74d8c30..329fa1863 100644
--- a/resources/assets/js/pages/manage/components/DialogWrapper.vue
+++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue
@@ -122,13 +122,12 @@
                             <i class="taskfont" @click="onSearchSwitch('next')">&#xe705;</i>
                         </div>
                         <div class="search-input">
-                            <Input ref="searchInput" v-model="searchKey" :placeholder="$L('搜索消息')" @on-keyup="onSearchKeyup" clearable>
-                                <div class="search-pre" slot="prefix">
-                                    <Loading v-if="searchLoad > 0"/>
-                                    <Icon v-else type="ios-search" />
-                                </div>
-                            </Input>
-                            <div v-if="searchLoad === 0 && searchResult.length > 0" class="search-total" slot="append">{{searchLocation}}/{{searchResult.length}}</div>
+                            <div class="search-pre">
+                                <Loading v-if="searchLoad > 0"/>
+                                <Icon v-else type="ios-search" />
+                            </div>
+                            <Input ref="searchInput" v-model="searchKey" :placeholder="$L('搜索消息')" @on-keyup="onSearchKeyup" clearable/>
+                            <div v-if="searchLoad === 0 && searchResult.length > 0" class="search-total">{{searchLocation}}/{{searchResult.length}}</div>
                         </div>
                         <div class="search-cancel" @click="onSearchKeyup(null)">{{$L('取消')}}</div>
                     </div>
diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue
index 641fc2afe..74ada67bb 100644
--- a/resources/assets/js/pages/manage/components/ProjectList.vue
+++ b/resources/assets/js/pages/manage/components/ProjectList.vue
@@ -3,12 +3,11 @@
         <PageTitle :title="$L('项目')"/>
         <div class="list-search">
             <div class="search-wrapper">
-                <Input v-model="projectKeyValue" :placeholder="$L(loadProjects > 0 ? '更新中...' : '搜索')" clearable>
-                    <div class="search-pre" slot="prefix">
-                        <Loading v-if="loadProjects > 0"/>
-                        <Icon v-else type="ios-search" />
-                    </div>
-                </Input>
+                <div class="search-pre">
+                    <Loading v-if="loadProjects > 0"/>
+                    <Icon v-else type="ios-search" />
+                </div>
+                <Input v-model="projectKeyValue" :placeholder="$L(loadProjects > 0 ? '更新中...' : '搜索')" clearable/>
             </div>
         </div>
         <ul @touchstart="onTouchStart" @scroll="onScroll">
diff --git a/resources/assets/js/pages/manage/messenger.vue b/resources/assets/js/pages/manage/messenger.vue
index 354c03f6d..cf6f6781d 100644
--- a/resources/assets/js/pages/manage/messenger.vue
+++ b/resources/assets/js/pages/manage/messenger.vue
@@ -5,30 +5,24 @@
             <div class="messenger-select">
                 <div class="messenger-search">
                     <div class="search-wrapper">
+                        <div class="search-pre">
+                            <Loading v-if="searchLoading"/>
+                            <Icon v-else type="ios-search" />
+                        </div>
                         <Input
                             v-if="tabActive==='dialog'"
                             v-model="dialogSearchKey"
                             ref="searchInput"
                             :placeholder="$L(loadDialogs > 0 ? '更新中...' : '搜索')"
                             @on-keydown="onKeydown"
-                            clearable>
-                            <div class="search-pre" slot="prefix">
-                                <Loading v-if="dialogLoading"/>
-                                <Icon v-else type="ios-search" />
-                            </div>
-                        </Input>
+                            clearable/>
                         <Input
                             v-else
                             v-model="contactsKey"
                             ref="contactInput"
                             :placeholder="$L('搜索')"
                             @on-keydown="onKeydown"
-                            clearable>
-                            <div class="search-pre" slot="prefix">
-                                <Loading v-if="contactsLoad"/>
-                                <Icon v-else type="ios-search" />
-                            </div>
-                        </Input>
+                            clearable/>
                     </div>
                 </div>
                 <div v-if="tabActive==='dialog' && !dialogSearchKey" class="messenger-nav">
@@ -496,9 +490,13 @@ export default {
             }
         },
 
-        dialogLoading({loadDialogs, dialogSearchLoad}) {
-            return loadDialogs > 0 || dialogSearchLoad > 0
-        }
+        searchLoading({tabActive, loadDialogs, dialogSearchLoad, contactsLoad}) {
+            if (tabActive==='dialog') {
+                return loadDialogs > 0 || dialogSearchLoad > 0
+            } else {
+                return contactsLoad > 0
+            }
+        },
     },
 
     watch: {
diff --git a/resources/assets/sass/components/user-select.scss b/resources/assets/sass/components/user-select.scss
index 1c6f604c7..4d63e706c 100755
--- a/resources/assets/sass/components/user-select.scss
+++ b/resources/assets/sass/components/user-select.scss
@@ -152,15 +152,21 @@
                 }
 
                 .search-input {
-                    .ivu-input {
-                        height: 36px;
-                        border-color: #f4f5f7;
-                        background-color: #f4f5f7;
-                    }
+                    flex: 1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: #f4f5f7;
+                    border-radius: 6px;
+                    height: 36px;
+                    padding: 0 6px;
 
                     .search-pre {
-                        width: 100%;
-                        height: 100%;
+                        width: 32px;
+                        height: 32px;
+                        margin-right: -6px;
+                        font-size: 16px;
+                        color: #808695;
                         display: flex;
                         align-items: center;
                         justify-content: center;
@@ -171,6 +177,15 @@
                             margin: 0;
                         }
                     }
+
+                    .ivu-input {
+                        border-color: transparent;
+                        background-color: transparent;
+                        &:hover,
+                        &:focus {
+                            box-shadow: none;
+                        }
+                    }
                 }
             }
 
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index 32c0efea3..c0a96a5c6 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -390,6 +390,7 @@
                 }
                 .search-input {
                     flex: 1;
+                    padding: 0 6px;
                     margin-left: 12px;
                     border-radius: 12px;
                     background-color: #F7F7F7;
@@ -397,13 +398,18 @@
                     position: relative;
                     display: flex;
                     align-items: center;
+                    justify-content: center;
 
                     .search-pre {
-                        width: 100%;
-                        height: 100%;
+                        width: 32px;
+                        height: 32px;
+                        margin-right: -6px;
+                        font-size: 16px;
+                        color: #808695;
                         display: flex;
                         align-items: center;
                         justify-content: center;
+
                         .common-loading {
                             width: 14px;
                             height: 14px;
diff --git a/resources/assets/sass/pages/components/project-list.scss b/resources/assets/sass/pages/components/project-list.scss
index 8a0a476ea..10c5c84f0 100644
--- a/resources/assets/sass/pages/components/project-list.scss
+++ b/resources/assets/sass/pages/components/project-list.scss
@@ -18,14 +18,20 @@
         .search-wrapper {
             flex: 1;
             background-color: #ffffff;
-            padding: 0 8px;
+            padding: 0 6px;
             margin: 0 4px;
             border-radius: 12px;
             overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
             .search-pre {
-                width: 100%;
-                height: 100%;
+                width: 32px;
+                height: 32px;
+                margin-right: -6px;
+                font-size: 16px;
+                color: #808695;
                 display: flex;
                 align-items: center;
                 justify-content: center;
diff --git a/resources/assets/sass/pages/page-manage.scss b/resources/assets/sass/pages/page-manage.scss
index ec2e592e8..e1dd07edb 100644
--- a/resources/assets/sass/pages/page-manage.scss
+++ b/resources/assets/sass/pages/page-manage.scss
@@ -216,23 +216,20 @@
         }
         .manage-project-search {
             width: 80%;
-            padding: 0 3px;
+            padding: 0 6px;
             margin: 8px 0 -2px;
             border-radius: 12px;
             background-color: #ffffff;
             overflow: hidden;
-            .ivu-input {
-                padding-left: 30px;
-                border-color: transparent;
-                background-color: transparent;
-                &:hover,
-                &:focus {
-                    box-shadow: none;
-                }
-            }
+            display: flex;
+            align-items: center;
+            justify-content: center;
             .search-pre {
-                width: 100%;
-                height: 100%;
+                width: 32px;
+                height: 32px;
+                margin-right: -6px;
+                font-size: 16px;
+                color: #808695;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -242,6 +239,14 @@
                     margin: 0;
                 }
             }
+            .ivu-input {
+                border-color: transparent;
+                background-color: transparent;
+                &:hover,
+                &:focus {
+                    box-shadow: none;
+                }
+            }
         }
         .manage-box-new-group {
             width: 80%;
diff --git a/resources/assets/sass/pages/page-messenger.scss b/resources/assets/sass/pages/page-messenger.scss
index 63230fc1d..3442c532d 100644
--- a/resources/assets/sass/pages/page-messenger.scss
+++ b/resources/assets/sass/pages/page-messenger.scss
@@ -33,13 +33,19 @@
                 .search-wrapper {
                     flex: 1;
                     background-color: #F7F7F7;
-                    padding: 0 8px;
+                    padding: 0 6px;
                     margin: 0 4px;
                     border-radius: 12px;
                     overflow: hidden;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                     .search-pre {
-                        width: 100%;
-                        height: 100%;
+                        width: 32px;
+                        height: 32px;
+                        margin-right: -6px;
+                        font-size: 16px;
+                        color: #808695;
                         display: flex;
                         align-items: center;
                         justify-content: center;