From 760e97ced515c8d435d5630c2d2883a8903727f1 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Mon, 26 Oct 2026 17:20:44 +0800
Subject: [PATCH 1/2] fix: fix new td-footer in mobile framework site

---
 .../src/components/td-doc-footer/index.ts             | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/site-components/src/components/td-doc-footer/index.ts b/packages/site-components/src/components/td-doc-footer/index.ts
index 09af565ea..85d70dbcb 100644
--- a/packages/site-components/src/components/td-doc-footer/index.ts
+++ b/packages/site-components/src/components/td-doc-footer/index.ts
@@ -1,7 +1,7 @@
 import { html, define } from 'hybrids';
 import { getFooterConfig } from '@config/footer';
 import { getLocale } from '@config/locale';
-import { patchShadowDomIntoDom, mobileBodyStyle } from '@utils';
+import { patchShadowDomIntoDom } from '@utils';
 import { fetchEcosystemConfig, getEcosystemLinkTarget } from '@config/ecosystem';
 import type { FooterGroup } from '@config/types';
 import tencentCloudIcon from '@images/tencentcloud-logo.svg?raw';
@@ -28,9 +28,6 @@ const locale = getLocale();
 const currentYear = new Date().getFullYear();
 
 type GroupType = 'vue' | 'react' | 'wx' | 'uniapp' | 'flutter' | 'design';
-interface BodyStyle {
-  paddingRight?: string;
-}
 
 const groupCodeMap = {
   vue: vueGroup,
@@ -51,7 +48,6 @@ const communityPlatforms: Array<{ type: GroupType; name: string; icon: string }>
 ];
 
 interface FooterHost {
-  mobileBodyStyle: BodyStyle;
   platform: string;
   displayQrCode: string;
   patchDom: boolean;
@@ -60,7 +56,6 @@ interface FooterHost {
 
 export default define<FooterHost>({
   tag: 'td-doc-footer',
-  mobileBodyStyle,
   platform: 'web',
   displayQrCode: '',
   footerLinks: {
@@ -85,10 +80,8 @@ export default define<FooterHost>({
     connect: patchShadowDomIntoDom,
   },
   render: (host) => {
-    const mobileBodyStyle = { ...host.mobileBodyStyle };
-
     return html`
-      <footer class="TDesign-doc-footer" style="${mobileBodyStyle}">
+      <footer class="TDesign-doc-footer">
         <div class="TDesign-doc-footer__inner">
           <section class="TDesign-doc-footer__main">
             <div class="TDesign-doc-footer__brand">

From b18d9b78ba4317afaed3402318217ad1d5cde849 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Mon, 26 Oct 2026 17:51:25 +0800
Subject: [PATCH 2/2] fix: fix new td-footer in mobile framework site

---
 .../src/components/td-doc-phone/index.ts      | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/site-components/src/components/td-doc-phone/index.ts b/packages/site-components/src/components/td-doc-phone/index.ts
index 71a6951ea..5eff45b24 100644
--- a/packages/site-components/src/components/td-doc-phone/index.ts
+++ b/packages/site-components/src/components/td-doc-phone/index.ts
@@ -64,19 +64,19 @@ export default define<DocPhoneProps>({
         const isMobileResponse = window.innerWidth < 960;
         if (isMobileResponse) return;
 
-        const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
+        const { scrollTop } = document.documentElement;
+        const phone = host.shadowRoot?.querySelector<HTMLElement>('.TDesign-doc-phone');
+        const footer = document.querySelector<HTMLElement>('td-doc-footer');
+        const fixedTop = 152;
+        const initialTop = 316;
+        const footerGap = 66;
 
-        // 当底部出现时不要超过底部区域
-        const FOOTER_HEIGHT = parseFloat(
-          getComputedStyle(document.documentElement).getPropertyValue('--footer-height'),
-        );
-        const PHONE_HEIGHT = parseFloat(getComputedStyle(host).getPropertyValue('--phone-body-height'));
-        const TD_HEIGHT = 64;
-        const maxPhonePos = scrollHeight - FOOTER_HEIGHT - PHONE_HEIGHT - TD_HEIGHT - 64; // 预留底部 64 像素间距
-        const canViewPhoneAndFooter = clientHeight <= FOOTER_HEIGHT + PHONE_HEIGHT + 64;
+        // 使用 footer 的实际位置计算边界，避免 footer 高度变化后手机预览遮挡 footer。
+        const footerTop = footer ? footer.getBoundingClientRect().top + scrollTop : Number.POSITIVE_INFINITY;
+        const maxPhonePos = footerTop - (phone?.offsetHeight || 0) - footerGap;
 
         if (scrollTop >= 228) {
-          if (scrollTop + 88 >= maxPhonePos && canViewPhoneAndFooter) {
+          if (scrollTop + fixedTop >= maxPhonePos) {
             Object.assign(host, {
               [key]: {
                 ...host.fixedStyle,
@@ -89,7 +89,7 @@ export default define<DocPhoneProps>({
               [key]: {
                 ...host.fixedStyle,
                 position: 'fixed',
-                top: '152px',
+                top: `${fixedTop}px`,
               },
             });
           }
@@ -98,7 +98,7 @@ export default define<DocPhoneProps>({
             [key]: {
               ...host.fixedStyle,
               position: 'absolute',
-              top: '316px',
+              top: `${Math.min(initialTop, maxPhonePos)}px`,
             },
           });
         }
@@ -121,12 +121,16 @@ export default define<DocPhoneProps>({
       }
 
       document.addEventListener('scroll', handleScroll);
+      window.addEventListener('resize', handleScroll);
       window.addEventListener('resize', responsePhone);
+      window.addEventListener('load', handleScroll);
       window.addEventListener('load', responsePhone);
 
       return () => {
         document.removeEventListener('scroll', handleScroll);
+        window.removeEventListener('resize', handleScroll);
         window.removeEventListener('resize', responsePhone);
+        window.removeEventListener('load', handleScroll);
         window.removeEventListener('load', responsePhone);
       };
     },