From 2bbfdf3891f18a7e8b3a07ab0ec3bf806dd6480c Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Fri, 29 Aug 2025 09:01:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/routes.js                              |   6 +
 .../staffmanage_particulars/Particulars.js    | 241 ++++++
 .../staffmanage_particulars/Particulars.less  | 334 ++++++++
 src/pages/staffmanage_particulars/girl.png    | Bin 0 -> 11225 bytes
 src/pages/staffmanage_staffinfo/StaffInfo.js  | 655 +++++++++++++++-
 .../staffmanage_staffinfo/StaffInfo.less      | 718 +++++++++++++++++-
 .../from/StaffInfoadd.js                      | 197 +++++
 .../staffmanage_staffresume/StaffResume.js    |   4 +-
 .../staffmanage_staffresume/StaffResume.less  | 477 +++++++++++-
 src/pages/topnavbar/TopNavBar.js              |   8 +-
 10 files changed, 2619 insertions(+), 21 deletions(-)
 create mode 100644 src/pages/staffmanage_particulars/Particulars.js
 create mode 100644 src/pages/staffmanage_particulars/Particulars.less
 create mode 100644 src/pages/staffmanage_particulars/girl.png
 create mode 100644 src/pages/staffmanage_staffinfo/from/StaffInfoadd.js

diff --git a/config/routes.js b/config/routes.js
index 946cab9..a1007da 100644
--- a/config/routes.js
+++ b/config/routes.js
@@ -63,6 +63,12 @@ export default [
                         name: 'staffresume',
                         component: './staffmanage_staffresume/StaffResume',
                     },
+                      {
+                        path: '/topnavbar00/staffmanage/particulars',
+                        // icon: 'bank',
+                        name: 'particulars',
+                        component: './staffmanage_particulars/Particulars',
+                    },
                 ],
             },
             // 组织管理
