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

存一版样式问题
This commit is contained in:
笔记本里的永平
2025-07-07 16:34:06 +08:00
parent 289947e68f
commit 6543da9167
5 changed files with 2909 additions and 59 deletions

View File

@@ -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>
);
}