Skip to content

Commit a65e5eb

Browse files
zhipenglinzhipenglin
authored
Merge pull request #75 from kne-union/release
Release
2 parents 80725e5 + a6456b5 commit a65e5eb

23 files changed

+4284
-1032
lines changed

‎README.md‎

Lines changed: 1839 additions & 509 deletions
Large diffs are not rendered by default.

‎doc/api.md‎

Lines changed: 248 additions & 138 deletions
Large diffs are not rendered by default.

‎doc/base.js‎

Lines changed: 81 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,90 @@
11
const { default: InfoPage } = _InfoPage;
2-
const { Button } = antd;
2+
const { Button, Space, Flex, Tag } = antd;
33

44
const BaseExample = () => {
55
return (
6-
<InfoPage>
7-
InfoPage
8-
<InfoPage.Part title="Part Title" subtitle="我是一个subtitle" extra={<Button>操作</Button>}>
9-
InfoPage.Part
10-
<InfoPage.Part title="Part Title" subtitle="我是一个subtitle" extra={<Button>操作</Button>}>
11-
InfoPage.InfoPage.Part
6+
<Flex vertical gap={24}>
7+
<Space direction="vertical" size={16}>
8+
{/* 基础 Part 使用 */}
9+
<InfoPage.Part title="个人信息" subtitle="展示基础 Part 用法">
10+
<Space direction="vertical" size={8}>
11+
<div><strong>姓名：</strong>张三</div>
12+
<div><strong>性别：</strong>男</div>
13+
<div><strong>年龄：</strong>28岁</div>
14+
</Space>
1215
</InfoPage.Part>
13-
</InfoPage.Part>
14-
<InfoPage.Collapse
15-
items={[
16-
{ key: '1', label: 'This is default size panel header', children: <p>InfoPage.Collapse</p> },
17-
{ key: '2', label: 'This is default size panel header2', children: <p>InfoPage.Collapse2</p> }
18-
]}
19-
/>
20-
<InfoPage.Part title="Part Title" subtitle="我是一个subtitle" bordered extra={<Button>操作</Button>}>
21-
InfoPage.Part
22-
<InfoPage.Part title="Part Title" subtitle="我是一个subtitle" extra={<Button>操作</Button>}>
23-
InfoPage.InfoPage.Part
16+
17+
{/* 带 extra 的 Part */}
18+
<InfoPage.Part
19+
title="联系方式"
20+
subtitle="展示标题和额外操作区"
21+
extra={<Button type="primary" size="small">编辑</Button>}
22+
>
23+
<Space direction="vertical" size={8}>
24+
<div><strong>手机：</strong>138-0013-8000</div>
25+
<div><strong>邮箱：</strong>zhangsan@example.com</div>
26+
<div><strong>地址：</strong>深圳市南山区科技园</div>
27+
</Space>
28+
</InfoPage.Part>
29+
30+
{/* 嵌套 Part */}
31+
<InfoPage.Part title="工作经历">
32+
<p>以下展示了 Part 的嵌套使用：</p>
33+
<InfoPage.Part subtitle="现任职位" style={{ background: '#f5f5f5', padding: '12px' }}>
34+
<Space direction="vertical" size={8}>
35+
<div><strong>公司：</strong>腾讯科技</div>
36+
<div><strong>职位：</strong>高级前端工程师</div>
37+
<div><strong>入职时间：</strong>2020年3月</div>
38+
</Space>
39+
</InfoPage.Part>
40+
</InfoPage.Part>
41+
42+
{/* 带 bordered 的 Part */}
43+
<InfoPage.Part title="项目经验" bordered>
44+
<Space direction="vertical" size={8}>
45+
<div><strong>项目名称：</strong>企业级管理系统</div>
46+
<div><strong>技术栈：</strong>React、TypeScript、Ant Design</div>
47+
<div><strong>职责：</strong>负责前端架构设计与核心功能开发</div>
48+
</Space>
49+
</InfoPage.Part>
50+
51+
{/* Collapse 折叠面板 */}
52+
<InfoPage.Collapse
53+
items={[
54+
{
55+
key: '1',
56+
label: '教育背景',
57+
children: (
58+
<Space direction="vertical" size={8}>
59+
<div><strong>学校：</strong>深圳大学</div>
60+
<div><strong>专业：</strong>计算机科学与技术</div>
61+
<div><strong>学历：</strong>本科</div>
62+
<div><strong>毕业时间：</strong>2018年6月</div>
63+
</Space>
64+
)
65+
},
66+
{
67+
key: '2',
68+
label: '技能证书',
69+
children: (
70+
<Space wrap>
71+
<Tag color="blue">PMP项目管理</Tag>
72+
<Tag color="green">阿里云ACP认证</Tag>
73+
<Tag color="purple">AWS解决方案架构师</Tag>
74+
</Space>
75+
)
76+
}
77+
]}
78+
/>
79+
80+
{/* 无标题 Part */}
81+
<InfoPage.Part>
82+
<div style={{ color: '#666', padding: '12px', background: '#fafafa' }}>
83+
<strong>备注：</strong>以上信息仅供示例展示，不代表真实数据
84+
</div>
2485
</InfoPage.Part>
25-
</InfoPage.Part>
26-
<InfoPage.Part title="我是一个标题">
27-
xxxx
28-
</InfoPage.Part>
29-
</InfoPage>
86+
</Space>
87+
</Flex>
3088
);
3189
};
3290

