✨ 优化展开动画与趋势控制布局

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 class="mb-5 flex flex-col gap-4">
-          <div>
+          <div class="flex min-w-0 flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
-            <h3 class="text-lg font-semibold" :class="[primaryTextClass]">下载/上传趋势</h3>
+            <div class="min-w-0">
-            <p class="text-sm" :class="[mutedTextClass]">
+              <h3 class="text-lg font-semibold" :class="[primaryTextClass]">下载/上传趋势</h3>
-              {{ analyticsSummaryText }}
+              <p class="break-words text-sm leading-5" :class="[mutedTextClass]">
-            </p>
+                {{ analyticsSummaryText }}
-            <p class="mt-1 text-xs sm:hidden" :class="[mutedTextClass]">轻触或滑动查看数据；拖动底部日期轴平移图表</p>
+              </p>
-          </div>
+              <p class="mt-1 text-xs sm:hidden" :class="[mutedTextClass]">轻触或滑动查看数据；拖动底部日期轴平移图表</p>
-          <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>
+            <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"

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
+            <TransitionGroup name="fcb-expand-120" tag="div">
-              v-for="(item, index) in visibleDetailTimeline"
+              <div
-              :key="`${item.key}-${index}`"
+                v-for="(item, index) in visibleDetailTimeline"
-              class="grid grid-cols-[auto_minmax(0,1fr)] gap-3"
+                :key="`${item.key}-${index}`"
-            >
+                class="fcb-expand-content grid grid-cols-[auto_minmax(0,1fr)] gap-3"
-              <div class="flex flex-col items-center">
+              >
+                <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>