typist/litek
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update network tool components for improved user experience

Browse Source 
- Translated UI text in DNS, Ping, TCPing, and Speed Test components from Chinese to English for better accessibility.
- Enhanced user prompts and labels for clarity, including error messages and button texts.
- Updated comments in the code to reflect the changes in language and improve code readability.
This commit is contained in:
typist
2025-10-29 05:51:10 +08:00
parent 3f7c81e892
commit 82c68471df
4 changed files with 110 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/tool/network/speedtest.tsx
View File

@@ -68,7 +68,7 @@ const Tool: FC = () => {
return { performance: metrics };
} else {
// 如果没有详细的性能数据，只返回总时间
// If no detailed performance data, only return total time
return {
performance: {
dns: 0,
@@ -144,13 +144,13 @@ const Tool: FC = () => {
const startTest = async () => {
if (!url.trim()) {
toast.error("请输入 URL");
toast.error("Please enter a URL");
return;
}
let targetUrl = url.trim();
// 如果没有协议前缀，默认使用 https://
// If no protocol prefix, default to https://
if (!targetUrl.startsWith("http://") && !targetUrl.startsWith("https://")) {
targetUrl = `https://${targetUrl}`;
}
@@ -164,24 +164,24 @@ const Tool: FC = () => {
switch (testType) {
case "performance":
testResult = await testPerformance(targetUrl);
toast.success("性能测试完成");
toast.success("Performance test completed");
break;
case "download":
testResult = await testDownloadSpeed(targetUrl);
toast.success("下载速度测试完成");
toast.success("Download speed test completed");
break;
case "upload":
testResult = await testUploadSpeed(targetUrl);
toast.success("上传速度测试完成");
toast.success("Upload speed test completed");
break;
}
setResult(testResult);
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(`测试失败: ${error.message}`);
toast.error(`Test failed: ${error.message}`);
} else {
toast.error("测试失败");
toast.error("Test failed");
}
} finally {
setTesting(false);
@@ -198,24 +198,24 @@ const Tool: FC = () => {
<div className="flex flex-col gap-4 h-full">
<div className="border rounded-md p-3 bg-yellow-500/10 border-yellow-500/50">
<div className="text-sm font-medium text-yellow-600 dark:text-yellow-400 mb-1">
⚠️ CORS 限制说明
⚠️ CORS Restrictions
</div>
<div className="text-xs text-muted-foreground space-y-1">
<p>由于浏览器的 CORS 安全策略，部分网站可能无法直接测试。</p>
<p>建议测试以下类型的网站：</p>
<p>Due to browser CORS security policies, some websites cannot be tested directly.</p>
<p>Recommended websites to test:</p>
<ul className="list-disc list-inside ml-2">
<li>支持 CORS 的公共 API</li>
<li>您自己控制的网站（可配置 CORS 头）</li>
<li>使用 CORS 代理服务</li>
<li>Public APIs with CORS support</li>
<li>Your own websites (with configured CORS headers)</li>
<li>Using CORS proxy services</li>
</ul>
</div>
</div>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<label className="text-sm font-medium">目标 URL</label>
<label className="text-sm font-medium">Target URL</label>
<Input
placeholder="例如: https://example.com"
placeholder="e.g. https://example.com"
value={url}
onChange={(e) => setUrl(e.target.value)}
onKeyPress={handleKeyPress}
@@ -224,7 +224,7 @@ const Tool: FC = () => {
</div>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium">测试类型</label>
<label className="text-sm font-medium">Test Type</label>
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
value={testType}
@@ -233,58 +233,58 @@ const Tool: FC = () => {
}
disabled={testing}
>
<option value="performance">页面加载性能</option>
<option value="download">下载速度</option>
<option value="upload">上传速度</option>
<option value="performance">Page Load Performance</option>
<option value="download">Download Speed</option>
<option value="upload">Upload Speed</option>
</select>
</div>
<Button onClick={startTest} disabled={testing} className="w-full">
{testing && <Loader2 className="mr-2 size-4 animate-spin" />}
{testing ? "测试中..." : "开始测试"}
{testing ? "Testing..." : "Start Test"}
</Button>
</div>
{result && (
<div className="flex flex-col gap-3 flex-1 overflow-auto">
<div className="text-sm font-medium">测试结果:</div>
<div className="text-sm font-medium">Test Results:</div>
{result.performance && (
<div className="border rounded-md p-3 bg-card text-card-foreground">
<div className="text-sm font-medium mb-3">页面加载性能</div>
<div className="text-sm font-medium mb-3">Page Load Performance</div>
<div className="space-y-2">
{result.performance.dns > 0 && (
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="text-muted-foreground">DNS 查询:</div>
<div className="text-muted-foreground">DNS Lookup:</div>
<div>{result.performance.dns.toFixed(2)} ms</div>
</div>
)}
{result.performance.tcp > 0 && (
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="text-muted-foreground">TCP 连接:</div>
<div className="text-muted-foreground">TCP Connection:</div>
<div>{result.performance.tcp.toFixed(2)} ms</div>
</div>
)}
{result.performance.ssl > 0 && (
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="text-muted-foreground">SSL 握手:</div>
<div className="text-muted-foreground">SSL Handshake:</div>
<div>{result.performance.ssl.toFixed(2)} ms</div>
</div>
)}
{result.performance.ttfb > 0 && (
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="text-muted-foreground">首字节时间 (TTFB):</div>
<div className="text-muted-foreground">Time to First Byte (TTFB):</div>
<div>{result.performance.ttfb.toFixed(2)} ms</div>
</div>
)}
{result.performance.download > 0 && (
<div className="grid grid-cols-2 gap-2 text-sm">
<div className="text-muted-foreground">内容下载:</div>
<div className="text-muted-foreground">Content Download:</div>
<div>{result.performance.download.toFixed(2)} ms</div>
</div>
)}
<div className="grid grid-cols-2 gap-2 text-sm border-t pt-2 mt-2">
<div className="text-muted-foreground font-medium">总时间:</div>
<div className="text-muted-foreground font-medium">Total Time:</div>
<div className="font-medium">
{result.performance.total.toFixed(2)} ms
</div>
@@ -295,7 +295,7 @@ const Tool: FC = () => {
{result.downloadSpeed !== undefined && (
<div className="border rounded-md p-3 bg-card text-card-foreground">
<div className="text-sm font-medium mb-3">下载速度</div>
<div className="text-sm font-medium mb-3">Download Speed</div>
<div className="text-2xl font-bold text-green-500">
{result.downloadSpeed.toFixed(2)} Mbps
</div>
@@ -307,7 +307,7 @@ const Tool: FC = () => {
{result.uploadSpeed !== undefined && (
<div className="border rounded-md p-3 bg-card text-card-foreground">
<div className="text-sm font-medium mb-3">上传速度</div>
<div className="text-sm font-medium mb-3">Upload Speed</div>
<div className="text-2xl font-bold text-blue-500">
{result.uploadSpeed.toFixed(2)} Mbps
</div>
@@ -321,13 +321,13 @@ const Tool: FC = () => {
{testType === "download" && (
<div className="text-xs text-muted-foreground">
提示: 下载速度测试会下载目标 URL 的内容并计算速度
Note: Download speed test will download content from the target URL and calculate speed
</div>
)}
{testType === "upload" && (
<div className="text-xs text-muted-foreground">
提示: 上传速度测试会向目标 URL 发送 1MB 测试数据
Note: Upload speed test will send 1MB of test data to the target URL
</div>
)}
</div>