0099b23a86
- Fraunces 衬线 display + DM Sans body + JetBrains Mono 数字标签 - 暖米白主题（#f7f4ee）+ 蓝色强调色（#2563eb） - 引入 lucide-react 图标库替代 emoji - Sidebar 加入编号索引、Logo、用户区域、杂志风分组标题 - 产品列表页加入大号 display 标题、搜索、卡片悬浮动画 - 产品详情页面包屑、tab 编号、需求表格重做 - 状态徽章改为色点 + 文字，"已拒绝"用红色避免与"评审中"冲突 - 全局加入 grain 噪点纹理、入场交错动画 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { PRIORITY_LABEL } from '@/lib/constants';
|
|
|
|
interface Props {
|
|
initialData?: { title: string; description: string; priority: number };
|
|
onSubmit: (data: { title: string; description: string; priority: number }) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
|
|
const [title, setTitle] = useState(initialData?.title || '');
|
|
const [description, setDescription] = useState(initialData?.description || '');
|
|
const [priority, setPriority] = useState(initialData?.priority ?? 0);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!title.trim()) return;
|
|
onSubmit({ title: title.trim(), description: description.trim(), priority });
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div>
|
|
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
|
|
需求标题
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="一句话描述需求"
|
|
className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-xl text-[var(--ink)] placeholder:font-display placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
|
|
描述
|
|
</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
rows={4}
|
|
placeholder="详细说明需求背景、目标、验收标准"
|
|
className="mt-2 block w-full resize-none border-0 border-b border-[var(--line)] bg-transparent pb-2 text-[14px] leading-relaxed text-[var(--ink-soft)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
|
|
优先级
|
|
</label>
|
|
<div className="mt-2 flex gap-1.5">
|
|
{Object.entries(PRIORITY_LABEL).map(([value, label]) => {
|
|
const v = Number(value);
|
|
const active = priority === v;
|
|
return (
|
|
<button
|
|
key={value}
|
|
type="button"
|
|
onClick={() => setPriority(v)}
|
|
className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${
|
|
active
|
|
? 'bg-[var(--ink)] text-[var(--bg)]'
|
|
: 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]"
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
|
|
>
|
|
{initialData ? '保存修改' : '创建需求'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|