mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
feat(news): 展示官方动态，并能够点击查看内容
This commit is contained in:
BTMuli
@@ -3,7 +3,7 @@
|
||||
<!-- 侧边栏 -->
|
||||
<t-sidebar />
|
||||
<!-- 内容区 -->
|
||||
<a-layout-content>
|
||||
<a-layout-content class="app-content">
|
||||
<!-- 路由组件 -->
|
||||
<router-view></router-view>
|
||||
</a-layout-content>
|
||||
@@ -22,4 +22,9 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css"></style>
|
||||
<style lang="css">
|
||||
.app-content {
|
||||
padding: 10px;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
351
src/interface/MysPost.ts
Normal file
351
src/interface/MysPost.ts
Normal file
@@ -0,0 +1,351 @@
|
||||
/**
|
||||
* @description 官方动态类型
|
||||
* @enum {number}
|
||||
* @return {number}
|
||||
*/
|
||||
export enum EnumPostType {
|
||||
/**
|
||||
* @description 活动
|
||||
*/
|
||||
Activity = 1,
|
||||
/**
|
||||
* @description 公告
|
||||
*/
|
||||
Notice = 2,
|
||||
/**
|
||||
* @description 咨讯
|
||||
*/
|
||||
News = 3,
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 帖子状态
|
||||
* @interface PostStatusType
|
||||
* @property {boolean} is_top 是否置顶
|
||||
* @property {boolean} is_good 是否精华
|
||||
* @property {boolean} is_official 是否官方
|
||||
* @return PostStatusType
|
||||
*/
|
||||
interface PostStatusType {
|
||||
is_top: boolean;
|
||||
is_good: boolean;
|
||||
is_official: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Post类型
|
||||
* @interface MysPostType
|
||||
* @property {number} game_id 游戏ID 2为原神
|
||||
* @property {string} post_id 帖子ID
|
||||
* @property {number} f_forum_id 论坛ID
|
||||
* @property {string} uid 用户ID
|
||||
* @property {string} subject 标题
|
||||
* @property {string} content 内容
|
||||
* @property {string} cover 封面
|
||||
* @property {number} view_type 浏览类型
|
||||
* @property {number} created_at 创建时间
|
||||
* @property {string[]} images 图片 URL
|
||||
* @property {PostStatusType} post_status 帖子状态
|
||||
* @property {number[]} topic_ids 话题ID
|
||||
* @property {number} view_status 浏览状态
|
||||
* @property {number} max_floor 最大楼层
|
||||
* @property {number} is_original 是否原创
|
||||
* @property {number} republish_authorization 是否授权转载
|
||||
* @property {string} reply_time 最后回复时间 // "2023-03-05 20:26:54"
|
||||
* @property {number} is_deleted 是否删除
|
||||
* @property {boolean} is_interactive 是否互动
|
||||
* @property {string} structured_content 结构化内容
|
||||
* @property {string[]} structured_content_raws 结构化内容原始数据
|
||||
* @property {number} review_id 审核ID
|
||||
* @property {boolean} is_profit 是否盈利
|
||||
* @property {boolean} is_in_profit 是否在盈利
|
||||
* @property {number} updated_at 更新时间
|
||||
* @property {number} deleted_at 删除时间
|
||||
* @property {number} pre_pub_status 预发布状态
|
||||
* @property {number} cate_id 分类ID
|
||||
* @property {number} profit_post_status 盈利帖子状态
|
||||
* @property {number} audit_status 审核状态
|
||||
* @property {string} meta_content 元内容
|
||||
* @property {boolean} is_missing 是否缺失
|
||||
* @property {number} block_reply_img 是否屏蔽回复图片
|
||||
* @property {boolean} is_showing_missing 是否显示缺失
|
||||
* @property {number} block_latest_reply_time 是否屏蔽最新回复时间
|
||||
* @return MysPostType
|
||||
*/
|
||||
export interface MysPostType {
|
||||
game_id: number;
|
||||
post_id: string;
|
||||
f_forum_id: number;
|
||||
uid: string;
|
||||
subject: string;
|
||||
content: string;
|
||||
cover: string;
|
||||
view_type: number;
|
||||
created_at: number;
|
||||
images: string[];
|
||||
post_status: PostStatusType;
|
||||
topic_ids: number[];
|
||||
view_status: number;
|
||||
max_floor: number;
|
||||
is_original: number;
|
||||
republish_authorization: number;
|
||||
reply_time: string;
|
||||
is_deleted: number;
|
||||
is_interactive: boolean;
|
||||
structured_content: string;
|
||||
structured_content_raws: string[];
|
||||
review_id: number;
|
||||
is_profit: boolean;
|
||||
is_in_profit: boolean;
|
||||
updated_at: number;
|
||||
deleted_at: number;
|
||||
pre_pub_status: number;
|
||||
cate_id: number;
|
||||
profit_post_status: number;
|
||||
audit_status: number;
|
||||
meta_content: string;
|
||||
is_missing: boolean;
|
||||
block_reply_img: number;
|
||||
is_showing_missing: boolean;
|
||||
block_latest_reply_time: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Forum类型
|
||||
* @interface MysForumType
|
||||
* @property {number} id 论坛ID
|
||||
* @property {string} name 论坛名称
|
||||
* @property {string} icon 论坛图标
|
||||
* @property {number} game_id 游戏ID
|
||||
* @property {number} forum_cate 论坛分类 // todo 这边目前看到的都是 null
|
||||
* @return MysForumType
|
||||
*/
|
||||
interface MysForumType {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
game_id: number;
|
||||
forum_cate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Topic类型
|
||||
* @interface MysTopicType
|
||||
* @property {number} id 话题ID
|
||||
* @property {string} name 话题名称
|
||||
* @property {string} cover 话题封面
|
||||
* @property {boolean} is_top 是否置顶
|
||||
* @property {boolean} is_good 是否精华
|
||||
* @property {boolean} is_interactive 是否互动
|
||||
* @property {number} game_id 游戏ID
|
||||
* @property {number} content_type 话题内容类型
|
||||
* @see EnumPostType
|
||||
* @return MysTopicType
|
||||
*/
|
||||
interface MysTopicType {
|
||||
id: number;
|
||||
name: string;
|
||||
cover: string;
|
||||
is_top: boolean;
|
||||
is_good: boolean;
|
||||
is_interactive: boolean;
|
||||
game_id: number;
|
||||
content_type: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 认证类型
|
||||
* @interface CertificationType
|
||||
* @property {number} type 认证类型
|
||||
* @property {string} label 认证标签
|
||||
* @return CertificationType
|
||||
*/
|
||||
interface CertificationType {
|
||||
type: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description User类型
|
||||
* @interface MysUserType
|
||||
* @property {string} uid 用户ID
|
||||
* @property {string} nickname 用户昵称
|
||||
* @property {string} introduce 用户简介
|
||||
* @property {string} avatar 用户头像
|
||||
* @property {number} gender 用户性别
|
||||
* @property {CertificationType} certification 认证
|
||||
* @property level_exp
|
||||
* @property {number} level_exp.level 用户等级
|
||||
* @property {number} level_exp.exp 用户经验
|
||||
* @property {boolean} is_following 是否关注
|
||||
* @property {boolean} is_followed 是否被关注
|
||||
* @property {string} avatar_url 用户头像
|
||||
* @property {string} pendant 用户注册时间
|
||||
* @return MysUserType
|
||||
*/
|
||||
interface MysUserType {
|
||||
uid: string;
|
||||
nickname: string;
|
||||
introduce: string;
|
||||
avatar: string;
|
||||
gender: number;
|
||||
certification: CertificationType;
|
||||
level_exp: {
|
||||
level: number;
|
||||
exp: number;
|
||||
};
|
||||
is_following: boolean;
|
||||
is_followed: boolean;
|
||||
avatar_url: string;
|
||||
pendant: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 用户操作
|
||||
* @interface SelfOperationType
|
||||
* @property {number} attitude 点赞
|
||||
* @property {boolean} is_collected 是否收藏
|
||||
* @return SelfOperationType
|
||||
*/
|
||||
interface SelfOperationType {
|
||||
attitude: number;
|
||||
is_collected: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 状态数据
|
||||
* @interface StatType
|
||||
* @property {number} view_num 浏览量
|
||||
* @property {number} reply_num 回复量
|
||||
* @property {number} like_num 点赞量
|
||||
* @property {number} bookmark_num 收藏量
|
||||
* @property {number} forward_num 转发量
|
||||
* @return StatType
|
||||
*/
|
||||
interface StatType {
|
||||
view_num: number;
|
||||
reply_num: number;
|
||||
like_num: number;
|
||||
bookmark_num: number;
|
||||
forward_num: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 图片类型
|
||||
* @interface ImageType
|
||||
* @property {string} url 图片 URL
|
||||
* @property {number} height 图片高度
|
||||
* @property {number} width 图片宽度
|
||||
* @property {string} format 图片格式
|
||||
* @property {string} size 图片大小
|
||||
* @property {string} crop
|
||||
* @property {boolean} is_user_set_cover 是否作为封面
|
||||
* @property {string} image_id 图片 id
|
||||
* @property {string} entity_type
|
||||
* @property {string} entity_id
|
||||
* @return ImageType
|
||||
*/
|
||||
interface ImageType {
|
||||
url: string;
|
||||
height: number;
|
||||
width: number;
|
||||
format: string;
|
||||
size: string;
|
||||
crop: string;
|
||||
is_user_set_cover: boolean;
|
||||
iamge_id: string;
|
||||
entity_type: string;
|
||||
entity_id: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 元数据
|
||||
* @interface NewsMetaType
|
||||
* @property {number} activity_status
|
||||
* @property {string} start_at_sec
|
||||
* @property {string} end_at_sec
|
||||
* @return NewsMetaType
|
||||
*/
|
||||
interface NewsMetaType {
|
||||
activity_status: number;
|
||||
start_at_sec: string;
|
||||
end_at_sec: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 返回列表类型
|
||||
* @interface ResponseListType
|
||||
* @property {MysPostType} post 帖子
|
||||
* @property {MysForumType} forum 论坛
|
||||
* @property {MysTopicType} topics 话题
|
||||
* @property {MysUserType} user 用户
|
||||
* @property {SelfOperationType} self_operation 用户操作
|
||||
* @property {StatType} stat 状态数据
|
||||
* @property help_sys // todo 不清楚这个是什么
|
||||
* @property {number} help_sys.top_up
|
||||
* @property {number[]} help_sys.top_n
|
||||
* @property {number} help_sys.answer_num
|
||||
* @property {string} cover 封面
|
||||
* @property {ImageType[]} image_list 图片列表
|
||||
* @property {boolean} is_official_master 是否官方
|
||||
* @property {boolean} is_user_master 是否用户
|
||||
* @property {boolean} hot_reply_exist 是否热门回复
|
||||
* @property {number} vote_count 投票数
|
||||
* @property {number} last_modify_time 最后修改时间
|
||||
* @property {string} recommend_type 推荐类型
|
||||
* @property {string} collection 推荐类型
|
||||
* @property {string[]} vod_list 视频列表
|
||||
* @property {boolean} is_block_on 是否屏蔽
|
||||
* @property {string} forum_rank_info 论坛排名信息
|
||||
* @property {string[]} link_card_list 链接卡片列表
|
||||
* @property {NewsMetaType} news_meta 元数据
|
||||
* @return ResponseListType
|
||||
*/
|
||||
export interface ResponseListType {
|
||||
post: MysPostType;
|
||||
forum: MysForumType;
|
||||
topics: MysTopicType;
|
||||
user: MysUserType;
|
||||
self_operation: SelfOperationType;
|
||||
stat: StatType;
|
||||
help_sys: {
|
||||
top_up: number;
|
||||
top_n: number[];
|
||||
answer_num: number;
|
||||
};
|
||||
cover: string;
|
||||
image_list: ImageType[];
|
||||
is_official_master: boolean;
|
||||
is_user_master: boolean;
|
||||
hot_reply_exist: boolean;
|
||||
vote_count: number;
|
||||
last_modify_time: number;
|
||||
recommend_type: string;
|
||||
collection: string;
|
||||
vod_list: string[];
|
||||
is_block_on: boolean;
|
||||
forum_rank_info: string;
|
||||
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;
|
||||
};
|
||||
}
|
||||
@@ -1,13 +1,160 @@
|
||||
<template>
|
||||
<h1>咨讯</h1>
|
||||
<a-tabs v-model:active-key="activeKey" type="card">
|
||||
<!-- todo 专门写一个卡片组件来展示数据 -->
|
||||
<a-tab-pane key="activity" tab="活动">
|
||||
<!-- 遍历渲染活动卡片 -->
|
||||
<div v-show="postData.activity === {}">暂无活动</div>
|
||||
<div class="cards-grid" v-show="postData.activity !== {}">
|
||||
<a-card v-for="item in postData.activity" @click="toPost(item.post_id)">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt="cover" class="card-cover" />
|
||||
</template>
|
||||
<a-card-meta :title="item.title" :description="item.post_id" />
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="news" tab="新闻">
|
||||
<div v-show="postData.news === {}">暂无新闻</div>
|
||||
<div class="cards-grid" v-show="postData.news !== {}">
|
||||
<a-card v-for="item in postData.news" @click="toPost(item.post_id)">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt="cover" class="card-cover" />
|
||||
</template>
|
||||
<a-card-meta :title="item.title" :description="item.post_id" />
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="notice" tab="公告">
|
||||
<div v-show="postData.notice === {}">暂无公告</div>
|
||||
<div class="cards-grid" v-show="postData.notice !== {}">
|
||||
<a-card v-for="item in postData.notice" @click="toPost(item.post_id)">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt="cover" class="card-cover" />
|
||||
</template>
|
||||
<a-card-meta :title="item.title" :description="item.post_id" />
|
||||
</a-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { MysPostType, ResponseListType, ResponseType } from "../interface/MysPost";
|
||||
import { http } from "@tauri-apps/api";
|
||||
import { ResponseType as TauriResponseType } from "@tauri-apps/api/http";
|
||||
|
||||
const MysApi = "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type=";
|
||||
const enum MysType {
|
||||
activity = 1,
|
||||
news = 2,
|
||||
notice = 3,
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "News",
|
||||
// 进入页面时，获取数据
|
||||
mounted() {
|
||||
this.getPosts();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeKey: "activity",
|
||||
postData: {
|
||||
activity: {},
|
||||
news: {},
|
||||
notice: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async getPosts() {
|
||||
console.log("正在获取数据...");
|
||||
console.log("正在获取活动数据...");
|
||||
const activityRaw: ResponseType = await http
|
||||
.fetch(MysApi + MysType.activity)
|
||||
.then(res => res.data as Promise<ResponseType>);
|
||||
console.log("正在获取新闻数据...");
|
||||
const newsRaw: ResponseType = await http
|
||||
.fetch(MysApi + MysType.news)
|
||||
.then(res => res.data as Promise<ResponseType>);
|
||||
console.log("正在获取公告数据...");
|
||||
const noticeRaw: ResponseType = await http
|
||||
.fetch(MysApi + MysType.notice)
|
||||
.then(res => res.data as Promise<ResponseType>);
|
||||
console.log("数据获取完毕,正在转换数据...");
|
||||
console.log("正在转换数据...");
|
||||
this.postData = {
|
||||
activity: this.transData(activityRaw),
|
||||
news: this.transData(newsRaw),
|
||||
notice: this.transData(noticeRaw),
|
||||
};
|
||||
console.log("数据转换完毕");
|
||||
},
|
||||
transData(rawData: ResponseType) {
|
||||
let cardData: any[] = [];
|
||||
rawData.data.list.map((item: ResponseListType) => {
|
||||
const postData: MysPostType = item.post;
|
||||
const card = {
|
||||
title: postData.subject,
|
||||
cover: postData.images[0],
|
||||
post_id: postData.post_id,
|
||||
};
|
||||
return cardData.push(card);
|
||||
});
|
||||
return cardData;
|
||||
},
|
||||
async toPost(post_id: number) {
|
||||
// 获取帖子内容
|
||||
const post: MysPostType = await this.getPost(post_id).then(res => {
|
||||
return res.data.post.post;
|
||||
});
|
||||
// 将内容转换为 html
|
||||
const postHtml = new DOMParser().parseFromString(post.content, "text/html");
|
||||
// 用帖子标题替换 html 中的标题
|
||||
postHtml.title = post.subject;
|
||||
// 将 html 转为能够通过 window.open 打开的 url
|
||||
const postUrl = URL.createObjectURL(
|
||||
new Blob([postHtml.documentElement.outerHTML], { type: "text/html;charset=utf-8" })
|
||||
);
|
||||
// 调用 tauri 打开无边框窗口
|
||||
window.open(
|
||||
postUrl,
|
||||
"_blank",
|
||||
"height=720, width=960, toolbar=no, menubar=no, scrollbars=no,status=no"
|
||||
);
|
||||
},
|
||||
getPost(post_id: number) {
|
||||
const postUrl = `https://bbs-api.mihoyo.com/post/wapi/getPostFull?gids=2&post_id=${post_id}`;
|
||||
return http
|
||||
.fetch(postUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
referer: `https://bbs.mihoyo.com/ys/article/${post_id}`,
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
return res.data as Promise<ResponseType>;
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css"></style>
|
||||
<style lang="css">
|
||||
/* todo 样式优化 */
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
/* 卡片大小固定，自动填充 */
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
/* 卡片间距 */
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: contain;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user