♻️ 帖子的用户数据单独出来作为组件

2025-12-11 09:08:14 +08:00 · 2024-01-12 19:04:50 +08:00
parent cfe3570d12
commit 0ce60d04ae
8 changed files with 126 additions and 319 deletions
--- a/src/components/post/tp-avatar.vue
+++ b/src/components/post/tp-avatar.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="tp-avatar-box">
+    <div v-if="props.position === 'right'" class="tpa-text">
+      <div>{{ props.data.nickname }}</div>
+      <div :title="getAuthorDesc()">{{ getAuthorDesc() }}</div>
+    </div>
+    <div class="tpa-img" @click="toAuthor()" title="点击前往用户主页">
+      <img :src="props.data.avatar_url" alt="avatar" class="tpa-icon" />
+      <img
+        :src="props.data.pendant"
+        alt="pendant"
+        class="tpa-pendant"
+        v-if="props.data.pendant !== ''"
+      />
+    </div>
+    <div v-if="props.position === 'left'" class="tpa-text">
+      <div>{{ props.data.nickname }}</div>
+      <div :title="getAuthorDesc()">{{ getAuthorDesc() }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import TGClient from "../../utils/TGClient";
+
+interface TpAvatarProps {
+  data: TGApp.Plugins.Mys.User.Post;
+  position: "left" | "right";
+}
+
+const props = defineProps<TpAvatarProps>();
+
+function getAuthorDesc(): string {
+  if (props.data.certification.label !== "") {
+    return props.data.certification.label;
+  }
+  return props.data.introduce;
+}
+
+async function toAuthor(): Promise<void> {
+  const url = `https://m.miyoushe.com/ys/#/accountCenter/0?id=${props.data.uid}`;
+  await TGClient.open("web_thin", url);
+}
+
+const flexAlign = props.position === "left" ? "flex-start" : "flex-end";
+const textAlign = props.position;
+</script>
+<style lang="css" scoped>
+.tp-avatar-box {
+  display: flex;
+}
+
+.tpa-text {
+  position: relative;
+  display: flex;
+  max-width: calc(100% - 50px);
+  height: 50px;
+  flex-direction: column;
+  align-items: v-bind(flexAlign);
+  color: var(--box-text-4);
+}
+
+.tpa-text :first-child {
+  font-family: var(--font-title);
+  font-size: 16px;
+}
+
+.tpa-text :last-child {
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  height: 26px;
+  border-top: 2px solid var(--common-shadow-2);
+  font-size: 14px;
+  opacity: 0.7;
+  text-align: v-bind(textAlign);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+}
+
+.tpa-img {
+  position: relative;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+}
+
+.tpa-icon {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.tpa-pendant {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 50px;
+}
+</style>
--- a/src/pages/common/News.vue
+++ b/src/pages/common/News.vue
@@ -1,13 +1,9 @@
 <template>
  <ToLoading v-model="loading" :title="loadingTitle" />
  <v-tabs v-model="tab" align-tabs="start" class="news-tab">
-    <v-tab
-      v-for="(value, index) in tabValues"
-      :key="index"
-      :value="value"
-      @click="firstLoad(value)"
-      >{{ rawData[value].name }}</v-tab
-    >
+    <v-tab v-for="(value, index) in tabValues" :key="index" :value="value" @click="firstLoad(value)"
+      >{{ rawData[value].name }}
+    </v-tab>
    <v-text-field
      v-model="search"
      class="news-search"
@@ -52,20 +48,7 @@
          </div>
          <div class="news-content">
            <div class="news-card-title" :title="item.title">{{ item.title }}</div>
-            <div class="news-card-user">
-              <div class="ncu-left">
-                <div class="ncu-icon">
-                  <img :src="item.user.icon" alt="userIcon" />
-                </div>
-                <div v-if="item.user.pendant !== ''" class="ncu-pendant">
-                  <img :src="item.user.pendant" alt="userPendant" />
-                </div>
-              </div>
-              <div class="ncu-right">
-                <span>{{ item.user.nickname }}</span>
-                <span>{{ item.user.label }}</span>
-              </div>
-            </div>
+            <TpAvatar :data="item.user" position="left" />
            <div class="news-card-data">
              <div class="ncd-item" :title="`浏览数：${item.data.view}`">
                <v-icon>mdi-eye</v-icon>
@@ -112,6 +95,7 @@ import { useRoute, useRouter } from "vue-router";
 import showSnackbar from "../../components/func/snackbar";
 import ToChannel from "../../components/overlay/to-channel.vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import TpAvatar from "../../components/post/tp-avatar.vue";
 import Mys from "../../plugins/Mys";
 import { createPost } from "../../utils/TGWindow";

@@ -121,6 +105,7 @@ enum NewsType {
  activity = "2",
  news = "3",
 }
+
 type NewsKey = keyof typeof NewsType;
 type PostData = {
  [key in NewsKey]: TGApp.Plugins.Mys.News.RenderCard[];
@@ -328,75 +313,6 @@ function searchPost(): void {
  white-space: nowrap;
 }

-.news-card-user {
-  display: flex;
-}
-
-.ncu-left {
-  position: relative;
-  width: 50px;
-  height: 50px;
-}
-
-.ncu-icon {
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  overflow: hidden;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-.ncu-icon img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.ncu-pendant {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  width: 50px;
-  height: 50px;
-}
-
-.ncu-pendant img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.ncu-right {
-  position: relative;
-  display: flex;
-  height: 50px;
-  flex-direction: column;
-  align-items: start;
-  color: var(--box-text-4);
-}
-
-.ncu-right :nth-child(1) {
-  display: flex;
-  height: 30px;
-  align-items: center;
-  justify-content: start;
-  font-size: 16px;
-}
-
-.ncu-right :nth-child(2) {
-  display: flex;
-  width: 100%;
-  height: 20px;
-  align-items: center;
-  justify-content: start;
-  border-top: 2px solid var(--common-shadow-2);
-  font-size: 14px;
-  opacity: 0.7;
-}
-
 .news-card-forum {
  position: absolute;
  top: 0;
--- a/src/pages/common/Posts.vue
+++ b/src/pages/common/Posts.vue
@@ -57,20 +57,7 @@
        </div>
        <div class="post-content">
          <div class="post-card-title" :title="post.title">{{ post.title }}</div>
-          <div class="post-card-user">
-            <div class="pcu-left">
-              <div class="pcu-icon">
-                <img :src="post.user.icon" alt="userIcon" />
-              </div>
-              <div v-if="post.user.pendant !== ''" class="pcu-pendent">
-                <img :src="post.user.pendant" alt="userPendant" />
-              </div>
-            </div>
-            <div class="pcu-right">
-              <span>{{ post.user.nickname }}</span>
-              <span :title="post.user.label">{{ post.user.label }}</span>
-            </div>
-          </div>
+          <TpAvatar :data="post.user" position="left" />
          <div class="post-card-data">
            <div class="pcd-item" :title="`浏览数：${post.data.view}`">
              <v-icon>mdi-eye</v-icon>
@@ -108,6 +95,7 @@ import { nextTick, onMounted, ref, watch } from "vue";
 import showConfirm from "../../components/func/confirm";
 import showSnackbar from "../../components/func/snackbar";
 import ToLoading from "../../components/overlay/to-loading.vue";
+import TpAvatar from "../../components/post/tp-avatar.vue";
 import Mys from "../../plugins/Mys";
 import TGClient from "../../utils/TGClient";
 import { createPost } from "../../utils/TGWindow";
@@ -457,76 +445,6 @@ function searchPost(): void {
  white-space: nowrap;
 }

-.post-card-user {
-  display: flex;
-}
-
-.pcu-left {
-  position: relative;
-  width: 50px;
-  height: 50px;
-}
-
-.pcu-icon {
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  overflow: hidden;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-.pcu-icon img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.pcu-pendent {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  width: 50px;
-  height: 50px;
-}
-
-.pcu-pendent img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.pcu-right {
-  position: relative;
-  display: flex;
-  max-width: calc(100% - 50px);
-  height: 50px;
-  flex-direction: column;
-  align-items: start;
-  color: var(--box-text-4);
-}
-
-.pcu-right :nth-child(1) {
-  display: flex;
-  height: 30px;
-  align-items: center;
-  justify-content: start;
-  font-size: 16px;
-}
-
-.pcu-right :nth-child(2) {
-  overflow: hidden;
-  width: 100%;
-  height: 20px;
-  border-top: 2px solid var(--common-shadow-2);
-  font-size: 14px;
-  opacity: 0.7;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .post-card-forum {
  position: absolute;
  top: 0;
--- a/src/plugins/Mys/types/Forum.d.ts
+++ b/src/plugins/Mys/types/Forum.d.ts
@@ -1,7 +1,7 @@
 /**
 * @file plugins/Mys/types/Forum.d.ts
 * @description Mys 插件论坛类型定义文件
- * @since Beta v0.3.7
+ * @since Beta v0.4.0
 */

 /**
@@ -46,17 +46,13 @@ declare namespace TGApp.Plugins.Mys.Forum {

  /**
   * @description 用于渲染的咨讯卡片
-   * @since Beta v0.3.7
+   * @since Beta v0.4.0
   * @interface RenderCard
   * @property {string} title 标题
   * @property {string} cover 封面图片 URL
   * @property {string} postId 帖子 ID
   * @property {string} subtitle 副标题
-   * @property user 发帖用户
-   * @property {string} user.nickname 用户昵称
-   * @property {string} user.pendant 用户头像挂件
-   * @property {string} user.icon 用户头像
-   * @property {string} user.label 用户标签
+   * @property {TGApp.Plugins.Mys.User.Post} user 发帖用户
   * @property forum 版块
   * @property {string} forum.name 版块名称
   * @property {string} forum.icon 版块图标
@@ -74,12 +70,7 @@ declare namespace TGApp.Plugins.Mys.Forum {
    cover: string;
    postId: string;
    subtitle: string;
-    user: {
-      nickname: string;
-      pendant: string;
-      icon: string;
-      label: string;
-    };
+    user: TGApp.Plugins.Mys.User.Post;
    forum: {
      name: string;
      icon: string;
--- a/src/plugins/Mys/types/News.d.ts
+++ b/src/plugins/Mys/types/News.d.ts
@@ -1,7 +1,7 @@
 /**
 * @file plugins/Mys/types/news.d.ts
 * @description Mys 插件咨讯类型定义文件
- * @since Beta v0.3.7
+ * @since Beta v0.4.0
 */

 /**
@@ -122,17 +122,13 @@ declare namespace TGApp.Plugins.Mys.News {

  /**
   * @description 用于渲染的咨讯卡片
-   * @since Alpha v0.2.1
+   * @since Beta v0.4.0
   * @interface RenderCard
   * @property {string} title 标题
   * @property {string} cover 封面图片 URL
   * @property {number} postId 帖子 ID
   * @property {string} subtitle 副标题
-   * @property user 发帖用户
-   * @property {string} user.nickname 用户昵称
-   * @property {string} user.pendant 用户头像挂件
-   * @property {string} user.icon 用户头像
-   * @property {string} user.label 用户标签
+   * @property {TGApp.Plugins.Mys.User.Post} user 发帖用户
   * @property forum 版块
   * @property {string} forum.name 版块名称
   * @property {string} forum.icon 版块图标
@@ -150,12 +146,7 @@ declare namespace TGApp.Plugins.Mys.News {
    cover: string;
    postId: number;
    subtitle: string;
-    user: {
-      nickname: string;
-      pendant: string;
-      icon: string;
-      label: string;
-    };
+    user: TGApp.Plugins.Mys.User.Post;
    forum: {
      name: string;
      icon: string;
--- a/src/plugins/Mys/utils/getNewsCard.ts
+++ b/src/plugins/Mys/utils/getNewsCard.ts
@@ -78,7 +78,7 @@ export function getPostCover(item: TGApp.Plugins.Mys.News.Item): string {

 /**
 * @description 获取公共属性
- * @since Alpha v0.2.1
+ * @since Beta v0.4.0
 * @param {TGApp.Plugins.Mys.News.Item} item 咨讯列表项
 * @returns {TGApp.Plugins.Mys.News.RenderCard} 渲染用咨讯列表项
 */
@@ -88,12 +88,7 @@ function getCommonCard(item: TGApp.Plugins.Mys.News.Item): TGApp.Plugins.Mys.New
    cover: getPostCover(item),
    postId: Number(item.post.post_id),
    subtitle: item.post.post_id,
-    user: {
-      nickname: item.user.nickname,
-      pendant: item.user.pendant,
-      icon: item.user.avatar_url,
-      label: item.user.certification.label,
-    },
+    user: item.user,
    forum: {
      name: item.forum.name,
      icon: item.forum.icon,
--- a/src/plugins/Mys/utils/getPostsCard.ts
+++ b/src/plugins/Mys/utils/getPostsCard.ts
@@ -13,18 +13,12 @@ import { getPostCover } from "./getNewsCard";
 * @returns {TGApp.Plugins.Mys.Forum.RenderCard} 渲染用帖子
 */
 function getPostCard(post: TGApp.Plugins.Mys.News.Item): TGApp.Plugins.Mys.Forum.RenderCard {
-  const userLabel = getUserLabel(post);
  return {
    title: post.post.subject,
    cover: getPostCover(post),
    postId: 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,
-    },
+    user: post.user,
    forum: {
      name: post.forum.name,
      icon: post.forum.icon,
@@ -39,19 +33,6 @@ function getPostCard(post: TGApp.Plugins.Mys.News.Item): TGApp.Plugins.Mys.Forum
  };
 }

-/**
- * @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
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -38,20 +38,7 @@
          <span>{{ postData.stat.forward_num }}</span>
        </div>
      </div>
-      <div class="tp-post-author">
-        <div class="mpa-left">
-          <span>{{ postData.user.nickname }}</span>
-          <span :title="getMpaLeftDesc()">{{ getMpaLeftDesc() }}</span>
-        </div>
-        <div class="mpa-right" @click="toAuthor()" title="点击前往用户主页">
-          <div class="mpa-icon">
-            <img :src="postData.user.avatar_url" alt="userIcon" />
-          </div>
-          <div v-if="postData.user.pendant !== ''" class="mpa-pendant">
-            <img :src="postData.user.pendant" alt="userPendant" />
-          </div>
-        </div>
-      </div>
+      <TpAvatar :data="postData.user" position="right" />
    </div>
    <div class="tp-post-title" @click="toPost()" title="点击查看评论">
      <span class="mpt-official" v-if="postData.post.post_status.is_official">官</span>
@@ -97,6 +84,7 @@ import { useRoute } from "vue-router";
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
 import TShareBtn from "../components/main/t-shareBtn.vue";
 import ToLoading from "../components/overlay/to-loading.vue";
+import TpAvatar from "../components/post/tp-avatar.vue";
 import TpParser from "../components/post/tp-parser.vue";
 import TpoCollection from "../components/post/tpo-collection.vue";
 import Mys from "../plugins/Mys";
@@ -183,12 +171,6 @@ function showOverlayC() {
  showCollection.value = true;
 }

-function getMpaLeftDesc(): string {
-  return postData.value?.user.certification?.label === ""
-    ? postData.value?.user.introduce ?? ""
-    : postData.value?.user.certification?.label ?? "";
-}
-
 function getDate(date: number): string {
  return new Date(date * 1000).toLocaleString().replace(/\//g, "-");
 }
@@ -245,11 +227,6 @@ function createPostJson(postId: number): void {
  createTGWindow(jsonPath, "Dev_JSON", jsonTitle, 960, 720, false, false);
 }

-async function toAuthor(): Promise<void> {
-  const url = `https://m.miyoushe.com/ys/#/accountCenter/0?id=${postData.value?.user.uid}`;
-  await TGClient.open("web_thin", url);
-}
-
 async function toPost(): Promise<void> {
  const url = `https://m.miyoushe.com/ys/#/article/${postId}`;
  await TGClient.open("web_thin", url);
@@ -322,73 +299,6 @@ onUnmounted(() => {
  opacity: 0.6;
 }

-/* author */
-.tp-post-author {
-  display: flex;
-}
-
-.mpa-left {
-  position: relative;
-  display: flex;
-  height: 50px;
-  flex-direction: column;
-  align-items: end;
-  color: var(--box-text-4);
-}
-
-.mpa-left :nth-child(1) {
-  font-size: 16px;
-}
-
-.mpa-left :nth-child(2) {
-  overflow: hidden;
-  height: 20px;
-  align-items: center;
-  border-top: 2px solid var(--common-shadow-2);
-  font-size: 14px;
-  opacity: 0.7;
-  text-align: right;
-  text-overflow: ellipsis;
-}
-
-.mpa-right {
-  position: relative;
-  width: 50px;
-  height: 50px;
-  cursor: pointer;
-}
-
-.mpa-icon {
-  position: absolute;
-  top: 5px;
-  left: 5px;
-  overflow: hidden;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-.mpa-icon img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.mpa-pendant {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  width: 50px;
-  height: 50px;
-}
-
-.mpa-pendant img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 /* meta */
 .tp-post-meta {
  display: flex;