From dbc61c54bb814c67440bb788f2f60cb935a0f471 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E6=B0=B8=E5=B9=B3?= Date: Fri, 4 Jul 2025 11:53:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=90=8C=E6=AD=A5=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nkebao/postcss.config.js | 6 + nkebao/src/index.css | 4 + nkebao/src/pages/Home.tsx | 241 +++++++++++++++++++++++++++++++++++++- nkebao/tailwind.config.js | 10 ++ 4 files changed, 259 insertions(+), 2 deletions(-) create mode 100644 nkebao/postcss.config.js create mode 100644 nkebao/tailwind.config.js diff --git a/nkebao/postcss.config.js b/nkebao/postcss.config.js new file mode 100644 index 000000000..0cc9a9ded --- /dev/null +++ b/nkebao/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} \ No newline at end of file diff --git a/nkebao/src/index.css b/nkebao/src/index.css index ec2585e8c..17df0e7ec 100644 --- a/nkebao/src/index.css +++ b/nkebao/src/index.css @@ -1,3 +1,7 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/nkebao/src/pages/Home.tsx b/nkebao/src/pages/Home.tsx index f3ae16b30..f4e7ccad8 100644 --- a/nkebao/src/pages/Home.tsx +++ b/nkebao/src/pages/Home.tsx @@ -1,5 +1,242 @@ -import React from 'react'; +import React, { useEffect, useRef, useState } from 'react'; +import { Chart, registerables } from 'chart.js'; +import { useNavigate } from 'react-router-dom'; +import { Smartphone, Users, Activity, Bell } from 'lucide-react'; +Chart.register(...registerables); export default function Home() { - return
首页
; + const chartRef = useRef(null); + const chartInstance = useRef(null); + const navigate = useNavigate(); + + // 统计数据状态 + const [stats, setStats] = useState({ + totalDevices: 0, + onlineDevices: 0, + totalWechatAccounts: 0, + onlineWechatAccounts: 0, + }); + + // 业务场景数据 + const scenarioFeatures = [ + { + id: "douyin", + name: "抖音获客", + icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png", + color: "bg-blue-100 text-blue-600", + value: 156, + growth: 12, + }, + { + id: "xiaohongshu", + name: "小红书获客", + icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png", + color: "bg-red-100 text-red-600", + value: 89, + growth: 8, + }, + { + id: "gongzhonghao", + name: "公众号获客", + icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png", + color: "bg-green-100 text-green-600", + value: 234, + growth: 15, + }, + { + id: "haibao", + name: "海报获客", + icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png", + color: "bg-orange-100 text-orange-600", + value: 167, + growth: 10, + }, + ]; + + // 获取统计数据 + useEffect(() => { + const fetchStats = async () => { + try { + // 这里可以调用实际的API + // const response = await fetch('/api/stats'); + // const data = await response.json(); + + // 模拟数据 + setStats({ + totalDevices: 42, + onlineDevices: 35, + totalWechatAccounts: 42, + onlineWechatAccounts: 35, + }); + } catch (error) { + console.error('获取统计数据失败:', error); + } + }; + + fetchStats(); + }, []); + + useEffect(() => { + if (chartRef.current) { + if (chartInstance.current) chartInstance.current.destroy(); + chartInstance.current = new Chart(chartRef.current, { + type: 'line', + data: { + labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], + datasets: [ + { + label: '获客数量', + data: [120, 150, 180, 200, 230, 210, 190], + backgroundColor: 'rgba(59, 130, 246, 0.2)', + borderColor: 'rgba(59, 130, 246, 1)', + borderWidth: 2, + tension: 0.3, + pointRadius: 4, + pointBackgroundColor: 'rgba(59, 130, 246, 1)', + pointHoverRadius: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + tooltip: { + backgroundColor: 'rgba(255, 255, 255, 0.9)', + titleColor: '#333', + bodyColor: '#666', + borderColor: '#ddd', + borderWidth: 1, + padding: 10, + displayColors: false, + callbacks: { + label: (context) => `获客数量: ${context.parsed.y}`, + }, + }, + }, + scales: { + x: { + grid: { + display: false, + }, + }, + y: { + beginAtZero: true, + grid: { + color: 'rgba(0, 0, 0, 0.05)', + }, + }, + }, + }, + }); + } + return () => { + if (chartInstance.current) chartInstance.current.destroy(); + }; + }, []); + + const handleDevicesClick = () => { + navigate('/devices'); + }; + + const handleWechatClick = () => { + navigate('/wechat-accounts'); + }; + + return ( +
+
+
+

存客宝

+ +
+
+ +
+ {/* 统计卡片 */} +
+
+
+ 设备数量 +
+ {stats.totalDevices} + +
+
+
+
+
+ 微信号数量 +
+ {stats.totalWechatAccounts} + +
+
+
+
+
+ 在线微信号 +
+ {stats.onlineWechatAccounts} + +
+
+
+
+
+
+
+ + {/* 场景获客统计 */} +
+
+

场景获客统计

+
+
+ {scenarioFeatures + .sort((a, b) => b.value - a.value) + .map((scenario) => ( +
navigate(`/scenarios/${scenario.id}`)} + > +
+
+ {scenario.name} +
+
{scenario.value}
+
+ {scenario.name} +
+
+
+ ))} +
+
+ + {/* 每日获客趋势 */} +
+

每日获客趋势

+
+ +
+
+
+
+ ); } \ No newline at end of file diff --git a/nkebao/tailwind.config.js b/nkebao/tailwind.config.js new file mode 100644 index 000000000..2dd0ed4e4 --- /dev/null +++ b/nkebao/tailwind.config.js @@ -0,0 +1,10 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./src/**/*.{js,jsx,ts,tsx}", + ], + theme: { + extend: {}, + }, + plugins: [], +} \ No newline at end of file