♻️ 首页组件样式迭代

BTMuli · Mar 26, 2024 · 6a0749f · 6a0749f
1 parent 6b2ef07
commit 6a0749f
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 287 deletions.
diff --git a/src/assets/themes/dark.css b/src/assets/themes/dark.css
@@ -1,7 +1,7 @@
 /**
  * @file assets/themes/dark.css
  * @description 主题样式文件-深色主题
- * @since Beta v0.4.1
+ * @since Beta v0.4.5
  */
 
 /* dark mode */
@@ -18,6 +18,8 @@ html.dark {
   --box-bg-3: #282c34;
   --box-bg-4: #3d424b;
 
+  --box-bg-blue: var(--tgc-blue-1);
+
   /* box bg transparent */
   --box-bg-t-1: var(--tgc-white-3);
 

diff --git a/src/assets/themes/default.css b/src/assets/themes/default.css
@@ -18,6 +18,8 @@ html.default {
   --box-bg-3: #dee4e9;
   --box-bg-4: #f5f5f5;
 
+  --box-bg-blue: var(--tgc-blue-2);
+
   /* box bg transparent */
   --box-bg-t-1: var(--tgc-dark-5);
 

diff --git a/src/components/home/t-calendar.vue b/src/components/home/t-calendar.vue
@@ -1,87 +1,69 @@
 <template>
-  <div class="calendar-box">
-    <div class="calendar-title">
-      <div class="calendar-title-left">
-        <v-icon size="small" style="opacity: 0.8">mdi-calendar-clock</v-icon>
-        <span>今日素材</span>
-        <span>{{ dateNow }}</span>
+  <THomecard append>
+    <template #title>今日素材 {{ dateNow }}</template>
+    <template #title-append>
+      <v-switch
+        class="tc-switch"
+        variant="outline"
+        :label="switchType === 'avatar' ? '角色' : '武器'"
+        @change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"
+      />
+    </template>
+    <template #default>
+      <div class="tc-top">
+        <div class="tc-btns">
+          <v-btn
+            v-for="text of btnText"
+            :key="text.week"
+            rounded
+            :style="{
+              border: text.week === weekNow ? '1px solid var(--common-shadow-4)' : 'none',
+              backgroundColor: text.week === btnNow ? 'var(--tgc-yellow-1)' : 'var(--tgc-btn-1)',
+              color: text.week === btnNow ? 'var(--box-text-4)' : 'var(--btn-text)',
+            }"
+            @click="getContents(text.week)"
+            >{{ text.text }}
+          </v-btn>
+        </div>
+        <v-pagination class="tc-page" v-model="page" total-visible="20" :length="length" />
       </div>
-      <div class="calendar-title-mid">
-        <v-btn
-          v-for="text of btnText"
-          :key="text.week"
-          :style="{
-            border: text.week === weekNow ? '1px solid var(--box-text-2)' : 'none',
-            borderRadius: '5px',
-            backgroundColor: text.week === btnNow ? 'var(--tgc-yellow-1)' : 'inherit',
-            color: text.week === btnNow ? 'var(--box-text-4)' : 'inherit',
-          }"
-          variant="tonal"
-          @click="getContents(text.week)"
-        >
-          {{ text.text }}
-        </v-btn>
+      <div class="calendar-grid">
+        <div v-for="item in getGrid()" :key="item.id" @click="selectItem(item)">
+          <TibCalendarItem
+            :data="<TGApp.App.Calendar.Item>item"
+            :model="switchType"
+            :clickable="true"
+          />
+        </div>
       </div>
-      <div class="calendar-title-right">
-        <v-switch
-          class="calendar-title-switch"
-          color="var(--common-shadow-4)"
-          variant="outline"
-          :label="switchType === 'avatar' ? '角色' : '武器'"
-          @change="switchType = switchType === 'avatar' ? 'weapon' : 'avatar'"
-        />
-        <v-btn class="calendar-title-btn" @click="share" data-html2canvas-ignore>
-          <template #prepend>
-            <v-icon>mdi-share-variant</v-icon>
-          </template>
-          <span>分享</span>
-        </v-btn>
-      </div>
-    </div>
-    <v-divider class="calendar-divider" />
-    <div v-show="switchType === 'avatar'" class="calendar-grid">
-      <div v-for="item in characterCards" :key="item.id" @click="selectAvatar(item)">
-        <TibCalendarItem
-          :data="<TGApp.App.Calendar.Item>item"
-          :model="'avatar'"
-          :clickable="true"
-        />
-      </div>
-    </div>
-    <div v-show="switchType !== 'avatar'" class="calendar-grid">
-      <div v-for="item in weaponCards" :key="item.id" @click="selectWeapon(item)">
-        <TibCalendarItem
-          :data="<TGApp.App.Calendar.Item>item"
-          :model="'weapon'"
-          :clickable="true"
-        />
-      </div>
-    </div>
-    <ToCalendar v-model="showItem" :data-type="selectedType" :data-val="selectedItem" />
-  </div>
+    </template>
+  </THomecard>
+  <ToCalendar v-model="showItem" :data-type="selectedType" :data-val="selectedItem" />
 </template>
 <script lang="ts" setup>
 import { computed, onMounted, ref } from "vue";
 
+import THomecard from "./t-homecard.vue";
 import { AppCalendarData } from "../../data";
-import { generateShareImg } from "../../utils/TGShare";
 import TibCalendarItem from "../itembox/tib-calendar-item.vue";
 import ToCalendar from "../overlay/to-calendar.vue";
 
