feat:优化@用户弹窗效果

dist/index.html

@@ -85,8 +85,8 @@ void main()
         value:
           "## edswgdfgdfgdfg\n**dfgdfgdfg**\n_ergdfgdfg_\n> ergergdfg\n```\nwefgdfsfdgdf\n```\n- efwefsdfsdf\n\n\nsdgfdfgdfgdfg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg",
         value:
-          "![file](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg '附件')\n[file](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)",
-        // value: "[](http://www.baidu.com)",
+          "![file](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg '附件')\n[](https://ask.csdn.net/questions/7483791)",
+        value: "当前问题已结题，不再开放新的回答。",
         disabled: false,
         themeOptions: {
           dark: false,
@@ -158,11 +158,10 @@ void main()
           const newLinks = val.map(item => {
             item.csdn = true;
             item.title =
-              "接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题接口返回的标题";
-            item.img =
-              "https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg";
+              "指定的可执行文件cmd.exe未能运行，某某函数不正确-后端-CSDN问答";
+            item.img = "https://g.csdnimg.cn/static/logo/favicon32.ico";
             item.desc =
-              "接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述接口返回的描述";
+              "CSDN问答为您找到指定的可执行文件cmd.exe未能运行，某某函数不正确相关问题答案，如果想了解更多关于指定的可执行文件cmd.exe未能运行，某某函数不正确 asp.net、c# 技术问题等相关问答，请访问CSDN问答。";
             return item;
           });
           setTimeout(() => {
@@ -214,7 +213,6 @@ void main()
         //   );
         // }
       });
-
       // ee.focus();
       document.querySelector("#a").onclick = function() {
         // ee.disable();

src/App.vue

@@ -405,10 +405,10 @@ export default {
           const title = getLinkTitle(linkEl);
           linkEl.innerHTML = `
           <span class="md_link_title">${title || item.title}</span>
+              <span class="md_link_desc">${item.desc}</span>
           <span class="md_flex_card">
             <img class="md_link_img" src="${item.img}" />
             <span class="flex-1">
-              <span class="md_link_desc">${item.desc}</span>
               <span class="md_link_url">${item.url}</span>
             </span>
           </span>

src/assets/style/card.less

@@ -6,7 +6,7 @@
   border: 1px solid var(--md-editor-border-color);
   background: #f5f7fa;
   transition: border 0.3s;
-  max-width: 600px;
+  max-width: 640px;
   @media (any-hover: hover) {
     &:hover {
       border: 1px solid var(--md-editor-border-color-active);
@@ -16,8 +16,9 @@
     color: var(--md-editor-text-color-active);
   }
   .md_link_img {
-    height: 64px;
-    margin-right: 16px;
+    height: 20px;
+    margin-right: 12px;
+    border-radius: 2px;
   }
   .md_link_title {
     font-size: 16px;
@@ -40,7 +41,7 @@
     -webkit-box-orient: vertical;
   }
   .md_link_url {
-    font-size: 12px;
+    font-size: 13px;
     color: var(--md-editor-border-color-active);
     overflow: hidden;
     display: -webkit-box;

src/assets/style/global.less

@@ -56,7 +56,6 @@ textarea {
   opacity: 0;
 }
 
-
 .md_flex_card {
   display: flex;
   justify-content: space-between;
@@ -65,3 +64,8 @@ textarea {
     flex: 1;
   }
 }
+
+.md_call_user {
+  color: var(--md-editor-border-color-active);
+  cursor: pointer;
+}

src/assets/style/variable.less

@@ -10,4 +10,5 @@
   --md-editor-helpdoc-color: #666666;
   --md-editor-code-bg-color: #f3f4f5;
   --md-editor-fullScrren-zIndex: 2000;
+  --md-editor-disabled-opacity: 0.5;
 }

src/components/content/components/user-select.vue

@@ -8,6 +8,7 @@
         @click="selectUser(item)"
         v-for="(item, index) in list"
         :key="index"
+        :id="userItemId(index)"
         :class="[{ active: isActive(index) }]"
       >
         <img class="md_select_user_avatar" :src="item.avatar" />
@@ -79,6 +80,9 @@ export default {
     },
     isActive(index) {
       return index === this.activeUserIndex;
+    },
+    userItemId(index) {
+      return "md_user_id_" + index;
     }
   }
 };
@@ -115,6 +119,7 @@ export default {
     scrollbar-width: none;
     margin: 0 !important;
     list-style: none !important;
+    scroll-behavior: smooth;
     &::-webkit-scrollbar {
       display: none;
     }

src/components/content/md-textarea.vue

@@ -9,8 +9,8 @@
       @blur="setFocus(false)"
       @paste="pasteFile"
       @keydown.stop.50="handleCallUser"
-      @keydown.stop.up.prevent="changeActiveUserIndex('up')"
-      @keydown.stop.down.prevent="changeActiveUserIndex('down')"
+      @keydown.stop.up="changeActiveUserIndex($event, 'up')"
+      @keydown.stop.down="changeActiveUserIndex($event, 'down')"
       @keydown.enter="handleEnter"
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
@@ -20,6 +20,7 @@
       :maxlength="maxLength"
       :rows="rows"
       :disabled="disabled"
+      :class="{ disabled }"
       :style="{
         height: editorHeight,
         overflow: editorOverFlow,
@@ -160,7 +161,7 @@ export default {
           this.resetPreviewMinHeight();
         } else {
           setTimeout(() => {
-            // this.showSelectUser = false;
+            this.showSelectUser = false;
           }, 200);
         }
       }
@@ -217,19 +218,32 @@ export default {
     }
   },
   methods: {
-    changeActiveUserIndex(type) {
+    changeActiveUserIndex(event, type) {
       if (this.showSelectUser) {
+        event.preventDefault();
         const max = this.userList.length;
         if (type === "down") {
           this.activeUserIndex++;
           if (this.activeUserIndex >= max) {
             this.activeUserIndex = 0;
           }
+          const index = this.activeUserIndex;
+          if (index % 3 === 0) {
+            document
+              .getElementById("md_user_id_" + this.activeUserIndex)
+              .parentNode.scrollTo(0, 56 * index);
+            // .scrollIntoView({ behavior: "smooth" });
+          }
         } else {
           this.activeUserIndex--;
           if (this.activeUserIndex < 0) {
             this.activeUserIndex = max - 1;
           }
+          const index = this.activeUserIndex;
+          document
+            .getElementById("md_user_id_" + this.activeUserIndex)
+            .parentNode.scrollTo(0, 56 * index);
+          // .scrollIntoView({ behavior: "smooth" });
         }
       }
     },
@@ -248,8 +262,8 @@ export default {
         keyWord: ""
       };
     },
-    input() {
-      if (this.showSelectUser) this.handleQueryUser();
+    input(e) {
+      if (this.showSelectUser) this.handleQueryUser(e);
       this.$emit("update:textLength", this.textContent.length);
       this.emitText();
     },
@@ -383,6 +397,9 @@ export default {
     &::placeholder {
       color: var(--md-editor-text-color);
     }
+    &.disabled {
+      opacity: var(--md-editor-disabled-opacity);
+    }
     // &:disabled {
     //   background: var(--md-editor-content-bg-color-disabled);
     // }

src/components/content/mixins/render-mixins.js

@@ -67,6 +67,11 @@ export default {
           }
           out += "/>";
           return out;
+        },
+        text(text) {
+          const newText = text.replace(/(@.+? )/g, `<span class="md_call_user">$1</span>`);
+
+          return newText;
         }
       };
       marked.use({ renderer });

src/components/content/mixins/select-user-mixins.js

@@ -16,19 +16,20 @@ export default {
       this.$nextTick(() => {
         const textEl = document.getElementById(this.id);
         textEl.setSelectionRange(
-          cursorPosition + username.length,
-          cursorPosition + username.length
+          cursorPosition + username.length - queryInfo.keyWord.length,
+          cursorPosition + username.length - queryInfo.keyWord.length
         );
         textEl.focus();
       });
     },
-    handleQueryUser() {
+    handleQueryUser(e) {
       const endPosition = getPosition(this.id);
       const startPosition = this.queryInfo.startPosition;
       const keyWord = this.textContent.slice(startPosition, endPosition);
       this.queryInfo.endPosition = endPosition;
-
-      if (endPosition < startPosition || keyWord.slice(-1) === " ") {
+      console.log(e, e.data);
+      if (endPosition < startPosition || (e.returnValue && e.data === " ")) {
+        // if (endPosition < startPosition || keyWord.slice(-1) === " ") {
         this.showSelectUser = false;
         return;
       }
@@ -72,8 +73,12 @@ export default {
       this.$nextTick(() => {
         hideEl.scrollTop = scrollTop;
         const pEl = document.getElementById("call_position");
+        const frameWidth = textEl.parentNode.offsetWidth;
         this.selectUserPosition = {
-          left: pEl.offsetLeft,
+          left:
+            pEl.offsetLeft < frameWidth * (2 / 3)
+              ? pEl.offsetLeft
+              : pEl.offsetLeft - 200,
           top: pEl.offsetTop - textEl.scrollTop
           // left: pEl.getBoundingClientRect().left,
           // top: pEl.getBoundingClientRect().top
@@ -83,6 +88,10 @@ export default {
         this.queryInfo.startPosition = getPosition(this.id) + 1;
         this.queryInfo.endPosition = getPosition(this.id) + 1;
         this.$emit("queryUserList", this.queryInfo.keyWord);
+        this.$nextTick(() => {
+          const list = textEl.parentNode.querySelector(".md_select_user");
+          if (list) list.scrollTo(0, 0);
+        });
       });
     }
   }

src/components/header/md-header.vue

 <template>
   <div :class="['md_header', { active: isFocus }]">
-    <div v-if="!disabled" class="header_tabs">
+    <div :class="['header_tabs', { disabled }]">
       <div
         :class="['tab_item', { active: canPreview && !showPreview }]"
         @click="setShowPreview(false)"
@@ -17,7 +17,7 @@
         <span>预览</span>
       </div>
     </div>
-    <div class="header_tools" v-if="!disabled && !showPreview">
+    <div :class="['header_tools', { disabled }]" v-if="!showPreview">
       <tool-button
         :ref="item.name"
         :ulNum.sync="ulNum"
@@ -393,6 +393,10 @@ export default {
     font-size: 14px;
     // padding-bottom: 10px;
     box-sizing: border-box;
+    &.disabled {
+      pointer-events: none;
+      opacity: var(--md-editor-disabled-opacity);
+    }
     .tab_item {
       color: var(--md-editor-text-color);
       cursor: pointer;
@@ -446,6 +450,10 @@ export default {
     align-items: center;
     // padding-bottom: 10px;
     box-sizing: border-box;
+    &.disabled {
+      pointer-events: none;
+      opacity: var(--md-editor-disabled-opacity);
+    }
   }
 }
 </style>

src/main.js

@@ -144,20 +144,30 @@ function initMdEditor(obj) {
         {
           id: 4,
           name: "王一博",
+          url: "https://weibo.com/u/5492443184",
           avatar:
             "https://img2.baidu.com/it/u=298051053,3773223854&fm=26&fmt=auto&gp=0.jpg"
         },
         {
           id: 5,
           name: "王俊凯",
+          url: "https://weibo.com/tfwangjunkai",
           avatar:
             "https://img1.baidu.com/it/u=2378425879,2273515018&fm=26&fmt=auto&gp=0.jpg"
         },
         {
           id: 6,
           name: "易烊千玺",
+          url: "https://weibo.com/tfyiyangqianxi",
           avatar:
             "https://img0.baidu.com/it/u=2227200088,1939721201&fm=26&fmt=auto&gp=0.jpg"
+        },
+        {
+          id: 7,
+          name: "白敬亭",
+          url: "https://weibo.com/u/2112496475",
+          avatar:
+            "https://img1.baidu.com/it/u=3265411836,2089649447&fm=11&fmt=auto&gp=0.jpg"
         }
       ];