From 6372b7cb8bf8afc840b1af3e8f56f205748f2c46 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Tue, 27 Oct 2026 16:32:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=88=87=E6=8D=A2=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=97=B6=E6=95=B4=E4=BD=93=E6=8A=96=E5=8A=A8=20=E2=80=94=20?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=A7=BD=E4=BD=8D?=
 =?UTF-8?q?=EF=BC=8C=E5=8E=BB=E6=8E=89=E5=88=87=E9=A1=B5=E4=BD=8D=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

页面有/无滚动条时视口宽度变化会让居中内容和固定导航横向跳动；
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>
---
 frontend/src/layouts/AdminLayout.vue  | 6 +++---
 frontend/src/layouts/PublicLayout.vue | 4 ++--
 frontend/src/style.css                | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/layouts/AdminLayout.vue b/frontend/src/layouts/AdminLayout.vue
index 73214b2..6b4e75b 100644
--- a/frontend/src/layouts/AdminLayout.vue
+++ b/frontend/src/layouts/AdminLayout.vue
@@ -98,7 +98,7 @@ watch(() => route.path, () => {
     <!-- ===== Main ===== -->
     <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">
           <router-view v-slot="{ Component }">
             <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.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-from { opacity: 0; transform: translateY(4px); }
+.fade-enter-active, .fade-leave-active { transition: opacity 0.12s ease; }
+.fade-enter-from { opacity: 0; }
 .fade-leave-to { opacity: 0; }
 </style>
diff --git a/frontend/src/layouts/PublicLayout.vue b/frontend/src/layouts/PublicLayout.vue
index 13bcb79..e417cdc 100644
--- a/frontend/src/layouts/PublicLayout.vue
+++ b/frontend/src/layouts/PublicLayout.vue
@@ -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-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-from { opacity: 0; transform: translateY(8px); }
+.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
+.fade-enter-from { opacity: 0; }
 .fade-leave-to { opacity: 0; }
 </style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index ec311df..35fff23 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -50,6 +50,8 @@ video {
   --accent-glow: rgb(24 24 27 / 0.25);
 }
 
+html { scrollbar-gutter: stable; }
+
 html.dark {
   --app-bg: #08070f;
   --fg: rgb(255 255 255 / 0.93);