From 8c56ab199b1545159737feb54bbb4e8735859dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com>
Date: Thu, 5 Aug 2021 16:18:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E6=89=93=E5=8C=85?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  2 +
 src/assets/js/utils.js                        | 25 ++++++++++---
 src/assets/style/variable.less                |  1 +
 .../content/components/user-select.vue        | 19 ++++++++--
 src/components/content/md-textarea.vue        |  8 ++--
 .../content/mixins/select-user-mixins.js      | 37 +++++++++++++------
 6 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bc89509..24088ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -324,6 +324,8 @@ export default {
         }
         if (this.callUserList.length) {
           emitContent.callUserList = this.callUserList;
+        } else {
+          emitContent.callUserList = [];
         }
         emitContent.filteredTags = this.filteredTags;
 
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index bfbd0e4..c62328f 100644
--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
@@ -76,7 +76,8 @@ export function initStyle({
   contentBgColor,
   codeBgColor,
   codeTheme,
-  helpdocColor
+  helpdocColor,
+  itemActiveBgColor
 }) {
   // 夜晚模式
   if (dark) {
@@ -89,6 +90,7 @@ export function initStyle({
     codeBgColor = "#777888";
     contentBgColor = "#222226";
     helpdocColor = "#CCCCD8";
+    itemActiveBgColor = "#777888";
   }
   if (frameBgColor) {
     document.documentElement.style.setProperty(
@@ -96,6 +98,12 @@ export function initStyle({
       frameBgColor
     );
   }
+  if (itemActiveBgColor) {
+    document.documentElement.style.setProperty(
+      "--md-editor-item-active-bg-color",
+      itemActiveBgColor
+    );
+  }
   if (contentBgColor) {
     document.documentElement.style.setProperty(
       "--md-editor-content-bg-color",
@@ -143,19 +151,19 @@ export function initStyle({
   if (codeTheme) {
     switch (codeTheme) {
       case "dark":
-        import("@/assets/style/code/dark.css");
+        import("@/assets/style/code/dark.less");
         break;
       case "light":
-        import("@/assets/style/code/lightfair.css");
+        import("@/assets/style/code/lightfair.less");
         break;
       case "atom-one-dark":
-        import("@/assets/style/code/atom-one-dark.css");
+        import("@/assets/style/code/atom-one-dark.less");
         break;
       default:
         break;
     }
   } else {
-    import("@/assets/style/code/lightfair.css");
+    import("@/assets/style/code/lightfair.less");
   }
 }
 
@@ -183,6 +191,13 @@ export function checkBoswer() {
   );
   return agent !== null;
 }
+
+export function isAndroid() {
+  const agent = navigator.userAgent.match(
+    /(Android)/i
+  );
+  return agent !== null;
+}
 // 去除头部空格行
 export function removeBlankLine(val) {
   if (!val) return "";
diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less
index c12a3e5..40f8739 100644
--- a/src/assets/style/variable.less
+++ b/src/assets/style/variable.less
@@ -7,6 +7,7 @@
   --md-editor-content-bg-color: #fff;
   --md-editor-frame-bg-color-disabled: #f5f7fa;
   --md-editor-content-bg-color-disabled: #f5f7fa;
+  --md-editor-item-active-bg-color: #f5f7fa;
   --md-editor-helpdoc-color: #666666;
   --md-editor-code-bg-color: #f3f4f5;
   --md-editor-fullScrren-zIndex: 2000;
diff --git a/src/components/content/components/user-select.vue b/src/components/content/components/user-select.vue
index de4ba0e..c69275b 100644
--- a/src/components/content/components/user-select.vue
+++ b/src/components/content/components/user-select.vue
@@ -25,6 +25,7 @@
   </div>
 </template>
 <script>
+import { throttle as throttleFn } from "@/assets/js/utils";
 export default {
   props: {
     position: {
@@ -48,6 +49,8 @@ export default {
   computed: {
     list() {
       const list = this.userList;
+      console.log("list", list);
+
       if (!list.length) return [];
       return list.map((item, index) => {
         if (index === 0) {
@@ -57,6 +60,9 @@ export default {
         }
         return item;
       });
+    },
+    throttle() {
+      return throttleFn();
     }
   },
   watch: {
@@ -76,7 +82,12 @@ export default {
   },
   methods: {
     selectUser(user) {
-      this.$emit("selectUser", user);
+      console.log(this.throttle);
+
+      this.throttle(() => {
+        console.log(111);
+        this.$emit("selectUser", user);
+      }, 1000);
     },
     isActive(index) {
       return index === this.activeUserIndex;
@@ -90,7 +101,7 @@ export default {
 <style lang="less" scoped>
 .md_select_container {
   position: absolute;
-  background: #fff;
+  background: var(--md-editor-content-bg-color);
   box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
   border: 1px solid var(--md-editor-border-color);
   border-radius: 4px;
@@ -139,11 +150,11 @@ export default {
       cursor: pointer;
       @media (any-hover: hover) {
         &:hover {
-          background: #f5f7fa;
+          background: var(--md-editor-item-active-bg-color);
         }
       }
       &.active {
-        background: #f5f7fa;
+        background: var(--md-editor-item-active-bg-color);
       }
       // & + li {
       //   margin-top: 10px;
diff --git a/src/components/content/md-textarea.vue b/src/components/content/md-textarea.vue
index 3dba806..71b4871 100644
--- a/src/components/content/md-textarea.vue
+++ b/src/components/content/md-textarea.vue
@@ -5,6 +5,8 @@
       :id="id"
       @change="$emit('update:text', textContent)"
       @input="input"
+      @keydown.stop.50="handleCallUser"
+      @keydown.stop.229="handleCallUser"
       @focus="setFocus(true)"
       @blur="setFocus(false)"
       @paste="pasteFile"
@@ -53,7 +55,7 @@
 import {
   getSelectionInfo,
   getPosition,
-  preventDefault,
+  isAndroid,
   throttle as throttleFn
 } from "@/assets/js/utils";
 import selectUser from "./components/user-select";
@@ -288,8 +290,8 @@ export default {
       };
     },
     input(e) {
-      if (e.data === "@") {
-        this.createSelectUserDialog();
+      if (isAndroid() && e.data === "@") {
+        this.createSelectUserDialog("android");
       }
       if (this.showSelectUser) this.handleQueryUser(e);
       this.$emit("update:textLength", this.textContent.length);
diff --git a/src/components/content/mixins/select-user-mixins.js b/src/components/content/mixins/select-user-mixins.js
index 4be372a..9d6f1c6 100644
--- a/src/components/content/mixins/select-user-mixins.js
+++ b/src/components/content/mixins/select-user-mixins.js
@@ -5,6 +5,21 @@ export default {
       allUserList: []
     };
   },
+  mounted() {
+    setTimeout(() => {
+      const text = this.text;
+      if (/(\@\S+\s{0,1})/g.test(text)) {
+        this.$emit("queryUserList", "");
+        this.$nextTick(() => {
+          const userList = this.userList;
+          this.allUserList = userList;
+          this.$nextTick(() => {
+            this.transferMarkdown(text);
+          });
+        });
+      }
+    }, 0);
+  },
   methods: {
     handleSelectUser(user) {
       const originalText = this.textContent;
@@ -42,16 +57,12 @@ export default {
       this.queryInfo.keyWord = keyWord;
       this.$emit("queryUserList", keyWord);
     },
-    // handleCallUser(e) {
-    //   // console.log('aaa');
-    //   // console.log(e);
-    //   // alert(e.key)
-
-    //   if (e.key === "@" || (e.key === "Process" && e.code === "Digit2")) {
-    //     this.createSelectUserDialog();
-    //   }
-    // },
-    createSelectUserDialog() {
+    handleCallUser(e) {
+      if (e.key === "@" || (e.key === "Process" && e.code === "Digit2")) {
+        this.createSelectUserDialog();
+      }
+    },
+    createSelectUserDialog(type) {
       const textEl = document.getElementById(this.id);
       if (!textEl) return;
       const height = getComputedStyle(textEl).getPropertyValue("height");
@@ -95,6 +106,10 @@ export default {
         textEl.parentNode.removeChild(hideEl);
         this.queryInfo.startPosition = getPosition(this.id) + 1;
         this.queryInfo.endPosition = getPosition(this.id) + 1;
+        if (type === "android") {
+          this.queryInfo.startPosition--;
+          this.queryInfo.endPosition--;
+        }
         this.$emit("queryUserList", this.queryInfo.keyWord);
         this.$nextTick(() => {
           const userList = this.userList;
@@ -116,7 +131,7 @@ export default {
     getUserByName(name) {
       const userList = this.allUserList;
       if (!userList.length) return "";
-      return userList.find((item) => item.nickname === name);
+      return userList.find(item => item.nickname === name);
     }
   }
 };
-- 
GitLab