feat: 本次提交更新内容如下
css module迁移
This commit is contained in:
@@ -1,7 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
return <h1>首页 Home</h1>;
|
||||
};
|
||||
|
||||
export default Home;
|
||||
14
nkebao/src/pages/home/api.ts
Normal file
14
nkebao/src/pages/home/api.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import request from '@/api/request';
|
||||
|
||||
// 设备统计
|
||||
export function getDeviceStats() {
|
||||
return request('/v1/dashboard/device-stats', {}, 'GET');
|
||||
}
|
||||
|
||||
// 微信号统计
|
||||
export function getWechatStats() {
|
||||
return request('/v1/dashboard/wechat-stats', {}, 'GET');
|
||||
}
|
||||
|
||||
// 你可以根据需要继续添加其他接口
|
||||
// 例如:场景获客统计、今日数据统计等
|
||||
35
nkebao/src/pages/home/index.scss
Normal file
35
nkebao/src/pages/home/index.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
.home-page {
|
||||
padding: 16px;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
.home-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #1677ff;
|
||||
text-align: center;
|
||||
}
|
||||
.home-cards {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-direction: column;
|
||||
.home-card {
|
||||
.home-card-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #1677ff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.home-card-desc {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-loading {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
65
nkebao/src/pages/home/index.tsx
Normal file
65
nkebao/src/pages/home/index.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Card, Toast } from "antd-mobile";
|
||||
import { getDeviceStats, getWechatStats } from "./api";
|
||||
import Layout from "@/com/Layout/Layout";
|
||||
import "./index.scss";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const [stats, setStats] = useState({
|
||||
totalDevices: 0,
|
||||
onlineDevices: 0,
|
||||
totalWechatAccounts: 0,
|
||||
onlineWechatAccounts: 0,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [device, wechat] = await Promise.all([
|
||||
getDeviceStats(),
|
||||
getWechatStats(),
|
||||
]);
|
||||
setStats({
|
||||
totalDevices: device.total || 0,
|
||||
onlineDevices: device.online || 0,
|
||||
totalWechatAccounts: wechat.total || 0,
|
||||
onlineWechatAccounts: wechat.active || 0,
|
||||
});
|
||||
} catch (err: any) {
|
||||
Toast.show({
|
||||
content: err?.message || "数据加载失败",
|
||||
position: "top",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
loading={loading}
|
||||
header={<h1 className="home-title">首页 Home</h1>}
|
||||
footer={<div>底部内容</div>} // 如有底部内容可加
|
||||
>
|
||||
<div className="home-cards">
|
||||
<Card title="设备数量" className="home-card">
|
||||
<div className="home-card-value">{stats.totalDevices}</div>
|
||||
<div className="home-card-desc">在线设备:{stats.onlineDevices}</div>
|
||||
</Card>
|
||||
<Card title="微信号数量" className="home-card">
|
||||
<div className="home-card-value">{stats.totalWechatAccounts}</div>
|
||||
<div className="home-card-desc">
|
||||
在线微信号:{stats.onlineWechatAccounts}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{loading && <div className="home-loading">加载中...</div>}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user