💄 首页UI调整

src/components/home/t-calendar-birth.vue

@@ -49,7 +49,7 @@ onBeforeMount(async () => {
   next.value = TSAvatarBirth.getNextAvatarBirth();
 });
 
-function toBirth(type: TGApp.Archive.Birth.RoleItem | true) {
+function toBirth(type: TGApp.Archive.Birth.RoleItem) {
   let dateStr;
   if (type === true) {
     const date = new Date();
@@ -59,7 +59,7 @@ function toBirth(type: TGApp.Archive.Birth.RoleItem | true) {
   } else {
     dateStr = type.role_birthday;
   }
-  if (type != true) {
+  if (type !== true) {
     router.push({ name: "留影叙佳期", params: { date: dateStr } });
     return;
   }
@@ -72,20 +72,23 @@ function toBirth(type: TGApp.Archive.Birth.RoleItem | true) {
 }
 
 function parseDesc(intro: string): string {
-  const dom = document.createElement("div");
+  const dom = new DOMParser().parseFromString(intro, "text/html");
-  dom.innerHTML = intro;
+  return dom.body.textContent || "";
-  return dom.innerText;
 }
 </script>
 <style lang="css" scoped>
 .tcb-container {
+  display: flex;
   width: 100%;
   height: 100%;
-  padding: 10px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 5px;
   border-radius: 5px;
-  box-shadow: 0 0 5px inset var(--common-shadow-2);
+  box-shadow: 0 0 5px inset var(--common-shadow-1);
   overflow-y: auto;
-  row-gap: 10px;
+  row-gap: 5px;
 }
 
 .tcb-top-none,
@@ -93,13 +96,12 @@ function parseDesc(intro: string): string {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 10px;
 }
 
 .tcb-top-none img,
 .tcb-top-active img {
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
 }
 
 .tcb-top-active img.active {
@@ -108,8 +110,8 @@ function parseDesc(intro: string): string {
 }
 
 .tcb-top-active img.tcb-cur {
-  width: 50px;
+  width: 40px;
-  height: 50px;
+  height: 40px;
   border-radius: 50%;
   background: var(--common-shadow-1);
 }
@@ -122,7 +124,6 @@ function parseDesc(intro: string): string {
   justify-content: flex-start;
   padding: 5px;
   border-radius: 10px;
-  margin-top: 10px;
   background: var(--box-bg-1);
 }
 

src/components/home/t-homecard.vue

@@ -23,10 +23,10 @@ const props = defineProps<THomeCardProps>();
   position: relative;
   min-height: 100px;
   padding: 20px 10px 10px;
-  border: 1px solid var(--common-shadow-1);
+  border: 1px solid var(--common-shadow-2);
   border-radius: 5px;
   margin-top: 30px;
-  box-shadow: 5px 5px 10px var(--common-shadow-2);
+  box-shadow: 2px 2px 5px var(--common-shadow-1);
 }
 
 .thc-title,
@@ -38,8 +38,7 @@ const props = defineProps<THomeCardProps>();
   justify-content: center;
   padding: 0 10px;
   border-radius: 5px;
-  background: var(--box-bg-blue);
+  background: var(--tgc-od-blue);
-  box-shadow: 0 0 5px var(--common-shadow-2);
   font-family: var(--font-title);
 }
 

src/components/home/t-pool.vue

@@ -86,7 +86,7 @@ interface TPoolEmits {
 
 const emits = defineEmits<TPoolEmits>();
 
-function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard | undefined {
+function poolLastInterval(postId: number): TGApp.Plugins.Mys.Gacha.RenderCard {
   const pool = poolCards.value.find((pool) => pool.postId === postId);
   if (!pool) return;
   if (poolTimeGet.value[postId] === "未开始") {
@@ -206,7 +206,7 @@ function getCBox(info: TGApp.App.Character.WikiBriefInfo): TItemBoxData {
     display: "inner",
     clickable: true,
     lt: `/icon/element/${info.element}元素.webp`,
-    ltSize: "20px",
+    ltSize: "15px",
     innerHeight: 20,
     innerIcon: `/icon/weapon/${info.weapon}.webp`,
     innerText: info.name,
@@ -258,7 +258,7 @@ onUnmounted(() => {
   width: 100%;
   border-radius: 5px;
   aspect-ratio: 69 / 32;
-  box-shadow: 0 5px 5px var(--common-shadow-4);
+  box-shadow: 2px 2px 5px var(--common-shadow-2);
 }
 
 .pool-cover {

src/components/home/t-position.vue

@@ -119,7 +119,7 @@ onUnmounted(() => {
   display: grid;
   margin-top: 10px;
   grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill, minmax(calc(400px + 2rem), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(calc(400px + 2rem), 0.5fr));
 }
 
 .position-card {

src/pages/common/Home.vue

@@ -1,26 +1,32 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" :subtitle="loadingSubtitle" />
   <div class="home-container">
+    <div class="home-top">
+      <div class="home-tools" v-if="appStore.isLogin">
+        <v-select
+          v-model="curGid"
+          class="home-tool-select"
+          :items="gameSelectList"
+          item-title="title"
+          item-value="gid"
+          :hide-details="true"
+          variant="outlined"
+          label="分区"
+        />
+        <TGameNav :model-value="curGid" />
+      </div>
       <div class="home-select">
         <v-select
           variant="outlined"
           v-model="showHome"
           :items="homeStore.getShowItems()"
-        hide-details
+          :hide-details="true"
           :multiple="true"
           :chips="true"
+          label="首页组件显示"
         />
-      <v-btn class="select-btn" @click="submitHome" rounded>确定</v-btn>
+        <v-btn class="select-btn" @click="submitHome" :rounded="true">确定</v-btn>
       </div>
-    <div class="home-tools" v-if="appStore.isLogin">
-      <v-select
-        v-model="curGameLabel"
-        class="home-tool-select"
-        :items="gameItem"
-        hide-details
-        variant="outlined"
-      />
-      <TGameNav :model-value="gameList[curGameLabel]" />
     </div>
     <component
       :is="item"
@@ -44,6 +50,7 @@ import ToLoading from "../../components/overlay/to-loading.vue";
 import { useAppStore } from "../../store/modules/app.js";
 import { useHomeStore } from "../../store/modules/home.js";
 import TGLogger from "../../utils/TGLogger.js";
+import TGConstant from "../../web/constant/TGConstant.js";
 
 // store
 const appStore = useAppStore();
@@ -59,26 +66,8 @@ const endNum = ref<number>(0);
 const components = shallowRef<any[]>([]);
 const showHome = ref<string[]>(homeStore.getShowValue());
 
-// top nav
+const gameSelectList = TGConstant.BBS.CHANNELS;
-const gameList = {
+const curGid = ref<string>(gameSelectList[0].gid);
-  原神: 2,
-  "崩坏：星穹铁道": 6,
-  崩坏3: 1,
-  崩坏2: 3,
-  未定事件簿: 4,
-  绝区零: 8,
-  大别野: 5,
-};
-const curGameLabel = ref<keyof typeof gameList>("原神");
-const gameItem = ref<string[]>([
-  "原神",
-  "崩坏：星穹铁道",
-  "绝区零",
-  "崩坏3",
-  "崩坏2",
-  "未定事件簿",
-  "大别野",
-]);
 
 onMounted(async () => {
   loadingTitle.value = "正在加载首页";
@@ -155,8 +144,15 @@ onUnmounted(() => {
 });
 </script>
 <style lang="css" scoped>
-.home-select {
+.home-container {
   display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.home-top {
+  display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
@@ -170,19 +166,21 @@ onUnmounted(() => {
 }
 
 .home-tool-select {
+  width: 200px;
   max-width: 200px;
 }
 
+.home-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
 .select-btn {
   width: 100px;
   height: 40px;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
 }
-
-.home-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
 </style>

tsconfig.json

@@ -12,7 +12,7 @@
     "esModuleInterop": true,
     "lib": ["DOM", "ESNext"],
     "skipLibCheck": true,
-    "types": ["vite/client", "node", "color-convert", "js-md5", "uuid"],
+    "types": ["vite/client", "node", "color-convert", "js-md5", "uuid", "src/vite-env"],
     "allowSyntheticDefaultImports": true,
     "composite": true
   },