mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-13 09:28:14 +08:00
fix(Mys): 调整
This commit is contained in:
@@ -155,6 +155,8 @@ async function toPost(post_id: number) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.Home-pool-cover img {
|
.Home-pool-cover img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -69,10 +69,10 @@
|
|||||||
<v-btn
|
<v-btn
|
||||||
class="ms-2"
|
class="ms-2"
|
||||||
:style="{
|
:style="{
|
||||||
background: item.status_color + ' !important',
|
background: item.status.colorCss,
|
||||||
color: '#faf7e8 !important',
|
color: '#faf7e8 !important',
|
||||||
}"
|
}"
|
||||||
>{{ item.status }}</v-btn
|
>{{ item.status.status }}</v-btn
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<v-btn @click="toJson(item.post_id)" class="ms-2 card-btn" v-show="appStore.devMode">
|
<v-btn @click="toJson(item.post_id)" class="ms-2 card-btn" v-show="appStore.devMode">
|
||||||
|
|||||||
@@ -111,8 +111,7 @@ export interface NewsMeta {
|
|||||||
* @property {string} cover 封面图片 URL
|
* @property {string} cover 封面图片 URL
|
||||||
* @property {number} post_id 帖子 ID
|
* @property {number} post_id 帖子 ID
|
||||||
* @property {string} subtitle 副标题
|
* @property {string} subtitle 副标题
|
||||||
* @property {string} status 活动状态,仅活动咨讯有
|
* @property {ActivityStatus} status 活动状态,仅活动咨讯有
|
||||||
* @property {string} status_color 活动状态按钮背景色,仅活动咨讯有
|
|
||||||
* @return {NewsCard}
|
* @return {NewsCard}
|
||||||
*/
|
*/
|
||||||
export interface NewsCard {
|
export interface NewsCard {
|
||||||
@@ -120,6 +119,17 @@ export interface NewsCard {
|
|||||||
cover: string;
|
cover: string;
|
||||||
post_id: number;
|
post_id: number;
|
||||||
subtitle: string;
|
subtitle: string;
|
||||||
status?: string;
|
status?: ActivityStatus;
|
||||||
status_color?: string;
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 活动状态
|
||||||
|
* @since Alpha
|
||||||
|
* @property {string} status 活动状态
|
||||||
|
* @property {string} colorCss 活动状态按钮背景色
|
||||||
|
* @return {ActivityStatus}
|
||||||
|
*/
|
||||||
|
export interface ActivityStatus {
|
||||||
|
status: string;
|
||||||
|
colorCss: string;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,22 +5,35 @@
|
|||||||
* @since Alpha
|
* @since Alpha
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { NewsData, NewsItem, NewsCard } from "../interface/news";
|
import { NewsData, NewsItem, NewsCard, ActivityStatus } from "../interface/news";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 活动状态
|
* @description 活动状态
|
||||||
* @enum ActivityStatus
|
|
||||||
* @since Alpha
|
* @since Alpha
|
||||||
* @property {string} STARTED 进行中
|
* @enum {ActivityStatus}
|
||||||
* @property {string} FINISHED 已结束
|
* @property {ActivityStatus} STARTED 进行中
|
||||||
* @property {string} SELECTION 评选中
|
* @property {ActivityStatus} FINISHED 已结束
|
||||||
* @return {ActivityStatus}
|
* @property {ActivityStatus} SELECTION 评选中
|
||||||
|
* @return {EnumStatus}
|
||||||
*/
|
*/
|
||||||
enum ActivityStatus {
|
const EnumStatus = {
|
||||||
STARTED = "进行中",
|
STARTED: {
|
||||||
FINISHED = "已结束",
|
status: "进行中",
|
||||||
SELECTION = "评选中",
|
colorCss: "#3c99aa !important",
|
||||||
}
|
},
|
||||||
|
FINISHED: {
|
||||||
|
status: "已结束",
|
||||||
|
colorCss: "#c7674b !important",
|
||||||
|
},
|
||||||
|
SELECTION: {
|
||||||
|
status: "评选中",
|
||||||
|
colorCss: "#849cc7 !important",
|
||||||
|
},
|
||||||
|
UNKNOWN: {
|
||||||
|
status: "未知",
|
||||||
|
colorCss: "#3C3F41 !important",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 获取活动状态
|
* @description 获取活动状态
|
||||||
@@ -28,28 +41,16 @@ enum ActivityStatus {
|
|||||||
* @param {number} status 活动状态码
|
* @param {number} status 活动状态码
|
||||||
* @return {string}
|
* @return {string}
|
||||||
*/
|
*/
|
||||||
export function getActivityStatus(status: number): { status: ActivityStatus; color: string } {
|
export function getActivityStatus(status: number): ActivityStatus {
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case 1:
|
case 1:
|
||||||
return {
|
return EnumStatus.STARTED;
|
||||||
status: ActivityStatus.STARTED,
|
|
||||||
color: "#3c99aa",
|
|
||||||
};
|
|
||||||
case 2:
|
case 2:
|
||||||
return {
|
return EnumStatus.FINISHED;
|
||||||
status: ActivityStatus.FINISHED,
|
|
||||||
color: "#c7674b",
|
|
||||||
};
|
|
||||||
case 3:
|
case 3:
|
||||||
return {
|
return EnumStatus.SELECTION;
|
||||||
status: ActivityStatus.SELECTION,
|
|
||||||
color: "#849cc7",
|
|
||||||
};
|
|
||||||
default:
|
default:
|
||||||
return {
|
return EnumStatus.UNKNOWN;
|
||||||
status: ActivityStatus.FINISHED,
|
|
||||||
color: "#c7674b",
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -64,7 +65,7 @@ export function getNoticeCard(noticeData: NewsData): NewsCard[] {
|
|||||||
noticeData.list.map((item: NewsItem) => {
|
noticeData.list.map((item: NewsItem) => {
|
||||||
noticeCard.push({
|
noticeCard.push({
|
||||||
title: item.post.subject,
|
title: item.post.subject,
|
||||||
cover: item.cover.url || item.post.cover || item.post.images[0],
|
cover: item.cover?.url || item.post.cover || item.post.images[0],
|
||||||
post_id: Number(item.post.post_id),
|
post_id: Number(item.post.post_id),
|
||||||
subtitle: item.post.post_id,
|
subtitle: item.post.post_id,
|
||||||
});
|
});
|
||||||
@@ -86,11 +87,10 @@ export function getActivityCard(activityData: NewsData): NewsCard[] {
|
|||||||
const status_info = getActivityStatus(item.news_meta.activity_status);
|
const status_info = getActivityStatus(item.news_meta.activity_status);
|
||||||
activityCard.push({
|
activityCard.push({
|
||||||
title: item.post.subject,
|
title: item.post.subject,
|
||||||
cover: item.cover.url || item.post.cover || item.post.images[0],
|
cover: item.cover?.url || item.post.cover || item.post.images[0],
|
||||||
post_id: Number(item.post.post_id),
|
post_id: Number(item.post.post_id),
|
||||||
subtitle: `${start_time} - ${end_time}`,
|
subtitle: `${start_time} - ${end_time}`,
|
||||||
status: status_info.status,
|
status: status_info,
|
||||||
status_color: status_info.color,
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return activityCard;
|
return activityCard;
|
||||||
@@ -107,7 +107,7 @@ export function getNewsCard(newsData: NewsData): NewsCard[] {
|
|||||||
newsData.list.map((item: NewsItem) => {
|
newsData.list.map((item: NewsItem) => {
|
||||||
newsCard.push({
|
newsCard.push({
|
||||||
title: item.post.subject,
|
title: item.post.subject,
|
||||||
cover: item.cover.url || item.post.cover || item.post.images[0],
|
cover: item.cover?.url || item.post.cover || item.post.images[0],
|
||||||
post_id: Number(item.post.post_id),
|
post_id: Number(item.post.post_id),
|
||||||
subtitle: item.post.post_id,
|
subtitle: item.post.post_id,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -17,14 +17,17 @@ export function PostParser(data: string): Document {
|
|||||||
let jsonData: PostStructuredContent[] = JSON.parse(data);
|
let jsonData: PostStructuredContent[] = JSON.parse(data);
|
||||||
// 创建 HTML 文档
|
// 创建 HTML 文档
|
||||||
const doc = document.implementation.createHTMLDocument();
|
const doc = document.implementation.createHTMLDocument();
|
||||||
|
// cover flag
|
||||||
|
let coverFlag = false;
|
||||||
// 遍历 Json 数据
|
// 遍历 Json 数据
|
||||||
jsonData.forEach((item: any) => {
|
jsonData.forEach((item: any) => {
|
||||||
if (typeof item.insert === "string") {
|
if (typeof item.insert === "string") {
|
||||||
const text = TextParser(item);
|
const text = TextParser(item);
|
||||||
doc.body.appendChild(text);
|
doc.body.appendChild(text);
|
||||||
} else if (item.insert.image) {
|
} else if (item.insert.image) {
|
||||||
const img = ImageParser(item);
|
const img = ImageParser(item, coverFlag);
|
||||||
doc.body.appendChild(img);
|
coverFlag = img[1];
|
||||||
|
doc.body.appendChild(img[0]);
|
||||||
} else if (item.insert.vod) {
|
} else if (item.insert.vod) {
|
||||||
// 创建 div
|
// 创建 div
|
||||||
const video = VideoParser(item);
|
const video = VideoParser(item);
|
||||||
@@ -77,9 +80,10 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement {
|
|||||||
* @description 解析图片
|
* @description 解析图片
|
||||||
* @since Alpha
|
* @since Alpha
|
||||||
* @param {PostStructuredContent} data Mys数据
|
* @param {PostStructuredContent} data Mys数据
|
||||||
* @returns {HTMLDivElement} 解析后的图片
|
* @param {boolean} coverFlag cover 是否已经存在
|
||||||
|
* @returns {[HTMLDivElement, boolean]} 解析后的图片.第一个是图片,第二个是 coverFlag
|
||||||
*/
|
*/
|
||||||
function ImageParser(data: PostStructuredContent): HTMLDivElement {
|
function ImageParser(data: PostStructuredContent, coverFlag: boolean): [HTMLDivElement, boolean] {
|
||||||
// 检查数据
|
// 检查数据
|
||||||
if (typeof data.insert === "string") {
|
if (typeof data.insert === "string") {
|
||||||
throw new Error("data.insert is a string");
|
throw new Error("data.insert is a string");
|
||||||
@@ -104,9 +108,11 @@ function ImageParser(data: PostStructuredContent): HTMLDivElement {
|
|||||||
img.style.height = "auto"; // 高度自适应
|
img.style.height = "auto"; // 高度自适应
|
||||||
img.width = 800; // 设置宽度
|
img.width = 800; // 设置宽度
|
||||||
// 判断是否是 cover
|
// 判断是否是 cover
|
||||||
if (data.attributes.width === 690 && data.attributes.height === 320) {
|
if (!coverFlag) {
|
||||||
// 添加 border-radius
|
// 添加 border-radius
|
||||||
img.style.borderRadius = "10px";
|
img.style.borderRadius = "10px";
|
||||||
|
// 设置 coverFlag
|
||||||
|
coverFlag = true;
|
||||||
}
|
}
|
||||||
// 插入图片
|
// 插入图片
|
||||||
div.appendChild(img);
|
div.appendChild(img);
|
||||||
@@ -114,7 +120,7 @@ function ImageParser(data: PostStructuredContent): HTMLDivElement {
|
|||||||
div.style.display = "center"; // 居中
|
div.style.display = "center"; // 居中
|
||||||
div.style.margin = "20px auto"; // 设置 margin
|
div.style.margin = "20px auto"; // 设置 margin
|
||||||
// 返回 div
|
// 返回 div
|
||||||
return div;
|
return [div, coverFlag];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user