-// data
-const calendarData = computed<TGApp.App.Calendar.Item[]>(() => AppCalendarData);
 const weekNow = ref<number>(0);
 const btnNow = ref<number>(0);
 const dateNow = ref<string>("");
 
+// page
+const page = ref<number>(1);
+const length = ref<number>(0);
+
 // calendar
 const calendarNow = ref<TGApp.App.Calendar.Item[]>([]);
 const characterCards = ref<TGApp.App.Calendar.Item[]>([]);
 const weaponCards = ref<TGApp.App.Calendar.Item[]>([]);
 
 // calendar item
 const showItem = ref<boolean>(false);
-const switchType = ref<string>("avatar");
+const switchType = ref<"avatar" | "weapon">("avatar");
 const selectedItem = ref<TGApp.App.Calendar.Item>(<TGApp.App.Calendar.Item>{});
 const selectedType = ref<"avatar" | "weapon">("avatar");
 
@@ -145,18 +127,23 @@ onMounted(async () => {
 
 // 获取当前日历
 function getCalendar(day: number): TGApp.App.Calendar.Item[] {
-  return calendarData.value.filter((item) => item.dropDays.includes(day));
+  return AppCalendarData.filter((item) => item.dropDays.includes(day));
 }
 
-function selectAvatar(item: TGApp.App.Calendar.Item): void {
-  selectedItem.value = item;
-  selectedType.value = "avatar";
-  showItem.value = true;
+function getGrid(): TGApp.App.Calendar.Item[] {
+  let selectedCards: TGApp.App.Calendar.Item[] = [];
+  if (switchType.value === "avatar") {
+    selectedCards = characterCards.value;
+  } else {
+    selectedCards = weaponCards.value;
+  }
+  length.value = Math.ceil(selectedCards.length / 20);
+  return selectedCards.slice((page.value - 1) * 20, page.value * 20);
 }
 
-function selectWeapon(item: TGApp.App.Calendar.Item): void {
+function selectItem(item: TGApp.App.Calendar.Item): void {
   selectedItem.value = item;
-  selectedType.value = "weapon";
+  selectedType.value = switchType.value;
   showItem.value = true;
 }
 
@@ -165,87 +152,38 @@ function getContents(day: number): void {
   calendarNow.value = getCalendar(day);
   characterCards.value = calendarNow.value.filter((item) => item.itemType === "character");
   weaponCards.value = calendarNow.value.filter((item) => item.itemType === "weapon");
-}
-
-async function share(): Promise<void> {
-  emits("loadOuter", { show: true, text: "正在生成图片..." });
-  const div = <HTMLElement>document.querySelector(".calendar-box");
-  const showType = switchType.value === "avatar" ? "角色" : "武器";
-  const title = `【今日素材】${showType}${btnNow.value}`;
-  await generateShareImg(title, div);
-  emits("loadOuter", { show: false });
+  page.value = 1;
 }
 </script>
 <style lang="css" scoped>
-.calendar-box {
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-  border-radius: 5px;
-  background: var(--box-bg-1);
-  gap: 5px;
-}
-
-.calendar-title {
+.tc-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 10px;
   font-family: var(--font-title);
   font-size: 20px;
 }
 
-.calendar-title-left {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  color: var(--common-text-title);
-  column-gap: 10px;
-}
-
-.calendar-title-gift {
+.tc-switch {
   display: flex;
+  height: 36px;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-}
-
-.calendar-title-mid {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  column-gap: 15px;
-}
-
-.calendar-title-right {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 15px;
+  color: var(--box-text-1);
 }
 
-.calendar-title-switch {
+.tc-btns {
   display: flex;
-  height: 36px;
   align-items: center;
   justify-content: center;
-  color: var(--box-text-1);
-}
-
-.calendar-title-btn {
-  border: 1px solid var(--common-shadow-4);
-  border-radius: 5px;
-  background: var(--tgc-btn-1);
-  color: var(--btn-text);
-}
-
-.calendar-divider {
-  margin: 10px 0;
-  opacity: 0.2;
+  column-gap: 5px;
 }
 
 .calendar-grid {
   display: grid;
+  place-items: center flex-start;
   grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  grid-template-columns: repeat(10, 1fr);
 }
 </style>
diff --git a/src/components/home/t-homecard.vue b/src/components/home/t-homecard.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="thc-container">
+    <div class="thc-title">
+      <slot name="title"></slot>
+    </div>
+    <div class="thc-append" v-if="props.append">
+      <slot name="title-append"></slot>
+    </div>
+    <div class="thc-box">
+      <slot name="default"></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface THomecardProps {
+  append?: boolean;
+}
+
+const props = defineProps<THomecardProps>();
+</script>
+<style lang="css" scoped>
+.thc-container {
+  position: relative;
+  min-height: 100px;
+  padding: 20px 10px 10px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  margin-top: 30px;
+  box-shadow: 5px 5px 10px var(--common-shadow-2);
+}
+
+.thc-title,
+.thc-append {
+  position: absolute;
+  top: -20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  border-radius: 5px;
+  background: var(--box-bg-blue);
+  box-shadow: 0 0 5px var(--common-shadow-2);
+  font-family: var(--font-title);
+  font-size: 20px;
+}
+
+.thc-title {
+  left: 10px;
+}
+
+.thc-append {
+  right: 10px;
+}
+</style>