diff --git a/open-isle-cli/package-lock.json b/open-isle-cli/package-lock.json
index e2e900c42..53f445be1 100644
--- a/open-isle-cli/package-lock.json
+++ b/open-isle-cli/package-lock.json
@@ -12,7 +12,7 @@
         "echarts": "^5.6.0",
         "ldrs": "^1.1.7",
         "markdown-it": "^14.1.0",
-        "vditor": "^3.8.7",
+        "vditor": "^3.11.1",
         "vue": "^3.2.13",
         "vue-easy-lightbox": "^1.19.0",
         "vue-echarts": "^7.0.3",
@@ -11330,9 +11330,9 @@
       }
     },
     "node_modules/vditor": {
-      "version": "3.8.7",
-      "resolved": "https://registry.npmjs.org/vditor/-/vditor-3.8.7.tgz",
-      "integrity": "sha512-7loYmcj1TCkJV86qwstxzAy33GweFKdJnpiSzGGPqUzDaOcUAiaiFAjIQjxwJ3/sx7pNZf1NWLhXKabXEN7xzQ==",
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/vditor/-/vditor-3.11.1.tgz",
+      "integrity": "sha512-7rjNSXYVyZG0mVZpUG2tfxwnoNtkcRCnwdSju+Zvpjf/r72iQa6kLpeThFMIKPuQ5CRnQQv6gnR3eNU6UGbC2Q==",
       "license": "MIT",
       "dependencies": {
         "diff-match-patch": "^1.0.5"
diff --git a/open-isle-cli/package.json b/open-isle-cli/package.json
index 979bcfd71..ed41c14b4 100644
--- a/open-isle-cli/package.json
+++ b/open-isle-cli/package.json
@@ -9,15 +9,15 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "echarts": "^5.6.0",
     "ldrs": "^1.1.7",
     "markdown-it": "^14.1.0",
-    "vditor": "^3.8.7",
+    "vditor": "^3.11.1",
     "vue": "^3.2.13",
-    "vue-router": "^4.5.1",
-    "vue-toastification": "^2.0.0-rc.5",
     "vue-easy-lightbox": "^1.19.0",
-    "echarts": "^5.6.0",
-    "vue-echarts": "^7.0.3"
+    "vue-echarts": "^7.0.3",
+    "vue-router": "^4.5.1",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
diff --git a/open-isle-cli/src/utils/vditor.js b/open-isle-cli/src/utils/vditor.js
index 3b1a5b755..5592d017b 100644
--- a/open-isle-cli/src/utils/vditor.js
+++ b/open-isle-cli/src/utils/vditor.js
@@ -43,14 +43,18 @@ export function createVditor(editorId, options = {}) {
     theme: getEditorTheme(),
     preview: Object.assign({ theme: { current: getPreviewTheme() } }, preview),
     hint: {
-      delay: 200,
-      at: async (value) => {
-        const list = await fetchMentions(value)
-        return list.map(u => ({
-          value: u.username,
-          html: `<span>@${u.username}</span>`
-        }))
-      }
+      extend: [
+        {
+          key: '@',
+          hint: async (key) => {
+            const list = await fetchMentions(key)
+            return list.map(u => ({
+              value: `@[${u.username}]`,
+              html: `<img src="${u.avatar}" /> @${u.username}`
+            }))
+          },
+        },
+      ],
     },
     cdn: 'https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/vditor',
     toolbar: [
diff --git a/src/main/java/com/openisle/controller/SearchController.java b/src/main/java/com/openisle/controller/SearchController.java
index dbc2d16f9..067789d83 100644
--- a/src/main/java/com/openisle/controller/SearchController.java
+++ b/src/main/java/com/openisle/controller/SearchController.java
@@ -68,6 +68,7 @@ public class SearchController {
         UserDto dto = new UserDto();
         dto.setId(user.getId());
         dto.setUsername(user.getUsername());
+        dto.setAvatar(user.getAvatar());
         return dto;
     }
 
@@ -82,6 +83,7 @@ public class SearchController {
     private static class UserDto {
         private Long id;
         private String username;
+        private String avatar;
     }
 
     @Data