hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

mod: remove prismjs, remove feat: code highlight

Browse source
This commit is contained in:
KUN1007 2023-09-07 02:15:02 +08:00
parent 83dc826440
commit fde65b088e
9 changed files with 92 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored
View file

@ -6,6 +6,7 @@
"azkhx",
"bangumi",
"Bilibili",
"cout",
"dompurify",
"fontawesome",
"galgame",

3
package.json
View file

@ -24,7 +24,6 @@
"dompurify": "^3.0.5",
"pinia": "^2.1.6",
"pinia-plugin-persistedstate": "^3.2.0",
"prismjs": "^1.29.0",
"vue": "^3.3.4",
"vue-i18n": "^9.2.2",
"vue-router": "^4.2.4"
@ -33,7 +32,6 @@
"@iconify/vue": "^4.1.1",
"@types/dompurify": "^3.0.2",
"@types/node": "^20.4.8",
"@types/prismjs": "^1.26.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.2",
"cross-env": "^7.0.3",
@ -42,7 +40,6 @@
"typescript": "^5.1.6",
"vite": "^4.4.8",
"vite-plugin-mock": "^3.0.0",
"vite-plugin-prismjs": "^0.0.8",
"vue-tsc": "^1.8.8"
},
"keywords": [

36
pnpm-lock.yaml
View file

@ -23,9 +23,6 @@ dependencies:
pinia-plugin-persistedstate:
specifier: ^3.2.0
version: 3.2.0(pinia@2.1.6)
prismjs:
specifier: ^1.29.0
version: 1.29.0
vue:
specifier: ^3.3.4
version: 3.3.4
@ -46,9 +43,6 @@ devDependencies:
'@types/node':
specifier: ^20.4.8
version: 20.4.8
'@types/prismjs':
specifier: ^1.26.0
version: 1.26.0
'@vitejs/plugin-vue':
specifier: ^4.2.3
version: 4.2.3(vite@4.4.8)(vue@3.3.4)
@ -73,9 +67,6 @@ devDependencies:
vite-plugin-mock:
specifier: ^3.0.0
version: 3.0.0(esbuild@0.18.19)(mockjs@1.1.0)(vite@4.4.8)
vite-plugin-prismjs:
specifier: ^0.0.8
version: 0.0.8(prismjs@1.29.0)
vue-tsc:
specifier: ^1.8.8
version: 1.8.8(typescript@5.1.6)
@ -708,10 +699,6 @@ packages:
resolution: {integrity: sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==}
dev: true
/@types/prismjs@1.26.0:
resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
dev: true
/@types/trusted-types@2.0.3:
resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
dev: true
@ -930,14 +917,6 @@ packages:
picomatch: 2.3.1
dev: true
/babel-plugin-prismjs@2.1.0(prismjs@1.29.0):
resolution: {integrity: sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==}
peerDependencies:
prismjs: ^1.18.0
dependencies:
prismjs: 1.29.0
dev: true
/balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
dev: true
@ -1630,10 +1609,6 @@ packages:
picocolors: 1.0.0
source-map-js: 1.0.2
/prismjs@1.29.0:
resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
engines: {node: '>=6'}
/queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: true
@ -1862,17 +1837,6 @@ packages:
- supports-color
dev: true
/vite-plugin-prismjs@0.0.8(prismjs@1.29.0):
resolution: {integrity: sha512-mBPPMS/hwVUArdqCtp/oajZT7iq1qwJDDCciNZ3R5+Q5tQUuUHXtDKuZHYnklPLElNbENf2FyuOtC4FrgxQRAA==}
engines: {node: '>=12.0.0'}
dependencies:
'@babel/core': 7.22.15
babel-plugin-prismjs: 2.1.0(prismjs@1.29.0)
transitivePeerDependencies:
- prismjs
- supports-color
dev: true
/vite@4.4.8(@types/node@20.4.8)(sass@1.64.2):
resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==}
engines: {node: ^14.18.0 || >=16.0.0}

29
src/components/quill-editor/EditorSettingsMenu.vue
View file

