feat: main page header i18n

.vscode/settings.json

@@ -6,14 +6,17 @@
     "azkhx",
     "bangumi",
     "Bilibili",
+    "Codepen",
     "cout",
     "dompurify",
     "fontawesome",
     "galgame",
     "Galgame",
+    "Galworld",
     "gsap",
     "iconify",
     "INTLIFY",
+    "kfmax",
     "kungal",
     "kungalgame",
     "kungalgamer",
@@ -43,6 +46,7 @@
     "upid",
     "Upvotes",
     "VARCHAR",
+    "Vite",
     "VNDB",
     "vueup",
     "weixin",

src/components/KUNGalgameSearchBox.vue

@@ -20,10 +20,6 @@ const inputValue = ref('')
 const isShowSearchHistory = ref(false)
 // 输入框被激活之后的样式
 const inputActiveClass = ref({})
-// placeholder 的文字提示
-const placeholder = computed(() => {
-  return showKUNGalgameLanguage.value === 'en' ? 'Search Topics' : '搜索话题'
-})
 
 // 定义 props，这里的作用是告诉输入框在哪个分类中搜索话题
 const props = defineProps(['category'])
@@ -110,7 +106,7 @@ const handleDeleteHistory = (historyIndex: number) => {
           type="search"
           class="input"
           :style="inputActiveClass"
-          :placeholder="placeholder"
+          :placeholder="`${$tm('mainPage.header.search')}`"
           @focus="handleInputFocus"
           @blur="handleInputBlur"
           @input="debouncedSearch(inputValue)"
@@ -126,8 +122,10 @@ const handleDeleteHistory = (historyIndex: number) => {
     <div v-if="isShowSearchHistory" class="history">
       <!-- 搜索历史标题 -->
       <div class="title">
-        <span>搜索历史</span>
-        <span @click="clearSearchHistory">清除所有历史</span>
+        <span>{{ $tm('mainPage.header.history') }}</span>
+        <span @click="clearSearchHistory">
+          {{ $tm('mainPage.header.clear') }}
+        </span>
       </div>
       <!-- 搜索历史 -->
       <div class="history-container">

src/language/en.ts

@@ -24,6 +24,20 @@ export default {
     back: 'Back',
   },
   mainPage: {
+    header: {
+      filter: 'Filter',
+      search: 'Search Topics',
+      all: 'All Topics',
+      history: 'Search History',
+      clear: 'Clear all history',
+      updated: 'Restore default',
+      time: 'Sort by time',
+      popularity: 'Sort by popularity',
+      views: 'Sort by views',
+      likes: 'Sort by likes',
+      replies: 'Sort by replies',
+      comments: 'Sort by comments',
+    },
     asideActive: {
       fold: 'Fold Aside',
       create: 'CREATE NEW!',

src/language/zh.ts

@@ -24,6 +24,20 @@ export default {
     back: '返回',
   },
   mainPage: {
+    header: {
+      filter: '筛选',
+      search: '搜索话题',
+      all: '全部话题',
+      history: '搜索历史',
+      clear: '清除所有历史',
+      updated: '恢复默认排序',
+      time: '按照时间排序',
+      popularity: '按热度值排序',
+      views: '按浏览数排序',
+      likes: '按点赞数排序',
+      replies: '按回复数排序',
+      comments: '按评论数排序',
+    },
     asideActive: {
       fold: '折叠左侧区域',
       create: '发布话题',

src/views/Home/content/article/components/header/ArticleHeader.vue

@@ -17,7 +17,7 @@ const category = `["Galgame"]`
     <KUNGalgameSearchBox :category="category" style="border: none" />
     <!-- 交互区域进入全部话题 -->
     <RouterLink to="/pool/index" class="more">
-      <span>全部话题</span>
+      <span>{{ $tm('mainPage.header.all') }}</span>
       <Icon class="all-topic" icon="line-md:chevron-triple-right" />
     </RouterLink>
   </div>
@@ -62,6 +62,7 @@ const category = `["Galgame"]`
 }
 .all-topic {
   font-size: 18px;
+  margin-left: 7px;
 }
 
 @media (max-width: 1000px) {

src/views/Home/content/article/components/header/SortTopic.vue

@@ -4,60 +4,11 @@ import { Icon } from '@iconify/vue'
 import { useKUNGalgameHomeStore } from '@/store/modules/home'
 import { storeToRefs } from 'pinia'
 
+// 导入排序列表的字段
+import { navSortItem } from './navSortItem'
+
 const homeStore = storeToRefs(useKUNGalgameHomeStore())
 
-interface Sort {
-  index: number
-  icon: string
-  name: string
-  sortField: string
-}
-
-const navSortItem: Sort[] = [
-  {
-    index: 1,
-    icon: 'line-md:rotate-270',
-    name: '恢复默认排序',
-    sortField: 'updated',
-  },
-  {
-    index: 2,
-    icon: 'svg-spinners:clock',
-    name: '按照时间排序',
-    sortField: 'time',
-  },
-  {
-    index: 3,
-    icon: 'bi:fire',
-    name: '按热度值排序',
-    sortField: 'popularity',
-  },
-  {
-    index: 4,
-    icon: 'ic:outline-remove-red-eye',
-    name: '按浏览数排序',
-    sortField: 'views',
-  },
-  {
-    index: 5,
-    icon: 'line-md:thumbs-up-twotone',
-    name: '按点赞数排序',
-    sortField: 'likes',
-  },
-  {
-    index: 6,
-    icon: 'ri:reply-line',
-    name: '按回复数排序',
-    sortField: 'replies',
-  },
-  {
-    index: 7,
-    icon: 'fa-regular:comment-dots',
-    name: '按评论数排序',
-    sortField: 'comments',
-  },
-]
-
 const handleSortByField = (sortField: string) => {
   homeStore.sortField.value = sortField
 }
@@ -73,7 +24,7 @@ const orderDescending = () => {
 
 <template>
   <div class="container">
-    <span>筛选</span>
+    <span>{{ $tm('mainPage.header.filter') }}</span>
     <Icon class="filter" icon="bi:sort-down" />
     <!-- 排序的二级菜单 -->
     <div class="sort-container">
@@ -83,14 +34,17 @@ const orderDescending = () => {
           :key="kun.index"
           @click="handleSortByField(kun.sortField)"
         >
-          <Icon class="icon-item" :icon="kun.icon" />{{ kun.name }}
+          <Icon class="icon-item" :icon="kun.icon" />{{
+            $tm(`mainPage.header.${kun.name}`)
+          }}
         </div>
         <div class="sort-order">
-          <span @click="orderAscending"
-            ><Icon icon="tdesign:order-ascending" /></span
-          ><span @click="orderDescending"
-            ><Icon icon="tdesign:order-descending"
-          /></span>
+          <span @click="orderAscending">
+            <Icon icon="tdesign:order-ascending" />
+          </span>
+          <span @click="orderDescending">
+            <Icon icon="tdesign:order-descending" />
+          </span>
         </div>
       </div>
     </div>
@@ -129,7 +83,7 @@ const orderDescending = () => {
 }
 .filter {
   font-size: 18px;
-  margin-left: 5px;
+  margin-left: 7px;
 }
 .sort-submenu {
   display: none;

src/views/Home/content/article/components/header/navSortItem.ts

@@ -0,0 +1,51 @@
+interface Sort {
+  index: number
+  icon: string
+  name: string
+  sortField: string
+}
+
+export const navSortItem: Sort[] = [
+  {
+    index: 1,
+    icon: 'line-md:rotate-270',
+    name: 'updated',
+    sortField: 'updated',
+  },
+  {
+    index: 2,
+    icon: 'svg-spinners:clock',
+    name: 'time',
+    sortField: 'time',
+  },
+  {
+    index: 3,
+    icon: 'bi:fire',
+    name: 'popularity',
+    sortField: 'popularity',
+  },
+  {
+    index: 4,
+    icon: 'ic:outline-remove-red-eye',
+    name: 'views',
+    sortField: 'views',
+  },
+  {
+    index: 5,
+    icon: 'line-md:thumbs-up-twotone',
+    name: 'likes',
+    sortField: 'likes',
+  },
+  {
+    index: 6,
+    icon: 'ri:reply-line',
+    name: 'replies',
+    sortField: 'replies',
+  },
+  {
+    index: 7,
+    icon: 'fa-regular:comment-dots',
+    name: 'comments',
+    sortField: 'comments',
+  },
+]

src/views/thanks-list/ThanksList.vue

@@ -59,23 +59,27 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
         <br />
         <br />
         <p>
-          我们的网站会秉承萌萌（美好）、开源、免费的<span class="skip"
-            >建立原则</span
-          >，不断完善和更新，您可以在 github 看到我们的项目：
+          我们的网站会秉承萌萌（美好）、开源、免费的
+          <span class="skip"> 建立原则</span>
+          ，不断完善和更新，您可以在 github 看到我们的项目：
         </p>
         <br />
         <br />
         <p>纯 HTML + CSS 实现：<span class="skip">kungalgame-pure-css</span></p>
         <p>
-          Vue + Vite + ts + pinia 实现：<span class="skip">kungalgame-vue</span>
+          前端 Vue + Vite + ts + pinia 实现：
+          <span class="skip">kun-galgame-vue</span>
+        </p>
+        <p>
+          后端 Koa2 + redis + mongoose + mongodb 实现：
+          <span class="skip">kun-galgame-koa</span>
         </p>
         <br />
         <br />
-        <p>后端由于安全因素，暂不开源，后续如果技术过硬，我们仍然会开源！</p>
         <br />
         <br />
         <p>
-          不嫌弃的话，您可以给上面两个 github 的项目点一个
+          不嫌弃的话，您可以给上面三个 github 的项目点一个
           star，当作对我们的支持。
         </p>
       </div>