💄 显示用户等级

src/components/post/tp-avatar.vue

@@ -12,6 +12,7 @@
         class="tpa-pendant"
         v-if="props.data.pendant !== ''"
       />
+      <div :class="`tpa-level-${props.position}`">{{ props.data.level_exp.level }}</div>
     </div>
     <div v-if="props.position === 'left'" class="tpa-text">
       <div>{{ props.data.nickname }}</div>
@@ -20,6 +21,8 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { computed } from "vue";
+
 interface TpAvatarProps {
   data: TGApp.Plugins.Mys.User.Post;
   position: "left" | "right";
@@ -36,6 +39,14 @@ function getAuthorDesc(): string {
 
 const flexAlign = props.position === "left" ? "flex-start" : "flex-end";
 const textAlign = props.position;
+const levelColor = computed<string>(() => {
+  const level = props.data.level_exp.level;
+  if (level < 5) return "var(--tgc-od-green)";
+  if (level < 9) return "var(--tgc-od-blue)";
+  if (level < 13) return "var(--tgc-od-purple)";
+  if (level > 12) return "var(--tgc-od-orange)";
+  return "var(--tgc-od-white)";
+});
 </script>
 <style lang="css" scoped>
 .tp-avatar-box {
@@ -84,10 +95,10 @@ const textAlign = props.position;
   position: absolute;
   top: 5px;
   left: 5px;
-  overflow: hidden;
   width: 40px;
   height: 40px;
   border-radius: 50%;
+  background: var(--common-shadow-1);
 }
 
 .tpa-pendant {
@@ -97,4 +108,27 @@ const textAlign = props.position;
   width: 50px;
   height: 50px;
 }
+
+.tpa-level-left,
+.tpa-level-right {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: v-bind(levelColor);
+  color: var(--tgc-white-1);
+  font-size: 10px;
+}
+
+.tpa-level-right {
+  right: 0;
+}
+
+.tpa-level-left {
+  left: 0;
+}
 </style>

src/components/post/tp-linkCard.vue

@@ -93,6 +93,7 @@ async function toLink() {
   padding: 10px;
   border: 1px solid var(--common-shadow-1);
   border-radius: 10px;
+  margin-bottom: 10px;
   background: var(--app-side-bg);
   column-gap: 10px;
 }

src/components/postReply/tpr-reply.vue

@@ -22,6 +22,7 @@
       </div>
       <div class="tpru-right" :title="props.modelValue.user.nickname">
         <span>{{ props.modelValue.user.nickname }}</span>
+        <span class="level">Lv.{{ props.modelValue.user.level_exp.level }}</span>
         <span v-if="props.modelValue.is_lz" class="tpru-lz">楼主</span>
       </div>
     </div>
@@ -107,7 +108,7 @@ import { event, path } from "@tauri-apps/api";
 import { UnlistenFn, Event } from "@tauri-apps/api/event";
 import { save } from "@tauri-apps/plugin-dialog";
 import { writeTextFile } from "@tauri-apps/plugin-fs";
-import { toRaw, ref, watch, onMounted, onUnmounted } from "vue";
+import { toRaw, ref, watch, computed, onMounted, onUnmounted } from "vue";
 
 import Mys from "../../plugins/Mys/index.js";
 import { generateShareImg } from "../../utils/TGShare.js";
@@ -137,6 +138,15 @@ let subListener: UnlistenFn | null = null;
 
 console.log("TprReply", toRaw(props.modelValue));
 
+const levelColor = computed<string>(() => {
+  const level = props.modelValue.user.level_exp.level;
+  if (level < 5) return "var(--tgc-od-green)";
+  if (level < 9) return "var(--tgc-od-blue)";
+  if (level < 13) return "var(--tgc-od-purple)";
+  if (level > 12) return "var(--tgc-od-orange)";
+  return "var(--tgc-od-white)";
+});
+
 onMounted(async () => {
   if (props.mode === "main") {
     subListener = await listenSub();
@@ -323,6 +333,16 @@ async function exportData(): Promise<void> {
   object-fit: cover;
 }
 
+.level {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 2px;
+  border-radius: 2px;
+  background: v-bind(levelColor);
+  font-size: 12px;
+}
+
 .tpru-right {
   display: flex;
   overflow: hidden;