♻️ 首页颜色替换完成

src/assets/index.css

@@ -22,13 +22,17 @@
   --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 */
-
+  --tgc-white-5: #eff3f6; /* Miyoushe side bar */
-  /* color grey */
+  --tgc-white-6: #f8f8f8; /* Miyoushe bottom bar */
+  --tgc-white-7: #f0f1f5; /* Miyoushe tag */
+  --tgc-white-8: #faf7e8; /* Genshin text */
+  --tgc-white-9: #ece5d8; /* Genshin text */
 
   /* color dark */
   --tgc-dark-1: #000000; /* normal dark */
@@ -37,15 +41,15 @@
   --tgc-dark-4: #0d1117; /* Github web bg */
   --tgc-dark-5: #161b22; /* Github web list nav */
   --tgc-dark-6: #21262d; /* Github web btn bg */
+  --tgc-dark-7: #393b40; /* Genshin 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-blue-3: #4b5466; /* Genshin icon bg */
+  --tgc-green-1: #238636; /* Github web btn */
   --tgc-pink-1: #fb7299; /* Bilibili btn bg */
-
+  --tgc-yellow: #ffcd0c; /* Genshin btn bg */
-  /* text color */
-  --tgc-text-1: #faf7e8; /* Genshin color from ? */
 }
 
 html {

src/assets/themes/dark.css

@@ -14,7 +14,15 @@ html.dark {
   --app-side-content: var(--tgc-white-4);
 
   /* content */
-  --content-box-bg-1: var(--tgc-dark-5);
+  --box-bg-1: var(--tgc-dark-5);
+  --box-bg-2: var(--tgc-dark-6);
+  --box-bg-3: var(--tgc-dark-7);
+
+  /* text */
+  --box-text-1: var(--tgc-white-1);
+  --box-text-2: var(--tgc-white-2);
+  --box-text-3: var(--tgc-blue-1);
+  --box-text-4: var(--tgc-white-8);
 
   /* box-shadow */
   --common-shadow-1: rgb(255 255 255 / 10%);

src/assets/themes/default.css

@@ -8,13 +8,21 @@
 /* default(light) theme */
 html.default {
   /* app container */
-  --app-page-bg: var(--tgc-white-3);
+  --app-page-bg: var(--tgc-white-1);
   --app-page-content: var(--tgc-dark-5); /* todo 这边直接反色，需要调整 */
-  --app-side-bg: var(--tgc-white-4);
+  --app-side-bg: var(--tgc-white-5);
   --app-side-content: var(--tgc-dark-4);
 
-  /* content */
+  /* box container */
-  --content-box-bg-1: var(--tgc-white-4);
+  --box-bg-1: var(--tgc-white-3);
+  --box-bg-2: var(--tgc-white-7);
+  --box-bg-3: var(--tgc-white-9);
+
+  /* box text */
+  --box-text-1: var(--tgc-dark-5);
+  --box-text-2: var(--tgc-dark-2);
+  --box-text-3: var(--tgc-blue-2);
+  --box-text-4: var(--tgc-blue-3);
 
   /* box-shadow */
   --common-shadow-1: rgb(0 0 0 / 10%);
@@ -28,10 +36,6 @@ html.default {
   --common-shadow-t-4: rgb(255 255 255 / 40%);
   --common-shadow-t-8: rgb(255 255 255 / 80%);
 
-  /* box bg */
-  --common-bg-1: #faf7e8; /* 一级背景色 */
-  --common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
-
   /* button */
   --common-btn-bg-1: #fec90b; /* button 背景色 */
   --common-btn-bgt-1: #5b738f; /* button 背景色对应的文本色 */

src/components/home/t-calendar.vue

@@ -2,29 +2,44 @@
   <div class="calendar-box">
     <div class="calendar-title">
       <div class="calendar-title-left">
-        <v-icon size="small"> mdi-calendar-clock </v-icon>
+        <v-icon size="small"> mdi-calendar-clock</v-icon>
         <span>今日素材</span>
         <span>{{ dateNow }}</span>
-        <v-btn variant="outlined" class="calendar-title-btn" @click="share">
-          <template #prepend>
-            <v-icon> mdi-share-variant </v-icon>
-          </template>
-          <span>分享</span>
-        </v-btn>
       </div>
-      <div class="calendar-title-right">
+      <div class="calendar-title-mid">
         <v-btn
           v-for="text of btnText"
           :key="text.week"
-          :class="btnNow === text.week ? 'calendar-btn-selected' : 'calendar-btn'"
+          :style="{
+            border: text.week === weekNow ? '1px solid var(--box-text-2)' : 'none',
+            borderRadius: '5px',
+            backgroundColor: text.week === btnNow ? 'var(--tgc-yellow)' : 'inherit',
+            color: text.week === btnNow ? 'var(--box-text-4)' : 'inherit',
+          }"
           @click="getContents(text.week)"
+          variant="tonal"
         >
           {{ text.text }}
         </v-btn>
       </div>
+      <div class="calendar-title-right">
+        <v-switch
+          class="calendar-title-switch"
+          color="grey"
+          variant="outline"
+          :label="switchType === 'avatar' ? '角色' : '武器'"
+          @change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"
+        />
+        <v-btn variant="tonal" class="calendar-title-btn" @click="share">
+          <template #prepend>
+            <v-icon> mdi-share-variant</v-icon>
+          </template>
+          <span>分享</span>
+        </v-btn>
+      </div>
     </div>
-    <TSubLine>角色突破</TSubLine>
+    <v-divider class="calendar-divider" />
-    <div class="calendar-grid">
+    <div class="calendar-grid" v-show="switchType==='avatar'">
       <div v-for="item in characterCards" :key="item.id" @click="selectAvatar(item)">
         <TibCalendarItem
           :data="<TGApp.App.Calendar.Item>item"
@@ -33,8 +48,7 @@
         />
       </div>
     </div>
-    <TSubLine>武器突破</TSubLine>
+    <div class="calendar-grid" v-show="switchType!=='avatar'">
-    <div class="calendar-grid">
       <div v-for="item in weaponCards" :key="item.id" @click="selectWeapon(item)">
         <TibCalendarItem
           :data="<TGApp.App.Calendar.Item>item"
@@ -49,7 +63,6 @@
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
-import TSubLine from "../main/t-subline.vue";
 import ToCalendar from "../overlay/to-calendar.vue";
 import TibCalendarItem from "../itembox/tib-calendar-item.vue";
 // data
@@ -73,6 +86,7 @@ const weaponCards = ref<TGApp.App.Calendar.Item[]>([]);
 
 // calendar item
 const showItem = ref<boolean>(false);
+const switchType = ref<string>("avatar");
 const selectedItem = ref<TGApp.App.Calendar.Item>(<TGApp.App.Calendar.Item>{});
 const selectedType = ref<"avatar" | "weapon">("avatar");
 
@@ -159,7 +173,8 @@ function getContents(day: number): void {
 async function share(): Promise<void> {
   // todo 唤起外部 loading
   const div = <HTMLElement>document.querySelector(".calendar-box");
-  const title = `【今日素材】${dateNow.value}-${btnNow.value}`;
+  const showType = switchType.value === "avatar" ? "角色" : "武器";
+  const title = `【今日素材】${showType}${btnNow.value}`;
   await generateShareImg(title, div);
 }
 </script>
@@ -168,18 +183,18 @@ async function share(): Promise<void> {
   padding: 10px;
   border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
-  background: var(--common-shadow-t-2);
+  background: var(--box-bg-1);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
 }
 
 .calendar-title {
   display: flex;
   align-items: center;
-  justify-content: start;
-  padding-bottom: 5px;
-  color: var(--common-text-title);
-  column-gap: 2rem;
   font-family: var(--font-title);
   font-size: 20px;
+  justify-content: space-between;
 }
 
 .calendar-title-left {
@@ -189,29 +204,38 @@ async function share(): Promise<void> {
   column-gap: 10px;
 }
 
-.calendar-title-btn {
+.calendar-title-mid {
-  border-radius: 5px;
-  color: var(--common-text-content);
-  cursor: pointer;
-}
-
-.calendar-title-right {
   display: flex;
   align-items: center;
   justify-content: start;
   column-gap: 15px;
 }
 
-.calendar-btn {
+.calendar-title-right {
-  border-radius: 5px;
+  display: flex;
-  background: var(--common-bg-1);
+  align-items: center;
-  color: var(--common-bgt-1);
+  justify-content: start;
+  gap: 15px;
 }
 
-.calendar-btn-selected {
+.calendar-title-switch {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--box-text-3);
+}
+
+.calendar-title-btn {
   border-radius: 5px;
-  background: var(--common-btn-bg-1);
+  color: var(--box-text-3);
-  color: var(--common-btn-bgt-1);
+  border: 1px solid var(--box-text-3);
+  cursor: pointer;
+}
+
+.calendar-divider {
+  margin: 10px 0;
+  opacity: 0.2;
 }
 
 .calendar-grid {

src/components/home/t-pool.vue

@@ -201,6 +201,7 @@ onUnmounted(() => {
   flex-direction: column;
   padding: 10px;
   border: 1px solid var(--common-shadow-2);
+  background: var(--box-bg-1);
   border-radius: 5px;
   gap: 10px;
 }
@@ -232,7 +233,7 @@ onUnmounted(() => {
   overflow: hidden;
   width: 50%;
   border-radius: 5px;
-  box-shadow: 0 0 5px var(--common-shadow-4);
+  box-shadow: 0 5px 5px var(--common-shadow-4);
 }
 
 .pool-cover {
@@ -310,7 +311,7 @@ onUnmounted(() => {
   align-items: flex-start;
   justify-content: flex-start;
   margin-right: 10px;
-  color: var(--tgc-text-1);
+  color: var(--tgc-white-1);
   font-size: 12px;
   gap: 10px;
   text-align: left;

src/components/home/t-position.vue

@@ -5,7 +5,8 @@
       <span>近期活动</span>
     </div>
     <div v-if="!loading" class="position-grid">
-      <v-card v-for="card in positionCards" :key="card.postId" class="position-card">
+      <!-- todo hover 效果优化 -->
+      <v-card v-for="card in positionCards" :key="card.postId" class="position-card" variant="outlined">
         <v-list class="position-list">
           <v-list-item :title="card.title" :subtitle="card.abstract">
             <template #prepend>
@@ -14,27 +15,23 @@
               </v-avatar>
             </template>
             <template #append>
-              <v-btn variant="outlined" @click="toPost(card)"> 查看 </v-btn>
+              <v-btn variant="tonal" @click="toPost(card)" class="position-card-btn"> 查看 </v-btn>
             </template>
           </v-list-item>
         </v-list>
-        <v-divider class="border-opacity-75" />
+        <v-divider />
         <v-card-text>
           <div class="position-card-text">
             <v-icon>mdi-calendar-clock</v-icon>
-            <span>{{ card.time.start }} ~ {{ card.time.end }}</span>
+            <span>{{ card.time.start }}~{{ card.time.end }}</span>
           </div>
           <div class="position-card-text">
             <v-icon>mdi-clock-outline</v-icon>
             <span>剩余时间：</span>
-            <!-- 玉鈫蓝 -->
+            <span v-if="positionTimeGet[card.postId] !== '已结束'">{{
-            <span v-if="positionTimeGet[card.postId] !== '已结束'" style="color: #126e82">{{
               positionTimeGet[card.postId]
             }}</span>
-            <!-- 粉红 -->
+            <span v-else>已结束</span>
-            <span v-if="positionTimeGet[card.postId] === '已结束'" style="color: #f2b9b2"
-              >已结束</span
-            >
           </div>
         </v-card-text>
       </v-card>
@@ -128,6 +125,7 @@ onUnmounted(() => {
 .position-box {
   padding: 10px;
   border: 1px solid var(--common-shadow-2);
+  background: var(--box-bg-1);
   border-radius: 5px;
 }
 
@@ -154,8 +152,8 @@ onUnmounted(() => {
 
 .position-card {
   border-radius: 5px;
-  background: var(--content-box-bg-1);
+  background: var(--box-bg-2);
-  color: var(--common-bgt-1);
+  border: 1px solid var(--common-shadow-2);
 }
 
 .position-list {
@@ -176,21 +174,22 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: all 0.3s;
+  transition: all 0.5s;
 }
 
 .position-icon :hover {
   cursor: pointer;
-  scale: 1.5;
+  scale: 1.2;
+}
+
+.position-card-btn {
+  border-radius: 5px;
+  border: 1px solid var(--common-shadow-4);
 }
 
 .position-card-text {
   display: inline-block;
   min-width: 200px;
-  align-items: center;
+  align-items: flex-start;
-}
-
-.position-card-text :nth-child(1) {
-  margin: 0 5px;
 }
 </style>