From f3dd8287cf09cfc30de6f5fa3f93f0f04dc1d5ca Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 18 Sep 2025 18:18:50 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E5=B8=96?=
 =?UTF-8?q?=E5=AD=90=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/t-pinWin.vue            | 58 ++++++++++++----
 src/components/app/t-postcard.vue          | 22 +++---
 src/components/app/t-shareBtn.vue          | 33 ++++++---
 src/components/app/t-switchTheme.vue       | 42 +++++++----
 src/components/viewPost/tpc-tag.vue        |  2 +-
 src/components/viewPost/vp-btn-collect.vue | 81 ++++++++++++++++------
 src/components/viewPost/vp-btn-reply.vue   | 45 ++++++++----
 src/views/t-post.vue                       | 68 +++++++++---------
 8 files changed, 232 insertions(+), 119 deletions(-)

diff --git a/src/components/app/t-pinWin.vue b/src/components/app/t-pinWin.vue
index 5a6b1359..b369cacd 100644
--- a/src/components/app/t-pinWin.vue
+++ b/src/components/app/t-pinWin.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="tpw-box" data-html2canvas-ignore>
-    <div class="tpw-btn" @click="switchPin()" :title="isPined ? '取消置顶' : '窗口置顶'">
-      <v-icon :color="isPined ? 'yellow' : 'inherit'">
+  <div
+    class="tpw-box"
+    :class="isPined ? 'active' : ''"
+    :title="isPined ? '取消置顶' : '窗口置顶'"
+    data-html2canvas-ignore
+  >
+    <div class="tpw-btn" @click="switchPin()">
+      <v-icon size="20">
         {{ isPined ? "mdi-pin-off" : "mdi-pin" }}
       </v-icon>
     </div>
