feat: 存储了

nkebao/src/pages/devices/DeviceDetail.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
+import PageHeader from '@/components/PageHeader';
+import BackButton from '@/components/BackButton';
+import { useSimpleBack } from '@/hooks/useBackNavigation';
 import { ChevronLeft, 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';
@@ -52,7 +55,7 @@ interface HandleLog {
 
 export default function DeviceDetail() {
   const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
+  const { goBack } = useSimpleBack('/devices');
   const { toast } = useToast();
   const [device, setDevice] = useState<Device | null>(null);
   const [activeTab, setActiveTab] = useState("info");
@@ -442,13 +445,11 @@ export default function DeviceDetail() {
           <div className="text-sm text-gray-500 text-center">
             无法加载ID为 "{id}" 的设备信息，请检查设备是否存在。
           </div>
-          <button 
-            onClick={() => navigate(-1)}
-            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
-          >
-            <ChevronLeft className="h-4 w-4" />
-            返回上一页
-          </button>
+          <BackButton 
+            variant="button"
+            text="返回上一页"
+            onBack={goBack}
+          />
         </div>
       </div>
     );
@@ -457,22 +458,15 @@ export default function DeviceDetail() {
   return (
     <div className="min-h-screen bg-gray-50">
       {/* 固定header */}
-      <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200">
-        <div className="flex items-center justify-between px-4 py-3">
-          <div className="flex items-center gap-3">
-            <button 
-              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-              onClick={() => navigate(-1)}
-            >
-              <ChevronLeft className="h-5 w-5" />
-            </button>
-            <h1 className="text-lg font-semibold">设备详情</h1>
-          </div>
+      <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>
-      </header>
+        }
+      />
 
       {/* 内容区域 */}
       <div className="pt-16 pb-20">

nkebao/src/pages/devices/Devices.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ChevronLeft, Plus, Search, RefreshCw, QrCode, Smartphone, Loader2, AlertTriangle, Trash2, X } from 'lucide-react';
+import { Plus, Search, RefreshCw, QrCode, Smartphone, Loader2, AlertTriangle, Trash2, X } from 'lucide-react';
 import { devicesApi } from '@/api';
 import { useToast } from '@/components/ui/toast';
+import PageHeader from '@/components/PageHeader';
 
 // 设备接口
 interface Device {
@@ -375,18 +376,11 @@ export default function Devices() {
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* 固定header */}
-      <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200">
-        <div className="flex items-center justify-between px-4 py-3">
-          <div className="flex items-center gap-3">
-            <button 
-              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-              onClick={() => navigate(-1)}
-            >
-              <ChevronLeft className="h-5 w-5" />
-            </button>
-            <h1 className="text-lg font-semibold">设备管理</h1>
-          </div>
+      {/* 页面Header */}
+      <PageHeader
+        title="设备管理"
+        defaultBackPath="/"
+        rightContent={
           <button 
             className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
             onClick={handleOpenAddDeviceModal}
@@ -394,8 +388,8 @@ export default function Devices() {
             <Plus className="h-4 w-4" />
             添加设备
           </button>
-        </div>
-      </header>
+        }
+      />
 
       {/* 内容区域 */}
       <div className="pt-16 pb-20">