fix(news): 完善类型提示，优化代码

src/interface/MysPost.ts

@@ -1,3 +1,86 @@
+/**
+ * @description 获取 News 的返回类型
+ * @see https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type={EnumPostType}
+ * @interface ResponseNewsList
+ * @property {number} retcode 返回码
+ * @property {string} message 返回信息
+ * @property data 返回数据
+ * @property data.list {ResponseListType[]} 返回列表
+ * @property {number} data.last_id 最后ID
+ * @property {boolean} data.is_last 是否最后
+ * @return ResponseNewsList
+ */
+export interface ResponseNewsList {
+	retcode: number;
+	message: string;
+	data: {
+		list: ResponseNews[];
+		last_id: number;
+		is_last: boolean;
+	};
+}
+
+/**
+ * @description 获取 Post 的返回类型
+ * @see https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id={post_id}
+ * @interface ResponsePost
+ * @property {number} retcode 返回码
+ * @property {string} message 返回信息
+ * @property data 返回数据
+ * @property data.post 帖子
+ * @property {string} data.post.collection 是否收藏
+ * @property {string} data.post.cover 封面 URL
+ * @property {MysForumType} data.post.forum 板块
+ * @property {string} data.post.forum_rank_info 板块等级信息
+ * @property {string} data.post.help_sys 是否有帮助系统
+ * @property {boolean} data.post.hot_reply_exist 是否有热门回复
+ * @property {ImageType[]} data.post.iamge_list 图片列表
+ * @property {boolean} data.post.is_block_on 是否被屏蔽
+ * @property {boolean} data.post.is_official_master 是否官方
+ * @property {boolean} data.post.is_user_master 是否用户
+ * @property {number} data.post.last_modify_time 最后修改时间
+ * @property {string[]} data.post.like_card_list 点赞卡片列表
+ * @property {NewsMetaType} data.post.news_meta 新闻元数据
+ * @property {MysPostType} data.post.post 帖子
+ * @property {string} data.post.recommend_type 推荐类型
+ * @property {SelfOperationType} data.post.self_operation 自己的操作
+ * @property {StatType} data.post.stat 统计
+ * @property {MysTopicType[]} data.post.topics 话题
+ * @property {MysUserType} data.post.user 用户
+ * @property {string[]} data.post.vod_list 视频列表
+ * @property {number} data.post.vod_count 视频数量
+ * @return ResponsePost
+ */
+export interface ResponsePost {
+	retcode: number;
+	message: string;
+	data: {
+		post: {
+			collection: string;
+			cover: string;
+			forum: MysForumType;
+			forum_rank_info: string;
+			help_sys: string;
+			hot_reply_exist: boolean;
+			image_list: ImageType[];
+			is_block_on: boolean;
+			is_official_master: boolean;
+			is_user_master: boolean;
+			last_modify_time: number;
+			like_card_list: string[];
+			news_meta: NewsMetaType;
+			post: MysPostType;
+			recommend_type: string;
+			self_operation: SelfOperationType;
+			stat: StatType;
+			topics: MysTopicType[];
+			user: MysUserType;
+			vod_list: string[];
+			vod_count: number;
+		};
+	};
+}
+
 /**
  * @description 官方动态类型
  * @enum {number}
@@ -11,11 +94,11 @@ export enum EnumPostType {
 	/**
 	 * @description 公告
 	 */
-	Notice = 2,
+	News = 2,
 	/**
 	 * @description 咨讯
 	 */
-	News = 3,
+	Notice = 3,
 }
 
 /**
@@ -273,8 +356,8 @@ interface NewsMetaType {
 }
 
 /**
- * @description 返回列表类型
+ * @description 单个 News 的返回类型
- * @interface ResponseListType
+ * @interface ResponseNews
  * @property {MysPostType} post 帖子
  * @property {MysForumType} forum 论坛
  * @property {MysTopicType} topics 话题
@@ -299,9 +382,9 @@ interface NewsMetaType {
  * @property {string} forum_rank_info 论坛排名信息
  * @property {string[]} link_card_list 链接卡片列表
  * @property {NewsMetaType} news_meta 元数据
- * @return ResponseListType
+ * @return ResponseNews
  */
