From bfc114659d313f58343c1f509012bc0e72ba770f Mon Sep 17 00:00:00 2001
From: Orion <orionc1226@gmail.com>
Date: Fri, 10 Jul 2026 15:54:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E4=BC=98=E5=8C=96=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E5=8A=A8=E7=94=BB=E4=B8=8E=E8=B6=8B=E5=8A=BF=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/manage/DashboardView.vue  | 22 ++++++-----
 src/views/manage/FileManageView.vue | 60 +++++++++++++++++++++++++----
 2 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/src/views/manage/DashboardView.vue b/src/views/manage/DashboardView.vue
index a067eeb..6bdff37 100644
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -233,15 +233,17 @@
         class="theme-2026-card theme-2026-card-hover rounded-[24px] p-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg sm:rounded-[30px] sm:p-5"
         :class="[panelClass, cardHoverClass]"
       >
-        <div class="mb-5 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-          <div>
-            <h3 class="text-lg font-semibold" :class="[primaryTextClass]">下载/上传趋势</h3>
-            <p class="text-sm" :class="[mutedTextClass]">
-              {{ analyticsSummaryText }}
-            </p>
-            <p class="mt-1 text-xs sm:hidden" :class="[mutedTextClass]">轻触或滑动查看数据；拖动底部日期轴平移图表</p>
-          </div>
-          <div class="analytics-date-range flex w-full min-w-0 items-center justify-center gap-1.5 sm:w-auto sm:flex-row sm:gap-2">
+        <div class="mb-5 flex flex-col gap-4">
+          <div class="flex min-w-0 flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
+            <div class="min-w-0">
+              <h3 class="text-lg font-semibold" :class="[primaryTextClass]">下载/上传趋势</h3>
+              <p class="break-words text-sm leading-5" :class="[mutedTextClass]">
+                {{ analyticsSummaryText }}
+              </p>
+              <p class="mt-1 text-xs sm:hidden" :class="[mutedTextClass]">轻触或滑动查看数据；拖动底部日期轴平移图表</p>
+            </div>
+            <div class="flex shrink-0 flex-wrap items-center justify-end gap-2 xl:flex-nowrap">
+              <div class="analytics-date-range flex min-w-0 items-center justify-center gap-1.5 sm:gap-2">
               <NativeDateSelect
                 v-model="analyticsStart"
                 :field-class="fieldClass"
@@ -287,6 +289,8 @@
                 重置
               </BaseButton>
             </div>
+          </div>
+          </div>
         </div>
         <div
           v-if="analyticsError"
diff --git a/src/views/manage/FileManageView.vue b/src/views/manage/FileManageView.vue
index b15213d..06ceb3c 100644
--- a/src/views/manage/FileManageView.vue
+++ b/src/views/manage/FileManageView.vue
@@ -67,7 +67,8 @@
         </div>
       </div>
 
-      <div v-show="filterBodyVisible" class="mt-4 grid gap-4">
+      <Transition name="fcb-expand-120">
+        <div v-if="filterBodyVisible" class="fcb-expand-content mt-4 grid gap-4">
         <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
           <label class="min-w-0 flex-1">
             <span class="sr-only">{{ t('fileManage.searchPlaceholder') }}</span>
@@ -253,6 +254,7 @@
           </BaseButton>
         </div>
       </div>
+      </Transition>
     </section>
 
     <section
@@ -1107,12 +1109,13 @@
             class="rounded-[30px] border px-4 py-4 shadow-md"
             :class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
           >
-            <div
-              v-for="(item, index) in visibleDetailTimeline"
-              :key="`${item.key}-${index}`"
-              class="grid grid-cols-[auto_minmax(0,1fr)] gap-3"
-            >
-              <div class="flex flex-col items-center">
+            <TransitionGroup name="fcb-expand-120" tag="div">
+              <div
+                v-for="(item, index) in visibleDetailTimeline"
+                :key="`${item.key}-${index}`"
+                class="fcb-expand-content grid grid-cols-[auto_minmax(0,1fr)] gap-3"
+              >
+                <div class="flex flex-col items-center">
                 <span
                   class="mt-1 h-3 w-3 rounded-full"
                   :class="getTimelineDotClass(item.severity)"
@@ -1141,7 +1144,8 @@
                   {{ item.displayDescription }}
                 </p>
               </div>
-            </div>
+              </div>
+            </TransitionGroup>
           </div>
         </section>
 
@@ -2197,3 +2201,43 @@ onMounted(() => {
   void loadHistoryFiles()
 })
 </script>
+
+<style scoped>
+.fcb-expand-content {
+  overflow: clip;
+  will-change: grid-template-rows, opacity, transform;
+}
+
+.fcb-expand-120-enter-active,
+.fcb-expand-120-leave-active {
+  overflow: clip;
+  transition:
+    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
+    margin 300ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.fcb-expand-120-enter-from,
+.fcb-expand-120-leave-to {
+  max-height: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  opacity: 0;
+  transform: translateY(-0.35rem);
+}
+
+.fcb-expand-120-enter-to,
+.fcb-expand-120-leave-from {
+  max-height: 96rem;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fcb-expand-120-enter-active,
+  .fcb-expand-120-leave-active {
+    transition-duration: 1ms;
+  }
+}
+</style>