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

3
README.md
View File

@@ -19,12 +19,13 @@
</p>
<p align="center">
<img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
<img src="https://img.shields.io/badge/platform-MacOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
<img src="https://img.shields.io/badge/electron-40+-47848F?logo=electron" alt="Electron" />
<img src="https://img.shields.io/badge/react-19-61DAFB?logo=react" alt="React" />
<a href="https://discord.com/invite/84Kex3GGAh" target="_blank">
<img src="https://img.shields.io/discord/1399603591471435907?logo=discord&labelColor=%20%235462eb&logoColor=%20%23f5f5f5&color=%20%235462eb" alt="chat on Discord" />
</a>
<img src="https://img.shields.io/github/downloads/ValueCell-ai/ClawX/total?color=%23027DEB" alt="Downloads" />
<img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
</p>

3
README.zh-CN.md
View File

@@ -19,12 +19,13 @@
</p>
<p align="center">
<img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
<img src="https://img.shields.io/badge/platform-MacOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
<img src="https://img.shields.io/badge/electron-40+-47848F?logo=electron" alt="Electron" />
<img src="https://img.shields.io/badge/react-19-61DAFB?logo=react" alt="React" />
<a href="https://discord.com/invite/84Kex3GGAh" target="_blank">
<img src="https://img.shields.io/discord/1399603591471435907?logo=discord&labelColor=%20%235462eb&logoColor=%20%23f5f5f5&color=%20%235462eb" alt="chat on Discord" />
</a>
<img src="https://img.shields.io/github/downloads/ValueCell-ai/ClawX/total?color=%23027DEB" alt="Downloads" />
<img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
</p>

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>