-export interface ResponseListType {
+export interface ResponseNews {
 	post: MysPostType;
 	forum: MysForumType;
 	topics: MysTopicType;
@@ -328,24 +411,3 @@ export interface ResponseListType {
 	link_card_list: string[];
 	news_meta: NewsMetaType;
 }
-
-/**
- * @description 返回内容类型
- * @interface ResponseType
- * @property {number} retcode 返回码
- * @property {string} message 返回信息
- * @property data 返回数据
- * @property data.list {ResponseListType[]} 返回列表
- * @property {number} data.last_id 最后ID
- * @property {boolean} data.is_last 是否最后
- * @return ResponseType
- */
-export interface ResponseType {
-	retcode: number;
-	message: string;
-	data: {
-		list: ResponseListType[];
-		last_id: number;
-		is_last: boolean;
-	};
-}

src/pages/News.vue

@@ -6,8 +6,7 @@
 	</v-tabs>
 	<v-window v-model="tab">
 		<v-window-item value="activity">
-			<div v-show="postData.activity === {}">暂无活动</div>
+			<div class="cards-grid">
-			<div class="cards-grid" v-show="postData.activity !== {}">
 				<v-card
 					v-for="item in postData.activity"
 					class="justify-space-between flex-nowrap"
@@ -28,8 +27,7 @@
 			</div>
 		</v-window-item>
 		<v-window-item value="news">
-			<div v-show="postData.news === {}">暂无新闻</div>
+			<div class="cards-grid">
-			<div class="cards-grid" v-show="postData.news !== {}">
 				<v-card
 					v-for="item in postData.news"
 					class="justify-space-between flex-nowrap"
@@ -50,8 +48,7 @@
 			</div>
 		</v-window-item>
 		<v-window-item value="notice">
-			<div v-show="postData.notice === {}">暂无公告</div>
+			<div class="cards-grid">
-			<div class="cards-grid" v-show="postData.notice !== {}">
 				<v-card
 					v-for="item in postData.notice"
 					class="justify-space-between flex-nowrap"
@@ -76,14 +73,21 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { MysPostType, ResponseListType, ResponseType } from "../interface/MysPost";
+import {
+	MysPostType,
+	ResponseNewsList,
+	ResponseNews,
+	EnumPostType,
+	ResponsePost,
+} from "../interface/MysPost";
 import { http } from "@tauri-apps/api";
 
 const MysApi = "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type=";
-const enum MysType {
+
-	activity = 1,
+export interface CardDataType {
-	news = 2,
+	title: string;
-	notice = 3,
+	cover: string;
+	post_id: string;
 }
 
 export default defineComponent({
@@ -96,9 +100,9 @@ export default defineComponent({
 		return {
 			tab: "activity",
 			postData: {
-				activity: {},
+				activity: {} as CardDataType[],
-				news: {},
+				news: {} as CardDataType[],
-				notice: {},
+				notice: {} as CardDataType[],
 			},
 		};
 	},
@@ -106,17 +110,17 @@ export default defineComponent({
 		async getPosts() {
 			console.log("正在获取数据...");
 			console.log("正在获取活动数据...");
-			const activityRaw: ResponseType = await http
+			const activityRaw: ResponseNewsList = await http
-				.fetch(MysApi + MysType.activity)
+				.fetch(MysApi + EnumPostType.Activity)
-				.then(res => res.data as Promise<ResponseType>);
+				.then(res => res.data as Promise<ResponseNewsList>);
 			console.log("正在获取新闻数据...");
-			const newsRaw: ResponseType = await http
+			const newsRaw: ResponseNewsList = await http
-				.fetch(MysApi + MysType.news)
+				.fetch(MysApi + EnumPostType.News)
-				.then(res => res.data as Promise<ResponseType>);
+				.then(res => res.data as Promise<ResponseNewsList>);
 			console.log("正在获取公告数据...");
-			const noticeRaw: ResponseType = await http
+			const noticeRaw: ResponseNewsList = await http
-				.fetch(MysApi + MysType.notice)
+				.fetch(MysApi + EnumPostType.Notice)
-				.then(res => res.data as Promise<ResponseType>);
+				.then(res => res.data as Promise<ResponseNewsList>);
 			console.log("数据获取完毕,正在转换数据...");
 			console.log("正在转换数据...");
 			this.postData = {
@@ -126,11 +130,11 @@ export default defineComponent({
 			};
 			console.log("数据转换完毕");
 		},
-		transData(rawData: ResponseType) {
+		transData(rawData: ResponseNewsList) {
-			let cardData: any[] = [];
+			let cardData: CardDataType[] = [];
-			rawData.data.list.map((item: ResponseListType) => {
+			rawData.data.list.map((item: ResponseNews) => {
 				const postData: MysPostType = item.post;
-				const card = {
+				const card: CardDataType = {
 					title: postData.subject,
 					cover: postData.images[0],
 					post_id: postData.post_id,
@@ -139,7 +143,7 @@ export default defineComponent({
 			});
 			return cardData;
 		},
-		async toPost(post_id: number) {
+		async toPost(post_id: string) {
 			// 获取帖子内容
 			const post: MysPostType = await this.getPost(post_id).then(res => {
 				return res.data.post.post;
@@ -168,7 +172,7 @@ export default defineComponent({
 			// 打开窗口
 			window.open(postUrl, "_blank", `width=960,height=720,left=${left},top=${top}`);
 		},
-		getPost(post_id: number) {
+		getPost(post_id: string): Promise<ResponsePost> {
 			const postUrl = `https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=${post_id}`;
 			return http
 				.fetch(postUrl, {
@@ -178,7 +182,7 @@ export default defineComponent({
 					},
 				})
 				.then(res => {
-					return res.data as Promise<ResponseType>;
+					return res.data as Promise<ResponsePost>;
 				});
 		},
 	},