fnvtk/ckb-SuperAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 本次提交更新内容如下

Browse Source 
更了全局layout组件
This commit is contained in:
笔记本里的永平
2025-07-07 16:13:04 +08:00
parent 5ca8050fc5
commit 289947e68f
9 changed files with 529 additions and 441 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
nkebao/src/components/Layout.css Normal file
View File

@@ -0,0 +1,10 @@
.container {
display: flex;
height: 100vh;
flex-direction: column;
}
.container main {
flex: 1;
overflow: auto;
}

35
nkebao/src/components/Layout.tsx Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
interface LayoutProps {
loading?: boolean;
children?: React.ReactNode;
header?: React.ReactNode;
footer?: React.ReactNode;
}
const Layout: React.FC<LayoutProps> = ({
loading,
children,
header,
footer
}) => {
return (
<div className="container">
{header && (
<header>
{header}
</header>
)}
<main>
{children}
</main>
{footer && (
<footer>
{footer}
</footer>
)}
</div>
);
};
export default Layout;

30
nkebao/src/pages/Home.tsx
View File

@@ -2,6 +2,9 @@ import React, { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Bell, Smartphone, Users, Activity } from 'lucide-react';
import Chart from 'chart.js/auto';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
import '@/components/Layout.css';
// 模拟数据
const stats = {
@@ -140,19 +143,20 @@ export default function Home() {
}, []);
return (
<div className="flex-1 flex flex-col bg-gray-50">
{/* 固定header */}
<header className="fixed top-0 left-0 right-0 z-20 bg-white border-b">
<div className="flex justify-between items-center p-4">
<h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
<button className="p-2 hover:bg-gray-100 rounded-full">
<Bell className="h-5 w-5 text-gray-600" />
</button>
<Layout
header={
<div className="bg-white border-b">
<div className="flex justify-between items-center p-4">
<h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
<button className="p-2 hover:bg-gray-100 rounded-full">
<Bell className="h-5 w-5 text-gray-600" />
</button>
</div>
</div>
</header>
{/* 可滚动的内容区域 */}
<div className="flex-1 overflow-y-auto pt-16 pb-24">
}
footer={<BottomNav />}
>
<div className="bg-gray-50">
<div className="p-4 space-y-6">
{/* 统计卡片 */}
<div className="grid grid-cols-3 gap-4">
@@ -234,6 +238,6 @@ export default function Home() {
</div>
</div>
</div>
</div>
</Layout>
);
}

41
nkebao/src/pages/devices/Devices.tsx
View File

@@ -4,6 +4,8 @@ import { Plus, Search, RefreshCw, QrCode, Loader2, AlertTriangle, X } from 'luci
import { devicesApi } from '@/api';
import { useToast } from '@/components/ui/toast';
import PageHeader from '@/components/PageHeader';
import Layout from '@/components/Layout';
import '@/components/Layout.css';
// 设备接口
interface Device {
@@ -376,24 +378,24 @@ export default function Devices() {
});
return (
<div className="min-h-screen bg-gray-50">
{/* 页面Header */}
<PageHeader
title="设备管理"
defaultBackPath="/"
rightContent={
<button
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
onClick={handleOpenAddDeviceModal}
>
<Plus className="h-4 w-4" />
添加设备
</button>
}
/>
{/* 内容区域 */}
<div className="pt-16 pb-20">
<Layout
header={
<PageHeader
title="设备管理"
defaultBackPath="/"
rightContent={
<button
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
onClick={handleOpenAddDeviceModal}
>
<Plus className="h-4 w-4" />
添加设备
</button>
}
/>
}
>
<div className="bg-gray-50">
<div className="p-4 space-y-4">
{/* 统计卡片 */}
<div className="grid grid-cols-2 gap-3">
@@ -500,7 +502,6 @@ export default function Devices() {
</div>
</div>
</div>
{/* 添加设备弹窗 */}
{isAddDeviceOpen && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
@@ -713,6 +714,6 @@ export default function Devices() {
</div>
</div>
)}
</div>
</Layout>
);
}

148
nkebao/src/pages/profile/Profile.tsx
View File

