117 lines
3.1 KiB
TypeScript
117 lines
3.1 KiB
TypeScript
import { useState } from 'react'
|
|
import { PROJECT_TYPES, PROJECT_TYPE_KEY, getCustomTags } from '../utils/style'
|
|
import StyleSelector from './StyleSelector'
|
|
import CustomTagsEditor from './CustomTagsEditor'
|
|
|
|
interface CreateProjectModalProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
onSubmit: (name: string, style: Record<string, string>) => Promise<void>
|
|
}
|
|
|
|
export default function CreateProjectModal({
|
|
open,
|
|
onClose,
|
|
onSubmit,
|
|
}: CreateProjectModalProps) {
|
|
const [name, setName] = useState('')
|
|
const [style, setStyle] = useState<Record<string, string>>({})
|
|
const [submitting, setSubmitting] = useState(false)
|
|
|
|
if (!open) return null
|
|
|
|
const handleStyleChange = (key: string, value: string) => {
|
|
setStyle(prev =>
|
|
prev[key] === value
|
|
? (() => {
|
|
const { [key]: _, ...rest } = prev
|
|
return rest
|
|
})()
|
|
: { ...prev, [key]: value }
|
|
)
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
if (!name.trim()) return
|
|
setSubmitting(true)
|
|
try {
|
|
await onSubmit(name.trim(), style)
|
|
setName('')
|
|
setStyle({})
|
|
onClose()
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
zIndex: 1000,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="card"
|
|
style={{
|
|
position: 'relative',
|
|
width: '100%',
|
|
maxWidth: 520,
|
|
maxHeight: '80vh',
|
|
overflow: 'auto',
|
|
zIndex: 1,
|
|
}}
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<h2 style={{ fontSize: 18, marginBottom: 20 }}>新建工程</h2>
|
|
|
|
<label style={{ display: 'block', marginBottom: 16 }}>
|
|
<span style={{ display: 'block', fontSize: 13, fontWeight: 600, marginBottom: 6, color: 'var(--text-secondary)' }}>
|
|
工程名称
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
placeholder="输入工程名称"
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</label>
|
|
|
|
<div style={{ marginBottom: 16 }}>
|
|
<StyleSelector
|
|
value={style}
|
|
onChange={handleStyleChange}
|
|
compact
|
|
categories={[{
|
|
key: PROJECT_TYPE_KEY,
|
|
label: '工程类型',
|
|
options: PROJECT_TYPES.map(p => ({ value: p.value, label: p.label })),
|
|
}]}
|
|
customTags={getCustomTags(style)}
|
|
/>
|
|
<CustomTagsEditor style={style} onChange={setStyle} />
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
|
|
<button className="btn-secondary" onClick={onClose} disabled={submitting}>
|
|
取消
|
|
</button>
|
|
<button
|
|
className="btn-primary"
|
|
onClick={handleSubmit}
|
|
disabled={!name.trim() || submitting}
|
|
>
|
|
{submitting ? '创建中...' : '创建'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|