feat: bylaw translation

src/hooks/useBackgroundPicture.ts

@@ -5,9 +5,8 @@ import { saveImage, getImage } from './useLocalforage'
 import { storeToRefs } from 'pinia'
 
 // 使用设置面板的 store
-const settingsStore = useKUNGalgameSettingsStore()
 const { showKUNGalgameBackground, showKUNGalgameCustomBackground } =
-  storeToRefs(settingsStore)
+  storeToRefs(useKUNGalgameSettingsStore())
 
 // 从后端获取背景图片数据
 const fetchGetBackground = async (imageName: string): Promise<Blob> => {

src/views/bylaw/Bylaw.vue

@@ -1,13 +1,12 @@
 <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, showKUNGalgameLanguage } = storeToRefs(
-const { showKUNGalgamePageWidth } = storeToRefs(settingsStore)
+  useKUNGalgameSettingsStore()
+)
 const bylawPageWidth = computed(() => {
   return showKUNGalgamePageWidth.value.Bylaw + '%'
 })
@@ -15,37 +14,156 @@ const bylawPageWidth = computed(() => {
 
 <template>
   <div class="root">
-    <!-- 总容器 -->
     <div class="container">
-      <!-- 文章容器 -->
+      <!-- en -->
-      <div class="content">
+      <div class="article" v-if="showKUNGalgameLanguage === 'en'">
-        <div class="title-0">· 执行条例（试行）</div>
+        <div class="title-0">Operating Regulations (Trial)</div>
         <div class="tips">
           <p>
-            tips:
+            Tips: These are operating regulations, ✔ indicating implementation.
-            这是执行条例，目的是让论坛的运行机制更加透明，并不是规矩，我们<span
+            The purpose is to make the forum's operation mechanism more
-              >没有规矩</span
+            transparent. These are not rules. We have
-            >
+            <span>
+              <RouterLink to="/kungalgame">no rules</RouterLink>
+            </span>
           </p>
         </div>
-        <!-- 萌萌点 -->
+
+        <div class="moemoepoint">
+          <div class="title-1">Moemoepoints</div>
+
+          <div class="gain">
+            <div class="title-2">- Methods of Earning</div>
+            <ul>
+              <li>
+                1. Every registered user initially has 1007 moemoepoints ✔
+              </li>
+              <li>
+                2. Automatically receive random 1-7 moemoepoints when logging in
+                each day
+              </li>
+              <li>
+                3. When a user's topic/reply/comment is liked, they earn 1
+                moemoepoint ✔
+              </li>
+              <li>
+                4. When someone replies to a user's topic, the user earns 2
+                moemoepoints ✔
+              </li>
+              <li>
+                5. When someone comments on a user's reply, both the original
+                poster and the person being commented on earn 1 moemoepoint ✔
+              </li>
+              <li>
+                6. When a user's topic/reply is promoted, they earn 7
+                moemoepoints ✔
+              </li>
+            </ul>
+          </div>
+
+          <div class="deduct">
+            <div class="title-2">- Deduction Methods</div>
+            <ul>
+              <li>
+                1. Users' non-moemoepoint behavior will be deducted 7, 17, 77,
+                177, or 777 moemoepoints based on the severity
+              </li>
+              <li>
+                2. If a single topic is disliked 10 times, and upon review, it's
+                valid, 100 moemoepoints will be deducted
+              </li>
+              <li>
+                3. Each time a user promotes a topic, they will be deducted 17
+                moemoepoints; promoting a topic can be repeated ✔
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="kungalgamer">
+          <div class="title-1">Users</div>
+          <ul>
+            <li>
+              <strong
+                >1. Users with less than 1000 moemoepoints will have their
+                accounts deleted</strong
+              >
+            </li>
+            <li>
+              2. Users with less than 1100 moemoepoints cannot use the "Promote
+              Topic" feature ✔
+            </li>
+            <li>
+              3. Being "disliked" 10 times in a row will result in account
+              deletion (we hope for less criticism and more praise)
+            </li>
+          </ul>
+        </div>
+
+        <div class="topic">
+          <div class="title-1">Topics</div>
+          <ul>
+            <li>
+              1. All topics on the homepage are in a "dynamic promotion state."
+              Once a topic is affected by "likes," "comments," or "topic
+              promotion," it will be pinned ✔
+            </li>
+            <li>
+              2. Formula for topic popularity calculation: Popularity = Views ×
+              0.1 Comments × 2 + Likes × 2 + Topic Promotions × 50 - Dislikes ×
+              5 ✔
+            </li>
+            <li>
+              3. A topic that is promoted will receive a "glowing" style within
+              10 hours ✔
+            </li>
+            <li>
+              4. Once a single topic has received 10 "dislikes," the topic will
+              be automatically hidden and subject to administrative review
+            </li>
+            <li>
+              5. Every night at 12:00, the topic pool will be cleared for the
+              day, leaving the 17 topics with the highest popularity values from
+              the previous day. If popularity values are tied, all will be
+              promoted
+            </li>
+          </ul>
+        </div>
+        <br />
+        <br />
+        <br />
+      </div>
+
+      <!-- chinese translation -->
+      <div class="article" v-if="showKUNGalgameLanguage === 'zh'">
+        <div class="title-0">执行条例（试行）</div>
+        <div class="tips">
+          <p>
+            tips: 这是执行条例，✔
+            代表已经落实。目的是让论坛的运行机制更加透明，并不是规矩，我们
+            <span>
+              <RouterLink to="/kungalgame">没有规矩</RouterLink>
+            </span>
+          </p>
+        </div>
+
         <div class="moemoepoint">
           <div class="title-1">萌萌点</div>
-          <!-- 获取方法 -->
+
           <div class="gain">
             <div class="title-2">- 获取方法</div>
             <ul>
-              <li>1. 每个注册用户初始拥有 1007 萌萌点</li>
+              <li>1. 每个注册用户初始拥有 1007 萌萌点 ✔</li>
               <li>2. 每天登录自动获得随机 1 ~ 7 萌萌点</li>
-              <li>3. 用户的话题 / 回复 / 评论被点赞，可以获得 1 萌萌点</li>
+              <li>3. 用户的话题 / 回复 / 评论被点赞，可以获得 1 萌萌点 ✔</li>
-              <li>4. 有人回复用户的话题，用户将会获得 2 点萌萌点</li>
+              <li>4. 有人回复用户的话题，用户将会获得 2 点萌萌点 ✔</li>
               <li>
-                5. 有人评论用户的回复，楼主和被评论的回复人都会获得 1 萌萌点
+                5. 有人评论用户的回复，楼主和被评论的回复人都会获得 1 萌萌点 ✔
               </li>
-              <li>6. 用户的话题 / 回复被推，将会获得 7 点萌萌点</li>
+              <li>6. 用户的话题 / 回复被推，将会获得 7 点萌萌点 ✔</li>
             </ul>
           </div>
-          <!-- 扣除方法 -->
+
           <div class="deduct">
             <div class="title-2">- 扣除方法</div>
             <ul>
@@ -54,34 +172,35 @@ const bylawPageWidth = computed(() => {
                 点萌萌点
               </li>
               <li>2. 单个话题每被踩 10 次，若审核无误，扣除 100 萌萌点</li>
-              <li>3. 用户推话题一次将会被扣除 17 萌萌点，可以重复推话题</li>
+              <li>3. 用户推话题一次将会被扣除 17 萌萌点，可以重复推话题 ✔</li>
             </ul>
           </div>
         </div>
-        <!-- 用户 -->
+
         <div class="kungalgamer">
           <div class="title-1">用户</div>
           <ul>
             <li><strong>1. 萌萌点低于 1000 的用户将会被删除账户</strong></li>
-            <li>2. 萌萌点低于 1100 的用户无法使用“推话题”功能</li>
+            <li>2. 萌萌点低于 1100 的用户无法使用“推话题”功能 ✔</li>
             <li>
               3. 连续 “踩” 10 次将会被删除账户（我们希望少一点批评，多一点赞美）
             </li>
           </ul>
         </div>
-        <!-- 话题 -->
+
         <div class="topic">
           <div class="title-1">话题</div>
           <ul>
             <li>
               1.
               每个位于主页的话题处于“动态推送状态”，一旦该话题受到包括“点赞”“评论”“推话题”的影响时，该话题将会被置顶
+              ✔
             </li>
             <li>
-              2. 话题热度值计算公式：热度值 = 10 + 评论数 × 3 + 点赞数 × 7 +
+              2. 话题热度值计算公式：热度值 = 浏览数 × 0.1 评论数 × 2 + 点赞数 ×
-              推话题数 × 1007 – 发表经过小时数 / 3 – 踩 × 7
+              2 + 推话题数 × 50 – 踩 × 5 ✔
             </li>
-            <li>3. 话题热度值超过 1007 会获得“流光”样式</li>
+            <li>3. 话题被推 10 小时内会获得“流光”样式 ✔</li>
             <li>
               4. 一旦单个话题“踩”的数量达到 10，该话题会被系统屏蔽，交由管理审核
             </li>
@@ -95,7 +214,7 @@ const bylawPageWidth = computed(() => {
         <br />
         <br />
       </div>
-      <!-- 版权 -->
+
       <KUNGalgameFooter style="position: absolute; bottom: 2%" />
     </div>
   </div>
@@ -103,12 +222,12 @@ const bylawPageWidth = computed(() => {
 
 <style lang="scss" scoped>
 .root {
-  height: 100vh;
+  height: 100%;
+  min-height: calc(100vh - 65px);
   display: flex;
   flex-direction: column;
-  min-height: 1100px;
 }
-/* 总容器 */
+
 .container {
   /* 居中 */
   margin: 0 auto;
@@ -127,8 +246,8 @@ const bylawPageWidth = computed(() => {
   align-items: center;
   position: relative;
 }
-/* 文章容器 */
+
-.content {
+.article {
   width: 100%;
   height: 100%;
   padding: 10px;
@@ -137,57 +256,64 @@ const bylawPageWidth = computed(() => {
   background-color: var(--kungalgame-trans-white-2);
   box-shadow: var(--shadow);
 }
-/* 一级标题 */
+
 .title-0 {
   font-size: 30px;
   margin: 17px 0;
+  display: flex;
+  justify-content: center;
 }
-/* 提示消息 */
+
 .tips {
   border-top: 2px solid var(--kungalgame-blue-4);
   padding-top: 10px;
   margin-bottom: 47px;
-}
+
-/* 规则跳转页面 */
+  span {
-.tips span {
     cursor: pointer;
-  color: var(--kungalgame-blue-4);
     border-bottom: 1px solid var(--kungalgame-blue-4);
+
+    a {
+      color: var(--kungalgame-blue-4);
+    }
+  }
 }
-/* 二级标题 */
+
 .title-1 {
   font-size: 25px;
   margin: 20px 0;
   border-left: 4px solid var(--kungalgame-blue-4);
   text-indent: 1em;
 }
-/* 三级标题 */
+
 .title-2 {
   font-size: 17px;
-  /* 文字缩进 */
   text-indent: 1em;
 }
-/* 萌萌点 */
+
 .moemoepoint ul {
   margin: 10px 0;
   margin-left: 40px;
-}
+
-.moemoepoint ul li {
+  li {
     margin: 5px 0;
+  }
 }
-/* 用户 */
+
 .kungalgamer > ul {
   margin-left: 20px;
-}
+
-.kungalgamer > ul li {
+  li {
     margin: 5px 0;
+  }
 }
-/* 话题 */
+
 .topic > ul {
   margin-left: 20px;
-}
+
-.topic > ul li {
+  li {
     margin: 5px 0;
+  }
 }
 
 @media (max-width: 1000px) {

src/views/kungalgame/KUNGalgame.vue

@@ -492,13 +492,7 @@ const kungalgamePageWidth = computed(() => {
       </div>
 
       <KUNGalgameFooter
-        style="
+        style="width: 100%; bottom: 0; display: flex; justify-content: center"
-          width: 100%;
-          position: relative;
-          bottom: -3%;
-          display: flex;
-          justify-content: center;
-        "
       />
     </div>
   </div>
@@ -506,22 +500,21 @@ const kungalgamePageWidth = computed(() => {
 
 <style lang="scss" scoped>
 .root {
-  height: 1500px;
+  height: 100%;
+  min-height: calc(100vh + 65px);
 }
-/* 内容区容器 */
+
 .content-container {
   background-color: var(--kungalgame-trans-white-5);
   border-radius: 7px;
-  /* 固定高度 */
+  height: 100vh;
-  height: 1300px;
   transition: all 0.2s;
   width: v-bind(kungalgamePageWidth);
   max-width: 1300px;
-  /* 居中 */
   margin: auto;
   padding: 5px;
 }
-/* 内容区 */
+
 .content {
   height: 100%;
   overflow-y: scroll;
@@ -539,16 +532,16 @@ const kungalgamePageWidth = computed(() => {
     background: var(--kungalgame-blue-4);
     border-radius: 2px;
   }
-  /* 兼容火狐 */
+  position: relative;
   scrollbar-width: thin;
   scrollbar-color: var(--kungalgame-blue-4) var(--kungalgame-blue-1); /* Firefox 64+ */
 }
-/* 文章区距离侧边的距离 */
+
 .article {
   width: 100%;
   margin-left: 30px;
 }
-/* 网站标题的字体颜色 */
+
 h1,
 h2,
 h3,
@@ -583,7 +576,6 @@ strong {
   text-transform: uppercase;
 }
 
-/* 被划出来的链接字体 */
 .skip {
   border-bottom: 1.5px solid var(--kungalgame-blue-4);
   cursor: pointer;
@@ -615,5 +607,9 @@ strong {
   h1 {
     margin: 20px auto;
   }
+
+  h2 {
+    font-size: 20px;
+  }
 }
 </style>

src/views/update-log/components/Next.vue

@@ -3,27 +3,29 @@ import { Icon } from '@iconify/vue'
 </script>
 
 <template>
-  <!-- 更新的内容 -->
   <div class="article-next">
     <div class="describe">
       <div>{{ $tm('update.update') }}</div>
-      <p>1. 添加数据统计页面</p>
+
-      <p>2. 修复关于我们页面布局</p>
+      <!-- Next update feat -->
-      <p>3. 其他细节修复</p>
+      <p>Moe Moe Moe!</p>
     </div>
-    <!-- 更新预览 -->
+
+    <!-- Update preview -->
     <div class="preview">
       <div>{{ $tm('update.info') }}</div>
       <a
         class="github"
         href="https://github.com/KUN1007/KUNGalGame-vue"
         target="_blank"
-        >{{ $tm('update.visit') }}</a
       >
+        {{ $tm('update.visit') }}
+      </a>
       <a href="https://github.com/KUN1007/KUNGalGame-vue" target="_blank">
         <Icon class="icon" icon="raphael:github"
       /></a>
     </div>
+
     <!-- 预计更新时间 -->
     <div class="time">
       <span>{{ $tm('update.time') }}: 2019/10/7</span>
@@ -39,15 +41,17 @@ import { Icon } from '@iconify/vue'
   justify-content: center;
 }
 /* 更新信息 */
-.describe > div {
+.describe {
+  div {
     font-size: 20px;
     margin: 10px;
     margin-bottom: 30px;
-}
+  }
-/* 单个更新信息 */
+  p {
-.describe > p {
     text-indent: 2em;
+  }
 }
+
 /* 更新预览 */
 .preview {
   margin-top: 70px;
@@ -65,7 +69,7 @@ import { Icon } from '@iconify/vue'
     border-bottom: 2px solid var(--kungalgame-blue-4);
   }
 }
-/* 预计更新时间 */
+
 .time {
   margin-top: 20px;
   display: flex;