✨ 添加探索度解析，替换部分字体&bg

src/assets/index.css

@@ -13,6 +13,8 @@
     /* font */
     --font-text: "JetBrians mono", "Genshin-Light", sans-serif;
     --font-title: "JetBrians mono Bold", "Genshin", serif;
+    /* color */
+    --common-color-white: #faf7e8;
 }
 
 html {

src/assets/themes/dark.css

@@ -8,6 +8,7 @@
 /* 主题色 */
 html.dark {
   --common-bg: rgb(255 255 255 / 10%);
+  --common-bg-2: rgb(255 255 255 / 20%);
 
   --sidebar-bg: #1e1e1e;
   --sidebar-icon: #e1e1e1;

src/assets/themes/default.css

@@ -8,6 +8,7 @@
 /* 主题色 */
 html.default {
   --common-bg: rgb(0 0 0 / 10%);
+  --common-bg-2: rgb(0 0 0 / 20%);
 
   --sidebar-bg: #485466;
   --sidebar-icon: #ece5d8;

src/components/main/t-itembox.vue

@@ -159,8 +159,8 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: Genshin, serif;
+  font-family: var(--font-title);
-  color: #faf7e8;
+  color: var(--common-color-white);
 }
 
 .tib-inner {
@@ -175,10 +175,9 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
   background: rgb(20 20 20 / 50%);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-  color: #fff;
+  color: var(--common-color-white);
   font-size: v-bind(getInnerFont);
-  text-shadow: 0 0 5px #000;
+  font-family: var(--font-title);
-  font-family: Genshin, serif;
 }
 
 .tib-inner img {
@@ -199,9 +198,8 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
   justify-content: center;
   align-items: center;
   font-family: Genshin, serif;
-  color: #fff;
+  color: var(--common-color-white);
   font-size: v-bind(getOuterFont);
-  text-shadow: 0 0 5px #000;
 }
 
 .tib-outer img {

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

@@ -26,7 +26,7 @@ defineProps<TAOProps>();
   height: auto;
   padding: 5px;
   border-radius: 5px;
-  background: rgb(0 0 0 / 10%);
+  background: var(--common-bg);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -34,16 +34,16 @@ defineProps<TAOProps>();
 }
 
 .tur-os-title {
-  font-family: Genshin-Light, serif;
+  font-family: var(--font-title);
   font-size: 20px;
-  color: rgb(255 255 255 / 80%);
+  color: var(--common-color-white);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+  text-shadow: 0 0 10px rgb(0 0 0 / 40%);
 }
 
 .tur-os-text {
-  font-family: Genshin, serif;
+  font-family: var(--font-text);
   font-size: 20px;
-  color: rgb(255 255 255 / 80%);
+  color: var(--common-color-white);
   text-shadow: #fec90b 0 0 5px;
 }
 </style>

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

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="props.modelValue===undefined">
+    暂无数据
+  </div>
+  <div v-else class="tur-wg-box">
+    <TurWorldSub v-for="area in getData()" :data="area" :theme="theme" />
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+import TurWorldSub from "./tur-world-sub.vue";
+
+interface TurWorldGridProps {
+  modelValue?: string;
+}
+
+const props = defineProps<TurWorldGridProps>();
+const theme = computed(() => {
+  const data = localStorage.getItem("theme");
+  if (data) {
+    return JSON.parse(data).theme || "default";
+  } else {
+    return "default";
+  }
+});
+
+function getData () {
+  return JSON.parse(<string>props.modelValue) as TGApp.Sqlite.Record.WorldExplore[];
+}
+</script>
+<style lang="css" scoped>
+.tur-wg-box {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+  <div
+    class="tur-ws-box"
+    :style="{
+      backgroundImage: 'url(' + data.bg + ')',
+      backgroundPositionX: 'right',
+      backgroundSize: 'auto 100%',
+      backgroundRepeat: 'no-repeat'
+    }"
+  >
+    <div class="tur-ws-icon">
+      <img :src="iconShow" alt="icon">
+    </div>
+    <div class="tur-ws-content">
+      <div class="tur-ws-title">
+        {{ data.name }}
+      </div>
+      <div class="tur-ws-sub">
+        探索度：{{ data.exploration / 10 }}%
+      </div>
+      <div v-if="data.type==='Reputation'" class="tur-ws-sub">
+        声望等级: {{ data.level }}级
+      </div>
+      <div v-if="data.offerings.length>0" class="tur-ws-sub">
+        <img :src="data.offerings[0].icon" alt="offer">
+        <span>
+          {{ data.offerings[0].name }}等级:
+          <span class="tur-wss-level">{{ data.offerings[0].level }}级</span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { onMounted, ref } from "vue";
+import { event } from "@tauri-apps/api";
+
+interface TurWorldSubProps {
+  theme: "default" | "dark",
+  data: TGApp.Sqlite.Record.WorldExplore
+}
+
+const props = defineProps<TurWorldSubProps>();
+const iconShow = ref("");
+
+onMounted(async () => {
+  props.theme === "dark" ? iconShow.value = props.data.iconLight : iconShow.value = props.data.iconDark;
+  await listenOnTheme();
+});
+
+async function listenOnTheme () {
+  await event.listen("readTheme", (e) => {
+    const theme = e.payload as string;
+    if (theme === "dark") {
+      iconShow.value = props.data.iconLight;
+    } else {
+      iconShow.value = props.data.iconDark;
+    }
+  });
+}
+</script>
+<style lang="css" scoped>
+.tur-ws-box {
+  padding: 5px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--common-bg);
+}
+
+.tur-ws-icon {
+  width: 60px;
+  height: 60px;
+  padding: 5px;
+}
+
+.tur-ws-icon img {
+  width: 100%;
+  height: 100%;
+}
+
+.tur-ws-content {
+  color: #faf7e8;
+  text-shadow: 0 0 5px rgb(0 0 0 / 20%);
+  width: calc(100% - 60px);
+  height: 100%;
+}
+
+.tur-ws-title {
+  font-family: var(--font-title);
+  font-size: 20px;
+  margin-bottom: 5px;
+}
+
+.tur-ws-sub {
+  display: flex;
+  align-items: center;
+  font-family: var(--font-text);
+  font-size: 14px;
+  justify-content: start;
+}
+
+.tur-ws-sub img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+</style>

src/pages/User/Record.vue

@@ -113,32 +113,31 @@ function getTitle () {
 }
 
 .ur-top-title {
-  font-family: Genshin, sans-serif;
+  font-family: var(--font-title);
   font-size: 20px;
   margin-right: 10px;
-  color: rgb(255 255 255 / 80%);
+  color: var(--common-color-white);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+  text-shadow: 0 0 10px rgb(0 0 0 / 60%);
 }
 
 .ur-top-btn {
-  font-family: Genshin-Light, serif;
+  font-family: var(--font-text);
   border-radius: 5px;
   background: #393b40;
-  color: #faf7e8;
+  color: var(--common-color-white);
   margin-left: auto;
 }
 
 .ur-sub-title {
-  background: rgb(0 0 0 / 20%);
+  background: var(--common-bg-2);
   display: flex;
   align-items: center;
   height: 30px;
   padding: 0 10px;
   margin: 5px 0;
   border-radius: 5px;
-  font-family: Genshin-Light, serif;
+  font-family: var(--font-text);
-  color: rgb(255 255 255 / 80%);
+  color: var(--common-color-white);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
 }
 
 .ur-sub-title img {