From 925ff669df9f5be9949540480d8bddb5cdc30645 Mon Sep 17 00:00:00 2001
From: youzi <2410633923@qq.com>
Date: Fri, 7 Aug 2026 18:15:24 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=E5=B9=B6=E7=A7=BB=E9=99=A4=E8=8A=82=E5=81=87?=
 =?UTF-8?q?=E6=97=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 恢复 aplayer 初始变换为 translateY(0) 和 translateX(0)，并自动触发点击以初始化状态
- 为 aplayer 列表项添加字体大小 12px 样式
- 简化 homeSide 组件模板格式，统一代码风格
- 移除节假日获取与显示相关逻辑（getHoli 函数及对应模板）
---
 src/components/aplayer.vue  |   6 ++-
 src/components/homeSide.vue | 102 +++++++++---------------------------
 2 files changed, 28 insertions(+), 80 deletions(-)

diff --git a/src/components/aplayer.vue b/src/components/aplayer.vue
index 26099ae..4f49470 100644
--- a/src/components/aplayer.vue
+++ b/src/components/aplayer.vue
@@ -58,8 +58,8 @@ function setupMiniswitcher() {
 
   let expanded = false;
   app.style.display = "block";
-  app.style.transform = "translateY(50px)";
-  apic.style.transform = "translateX(-66px)";
+  app.style.transform = "translateY(0)";
+  apic.style.transform = "translateX(0)";
 
   onClickMiniswitcher = () => {
     if (expanded) {
@@ -76,6 +76,7 @@ function setupMiniswitcher() {
     }
   };
   miniswitcherEl.addEventListener("click", onClickMiniswitcher);
+  miniswitcherEl?.click()
 }
 
 /** 阻止歌单列表滚轮事件冒泡，避免联动外层滚动 */
@@ -149,6 +150,7 @@ onUnmounted(() => {
   }
 
   :deep(.aplayer-list-light) {
+    font-size: 12px !important;
     background: inherit;
     color: @orange;
   }
diff --git a/src/components/homeSide.vue b/src/components/homeSide.vue
index c929b1f..eef378d 100644
--- a/src/components/homeSide.vue
+++ b/src/components/homeSide.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="pl-6 pr-6 !bg-transparent">
-    <n-card
-      embedded
-      class="side-glass-card side-glass-card--tint mt-2 overflow-hidden rounded-[24px]"
-      :style="{ '--side-i': 0 }"
-    >
+    <n-card embedded class="side-glass-card side-glass-card--tint mt-2 overflow-hidden rounded-[24px]"
+      :style="{ '--side-i': 0 }">
       <template #header>
         <div class="flex items-center font-semibold text-slate-700">
           <icon-time class="mr-2 w-5 text-primary"></icon-time>
@@ -15,24 +12,16 @@
         <div class="flex items-center justify-between gap-3">
           <div class="min-w-0">
             <div
-              class="text-3xl font-[yj] font-[500] leading-[1.15] tracking-[0.04em] text-[#D71A44] drop-shadow-[0_8px_20px_rgba(215,26,68,0.14)]"
-            >
+              class="text-3xl font-[yj] font-[500] leading-[1.15] tracking-[0.04em] text-[#D71A44] drop-shadow-[0_8px_20px_rgba(215,26,68,0.14)]">
               {{ t }}
             </div>
             <div class="mt-1 text-[14px] text-slate-500">{{ d }}</div>
           </div>
-          <img
-            v-if="jq?.type != 0"
+          <img v-if="jq?.type != 0"
             class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(236,160,102,0.18)]"
-            src="@/assets/images/offwork.png"
-            alt="offwork"
-          >
-          <img
-            v-else
-            class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(102,160,236,0.18)]"
-            src="@/assets/images/onwork.png"
-            alt="onwork"
-          >
+            src="@/assets/images/offwork.png" alt="offwork">
+          <img v-else class="pointer-events-none w-[88px] shrink-0 drop-shadow-[0_10px_22px_rgba(102,160,236,0.18)]"
+            src="@/assets/images/onwork.png" alt="onwork">
         </div>
         <div class="mt-2">
           <div class="flex items-center justify-between text-[13px] text-slate-500">
