diff --git a/.cursorrules b/.cursorrules
index 1feaef5..a24bc99 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -9,6 +9,7 @@ You are the joint apprentice of Evan You and Kent C. Dodds. Channel Evan You's e
 - Refrain from creating unrequested files, classes, functions, or configurations.
 - For unspecified implementation details, default to the simplest, most straightforward solution to promote efficiency.
 - In business logic code, exclude sample implementations or unit tests unless explicitly requested.
+- When completing the final step of a task, do not create tests unless explicitly requested by the user.
 
 # CSS Style Rules
 - Exclusively use Tailwind CSS 3.x syntax for all styling.
diff --git a/.env.development b/.env.development
index bf2ed3a..3f8d61f 100644
--- a/.env.development
+++ b/.env.development
@@ -3,6 +3,9 @@ NEXT_PUBLIC_JAVA_URL = https://auth.test.movieflow.ai
 NEXT_PUBLIC_BASE_URL = https://77.smartvideo.py.qikongjian.com
 NEXT_PUBLIC_CUT_URL = https://77.smartcut.py.qikongjian.com
 NEXT_PUBLIC_CUT_URL_TO = https://smartcut.huiying.video 
+# google analysis
+NEXT_PUBLIC_GA_MEASUREMENT_ID = G-BHBXC1B1JL
+NEXT_PUBLIC_GA_ENABLED = true
 # 失败率
 NEXT_PUBLIC_ERROR_CONFIG = 0.5
 # Google OAuth配置
diff --git a/Dockerfile b/Dockerfile
index f561afc..434b572 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,6 +8,9 @@ COPY package.json package-lock.json* ./
 COPY public ./public
 
 ENV NODE_ENV=production
+# Google Analytics 环境变量
+ENV NEXT_PUBLIC_GA_MEASUREMENT_ID=G-4BDXV6TWF4
+ENV NEXT_PUBLIC_GA_ENABLED=true
 
 EXPOSE 3000
 
diff --git a/app/globals.css b/app/globals.css
index 29fa569..0e918bf 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -305,4 +305,8 @@ body {
     height: 100dvh;
     height: calc(var(--vh, 1vh) * 100);
   }
+}
+
+textarea, input {
+  font-size: 16px !important;
 }
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 118ff61..da2fb2f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import { createContext, useContext, useEffect, useState } from 'react';
 import { Providers } from '@/components/providers';
 import { ConfigProvider, theme } from 'antd';
 import CallbackModal from '@/components/common/CallbackModal';
+import { useAppStartupAnalytics } from '@/hooks/useAppStartupAnalytics';
 
 // 创建上下文来传递弹窗控制方法
 const CallbackModalContext = createContext<{
@@ -26,6 +27,10 @@ export default function RootLayout({
 }) {
   const [showCallbackModal, setShowCallbackModal] = useState(false)
   const [paymentType, setPaymentType] = useState<'subscription' | 'token'>('subscription')
+  
+  // 应用启动时设置用户GA属性
+  useAppStartupAnalytics();
+  
   const openCallback = async function (ev: MessageEvent<any>) {
     if (ev.data.type === 'waiting-payment') {
       setPaymentType(ev.data.paymentType || 'subscription')
@@ -48,17 +53,25 @@ export default function RootLayout({
         <link rel="icon" type="image/x-icon" sizes="32x32" href="/favicon.ico?v=1" />
         <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=1" />
         <link rel="apple-touch-icon" sizes="180x180" href="/favicon.ico?v=1" />
-        <script async src="https://www.googletagmanager.com/gtag/js?id=G-E6VBGZ4ER5"></script>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){window.dataLayer.push(arguments);}
-              gtag('js', new Date());
-              gtag('config', 'G-E6VBGZ4ER5');
-            `,
-          }}
-        />
+        {process.env.NEXT_PUBLIC_GA_ENABLED === 'true' && (
+          <>
+            <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}`}></script>
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `
+                  window.dataLayer = window.dataLayer || [];
+                  function gtag(){window.dataLayer.push(arguments);}
+                  gtag('js', new Date());
+                  gtag('config', '${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}', {
+                    page_title: document.title,
+                    page_location: window.location.href,
+                    send_page_view: true
+                  });
+                `,
+              }}
+            />
+          </>
+        )}
       </head>
       <body className="font-sans antialiased">
         <ConfigProvider
diff --git a/app/page.tsx b/app/page.tsx
index 782e582..05e71c3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,30 @@
 
+"use client";
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 import { TopBar } from "@/components/layout/top-bar";
 import { HomePage2 } from "@/components/pages/home-page2";
