✨ 只看楼主、热门/最早/最新回复查看

src/components/postReply/tpr-main.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="tpr-main-box" title="查看回复">
-    <v-menu location="end" :close-on-content-click="false">
+    <v-menu
+      location="end"
+      :close-on-content-click="false"
+      v-model="showOverlay"
+      :persistent="true"
+      :no-click-animation="true"
+      z-index="0"
+    >
       <template #activator="{ props }">
         <v-btn
           :loading="loading"
@@ -12,33 +19,60 @@
           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>
+      <div class="tpr-main-reply">
+        <!-- 顶部负责显示回复条件&关闭按钮&刷新按钮 -->
+        <div class="tpr-main-filter">
+          <v-chip color="primary" label>回复列表</v-chip>
+          <v-switch
+            v-model="onlyLz"
+            color="primary"
+            hide-details
+            title="只看楼主"
+            @change="reloadReply"
+          />
+          <v-select
+            class="tpr-select"
+            density="compact"
+            v-model="orderType"
+            :items="orderList"
+            item-title="label"
+            item-value="value"
+            title="排序方式"
+          />
+          <v-btn @click="showOverlay = false" icon class="tpr-btn-close" size="small">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </div>
+        <v-list class="tpr-reply-list">
+          <TprReply
+            v-for="(item, index) in reply"
+            :key="index"
+            :modelValue="item"
+            mode="main"
+            @replySub="handleSubReply(item)"
+          />
+          <div v-if="isLast" class="tpr-list-item">
+            <v-chip color="info" label>没有更多了</v-chip>
+          </div>
+          <div v-else class="tpr-list-item">
+            <v-btn @click="loadReply()" color="primary" :loading="loading">加载更多</v-btn>
+          </div>
+        </v-list>
+      </div>
     </v-menu>
   </div>
+  <div v-if="curSub !== undefined">
+    <TprSub v-model="showSub" :reply="curSub" />
+  </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import Mys from "../../plugins/Mys/index.js";
 import showSnackbar from "../func/snackbar.js";
 
 import TprReply from "./tpr-reply.vue";
+import TprSub from "./tpr-sub.vue";
 
 interface TprMainProps {
   gid: number;
@@ -47,19 +81,60 @@ interface TprMainProps {
 
 const props = defineProps<TprMainProps>();
 const reply = ref<Array<TGApp.Plugins.Mys.Reply.ReplyFull>>([]);
+const curSub = ref<TGApp.Plugins.Mys.Reply.ReplyFull | undefined>(undefined);
 const lastId = ref<string | undefined>(undefined);
 const isLast = ref<boolean>(false);
 const loading = ref<boolean>(false);
+const showOverlay = ref<boolean>(false);
+const showSub = ref<boolean>(false);
+const onlyLz = ref<boolean>(false);
+const orderType = ref<"hot" | "latest" | "oldest">("hot");
+const orderList = [
+  { label: "热门", value: "hot" },
+  { label: "最新", value: "latest" },
+  { label: "最早", value: "oldest" },
+];
+const isHot = computed<boolean>(() => orderType.value === "hot");
+const replyOrder = computed<1 | 2 | undefined>(() => {
+  if (orderType.value === "hot") return undefined;
+  if (orderType.value === "latest") return 2;
+  if (orderType.value === "oldest") return 1;
+  return undefined;
+});
+
+watch(
+  () => orderType.value,
+  async () => {
+    onlyLz.value = false;
+    await reloadReply();
+  },
+);
 
 async function showReply(): Promise<void> {
   if (reply.value.length > 0) return;
   if (isLast.value) return;
   await loadReply();
+  if (reply.value.length > 0 && curSub.value === undefined) {
+    curSub.value = reply.value[0];
+  }
+}
+
+async function reloadReply(): Promise<void> {
+  lastId.value = undefined;
+  reply.value = [];
+  await loadReply();
 }
 
 async function loadReply(): Promise<void> {
   loading.value = true;
-  const resp = await Mys.Post.reply(props.postId, props.gid, true, lastId.value);
+  const resp = await Mys.Post.reply(
+    props.postId,
+    props.gid,
+    isHot.value,
+    lastId.value,
+    onlyLz.value,
+    replyOrder.value,
+  );
   if ("retcode" in resp) {
     showSnackbar({
       text: `[${resp.retcode}] ${resp.message}`,
@@ -80,7 +155,9 @@ async function loadReply(): Promise<void> {
 }
 
 async function handleSubReply(item: TGApp.Plugins.Mys.Reply.ReplyFull): Promise<void> {
-  console.log(item);
+  curSub.value = item;
+  showSub.value = true;
+  console.log("handleSubReply", item);
 }
 </script>
 <style lang="css" scoped>
@@ -103,7 +180,64 @@ async function handleSubReply(item: TGApp.Plugins.Mys.Reply.ReplyFull): Promise<
   opacity: 0.8;
 }
 
-.tpr-reply-box {
+.tpr-btn-close {
+  border: 1px solid var(--common-shadow-4);
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+}
+
+.tpr-main-reply {
+  position: relative;
+  display: flex;
+  width: 300px;
+  height: 400px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 5px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
   margin-left: 5px;
+  background: var(--app-page-bg);
+  overflow-y: auto;
+  row-gap: 10px;
+}
+
+.tpr-main-filter {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--app-page-content);
+  column-gap: 10px;
+}
+
+.tpr-select {
+  height: 40px;
+  font-size: 12px;
+}
+
+.tpr-reply-list {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 360px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 5px;
+  background: var(--app-page-bg);
+  overflow-y: auto;
+  row-gap: 5px;
+}
+
+.tpr-list-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
 }
 </style>

src/plugins/Mys/request/getPostReply.ts

@@ -41,6 +41,7 @@ export async function getPostReply(
     params["order_type"] = orderType;
   }
   if (onlyMaster) {
+    params["is_hot"] = false;
     params["only_master"] = onlyMaster;
   }
   const link = "https://bbs-api.miyoushe.com/post/wapi/getPostReplies";
@@ -91,7 +92,7 @@ export async function getPostSubReply(
   floorId: number,
   gid: number,
   postId: string,
-  lastId: string,
+  lastId?: string,
   size: number = 20,
 ): Promise<TGApp.Plugins.Mys.Reply.SubData | TGApp.BBS.Response.Base> {
   const params: Record<string, string | number> = {