From e40bbcb64adf1740b3e6c1644d20d3b56712712f Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Wed, 14 Jun 2023 00:43:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=BB=E5=8A=A0=E6=8E=A2?=
 =?UTF-8?q?=E7=B4=A2=E5=BA=A6=E8=A7=A3=E6=9E=90=EF=BC=8C=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E5=AD=97=E4=BD=93&bg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/index.css                          |   2 +
 src/assets/themes/dark.css                    |   1 +
 src/assets/themes/default.css                 |   1 +
 src/components/main/t-itembox.vue             |  12 +-
 .../userRecord/tur-overview-sub.vue           |  12 +-
 src/components/userRecord/tur-world-grid.vue  |  39 +++++++
 src/components/userRecord/tur-world-sub.vue   | 110 ++++++++++++++++++
 src/pages/User/Record.vue                     |  17 ++-
 8 files changed, 172 insertions(+), 22 deletions(-)
 create mode 100644 src/components/userRecord/tur-world-grid.vue
 create mode 100644 src/components/userRecord/tur-world-sub.vue

diff --git a/src/assets/index.css b/src/assets/index.css
index 794ee83d..261b9863 100644
--- 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 {
diff --git a/src/assets/themes/dark.css b/src/assets/themes/dark.css
index fe803cec..85e327df 100644
--- 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;
diff --git a/src/assets/themes/default.css b/src/assets/themes/default.css
index dd9d7f9c..b4f577fa 100644
--- 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;
diff --git a/src/components/main/t-itembox.vue b/src/components/main/t-itembox.vue
index 8ffc91bf..a248c5e9 100644
--- 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 {
diff --git a/src/components/userRecord/tur-overview-sub.vue b/src/components/userRecord/tur-overview-sub.vue
index 6e3b7303..fc957b1a 100644
--- 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>
diff --git a/src/components/userRecord/tur-world-grid.vue b/src/components/userRecord/tur-world-grid.vue
new file mode 100644
index 00000000..8d8bed56
--- /dev/null
+++ 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>
diff --git a/src/components/userRecord/tur-world-sub.vue b/src/components/userRecord/tur-world-sub.vue
new file mode 100644
index 00000000..e48a8450
--- /dev/null
+++ 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>
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index d0f638c6..dd047857 100644
--- 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 {