✨ 公告支持切换服务器&语言

close #81

src/pages/common/Announcements.vue

@@ -4,6 +4,22 @@
     <v-tab v-for="(value, index) in tabValues" :key="index" :value="value">
       {{ AnnoType[value] }}
     </v-tab>
+    <v-select
+      class="anno-select"
+      :items="annoServerList"
+      v-model="curRegionName"
+      label="服务器"
+      dense
+      outlined
+    />
+    <v-select
+      class="anno-select"
+      :items="langList"
+      v-model="curLangName"
+      label="语言"
+      dense
+      outlined
+    />
     <v-spacer />
     <v-btn class="anno-switch-btn" @click="switchNews">
       <template #prepend>
@@ -38,15 +54,48 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 
 import ToLoading from "../../components/overlay/to-loading.vue";
+import { useAppStore } from "../../store/modules/app";
 import TGLogger from "../../utils/TGLogger";
 import { createTGWindow } from "../../utils/TGWindow";
+import { SERVER } from "../../web/request/getAnno";
 import TGRequest from "../../web/request/TGRequest";
 import TGUtils from "../../web/utils/TGUtils";
 
+// 服务器名称-服务器对应
+type AnnoServerMap = {
+  [key: string]: SERVER;
+};
+
+const annoServerList: string[] = [
+  "国服-官方服",
+  "国服-渠道服",
+  "国际服-亚服",
+  "国际服-欧服",
+  "国际服-美服",
+  "国际服-港澳台服",
+];
+const langList: string[] = ["简体中文", "繁体中文", "English", "日本語"];
+
+// 服务器列表
+const annoServerMap: AnnoServerMap = {
+  "国服-官方服": SERVER.CN_ISLAND,
+  "国服-渠道服": SERVER.CN_TREE,
+  "国际服-亚服": SERVER.OS_ASIA,
+  "国际服-欧服": SERVER.OS_EURO,
+  "国际服-美服": SERVER.OS_USA,
+  "国际服-港澳台服": SERVER.OS_CHT,
+};
+const langMap: Record<string, string> = {
+  简体中文: "zh-cn",
+  繁体中文: "zh-tw",
+  English: "en",
+  日本語: "ja",
+};
+
 // 类型定义
 enum AnnoType {
   activity = "活动公告",
@@ -62,8 +111,14 @@ type AnnoCard = {
 const loading = ref<boolean>(true);
 const loadingTitle = ref<string>("正在加载");
 
+const appStore = useAppStore();
+
 // 路由
 const router = useRouter();
+const curRegion = ref<SERVER>(appStore.server);
+const curRegionName = ref<string>(annoServerList[0]);
+const curLang = ref<string>(appStore.lang);
+const curLangName = ref<string>(langList[0]);
 
 // 数据
 const tab = ref<AnnoKey>("activity");
@@ -74,13 +129,44 @@ const annoCards = ref<AnnoCard>({
 });
 const annoData = ref<TGApp.BBS.Announcement.ListData>(<TGApp.BBS.Announcement.ListData>{});
 
+watch(curRegionName, async (value) => {
+  appStore.server = annoServerMap[value] || SERVER.CN_ISLAND;
+  curRegion.value = annoServerMap[value] || SERVER.CN_ISLAND;
+  await TGLogger.Info(`[Announcements][watch][curRegionName] 切换服务器：${value}`);
+  await loadData();
+});
+
+watch(curLangName, async (value) => {
+  appStore.lang = langMap[value] || "zh-cn";
+  curLang.value = langMap[value] || "zh-cn";
+  await TGLogger.Info(`[Announcements][watch][curLang] 切换语言：${value}`);
+  await loadData();
+});
+
 onMounted(async () => {
   await TGLogger.Info("[Announcements][onMounted] 打开公告页面");
+  // 根据curRegion找到对应的curRegionName
+  for (const key in annoServerMap) {
+    if (annoServerMap[key] === curRegion.value) {
+      curRegionName.value = key;
+      break;
+    }
+  }
+  // 根据curLang找到对应的curLangName
+  for (const key in langMap) {
+    if (langMap[key] === curLang.value) {
+      curLangName.value = key;
+      break;
+    }
+  }
+  await loadData();
+});
+
+async function loadData(): Promise<void> {
   loadingTitle.value = "正在获取公告数据";
   loading.value = true;
-  annoData.value = await TGRequest.Anno.getList();
+  annoData.value = await TGRequest.Anno.getList(curRegion.value, curLang.value);
   const listCards = TGUtils.Anno.getCard(annoData.value);
-  tab.value = "activity";
   annoCards.value = {
     activity: listCards.filter((item) => item.typeLabel === AnnoType.activity),
     game: listCards.filter((item) => item.typeLabel === AnnoType.game),
@@ -89,7 +175,7 @@ onMounted(async () => {
   await nextTick(async () => {
     loading.value = false;
   });
-});
+}
 
 function parseTitle(title: string): string {
   const div = document.createElement("div");
@@ -103,7 +189,7 @@ async function switchNews(): Promise<void> {
 }
 
 function createAnno(item: TGApp.App.Announcement.ListCard): void {
-  const annoPath = `/anno_detail/${item.id}`;
+  const annoPath = `/anno_detail/${curRegion.value}/${item.id}/${curLang.value}`;
   const annoTitle = `Anno_${item.id} ${item.title}`;
   TGLogger.Info(`[Announcements][createAnno][${item.id}] 打开公告窗口`).then(() =>
     createTGWindow(annoPath, "Sub_window", annoTitle, 960, 720, false, false),
@@ -118,6 +204,13 @@ function createAnno(item: TGApp.App.Announcement.ListCard): void {
   font-family: var(--font-title);
 }
 
+.anno-select {
+  width: 150px;
+  margin-left: 10px;
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+}
+
 .anno-switch-btn {
   height: 40px;
   background: var(--btn-bg-1);

src/router/modules/sub.ts

@@ -1,12 +1,13 @@
 /**
- * @file router modules sub.ts
+ * @file router/modules/sub.ts
  * @description 子路由模块，用于二级窗口
- * @since Beta v0.3.3
+ * @since Beta v0.4.3
  */
 
 const subRoutes = [
   {
-    path: "/anno_detail/:anno_id",
+    // 传入参数：公告ID-anno_id，服务器-region，语言-lang
+    path: "/anno_detail/:region/:anno_id/:lang",
     name: "游戏内公告",
     component: async () => await import("../../views/t-anno.vue"),
   },

src/store/modules/app.ts

@@ -1,14 +1,15 @@
 /**
  * @file store/modules/app.ts
  * @description App store module
- * @since Beta v0.4.2
+ * @since Beta v0.4.3
  */
 
 import { path } from "@tauri-apps/api";
 import { defineStore } from "pinia";
 import { reactive, ref } from "vue";
 
 import { getInitDeviceInfo } from "../../utils/toolFunc";
+import { SERVER } from "../../web/request/getAnno";
 
 // 用于存储用户数据的路径
 const userDataDir = `${await path.appLocalDataDir()}userData`;
@@ -43,13 +44,20 @@ export const useAppStore = defineStore(
     const logDir = ref(logDataDir);
     // 设备信息
     const deviceInfo = ref<TGApp.App.Device.DeviceInfo>(getInitDeviceInfo());
+    // 服务器
+    const server = ref<SERVER>(SERVER.CN_ISLAND);
+    // 语言
+    const lang = ref<string>("zh-cn");
 
     // 初始化
     function init(): void {
       loading.value = false;
       devMode.value = false;
       theme.value = "default";
       isLogin.value = false;
+      sidebar.collapse = true;
+      server.value = SERVER.CN_ISLAND;
+      lang.value = "zh-cn";
       initDevice();
     }
 
@@ -73,6 +81,8 @@ export const useAppStore = defineStore(
       userDir,
       dbPath,
       logDir,
+      server,
+      lang,
       init,
       changeTheme,
     };
@@ -97,7 +107,7 @@ export const useAppStore = defineStore(
       {
         key: "theme",
         storage: window.localStorage,
-        paths: ["theme"],
+        paths: ["theme", "server", "lang"],
       },
       {
         key: "deviceInfo",

src/types/BBS/Announcement.d.ts

@@ -1,16 +1,41 @@
 /**
  * @file types/BBS/Announcement.d.ts
  * @description 从 BBS 获取到的游戏内公告类型定义文件
- * @since Alpha v0.1.5
+ * @since Beta v0.4.3
  */
 
 /**
  * @description 游戏内公告类型定义
- * @since Alpha v0.1.5
+ * @since Beta v0.4.3
  * @namespace TGApp.BBS.Announcement
  * @memberof TGApp.BBS
  */
 declare namespace TGApp.BBS.Announcement {
+  /**
+   * @description 需要的参数
+   * @interface Params
+   * @since Beta v0.4.3
+   * @property {string} game - 游戏名称
+   * @property {string} game_biz - 游戏业务名称
+   * @property {string} lang - 语言
+   * @property {string} bundle_id - 包 ID
+   * @property {string} platform - 平台
+   * @property {string} region - 区域
+   * @property {string} level - 等级
+   * @property {string} uid - 用户 ID
+   * @returns Params
+   */
+  interface Params {
+    game: string;
+    game_biz: string;
+    lang: string;
+    bundle_id: string;
+    platform: string;
+    region: string;
+    level: string;
+    uid: string;
+  }
+
   /**
    * @description 公告列表返回响应类型
    * @interface ListResponse

src/views/t-anno.vue

@@ -32,6 +32,7 @@ import { useAppStore } from "../store/modules/app";
 import TGLogger from "../utils/TGLogger";
 import { saveImgLocal } from "../utils/TGShare";
 import { createTGWindow } from "../utils/TGWindow";
+import { SERVER } from "../web/request/getAnno";
 import TGRequest from "../web/request/TGRequest";
 import TGUtils from "../web/utils/TGUtils";
 
@@ -48,14 +49,16 @@ const annoTitle = ref<string>("");
 
 // 数据
 const annoId = Number(useRoute().params.anno_id);
+const region = <SERVER>useRoute().params.region;
+const lang = ref<string>(<string>useRoute().params.lang);
 const annoData = ref<TGApp.BBS.Announcement.ContentItem>(<TGApp.BBS.Announcement.ContentItem>{});
 const annoHtml = ref<string>();
 const annoBanner = ref<string>();
 
 onMounted(async () => {
   await appWindow.show();
   // 检查数据
-  if (!annoId) {
+  if (!annoId || !region) {
     loadingEmpty.value = true;
     loadingTitle.value = "未找到数据";
     await TGLogger.Error("[t-anno.vue] 未找到数据");
@@ -64,7 +67,7 @@ onMounted(async () => {
   // 获取数据
   loadingTitle.value = "正在获取数据...";
   try {
-    annoData.value = await TGRequest.Anno.getContent(annoId);
+    annoData.value = await TGRequest.Anno.getContent(annoId, region, lang.value);
     loadingTitle.value = "正在渲染数据...";
     annoHtml.value = await TGUtils.Anno.parseContent(annoData.value.content);
     if (annoData.value.banner !== "") annoBanner.value = await saveImgLocal(annoData.value.banner);