From c5c559f4efe53defdc70f6381ce2cb1b5af0154e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=B0=B8=E5=B9=B3?= <xuyongping@szwycity.cn>
Date: Fri, 4 Jul 2025 17:36:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/pages/devices/Devices.tsx | 266 +++++++++++++++------------
 1 file changed, 144 insertions(+), 122 deletions(-)

diff --git a/nkebao/src/pages/devices/Devices.tsx b/nkebao/src/pages/devices/Devices.tsx
index 4c9fde589..32f65a749 100644
--- a/nkebao/src/pages/devices/Devices.tsx
+++ b/nkebao/src/pages/devices/Devices.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ChevronLeft, Plus, Filter, Search, RefreshCw, QrCode, Smartphone, Loader2, AlertTriangle, Trash2 } from 'lucide-react';
+import { ChevronLeft, Plus, Filter, Search, RefreshCw, QrCode, Smartphone, Loader2, AlertTriangle, Trash2, X } from 'lucide-react';
 import { devicesApi } from '../../api';
 import { useToast } from '../../components/ui/toast';
 
@@ -247,6 +247,11 @@ export default function Devices() {
       messageType: 'default',
       showAnimation: false
     });
+    
+    // 自动获取二维码
+    setTimeout(() => {
+      fetchDeviceQRCode();
+    }, 100);
   };
 
   const handleCloseAddDeviceModal = () => {
@@ -369,62 +374,62 @@ export default function Devices() {
   });
 
   return (
-    <div className="flex-1 flex flex-col bg-gray-50">
+    <div className="min-h-screen bg-gray-50">
       {/* 固定header */}
-      <header className="fixed top-0 left-0 right-0 z-20 bg-white border-b">
-        <div className="flex items-center justify-between p-4">
-          <div className="flex items-center space-x-3">
+      <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-full"
+              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-medium">设备管理</h1>
+            <h1 className="text-lg font-semibold">设备管理</h1>
           </div>
           <button 
-            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"
+            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}
           >
-            <Plus className="h-4 w-4 mr-2" />
+            <Plus className="h-4 w-4" />
             添加设备
           </button>
         </div>
       </header>
 
-      {/* 可滚动的内容区域 */}
-      <div className="flex-1 overflow-y-auto pt-16 pb-24">
+      {/* 内容区域 */}
+      <div className="pt-16 pb-20">
         <div className="p-4 space-y-4">
           {/* 统计卡片 */}
           <div className="grid grid-cols-2 gap-3">
-            <div className="p-3 bg-white rounded-lg shadow">
-              <div className="text-sm text-gray-500">总设备数</div>
-              <div className="text-xl font-bold text-blue-600">{stats.totalDevices}</div>
+            <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
+              <div className="text-sm text-gray-500 mb-1">总设备数</div>
+              <div className="text-2xl font-bold text-blue-600">{stats.totalDevices}</div>
             </div>
-            <div className="p-3 bg-white rounded-lg shadow">
-              <div className="text-sm text-gray-500">在线设备</div>
-              <div className="text-xl font-bold text-green-600">{stats.onlineDevices}</div>
+            <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
+              <div className="text-sm text-gray-500 mb-1">在线设备</div>
+              <div className="text-2xl font-bold text-green-600">{stats.onlineDevices}</div>
             </div>
           </div>
 
           {/* 搜索和过滤 */}
-          <div className="bg-white p-4 rounded-lg shadow space-y-3">
-            <div className="flex items-center space-x-2">
+          <div className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 space-y-4">
+            <div className="flex items-center gap-2">
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                 <input
                   type="text"
                   placeholder="搜索设备IMEI/备注"
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                 />
               </div>
-              <button className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50">
+              <button className="p-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                 <Filter className="h-4 w-4" />
               </button>
               <button 
-                className="p-2 border border-gray-300 rounded-lg hover:bg-gray-50"
+                className="p-2.5 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                 onClick={handleRefresh}
               >
                 <RefreshCw className="h-4 w-4" />
