first commit
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
import {Button, Card, Row, Col, Dropdown, Space, Typography, Flex, Statistic, Progress, Descriptions, Tag, Avatar} from "antd";
|
||||
import {EllipsisOutlined, UserOutlined, TeamOutlined, ShoppingOutlined, RiseOutlined} from "@ant-design/icons";
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const BaseLayout = () => {
|
||||
return (
|
||||
<div style={{ minHeight: '100vh'}}>
|
||||
{/* 页面头部 */}
|
||||
<Card variant={"borderless"} style={{ marginBottom: 20}}>
|
||||
<Flex justify="space-between" align="center">
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: 4 }}>页面标题</Title>
|
||||
<Typography.Text type="secondary">这是页面的描述信息,可以简要说明页面用途</Typography.Text>
|
||||
</div>
|
||||
<Space style={{ height: "100%" }}>
|
||||
<Button icon={<UserOutlined />}>操作一</Button>
|
||||
<Button icon={<TeamOutlined />}>操作二</Button>
|
||||
<Button type="primary" icon={<ShoppingOutlined />}>主要操作</Button>
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
menu={{
|
||||
items: [
|
||||
{ label: '导出数据', key: '1', icon: <RiseOutlined /> },
|
||||
{ label: '批量操作', key: '2' },
|
||||
{ label: '更多设置', key: '3' },
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Button style={{ padding: '0 8px' }}>
|
||||
<EllipsisOutlined style={{ fontSize: 18 }} />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
</Flex>
|
||||
</Card>
|
||||
|
||||
{/* 数据统计卡片 */}
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="总用户数"
|
||||
value={11893}
|
||||
prefix={<UserOutlined style={{ color: '#1677ff' }} />}
|
||||
valueStyle={{ color: '#1677ff' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="success">+12.5%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="活跃用户"
|
||||
value={8234}
|
||||
prefix={<TeamOutlined style={{ color: '#52c41a' }} />}
|
||||
valueStyle={{ color: '#52c41a' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="success">+8.2%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="总订单"
|
||||
value={32567}
|
||||
prefix={<ShoppingOutlined style={{ color: '#faad14' }} />}
|
||||
valueStyle={{ color: '#faad14' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="warning">+5.3%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} lg={6}>
|
||||
<Card variant={"borderless"}>
|
||||
<Statistic
|
||||
title="总收入"
|
||||
value={98234}
|
||||
prefix="¥"
|
||||
valueStyle={{ color: '#f5222d' }}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<Tag color="error">-2.1%</Tag>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>较上周</Typography.Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 主内容区域 */}
|
||||
<Card
|
||||
variant={"borderless"}
|
||||
tabList={[
|
||||
{
|
||||
label: '基本信息',
|
||||
key: 'base',
|
||||
},
|
||||
{
|
||||
label: '详细信息',
|
||||
key: 'info'
|
||||
},
|
||||
{
|
||||
label: '数据分析',
|
||||
key: 'analysis'
|
||||
}
|
||||
]}
|
||||
activeTabKey="base"
|
||||
>
|
||||
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
|
||||
{/* 用户信息卡片 */}
|
||||
<Col xs={24} lg={24}>
|
||||
<Card
|
||||
title={<span><UserOutlined style={{ marginRight: 8 }} />用户信息概览</span>}
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: '#fff',
|
||||
borderRadius: 8
|
||||
}}
|
||||
styles={{
|
||||
header: {
|
||||
color: '#fff',
|
||||
borderBottom: '1px solid rgba(255,255,255,0.2)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={6}>
|
||||
<Avatar size={64} icon={<UserOutlined />} />
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<Typography.Title level={5} style={{ color: '#fff', marginTop: 0 }}>
|
||||
张三 / Zhang San
|
||||
</Typography.Title>
|
||||
<Typography.Text style={{ color: 'rgba(255,255,255,0.85)' }}>
|
||||
高级管理员 · 北京市朝阳区 · 在职
|
||||
</Typography.Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 详细信息卡片 */}
|
||||
<Col xs={24} lg={16}>
|
||||
<Card
|
||||
title="详细信息"
|
||||
style={{ height: '100%', borderRadius: 8 }}
|
||||
>
|
||||
<Descriptions column={{ xs: 1, sm: 2 }}>
|
||||
<Descriptions.Item label="用户名">zhangsan</Descriptions.Item>
|
||||
<Descriptions.Item label="手机号">138****8888</Descriptions.Item>
|
||||
<Descriptions.Item label="邮箱">zhangsan@example.com</Descriptions.Item>
|
||||
<Descriptions.Item label="部门">技术部</Descriptions.Item>
|
||||
<Descriptions.Item label="职位">高级工程师</Descriptions.Item>
|
||||
<Descriptions.Item label="入职时间">2023-01-15</Descriptions.Item>
|
||||
<Descriptions.Item label="状态">
|
||||
<Tag color="success">正常</Tag>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="权限等级">
|
||||
<Tag color="blue">管理员</Tag>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 进度统计卡片 */}
|
||||
<Col xs={24} lg={8}>
|
||||
<Card
|
||||
title="任务完成度"
|
||||
style={{ height: '100%', borderRadius: 8 }}
|
||||
>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span>本周任务</span>
|
||||
<span style={{ float: 'right', fontWeight: 600 }}>75%</span>
|
||||
</div>
|
||||
<Progress percent={75} strokeColor="#52c41a" />
|
||||
</div>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span>本月目标</span>
|
||||
<span style={{ float: 'right', fontWeight: 600 }}>60%</span>
|
||||
</div>
|
||||
<Progress percent={60} strokeColor="#1677ff" />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<span>年度KPI</span>
|
||||
<span style={{ float: 'right', fontWeight: 600 }}>45%</span>
|
||||
</div>
|
||||
<Progress percent={45} strokeColor="#faad14" />
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 底部操作按钮 */}
|
||||
<Flex justify="space-between" align="center">
|
||||
<Space>
|
||||
<Button size="large">重置</Button>
|
||||
<Button type="primary" size="large">保存</Button>
|
||||
<Button type="primary" size="large" ghost>提交审核</Button>
|
||||
</Space>
|
||||
<Typography.Text type="secondary">
|
||||
最后更新时间: 2026-01-01 10:30:00
|
||||
</Typography.Text>
|
||||
</Flex>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BaseLayout;
|
||||
Reference in New Issue
Block a user