diff --git a/src/pages/staffmanage_particulars/Particulars.js b/src/pages/staffmanage_particulars/Particulars.js
new file mode 100644
index 0000000..079cd95
--- /dev/null
+++ b/src/pages/staffmanage_particulars/Particulars.js
@@ -0,0 +1,241 @@
+
+import React, { PureComponent } from 'react';
+import { Card, Avatar, Breadcrumb, Tag, Descriptions, Table, Row, Col, Button, Divider } from 'antd';
+import { UserOutlined, HomeOutlined, TeamOutlined, MailOutlined, PhoneOutlined, IdcardOutlined, ApartmentOutlined, HistoryOutlined, BookOutlined, ArrowLeftOutlined, EditOutlined, PrinterOutlined } from '@ant-design/icons';
+import { history } from 'umi';
+import styles from './Particulars.less';
+import girlAvatar from './girl.png';
+
+const careerTableData = [
+    {
+        key: '1',
+        company: '上海科技有限公司',
+        position: '高级产品经理',
+        duration: '2018-06-15 至今 · 5年4个月',
+        description: '主导公司核心产品线的规划与设计，带领5人产品团队，成功推出3款市场领先产品，用户增长300%',
+        status: 'current',
+    },
+    {
+        key: '2',
+        company: '北京云创科技',
+        position: '产品经理',
+        duration: '2015-07-01 至 2018-05-30 · 2年11个月',
+        description: '负责企业级SaaS产品的设计与迭代，成功将产品NPS从35提升至72，客户续费率提升至85%',
+        status: '',
+    },
+    {
+        key: '3',
+        company: '深圳创新科技',
+        position: '产品助理',
+        duration: '2013-09-01 至 2015-06-30 · 1年10个月',
+        description: '协助产品经理完成需求分析、原型设计，参与3个移动端项目从0到1的全过程',
+        status: '',
+    },
+];
+
+const educationTableData = [
+    {
+        key: '1',
+        school: '复旦大学',
+        degree: '硕士',
+        major: '计算机科学与技术',
+        duration: '2011-09 ~ 2013-07',
+    },
+    {
+        key: '2',
+        school: '华东理工大学',
+        degree: '本科',
+        major: '软件工程',
+        duration: '2007-09 ~ 2011-07',
+    },
+];
+
+class Particulars extends PureComponent {
+    handleGoBack = () => {
+        // 跳转到人员管理页面
+        history.push('/topnavbar00/staffmanage');
+    };
+
+    render() {
+        return (
+            <div className={styles.particularsContainer}>
+
+                {/* 面包屑导航 */}
+                <Breadcrumb 
+                    className={styles.breadcrumb}
+                    items={[
+                        {
+                            title: '人员管理',
+                        },
+                        {
+                            title: '人员详情',
+                        }
+                    ]}
+                />
+
+                {/* 返回按钮 */}
+                <Button type="link" icon={<ArrowLeftOutlined />} onClick={this.handleGoBack} className={styles.backBtn}>
+                    返回
+                </Button>
+
+                {/* 个人信息卡片 */}
+                <Card className={styles.profileCard}>
+                    <Row gutter={24} align="middle">
+                        <Col xs={24} sm={4} className={styles.avatarCol}>
+                            <Avatar size={80} src={girlAvatar} />
+                        </Col>
+                        <Col xs={24} sm={14}>
+                            <div className={styles.profileInfoHeader}>
+                                <div className={styles.nameSection}>
+                                    <span className={styles.profileName}>林晓梅</span>
+                                    <Tag color="blue">高级产品经理</Tag>
+                                    <span className={styles.profileDept}>产品研发中心</span>
+                                </div>
+                                <div className={styles.profileDetails}>
+                                    <Row gutter={[24, 8]}>
+                                        <Col span={12}>
+                                            <div className={styles.detailItem}>
+                                                <span className={styles.detailLabel}>员工编号</span>
+                                                <span className={styles.detailValue}>EMP20230085</span>
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div className={styles.detailItem}>
+                                                <span className={styles.detailLabel}>入职日期</span>
+                                                <span className={styles.detailValue}>2018-06-15</span>
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div className={styles.detailItem}>
+                                                <span className={styles.detailLabel}>工作年限</span>
+                                                <span className={styles.detailValue}>5年4个月</span>
+                                            </div>
+                                        </Col>
+                                        <Col span={12}>
+                                            <div className={styles.detailItem}>
+                                                <span className={styles.detailLabel}>员工状态</span>
+                                                <Tag color="green" className={styles.statusTag}>在职</Tag>
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            </div>
+                        </Col>
+                        <Col xs={24} sm={6} className={styles.actionCol}>
+                            <div className={styles.actionButtons}>
+                                <Button type="primary" icon={<EditOutlined />} className={styles.editBtn}>
+                                    编辑
+                                </Button>
+                                <Button icon={<PrinterOutlined />} className={styles.printBtn}>
+                                    打印
+                                </Button>
+                            </div>
+                        </Col>
+                    </Row>
+                </Card>
+
+                {/* 个人信息区 */}
+                <Card className={styles.infoCard} title={<><UserOutlined /> 个人信息</>}>
+                    <Descriptions column={2}>
+                        <Descriptions.Item label="身份证号">310******19900823****</Descriptions.Item>
+                        <Descriptions.Item label="婚姻状况">已婚</Descriptions.Item>
+                        <Descriptions.Item label="联系电话">138****5678</Descriptions.Item>
+                        <Descriptions.Item label="电子邮箱">linxiaomei@company.com</Descriptions.Item>
+                        <Descriptions.Item label="现居住地" span={2}>上海市浦东新区张江高科技园区科苑路88号</Descriptions.Item>
+                    </Descriptions>
+                </Card>
+
+                {/* 工作信息区 */}
+                <Card className={styles.infoCard} title={<><TeamOutlined /> 工作信息</>}>
+                    <Descriptions column={2}>
+                        <Descriptions.Item label="所属部门">产品研发中心 - 产品设计部</Descriptions.Item>
+                        <Descriptions.Item label="直接上级">张伟（产品研发中心总监）</Descriptions.Item>
+                        <Descriptions.Item label="工作职责" span={2}>负责公司核心产品线的规划与设计，主导产品全生命周期管理，协调跨部门资源推动产品落地</Descriptions.Item>
+                    </Descriptions>
+                </Card>
+
+                {/* 职业履历表格 */}
+                <Card className={styles.infoCard} title={<><HistoryOutlined /> 职业履历</>}>
+                    <div className={styles.tableWrapper}>
+                        <Table
+                            columns={[
+                                { title: '公司', dataIndex: 'company', key: 'company', width: '25%' },
+                                { title: '职位', dataIndex: 'position', key: 'position', width: '20%' },
+                                { title: '时间', dataIndex: 'duration', key: 'duration', width: '25%' },
+                                { title: '描述', dataIndex: 'description', key: 'description', width: '30%' },
+                            ]}
+                            dataSource={careerTableData}
+                            pagination={false}
+                            size="small"
+                            className={styles.customTable}
+                        />
+                    </div>
+                </Card>
+
+                {/* 职业履历时间轴（自定义实现） */}
+                {/* <Card className={styles.infoCard} title={<><HistoryOutlined /> 职业履历时间轴</>}>
+                    <div className={styles.careerTimeline}>
+                        {careerTableData.map((item, idx) => (
+                            <div key={item.key} className={styles.timelineItem}>
+                                <div className={styles.timelineDot + (item.status === 'current' ? ' ' + styles.timelineDotActive : '')}></div>
+                                <div className={styles.timelineContent}>
+                                    <div className={styles.timelineHeader}>
+                                        <span className={styles.timelineCompany}>{item.company}</span>
+                                        {item.status === 'current' && <Tag color="blue">当前公司</Tag>}
+                                    </div>
+                                    <div className={styles.timelinePosition}>{item.position}</div>
+                                    <div className={styles.timelineDuration}>{item.duration}</div>
+                                    <div className={styles.timelineDescription}>{item.description}</div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </Card> */}
+
+                {/* 教育经历表格 */}
+                <Card className={styles.infoCard} title={<><BookOutlined /> 教育经历</>}>
+                    <div className={styles.tableWrapper}>
+                        <Table
+                            columns={[
+                                { title: '学校', dataIndex: 'school', key: 'school', width: '30%' },
+                                { title: '学历', dataIndex: 'degree', key: 'degree', width: '20%' },
+                                { title: '专业', dataIndex: 'major', key: 'major', width: '30%' },
+                                { title: '时间', dataIndex: 'duration', key: 'duration', width: '20%' },
+                            ]}
+                            dataSource={educationTableData}
+                            pagination={false}
+                            size="small"
+                            className={styles.customTable}
+                        />
+                    </div>
+                </Card>
+
+                {/* 组织架构图 */}
+                {/* <Card className={styles.infoCard} title={<><ApartmentOutlined /> 组织架构</>}>
+                    <div className={styles.orgChartWrapper}>
+                        <img src="https://ai-public.mastergo.com/gen_page/map_placeholder_1280x720.png" alt="组织架构图" className={styles.orgChartImg} />
+                    </div>
+                </Card> */}
+
+                {/* 页脚 */}
+                <Divider />
+                <div className={styles.footer}>
+                    <div className={styles.footerLinks}>
+                        <a href="#">公司简介</a>
+                        <a href="#">发展历程</a>
+                        <a href="#">企业文化</a>
+                        <a href="#">管理团队</a>
+                        <a href="#">加入我们</a>
+                        <a href="#">隐私政策</a>
+                        <a href="#">服务条款</a>
+                        <a href="#">法律声明</a>
+                        <a href="#">沪ICP备12345678号-1</a>
+                    </div>
+                    <div className={styles.footerCopyright}>© 2023 人力资源管理系统 版权所有</div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Particulars;
diff --git a/src/pages/staffmanage_particulars/Particulars.less b/src/pages/staffmanage_particulars/Particulars.less
new file mode 100644
index 0000000..9da9f56
--- /dev/null
+++ b/src/pages/staffmanage_particulars/Particulars.less
@@ -0,0 +1,334 @@
+
+.particularsContainer {
+	background: #f5f6fa;
+    min-width: 70vw;
+	min-height: 100vh;
+	max-height: 100vh;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 16px 24px 32px 24px;
+}
+
+.announcementBar {
+	background: #fff;
+	box-shadow: 0 2px 8px #f0f1f2;
+	padding: 8px 24px;
+	font-size: 14px;
+	color: #666;
+	display: flex;
+	align-items: center;
+	gap: 24px;
+}
+.announcementTitle {
+	color: #2d5cf6;
+	font-weight: 500;
+	margin-right: 8px;
+}
+.announcementItem {
+	margin-right: 16px;
+}
+
+.breadcrumb {
+	margin: 24px 0 8px 0;
+	font-size: 13px;
+}
+.backBtn {
+	margin-bottom: 12px;
+}
+
+.profileCard {
+	margin-bottom: 24px;
+	border-radius: 12px;
+	box-shadow: 0 2px 8px #f0f1f2;
+}
+.avatarCol {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.profileInfoHeader {
+	padding: 8px 0;
+}
+.nameSection {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	margin-bottom: 16px;
+}
+.profileName {
+	font-size: 24px;
+	font-weight: bold;
+	color: #222;
+}
+.profileDept {
+	color: #888;
+	font-size: 15px;
+	margin-left: 4px;
+}
+.profileDetails {
+	margin-top: 8px;
+}
+.detailItem {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+.detailLabel {
+	font-size: 13px;
+	color: #888;
+	font-weight: 500;
+}
+.detailValue {
+	font-size: 15px;
+	color: #333;
+	font-weight: 600;
+}
+.statusTag {
+	margin: 0;
+	font-weight: 500;
+}
+.actionCol {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.actionButtons {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	width: 100%;
+	max-width: 120px;
+}
+.editBtn {
+	width: 100%;
+	height: 40px;
+	border-radius: 8px;
+	font-weight: 500;
+}
+.printBtn {
+	width: 100%;
+	height: 40px;
+	border-radius: 8px;
+	font-weight: 500;
+}
+
+@media (max-width: 768px) {
+	.actionButtons {
+		flex-direction: row;
+		max-width: none;
+	}
+	.nameSection {
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+}
+
+.infoCard {
+	margin-bottom: 24px;
+	border-radius: 12px;
+	box-shadow: 0 2px 8px #f0f1f2;
+
+	// 表格包装器样式
+	.tableWrapper {
+		margin-top: 16px;
+		border-radius: 8px;
+		overflow: hidden;
+		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+
+		// 自定义滚动条样式
+		&::-webkit-scrollbar {
+			width: 6px;
+			height: 6px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: #f5f5f5;
+			border-radius: 3px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: #d9d9d9;
+			border-radius: 3px;
+
+			&:hover {
+				background: #bfbfbf;
+			}
+		}
+	}
+
+	// 自定义表格样式
+	.customTable {
+		.ant-table-wrapper {
+			.ant-table-thead > tr > th {
+				background-color: #2c3e50 !important;
+				color: #ecf0f1 !important;
+				font-weight: 600;
+				border-bottom: 1px solid #34495e;
+				position: sticky;
+				top: 0;
+				z-index: 1;
+				text-align: center;
+				font-size: 14px;
+				padding: 16px 12px;
+				letter-spacing: 0.5px;
+			}
+
+			.ant-table-tbody > tr {
+				&:hover > td {
+					background-color: #f8f9ff !important;
+				}
+
+				&:nth-child(even) {
+					background-color: #fafbfc;
+				}
+
+				> td {
+					border-bottom: 1px solid #e8e8e8;
+					padding: 14px 12px;
+					font-size: 13px;
+					color: #333;
+					vertical-align: top;
+					line-height: 1.6;
+				}
+			}
+
+			.ant-table {
+				border-radius: 8px;
+				overflow: hidden;
+				border: 1px solid #e8e8e8;
+			}
+
+			.ant-table-container {
+				border-radius: 8px;
+			}
+		}
+	}
+
+	// 表格通用样式（为了向后兼容）
+	.ant-table-wrapper {
+		.ant-table-thead > tr > th {
+			background-color: #2c3e50 !important;
+			color: #ecf0f1 !important;
+			font-weight: 600;
+			border-bottom: 1px solid #34495e;
+			position: sticky;
+			top: 0;
+			z-index: 1;
+			text-align: center;
+			font-size: 13px;
+		}
+
+		.ant-table-tbody > tr {
+			&:hover > td {
+				background-color: #f8f9ff !important;
+			}
+
+			> td {
+				border-bottom: 1px solid #e8e8e8;
+				padding: 12px 8px;
+				font-size: 13px;
+				color: #333;
+				vertical-align: top;
+			}
+		}
+
+		.ant-table {
+			border-radius: 8px;
+			overflow: hidden;
+		}
+	}
+}
+
+.careerTimeline {
+	margin-top: 16px;
+	padding-left: 12px;
+	border-left: 2px solid #2d5cf6;
+}
+.timelineItem {
+	position: relative;
+	margin-bottom: 32px;
+	padding-left: 24px;
+}
+.timelineDot {
+	position: absolute;
+	left: -13px;
+	top: 8px;
+	width: 12px;
+	height: 12px;
+	background: #d9d9d9;
+	border-radius: 50%;
+	border: 2px solid #fff;
+	box-shadow: 0 0 0 2px #2d5cf6;
+}
+.timelineDotActive {
+	background: #2d5cf6;
+	box-shadow: 0 0 0 2px #2d5cf6;
+}
+.timelineContent {
+	margin-left: 8px;
+}
+.timelineHeader {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-weight: 500;
+	font-size: 16px;
+}
+.timelineCompany {
+	color: #222;
+}
+.timelinePosition {
+	color: #555;
+	font-size: 15px;
+	margin-top: 2px;
+}
+.timelineDuration {
+	color: #888;
+	font-size: 13px;
+	margin-top: 2px;
+}
+.timelineDescription {
+	color: #444;
+	font-size: 14px;
+	margin-top: 4px;
+}
+
+.orgChartWrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #f5f6fa;
+	border-radius: 8px;
+	padding: 16px;
+	min-height: 180px;
+}
+.orgChartImg {
+	max-width: 100%;
+	max-height: 220px;
+	object-fit: contain;
+}
+
+.footer {
+	margin-top: 32px;
+	text-align: center;
+	color: #888;
+	font-size: 13px;
+}
+.footerLinks {
+	margin-bottom: 8px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 16px;
+	justify-content: center;
+}
+.footerLinks a {
+	color: #888;
+	text-decoration: none;
+	transition: color 0.2s;
+}
+.footerLinks a:hover {
+	color: #2d5cf6;
+}
+.footerCopyright {
+	margin-top: 4px;
+}
diff --git a/src/pages/staffmanage_particulars/girl.png b/src/pages/staffmanage_particulars/girl.png
new file mode 100644
index 0000000000000000000000000000000000000000..44ff8f57292cbaf670654f3a7a1247ef1fd9244e
GIT binary patch
literal 11225
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
D_>;>N

literal 0
HcmV?d00001

diff --git a/src/pages/staffmanage_staffinfo/StaffInfo.js b/src/pages/staffmanage_staffinfo/StaffInfo.js
index 9f2025a..5641bc7 100644
--- a/src/pages/staffmanage_staffinfo/StaffInfo.js
+++ b/src/pages/staffmanage_staffinfo/StaffInfo.js
@@ -1,13 +1,658 @@
-import React, {Fragment, PureComponent} from 'react';
+import React, {  PureComponent } from 'react';
+import {
+    Card,
+    Tree,
+    Input,
+    Button,
+    Table,
+    Select,
+    Space,
+    Pagination,
+    Row,
+    Col,
+    Form,
+} from 'antd';
+import { history } from 'umi';
+import {
+    SearchOutlined,
+    ExpandOutlined,
+    DownloadOutlined,
+    UserOutlined,
+    TeamOutlined,
+    ApartmentOutlined,
+    SyncOutlined,
+    DollarOutlined,
+    SettingOutlined,
+    ClearOutlined,
+    UserAddOutlined,
+    EditOutlined,
+    DeleteOutlined
+} from '@ant-design/icons';
 import styles from './StaffInfo.less';
+import StaffInfoAdd from './from/StaffInfoadd';
+
+const { Option } = Select;
+
 class StaffInfo extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            searchForm: {},
+            selectedKeys: [],
+            expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
+            addModalVisible: false,  // 新增弹窗显示状态
+            addLoading: false,       // 新增loading状态
+            organizationData: [
+                {
+                    title: '飞利信科技有限公司',
+                    key: '0-0',
+                    count: 356,
+                    children: [
+                        {
+                            title: '技术部',
+                            key: '0-0-0',
+                            count: 120,
+                            children: [
+                                { title: '前端组', key: '0-0-0-0', count: 45 },
+                                { title: '后端组', key: '0-0-0-1', count: 52 },
+                                { title: '测试组', key: '0-0-0-2', count: 23 }
+                            ],
+                        },
+                        {
+                            title: '产品部',
+                            key: '0-0-1',
+                            count: 68,
+                            children: [
+                                { title: '产品设计组', key: '0-0-1-0', count: 28 },
+                                { title: '用户体验组', key: '0-0-1-1', count: 25 },
+                                { title: '产品运营组', key: '0-0-1-2', count: 15 }
+                            ],
+                        },
+                        {
+                            title: '运营部',
+                            key: '0-0-2',
+                            count: 52,
+                            children: [
+                                { title: '市场营销组', key: '0-0-2-0', count: 22 },
+                                { title: '客户服务组', key: '0-0-2-1', count: 18 },
+                                { title: '商务合作组', key: '0-0-2-2', count: 12 }
+                            ],
+                        },
+                        {
+                            title: '财务部',
+                            key: '0-0-3',
+                            count: 32,
+                            children: [
+                                { title: '会计组', key: '0-0-3-0', count: 18 },
+                                { title: '审计组', key: '0-0-3-1', count: 14 }
+                            ],
+                        },
+                        {
+                            title: '人事部',
+                            key: '0-0-4',
+                            count: 84,
+                            children: [
+                                { title: 'HR专员组', key: '0-0-4-0', count: 25 },
+                                { title: '招聘组', key: '0-0-4-1', count: 22 },
+                                { title: '培训组', key: '0-0-4-2', count: 18 },
+                                { title: '薪酬组', key: '0-0-4-3', count: 19 }
+                            ],
+                        },
+                    ],
+                },
+            ],
+            tableData: [
+                {
+                    key: '1',
+                    id: 1,
+                    name: '张三',
+                    phone: 28,  // 年龄
+                    idCard: '技术部',  // 部门
+                    department: '高级工程师',  // 岗位
+                    position: '全职',  // 工作性质
+                    status: '138****1234',  // 电话
+                    entryDate: '2020-03-15'
+                },
+                {
+                    key: '2',
+                    id: 2,
+                    name: '李四',
+                    phone: 30,  // 年龄
+                    idCard: '产品部',  // 部门
+                    department: '产品经理',  // 岗位
+                    position: '全职',  // 工作性质
+                    status: '139****5678',  // 电话
+                    entryDate: '2019-08-20'
+                },
+                {
+                    key: '3',
+                    id: 3,
+                    name: '王五',
+                    phone: 25,  // 年龄
+                    idCard: '运营部',  // 部门
+                    department: '运营专员',  // 岗位
+                    position: '全职',  // 工作性质
+                    status: '136****9999',  // 电话
+                    entryDate: '2021-05-10'
+                },
+                {
+                    key: '4',
+                    id: 4,
+                    name: '赵六',
+                    phone: 32,  // 年龄
+                    idCard: '财务部',  // 部门
+                    department: '会计',  // 岗位
+                    position: '全职',  // 工作性质
+                    status: '137****8888',  // 电话
+                    entryDate: '2018-12-01'
+                },
+                {
+                    key: '5',
+                    id: 5,
+                    name: '陈七',
+                    phone: 26,  // 年龄
+                    idCard: '人事部',  // 部门
+                    department: 'HR专员',  // 岗位
+                    position: '全职',  // 工作性质
+                    status: '135****7777',  // 电话
+                    entryDate: '2022-01-15'
+                },
+            ],
+            pagination: {
+                current: 1,
+                pageSize: 5,
+                total: 356,
+            }
+        };
+    }
+
+    // 获取处理后的树形数据
+    getTreeData = () => {
+        const { organizationData } = this.state;
+
+        const processNode = (node) => ({
+            key: node.key,
+            title: (
+                <span className={styles['tree-node-title']}>
+                    {this.getNodeIcon(node.title)}
+                    <span className={styles['node-title']}>{node.title}</span>
+                    <span className={styles['node-count']}>({node.count})</span>
+                </span>
+            ),
+            children: node.children ? node.children.map(processNode) : undefined
+        });
+
+        return organizationData.map(processNode);
+    };
+
+    // 获取节点图标
+    getNodeIcon = (title) => {
+        if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff' }} />;
+        if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a' }} />;
+        if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16' }} />;
+        if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96' }} />;
+        if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1' }} />;
+        if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2' }} />;
+        return <TeamOutlined style={{ color: '#666' }} />;
+    };
+
+    // 组织架构树数据 (保留原始数据以备后用)
+    treeData = [
+        {
+            title: '飞利信科技有限公司',
+            key: '0-0',
+            icon: <ApartmentOutlined />,
+            children: [
+                {
+                    title: '技术部',
+                    key: '0-0-0',
+                    icon: <TeamOutlined />,
+                    children: [
+                        {
+                            title: '前端组',
+                            key: '0-0-0-0',
+                            icon: <UserOutlined />
+                        },
+                        {
+                            title: '后端组',
+                            key: '0-0-0-1',
+                            icon: <UserOutlined />
+                        },
+                    ],
+                },
+                {
+                    title: '产品部',
+                    key: '0-0-1',
+                    icon: <TeamOutlined />,
+                    children: [
+                        {
+                            title: '产品设计组',
+                            key: '0-0-1-0',
+                            icon: <UserOutlined />
+                        },
+                    ],
+                },
+                {
+                    title: '运营部',
+                    key: '0-0-2',
+                    icon: <TeamOutlined />,
+                },
+                {
+                    title: '财务部',
+                    key: '0-0-3',
+                    icon: <TeamOutlined />,
+                },
+                {
+                    title: '人事部',
+                    key: '0-0-4',
+                    icon: <TeamOutlined />,
+                },
+            ],
+        },
+    ];
+
+    // 表格列配置
+    columns = [
+        {
+            title: '序号',
+            dataIndex: 'id',
+            key: 'id',
+            width: 60,
+            align: 'center',
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+            width: 60,
+            render: (text, record) => (
+                <Button 
+                    type="link" 
+                    style={{ padding: 0, fontWeight: 500 }}
+                    onClick={() => this.handleNameClick(record)}
+                >
+                    {text}
+                </Button>
+            ),
+        },
+        {
+            title: '年龄',
+            dataIndex: 'phone',
+            key: 'phone',
+            width: 50,
+        },
+        {
+            title: '部门',
+            dataIndex: 'idCard',
+            key: 'idCard',
+            width: 70,
+        },
+        {
+            title: '岗位',
+            dataIndex: 'department',
+            key: 'department',
+            width: 80,
+        },
+        {
+            title: '工作性质',
+            dataIndex: 'position',
+            key: 'position',
+            width: 50,
+        },
+        {
+            title: '电话',
+            dataIndex: 'status',
+            key: 'status',
+            width: 100,
+        },
+        {
+            title: '操作',
+            key: 'action',
+            width: 80,
+            render: (_, record) => (
+                <Space size="middle">
+                    <Button 
+                        type="link" 
+                        size="small"
+                        icon={<EditOutlined />}
+                        title="编辑"
+                    />
+                    <Button 
+                        type="link" 
+                        size="small" 
+                        danger
+                        icon={<DeleteOutlined />}
+                        title="删除"
+                    />
+                </Space>
+            ),
+        },
+    ];
+
+    // 搜索处理
+    handleSearch = (values) => {
+        console.log('搜索参数:', values);
+        this.setState({ searchForm: values });
+    };
+
+    // 重置搜索
+    handleReset = () => {
+        this.formRef?.resetFields();
+        this.setState({ searchForm: {} });
+    };
+
+    // 树节点选择
+    onTreeSelect = (selectedKeys, info) => {
+        console.log('选中节点:', selectedKeys, info);
+        this.setState({ selectedKeys });
+    };
+
+    // 树节点展开
+    onTreeExpand = (expandedKeys) => {
+        this.setState({ expandedKeys });
+    };
+
+    // 刷新树数据
+    handleTreeRefresh = () => {
+        console.log('刷新组织架构');
+        // 这里可以添加刷新树数据的逻辑
+    };
+
+    // 展开/收缩所有节点
+    handleTreeToggle = () => {
+        const { expandedKeys, organizationData } = this.state;
+        if (expandedKeys.length > 0) {
+            // 收缩所有节点
+            this.setState({ expandedKeys: [] });
+        } else {
+            // 展开所有节点
+            const getAllKeys = (nodes) => {
+                let keys = [];
+                nodes.forEach(node => {
+                    keys.push(node.key);
+                    if (node.children) {
+                        keys = keys.concat(getAllKeys(node.children));
+                    }
+                });
+                return keys;
+            };
+            this.setState({ expandedKeys: getAllKeys(organizationData) });
+        }
+    };
+
+    // 分页处理
+    onPaginationChange = (page, pageSize) => {
+        this.setState({
+            pagination: {
+                ...this.state.pagination,
+                current: page,
+                pageSize,
+            }
+        });
+    };
+
+    // 显示新增弹窗
+    showAddModal = () => {
+        this.setState({ addModalVisible: true });
+    };
+
+    // 关闭新增弹窗
+    hideAddModal = () => {
+        this.setState({ addModalVisible: false });
+    };
+
+    // 新增成功回调
+    handleAddSuccess = (values) => {
+        console.log('新增成功:', values);
+        
+        // 这里可以刷新列表数据
+        // 模拟添加到表格数据中
+        const newStaff = {
+            key: String(Date.now()),
+            id: this.state.tableData.length + 1,
+            name: values.name,
+            phone: values.age,  // 年龄
+            idCard: values.department,  // 部门
+            department: values.position,  // 岗位
+            position: values.workType,  // 工作性质
+            status: values.phone,  // 电话
+            entryDate: new Date().toISOString().split('T')[0]
+        };
+
+        this.setState({
+            tableData: [...this.state.tableData, newStaff],
+            pagination: {
+                ...this.state.pagination,
+                total: this.state.pagination.total + 1
+            }
+        });
+    };
+
+    // 处理姓名点击事件
+    handleNameClick = (record) => {
+        console.log('点击员工:', record);
+        // 跳转到人员详情页面，传递员工ID参数
+        history.push(`/topnavbar00/staffmanage/particulars`);
+    };
+
     render() {
+        const { tableData, pagination, expandedKeys, addModalVisible, addLoading } = this.state;
 
         return (
-            <>
-               <iframe title="人员列表" className={styles.frameContent} src="/人员列表.html"/>
-            </>
-        )
+            <div className={styles.staffInfoContainer}> 
+                {/* 主体内容 */}
+                <div className={styles.mainContent}>
+                    <Card className={styles.contentCard}>
+                        <Row gutter={24}>
+                            {/* 左侧组织架构树 */}
+                            <Col span={5}>
+                                <Card
+                                    title={
+                                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
+                                                <span>组织架构</span>
+                                            </div>
+                                            <Space>
+                                                <Button
+                                                    type="text"
+                                                    icon={<SyncOutlined />}
+                                                    size="small"
+                                                    style={{ color: '#1890ff' }}
+                                                    onClick={this.handleTreeRefresh}
+                                                    title="刷新"
+                                                />
+                                                <Button
+                                                    type="text"
+                                                    icon={<ExpandOutlined />}
+                                                    size="small"
+                                                    style={{ color: '#1890ff' }}
+                                                    onClick={this.handleTreeToggle}
+                                                    title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
+                                                />
+                                            </Space>
+                                        </div>
+                                    }
+                                    className={styles.treeCard}
+                                >
+                                    <div className={styles.treeContainer}>
+                                        <Tree
+                                            showIcon
+                                            expandedKeys={expandedKeys}
+                                            onSelect={this.onTreeSelect}
+                                            onExpand={this.onTreeExpand}
+                                            treeData={this.getTreeData()}
+                                            className={styles.orgTree}
+                                        />
+                                    </div>
+                                </Card>
+                            </Col>
+
+                            {/* 右侧人员信息区 */}
+                            <Col span={19}>
+                                {/* 筛选条件 */}
+                                <Card className={styles.searchCard}>
+                                    <Form
+                                        ref={(ref) => this.formRef = ref}
+                                        onFinish={this.handleSearch}
+                                        layout="vertical"
+                                    >
+                                        <Row gutter={12}>
+                                            <Col span={8}>
+                                                <Form.Item
+                                                    name="name"
+                                                    label="姓名"
+                                                >
+                                                    <Input
+                                                        placeholder="请输入姓名"
+                                                        // prefix={<UserOutlined />}
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={8}>
+                                                <Form.Item
+                                                    name="phone"
+                                                    label="电话"
+                                                >
+                                                    <Input
+                                                        placeholder="请输入电话"
+                                                        // prefix={<PhoneOutlined />}
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={8}>
+                                                <Form.Item
+                                                    name="idCard"
+                                                    label="身份证号"
+                                                >
+                                                    <Input
+                                                        placeholder="请输入身份证号"
+                                                        // prefix={<IdcardOutlined />}
+                                                    />
+                                                </Form.Item>
+                                            </Col>
+                                        </Row>
+                                        <Row gutter={16}>
+                                            <Col span={8}>
+                                                <Form.Item
+                                                    name="department"
+                                                    label="部门"
+                                                >
+                                                    <Select placeholder="请选择部门">
+                                                        <Option value="技术部">技术部</Option>
+                                                        <Option value="产品部">产品部</Option>
+                                                        <Option value="运营部">运营部</Option>
+                                                        <Option value="财务部">财务部</Option>
+                                                        <Option value="人事部">人事部</Option>
+                                                    </Select>
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={8}>
+                                                <Form.Item
+                                                    name="position"
+                                                    label="岗位"
+                                                >
+                                                    <Select placeholder="请选择岗位">
+                                                        <Option value="高级工程师">高级工程师</Option>
+                                                        <Option value="产品经理">产品经理</Option>
+                                                        <Option value="运营专员">运营专员</Option>
+                                                        <Option value="会计">会计</Option>
+                                                        <Option value="HR专员">HR专员</Option>
+                                                    </Select>
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={8}>
+                                                <Form.Item label=" " colon={false}>
+                                                    <Space size="middle">
+                                                        <Button
+                                                            type="primary"
+                                                            htmlType="submit"
+                                                            icon={<SearchOutlined />}
+                                                            size="large"
+                                                            className={styles.searchButton}
+                                                        >
+                                                            查询
+                                                        </Button>
+                                                        <Button
+                                                            onClick={this.handleReset}
+                                                            icon={<ClearOutlined />}
+                                                            size="large"
+                                                            className={styles.resetButton}
+                                                        >
+                                                            重置
+                                                        </Button>
+                                                    </Space>
+                                                </Form.Item>
+                                            </Col>
+                                        </Row>
+                                    </Form>
+                                </Card>
+
+                                {/* 操作按钮和统计 */}
+                                <div className={styles.actionBar}>
+                                    <div className={styles.totalInfo}>
+                                        {/* 共 {pagination.total} 条记录 */}
+                                    </div>
+                                    <Space size="middle">
+                                        <Button
+                                            icon={<DownloadOutlined />}
+                                            size="large"
+                                            className={styles.exportButton}
+                                        >
+                                            导出
+                                        </Button>
+                                        <Button
+                                            type="primary"
+                                            icon={<UserAddOutlined />}
+                                            size="large"
+                                            className={styles.addButton}
+                                            onClick={this.showAddModal}
+                                        >
+                                            新增
+                                        </Button>
+                                    </Space>
+                                </div>
+
+                                {/* 人员表格 */}
+                                <Card className={styles.tableCard}>
+                                    <Table
+                                        columns={this.columns}
+                                        dataSource={tableData}
+                                        pagination={false}
+                                        // scroll={{ x: 1200 }}
+                                        size="small"
+                                    />
+
+                                    {/* 分页 */}
+                                    <div className={styles.paginationWrapper}>
+                                        <Pagination
+                                            current={pagination.current}
+                                            total={pagination.total}
+                                            pageSize={pagination.pageSize}
+                                            showSizeChanger
+                                            showQuickJumper
+                                            showTotal={(total, range) =>
+                                                `显示 ${range[0]} 到 ${range[1]} 条，共 ${total} 条记录`
+                                            }
+                                            onChange={this.onPaginationChange}
+                                            onShowSizeChange={this.onPaginationChange}
+                                        />
+                                    </div>
+                                </Card>
+                            </Col>
+                        </Row>
+                    </Card>
+                </div>
+
+                {/* 新增人员弹窗 */}
+                <StaffInfoAdd
+                    visible={addModalVisible}
+                    loading={addLoading}
+                    onCancel={this.hideAddModal}
+                    onSuccess={this.handleAddSuccess}
+                />
+            </div>
+        );
     }
 }
 
diff --git a/src/pages/staffmanage_staffinfo/StaffInfo.less b/src/pages/staffmanage_staffinfo/StaffInfo.less
index d5bff80..8b43155 100644
--- a/src/pages/staffmanage_staffinfo/StaffInfo.less
+++ b/src/pages/staffmanage_staffinfo/StaffInfo.less
@@ -1,10 +1,714 @@
 @import '~@/utils/utils.less';
 
-.frameContent {
-  width: 100%;
-  height: 100vh;
-  border: none;
-  display: block;
-  margin: 0;
-  padding: 0;
+.staffInfoContainer {
+  min-height: 100vh;
+  background-color: #f5f6fa;
+
+  .announcementBar {
+    background: #e6f7ff;
+    border: 1px solid #91d5ff;
+    margin-bottom: 16px;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .announcement {
+      display: flex;
+      align-items: center;
+
+      .announcementLabel {
+        background-color: #fef3c7;
+        color: #92400e;
+        border-radius: 4px;
+        padding: 4px 8px;
+        font-size: 12px;
+        font-weight: 500;
+        margin-right: 12px;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+
+        .anticon {
+          margin-right: 4px;
+        }
+      }
+
+      .scrollContainer {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      .scrollContent {
+        display: inline-block;
+        animation: scroll 30s linear infinite;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .mainContent {
+    padding: 24px;
+
+    .contentCard {
+      .ant-card-head {
+        .ant-card-head-title {
+          font-size: 18px;
+          font-weight: 600;
+          color: #333;
+        }
+      }
+    }
+
+  .treeCard {
+    height: 600px;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+
+    .treeHeader {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 500;
+    }      .treeContainer {
+        height: 520px;
+        overflow-y: auto;
+
+        /* 自定义滚动条样式 */
+        &::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #d9d9d9;
+          border-radius: 3px;
+
+          &:hover {
+            background: #bfbfbf;
+          }
+        }
+
+        .orgTree {
+          .ant-tree-treenode {
+            padding: 2px 0;
+
+            .ant-tree-node-content-wrapper {
+              border-radius: 4px;
+              transition: all 0.3s ease;
+              padding: 4px 8px;
+
+              &:hover {
+                background-color: #f0f9ff;
+                transform: translateX(2px);
+              }
+
+              &.ant-tree-node-selected {
+                background-color: #e6f7ff !important;
+                box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+              }
+            }
+
+            .ant-tree-iconEle {
+              margin-right: 8px;
+            }
+
+            .ant-tree-title {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+
+    /* Tree节点标题样式 */
+    .tree-node-title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      .node-title {
+        flex: 1;
+        font-size: 14px;
+        margin-left: 8px;
+        color: #333;
+      }
+
+      .node-count {
+        color: #999;
+        font-size: 12px;
+        margin-left: auto;
+        background: #f0f0f0;
+        padding: 1px 6px;
+        border-radius: 10px;
+        min-width: 20px;
+        text-align: center;
+      }
+    }
+
+  .searchCard {
+    margin-bottom: 16px;
+    background-color: #f9fbfc;
+    border-radius: 8px;
+
+    .ant-card-body {
+      padding: 12px;
+      background-color: #f9fbfc;
+      border-radius: 6px;
+    }
+
+    .ant-form-item-label {
+      font-weight: 500;
+      
+      label {
+        color: #ecf0f1 !important;
+      }
+    }
+
+    // 深色背景下的表单项样式
+    .ant-input,
+    .ant-select-selector {
+      background-color: #34495e !important;
+      border-color: #5a6c7d !important;
+      color: #ecf0f1 !important;
+
+      &:hover {
+        border-color: #7fb3d3 !important;
+      }
+
+      &:focus {
+        border-color: #2d5cf6 !important;
+        box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
+      }
+    }
+
+    .ant-select-selection-placeholder,
+    .ant-input::placeholder {
+      color: #95a5a6 !important;
+    }
+
+    .anticon {
+      color: #95a5a6 !important;
+    }      /* 搜索按钮样式 */
+      .searchButton {
+        background: linear-gradient(135deg, #2d5cf6 0%, #4c7bff 100%);
+        border: none;
+        border-radius: 8px;
+
+        font-weight: 600;
+        font-size: 14px;
+        box-shadow: 0 4px 12px rgba(45, 92, 246, 0.3);
+        transition: all 0.3s ease;
+        margin-top: -8px;
+        height: 35px;
+        padding: 0 16px;
+
+        &:hover,
+        &:focus {
+          background: linear-gradient(135deg, #4c7bff 0%, #6b8fff 100%);
+          transform: translateY(-2px);
+          box-shadow: 0 6px 20px rgba(45, 92, 246, 0.4);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+
+      /* 重置按钮样式 */
+      .resetButton {
+        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+        border: 1px solid #d9d9d9;
+        color: #666;
+        border-radius: 8px;
+        font-weight: 500;
+        font-size: 14px;
+        transition: all 0.3s ease;
+        margin-top: -8px;
+        height: 35px;
+        padding: 0 16px;
+
+
+        &:hover,
+        &:focus {
+          background: linear-gradient(135deg, #e8e8e8 0%, #dcdcdc 100%);
+          border-color: #bfbfbf;
+          color: #333;
+          transform: translateY(-1px);
+          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .anticon {
+          color: #ff7875;
+        }
+      }
+    }
+
+    .actionBar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .totalInfo {
+        color: #666;
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      /* 导出按钮样式 */
+      .exportButton {
+        background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+        border: none;
+        color: white;
+        border-radius: 8px;
+        font-weight: 500;
+        font-size: 14px;
+        box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
+        transition: all 0.3s ease;
+        // margin-top: -8px;
+        height: 35px;
+        padding: 0 16px;
+
+
+        &:hover,
+        &:focus {
+          background: linear-gradient(135deg, #73d13d 0%, #95de64 100%);
+          transform: translateY(-2px);
+          box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
+          color: white;
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+
+        .anticon {
+          color: white;
+        }
+      }
+
+      /* 新增按钮样式 */
+      .addButton {
+        background: linear-gradient(135deg, #fa8c16 0%, #ffa940 100%);
+        border: none;
+        border-radius: 8px;
+        font-weight: 600;
+        font-size: 14px;
+        box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
+        transition: all 0.3s ease;
+            // margin-top: -8px;
+           height: 35px;
+        padding: 0 16px;
+
+
+        &:hover,
+        &:focus {
+          background: linear-gradient(135deg, #ffa940 0%, #ffc069 100%);
+          transform: translateY(-2px);
+          box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+
+    .tableCard {
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+      .ant-table-wrapper {
+        max-height: 600px;
+        overflow-y: auto;
+
+        /* 自定义滚动条样式 */
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: #f5f5f5;
+          border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #d9d9d9;
+          border-radius: 4px;
+
+          &:hover {
+            background: #bfbfbf;
+          }
+        }
+
+        .ant-table-thead>tr>th {
+          background-color: #fafafa;
+          font-weight: 600;
+          color: #333;
+          border-bottom: 1px solid #e8e8e8;
+          position: sticky;
+          top: 0;
+          z-index: 1;
+        }
+
+        .ant-table-tbody>tr {
+          &:hover>td {
+            background-color: #f5f5f5 !important;
+          }
+
+          >td {
+            border-bottom: 1px solid #f0f0f0;
+          }
+        }
+      }
+
+      .paginationWrapper {
+        margin-top: 20px;
+        text-align: right;
+
+        .ant-pagination {
+          .ant-pagination-total-text {
+            color: #666;
+          }
+
+          .ant-pagination-item {
+            border-radius: 4px;
+
+            &.ant-pagination-item-active {
+              background-color: #2d5cf6;
+              border-color: #2d5cf6;
+            }
+          }
+
+          .ant-pagination-prev,
+          .ant-pagination-next {
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+.mainContent {
+  padding: 12px;
+
+  .contentCard {
+    .ant-card-head {
+      .ant-card-head-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+  }
+
+  .treeCard {
+    height: 600px;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+
+    .treeHeader {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .treeContainer {
+      height: 520px;
+      overflow-y: auto;
+
+      /* 自定义滚动条样式 */
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #d9d9d9;
+        border-radius: 3px;
+
+        &:hover {
+          background: #bfbfbf;
+        }
+      }
+
+      .orgTree {
+        .ant-tree-treenode {
+          padding: 2px 0;
+
+          .ant-tree-node-content-wrapper {
+            border-radius: 4px;
+            transition: all 0.3s ease;
+            padding: 4px 8px;
+
+            &:hover {
+              background-color: #f0f9ff;
+              transform: translateX(2px);
+            }
+
+            &.ant-tree-node-selected {
+              background-color: #e6f7ff !important;
+              box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+            }
+          }
+
+          .ant-tree-iconEle {
+            margin-right: 8px;
+          }
+
+          .ant-tree-title {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  /* Tree节点标题样式 */
+  .tree-node-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .node-title {
+      flex: 1;
+      font-size: 14px;
+      margin-left: 8px;
+      color: #333;
+    }
+
+    .node-count {
+      color: #999;
+      font-size: 12px;
+      margin-left: auto;
+      background: #f0f0f0;
+      padding: 1px 6px;
+      border-radius: 10px;
+      min-width: 20px;
+      text-align: center;
+    }
+  }
+
+  .searchCard {
+    margin-bottom: 16px;
+    background-color: #f9fbfc;
+    border-radius: 8px;
+
+    .ant-card-body {
+      padding: 10px;
+      background-color: #f9fbfc;
+      border-radius: 6px;
+    }
+
+    .ant-form-item-label {
+      font-weight: 500;
+      
+      label {
+        color: #ecf0f1 !important;
+      }
+    }
+
+    // 深色背景下的表单项样式
+    .ant-input,
+    .ant-select-selector {
+      background-color: #34495e !important;
+      border-color: #5a6c7d !important;
+      color: #ecf0f1 !important;
+
+      &:hover {
+        border-color: #7fb3d3 !important;
+      }
+
+      &:focus {
+        border-color: #2d5cf6 !important;
+        box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
+      }
+    }
+
+    .ant-select-selection-placeholder,
+    .ant-input::placeholder {
+      color: #95a5a6 !important;
+    }
+
+    .anticon {
+      color: #95a5a6 !important;
+    }
+  }
+
+  .actionBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .totalInfo {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+
+  .tableCard {
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    padding-bottom: 10px;
+    .ant-table-wrapper {
+      max-height: 600px;
+      overflow-y: auto;
+
+      /* 自定义滚动条样式 */
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #f5f5f5;
+        border-radius: 4px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #d9d9d9;
+        border-radius: 4px;
+
+        &:hover {
+          background: #bfbfbf;
+        }
+      }
+
+      .ant-table-thead>tr>th {
+        background-color: #fafafa;
+        font-weight: 600;
+        color: #333;
+        border-bottom: 1px solid #e8e8e8;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .ant-table-tbody>tr {
+        &:hover>td {
+          background-color: #f5f5f5 !important;
+        }
+
+        >td {
+          border-bottom: 1px solid #f0f0f0;
+        }
+      }
+    }
+
+    .paginationWrapper {
+      margin-top: 20px;
+      text-align: right;
+
+      .ant-pagination {
+        .ant-pagination-total-text {
+          color: #666;
+        }
+
+        .ant-pagination-item {
+          border-radius: 4px;
+
+          &.ant-pagination-item-active {
+            background-color: #2d5cf6;
+            border-color: #2d5cf6;
+          }
+        }
+
+        .ant-pagination-prev,
+        .ant-pagination-next {
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+
+  :global {
+    .ant-card-body {
+      padding: 12px 24px 0px 24px;
+    }
+  }
+
+}
+
+
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .staffInfoContainer {
+    .mainContent {
+      .searchCard {
+        .ant-row {
+          .ant-col {
+            margin-bottom: 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 自定义主题色
+.ant-btn-primary {
+  background-color: #2d5cf6;
+  border-color: #2d5cf6;
+
+  &:hover,
+  &:focus {
+    background-color: #4c7bff;
+    border-color: #4c7bff;
+  }
+}
+
+.ant-tree .ant-tree-node-selected {
+  background-color: #e6f7ff !important;
+}
+
+.ant-select-focused .ant-select-selector,
+.ant-input-affix-wrapper-focused,
+.ant-input:focus,
+.ant-input-focused {
+  border-color: #2d5cf6 !important;
+  box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2) !important;
+}
+
+// 标签样式优化
+.ant-tag {
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+// 按钮组间距调整
+.ant-space-item {
+  .ant-btn+.ant-btn {
+    margin-left: 8px;
+  }
+}
+
+// 表格链接按钮样式
+.ant-btn-link {
+  padding: 0 4px;
+  font-size: 12px;
 }
\ No newline at end of file
diff --git a/src/pages/staffmanage_staffinfo/from/StaffInfoadd.js b/src/pages/staffmanage_staffinfo/from/StaffInfoadd.js
new file mode 100644
index 0000000..00b9a35
--- /dev/null
+++ b/src/pages/staffmanage_staffinfo/from/StaffInfoadd.js
@@ -0,0 +1,197 @@
+import React, { PureComponent } from 'react';
+import {
+    Modal,
+    Form,
+    Input,
+    Select,
+    InputNumber,
+    Row,
+    Col,
+    message
+} from 'antd';
+import {
+    UserOutlined,
+    PhoneOutlined,
+    TeamOutlined,
+    ApartmentOutlined
+} from '@ant-design/icons';
+
+const { Option } = Select;
+
+class StaffInfoAdd extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.formRef = React.createRef();
+    }
+
+    // 提交表单
+    handleSubmit = (values) => {
+        console.log('新增人员信息:', values);
+        
+        // 这里可以调用API接口保存数据
+        // 模拟保存成功
+        message.success('新增人员成功！');
+        
+        // 重置表单
+        this.formRef.current?.resetFields();
+        
+        // 调用父组件的回调函数
+        if (this.props.onSuccess) {
+            this.props.onSuccess(values);
+        }
+        
+        // 关闭弹窗
+        this.handleCancel();
+    };
+
+    // 取消操作
+    handleCancel = () => {
+        // 重置表单
+        this.formRef.current?.resetFields();
+        
+        // 调用父组件的关闭回调
+        if (this.props.onCancel) {
+            this.props.onCancel();
+        }
+    };
+
+    render() {
+        const { visible, loading = false } = this.props;
+
+        return (
+            <Modal
+                title="新增人员"
+                open={visible}
+                onOk={() => this.formRef.current?.submit()}
+                onCancel={this.handleCancel}
+                width={600}
+                confirmLoading={loading}
+                destroyOnClose={true}
+                maskClosable={false}
+            >
+                <Form
+                    ref={this.formRef}
+                    layout="vertical"
+                    onFinish={this.handleSubmit}
+                    initialValues={{
+                        workType: '全职'
+                    }}
+                >
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                name="name"
+                                label="姓名"
+                                rules={[
+                                    { required: true, message: '请输入姓名' },
+                                    { min: 2, max: 10, message: '姓名长度为2-10个字符' }
+                                ]}
+                            >
+                                <Input
+                                    placeholder="请输入姓名"
+                                    prefix={<UserOutlined />}
+                                />
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name="age"
+                                label="年龄"
+                                rules={[
+                                    { required: true, message: '请输入年龄' }
+                                ]}
+                            >
+                                <InputNumber
+                                    placeholder="请输入年龄"
+                                    min={18}
+                                    max={65}
+                                    style={{ width: '100%' }}
+                                />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                name="department"
+                                label="部门"
+                                rules={[
+                                    { required: true, message: '请选择部门' }
+                                ]}
+                            >
+                                <Select
+                                    placeholder="请选择部门"
+                                    suffixIcon={<ApartmentOutlined />}
+                                >
+                                    <Option value="技术部">技术部</Option>
+                                    <Option value="产品部">产品部</Option>
+                                    <Option value="运营部">运营部</Option>
+                                    <Option value="财务部">财务部</Option>
+                                    <Option value="人事部">人事部</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name="position"
+                                label="岗位"
+                                rules={[
+                                    { required: true, message: '请选择岗位' }
+                                ]}
+                            >
+                                <Select
+                                    placeholder="请选择岗位"
+                                    suffixIcon={<TeamOutlined />}
+                                >
+                                    <Option value="高级工程师">高级工程师</Option>
+                                    <Option value="产品经理">产品经理</Option>
+                                    <Option value="运营专员">运营专员</Option>
+                                    <Option value="会计">会计</Option>
+                                    <Option value="HR专员">HR专员</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+
+                    <Row gutter={16}>
+                        <Col span={12}>
+                            <Form.Item
+                                name="workType"
+                                label="工作性质"
+                                rules={[
+                                    { required: true, message: '请选择工作性质' }
+                                ]}
+                            >
+                                <Select placeholder="请选择工作性质">
+                                    <Option value="全职">全职</Option>
+                                    {/* <Option value="兼职">兼职</Option> */}
+                                    <Option value="实习">实习</Option>
+                                    <Option value="外包">外包</Option>
+                                </Select>
+                            </Form.Item>
+                        </Col>
+                        <Col span={12}>
+                            <Form.Item
+                                name="phone"
+                                label="电话"
+                                rules={[
+                                    { required: true, message: '请输入电话号码' },
+                                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
+                                ]}
+                            >
+                                <Input
+                                    placeholder="请输入电话号码"
+                                    prefix={<PhoneOutlined />}
+                                    maxLength={11}
+                                />
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                </Form>
+            </Modal>
+        );
+    }
+}
+
+export default StaffInfoAdd;
diff --git a/src/pages/staffmanage_staffresume/StaffResume.js b/src/pages/staffmanage_staffresume/StaffResume.js
index 73eef61..3eae1b0 100644
--- a/src/pages/staffmanage_staffresume/StaffResume.js
+++ b/src/pages/staffmanage_staffresume/StaffResume.js
@@ -1,6 +1,6 @@
 import React, {Fragment, PureComponent} from 'react';
 import styles from './StaffResume.less';
-class StaffResume extends PureComponent {
+class WorkFlow extends PureComponent {
     render() {
 
         return (
@@ -11,4 +11,4 @@ class StaffResume extends PureComponent {
     }
 }
 
-export default StaffResume
+export default WorkFlow
diff --git a/src/pages/staffmanage_staffresume/StaffResume.less b/src/pages/staffmanage_staffresume/StaffResume.less
index d5bff80..1409452 100644
--- a/src/pages/staffmanage_staffresume/StaffResume.less
+++ b/src/pages/staffmanage_staffresume/StaffResume.less
@@ -1,10 +1,475 @@
 @import '~@/utils/utils.less';
 
-.frameContent {
+// 主容器
+.container {
+  background-color: #F5F6FA;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+// 公告栏
+.announcement {
+  width: 100%;
+  background-color: #ffffff;
+  padding: 8px 16px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  .scrollContainer {
+    overflow: hidden;
+    white-space: nowrap;
+
+    .scrollContent {
+      display: inline-block;
+      animation: scroll 20s linear infinite;
+      
+      .announcementLabel {
+        font-weight: 500;
+        color: #2D5CF6;
+        margin-right: 16px;
+      }
+      
+      .announcementItem {
+        margin-right: 32px;
+        font-size: 14px;
+        color: #666;
+      }
+    }
+
+    @keyframes scroll {
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(-50%);
+      }
+    }
+  }
+}
+
+.mainContent {
+  flex: 1;
+  padding: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+// 导航栏
+.navigationBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  
+  .backButton {
+    color: #2D5CF6;
+    font-size: 14px;
+    padding-left: 0;
+    
+    &:hover {
+      color: #1040c6;
+    }
+  }
+}
+
+// 面包屑
+.breadcrumb {
+  .breadcrumbLink {
+    color: #999;
+    
+    &:hover {
+      color: #2D5CF6;
+    }
+  }
+}
+
+// 个人信息卡片
+.profileCard {
+  margin-bottom: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  
+  :global(.ant-card-body) {
+    padding: 24px;
+  }
+}
+
+.profileHeader {
+  display: flex;
+  flex-direction: column;
+  
+  .avatarSection {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: flex-start;
+    
+    .avatar {
+      border-radius: 8px;
+      border: 1px solid #e8e8e8;
+    }
+  }
+  
+  .profileInfo {
+    flex: 1;
+    
+    .profileMain {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      
+      .staffName {
+        font-size: 32px;
+        font-weight: bold;
+        color: #262626;
+        margin: 0 0 8px 0;
+      }
+      
+      .staffTitle {
+        color: #8c8c8c;
+        margin: 0;
+        font-size: 16px;
+      }
+      
+      .actionButtons {
+        margin-top: 8px;
+        display: flex;
+        gap: 8px;
+      }
+    }
+    
+    .basicInfo {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      
+      .infoItem {
+        .infoLabel {
+          font-size: 12px;
+          color: #8c8c8c;
+          margin: 0 0 4px 0;
+        }
+        
+        .infoValue {
+          font-size: 14px;
+          font-weight: 500;
+          color: #262626;
+          margin: 0;
+        }
+        
+        .infoValueStatus {
+          font-size: 14px;
+          font-weight: 500;
+          color: #52c41a;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+// 详情容器
+.detailsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+// 详情卡片
+.detailCard {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  
+  :global(.ant-card-head) {
+    border-bottom: 1px solid #f0f0f0;
+    
+    .ant-card-head-title {
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+}
+
+// 节标题
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  
+  .sectionIcon {
+    color: #2D5CF6;
+    margin-right: 8px;
+    font-size: 16px;
+  }
+}
+
+// 描述列表
+.descriptions {
+  :global(.ant-descriptions-item-label) {
+    font-weight: 500;
+    color: #8c8c8c;
+    font-size: 12px;
+    width: 100px;
+  }
+  
+  :global(.ant-descriptions-item-content) {
+    font-size: 14px;
+    color: #262626;
+  }
+}
+
+// 表格样式
+.detailTable {
+  :global(.ant-table-thead > tr > th) {
+    background-color: #fafafa;
+    font-weight: 500;
+    color: #8c8c8c;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  
+  .companyName, .schoolName {
+    font-weight: 500;
+    color: #262626;
+  }
+  
+  .duration {
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+}
+
+// 组织架构图
+.orgChart {
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 16px;
+  height: 256px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  .orgChartImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+
+// 职业时间线
+.careerTimeline {
+  :global(.ant-timeline-item-content) {
+    margin-left: 20px;
+  }
+  
+  .timelineItem {
+    padding: 16px 0;
+    border-left: 2px solid #e8e8e8;
+    margin-left: 8px;
+    position: relative;
+    
+    &:before {
+      content: '';
+      position: absolute;
+      left: -6px;
+      top: 20px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #d9d9d9;
+    }
+    
+    &:first-child:before {
+      background-color: #2D5CF6;
+    }
+    
+    .timelineContent {
+      margin-left: 24px;
+    }
+  }
+}
+
+.timelineHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 4px;
+  
+  .companyName {
+    font-weight: 500;
+    color: #262626;
+    margin: 0;
+    font-size: 16px;
+  }
+  
+  .positionName {
+    color: #8c8c8c;
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+.timelineDuration {
+  font-size: 12px;
+  color: #8c8c8c;
+  margin: 4px 0;
+}
+
+.timelineDescription {
+  font-size: 14px;
+  color: #595959;
+  margin: 8px 0 0 0;
+  line-height: 1.5;
+}
+
+// 底部通栏
+.footer {
+  background-color: #262626;
+  color: white;
   width: 100%;
-  height: 100vh;
-  border: none;
-  display: block;
-  margin: 0;
-  padding: 0;
+  padding: 32px 0;
+  margin-top: auto;
+  
+  .footerContent {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 16px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 32px;
+    margin-bottom: 24px;
+    
+    .footerSection {
+      .footerTitle {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 16px;
+        color: white;
+      }
+      
+      .footerList {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        
+        li {
+          margin-bottom: 8px;
+          
+          .footerLink {
+            font-size: 12px;
+            color: #bfbfbf;
+            text-decoration: none;
+            transition: color 0.3s;
+            
+            &:hover {
+              color: white;
+            }
+          }
+          
+          .contactItem {
+            font-size: 12px;
+            color: #bfbfbf;
+            display: flex;
+            align-items: flex-start;
+          }
+        }
+      }
+    }
+  }
+  
+  .footerBottom {
+    border-top: 1px solid #404040;
+    padding-top: 24px;
+    
+    .footerBottomContent {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-between;
+      
+      .copyright {
+        font-size: 12px;
+        color: #8c8c8c;
+        margin: 0 0 8px 0;
+      }
+      
+      .footerLinks {
+        display: flex;
+        gap: 16px;
+        
+        .footerBottomLink {
+          font-size: 12px;
+          color: #8c8c8c;
+          text-decoration: none;
+          transition: color 0.3s;
+          
+          &:hover {
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (min-width: 768px) {
+  .profileHeader {
+    flex-direction: row;
+    align-items: flex-start;
+    
+    .avatarSection {
+      margin-right: 24px;
+      margin-bottom: 0;
+    }
+    
+    .profileMain {
+      flex-direction: row;
+      align-items: center;
+      
+      .actionButtons {
+        margin-top: 0;
+      }
+    }
+    
+    .basicInfo {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+  
+  .footer {
+    .footerBottomContent {
+      flex-direction: row;
+      
+      .copyright {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .mainContent {
+    padding: 16px;
+  }
+  
+  .profileCard {
+    :global(.ant-card-body) {
+      padding: 16px;
+    }
+  }
+  
+  .basicInfo {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .footer {
+    .footerContent {
+      grid-template-columns: 1fr;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/pages/topnavbar/TopNavBar.js b/src/pages/topnavbar/TopNavBar.js
index 7bb3004..5e9950a 100644
--- a/src/pages/topnavbar/TopNavBar.js
+++ b/src/pages/topnavbar/TopNavBar.js
@@ -45,6 +45,12 @@ const menuItem = [
         key: '/topnavbar00/staffmanage/workflow',
         // icon: <SettingOutlined />,
       },
+      {
+        label: '',
+        // label: '详情页',
+        key: '/topnavbar00/staffmanage/particulars',
+        // icon: <SettingOutlined />,
+      },
     ]
   },
   {
@@ -170,7 +176,7 @@ const menuItem = [
     ]
   },
   {
-    label: '后台管理', 
+    label: '后台管理',
     key: '/topnavbar00/backendmanage',
     // icon: <SettingOutlined />,
     children: [