orion/FileCodeBoxFronted2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Orion
2026-07-10 15:54:03 +08:00
parent 2cb36c5bbf
commit bfc114659d
2 changed files with 65 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/manage/DashboardView.vue
+13 -9
View File
@@ -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"
src/views/manage/FileManageView.vue
+52 -8
View File
@@ -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>