@@ -40,22 +29,16 @@
             <span>{{ yearProgress }}%</span>
           </div>
           <div
-            class="mt-1 h-1 overflow-hidden rounded-full bg-white/70 shadow-[inset_0_1px_2px_rgba(128,118,126,0.14)]"
-          >
+            class="mt-1 h-1 overflow-hidden rounded-full bg-white/70 shadow-[inset_0_1px_2px_rgba(128,118,126,0.14)]">
             <div
               class="h-full rounded-full bg-[linear-gradient(90deg,#DB5F51,#D71A44)] shadow-[0_0_10px_rgba(215,26,68,0.4)] transition-[width] duration-700"
-              :style="{ width: yearProgress + '%' }"
-            ></div>
+              :style="{ width: yearProgress + '%' }"></div>
           </div>
         </div>
       </template>
     </n-card>
 
-    <n-card
-      embedded
-      class="side-glass-card mt-2 overflow-hidden rounded-[24px]"
-      :style="{ '--side-i': 1 }"
-    >
+    <n-card embedded class="side-glass-card mt-2 overflow-hidden rounded-[24px]" :style="{ '--side-i': 1 }">
       <template #header>
         <div class="flex items-center font-semibold text-slate-700">
           <icon-news class="mr-2 w-5 text-primary"></icon-news>
@@ -64,31 +47,27 @@
       </template>
       <template #default>
         <div class="py-1" v-for="i in bdNews" :key="i.id">
-          <a
-            class="group flex items-center justify-between gap-2 rounded-xl border border-transparent px-2 py-0.5 text-[#D71A44] no-underline transition-[background-color,border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-white/80 hover:bg-white/65 hover:shadow-[0_2px_8px_rgba(128,118,126,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]"
-            :href="i.url"
-            target="_blank"
-          >
+          <a class="group flex items-center justify-between gap-2 rounded-xl border border-transparent px-2 py-0.5 text-[#D71A44] no-underline transition-[background-color,border-color,box-shadow,transform] duration-200 hover:-translate-y-px hover:border-white/80 hover:bg-white/65 hover:shadow-[0_2px_8px_rgba(128,118,126,0.08),inset_0_1px_0_rgba(255,255,255,0.6)]"
+            :href="i.url" target="_blank">
             <span class="flex min-w-0 items-center truncate">
               <span
                 class="mr-2 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-[11px] font-bold"
                 :class="i.index <= 3
                   ? 'bg-[linear-gradient(135deg,#DB5F51,#F99A9F)] text-white shadow-[0_3px_8px_rgba(219,95,81,0.28)] transition-[box-shadow] duration-200 group-hover:bg-[linear-gradient(135deg,#D71A44,#DB5F51)] group-hover:shadow-[0_3px_8px_rgba(215,26,68,0.28)]'
-                  : 'bg-slate-700/6 text-slate-400'"
-              >{{ i.index }}</span>
-              <span class="truncate text-[#DB5F51] transition-colors duration-200 group-hover:text-[#D71A44]">{{ i.title }}</span>
+                  : 'bg-slate-700/6 text-slate-400'">{{ i.index }}</span>
+              <span class="truncate text-[#DB5F51] transition-colors duration-200 group-hover:text-[#D71A44]">{{ i.title
+                }}</span>
               <icon-hot v-show="i.index < 4" class="ml-2 inline-block w-4 shrink-0 text-[red]"></icon-hot>
             </span>
-            <span class="shrink-0 text-[13px] font-medium text-[#DB5F51]/85 transition-colors duration-200 group-hover:text-[#D71A44]/85">{{ i.hot }}</span>
+            <span
+              class="shrink-0 text-[13px] font-medium text-[#DB5F51]/85 transition-colors duration-200 group-hover:text-[#D71A44]/85">{{
+              i.hot }}</span>
           </a>
         </div>
         <div class="mt-1.5 flex items-center justify-between">
           <div class="h-px w-2/5 bg-gradient-to-r from-transparent via-[#D71A44] to-[#D71A44]/40"></div>
