fix(layout): center footer accessory group

src/layouts/default/components/Footer.vue

@@ -226,11 +226,7 @@ function handleDynamicMenuItemClick(item: DynamicButtonMenuItem) {
 
 <template>
   <Teleport v-if="shouldRenderFooterNav" to="body">
-    <div
-      v-show="shouldRevealFooterNav"
-      class="footer-nav-container"
-      :class="{ 'footer-nav-container--with-accessory': showDynamicButton }"
-    >
+    <div v-show="shouldRevealFooterNav" class="footer-nav-container">
       <TransitionGroup name="footer-nav" tag="div" class="footer-nav-group">
         <VCard
           key="main-nav"
@@ -345,13 +341,6 @@ function handleDynamicMenuItemClick(item: DynamicButtonMenuItem) {
   pointer-events: none;
 }
 
-// 动态按钮脱离主导航布局后，预留其最大宽度和间距，保持整个 Footer 的视觉中心不偏移。
-.footer-nav-container--with-accessory {
-  --footer-nav-accessory-space: 60px;
-
-  padding-inline-end: calc(var(--footer-nav-accessory-space) + 2px);
-}
-
 // 移动端两个设置面板都是全屏展示，打开时隐藏底部导航，避免不可见控件继续参与焦点和合成。
 html[data-theme-customizer-open='true'],
 html[data-agent-assistant-open='true'] {
@@ -363,13 +352,15 @@ html[data-agent-assistant-open='true'] {
 }
 
 .footer-nav-group {
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 2px;
 }
 
 .footer-nav-card {
+  // 主导航和动态按钮共同参与组宽度计算，禁止 Flex 收缩，确保整体组件按真实宽度居中。
+  flex: 0 0 auto;
   position: relative;
   overflow: hidden;
   border-radius: 9999px !important;
@@ -454,14 +445,9 @@ html[data-agent-assistant-open='true'] {
 
 // 动态按钮卡片样式
 .dynamic-btn-card {
-  position: absolute;
   block-size: 48px;
-  inset-block: 0;
-  inset-inline-start: calc(100% + 2px);
   inline-size: auto;
-  margin-block: auto !important;
-  margin-inline: 0 !important;
-  max-inline-size: var(--footer-nav-accessory-space, 60px);
+  max-inline-size: 60px;
   min-block-size: 0;
 
   .footer-card-content {

src/layouts/default/components/__tests__/FooterGeometry.spec.ts

@@ -15,16 +15,14 @@ describe('Footer Dock geometry', () => {
 
     expect(source).toContain('data-footer-nav-role="primary"')
     expect(source).toContain('data-footer-nav-role="accessory"')
-    expect(source).toContain("'footer-nav-container--with-accessory': showDynamicButton")
+    expect(source).not.toContain('footer-nav-container--with-accessory')
+    expect(source).toMatch(/\.footer-nav-group\s*\{[\s\S]*?display:\s*flex;[\s\S]*?gap:\s*2px;/)
+    expect(source).toMatch(/\.footer-nav-card\s*\{[\s\S]*?flex:\s*0 0 auto;/)
     expect(source).toMatch(
-      /\.footer-nav-container--with-accessory\s*\{[\s\S]*?--footer-nav-accessory-space:\s*60px;[\s\S]*?padding-inline-end:\s*calc\(var\(--footer-nav-accessory-space\) \+ 2px\);/,
-    )
-    expect(source).toMatch(/\.footer-nav-group\s*\{[\s\S]*?position:\s*relative;/)
-    expect(source).toMatch(
-      /\.dynamic-btn-card\s*\{[\s\S]*?position:\s*absolute;[\s\S]*?block-size:\s*48px;[\s\S]*?inset-block:\s*0;[\s\S]*?inset-inline-start:\s*calc\(100% \+ 2px\);[\s\S]*?margin-block:\s*auto !important;/,
+      /\.dynamic-btn-card\s*\{[\s\S]*?block-size:\s*48px;[\s\S]*?inline-size:\s*auto;[\s\S]*?max-inline-size:\s*60px;/,
     )
+    expect(source).not.toMatch(/\.dynamic-btn-card\s*\{[\s\S]*?position:\s*absolute;/)
     expect(source).not.toContain('@media (width <= 480px)')
-    expect(source).not.toContain('inset-block-end: calc(100% + 4px)')
     expect(source).toMatch(
       /\[dir='rtl'\] \.footer-nav-enter-from,[\s\S]*?\[dir='rtl'\] \.footer-nav-leave-to\s*\{[\s\S]*?transform:\s*translateX\(-20px\);/,
     )