chiyi/image2api
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): 切换页面时整体抖动 — 固定滚动条槽位，去掉切页位移动画

Browse Source 
页面有/无滚动条时视口宽度变化会让居中内容和固定导航横向跳动；
html 与后台 main 加 scrollbar-gutter: stable。
同时去掉切页淡入里的 translateY，只保留透明度过渡。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
chiyi
2026-10-27 16:32:59 +08:00
co-authored by Devin
parent 3a18406b23
commit 6372b7cb8b
3 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layouts/AdminLayout.vue
+3 -3
View File
@@ -98,7 +98,7 @@ watch(() => route.path, () => {
<!-- ===== Main ===== --> <!-- ===== Main ===== -->
<div class="flex-1 min-w-0 flex flex-col relative"> <div class="flex-1 min-w-0 flex flex-col relative">
<main :class="['theme-text flex-1 overflow-y-auto overscroll-y-none relative z-10']"> <main :class="['theme-text flex-1 overflow-y-auto overscroll-y-none relative z-10 [scrollbar-gutter:stable]']">
<div class="px-8 py-8 max-w-[1500px] mx-auto"> <div class="px-8 py-8 max-w-[1500px] mx-auto">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
@@ -152,7 +152,7 @@ watch(() => route.path, () => {
.admin-sublink:hover { background: rgb(24 24 27 / 0.05); color: var(--fg); } .admin-sublink:hover { background: rgb(24 24 27 / 0.05); color: var(--fg); }
.admin-sublink.active { color: #18181b; background: rgb(24 24 27 / 0.07); font-weight: 800; } .admin-sublink.active { color: #18181b; background: rgb(24 24 27 / 0.07); font-weight: 800; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; } .fade-enter-active, .fade-leave-active { transition: opacity 0.12s ease; }
.fade-enter-from { opacity: 0; transform: translateY(4px); } .fade-enter-from { opacity: 0; }
.fade-leave-to { opacity: 0; } .fade-leave-to { opacity: 0; }
</style> </style>
frontend/src/layouts/PublicLayout.vue
+2 -2
View File
@@ -435,7 +435,7 @@ html.dark .nav-inner { box-shadow: 0 8px 30px -14px rgb(0 0 0 / 0.5); }
.menu-item--out:hover { background: rgb(220 38 38 / 0.08); color: #dc2626; } .menu-item--out:hover { background: rgb(220 38 38 / 0.08); color: #dc2626; }
.menu-sep { height: 1px; background: var(--hairline); margin: 0.35rem 0.25rem; } .menu-sep { height: 1px; background: var(--hairline); margin: 0.35rem 0.25rem; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; } .fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
.fade-enter-from { opacity: 0; transform: translateY(8px); } .fade-enter-from { opacity: 0; }
.fade-leave-to { opacity: 0; } .fade-leave-to { opacity: 0; }
</style> </style>
frontend/src/style.css
+2
View File
@@ -50,6 +50,8 @@ video {
--accent-glow: rgb(24 24 27 / 0.25); --accent-glow: rgb(24 24 27 / 0.25);
} }
html { scrollbar-gutter: stable; }
html.dark { html.dark {
--app-bg: #08070f; --app-bg: #08070f;
--fg: rgb(255 255 255 / 0.93); --fg: rgb(255 255 255 / 0.93);