-          <a
-            class="flex items-center font-medium text-[#D71A44] no-underline transition-transform duration-200 hover:scale-105"
-            href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
-            target="_blank"
-          >
+          <a class="flex items-center font-medium text-[#D71A44] no-underline transition-transform duration-200 hover:scale-105"
+            href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻" target="_blank">
             更多
             <icon-right class="ml-1 inline-block w-4 text-primary"></icon-right>
           </a>
@@ -97,11 +76,7 @@
       </template>
     </n-card>
 
-    <n-card
-      embedded
-      class="side-glass-card mt-2 overflow-hidden rounded-[24px]"
-      :style="{ '--side-i': 2 }"
-    >
+    <n-card embedded class="side-glass-card mt-2 overflow-hidden rounded-[24px]" :style="{ '--side-i': 2 }">
       <template #header>
         <div class="flex items-center font-semibold text-slate-700">
           <icon-date class="mr-2 h-[20px] w-5"></icon-date>
@@ -121,19 +96,9 @@
         <div class="flex w-full justify-center">
           <img
             class="mt-2 w-[82%] rounded-2xl border border-white/80 bg-white/70 shadow-[0_1px_3px_rgba(128,118,126,0.05),0_10px_22px_rgba(128,118,126,0.1),0_28px_54px_rgba(215,26,68,0.07),inset_0_1px_0_rgba(255,255,255,0.7)]"
-            :src="jqImg"
-            alt="节气图"
-          >
+            :src="jqImg" alt="节气图">
         </div>
         <div class="mt-1.5 text-center font-medium text-slate-600">{{ jq?.solarTerms }}</div>
-        <div
-          v-if="holiName && holiDays !== null"
-          class="mx-auto mt-2 flex w-fit items-center gap-1.5 rounded-full border border-white/70 bg-[linear-gradient(135deg,rgba(220,240,252,0.85),rgba(200,182,224,0.6))] px-3.5 py-0.5 text-[13px] font-medium text-[#D71A44] shadow-[0_2px_8px_rgba(215,26,68,0.12),inset_0_1px_0_rgba(255,255,255,0.7)]"
-        >
-          <icon-date class="w-3.5"></icon-date>
-          距 <b class="font-bold">{{ holiName }}</b> 还有
-          <b class="font-bold">{{ holiDays }}</b> 天
-        </div>
       </template>
     </n-card>
   </div>
@@ -177,7 +142,6 @@ let timer: ReturnType<typeof setInterval> | null = null
 const jq = ref<JqData | null>(null)
 const jqImg = ref('')
 const bdNews = ref<BdNewsItem[]>([])
-const holi = ref<HoliData | null>(null)
 
 // 今年进度百分比
 const yearProgress = computed(() => {
@@ -188,14 +152,7 @@ const yearProgress = computed(() => {
   return Math.min(100, Math.max(0, pct)).toFixed(1)
 })
 
-// 下一个节假日（防御式解析多种字段名）
-const holiName = computed(() => holi.value?.name || holi.value?.holiday || '')
-const holiDays = computed(() => {
-  const v = holi.value
-  if (!v) return null
-  const raw = v.days ?? v.countdown ?? v.day ?? null
-  return typeof raw === 'number' ? raw : null
-})
+
 
 function getTime() {
   const date = new Date()
@@ -226,21 +183,10 @@ async function getBdhot() {
   }
 }
 
-async function getHoli() {
-  try {
-    const res = await $http.mix.getHoli()
-    const data = Array.isArray(res.data) ? res.data[0] : res.data
-    holi.value = data || null
-  } catch {
-    holi.value = null
-  }
-}
-
 onMounted(() => {
   getTime()
   getJq()
   getBdhot()
-  getHoli()
 
   timer = setInterval(() => {
     getTime()
@@ -343,7 +289,7 @@ onUnmounted(() => {
 
 :deep(.n-card) {
   background: transparent !important;
-  box-shadow:unset;
+  box-shadow: unset;
 }
 
 :deep(.side-glass-card > .n-card__content),