💄 feat(theme): 页面主题切换完成

2025-12-14 09:38:13 +08:00 · 2023-04-22 00:24:40 +08:00
parent 857cdec786
commit 277888dead
24 changed files with 277 additions and 87 deletions
--- a/src/views/t-anno-json.vue
+++ b/src/views/t-anno-json.vue
@@ -1,16 +1,17 @@
 <template>
+  <TSwitchTheme />
  <div v-if="loading">
    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
  </div>
-  <div v-else class="dev-json">
+  <div v-else class="anno-json">
    <div class="anno-title">
      活动列表 JSON
    </div>
-    <JsonViewer :value="jsonList" copyable boxed />
+    <JsonViewer :value="jsonList" copyable boxed class="anno-data" />
    <div class="anno-title">
      活动内容 JSON
    </div>
-    <JsonViewer :value="jsonContent" copyable boxed />
+    <JsonViewer :value="jsonContent" copyable boxed class="anno-data" />
  </div>
 </template>
 <script lang="ts" setup>
@@ -19,6 +20,7 @@ import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
 import TLoading from "../components/t-loading.vue";
+import TSwitchTheme from "../components/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // utils
@@ -45,7 +47,7 @@ onMounted(async () => {
  // 获取数据
  loadingTitle.value = "正在获取数据...";
  const listData = await TGRequest.Anno.getList();
-  listData.list.map((item: BTMuli.Genshin.Announcement.Announcement) => {
+  listData.list.map((item: BTMuli.Genshin.Announcement) => {
    return item.list.map((single: BTMuli.Genshin.Announcement.ListItem) => {
      return single.ann_id === annoId ? (jsonList = single) : null;
    });
@@ -57,6 +59,12 @@ onMounted(async () => {
 });
 </script>
 <style lang="css" scoped>
+.anno-json {
+  padding: 20px;
+  border-radius: 20px;
+  font-family: Consolas, serif;
+}
+
 .anno-title {
  font-size: 20px;
  color: #546d8b;
@@ -64,4 +72,8 @@ onMounted(async () => {
  font-weight: 600;
  margin: 20px 0;
 }
+
+.jv-container {
+  background: var(--content-bg-2) !important;
+}
 </style>
--- a/src/views/t-anno.vue
+++ b/src/views/t-anno.vue
@@ -1,5 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
+  <TSwitchTheme />
  <div v-if="loading" class="loading">
    <TLoading :title="loadingTitle" :empty="loadingEmpty" />
  </div>
@@ -19,6 +20,7 @@
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import TLoading from "../components/t-loading.vue";
+import TSwitchTheme from "../components/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins
--- a/src/views/t-lottery.vue
+++ b/src/views/t-lottery.vue
@@ -1,4 +1,5 @@
 <template>
+  <TSwitchTheme />
  <div v-if="loading">
    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
  </div>
@@ -42,7 +43,7 @@
        JSON
      </v-btn>
    </div>
-    <div v-show="showJson" class="dev-json">
+    <div v-show="showJson" class="lottery-json">
      <JsonViewer :value="jsonData" copyable boxed />
    </div>
    <div v-if="timeStatus === '已开奖'" class="lottery-div">
@@ -73,6 +74,7 @@ import { ref, onMounted, reactive, onUpdated } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
 import TLoading from "../components/t-loading.vue";
+import TSwitchTheme from "../components/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // store
@@ -173,17 +175,17 @@ onUpdated(() => {
 </script>
 <style lang="css">
 .lottery-div {
-  background: #faf7e8;
+  background: var(--content-bg-2);
  border-radius: 10px;
-  margin: 10px;
+  margin-bottom: 10px;
  padding: 10px;
 }

 .lottery-title {
  font-family: Genshin, serif;
  font-size: 20px;
-  color: #546d8b;
-  margin: 10px;
+  color: var(--content-text-3);
+  margin-left: 40px;
 }

 .reward-title {
@@ -201,7 +203,7 @@ onUpdated(() => {
 }

 .lottery-list {
-  background: #546d8b;
+  background: var(--content-bg-1);
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
@@ -237,13 +239,10 @@ onUpdated(() => {
 }

 .lottery-sub-list {
-  /* background: #546d8b; */
-  background: #faf7e8;
+  background: var(--content-bg-2);
  border-radius: 40px;
  height: 40px;
  margin: 5px;
-  /* color: #faf7e8; */
-  color: #546d8b;
  font-family: Genshin-Light, serif;
  align-items: center;
  display: flex;
@@ -267,9 +266,18 @@ onUpdated(() => {
 .lottery-user-nickname {
  display: inline-block;
  font-size: 14px;
-  font-family: Genshin-Light, 仿宋;
-  /* color: #faf7e8; */
-  color: #546d8b;
+  font-family: Genshin-Light, "仿宋";
+  color: var(--content-text-3);
  overflow: hidden;
 }
+
+.lottery-json {
+  padding: 20px;
+  border-radius: 20px;
+  font-family: Consolas, serif;
+}
+
+.jv-container {
+  background: var(--content-bg-2) !important;
+}
 </style>
--- a/src/views/t-news.vue
+++ b/src/views/t-news.vue
@@ -3,7 +3,7 @@
    <TLoading :title="loadingTitle" />
  </div>
  <div v-else>
-    <v-tabs v-model="tab" align-tabs="start" class="news-tabs">
+    <v-tabs v-model="tab" align-tabs="start" class="news-tab">
      <v-tab value="notice" title="公告" />
      <v-tab value="activity" title="活动" />
      <v-tab v-if="showNews" value="news" title="新闻" />
@@ -349,9 +349,10 @@ async function searchPost () {
 </script>

 <style lang="css" scoped>
-.news-tabs {
+.news-tab {
  font-family: Genshin, serif;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
+  color: var(--content-text-3)
 }

 .news-grid {
@@ -363,8 +364,8 @@ async function searchPost () {

 .news-card {
  border-radius: 10px;
-  background: #faf7e8;
-  color: #546d8b;
+  background: var(--content-bg-2);
+  color: var(--content-text-2);
 }

 .news-cover {
@@ -388,11 +389,11 @@ async function searchPost () {
 /* switch */
 .switch-btn {
  font-family: Genshin, serif;
-  background: #ffca0a;
+  background: var(--btn-bg-1);
  height: 40px;
  margin-right: 10px;
  margin-top: 5px;
-  color: #546d8b;
+  color: var(--content-text-3);
 }

 /* load more */
@@ -408,8 +409,8 @@ async function searchPost () {
 }

 .load-news button {
-  background: #546d8b !important;
-  color: #faf7e8 !important;
+  background: var(--btn-bg-3);
+  color: #faf7e8;
 }

 .load-news button img {
--- a/src/views/t-post-json.vue
+++ b/src/views/t-post-json.vue
@@ -1,8 +1,12 @@
 <template>
+  <TSwitchTheme />
  <div v-if="loading">
    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
  </div>
-  <div v-else class="dev-json">
+  <div v-else class="post-json">
+    <div class="post-title">
+      帖子返回内容 JSON
+    </div>
    <JsonViewer :value="jsonData" copyable boxed />
  </div>
 </template>
@@ -12,6 +16,7 @@ import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
 import TLoading from "../components/t-loading.vue";
+import TSwitchTheme from "../components/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins
@@ -42,3 +47,22 @@ onMounted(async () => {
  }, 200);
 });
 </script>
+<style>
+.post-json {
+  padding: 20px;
+  border-radius: 20px;
+  font-family: Consolas, serif;
+}
+
+.post-title {
+  font-size: 20px;
+  color: #546d8b;
+  font-family: Genshin-Light, serif;
+  font-weight: 600;
+  margin: 20px 0;
+}
+
+.jv-container {
+  background: var(--content-bg-2) !important;
+}
+</style>
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -1,5 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
+  <TSwitchTheme />
  <div v-if="loading">
    <TLoading :empty="loadingEmpty" :title="loadingTitle" />
  </div>
@@ -14,6 +15,7 @@ import TLoading from "../components/t-loading.vue";
 import { appWindow } from "@tauri-apps/api/window";
 // plugins
 import MysOper from "../plugins/Mys";
+import TSwitchTheme from "../components/t-switchTheme.vue";

 // loading
 const loading = ref(true as boolean);