104 lines
4.8 KiB
TypeScript
104 lines
4.8 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
ArrowRight,
|
|
Download
|
|
} from 'lucide-react';
|
|
import { ViewMode, Project, Step } from '../types';
|
|
import { projectsList } from '../data/mockData';
|
|
import { ProgressBar } from '../components/ProgressBar';
|
|
|
|
interface DashboardViewProps {
|
|
setCurrentView: (view: ViewMode) => void;
|
|
setCurrentStep?: (step: Step) => void;
|
|
}
|
|
|
|
export const DashboardView: React.FC<DashboardViewProps> = ({ setCurrentView, setCurrentStep }) => (
|
|
<div className="p-8 bg-slate-50 min-h-screen animate-fade-in">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-900">工作台</h1>
|
|
<p className="text-slate-500 text-sm mt-1">下午好, Sarah (合伙人) | 全局概览</p>
|
|
</div>
|
|
<div className="flex space-x-4">
|
|
<button className="flex items-center px-4 py-2 bg-white border border-slate-200 rounded-md shadow-sm text-sm font-medium text-slate-600 hover:bg-slate-50">
|
|
<Download size={16} className="mr-2" /> 导出周报
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-12 gap-8">
|
|
<div className="col-span-12 bg-white rounded-lg border border-slate-200 shadow-sm p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="font-bold text-lg text-slate-800">项目作业全景</h3>
|
|
<button onClick={() => setCurrentView('projects')} className="text-blue-600 text-sm font-medium hover:underline flex items-center">
|
|
查看全部 <ArrowRight size={14} className="ml-1"/>
|
|
</button>
|
|
</div>
|
|
<div className="overflow-hidden">
|
|
<table className="min-w-full text-left text-sm">
|
|
<thead className="bg-slate-50 text-slate-500 font-medium">
|
|
<tr>
|
|
<th className="px-4 py-3">项目名称</th>
|
|
<th className="px-4 py-3">负责人</th>
|
|
<th className="px-4 py-3 w-1/3">当前阶段 & 进度</th>
|
|
<th className="px-4 py-3 text-right">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{projectsList.slice(0, 4).map((project, idx) => (
|
|
<tr
|
|
key={idx}
|
|
className="hover:bg-slate-50 transition-colors cursor-pointer"
|
|
onClick={() => {
|
|
setCurrentView('engagement');
|
|
// Set step based on project progress (simplified logic)
|
|
if (setCurrentStep) {
|
|
if (project.progress === 0) setCurrentStep('setup');
|
|
else if (project.progress < 25) setCurrentStep('inventory');
|
|
else if (project.progress < 50) setCurrentStep('context');
|
|
else if (project.progress < 75) setCurrentStep('value');
|
|
else setCurrentStep('delivery');
|
|
}
|
|
}}
|
|
>
|
|
<td className="px-4 py-4 font-medium text-slate-800">{project.name}</td>
|
|
<td className="px-4 py-4 text-slate-600 flex items-center">
|
|
<div className="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center text-xs mr-2 font-bold text-slate-600">
|
|
{project.owner[0]}
|
|
</div>
|
|
{project.owner}
|
|
</td>
|
|
<td className="px-4 py-4">
|
|
<div className="flex items-center justify-between mb-1 text-xs text-slate-500">
|
|
<span>进行中</span>
|
|
<span>{project.progress}%</span>
|
|
</div>
|
|
<ProgressBar percent={project.progress} status={project.status} />
|
|
</td>
|
|
<td className="px-4 py-4 text-right" onClick={(e) => e.stopPropagation()}>
|
|
<button
|
|
onClick={() => {
|
|
setCurrentView('engagement');
|
|
if (setCurrentStep) {
|
|
if (project.progress === 0) setCurrentStep('setup');
|
|
else if (project.progress < 25) setCurrentStep('inventory');
|
|
else if (project.progress < 50) setCurrentStep('context');
|
|
else if (project.progress < 75) setCurrentStep('value');
|
|
else setCurrentStep('delivery');
|
|
}
|
|
}}
|
|
className="text-blue-600 hover:text-blue-800 font-medium text-xs"
|
|
>
|
|
详情
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|