feat: rewrite page leave

src/language/en.ts

@@ -211,7 +211,11 @@ export default {
       publish: 'Confirm to publish?',
       publishSuccess: 'Publish Successfully',
       publishCancel: 'Cancel Publish',
+      rewrite: 'Confirm to Rewrite?',
+      rewriteSuccess: 'Rewrite Successfully',
+      rewriteCancel: 'Cancel Rewrite',
       draft: 'The draft has been saved successfully!',
+      leave: 'Confirm leaving the page? Your changes will not be saved.',
     },
     login: {
       success: 'Login Successfully! Welcome to KUN Visual Novel ~ ',

src/language/zh.ts

@@ -214,6 +214,7 @@ export default {
       rewriteSuccess: 'Rewrite 成功',
       rewriteCancel: '取消 Rewrite',
       draft: '草稿已经保存成功！',
+      leave: '确认离开界面吗？您的更改将不会保存',
     },
     login: {
       login: '登陆成功!欢迎来到 鲲 Galgame ~ ',

src/views/edit/Edit.vue

@@ -1,20 +1,50 @@
 <script setup lang="ts">
+import { onBeforeRouteLeave } from 'vue-router'
+// 全局消息组件（底部）
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
 // 引入编辑器
 import QuillEditor from '@/components/quill-editor/QuillEditor.vue'
 import Tags from './components/Tags.vue'
 import Footer from './components/Footer.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 
+// 导入编辑话题的 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
 // 导入设置面板 store
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
+
+// 使用编辑话题的 store
+const { topicRewrite } = storeToRefs(useKUNGalgameEditStore())
 // 使用设置面板的 store
-const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(useKUNGalgameSettingsStore())
-const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
 const editPageWidth = computed(() => {
   return showKUNGalgamePageWidth.value.Edit + '%'
 })
+
+// 路由离开时提醒用户发布重新编辑的话题
+onBeforeRouteLeave(async (to, from, next) => {
+  // 如果是正在更新话题
+  if (topicRewrite.value.isTopicRewriting) {
+    // 获取用户点击的结果
+    const res = await useKUNGalgameMessageStore().alert(
+      'AlertInfo.edit.leave',
+      true
+    )
+    if (res) {
+      // 重置重新编辑话题的数据
+      useKUNGalgameEditStore().resetRewriteTopicData()
+      // 用户确认离开，继续导航
+      next()
+    } else {
+      // 用户取消离开，阻止导航
+      next(false)
+    }
+  } else {
+    next()
+  }
+})
 </script>
 
 <template>
@@ -37,6 +67,7 @@ const editPageWidth = computed(() => {
         <Footer />
       </div>
     </div>
+
     <!-- 版权 -->
     <KUNGalgameFooter style="margin: 0 auto; padding-top: 10px" />
     <span style="margin: 0 auto; color: var(--kungalgame-font-color-3)"

src/views/topic/components/MasterFooter.vue

@@ -9,6 +9,8 @@ import { TopicUserInfo } from '@/api'
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 // 导入话题页面 store
 import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+// 导入用户的 store
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import { storeToRefs } from 'pinia'
 
 // 使用编辑界面的 store
@@ -39,6 +41,14 @@ const props = defineProps<{
   rUser: TopicUserInfo
 }>()
 
+// 是否具有重新编辑的权限
+/**
+ * 这里只是简单起见，不显示重新编辑
+ * 实际上如果用户自己修改了 localStorage 中保存的信息，这个验证就失效了
+ * 但是修改了也没有用，验证逻辑位于后端
+ */
+const isShowRewrite = useKUNGalgameUserStore().uid === props.rUser.uid
+
 // 点击回复打开回复面板
 const handelReply = async () => {
   // 保存必要信息，以便发表回复
@@ -112,7 +122,7 @@ const handleClickEdit = () => {
           <span class="icon"><Icon icon="ph:user-focus-duotone" /></span>
         </li>
         <!-- 编辑 -->
-        <li>
+        <li v-if="isShowRewrite">
           <span @click="handleClickEdit" class="icon">
             <Icon icon="line-md:pencil-twotone-alt" />
           </span>

src/views/topic/components/reply/ReplyPanelBtn.vue

@@ -121,6 +121,11 @@ const handleShowAdvance = () => {
   background-color: var(--kungalgame-blue-4);
   transition: 0.1s;
 }
+.confirm-btn:active {
+  background-color: var(--kungalgame-blue-3);
+  transform: scale(0.8);
+}
+
 /* 保存按钮的样式 */
 .save-btn {
   color: var(--kungalgame-pink-4);
@@ -135,6 +140,7 @@ const handleShowAdvance = () => {
   background-color: var(--kungalgame-pink-3);
   transform: scale(0.8);
 }
+
 /* 高级选项按钮的样式 */
 .advance-btn {
   color: var(--kungalgame-purple-4);
@@ -146,7 +152,7 @@ const handleShowAdvance = () => {
   transition: 0.1s;
 }
 .advance-btn:active {
-  background-color: var(--kungalgame-red-3);
+  background-color: var(--kungalgame-purple-4);
   transform: scale(0.8);
 }