feat: editor

src/api/edit/index.ts

@@ -1,20 +1,23 @@
+import { fetchPost } from '@/utils/request'
+import type * as Edit from './types/edit'
 
-import { fetchGet } from '@/utils/request'
-
-export async function getSingleKUNGalgamerApi(
-  id: number
-): Promise<KUNGalgamer> {
+export async function createNewTopicApi(
+  newTopicData: Edit.CreateTopicRequestData
+): Promise<Edit.CreateTopicResponseData> {
   try {
-    const url = `/kungalgamer/${id}`
+    const url = `/edit/topic`
 
-    // 调用fetchGet函数
-    const response = await fetchGet<KUNGalgamer>(url)
+    // 调用 fetchPost 函数
+    const response = await fetchPost<Edit.CreateTopicResponseData>(
+      url,
+      newTopicData
+    )
 
-    // 返回获取的用户数据
+    // 返回创建好的话题数据
     return response
   } catch (error) {
     // 处理错误
     console.error(error)
-    throw new Error('Failed to fetch user data')
+    throw new Error('Failed to create new topic')
   }
 }

src/api/edit/types/edit.ts

@@ -1,3 +1,32 @@
-export interface CreateTopicRequest {
-    
+export interface CreateTopicRequestData {
+  title: string
+  content: string
+  time: string
+  tags: Array<string>
+  category: Array<string>
+  uid: number
 }
+
+export interface KUNGalgameTopic {
+  tid: number
+  title: string
+  content: string
+  uid: number
+  tags: Array<string>
+  category: Array<string>
+  rid: Array<number>
+  time: string
+  popularity: number
+  upvotes: number
+  views: number
+  likes: number
+  replies: number
+  share: number
+  comments: number
+  dislikes: number
+  status: number
+  edited: number
+}
+
+// 登录响应数据的格式
+export type CreateTopicResponseData = KUNGalgameResponseData<KUNGalgameTopic>

src/api/login/index.ts

@@ -1,12 +1,12 @@
-import { LoginRequestData, LoginResponseData } from './types/login'
 import { fetchPost } from '@/utils/request'
+import type * as Login from './types/login'
 
 // 获取用户登录数据
 export const postLoginDataApi = async (
-  loginData: LoginRequestData
-): Promise<LoginResponseData> => {
+  loginData: Login.LoginRequestData
+): Promise<Login.LoginResponseData> => {
   try {
-    const response = await fetchPost<LoginResponseData>(
+    const response = await fetchPost<Login.LoginResponseData>(
       '/login/login',
       loginData
     )

src/api/login/types/login.ts

@@ -6,7 +6,7 @@ export interface LoginRequestData {
   password: string
 }
 
-// 登录相应数据的格式
+// 登录响应数据的格式
 export type LoginResponseData = KUNGalgameResponseData<{
   uid: number
   avatar: string

src/components/WangEditor.vue

@@ -7,6 +7,11 @@ import '@/styles/editor/editor.scss'
 import { IDomEditor } from '@wangeditor/editor'
 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+
+import { storeToRefs } from 'pinia'
+
+const topicData = storeToRefs(useKUNGalgameEditStore())
 
 const props = defineProps(['height', 'isShowToolbar', 'isShowAdvance'])
 
@@ -38,16 +43,7 @@ const editorConfig = {
   },
 }
 
-const handleCreated = (editor: IDomEditor) => {
-  editorRef.value = editor
-}
-
-onMounted(() => {
-  // 模拟 ajax 异步设置 value
-  setTimeout(() => {
-    valueHtml.value = '<p>KUN IS THE CUTEST!</p>' // 测试 v-model
-  }, 2000)
-})
+const handleCreated = (editor: IDomEditor) => {}
 
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
@@ -55,6 +51,13 @@ onBeforeUnmount(() => {
   if (editor == null) return
   editor.destroy()
 })
+
+const handleChange = (editor: IDomEditor) => {
+  editorRef.value = editor
+  setTimeout(() => {
+    console.log(editor.getHtml())
+  }, 1000)
+}
 </script>
 
 <template>
@@ -72,6 +75,7 @@ onBeforeUnmount(() => {
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       @onCreated="handleCreated"
+      @onChange="handleChange"
     />
   </div>
 </template>

src/store/modules/edit.ts

@@ -1,19 +1,20 @@
 /* 编辑区的 store */
 import { defineStore } from 'pinia'
-interface Tag {
-  index: number
-  name: string
-}
+import { createNewTopicApi } from '@/api/edit/index'
+import {
+  CreateTopicRequestData,
+  CreateTopicResponseData,
+} from '@/api/edit/types/edit'
 
 interface Topic {
   // 话题标题
   title: string
   // 话题内容
-  article: string
+  content: string
   // 话题标签
-  tags: Tag[]
+  tags: Array<string>
   // 话题分区
-  category: string[]
+  category: Array<string>
 }
 
 export const useKUNGalgameEditStore = defineStore({
@@ -21,8 +22,44 @@ export const useKUNGalgameEditStore = defineStore({
   persist: true,
   state: (): Topic => ({
     title: '',
-    article: '',
+    content: '',
     tags: [],
     category: [],
   }),
+  getters: {},
+  actions: {
+    // 保存草稿
+    saveTopicDraft(
+      title: string,
+      content: string,
+      tags: Array<string>,
+      category: Array<string>
+    ) {
+      this.title = title
+      this.content = content
+      this.tags = tags
+      this.category = category
+    },
+    // 清空草稿
+    clearTopicDraft() {
+      this.title = ''
+      this.content = ''
+      this.tags = []
+      this.category = []
+    },
+    // 创建话题
+    createNewTopic(
+      createTopicRequestData: CreateTopicRequestData
+    ): Promise<CreateTopicResponseData> {
+      return new Promise((resolve, reject) => {
+        createNewTopicApi(createTopicRequestData)
+          .then((res) => {
+            resolve(res)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      })
+    },
+  },
 })

src/views/edit/Edit.vue

@@ -28,7 +28,7 @@ const submit = () => {
 <template>
   <div class="root">
     <!-- 内容区容器 -->
-    <form class="container" @submit.prevent="submit">
+    <div class="container" @submit.prevent="submit">
       <!-- 内容区容器 -->
       <div class="content">
         <!-- 内容区的头部 -->
@@ -53,7 +53,7 @@ const submit = () => {
 
         <Footer />
       </div>
-    </form>
+    </div>
     <!-- 版权 -->
     <KUNGalgameFooter style="margin: 0 auto" />
     <span style="margin: 0 auto; color: var(--kungalgame-font-color-3)"