From 027db7c0ece6d62833867e30e16165057c9b7b53 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Sun, 2 Mar 2025 19:00:09 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=B7=BB=E5=8A=A0=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/Api/DialogController.php |  38 ++
 resources/assets/js/components/SearchBox.vue  | 347 ++++++++++++++++++
 resources/assets/js/pages/manage.vue          |   5 +
 .../assets/js/pages/manage/dashboard.vue      |  12 +-
 resources/assets/sass/components/_.scss       |   1 +
 .../assets/sass/components/search-box.scss    | 255 +++++++++++++
 resources/assets/sass/dark.scss               |  22 ++
 .../assets/sass/pages/page-dashboard.scss     |  41 ++-
 8 files changed, 716 insertions(+), 5 deletions(-)
 create mode 100755 resources/assets/js/components/SearchBox.vue
 create mode 100755 resources/assets/sass/components/search-box.scss

diff --git a/app/Http/Controllers/Api/DialogController.php b/app/Http/Controllers/Api/DialogController.php
index 507592480..942fe6b01 100755
--- a/app/Http/Controllers/Api/DialogController.php
+++ b/app/Http/Controllers/Api/DialogController.php
@@ -712,6 +712,44 @@ class DialogController extends AbstractController
         return Base::retSuccess('success', compact('data'));
     }
 
