mod: remove quill-mention
This commit is contained in:
KUN1007
parent
6a39f1af94
commit
cd24081dff
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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<MentionItem[]> {
|
||||
// 实际搜索逻辑
|
||||
// 返回匹配的用户列表
|
||||
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<MentionItem[]> {
|
||||
// 实际搜索逻辑
|
||||
// 返回匹配的话题列表
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
value: '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
|
||||
},
|
||||
{ id: 2, value: '鲲最可爱' },
|
||||
]
|
||||
}
|
||||
|
|
|
|||
1
src/types/quill-mention.d.ts
vendored
1
src/types/quill-mention.d.ts
vendored
|
|
@ -1 +0,0 @@
|
|||
declare module 'quill-mention' {}
|
||||
|
|
@ -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',
|
||||
},
|
||||
]
|
||||
|
|
@ -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',
|
||||
},
|
||||
]
|
||||
|
|
@ -79,7 +79,7 @@ onBeforeRouteLeave(async (to, from, next) => {
|
|||
<style lang="scss" scoped>
|
||||
.root {
|
||||
height: calc(100vh - 65px);
|
||||
min-height: 1000px;
|
||||
min-height: 1200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,7 +38,11 @@ onMounted(async () => {
|
|||
<div class="root">
|
||||
<!-- 信息区域容器 -->
|
||||
<div class="container">
|
||||
<Header :name="user?.name" :avatar="user?.avatar" :moemoepoint="user?.moemoepoint" />
|
||||
<Header
|
||||
:name="user?.name"
|
||||
:avatar="user?.avatar"
|
||||
:moemoepoint="user?.moemoepoint"
|
||||
/>
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<NavBar :uid="uid" />
|
||||
|
|
@ -52,7 +56,7 @@ onMounted(async () => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.root {
|
||||
height: 100vh;
|
||||
height: calc(100vh - 65px);
|
||||
min-height: 800px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in a new issue