feat: 本次提交更新内容如下

存一版样式问题

nkebao/src/components/PageHeader.tsx

@@ -23,8 +23,6 @@ interface PageHeaderProps {
   backButtonVariant?: 'icon' | 'button' | 'text';
   /** 返回按钮自定义样式类名 */
   backButtonClassName?: string;
-  /** 是否固定在顶部 */
-  fixed?: boolean;
   /** 是否显示底部边框 */
   showBorder?: boolean;
 }
@@ -44,14 +42,13 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   titleClassName = '',
   backButtonVariant = 'icon',
   backButtonClassName = '',
-  fixed = true,
   showBorder = true
 }) => {
   const { goBack } = useSimpleBack(defaultBackPath);
 
   const handleBack = onBack || goBack;
 
-  const baseClasses = `bg-white ${showBorder ? 'border-b border-gray-200' : ''} ${fixed ? 'fixed top-0 left-0 right-0 z-20' : ''}`;
+  const baseClasses = `bg-white ${showBorder ? 'border-b border-gray-200' : ''}`;
   const headerClasses = `${baseClasses} ${className}`;
   // 默认小号按钮样式
   const defaultBackBtnClass = 'text-sm px-2 py-1 h-8 min-h-0';

nkebao/src/pages/devices/DeviceDetail.tsx

@@ -6,6 +6,8 @@ import { useSimpleBack } from '@/hooks/useBackNavigation';
 import { Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History, RefreshCw, Loader2 } from 'lucide-react';
 import { devicesApi, fetchDeviceDetail, fetchDeviceRelatedAccounts, fetchDeviceHandleLogs, updateDeviceTaskConfig } from '@/api/devices';
 import { useToast } from '@/components/ui/toast';
+import Layout from '@/components/Layout';
+import BottomNav from '@/components/BottomNav';
 
 interface WechatAccount {
   id: string;
@@ -423,51 +425,52 @@ export default function DeviceDetail() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="flex flex-col items-center space-y-4">
-          <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
-          <p className="text-gray-500">加载设备信息中...</p>
+      <Layout
+        header={<PageHeader title="设备详情" defaultBackPath="/devices" rightContent={<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Settings className="h-5 w-5" /></button>} />}
+        footer={<BottomNav />}
+      >
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <div className="flex flex-col items-center space-y-4">
+            <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+            <p className="text-gray-500">加载设备信息中...</p>
+          </div>
         </div>
-      </div>
+      </Layout>
     );
   }
 
   if (!device) {
     return (
-      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-        <div className="flex flex-col items-center space-y-4 p-6 bg-white rounded-xl shadow-sm max-w-md">
-          <div className="w-12 h-12 flex items-center justify-center rounded-full bg-red-100">
-            <Smartphone className="h-6 w-6 text-red-500" />
+      <Layout
+        header={<PageHeader title="设备详情" defaultBackPath="/devices" rightContent={<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Settings className="h-5 w-5" /></button>} />}
+        footer={<BottomNav />}
+      >
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+          <div className="flex flex-col items-center space-y-4 p-6 bg-white rounded-xl shadow-sm max-w-md">
+            <div className="w-12 h-12 flex items-center justify-center rounded-full bg-red-100">
+              <Smartphone className="h-6 w-6 text-red-500" />
+            </div>
+            <div className="text-xl font-medium text-center">设备不存在或已被删除</div>
+            <div className="text-sm text-gray-500 text-center">
+              无法加载ID为 "{id}" 的设备信息，请检查设备是否存在。
+            </div>
+            <BackButton 
+              variant="button"
+              text="返回上一页"
+              onBack={goBack}
+            />
           </div>
-          <div className="text-xl font-medium text-center">设备不存在或已被删除</div>
-          <div className="text-sm text-gray-500 text-center">
-            无法加载ID为 "{id}" 的设备信息，请检查设备是否存在。
-          </div>
-          <BackButton 
-            variant="button"
-            text="返回上一页"
-            onBack={goBack}
-          />
         </div>
-      </div>
+      </Layout>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* 固定header */}
-      <PageHeader
-        title="设备详情"
-        defaultBackPath="/devices"
-        rightContent={
-          <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors">
-            <Settings className="h-5 w-5" />
-          </button>
-        }
-      />
-
-      {/* 内容区域 */}
-      <div className="pt-16 pb-20">
+    <Layout
+      header={<PageHeader title="设备详情" defaultBackPath="/devices" rightContent={<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Settings className="h-5 w-5" /></button>} />}
+      footer={<BottomNav />}
+    >
+      <div className="pb-20">
         <div className="p-4 space-y-4">
           {/* 设备基本信息卡片 */}
           <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
@@ -486,7 +489,7 @@ export default function DeviceDetail() {
                     {device.status === "online" ? "在线" : "离线"}
                   </span>
                 </div>
-                <div className="text-sm text-gray-500 mt-1">
+                <div className="text-xs text-gray-500 mt-1">
                   <span className="mr-1">IMEI:</span> 
                   {device.imei}
                 </div>
@@ -861,6 +864,6 @@ export default function DeviceDetail() {
           </div>
         </div>
       </div>
-    </div>
+    </Layout>
   );
 } 

nkebao/src/pages/wechat-accounts/WechatAccountDetail.tsx

@@ -18,6 +18,8 @@ import {
 import { useWechatAccount } from '@/contexts/WechatAccountContext';
 import { fetchWechatAccountSummary, fetchWechatFriends, fetchWechatFriendDetail } from '@/api/wechat-accounts';
 import { useToast } from '@/components/ui/toast';
+import Layout from '@/components/Layout';
+import '@/components/Layout.css';
 
 interface WechatAccountSummary {
   accountAge: string;
@@ -401,15 +403,16 @@ export default function WechatAccountDetail() {
   }
 
   return (
-    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen overflow-x-hidden">
-      {/* 固定header */}
-      <PageHeader
-        title="账号详情"
-        defaultBackPath="/wechat-accounts"
-      />
-
-      {/* 内容区域 - 添加顶部内边距避免被固定header遮挡 */}
-      <div className="pt-20 p-4 space-y-4">
+    <Layout
+      header={
+        <PageHeader
+          title="账号详情"
+          defaultBackPath="/wechat-accounts"
+        />
+      }
+    >
+      <div className="bg-gradient-to-b from-blue-50 to-white">
+        <div className="p-4 space-y-4">
         {/* 账号基本信息卡片 */}
         <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
           <div className="flex items-center space-x-4">
@@ -800,6 +803,7 @@ export default function WechatAccountDetail() {
           </div>
         </div>
       </div>
+      </div> {/* 这里补上，闭合415行的<div className='p-4 space-y-4'> */}
 
       {/* 限制记录详情弹窗 */}
       {showRestrictions && (
@@ -962,6 +966,6 @@ export default function WechatAccountDetail() {
           </div>
         </div>
       )}
-    </div>
+    </Layout>
   );
 } 

nkebao/src/pages/wechat-accounts/WechatAccounts.tsx

@@ -5,6 +5,8 @@ import { fetchWechatAccountList, transformWechatAccount } from '@/api/wechat-acc
 import { useToast } from '@/components/ui/toast';
 import { useWechatAccount } from '@/contexts/WechatAccountContext';
 import PageHeader from '@/components/PageHeader';
+import Layout from '@/components/Layout';
+import '@/components/Layout.css';
 
 interface WechatAccount {
   id: string;
@@ -149,14 +151,15 @@ export default function WechatAccounts() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <PageHeader
-        title="微信号"
-        defaultBackPath="/"
-      />
-
-      {/* 内容区域 */}
-      <div className="pt-14 pb-20">
+    <Layout
+      header={
+        <PageHeader
+          title="微信号"
+          defaultBackPath="/"
+        />
+      }
+    >
+      <div className="bg-gray-50">
         <div className="p-4">
           {/* 搜索和操作栏 */}
           <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-4 ">
@@ -349,7 +352,6 @@ export default function WechatAccounts() {
           )}
         </div>
       </div>
-
       {/* 好友转移确认对话框 */}
       {isTransferDialogOpen && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
@@ -376,6 +378,6 @@ export default function WechatAccounts() {
           </div>
         </div>
       )}
-    </div>
+    </Layout>
   );
 }