fix editor

src/components/WangEditor.vue

@@ -6,6 +6,7 @@ import '@wangeditor/editor/dist/css/style.css' // 引入 css
 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
+const props = defineProps(['html', 'text'])
 // 覆盖编辑器原生样式
 import '@/styles/editor/editor.scss'
 
@@ -13,7 +14,8 @@ import '@/styles/editor/editor.scss'
 const editorRef = shallowRef()
 
 // 内容 HTML
-const valueHtml = ref('')
+const valueHtml = ref(props.html)
+const valueText = ref(props.text)
 
 // 模拟 ajax 异步获取内容
 onMounted(() => {

src/language/en.ts

@@ -106,6 +106,19 @@ export default {
   contact: {
     title: 'Join / Contact Us',
   },
+  edit: {
+    title: 'Please input title, limit is 40 characters',
+    tags: 'Please input topic keywords',
+    hint: `Hint: (A single keyword should be within 14 characters, choose at least one and up to 7 keywords). You can enter text and press 'Enter' to create a keyword.`,
+    hot: 'Popular Keywords (Click to Select): ',
+    categories:
+      'Click to select post categories (multiple selections allowed): ',
+    btnGalgame: 'Visual Novel',
+    btnTechnique: 'Technical Discussions',
+    others: 'Others',
+    publish: 'Confirm Publish',
+    draft: 'Save Draft',
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: 'OK',
@@ -113,6 +126,8 @@ export default {
   },
   AlertInfo: {
     publish: 'Confirm to publish?',
+    publishSuccess: 'Publish Successfully',
+    publishCancel: 'Cancel Publish',
     draft: 'The draft has been saved successfully!',
   },
 }

src/language/zh.ts

@@ -106,6 +106,18 @@ export default {
   contact: {
     title: '加入 / 联系我们',
   },
+  edit: {
+    title: '请输入帖子的标题（40字以内）',
+    tags: '请输入帖子的关键词',
+    hint: `提示：（单个关键词 14 个字符以内，至少选择一个、最多 7 个）, 您可以输入文字按下 ' Enter ' 创建关键词`,
+    hot: '热门关键词（点击选择）:',
+    categories: '点击选择帖子的分区（可多选）:',
+    btnGalgame: 'Galgame',
+    btnTechnique: '技术交流',
+    others: '其它',
+    publish: '确认发布',
+    draft: '保存草稿',
+  },
   // 非页面组件这里统一用大驼峰
   ComponentAlert: {
     confirm: '确定',
@@ -113,6 +125,8 @@ export default {
   },
   AlertInfo: {
     publish: '确认发布吗？',
+    publishSuccess: '发布成功',
+    publishCancel: '取消发布',
     draft: '草稿已经保存成功！',
   },
 }

src/store/modules/edit.ts

@@ -0,0 +1,28 @@
+/* 编辑区的 store */
+import { defineStore } from 'pinia'
+interface Tag {
+  index: number
+  name: string
+}
+
+interface Topic {
+  // 帖子标题
+  title: string
+  // 帖子内容
+  article: string
+  // 帖子标签
+  tags: Tag[]
+  // 帖子分区
+  partition: string[]
+}
+
+export const useKUNGalgameEditStore = defineStore({
+  id: 'edit',
+  persist: true,
+  state: (): Topic => ({
+    title: '',
+    article: '',
+    tags: [],
+    partition: [],
+  }),
+})

src/views/edit/Edit.vue

@@ -1,8 +1,29 @@
 <script setup lang="ts">
+import { reactive, ref } from 'vue'
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
 import WangEditor from '@/components/WangEditor.vue'
-import Footer from './components/Footer.vue'
+import Tags from './components/Tags.vue'
+import Button from './components/Button.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
+
+const emit = defineEmits(['tags', 'article'])
+
+interface Topic {
+  id: ''
+  time: ''
+  authorId: ''
+}
+
+const topicInfo = reactive({
+  title: '',
+  articleHtml: '',
+  articleText: '',
+  tags: [],
+})
+
+const submit = () => {
+  // 在这里执行表单提交的逻辑，可以发送网络请求等操作
+}
 </script>
 
 <template>
@@ -10,22 +31,27 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
     <!-- 头部 -->
     <KUNGalgameTopBar />
     <!-- 内容区容器 -->
-    <div class="container">
+    <form class="container" @submit.prevent="submit">
       <!-- 内容区容器 -->
-      <div class="content-wrapper">
+      <div class="content">
         <!-- 内容区的头部 -->
-        <div class="content-header">
+        <div class="header">
           <!-- 帖子的标题 -->
-          <div class="topic-title">
+          <div class="title">
             <input type="text" placeholder="请输入帖子的标题（40字以内）" />
           </div>
         </div>
         <!-- 编辑器 -->
-        <WangEditor class="editor" />
+        <WangEditor class="editor" @html="" />
       </div>
 
-      <Footer />
+      <!-- 内容区的底部 -->
-    </div>
+      <div class="content-footer">
+        <Tags />
+
+        <Button />
+      </div>
+    </form>
     <!-- 版权 -->
     <KUNGalgameFooter style="margin: 0 auto" />
     <span style="margin: 0 auto">Editor powered by wangEditor</span>
@@ -33,9 +59,10 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 </template>
 
 <style lang="scss" scoped>
-.content-wrapper {
+.content {
   margin: 0 auto;
 }
+
 .root {
   height: 100vh;
   min-height: 1100px;
@@ -43,6 +70,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   display: flex;
   flex-direction: column;
 }
+
 /* 内容部分的总容器 */
 .container {
   width: 80%;
@@ -55,19 +83,22 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   border: 1px solid var(--kungalgame-blue-1);
   padding: 10px;
 }
+
 /* 容器的顶部 */
-.content-header {
+.header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
+
 /* 帖子的发布标题 */
-.topic-title {
+.title {
   width: 100%;
 }
+
 /* 帖子标题的输入框 */
-.topic-title input {
+.title input {
   color: var(--kungalgame-font-color-2);
   /* 距离外轮廓的距离 */
   padding: 7px;
@@ -80,8 +111,17 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   background-color: var(--kungalgame-white);
   margin-bottom: 10px;
 }
+
 /* 标题输入框 focus 之后的样式 */
-.topic-title input:focus {
+.title input:focus {
   box-shadow: 0px 0px 5px var(--kungalgame-blue-4);
 }
+
+.content-footer {
+  /* 距离内容区的距离 */
+  margin-top: 17px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 </style>

src/views/edit/components/Button.vue

@@ -13,7 +13,11 @@ const handlePublish = async () => {
   const res = await info.alert('AlertInfo.publish', true)
   // TODO:
   // 这里实现用户的点击确认取消逻辑
-  console.log(res)
+  if (res) {
+    info.info('AlertInfo.publishSuccess')
+  } else {
+    info.info('AlertInfo.publishCancel')
+  }
 }
 
 const handleSave = () => {
@@ -29,7 +33,7 @@ const handleSave = () => {
     <div>点击选择帖子的分区（可多选）:</div>
     <!-- 分类容器的按钮集合 -->
     <div class="group-btn" :class="buttonStatus ? 'selected-btn' : ''">
-      <button
+      <span
         class="btn"
         v-for="kun in button"
         :key="kun.index"
@@ -37,7 +41,7 @@ const handleSave = () => {
         :class="{ active: kun.isActive.value }"
       >
         {{ kun.name }}
-      </button>
+      </span>
     </div>
   </div>
   <!-- 按钮的容器 -->
@@ -73,6 +77,9 @@ const handleSave = () => {
   border: 1px solid var(--kungalgame-blue-1);
   background-color: var(--kungalgame-trans-blue-0);
   color: var(--kungalgame-blue-4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 /* 按钮的容器 */
 .btn-container {

src/views/edit/components/Footer.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import Tags from './Tags.vue'
-import Button from './Button.vue'
-</script>
-
-<template>
-  <!-- 内容区的底部 -->
-  <div class="content-footer">
-    <Tags />
-
-    <Button />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 内容区的底部样式 */
-.content-footer {
-  /* 距离内容区的距离 */
-  margin-top: 17px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-</style>

src/views/edit/components/Tags.vue

@@ -94,7 +94,7 @@ const validateTagName = (tagName: string) => {
 
 <template>
   <!-- 标签的总容器 -->
-  <div class="container">
+  <div class="container-a">
     <div class="input-container">
       <div class="tags-container">
         <!-- 已选择的标签显示容器 -->
@@ -132,7 +132,7 @@ const validateTagName = (tagName: string) => {
 
 <style lang="scss" scoped>
 /* 标签的总容器 */
-.container {
+.container-a {
   width: 100%;
 }
 

src/views/edit/components/tags.ts

@@ -0,0 +1,36 @@
+export interface Tag {
+  index: number
+  name: string
+}
+
+// 临时数据，将会从后端返回 7 个热门 tag
+export const tag: Tag[] = [
+  {
+    index: 1,
+    name: '啊这可海星',
+  },
+  {
+    index: 2,
+    name: '啊这可海星',
+  },
+  {
+    index: 3,
+    name: '啊这可海星',
+  },
+  {
+    index: 4,
+    name: '啊这可海星啊这可海星',
+  },
+  {
+    index: 5,
+    name: '啊这可海星',
+  },
+  {
+    index: 6,
+    name: '啊这可海星啊这可海星',
+  },
+  {
+    index: 7,
+    name: '啊这可海星',
+  },
+]