style(编辑器): 调整提及样式颜色和背景以适配深色主题

统一编辑器与消息组件中的提及样式，使用主题变量并增加内边距

src/components/editor/TiptapEditor.vue

@@ -1058,10 +1058,10 @@ html[theme-mode='dark'] {
   
   /* 提及样式 */
   .mention {
-    color: #0366d6;
-    background-color: rgba(3, 102, 214, 0.1);
+    color: #fff;
+    background-color: var(--im-primary-color);
     border-radius: 2px;
-    padding: 0 2px;
+    padding: 0 5px;
   }
   
   /* 引用卡片样式 */

src/components/talk/message/TextMessage.vue

@@ -17,7 +17,7 @@ let textContent = props.extra?.content || ''
 textContent = textReplaceLink(textContent)
 
 if (props.data.talk_type == 2) {
-  textContent = textReplaceMention(textContent, float==='right'?'#fff':'#462AA0')
+  textContent = textReplaceMention(textContent, float==='right'?'#462AA0':'#fff',float==='right'?'#fff':'#462AA0')
 }
 
 textContent = textReplaceEmoji(textContent)

src/utils/strings.js

@@ -42,9 +42,9 @@ export function textReplaceLink(text, color = '#409eff') {
  * @param {String} text 文本
  * @param {String} color 超链接颜色
  */
-export function textReplaceMention(text, color = '#2196F3') {
+export function textReplaceMention(text, color = '#2196F3',bg) {
   return text.replace(new RegExp(/@\S+/, 'g'), ($0, $1) => {
-    return `<span style="color:${color};">${$0}</span>`
+    return `<span style="color:${color};background:${bg};border-radius:2px;padding:0 5px">${$0}</span>`
   })
 }