From 1a62ad2034e440868452608a867e2b948edd3478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=B3=E6=B8=85=E7=88=BD?= <eison.icu@gmail.com>
Date: Fri, 16 May 2025 14:24:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=81=E5=9F=9F=E6=93=8D=E7=9B=98=E6=89=8B?=
 =?UTF-8?q?=20-=20=E7=A7=BB=E9=99=A4=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=88=97=E8=A1=A8=E7=9A=84=E5=8C=85=E8=A3=B9?=
 =?UTF-8?q?=E5=B1=82=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cunkebao/app/devices/page.tsx | 174 +++++++++++++++++-----------------
 1 file changed, 86 insertions(+), 88 deletions(-)

diff --git a/Cunkebao/app/devices/page.tsx b/Cunkebao/app/devices/page.tsx
index 0b2b53106..c717b706b 100644
--- a/Cunkebao/app/devices/page.tsx
+++ b/Cunkebao/app/devices/page.tsx
@@ -646,96 +646,94 @@ export default function DevicesPage() {
           </Card>
         </div>
 
-        <Card className="p-4">
-          <div className="space-y-3">
-            <div className="flex items-center space-x-2">
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-                <Input
-                  placeholder="搜索设备IMEI/备注"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-9"
-                />
-              </div>
-              <Button variant="outline" size="icon">
-                <Filter className="h-4 w-4" />
-              </Button>
-              <Button variant="outline" size="icon" onClick={handleRefresh}>
-                <RefreshCw className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="flex items-center space-x-4">
-                <Select value={statusFilter} onValueChange={setStatusFilter}>
-                  <SelectTrigger className="w-[120px]">
-                    <SelectValue placeholder="全部状态" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">全部状态</SelectItem>
-                    <SelectItem value="online">在线</SelectItem>
-                    <SelectItem value="offline">离线</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <Button
-                variant="destructive"
-                size="sm"
-                onClick={handleDeleteClick}
-                disabled={!selectedDeviceId}
-              >
-                删除
-              </Button>
-            </div>
-
-            <div className="space-y-2">
-              {filteredDevices.map((device) => (
-                <Card
-                  key={device.id}
-                  className="p-3 hover:shadow-md transition-shadow cursor-pointer relative"
-                  onClick={(e) => handleDeviceClick(device.id, e)}
-                >
-                  <div className="flex items-center space-x-3">
-                    <Checkbox
-                      checked={selectedDeviceId === device.id}
-                      onCheckedChange={(checked) => {
-                        if (checked) {
-                          setSelectedDeviceId(device.id)
-                        } else {
-                          setSelectedDeviceId(null)
-                        }
-                      }}
-                      onClick={(e) => e.stopPropagation()}
-                    />
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center justify-between mb-1">
-                        <div className="font-medium truncate">{device.memo || "未命名设备"}</div>
-                        <Badge variant={device.status === "online" ? "default" : "secondary"} className="ml-2">
-                          {device.status === "online" ? "在线" : "离线"}
-                        </Badge>
-                      </div>
-                      <div className="text-sm text-gray-500 flex items-center imei-display-area">
-                        <span className="mr-1">IMEI:</span>
-                        <ImeiDisplay imei={device.imei} containerWidth={180} />
-                      </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>
-                    </div>
-                  </div>
-                </Card>
-              ))}
-
-              <div ref={observerTarget} className="h-10 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>}
-            </div>
+        <div className="bg-white p-4 rounded-lg shadow-sm space-y-3 mb-4">
+          <div className="flex items-center space-x-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Input
+                placeholder="搜索设备IMEI/备注"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 bg-white border-gray-200 focus:border-blue-500"
+              />
             </div>
+            <Button variant="outline" size="icon" className="bg-white hover:bg-gray-50">
+              <Filter className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon" onClick={handleRefresh} className="bg-white hover:bg-gray-50">
+              <RefreshCw className="h-4 w-4" />
+            </Button>
           </div>
-        </Card>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger className="w-[120px] bg-white">
+                  <SelectValue placeholder="全部状态" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部状态</SelectItem>
+                  <SelectItem value="online">在线</SelectItem>
+                  <SelectItem value="offline">离线</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={handleDeleteClick}
+              disabled={!selectedDeviceId}
+            >
+              删除
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          {filteredDevices.map((device) => (
+            <div
+              key={device.id}
+              className="bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer relative"
+              onClick={(e) => handleDeviceClick(device.id, e)}
+            >
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  checked={selectedDeviceId === device.id}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      setSelectedDeviceId(device.id)
+                    } else {
+                      setSelectedDeviceId(null)
+                    }
+                  }}
+                  onClick={(e) => e.stopPropagation()}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between mb-1">
+                    <div className="font-medium truncate">{device.memo || "未命名设备"}</div>
+                    <Badge variant={device.status === "online" ? "default" : "secondary"} className="ml-2">
+                      {device.status === "online" ? "在线" : "离线"}
+                    </Badge>
+                  </div>
+                  <div className="text-sm text-gray-500 flex items-center imei-display-area">
+                    <span className="mr-1">IMEI:</span>
+                    <ImeiDisplay imei={device.imei} containerWidth={180} />
+                  </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>
+                </div>
+              </div>
+            </div>
+          ))}
+
+          <div ref={observerTarget} className="h-10 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>}
+          </div>
+        </div>
       </div>
 
       <Dialog open={isAddDeviceOpen} onOpenChange={(open) => {