From 08ae3cfad8d6f9c3dd7177deb34fac82e3a685b7 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Sat, 9 Sep 2023 16:11:00 +0800 Subject: [PATCH] pref: style --- src/components/quill-editor/QuillEditor.vue | 30 ++++++++++++- src/components/quill-editor/modules.ts | 4 +- src/types/custom-types.d.ts | 14 ------ src/types/quill-image-uploader.d.ts | 1 - .../content/aside/components/AsideActive.vue | 5 +-- .../Home/content/aside/components/Topic.vue | 6 +-- .../topic/content/components/Content.vue | 45 ++++++++++++++----- 7 files changed, 71 insertions(+), 34 deletions(-) delete mode 100644 src/types/custom-types.d.ts delete mode 100644 src/types/quill-image-uploader.d.ts diff --git a/src/components/quill-editor/QuillEditor.vue b/src/components/quill-editor/QuillEditor.vue index dfdd03a1..197bef92 100644 --- a/src/components/quill-editor/QuillEditor.vue +++ b/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; } diff --git a/src/components/quill-editor/modules.ts b/src/components/quill-editor/modules.ts index e564bd25..453b3e39 100644 --- a/src/components/quill-editor/modules.ts +++ b/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, }, }, ] diff --git a/src/types/custom-types.d.ts b/src/types/custom-types.d.ts deleted file mode 100644 index 804f585b..00000000 --- a/src/types/custom-types.d.ts +++ /dev/null @@ -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[] - } -} diff --git a/src/types/quill-image-uploader.d.ts b/src/types/quill-image-uploader.d.ts deleted file mode 100644 index 3949b3e7..00000000 --- a/src/types/quill-image-uploader.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'quill-image-uploader' {} diff --git a/src/views/Home/content/aside/components/AsideActive.vue b/src/views/Home/content/aside/components/AsideActive.vue index f48431cd..dad27dc9 100644 --- a/src/views/Home/content/aside/components/AsideActive.vue +++ b/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); - background-color: var(--kungalgame-trans-blue-1); + transition: color 0.2s; + color: var(--kungalgame-blue-4); cursor: pointer; } } diff --git a/src/views/Home/content/aside/components/Topic.vue b/src/views/Home/content/aside/components/Topic.vue index 64a0d20b..50319560 100644 --- a/src/views/Home/content/aside/components/Topic.vue +++ b/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() -const navNewTopic = ref() +const navHotTopic = ref() +const navNewTopic = ref() onMounted(async () => { const responseHotData = await getHomeNavHotTopicApi() diff --git a/src/views/topic/content/components/Content.vue b/src/views/topic/content/components/Content.vue index 03dd117f..3b073ebd 100644 --- a/src/views/topic/content/components/Content.vue +++ b/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; + } + } + } } /* 适配手机端 */