From 852503ec0bc8572cc6d2e2c885d204e24a9e0103 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Sat, 9 Sep 2023 23:42:55 +0800
Subject: [PATCH] feat: multiple page width settings

---
 .vscode/settings.json                         |  1 +
 src/components/quill-editor/EditorFooter.vue  |  4 +-
 .../setting-panel/KUNGalgameSettingPanel.vue  | 46 ++--------
 .../setting-panel/components/PageWidth.vue    | 86 +++++++++++++++++++
 src/components/top-bar/KUNGalgameTopBar.vue   |  2 +-
 src/language/en.ts                            |  7 +-
 src/language/zh.ts                            |  7 +-
 src/router/modules/home.ts                    |  2 +-
 src/store/modules/settings.ts                 | 13 ++-
 src/views/Home/content/MainPageContent.vue    |  8 +-
 src/views/bylaw/Bylaw.vue                     | 14 ++-
 src/views/edit/Edit.vue                       | 13 ++-
 src/views/kungalgame/KUNGalgame.vue           | 14 ++-
 src/views/pool/Pool.vue                       | 14 ++-
 src/views/technique/Technique.vue             | 14 ++-
 src/views/thanks-list/ThanksList.vue          | 14 ++-
 src/views/topic/KUNGalgameTopicPage.vue       | 42 +++++----
 src/views/topic/content/components/Tags.vue   |  2 +-
 18 files changed, 227 insertions(+), 76 deletions(-)
 create mode 100644 src/components/setting-panel/components/PageWidth.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4ba03f03..9e8cee6d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,6 +24,7 @@
     "Licence",
     "loli",
     "majesticons",
+    "mingcute",
     "mockjs",
     "moemoe",
     "moemoepoint",
