From de3ca7bd251dd1859686e2e65394f6da3a0296e2 Mon Sep 17 00:00:00 2001 From: BTMuli Date: Wed, 29 Mar 2023 17:37:07 +0800 Subject: [PATCH] =?UTF-8?q?fix(Mys):=20=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home.vue | 2 + src/pages/News.vue | 4 +- src/plugins/Mys/interface/news.ts | 18 +++++++-- src/plugins/Mys/utils/news.ts | 66 +++++++++++++++---------------- src/plugins/Mys/utils/parser.ts | 18 ++++++--- 5 files changed, 63 insertions(+), 45 deletions(-) diff --git a/src/pages/Home.vue b/src/pages/Home.vue index f99d6539..33c5c951 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -155,6 +155,8 @@ async function toPost(post_id: number) { } .Home-pool-cover img { + width: 100%; + height: auto; transition: all 0.5s; } diff --git a/src/pages/News.vue b/src/pages/News.vue index 9c5d2066..17367ba7 100644 --- a/src/pages/News.vue +++ b/src/pages/News.vue @@ -69,10 +69,10 @@ {{ item.status }}{{ item.status.status }} diff --git a/src/plugins/Mys/interface/news.ts b/src/plugins/Mys/interface/news.ts index 09c45821..68b235d8 100644 --- a/src/plugins/Mys/interface/news.ts +++ b/src/plugins/Mys/interface/news.ts @@ -111,8 +111,7 @@ export interface NewsMeta { * @property {string} cover 封面图片 URL * @property {number} post_id 帖子 ID * @property {string} subtitle 副标题 - * @property {string} status 活动状态，仅活动咨讯有 - * @property {string} status_color 活动状态按钮背景色，仅活动咨讯有 + * @property {ActivityStatus} status 活动状态，仅活动咨讯有 * @return {NewsCard} */ export interface NewsCard { @@ -120,6 +119,17 @@ export interface NewsCard { cover: string; post_id: number; subtitle: string; - status?: string; - status_color?: string; + status?: ActivityStatus; +} + +/** + * @description 活动状态 + * @since Alpha + * @property {string} status 活动状态 + * @property {string} colorCss 活动状态按钮背景色 + * @return {ActivityStatus} + */ +export interface ActivityStatus { + status: string; + colorCss: string; } diff --git a/src/plugins/Mys/utils/news.ts b/src/plugins/Mys/utils/news.ts index 50d02f94..b37a1333 100644 --- a/src/plugins/Mys/utils/news.ts +++ b/src/plugins/Mys/utils/news.ts @@ -5,22 +5,35 @@ * @since Alpha */ -import { NewsData, NewsItem, NewsCard } from "../interface/news"; +import { NewsData, NewsItem, NewsCard, ActivityStatus } from "../interface/news"; /** * @description 活动状态 - * @enum ActivityStatus * @since Alpha - * @property {string} STARTED 进行中 - * @property {string} FINISHED 已结束 - * @property {string} SELECTION 评选中 - * @return {ActivityStatus} + * @enum {ActivityStatus} + * @property {ActivityStatus} STARTED 进行中 + * @property {ActivityStatus} FINISHED 已结束 + * @property {ActivityStatus} SELECTION 评选中 + * @return {EnumStatus} */ -enum ActivityStatus { - STARTED = "进行中", - FINISHED = "已结束", - SELECTION = "评选中", -} +const EnumStatus = { + STARTED: { + status: "进行中", + colorCss: "#3c99aa !important", + }, + FINISHED: { + status: "已结束", + colorCss: "#c7674b !important", + }, + SELECTION: { + status: "评选中", + colorCss: "#849cc7 !important", + }, + UNKNOWN: { + status: "未知", + colorCss: "#3C3F41 !important", + }, +}; /** * @description 获取活动状态 @@ -28,28 +41,16 @@ enum ActivityStatus { * @param {number} status 活动状态码 * @return {string} */ -export function getActivityStatus(status: number): { status: ActivityStatus; color: string } { +export function getActivityStatus(status: number): ActivityStatus { switch (status) { case 1: - return { - status: ActivityStatus.STARTED, - color: "#3c99aa", - }; + return EnumStatus.STARTED; case 2: - return { - status: ActivityStatus.FINISHED, - color: "#c7674b", - }; + return EnumStatus.FINISHED; case 3: - return { - status: ActivityStatus.SELECTION, - color: "#849cc7", - }; + return EnumStatus.SELECTION; default: - return { - status: ActivityStatus.FINISHED, - color: "#c7674b", - }; + return EnumStatus.UNKNOWN; } } @@ -64,7 +65,7 @@ export function getNoticeCard(noticeData: NewsData): NewsCard[] { noticeData.list.map((item: NewsItem) => { noticeCard.push({ 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), subtitle: item.post.post_id, }); @@ -86,11 +87,10 @@ export function getActivityCard(activityData: NewsData): NewsCard[] { const status_info = getActivityStatus(item.news_meta.activity_status); activityCard.push({ 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), subtitle: `${start_time} - ${end_time}`, - status: status_info.status, - status_color: status_info.color, + status: status_info, }); }); return activityCard; @@ -107,7 +107,7 @@ export function getNewsCard(newsData: NewsData): NewsCard[] { newsData.list.map((item: NewsItem) => { newsCard.push({ 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), subtitle: item.post.post_id, }); diff --git a/src/plugins/Mys/utils/parser.ts b/src/plugins/Mys/utils/parser.ts index c4d782a3..3ebf42ef 100644 --- a/src/plugins/Mys/utils/parser.ts +++ b/src/plugins/Mys/utils/parser.ts @@ -17,14 +17,17 @@ export function PostParser(data: string): Document { let jsonData: PostStructuredContent[] = JSON.parse(data); // 创建 HTML 文档 const doc = document.implementation.createHTMLDocument(); + // cover flag + let coverFlag = false; // 遍历 Json 数据 jsonData.forEach((item: any) => { if (typeof item.insert === "string") { const text = TextParser(item); doc.body.appendChild(text); } else if (item.insert.image) { - const img = ImageParser(item); - doc.body.appendChild(img); + const img = ImageParser(item, coverFlag); + coverFlag = img[1]; + doc.body.appendChild(img[0]); } else if (item.insert.vod) { // 创建 div const video = VideoParser(item); @@ -77,9 +80,10 @@ function TextParser(data: PostStructuredContent): HTMLSpanElement { * @description 解析图片 * @since Alpha * @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") { throw new Error("data.insert is a string"); @@ -104,9 +108,11 @@ function ImageParser(data: PostStructuredContent): HTMLDivElement { img.style.height = "auto"; // 高度自适应 img.width = 800; // 设置宽度 // 判断是否是 cover - if (data.attributes.width === 690 && data.attributes.height === 320) { + if (!coverFlag) { // 添加 border-radius img.style.borderRadius = "10px"; + // 设置 coverFlag + coverFlag = true; } // 插入图片 div.appendChild(img); @@ -114,7 +120,7 @@ function ImageParser(data: PostStructuredContent): HTMLDivElement { div.style.display = "center"; // 居中 div.style.margin = "20px auto"; // 设置 margin // 返回 div - return div; + return [div, coverFlag]; } /**