💄 修复描述过长导致的渲染错误

src/pages/common/Posts.vue

@@ -62,7 +62,7 @@
             </div>
             <div class="pcu-right">
               <span>{{ post.user.nickname }}</span>
-              <span>{{ post.user.label }}</span>
+              <span :title="post.user.label">{{ post.user.label }}</span>
             </div>
           </div>
           <div class="post-card-data">
@@ -429,6 +429,7 @@ function freshCurForum(newVal: string): void {
 .pcu-right {
   position: relative;
   display: flex;
+  max-width: calc(100% - 50px);
   height: 50px;
   flex-direction: column;
   align-items: start;
@@ -444,14 +445,14 @@ function freshCurForum(newVal: string): void {
 }
 
 .pcu-right :nth-child(2) {
-  display: flex;
+  overflow: hidden;
   width: 100%;
   height: 20px;
-  align-items: center;
-  justify-content: start;
   border-top: 2px solid var(--common-shadow-2);
   font-size: 14px;
   opacity: 0.7;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .post-card-forum {

src/plugins/Mys/index.ts

@@ -17,6 +17,7 @@ import getGachaCard from "./utils/getGachaCard";
 import getLotteryCard from "./utils/getLotteryCard";
 import { getActivityCard, getNewsCard, getNoticeCard } from "./utils/getNewsCard";
 import getPositionCard from "./utils/getPositionCard";
+import { getPostsCard } from "./utils/getPostsCard";
 
 const Mys = {
   Api: MysApi,
@@ -25,7 +26,7 @@ const Mys = {
   },
   Posts: {
     get: getForumList,
-    card: getNewsCard,
+    card: getPostsCard,
     nav: getHomeNavigator,
   },
   Gacha: {

src/plugins/Mys/utils/getPostsCard.ts

@@ -0,0 +1,70 @@
+/**
+ * @file plugins/Mys/utils/getPostsCard.ts
+ * @description Mys 插件帖子渲染
+ * @since Beta v0.3.7
+ */
+
+const defaultCover = "/source/UI/defaultCover.webp";
+
+/**
+ * @description 解析单个帖子
+ * @since Beta v0.3.7
+ * @param {TGApp.Plugins.Mys.News.Item} post 帖子
+ * @returns {TGApp.Plugins.Mys.Forum.RenderCard} 渲染用帖子
+ */
+function getPostCard(post: TGApp.Plugins.Mys.News.Item): TGApp.Plugins.Mys.Forum.RenderCard {
+  const postCover = post.cover?.url || post.post.cover || post.post.images[0] || defaultCover;
+  const userLabel = getUserLabel(post);
+  return {
+    title: post.post.subject,
+    cover: postCover,
+    postId: Number(post.post.post_id),
+    subtitle: post.post.post_id,
+    user: {
+      nickname: post.user.nickname,
+      pendant: post.user.pendant,
+      icon: post.user.avatar_url,
+      label: userLabel,
+    },
+    forum: {
+      name: post.forum.name,
+      icon: post.forum.icon,
+    },
+    data: {
+      mark: post.stat.bookmark_num,
+      forward: post.stat.forward_num,
+      like: post.stat.like_num,
+      reply: post.stat.reply_num,
+      view: post.stat.view_num,
+    },
+  };
+}
+
+/**
+ * @description 获取用户描述
+ * @since Beta v0.3.7
+ * @param {TGApp.Plugins.Mys.News.Item} post 帖子
+ * @returns {string} 描述
+ */
+function getUserLabel(post: TGApp.Plugins.Mys.News.Item): string {
+  if (post.user.certification.label !== "") {
+    return post.user.certification.label;
+  }
+  return post.user.introduce;
+}
+
+/**
+ * @description 获取渲染用帖子数据
+ * @since Beta v0.3.7
+ * @param {TGApp.Plugins.Mys.Forum.FullData} posts
+ * @returns {TGApp.Plugins.Mys.Forum.RenderCard[]}
+ */
+export function getPostsCard(
+  posts: TGApp.Plugins.Mys.Forum.FullData,
+): TGApp.Plugins.Mys.Forum.RenderCard[] {
+  const postsCard: TGApp.Plugins.Mys.Forum.RenderCard[] = [];
+  posts.list.map((post) => {
+    return postsCard.push(getPostCard(post));
+  });
+  return postsCard;
+}

src/views/t-post.vue

@@ -41,11 +41,7 @@
       <div class="tp-post-author">
         <div class="mpa-left">
           <span>{{ postRender.author.nickname }}</span>
-          <span>{{
-            postRender.author.certification?.label === ""
-              ? postRender.author.introduce
-              : postRender.author.certification?.label
-          }}</span>
+          <span :title="getMpaLeftDesc()">{{ getMpaLeftDesc() }}</span>
         </div>
         <div class="mpa-right">
           <div class="mpa-icon">
@@ -181,6 +177,12 @@ watch(loadShare, (value) => {
   }
 });
 
+function getMpaLeftDesc(): string {
+  return postRender.value.author.certification?.label === ""
+    ? postRender.value.author.introduce ?? ""
+    : postRender.value.author.certification?.label ?? "";
+}
+
 function getRenderPost(data: TGApp.Plugins.Mys.Post.FullData): TGApp.Plugins.Mys.SctPost.Base[] {
   const postContent = data.post.content;
   let jsonParse: string;
@@ -265,7 +267,6 @@ function parseContent(content: string): string {
 .tp-post-info {
   position: relative;
   display: flex;
-  width: 100%;
   align-items: end;
   justify-content: space-between;
   padding-bottom: 10px;
@@ -297,22 +298,18 @@ function parseContent(content: string): string {
 }
 
 .mpa-left :nth-child(1) {
-  display: flex;
-  height: 30px;
-  align-items: center;
-  justify-content: start;
   font-size: 16px;
 }
 
 .mpa-left :nth-child(2) {
-  display: flex;
-  width: 100%;
+  overflow: hidden;
   height: 20px;
   align-items: center;
-  justify-content: end;
   border-top: 2px solid var(--common-shadow-2);
   font-size: 14px;
   opacity: 0.7;
+  text-align: right;
+  text-overflow: ellipsis;
 }
 
 .mpa-right {
@@ -375,6 +372,12 @@ function parseContent(content: string): string {
   object-fit: cover;
 }
 
+.mpm-forum span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .mpm-item {
   display: flex;
   align-items: center;