Skip to content

Commit

Permalink
💄 显示用户等级
Browse files Browse the repository at this point in the history
  • Loading branch information
BTMuli committed Sep 21, 2024
1 parent 7fce3ba commit 39a1a1d
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 2 deletions.
36 changes: 35 additions & 1 deletion src/components/post/tp-avatar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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";
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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>
1 change: 1 addition & 0 deletions src/components/post/tp-linkCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
22 changes: 21 additions & 1 deletion src/components/postReply/tpr-reply.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 39a1a1d

Please sign in to comment.