✨ 帖子搜索集成

fix #103

src/components/post/to-postSearch.vue

@@ -0,0 +1,161 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="20px">
+    <div class="tops-box">
+      <div class="tops-top">查找：{{ search }}</div>
+      <div class="tops-act">
+        <span>分区：{{ getGidLabel() }}</span>
+        <v-btn size="small" class="tops-btn" @click="searchPosts()" rounded>
+          加载更多({{ results.length }})
+        </v-btn>
+      </div>
+      <div class="tops-list">
+        <div v-for="item in results" :key="item.post.post_id">
+          <TPostCard :model-value="item" />
+        </div>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from "vue";
+
+import Mys from "../../plugins/Mys";
+import TOverlay from "../main/t-overlay.vue";
+import TPostCard from "../main/t-postcard.vue";
+
+// data
+const search = ref("");
+const game = ref("2");
+const lastId = ref("");
+const isLast = ref(false);
+const results = ref<TGApp.Plugins.Mys.Post.FullData[]>([]);
+
+interface ToPostSearchProps {
+  modelValue: boolean;
+  gid: string;
+  keyword: string;
+}
+
+interface ToPostSearchEmits {
+  (e: "update:modelValue", value: boolean): void;
+
+  (e: "cancel"): void;
+}
+
+const props = defineProps<ToPostSearchProps>();
+const emits = defineEmits<ToPostSearchEmits>();
+
+const gameList: Record<string, string> = {
+  "1": "崩坏3",
+  "2": "原神",
+  "3": "崩坏2",
+  "4": "未定事件簿",
+  "5": "大别野",
+  "6": "崩坏：星穹铁道",
+  "8": "绝区零",
+};
+// overlay
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+function onCancel() {
+  visible.value = false;
+}
+
+onMounted(async () => {
+  search.value = props.keyword;
+  game.value = props.gid;
+});
+
+watch(
+  () => props.modelValue,
+  async (value) => {
+    if (value && results.value.length === 0) {
+      await searchPosts();
+    } else {
+      visible.value = value;
+    }
+  },
+);
+
+watch(
+  () => props.keyword,
+  async (value) => {
+    search.value = value;
+    results.value = [];
+    lastId.value = "";
+    isLast.value = false;
+  },
+);
+
+async function searchPosts() {
+  if (!props.gid || !props.keyword) {
+    return;
+  }
+  if (isLast.value) {
+    return;
+  }
+  const res = await Mys.Posts.search(game.value, search.value, lastId.value);
+  if (lastId.value === "") {
+    results.value = res.posts;
+  } else {
+    results.value = results.value.concat(res.posts);
+  }
+  lastId.value = res.last_id;
+  isLast.value = res.is_last;
+}
+
+function getGidLabel(): string {
+  if (gameList[game.value]) {
+    return gameList[game.value];
+  }
+  return "未知";
+}
+</script>
+<style lang="css" scoped>
+.tops-box {
+  padding: 10px;
+  border-radius: 5px;
+  background-color: var(--box-bg-1);
+}
+
+.tops-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 20px;
+  word-break: break-all;
+}
+
+.tops-act {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 5px;
+  border-bottom: 1px solid var(--common-shadow-2);
+  margin-bottom: 10px;
+}
+
+.tops-list {
+  display: flex;
+  width: 400px;
+  max-height: 400px;
+  flex-direction: column;
+  padding-right: 10px;
+  overflow-y: auto;
+  row-gap: 10px;
+}
+
+.tops-btn {
+  width: fit-content;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+}
+</style>

src/components/post/tp-avatar.vue

@@ -4,7 +4,7 @@
       <div>{{ props.data.nickname }}</div>
       <div :title="getAuthorDesc()">{{ getAuthorDesc() }}</div>
     </div>
-    <div class="tpa-img" @click="toAuthor()" title="点击前往用户主页">
+    <div class="tpa-img">
       <img :src="props.data.avatar_url" alt="avatar" class="tpa-icon" />
       <img
         :src="props.data.pendant"
@@ -34,11 +34,6 @@ function getAuthorDesc(): string {
   return props.data.introduce;
 }
 
-async function toAuthor(): Promise<void> {
-  const url = `https://www.miyoushe.com/ys/#/accountCenter/0?id=${props.data.uid}`;
-  window.open(url, "_blank");
-}
-
 const flexAlign = props.position === "left" ? "flex-start" : "flex-end";
 const textAlign = props.position;
 </script>
@@ -83,7 +78,6 @@ const textAlign = props.position;
   position: relative;
   width: 50px;
   height: 50px;
-  cursor: pointer;
 }
 
 .tpa-icon {