diff --git a/frontend/src/components/CommandCard.tsx b/frontend/src/components/CommandCard.tsx index 63a4f13..20d0489 100644 --- a/frontend/src/components/CommandCard.tsx +++ b/frontend/src/components/CommandCard.tsx @@ -2,9 +2,11 @@ import { useState } from 'react' interface Props { command: string + label?: string + variant?: 'primary' | 'secondary' } -export default function CommandCard({ command }: Props) { +export default function CommandCard({ command, label = '运行命令', variant = 'primary' }: Props) { const [copied, setCopied] = useState(false) const handleCopy = () => { @@ -14,18 +16,38 @@ export default function CommandCard({ command }: Props) { }) } + const isPrimary = variant === 'primary' + return ( -
-
- 运行命令 +
+
+ + {label} +
- + {command} diff --git a/frontend/src/components/ResultCard.tsx b/frontend/src/components/ResultCard.tsx index 0a7c298..f422ccf 100644 --- a/frontend/src/components/ResultCard.tsx +++ b/frontend/src/components/ResultCard.tsx @@ -1,4 +1,4 @@ -import { CreateScriptResponse } from '../types' +import { CreateScriptResponse, isShellRuntime, getSourceCommand } from '../types' import CommandCard from './CommandCard' interface Props { @@ -8,6 +8,8 @@ interface Props { 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 (
@@ -18,6 +20,19 @@ export default function ResultCard({ result, onReset }: Props) { + {showSource && sourceCommand && ( +
+

+ 如果脚本设置了环境变量(如代理),请使用以下命令在当前 shell 中执行: +

+ +
+ )} +
脚本 ID diff --git a/frontend/src/pages/ScriptDetail.tsx b/frontend/src/pages/ScriptDetail.tsx index ac97701..60b543c 100644 --- a/frontend/src/pages/ScriptDetail.tsx +++ b/frontend/src/pages/ScriptDetail.tsx @@ -3,7 +3,7 @@ import { useParams, Link } from 'react-router-dom' import ScriptViewer from '../components/ScriptViewer' import CommandCard from '../components/CommandCard' import { getScript } from '../lib/api' -import { ScriptDetail as ScriptDetailType } from '../types' +import { ScriptDetail as ScriptDetailType, isShellRuntime, getSourceCommand } from '../types' export default function ScriptDetail() { const { id } = useParams<{ id: string }>() @@ -41,6 +41,10 @@ export default function ScriptDetail() { } const command = `curl ${window.location.origin}/raw/${script.id} | ${script.runtime}` + const showSource = isShellRuntime(script.runtime) + const sourceCommand = showSource + ? getSourceCommand(`${window.location.origin}/raw/${script.id}`, script.runtime) + : null return (
@@ -64,6 +68,18 @@ export default function ScriptDetail() {
+ {showSource && sourceCommand && ( +
+

+ 如果脚本设置了环境变量(如代理),请使用以下命令在当前 shell 中执行: +

+ +
+ )}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts index 8b63302..7f29be1 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -37,3 +37,18 @@ export const EXPIRES_OPTIONS: { value: ExpiresIn; label: string }[] = [ { value: '7d', label: '7 天' }, { value: '30d', label: '30 天' }, ] + +const SOURCE_TEMPLATES: Record = { + bash: 'source <(curl {url})', + zsh: 'source <(curl {url})', + sh: '. <(curl {url})', + fish: 'curl {url} | source', +} + +export function isShellRuntime(runtime: string): boolean { + return runtime in SOURCE_TEMPLATES +} + +export function getSourceCommand(url: string, runtime: string): string { + return (SOURCE_TEMPLATES[runtime] ?? 'source <(curl {url})').replace('{url}', url) +}