@ -26,6 +26,9 @@ defineProps<{
const isRefreshPage = ref(false)
// 点击高级选项时提醒用户刷新页面
watch(mode, () => {
isRefreshPage.value = !isRefreshPage.value
})
const handleRefreshPage = () => location.reload()
</script>
@ -69,8 +72,14 @@ const handleRefreshPage = () => location.reload()
</span>
</Transition>
</div>
<!-- 切换按钮 -->
<SwitchButton />
<select class="select" v-model="mode">
<option value="minimal">最小配置</option>
<option value="">默认配置</option>
<option value="essential">基本配置</option>
<option value="full">最高配置</option>
</select>
</div>
</div>
</Transition>
@ -78,10 +87,11 @@ const handleRefreshPage = () => location.reload()
<style lang="scss" scoped>
.settings-menu {
width: 277px;
padding: 10px;
z-index: 1009;
position: absolute;
top: 470px;
margin-bottom: 190px;
background-color: var(--kungalgame-white);
border: 1px solid var(--kungalgame-blue-1);
box-shadow: var(--shadow);
@ -106,6 +116,8 @@ const handleRefreshPage = () => location.reload()
.editor-height {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
}
.editor-advance {
@ -126,6 +138,19 @@ const handleRefreshPage = () => location.reload()
}
}
// 编辑器模式的选择框
.select {
width: 100px;
font-size: 16px;
margin-left: 20px;
color: var(--kungalgame-font-color-3);
border: 1px solid var(--kungalgame-blue-4);
background-color: var(--kungalgame-trans-white-9);
option {
background-color: var(--kungalgame-white);
}
}
.slide-up-enter-active,
.slide-up-leave-active {
transition: all 0.25s ease-out;

43
src/components/quill-editor/QuillEditor.vue
View file

@ -5,10 +5,11 @@ import {
ref,
onBeforeMount,
onBeforeUnmount,
onMounted,
} from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
// 自定义 quill 的两个主题
// 自定义 quill 的两个主题，第二个主题暂时懒得动
import '@/styles/editor/editor.snow.scss'
// import '@vueup/vue-quill/dist/vue-quill.bubble.css'
@ -42,6 +43,7 @@ const { editorHeight, mode, theme, isSave, content } = storeToRefs(
* @param {boolean} isShowSettings - 是否显示编辑器设置
*/
const props = defineProps<{
height?: number
isShowToolbar: boolean
isShowAdvance: boolean
isShowTitle: boolean
@ -52,7 +54,14 @@ const props = defineProps<{
const editorRef = ref()
// 编辑器的高度
const editorHeightStyle = computed(() => `height: ${editorHeight.value}px`)
const editorHeightStyle = computed(
() => `height: ${props.height ? props.height : editorHeight.value}px`
)
// 编辑器的工具栏是否显示
const isShowEditorToolbar = computed(() =>
props.isShowToolbar ? 'block' : 'none'
)
// 编辑器内的内容
const valueHtml = ref('')
// 编辑器文字计数
@ -67,16 +76,25 @@ const editorOptions = {
const onEditorReady = () => {}
// 工具栏相关配置
const toolbarOptions = {
container: [
['bold', 'italic', 'underline', 'strike'],
['markdown'], // Add this.
],
handlers: {
// Add this.
markdown: function () {},
},
}
// 挂载之前载入数据，如果不保存，则不载入
onBeforeMount(() => {
if (isSave.value) {
valueHtml.value = content.value
}
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {})
// 如果不显示高级选项则隐藏工具栏
})
// 编辑器文本改变时自动保存数据
const handleTextChange = () => {
@ -107,7 +125,7 @@ const handleTextChange = () => {
:content="valueHtml"
:style="editorHeightStyle"
:theme="theme"
toolbar="full"
:toolbar="mode"
:options="editorOptions"
@textChange="handleTextChange"
@ready="onEditorReady"
@ -136,6 +154,7 @@ const handleTextChange = () => {
background-color: var(--kungalgame-trans-blue-0);
/* 头部下方阴影 */
box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
display: v-bind(isShowEditorToolbar);
}
/* 编辑器体的样式 */
@ -165,6 +184,16 @@ const handleTextChange = () => {
}
.ql-editor {
padding: 0;
&::-webkit-scrollbar {
display: inline;
width: 4px;
height: 0;
}
&::-webkit-scrollbar-thumb {
cursor: default;
background: var(--kungalgame-blue-4);
border-radius: 2px;
}
&::before {
left: 0;
}
@ -175,7 +204,7 @@ const handleTextChange = () => {
bottom: 0;
transform: translateX(-20px) translateY(27px);
color: var(--kungalgame-trans-white-5);
text-shadow: 1px 1px 1px var(--kungalgame-blue-2);
text-shadow: 1px 1px 1px var(--kungalgame-pink-3);
font-style: oblique;
}
}

10
src/styles/editor/editor.snow.scss
View file

@ -833,7 +833,6 @@
background-color: var(--kungalgame-trans-white-2);
}
.ql-toolbar.ql-snow {
border: 1px solid var(--kungalgame-blue-1);
box-sizing: border-box;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
padding: 8px;
@ -934,3 +933,12 @@
.ql-container.ql-snow {
border: 1px solid var(--kungalgame-blue-1);
}
/* 被 reset css 覆盖的样式 */
u {
text-decoration: underline;
}
s {
text-decoration: line-through;
}

129
src/views/topic/content/components/Content.vue
View file

@ -1,23 +1,18 @@
<script setup lang="ts">
import { onMounted } from 'vue'
import prismjs from 'prismjs'
import 'prismjs/themes/prism.css'
// 导入编辑器的样式
// 自定义 quill 的两个主题
import '@/styles/editor/editor.snow.scss'
defineProps<{
content: string
}>()
onMounted(() => {
// 高亮渲染
prismjs.highlightAll()
})
</script>
<template>
<!-- 内容区右侧的话题展示区，这里富文本必须用 v-html，已经确定文本经过三次处理 -->
<!-- 这里用的 v-html，样式是页面刷新后才会有的，所以必须动态绑定样式 -->
<div class="kungalgame-topic-content">
<div v-html="content"></div>
<div class="kungalgame-topic-content ql-container ql-snow">
<div class="ql-editor ql-blank" v-html="content"></div>
</div>
</template>
@ -28,8 +23,8 @@ onMounted(() => {
width: calc(100% - 141px);
font-size: 15px;
padding: 17px;
border-left: 1px solid var(--kungalgame-blue-1);
color: var(--kungalgame-font-color-3);
border: none !important;
}
.kungalgame-topic-content {
@ -56,108 +51,18 @@ onMounted(() => {
text-shadow: none;
}
/* 下面全部是 wangEditor 原生样式 */
:deep(p, li) {
white-space: pre-wrap; /* 保留空格 */
}
:deep(blockquote) {
border-left: 8px solid var(--kungalgame-blue-1);
padding: 10px 10px;
margin: 10px 0;
background-color: var(--kungalgame-trans-blue-0);
}
:deep(pre > code) {
display: block;
padding: 10px;
}
:deep(code) {
font-family: monospace;
background-color: var(--kungalgame-trans-blue-0);
padding: 3px;
border-radius: 3px;
text-shadow: none;
box-shadow: var(--shadow);
}
:deep(table) {
border-collapse: collapse;
}
:deep(td, th) {
border: 1px solid var(--kungalgame-blue-4);
min-width: 50px;
height: 20px;
}
:deep(th) {
background-color: var(--kungalgame-trans-blue-0);
}
:deep(ul, ol) {
padding-left: 20px;
}
:deep(input[type='checkbox']) {
margin-right: 5px;
}
/**
* 过滤 prism 相关样式的代码
*/
/* 这一步把 prism 的背景过滤掉 */
:deep(pre) {
padding: 0;
border: 1px solid var(--kungalgame-blue-4);
background-color: var(--kungalgame-trans-white-9);
}
:deep(.token) {
background-color: var(--kungalgame-trans-white-9);
}
:deep(.toolbar) {
top: 17px;
right: 10px;
display: flex;
& > .toolbar-item {
/* 这里直接根据 DOM 结构写的，写的不是很明了，要怪就怪写 prism 插件的人吧 hhh */
button,
& > span {
transition: all 0.2s;
box-shadow: unset;
margin-left: 10px;
border-radius: 0;
padding: 2px 5px;
}
& > span {
color: var(--kungalgame-pink-4);
border: 1px solid var(--kungalgame-pink-4);
background-color: var(--kungalgame-trans-white-5);
&:hover {
background-color: var(--kungalgame-pink-4);
color: var(--kungalgame-white);
}
}
button {
cursor: pointer;
background-color: var(--kungalgame-trans-white-9);
border: 1px solid var(--kungalgame-blue-4);
color: var(--kungalgame-blue-4);
&:hover {
background-color: var(--kungalgame-blue-4);
color: var(--kungalgame-white);
}
&:focus {
color: var(--kungalgame-pink-4);
border: 1px solid var(--kungalgame-pink-4);
background-color: var(--kungalgame-trans-white-5);
}
}
&::before {
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;
position: absolute;
font-size: 17px;
top: 20px;
right: 28px;
}
}
}

1
src/views/topic/content/components/ReplyPanel.vue
View file

@ -55,6 +55,7 @@ const handelClosePanel = () => {
<!-- 回复的编辑器 -->
<div class="content">
<QuillEditor
:height="200"
:is-show-toolbar="isShowAdvance"
:is-show-advance="false"
:is-show-title="false"

34
vite.config.ts
View file

@ -5,42 +5,10 @@ import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
// 导入 vite tsx 支持
import vueJsx from '@vitejs/plugin-vue-jsx'
// 导入 prismjs 高亮
import { prismjsPlugin } from 'vite-plugin-prismjs'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
visualizer() as PluginOption,
vueJsx(),
prismjsPlugin({
// 这里和 wangEditor 适配
languages: [
'jsx',
'typescript',
'markup',
'go',
'php',
'c',
'python',
'java',
'cpp',
'csharp',
'visual-basic',
'sql',
'ruby',
'swift',
'bash',
'markdown',
'lua',
'groovy',
],
plugins: ['show-language', 'toolbar', 'copy-to-clipboard'],
theme: 'okaidia',
css: true,
}),
],
plugins: [vue(), visualizer() as PluginOption, vueJsx()],
/* src 别名为 @ */
resolve: {
alias: {