polish: refine admin ui controls

This commit is contained in:
JetSprow
2026-05-01 00:58:46 +10:00
parent b8a7cab1af
commit 4dd2f9280f
30 changed files with 651 additions and 307 deletions

View File

@@ -74,7 +74,7 @@ export function LatencyDetailDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-3xl max-h-[85vh] overflow-y-auto">
<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-[34rem]">
<DialogHeader>
<DialogTitle className="inline-flex items-center gap-2">
<Activity className="size-4 text-primary" />

View File

@@ -98,7 +98,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
<DialogContent className="flex max-h-[90vh] flex-col overflow-hidden sm:max-w-[39rem]">
<DialogHeader>
<div className="inline-flex w-fit items-center gap-2 rounded-full border border-primary/15 bg-primary/10 px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.14em] text-primary">
<Network className="size-3.5" /> PROXY
@@ -109,9 +109,9 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
</DialogDescription>
</DialogHeader>
<div className="overflow-y-auto -mx-6 px-6 space-y-4">
<div className="-mx-4 space-y-3 overflow-y-auto px-4">
{/* Compact info row — above the grid so both columns align */}
<div className="flex flex-wrap gap-2 text-sm">
<div className="flex flex-wrap gap-2 text-xs">
<span className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted/20 px-2.5 py-1.5">
<Server className="size-3.5 text-primary" />
{plan.nodeName}
@@ -122,7 +122,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
</span>
</div>
<div className={`grid items-start gap-6 ${networkInsightsEnabled ? "lg:grid-cols-[1fr_20rem]" : ""}`}>
<div className={`grid items-start gap-4 ${networkInsightsEnabled ? "lg:grid-cols-[1fr_14rem]" : ""}`}>
{/* Left: purchase config — always visible without scrolling */}
<div className="space-y-3">
<ProxyInboundSelect
@@ -154,9 +154,8 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
<div className="flex gap-2">
<Button
size="lg"
variant="outline"
className="flex-1"
className="h-8 flex-1"
onClick={handleAddToCart}
disabled={cartLoading || !plan.isAvailable || !hasInboundOptions}
>
@@ -164,8 +163,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
{cartLoading ? "正在加入..." : "加入购物车"}
</Button>
<Button
size="lg"
className="flex-1"
className="h-8 flex-1"
onClick={handlePurchase}
disabled={loading || !plan.isAvailable || !hasInboundOptions}
>
@@ -175,7 +173,7 @@ export function ProxyDetailDialog({ open, onOpenChange, plan, networkInsightsEna
</div>
{!plan.isAvailable && (
<Button variant="outline" size="lg" className="w-full" onClick={checkAvailability} disabled={checking}>
<Button variant="outline" className="h-8 w-full" onClick={checkAvailability} disabled={checking}>
{checking ? "查询中..." : "查看补位时间"}
</Button>
)}

View File

@@ -17,7 +17,7 @@ interface ProxyTraceDetailDialogProps {
export function ProxyTraceDetailDialog({ trace, onOpenChange }: ProxyTraceDetailDialogProps) {
return (
<Dialog open={trace !== null} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-2xl max-h-[80vh] overflow-y-auto">
<DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-[30rem]">
<DialogHeader>
<DialogTitle>
{trace ? `${getCarrierLabel(trace.carrier)} 路由 — ${trace.summary}` : "路由详情"}

View File

@@ -60,7 +60,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
<DialogContent className="flex max-h-[90vh] max-w-[30rem] flex-col overflow-hidden">
<DialogHeader>
<div className="inline-flex w-fit items-center gap-2 rounded-full border border-amber-500/15 bg-amber-500/10 px-2.5 py-1 text-[0.68rem] font-semibold tracking-[0.14em] text-amber-700 dark:text-amber-300">
<Film className="size-3.5" /> STREAMING
@@ -71,7 +71,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
</DialogDescription>
</DialogHeader>
<div className="overflow-y-auto -mx-6 px-6 space-y-5">
<div className="-mx-4 space-y-3 overflow-y-auto px-4">
{plan.description && (
<div>
<p className="mb-2 text-xs font-semibold tracking-[0.14em] text-muted-foreground">
@@ -102,7 +102,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
<div className="grid gap-2 sm:grid-cols-2">
<Button
size="lg"
className="h-8"
variant="outline"
onClick={handleAddToCart}
disabled={cartLoading || !plan.isAvailable}
@@ -111,7 +111,7 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
{cartLoading ? "正在加入..." : "加入购物车"}
</Button>
<Button
size="lg"
className="h-8"
onClick={handlePurchase}
disabled={loading || !plan.isAvailable}
>
@@ -121,9 +121,8 @@ export function StreamingDetailDialog({ open, onOpenChange, plan }: Props) {
{!plan.isAvailable && (
<Button
size="lg"
variant="outline"
className="w-full"
className="h-8 w-full"
onClick={checkAvailability}
disabled={checking}
>