✨ 查看帖子回复，查看子回复TODO

src/components/postReply/tpr-main.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="tpr-main-box" title="查看回复">
+    <v-menu location="end" :close-on-content-click="false">
+      <template #activator="{ props }">
+        <v-btn
+          :loading="loading"
+          class="tpr-btn"
+          size="38px"
+          variant="outlined"
+          @click="showReply()"
+          icon="mdi-message-text-outline"
+          v-bind="props"
+        />
+      </template>
+      <v-list width="300px" height="400px" class="tpr-reply-box">
+        <TprReply
+          v-for="(item, index) in reply"
+          :key="index"
+          :modelValue="item"
+          @replySub="handleSubReply"
+        />
+        <v-list-item v-if="isLast" class="text-center">
+          <v-chip color="info" label>没有更多了</v-chip>
+        </v-list-item>
+        <v-list-item v-else-if="loading" class="text-center">
+          <v-progress-circular indeterminate color="primary" />
+        </v-list-item>
+        <v-list-item v-else class="text-center">
+          <v-btn @click="loadReply()" color="primary">加载更多</v-btn>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+
+import Mys from "../../plugins/Mys/index.js";
+import showSnackbar from "../func/snackbar.js";
+
+import TprReply from "./tpr-reply.vue";
+
+interface TprMainProps {
+  gid: number;
+  postId: string;
+}
+
+const props = defineProps<TprMainProps>();
+const reply = ref<Array<TGApp.Plugins.Mys.Reply.ReplyFull>>([]);
+const lastId = ref<string | undefined>(undefined);
+const isLast = ref<boolean>(false);
+const loading = ref<boolean>(false);
+
+async function showReply(): Promise<void> {
+  if (reply.value.length > 0) return;
+  await loadReply();
+}
+
+async function loadReply(): Promise<void> {
+  if (isLast.value) {
+    showSnackbar({
+      text: "没有更多了",
+      color: "info",
+    });
+    return;
+  }
+  loading.value = true;
+  const resp = await Mys.Post.reply(props.postId, props.gid, true, lastId.value);
+  if ("retcode" in resp) {
+    showSnackbar({
+      text: `[${resp.retcode}] ${resp.message}`,
+      color: "warn",
+    });
+    return;
+  }
+  isLast.value = resp.is_last;
+  lastId.value = resp.last_id;
+  reply.value = reply.value.concat(resp.list);
+  loading.value = false;
+}
+
+async function handleSubReply(item: TGApp.Plugins.Mys.Reply.ReplyFull): Promise<void> {
+  console.log(item);
+}
+</script>
+<style lang="css" scoped>
+.tpr-main-box {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+}
+
+.tpr-btn {
+  display: flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--common-shadow-8);
+}
+
+.tpr-btn:hover {
+  opacity: 0.8;
+}
+
+.tpr-reply-box {
+  margin-left: 5px;
+}
+</style>

