136 lines
4.9 KiB
TypeScript
136 lines
4.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { Monitor, Globe, Cpu, Info } from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { toast } from "sonner";
|
||
|
||
export default function UAPage() {
|
||
const [ua, setUa] = useState("");
|
||
const [info, setInfo] = useState<any>(null);
|
||
|
||
useEffect(() => {
|
||
const currentUA = navigator.userAgent;
|
||
setUa(currentUA);
|
||
parseUA(currentUA);
|
||
}, []);
|
||
|
||
const parseUA = (userAgent: string) => {
|
||
if (!userAgent) return;
|
||
|
||
const browser = {
|
||
name: "未知浏览器",
|
||
version: ""
|
||
};
|
||
|
||
const os = {
|
||
name: "未知操作系统",
|
||
version: ""
|
||
};
|
||
|
||
// Simple Browser Detection
|
||
if (userAgent.indexOf("Edg") > -1) { browser.name = "Edge"; }
|
||
else if (userAgent.indexOf("Chrome") > -1) { browser.name = "Chrome"; }
|
||
else if (userAgent.indexOf("Firefox") > -1) { browser.name = "Firefox"; }
|
||
else if (userAgent.indexOf("Safari") > -1) { browser.name = "Safari"; }
|
||
|
||
// Simple OS Detection
|
||
if (userAgent.indexOf("Windows") > -1) { os.name = "Windows"; }
|
||
else if (userAgent.indexOf("Mac OS") > -1) { os.name = "macOS"; }
|
||
else if (userAgent.indexOf("Android") > -1) { os.name = "Android"; }
|
||
else if (userAgent.indexOf("iPhone") > -1 || userAgent.indexOf("iPad") > -1) { os.name = "iOS"; }
|
||
else if (userAgent.indexOf("Linux") > -1) { os.name = "Linux"; }
|
||
|
||
setInfo({ browser, os });
|
||
};
|
||
|
||
const resetToMine = () => {
|
||
const currentUA = navigator.userAgent;
|
||
setUa(currentUA);
|
||
parseUA(currentUA);
|
||
toast.success("已重置为当前浏览器 UA");
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
<div className="flex items-center space-x-4 border-b pb-4">
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-slate-600 to-slate-800 shadow-lg">
|
||
<Monitor className="h-6 w-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight">User-Agent 解析</h1>
|
||
<p className="text-muted-foreground">解析浏览器 User-Agent 字符串详细信息</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-6">
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-base">UA 字符串</CardTitle>
|
||
<Button variant="outline" size="sm" onClick={resetToMine}>使用我的 UA</Button>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Textarea
|
||
value={ua}
|
||
onChange={(e) => {
|
||
setUa(e.target.value);
|
||
parseUA(e.target.value);
|
||
}}
|
||
className="font-mono min-h-25"
|
||
placeholder="请在此粘贴 User-Agent 字符串..."
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{info && (
|
||
<div className="grid md:grid-cols-2 gap-6">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base flex items-center gap-2">
|
||
<Globe className="h-4 w-4 text-blue-500" />
|
||
浏览器信息
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between border-b pb-2">
|
||
<span className="text-muted-foreground">内核/名称</span>
|
||
<span className="font-bold">{info.browser.name}</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base flex items-center gap-2">
|
||
<Cpu className="h-4 w-4 text-orange-500" />
|
||
操作系统
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center justify-between border-b pb-2">
|
||
<span className="text-muted-foreground">系统名称</span>
|
||
<span className="font-bold">{info.os.name}</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)}
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base flex items-center gap-2">
|
||
<Info className="h-4 w-4" />
|
||
什么是 User-Agent？
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="text-sm text-muted-foreground leading-relaxed">
|
||
User-Agent (UA) 是一个包含在 HTTP 请求头中的字符串，它向服务器标识用户所使用的操作系统、浏览器及其版本、渲染引擎等信息。服务器可以根据不同的 UA 返回适配的页面内容。
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|