@@ -7,6 +7,9 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useAuth } from '@/contexts/AuthContext';
import { useToast } from '@/components/ui/toast';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
import '@/components/Layout.css';
const menuItems = [
{ href: '/devices', label: '设备管理' },
@@ -52,85 +55,88 @@ export default function Profile() {
</div>
);
}
return (
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white pb-16">
<header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
<div className="flex justify-between items-center p-4">
<h1 className="text-xl font-semibold text-blue-600">我的</h1>
<div className="flex items-center space-x-2">
<Button variant="ghost" size="icon">
<Settings className="w-5 h-5" />
</Button>
<Button variant="ghost" size="icon">
<Bell className="w-5 h-5" />
</Button>
<Layout
header={
<div className="bg-white/80 backdrop-blur-sm border-b">
<div className="flex justify-between items-center p-4">
<h1 className="text-xl font-semibold text-blue-600">我的</h1>
<div className="flex items-center space-x-2">
<Button variant="ghost" size="icon">
<Settings className="w-5 h-5" />
</Button>
<Button variant="ghost" size="icon">
<Bell className="w-5 h-5" />
</Button>
</div>
</div>
</div>
</header>
<div className="p-4 space-y-6">
{/* 用户信息卡片 */}
<Card className="p-6">
<div className="flex items-center space-x-4">
<Avatar className="w-20 h-20">
<AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
<AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xl font-semibold shadow-lg">
{(userInfo?.username || user?.username || '用户').slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<div className="flex-1">
<h2 className="text-xl font-semibold text-blue-600">
{userInfo?.username || user?.username || '用户'}
</h2>
<p className="text-gray-500">
账号: {userInfo?.account || user?.account || Math.floor(10000000 + Math.random() * 90000000).toString()}
</p>
<div className="mt-2">
<Button
variant="outline"
size="sm"
onClick={() => {
toast({
title: '功能开发中',
description: '编辑资料功能正在开发中',
});
}}
>
编辑资料
</Button>
}
footer={<BottomNav />}
>
<div className="bg-gradient-to-b from-blue-50 to-white">
<div className="p-4 space-y-6">
{/* 用户信息卡片 */}
<Card className="p-6">
<div className="flex items-center space-x-4">
<Avatar className="w-20 h-20">
<AvatarImage src={userInfo?.avatar || user?.avatar || ''} />
<AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-xl font-semibold shadow-lg">
{(userInfo?.username || user?.username || '用户').slice(0, 2).toUpperCase()}
</AvatarFallback>
</Avatar>
<div className="flex-1">
<h2 className="text-xl font-semibold text-blue-600">
{userInfo?.username || user?.username || '用户'}
</h2>
<p className="text-gray-500">
账号: {userInfo?.account || user?.account || Math.floor(10000000 + Math.random() * 90000000).toString()}
</p>
<div className="mt-2">
<Button
variant="outline"
size="sm"
onClick={() => {
toast({
title: '功能开发中',
description: '编辑资料功能正在开发中',
});
}}
>
编辑资料
</Button>
</div>
</div>
</div>
</div>
</Card>
</Card>
{/* 功能菜单 */}
<Card className="divide-y">
{menuItems.map((item) => (
<div
key={item.href || item.label}
className="p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
onClick={() => (item.href ? navigate(item.href) : null)}
>
<div className="flex items-center">
<span>{item.label}</span>
{/* 功能菜单 */}
<Card className="divide-y">
{menuItems.map((item) => (
<div
key={item.href || item.label}
className="p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
onClick={() => (item.href ? navigate(item.href) : null)}
>
<div className="flex items-center">
<span>{item.label}</span>
</div>
<ChevronRight className="w-5 h-5 text-gray-400" />
</div>
<ChevronRight className="w-5 h-5 text-gray-400" />
</div>
))}
</Card>
))}
</Card>
{/* 退出登录按钮 */}
<Button
variant="ghost"
className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 mt-6"
onClick={() => setShowLogoutDialog(true)}
>
<LogOut className="w-5 h-5 mr-2" />
退出登录
</Button>
{/* 退出登录按钮 */}
<Button
variant="ghost"
className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 mt-6"
onClick={() => setShowLogoutDialog(true)}
>
<LogOut className="w-5 h-5 mr-2" />
退出登录
</Button>
</div>
</div>
{/* 退出登录确认对话框 */}
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
<DialogContent>
@@ -150,6 +156,6 @@ export default function Profile() {
</div>
</DialogContent>
</Dialog>
</div>
</Layout>
);
}

166
nkebao/src/pages/scenarios/Scenarios.tsx
View File

@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, TrendingUp } from 'lucide-react';
import PageHeader from '@/components/PageHeader';
import Layout from '@/components/Layout';
import BottomNav from '@/components/BottomNav';
import '@/components/Layout.css';
interface Scenario {
id: string;
@@ -107,94 +110,74 @@ export default function Scenarios() {
if (loading) {
return (
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
<PageHeader
title="场景获客"
showBack={false}
/>
<div className="flex justify-center items-center h-40">
<div className="text-gray-500">加载中...</div>
<Layout
header={
<PageHeader
title="场景获客"
showBack={false}
/>
}
footer={<BottomNav />}
>
<div className="bg-gray-50">
<div className="flex justify-center items-center h-40">
<div className="text-gray-500">加载中...</div>
</div>
</div>
</div>
</Layout>
);
}
if (error) {
return (
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
<Layout
header={
<PageHeader
title="场景获客"
showBack={false}
/>
}
footer={<BottomNav />}
>
<div className="bg-gray-50">
<div className="text-red-500 text-center py-8">{error}</div>
</div>
</Layout>
);
}
return (
<Layout
header={
<PageHeader
title="场景获客"
showBack={false}
/>
<div className="text-red-500 text-center py-8">{error}</div>
</div>
);
}
return (
<div className="flex-1 overflow-y-auto pb-20 bg-gray-50">
<PageHeader
title="场景获客"
showBack={false}
rightContent={
<button
onClick={() => navigate('/scenarios/new')}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
<div className="p-4">
<div className="grid grid-cols-2 gap-4">
{scenarios.map((scenario) => (
<div
key={scenario.id}
className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
onClick={() => navigate(`/scenarios/${scenario.id}/detail`)}
rightContent={
<button
onClick={() => navigate('/scenarios/new')}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<div className="p-4 flex flex-col items-center">
<img src={scenario.image} alt={scenario.name} className="w-12 h-12 mb-2 rounded" />
<h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
{scenario.description && (
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
)}
<div className="flex items-center mt-2 text-gray-500 text-sm">
<span>今日: </span>
<span className="font-medium ml-1">{scenario.count}</span>
</div>
<div className="flex items-center mt-1 text-green-500 text-xs">
<TrendingUp className="h-3 w-3 mr-1" />
<span>{scenario.growth}</span>
</div>
</div>
</div>
))}
</div>
{/* AI智能获客部分（暂时注释掉，可以后续启用） */}
{/*
<div className="mt-6">
<div className="flex items-center mb-4">
<h2 className="text-lg font-medium">AI智能获客</h2>
<span className="ml-2 px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded border">
Beta
</span>
</div>
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
}
footer={<BottomNav />}
>
<div className="bg-gray-50">
<div className="p-4">
<div className="grid grid-cols-2 gap-4">
{aiScenarios.map((scenario) => (
{scenarios.map((scenario) => (
<div
key={scenario.id}
className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
onClick={() => navigate(scenario.path)}
onClick={() => navigate(`/scenarios/${scenario.id}/detail`)}
>
<div className="p-4 flex flex-col items-center">
<div className="text-3xl mb-2">{scenario.icon}</div>
<img src={scenario.image} alt={scenario.name} className="w-12 h-12 mb-2 rounded" />
<h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
{scenario.description && (
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
)}
<div className="flex items-center mt-2 text-gray-500 text-sm">
<span>今日: </span>
<span className="font-medium ml-1">{scenario.count}</span>
@@ -207,9 +190,44 @@ export default function Scenarios() {
</div>
))}
</div>
{/* AI智能获客部分（暂时注释掉，可以后续启用） */}
{/*
<div className="mt-6">
<div className="flex items-center mb-4">
<h2 className="text-lg font-medium">AI智能获客</h2>
<span className="ml-2 px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded border">
Beta
</span>
</div>
<div className="grid grid-cols-2 gap-4">
{aiScenarios.map((scenario) => (
<div
key={scenario.id}
className="bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
onClick={() => navigate(scenario.path)}
>
<div className="p-4 flex flex-col items-center">
<div className="text-3xl mb-2">{scenario.icon}</div>
<h3 className="text-blue-600 font-medium text-center">{scenario.name}</h3>
<p className="text-xs text-gray-500 text-center mt-1 line-clamp-2">{scenario.description}</p>
<div className="flex items-center mt-2 text-gray-500 text-sm">
<span>今日: </span>
<span className="font-medium ml-1">{scenario.count}</span>
</div>
<div className="flex items-center mt-1 text-green-500 text-xs">
<TrendingUp className="h-3 w-3 mr-1" />
<span>{scenario.growth}</span>
</div>
</div>
</div>
))}
</div>
</div>
*/}
</div>
*/}
</div>
</div>
</Layout>
);
}

219
nkebao/src/pages/scenarios/douyin/DouyinScenario.tsx
View File

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom';
import { Plus, Copy, Trash2, Play, Pause, TrendingUp, Users, Clock } from 'lucide-react';
import PageHeader from '@/components/PageHeader';
import { useToast } from '@/components/ui/toast';
import Layout from '@/components/Layout';
import '@/components/Layout.css';
interface Task {
id: string;
@@ -122,123 +124,126 @@ export default function DouyinScenario() {
};
return (
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
<PageHeader
title="抖音获客"
defaultBackPath="/scenarios"
rightContent={
<button
onClick={() => navigate('/scenarios/new?scenario=douyin')}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
{/* 添加pt-16来避免被固定导航栏遮挡 */}
<div className="pt-16 p-4 max-w-7xl mx-auto">
{tasks.map((task) => (
<div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
{/* 任务头部 */}
<div className="p-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
{getStatusIcon(task.status)}
</div>
<div>
<h3 className="font-medium text-gray-900">{task.name}</h3>
<div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
{getStatusText(task.status)}
</span>
<span>最后更新: {task.lastUpdated}</span>
<Layout
header={
<PageHeader
title="抖音获客"
defaultBackPath="/scenarios"
rightContent={
<button
onClick={() => navigate('/scenarios/new?scenario=douyin')}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
}
>
<div className="bg-gradient-to-b from-blue-50 to-white">
<div className="p-4 max-w-7xl mx-auto">
{tasks.map((task) => (
<div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
{/* 任务头部 */}
<div className="p-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
{getStatusIcon(task.status)}
</div>
<div>
<h3 className="font-medium text-gray-900">{task.name}</h3>
<div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
{getStatusText(task.status)}
</span>
<span>最后更新: {task.lastUpdated}</span>
</div>
</div>
</div>
<div className="flex items-center space-x-2">
<button
onClick={() => handleCopyPlan(task.id)}
className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
title="复制计划"
>
<Copy className="h-4 w-4" />
</button>
<button
onClick={() => handleDeletePlan(task.id)}
className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
title="删除计划"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
</div>
<div className="flex items-center space-x-2">
<button
onClick={() => handleCopyPlan(task.id)}
className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
title="复制计划"
>
<Copy className="h-4 w-4" />
</button>
<button
onClick={() => handleDeletePlan(task.id)}
className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
title="删除计划"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
{/* 统计信息 */}
<div className="p-4">
<div className="grid grid-cols-3 gap-4 mb-4">
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">设备数</span>
</div>
<div className="text-xl font-bold text-blue-600">{task.stats.devices}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<TrendingUp className="h-4 w-4 mr-1" />
<span className="text-sm">已获客</span>
</div>
<div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">已添加</span>
</div>
<div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
</div>
</div>
{/* 趋势图表 */}
<div className="mb-4">
<h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
<div className="flex items-end space-x-1 h-20">
{task.trend.map((item, index) => (
<div key={index} className="flex-1 flex flex-col items-center">
<div
className="w-full bg-blue-200 rounded-t"
style={{ height: `${(item.customers / 15) * 100}%` }}
></div>
<span className="text-xs text-gray-500 mt-1">{item.date}</span>
</div>
))}
</div>
</div>
{/* 执行信息 */}
<div className="bg-gray-50 rounded-lg p-3">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">执行时间: {task.executionTime}</span>
<span className="text-blue-600">{task.nextExecutionTime}</span>
</div>
</div>
</div>
</div>
))}
{/* 统计信息 */}
<div className="p-4">
<div className="grid grid-cols-3 gap-4 mb-4">
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">设备数</span>
</div>
<div className="text-xl font-bold text-blue-600">{task.stats.devices}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<TrendingUp className="h-4 w-4 mr-1" />
<span className="text-sm">已获客</span>
</div>
<div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">已添加</span>
</div>
<div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
</div>
</div>
{/* 趋势图表 */}
<div className="mb-4">
<h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
<div className="flex items-end space-x-1 h-20">
{task.trend.map((item, index) => (
<div key={index} className="flex-1 flex flex-col items-center">
<div
className="w-full bg-blue-200 rounded-t"
style={{ height: `${(item.customers / 15) * 100}%` }}
></div>
<span className="text-xs text-gray-500 mt-1">{item.date}</span>
</div>
))}
</div>
</div>
{/* 执行信息 */}
<div className="bg-gray-50 rounded-lg p-3">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">执行时间: {task.executionTime}</span>
<span className="text-blue-600">{task.nextExecutionTime}</span>
</div>
</div>
{/* 设备树图表 */}
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<h3 className="text-lg font-medium text-gray-900 mb-4">设备分布</h3>
<div className="text-center py-8 text-gray-500">
<Users className="h-12 w-12 mx-auto mb-2 text-gray-300" />
<p>设备树图表功能开发中...</p>
</div>
</div>
))}
{/* 设备树图表 */}
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<h3 className="text-lg font-medium text-gray-900 mb-4">设备分布</h3>
<div className="text-center py-8 text-gray-500">
<Users className="h-12 w-12 mx-auto mb-2 text-gray-300" />
<p>设备树图表功能开发中...</p>
</div>
</div>
</div>
</div>
</Layout>
);
}

102
nkebao/src/pages/scenarios/gongzhonghao/GongzhonghaoScenario.tsx
View File

@@ -16,6 +16,8 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import PageHeader from '@/components/PageHeader';
import Layout from '@/components/Layout';
import '@/components/Layout.css';
import {
fetchSceneName,
fetchPlanList,
@@ -212,58 +214,60 @@ export default function GongzhonghaoScenario() {
};
return (
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
<PageHeader
title={channelName}
defaultBackPath="/scenarios"
rightContent={
<Button onClick={handleCreateNewPlan} size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
<Plus className="h-4 w-4 mr-1" />
新建计划
</Button>
}
/>
{/* 添加pt-16来避免被固定导航栏遮挡 */}
<div className="pt-16 p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
<div className="space-y-4">
{loading ? (
<div className="text-center py-12 text-gray-400">加载中...</div>
) : error ? (
<div className="text-center py-12 text-red-500">{error}</div>
) : tasks.length > 0 ? (
<>
{tasks.map((task) => (
<div key={task.id}>
<ScenarioAcquisitionCard
task={task}
channel={channel}
onEdit={() => handleEditPlan(task.id)}
onCopy={handleCopyPlan}
onDelete={handleDeletePlan}
onStatusChange={handleStatusChange}
onOpenSettings={handleOpenApiSettings}
/>
<Layout
header={
<PageHeader
title={channelName}
defaultBackPath="/scenarios"
rightContent={
<Button onClick={handleCreateNewPlan} size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
<Plus className="h-4 w-4 mr-1" />
新建计划
</Button>
}
/>
}
>
<div className="bg-gradient-to-b from-blue-50 to-white">
<div className="p-4 md:p-6 lg:p-8 max-w-7xl mx-auto">
<div className="space-y-4">
{loading ? (
<div className="text-center py-12 text-gray-400">加载中...</div>
) : error ? (
<div className="text-center py-12 text-red-500">{error}</div>
) : tasks.length > 0 ? (
<>
{tasks.map((task) => (
<div key={task.id}>
<ScenarioAcquisitionCard
task={task}
channel={channel}
onEdit={() => handleEditPlan(task.id)}
onCopy={handleCopyPlan}
onDelete={handleDeletePlan}
onStatusChange={handleStatusChange}
onOpenSettings={handleOpenApiSettings}
/>
</div>
))}
<div className="flex justify-center mt-6 gap-2">
<Button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</Button>
<span className="px-2">第 {page} 页 / 共 {Math.max(1, Math.ceil(total / pageSize))} 页</span>
<Button disabled={page * pageSize >= total} onClick={() => setPage(page + 1)}>下一页</Button>
</div>
))}
<div className="flex justify-center mt-6 gap-2">
<Button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</Button>
<span className="px-2">第 {page} 页 / 共 {Math.max(1, Math.ceil(total / pageSize))} 页</span>
<Button disabled={page * pageSize >= total} onClick={() => setPage(page + 1)}>下一页</Button>
</>
) : (
<div className="text-center py-12 bg-white rounded-lg shadow-sm md:col-span-2 lg:col-span-3">
<div className="text-gray-400 mb-4">暂无获客计划</div>
<Button onClick={handleCreateNewPlan} className="bg-blue-600 hover:bg-blue-700 text-white">
<Plus className="h-4 w-4 mr-1" />
新建计划
</Button>
</div>
</>
) : (
<div className="text-center py-12 bg-white rounded-lg shadow-sm md:col-span-2 lg:col-span-3">
<div className="text-gray-400 mb-4">暂无获客计划</div>
<Button onClick={handleCreateNewPlan} className="bg-blue-600 hover:bg-blue-700 text-white">
<Plus className="h-4 w-4 mr-1" />
新建计划
</Button>
</div>
)}
)}
</div>
</div>
</div>
{/* API接口设置对话框 */}
<Dialog open={showApiDialog} onOpenChange={setShowApiDialog}>
<DialogContent className="sm:max-w-md">
@@ -432,6 +436,6 @@ export default function GongzhonghaoScenario() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</Layout>
);
}

219
nkebao/src/pages/scenarios/haibao/HaibaoScenario.tsx
View File

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router-dom';
import { Plus, Copy, Trash2, Play, Pause, TrendingUp, Users, Clock, Image } from 'lucide-react';
import PageHeader from '@/components/PageHeader';
import { useToast } from '@/components/ui/toast';
import Layout from '@/components/Layout';
import '@/components/Layout.css';
interface Task {
id: string;
@@ -122,123 +124,126 @@ export default function HaibaoScenario() {
};
return (
<div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
<PageHeader
title="海报获客"
defaultBackPath="/scenarios"
rightContent={
<button
onClick={() => navigate('/scenarios/new?scenario=haibao')}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
{/* 添加pt-16来避免被固定导航栏遮挡 */}
<div className="pt-16 p-4 max-w-7xl mx-auto">
{tasks.map((task) => (
<div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
{/* 任务头部 */}
<div className="p-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
{getStatusIcon(task.status)}
</div>
<div>
<h3 className="font-medium text-gray-900">{task.name}</h3>
<div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
{getStatusText(task.status)}
</span>
<span>最后更新: {task.lastUpdated}</span>
<Layout
header={
<PageHeader
title="海报获客"
defaultBackPath="/scenarios"
rightContent={
<button
onClick={() => navigate('/scenarios/new?scenario=haibao')}
className="flex items-center px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
>
<Plus className="h-4 w-4 mr-1" />
新建计划
</button>
}
/>
}
>
<div className="bg-gradient-to-b from-blue-50 to-white">
<div className="p-4 max-w-7xl mx-auto">
{tasks.map((task) => (
<div key={task.id} className="bg-white rounded-lg shadow-sm border border-gray-100 mb-4 overflow-hidden">
{/* 任务头部 */}
<div className="p-4 border-b border-gray-100">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className={`p-2 rounded-lg ${getStatusColor(task.status)}`}>
{getStatusIcon(task.status)}
</div>
<div>
<h3 className="font-medium text-gray-900">{task.name}</h3>
<div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
{getStatusText(task.status)}
</span>
<span>最后更新: {task.lastUpdated}</span>
</div>
</div>
</div>
<div className="flex items-center space-x-2">
<button
onClick={() => handleCopyPlan(task.id)}
className="p-2 text-gray-400 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
title="复制计划"
>
<Copy className="h-4 w-4" />
</button>
<button
onClick={() => handleDeletePlan(task.id)}
className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
title="删除计划"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
</div>
<div className="flex items-center space-x-2">
<button
onClick={() => handleCopyPlan(task.id)}
className="p-2 text-gray-400 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
title="复制计划"
>
<Copy className="h-4 w-4" />
</button>
<button
onClick={() => handleDeletePlan(task.id)}
className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
title="删除计划"
>
<Trash2 className="h-4 w-4" />
</button>
</div>
{/* 统计信息 */}
<div className="p-4">
<div className="grid grid-cols-3 gap-4 mb-4">
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">设备数</span>
</div>
<div className="text-xl font-bold text-orange-600">{task.stats.devices}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<TrendingUp className="h-4 w-4 mr-1" />
<span className="text-sm">已获客</span>
</div>
<div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">已添加</span>
</div>
<div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
</div>
</div>
{/* 趋势图表 */}
<div className="mb-4">
<h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
<div className="flex items-end space-x-1 h-20">
{task.trend.map((item, index) => (
<div key={index} className="flex-1 flex flex-col items-center">
<div
className="w-full bg-orange-200 rounded-t"
style={{ height: `${(item.customers / 30) * 100}%` }}
></div>
<span className="text-xs text-gray-500 mt-1">{item.date}</span>
</div>
))}
</div>
</div>
{/* 执行信息 */}
<div className="bg-gray-50 rounded-lg p-3">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">执行时间: {task.executionTime}</span>
<span className="text-orange-600">{task.nextExecutionTime}</span>
</div>
</div>
</div>
</div>
))}
{/* 统计信息 */}
<div className="p-4">
<div className="grid grid-cols-3 gap-4 mb-4">
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">设备数</span>
</div>
<div className="text-xl font-bold text-orange-600">{task.stats.devices}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<TrendingUp className="h-4 w-4 mr-1" />
<span className="text-sm">已获客</span>
</div>
<div className="text-xl font-bold text-green-600">{task.stats.acquired}</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center text-gray-500 mb-1">
<Users className="h-4 w-4 mr-1" />
<span className="text-sm">已添加</span>
</div>
<div className="text-xl font-bold text-purple-600">{task.stats.added}</div>
</div>
</div>
{/* 趋势图表 */}
<div className="mb-4">
<h4 className="text-sm font-medium text-gray-700 mb-2">7天趋势</h4>
<div className="flex items-end space-x-1 h-20">
{task.trend.map((item, index) => (
<div key={index} className="flex-1 flex flex-col items-center">
<div
className="w-full bg-orange-200 rounded-t"
style={{ height: `${(item.customers / 30) * 100}%` }}
></div>
<span className="text-xs text-gray-500 mt-1">{item.date}</span>
</div>
))}
</div>
</div>
{/* 执行信息 */}
<div className="bg-gray-50 rounded-lg p-3">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">执行时间: {task.executionTime}</span>
<span className="text-orange-600">{task.nextExecutionTime}</span>
</div>
</div>
{/* 海报管理 */}
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<h3 className="text-lg font-medium text-gray-900 mb-4">海报管理</h3>
<div className="text-center py-8 text-gray-500">
<Image className="h-12 w-12 mx-auto mb-2 text-gray-300" />
<p>海报管理功能开发中...</p>
</div>
</div>
))}
{/* 海报管理 */}
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
<h3 className="text-lg font-medium text-gray-900 mb-4">海报管理</h3>
<div className="text-center py-8 text-gray-500">
<Image className="h-12 w-12 mx-auto mb-2 text-gray-300" />
<p>海报管理功能开发中...</p>
</div>
</div>
</div>
</div>
</Layout>
);
}