♻️ 完善 box-bg 层级，减少 border

src/assets/themes/dark.css

@@ -8,16 +8,16 @@
 /* dark mode */
 html.dark {
   /* app container */
-  --app-page-bg: var(--tgc-dark-8);
+  --app-page-bg: #000000; /* (0, 0, 0) */
-  --app-page-content: var(--tgc-white-3);
+  --app-page-content: #d0d0d0;
-  --app-side-bg: var(--tgc-dark-3);
+  --app-side-bg: #151c26;
-  --app-side-content: var(--tgc-white-4);
+  --app-side-content: #dddddd;
 
-  /* content */
+  /* box container */
-  --box-bg-1: var(--tgc-dark-4);
+  --box-bg-1: #21252b;
-  --box-bg-2: var(--tgc-dark-6);
+  --box-bg-2: #323844;
-  --box-bg-3: var(--tgc-dark-7);
+  --box-bg-3: #282c34;
-  --box-bg-4: var(--tgc-dark-7);
+  --box-bg-4: #3d424b;
 
   /* box bg transparent */
   --box-bg-t-1: var(--tgc-white-3);

src/assets/themes/default.css

@@ -8,17 +8,16 @@
 /* default(light) theme */
 html.default {
   /* app container */
-  --app-page-bg: var(--tgc-white-1);
+  --app-page-bg: #ffffff;
-  --app-page-content: var(--tgc-dark-7);
+  --app-page-content: #2f2f2f;
-  --app-side-bg: var(--tgc-white-5);
+  --app-side-bg: #f2f2f2;
-  --app-side-content: var(--tgc-dark-8);
+  --app-side-content: #222222;
 
   /* box container */
-  /* page-bg > box-bg-1 > box-bg-2 */
+  --box-bg-1: #efefef;
-  --box-bg-1: var(--tgc-white-3); /* with box-text-1 */
+  --box-bg-2: #f6f8fa;
-  --box-bg-2: var(--tgc-white-4);
+  --box-bg-3: #dee4e9;
-  --box-bg-3: var(--tgc-white-9);
+  --box-bg-4: #f5f5f5;
-  --box-bg-4: var(--tgc-white-1);
 
   /* box bg transparent */
   --box-bg-t-1: var(--tgc-dark-5);

src/components/gachaRecord/gro-dataview.vue

@@ -189,7 +189,7 @@ function getIcon(itemId: string, type: string): string {
 // 监听数据变化
 watch(
   () => props.dataVal,
-  (newVal) => {
+  () => {
     star5List.value = [];
     star4List.value = [];
     reset5count.value = 0;
@@ -207,7 +207,6 @@ watch(
 .gro-dv-container {
   height: 100%;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-2);
 }

src/components/home/t-calendar.vue

@@ -183,7 +183,6 @@ async function share(): Promise<void> {
   display: flex;
   flex-direction: column;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-1);
   gap: 5px;

src/components/home/t-pool.vue

@@ -200,7 +200,6 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-1);
   gap: 10px;

src/components/home/t-position.vue

@@ -129,7 +129,6 @@ onUnmounted(() => {
 <style lang="css" scoped>
 .position-box {
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-1);
 }

src/components/main/t-subline.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tsl-box">
-    <img src="/src/assets/icons/arrow-right.svg" alt="right" class="tsl-icon" />
+    <img src="/src/assets/icons/arrow-right.svg" alt="right" />
     <slot>
       {{ props.title }}
     </slot>
@@ -16,9 +16,9 @@ const props = defineProps<{
   display: flex;
   align-items: center;
   padding: 5px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin: 5px 0;
+  background: var(--box-bg-3);
   color: var(--box-text-4);
   font-family: var(--font-title);
   gap: 5px;
@@ -27,8 +27,12 @@ const props = defineProps<{
 .tsl-box img {
   width: 20px;
   height: 20px;
-  padding: 5px;
+  padding: 2px;
   border-radius: 5px;
-  background: var(--common-shadow-4);
+}
+
+.dark .tsl-box {
+  background: #2c313a;
+  color: #faf7e8;
 }
 </style>

src/components/userAbyss/tua-detail-level.vue

@@ -25,7 +25,6 @@ const props = defineProps<TuaDetailLevelProps>();
   display: flex;
   flex-direction: column;
   padding: 10px;
-  border: 1px inset var(--common-shadow-2);
   border-radius: 5px;
   margin-top: 10px;
   background: var(--box-bg-2);

src/components/userAbyss/tua-detail.vue

@@ -27,7 +27,6 @@ const props = defineProps<TuaDetailProps>();
 <style lang="css" scoped>
 .tuad-box {
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-1);
 }

src/components/userAbyss/tua-overview.vue

@@ -45,9 +45,8 @@ const getIconNum = computed(() => (props.multi4 ? 4 : 1));
   align-items: center;
   justify-content: center;
   padding: 10px;
-  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  background: var(--box-bg-2);
+  background: var(--box-bg-1);
 }
 
 .tuao-title {

src/components/userCharacter/tuc-role-box.vue

@@ -128,7 +128,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   padding: 5px;
-  border: 1px inset var(--common-shadow-4);
+  border: 1px inset var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-2);
   cursor: pointer;
@@ -150,8 +150,8 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 5px;
-  border: 1px solid var(--common-shadow-4);
   border-radius: 5px;
+  background: var(--box-bg-3);
   font-family: var(--font-title);
   font-size: 12px;
 }
@@ -236,7 +236,7 @@ onUnmounted(() => {
   border: 1px solid var(--tgc-white-8);
   border-radius: 50%;
   background: var(--tgc-dark-7);
-  opacity: 0.5;
+  opacity: 0.8;
 }
 
 .tuc-rbb-talent :nth-child(2) {

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

@@ -29,7 +29,6 @@ defineProps<TAOProps>();
   align-items: center;
   justify-content: center;
   padding: 5px;
-  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   background: var(--box-bg-2);
 }

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

@@ -86,7 +86,6 @@ async function listenOnTheme(): Promise<void> {
   align-items: center;
   justify-content: center;
   padding: 10px;
-  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   background: var(--box-bg-2);
 }

src/pages/User/Gacha.vue

@@ -300,7 +300,6 @@ watch(uidCur, async (newUid) => {
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin-bottom: 10px;
   background: var(--box-bg-1);
@@ -333,7 +332,7 @@ watch(uidCur, async (newUid) => {
   height: calc(100vh - 130px);
   align-items: center;
   justify-content: left;
-  border: 1px solid var(--common-shadow-2);
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
   background: var(--box-bg-1);
 }

src/pages/User/Record.vue

@@ -118,7 +118,6 @@ async function shareRecord(): Promise<void> {
   width: 100%;
   flex-direction: column;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   background: var(--box-bg-1);
   row-gap: 5px;

src/pages/common/Achievements.vue

@@ -338,7 +338,6 @@ function getIcon(series: number): string | undefined {
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin-bottom: 10px;
   background: var(--box-bg-1);
@@ -394,10 +393,10 @@ function getIcon(series: number): string | undefined {
   right: 0;
   bottom: 0;
   width: 80px;
-  border-radius: 10px 0 0;
+  border-top: 1px solid var(--common-shadow-1);
-  border-top: 1px inset var(--common-shadow-4);
+  border-left: 1px solid var(--common-shadow-1);
-  border-left: 1px inset var(--common-shadow-4);
+  background: var(--box-bg-2);
-  background: var(--box-bg-4);
+  border-top-left-radius: 20px;
   color: var(--tgc-yellow-1);
   font-family: var(--font-title);
   font-size: 10px;
@@ -405,7 +404,6 @@ function getIcon(series: number): string | undefined {
 }
 
 .version-icon-single {
-  border-radius: 5px;
   color: var(--tgc-pink-1);
   font-family: var(--font-title);
   font-size: 10px;
@@ -413,7 +411,6 @@ function getIcon(series: number): string | undefined {
 }
 
 .card-left {
-  border: 1px solid var(--common-shadow-2);
   border-radius: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
@@ -424,10 +421,9 @@ function getIcon(series: number): string | undefined {
 
 /* 成就卡片 */
 .card-right {
-  border: 1px solid var(--common-shadow-2);
   border-radius: 10px;
   margin: 10px;
-  background: var(--box-bg-2);
+  background: var(--box-bg-1);
   color: var(--box-text-7);
 }
 
@@ -437,9 +433,9 @@ function getIcon(series: number): string | undefined {
   top: 0;
   left: 0;
   width: 65px;
-  border-right: 1px solid var(--common-shadow-4);
+  border-right: 1px solid var(--common-shadow-1);
-  border-bottom: 1px solid var(--common-shadow-4);
+  border-bottom: 1px solid var(--common-shadow-1);
-  background: var(--box-bg-1);
+  background: var(--box-bg-2);
   border-bottom-right-radius: 20px;
   color: var(--box-text-3);
   font-family: var(--font-title);

src/pages/common/Config.vue

@@ -18,8 +18,8 @@
       <v-list-item-title>
         应用版本
         <v-btn
-          class="card-btn"
           size="small"
+          variant="outlined"
           @click="toOuter('https://github.com/BTMuli/Tauri.Genshin/releases/latest')"
         >
           BETA
@@ -48,15 +48,10 @@
         <img class="config-icon" :src="userInfo.avatar" alt="Login" />
       </template>
       <template #append>
-        <v-btn class="card-btn" @click="confirmRefreshUser">
+        <v-btn class="config-btn" @click="confirmRefreshUser"> 刷新数据 </v-btn>
-          <template #prepend>
-            <img src="../../assets/icons/circle-check.svg" alt="check" />
-            刷新数据
-          </template>
-        </v-btn>
       </template>
     </v-list-item>
-    <v-list-subheader :inset="true" class="config-header"> 系统信息</v-list-subheader>
+    <v-list-subheader :inset="true" class="config-header">系统信息</v-list-subheader>
     <v-divider :inset="true" class="border-opacity-75" />
     <v-list-item title="系统平台">
       <template #prepend>
@@ -110,12 +105,7 @@
         :chips="true"
       />
       <template #append>
-        <v-btn class="card-btn" @click="submitHome">
+        <v-btn class="config-btn" @click="submitHome"> 确定 </v-btn>
-          <template #prepend>
-            <img src="../../assets/icons/circle-check.svg" alt="check" />
-            确定
-          </template>
-        </v-btn>
       </template>
     </v-list-item>
     <v-list-item prepend-icon="mdi-content-save" title="数据备份" @click="confirmBackup" />
@@ -673,15 +663,14 @@ function submitHome(): void {
 .config-list {
   border-radius: 10px;
   margin: 10px;
-  background: var(--content-bg-2);
+  background: var(--box-bg-1);
-  color: var(--content-text-3);
+  color: var(--box-text-4);
-  font-family: Genshin-Light, serif;
+  font-family: var(--font-text);
 }
 
 .config-header {
   margin-top: 10px;
-  background: var(--content-bg-2);
+  color: var(--common-text-title);
-  color: #fec90b;
   font-family: Genshin, serif;
   font-size: large;
 }
@@ -690,8 +679,16 @@ function submitHome(): void {
   width: 40px;
   height: 40px;
   padding: 5px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 10px;
   margin-right: 15px;
-  background: var(--content-bg-3);
+  background: var(--box-bg-2);
+}
+
+.config-btn {
+  width: 100px;
+  margin-left: 100px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
 }
 </style>

src/plugins/Mys/utils/parsePost.ts

@@ -2,7 +2,7 @@
  * @file plugins Mys utils parsePost.ts
  * @description 用于解析Mys数据的工具
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.1
+ * @since Beta v0.3.0
  */
 
 /**
@@ -189,7 +189,7 @@ function parseUnknown(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLDivEl
 
 /**
  * @description 解析文本
- * @since Alpha v0.1.3
+ * @since Beta v0.3.0
  * @param {TGApp.Plugins.Mys.Post.StructuredContent} data Mys数据
  * @returns {HTMLSpanElement} 解析后的文本
  */
@@ -206,7 +206,7 @@ function parseText(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLSpanElem
     if (data.attributes.color) {
       let colorGet = data.attributes.color;
       // 如果 colorGet 在 darkColorList 中，就设置为对应的颜色
-      if (isColorSimilar("#ece5d8", colorGet) || isColorSimilar("#2a2a2a", colorGet)) {
+      if (isColorSimilar("#ffffff", colorGet) || isColorSimilar("#000000", colorGet)) {
         colorGet = "var(--post-default-text)";
       }
       text.style.color = colorGet;

src/utils/TGShare.ts

@@ -68,7 +68,7 @@ function getShareImgBgColor(): string {
     theme = JSON.parse(theme).theme;
   }
   if (theme === "dark") {
-    return "#0d1117";
+    return "#000000";
   } else {
     return "#ffffff";
   }