From 8c5011186bf7a9a0032226ada94d04977f4b5273 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Sun, 22 Oct 2023 23:15:07 +0800
Subject: [PATCH] feat: kungalgame page i18n

---
 src/components/top-bar/KUNGalgameTopBar.vue |  13 +-
 src/store/types/settings.d.ts               |   2 +-
 src/views/kungalgame/KUNGalgame.vue         | 391 ++++++++++++++++++--
 3 files changed, 366 insertions(+), 40 deletions(-)

diff --git a/src/components/top-bar/KUNGalgameTopBar.vue b/src/components/top-bar/KUNGalgameTopBar.vue
index 42ba74c2..6a1e4388 100644
--- a/src/components/top-bar/KUNGalgameTopBar.vue
+++ b/src/components/top-bar/KUNGalgameTopBar.vue
@@ -92,6 +92,7 @@ onBeforeRouteLeave(() => {
       >
         <Icon icon="uiw:setting-o" />
       </span>
+
       <div class="avatar">
         <img
           v-if="avatarMin"
@@ -291,11 +292,19 @@ $navNumber: v-bind(navItemNum);
 }
 
 @media (max-width: 1000px) {
-  span {
-    display: none;
+  .kungalgame {
+    span {
+      display: none;
+    }
+    img {
+      margin-right: 0 !important;
+    }
   }
 }
 @media (max-width: 700px) {
+  .settings {
+    display: none !important;
+  }
   .top-bar {
     display: none;
   }
diff --git a/src/store/types/settings.d.ts b/src/store/types/settings.d.ts
index bee5fe8a..4502d117 100644
--- a/src/store/types/settings.d.ts
+++ b/src/store/types/settings.d.ts
@@ -3,7 +3,7 @@ export interface KUNGalgameSettingsStore {
   // 白天黑夜模式切换
   showKUNGalgameMode: string
   // 网站显示语言
-  showKUNGalgameLanguage: string
+  showKUNGalgameLanguage: 'en' | 'zh'
   // 主页宽度
   showKUNGalgamePageWidth: Record<string, number>
   // 网站字体
diff --git a/src/views/kungalgame/KUNGalgame.vue b/src/views/kungalgame/KUNGalgame.vue
index 5195ab68..007a3a01 100644
--- a/src/views/kungalgame/KUNGalgame.vue
+++ b/src/views/kungalgame/KUNGalgame.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
-// 导入 Footer
 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 { showKUNGalgamePageWidth, showKUNGalgameLanguage } = storeToRefs(
+  useKUNGalgameSettingsStore()
+)
 const kungalgamePageWidth = computed(() => {
   return showKUNGalgamePageWidth.value.KUNGalgame + '%'
 })
@@ -18,18 +16,294 @@ const kungalgamePageWidth = computed(() => {
 
 <template>
   <div class="root">
-    <!-- 内容区容器 -->
     <div class="content-container">
-      <!-- 内容区 -->
       <div class="content">
         <Aside />
-        <!-- 文章容器 -->
-        <div class="article">
+
+        <!-- KUNGalgame en translation -->
+        <div v-if="showKUNGalgameLanguage === 'en'" class="article">
+          <h1>About Us</h1>
+          <h2 id="introduction">Website Introduction</h2>
+          <p>
+            KUN Visual Novel is a Visual Novel forum construction project
+            initiated by
+            <span class="skip">
+              <a
+                href="https://github.com/KUN1007"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                KUN
+              </a>
+            </span>
+            individually, and it is currently in the
+            <span class="skip">
+              <a
+                href="https://github.com/KUN1007/kun-galgame-vue"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                development phase
+              </a> </span
+            >.
+          </p>
+          <br />
+          <p>The significance of KUN Visual Novel is:</p>
+          <br />
+          <br />
+          <ul class="list">
+            <li>
+              Promoting truly good games, so everyone can see real
+              <span class="skip">visualized data</span> on websites like VNDB
+              and avoid being misled by "experts."
+            </li>
+            <li>
+              <strong>
+                Staying away from the modern internet trend of praising and
+                bashing, and considering criticism a virtue.
+              </strong>
+            </li>
+            <li>
+              Empowering anyone to learn basic computer skills to avoid "newbie"
+              issues.
+            </li>
+            <li>
+              Building a forum focused on individual user enjoyment, resisting
+              the creation of hierarchies.
+            </li>
+            <li>
+              Most current websites use templates, making them all look the same
+              and causing aesthetic fatigue.
+            </li>
+            <li>... etc.</li>
+          </ul>
+          <br />
+          <br />
+          <p>
+            We believe: "<strong style="color: red"
+              >What makes you happy, what makes you genuinely laugh, is a truly
+              excellent Visual Novel!</strong
+            >"
+          </p>
+          <br />
+          <br />
+          <p>
+            Our ultimate goal is to create
+            <strong>the world's best visual novel forum!</strong>
+          </p>
+          <br />
+          <br />
+          <p>
+            As of version 1.0.0, the design, development, maintenance, and
+            promotion of the forum are all led by me alone. If you have ideas
+            for forum construction, opinions about the forum environment, or
+            just want to chat, you can join us
+            <span class="skip">
+              <RouterLink to="/contact">here</RouterLink> </span
+            >.
+          </p>
+          <br />
+          <br />
+          <p>
+            The forum's construction has received invaluable assistance from
+            many individuals, including (in no particular order):
+          </p>
+          <br />
+          <ul class="list">
+            <li>
+              <span class="skip">
+                <a
+                  href="http://acgngames.net"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  ACGNGAME
+                </a>
+              </span>
+              (Galworld) Webmaster
+            </li>
+            <li>
+              <span class="skip">
+                <a
+                  href="http://shinnku.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Shinnku
+                </a>
+              </span>
+              (UpsetGal) Webmaster
+            </li>
+            <li>
+              <span class="skip">
+                <a
+                  href="http://www.ymgal.games"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Ymgal
+                </a>
+              </span>
+              (YueMu Galgame) Webmaster
+            </li>
+            <li>... and more.</li>
+          </ul>
+          <br />
+          <br />
+          <p>
+            The design and development stages of the forum were inspired by
+            several well-designed websites, including (in no particular order):
+          </p>
+          <br />
+          <ul class="list">
+            <li>Twitter.com - Topic detail page</li>
+            <li>github.com - Color schemes</li>
+            <li>
+              bbs.kfmax.com (ScarletMoon) - User information categorization
+            </li>
+            <li>... and more.</li>
+          </ul>
+          <br />
+          <br />
+          <p>
+            Among them, the biggest inspiration came from Codepen and the design
+            philosophies of many experts on GitHub. You can view all the links
+            mentioned above
+            <span class="skip">
+              <RouterLink to="/thanks-list">here</RouterLink> </span
+            >.
+          </p>
+          <br />
+          <br />
+          <h2 id="principle">Operating Principles</h2>
+          <br />
+          <h3>1. The Cutest Visual Novel Forum in the World</h3>
+          <p>
+            Here, "cutest" doesn't just mean literally "cute / moe"; it refers
+            to all the beautiful things in the world. Anything that makes you
+            happy and feel wonderful can be called "cute / moe." This means that
+            we have no set rules; all rules depend on everyone's common
+            opinions.
+          </p>
+          <p>
+            A visual novel forum means that
+            <strong>
+              we focus primarily on visual novels, and all topics on the
+              homepage are related to visual novels. Other topics are placed in
+              <span class="skip">
+                <RouterLink to="/pool">Topic Pool</RouterLink>
+              </span>
+            </strong>
+          </p>
+          <h3>2. To Create The Best Atmosphere</h3>
+          <p>
+            Continuing from the previous point, before I started designing the
+            entire website, I wrote the following on the design drawing:
+          </p>
+          <br />
+          <ul class="list">
+            <li>
+              Promoting truly good games, so everyone can see real
+              <span class="skip">visualized data</span> on websites like VNDB
+              and avoid being misled by "experts."
+            </li>
+            <li>
+              Rejecting the modern internet trend of praising and bashing,
+              considering criticism a virtue.
+            </li>
+            <li>
+              Empowering anyone to learn basic computer skills to avoid "newbie"
+              issues.
+            </li>
+            <li>
+              Building a forum focused on individual user enjoyment, resisting
+              the creation of hierarchies.
+            </li>
+            <li>...</li>
+          </ul>
+          <br />
+          <p>
+            This means that unkind behavior, such as sarcasm and bashing, is not
+            allowed on KUN Visual Novel. Of course, this all depends on
+            everyone's opinions.
+          </p>
+          <h3>3. NO ADs Forever</h3>
+          <p>
+            Literally,
+            <strong
+              >the website will never have any form of advertisements</strong
+            >. We believe a good forum should not have any advertising. If you
+            find something resembling an ad, please report it. If 10 people
+            report it, the topic will be locked.
+          </p>
+          <h3>4. Free Forever</h3>
+          <p>
+            Literally,
+            <strong
+              >no one will ever spend money on the website's virtual currency
+              (Moemoepoints)</strong
+            >. The amount of virtual currency depends on appreciation from
+            others. If you would like to support us, you can do so
+            <span class="skip">
+              <RouterLink to="/donate">here</RouterLink> </span
+            >.
+          </p>
+          <h2 id="stipulate">Forum Guidelines</h2>
+          <p>
+            Guidelines? No, we have
+            <strong>no guidelines</strong>. All guidelines depend on everyone's
+            common opinions.
+          </p>
+          <p>However, we hope to keep things kind and minimize hostility.</p>
+          <p style="margin-bottom: 10px">
+            To avoid having your account deleted prematurely,
+            <strong style="color: red">we offer these suggestions</strong>
+          </p>
+          <ul class="list">
+            <li>1. No political discussions.</li>
+            <li>2. No advertising or solicitation.</li>
+            <li>
+              3. For sensitive topics, please include a clear warning in the
+              article title, e.g., R18, R18-G, etc.
+            </li>
+          </ul>
+          <br />
+          <p>
+            Why offer suggestions? Because these are not "Moe" behaviors. If
+            you'd like to learn more about posting etiquette, please see
+            <span class="skip">
+              <RouterLink to="/non-moe">the Non-Moe Records</RouterLink> </span
+            >.
+          </p>
+          <br />
+          <br />
+        </div>
+
+        <!-- KUNGalgame cn translation -->
+        <div v-if="showKUNGalgameLanguage === 'zh'" class="article">
           <h1>关于我们</h1>
           <h2 id="introduction">网站简介</h2>
           <p>
-            KUNGalgame 是由 <span class="skip">KUN（鲲）</span>个人发起的一个
-            galgame 论坛建设项目，目前正在<span class="skip">开发阶段</span>。
+            KUNGalgame 是由
+            <span class="skip">
+              <a
+                href="https://github.com/KUN1007"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                KUN（鲲）
+              </a>
+            </span>
+            个人发起的一个 galgame 论坛建设项目，目前正在
+            <span class="skip">
+              <a
+                href="https://github.com/KUN1007/kun-galgame-vue"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                开发阶段
+              </a></span
+            >
           </p>
           <br />
           <p>KUNGalgame 创建的意义在于：</p>
@@ -37,10 +311,8 @@ const kungalgamePageWidth = computed(() => {
           <br />
           <ul class="list">
             <li>
-              大力宣传真正的好游戏，让大家都会用 VNDB 等网站，看到真正的<span
-                class="skip"
-                >可视化数据</span
-              >，避免被“大佬”毒害
+              大力宣传真正的好游戏，让大家都会用 VNDB 等网站，看到真正的
+              <span class="skip">可视化数据</span>，避免被“大佬”毒害
             </li>
             <li>
               <strong
@@ -72,17 +344,51 @@ const kungalgamePageWidth = computed(() => {
             目前截止 V 1.0.0
             版本，论坛的设计、开发、维护、推广都是由我一人主导，如果您有对论坛建设的想法、对论坛环境的看法、亦或者是单纯的想要闲聊吹水，您都可以<span
               class="skip"
-              >加入我们</span
-            >。
+            >
+              <RouterLink to="/contact">加入我们</RouterLink>
+            </span>
           </p>
           <br />
           <br />
           <p>论坛的建设受到过大量人员的不懈帮助，其中有（排名不分先后）：</p>
           <br />
           <ul class="list">
-            <li><span class="skip">ACGNGAME</span> （Galworld）站长</li>
-            <li><span class="skip">Shinnku</span> （失落的小站）站长</li>
-            <li><span class="skip">Ymgal</span> （月幕 Galgame）站长</li>
+            <li>
+              <span class="skip">
+                <a
+                  href="http://acgngames.net"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  ACGNGAME
+                </a>
+              </span>
+              （Galworld）站长
+            </li>
+            <li>
+              <span class="skip">
+                <a
+                  href="http://shinnku.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Shinnku
+                </a>
+              </span>
+              （失落的小站）站长
+            </li>
+            <li>
+              <span class="skip">
+                <a
+                  href="http://www.ymgal.games"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Ymgal
+                </a>
+              </span>
+              （月幕 Galgame）站长
+            </li>
             <li>......等等</li>
           </ul>
           <br />
@@ -101,9 +407,10 @@ const kungalgamePageWidth = computed(() => {
           <br />
           <p>
             其中对我灵感启发最大的莫过于 Codepen 以及 github
-            里众多大佬的设计思想，以上的全部链接可以查看<span class="skip"
-              >感谢名单</span
-            >。
+            里众多大佬的设计思想，以上的全部链接可以查看
+            <span class="skip">
+              <RouterLink to="/thanks-list">感谢名单</RouterLink>
+            </span>
           </p>
           <br />
           <br />
@@ -117,8 +424,13 @@ const kungalgamePageWidth = computed(() => {
             Galgame 论坛意味着
             <strong
               >我们只以 galgame 为主，在首页的话题中仅含有和 galgame
-              有关的一切话题 </strong
-            >，其它话题全部位于<span class="skip">话题池</span>中
+              有关的一切话题
+            </strong>
+            ，其它话题全部位于
+            <span class="skip">
+              <RouterLink to="/pool">话题池</RouterLink>
+            </span>
+            中
           </p>
           <h3>2. 以营造最良好的氛围为理念</h3>
           <p>紧接上一条，在整个网站编写之前，我在设计图上写了这些：</p>
@@ -146,7 +458,9 @@ const kungalgamePageWidth = computed(() => {
           <h3>4. 永远不会收费</h3>
           <p>
             字面意思，任何人永远不会为网站的任何虚拟货币（萌萌点）花钱，虚拟货币的数量取决于别人对你的赞赏，我们认为运营不起一个网站只能说明我们的经济有问题，直接关站即可，当然，我们提供
-            <span class="skip">赞助渠道</span>
+            <span class="skip">
+              <RouterLink to="/donate">赞助渠道</RouterLink>
+            </span>
           </p>
           <h2 id="stipulate">论坛规定</h2>
           <p>
@@ -166,13 +480,17 @@ const kungalgamePageWidth = computed(() => {
           <br />
           <p>
             为什么要建议，当然是因为这些不萌啦，如果还想了解更多关于发帖的礼仪，请查看
-            《<span class="skip">不萌记录</span>》
+            《
+            <span class="skip">
+              <RouterLink to="/non-moe">不萌记录</RouterLink>
+            </span>
+            》
           </p>
           <br />
           <br />
         </div>
-        <!-- 版权 -->
       </div>
+
       <KUNGalgameFooter
         style="
           width: 100%;
@@ -261,19 +579,18 @@ p {
   text-indent: 3em;
   margin: 5px;
 }
-a {
-  display: block;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+strong {
+  text-transform: uppercase;
 }
+
 /* 被划出来的链接字体 */
 .skip {
   border-bottom: 1.5px solid var(--kungalgame-blue-4);
   cursor: pointer;
-  color: var(--kungalgame-blue-4);
+
+  a {
+    color: var(--kungalgame-blue-4);
+  }
 }
 .list > li {
   list-style: inside;