Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
BTMuli
2023-03-07 21:24:24 +08:00
parent f67e4892dc
commit 6231730e49
2 changed files with 123 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/interface/MysPost.ts
View File

@@ -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 返回列表类型
* @interface ResponseListType
* @description 单个 News 的返回类型
* @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;
};
}

64
src/pages/News.vue
View File

@@ -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" v-show="postData.activity !== {}">
<div class="cards-grid">
<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" v-show="postData.news !== {}">
<div class="cards-grid">
<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" v-show="postData.notice !== {}">
<div class="cards-grid">
<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,
news = 2,
notice = 3,
export interface CardDataType {
title: string;
cover: string;
post_id: string;
}
export default defineComponent({
@@ -96,9 +100,9 @@ export default defineComponent({
return {
tab: "activity",
postData: {
activity: {},
news: {},
notice: {},
activity: {} as CardDataType[],
news: {} as CardDataType[],
notice: {} as CardDataType[],
},
};
},
@@ -106,17 +110,17 @@ export default defineComponent({
async getPosts() {
console.log("正在获取数据...");
console.log("正在获取活动数据...");
const activityRaw: ResponseType = await http
.fetch(MysApi + MysType.activity)
.then(res => res.data as Promise<ResponseType>);
const activityRaw: ResponseNewsList = await http
.fetch(MysApi + EnumPostType.Activity)
.then(res => res.data as Promise<ResponseNewsList>);
console.log("正在获取新闻数据...");
const newsRaw: ResponseType = await http
.fetch(MysApi + MysType.news)
.then(res => res.data as Promise<ResponseType>);
const newsRaw: ResponseNewsList = await http
.fetch(MysApi + EnumPostType.News)
.then(res => res.data as Promise<ResponseNewsList>);
console.log("正在获取公告数据...");
const noticeRaw: ResponseType = await http
.fetch(MysApi + MysType.notice)
.then(res => res.data as Promise<ResponseType>);
const noticeRaw: ResponseNewsList = await http
.fetch(MysApi + EnumPostType.Notice)
.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) {
let cardData: any[] = [];
rawData.data.list.map((item: ResponseListType) => {
transData(rawData: ResponseNewsList) {
let cardData: CardDataType[] = [];
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>;
});
},
},