diff --git a/src/components/quill-editor/EditorFooter.vue b/src/components/quill-editor/EditorFooter.vue
index b0da3da4..c6c9812a 100644
--- a/src/components/quill-editor/EditorFooter.vue
+++ b/src/components/quill-editor/EditorFooter.vue
@@ -79,8 +79,9 @@ const handelClickSettings = () => {
           <li>{{ $tm('edit.help1') }}</li>
           <li>{{ $tm('edit.help2') }}</li>
           <li>{{ $tm('edit.help3') }}</li>
+          <li>{{ $tm('edit.help4') }}</li>
           <li>
-            {{ $tm('edit.help4') }}
+            {{ $tm('edit.help5') }}
             <span @click="router.push('/contact')">
               {{ $tm('edit.contact') }}
             </span>
@@ -138,7 +139,6 @@ const handelClickSettings = () => {
     ul {
       display: flex;
       flex-direction: column;
-      border: 1px solid var(--kungalgame-blue-1);
       background-color: var(--kungalgame-white);
       padding: 5px;
       border-radius: 5px;
diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
index 7e963dd5..c0b507b4 100644
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@@ -8,15 +8,15 @@ import Loli from './components/Loli.vue'
 import Mode from './components/Mode.vue'
 // 导入语言切换组件
 import SwitchLanguage from './components/SwitchLanguage.vue'
+// 页面宽度调整组件
+import PageWidth from './components/PageWidth.vue'
 // 引入背景设置组件
 import Background from './components/Background.vue'
 // 导入设置面板 store
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
-import { storeToRefs } from 'pinia'
 
 // 使用设置面板的 store
 const settingsStore = useKUNGalgameSettingsStore()
-const { showKUNGalgameMainPageWidth } = storeToRefs(settingsStore)
 
 const emits = defineEmits(['close'])
 
@@ -46,24 +46,11 @@ const handelCloseSettingsPanel = () => {
       <!-- 语言切换组件 -->
       <SwitchLanguage />
 
-      <div>
-        <!-- 设置主页的宽度 -->
-        <div class="width-container">
-          <span>{{ $tm('header.settings.width') }}</span>
-          <span>{{ showKUNGalgameMainPageWidth }}%</span>
-        </div>
-        <div class="page-width">
-          <span>50%</span
-          ><input
-            class="main"
-            min="50"
-            max="90"
-            step="0.1"
-            type="range"
-            v-model="showKUNGalgameMainPageWidth"
-          /><span>90%</span>
-        </div>
-      </div>
+      <!-- 页面宽度调整组件 -->
+      <PageWidth />
+
+      <!-- 设置页面的字体 TODO: -->
+      <div class="font"></div>
 
       <!-- 背景设置组件 -->
       <Background />
@@ -128,24 +115,6 @@ const handelCloseSettingsPanel = () => {
   }
 }
 
-.page-width {
-  font-size: 15px;
-  display: flex;
-  span {
-    margin-top: 15px;
-  }
-}
-/* 主页页面宽度滑动条 */
-.main {
-  width: 100%;
-  height: 10px;
-  margin: 20px 0;
-}
-
-.width-container {
-  display: flex;
-  justify-content: space-between;
-}
 .reset {
   font-size: 15px;
   cursor: pointer;
@@ -168,6 +137,7 @@ const handelCloseSettingsPanel = () => {
   margin: 20px;
   cursor: pointer;
 }
+
 @media (max-width: 1000px) {
   .root {
     display: none;
diff --git a/src/components/setting-panel/components/PageWidth.vue b/src/components/setting-panel/components/PageWidth.vue
new file mode 100644
index 00000000..551d782b
--- /dev/null
+++ b/src/components/setting-panel/components/PageWidth.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onActivated, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+
+const route = useRoute()
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+
+const pageWidth = ref(0)
+const routeName = computed(() => route.name as string)
+
+const pageNameArray = [
+  'KUN',
+  'Topic',
+  'Edit',
+  'KUNGalgame',
+  'Pool',
+  'Bylaw',
+  'Technique',
+  'ThanksList',
+]
+
+const initPageWidth = () => {
+  if (pageNameArray.includes(routeName.value)) {
+    pageWidth.value = showKUNGalgamePageWidth.value[routeName.value]
+  }
+}
+
+watch(pageWidth, () => {
+  if (pageNameArray.includes(routeName.value)) {
+    showKUNGalgamePageWidth.value[routeName.value] = pageWidth.value
+  }
+})
+
+onMounted(() => {
+  initPageWidth()
+})
+
+onActivated(() => {
+  initPageWidth()
+})
+</script>
+
+<template>
+  <!-- 设置某些页面的宽度 -->
+  <div class="width">
+    <div class="width-container">
+      <span>{{ $tm('header.settings.width') }}</span>
+      <span>{{ pageWidth }}%</span>
+    </div>
+    <div class="page-width">
+      <span>50%</span
+      ><input
+        class="main"
+        min="50"
+        max="90"
+        step="0.1"
+        type="range"
+        v-model="pageWidth"
+      /><span>90%</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page-width {
+  font-size: 15px;
+  display: flex;
+  span {
+    margin-top: 15px;
+  }
+}
+/* 主页页面宽度滑动条 */
+.main {
+  width: 100%;
+  height: 10px;
+  margin: 20px 0;
+}
+
+.width-container {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/top-bar/KUNGalgameTopBar.vue b/src/components/top-bar/KUNGalgameTopBar.vue
index e367da52..f50f057d 100644
--- a/src/components/top-bar/KUNGalgameTopBar.vue
+++ b/src/components/top-bar/KUNGalgameTopBar.vue
@@ -92,7 +92,7 @@ onBeforeRouteLeave(() => {
       enter-active-class="animate__animated animate__jackInTheBox animate__faster"
       leave-active-class="animate__animated animate__fadeOutRight animate__faster"
     >
-      <KeepAlive>
+      <KeepAlive exclude="PageWidth">
         <KUNGalgameSettingsPanel
           v-if="showKUNGalgamePanel"
           @close="showKUNGalgamePanel = false"
diff --git a/src/language/en.ts b/src/language/en.ts
index 2020105e..2e9fc57a 100644
--- a/src/language/en.ts
+++ b/src/language/en.ts
@@ -10,7 +10,7 @@ export default {
       name: 'Settings',
       mode: 'Mode',
       language: 'Language',
-      width: 'Main Page Width',
+      width: 'Page Width',
       background: 'Background Setting',
       preset: 'Use our preset background',
       custom: 'Custom Background',
@@ -133,8 +133,9 @@ export default {
     refresh: 'Refresh the page',
     help1: "The topic's title length should be between 1 and 40 characters.",
     help2: "You can click on the left settings to adjust the editor's mode.",
-    help3: "The website's code is handwritten, and errors are inevitable.",
-    help4: 'If you encounter any errors, please',
+    help3: 'We recommend finishing your text before formatting.',
+    help4: "The website's code is handwritten, and errors are inevitable.",
+    help5: 'If you encounter any errors, please',
     contact: ' Contact Us.',
     tags: 'Please input topic tags',
     hint: `Hint: (A single tag should be within 14 characters, choose at least one and up to 7 tags). You can enter text and press \`Enter\` to create a tag.`,
diff --git a/src/language/zh.ts b/src/language/zh.ts
index f66296b6..390fd1f7 100644
--- a/src/language/zh.ts
+++ b/src/language/zh.ts
@@ -10,7 +10,7 @@ export default {
       name: '设置面板',
       mode: '模式切换',
       language: '网站语言设置',
-      width: '主页页面宽度设置',
+      width: '页面宽度设置',
       background: '背景设置',
       preset: '点击使用我们预设的背景',
       custom: '自定义背景',
@@ -133,8 +133,9 @@ export default {
     refresh: '刷新页面生效',
     help1: '话题的标题长度需要在 1 到 40 字之间',
     help2: '您可以点击左侧的设置调整编辑器的模式',
-    help3: '网站的代码是手写的，错误在所难免',
-    help4: '如果您遇到错误，请',
+    help3: '我们建议您写完文本再进行格式化',
+    help4: '网站的代码是手写的，错误在所难免',
+    help5: '如果您遇到错误，请',
     contact: ' 联系我们',
     tags: '请输入话题的关键词',
     hint: `提示：（单个关键词 14 个字符以内，至少选择一个、最多 7 个）, 您可以输入文字后按下 ' Enter ' 创建关键词`,
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 16770fb4..046c20ae 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -10,7 +10,7 @@ const index: RouteRecordRaw[] = [
     redirect: '/kun',
     children: [
       {
-        name: 'index',
+        name: 'KUN',
         path: 'kun',
         component: () => import('@/views/Home/KUNGalgameMainPage.vue'),
         meta: {
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 870faed4..9ab59d7e 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -11,7 +11,7 @@ interface KUNGalgameSettings {
   // 网站显示语言
   showKUNGalgameLanguage: string
   // 主页宽度
-  showKUNGalgameMainPageWidth: string
+  showKUNGalgamePageWidth: Record<string, number>
   // 背景图
   showKUNGalgameBackground: string
   // 自定义背景图
@@ -25,7 +25,16 @@ export const useKUNGalgameSettingsStore = defineStore({
   state: (): KUNGalgameSettings => ({
     showKUNGalgameMode: mode,
     showKUNGalgameLanguage: KUNGalgameLanguage,
-    showKUNGalgameMainPageWidth: '61.8',
+    showKUNGalgamePageWidth: {
+      KUN: 61.8,
+      Topic: 90,
+      Edit: 90,
+      KUNGalgame: 90,
+      Pool: 90,
+      Bylaw: 90,
+      Technique: 90,
+      ThanksList: 90,
+    },
     showKUNGalgameBackground: 'none',
     showKUNGalgameCustomBackground: '',
   }),
diff --git a/src/views/Home/content/MainPageContent.vue b/src/views/Home/content/MainPageContent.vue
index 661e45a4..f536accc 100644
--- a/src/views/Home/content/MainPageContent.vue
+++ b/src/views/Home/content/MainPageContent.vue
@@ -7,9 +7,9 @@ import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 // 使用设置面板的 store
 const settingsStore = useKUNGalgameSettingsStore()
-const { showKUNGalgameMainPageWidth } = storeToRefs(settingsStore)
-const width = computed(() => {
-  return showKUNGalgameMainPageWidth.value + '%'
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const mainPageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.KUN + '%'
 })
 </script>
 
@@ -41,7 +41,7 @@ const width = computed(() => {
 }
 /* 可视内容部分宽度 */
 .content-container {
-  width: v-bind(width);
+  width: v-bind(mainPageWidth);
   transition: all 0.2s;
   height: 100%;
   margin: 0 auto;
diff --git a/src/views/bylaw/Bylaw.vue b/src/views/bylaw/Bylaw.vue
index f815364c..f814639e 100644
--- a/src/views/bylaw/Bylaw.vue
+++ b/src/views/bylaw/Bylaw.vue
@@ -1,5 +1,16 @@
 <script setup lang="ts">
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
+
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const bylawPageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.Bylaw + '%'
+})
 </script>
 
 <template>
@@ -99,7 +110,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   margin: 0 auto;
   padding: 5px;
   /* 固定宽高 */
-  width: 70%;
+  transition: all 0.2s;
+  width: v-bind(bylawPageWidth);
   max-width: 1300px;
   height: 100%;
   background-color: var(--kungalgame-trans-white-5);
diff --git a/src/views/edit/Edit.vue b/src/views/edit/Edit.vue
index 7f0b12d0..5974ff84 100644
--- a/src/views/edit/Edit.vue
+++ b/src/views/edit/Edit.vue
@@ -4,6 +4,17 @@ 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 { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const editPageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.Edit + '%'
+})
 </script>
 
 <template>
@@ -46,7 +57,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 /* 内容部分的总容器 */
 .container {
   transition: all 0.2s;
-  width: 80%;
+  width: v-bind(editPageWidth);
   max-width: 1500px;
   margin: 0 auto;
   /* 容器的阴影 */
diff --git a/src/views/kungalgame/KUNGalgame.vue b/src/views/kungalgame/KUNGalgame.vue
index ba3d2711..2e2fcccd 100644
--- a/src/views/kungalgame/KUNGalgame.vue
+++ b/src/views/kungalgame/KUNGalgame.vue
@@ -3,6 +3,17 @@
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 // 导入 Aside
 import Aside from './components/Aside.vue'
+
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const kungalgamePageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.KUNGalgame + '%'
+})
 </script>
 
 <template>
@@ -189,7 +200,8 @@ import Aside from './components/Aside.vue'
   border-radius: 7px;
   /* 固定高度 */
   height: 1300px;
-  width: 90%;
+  transition: all 0.2s;
+  width: v-bind(kungalgamePageWidth);
   max-width: 1300px;
   /* 居中 */
   margin: auto;
diff --git a/src/views/pool/Pool.vue b/src/views/pool/Pool.vue
index 8300324f..04680678 100644
--- a/src/views/pool/Pool.vue
+++ b/src/views/pool/Pool.vue
@@ -5,6 +5,17 @@ import Topic from './components/Topic.vue'
 import Bar from './components/Bar.vue'
 
 import { topic } from './components/topic'
+
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const poolPageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.Pool + '%'
+})
 </script>
 
 <template>
@@ -39,7 +50,8 @@ import { topic } from './components/topic'
 /* 话题池容器 */
 .pool-container {
   /* 占页面的宽度比例 */
-  width: 90%;
+  transition: all 0.2s;
+  width: v-bind(poolPageWidth);
   /* 居中 */
   margin: 0 auto;
   display: flex;
diff --git a/src/views/technique/Technique.vue b/src/views/technique/Technique.vue
index 75a99c55..e388c090 100644
--- a/src/views/technique/Technique.vue
+++ b/src/views/technique/Technique.vue
@@ -14,6 +14,17 @@ onBeforeMount(async () => {
     console.error('Error fetching topics:', error)
   }
 })
+
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const techniquePageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.Technique + '%'
+})
 </script>
 
 <template>
@@ -47,7 +58,8 @@ onBeforeMount(async () => {
   padding: 5px;
   height: 1400px;
   /* 占总页面的宽度 */
-  width: 95%;
+  transition: all 0.2s;
+  width: v-bind(techniquePageWidth);
   /* 水平垂直居中 */
   margin: 0 auto;
   display: flex;
diff --git a/src/views/thanks-list/ThanksList.vue b/src/views/thanks-list/ThanksList.vue
index 6ef32bc9..8559ffe9 100644
--- a/src/views/thanks-list/ThanksList.vue
+++ b/src/views/thanks-list/ThanksList.vue
@@ -1,6 +1,17 @@
 <script setup lang="ts">
 // 导入 Footer
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
+
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const thanksListPageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.ThanksList + '%'
+})
 </script>
 
 <template>
@@ -97,7 +108,8 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 }
 .container {
   /* 固定宽高 */
-  max-width: 900px;
+  transition: all 0.2s;
+  width: v-bind(thanksListPageWidth);
   height: 1300px;
   /* 居中 */
   margin: auto;
diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue
index f4c13acd..89dd3b26 100644
--- a/src/views/topic/KUNGalgameTopicPage.vue
+++ b/src/views/topic/KUNGalgameTopicPage.vue
@@ -4,27 +4,38 @@
 <script setup lang="ts">
 import KUNGalgameTopicAside from './aside/KUNGalgameTopicAside.vue'
 import KUNGalgameTopicContent from './content/KUNGalgameTopicContent.vue'
-
 // 异步导入回复面板
-import { defineAsyncComponent, onBeforeMount } from 'vue'
-
-// 导入话题页面 store
-import { useKUNGalgameTopicStore } from '@/store/modules/topic'
-import { storeToRefs } from 'pinia'
-import { onBeforeRouteLeave } from 'vue-router'
-
-// 使用话题页面的 store
-const settingsStore = useKUNGalgameTopicStore()
-const { isShowAdvance, isEdit } = storeToRefs(settingsStore)
-
 const ReplyPanel = defineAsyncComponent(
   () => import('@/views/topic/content/components/ReplyPanel.vue')
 )
 
-// 在页面跳转和刷新时重置回复面板状态
+import { defineAsyncComponent, onBeforeMount, computed } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+// 导入话题页面 store
+import { useKUNGalgameTopicStore } from '@/store/modules/topic'
+
+import { storeToRefs } from 'pinia'
+
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+// 使用话题页面的 store
+const topicStore = useKUNGalgameTopicStore()
+
+const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+const { isShowAdvance, isEdit } = storeToRefs(topicStore)
+
+/* 话题界面的页面宽度 */
+const topicPageWidth = computed(() => {
+  return showKUNGalgamePageWidth.value.Topic + '%'
+})
+
+// 在页面跳转和刷新时重置回复面板状态，关闭高级模式、关闭面板
 const resetPanelStatus = () => {
-  isEdit.value = false
   isShowAdvance.value = false
+  isEdit.value = false
 }
 
 onBeforeRouteLeave(() => {
@@ -67,7 +78,8 @@ onBeforeMount(() => {
 }
 /* 下方可视内容区的容器 */
 .content-wrapper {
-  width: 90%;
+  width: v-bind(topicPageWidth);
+  transition: all 0.2s;
   max-width: 1500px;
   height: 100%;
   margin: 0 auto;
diff --git a/src/views/topic/content/components/Tags.vue b/src/views/topic/content/components/Tags.vue
index 211c9d66..26d82b2f 100644
--- a/src/views/topic/content/components/Tags.vue
+++ b/src/views/topic/content/components/Tags.vue
@@ -36,7 +36,7 @@ const props = defineProps<{
     flex-wrap: wrap;
     overflow-y: scroll;
     li {
-      margin: 5px;
+      margin: 3px;
       font-size: small;
       padding: 2px;
       background-color: var(--kungalgame-trans-blue-0);