♻️ 样式调整，慢慢改吧

src/App.vue

@@ -13,8 +13,8 @@
 <script lang="ts" setup>
 // vue
 import { onBeforeMount, onMounted, ref } from "vue";
-import TSidebar from "./components/main/t-sidebar.vue";
+import TSidebar from "./components/app/t-sidebar.vue";
-import TBackTop from "./components/main/t-backTop.vue";
+import TBackTop from "./components/app/t-backTop.vue";
 // tauri
 import { app, event, fs, window } from "@tauri-apps/api";
 // store
@@ -69,6 +69,7 @@ async function createDataDir(): Promise<void> {
   if (!(await fs.exists("userData", { dir: fs.BaseDirectory.AppLocalData }))) {
     await fs.createDir("userData", { dir: fs.BaseDirectory.AppLocalData, recursive: true });
   }
+  // todo 弃置 tempData dir
   if (!(await fs.exists("tempData", { dir: fs.BaseDirectory.AppLocalData }))) {
     await fs.createDir("tempData", { dir: fs.BaseDirectory.AppLocalData, recursive: true });
   }
@@ -78,12 +79,7 @@ async function createDataDir(): Promise<void> {
 <style lang="css">
 .app-container {
   height: 100%;
-  background: #f9e9cd; /* 米色 */
+  background: var(--app-page-bg);
-  color: #132c33; /* 深灰蓝 */
+  color: var(--app-page-content);
-}
-
-.dark .app-container {
-  background: #363433; /* 长石灰 */
-  color: #f9e9cd; /* 米色 */
 }
 </style>

src/assets/index.css

@@ -2,7 +2,7 @@
  * @file assets index.css
  * @description 全局样式文件
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.1
+ * @since Beta v0.3.0
  */
 
 @import "fonts/index.css";
@@ -22,6 +22,30 @@
   --common-color-yellow: #fec90b;
   --common-color-grey: #96979a;
   --common-color-grey-2: #b3b3b3;
+  /* color white */
+  --tgc-white-1: #ffffff; /* normal white */
+  --tgc-white-2: #f0f1f6; /* Github mobile bg */
+  --tgc-white-3: #f6f8fa; /* Github web bg */
+  --tgc-white-4: #f4f6f7; /* Github web option */
+
+  /* color grey */
+
+  /* color dark */
+  --tgc-dark-1: #000000; /* normal dark */
+  --tgc-dark-2: #202020; /* Tauri app nav */
+  --tgc-dark-3: #010409; /* Github web nav */
+  --tgc-dark-4: #0d1117; /* Github web bg */
+  --tgc-dark-5: #161b22; /* Github web list nav */
+  --tgc-dark-6: #21262d; /* Github web btn bg */
+
+  /* color other */
+  --tgc-green-1: #238636; /* Github web btn */
+  --tgc-blue-1: #3572a5; /* Github web lang bar */
+  --tgc-blue-2: #00aeec; /* Bilibili btn bg */
+  --tgc-pink-1: #fb7299; /* Bilibili btn bg */
+
+  /* text color */
+  --tgc-text-1: #faf7e8; /* Genshin color from ? */
 }
 
 html {

src/assets/themes/dark.css

@@ -1,12 +1,21 @@
 /**
- * @file assets themes light.css
+ * @file assets themes dark.css
- * @description 主题样式文件
+ * @description 主题样式文件-深色主题
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.3
+ * @since Beta v0.3.0
  */
 
-/* 主题色 */
+/* dark mode */
 html.dark {
+  /* app container */
+  --app-page-bg: var(--tgc-dark-4);
+  --app-page-content: var(--tgc-white-3);
+  --app-side-bg: var(--tgc-dark-3);
+  --app-side-content: var(--tgc-white-4);
+
+  /* content */
+  --content-box-bg-1: var(--tgc-dark-5);
+
   /* box-shadow */
   --common-shadow-1: rgb(255 255 255 / 10%);
   --common-shadow-2: rgb(255 255 255 / 20%);

src/assets/themes/default.css

@@ -1,12 +1,21 @@
 /**
- * @file assets themes dark.css
+ * @file assets themes default.css
- * @description 主题样式文件
+ * @description 主题样式文件-默认（浅色）主题
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.3
+ * @since Beta v0.3.0
  */
 
-/* 主题色 */
+/* default(light) theme */
 html.default {
+  /* app container */
+  --app-page-bg: var(--tgc-white-3);
+  --app-page-content: var(--tgc-dark-5); /* todo 这边直接反色，需要调整 */
+  --app-side-bg: var(--tgc-white-4);
+  --app-side-content: var(--tgc-dark-4);
+
+  /* content */
+  --content-box-bg-1: var(--tgc-white-4);
+
   /* box-shadow */
   --common-shadow-1: rgb(0 0 0 / 10%);
   --common-shadow-2: rgb(0 0 0 / 20%);

src/components/app/t-sidebar.vue

@@ -185,12 +185,8 @@ async function switchTheme(): Promise<void> {
 
 <style lang="css" scoped>
 .tsb-box {
-  background: #4e7ca1; /* 蝴蝶蓝 */
+  background: var(--app-side-bg);
-  color: #e2e1e4; /* 芡食白 */
+  color: var(--app-side-content);
-}
-
-.dark .tsb-box {
-  background: #21373d; /* 灰蓝 */
 }
 
 .side-list {

src/components/home/t-calendar.vue

@@ -49,7 +49,7 @@
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
-import TSubLine from "./t-subline.vue";
+import TSubLine from "../main/t-subline.vue";
 import ToCalendar from "../overlay/to-calendar.vue";
 import TibCalendarItem from "../itembox/tib-calendar-item.vue";
 // data
@@ -166,9 +166,9 @@ async function share(): Promise<void> {
 <style lang="css" scoped>
 .calendar-box {
   padding: 10px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  margin-bottom: 10px;
+  background: var(--common-shadow-t-2);
-  box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
 .calendar-title {

src/components/home/t-pool.vue

@@ -23,21 +23,18 @@
             </div>
           </div>
           <div class="pool-time">
-            <div class="pool-time-dur">
+            <div>
               <v-icon>mdi-calendar-clock</v-icon>
               {{ pool.time.start }}~{{ pool.time.end }}
             </div>
             <v-progress-linear :model-value="poolTimePass[pool.postId]" :rounded="true">
             </v-progress-linear>
-            <div
+            <div v-if="poolTimeGet[pool.postId] === '已结束'">
-              v-if="poolTimeGet[pool.postId] === '已结束'"
-              :style="{ color: poolColor[pool.postId] }"
-            >
               {{ poolTimeGet[pool.postId] }}
             </div>
             <div v-else>
               <span>剩余时间：</span>
-              <span :style="{ color: poolColor[pool.postId] }">
+              <span>
                 {{ poolTimeGet[pool.postId] }}
               </span>
             </div>
@@ -58,6 +55,7 @@ import { useRouter } from "vue-router";
 import { useHomeStore } from "../../store/modules/home";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
+import { stamp2LastTime } from "../../utils/toolFunc";
 // plugins
 import Mys from "../../plugins/Mys";
 
@@ -78,7 +76,6 @@ const barColor = ref<string>("error");
 const poolCards = ref<TGApp.Plugins.Mys.Gacha.RenderCard[]>([]);
 const poolTimeGet = ref<Record<number, string>>({});
 const poolTimePass = ref<Record<number, number>>({});
-const poolColor = ref<Record<number, string>>({});
 const timer = ref<Record<number, any>>({});
 
 // expose
@@ -93,12 +90,11 @@ function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard |
   if (poolTimeGet.value[postId] === "未开始") {
     const isStart = pool.time.startStamp - Date.now();
     if (isStart > 0) return;
-    poolTimeGet.value[postId] = getLastPoolTime(pool.time.endStamp - Date.now());
+    poolTimeGet.value[postId] = stamp2LastTime(pool.time.endStamp - Date.now());
     poolTimePass.value[postId] = pool.time.endStamp - Date.now();
-    poolColor.value[postId] = "#90caf9";
   } else {
     const isEnd = pool.time.endStamp - Date.now();
-    poolTimeGet.value[postId] = getLastPoolTime(isEnd);
+    poolTimeGet.value[postId] = stamp2LastTime(isEnd);
     poolTimePass.value[postId] =
       ((pool.time.endStamp - Date.now()) / (pool.time.endStamp - pool.time.startStamp)) * 100;
     if (isEnd >= 0) return;
@@ -106,7 +102,6 @@ function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard |
     timer.value[postId] = null;
     poolTimePass.value[postId] = 100;
     poolTimeGet.value[postId] = "已结束";
-    poolColor.value[postId] = "#f44336";
   }
   return pool;
 }
@@ -131,18 +126,14 @@ onMounted(async () => {
     poolCards.value = await Mys.Gacha.card(gachaData, homeStore.poolCover);
   }
   poolCards.value.map((pool) => {
-    poolTimeGet.value[pool.postId] = getLastPoolTime(pool.time.endStamp - Date.now());
+    poolTimeGet.value[pool.postId] = stamp2LastTime(pool.time.endStamp - Date.now());
     poolTimePass.value[pool.postId] = pool.time.endStamp - Date.now();
     if (poolTimePass.value[pool.postId] <= 0) {
       poolTimeGet.value[pool.postId] = "已结束";
       poolTimePass.value[pool.postId] = 100;
-      poolColor.value[pool.postId] = "#f44336";
     } else if (pool.time.startStamp - Date.now() > 0) {
       poolTimeGet.value[pool.postId] = "未开始";
       poolTimePass.value[pool.postId] = 100;
-      poolColor.value[pool.postId] = "#32A9CA";
-    } else {
-      poolColor.value[pool.postId] = "#90caf9";
     }
     timer.value[pool.postId] = setInterval(() => {
       poolLastInterval(pool.postId);
@@ -187,13 +178,6 @@ async function toOuter(url: string, title: string): Promise<void> {
   createTGWindow(url, "祈愿", title, 1200, 800, true, true);
 }
 
-function getLastPoolTime(time: number): string {
-  const hour = Math.floor(time / 1000 / 60 / 60);
-  const minute = Math.floor((time / 1000 / 60 / 60 - hour) * 60);
-  const second = Math.floor(((time / 1000 / 60 / 60 - hour) * 60 - minute) * 60);
-  return `${hour}:${minute.toFixed(0).padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
-}
-
 function toPost(pool: TGApp.Plugins.Mys.Gacha.RenderCard): void {
   const path = router.resolve({
     name: "帖子详情",
@@ -216,15 +200,13 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   padding: 10px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  margin-bottom: 10px;
-  box-shadow: 0 0 10px var(--common-shadow-4);
   gap: 10px;
 }
 
 .pool-title {
   display: flex;
-  color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
 }
@@ -234,7 +216,7 @@ onUnmounted(() => {
   height: 25px;
   border-radius: 50%;
   margin-right: 10px;
-  background: var(--common-shadow-2);
+  background: var(--common-shadow-4);
   transform: translate(0, 2px);
 }
 
@@ -250,8 +232,7 @@ onUnmounted(() => {
   overflow: hidden;
   width: 50%;
   border-radius: 5px;
-  background: var(--common-bg-1);
+  box-shadow: 0 0 5px var(--common-shadow-4);
-  color: var(--common-bgt-1);
 }
 
 .pool-cover {
@@ -285,7 +266,6 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-between;
   backdrop-filter: blur(20px);
-  background: rgb(0 0 0/20%);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
@@ -306,8 +286,8 @@ onUnmounted(() => {
 .pool-icon {
   width: 60px;
   height: 60px;
-  border: 1px solid rgb(255 255 255 / 50%);
+  border: 1px solid var(--tgc-white-1);
-  border-radius: 5px;
+  border-radius: 8px;
   box-shadow: 0 0 5px rgb(0 0 0/20%);
   transition: all ease-in-out 0.3s;
 }
@@ -320,7 +300,7 @@ onUnmounted(() => {
 .pool-icon img {
   width: 100%;
   height: 100%;
-  border-radius: 5px;
+  border-radius: 8px;
   cursor: pointer;
 }
 
@@ -330,7 +310,7 @@ onUnmounted(() => {
   align-items: flex-start;
   justify-content: flex-start;
   margin-right: 10px;
-  color: #faf7e8;
+  color: var(--tgc-text-1);
   font-size: 12px;
   gap: 10px;
   text-align: left;

src/components/home/t-position.vue

@@ -47,6 +47,7 @@ import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
+import { stamp2LastTime } from "../../utils/toolFunc";
 // plugins
 import Mys from "../../plugins/Mys";
 
@@ -79,7 +80,7 @@ function positionLastInterval(postId: number): void {
   if (timeLast <= 0) {
     positionTimeGet.value[postId] = "已结束";
   } else {
-    positionTimeGet.value[postId] = getLastPositionTime(timeLast);
+    positionTimeGet.value[postId] = stamp2LastTime(timeLast);
   }
 }
 
@@ -94,7 +95,7 @@ onMounted(async () => {
     if (card.time.endStamp === 0) {
       positionTimeGet.value[card.postId] = "未知";
     } else {
-      positionTimeGet.value[card.postId] = getLastPositionTime(card.time.endStamp - Date.now());
+      positionTimeGet.value[card.postId] = stamp2LastTime(card.time.endStamp - Date.now());
     }
     positionTimeEnd.value[card.postId] = card.time.endStamp;
     positionTimer.value[card.postId] = setInterval(() => {
@@ -104,16 +105,6 @@ onMounted(async () => {
   loading.value = false;
 });
 
-function getLastPositionTime(time: number): string {
-  const day = Math.floor(time / (24 * 3600 * 1000));
-  const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
-  const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
-  const second = Math.floor((time % (60 * 1000)) / 1000);
-  return `${day}天 ${hour.toFixed(0).padStart(2, "0")}:${minute
-    .toFixed(0)
-    .padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
-}
-
 async function toPost(card: TGApp.Plugins.Mys.Position.RenderCard): Promise<void> {
   // 获取路由路径
   const path = router.resolve({
@@ -136,16 +127,14 @@ onUnmounted(() => {
 <style lang="css" scoped>
 .position-box {
   padding: 10px;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  margin-bottom: 10px;
-  box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
 .position-title {
   display: flex;
   align-items: center;
   justify-content: start;
-  color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
 }
@@ -165,7 +154,7 @@ onUnmounted(() => {
 
 .position-card {
   border-radius: 5px;
-  background: var(--common-bg-1);
+  background: var(--content-box-bg-1);
   color: var(--common-bgt-1);
 }
 

src/pages/common/Home.vue

@@ -1,15 +1,17 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
-  <component :is="item" v-for="item in components" :key="item" :ref="setItemRef" />
+  <div class="home-container">
+    <component :is="item" v-for="item in components" :key="item" :ref="setItemRef" />
+  </div>
 </template>
 
 <script lang="ts" setup>
 // vue
 import { markRaw, onBeforeMount, onMounted, onUnmounted, onUpdated, ref } from "vue";
 import ToLoading from "../../components/overlay/to-loading.vue";
-import TPool from "../../components/main/t-pool.vue";
+import TPool from "../../components/home/t-pool.vue";
-import TPosition from "../../components/main/t-position.vue";
+import TPosition from "../../components/home/t-position.vue";
-import TCalendar from "../../components/main/t-calendar.vue";
+import TCalendar from "../../components/home/t-calendar.vue";
 // store
 import { useHomeStore } from "../../store/modules/home";
 import { useAppStore } from "../../store/modules/app";
@@ -96,3 +98,10 @@ onUnmounted(() => {
   itemRefs.value = [];
 });
 </script>
+<style lang="css" scoped>
+.home-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+</style>

src/utils/toolFunc.ts

@@ -0,0 +1,21 @@
+/**
+ * @file utils toolFunc.ts
+ * @description 一些工具函数
+ * @author BTMuli <bt-muli@outlook.com>
+ * @since Beta v0.3.0
+ */
+
+/**
+ * @description 时间戳转换为时间字符串
+ * @returns {string} 时间字符串 d天 hh:mm:ss
+ * @param time
+ */
+export function stamp2LastTime(time: number): string {
+  const day = Math.floor(time / (24 * 3600 * 1000));
+  const hour = Math.floor((time % (24 * 3600 * 1000)) / (3600 * 1000));
+  const minute = Math.floor((time % (3600 * 1000)) / (60 * 1000));
+  const second = Math.floor((time % (60 * 1000)) / 1000);
+  return `${day === 0 ? "" : `${day}天`} ${hour.toFixed(0).padStart(2, "0")}:${minute
+    .toFixed(0)
+    .padStart(2, "0")}:${second.toFixed(0).padStart(2, "0")}`;
+}

src/views/t-anno-json.vue

@@ -14,7 +14,7 @@ import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
 import ToLoading from "../components/overlay/to-loading.vue";
-import TSwitchTheme from "../components/main/t-switchTheme.vue";
+import TSwitchTheme from "../components/app/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // utils

src/views/t-anno.vue

@@ -24,7 +24,7 @@
 import { ref, onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import ToLoading from "../components/overlay/to-loading.vue";
-import TSwitchTheme from "../components/main/t-switchTheme.vue";
+import TSwitchTheme from "../components/app/t-switchTheme.vue";
 import TShareBtn from "../components/main/t-shareBtn.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";

src/views/t-lottery.vue

@@ -57,7 +57,7 @@ import { computed, onMounted, onUpdated, reactive, ref } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
 import ToLoading from "../components/overlay/to-loading.vue";
-import TSwitchTheme from "../components/main/t-switchTheme.vue";
+import TSwitchTheme from "../components/app/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // store

src/views/t-post-json.vue

@@ -12,7 +12,7 @@ import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
 import ToLoading from "../components/overlay/to-loading.vue";
-import TSwitchTheme from "../components/main/t-switchTheme.vue";
+import TSwitchTheme from "../components/app/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins

src/views/t-post.vue

@@ -24,7 +24,7 @@
 import { ref, onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import ToLoading from "../components/overlay/to-loading.vue";
-import TSwitchTheme from "../components/main/t-switchTheme.vue";
+import TSwitchTheme from "../components/app/t-switchTheme.vue";
 import TShareBtn from "../components/main/t-shareBtn.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";