yovinchen/claudia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复过长 bug

Browse Source
This commit is contained in:
YoVinchen
2025-10-26 01:29:06 +08:00
parent 1544622289
commit 9d8af49fb2
1 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/RelayStationManager.tsx
View File

@@ -138,6 +138,17 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
return `${start}${'*'.repeat(middleLength)}${end}`; return `${start}${'*'.repeat(middleLength)}${end}`;
}; };
// 从中间截断长文本函数
const truncateMiddle = (text: string, maxLength: number = 60): string => {
if (!text || text.length <= maxLength) {
return text;
}
const half = Math.floor(maxLength / 2) - 1;
const start = text.substring(0, half);
const end = text.substring(text.length - half);
return `${start}…${end}`;
};
// 显示Toast // 显示Toast
const showToast = (message: string, type: "success" | "error" = "success") => { const showToast = (message: string, type: "success" | "error" = "success") => {
setToast({ message, type }); setToast({ message, type });
@@ -637,21 +648,21 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex gap-4"> <div className="flex gap-4 max-w-full overflow-hidden">
{/* 左侧数据展示 */} {/* 左侧数据展示 */}
<div className="flex-1 space-y-2"> <div className="flex-1 min-w-0 space-y-2">
<div className="text-sm font-medium mb-2">{t('relayStation.configPreview')}</div> <div className="text-sm font-medium mb-2">{t('relayStation.configPreview')}</div>
<div className="space-y-1.5 text-sm"> <div className="space-y-1.5 text-sm">
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<span className="text-muted-foreground min-w-[80px]">API URL:</span> <span className="text-muted-foreground min-w-[80px] flex-shrink-0">API URL:</span>
<span className="font-mono text-xs break-all"> <span className="font-mono text-xs">
{currentConfig.api_url || t('relayStation.notConfigured')} {currentConfig.api_url ? truncateMiddle(currentConfig.api_url, 50) : t('relayStation.notConfigured')}
</span> </span>
</div> </div>
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<span className="text-muted-foreground min-w-[80px]">API Token:</span> <span className="text-muted-foreground min-w-[80px] flex-shrink-0">API Token:</span>
<span className="font-mono text-xs"> <span className="font-mono text-xs">
{currentConfig.api_token ? maskToken(currentConfig.api_token) : t('relayStation.notConfigured')} {currentConfig.api_token ? truncateMiddle(maskToken(currentConfig.api_token), 40) : t('relayStation.notConfigured')}
</span> </span>
</div> </div>
<div className="text-xs text-muted-foreground mt-2"> <div className="text-xs text-muted-foreground mt-2">
@@ -661,7 +672,7 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
</div> </div>
{/* 右侧按钮区域 */} {/* 右侧按钮区域 */}
<div className="flex flex-col gap-2 min-w-[100px]"> <div className="flex flex-col gap-2 w-[140px] flex-shrink-0">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
@@ -677,7 +688,7 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
) : ( ) : (
<RefreshCw className="h-4 w-4 mr-2" /> <RefreshCw className="h-4 w-4 mr-2" />
)} )}
<span className="text-xs">{t('relayStation.syncConfig')}</span> <span className="text-xs truncate">{t('relayStation.syncConfig')}</span>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -691,7 +702,7 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
) : ( ) : (
<RefreshCw className="h-4 w-4 mr-2" /> <RefreshCw className="h-4 w-4 mr-2" />
)} )}
<span className="text-xs">{t('relayStation.flushDns')}</span> <span className="text-xs truncate">{t('relayStation.flushDns')}</span>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -700,7 +711,7 @@ const RelayStationManager: React.FC<RelayStationManagerProps> = ({ onBack }) =>
className="w-full h-9 justify-start" className="w-full h-9 justify-start"
> >
<Eye className="h-4 w-4 mr-2" /> <Eye className="h-4 w-4 mr-2" />
<span className="text-xs">{t('relayStation.viewJson')}</span> <span className="text-xs truncate">{t('relayStation.viewJson')}</span>
</Button> </Button>
</div> </div>
</div> </div>