perf: 移动端长按菜单

resources/assets/js/pages/manage.vue

@@ -194,7 +194,7 @@
                     :visible="operateVisible"
                     @on-clickoutside="operateVisible = false"
                     transfer>
-                    <div :style="{height: operateStyles.height}"></div>
+                    <div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
                     <DropdownMenu slot="list">
                         <DropdownItem @click.native="handleTopClick">
                             {{ $L(operateItem.top_at ? '取消置顶' : '置顶该项目') }}

resources/assets/js/pages/manage/components/ProjectList.vue

@@ -11,7 +11,7 @@
                 </Input>
             </div>
         </div>
-        <ul>
+        <ul ref="projectWrapper" @scroll="operateVisible = false">
             <template v-if="projectLists.length === 0">
                 <li v-if="projectKeyLoading > 0" class="loading"><Loading/></li>
                 <li v-else class="nothing">
@@ -21,12 +21,15 @@
             <li
                 v-for="(item, key) in projectLists"
                 :key="key"
+                :data-id="item.id"
+                v-longpress="handleLongpress"
                 @click="toggleRoute('project', {projectId: item.id})">
                 <div class="project-item">
                     <div class="item-left">
                         <div class="project-h1">
-                            <span>{{item.name}}</span>
+                            <div class="project-name">{{item.name}}</div>
-                            <em v-if="item.task_my_num > 0">{{item.task_my_num}}</em>
+                            <div v-if="item.top_at" class="icon-top"></div>
+                            <div v-if="item.task_my_num > 0" class="num">{{item.task_my_num}}</div>
                         </div>
                         <div class="project-h2">
                             {{item.desc}}
@@ -48,18 +51,39 @@
                 </div>
             </li>
         </ul>
+        <div class="operate-position" :style="operateStyles">
+            <Dropdown
+                trigger="custom"
+                placement="top"
+                :visible="operateVisible"
+                @on-clickoutside="operateVisible = false"
+                transfer>
+                <div :style="{userSelect:operateVisible ? 'none' : 'auto', height: operateStyles.height}"></div>
+                <DropdownMenu slot="list">
+                    <DropdownItem @click.native="handleTopClick">
+                        {{ $L(operateItem.top_at ? '取消置顶' : '置顶该项目') }}
+                    </DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+        </div>
     </div>
 </template>
 
 <script>
 import {mapState} from "vuex";
+import longpress from "../../../directives/longpress";
 
 export default {
     name: "ProjectList",
+    directives: {longpress},
     data() {
         return {
             projectKeyValue: '',
             projectKeyLoading: 0,
+
+            operateStyles: {},
+            operateVisible: false,
+            operateItem: {},
         }
     },
 
@@ -139,7 +163,41 @@ export default {
                 title: this.$L(`${item.name} 项目进度`),
                 content,
             });
-        }
+        },
+
+        handleLongpress(touchEvent, el) {
+            const projectId = $A.getAttr(el, 'data-id')
+            const projectItem = this.projectLists.find(item => item.id == projectId)
+            if (!projectItem) {
+                return
+            }
+            const event = touchEvent.touches[0];
+            this.operateVisible = false;
+            this.operateItem = $A.isJson(projectItem) ? projectItem : {};
+            this.$nextTick(() => {
+                const projectRect = el.getBoundingClientRect();
+                const wrapRect = this.$refs.projectWrapper.getBoundingClientRect();
+                this.operateStyles = {
+                    left: `${event.clientX - wrapRect.left}px`,
+                    top: `${projectRect.top}px`,
+                    height: projectRect.height + 'px',
+                }
+                this.operateVisible = true;
+            })
+        },
+
+        handleTopClick() {
+            this.$store.dispatch("call", {
+                url: 'project/top',
+                data: {
+                    project_id: this.operateItem.id,
+                },
+            }).then(({data}) => {
+                this.$store.dispatch("saveProject", data);
+            }).catch(({msg}) => {
+                $A.modalError(msg);
+            });
+        },
     }
 }
 </script>

resources/assets/js/pages/manage/messenger.vue

@@ -547,7 +547,7 @@ export default {
             const dialogId = $A.getAttr(el, 'data-id')
             const dialogItem = this.dialogList.find(item => item.id == dialogId)
             if (dialogItem) {
-                this.handleTopOperateShow(touchEvent.touches[0], dialogItem)
+                this.handleOperateShow(touchEvent.touches[0], dialogItem)
             }
         },
 
@@ -555,10 +555,10 @@ export default {
             if (!this.$isDesktop) {
                 return
             }
-            this.handleTopOperateShow(event, dialog);
+            this.handleOperateShow(event, dialog);
         },
 
-        handleTopOperateShow(event, dialog) {
+        handleOperateShow(event, dialog) {
             this.operateVisible = false;
             this.operateItem = $A.isJson(dialog) ? dialog : {};
             this.$nextTick(() => {

resources/assets/sass/pages/components/project-list.scss

@@ -89,7 +89,7 @@
                     .project-h1 {
                         display: flex;
                         align-items: flex-start;
-                        > span {
+                        .project-name {
                             font-size: 16px;
                             line-height: 22px;
                             font-weight: 600;
@@ -100,7 +100,16 @@
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;
                         }
-                        > em {
+                        .icon-top {
+                            margin-top: 4px;
+                            margin-left: 6px;
+                            flex-shrink: 0;
+                            width: 14px;
+                            height: 14px;
+                            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCiAgICAgeT0iMHB4IgogICAgIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojOEJDRjcwO30KPC9zdHlsZT4wCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAuNyw4LjFjLTEuNS0xLjUtNC40LTQuNC00LjQtNC40Yy0xLjItMS4yLTIuNS0xLjQtMy40LTAuN2MtMC41LDAuNC0wLjcsMC45LTAuOCwxLjRjLTAuMSwwLjUtMC40LDEtMC44LDEuMwoJbC0wLjEsMC4xYy0yLDEuNS00LjMsMi44LTYuOCwzLjJDMy45LDkuMiwzLjMsOS41LDMsMTBjLTAuNiwwLjktMC40LDIuMSwwLjMsMi45bDMuNCwzLjRjMCwwLDAsMCwwLDBsLTMuMSwzLjEKCWMtMC4zLDAuMy0wLjMsMC44LDAsMS4xYzAuMSwwLjEsMC4zLDAuMiwwLjUsMC4yYzAuMiwwLDAuNC0wLjEsMC41LTAuMmwzLjEtMy4xYzAsMCwwLDAsMCwwbDIuOSwyLjljMS4zLDEuMywyLjUsMS41LDMuNCwwLjkKCWMwLjQtMC4zLDAuNy0wLjcsMC45LTEuMmMwLjYtMi4zLDEuNC00LjYsMi44LTYuNWwwLjUtMC43YzAuMy0wLjQsMC44LTAuOCwxLjMtMC44YzAuNS0wLjEsMS4xLTAuMywxLjQtMC44CglDMjEuNywxMC4yLDIxLjUsOC45LDIwLjcsOC4xeiIvPgo8L3N2Zz4K") no-repeat center center;
+                            background-size: contain;
+                        }
+                        .num {
                             margin-top: 1px;
                             margin-left: 6px;
                             flex-shrink: 0;
@@ -152,4 +161,14 @@
             }
         }
     }
+
+    .operate-position {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 1px;
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
 }