pref: style

src/components/quill-editor/QuillEditor.vue

@@ -261,13 +261,39 @@ const handleTextChange = async () => {
   .mention {
     height: 24px;
     width: 65px;
-    border-radius: 6px;
-    background-color: var(--kungalgame-trans-blue-1);
     padding: 3px 0;
     margin-right: 2px;
     user-select: all;
   }
 
+  .mention[data-denotation-char='@'] {
+    cursor: pointer;
+    background-color: var(--kungalgame-pink-4);
+    color: var(--kungalgame-white);
+    padding: 5px;
+    & > span {
+      font-style: oblique;
+      & > span {
+        font-weight: bold;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .mention[data-denotation-char='#'] {
+    cursor: pointer;
+    background-color: var(--kungalgame-purple-4);
+    color: var(--kungalgame-white);
+    padding: 5px;
+    & > span {
+      font-style: oblique;
+      & > span {
+        font-weight: bold;
+        margin-right: 5px;
+      }
+    }
+  }
+
   .mention > span {
     margin: 0 3px;
   }

src/components/quill-editor/modules.ts

@@ -99,6 +99,8 @@ export const modules = [
         const formData = new FormData()
         formData.append('file', imageBlob)
 
+        /* TODO: 这里要改成后端接口 */
+
         fetch('127.0.0.1:10008/upload', { method: 'POST', body: formData })
           .then((response) => response.text())
           .then((result) => {
@@ -110,7 +112,7 @@ export const modules = [
           })
       },
       // 临时开启一下控制台调试
-      debug: true,
+      debug: false,
     },
   },
 ]

src/types/custom-types.d.ts

@@ -1,14 +0,0 @@
-import { SlateDescendant, SlateElement, SlateText } from '@wangeditor/editor'
-
-declare module '@wangeditor/editor' {
-  // 扩展 Text
-  interface SlateText {
-    text: string
-  }
-
-  // 扩展 Element
-  interface SlateElement {
-    type: string
-    children: SlateDescendant[]
-  }
-}

src/types/quill-image-uploader.d.ts

@@ -1 +0,0 @@
-declare module 'quill-image-uploader' {}

src/views/Home/content/aside/components/AsideActive.vue

@@ -93,11 +93,10 @@ const props = defineProps(['isActive'])
     height: 100%;
     width: 100%;
     color: var(--kungalgame-font-color-2);
-    border-radius: 5px;
     /* 设置六个功能（模式、排行、背景等）的 hover */
     &:hover {
-      color: var(--kungalgame-font-color-3);
+      transition: color 0.2s;
-      background-color: var(--kungalgame-trans-blue-1);
+      color: var(--kungalgame-blue-4);
       cursor: pointer;
     }
   }

src/views/Home/content/aside/components/Topic.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 
-import { HotTopic, NewTopic } from '@/api/home/types/home'
+import { HomeHotTopic, HomeNewTopic } from '@/api/home/types/home'
 import { getHomeNavHotTopicApi, getHomeNavNewTopicApi } from '@/api/home/index'
 
 // 导入设置面板 store
@@ -14,8 +14,8 @@ const settingsStore = storeToRefs(useKUNGalgameSettingsStore())
 // 导入 i18n 格式化时间的函数
 import { formatTimeDifference } from '@/utils/formatTime'
 
-const navHotTopic = ref<HotTopic[]>()
+const navHotTopic = ref<HomeHotTopic[]>()
-const navNewTopic = ref<NewTopic[]>()
+const navNewTopic = ref<HomeNewTopic[]>()
 
 onMounted(async () => {
   const responseHotData = await getHomeNavHotTopicApi()

src/views/topic/content/components/Content.vue

@@ -25,14 +25,12 @@ defineProps<{
   padding: 17px;
   color: var(--kungalgame-font-color-3);
   border: none !important;
-}
-
-.kungalgame-topic-content {
-  border-radius: 5px;
   padding: 0 10px;
   margin-top: 20px;
   overflow-x: auto;
+}
 
+.kungalgame-topic-content {
   /* 下面的代码调整富文本区域的格式 */
   :deep(*) {
     max-width: 100%;
@@ -47,10 +45,7 @@ defineProps<{
     }
   }
 
-  :deep(span) {
+  /* 代码块 */
-    text-shadow: none;
-  }
-
   :deep(pre) {
     font-family: monospace;
     display: flex;
@@ -60,8 +55,6 @@ defineProps<{
       justify-content: end;
       content: '< code >';
       color: var(--kungalgame-font-color-0);
-      background-color: var(--kungalgame-trans-white-5);
-      border: 1px solid var(--kungalgame-blue-1);
       padding: 0 5px;
       border-radius: 3px;
       font-size: 17px;
@@ -70,9 +63,41 @@ defineProps<{
     }
   }
 
+  /* 引用 */
   :deep(blockquote) {
     padding: 7px 10px;
   }
+
+  /* mention */
+  :deep(.mention[data-denotation-char='@']) {
+    margin-right: 2px;
+    cursor: pointer;
+    background-color: var(--kungalgame-pink-4);
+    color: var(--kungalgame-white);
+    padding: 5px;
+    & > span {
+      font-style: oblique;
+      & > span {
+        font-weight: bold;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  :deep(.mention[data-denotation-char='#']) {
+    margin-right: 2px;
+    cursor: pointer;
+    background-color: var(--kungalgame-purple-4);
+    color: var(--kungalgame-white);
+    padding: 5px;
+    & > span {
+      font-style: oblique;
+      & > span {
+        font-weight: bold;
+        margin-right: 5px;
+      }
+    }
+  }
 }
 
 /* 适配手机端 */