src/components/postReply/tpr-reply.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="tpr-reply-box">
+    <div
+      class="tpr-bubble"
+      v-if="props.modelValue.user.reply_bubble !== null"
+      :title="props.modelValue.user.reply_bubble.name"
+    >
+      <img :src="props.modelValue.user.reply_bubble.url" alt="bubble" />
+    </div>
+    <div class="tpr-user">
+      <div class="tpru-left">
+        <img :src="props.modelValue.user.avatar_url" alt="avatar" class="avatar" />
+        <img
+          :src="props.modelValue.user.pendant"
+          v-if="props.modelValue.user.pendant !== ''"
+          alt="pendant"
+          class="pendant"
+        />
+      </div>
+      <div class="tpru-right" :title="props.modelValue.user.nickname">
+        {{ props.modelValue.user.nickname }}
+      </div>
+    </div>
+    <div class="tpr-content">
+      <TpParser :data="JSON.parse(props.modelValue.reply.struct_content)" />
+    </div>
+    <div class="tpr-info">
+      <div class="tpri-left">
+        <span>{{ getTime() }}</span>
+        <span>{{ props.modelValue.user.ip_region }}</span>
+      </div>
+      <div class="tpri-right">
+        <span title="点赞数" class="tpr-like">
+          <v-icon size="small">mdi-thumb-up</v-icon>
+          {{ props.modelValue.stat.like_num }}
+        </span>
+        <span
+          v-if="props.modelValue.sub_replies.length > 0"
+          class="tpr-reply"
+          @click="emit('replySub', props.modelValue)"
+          title="查看子回复"
+        >
+          <v-icon size="small">mdi-message-text</v-icon>
+          {{ props.modelValue.sub_replies.length }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import TpParser from "../post/tp-parser.vue";
+
+interface TprReplyProps {
+  modelValue: TGApp.Plugins.Mys.Reply.ReplyFull;
+}
+
+interface TprReplyEmits {
+  (e: "update:modelValue", value: TGApp.Plugins.Mys.Reply.ReplyFull): void;
+
+  (e: "replySub", value: TGApp.Plugins.Mys.Reply.ReplyFull): void;
+}
+
+const props = defineProps<TprReplyProps>();
+const emit = defineEmits<TprReplyEmits>();
+
+function getTime(): string {
+  const time = new Date(props.modelValue.reply.created_at * 1000);
+  const now = new Date();
+  // 如果是今天，只显示 hh:mm
+  if (time.toDateString() === now.toDateString()) {
+    return time.toLocaleTimeString();
+  }
+  // 如果是今年，显示 MM-dd
+  if (time.getFullYear() === now.getFullYear()) {
+    return time.toLocaleDateString().slice(5);
+  }
+  // 否则显示 yyyy-MM-dd
+  return time.toLocaleDateString();
+}
+</script>
+<style lang="css" scoped>
+.tpr-reply-box {
+  position: relative;
+  display: flex;
+  width: 280px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 5px;
+  border-radius: 5px;
+  margin: 5px;
+  background: var(--box-bg-1);
+  row-gap: 5px;
+  word-break: break-all;
+}
+
+.tpr-bubble {
+  position: absolute;
+  top: 0;
+  right: 0;
+  opacity: 0.5;
+}
+
+.tpr-bubble img {
+  max-width: 100%;
+  height: 40px;
+  object-fit: contain;
+}
+
+.tpr-user {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px;
+}
+
+.tpru-left {
+  position: relative;
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.pendant {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+}
+
+.tpru-right {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-title);
+  font-size: 16px;
+  text-overflow: ellipsis;
+}
+
+.tpr-content {
+  width: 100%;
+}
+
+.tpr-info {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  opacity: 0.5;
+}
+
+.tpri-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.tpri-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.tpr-like {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+.tpr-reply {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  gap: 5px;
+}
+</style>

src/plugins/Mys/request/getPostReply.ts

@@ -10,7 +10,7 @@ import MysApi from "../api/index.js";
 /**
  * @description 获取帖子回复信息
  * @since Beta v0.5.5
- * @param {number} postId 帖子 ID
+ * @param {string} postId 帖子 ID
  * @param {number} gid 社区 ID
  * @param {boolean} isHot 是否热门
  * @param {boolean} onlyMaster 是否只看楼主
@@ -20,10 +20,10 @@ import MysApi from "../api/index.js";
  * @return {Promise<TGApp.Plugins.Mys.Reply.ReplyData|TGApp.BBS.Response.Base>}
  */
 export async function getPostReply(
-  postId: number,
+  postId: string,
   gid: number,
-  isHot: boolean,
-  lastId: string,
+  isHot: boolean = true,
+  lastId?: string,
   onlyMaster: boolean = false,
   orderType?: 1 | 2,
   size: number = 20,

src/views/t-post.vue

@@ -7,6 +7,7 @@
     v-model:loading="loadShare"
     :title="shareTitle"
   />
+  <TprMain :gid="postData.post.game_id" :post-id="postData.post.post_id" v-if="postData" />
   <ToLoading v-model="loading" :empty="loadingEmpty" :title="loadingTitle" :subtitle="loadingSub" />
   <div class="tp-post-body" v-if="postData">
     <div class="tp-post-info">
@@ -94,6 +95,7 @@ import TbCollect from "../components/post/tb-collect.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 TprMain from "../components/postReply/tpr-main.vue";
 import Mys from "../plugins/Mys/index.js";
 import { useAppStore } from "../store/modules/app.js";
 import TGClient from "../utils/TGClient.js";