feat：样式构建完成
This commit is contained in:
许永平
@@ -100,33 +100,34 @@ export default function MomentsSyncDetail() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const header = (
|
|
||||||
<div className="sticky top-0 z-10 bg-white border-b">
|
|
||||||
<div className="flex items-center justify-between p-4">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<Button variant="ghost" size="icon" onClick={() => navigate('/workspace/moments-sync')}>
|
|
||||||
<ChevronLeft className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
<h1 className="text-lg font-medium">朋友圈同步任务详情</h1>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Button variant="outline" size="sm" onClick={handleEdit}>
|
|
||||||
<Edit2 className="h-4 w-4 mr-2" />
|
|
||||||
编辑
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="sm" onClick={handleSync}>
|
|
||||||
<RefreshCw className="h-4 w-4 mr-2" />
|
|
||||||
立即同步
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout header={header} footer={<BottomNav />}>
|
<Layout
|
||||||
<div className="flex-1 bg-gray-50 min-h-screen pb-20">
|
header={
|
||||||
<div className="p-4 max-w-4xl mx-auto space-y-6">
|
<div className="bg-white border-b">
|
||||||
|
<div className="flex items-center justify-between p-4">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<Button variant="ghost" size="icon" onClick={() => navigate('/workspace/moments-sync')}>
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<h1 className="text-lg font-medium">朋友圈同步任务详情</h1>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={handleEdit}>
|
||||||
|
<Edit2 className="h-4 w-4 mr-2" />
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="sm" onClick={handleSync}>
|
||||||
|
<RefreshCw className="h-4 w-4 mr-2" />
|
||||||
|
立即同步
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
footer={<BottomNav />}
|
||||||
|
>
|
||||||
|
<div className="bg-gray-50">
|
||||||
|
<div className="p-4 space-y-6">
|
||||||
{/* 基本信息卡片 */}
|
{/* 基本信息卡片 */}
|
||||||
<Card className="p-6">
|
<Card className="p-6">
|
||||||
<div className="flex items-center justify-between mb-6">
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
|||||||
@@ -248,94 +248,97 @@ export default function NewMomentsSyncTask() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const header = (
|
|
||||||
<div className="sticky top-0 z-10 bg-white">
|
|
||||||
<div className="flex items-center h-14 px-4">
|
|
||||||
<Button variant="ghost" size="icon" onClick={() => navigate(-1)} className="hover:bg-gray-50">
|
|
||||||
<ChevronLeft className="h-6 w-6" />
|
|
||||||
</Button>
|
|
||||||
<h1 className="ml-2 text-lg font-medium">新建朋友圈同步</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout header={header} footer={<BottomNav />}>
|
<Layout
|
||||||
<div className="min-h-screen bg-[#F8F9FA] pb-20">
|
header={
|
||||||
<div className="mt-8">
|
<div className="bg-white border-b">
|
||||||
<StepIndicator currentStep={currentStep} />
|
<div className="flex items-center p-4">
|
||||||
|
<Button variant="ghost" size="icon" onClick={() => navigate(-1)} className="hover:bg-gray-50 mr-2">
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<h1 className="text-lg font-medium">新建朋友圈同步</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
footer={<BottomNav />}
|
||||||
|
>
|
||||||
|
<div className="bg-gray-50">
|
||||||
|
<div className="p-4 space-y-6">
|
||||||
|
<div className="mt-4">
|
||||||
|
<StepIndicator currentStep={currentStep} />
|
||||||
|
|
||||||
<div className="mt-8">
|
<div className="mt-8">
|
||||||
{currentStep === 1 && (
|
{currentStep === 1 && (
|
||||||
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
|
<BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{currentStep === 2 && (
|
{currentStep === 2 && (
|
||||||
<div className="space-y-6 px-6">
|
<div className="space-y-6">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
||||||
<Input
|
<Input
|
||||||
placeholder="选择设备"
|
placeholder="选择设备"
|
||||||
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
|
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// TODO: 打开设备选择弹窗
|
// TODO: 打开设备选择弹窗
|
||||||
toast({ title: '设备选择功能开发中' });
|
toast({ title: '设备选择功能开发中' });
|
||||||
}}
|
}}
|
||||||
readOnly
|
readOnly
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{formData.selectedDevices.length > 0 && (
|
||||||
|
<div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex space-x-4 pt-4">
|
||||||
|
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||||||
|
上一步
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleNext}
|
||||||
|
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||||||
|
>
|
||||||
|
下一步
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{formData.selectedDevices.length > 0 && (
|
{currentStep === 3 && (
|
||||||
<div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
|
<div className="space-y-6">
|
||||||
)}
|
<div className="relative">
|
||||||
|
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
||||||
|
<Input
|
||||||
|
placeholder="选择内容库"
|
||||||
|
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
|
||||||
|
onClick={() => {
|
||||||
|
// TODO: 打开内容库选择弹窗
|
||||||
|
toast({ title: '内容库选择功能开发中' });
|
||||||
|
}}
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex space-x-4 pt-4">
|
{formData.selectedLibraries.length > 0 && (
|
||||||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
<div className="text-base text-gray-500">已选内容库：{formData.selectedLibraries.join(', ')}</div>
|
||||||
上一步
|
)}
|
||||||
</Button>
|
|
||||||
<Button
|
<div className="flex space-x-4 pt-4">
|
||||||
onClick={handleNext}
|
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
||||||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
上一步
|
||||||
>
|
</Button>
|
||||||
下一步
|
<Button
|
||||||
</Button>
|
onClick={handleComplete}
|
||||||
|
loading={loading}
|
||||||
|
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
||||||
|
>
|
||||||
|
{loading ? '创建中...' : '完成'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{currentStep === 3 && (
|
|
||||||
<div className="space-y-6 px-6">
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
|
|
||||||
<Input
|
|
||||||
placeholder="选择内容库"
|
|
||||||
className="h-12 pl-11 rounded-xl border-gray-200 text-base"
|
|
||||||
onClick={() => {
|
|
||||||
// TODO: 打开内容库选择弹窗
|
|
||||||
toast({ title: '内容库选择功能开发中' });
|
|
||||||
}}
|
|
||||||
readOnly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{formData.selectedLibraries.length > 0 && (
|
|
||||||
<div className="text-base text-gray-500">已选内容库：{formData.selectedLibraries.join(', ')}</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex space-x-4 pt-4">
|
|
||||||
<Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
|
|
||||||
上一步
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={handleComplete}
|
|
||||||
loading={loading}
|
|
||||||
className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
|
|
||||||
>
|
|
||||||
{loading ? '创建中...' : '完成'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user