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

faet: 存一版本，首页样式处理好了。

Browse Source
This commit is contained in:
许永平
2025-07-04 16:32:07 +08:00
parent 7e0d9210a9
commit aba02e0835
3 changed files with 142 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
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';
// 模拟数据
const stats = {
@@ -54,78 +55,86 @@ export default function Home() {
};
useEffect(() => {
if (chartRef.current) {
// 如果已经有图表实例，先销毁它
if (chartInstance.current) {
chartInstance.current.destroy();
}
if (!chartRef.current) return;
const ctx = chartRef.current.getContext('2d');
if (ctx) {
// 动态导入Chart.js
import('chart.js/auto').then(({ Chart }) => {
// 创建新的图表实例
chartInstance.current = new Chart(ctx, {
type: 'line',
data: {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets: [
{
label: '获客数量',
data: [12, 19, 15, 25, 22, 30, 28],
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: any) => `获客数量: ${context.parsed.y}`,
},
},
},
scales: {
x: {
grid: {
display: false,
},
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)',
},
},
},
},
});
});
}
// 销毁旧实例
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
// 组件卸载时清理图表实例
const ctx = chartRef.current.getContext('2d');
if (ctx) {
chartInstance.current = new Chart(ctx, {
type: 'line',
data: {
labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
datasets: [
{
label: '获客数量',
data: [12, 19, 15, 25, 22, 30, 28],
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: any) => `获客数量: ${context.parsed.y}`,
},
},
},
scales: {
x: {
grid: {
display: false,
},
ticks: {
font: {
size: 12, // 0.75rem
},
},
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)',
},
ticks: {
font: {
size: 12, // 0.75rem
},
},
},
},
},
});
}
// 卸载时销毁
return () => {
if (chartInstance.current) {
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, []);