💄 调整战绩页面UI

src-tauri/Cargo.lock

@@ -4,7 +4,7 @@ version = 4
 
 [[package]]
 name = "TeyvatGuide"
-version = "0.6.7"
+version = "0.6.8"
 dependencies = [
  "chrono",
  "log",

src/components/userRecord/tur-home-sub.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="tur-hs-box">
-    <div class="bg"><img :src="data.bg" alt="bg" v-if="data.name !== '炽空境'" /></div>
+    <div class="bg">
+      <TMiImg :src="data.bg" alt="bg" :ori="true" />
+    </div>
     <div class="tur-hs-top">
       <div class="tur-hs-title">
-        <img :src="data.comfortIcon" alt="comfort" />
+        <TMiImg :src="data.comfortIcon" alt="icon" :ori="true" />
         <span>{{ data.comfortName }}</span>
       </div>
       <div class="tur-hs-name">{{ data.name }}</div>
@@ -29,6 +31,8 @@
   </div>
 </template>
 <script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
+
 defineProps<{ data: TGApp.Sqlite.Record.Home }>();
 </script>
 <style lang="css" scoped>
@@ -87,6 +91,8 @@ defineProps<{ data: TGApp.Sqlite.Record.Home }>();
 }
 
 .tur-hs-text-grid {
+  position: relative;
+  z-index: 1;
   display: flex;
   width: 100%;
   justify-content: space-between;

src/components/userRecord/tur-role-info.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tur-ri-box">
     <div class="tur-ri-avatar">
-      <img :src="props.modelValue.avatar" alt="avatar" />
+      <TMiImg :ori="true" :src="props.modelValue.avatar" alt="avatar" />
     </div>
     <div class="tur-ri-content">
       <div class="tur-ri-title">
@@ -16,6 +16,8 @@
   </div>
 </template>
 <script lang="ts" setup>
+import TMiImg from "@comp/app/t-mi-img.vue";
+
 type TurRoleInfoProps = { uid: number; modelValue: TGApp.Sqlite.Record.Role };
 
 const props = defineProps<TurRoleInfoProps>();

src/components/userRecord/tur-world-sub.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="tur-ws-box">
-    <div class="tur-ws-bg"><img :src="data.bg" alt="bg" /></div>
+    <div class="tur-ws-bg">
-    <div class="tur-ws-icon"><img :src="icon" alt="icon" /></div>
+      <TMiImg :ori="true" :src="data.bg" alt="bg" />
+    </div>
+    <div class="tur-ws-icon">
+      <TMiImg :ori="true" :src="icon" alt="icon" />
+    </div>
     <div class="tur-ws-content">
       <div class="tur-ws-title">
         <span>{{ data.name }}</span>
         <span v-if="data.offering" class="tur-ws-sub">
-          <img :src="offer" alt="offer" />
+          <TMiImg :src="data.offering.icon" alt="offer" :ori="true" />
           <span>{{ data.offering.name }}等级：</span>
           <span>{{ data.offering.level }}</span>
           <span>级</span>
@@ -38,42 +42,25 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { event } from "@tauri-apps/api";
+import TMiImg from "@comp/app/t-mi-img.vue";
-import type { Event, UnlistenFn } from "@tauri-apps/api/event";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed } from "vue";
 
 import { useAppStore } from "@/store/modules/app.js";
 
 type TurWorldSubProps = { data: TGApp.Sqlite.Record.WorldExplore };
 
-let themeListener: UnlistenFn | null = null;
 const { theme } = storeToRefs(useAppStore());
 const props = defineProps<TurWorldSubProps>();
-const icon = ref<string>();
-const offer = ref<string>();
 
 const imgFilter = computed<string>(() => {
   if (props.data.name !== "纳塔") return "none";
   if (theme.value === "dark") return "none";
   return "invert(0.75)";
 });
-
+const icon = computed<string>(() => {
-onMounted(async () => {
+  if (theme.value === "dark") return props.data.iconLight;
-  themeListener = await event.listen<string>("readTheme", (e: Event<string>) => {
+  return props.data.iconDark;
-    if (e.payload === "dark") icon.value = props.data.iconLight;
-    else icon.value = props.data.iconDark;
-  });
-  if (props.data.offering) offer.value = props.data.offering.icon;
-  if (theme.value === "dark") icon.value = props.data.iconLight;
-  else icon.value = props.data.iconDark;
-});
-
-onUnmounted(() => {
-  if (themeListener !== null) {
-    themeListener();
-    themeListener = null;
-  }
 });
 </script>
 <style lang="css" scoped>