zhilv
e3d380f9ab
- CommandCard 支持 primary/secondary 两种样式 - bash/zsh 使用 source <(curl URL)，sh 使用 . <(curl URL)，fish 使用 curl URL | source - 非 Shell 类运行时（python3/node/ruby/php）不显示 source 命令 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { CreateScriptResponse, isShellRuntime, getSourceCommand } from '../types'
|
||
import CommandCard from './CommandCard'
|
||
|
||
interface Props {
|
||
result: CreateScriptResponse
|
||
onReset: () => void
|
||
}
|
||
|
||
export default function ResultCard({ result, onReset }: Props) {
|
||
const detailUrl = `${window.location.origin}/s/${result.id}`
|
||
const showSource = isShellRuntime(result.runtime)
|
||
const sourceCommand = showSource ? getSourceCommand(result.url, result.runtime) : null
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="text-center">
|
||
<div className="text-4xl mb-2">✅</div>
|
||
<h2 className="text-xl font-bold">运行链接已生成</h2>
|
||
</div>
|
||
|
||
<CommandCard command={result.command} />
|
||
|
||
{showSource && sourceCommand && (
|
||
<div>
|
||
<p className="text-xs text-gray-500 mb-2">
|
||
如果脚本设置了环境变量（如代理），请使用以下命令在当前 shell 中执行：
|
||
</p>
|
||
<CommandCard
|
||
command={sourceCommand}
|
||
label="继承环境变量"
|
||
variant="secondary"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="bg-gray-800/50 border border-gray-700 rounded-lg p-4 space-y-3">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">脚本 ID</span>
|
||
<span className="font-mono text-blue-400">{result.id}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">运行环境</span>
|
||
<span>{result.runtime}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">过期时间</span>
|
||
<span>{new Date(result.expires_at).toLocaleString('zh-CN')}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">详情页</span>
|
||
<a
|
||
href={detailUrl}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="text-blue-400 hover:underline font-mono text-xs"
|
||
>
|
||
{detailUrl}
|
||
</a>
|
||
</div>
|
||
<div className="pt-2 border-t border-gray-700">
|
||
<div className="text-xs text-gray-500 mb-1">管理令牌（请妥善保存，仅此一次）</div>
|
||
<div className="font-mono text-xs bg-gray-900 px-3 py-2 rounded break-all select-all">
|
||
{result.admin_token}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-3 justify-center">
|
||
<button
|
||
onClick={onReset}
|
||
className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-sm transition-colors"
|
||
>
|
||
创建另一个
|
||
</button>
|
||
<a
|
||
href={detailUrl}
|
||
target="_blank"
|
||
rel="noreferrer"
|
||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors"
|
||
>
|
||
查看详情
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|