songtianlun/Prmbr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better studio, remove play

Browse Source
This commit is contained in:
songtianlun 2025-08-01 22:04:17 +08:00
parent bc209d0203
commit 2d092a06d6
2 changed files with 230 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
CLAUDE.md
View File

@ -138,11 +138,11 @@ Required environment variables:
- [x] [LIMIT] can setting in use profile - [x] [LIMIT] can setting in use profile
- [ ] [LIMIT] max is by Subscribe - [ ] [LIMIT] max is by Subscribe
- [ ] Delete Version Button - [ ] Delete Version Button
- [x] Prompt Debugger run - [ ] Prompt Debugger run
- [x] Select AI Model - [ ] Select AI Model
- [x] Input Prompt Content - [ ] Input Prompt Content
- [x] Show Test Result - [ ] Show Test Result
- [x] Need to User Credit - [ ] Need to User Credit
- [ ] Subscribe - [ ] Subscribe
- [ ] Free - [ ] Free
- [ ] 20 Prompt Limit - [ ] 20 Prompt Limit

415
src/app/studio/[id]/page.tsx
View File

@ -13,10 +13,8 @@ import { LoadingSpinner } from '@/components/ui/loading-spinner'
import { FullScreenLoading } from '@/components/ui/full-screen-loading' import { FullScreenLoading } from '@/components/ui/full-screen-loading'
import { VersionTimeline, VersionTimelineRef } from '@/components/studio/VersionTimeline' import { VersionTimeline, VersionTimelineRef } from '@/components/studio/VersionTimeline'
import { import {
Play,
Save, Save,
Copy, Copy,
Zap,
ArrowLeft, ArrowLeft,
FileText, FileText,
Clock Clock
@ -62,8 +60,6 @@ export default function PromptPage({ params }: PromptPageProps) {
const [prompt, setPrompt] = useState<PromptData | null>(null) const [prompt, setPrompt] = useState<PromptData | null>(null)
const [promptContent, setPromptContent] = useState('') const [promptContent, setPromptContent] = useState('')
const [promptTitle, setPromptTitle] = useState('') const [promptTitle, setPromptTitle] = useState('')
const [testResult, setTestResult] = useState('')
const [isRunning, setIsRunning] = useState(false)
const [isSaving, setIsSaving] = useState(false) const [isSaving, setIsSaving] = useState(false)
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const [currentVersion, setCurrentVersion] = useState<PromptVersion | null>(null) const [currentVersion, setCurrentVersion] = useState<PromptVersion | null>(null)
@ -134,35 +130,6 @@ export default function PromptPage({ params }: PromptPageProps) {
const handleRunTest = async () => {
if (!promptContent.trim() || !user || !promptId) return
setIsRunning(true)
setTestResult('')
try {
const response = await fetch(`/api/prompts/${promptId}/test`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
content: promptContent,
userId: user.id
})
})
if (response.ok) {
const data = await response.json()
setTestResult(data.result.output || data.result.error || 'No output received')
} else {
setTestResult('Error: Failed to run prompt test. Please try again.')
}
} catch (error) {
console.error('Error running test:', error)
setTestResult('Error: Network error occurred. Please try again.')
} finally {
setIsRunning(false)
}
}
const handleSavePrompt = async () => { const handleSavePrompt = async () => {
if (!user || !promptId) return if (!user || !promptId) return
@ -224,7 +191,6 @@ export default function PromptPage({ params }: PromptPageProps) {
setPromptContent(version.content) setPromptContent(version.content)
setOriginalContent(version.content) setOriginalContent(version.content)
setCurrentVersion(version) setCurrentVersion(version)
setTestResult('') // 清除测试结果
// 重置保存状态 // 重置保存状态
setHasUnsavedChanges(false) setHasUnsavedChanges(false)
@ -246,7 +212,6 @@ export default function PromptPage({ params }: PromptPageProps) {
setPromptContent(version.content) setPromptContent(version.content)
setOriginalContent(version.content) setOriginalContent(version.content)
setCurrentVersion(version) setCurrentVersion(version)
setTestResult('')
// 刷新版本历史列表 // 刷新版本历史列表
if (versionTimelineRef.current) { if (versionTimelineRef.current) {
@ -374,131 +339,199 @@ export default function PromptPage({ params }: PromptPageProps) {
</div> </div>
<div className="max-w-7xl mx-auto p-4"> <div className="max-w-7xl mx-auto p-4">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> {/* Mobile Layout (stacked) */}
{/* Left Sidebar - Version Timeline */} <div className="lg:hidden space-y-6">
<div className="lg:col-span-1"> {/* 1. Prompt Editor (Mobile First) */}
<div className="bg-card rounded-lg border border-border p-4"> <div className="bg-card rounded-lg border border-border">
<VersionTimeline <div className="p-4 border-b border-border">
ref={versionTimelineRef} <div className="flex items-center justify-between">
promptId={promptId} <h3 className="font-semibold text-foreground">{t('promptEditor')}</h3>
userId={user.id} <div className="flex items-center space-x-1 text-xs text-muted-foreground">
currentVersion={currentVersion} <span>{promptContent.length} characters</span>
hasUnsavedChanges={hasUnsavedChanges} </div>
onVersionSelect={handleVersionSelect} </div>
onVersionRestore={handleVersionRestore}
/>
</div> </div>
<div className="p-4">
{/* Prompt Info */} <div className="space-y-4">
<div className="mt-6 bg-card rounded-lg border border-border p-4"> <div>
<h3 className="font-semibold text-foreground mb-3">Prompt Info</h3> <Label htmlFor="promptTitle" className="text-sm font-medium">
<div className="space-y-3 text-sm"> {t('promptName')}
<div className="flex items-center justify-between"> </Label>
<span className="text-muted-foreground">Created</span> <Input
<span className="text-foreground">{prompt?.createdAt ? new Date(prompt.createdAt).toLocaleDateString() : '-'}</span> id="promptTitle"
value={promptTitle}
onChange={(e) => setPromptTitle(e.target.value)}
className="mt-1"
/>
</div> </div>
<div className="flex items-center justify-between"> <div>
<span className="text-muted-foreground">Updated</span> <Label htmlFor="promptContent" className="text-sm font-medium">
<span className="text-foreground">{prompt?.updatedAt ? new Date(prompt.updatedAt).toLocaleDateString() : '-'}</span> {t('promptContent')}
</div> </Label>
<div className="flex items-center justify-between"> <Textarea
<span className="text-muted-foreground">Last used</span> id="promptContent"
<span className="text-foreground">{prompt?.lastUsed ? new Date(prompt.lastUsed).toLocaleDateString() : 'Never'}</span> value={promptContent}
</div> onChange={(e) => setPromptContent(e.target.value)}
<div className="flex items-center justify-between"> className="mt-1 min-h-[300px] font-mono text-sm resize-none"
<span className="text-muted-foreground">Usage count</span> placeholder="Write your prompt here..."
<span className="text-foreground">{prompt?.usage || 0}</span> />
</div>
<div className="pt-2 border-t border-border">
<div className="flex flex-wrap gap-1">
{prompt?.tags?.map((tag: string | { name: string }) => {
const tagName = typeof tag === 'string' ? tag : tag?.name || '';
return (
<span
key={tagName}
className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full"
>
{tagName}
</span>
);
})}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Main Content */} {/* Action Bar (Mobile) */}
<div className="lg:col-span-2 space-y-6"> <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
{/* Action Bar */} <div className="flex items-center space-x-2">
<div className="flex items-center justify-between"> <Button
<div className="flex items-center space-x-2"> onClick={handleSavePrompt}
<Button disabled={isSaving}
onClick={handleSavePrompt} className="flex items-center space-x-2 flex-1 sm:flex-none"
disabled={isSaving} >
className="flex items-center space-x-2" {isSaving ? (
> <LoadingSpinner size="sm" className="mr-2" />
{isSaving ? (
<LoadingSpinner size="sm" className="mr-2" />
) : (
<Save className="h-4 w-4 mr-2" />
)}
{tCommon('save')}
</Button>
<Button
variant="outline"
onClick={handleRunTest}
disabled={isRunning || !promptContent.trim()}
className="flex items-center space-x-2"
>
{isRunning ? (
<LoadingSpinner size="sm" className="mr-2" />
) : (
<Play className="h-4 w-4 mr-2" />
)}
{t('runTest')}
</Button>
<Button
variant="outline"
onClick={() => copyToClipboard(promptContent)}
className="flex items-center space-x-2"
>
<Copy className="h-4 w-4 mr-2" />
Copy
</Button>
</div>
<div className="flex items-center space-x-2 text-sm">
{hasUnsavedChanges ? (
<>
<div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></div>
<span className="text-orange-600 dark:text-orange-400">Unsaved changes</span>
</>
) : ( ) : (
<> <Save className="h-4 w-4 mr-2" />
<Clock className="h-4 w-4 text-muted-foreground" />
<span className="text-muted-foreground">All changes saved</span>
</>
)} )}
</div> {tCommon('save')}
</Button>
<Button
variant="outline"
onClick={() => copyToClipboard(promptContent)}
className="flex items-center space-x-2"
size="sm"
>
<Copy className="h-4 w-4 mr-2" />
Copy
</Button>
</div> </div>
{/* Editor */} <div className="flex items-center justify-center space-x-2 text-sm">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6"> {hasUnsavedChanges ? (
<>
<div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></div>
<span className="text-orange-600 dark:text-orange-400">Unsaved changes</span>
</>
) : (
<>
<Clock className="h-4 w-4 text-muted-foreground" />
<span className="text-muted-foreground">All changes saved</span>
</>
)}
</div>
</div>
{/* 2. Version History (Mobile Second) */}
<div className="bg-card rounded-lg border border-border p-4">
<VersionTimeline
ref={versionTimelineRef}
promptId={promptId}
userId={user.id}
currentVersion={currentVersion}
hasUnsavedChanges={hasUnsavedChanges}
onVersionSelect={handleVersionSelect}
onVersionRestore={handleVersionRestore}
/>
</div>
{/* 3. Prompt Info (Mobile Third) */}
<div className="bg-card rounded-lg border border-border p-4">
<h3 className="font-semibold text-foreground mb-3">Prompt Info</h3>
<div className="grid grid-cols-2 gap-3 text-sm">
<div className="flex flex-col">
<span className="text-muted-foreground text-xs">Created</span>
<span className="text-foreground font-medium">{prompt?.createdAt ? new Date(prompt.createdAt).toLocaleDateString() : '-'}</span>
</div>
<div className="flex flex-col">
<span className="text-muted-foreground text-xs">Updated</span>
<span className="text-foreground font-medium">{prompt?.updatedAt ? new Date(prompt.updatedAt).toLocaleDateString() : '-'}</span>
</div>
<div className="flex flex-col">
<span className="text-muted-foreground text-xs">Last used</span>
<span className="text-foreground font-medium">{prompt?.lastUsed ? new Date(prompt.lastUsed).toLocaleDateString() : 'Never'}</span>
</div>
<div className="flex flex-col">
<span className="text-muted-foreground text-xs">Usage count</span>
<span className="text-foreground font-medium">{prompt?.usage || 0}</span>
</div>
</div>
<div className="pt-3 border-t border-border mt-3">
<div className="flex flex-wrap gap-1">
{prompt?.tags?.map((tag: string | { name: string }) => {
const tagName = typeof tag === 'string' ? tag : tag?.name || '';
return (
<span
key={tagName}
className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full"
>
{tagName}
</span>
);
})}
</div>
</div>
</div>
</div>
{/* Desktop Layout (optimized) */}
<div className="hidden lg:block">
<div className="grid grid-cols-3 gap-8">
{/* Left Column - Prompt Editor (Desktop) */}
<div className="col-span-2 space-y-6">
{/* Action Bar */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<Button
onClick={handleSavePrompt}
disabled={isSaving}
className="flex items-center space-x-2"
>
{isSaving ? (
<LoadingSpinner size="sm" className="mr-2" />
) : (
<Save className="h-4 w-4 mr-2" />
)}
{tCommon('save')}
</Button>
<Button
variant="outline"
onClick={() => copyToClipboard(promptContent)}
className="flex items-center space-x-2"
>
<Copy className="h-4 w-4 mr-2" />
Copy
</Button>
</div>
<div className="flex items-center space-x-2 text-sm">
{hasUnsavedChanges ? (
<>
<div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></div>
<span className="text-orange-600 dark:text-orange-400">Unsaved changes</span>
</>
) : (
<>
<Clock className="h-4 w-4 text-muted-foreground" />
<span className="text-muted-foreground">All changes saved</span>
</>
)}
</div>
</div>
{/* Prompt Editor */} {/* Prompt Editor */}
<div className="bg-card rounded-lg border border-border"> <div className="bg-card rounded-lg border border-border">
<div className="p-4 border-b border-border"> <div className="p-6 border-b border-border">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="font-semibold text-foreground">{t('promptEditor')}</h3> <h3 className="text-lg font-semibold text-foreground">{t('promptEditor')}</h3>
<div className="flex items-center space-x-1 text-xs text-muted-foreground"> <div className="flex items-center space-x-1 text-sm text-muted-foreground">
<span>{promptContent.length} characters</span> <span>{promptContent.length} characters</span>
</div> </div>
</div> </div>
</div> </div>
<div className="p-4"> <div className="p-6">
<div className="space-y-4"> <div className="space-y-6">
<div> <div>
<Label htmlFor="promptTitle" className="text-sm font-medium"> <Label htmlFor="promptTitle" className="text-sm font-medium">
{t('promptName')} {t('promptName')}
@ -507,7 +540,7 @@ export default function PromptPage({ params }: PromptPageProps) {
id="promptTitle" id="promptTitle"
value={promptTitle} value={promptTitle}
onChange={(e) => setPromptTitle(e.target.value)} onChange={(e) => setPromptTitle(e.target.value)}
className="mt-1" className="mt-2"
/> />
</div> </div>
@ -519,62 +552,64 @@ export default function PromptPage({ params }: PromptPageProps) {
id="promptContent" id="promptContent"
value={promptContent} value={promptContent}
onChange={(e) => setPromptContent(e.target.value)} onChange={(e) => setPromptContent(e.target.value)}
className="mt-1 min-h-[400px] font-mono text-sm resize-none" className="mt-2 min-h-[500px] font-mono text-sm resize-none"
placeholder="Write your prompt here..." placeholder="Write your prompt here..."
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
{/* Test Results */} {/* Right Column - Version History & Prompt Info */}
<div className="bg-card rounded-lg border border-border"> <div className="col-span-1 space-y-6">
<div className="p-4 border-b border-border"> {/* Version History */}
<div className="bg-card rounded-lg border border-border p-4">
<VersionTimeline
ref={versionTimelineRef}
promptId={promptId}
userId={user.id}
currentVersion={currentVersion}
hasUnsavedChanges={hasUnsavedChanges}
onVersionSelect={handleVersionSelect}
onVersionRestore={handleVersionRestore}
/>
</div>
{/* Prompt Info */}
<div className="bg-card rounded-lg border border-border p-4">
<h3 className="font-semibold text-foreground mb-4">Prompt Info</h3>
<div className="space-y-4 text-sm">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="font-semibold text-foreground">{t('testResults')}</h3> <span className="text-muted-foreground">Created</span>
{testResult && ( <span className="text-foreground font-medium">{prompt?.createdAt ? new Date(prompt.createdAt).toLocaleDateString() : '-'}</span>
<Button
variant="outline"
size="sm"
onClick={() => copyToClipboard(testResult)}
className="h-7"
>
<Copy className="h-3 w-3 mr-1" />
Copy
</Button>
)}
</div> </div>
</div> <div className="flex items-center justify-between">
<span className="text-muted-foreground">Updated</span>
<div className="p-4"> <span className="text-foreground font-medium">{prompt?.updatedAt ? new Date(prompt.updatedAt).toLocaleDateString() : '-'}</span>
<div className="bg-muted rounded-lg min-h-[400px] p-4"> </div>
{isRunning ? ( <div className="flex items-center justify-between">
<div className="flex items-center justify-center h-full"> <span className="text-muted-foreground">Last used</span>
<div className="text-center"> <span className="text-foreground font-medium">{prompt?.lastUsed ? new Date(prompt.lastUsed).toLocaleDateString() : 'Never'}</span>
<LoadingSpinner size="lg" /> </div>
<p className="mt-4 text-muted-foreground">Running prompt test...</p> <div className="flex items-center justify-between">
<p className="text-xs text-muted-foreground mt-2">This may take a few seconds</p> <span className="text-muted-foreground">Usage count</span>
</div> <span className="text-foreground font-medium">{prompt?.usage || 0}</span>
</div> </div>
) : testResult ? ( <div className="pt-3 border-t border-border">
<div className="space-y-4"> <div className="flex flex-wrap gap-1">
<pre className="text-sm text-foreground whitespace-pre-wrap leading-relaxed"> {prompt?.tags?.map((tag: string | { name: string }) => {
{testResult} const tagName = typeof tag === 'string' ? tag : tag?.name || '';
</pre> return (
</div> <span
) : ( key={tagName}
<div className="flex items-center justify-center h-full text-center"> className="inline-flex items-center px-2 py-1 text-xs font-medium bg-muted text-muted-foreground rounded-full"
<div> >
<Zap className="h-12 w-12 text-muted-foreground mx-auto mb-4" /> {tagName}
<p className="text-muted-foreground mb-2"> </span>
{t('clickRunTestToSee')} );
</p> })}
<p className="text-xs text-muted-foreground"> </div>
Test your prompt with AI models to see the output
</p>
</div>
</div>
)}
</div> </div>
</div> </div>
</div> </div>