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 ( -
+
{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)
+}