From 79366837bdf877bd28dd9e34700492a5536936d5 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Sat, 1 Apr 2023 23:49:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(announcements):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E6=B8=B8=E6=88=8F=E5=86=85=E5=85=AC=E5=91=8A=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src-tauri/tauri.conf.json    |   3 +-
 src/components/t-sidebar.vue |   4 +-
 src/pages/Announcements.vue  | 167 +++++++++++++++++++++++++++++++++++
 src/router/index.ts          |   7 ++
 src/router/modules/main.ts   |   8 +-
 src/router/modules/sub.ts    |   9 +-
 src/views/t-anno.vue         |  76 ++++++++++++++++
 7 files changed, 269 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Announcements.vue
 create mode 100644 src/views/t-anno.vue

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index e0892d97..68820abc 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -25,7 +25,8 @@
 					"https://api-static.mihoyo.com/*",
 					"https://bbs-api.mihoyo.com/*",
 					"https://bbs-api.miyoushe.com/*",
-					"https://bbs.mihoyo.com/*"
+					"https://bbs.mihoyo.com/*",
+					"https://hk4e-api.mihoyo.com/*"
 				]
 			},
 			"shell": {
diff --git a/src/components/t-sidebar.vue b/src/components/t-sidebar.vue
index e38861ca..fd6a6117 100644
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -20,9 +20,9 @@
 					<img src="/source/UI/paimon.webp" alt="homeIcon" class="sideIcon" />
 				</template>
 			</v-list-item>
-			<v-list-item title="咨讯" value="news" link href="/news">
+			<v-list-item title="公告" value="announcements" link href="/announcements">
 				<template v-slot:prepend>
-					<img src="../assets/icons/board.svg" alt="newsIcon" class="sideIcon" />
+					<img src="../assets/icons/board.svg" alt="annoIcon" class="sideIcon" />
 				</template>
 			</v-list-item>
 			<v-list-item title="成就" value="achievements" link href="/achievements">
diff --git a/src/pages/Announcements.vue b/src/pages/Announcements.vue
new file mode 100644
index 00000000..5609cb86
--- /dev/null
+++ b/src/pages/Announcements.vue
@@ -0,0 +1,167 @@
+<template>
+	<div v-if="loading">
+		<t-loading :title="loadingTitle" />
+	</div>
+	<div v-else>
+		<v-tabs v-model="tab" align-tabs="start" class="global-font mb-2">
+			<v-tab value="activity" title="活动公告" />
+			<v-tab value="game" title="游戏公告" />
+			<v-spacer></v-spacer>
+			<v-btn class="switch-btn" @click="switchNews">
+				<template v-slot:prepend>
+					<v-icon>mdi-bullhorn</v-icon>
+				</template>
+				切换米游社咨讯
+			</v-btn>
+		</v-tabs>
+		<v-window v-model="tab">
+			<v-window-item value="activity">
+				<div class="anno-grid">
+					<v-card class="anno-card" v-for="item in annoCards.activity" width="340">
+						<div class="anno-cover" @click="toPost(item)">
+							<img :src="item.banner" alt="cover" />
+						</div>
+						<v-card-title>{{ item.title }}</v-card-title>
+						<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
+						<v-card-actions>
+							<v-btn @click="toPost(item)" class="card-btn">
+								<template v-slot:prepend>
+									<img src="../assets/icons/arrow-right.svg" alt="right" />
+								</template>
+								查看
+							</v-btn>
+							<v-card-subtitle
+								><v-icon>mdi-calendar</v-icon> {{ item.start_time.split(" ")[0] }} -
+								{{ item.end_time.split(" ")[0] }}</v-card-subtitle
+							>
+						</v-card-actions>
+					</v-card>
+				</div>
+			</v-window-item>
+			<v-window-item value="game">
+				<div class="anno-grid">
+					<v-card class="anno-card" v-for="item in annoCards.game" width="340">
+						<div class="anno-cover" @click="toPost(item)">
+							<img :src="item.banner" alt="cover" />
+						</div>
+						<v-card-title>{{ item.title }}</v-card-title>
+						<v-card-subtitle>{{ item.subtitle }}</v-card-subtitle>
+						<v-card-actions>
+							<v-btn @click="toPost(item)" class="card-btn">
+								<template v-slot:prepend>
+									<img src="../assets/icons/arrow-right.svg" alt="right" />
+								</template>
+								查看
+							</v-btn>
+							<v-card-subtitle>
+								<v-icon>mdi-calendar</v-icon>
+								{{ item.start_time.split(" ")[0] }} -
+								{{ item.end_time.split(" ")[0] }}</v-card-subtitle
+							>
+						</v-card-actions>
+					</v-card>
+				</div>
+			</v-window-item>
+		</v-window>
+	</div>
+</template>
+
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import TLoading from "../components/t-loading.vue";
+// plugin
+import GenshinOper from "../plugins/Genshin";
+// utils
+import { createTGWindow } from "../utils/TGWindow";
+// interface
+import { AnnoListData, AnnoListCard } from "../plugins/Genshin/interface/announcement";
+
+// loading
+const loading = ref(true);
+const loadingTitle = ref("正在加载");
+// 路由
+const router = useRouter();
+
+// 数据
+const tab = ref("");
+const annoCards = ref({
+	activity: [] as AnnoListCard[],
+	game: [] as AnnoListCard[],
+});
+const annoData = ref({} as AnnoListData);
+
+onMounted(async () => {
+	loadingTitle.value = "正在获取公告数据";
+	annoData.value = await GenshinOper.Announcement.get.list();
+	loadingTitle.value = "正在转换公告数据";
+	const listCards = GenshinOper.Announcement.card(annoData.value);
+	const activityCard = listCards.filter(item => item.type_label === "活动公告");
+	const newsCard = listCards.filter(item => item.type_label === "游戏公告");
+	annoCards.value = {
+		activity: activityCard,
+		game: newsCard,
+	};
+	console.log(annoCards.value);
+	tab.value = "activity";
+	loading.value = false;
+});
+
+function switchNews() {
+	router.push("/news");
+}
+
+async function toPost(item: AnnoListCard) {
+	const path = router.resolve({
+		name: "游戏内公告",
+		params: {
+			anno_id: item.id,
+		},
+	}).href;
+	createTGWindow(path, "游戏内公告", item.title, 960, 720, false);
+}
+</script>
+
+<style lang="css" scoped>
+.anno-grid {
+	font-family: Genshin, serif;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+	grid-gap: 20px;
+}
+
+.anno-card {
+	border-radius: 10px;
+	background: #faf7e8;
+	color: #546d8b;
+}
+
+.anno-cover {
+	height: 130px;
+	overflow: hidden;
+}
+
+.anno-cover :hover {
+	transform: scale(1.1);
+	transition: all 0.3s linear;
+	cursor: pointer;
+}
+
+.anno-cover img {
+	object-fit: cover;
+	width: 100%;
+	height: 130px;
+	transition: all 0.3s linear;
+}
+
+/* switch */
+.switch-btn {
+	font-family: Genshin, serif;
+	background: #ffca0a;
+	height: 40px;
+	margin-right: 10px;
+	margin-top: 5px;
+	color: #546d8b;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6bb389af..2edbc0a8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,3 +1,10 @@
+/**
+ * @file router index.ts
+ * @description 路由入口
+ * @author BTMuli<bt-muli@outlook.com>
+ * @since Alpha
+ */
+
 import { createRouter, createWebHistory } from "vue-router";
 import routes from "./routes";
 
diff --git a/src/router/modules/main.ts b/src/router/modules/main.ts
index 62e1d2f4..f98816de 100644
--- a/src/router/modules/main.ts
+++ b/src/router/modules/main.ts
@@ -2,10 +2,11 @@
  * @file router modules main.ts
  * @description 主路由模块
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha
+ * @since Alpha v0.1.1
  */
 
 // 信息展示
+import Announcements from "../../pages/Announcements.vue";
 import Home from "../../pages/Home.vue";
 import News from "../../pages/News.vue";
 import GCG from "../../pages/GCG.vue";
@@ -25,6 +26,11 @@ const mainRoutes = [
 		name: "成就",
 		component: Achievements,
 	},
+	{
+		path: "/announcements",
+		name: "公告",
+		component: Announcements,
+	},
 	{
 		path: "/config",
 		name: "设置",
diff --git a/src/router/modules/sub.ts b/src/router/modules/sub.ts
index f403512c..8306b065 100644
--- a/src/router/modules/sub.ts
+++ b/src/router/modules/sub.ts
@@ -2,13 +2,15 @@
  * @file router modules sub.ts
  * @description 子路由模块，用于二级窗口
  * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha
+ * @since Alpha v0.1.1
  */
 // 帖子相关
 import TPost from "../../views/t-post.vue";
 import TPostJson from "../../views/t-post-json.vue";
 // 抽奖
 import TLottery from "../../views/t-lottery.vue";
+// 游戏内公告
+import TAnno from "../../views/t-anno.vue";
 
 const subRoutes = [
 	{
@@ -26,6 +28,11 @@ const subRoutes = [
 		name: "抽奖详情",
 		component: TLottery,
 	},
+	{
+		path: "/anno/:anno_id",
+		name: "游戏内公告",
+		component: TAnno,
+	},
 ];
 
 export default subRoutes;
diff --git a/src/views/t-anno.vue b/src/views/t-anno.vue
new file mode 100644
index 00000000..7d32bf2f
--- /dev/null
+++ b/src/views/t-anno.vue
@@ -0,0 +1,76 @@
+<template>
+	<div v-if="loading" class="loading">
+		<t-loading :title="loadingTitle" :empty="loadingEmpty" />
+	</div>
+	<div v-else class="anno-body">
+		<div class="anno-title">{{ annoData.title }}</div>
+		<div class="anno-subtitle">{{ annoData.subtitle }}</div>
+		<img :src="annoData.banner" alt="cover" class="mys-post-img" />
+		<div v-html="annoHtml" />
+	</div>
+</template>
+<script lang="ts" setup>
+// vue
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import TLoading from "../components/t-loading.vue";
+// plugins
+import GenshinOper from "../plugins/Genshin";
+// interface
+import { AnnoContentItem } from "../plugins/Genshin/interface/announcement";
+
+// loading
+const loading = ref(true as boolean);
+const loadingTitle = ref("正在加载");
+const loadingEmpty = ref(false as boolean);
+
+// 数据
+const anno_id = Number(useRoute().params.anno_id);
+const annoData = ref({} as AnnoContentItem);
+const annoHtml = ref("");
+
+onMounted(async () => {
+	// 检查数据
+	if (!anno_id) {
+		loadingEmpty.value = true;
+		loadingTitle.value = "未找到数据";
+		return;
+	}
+	// 获取数据
+	loadingTitle.value = "正在获取数据...";
+	try {
+		annoData.value = await GenshinOper.Announcement.get.content(anno_id);
+		loadingTitle.value = "正在渲染数据...";
+		annoHtml.value = annoData.value.content;
+	} catch (error) {
+		loadingEmpty.value = true;
+		loadingTitle.value = "公告不存在或解析失败";
+		return;
+	}
+	setInterval(() => {
+		loading.value = false;
+	}, 200);
+});
+</script>
+<style lang="css" scoped>
+/* todo 完善样式 */
+.anno-body {
+	margin: 20px auto;
+	width: 800px;
+	font-family: "Genshin-Light", serif;
+}
+
+.anno-title {
+	font-family: Genshin, serif;
+	color: #5b738f;
+	font-size: 24px;
+	font-weight: 500;
+	margin-bottom: 8px;
+}
+
+.anno-subtitle {
+	font-size: 16px;
+	color: #a1aeb6;
+	margin-bottom: 16px;
+}
+</style>