💄 调整帖子详情页面样式

2026-03-20 04:39:45 +08:00 · 2025-09-18 18:18:50 +08:00
parent 843ee92670
commit f3dd8287cf
8 changed files with 232 additions and 119 deletions
--- 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>
--- 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;
--- 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>
--- 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>
--- 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>
--- 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>
--- 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 {
--- 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>