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

2025-12-13 09:28:14 +08:00 · 2023-06-14 00:43:08 +08:00
parent 7601b04024
commit e40bbcb64a
8 changed files with 172 additions and 22 deletions
--- a/src/assets/index.css
+++ b/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 {
--- a/src/assets/themes/dark.css
+++ b/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;
--- a/src/assets/themes/default.css
+++ b/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;
--- a/src/components/main/t-itembox.vue
+++ b/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;
-  color: #faf7e8;
+  font-family: var(--font-title);
+  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: Genshin, serif;
+  font-family: var(--font-title);
 }

 .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 {
--- a/src/components/userRecord/tur-overview-sub.vue
+++ b/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%);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+  color: var(--common-color-white);
+  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>
--- a/src/components/userRecord/tur-world-grid.vue
+++ b/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>
--- a/src/components/userRecord/tur-world-sub.vue
+++ b/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>
--- a/src/pages/User/Record.vue
+++ b/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%);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+  color: var(--common-color-white);
+  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;
-  color: rgb(255 255 255 / 80%);
-  text-shadow: 0 0 10px rgb(0 0 0 / 80%);
+  font-family: var(--font-text);
+  color: var(--common-color-white);
 }

 .ur-sub-title img {