From 32cdbcbcba165836c15d30bb57aeba0090909cf9 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Wed, 30 Aug 2023 19:38:37 +0800
Subject: [PATCH] feat: message i18n

---
 src/api/edit/types/edit.ts                 |  6 +-
 src/components/alert/KUNGalgameMessage.vue | 29 ++++++---
 src/components/alert/Message.ts            | 23 +++++--
 src/styles/editor/editor.scss              |  5 ++
 src/views/edit/components/Button.vue       | 75 ++++++++++++++--------
 5 files changed, 95 insertions(+), 43 deletions(-)

diff --git a/src/api/edit/types/edit.ts b/src/api/edit/types/edit.ts
index e42275e8..cf4ef499 100644
--- a/src/api/edit/types/edit.ts
+++ b/src/api/edit/types/edit.ts
@@ -2,9 +2,9 @@ export interface EditCreateTopicRequestData {
   title: string
   content: string
   time: number
-  tags: string
-  category: string
-  uid: string
+  tags: Array<string>
+  category: Array<string>
+  uid: number
 }
 
 export interface EditKUNGalgameTopic {
diff --git a/src/components/alert/KUNGalgameMessage.vue b/src/components/alert/KUNGalgameMessage.vue
index 8e374ed0..fff2efb0 100644
--- a/src/components/alert/KUNGalgameMessage.vue
+++ b/src/components/alert/KUNGalgameMessage.vue
@@ -1,14 +1,25 @@
 <script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 
-const { message, type} = defineProps([
-  'message',
-  'type',
-])
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+
+const props = defineProps<{
+  messageCN: string
+  messageEN: string
+  type: `warn` | `success` | `error` | `info`
+}>()
+
+const message =
+  settingsStore.showKUNGalgameLanguage === 'en'
+    ? props.messageEN
+    : props.messageCN
 
 const messageClass = (type: string): string => {
-  if (type === 'warning') {
+  if (type === 'warn') {
     return `animate__animated animate__headShake ${type}`
   } else if (type === 'success') {
     return `animate__animated animate__bounceInDown ${type}`
@@ -25,7 +36,7 @@ const messageClass = (type: string): string => {
 <template>
   <div class="container">
     <div class="message" :class="messageClass(type)">
-      <span class="icon" v-if="type === 'warning'"
+      <span class="icon" v-if="type === 'warn'"
         ><Icon icon="line-md:alert"
       /></span>
       <span class="icon" v-else-if="type === 'success'"
@@ -62,7 +73,7 @@ const messageClass = (type: string): string => {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 10px 17px;
+  padding: 1vh 10vw;
   box-shadow: var(--shadow);
   z-index: 9999;
   span {
@@ -77,7 +88,7 @@ const messageClass = (type: string): string => {
   margin-right: 17px;
 }
 
-.warning {
+.warn {
   border: 1px solid var(--kungalgame-yellow-3);
   .icon {
     color: var(--kungalgame-yellow-3);
diff --git a/src/components/alert/Message.ts b/src/components/alert/Message.ts
index 9b1c68a3..f6901eff 100644
--- a/src/components/alert/Message.ts
+++ b/src/components/alert/Message.ts
@@ -1,17 +1,30 @@
 import { render, h } from 'vue'
 import Message from './KUNGalgameMessage.vue'
 
+type MessageType = `warn` | `success` | `error` | `info`
+
+/**
+ * @param {string} messageEN - 消息的英文
+ * @param {string} messageCN - 消息的中文
+ * @param {type} type - 消息的类型，有 `warn` | `success` | `error` | `info` 四种
+ * @param {number} duration - 消息的展示时间，可选，默认 3s
+ */
+
 export default (
-  message: string,
-  type: string,
-  duration: number
+  messageEN: string,
+  messageCN: string,
+  type: MessageType,
+  duration?: number
 ) => {
   const messageNode = h(Message, {
-    message,
+    messageCN,
+    messageEN,
     type,
     duration,
   })
 
+  const time = duration ? duration : 3000
+
   const handleDestroy = () => {
     // 从 body 上移除组件
     render(null, document.body)
@@ -19,7 +32,7 @@ export default (
 
   setTimeout(() => {
     handleDestroy()
-  }, duration)
+  }, time)
 
   render(messageNode, document.body)
 }
diff --git a/src/styles/editor/editor.scss b/src/styles/editor/editor.scss
index 1f63c1fd..b78ce46c 100644
--- a/src/styles/editor/editor.scss
+++ b/src/styles/editor/editor.scss
@@ -17,6 +17,11 @@ s {
   text-decoration: line-through;
 }
 
+/* 下划线，不然会不显示 */
+u {
+  text-decoration: underline;
+}
+
 /* 设置为 none，不然黑夜模式代码块会花屏 */
 * {
   text-shadow: none;
diff --git a/src/views/edit/components/Button.vue b/src/views/edit/components/Button.vue
index d93e4c78..a2ab6ff5 100644
--- a/src/views/edit/components/Button.vue
+++ b/src/views/edit/components/Button.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-// 全局消息组件
+// 全局消息组件（底部）
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// Vue 函数
 import { toRaw } from 'vue'
 // 导入编辑帖子的 store
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
@@ -9,15 +12,35 @@ import { useKUNGalgamerStore } from '@/store/modules/kungalgamer'
 import { storeToRefs } from 'pinia'
 // 导入路由
 import { useRouter } from 'vue-router'
+// 导入将富文本变成纯文本的函数
+import { getPlainText } from '@/utils/getPlainText'
+// 导入请求数据格式
+import {
+  EditCreateTopicRequestData,
+  EditCreateTopicResponseData,
+} from '@/api/index'
 
 const router = useRouter()
 
 const topicData = storeToRefs(useKUNGalgameEditStore())
 
-const message = useKUNGalgameMessageStore()
+const messageStore = useKUNGalgameMessageStore()
+
+const checkPublish = (topicData: EditCreateTopicRequestData) => {
+  if (!topicData.title.trim()) {
+    // 标题为空的话，警告
+    message('Title cannot be empty!', '标题不可为空！', 'warn')
+    return false
+  } else if (topicData.content.trim()) {
+    console.log(getPlainText(topicData.content.trim()).length)
+    return true
+  } else {
+    return true
+  }
+}
 
 const handlePublish = async () => {
-  const res = await message.alert('AlertInfo.edit.publish', true)
+  const res = await messageStore.alert('AlertInfo.edit.publish', true)
   // 这里实现用户的点击确认取消逻辑
   if (res) {
     // 坑，storeToRefs 不等于 vue 中的 ref 或者 reactive，不能用 toRaw
@@ -28,41 +51,41 @@ const handlePublish = async () => {
       title: rawData.title,
       content: rawData.content,
       time: Date.now(),
-      tags: JSON.stringify(rawData.tags),
-      category: JSON.stringify(rawData.category),
-      uid: useKUNGalgamerStore().uid.toString(),
+      tags: rawData.tags,
+      category: rawData.category,
+      uid: useKUNGalgamerStore().uid,
     }
 
-    // 后端返回的创建好的话题数据
-    const createdTopic = await useKUNGalgameEditStore().createNewTopic(
-      topicToCreate
-    )
+    // 检查提交数据是否合法
+    if (checkPublish(topicToCreate)) {
+      // 后端返回的创建好的话题数据
+      const createdTopic: EditCreateTopicResponseData =
+        await useKUNGalgameEditStore().createNewTopic(topicToCreate)
 
-    // 获取创建好话题的 tid
-    const tid = createdTopic.data.tid
+      // 获取创建好话题的 tid
+      const tid = createdTopic.data.tid
 
-    console.log(tid)
+      // 将用户 push 进对应 tid 话题的详情页面
+      router.push({
+        name: 'Topic',
+        params: {
+          tid: tid,
+        },
+      })
 
-    // 将用户 push 进对应 tid 话题的详情页面
-    router.push({
-      name: 'Topic',
-      params: {
-        tid: tid,
-      },
-    })
-
-    message.info('AlertInfo.edit.publishSuccess')
-    // 清除数据，并不再保存数据，因为此时该话题已被发布，这里使用 pinia 自带的 $reset 重置状态
-    useKUNGalgameEditStore().$reset()
+      messageStore.info('AlertInfo.edit.publishSuccess')
+      // 清除数据，并不再保存数据，因为此时该话题已被发布，这里使用 pinia 自带的 $reset 重置状态
+      useKUNGalgameEditStore().$reset()
+    }
   } else {
-    message.info('AlertInfo.edit.publishCancel')
+    messageStore.info('AlertInfo.edit.publishCancel')
   }
 }
 
 const handleSave = () => {
   // 这个值为 true 的时候每次页面加载的时候都会预加载上一次的话题数据
   topicData.isSave.value = true
-  message.info('AlertInfo.edit.draft')
+  messageStore.info('AlertInfo.edit.draft')
 }
 </script>