+    /**
+     * @api {get} api/dialog/msg/esearch          14. 搜索消息
+     *
+     * @apiDescription 需要token身份
+     * @apiVersion 1.0.0
+     * @apiGroup dialog
+     * @apiName msg__esearch
+     *
+     * @apiParam {String} key                   搜索关键词
+     * @apiParam {Number} [pagesize]            每页显示数量，默认:20，最大:50
+     *
+     * @apiSuccess {Number} ret     返回状态码（1正确、0错误）
+     * @apiSuccess {String} msg     返回信息（错误描述）
+     * @apiSuccess {Object} data    返回数据
+     */
+    public function msg__esearch()
+    {
+        $user = User::auth();
+        //
+        $key = trim(Request::input('key'));
+        $list = [];
+        //
+        $es = new ElasticSearch(ElasticSearch::DUM);
+        $searchResults = $es->searchDialogsByUserAndKeyword($user->userid, $key, Base::getPaginate(50, 20));
+        if ($searchResults) {
+            foreach ($searchResults as $item) {
+                if ($dialog = WebSocketDialog::find($item['id'])) {
+                    $dialog = array_merge($dialog->toArray(), $item);
+                    $list[] = WebSocketDialog::synthesizeData($dialog, $user->userid);
+                }
+            }
+        }
+        //
+        return Base::retSuccess('success', [
+            'data' => $list,
+        ]);
+    }
+
     /**
      * @api {get} api/dialog/msg/one          15. 获取单条消息
      *
diff --git a/resources/assets/js/components/SearchBox.vue b/resources/assets/js/components/SearchBox.vue
new file mode 100755
index 000000000..d02bda9dc
--- /dev/null
+++ b/resources/assets/js/components/SearchBox.vue
@@ -0,0 +1,347 @@
+<template>
+    <Modal
+        v-model="showModal"
+        class-name="common-search-box-modal"
+        :closable="!isFullscreen"
+        :fullscreen="isFullscreen"
+        :mask-closable="false"
+        :footer-hide="true"
+        width="640">
+
+        <div class="search-header">
+            <div class="search-input">
+                <div class="search-pre">
+                    <Loading v-if="loadIng > 0"/>
+                    <Icon v-else type="ios-search" />
+                </div>
+                <Input ref="searchKey" v-model="searchKey" :placeholder="$L('请输入关键字')"/>
+            </div>
+            <i class="taskfont search-close" @click="onHide">&#xe6e5;</i>
+        </div>
+
+        <div class="search-body">
+            <template v-if="listLength === 0">
+                <div v-if="loadIng > 0 || !searchKey.trim()" class="search-empty">
+                    <i class="taskfont">&#xe60b;</i>
+                    <span>{{ $L(loadIng > 0 ? '正在拼命搜索...' : '请输入关键字搜索') }}</span>
+                </div>
+                <div v-else class="search-empty">
+                    <i class="taskfont">&#xe60b;</i>
+                    <span class="empty-label">{{ $L('暂无相关结果') }}</span>
+                    <span>{{ $L('未搜到跟「(*)」相关的结果', searchKey) }}</span>
+                </div>
+            </template>
+            <div v-else class="search-list">
+                <ul v-for="(items, type) in list" :key="type">
+                    <li class="item-label">{{typeLabel(type)}}</li>
+                    <li v-for="item in items.slice(0, 10)" :key="item.id" @click="onClick(item)">
+                        <div class="item-icon">
+                            <EAvatar v-if="item.icon[0]==='avatar'" class="img-avatar" :src="item.icon[1]" :size="38"/>
+                            <i v-else-if="item.icon[0]==='department'" class="taskfont icon-avatar department">&#xe75c;</i>
+                            <i v-else-if="item.icon[0]==='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
+                            <i v-else-if="item.icon[0]==='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
+                            <UserAvatarTip v-else-if="item.icon[0]==='user'" :userid="item.icon[1]" :size="38"/>
+                            <Icon v-else-if="item.icon[0]==='people'" class="icon-avatar" type="ios-people" />
+                            <Icon v-else class="icon-avatar" type="md-person" />
+                        </div>
+                        <div class="item-content">
+                            <div class="item-title">{{item.title}}</div>
+                            <div class="item-desc">
+                                <span
+                                    class="desc-tag no-dark-content"
+                                    v-if="item.tags"
+                                    v-for="tag in item.tags"
+                                    :style="tag.style">{{tag.name}}</span>
+                                <span class="desc-text" v-html="item.desc"></span>
+                            </div>
+                        </div>
+                        <div v-if="item.action" class="item-action" :title="item.action">{{$A.timeFormat(item.action)}}</div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+    </Modal>
+</template>
+
+<script>
+import {mapState} from "vuex";
+import UserAvatarTip from "./UserAvatar/tip.vue";
+import emitter from "../store/events";
+
+export default {
+    name: 'SearchBox',
+    components: {UserAvatarTip},
+    props: {
+        //
+    },
+
+    data() {
+        return {
+            loadIng: 0,
+            searchKey: '',
+            searchResults: [],
+
+            showModal: false,
+        }
+    },
+
+    mounted() {
+        emitter.on('openSearch', this.onShow);
+    },
+
+    beforeDestroy() {
+        emitter.off('openSearch', this.onShow);
+    },
+
+    watch: {
+        searchKey: {
+            handler: function () {
+                if (!this.searchKey.trim()) {
+                    return;
+                }
+                if (this.searchTimer) {
+                    clearTimeout(this.searchTimer)
+                    this.searchTimer = null;
+                    this.loadIng--;
+                }
+                this.loadIng++;
+                this.searchTimer = setTimeout(() => {
+                    if (this.searchKey.trim()) {
+                        this.onSearch()
+                    }
+                    this.searchTimer = null;
+                    this.loadIng--;
+                }, 500)
+            },
+            immediate: true
+        }
+    },
+
+    computed: {
+        ...mapState([
+            'themeName',
+        ]),
+
+        list({searchKey, searchResults}) {
+            const items = searchResults.filter(item => item.key === searchKey)
+            const groups = {}
+            items.forEach(item => {
+                if (!groups[item.type]) {
+                    groups[item.type] = []
+                }
+                groups[item.type].push(item)
+            })
+            return groups
+        },
+
+        listLength({searchKey, searchResults}) {
+            const items = searchResults.filter(item => item.key === searchKey)
+            return items.length
+        },
+
+        isFullscreen({windowWidth}) {
+            return windowWidth < 576
+        },
+    },
+
+    methods: {
+        typeLabel(type) {
+            switch (type) {
+                case 'task':
+                    return this.$L('任务')
+                case 'message':
+                    return this.$L('消息')
+                case 'contact':
+                    return this.$L('联系人')
+                case 'file':
+                    return this.$L('文件')
+                case 'project':
+                    return this.$L('项目')
+            }
+            return type;
+        },
+
+        within24Hours(date) {
+            return ($A.dayjs(date).unix() - $A.dayjs().unix()) < 86400
+        },
+
+        showProfessionDesc(dialog_user) {
+            if (dialog_user && dialog_user.profession) {
+                return `[${dialog_user.profession}]`
+            }
+            return ''
+        },
+
+        onClick(item) {
+            console.log(item);
+        },
+
+        onShow() {
+            this.showModal = true
+            this.$nextTick(() => {
+                this.$refs.searchKey?.focus()
+            })
+        },
+
+        onHide() {
+            this.showModal = false
+        },
+
+        onSearch() {
+            this.searchTask(this.searchKey)
+            this.searchMessage(this.searchKey)
+            this.searchContact(this.searchKey)
+            // todo searchFile、searchProject
+        },
+
+        searchTask(key) {
+            this.loadIng++;
+            this.$store.dispatch("call", {
+                url: 'project/task/lists',
+                data: {
+                    keys: {name: key},
+                    archived: 'all',
+                    pagesize: 10,
+                },
+            }).then(({data}) => {
+                const items = data.data.map(item => {
+                    const tags = [];
+                    if (item.complete_at) {
+                        tags.push({
+                            name: this.$L('已完成'),
+                            style: 'background-color:#666;color:#ddd',
+                        })
+                    } else if (item.overdue) {
+                        tags.push({
+                            name: this.$L('超期'),
+                            style: 'background-color:red;color:#ddd',
+                        })
+                    } else if (this.within24Hours(item.end_at)) {
+                        tags.push({
+                            name: this.$L('即将到期'),
+                            style: 'background-color:orange;color:#ddd',
+                        })
+                    }
+                    return {
+                        key,
+                        type: 'task',
+                        icon: ['task', null],
+                        tags,
+
+                        id: item.id,
+                        title: item.name,
+                        desc: item.desc,
+                        action: item.end_at,
+
+                        rawData: item,
+                    };
+                });
+                items.forEach(item => {
+                    const index = this.searchResults.findIndex(it => it.id === item.id && it.type === 'task')
+                    if (index > -1) {
+                        this.searchResults.splice(index, 1, item)
+                    } else {
+                        this.searchResults.push(item)
+                    }
+                })
+            }).finally(_ => {
+                this.loadIng--;
+            })
+        },
+
+        searchMessage(key) {
+            this.loadIng++;
+            this.$store.dispatch("call", {
+                url: 'dialog/msg/esearch',
+                data: {
+                    key,
+                    pagesize: 10,
+                },
+            }).then(({data}) => {
+                const items = data.data.map(item => {
+                    let icon = 'person';
+                    let ival = null;
+                    if (item.type == 'group') {
+                        if (item.avatar) {
+                            icon = 'avatar';
+                            ival = item.avatar;
+                        } else if (item.group_type == 'department') {
+                            icon = 'department';
+                        } else if (item.group_type == 'project') {
+                            icon = 'project';
+                        } else if (['task', 'okr'].includes(item.group_type)) {
+                            icon = 'task';
+                        } else {
+                            icon = 'people';
+                        }
+                    } else if (item.dialog_user) {
+                        icon = 'user';
+                        ival = item.dialog_user.userid
+                    }
+                    return {
+                        key,
+                        type: 'message',
+                        icon: [icon, ival],
+                        tags: [],
+
+                        id: item.id,
+                        title: item.name,
+                        desc: $A.getMsgSimpleDesc(item.last_msg) || this.showProfessionDesc(item.dialog_user),
+                        action: item.last_at,
+
+                        rawData: item,
+                    };
+                })
+                items.forEach(item => {
+                    const index = this.searchResults.findIndex(it => it.id === item.id && it.type === 'task')
+                    if (index > -1) {
+                        this.searchResults.splice(index, 1, item)
+                    } else {
+                        this.searchResults.push(item)
+                    }
+                })
+            }).finally(_ => {
+                this.loadIng--;
+            })
+        },
+
+        searchContact(key) {
+            this.loadIng++;
+            this.$store.dispatch("call", {
+                url: 'users/search',
+                data: {
+                    keys: {key},
+                    pagesize: 10,
+                },
+            }).then(({data}) => {
+                const items = data.map(item => {
+                    return {
+                        key,
+                        type: 'contact',
+                        icon: ['user', item.userid],
+                        tags: [],
+
+                        id: item.userid,
+                        title: item.nickname,
+                        desc: this.showProfessionDesc(item),
+                        action: item.line_at,
+
+                        rawData: item,
+                    };
+                })
+                items.forEach(item => {
+                    const index = this.searchResults.findIndex(it => it.id === item.id && it.type === 'contact')
+                    if (index > -1) {
+                        this.searchResults.splice(index, 1, item)
+                    } else {
+                        this.searchResults.push(item)
+                    }
+                })
+            }).finally(_ => {
+                this.loadIng--;
+            })
+        },
+    }
+};
+</script>
diff --git a/resources/assets/js/pages/manage.vue b/resources/assets/js/pages/manage.vue
index 1f8c26f68..ea7c50e9d 100644
--- a/resources/assets/js/pages/manage.vue
+++ b/resources/assets/js/pages/manage.vue
@@ -286,6 +286,9 @@
         <!--聊天窗口（移动端）-->
         <DialogModal ref="dialogModal"/>
 
+        <!--搜索框-->
+        <SearchBox ref="searchBox"/>
+
         <!--工作报告-->
         <DrawerOverlay
             v-model="workReportShow"
@@ -367,9 +370,11 @@ import ImgUpload from "../components/ImgUpload.vue";
 import ApproveDetails from "./manage/approve/details.vue";
 import notificationKoro from "notification-koro1";
 import emitter from "../store/events";
+import SearchBox from "../components/SearchBox.vue";
 
 export default {
     components: {
+        SearchBox,
         ApproveDetails,
         ImgUpload,
         UserSelect,
diff --git a/resources/assets/js/pages/manage/dashboard.vue b/resources/assets/js/pages/manage/dashboard.vue
index 3ed78e506..cf38ef591 100644
--- a/resources/assets/js/pages/manage/dashboard.vue
+++ b/resources/assets/js/pages/manage/dashboard.vue
@@ -5,7 +5,12 @@
             <span @click="goForward({name: 'manage-setting-license'})">{{warningMsg}}</span>
         </Alert>
         <div class="dashboard-wrapper" :style="wrapperStyle">
-            <div class="dashboard-hello">{{dashboardHello}}</div>
+            <div class="dashboard-hello">
+                <h2>{{dashboardHello}}</h2>
+                <div class="dashboard-search" @click="openSearch">
+                    <i class="taskfont">&#xe6f8;</i>
+                </div>
+            </div>
             <div v-if="systemConfig.timezoneDifference" class="dashboard-time">
                 <span>{{$L('服务器时间')}}:</span>
                 <span>{{$A.daytz().format('YYYY-MM-DD HH:mm:ss')}}</span>
@@ -101,6 +106,7 @@
 <script>
 import {mapGetters, mapState} from "vuex";
 import TaskMenu from "./components/TaskMenu";
+import emitter from "../../store/events";
 
 const hiddenCaches = []
 export default {
@@ -248,6 +254,10 @@ export default {
             $A.IDBSave("dashboardHiddenColumns", this.hiddenColumns)
         },
 
+        openSearch() {
+            emitter.emit('openSearch', null);
+        },
+
         openTask(task) {
             this.$store.dispatch("openTask", task)
         },
diff --git a/resources/assets/sass/components/_.scss b/resources/assets/sass/components/_.scss
index d933698af..d7b1883b1 100644
--- a/resources/assets/sass/components/_.scss
+++ b/resources/assets/sass/components/_.scss
@@ -7,6 +7,7 @@
 @import "loading";
 @import "mobile";
 @import "scroller-y";
+@import "search-box";
 @import "t-editor";
 @import "quick-edit";
 @import "tag-input";
diff --git a/resources/assets/sass/components/search-box.scss b/resources/assets/sass/components/search-box.scss
new file mode 100755
index 000000000..73d461e91
--- /dev/null
+++ b/resources/assets/sass/components/search-box.scss
@@ -0,0 +1,255 @@
+.common-search-box-modal {
+    .ivu-modal {
+        max-width: 90%;
+
+        &.ivu-modal-fullscreen {
+            max-width: none;
+
+            .ivu-modal-content {
+                margin-top: 46px;
+                border-top-left-radius: 18px !important;
+                border-top-right-radius: 18px !important;
+
+                .ivu-modal-body {
+
+                    .search-body {
+
+                        .search-list {
+                            max-height: none;
+                        }
+                    }
+                }
+            }
+        }
+
+        .ivu-modal-content {
+            overflow: hidden;
+
+            .ivu-modal-close {
+                display: none;
+            }
+
+            .ivu-modal-body {
+                padding: 0 !important;
+                display: flex;
+                flex-direction: column;
+
+                .search-header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 6px;
+
+                    .search-input {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        background-color: transparent;
+                        border-radius: 6px;
+                        height: 40px;
+                        padding: 8px 6px;
+
+                        .search-pre {
+                            flex-shrink: 0;
+                            width: 32px;
+                            height: 32px;
+                            margin-right: -6px;
+                            font-size: 18px;
+                            color: #808695;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+
+                            .common-loading {
+                                width: 14px;
+                                height: 14px;
+                                margin: 0;
+                            }
+                        }
+
+                        .ivu-input {
+                            border-color: transparent;
+                            background-color: transparent;
+
+                            &:hover,
+                            &:focus {
+                                box-shadow: none;
+                            }
+                        }
+                    }
+
+                    .search-close {
+                        font-size: 16px;
+                        color: #808695;
+                        cursor: pointer;
+                        padding: 0 16px;
+
+                        &:hover {
+                            color: #303133;
+                        }
+                    }
+                }
+
+                .search-body {
+                    flex: 1;
+                    height: 0;
+                    display: flex;
+                    flex-direction: column;
+                    border-top: 1px solid #f0f0f0;
+
+                    .search-empty {
+                        height: 248px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        flex-direction: column;
+                        padding: 24px;
+
+                        > i {
+                            font-size: 44px;
+                            padding: 4px 0;
+                        }
+
+                        > span {
+                            opacity: 0.8;
+                            line-height: 1.6;
+                            max-width: 300px;
+                            word-break: break-all;
+                            text-align: center;
+
+                            &.empty-label {
+                                font-size: 15px;
+                                font-weight: 500;
+                                opacity: 1;
+                            }
+                        }
+                    }
+
+                    .search-list {
+                        overflow: auto;
+                        max-height: calc(100vh - 255px);
+
+                        @media (max-height: 900px) {
+                            max-height: calc(100vh - 125px);
+                        }
+
+                        > ul {
+                            padding: 10px;
+
+                            > li {
+                                list-style: none;
+                                padding: 12px;
+                                display: flex;
+                                align-items: flex-start;
+                                border-radius: 8px;
+                                cursor: pointer;
+
+                                &:hover {
+                                    background-color: #eeeeee;
+                                }
+
+                                &.item-label {
+                                    padding: 8px 10px;
+                                    position: sticky;
+                                    top: 0;
+                                    z-index: 9;
+                                    border-radius: 0;
+                                    cursor: default;
+                                    background-color: #ffffff !important;
+                                }
+
+                                .img-avatar,
+                                .user-avatar,
+                                .icon-avatar {
+                                    width: 38px;
+                                    height: 38px;
+                                    margin: 2px;
+                                    flex-grow: 0;
+                                    flex-shrink: 0;
+                                }
+
+                                .img-avatar {
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+
+                                    > img {
+                                        width: 100%;
+                                        height: 100%;
+                                    }
+                                }
+
+                                .icon-avatar {
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+                                    border-radius: 50%;
+                                    font-size: 22px;
+                                    background-color: #61B2F9;
+                                    color: #ffffff;
+
+                                    &.department {
+                                        background-color: #5BC7B0;
+                                    }
+
+                                    &.project {
+                                        background-color: #6E99EB;
+                                    }
+
+                                    &.task {
+                                        background-color: #9B96DF;
+                                    }
+                                }
+
+                                .item-content {
+                                    flex: 1;
+                                    width: 0;
+                                    margin-left: 12px;
+
+                                    .item-title,
+                                    .item-desc {
+                                        word-break: break-all;
+                                        text-overflow: ellipsis;
+                                        overflow: hidden;
+                                        display: -webkit-box;
+                                        -webkit-line-clamp: 2;
+                                        -webkit-box-orient: vertical;
+                                    }
+
+                                    .item-title {
+                                        font-weight: 500;
+                                    }
+
+                                    .item-desc {
+                                        padding-top: 2px;
+                                        max-width: 100%;
+
+                                        .desc-tag {
+                                            padding: 2px 4px;
+                                            border-radius: 4px;
+                                            font-size: 12px;
+                                            margin-right: 6px;
+                                            background-color: #f0f0f0;
+                                            color: #303133;
+                                            word-break: keep-all;
+                                        }
+
+                                        .desc-text {
+                                            opacity: 0.8;
+                                        }
+                                    }
+                                }
+
+                                .item-action {
+                                    margin-left: 12px;
+                                    opacity: 0.8;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/resources/assets/sass/dark.scss b/resources/assets/sass/dark.scss
index 869d67360..27a9e6468 100644
--- a/resources/assets/sass/dark.scss
+++ b/resources/assets/sass/dark.scss
@@ -628,6 +628,28 @@ body.dark-mode-reverse {
         }
     }
 
+    .common-search-box-modal {
+        .ivu-modal {
+            .ivu-modal-content {
+                .ivu-modal-body {
+                    .search-body {
+                        border-top-color: #e9e9e9;
+
+                        .search-list {
+                            ul {
+                                > li {
+                                    .icon-avatar {
+                                        color: #1c1917;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     .task-add {
         .task-add-template {
             > li {
diff --git a/resources/assets/sass/pages/page-dashboard.scss b/resources/assets/sass/pages/page-dashboard.scss
index a39091dd2..85340fb05 100644
--- a/resources/assets/sass/pages/page-dashboard.scss
+++ b/resources/assets/sass/pages/page-dashboard.scss
@@ -40,10 +40,43 @@
         }
         .dashboard-hello {
             padding: 6% 12px 0;
-            color: $primary-title-color;
-            font-size: 24px;
-            font-weight: 600;
-            word-wrap: break-word;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            > h2 {
+                flex: 3;
+                color: $primary-title-color;
+                font-size: 24px;
+                font-weight: 600;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                word-wrap: break-word;
+            }
+            .dashboard-search {
+                flex: 1;
+                display: flex;
+                max-width: 180px;
+                height: 34px;
+                align-items: center;
+                justify-content: center;
+                padding: 0 2px 0 24px;
+                border-radius: 8px;
+                color: #515a6e;
+                background-color: #fff;
+                background-image: none;
+                cursor: pointer;
+                opacity: 0.8;
+                transition: opacity 0.3s;
+                flex: none;
+                > i {
+                    font-size: 20px;
+                    cursor: pointer;
+                }
+                &:hover {
+                    opacity: 1;
+                }
+            }
         }
         .dashboard-time,
         .dashboard-desc {