admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(guide): opt guide frontend optimization (#88)

Browse Source
This commit is contained in:
Haze
2026-02-14 20:35:32 +08:00
committed by GitHub
Unverified
parent bbc0f8f818
commit 26ce009a41
3 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/Setup/index.tsx
View File

@@ -23,6 +23,7 @@ import {
import { TitleBar } from '@/components/layout/TitleBar';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
import { useGatewayStore } from '@/stores/gateway';
@@ -559,27 +560,43 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
}
};
const ERROR_TRUNCATE_LEN = 30;
const renderStatus = (status: 'checking' | 'success' | 'error', message: string) => {
if (status === 'checking') {
return (
<span className="flex items-center gap-2 text-yellow-400">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="flex items-center gap-2 text-yellow-400 whitespace-nowrap">
<Loader2 className="h-5 w-5 flex-shrink-0 animate-spin" />
{message || 'Checking...'}
</span>
);
}
if (status === 'success') {
return (
<span className="flex items-center gap-2 text-green-400">
<CheckCircle2 className="h-4 w-4" />
<span className="flex items-center gap-2 text-green-400 whitespace-nowrap">
<CheckCircle2 className="h-5 w-5 flex-shrink-0" />
{message}
</span>
);
}
const isLong = message.length > ERROR_TRUNCATE_LEN;
const displayMsg = isLong ? message.slice(0, ERROR_TRUNCATE_LEN) : message;
return (
<span className="flex items-center gap-2 text-red-400">
<XCircle className="h-4 w-4" />
{message}
<span className="flex items-center gap-2 text-red-400 whitespace-nowrap">
<XCircle className="h-5 w-5 flex-shrink-0" />
<span>{displayMsg}</span>
{isLong && (
<Tooltip>
<TooltipTrigger asChild>
<span className="cursor-pointer text-red-300 hover:text-red-200 font-medium">...</span>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-sm whitespace-normal break-words text-xs">
{message}
</TooltipContent>
</Tooltip>
)}
</span>
);
};
@@ -599,23 +616,27 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
</div>
</div>
<div className="space-y-3">
<div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
<span>{t('runtime.nodejs')}</span>
{renderStatus(checks.nodejs.status, checks.nodejs.message)}
<div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
<span className="text-left">{t('runtime.nodejs')}</span>
<div className="flex justify-end">
{renderStatus(checks.nodejs.status, checks.nodejs.message)}
</div>
</div>
<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
<div>
<div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
<div className="text-left min-w-0">
<span>{t('runtime.openclaw')}</span>
{openclawDir && (
<p className="text-xs text-muted-foreground mt-0.5 font-mono truncate max-w-[300px]">
<p className="text-xs text-muted-foreground mt-0.5 font-mono break-all">
{openclawDir}
</p>
)}
</div>
{renderStatus(checks.openclaw.status, checks.openclaw.message)}
<div className="flex justify-end self-start mt-0.5">
{renderStatus(checks.openclaw.status, checks.openclaw.message)}
</div>
</div>
<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
<div className="flex items-center gap-2">
<div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
<div className="flex items-center gap-2 text-left">
<span>Gateway Service</span>
{checks.gateway.status === 'error' && (
<Button variant="outline" size="sm" onClick={handleStartGateway}>
@@ -623,7 +644,9 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
</Button>
)}
</div>
{renderStatus(checks.gateway.status, checks.gateway.message)}
<div className="flex justify-end">
{renderStatus(checks.gateway.status, checks.gateway.message)}
</div>
</div>
</div>