refactor: unify EndpointSpeedTest with shadcn/ui components

Replace native HTML elements with shadcn/ui components:
- <button> → <Button> with variants (default, outline, ghost)
- <input type="url"> → <Input> component

Benefits:
- Consistent styling across the application
- Better accessibility and theming support
- Reduced custom CSS classes
- Type-safe component props
This commit is contained in:
Jason
2025-10-17 19:20:57 +08:00
parent 0cff882a3f
commit 9fb000b8fe

View File

@@ -4,6 +4,8 @@ import { Zap, Loader2, Plus, X, AlertCircle, Save } from "lucide-react";
import { isLinux } from "@/lib/platform"; import { isLinux } from "@/lib/platform";
import type { AppType } from "@/lib/api"; import type { AppType } from "@/lib/api";
import { vscodeApi } from "@/lib/api/vscode"; import { vscodeApi } from "@/lib/api/vscode";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
// 临时类型定义,待后端 API 实现后替换 // 临时类型定义,待后端 API 实现后替换
@@ -457,14 +459,15 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
<h3 className="text-base font-medium text-gray-900 dark:text-gray-100"> <h3 className="text-base font-medium text-gray-900 dark:text-gray-100">
{t("endpointTest.title")} {t("endpointTest.title")}
</h3> </h3>
<button <Button
type="button" type="button"
onClick={onClose} onClick={onClose}
className="p-1 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors" variant="ghost"
size="icon"
aria-label={t("common.close")} aria-label={t("common.close")}
> >
<X size={16} /> <X size={16} />
</button> </Button>
</div> </div>
{/* Content */} {/* Content */}
@@ -484,11 +487,12 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
/> />
{t("endpointTest.autoSelect")} {t("endpointTest.autoSelect")}
</label> </label>
<button <Button
type="button" type="button"
onClick={runSpeedTest} onClick={runSpeedTest}
disabled={isTesting || !hasEndpoints} disabled={isTesting || !hasEndpoints}
className="flex h-7 w-20 items-center justify-center gap-1.5 rounded-md bg-blue-500 px-2.5 text-xs font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-blue-600 dark:hover:bg-blue-700" size="sm"
className="h-7 w-20 gap-1.5 text-xs"
> >
{isTesting ? ( {isTesting ? (
<> <>
@@ -501,14 +505,14 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
{t("endpointTest.testSpeed")} {t("endpointTest.testSpeed")}
</> </>
)} )}
</button> </Button>
</div> </div>
</div> </div>
{/* 添加输入 */} {/* 添加输入 */}
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex gap-2"> <div className="flex gap-2">
<input <Input
type="url" type="url"
value={customUrl} value={customUrl}
placeholder={t("endpointTest.addEndpointPlaceholder")} placeholder={t("endpointTest.addEndpointPlaceholder")}
@@ -519,15 +523,16 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
handleAddEndpoint(); handleAddEndpoint();
} }
}} }}
className="flex-1 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-sm text-gray-900 placeholder-gray-400 transition focus:border-gray-400 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:border-gray-600" className="flex-1"
/> />
<button <Button
type="button" type="button"
onClick={handleAddEndpoint} onClick={handleAddEndpoint}
className="flex h-8 w-8 items-center justify-center rounded-md border border-gray-200 transition hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-800" variant="outline"
size="icon"
> >
<Plus className="h-4 w-4 text-gray-600 dark:text-gray-400" /> <Plus className="h-4 w-4" />
</button> </Button>
</div> </div>
{addError && ( {addError && (
<div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400"> <div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
@@ -632,14 +637,10 @@ const EndpointSpeedTest: React.FC<EndpointSpeedTestProps> = ({
{/* Footer */} {/* Footer */}
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800"> <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-800">
<button <Button type="button" onClick={onClose} className="gap-2">
type="button"
onClick={onClose}
className="px-4 py-2 bg-blue-500 dark:bg-blue-600 text-white rounded-lg hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors text-sm font-medium flex items-center gap-2"
>
<Save className="w-4 h-4" /> <Save className="w-4 h-4" />
{t("common.save")} {t("common.save")}
</button> </Button>
</div> </div>
</div> </div>
</div> </div>