+import { isAuthenticated } from '@/lib/auth';
+import { useDeviceType } from '@/hooks/useDeviceType';
+import H5TopBar from '@/components/layout/H5TopBar';
 
 export default function Home() {
+  const router = useRouter();
+  const { deviceType, isMobile, isTablet, isDesktop } = useDeviceType();
+
+  useEffect(() => {
+    if (isAuthenticated()) {
+      router.replace('/movies');
+    }
+  }, [router]);
   return (
     <>
-      <TopBar collapsed={true} />
+      {isMobile || isTablet ? (
+        <H5TopBar />
+      ) : (
+        <TopBar collapsed={true} />
+      )}
       <HomePage2 />
     </>
   );
diff --git a/app/pricing/page.tsx b/app/pricing/page.tsx
index 2022048..383355b 100644
--- a/app/pricing/page.tsx
+++ b/app/pricing/page.tsx
@@ -13,8 +13,13 @@ import {
 } from "@/components/ui/card";
 import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe";
 import { DashboardLayout } from "@/components/layout/dashboard-layout";
+import { trackEvent, trackPageView, trackPayment } from "@/utils/analytics";
 
 export default function PricingPage() {
+  // 页面访问跟踪
+  useEffect(() => {
+    trackPageView('/pricing', 'Pricing Plans');
+  }, []);
 
   return (
     <DashboardLayout>
@@ -91,6 +96,17 @@ function HomeModule5() {
 
   const handleSubscribe = async (planName: string) => {
     setLoadingPlan(planName);
+    
+    // 跟踪订阅按钮点击事件
+    trackEvent('subscription_button_click', {
+      event_category: 'subscription',
+      event_label: planName,
+      custom_parameters: {
+        plan_name: planName,
+        billing_type: billingType,
+      },
+    });
+    
     // 改为直接携带参数打开 pay-redirect，由其内部完成创建与跳转
     const url = `/pay-redirect?type=subscription&plan=${encodeURIComponent(planName)}&billing=${encodeURIComponent(billingType)}`;
     const win = window.open(url, '_blank');
@@ -148,7 +164,14 @@ function HomeModule5() {
                       2xl:h-[3.375rem] 2xl:mt-[1.5rem]"
       >
         <button
-          onClick={() => setBillingType("month")}
+          onClick={() => {
+            setBillingType("month");
+            trackEvent('billing_toggle', {
+              event_category: 'subscription',
+              event_label: 'month',
+              custom_parameters: { billing_type: 'month' },
+            });
+          }}
           className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
             billingType === "month"
               ? "bg-white text-black"
@@ -164,7 +187,14 @@ function HomeModule5() {
           Monthly
         </button>
         <button
-          onClick={() => setBillingType("year")}
+          onClick={() => {
+            setBillingType("year");
+            trackEvent('billing_toggle', {
+              event_category: 'subscription',
+              event_label: 'year',
+              custom_parameters: { billing_type: 'year' },
+            });
+          }}
           className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
             billingType === "year"
               ? "bg-white text-black"
diff --git a/app/share/page.tsx b/app/share/page.tsx
index ae5ad57..f81c356 100644
--- a/app/share/page.tsx
+++ b/app/share/page.tsx
@@ -186,10 +186,10 @@ export default function SharePage(): JSX.Element {
 
     return (
         <DashboardLayout>
-            <div data-alt="share-page" className="w-full h-full overflow-y-auto bg-black text-white">
+            <div data-alt="share-page" className="w-full h-full overflow-y-auto overflow-x-hidden bg-black text-white">
                 <div
                     data-alt="container"
-                    className="w-full max-w-[95%] mx-auto px-4 py-10 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20"
+                    className="w-full max-w-[100%] mx-auto px-4 py-2 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20"
                 >
                     <header data-alt="page-header" className="mb-8 flex items-end justify-between">
                         <div data-alt="title-box">
@@ -206,14 +206,7 @@ export default function SharePage(): JSX.Element {
                                 <div data-alt="link-container" className="relative w-full max-w-2xl overflow-hidden rounded-md border border-white/20 bg-white/10">
                                     <div 
                                         data-alt="link-content" 
-                                        className="relative px-4 py-2 text-sm font-mono text-white/90 whitespace-nowrap overflow-hidden"
-                                        style={{
-                                            background: 'linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.1) 90%, rgba(255,255,255,0) 100%)',
-                                            WebkitBackgroundClip: 'text',
-                                            backgroundClip: 'text',
-                                            maskImage: 'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0) 100%)',
-                                            WebkitMaskImage: 'linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0) 100%)'
-                                        }}
+                                        className="relative px-4 py-2 text-xs sm:text-sm font-mono text-white/90 break-all sm:truncate"
                                     >
                                         {inviteCode ? `${'https://www.movieflow.ai'}/signup?inviteCode=${inviteCode}` : '-'}
                                     </div>
@@ -258,21 +251,21 @@ export default function SharePage(): JSX.Element {
                                 <li data-alt="step" className="rounded-md p-4">
                                     <div data-alt="step-header" className="flex items-center justify-between">
                                         <span className="text-sm font-medium text-custom-blue/50">Step 1</span>
-                                        <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white bg-custom-purple/50">Share</span>
+                                        <span className="rounded px-2 py-0.5 text-xs text-white bg-custom-purple/50">Share</span>
                                     </div>
                                     <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Copy your invitation link and share it with friends.</p>
                                 </li>
                                 <li data-alt="step" className="rounded-md p-4">
                                     <div data-alt="step-header" className="flex items-center justify-between">
                                         <span className="text-sm font-medium text-custom-blue/50">Step 2</span>
-                                        <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white bg-custom-purple/50">Register</span>
+                                        <span className="rounded px-2 py-0.5 text-xs text-white bg-custom-purple/50">Register</span>
                                     </div>
                                     <p data-alt="step-desc" className="mt-2 text-sm text-white/70">Friends click the link and register directly.</p>
                                 </li>
                                 <li data-alt="step" className="rounded-md p-4">
                                     <div data-alt="step-header" className="flex items-center justify-between">
                                         <span className="text-sm font-medium text-custom-blue/50">Step 3</span>
-                                        <span className="rounded bg-white/10 px-2 py-0.5 text-xs text-white bg-custom-purple/50">Reward</span>
+                                        <span className="rounded px-2 py-0.5 text-xs text-white bg-custom-purple/50">Reward</span>
                                     </div>
                                     <p data-alt="step-desc" className="mt-2 text-sm text-white/70">You both receive rewards after your friend activates their account.</p>
                                 </li>
@@ -351,8 +344,8 @@ export default function SharePage(): JSX.Element {
                         <table data-alt="records-table" className="min-w-full divide-y divide-white/10 table-fixed">
                             <thead data-alt="table-head" className="bg-black">
                                 <tr data-alt="table-head-row">
-                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60 w-48">Invited Username</th>
-                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60 w-56">Registered At</th>
+                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60 sm:w-48">Invited Username</th>
+                                    <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60 sm:w-56">Registered At</th>
                                     <th className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-white/60">Reward</th>
                                 </tr>
                             </thead>
@@ -365,8 +358,8 @@ export default function SharePage(): JSX.Element {
                                     return (
                                         <React.Fragment key={r.user_id}>
                                             <tr data-alt="table-row" className="hover:bg-white/5">
-                                                <td className="px-4 py-3 text-sm text-white w-48">{r.user_name}</td>
-                                                <td className="px-4 py-3 text-sm text-white/80 w-56 whitespace-nowrap">{formatLocalTime(r.created_at * 1000)}</td>
+                                                <td className="px-4 py-3 text-sm text-white sm:w-48">{r.user_name}</td>
+                                                <td className="px-4 py-3 text-sm text-white/80 whitespace-nowrap sm:w-56">{formatLocalTime(r.created_at * 1000)}</td>
                                                 <td className="px-4 py-3 text-sm text-white/90">
                                                     <div data-alt="reward-cell" className="flex items-center justify-between gap-3">
                                                         <div data-alt="reward-summary" className="flex-1 truncate text-[#FFCC6D]">
@@ -387,8 +380,8 @@ export default function SharePage(): JSX.Element {
                                             </tr>
                                             {isExpanded && (
                                                 <tr data-alt="row-details">
-                                                    <td className="px-4 py-0 w-48" />
-                                                    <td className="px-4 py-0 w-56" />
+                                                    <td className="px-4 py-0 sm:w-48" />
+                                                    <td className="px-4 py-0 sm:w-56" />
                                                     <td className="px-4 py-3 bg-white/5">
                                                         <div data-alt="details-wrapper" className="overflow-x-auto">
                                                             <table data-alt="reward-subtable" className="min-w-[320px] text-sm">
diff --git a/app/types/global.d.ts b/app/types/global.d.ts
index 17e1311..a847f46 100644
--- a/app/types/global.d.ts
+++ b/app/types/global.d.ts
@@ -12,6 +12,10 @@ declare global {
       loading: (message: string) => ReturnType<typeof toast.promise>;
       dismiss: () => void;
     };
+    // Google Analytics 类型声明
+    gtag: (...args: any[]) => void;
+    dataLayer: any[];
+    
     // Google GSI API类型声明
     google?: {
       accounts: {
diff --git a/app/usage/page.tsx b/app/usage/page.tsx
index ef59718..c01fcf7 100644
--- a/app/usage/page.tsx
+++ b/app/usage/page.tsx
@@ -5,7 +5,7 @@ import UsageView from "@/components/pages/usage-view";
 
 const UsagePage: React.FC = () => {
     return (
-        <div data-alt="usage-page" className="h-screen overflow-auto px-4 py-6">
+        <div data-alt="usage-page" className="mobile-viewport-height min-h-screen mobile-safe-bottom overflow-hidden px-4 py-6 pb-[max(1rem,env(safe-area-inset-bottom))]">
             <UsageView />
         </div>
     );
diff --git a/components/ChatInputBox/ChatInputBox.tsx b/components/ChatInputBox/ChatInputBox.tsx
index dd530cd..4d16c53 100644
--- a/components/ChatInputBox/ChatInputBox.tsx
+++ b/components/ChatInputBox/ChatInputBox.tsx
@@ -244,6 +244,11 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
     }
   }, []);
 
+  // H5 文本输入框聚焦动画控制
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [persistedMobileMaxHeight, setPersistedMobileMaxHeight] = useState<number | null>(null);
+
   const handleCreateVideo = async () => {
     if (isCreating) return; // 如果正在创建中，直接返回
     
@@ -342,27 +347,77 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
             <div data-alt="chat-input-box" className="flex flex-col w-full">
               {/* 第一行：输入框 */}
               <div className="video-prompt-editor mb-3 relative flex flex-col gap-3 flex-1 pr-10">
-                {/* 文本输入框 - 改为textarea */}
-                <textarea
-                  value={script}
-                  onChange={(e) => setScript(e.target.value)}
-                  placeholder="Describe the story you want to make..."
-                  className="w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
-                  style={
-                    noData
-                      ? {
-                          minHeight: "128px",
-                        }
-                      : {}
+              {/* 文本输入框 - 改为textarea */}
+              <textarea
+                data-alt="story-input"
+                ref={textareaRef}
+                value={script}
+                onChange={(e) => setScript(e.target.value)}
+                placeholder="Describe the story you want to make..."
+                className={`w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none overflow-y-auto transition-all duration-300 ease-in-out ${isMobile ? '' : 'max-h-[120px]'}`}
+                style={{
+                  minHeight: noData ? "128px" : (isMobile ? (isInputFocused ? "96px" : "48px") : "unset"),
+                  maxHeight: isMobile ? (isInputFocused ? "200px" : (persistedMobileMaxHeight ? `${persistedMobileMaxHeight}px` : "120px")) : undefined,
+                }}
+                rows={1}
+                onFocus={() => {
+                  if (!isMobile) return;
+                  setIsInputFocused(true);
+                  const el = textareaRef.current;
+                  if (el) {
+                    const limit = 200;
+                    // 以当前高度为起点，过渡到目标高度
+                    const start = `${el.getBoundingClientRect().height}px`;
+                    const end = `${Math.min(Math.max(el.scrollHeight, 96), limit)}px`;
+                    el.style.height = start;
+                    void el.offsetHeight;
+                    el.style.height = end;
                   }
-                  rows={1}
-                  onInput={(e) => {
-                    const target = e.target as HTMLTextAreaElement;
-                    target.style.height = "auto";
-                    target.style.height =
-                      Math.min(target.scrollHeight, 120) + "px";
-                  }}
-                />
+                }}
+                onBlur={() => {
+                  if (!isMobile) return;
+                  setIsInputFocused(false);
+                  const el = textareaRef.current;
+                  if (el) {
+                    const baseLimit = 120;
+                    const contentHeight = el.scrollHeight;
+                    const currentHeight = el.getBoundingClientRect().height;
+                    // 若内容高度已超过基础高度，则保持较大高度，不回落
+                    if (contentHeight > baseLimit || currentHeight > baseLimit) {
+                      setPersistedMobileMaxHeight(Math.min(contentHeight, 200));
+                      el.style.height = `${Math.min(contentHeight, 200)}px`;
+                    } else {
+                      const start = `${currentHeight}px`;
+                      const end = `${Math.min(contentHeight, baseLimit)}px`;
+                      el.style.height = start;
+                      void el.offsetHeight;
+                      el.style.height = end;
+                      setPersistedMobileMaxHeight(null);
+                    }
+                  }
+                }}
+                onInput={(e) => {
+                  const target = e.target as HTMLTextAreaElement;
+                  const limit = isMobile && isInputFocused ? 200 : (persistedMobileMaxHeight ?? 120);
+                  target.style.height = "auto";
+                  target.style.height = Math.min(target.scrollHeight, limit) + "px";
+                }}
+                onTransitionEnd={() => {
+                  // 过渡结束后清理高度，避免下次动画受限
+                  if (!isMobile) return;
+                  if (!isInputFocused) {
+                    const el = textareaRef.current;
+                    if (el) {
+                      // 若已记录持久高度则保持，不清理；否则清理
+                      if (persistedMobileMaxHeight) {
+                        el.style.height = `${persistedMobileMaxHeight}px`;
+                      } else {
+                        el.style.height = "";
+                      }
+                    }
+                  }
+                }}
+              />
               </div>
 
               {/* 第二行：功能按钮和Action按钮 - 同一行 */}
diff --git a/components/SmartChatBox/SmartChatBox.tsx b/components/SmartChatBox/SmartChatBox.tsx
index d2e38db..ac48e8d 100644
--- a/components/SmartChatBox/SmartChatBox.tsx
+++ b/components/SmartChatBox/SmartChatBox.tsx
@@ -169,7 +169,10 @@ export default function SmartChatBox({
   }, [messages]);
 
   return (
-    <div className={`${isMobile ? 'z-[49] relative' : 'h-full'} w-full text-gray-100 flex flex-col`} data-alt="smart-chat-box">
+    <div className={`${isMobile ? '' : 'h-full'} w-full text-gray-100 flex flex-col backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl relative`} data-alt="smart-chat-box"
+    style={{
+      maxHeight: isMobile ? 'calc(100vh - 5.5rem)' : '',
+    }}>
       {/* Header */}
       <div className={`px-4 py-3 border-b border-white/10 flex items-center justify-between ${isMobile ? 'sticky top-0 bg-[#141414] z-[1]' : ''}`} data-alt="chat-header">
         <div className="font-semibold flex items-center gap-2">
diff --git a/components/auth/auth-guard.tsx b/components/auth/auth-guard.tsx
index bd6ada4..4e12111 100644
--- a/components/auth/auth-guard.tsx
+++ b/components/auth/auth-guard.tsx
@@ -2,10 +2,11 @@
 
 import { useEffect, useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { clearAuthData, getUserProfile, isAuthenticated } from '@/lib/auth';
+import { clearAuthData, getUserProfile, isAuthenticated, getCurrentUser } from '@/lib/auth';
 import GlobalLoad from '../common/GlobalLoad';
 import { message } from 'antd';
 import { errorHandle } from '@/api/errorHandle';
+import { setUserProperties } from '@/utils/analytics';
 
 interface AuthGuardProps {
   children: React.ReactNode;
@@ -21,6 +22,36 @@ export default function AuthGuard({ children }: AuthGuardProps) {
   const publicPaths = ['/','/login', '/signup', '/forgot-password', '/Terms', '/Privacy', '/activate', '/users/oauth/callback'];
   const isPublicPath = publicPaths.includes(pathname);
 
+  /**
+   * 设置用户GA属性
+   * 基于实际userData结构: {"id":"8f61686734d340d0820f0fe980368629","userId":"8f61686734d340d0820f0fe980368629","username":"Orange","email":"moviflow68@test.com","isActive":1,"authType":"LOCAL","lastLogin":"2025-09-28T16:28:51.870731"}
+   */
+  const setUserAnalyticsProperties = (userData: any) => {
+    if (!userData || !userData.id) {
+      return;
+    }
+
+    try {
+      setUserProperties(userData.id, {
+        // 基础用户信息
+        user_id: userData.id,
+        email: userData.email,
+        username: userData.username,
+        // 认证信息
+        auth_type: userData.authType || 'LOCAL',
+        is_active: userData.isActive || 1,
+        // 登录信息
+        last_login: userData.lastLogin || new Date().toISOString(),
+        // 页面信息
+        current_page: pathname,
+        // 用户状态
+        user_status: userData.isActive === 1 ? 'active' : 'inactive',        
+        // 会话信息
+        session_id: `${userData.id}_${Date.now()}`
+      });
+    } catch (error) {}
+  };
+
   useEffect(() => {
     const verifyAuth = async () => {
       // 如果是公共页面，不需要鉴权
@@ -41,6 +72,9 @@ export default function AuthGuard({ children }: AuthGuardProps) {
         const user = await getUserProfile();
         if (user) {
           setIsAuthorized(true);
+          
+          // 设置用户GA属性（页面首次加载时）
+          setUserAnalyticsProperties(user);
         } else {
           router.push('/login');
         }
@@ -49,8 +83,16 @@ export default function AuthGuard({ children }: AuthGuardProps) {
         if(errorCode.message == 401||errorCode.message == 502){
           router.push('/login');
           clearAuthData();
+        } else {
+          // 如果API调用失败但不是认证错误，尝试使用本地存储的用户数据
+          const localUser = getCurrentUser();
+          if (localUser && localUser.id) {
+            console.log('API调用失败，使用本地用户数据设置GA属性');
+            setUserAnalyticsProperties(localUser);
+            setIsAuthorized(true);
+          }
         }
-          errorHandle(errorCode.message)
+        errorHandle(errorCode.message)
       } finally {
         setIsLoading(false);
       }
diff --git a/components/common/Footer/index.tsx b/components/common/Footer/index.tsx
new file mode 100644
index 0000000..7702ea2
--- /dev/null
+++ b/components/common/Footer/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+/**
+ * 公共页脚组件
+ * 提供统一的版权信息和页脚样式
+ */
+export interface FooterProps {
+    /** 版权年份，默认为当前年份 */
+    year?: number;
+    /** 公司名称，默认为 "MovieFlow" */
+    companyName?: string;
+    /** 自定义版权文本 */
+    customText?: string;
+    /** 额外的CSS类名 */
+    className?: string;
+    /** 是否显示邮箱链接 */
+    showEmailLink?: boolean;
+    /** 邮箱地址，默认为 "support@movieflow.ai" */
+    emailAddress?: string;
+}
+
+/**
+ * 公共页脚组件
+ * @param props - 页脚组件属性
+ * @returns JSX元素
+ */
+const Footer: React.FC<FooterProps> = ({
+    year = new Date().getFullYear(),
+    companyName = 'MovieFlow',
+    customText,
+    className = '',
+    showEmailLink = false,
+    emailAddress = 'support@movieflow.ai'
+}) => {
+    const copyrightText = customText || `© ${year} ${companyName}. All rights reserved.`;
+
+    return (
+        <div 
+            data-alt="footer-component"
+            className={`home-module6 flex justify-center items-center w-full h-min text-white/50 text-lg bg-black snap-start px-4 ${className}`}
+        >
+            {/* 左侧版权信息 */}
+            <div className="text-center">
+                {copyrightText}
+            </div>
+            
+            {/* 右侧邮箱链接 */}
+            {showEmailLink && (
+                <div className="flex-shrink-0 ml-4">
+                    <a 
+                        href={`mailto:${emailAddress}`}
+                        className="text-custom-blue hover:text-white/80 transition-colors duration-200 underline decoration-white/30 hover:decoration-white/60"
+                        data-alt="support-email-link"
+                    >
+                        Contact Us
+                    </a>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Footer;
diff --git a/components/common/Footer/types.ts b/components/common/Footer/types.ts
new file mode 100644
index 0000000..9552d7d
--- /dev/null
+++ b/components/common/Footer/types.ts
@@ -0,0 +1,18 @@
+/**
+ * 页脚组件相关的类型定义
+ */
+
+export interface FooterProps {
+    /** 版权年份，默认为当前年份 */
+    year?: number;
+    /** 公司名称，默认为 "MovieFlow" */
+    companyName?: string;
+    /** 自定义版权文本 */
+    customText?: string;
+    /** 额外的CSS类名 */
+    className?: string;
+    /** 是否显示邮箱链接 */
+    showEmailLink?: boolean;
+    /** 邮箱地址，默认为 "support@movieflow.ai" */
+    emailAddress?: string;
+}
diff --git a/components/layout/H5TopBar.css b/components/layout/H5TopBar.css
new file mode 100644
index 0000000..5a67a50
--- /dev/null
+++ b/components/layout/H5TopBar.css
@@ -0,0 +1,42 @@
+.backdrop_backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 58;
+  display: grid;
+  height: 4rem;
+  pointer-events: none;
+}
+.backdrop_backdrop:after {
+  content: "";
+  background: linear-gradient(180deg, rgba(0, 0, 0, .2) 60%, transparent);
+}
+.backdrop_backdrop:after, .backdrop_backdrop .backdrop_blur {
+  grid-area: 1 / 1;
+  transition: opacity .2s linear;
+}
+.backdrop_backdrop>.backdrop_blur:first-child {
+  backdrop-filter: blur(1px);
+  mask: linear-gradient(0deg, transparent, #000 8%);
+}
+.backdrop_backdrop>.backdrop_blur:nth-child(2) {
+  backdrop-filter: blur(4px);
+  mask: linear-gradient(0deg, transparent 8%, #000 16%);
+}
+.backdrop_backdrop>.backdrop_blur:nth-child(3) {
+  backdrop-filter: blur(8px);
+  mask: linear-gradient(0deg, transparent 16%, #000 24%);
+}
+.backdrop_backdrop>.backdrop_blur:nth-child(4) {
+  backdrop-filter: blur(16px);
+  mask: linear-gradient(0deg, transparent 24%, #000 36%);
+}
+.backdrop_backdrop>.backdrop_blur:nth-child(5) {
+  backdrop-filter: blur(24px);
+  mask: linear-gradient(0deg, transparent 36%, #000 48%);
+}
+.backdrop_backdrop>.backdrop_blur:nth-child(6) {
+  backdrop-filter: blur(32px);
+  mask: linear-gradient(0deg, transparent 48%, #000 60%);
+}
\ No newline at end of file
diff --git a/components/layout/H5TopBar.tsx b/components/layout/H5TopBar.tsx
new file mode 100644
index 0000000..f3057cb
--- /dev/null
+++ b/components/layout/H5TopBar.tsx
@@ -0,0 +1,493 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { Menu, Rocket, LogOut, User as UserIcon, X, Info, CalendarDays } from 'lucide-react';
+import { Drawer } from 'antd';
+import { fetchTabsByCode, HomeTabItem } from '@/api/serversetting';
+import { getSigninStatus } from '@/api/signin';
+import { getCurrentUser, isAuthenticated, logoutUser } from '@/lib/auth';
+import { getUserSubscriptionInfo, createPortalSession, redirectToPortal } from '@/lib/stripe';
+import { GradientText } from '@/components/ui/gradient-text';
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
+import SigninBox from './signin-box';
+import { navigationItems } from './type';
+import './H5TopBar.css';
+
+interface H5TopBarProps {
+    /** 点击首页 tab 时的回调，用于页面内滚动 */
+    onSelectHomeTab?: (key: string) => void;
+}
+
+interface CurrentUserMinimal {
+    id?: string;
+    name?: string;
+    email?: string;
+    username?: string;
+}
+
+/**
+ * 移动端顶栏（抽屉式菜单）
+ * - 未登录：左 LOGO → '/'，右侧 Signup + 菜单；抽屉显示 homeTabs 与 登录/注册
+ * - 已登录：左 LOGO → '/movies'，右侧 升级图标 + 菜单；抽屉显示 用户卡片、快捷充值、入口与登出
+ */
+export default function H5TopBar({ onSelectHomeTab }: H5TopBarProps) {
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const [isLogin, setIsLogin] = useState<boolean>(false);
+    const [user, setUser] = useState<CurrentUserMinimal | null>(null);
+    const [credits, setCredits] = useState<number>(0);
+    const [isBuyingTokens, setIsBuyingTokens] = useState<boolean>(false);
+    const [homeTabs, setHomeTabs] = useState<HomeTabItem[]>([]);
+    const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+    const [customAmount, setCustomAmount] = useState<string>("");
+    const [isSigninModalOpen, setIsSigninModalOpen] = useState(false);
+    const [isManagingSubscription, setIsManagingSubscription] = useState(false);
+    const [subscriptionStatus, setSubscriptionStatus] = useState<string>("");
+    const [planName, setPlanName] = useState<string>("");
+    const [needsSigninBadge, setNeedsSigninBadge] = useState<boolean>(false);
+    const [isGlassActive, setIsGlassActive] = useState<boolean>(false);
+
+    const isHome = useMemo(() => pathname === '/', [pathname]);
+
+    useEffect(() => {
+        setIsLogin(isAuthenticated());
+        const u = getCurrentUser();
+        setUser(u || null);
+    }, []);
+
+    useEffect(() => {
+        if (!user?.id) return;
+        let ignore = false;
+        const load = async () => {
+            try {
+                const res = await getUserSubscriptionInfo(String(user.id));
+                if (!ignore && res?.data?.credits !== undefined) {
+                    setCredits(res.data.credits);
+                    if (typeof res.data.subscription_status === 'string') {
+                        setSubscriptionStatus(res.data.subscription_status);
+                    }
+                    if (typeof res.data.plan_name === 'string') {
+                        setPlanName(res.data.plan_name);
+                    }
+                }
+            } catch {}
+        };
+        load();
+        return () => {
+            ignore = true;
+        };
+    }, [user?.id]);
+
+    // 仅首页时加载 homeTabs，用于未登录抽屉导航
+    useEffect(() => {
+        if (!isHome) return;
+        let mounted = true;
+        const loadTabs = async () => {
+            try {
+                const tabs = await fetchTabsByCode('homeTab');
+                if (mounted && Array.isArray(tabs)) setHomeTabs(tabs);
+            } catch {}
+        };
+        loadTabs();
+        return () => {
+            mounted = false;
+        };
+    }, [isHome]);
+
+    // 获取今日签到状态，未签到则显示红点
+    useEffect(() => {
+        const loadSignin = async () => {
+            if (!isLogin) return;
+            try {
+                const data: any = await getSigninStatus();
+                const hasSignin = !!data?.data?.has_signin;
+                setNeedsSigninBadge(!hasSignin);
+            } catch {}
+        };
+        loadSignin();
+    }, [isLogin]);
+
+    // 首页滚动 30vh 后开启玻璃质感背景
+    useEffect(() => {
+        if (!isHome) return;
+        const computeAndSet = (evt?: Event) => {
+            const threshold = Math.max(0, window.innerHeight * 0.3);
+            const winY = window.scrollY || window.pageYOffset || 0;
+            const docElY = (document.documentElement && document.documentElement.scrollTop) || 0;
+            const scrollingElY = (document.scrollingElement as any)?.scrollTop || 0;
+            const bodyY = (document.body && (document.body as any).scrollTop) || 0;
+            let currentY = Math.max(winY, docElY, scrollingElY, bodyY);
+            const target = evt?.target as any;
+            if (target && typeof target.scrollTop === 'number') {
+                currentY = Math.max(currentY, target.scrollTop);
+            }
+            const nextActive = currentY >= threshold;
+            setIsGlassActive(nextActive);
+        };
+        // 初始计算一次
+        computeAndSet();
+        // 监听 window 与 document（捕获阶段，捕获内部滚动容器事件）
+        window.addEventListener('scroll', computeAndSet, { passive: true });
+        document.addEventListener('scroll', computeAndSet, { passive: true, capture: true });
+        return () => {
+            window.removeEventListener('scroll', computeAndSet);
+            document.removeEventListener('scroll', computeAndSet, { capture: true } as any);
+        };
+    }, [isHome]);
+
+    // 离开首页时，移除玻璃背景
+    useEffect(() => {
+        if (!isHome) {
+            setIsGlassActive(false);
+        } else {
+        }
+    }, [isHome]);
+
+    const handleLogoClick = () => {
+        if (isLogin) {
+            router.push('/movies');
+        } else {
+            router.push('/');
+        }
+    };
+
+    const handleUpgrade = () => {
+        router.push('/pricing');
+    };
+
+    const handleBuyTokens = async (amount: number) => {
+        if (!user?.id) return;
+        setIsBuyingTokens(true);
+        try {
+            const url = `/pay-redirect?type=token&amount=${encodeURIComponent(amount)}&pkg=basic`;
+            window.open(url, '_blank');
+            window.postMessage({ type: 'waiting-payment', paymentType: 'subscription' }, '*');
+        } finally {
+            setIsBuyingTokens(false);
+        }
+    };
+
+    const handleCustomAmountBuy = async () => {
+        const amount = parseInt(customAmount);
+        if (isNaN(amount) || amount <= 0) return;
+        await handleBuyTokens(amount);
+        setCustomAmount("");
+    };
+
+    const handleSignin = () => {
+        setIsSigninModalOpen(true);
+    };
+
+    const handleManageSubscription = async () => {
+        if (!user?.id) return;
+        setIsManagingSubscription(true);
+        try {
+            const response = await createPortalSession({
+                user_id: String(user.id),
+                return_url: window.location.origin + '/dashboard',
+            });
+            if (response.successful && response.data?.portal_url) {
+                redirectToPortal(response.data.portal_url);
+            }
+        } finally {
+            setIsManagingSubscription(false);
+        }
+    };
+
+    return (
+      <>
+        <span className={`backdrop_backdrop ${isHome && isGlassActive ? 'grid' : 'hidden'}`}>
+          <span className='backdrop_blur'></span>
+          <span className='backdrop_blur'></span>
+          <span className='backdrop_blur'></span>
+          <span className='backdrop_blur'></span>
+          <span className='backdrop_blur'></span>
+          <span className='backdrop_blur'></span>
+        </span>
+        <div data-alt="h5-topbar" className={`fixed left-0 right-0 top-0 h-16 header z-[60] ${drawerOpen ? 'bg-[#0b0b0b] pointer-events-auto' : ''}` }>
+            <div data-alt="bar" className="h-14 px-3 flex items-center justify-between">
+                {/* 左侧 LOGO */}
+                <div
+                  className={`flex items-center cursor-pointer space-x-1 link-logo roll event-on`}
+                  onClick={handleLogoClick}
+                >
+                  <h1 className="logo text-2xl font-bold">
+                    <GradientText
+                      text="MovieFlow"
+                      startPercentage={30}
+                      endPercentage={70}
+                    />
+                  </h1>
+                  {/* beta标签 */}
+                  <div className="relative transform translate-y-[-1px]">
+                    <span className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold tracking-wider text-[rgb(212 202 202)] border border-[rgba(106,244,249,0.2)] rounded-full shadow-[0_0_10px_rgba(106,244,249,0.1)]">
+                      Beta
+                    </span>
+                  </div>
+                </div>
+
+                {/* 右侧操作区 */}
+                <div data-alt="actions" className="flex items-center gap-2">
+                  {
+                    !drawerOpen && (
+                      <>
+                        {isLogin ? (
+                          <button
+                              data-alt="upgrade-icon-button"
+                              className="h-9 w-9 rounded-full flex items-center justify-center text-gray-800 bg-gray-100 hover:bg-gray-200 border border-black/10 dark:text-white dark:bg-white/10 dark:hover:bg-white/20 dark:border-white/20"
+                              onClick={handleUpgrade}
+                              aria-label="Upgrade"
+                          >
+                              <Rocket className="h-4 w-4" />
+                          </button>
+                        ) : (
+                          <button
+                              data-alt="signup-button"
+                              className="px-3 h-9 rounded-full text-sm bg-white text-black hover:bg-white/90 border border-black/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 dark:border-white/20"
+                              onClick={() => router.push('/signup')}
+                          >
+                              Sign up
+                          </button>
+                        )}
+                      </>
+                    )
+                  }
+                    
+
+                    {/* 菜单抽屉（antd Drawer） */}
+                    <button
+                        data-alt="menu-trigger"
+                        className="relative h-9 w-9 rounded-full flex items-center justify-center bg-gray-100 hover:bg-gray-200 text-gray-800 border border-black/10 dark:bg-white/10 dark:hover:bg-white/20 dark:text-white dark:border-white/20"
+                        aria-expanded={drawerOpen}
+                        onClick={() => setDrawerOpen((v) => !v)}
+                    >
+                        {
+                          drawerOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />
+                        }
+                        {needsSigninBadge && !drawerOpen && (
+                          <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-red-500 border border-white dark:border-[#0b0b0b]"></span>
+                        )}
+                    </button>
+
+                    <Drawer
+                        placement="top"
+                        open={drawerOpen}
+                        onClose={() => setDrawerOpen(false)}
+                        title={null}
+                        closable
+                        height={undefined}
+                        bodyStyle={{ padding: 0 }}
+                        maskClosable
+                        // 64px 顶栏高度 + 8px 安全间距
+                        maskStyle={{ position: 'absolute', top: '3.5rem', height: 'calc(100dvh - 3.5rem)', backgroundColor: 'transparent' }}
+                        styles={{
+                          content: { position: 'absolute', top: '3.5rem', height: isHome ? 'auto' : 'calc(100dvh - 3.5rem)' },
+                          body: { padding: 0 },
+                          header: { display: 'none' },
+                          mask: { position: 'absolute', top: '3.5rem', height: 'calc(100dvh - 3.5rem)', backgroundColor: 'transparent' },
+                        }}
+                        className="[&_.ant-drawer-content]:bg-white [&_.ant-drawer-content]:text-black dark:[&_.ant-drawer-content]:bg-[#0b0b0b] dark:[&_.ant-drawer-content]:text-white dark:[&_.ant-drawer-body]:bg-[#0b0b0b] dark:[&_.ant-drawer-body]:text-white"
+                    >
+                            <div data-alt="drawer-container" className="h-full flex flex-col">
+                                {/* 用户信息/未登录头部 */}
+                                {isLogin ? (
+                                    <div data-alt="user-header" className="p-4 border-b border-t border-black/10 dark:border-white/10 flex items-center gap-3">
+                                        <div className="h-10 w-10 rounded-full bg-[#C73BFF] text-white flex items-center justify-center">
+                                            {(user?.username || user?.name || 'MF').slice(0, 1)}
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <div className="text-sm font-medium truncate">{user?.name || user?.username || 'User'}</div>
+                                            <div className="text-xs text-black/60 dark:text-white/60 truncate">{user?.email}</div>
+                                        </div>
+                                    </div>
+                                ) : (
+                                    <></>
+                                )}
+
+                                {/* 内容区 */}
+                                <div data-alt="drawer-content" className="flex-1 overflow-y-auto">
+                                    {isLogin ? (
+                                        <div className="p-4 space-y-4">
+                                            {/* 积分中心 */}
+                                            <div data-alt="wallet-card" className="rounded-xl border border-black/10 dark:border-white/10 p-4 bg-white dark:bg-white/5">
+                                                <div className="flex items-center justify-between">
+                                                    <div>
+                                                        <div className="flex items-center gap-2">
+                                                          {/* 签到 */}
+                                                          <button
+                                                            type="button"
+                                                            onClick={handleSignin}
+                                                            className="w-9 h-9 p-2 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors relative"
+                                                            data-alt="share-entry-button"
+                                                            title="Share"
+                                                          >
+                                                            <span className={`inline-block ${needsSigninBadge ? 'motion-safe:animate-wiggle' : ''}`}>
+                                                              <CalendarDays className="h-5 w-5 text-white" />
+                                                            </span>
+                                                            {needsSigninBadge && (
+                                                              <span className="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 border border-white dark:border-[#0b0b0b]"></span>
+                                                            )}
+                                                          </button>
+                                                          {/* 积分 */}
+                                                          <div className="text-2xl font-semibold mt-1">{credits} <span className="text-xs text-black/60 dark:text-white/60">credits</span></div>
+                                                        </div>
+                                                    </div>
+                                                    <button
+                                                        className="relative h-8 w-8 rounded-full bg-white/10 dark:bg-white/10 flex items-center justify-center hover:bg-white/20"
+                                                        onClick={() => router.push("/usage")}
+                                                        title="Usage"
+                                                    >
+                                                        <Info className="h-4 w-4" />
+                                                    </button>
+                                                </div>
+
+                                                {/* 快捷充值 */}
+                                                <div className="mt-3 flex flex-wrap gap-2">
+                                                    <button className="px-2 py-1 text-xs rounded bg-black text-white" disabled={isBuyingTokens} onClick={() => handleBuyTokens(100)}>+100 ($1)</button>
+                                                    <button className="px-2 py-1 text-xs rounded bg-black text-white" disabled={isBuyingTokens} onClick={() => handleBuyTokens(500)}>+500 ($5)</button>
+                                                    <button className="px-2 py-1 text-xs rounded bg-black text-white" disabled={isBuyingTokens} onClick={() => handleBuyTokens(1000)}>+1000 ($10)</button>
+                                                </div>
+
+                                                {/* 自定义充值 */}
+                                                <div className="mt-2 flex items-center gap-2">
+                                                    <input
+                                                        type="number"
+                                                        value={customAmount}
+                                                        onChange={(e) => setCustomAmount(e.target.value)}
+                                                        placeholder="Custom amount"
+                                                        className="w-[120px] h-9 px-2 text-sm bg-white/10 text-black dark:text-white placeholder-black/40 dark:placeholder-white/60 border border-black/20 dark:border-white/20 rounded focus:outline-none"
+                                                        min={1}
+                                                    />
+                                                    <button
+                                                        className="px-3 h-9 rounded bg-black text-white text-sm disabled:opacity-50"
+                                                        disabled={!customAmount || parseInt(customAmount) <= 0 || isBuyingTokens}
+                                                        onClick={handleCustomAmountBuy}
+                                                    >
+                                                        Buy
+                                                    </button>
+                                                </div>
+                                            </div>
+
+                        
+                                            {/* 菜单目录 */}
+                                            <div data-alt="menu-links" className="rounded-xl border border-black/10 dark:border-white/10 divide-y divide-black/10 dark:divide-white/10 overflow-hidden">
+                                                {navigationItems.map((group) => (
+                                                  group.items.map((nav) => {
+                                                    const isActive = pathname === nav.href || pathname.startsWith(nav.href + '/');
+                                                    return (
+                                                      <button
+                                                        key={nav.href}
+                                                        data-alt={`link-${nav.name.toLowerCase()}`}
+                                                        aria-current={isActive ? 'page' : undefined}
+                                                        className={`w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-white/10 ${isActive ? 'bg-gray-100 dark:bg-white/10' : ''}`}
+                                                        onClick={() => router.push(nav.href)}
+                                                      >
+                                                        <nav.icon className="h-4 w-4" />
+                                                        <span>{nav.name}</span>
+                                                      </button>
+                                                    );
+                                                  })
+                                                ))}
+                                            </div>
+
+                                            {/* 其他功能 */}
+                                            <div className="space-y-2">
+                                                <button data-alt="upgrade-button" className="w-full h-10 rounded-full border border-black/20 dark:border-white/20 hover:bg-gray-50 dark:hover:bg-white/10" onClick={handleUpgrade}>Upgrade</button>
+                                                {planName !== 'none' && subscriptionStatus !== 'INACTIVE' && (
+                                                    <button data-alt="manage-button" className="w-full h-10 rounded-full border border-black/20 dark:border-white/20 hover:bg-gray-50 dark:hover:bg-white/10" onClick={handleManageSubscription} disabled={isManagingSubscription}>Manage</button>
+                                                )}
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        <div className="p-4 space-y-4 pt-0">
+                                            {isHome && homeTabs.length > 0 && (
+                                                <div data-alt="home-tabs" className="rounded-xl border border-black/10 dark:border-white/10 overflow-hidden">
+                                                    {homeTabs.map((tab) => (
+                                                        <button
+                                                            key={tab.title}
+                                                            data-alt={`home-tab-${tab.title.toLowerCase()}`}
+                                                            className="w-full text-left px-4 py-3 border-b border-black/10 dark:border-white/10 last:border-b-0 hover:bg-gray-50 dark:hover:bg-white/10"
+                                                            onClick={() => {
+                                                                if (onSelectHomeTab) onSelectHomeTab(tab.title.toLowerCase() as any);
+                                                                setDrawerOpen(false);
+                                                            }}
+                                                        >
+                                                            {tab.title}
+                                                        </button>
+                                                    ))}
+                                                </div>
+                                            )}
+                                            <div className="flex gap-2">
+                                                <button
+                                                    data-alt="login-button"
+                                                    className="flex-1 h-10 rounded-full border border-black/20 dark:border-white/20"
+                                                    onClick={() => router.push('/login')}
+                                                >
+                                                    Log in
+                                                </button>
+                                                <button
+                                                    data-alt="signup-button-secondary"
+                                                    className="flex-1 h-10 rounded-full bg-black text-white hover:bg-black/90"
+                                                    onClick={() => router.push('/signup')}
+                                                >
+                                                    Sign up
+                                                </button>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* 底部操作 */}
+                                {isLogin && (
+                                    <div data-alt="drawer-footer" className="p-4 border-t border-black/10 dark:border-white/10">
+                                        <button
+                                            data-alt="logout-button"
+                                            className="w-full h-10 rounded-full border border-black/20 dark:border-white/20 flex items-center justify-center gap-2"
+                                            onClick={() => logoutUser()}
+                                        >
+                                            <LogOut className="h-4 w-4" />
+                                            Logout
+                                        </button>
+                                    </div>
+                                )}
+                            </div>
+                    </Drawer>
+                    {/* Sign-in Modal */}
+                    <Dialog open={isSigninModalOpen} onOpenChange={(open) => {
+                      setIsSigninModalOpen(open);
+                      if (!open) {
+                        // 刷新积分
+                        if (user?.id) { getUserSubscriptionInfo(String(user.id)).then((res:any)=>{ if(res?.data?.credits!==undefined){ setCredits(res.data.credits) } }).catch(()=>{}); }
+                        // 关闭签到弹窗后，重新检查红点
+                        if (isLogin) { getSigninStatus().then((d:any)=> setNeedsSigninBadge(!d?.data?.has_signin)).catch(()=>{}); }
+                      }
+                    }}>
+                        <DialogContent 
+                          className="max-w-md mx-auto bg-white/95 dark:bg-gray-900/95 backdrop-blur-xl border-0 shadow-2xl"
+                          data-alt="signin-modal"
+                        >
+                          <DialogTitle></DialogTitle>
+                          <SigninBox onSuccess={async () => {
+                            try {
+                              if (user?.id) {
+                                const res = await getUserSubscriptionInfo(String(user.id));
+                                if (res?.data?.credits !== undefined) {
+                                  setCredits(res.data.credits);
+                                }
+                              }
+                            } catch {}
+                            // 成功签到后去除红点
+                            setNeedsSigninBadge(false);
+                          }} />
+                        </DialogContent>
+                    </Dialog>
+                </div>
+            </div>
+          </div>
+      </>
+    );
+}
+
+
diff --git a/components/layout/dashboard-layout.tsx b/components/layout/dashboard-layout.tsx
index 0d77dd4..175a248 100644
--- a/components/layout/dashboard-layout.tsx
+++ b/components/layout/dashboard-layout.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Sidebar } from './sidebar';
 import { TopBar } from './top-bar';
 import { useDeviceType } from '@/hooks/useDeviceType';
+import H5TopBar from '@/components/layout/H5TopBar';
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
@@ -58,15 +59,20 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
 
   return (
     <div className="min-h-screen bg-background">
-      <TopBar collapsed={sidebarCollapsed} isDesktop={isDesktop} />
+      {isMobile || isTablet ? (
+        <H5TopBar />
+      ) : (
+        <TopBar collapsed={sidebarCollapsed} isDesktop={isDesktop} />
+      )}
       {isDesktop && <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} />}
       <div
-        className={`top-[4rem] fixed right-0 bottom-0 px-4 ${getMobileContainerClasses()}`}
+        className={`fixed right-0 bottom-0 px-4 z-[60] ${getMobileContainerClasses()}`}
         style={{
           ...getLayoutStyles(),
+          top: (isMobile || isTablet) ? '3.5rem' : '4rem',
           // 移动端使用动态高度计算
           height: (isMobile || isTablet) 
-            ? 'calc(100dvh - 4rem)' 
+            ? 'calc(100dvh - 3.5rem)' 
             : 'calc(100vh - 4rem)'
         }}
       >
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index f915590..293c687 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -1,44 +1,19 @@
 "use client";
 
-import { useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { cn } from '@/public/lib/utils';
 import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { GradientText } from '@/components/ui/gradient-text';
 import {
-  Home,
-  FolderOpen,
-  Users,
-  Type,
-  Image,
-  History,
-  ChevronLeft,
-  ChevronRight,
-  Video,
-  PanelsLeftBottom,
-  ArrowLeftToLine,
-  BookHeart,
-  PanelRightClose,
-  Gift
+  PanelRightClose
 } from 'lucide-react';
+import { navigationItems } from './type';
 
 interface SidebarProps {
   collapsed: boolean;
   onToggle: (collapsed: boolean) => void;
 }
 
-const navigationItems = [
-  {
-    title: 'Main',
-    items: [
-      { name: 'My Portfolio', href: '/movies', icon: BookHeart },
-      { name: 'Share', href: '/share', icon: Gift },
-    ],
-  }
-];
-
 export function Sidebar({ collapsed, onToggle }: SidebarProps) {
   const pathname = usePathname();
 
diff --git a/components/layout/signin-box.tsx b/components/layout/signin-box.tsx
index 004f8b7..d616a93 100644
--- a/components/layout/signin-box.tsx
+++ b/components/layout/signin-box.tsx
@@ -7,7 +7,7 @@ import { Coins, Trophy, HelpCircle } from "lucide-react"
 import { getSigninStatus, performSignin, SigninData } from "@/api/signin"
 
 
-export default function SigninPage() {
+export default function SigninPage({ onSuccess }: { onSuccess?: () => void } = {}) {
   const [signinData, setSigninData] = useState<SigninData>({
     has_signin: false,
     credits: 0
@@ -50,6 +50,8 @@ export default function SigninPage() {
       if (response.successful) {
         // Refresh status after successful signin
         await fetchSigninStatus()
+        // Notify parent to refresh credits
+        try { onSuccess && onSuccess() } catch {}
       }
     } catch (error) {
       console.error('Signin failed:', error)
diff --git a/components/layout/type.ts b/components/layout/type.ts
new file mode 100644
index 0000000..9660c8b
--- /dev/null
+++ b/components/layout/type.ts
@@ -0,0 +1,22 @@
+import { BookHeart, Gift } from "lucide-react";
+
+interface NavigationItem {
+  name: string;
+  href: string;
+  icon: any;
+}
+
+interface Navigations {
+  title: string;
+  items: NavigationItem[];
+}
+
+export const navigationItems: Navigations[] = [
+  {
+    title: 'Main',
+    items: [
+      { name: 'My Portfolio', href: '/movies', icon: BookHeart },
+      { name: 'Share', href: '/share', icon: Gift },
+    ],
+  }
+];
\ No newline at end of file
diff --git a/components/pages/create-to-video2.tsx b/components/pages/create-to-video2.tsx
index e71f762..aed75d9 100644
--- a/components/pages/create-to-video2.tsx
+++ b/components/pages/create-to-video2.tsx
@@ -8,6 +8,7 @@ import './style/create-to-video2.css';
 import { getScriptEpisodeListNew, MovieProject } from "@/api/script_episode";
 import { ChatInputBox } from '@/components/ChatInputBox/ChatInputBox';
 import cover_image1 from '@/public/assets/cover_image3.jpg';
+import cover_image2 from '@/public/assets/cover_image_shu.jpg';
 import { motion } from 'framer-motion';
 import { Tooltip, Button } from 'antd';
 import { downloadVideo, getFirstFrame } from '@/utils/tools';
@@ -309,7 +310,7 @@ export default function CreateToVideo2() {
               <div
                 className="absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat group-hover:scale-105 transition-transform duration-500"
                 style={{
-                  backgroundImage: `url(${cover_image1.src})`,
+                  backgroundImage: `url(${project.aspect_ratio === 'VIDEO_ASPECT_RATIO_PORTRAIT' ? cover_image2.src : cover_image1.src})`,
                 }}
                 data-alt="cover-image"
               />
diff --git a/components/pages/home-page2.tsx b/components/pages/home-page2.tsx
index a8e9664..6e976f5 100644
--- a/components/pages/home-page2.tsx
+++ b/components/pages/home-page2.tsx
@@ -20,8 +20,10 @@ import LazyLoad from "react-lazyload";
 import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe";
 import VideoCoverflow from "@/components/ui/VideoCoverflow";
 import { fetchTabsByCode, HomeTabItem } from "@/api/serversetting";
+import H5TopBar from "@/components/layout/H5TopBar";
 import { useCallbackModal } from "@/app/layout";
 import { useDeviceType } from "@/hooks/useDeviceType";
+import Footer from "@/components/common/Footer";
 
 /** 视频预加载系统 - 后台静默运行 */
 function useVideoPreloader() {
@@ -241,26 +243,9 @@ export function HomePage2() {
                 </button>
               ))}
             </div>
-            {/* 移动端开关移至 TopBar，保留占位对齐 */}
+            {/* 移动端交由 H5TopBar 控制 */}
             <span className="md:hidden" data-alt="mobile-menu-toggle-placeholder"></span>
           </div>
-          {/* 移动端下拉（仅三个项） */}
-          {menuOpen && (
-            <div data-alt="mobile-menu" className="md:hidden bg-black/80 backdrop-blur-md border-b border-white/10 px-4 py-2 text-white/90 text-sm">
-              <div className="grid grid-cols-1 gap-1">
-                {tabsToRender.map((tab) => (
-                  <button
-                    key={tab.title}
-                    data-alt={`m-nav-${tab.title.toLowerCase()}`}
-                    className="text-center py-2"
-                    onClick={() => scrollToSection(tab.title.toLowerCase() as any)}
-                  >
-                    {tab.title}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
         </div>
       </div>
     );
@@ -268,7 +253,8 @@ export function HomePage2() {
 
   return (
     <div className="w-full h-screen overflow-y-auto" id="home-page" ref={containerRef} style={{ paddingBottom: `2rem` }}>
-      <NavBar />
+      {/* 移动端顶部导航（抽屉式） */}
+      { isMobile ? (<H5TopBar onSelectHomeTab={(key) => scrollToSection(key as any)} />) : (<NavBar />) }
       <HomeModule1 />
       <LazyLoad once>
         <HomeModule2 />
@@ -286,7 +272,7 @@ export function HomePage2() {
         <HomeModule4 />
       </LazyLoad>
       <HomeModule5 />
-      <HomeModule6 />
+      <Footer showEmailLink={true} />
     </div>
   );
 }
@@ -312,8 +298,8 @@ function HomeModule1() {
     >
       <LazyLoad once>
         <video
-          src="https://cdn.qikongjian.com/1756549479451_ltrtoz.mp4"
-          poster="https://cdn.qikongjian.com/1756549479451_ltrtoz.mp4?vframe/jpg/offset/1"
+          src="https://cdn.qikongjian.com/videos/1759064057657_cu0po2.mp4"
+          poster="https://cdn.qikongjian.com/videos/1759064057657_cu0po2.mp4?vframe/jpg/offset/1"
           autoPlay
           loop
           muted
@@ -1616,10 +1602,3 @@ function HomeModule5() {
   );
 }
 
-function HomeModule6() {
-  return (
-    <div className="home-module6 flex justify-center items-center w-full h-min text-white/50 text-lg  bg-black snap-start">
-      © 2025 MovieFlow. All rights reserved.
-    </div>
-  );
-}
diff --git a/components/pages/login.tsx b/components/pages/login.tsx
index 1103b0a..74c7472 100644
--- a/components/pages/login.tsx
+++ b/components/pages/login.tsx
@@ -10,6 +10,7 @@ import { GradientText } from "@/components/ui/gradient-text";
 import { GoogleLoginButton } from "@/components/ui/google-login-button";
 import { Eye, EyeOff } from "lucide-react";
 import { isGoogleLoginEnabled } from "@/lib/server-config";
+import Footer from "@/components/common/Footer";
 
 export default function Login() {
   const [email, setEmail] = useState("");
@@ -314,6 +315,9 @@ export default function Login() {
           </form>
         </div>
       </div>
+      
+      {/* 页脚 */}
+      <Footer className="fixed bottom-0" showEmailLink={true} />
     </div>
   );
 }
diff --git a/components/pages/usage-view.tsx b/components/pages/usage-view.tsx
index 9865023..bb629e4 100644
--- a/components/pages/usage-view.tsx
+++ b/components/pages/usage-view.tsx
@@ -191,9 +191,10 @@ const UsageView: React.FC = () => {
     }, []);
 
     return (
-        <div data-alt="usage-view-container" className="mx-auto max-w-5xl p-6">
-            <div data-alt="header" className="mb-6 flex items-center justify-between">
-                <h2 className="text-xl font-semibold text-white">Credit Usage Details</h2>
+        <div data-alt="usage-view-container" className="mx-auto max-w-5xl h-full flex flex-col p-4 sm:p-6 pb-[max(5rem,env(safe-area-inset-bottom))]">
+            <div data-alt="top-meta" className="sticky top-0 z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 pt-2 pb-3 bg-black/60 backdrop-blur supports-[backdrop-filter]:bg-black/40">
+              <div data-alt="header" className="mb-3 flex items-center justify-between">
+                <h2 className="text-base sm:text-xl font-semibold text-white">Credit Usage Details</h2>
                 <div data-alt="period-switch" className="inline-flex rounded-lg bg-white/5 p-1">
                     {([7, 30, 90] as PeriodDays[]).map((d) => (
                         <button
@@ -202,7 +203,7 @@ const UsageView: React.FC = () => {
                             data-alt={`period-${d}`}
                             onClick={() => handleChangeDays(d)}
                             className={
-                                `px-3 py-1.5 text-sm rounded-md transition-colors ` +
+                                `px-2 py-1 text-xs sm:px-3 sm:py-1.5 sm:text-sm rounded-md transition-colors ` +
                                 (days === d
                                     ? "bg-[#C039F6] text-white"
                                     : "text-white/80 hover:bg-white/10")
@@ -212,34 +213,34 @@ const UsageView: React.FC = () => {
                         </button>
                     ))}
                 </div>
+              </div>
+              <div data-alt="meta" className="text-xs sm:text-sm text-white/70">
+                  <span data-alt="meta-period">Period: {periodLabel || "-"} days</span>
+              </div>
             </div>
 
-            <div data-alt="meta" className="mb-3 text-sm text-white/70">
-                <span data-alt="meta-period">Period: {periodLabel || "-"} days</span>
-            </div>
-
-            <div data-alt="table-wrapper" className="overflow-hidden rounded-lg border border-white/10">
-                <table data-alt="table" className="min-w-full table-fixed">
+            <div data-alt="table-wrapper" className="flex-1 min-h-0 overflow-auto rounded-lg border border-white/10">
+                <table data-alt="table" className="min-w-[32rem] sm:min-w-full table-auto">
                     <thead className="bg-white/5">
                         <tr>
-                            <th className="w-1/4 px-4 py-2 text-left text-sm font-medium text-white">Kind</th>
-                            <th className="w-1/4 px-4 py-2 text-right text-sm font-medium text-white">Credits</th>
-                            <th className="w-1/4 px-4 py-2 text-left text-sm font-medium text-white">From</th>
-                            <th className="w-1/4 px-4 py-2 text-left text-sm font-medium text-white">Date</th>
+                            <th className="px-2 py-1 text-left text-xs sm:px-4 sm:py-2 sm:text-sm font-medium text-white">Kind</th>
+                            <th className="px-2 py-1 text-left text-xs sm:px-4 sm:py-2 sm:text-sm font-medium text-white">Credits</th>
+                            <th className="px-2 py-1 text-left text-xs sm:px-4 sm:py-2 sm:text-sm font-medium text-white">From</th>
+                            <th className="px-2 py-1 text-left text-xs sm:px-4 sm:py-2 sm:text-sm font-medium text-white">Date</th>
                         </tr>
                     </thead>
                     <tbody className="divide-y divide-white/10">
                         {loading ? (
                             <tr>
-                                <td className="px-4 py-3 text-white/70" colSpan={4} data-alt="row-loading">Loading...</td>
+                                <td className="px-2 py-2 text-xs sm:px-4 sm:py-3 sm:text-sm text-white/70" colSpan={4} data-alt="row-loading">Loading...</td>
                             </tr>
                         ) : error ? (
                             <tr>
-                                <td className="px-4 py-3 text-white/70" data-alt="row-error" colSpan={4}>-</td>
+                                <td className="px-2 py-2 text-xs sm:px-4 sm:py-3 sm:text-sm text-white/70" data-alt="row-error" colSpan={4}>-</td>
                             </tr>
                         ) : items.length === 0 ? (
                             <tr>
-                                <td className="px-4 py-3 text-white/70" data-alt="row-empty" colSpan={4}>-</td>
+                                <td className="px-2 py-2 text-xs sm:px-4 sm:py-3 sm:text-sm text-white/70" data-alt="row-empty" colSpan={4}>-</td>
                             </tr>
                         ) : (
                             items.map((it, idx) => {
@@ -248,7 +249,7 @@ const UsageView: React.FC = () => {
                                 return (
                                     <React.Fragment key={key}>
                                         <tr>
-                                            <td className="px-4 py-2 text-white/90" data-alt="cell-transaction-type">
+                                            <td className="px-2 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm text-white/90" data-alt="cell-transaction-type">
                                                 <div data-alt="type-cell" className="flex items-center gap-2">
                                                     <span data-alt="type-text">{it?.transaction_type || '-'}</span>
                                                     {it?.project_info ? (
@@ -272,47 +273,47 @@ const UsageView: React.FC = () => {
                                                     ) : null}
                                                 </div>
                                             </td>
-                                            <td className={`px-4 py-2 text-right ${getAmountColorClass(it?.change_type)}`} data-alt="cell-amount">
+                                            <td className={`px-2 py-1 text-left text-xs sm:px-4 sm:py-2 sm:text-sm ${getAmountColorClass(it?.change_type)}`} data-alt="cell-amount">
                                                 {Number.isFinite(it?.amount as number)
                                                     ? `${it.change_type === 'INCREASE' ? '+' : it.change_type === 'DECREASE' ? '-' : ''}${it.amount}`
                                                     : '-'}
                                             </td>
-                                            <td className="px-4 py-2 text-white/90" data-alt="cell-source-type">
+                                            <td className="px-2 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm text-white/90" data-alt="cell-source-type">
                                                 {formatSource(it?.source_type)}
                                             </td>
-                                            <td className="px-4 py-2 text-white/90" data-alt="cell-created-at">
+                                            <td className="px-2 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm text-white/90" data-alt="cell-created-at">
                                                 {it?.created_at ? dateFormatter.format(new Date(it.created_at)) : '-'}
                                             </td>
                                         </tr>
                                         {isExpanded && it.project_info && (
                                             <tr data-alt="row-details">
-                                                <td colSpan={4} className="bg-white/5 px-4 py-3">
-                                                    <div data-alt="project-summary" className="mb-2 text-sm text-white/90">
+                                                <td colSpan={4} className="bg-white/5 px-3 py-2 sm:px-4 sm:py-3">
+                                                    <div data-alt="project-summary" className="mb-2 text-xs sm:text-sm text-white/90">
                                                         <div data-alt="project-name">Project: {it.project_info.project_name || '-'}</div>
                                                         <div data-alt="project-id" className="text-white/60">ID: {it.project_info.project_id || '-'}</div>
                                                     </div>
                                                     <div data-alt="videos-table-wrapper" className="overflow-hidden rounded-md border border-white/10">
-                                                        <table data-alt="videos-table" className="min-w-full table-fixed">
+                                                        <table data-alt="videos-table" className="min-w-[28rem] sm:min-w-full table-auto">
                                                             <tbody className="divide-y divide-white/10">
                                                                 {(it.project_info.videos || []).length === 0 ? (
                                                                     <tr>
-                                                                        <td className="px-3 py-2 text-white/70" colSpan={4} data-alt="videos-empty">-</td>
+                                                                        <td className="px-3 py-2 text-xs sm:text-sm text-white/70" colSpan={4} data-alt="videos-empty">-</td>
                                                                     </tr>
                                                                 ) : (
                                                                     it.project_info.videos.map((v, vIdx) => (
                                                                         <tr key={`${v.created_at}-${vIdx}`}>
-                                                                            <td className="w-1/4 px-3 py-2 text-white/90" data-alt="video-name">
+                                                                            <td className="px-2 py-1 text-xs sm:px-3 sm:py-2 sm:text-sm text-white/90" data-alt="video-name">
                                                                                 {v.video_name && v.video_name.trim() ? v.video_name : `video${vIdx + 1}`}
                                                                             </td>
-                                                                            <td className={`w-1/4 px-3 py-2 text-right ${getAmountColorClass(v.change_type)}`} data-alt="video-amount">
+                                                                            <td className={`px-2 py-1 text-left text-xs sm:px-3 sm:py-2 sm:text-sm ${getAmountColorClass(v.change_type)}`} data-alt="video-amount">
                                                                                 {Number.isFinite(v.amount as number)
                                                                                     ? `${v.change_type === 'INCREASE' ? '+' : v.change_type === 'DECREASE' ? '-' : ''}${v.amount}`
                                                                                     : '-'}
                                                                             </td>
-                                                                            <td className="w-1/4 px-3 py-2 text-white/90" data-alt="video-source">
+                                                                            <td className="px-2 py-1 text-xs sm:px-3 sm:py-2 sm:text-sm text-white/90" data-alt="video-source">
                                                                                 {formatSource(v.source_type)}
                                                                             </td>
-                                                                            <td className="w-1/4 px-3 py-2 text-white/90" data-alt="video-created-at">
+                                                                            <td className="px-2 py-1 text-xs sm:px-3 sm:py-2 sm:text-sm text-white/90" data-alt="video-created-at">
                                                                                 {v.created_at ? dateFormatter.format(new Date(v.created_at)) : '-'}
                                                                             </td>
                                                                         </tr>
@@ -332,7 +333,7 @@ const UsageView: React.FC = () => {
                 </table>
             </div>
 
-            <div data-alt="pagination" className="mt-4 flex items-center justify-between text-sm text-white/80">
+            <div data-alt="pagination" className="sticky bottom-[max(1rem,env(safe-area-inset-bottom))] z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 mt-4 mb-[max(4rem,env(safe-area-inset-bottom))] flex items-center justify-between text-xs sm:text-sm text-white/80 bg-black/60 backdrop-blur supports-[backdrop-filter]:bg-black/40">
                 <div data-alt="total-info">
                     Total {Number.isFinite(total) ? total : 0}
                 </div>
@@ -342,20 +343,20 @@ const UsageView: React.FC = () => {
                         onClick={handlePrev}
                         disabled={!canPrev}
                         className={
-                            "rounded-md px-3 py-1.5 transition-colors " +
+                            "rounded-md px-2 py-1 sm:px-3 sm:py-1.5 transition-colors " +
                             (canPrev ? "bg-white/10 hover:bg-white/20" : "bg-white/5 text-white/40 cursor-not-allowed")
                         }
                         data-alt="prev-page"
                     >
                         Previous
                     </button>
-                    <span data-alt="page-indicator" className="px-1 py-1.5">Page {page}</span>
+                    <span data-alt="page-indicator" className="px-1 py-1 sm:py-1.5">Page {page}</span>
                     <button
                         type="button"
                         onClick={handleNext}
                         disabled={!canNext}
                         className={
-                            "rounded-md px-3 py-1.5 transition-colors " +
+                            "rounded-md px-2 py-1 sm:px-3 sm:py-1.5 transition-colors " +
                             (canNext ? "bg-white/10 hover:bg-white/20" : "bg-white/5 text-white/40 cursor-not-allowed")
                         }
                         data-alt="next-page"
diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index 17056f7..e76dfae 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -668,9 +668,8 @@ Please process this video editing request.`;
         getContainer={false}
         autoFocus={false}
         mask={false}
-        zIndex={60}
         rootClassName="outline-none"
-        className="backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl max-h-[90vh]"
+        className="bg-transparent max-h-[100vh]"
         style={{
           backgroundColor: 'transparent',
           ...(isMobile
@@ -682,8 +681,8 @@ Please process this video editing request.`;
           body: {
             backgroundColor: 'transparent',
             padding: 0,
-            maxHeight: '100vh',
-            overflow: 'auto',
+            maxHeight: isMobile ? 'calc(100vh - 5.5rem)' : 'calc(100vh - 4rem)',
+            overflow: 'hidden',
           }
         }}
         onClose={() => setIsSmartChatBoxOpen(false)}
diff --git a/components/ui/script-modal.tsx b/components/ui/script-modal.tsx
index ce7218a..1122019 100644
--- a/components/ui/script-modal.tsx
+++ b/components/ui/script-modal.tsx
@@ -130,7 +130,7 @@ export function ScriptModal({ isOpen, onClose, currentStage = 0, roles, currentL
         <>
           {/* 背景遮罩 */}
           <motion.div
-            className="fixed inset-0 bg-black/20 backdrop-blur-sm z-50"
+            className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[9998]"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
@@ -140,7 +140,7 @@ export function ScriptModal({ isOpen, onClose, currentStage = 0, roles, currentL
           
           {/* 弹窗内容 */}
           <motion.div
-            className="fixed inset-0 z-[61] flex items-center justify-center"
+            className="fixed inset-0 z-[9999] flex items-center justify-center"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
diff --git a/hooks/useAnalytics.ts b/hooks/useAnalytics.ts
new file mode 100644
index 0000000..8215d6e
--- /dev/null
+++ b/hooks/useAnalytics.ts
@@ -0,0 +1,194 @@
+/**
+ * Google Analytics 自定义Hook
+ * 提供便捷的GA事件跟踪功能
+ */
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { trackPageView, trackEvent, isGAAvailable, setUserProperties } from '@/utils/analytics';
+
+/**
+ * 页面访问跟踪Hook
+ * @param pageTitle - 页面标题
+ * @param customParams - 自定义参数
+ */
+export const usePageTracking = (
+    pageTitle?: string,
+    customParams?: Record<string, any>
+) => {
+    const router = useRouter();
+
+    useEffect(() => {
+        if (isGAAvailable()) {
+            const currentPath = window.location.pathname;
+            trackPageView(currentPath, pageTitle, { custom_parameters: customParams });
+        }
+    }, [router, pageTitle, customParams]);
+};
+
+/**
+ * 用户行为跟踪Hook
+ */
+export const useEventTracking = () => {
+    const trackUserAction = (
+        action: string,
+        category: string = 'user',
+        label?: string,
+        value?: number,
+        customParams?: Record<string, any>
+    ) => {
+        trackEvent(action, {
+            event_category: category,
+            event_label: label,
+            value: value,
+            custom_parameters: customParams,
+        });
+    };
+
+    const trackButtonClick = (buttonName: string, location?: string) => {
+        trackUserAction('button_click', 'interaction', buttonName, undefined, {
+            button_name: buttonName,
+            location: location,
+        });
+    };
+
+    const trackFormSubmit = (formName: string, success: boolean = true) => {
+        trackUserAction('form_submit', 'form', formName, undefined, {
+            form_name: formName,
+            success: success,
+        });
+    };
+
+    const trackNavigation = (from: string, to: string) => {
+        trackUserAction('navigation', 'user', `${from} -> ${to}`, undefined, {
+            from_page: from,
+            to_page: to,
+        });
+    };
+
+    return {
+        trackUserAction,
+        trackButtonClick,
+        trackFormSubmit,
+        trackNavigation,
+    };
+};
+
+/**
+ * 视频相关事件跟踪Hook
+ */
+export const useVideoTracking = () => {
+    const trackVideoCreation = (templateType: string, aspectRatio?: string) => {
+        trackEvent('video_creation_start', {
+            event_category: 'video',
+            event_label: templateType,
+            custom_parameters: {
+                template_type: templateType,
+                aspect_ratio: aspectRatio,
+            },
+        });
+    };
+
+    const trackVideoGeneration = (duration: number, templateType: string) => {
+        trackEvent('video_generation_complete', {
+            event_category: 'video',
+            value: duration,
+            custom_parameters: {
+                template_type: templateType,
+                video_duration: duration,
+            },
+        });
+    };
+
+    const trackVideoDownload = (videoId: string, format: string) => {
+        trackEvent('video_download', {
+            event_category: 'video',
+            event_label: format,
+            custom_parameters: {
+                video_id: videoId,
+                format: format,
+            },
+        });
+    };
+
+    const trackVideoShare = (videoId: string, platform: string) => {
+        trackEvent('video_share', {
+            event_category: 'video',
+            event_label: platform,
+            custom_parameters: {
+                video_id: videoId,
+                platform: platform,
+            },
+        });
+    };
+
+    return {
+        trackVideoCreation,
+        trackVideoGeneration,
+        trackVideoDownload,
+        trackVideoShare,
+    };
+};
+
+/**
+ * 支付相关事件跟踪Hook
+ */
+export const usePaymentTracking = () => {
+    const trackPaymentStart = (paymentType: string, amount: number, currency: string = 'USD') => {
+        trackEvent('payment_start', {
+            event_category: 'ecommerce',
+            value: amount,
+            custom_parameters: {
+                payment_type: paymentType,
+                currency: currency,
+            },
+        });
+    };
+
+    const trackPaymentComplete = (paymentType: string, amount: number, currency: string = 'USD') => {
+        trackEvent('purchase', {
+            event_category: 'ecommerce',
+            value: amount,
+            custom_parameters: {
+                payment_type: paymentType,
+                currency: currency,
+            },
+        });
+    };
+
+    const trackPaymentFailed = (paymentType: string, errorReason: string) => {
+        trackEvent('payment_failed', {
+            event_category: 'ecommerce',
+            event_label: errorReason,
+            custom_parameters: {
+                payment_type: paymentType,
+                error_reason: errorReason,
+            },
+        });
+    };
+
+    return {
+        trackPaymentStart,
+        trackPaymentComplete,
+        trackPaymentFailed,
+    };
+};
+
+/**
+ * 用户属性管理Hook
+ */
+export const useUserProperties = () => {
+    const setUserAnalyticsProperties = (
+        userId: string,
+        userProperties: Record<string, any>
+    ) => {
+        setUserProperties(userId, userProperties);
+    };
+
+    return {
+        setUserAnalyticsProperties,
+    };
+};
+
+
+
diff --git a/hooks/useAppStartupAnalytics.ts b/hooks/useAppStartupAnalytics.ts
new file mode 100644
index 0000000..8297124
--- /dev/null
+++ b/hooks/useAppStartupAnalytics.ts
@@ -0,0 +1,67 @@
+/**
+ * 应用启动时用户属性设置Hook
+ * 确保在应用启动时为用户设置GA属性
+ */
+
+import { useEffect } from 'react';
+import { getCurrentUser, isAuthenticated } from '@/lib/auth';
+import { setUserProperties } from '@/utils/analytics';
+
+/**
+ * 应用启动时设置用户GA属性
+ */
+export const useAppStartupAnalytics = () => {
+    useEffect(() => {
+        const initializeUserAnalytics = () => {
+            // 检查用户是否已认证
+            if (!isAuthenticated()) {
+                console.log('用户未认证，跳过GA属性设置');
+                return;
+            }
+
+            // 获取本地存储的用户数据
+            const currentUser = getCurrentUser();
+            if (!currentUser || !currentUser.id) {
+                console.log('本地用户数据不存在，跳过GA属性设置');
+                return;
+            }
+
+            try {
+                // 设置应用启动时的用户属性
+                // 基于实际userData结构: {"id":"8f61686734d340d0820f0fe980368629","userId":"8f61686734d340d0820f0fe980368629","username":"Orange","email":"moviflow68@test.com","isActive":1,"authType":"LOCAL","lastLogin":"2025-09-28T16:28:51.870731"}
+                setUserProperties(currentUser.id, {
+                    // 基础用户信息
+                    user_id: currentUser.id,
+                    email: currentUser.email,
+                    username: currentUser.username,
+                    
+                    // 认证信息
+                    auth_type: currentUser.authType || 'LOCAL',
+                    is_active: currentUser.isActive || 1,
+                    
+                    // 应用启动信息
+                    last_login: currentUser.lastLogin || new Date().toISOString(),
+                    
+                    // 用户状态
+                    user_status: currentUser.isActive === 1 ? 'active' : 'inactive',
+                    
+                    // 设备信息
+                    user_agent: navigator.userAgent,
+                    screen_resolution: `${screen.width}x${screen.height}`,
+                    language: navigator.language,
+                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                    
+                    // 会话信息
+                    session_id: `${currentUser.id}_${Date.now()}`,
+                });
+            } catch (error) {
+                console.error('❌ 应用启动时GA用户属性设置失败:', error);
+            }
+        };
+
+        // 延迟执行，确保应用完全加载
+        const timer = setTimeout(initializeUserAnalytics, 1000);
+        
+        return () => clearTimeout(timer);
+    }, []);
+};
diff --git a/lib/auth.ts b/lib/auth.ts
index 9450907..4001ed5 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -7,6 +7,7 @@ import type {
   EmailConflictData,
   OAuthState
 } from '@/app/types/google-oauth';
+import { setUserProperties } from '@/utils/analytics';
 
 // API配置
 //const JAVA_BASE_URL = 'http://192.168.120.36:8080';
@@ -109,6 +110,25 @@ export const getCurrentUser = () => {
 export const setUser = (user: any) => {
   if (typeof window === 'undefined') return;
   localStorage.setItem(USER_KEY, JSON.stringify(user));
+  
+  // 设置详细的GA用户属性
+  if (user && user.id) {
+    setUserProperties(user.id, {
+      // 基础用户信息
+      user_id: user.id,
+      email: user.email,
+      username: user.username,
+      // 认证信息
+      auth_type: user.authType || 'LOCAL',
+      is_active: user.isActive || 1,
+      // 用户状态
+      user_status: user.isActive === 1 ? 'active' : 'inactive',
+      // 登录信息
+      last_login: user.lastLogin || new Date().toISOString(),
+      // 会话信息
+      session_id: `${user.id}_${Date.now()}`
+    });
+  }
 };
 
 /**
diff --git a/public/assets/cover_image_shu.jpg b/public/assets/cover_image_shu.jpg
new file mode 100644
index 0000000..2cd5885
Binary files /dev/null and b/public/assets/cover_image_shu.jpg differ
diff --git a/utils/analytics.ts b/utils/analytics.ts
new file mode 100644
index 0000000..26373ce
--- /dev/null
+++ b/utils/analytics.ts
@@ -0,0 +1,334 @@
+/**
+ * Google Analytics 4 工具函数
+ * 提供标准化的事件跟踪和页面访问监控
+ */
+
+// 扩展全局Window接口
+declare global {
+    interface Window {
+        gtag: (...args: any[]) => void;
+        dataLayer: any[];
+    }
+}
+
+/**
+ * GA4事件参数类型定义
+ */
+export interface GAEventParameters {
+    event_category?: string;
+    event_label?: string;
+    value?: number;
+    custom_parameters?: Record<string, any>;
+}
+
+/**
+ * 页面访问参数类型定义
+ */
+export interface GAPageViewParameters {
+    page_title?: string;
+    page_location?: string;
+    custom_parameters?: Record<string, any>;
+}
+
+/**
+ * 规范化/序列化事件参数，避免 [object Object]
+ */
+const normalizeEventParams = (
+    params: Record<string, any>
+): Record<string, string | number | boolean> => {
+    const result: Record<string, string | number | boolean> = {};
+
+    const assignPrimitive = (key: string, value: any) => {
+        if (value === undefined) return;
+        if (
+            typeof value === 'string' ||
+            typeof value === 'number' ||
+            typeof value === 'boolean'
+        ) {
+            result[key] = value;
+        } else if (value === null) {
+            result[key] = 'null';
+        } else {
+            try {
+                result[key] = JSON.stringify(value);
+            } catch (_) {
+                result[key] = String(value);
+            }
+        }
+    };
+
+    for (const [key, value] of Object.entries(params || {})) {
+        if (key === 'custom_parameters' && value && typeof value === 'object') {
+            for (const [ck, cv] of Object.entries(value)) {
+                assignPrimitive(ck, cv);
+            }
+            continue;
+        }
+        assignPrimitive(key, value);
+    }
+
+    return result;
+};
+
+/**
+ * 检查GA是否可用
+ */
+export const isGAAvailable = (): boolean => {
+    return typeof window !== 'undefined' && 
+           typeof window.gtag === 'function' && 
+           process.env.NEXT_PUBLIC_GA_ENABLED === 'true';
+};
+
+/**
+ * 获取GA测量ID
+ */
+export const getGAMeasurementId = (): string => {
+    return process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || 'G-4BDXV6TWF4';
+};
+
+/**
+ * 跟踪自定义事件
+ * @param eventName - 事件名称
+ * @param parameters - 事件参数
+ */
+export const trackEvent = (
+    eventName: string, 
+    parameters?: GAEventParameters
+): void => {
+    if (!isGAAvailable()) {
+        console.warn('Google Analytics not available');
+        return;
+    }
+
+    try {
+        const eventParamsRaw = {
+            event_category: parameters?.event_category || 'general',
+            event_label: parameters?.event_label,
+            value: parameters?.value,
+            ...parameters?.custom_parameters,
+        };
+
+        const eventParams = normalizeEventParams(eventParamsRaw);
+
+        window.gtag('event', eventName, eventParams);
+        
+        // 开发环境下打印日志
+        if (process.env.NODE_ENV === 'development') {
+            console.log('GA Event:', eventName, eventParams);
+        }
+    } catch (error) {
+        console.error('Error tracking GA event:', error);
+    }
+};
+
+/**
+ * 跟踪页面访问
+ * @param pagePath - 页面路径
+ * @param pageTitle - 页面标题
+ * @param parameters - 额外参数
+ */
+export const trackPageView = (
+    pagePath: string,
+    pageTitle?: string,
+    parameters?: GAPageViewParameters
+): void => {
+    if (!isGAAvailable()) {
+        console.warn('Google Analytics not available');
+        return;
+    }
+
+    try {
+        const pageParamsRaw = {
+            page_path: pagePath,
+            page_title: pageTitle,
+            page_location: parameters?.page_location || window.location.href,
+            ...parameters?.custom_parameters,
+        };
+
+        const pageParams = normalizeEventParams(pageParamsRaw);
+
+        window.gtag('config', getGAMeasurementId(), pageParams);
+        
+        // 开发环境下打印日志
+        if (process.env.NODE_ENV === 'development') {
+            console.log('GA Page View:', pagePath, pageParams);
+        }
+    } catch (error) {
+        console.error('Error tracking GA page view:', error);
+    }
+};
+
+/**
+ * 跟踪用户注册事件
+ * @param method - 注册方式 (email, google, etc.)
+ */
+export const trackUserRegistration = (method: string): void => {
+    trackEvent('user_registration', {
+        event_category: 'user',
+        event_label: method,
+        custom_parameters: {
+            registration_method: method,
+        },
+    });
+};
+
+/**
+ * 跟踪用户登录事件
+ * @param method - 登录方式 (email, google, etc.)
+ */
+export const trackUserLogin = (method: string): void => {
+    trackEvent('user_login', {
+        event_category: 'user',
+        event_label: method,
+        custom_parameters: {
+            login_method: method,
+        },
+    });
+};
+
+/**
+ * 跟踪视频创建开始事件
+ * @param templateType - 模板类型
+ * @param aspectRatio - 视频比例
+ */
+export const trackVideoCreationStart = (
+    templateType: string,
+    aspectRatio?: string
+): void => {
+    trackEvent('video_creation_start', {
+        event_category: 'video',
+        event_label: templateType,
+        custom_parameters: {
+            template_type: templateType,
+            aspect_ratio: aspectRatio,
+        },
+    });
+};
+
+/**
+ * 跟踪视频生成完成事件
+ * @param duration - 视频时长
+ * @param templateType - 模板类型
+ */
+export const trackVideoGenerationComplete = (
+    duration: number,
+    templateType: string
+): void => {
+    trackEvent('video_generation_complete', {
+        event_category: 'video',
+        value: duration,
+        custom_parameters: {
+            template_type: templateType,
+            video_duration: duration,
+        },
+    });
+};
+
+/**
+ * 跟踪支付事件
+ * @param paymentType - 支付类型 (subscription, token)
+ * @param amount - 支付金额
+ * @param currency - 货币类型
+ */
+export const trackPayment = (
+    paymentType: string,
+    amount: number,
+    currency: string = 'USD'
+): void => {
+    trackEvent('purchase', {
+        event_category: 'ecommerce',
+        value: amount,
+        custom_parameters: {
+            payment_type: paymentType,
+            currency: currency,
+        },
+    });
+};
+
+/**
+ * 跟踪模板选择事件
+ * @param templateId - 模板ID
+ * @param templateName - 模板名称
+ */
+export const trackTemplateSelection = (
+    templateId: string,
+    templateName: string
+): void => {
+    trackEvent('template_selection', {
+        event_category: 'template',
+        event_label: templateName,
+        custom_parameters: {
+            template_id: templateId,
+            template_name: templateName,
+        },
+    });
+};
+
+/**
+ * 跟踪功能使用事件
+ * @param featureName - 功能名称
+ * @param action - 操作类型
+ */
+export const trackFeatureUsage = (
+    featureName: string,
+    action: string
+): void => {
+    trackEvent('feature_usage', {
+        event_category: 'feature',
+        event_label: featureName,
+        custom_parameters: {
+            feature_name: featureName,
+            action: action,
+        },
+    });
+};
+
+/**
+ * 跟踪错误事件
+ * @param errorType - 错误类型
+ * @param errorMessage - 错误信息
+ * @param errorLocation - 错误位置
+ */
+export const trackError = (
+    errorType: string,
+    errorMessage: string,
+    errorLocation?: string
+): void => {
+    trackEvent('error', {
+        event_category: 'error',
+        event_label: errorType,
+        custom_parameters: {
+            error_type: errorType,
+            error_message: errorMessage,
+            error_location: errorLocation,
+        },
+    });
+};
+
+/**
+ * 跟踪用户属性
+ * @param userId - 用户ID
+ * @param userProperties - 用户属性
+ */
+export const setUserProperties = (
+    userId: string,
+    userProperties: Record<string, any>
+): void => {
+    if (!isGAAvailable()) {
+        console.warn('Google Analytics not available');
+        return;
+    }
+
+    try {
+        // GA4 推荐：通过 config 设置 user_id，通过 set user_properties 设置用户属性
+        window.gtag('config', getGAMeasurementId(), {
+            user_id: userId,
+        });
+        window.gtag('set', 'user_properties', normalizeEventParams(userProperties));
+    } catch (error) {
+        console.error('Error setting user properties:', error);
+    }
+};
+
+
+