‎doc/bordered-part-content.js‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
const { default: InfoPage, CentralContent } = _InfoPage;
2+
const { Tag, Avatar, Space } = antd;
3+
4+
const BaseExample = () => {
5+
return (
6+
<InfoPage>
7+
<InfoPage.Part bordered title="员工档案" subtitle="基本信息">
8+
<CentralContent
9+
type="compact"
10+
dataSource={{
11+
id: 'RC20240115001',
12+
name: '张三',
13+
gender: '男',
14+
birthday: '1992-03-15',
15+
idCard: '440301199203154512',
16+
maritalStatus: '已婚',
17+
education: '本科',
18+
graduationSchool: '深圳大学',
19+
major: '计算机科学与技术',
20+
entryDate: '2020-03-15',
21+
workYears: 4,
22+
phone: '138-0013-8000',
23+
email: 'zhangsan@tencent.com',
24+
address: '广东省深圳市南山区科技园科技中一路腾讯大厦',
25+
emergencyContact: '李四',
26+
emergencyPhone: '139-0014-9000',
27+
emergencyRelation: '配偶'
28+
}}
29+
col={3}
30+
columns={[
31+
{
32+
name: 'id',
33+
title: '员工编号',
34+
block: true
35+
},
36+
{
37+
name: 'name',
38+
title: '姓名',
39+
render: (value) => (
40+
<Space align="center">
41+
<Avatar style={{ backgroundColor: '#1890ff' }}>{value[0]}</Avatar>
42+
<strong>{value}</strong>
43+
</Space>
44+
),
45+
span: 10
46+
},
47+
{
48+
name: 'gender',
49+
title: '性别'
50+
},
51+
{
52+
name: 'birthday',
53+
title: '出生日期',
54+
format: 'date'
55+
},
56+
{
57+
name: 'idCard',
58+
title: '身份证号',
59+
render: (value) => value.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3')
60+
},
61+
{
62+
name: 'maritalStatus',
63+
title: '婚姻状况'
64+
},
65+
{
66+
name: 'education',
67+
title: '学历'
68+
},
69+
{
70+
name: 'graduationSchool',
71+
title: '毕业院校'
72+
},
73+
{
74+
name: 'major',
75+
title: '专业'
76+
},
77+
{
78+
name: 'entryDate',
79+
title: '入职日期',
80+
format: 'date'
81+
},
82+
{
83+
name: 'workYears',
84+
title: '工作年限',
85+
format: 'number-suffix:年'
86+
},
87+
{
88+
name: 'phone',
89+
title: '联系电话',
90+
render: (value) => value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
91+
},
92+
{
93+
name: 'email',
94+
title: '电子邮箱'
95+
},
96+
{
97+
name: 'address',
98+
title: '家庭住址',
99+
block: true
100+
},
101+
{
102+
name: 'emergencyContact',
103+
title: '紧急联系人'
104+
},
105+
{
106+
name: 'emergencyPhone',
107+
title: '紧急联系电话',
108+
render: (value) => value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
109+
},
110+
{
111+
name: 'emergencyRelation',
112+
title: '与本人关系'
113+
}
114+
]}
115+
/>
116+
</InfoPage.Part>
117+
118+
<InfoPage.Part bordered title="工作信息" subtitle="部门与职位">
119+
<CentralContent
120+
type="compact"
121+
dataSource={{
122+
department: '技术研发部',
123+
position: '高级前端工程师',
124+
level: 'T4-2',
125+
supervisor: '王总监',
126+
team: '前端开发组',
127+
workLocation: '深圳总部',
128+
office: '腾讯大厦A座18层',
129+
workStatus: '在职',
130+
contractType: '正式员工',
131+
contractStartDate: '2023-03-15',
132+
contractEndDate: '2026-03-14',
133+
probationPeriod: '已转正'
134+
}}
135+
col={2}
136+
columns={[
137+
{ name: 'department', title: '所属部门', span: 12 },
138+
{ name: 'position', title: '职位', span: 12 },
139+
{ name: 'level', title: '职级' },
140+
{ name: 'supervisor', title: '直属主管' },
141+
{ name: 'team', title: '所属团队' },
142+
{ name: 'workLocation', title: '工作地点' },
143+
{ name: 'office', title: '办公室位置' },
144+
{ name: 'workStatus', title: '工作状态', render: (value) => <Tag color="success">{value}</Tag> },
145+
{ name: 'contractType', title: '合同类型' },
146+
{ name: 'contractStartDate', title: '合同开始日期', format: 'date' },
147+
{ name: 'contractEndDate', title: '合同结束日期', format: 'date' },
148+
{ name: 'probationPeriod', title: '试用期状态', render: (value) => <Tag color="success">{value}</Tag> }
149+
]}
150+
/>
151+
</InfoPage.Part>
152+
153+
<InfoPage.Part bordered title="福利待遇" subtitle="薪资与福利">
154+
<CentralContent
155+
type="compact"
156+
dataSource={{
157+
baseSalary: 30000,
158+
performanceBonus: 5000,
159+
annualBonus: 50000,
160+
socialInsurance: '已缴纳（五险一金）',
161+
housingFund: 3600,
162+
medicalInsurance: '已包含',
163+
mealAllowance: 1500,
164+
transportAllowance: 800,
165+
stockOptions: 5000,
166+
otherBenefits: '年度体检、节日礼品、团建活动'
167+
}}
168+
col={2}
169+
columns={[
170+
{ name: 'baseSalary', title: '基本月薪', format: 'number-useGrouping:true-suffix:元', span: 12 },
171+
{ name: 'performanceBonus', title: '绩效奖金', format: 'number-useGrouping:true-suffix:元/月', span: 12 },
172+
{ name: 'annualBonus', title: '年终奖金', format: 'number-useGrouping:true-suffix:元', block: true },
173+
{ name: 'socialInsurance', title: '社会保险', render: (value) => <Tag color="success">{value}</Tag> },
174+
{ name: 'housingFund', title: '公积金', format: 'number-useGrouping:true-suffix:元/月' },
175+
{ name: 'medicalInsurance', title: '医疗保险', render: (value) => <Tag color="success">{value}</Tag> },
176+
{ name: 'mealAllowance', title: '餐补', format: 'number-useGrouping:true-suffix:元/月' },
177+
{ name: 'transportAllowance', title: '交通补贴', format: 'number-useGrouping:true-suffix:元/月' },
178+
{ name: 'stockOptions', title: '股票期权', format: 'number-useGrouping:true-suffix:股', block: true },
179+
{ name: 'otherBenefits', title: '其他福利', block: true }
180+
]}
181+
/>
182+
</InfoPage.Part>
183+
</InfoPage>
184+
);
185+
};
186+
187+
render(<BaseExample />);

