feat: editor frame
This commit is contained in:
KUN1007
parent
2d48a1181f
commit
ee8f27cc27
|
|
@ -1,11 +1,17 @@
|
|||
<script setup lang='ts'>
|
||||
|
||||
<script setup lang="ts">
|
||||
import KUNGalgameEditorMenu from './KUNGalgameEditorMenu.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="editor-container">
|
||||
<KUNGalgameEditorMenu />
|
||||
<div class="editor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.editor-container {
|
||||
min-height: 300px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
/* wangEditor5 使用了 Shadow DOM，不能直接修改颜色，在全局覆盖 */
|
||||
|
||||
.w-e-scroll {
|
||||
&::-webkit-scrollbar {
|
||||
display: inline;
|
||||
width: 6px;
|
||||
height: 0;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--kungalgame-blue-4);
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除线，不然会不显示 */
|
||||
s {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* 下划线，不然会不显示 */
|
||||
u {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 设置为 none，不然黑夜模式代码块会花屏 */
|
||||
* {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* textarea - css vars */
|
||||
--w-e-textarea-bg-color: var(--kungalgame-white);
|
||||
--w-e-textarea-color: var(--kungalgame-font-color-3);
|
||||
--w-e-textarea-border-color: var(--kungalgame-blue-1);
|
||||
--w-e-textarea-slight-border-color: var(--kungalgame-blue-4);
|
||||
--w-e-textarea-slight-color: var(--kungalgame-font-color-0);
|
||||
--w-e-textarea-slight-bg-color: var(--kungalgame-white);
|
||||
--w-e-textarea-selected-border-color: var(--kungalgame-blue-1);
|
||||
/* 选中的元素，如选中了分割线 */
|
||||
--w-e-textarea-handler-bg-color: var(--kungalgame-blue-4);
|
||||
/* 工具，如图片拖拽按钮 */
|
||||
|
||||
/* toolbar - css vars */
|
||||
--w-e-toolbar-color: var(--kungalgame-font-color-1);
|
||||
--w-e-toolbar-bg-color: var(--kungalgame-white);
|
||||
--w-e-toolbar-active-color: var(--kungalgame-font-color-3);
|
||||
--w-e-toolbar-active-bg-color: var(--kungalgame-white);
|
||||
--w-e-toolbar-disabled-color: var(--kungalgame-red-4);
|
||||
--w-e-toolbar-border-color: var(--kungalgame-blue-4);
|
||||
|
||||
/* modal - css vars */
|
||||
--w-e-modal-button-bg-color: var(--kungalgame-white);
|
||||
--w-e-modal-button-border-color: var(--kungalgame-blue-4);
|
||||
}
|
||||
|
|
@ -1,51 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { onBeforeMount, ref } from 'vue'
|
||||
import KUNGalgameEditor from '@/components/editor/KUNGalgameEditor.vue'
|
||||
import Tags from './components/Tags.vue'
|
||||
import Footer from './components/Footer.vue'
|
||||
import Header from './components/Header.vue'
|
||||
import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
|
||||
|
||||
// 导入编辑帖子的 store
|
||||
import { useKUNGalgameEditStore } from '@/store/modules/edit'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 导入防抖函数
|
||||
import { debounce } from '@/utils/debounce'
|
||||
|
||||
const topicData = storeToRefs(useKUNGalgameEditStore())
|
||||
|
||||
// 话题标题的文字
|
||||
const topicTitle = ref('')
|
||||
// 标题的最大长度
|
||||
const maxInputLength = 40
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (topicData.isSave.value) {
|
||||
topicTitle.value = topicData.title.value
|
||||
}
|
||||
})
|
||||
|
||||
// 处理用户输入
|
||||
const handelInput = () => {
|
||||
// 标题不能超过 40 字
|
||||
if (topicTitle.value.length > maxInputLength) {
|
||||
topicTitle.value = topicTitle.value.slice(0, maxInputLength)
|
||||
}
|
||||
|
||||
// 用户输入了纯空格
|
||||
if (topicTitle.value.trim() === '') {
|
||||
return
|
||||
}
|
||||
|
||||
// 创建一个防抖处理函数
|
||||
const debouncedInput = debounce(() => {
|
||||
// 过滤 xss
|
||||
topicData.title.value = topicTitle.value
|
||||
}, 300)
|
||||
|
||||
// 调用防抖处理函数，会在延迟时间内只执行一次更新操作
|
||||
debouncedInput()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -54,43 +12,26 @@ const handelInput = () => {
|
|||
<div class="container">
|
||||
<!-- 内容区容器 -->
|
||||
<div class="content">
|
||||
<!-- 内容区的头部 -->
|
||||
<div class="header">
|
||||
<!-- 话题的标题 -->
|
||||
<div class="title">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入话题的标题（40字以内）"
|
||||
v-model="topicTitle"
|
||||
@input="handelInput"
|
||||
:maxlength="maxInputLength"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 标题 -->
|
||||
<Header />
|
||||
<!-- 编辑器 -->
|
||||
<KUNGalgameEditor />
|
||||
</div>
|
||||
|
||||
<!-- 内容区的底部 -->
|
||||
<div class="content-footer">
|
||||
<!-- 话题的 Tag -->
|
||||
<Tags />
|
||||
|
||||
<!-- 话题的 Footer -->
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 版权 -->
|
||||
<KUNGalgameFooter style="margin: 0 auto" />
|
||||
<span style="margin: 0 auto; color: var(--kungalgame-font-color-3)"
|
||||
>Editor powered by wangEditor</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100vh;
|
||||
min-height: 1200px;
|
||||
|
|
@ -110,39 +51,12 @@ const handelInput = () => {
|
|||
color: var(--kungalgame-font-color-3);
|
||||
border: 1px solid var(--kungalgame-blue-1);
|
||||
padding: 10px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
/* 容器的顶部 */
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 话题的发布标题 */
|
||||
.title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 话题标题的输入框 */
|
||||
.title input {
|
||||
color: var(--kungalgame-font-color-2);
|
||||
/* 距离外轮廓的距离 */
|
||||
padding: 7px;
|
||||
/* 内边距盒子 */
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
/* 标题输入字体大小 */
|
||||
font-size: 40px;
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
border: 1px solid var(--kungalgame-blue-4);
|
||||
background-color: var(--kungalgame-white);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 标题输入框 focus 之后的样式 */
|
||||
.title input:focus {
|
||||
box-shadow: 0px 0px 5px var(--kungalgame-blue-4);
|
||||
}
|
||||
|
||||
.content-footer {
|
||||
|
|
|
|||
91
src/views/edit/components/Header.vue
Normal file
91
src/views/edit/components/Header.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<script setup lang="ts">
|
||||
import { onBeforeMount, ref } from 'vue'
|
||||
// 导入编辑帖子的 store
|
||||
import { useKUNGalgameEditStore } from '@/store/modules/edit'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 导入防抖函数
|
||||
import { debounce } from '@/utils/debounce'
|
||||
|
||||
const topicData = storeToRefs(useKUNGalgameEditStore())
|
||||
|
||||
// 话题标题的文字
|
||||
const topicTitle = ref('')
|
||||
// 标题的最大长度
|
||||
const maxInputLength = 40
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (topicData.isSave.value) {
|
||||
topicTitle.value = topicData.title.value
|
||||
}
|
||||
})
|
||||
|
||||
// 处理用户输入
|
||||
const handelInput = () => {
|
||||
// 标题不能超过 40 字
|
||||
if (topicTitle.value.length > maxInputLength) {
|
||||
topicTitle.value = topicTitle.value.slice(0, maxInputLength)
|
||||
}
|
||||
|
||||
// 用户输入了纯空格
|
||||
if (topicTitle.value.trim() === '') {
|
||||
return
|
||||
}
|
||||
|
||||
// 创建一个防抖处理函数
|
||||
const debouncedInput = debounce(() => {
|
||||
// 过滤 xss
|
||||
topicData.title.value = topicTitle.value
|
||||
}, 300)
|
||||
|
||||
// 调用防抖处理函数，会在延迟时间内只执行一次更新操作
|
||||
debouncedInput()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 内容区的头部 -->
|
||||
<div class="header">
|
||||
<!-- 话题的标题 -->
|
||||
<div class="title">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入标题（40字以内）"
|
||||
v-model="topicTitle"
|
||||
@input="handelInput"
|
||||
:maxlength="maxInputLength"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 容器的顶部 */
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* 话题的发布标题 */
|
||||
.title {
|
||||
width: 100%;
|
||||
border-bottom: 5px solid var(--kungalgame-red-4);
|
||||
}
|
||||
|
||||
/* 话题标题的输入框 */
|
||||
.title input {
|
||||
color: var(--kungalgame-font-color-2);
|
||||
/* 距离外轮廓的距离 */
|
||||
padding: 7px;
|
||||
/* 内边距盒子 */
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
/* 标题输入字体大小 */
|
||||
font-size: 40px;
|
||||
border: none;
|
||||
background-color: var(--kungalgame-trans-white-9);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue