💄 调整帖子卡片样式

src/assets/styles/github.styles.scss

@@ -20,13 +20,11 @@
 /* CardShadow，传入theme参数 */
 @mixin github-card-shadow($theme: "default") {
   @if $theme == "default" {
-    box-shadow:
-      #1f23280f 0 1px 1px 0,
-      #1f23280f 0 1px 3px 0;
+    box-shadow: #1f23280f 0 1px 1px 0,
+    #1f23280f 0 1px 3px 0;
   } @else {
-    box-shadow:
-      #01040999 0 1px 1px 0,
-      #01040999 0 1px 3px 0;
+    box-shadow: #01040999 0 1px 1px 0,
+    #01040999 0 1px 3px 0;
   }
 }
 

src/components/app/t-postcard.vue

@@ -39,13 +39,15 @@
     <div class="tpc-bottom">
       <div class="tpc-tags">
         <div v-for="(reason, idx) in card.reasons" :key="idx" class="tpc-reason" title="推荐理由">
-          <v-icon size="12">mdi-lightbulb-on</v-icon>
+          <v-icon size="10">mdi-lightbulb-on</v-icon>
           <span>{{ reason.text }}</span>
         </div>
-        <div v-for="topic in card.topics" :key="topic.id" class="tpc-tag" @click="toTopic(topic)">
-          <v-icon size="12">mdi-tag</v-icon>
-          <span>{{ topic.name }}</span>
-        </div>
+        <TpcTag
+          v-for="topic in card.topics"
+          :key="topic.id"
+          @click="toTopic(topic)"
+          :tag="topic.name"
+        />
       </div>
       <div class="tpc-data" v-if="card.data !== null">
         <div class="tpc-info-item" :title="`浏览数：${card.data.view}`">
@@ -86,6 +88,9 @@
     </div>
     <div
       class="tpc-forum"
+      :style="{
+        background: str2Color(`${card.forum.id}${card.forum.name}`, -60),
+      }"
       v-if="card.forum !== null && card.forum.name !== ''"
       :title="`频道: ${card.forum.name}`"
       @click="toForum(card.forum)"
@@ -100,17 +105,26 @@
       @click.stop="trySelect()"
       data-html2canvas-ignore
     />
-    <div class="tpc-info-id" v-else>{{ props.modelValue.post.post_id }}</div>
+    <div
+      class="tpc-info-id"
+      :style="{
+        background: str2Color(`${props.modelValue.post.post_id}`, 0),
+      }"
+      v-else
+    >
+      {{ props.modelValue.post.post_id }}
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import TMiImg from "@comp/app/t-mi-img.vue";
 import showSnackbar from "@comp/func/snackbar.js";
 import TpAvatar from "@comp/viewPost/tp-avatar.vue";
+import TpcTag from "@comp/viewPost/tpc-tag.vue";
 import { emit } from "@tauri-apps/api/event";
 import { generateShareImg } from "@utils/TGShare.js";
 import { createPost } from "@utils/TGWindow.js";
-import { timestampToDate } from "@utils/toolFunc.js";
+import { str2Color, timestampToDate } from "@utils/toolFunc.js";
 import { computed, onMounted, ref, shallowRef, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
@@ -248,6 +262,7 @@ function getPostCard(item: TGApp.BBS.Post.FullData): RenderCard {
     commonCard.subtitle = `${startTime} - ${endTime}`;
     commonCard.status = statusInfo;
   }
+  console.log(commonCard);
   return commonCard;
 }
 
@@ -375,31 +390,17 @@ function onUserClick(): void {
   gap: 4px;
 }
 
-.tpc-tag {
-  @include github-styles.github-tag-dark-gen(#e06c63);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 4px;
-  border-radius: 4px;
-  cursor: pointer;
-  gap: 4px;
-
-  &:hover {
-    @include github-styles.github-tag-dark-gen(#00aeec);
-  }
-}
-
 .tpc-reason {
   @include github-styles.github-tag-dark-gen(#d19a66);
 
   display: flex;
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  padding: 0 4px;
-  border-radius: 4px;
-  gap: 4px;
+  padding: 0 6px;
+  border-radius: 12px;
+  gap: 2px;
+  user-select: none;
 }
 
 .tpc-forum {
@@ -410,13 +411,12 @@ function onUserClick(): void {
   align-items: center;
   justify-content: flex-start;
   padding: 4px;
-  background: var(--tgc-od-white);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
   border-bottom-left-radius: 4px;
-  border-top-right-radius: 4px;
   box-shadow: 0 0 10px var(--tgc-dark-1);
   color: var(--tgc-white-1);
   cursor: pointer;
-  opacity: 0.8;
   text-shadow: 0 0 4px var(--tgc-dark-1);
 }
 
@@ -491,14 +491,15 @@ function onUserClick(): void {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 8px;
+  padding-right: 4px;
+  padding-left: 8px;
   background: var(--tgc-od-blue);
   border-top-left-radius: 12px;
-  box-shadow: -2px -2px 8px var(--tgc-dark-1);
+  box-shadow: -1px -1px 6px var(--tgc-dark-1);
   color: var(--tgc-white-1);
   column-gap: 2px;
   font-size: 12px;
-  opacity: 0.8;
+  line-height: 18px;
 }
 
 .tpc-status {
@@ -547,15 +548,13 @@ function onUserClick(): void {
   align-items: center;
   justify-content: center;
   padding: 0 4px;
-  -webkit-backdrop-filter: blur(20px);
-  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
   background: var(--tgc-od-orange);
   border-bottom-right-radius: 4px;
-  border-top-left-radius: 4px;
-  box-shadow: 2px 2px 4px var(--tgc-dark-1);
+  box-shadow: 1px 1px 6px var(--tgc-dark-1);
   color: var(--tgc-white-1);
   font-size: 12px;
-  opacity: 0.8;
   text-shadow: 0 0 4px var(--tgc-dark-1);
 }
 </style>

src/components/viewPost/tpc-tag.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="tag-label" :title="`点击跳转#${props.tag}`">
+    {{ props.tag }}
+  </span>
+</template>
+<script lang="ts" setup>
+import useAppStore from "@store/app.js";
+import { str2Color } from "@utils/toolFunc.js";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+
+type TpcTagProps = { tag: string };
+
+const props = defineProps<TpcTagProps>();
+const { theme } = storeToRefs(useAppStore());
+const isDarkMode = computed<boolean>(() => theme.value === "dark");
+const tagColor = computed<string>(() => tag2Color(props.tag, isDarkMode.value));
+const bgColor = computed<string>(() => `rgba(${tagColor.value.slice(4, -1)}, 0.18)`);
+
+function tag2Color(str: string, isDarkMode: boolean = false): string {
+  const adjust = isDarkMode ? 80 : -40;
+  return str2Color(str, adjust);
+}
+</script>
+<style lang="scss" scoped>
+.tag-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  border-radius: 12px;
+  background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
+  color: v-bind(tagColor); /* stylelint-disable-line value-keyword-case */
+  cursor: pointer;
+  gap: 2px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>

src/pages/User/Challenge.vue

@@ -270,15 +270,15 @@ async function refreshChallenge(): Promise<void> {
   isReq.value = true;
   await TGLogger.Info("[UserChallenge][refreshChallenge] 开始刷新挑战数据");
   await showLoading.start(`正在获取${account.value.gameUid}的幽境危战数据`);
-  const res = await recordReq.challenge.detail(cookie.value, account.value);
-  if ("retcode" in res) {
+  const resp = await recordReq.challenge.detail(cookie.value, account.value);
+  if ("retcode" in resp) {
     await showLoading.end();
     isReq.value = false;
-    showSnackbar.error(`[${res.retcode}] ${res.message}`);
-    await TGLogger.Error(`[UserChallenge][refreshChallenge] ${res.retcode} - ${res.message}`);
+    showSnackbar.error(`[${resp.retcode}] ${resp.message}`);
+    await TGLogger.Error(`[UserChallenge][refreshChallenge] ${resp.retcode} - ${resp.message}`);
     return;
   }
-  if (!res.is_unlock) {
+  if (!resp.is_unlock) {
     await showLoading.end();
     isReq.value = false;
     showSnackbar.warn("幽境危战未解锁");
@@ -286,7 +286,7 @@ async function refreshChallenge(): Promise<void> {
     return;
   }
   await showLoading.update("", { title: "正在保存幽境危战数据" });
-  for (const challenge of res.data) {
+  for (const challenge of resp.data) {
     if (challenge.schedule.schedule_id === "0") continue;
     await showLoading.update(`ScheduleID：${challenge.schedule.schedule_id}`);
     await TSUserChallenge.saveChallenge(account.value.gameUid, challenge);

src/pages/common/PostTopic.vue

@@ -287,8 +287,12 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   showUser.value = true;
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
+@use "@styles/github.styles.scss" as github-styles;
+
 .post-topic-top {
+  @include github-styles.github-card;
+
   position: relative;
   display: flex;
   overflow: hidden;
@@ -298,7 +302,6 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   border-radius: 4px;
   margin-right: 12px;
   margin-left: 12px;
-  background: var(--box-bg-2);
   gap: 4px;
 
   img {
@@ -307,6 +310,10 @@ function handleUserClick(user: TGApp.BBS.Post.User, gid: number): void {
   }
 }
 
+.dark .post-topic-top {
+  @include github-styles.github-card("dark");
+}
+
 .post-topic-info {
   position: relative;
   display: flex;

src/utils/toolFunc.ts

@@ -1,7 +1,7 @@
 /**
  * @file utils/toolFunc.ts
  * @description 一些工具函数
- * @since Beta v0.8.1
+ * @since Beta v0.8.2
  */
 
 import { AvatarExtResTypeEnum, AvatarExtTypeEnum } from "@enum/bbs.js";
@@ -359,3 +359,24 @@ export function getUserAvatar(
   // TODO: 处理其他类型头像
   return user.avatar_url;
 }
+
+/**
+ * @description 根据字符串生成颜色
+ * @since Beta v0.8.2
+ * @param {string} str - 输入字符串
+ * @param {number} adjust - 亮度调整值，正数变亮，负数变暗
+ * @returns {string} 生成的颜色 rgb(r, g, b)
+ */
+export function str2Color(str: string, adjust: number): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let r = (hash >> 16) & 0xff;
+  let g = (hash >> 8) & 0xff;
+  let b = hash & 0xff;
+  r = Math.min(Math.max(r + adjust, 0), 255);
+  g = Math.min(Math.max(g + adjust, 0), 255);
+  b = Math.min(Math.max(b + adjust, 0), 255);
+  return `rgb(${r}, ${g}, ${b})`;
+}