@@ -432,19 +437,17 @@ export default function Devices() {
             </div>
 
             <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-4">
-                <select 
-                  value={statusFilter} 
-                  onChange={(e) => setStatusFilter(e.target.value)}
-                  className="px-3 py-2 border border-gray-300 rounded-lg bg-white"
-                >
-                  <option value="all">全部状态</option>
-                  <option value="online">在线</option>
-                  <option value="offline">离线</option>
-                </select>
-              </div>
+              <select 
+                value={statusFilter} 
+                onChange={(e) => setStatusFilter(e.target.value)}
+                className="px-3 py-2 border border-gray-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+              >
+                <option value="all">全部状态</option>
+                <option value="online">在线</option>
+                <option value="offline">离线</option>
+              </select>
               <button
-                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm disabled:bg-gray-300 disabled:cursor-not-allowed"
+                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
                 onClick={handleDeleteClick}
                 disabled={!selectedDeviceId}
               >
@@ -454,14 +457,14 @@ export default function Devices() {
           </div>
 
           {/* 设备列表 */}
-          <div className="space-y-2">
+          <div className="space-y-3">
             {filteredDevices.map((device) => (
               <div
                 key={device.id}
-                className="bg-white p-3 rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer relative"
+                className="bg-white p-4 rounded-xl shadow-sm border border-gray-100 hover:shadow-md transition-all cursor-pointer"
                 onClick={(e) => handleDeviceClick(device.id, e)}
               >
-                <div className="flex items-center space-x-3">
+                <div className="flex items-start gap-3">
                   <input
                     type="checkbox"
                     checked={selectedDeviceId === device.id}
@@ -473,32 +476,30 @@ export default function Devices() {
                       }
                     }}
                     onClick={(e) => e.stopPropagation()}
-                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                    className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mt-0.5"
                   />
                   <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between mb-1">
-                      <div className="font-medium truncate">{device.memo || "未命名设备"}</div>
-                      <span className={`ml-2 px-2 py-1 text-xs rounded-full ${
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="font-semibold text-gray-900 truncate">{device.memo || "未命名设备"}</div>
+                      <span className={`px-2.5 py-1 text-xs rounded-full font-medium ${
                         device.status === "online" 
-                          ? "bg-green-100 text-green-800" 
-                          : "bg-gray-100 text-gray-800"
+                          ? "bg-green-100 text-green-700" 
+                          : "bg-gray-100 text-gray-600"
                       }`}>
                         {device.status === "online" ? "在线" : "离线"}
                       </span>
                     </div>
-                    <div className="text-sm text-gray-500">
-                      <span className="mr-1">IMEI: {device.imei}</span>
-                    </div>
-                    <div className="text-sm text-gray-500">微信号: {device.wechatId || "未绑定或微信离线"}</div>
-                    <div className="flex items-center justify-between mt-1 text-sm">
-                      <span className="text-gray-500">好友数: {device.totalFriend}</span>
+                    <div className="space-y-1 text-sm text-gray-600">
+                      <div>IMEI: {device.imei}</div>
+                      <div>微信号: {device.wechatId || "未绑定或微信离线"}</div>
+                      <div>好友数: {device.totalFriend}</div>
                     </div>
                   </div>
                 </div>
               </div>
             ))}
 
-            <div ref={observerTarget} className="h-10 flex items-center justify-center">
+            <div ref={observerTarget} className="py-4 flex items-center justify-center">
               {isLoading && <div className="text-sm text-gray-500">加载中...</div>}
               {!hasMore && devices.length > 0 && <div className="text-sm text-gray-500">没有更多设备了</div>}
               {!hasMore && devices.length === 0 && <div className="text-sm text-gray-500">暂无设备</div>}
@@ -509,29 +510,43 @@ export default function Devices() {
 
       {/* 添加设备弹窗 */}
       {isAddDeviceOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
-            <div className="p-6">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl max-w-md w-full max-h-[90vh] overflow-y-auto">
+            <div className="p-5">
               <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-semibold">添加设备</h2>
+                <h2 className="text-xl font-semibold text-gray-900">添加设备</h2>
                 <button 
                   onClick={handleCloseAddDeviceModal}
-                  className="text-gray-400 hover:text-gray-600"
+                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                 >
-                  ✕
+                  <X className="h-5 w-5 text-gray-400" />
                 </button>
               </div>
               
               <div className="space-y-4">
-                <div className="flex space-x-2 border-b">
+                <div className="flex border-b border-gray-200">
                   <button
-                    className={`pb-2 px-4 ${activeTab === "scan" ? "border-b-2 border-blue-500 text-blue-500" : "text-gray-500"}`}
-                    onClick={() => setActiveTab("scan")}
+                    className={`flex-1 py-2.5 px-4 text-sm font-medium transition-colors ${
+                      activeTab === "scan" 
+                        ? "text-blue-600 border-b-2 border-blue-600" 
+                        : "text-gray-500 hover:text-gray-700"
+                    }`}
+                    onClick={() => {
+                      setActiveTab("scan");
+                      // 切换到扫码添加时自动获取二维码
+                      setTimeout(() => {
+                        fetchDeviceQRCode();
+                      }, 100);
+                    }}
                   >
                     扫码添加
                   </button>
                   <button
-                    className={`pb-2 px-4 ${activeTab === "manual" ? "border-b-2 border-blue-500 text-blue-500" : "text-gray-500"}`}
+                    className={`flex-1 py-2.5 px-4 text-sm font-medium transition-colors ${
+                      activeTab === "manual" 
+                        ? "text-blue-600 border-b-2 border-blue-600" 
+                        : "text-gray-500 hover:text-gray-700"
+                    }`}
                     onClick={() => setActiveTab("manual")}
                   >
                     手动添加
@@ -539,33 +554,34 @@ export default function Devices() {
                 </div>
 
                 {activeTab === "scan" && (
-                  <div className="space-y-4 py-4">
-                    <div className="flex flex-col items-center justify-center p-6 space-y-4 relative">
-                      <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 z-10">
-                        <div className="flex flex-col items-center w-full py-2">
-                          {pollingStatus.isPolling || pollingStatus.showAnimation ? (
-                            <>
-                              <span className="text-sm text-gray-800">正在检测添加结果</span>
-                              <div className="flex space-x-1 mt-1">
-                                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
-                                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
-                                <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
-                              </div>
-                            </>
-                          ) : (
-                            <span className="text-sm text-gray-800">5秒后将开始检测添加结果</span>
-                          )}
-                        </div>
+                  <div className="py-3">
+                    <div className="flex flex-col items-center space-y-4">
+                      {/* 状态提示 */}
+                      <div className="text-center">
+                        {pollingStatus.isPolling || pollingStatus.showAnimation ? (
+                          <div className="space-y-1">
+                            <span className="text-sm text-gray-700">正在检测添加结果</span>
+                            <div className="flex justify-center space-x-1">
+                              <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                              <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                              <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                            </div>
+                          </div>
+                        ) : (
+                          <span className="text-sm text-gray-600">5秒后将开始检测添加结果</span>
+                        )}
                       </div>
-                      <div className="bg-white p-4 rounded-lg shadow-md border border-gray-200 w-full max-w-[280px] min-h-[280px] flex flex-col items-center justify-center">
+
+                      {/* 二维码区域 */}
+                      <div className="bg-gray-50 p-3 rounded-xl w-full max-w-[220px] min-h-[220px] flex flex-col items-center justify-center">
                         {isLoadingQRCode ? (
-                          <div className="flex flex-col items-center justify-center space-y-3">
-                            <Loader2 className="h-12 w-12 animate-spin text-blue-500" />
+                          <div className="flex flex-col items-center space-y-2">
+                            <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
                             <p className="text-sm text-gray-500">正在获取二维码...</p>
                           </div>
                         ) : qrCodeImage ? (
-                          <div id="qrcode-container" className="flex flex-col items-center space-y-3">
-                            <div className="relative w-64 h-64 flex items-center justify-center">
+                          <div id="qrcode-container" className="flex flex-col items-center space-y-2">
+                            <div className="relative w-44 h-44 flex items-center justify-center">
                               <img 
                                 src={qrCodeImage} 
                                 alt="设备添加二维码" 
@@ -582,36 +598,38 @@ export default function Devices() {
                                   }
                                 }}
                               />
-                              <div className="qrcode-error hidden absolute inset-0 flex flex-col items-center justify-center text-center text-red-500 bg-white">
-                                <AlertTriangle className="h-10 w-10 mb-2" />
-                                <p>未能加载二维码，请点击刷新按钮重试</p>
+                              <div className="qrcode-error hidden absolute inset-0 flex flex-col items-center justify-center text-center text-red-500 bg-white rounded-lg">
+                                <AlertTriangle className="h-6 w-6 mb-1" />
+                                <p className="text-xs">未能加载二维码，请点击刷新按钮重试</p>
                               </div>
                             </div>
-                            <p className="text-sm text-center text-gray-600 mt-2">
+                            <p className="text-sm text-center text-gray-600">
                               请使用手机扫描此二维码添加设备
                             </p>
                           </div>
                         ) : (
                           <div className="text-center text-gray-500">
-                            <QrCode className="h-12 w-12 mx-auto mb-3 opacity-50" />
-                            <p>点击下方按钮获取二维码</p>
+                            <QrCode className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                            <p className="text-sm">点击下方按钮获取二维码</p>
                           </div>
                         )}
                       </div>
+
+                      {/* 操作按钮 */}
                       <button
                         type="button"
                         onClick={fetchDeviceQRCode}
                         disabled={isLoadingQRCode}
-                        className="w-48 mt-8 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg disabled:bg-gray-300"
+                        className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2.5 rounded-xl disabled:bg-gray-300 transition-colors flex items-center justify-center gap-2"
                       >
                         {isLoadingQRCode ? (
                           <>
-                            <Loader2 className="mr-2 h-4 w-4 animate-spin inline" />
+                            <Loader2 className="h-4 w-4 animate-spin" />
                             获取中...
                           </>
                         ) : (
                           <>
-                            <RefreshCw className="mr-2 h-4 w-4 inline" />
+                            <RefreshCw className="h-4 w-4" />
                             刷新二维码
                           </>
                         )}
@@ -621,49 +639,50 @@ export default function Devices() {
                 )}
                 
                 {activeTab === "manual" && (
-                  <div className="space-y-4 py-4">
-                    <div className="space-y-4">
+                  <div className="py-3 space-y-4">
+                    <div className="space-y-3">
                       <div className="space-y-2">
-                        <label className="text-sm font-medium">设备名称</label>
+                        <label className="text-sm font-medium text-gray-700">设备名称</label>
                         <input 
                           type="text"
                           placeholder="请输入设备名称" 
                           value={deviceName}
                           onChange={(e) => setDeviceName(e.target.value)}
-                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          className="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                         />
                         <p className="text-xs text-gray-500">
                           为设备添加一个便于识别的名称
                         </p>
                       </div>
                       <div className="space-y-2">
-                        <label className="text-sm font-medium">设备IMEI</label>
+                        <label className="text-sm font-medium text-gray-700">设备IMEI</label>
                         <input 
                           type="text"
                           placeholder="请输入设备IMEI" 
                           value={deviceImei}
                           onChange={(e) => setDeviceImei(e.target.value)}
-                          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                          className="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                         />
                         <p className="text-xs text-gray-500">
                           请输入设备IMEI码，可在设备信息中查看
                         </p>
                       </div>
-                      <div className="flex justify-end space-x-2">
-                        <button 
-                          className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
-                          onClick={() => setIsAddDeviceOpen(false)}
-                        >
-                          取消
-                        </button>
-                        <button 
-                          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg disabled:bg-gray-300"
-                          onClick={handleAddDevice} 
-                          disabled={!deviceImei.trim() || !deviceName.trim() || isSubmittingImei}
-                        >
-                          {isSubmittingImei ? "添加中..." : "添加"}
-                        </button>
-                      </div>
+                    </div>
+                    
+                    <div className="flex gap-3">
+                      <button 
+                        className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors"
+                        onClick={() => setIsAddDeviceOpen(false)}
+                      >
+                        取消
+                      </button>
+                      <button 
+                        className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl disabled:bg-gray-300 transition-colors"
+                        onClick={handleAddDevice} 
+                        disabled={!deviceImei.trim() || !deviceName.trim() || isSubmittingImei}
+                      >
+                        {isSubmittingImei ? "添加中..." : "添加"}
+                      </button>
                     </div>
                   </div>
                 )}
@@ -675,21 +694,24 @@ export default function Devices() {
 
       {/* 删除确认弹窗 */}
       {isDeleteDialogOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg max-w-md w-full p-6">
-            <h3 className="text-lg font-semibold mb-2">确认删除</h3>
-            <p className="text-gray-600 mb-6">
-              设备删除后，本设备配置的计划任务操作也将失效。
-            </p>
-            <div className="flex justify-end space-x-2">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-2xl max-w-md w-full p-6">
+            <div className="text-center mb-6">
+              <AlertTriangle className="h-12 w-12 text-red-500 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">确认删除</h3>
+              <p className="text-gray-600">
+                设备删除后，本设备配置的计划任务操作也将失效。
+              </p>
+            </div>
+            <div className="flex gap-3">
               <button 
-                className="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
+                className="flex-1 px-4 py-3 border border-gray-200 rounded-xl hover:bg-gray-50 transition-colors"
                 onClick={handleCancelDelete}
               >
                 取消
               </button>
               <button 
-                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg"
+                className="flex-1 px-4 py-3 bg-red-600 hover:bg-red-700 text-white rounded-xl transition-colors"
                 onClick={handleConfirmDelete}
               >
                 确认删除