💄 调整帖子详情页面样式

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>

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;

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>

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>