From cd24081dff61fc6e594dfbd3ee4aa82f742b1c42 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Fri, 20 Oct 2023 19:37:49 +0800 Subject: [PATCH] mod: remove quill-mention --- package.json | 1 - pnpm-lock.yaml | 9 -- src/components/KUNGalgameSearchBox.vue | 6 +- src/components/quill-editor/modules.ts | 151 +++++++------------------ src/types/quill-mention.d.ts | 1 - src/types/topic/topic.ts | 35 ------ src/types/update-log/history.ts | 110 ------------------ src/views/edit/Edit.vue | 2 +- src/views/kungalgamer/KUNGalgamer.vue | 8 +- 9 files changed, 49 insertions(+), 274 deletions(-) delete mode 100644 src/types/quill-mention.d.ts delete mode 100644 src/types/topic/topic.ts delete mode 100644 src/types/update-log/history.ts diff --git a/package.json b/package.json index ce1419ff..2dc7319c 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "quill-blot-formatter": "^1.0.5", "quill-image-compress": "^1.2.30", "quill-magic-url": "^4.2.0", - "quill-mention": "^4.0.0", "vue": "^3.3.4", "vue-i18n": "^9.5.0", "vue-router": "^4.2.5" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2f6005a7..8f752b17 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,9 +38,6 @@ dependencies: quill-magic-url: specifier: ^4.2.0 version: 4.2.0 - quill-mention: - specifier: ^4.0.0 - version: 4.0.0 vue: specifier: ^3.3.4 version: 3.3.4 @@ -1809,12 +1806,6 @@ packages: quill-delta: 3.6.3 dev: false - /quill-mention@4.0.0: - resolution: {integrity: sha512-S7OdmQvbKg+VI7FDnY5G9SMsoe55QmYwCMxI9DjVXuWU/KcOZSj1rdtnAkoVFXPls1+7PRPNOsw69hel/38cPQ==} - dependencies: - quill: 1.3.7 - dev: false - /quill@1.3.7: resolution: {integrity: sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==} dependencies: diff --git a/src/components/KUNGalgameSearchBox.vue b/src/components/KUNGalgameSearchBox.vue index 3ecd2ae1..e67c9054 100644 --- a/src/components/KUNGalgameSearchBox.vue +++ b/src/components/KUNGalgameSearchBox.vue @@ -2,14 +2,10 @@ import { Icon } from '@iconify/vue' // 导入防抖函数 import { debounce } from '@/utils/debounce' -import { ref, computed, onBeforeMount } from 'vue' +import { ref, onBeforeMount } from 'vue' // 导入用户 store import { useKUNGalgameHomeStore } from '@/store/modules/home' import { storeToRefs } from 'pinia' -// 导入设置面板 store -import { useKUNGalgameSettingsStore } from '@/store/modules/settings' -// 使用设置面板的 store -const { showKUNGalgameLanguage } = storeToRefs(useKUNGalgameSettingsStore()) const { keywords, searchHistory, category } = storeToRefs( useKUNGalgameHomeStore() ) diff --git a/src/components/quill-editor/modules.ts b/src/components/quill-editor/modules.ts index 64d0b1d5..5eaf94a0 100644 --- a/src/components/quill-editor/modules.ts +++ b/src/components/quill-editor/modules.ts @@ -3,40 +3,33 @@ */ // 引入编辑器 -import { QuillEditor } from '@vueup/vue-quill' +// import { QuillEditor } from '@vueup/vue-quill' // 引入 quill module: for resizing and realigning images and iframe video // 这里必须这么引入，不然打包之后会报错 // import BlotFormatter from 'quill-blot-formatter' -import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter' +// import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter' // 引入 module: URL、邮箱 自动识别 import MagicUrl from 'quill-magic-url' -// 引入 module: mention -import Mention from 'quill-mention' import '@/styles/editor/editor.snow.scss' // 引入 module: 压缩图片、上传图片（太好用了 www） import ImageCompress from 'quill-image-compress' - -// 定义提及源数据的接口 -interface MentionItem { - id: number - value: string -} +import Message from '../alert/Message' // 编辑器 modules export const modules = [ // BlotFormatter - { - name: 'blotFormatter', - module: BlotFormatter, - // see: https://github.com/Fandom-OSS/quill-blot-formatter/blob/master/src/Options.js - options: { - overlay: { - style: { - border: '2px solid var(--kungalgame-blue-3)', - }, - }, - }, - }, + // { + // name: 'blotFormatter', + // module: BlotFormatter, + // // see: https://github.com/Fandom-OSS/quill-blot-formatter/blob/master/src/Options.js + // options: { + // overlay: { + // style: { + // border: '2px solid var(--kungalgame-blue-3)', + // }, + // }, + // }, + // }, // MagicUrl { name: 'magicUrl', @@ -52,38 +45,6 @@ export const modules = [ /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, }, }, - // Mention，TODO: 实现点击 mention 就跳转到对应的用户或话题主页 - { - name: 'mention', - module: Mention, - options: { - // 允许的输入搜索字符 - // allowedChars: /^[A-Za-z\s]*$/, - // 触发 mention 操作的关键词 - mentionDenotationChars: ['@', '#'], - /** - * @param {string} searchTerm - 用户输入的搜索关键词 - * @param {(items: MentionItem[]) => void} renderList - 渲染列表回调函数，需传入从后端获取的搜索结果数组 - * @param {string} mentionChar - 触发 mention 操作的关键词 - */ - source: async function ( - searchTerm: string, - renderList: (items: MentionItem[]) => void, - mentionChar: string - ) { - // 根据 mentionChar 的不同值执行不同的搜索逻辑 - if (mentionChar === '@') { - // 执行对用户的搜索 - const matchedUsers: MentionItem[] = await searchUsers(searchTerm) - renderList(matchedUsers) - } else if (mentionChar === '#') { - // 执行对话题的搜索 - const matchedTopics: MentionItem[] = await searchTopics(searchTerm) - renderList(matchedTopics) - } - }, - }, - }, // ImageCompress { name: 'imageCompress', @@ -93,65 +54,35 @@ export const modules = [ maxWidth: 1007, maxHeight: 1007, imageType: 'image/webp', - insertIntoEditor: ( - imageBase64URL: string, - imageBlob: Blob, - editor: typeof QuillEditor - ) => { - 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) => { - const range = editor.getSelection() - editor.insertEmbed(range.index, 'image', `${result}`, 'user') - }) - .catch((error) => { - console.error(error) - }) + insertIntoEditor: () => { + Message( + 'The image upload API is under development', + '图片上传接口正在开发中', + 'warn' + ) }, + // insertIntoEditor: ( + // imageBase64URL: string, + // imageBlob: Blob, + // editor: typeof QuillEditor + // ) => { + // 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) => { + // const range = editor.getSelection() + // editor.insertEmbed(range.index, 'image', `${result}`, 'user') + // }) + // .catch((error) => { + // console.error(error) + // }) + // }, // 临时开启一下控制台调试 debug: false, }, }, ] - -// 模拟搜索用户的函数 TODO: -async function searchUsers(searchTerm: string): Promise { - // 实际搜索逻辑 - // 返回匹配的用户列表 - return [ - { id: 1, value: 'kun' }, - { id: 2, value: 'yuyu' }, - { id: 3, value: 'kun' }, - { id: 4, value: 'yuyu' }, - { id: 5, value: 'kun' }, - { id: 6, value: 'yuyu' }, - { id: 7, value: 'kun' }, - { id: 8, value: 'yuyu' }, - { id: 9, value: 'kun' }, - { id: 10, value: 'yuyu' }, - { id: 11, value: 'kun' }, - { id: 12, value: 'yuyu' }, - { id: 13, value: 'kun' }, - { id: 14, value: 'yuyu' }, - { id: 15, value: 'kun' }, - { id: 16, value: 'yuyu' }, - ] -} - -// 模拟搜索话题的函数 TODO: -async function searchTopics(searchTerm: string): Promise { - // 实际搜索逻辑 - // 返回匹配的话题列表 - return [ - { - id: 1, - value: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星', - }, - { id: 2, value: '鲲最可爱' }, - ] -} diff --git a/src/types/quill-mention.d.ts b/src/types/quill-mention.d.ts deleted file mode 100644 index 0ccbf507..00000000 --- a/src/types/quill-mention.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'quill-mention' {} diff --git a/src/types/topic/topic.ts b/src/types/topic/topic.ts deleted file mode 100644 index 55de0a07..00000000 --- a/src/types/topic/topic.ts +++ /dev/null @@ -1,35 +0,0 @@ -// 注意，这只是一个临时的数据文件，后来会被替换为后端接口 - -interface topic { - index: number - name: string - router: string -} - -export const asideTopic: topic[] = [ - { - index: 1, - name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星', - router: '/topic', - }, - { - index: 2, - name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星', - router: '/topic', - }, - { - index: 3, - name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星', - router: '/topic', - }, - { - index: 4, - name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星', - router: '/topic', - }, - { - index: 5, - name: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星', - router: '/topic', - }, -] diff --git a/src/types/update-log/history.ts b/src/types/update-log/history.ts deleted file mode 100644 index 19aaadeb..00000000 --- a/src/types/update-log/history.ts +++ /dev/null @@ -1,110 +0,0 @@ -// 注意，这只是一个临时的数据文件，后来会被替换为后端接口 -interface describe { - index: number - text: string -} - -interface history { - index: number - describe: describe[] - time: string - version: string -} - -export const historyVersion: history[] = [ - { - index: 1, - describe: [ - { - index: 1, - text: '1. 添加新页面 ranking page', - }, - { - index: 2, - text: '2. 修复关于我们页面缩放 BUG', - }, - { - index: 3, - text: '3. 啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星', - }, - ], - time: '2019/10/7', - version: '0.0.1', - }, - { - index: 2, - describe: [ - { - index: 1, - text: '1. 添加新页面 ranking page', - }, - { - index: 2, - text: '2. 修复关于我们页面缩放 BUG', - }, - { - index: 3, - text: '3. 页面颜色调整', - }, - ], - time: '2019/10/7', - version: '0.0.1', - }, - { - index: 3, - describe: [ - { - index: 1, - text: '1. 添加新页面 ranking page', - }, - { - index: 2, - text: '2. 修复关于我们页面缩放 BUG', - }, - { - index: 3, - text: '3. 页面颜色调整', - }, - ], - time: '2019/10/7', - version: '0.0.1', - }, - { - index: 4, - describe: [ - { - index: 1, - text: '1. 添加新页面 ranking page', - }, - { - index: 2, - text: '2. 修复关于我们页面缩放 BUG', - }, - { - index: 3, - text: '3. 页面颜色调整', - }, - ], - time: '2019/10/7', - version: '0.0.1', - }, - { - index: 5, - describe: [ - { - index: 1, - text: '1. 添加新页面 ranking page', - }, - { - index: 2, - text: '2. 修复关于我们页面缩放 BUG', - }, - { - index: 3, - text: '3. 页面颜色调整', - }, - ], - time: '2019/10/7', - version: '0.0.1', - }, -] diff --git a/src/views/edit/Edit.vue b/src/views/edit/Edit.vue index df164512..1abb0d20 100644 --- a/src/views/edit/Edit.vue +++ b/src/views/edit/Edit.vue @@ -79,7 +79,7 @@ onBeforeRouteLeave(async (to, from, next) => {