‎doc/central-content.js‎

Lines changed: 48 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,54 @@
11
const { CentralContent } = _InfoPage;
2+
const { Tag, Space } = antd;
23

34
const BaseExample = () => {
4-
return (<CentralContent dataSource={{
5-
id: 'RC00101',
6-
name: '张三',
7-
birthday: '2020-03-03',
8-
addTime: new Date(),
9-
count: 2000.1322,
10-
count2: 0.01234565,
11-
count3: 1234523,
12-
description: `描述描述描述描述描述描述描述描述\n描述描述描述描述描述描述描述描述\n描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述`,
13-
description2: `描述描述描述描述描述描述描述描述`
14-
}} col={3} columns={[{
15-
name: 'id', title: 'ID', block: true
16-
}, {
17-
name: 'name', title: '姓名', span: 10
18-
}, {
19-
name: 'birthday', title: '出生日期', format: 'date'
20-
}, {
21-
name: 'addTime', title: '添加时间', format: 'datetime'
22-
}, {
23-
name: 'count', title: '数量', format: 'number-useGrouping:false-suffix:个'
24-
}, {
25-
name: 'count2', title: '百分比', format: 'number-percent money-百分比'
26-
}, {
27-
name: 'count3', title: '万元', format: 'number-suffix:万元--10000'
28-
}, {
29-
name: 'empty', title: '空值显示'
30-
}, {
31-
name: 'empty2', title: '空值显示2', placeholder: '空'
32-
}, {
33-
name: 'empty3', title: '空值显示3', emptyIsPlaceholder: false
34-
}, {
35-
name: 'description', title: '描述'
36-
}, {
37-
name: 'description2', title: '描述'
38-
}]} />);
5+
return (
6+
<CentralContent
7+
dataSource={{
8+
id: 'RC20240115001',
9+
name: '张三',
10+
department: '技术研发部',
11+
position: '高级前端工程师',
12+
email: 'zhangsan@tencent.com',
13+
phone: '138-0013-8000',
14+
entryDate: '2020-03-15',
15+
workYears: 4,
16+
performanceScore: 92.5,
17+
salary: 35000,
18+
bonus: 50000,
19+
leaveDays: 5,
20+
projectCount: 8,
21+
description: `负责公司核心产品的前端架构设计与开发工作，主导了多个重要项目的技术方案设计。精通React、Vue等主流前端框架，对TypeScript有深入理解。在性能优化方面有丰富经验，成功将项目加载时间减少40%。`,
22+
skills: `React, Vue, TypeScript, Node.js, Webpack, Vite, Jenkins, Docker, Kubernetes`
23+
}}
24+
col={3}
25+
columns={[
26+
{ name: 'id', title: '员工编号', block: true },
27+
{ name: 'name', title: '姓名', span: 8 },
28+
{ name: 'department', title: '部门' },
29+
{ name: 'position', title: '职位', span: 10 },
30+
{ name: 'email', title: '电子邮箱' },
31+
{ name: 'phone', title: '联系电话' },
32+
{ name: 'entryDate', title: '入职日期', format: 'date' },
33+
{ name: 'workYears', title: '工作年限', format: 'number-suffix:年' },
34+
{ name: 'performanceScore', title: '绩效评分', format: 'number-maximumFractionDigits:1-suffix:分' },
35+
{ name: 'salary', title: '月薪', format: 'number-useGrouping:true-suffix:元' },
36+
{ name: 'bonus', title: '年终奖金', format: 'number-useGrouping:true-suffix:元' },
37+
{ name: 'leaveDays', title: '年度剩余年假', format: 'number-suffix:天' },
38+
{ name: 'projectCount', title: '参与项目数', format: 'number-suffix:个' },
39+
{ name: 'empty', title: '公积金账号' },
40+
{ name: 'empty2', title: '社保卡号', placeholder: '未办理' },
41+
{ name: 'description', title: '工作描述', block: true },
42+
{ name: 'skills', title: '技能标签', render: (value) => (
43+
<Space wrap>
44+
{value.split(',').map(skill => (
45+
<Tag key={skill} color="blue" style={{ marginBottom: 4 }}>{skill.trim()}</Tag>
46+
))}
47+
</Space>
48+
)}
49+
]}
50+
/>
51+
);
3952
};
4053

4154
render(<BaseExample />);

0 commit comments

Comments
 (0)