@@ -22,27 +27,56 @@ async function switchPin(): Promise<void> {
   showSnackbar.success(isPined.value ? "已将窗口置顶！" : "已经取消窗口置顶!");
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .tpw-box {
+  @include github-styles.github-card;
+
   position: fixed;
-  top: 70px;
-  left: 20px;
-  border: 2px solid var(--common-shadow-8);
+  top: 64px;
+  left: 16px;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
   cursor: pointer;
 
-  :hover {
-    opacity: 0.8;
+  &.active {
+    background: var(--tgc-btn-1);
+    box-shadow: 1px 3px 6px var(--common-shadow-2);
+    color: var(--btn-text);
+  }
+
+  &:hover:not(.active) {
+    background: var(--common-shadow-1);
+  }
+}
+
+.dark .tpw-box {
+  border: 1px solid var(--common-shadow-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-t-2);
+
+  &:not(.active) {
+    @include github-styles.github-card("dark");
+
+    &:hover {
+      background: var(--common-shadow-6);
+    }
   }
 }
 
 .tpw-btn {
+  position: relative;
+  z-index: 1;
   display: flex;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   align-items: center;
   justify-content: center;
-  margin: 5px;
   rotate: 30deg;
 }
 </style>
diff --git a/src/components/app/t-postcard.vue b/src/components/app/t-postcard.vue
index 278a244c..4c2f7fed 100644
--- a/src/components/app/t-postcard.vue
+++ b/src/components/app/t-postcard.vue
@@ -418,6 +418,17 @@ function onUserClick(): void {
   color: var(--tgc-white-1);
   cursor: pointer;
   text-shadow: 0 0 4px var(--tgc-dark-1);
+
+  img {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+
+    &:hover {
+      transform: scale(1.1);
+      transition: all 0.3s linear;
+    }
+  }
 }
 
 .tpc-select {
@@ -437,17 +448,6 @@ function onUserClick(): void {
   color: var(--box-text-5);
 }
 
-.tpc-forum img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
-}
-
-.tpc-cover img:hover {
-  transform: scale(1.1);
-  transition: all 0.3s linear;
-}
-
 .tpc-data {
   display: flex;
   width: fit-content;
diff --git a/src/components/app/t-shareBtn.vue b/src/components/app/t-shareBtn.vue
index fee7ecfd..4f013389 100644
--- a/src/components/app/t-shareBtn.vue
+++ b/src/components/app/t-shareBtn.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="share-box" title="分享">
     <div class="share-btn" @click="shareContent()">
-      <v-icon>mdi-share-variant</v-icon>
+      <v-icon size="20">mdi-share-variant</v-icon>
     </div>
   </div>
 </template>
@@ -36,27 +36,38 @@ async function shareContent(): Promise<void> {
   await TGLogger.Info("[TShareBtn][shareContent] 生成分享图片完成");
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .share-box {
   position: fixed;
-  top: 20px;
-  right: 20px;
-  border: 2px solid var(--common-shadow-8);
+  top: 16px;
+  right: 16px;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
+  background: var(--tgc-btn-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-2);
+  color: var(--btn-text);
   cursor: pointer;
 }
 
-.share-box:hover {
-  opacity: 0.8;
+.dark .share-box {
+  border: 1px solid var(--common-shadow-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-t-2);
 }
 
 .share-btn {
+  position: relative;
+  z-index: 1;
   display: flex;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   align-items: center;
   justify-content: center;
-  padding-right: 3px;
-  margin: 5px;
 }
 </style>
diff --git a/src/components/app/t-switchTheme.vue b/src/components/app/t-switchTheme.vue
index 5e8ea6ce..c247be6e 100644
--- a/src/components/app/t-switchTheme.vue
+++ b/src/components/app/t-switchTheme.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="switch-box" :title="theme === 'default' ? '切换到深色模式' : '切换到浅色模式'">
+  <div class="switch-box" :title="isDefault ? '切换到深色模式' : '切换到浅色模式'">
     <div class="switch-btn" @click="switchTheme()">
-      <v-icon>
-        {{ theme === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
+      <v-icon size="20">
+        {{ isDefault ? "mdi-weather-night" : "mdi-weather-sunny" }}
       </v-icon>
     </div>
   </div>
@@ -12,10 +12,12 @@ import useAppStore from "@store/app.js";
 import { event } from "@tauri-apps/api";
 import type { Event, UnlistenFn } from "@tauri-apps/api/event";
 import { storeToRefs } from "pinia";
-import { onMounted, onUnmounted } from "vue";
+import { computed, onMounted, onUnmounted } from "vue";
 
-const { theme } = storeToRefs(useAppStore());
 const appStore = useAppStore();
+const { theme } = storeToRefs(appStore);
+const isDefault = computed<boolean>(() => theme.value === "default");
+
 let themeListener: UnlistenFn | null = null;
 
 onMounted(async () => {
@@ -36,26 +38,38 @@ onUnmounted(() => {
   }
 });
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .switch-box {
   position: fixed;
-  top: 20px;
-  left: 20px;
-  border: 2px solid var(--common-shadow-8);
+  top: 16px;
+  left: 16px;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
+  background: var(--tgc-btn-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-2);
+  color: var(--btn-text);
   cursor: pointer;
 }
 
-.switch-box:hover {
-  opacity: 0.8;
+.dark .switch-box {
+  border: 1px solid var(--common-shadow-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-t-2);
 }
 
 .switch-btn {
+  position: relative;
+  z-index: 1;
   display: flex;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   align-items: center;
   justify-content: center;
-  margin: 5px;
 }
 </style>
diff --git a/src/components/viewPost/tpc-tag.vue b/src/components/viewPost/tpc-tag.vue
index 55563ee5..6ac95835 100644
--- a/src/components/viewPost/tpc-tag.vue
+++ b/src/components/viewPost/tpc-tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="tag-label" :title="`点击跳转#${props.tag}`">
+  <span class="tag-label" :title="`点击跳转#${props.tag}#`">
     {{ props.tag }}
   </span>
 </template>
diff --git a/src/components/viewPost/vp-btn-collect.vue b/src/components/viewPost/vp-btn-collect.vue
index b9669091..67f27ca5 100644
--- a/src/components/viewPost/vp-btn-collect.vue
+++ b/src/components/viewPost/vp-btn-collect.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="tbc-box" data-html2canvas-ignore>
+  <div class="tbc-box" :class="isCollected ? 'active' : ''" data-html2canvas-ignore>
     <div class="tbc-btn" @click="switchCollect()" :title="isCollected ? '取消收藏' : '收藏'">
-      <v-icon :color="isCollected ? 'yellow' : 'inherit'">
+      <v-icon size="20">
         {{ isCollected ? "mdi-star" : "mdi-star-outline" }}
       </v-icon>
     </div>
     <div class="tbc-edit" title="编辑收藏" v-if="isCollected" @click="showEdit = !showEdit">
-      <v-icon size="small">mdi-pencil</v-icon>
+      <v-icon size="8">mdi-pencil</v-icon>
     </div>
   </div>
   <VpOverlayCollect v-model="showEdit" :post="props.data" @submit="refresh()" />
@@ -80,38 +80,77 @@ async function switchCollect(): Promise<void> {
   showSnackbar.success("取消收藏成功");
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .tbc-box {
+  @include github-styles.github-card;
+
   position: fixed;
-  top: 70px;
-  right: 20px;
-  border: 2px solid var(--common-shadow-8);
+  top: 64px;
+  right: 16px;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
   cursor: pointer;
 
-  :hover {
-    opacity: 0.8;
+  &.active {
+    background: var(--tgc-btn-1);
+    box-shadow: 1px 3px 6px var(--common-shadow-2);
+    color: var(--btn-text);
+  }
+
+  &:hover:not(.active) {
+    background: var(--common-shadow-1);
+  }
+}
+
+.dark .tbc-box {
+  border: 1px solid var(--common-shadow-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-t-2);
+
+  &:not(.active) {
+    @include github-styles.github-card("dark");
+
+    &:hover {
+      background: var(--common-shadow-6);
+    }
   }
 }
 
 .tbc-btn {
-  display: flex;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  margin: 5px;
-}
-
-.tbc-edit {
-  position: absolute;
-  right: -10px;
-  bottom: -10px;
+  position: relative;
+  z-index: 1;
   display: flex;
   width: 20px;
   height: 20px;
   align-items: center;
   justify-content: center;
+}
+
+.tbc-edit {
+  @include github-styles.github-card;
+
+  position: absolute;
+  z-index: 2;
+  right: -4px;
+  bottom: -4px;
+  display: flex;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border: unset;
+  border-radius: 50%;
   cursor: pointer;
 }
+
+.dark .tbc-edit {
+  @include github-styles.github-card("dark");
+}
 </style>
diff --git a/src/components/viewPost/vp-btn-reply.vue b/src/components/viewPost/vp-btn-reply.vue
index 49f56d31..4b8bc4cb 100644
--- a/src/components/viewPost/vp-btn-reply.vue
+++ b/src/components/viewPost/vp-btn-reply.vue
@@ -13,12 +13,15 @@
         <v-btn
           :loading="loading"
           class="tpr-btn"
-          size="38px"
           variant="outlined"
           @click="showReply()"
-          icon="mdi-message-text-outline"
           v-bind="props"
-        />
+          size="36"
+        >
+          <template #default>
+            <v-icon size="20">mdi-message-text-outline</v-icon>
+          </template>
+        </v-btn>
       </template>
       <div class="tpr-main-reply">
         <div class="tpr-main-filter">
@@ -169,21 +172,33 @@ async function handleDebug(): Promise<void> {
 <style lang="scss" scoped>
 .tpr-main-box {
   position: fixed;
-  bottom: 20px;
-  left: 20px;
+  bottom: 16px;
+  left: 16px;
+  display: flex;
+  width: 36px;
+  height: 36px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--tgc-btn-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-2);
+  color: var(--btn-text);
+  cursor: pointer;
+}
+
+.dark .tpr-main-box {
+  border: 1px solid var(--common-shadow-1);
+  box-shadow: 1px 3px 6px var(--common-shadow-t-2);
 }
 
 .tpr-btn {
-  display: flex;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid var(--common-shadow-8);
-
-  &:hover {
-    opacity: 0.8;
-  }
+  position: relative;
+  z-index: 1;
+  width: 36px;
+  height: 36px;
+  border: unset;
+  border-radius: 50%;
 }
 
 .tpr-main-reply {
diff --git a/src/views/t-post.vue b/src/views/t-post.vue
index af2bef0b..258ee025 100644
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -22,15 +22,15 @@
           </div>
         </div>
         <div class="mpm-item" :title="`浏览数：${postData?.stat?.view_num}`">
-          <v-icon>mdi-eye</v-icon>
+          <v-icon size="16">mdi-eye</v-icon>
           <span>{{ postData?.stat?.view_num }}</span>
         </div>
         <div class="mpm-item" :title="`收藏数：${postData?.stat?.bookmark_num}`">
-          <v-icon>mdi-star</v-icon>
+          <v-icon size="16">mdi-star</v-icon>
           <span>{{ postData?.stat?.bookmark_num }}</span>
         </div>
         <div class="mpm-item" :title="`回复数：${postData?.stat?.reply_num}`">
-          <v-icon>mdi-comment</v-icon>
+          <v-icon size="16">mdi-comment</v-icon>
           <span>{{ postData?.stat?.reply_num }}</span>
         </div>
         <div
@@ -39,11 +39,11 @@
           @click="tryLike()"
           :class="{ like: isLike }"
         >
-          <v-icon>mdi-thumb-up</v-icon>
+          <v-icon size="16">mdi-thumb-up</v-icon>
           <span>{{ postData?.stat?.like_num }}</span>
         </div>
         <div class="mpm-item" :title="`转发数：${postData?.stat?.forward_num}`">
-          <v-icon>mdi-share-variant</v-icon>
+          <v-icon size="16">mdi-share-variant</v-icon>
           <span>{{ postData?.stat?.forward_num }}</span>
         </div>
       </div>
@@ -81,15 +81,13 @@
         <v-icon size="10">mdi-lightbulb-on</v-icon>
         <span>{{ tag.text }}</span>
       </div>
-      <div
+      <TpcTag
         v-for="topic in postData.topics"
         :key="topic.id"
+        :tag="topic.name"
         class="tp-post-topic"
         @click="toTopic(topic)"
-      >
-        <v-icon size="10">mdi-tag</v-icon>
-        <span>{{ topic.name }}</span>
-      </div>
+      />
     </div>
     <div class="tp-post-subtitle">
       <span :title="`更新于:${getDate(postData.post.updated_at)}`">
@@ -120,6 +118,7 @@ import showLoading from "@comp/func/loading.js";
 import showSnackbar from "@comp/func/snackbar.js";
 import TpAvatar from "@comp/viewPost/tp-avatar.vue";
 import TpParser from "@comp/viewPost/tp-parser.vue";
+import TpcTag from "@comp/viewPost/tpc-tag.vue";
 import VpBtnCollect from "@comp/viewPost/vp-btn-collect.vue";
 import VpBtnReply from "@comp/viewPost/vp-btn-reply.vue";
 import VpOverlayCollection from "@comp/viewPost/vp-overlay-collection.vue";
@@ -405,9 +404,10 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   width: fit-content;
   align-items: center;
   justify-content: flex-start;
+  margin-bottom: 8px;
   column-gap: 8px;
-  font-size: 16px;
-  opacity: 0.6;
+  font-size: 12px;
+  opacity: 0.8;
 }
 
 .tp-post-copyright {
@@ -424,6 +424,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   display: flex;
   align-items: end;
   justify-content: space-between;
+  column-gap: 8px;
 }
 
 .tp-post-divider {
@@ -433,7 +434,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   box-sizing: border-box;
   border: 1px dashed var(--common-shadow-2);
   border-radius: 1px;
-  margin: 8px 0;
+  margin-top: 8px;
   background: transparent;
 }
 
@@ -441,7 +442,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   position: absolute;
   top: 0;
   left: 0;
-  color: var(--box-text-4);
+  color: var(--box-text-1);
   font-family: var(--font-title);
   font-size: 14px;
   opacity: 0.6;
@@ -449,7 +450,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 
 .tp-post-meta {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: start;
   color: var(--box-text-4);
   column-gap: 8px;
@@ -510,9 +511,9 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   gap: 8px 4px;
 }
 
-.tp-post-collection,
-.tp-post-topic,
-.tp-post-reason {
+.tp-post-collection {
+  @include github-styles.github-tag-dark-gen(#3572a5);
+
   display: flex;
   height: 20px;
   box-sizing: border-box;
@@ -521,31 +522,30 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   padding: 0 4px;
   border-radius: 4px;
   column-gap: 2px;
+  cursor: pointer;
   font-family: var(--font-title);
   font-size: 12px;
-}
-
-.tp-post-collection {
-  @include github-styles.github-tag-dark-gen(#3572a5);
-
-  cursor: pointer;
 
   &:hover {
     @include github-styles.github-tag-dark-gen(#98c379);
   }
 }
 
-.tp-post-topic {
-  @include github-styles.github-tag-dark-gen(#e06c63);
-
-  cursor: pointer;
-
-  &:hover {
-    @include github-styles.github-tag-dark-gen(#00aeec);
-  }
-}
-
 .tp-post-reason {
   @include github-styles.github-tag-dark-gen(#d19a66);
+
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 12px;
+  font-size: 12px;
+  gap: 2px;
+  user-select: none;
+}
+
+.tp-post-topic {
+  font-size: 12px;
 }
 </style>