feat: editor frame

2023-09-01 22:33:45 +08:00 · 2023-09-01 22:33:45 +08:00 · d139131e89
parent 1da02696d3
commit d139131e89
4 changed files with 111 additions and 154 deletions
--- a/src/components/editor/KUNGalgameEditor.vue
+++ b/src/components/editor/KUNGalgameEditor.vue
@ -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>
--- a/src/styles/editor/editor.scss
+++ b/src/styles/editor/editor.scss
@ -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);
-}
--- a/src/views/edit/Edit.vue
+++ b/src/views/edit/Edit.vue
@ -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 {
--- a/src/views/edit/components/Header.vue
+++ b/src/views/edit/components/Header.vue
@ -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>