✨ 加载指定用户帖子

src/components/viewPost/tp-avatar.vue

@@ -89,17 +89,20 @@ const levelColor = computed<string>(() => {
 
 .tpa-img {
   position: relative;
+  display: flex;
   width: 50px;
   height: 50px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
 }
 
 .tpa-icon {
-  position: absolute;
-  top: 5px;
-  left: 5px;
+  position: relative;
   display: flex;
-  width: 40px;
-  height: 40px;
+  width: 100%;
+  height: 100%;
   align-items: center;
   justify-content: center;
   border-radius: 50%;

src/components/viewPost/tp-mention.vue

@@ -5,6 +5,7 @@
   </span>
 </template>
 <script lang="ts" setup>
+import { emit } from "@tauri-apps/api/event";
 import { toRaw } from "vue";
 
 export type TpMention = { insert: { mention: { uid: string; nickname: string } } };
@@ -14,11 +15,9 @@ const props = defineProps<TpMentionProps>();
 
 console.log("tpMention", props.data.insert.mention.uid, toRaw(props.data).insert.mention);
 
-// todo 个人主页
-function toLink(): void {
+async function toLink(): Promise<void> {
   const uid = props.data.insert.mention.uid;
-  const link = `https://www.miyoushe.com/ys/accountCenter/postList?id=${uid}`;
-  window.open(link);
+  await emit("userMention", uid);
 }
 </script>
 <style lang="css" scoped>

src/components/viewPost/vp-overlay-user.vue

@@ -0,0 +1,307 @@
+<template>
+  <TOverlay v-model="visible">
+    <div class="vp-ou-box">
+      <div class="vp-ou-user" v-if="userInfo">
+        <div class="vp-ouu-info">
+          <div class="left">
+            <div class="avatar">
+              <TMiImg :src="userInfo.avatar_url" alt="avatar" :ori="true" />
+            </div>
+            <div class="pendant" v-if="userInfo.pendant !== ''">
+              <TMiImg :src="userInfo.pendant" alt="pendant" :ori="true" />
+            </div>
+          </div>
+          <div class="right">
+            <div class="title">
+              <div class="nickname">{{ userInfo.nickname }}</div>
+              <div class="level">Lv.{{ userInfo.level_exp.level }}</div>
+            </div>
+            <div class="desc" :title="userInfo.introduce">{{ userInfo.introduce }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="vp-ou-mid">
+        <v-btn :loading="load" size="small" class="vp-ou-btn" @click="loadPosts()" rounded>
+          加载更多({{ results.length }})
+        </v-btn>
+        <div class="vp-ouu-extra" v-if="userInfo">
+          <span>ID:{{ userInfo.uid }}</span>
+          <span>IP:{{ userInfo.ip_region }}</span>
+        </div>
+      </div>
+      <div class="vp-ou-divider" />
+      <div class="vp-ou-list">
+        <TPostCard
+          class="vp-ou-item"
+          :model-value="item"
+          v-for="item in results"
+          :key="item.post.post_id"
+        />
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import TMiImg from "@comp/app/t-mi-img.vue";
+import TOverlay from "@comp/app/t-overlay.vue";
+import TPostCard from "@comp/app/t-postcard.vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import { computed, ref, shallowRef, watch } from "vue";
+
+import bbsReq from "@/web/request/bbsReq.js";
+import postReq from "@/web/request/postReq.js";
+
+type ToPostUserProps = { gid: number; uid: string; postId?: string };
+
+const props = defineProps<ToPostUserProps>();
+const visible = defineModel<boolean>();
+const offset = ref<string>();
+const isLast = ref<boolean>(false);
+const load = ref<boolean>(false);
+const userInfo = shallowRef<TGApp.BBS.User.Info>();
+const results = shallowRef<Array<TGApp.BBS.Post.FullData>>([]);
+const levelColor = computed<string>(() => {
+  if (!userInfo.value) return "var(--tgc-od-white)";
+  const level = userInfo.value.level_exp.level;
+  if (level < 5) return "var(--tgc-od-green)";
+  if (level < 9) return "var(--tgc-od-blue)";
+  if (level < 13) return "var(--tgc-od-purple)";
+  if (level > 12) return "var(--tgc-od-orange)";
+  return "var(--tgc-od-white)";
+});
+
+watch(
+  () => visible.value,
+  async () => {
+    if (visible.value && results.value.length === 0) await loadPosts();
+  },
+);
+
+watch(
+  () => props.uid,
+  async () => {
+    if (visible.value) {
+      offset.value = "";
+      isLast.value = false;
+      results.value = [];
+      await loadUser();
+      await loadPosts();
+    }
+  },
+);
+
+async function loadUser(): Promise<void> {
+  const resp = await bbsReq.otherUserInfo(props.gid, props.uid);
+  if ("retcode" in resp) {
+    showSnackbar.warn(`[${resp.retcode}] ${resp.message}`);
+    return;
+  }
+  userInfo.value = resp;
+  console.log(userInfo.value);
+}
+
+async function loadPosts(): Promise<void> {
+  if (load.value) return;
+  load.value = true;
+  if (isLast.value) {
+    showSnackbar.warn("没有更多了");
+    load.value = false;
+    return;
+  }
+  const resp = await postReq.user.post(props.uid, props.gid, offset.value);
+  if ("retcode" in resp) {
+    showSnackbar.warn(`[${resp.retcode}] ${resp.message}`);
+    load.value = false;
+    visible.value = false;
+    return;
+  }
+  offset.value = resp.next_offset;
+  isLast.value = resp.is_last;
+  results.value = results.value.concat(resp.list);
+  load.value = false;
+}
+</script>
+<style lang="scss" scoped>
+.vp-ou-box {
+  position: relative;
+  display: flex;
+  width: 400px;
+  height: 500px;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 10px;
+  border-radius: 5px;
+  background-color: var(--box-bg-1);
+  row-gap: 8px;
+}
+
+.vp-ou-user {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  row-gap: 4px;
+  max-width: 100%;
+}
+
+.vp-ouu-info {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+
+  .left {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .avatar {
+      position: relative;
+      display: flex;
+      width: 40px;
+      height: 40px;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background: var(--common-shadow-1);
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: contain;
+      }
+    }
+
+    .pendant {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      width: 50px;
+      height: 50px;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: contain;
+      }
+    }
+  }
+
+  .right {
+    position: relative;
+    display: flex;
+    max-width: calc(100% - 50px);
+    height: 50px;
+    flex-direction: column;
+    align-items: flex-start;
+    color: var(--box-text-4);
+
+    .title {
+      position: relative;
+      display: flex;
+      overflow: hidden;
+      align-items: center;
+      justify-content: center;
+      column-gap: 4px;
+      font-family: var(--font-title);
+      font-size: 16px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .level {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 2px;
+        border-radius: 2px;
+        background: v-bind(levelColor);
+        color: var(--tgc-white-1);
+        font-size: 12px;
+      }
+    }
+
+    .desc {
+      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: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+    }
+  }
+}
+
+.vp-ou-mid {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.vp-ou-btn {
+  width: fit-content;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+}
+
+.vp-ouu-extra {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 8px;
+  font-size: 12px;
+  color: var(--box-text-4);
+  opacity: 0.6;
+}
+
+.vp-ou-divider {
+  position: relative;
+  width: 100%;
+  height: 1px;
+  background-color: var(--common-shadow-2);
+}
+
+.vp-ou-list {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding-right: 8px;
+  padding-bottom: 8px;
+  overflow-y: auto;
+  row-gap: 10px;
+}
+
+.vp-ou-item {
+  height: fit-content;
+  flex-shrink: 0;
+}
+</style>

src/components/viewPost/vp-reply-item.vue

@@ -7,7 +7,7 @@
     >
       <TMiImg :ori="true" :src="props.modelValue.user.reply_bubble.url" alt="bubble" />
     </div>
-    <div class="tpr-user">
+    <div class="tpr-user" @click="handleUser()">
       <div class="tpru-left">
         <div class="avatar">
           <TMiImg :ori="true" :src="props.modelValue.user.avatar_url" alt="avatar" />
@@ -104,7 +104,7 @@ import TMiImg from "@comp/app/t-mi-img.vue";
 import showDialog from "@comp/func/dialog.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import { event, path } from "@tauri-apps/api";
-import type { Event, UnlistenFn } from "@tauri-apps/api/event";
+import { emit, Event, UnlistenFn } from "@tauri-apps/api/event";
 import { save } from "@tauri-apps/plugin-dialog";
 import { writeTextFile } from "@tauri-apps/plugin-fs";
 import { computed, onMounted, onUnmounted, ref, shallowRef, toRaw, watch } from "vue";
@@ -226,6 +226,11 @@ async function exportData(): Promise<void> {
   await writeTextFile(savePath, data);
   showSnackbar.success("导出成功");
 }
+
+async function handleUser(): Promise<void> {
+  const uid = props.modelValue.user.uid;
+  await emit("userMention", uid);
+}
 </script>
 <style lang="css" scoped>
 .tpr-reply-box {
@@ -264,6 +269,7 @@ async function exportData(): Promise<void> {
   height: 40px;
   align-items: center;
   justify-content: flex-start;
+  cursor: pointer;
   gap: 5px;
 }