feat(#1): 项目创建向导页 - 5步向导(基本信息/章程/干系人/里程碑/确认)
This commit is contained in:
329
src/pages/WizardPage.tsx
Normal file
329
src/pages/WizardPage.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Steps,
|
||||
Button,
|
||||
Form,
|
||||
Input,
|
||||
Message,
|
||||
Typography,
|
||||
Space,
|
||||
Card,
|
||||
Table,
|
||||
Select,
|
||||
DatePicker,
|
||||
Tag,
|
||||
} from '@arco-design/web-react';
|
||||
import '@arco-design/web-react/dist/css/arco.css';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
const { TextArea } = Input;
|
||||
|
||||
// Step definitions
|
||||
const STEPS = [
|
||||
{ title: '基本信息', description: '项目名称和目标' },
|
||||
{ title: '章程信息', description: '范围与约束' },
|
||||
{ title: '干系人', description: '识别关键干系人' },
|
||||
{ title: '里程碑', description: '设定关键节点' },
|
||||
{ title: '完成', description: '确认创建' },
|
||||
];
|
||||
|
||||
// Types
|
||||
interface Stakeholder {
|
||||
key: string;
|
||||
name: string;
|
||||
role: string;
|
||||
power: '高' | '中' | '低';
|
||||
interest: '高' | '中' | '低';
|
||||
strategy: string;
|
||||
}
|
||||
|
||||
interface Milestone {
|
||||
key: string;
|
||||
name: string;
|
||||
targetDate: string;
|
||||
deliverable: string;
|
||||
}
|
||||
|
||||
interface ProjectData {
|
||||
name: string;
|
||||
goal: string;
|
||||
scopeIn: string;
|
||||
scopeOut: string;
|
||||
constraints: string;
|
||||
assumptions: string;
|
||||
stakeholders: Stakeholder[];
|
||||
milestones: Milestone[];
|
||||
}
|
||||
|
||||
const createEmptyProject = (): ProjectData => ({
|
||||
name: '',
|
||||
goal: '',
|
||||
scopeIn: '',
|
||||
scopeOut: '',
|
||||
constraints: '',
|
||||
assumptions: '',
|
||||
stakeholders: [],
|
||||
milestones: [],
|
||||
});
|
||||
|
||||
const WizardPage: React.FC = () => {
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [project, setProject] = useState<ProjectData>(createEmptyProject());
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const next = () => setCurrent(Math.min(current + 1, STEPS.length - 1));
|
||||
const prev = () => setCurrent(Math.max(current - 1, 0));
|
||||
|
||||
const handleSubmit = () => {
|
||||
setSubmitted(true);
|
||||
Message.success(`项目「${project.name}」已创建！`);
|
||||
console.log('Project created:', project);
|
||||
};
|
||||
|
||||
// ---- Step 1: Basic Info ----
|
||||
const renderBasicInfo = () => (
|
||||
<Form layout="vertical" style={{ maxWidth: 600 }}>
|
||||
<Form.Item label="项目名称" required>
|
||||
<Input
|
||||
placeholder="例如：客户管理系统"
|
||||
value={project.name}
|
||||
onChange={(val) => setProject({ ...project, name: val })}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="项目目标（SMART原则）" required>
|
||||
<TextArea
|
||||
placeholder="具体、可衡量、可实现、相关、有时限的目标"
|
||||
rows={4}
|
||||
value={project.goal}
|
||||
onChange={(val) => setProject({ ...project, goal: val })}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
// ---- Step 2: Charter ----
|
||||
const renderCharter = () => (
|
||||
<Form layout="vertical" style={{ maxWidth: 600 }}>
|
||||
<Form.Item label="包含范围">
|
||||
<TextArea
|
||||
placeholder="本项目要做什么..."
|
||||
rows={3}
|
||||
value={project.scopeIn}
|
||||
onChange={(val) => setProject({ ...project, scopeIn: val })}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="不包含范围">
|
||||
<TextArea
|
||||
placeholder="本项目明确不做什么..."
|
||||
rows={3}
|
||||
value={project.scopeOut}
|
||||
onChange={(val) => setProject({ ...project, scopeOut: val })}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="约束条件">
|
||||
<Input
|
||||
placeholder="例如：必须在6月底前上线，预算不超过10万"
|
||||
value={project.constraints}
|
||||
onChange={(val) => setProject({ ...project, constraints: val })}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="假设条件">
|
||||
<Input
|
||||
placeholder="例如：团队3人全职投入，第三方API在5月就绪"
|
||||
value={project.assumptions}
|
||||
onChange={(val) => setProject({ ...project, assumptions: val })}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
// ---- Step 3: Stakeholders ----
|
||||
const renderStakeholders = () => {
|
||||
const columns = [
|
||||
{ title: '姓名', dataIndex: 'name', key: 'name' },
|
||||
{ title: '角色', dataIndex: 'role', key: 'role' },
|
||||
{
|
||||
title: '权力',
|
||||
dataIndex: 'power',
|
||||
key: 'power',
|
||||
render: (val: string) => (
|
||||
<Tag color={val === '高' ? 'red' : val === '中' ? 'orange' : 'green'}>{val}</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '利益/关注度',
|
||||
dataIndex: 'interest',
|
||||
key: 'interest',
|
||||
render: (val: string) => (
|
||||
<Tag color={val === '高' ? 'red' : val === '中' ? 'orange' : 'green'}>{val}</Tag>
|
||||
),
|
||||
},
|
||||
{ title: '参与策略', dataIndex: 'strategy', key: 'strategy' },
|
||||
];
|
||||
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newRole, setNewRole] = useState('');
|
||||
const [newPower, setNewPower] = useState<'高' | '中' | '低'>('中');
|
||||
const [newInterest, setNewInterest] = useState<'高' | '中' | '低'>('中');
|
||||
|
||||
const addStakeholder = () => {
|
||||
if (!newName || !newRole) return;
|
||||
const strategy =
|
||||
newPower === '高' && newInterest === '高'
|
||||
? '重点管理'
|
||||
: newPower === '低' && newInterest === '高'
|
||||
? '保持满意'
|
||||
: newPower === '高' && newInterest === '低'
|
||||
? '随时告知'
|
||||
: '监督';
|
||||
setProject({
|
||||
...project,
|
||||
stakeholders: [
|
||||
...project.stakeholders,
|
||||
{ key: Date.now().toString(), name: newName, role: newRole, power: newPower, interest: newInterest, strategy },
|
||||
],
|
||||
});
|
||||
setNewName('');
|
||||
setNewRole('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Space style={{ marginBottom: 16 }}>
|
||||
<Input placeholder="姓名" value={newName} onChange={setNewName} style={{ width: 120 }} />
|
||||
<Input placeholder="角色" value={newRole} onChange={setNewRole} style={{ width: 120 }} />
|
||||
<Select value={newPower} onChange={setNewPower} style={{ width: 80 }}>
|
||||
<Select.Option value="高">高</Select.Option>
|
||||
<Select.Option value="中">中</Select.Option>
|
||||
<Select.Option value="低">低</Select.Option>
|
||||
</Select>
|
||||
<Select value={newInterest} onChange={setNewInterest} style={{ width: 80 }}>
|
||||
<Select.Option value="高">高</Select.Option>
|
||||
<Select.Option value="中">中</Select.Option>
|
||||
<Select.Option value="低">低</Select.Option>
|
||||
</Select>
|
||||
<Button type="primary" onClick={addStakeholder}>
|
||||
添加
|
||||
</Button>
|
||||
</Space>
|
||||
<Table columns={columns} data={project.stakeholders} pagination={false} size="small" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---- Step 4: Milestones ----
|
||||
const renderMilestones = () => {
|
||||
const columns = [
|
||||
{ title: '里程碑', dataIndex: 'name', key: 'name' },
|
||||
{ title: '目标日期', dataIndex: 'targetDate', key: 'targetDate' },
|
||||
{ title: '交付物', dataIndex: 'deliverable', key: 'deliverable' },
|
||||
];
|
||||
|
||||
const [newName, setNewName] = useState('');
|
||||
const [newDate, setNewDate] = useState('');
|
||||
const [newDeliverable, setNewDeliverable] = useState('');
|
||||
|
||||
const addMilestone = () => {
|
||||
if (!newName) return;
|
||||
setProject({
|
||||
...project,
|
||||
milestones: [
|
||||
...project.milestones,
|
||||
{ key: Date.now().toString(), name: newName, targetDate: newDate, deliverable: newDeliverable },
|
||||
],
|
||||
});
|
||||
setNewName('');
|
||||
setNewDate('');
|
||||
setNewDeliverable('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Space style={{ marginBottom: 16 }}>
|
||||
<Input placeholder="里程碑名称" value={newName} onChange={setNewName} style={{ width: 160 }} />
|
||||
<Input placeholder="目标日期" value={newDate} onChange={setNewDate} style={{ width: 120 }} />
|
||||
<Input placeholder="交付物" value={newDeliverable} onChange={setNewDeliverable} style={{ width: 160 }} />
|
||||
<Button type="primary" onClick={addMilestone}>
|
||||
添加
|
||||
</Button>
|
||||
</Space>
|
||||
<Table columns={columns} data={project.milestones} pagination={false} size="small" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---- Step 5: Confirm ----
|
||||
const renderConfirm = () => (
|
||||
<Card title="项目创建确认">
|
||||
<Space direction="vertical" size="medium" style={{ width: '100%' }}>
|
||||
<div>
|
||||
<Text bold>项目名称：</Text>
|
||||
<Text>{project.name}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text bold>项目目标：</Text>
|
||||
<Text>{project.goal}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text bold>包含范围：</Text>
|
||||
<Text>{project.scopeIn}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text bold>干系人数量：</Text>
|
||||
<Text>{project.stakeholders.length}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text bold>里程碑数量：</Text>
|
||||
<Text>{project.milestones.length}</Text>
|
||||
</div>
|
||||
{(!project.name || !project.goal) && (
|
||||
<Message.warning>⚠️ 项目名称和目标为必填项</Message.warning>
|
||||
)}
|
||||
</Space>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const stepRenderers = [renderBasicInfo, renderCharter, renderStakeholders, renderMilestones, renderConfirm];
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 900, margin: '40px auto', padding: '0 24px' }}>
|
||||
<Title heading={4} style={{ marginBottom: 24 }}>
|
||||
🚀 创建新项目
|
||||
</Title>
|
||||
<Steps current={current} style={{ marginBottom: 32 }}>
|
||||
{STEPS.map((step, idx) => (
|
||||
<Steps.Step key={idx} title={step.title} description={step.description} />
|
||||
))}
|
||||
</Steps>
|
||||
|
||||
<Card style={{ minHeight: 300, marginBottom: 24 }}>{stepRenderers[current]()}</Card>
|
||||
|
||||
<Space style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Button onClick={prev} disabled={current === 0}>
|
||||
上一步
|
||||
</Button>
|
||||
{current < STEPS.length - 1 ? (
|
||||
<Button type="primary" onClick={next}>
|
||||
下一步
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleSubmit}
|
||||
disabled={!project.name || !project.goal}
|
||||
>
|
||||
创建项目
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
|
||||
{submitted && (
|
||||
<Card style={{ marginTop: 24, background: '#e8ffea' }}>
|
||||
<Text>✅ 项目「{project.name}」创建成功！正在跳转到看板...</Text>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WizardPage;
|
||||
1
src/pages/index.ts
Normal file
1
src/pages/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as WizardPage } from './WizardPage';
|
||||
Reference in New Issue
Block a user