Code Editor for app.py

import streamlit as st
import pandas as pd
import numpy as np

# Set page config
st.set_page_config(layout="wide")

# Custom CSS to match the design
st.markdown("""
    <style>
    .metric-card {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        margin: 10px;
    }
    .stDataFrame {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
    }
    </style>
    """, unsafe_allow_html=True)

# Sample data
def generate_sample_data():
    data = {
        'employee_id': ['EMP001', 'EMP002', 'EMP003', 'EMP004', 'EMP005'],
        'name': ['张三', '王五', '李四', '赵六', '张七'],
        'department': ['人力资源', '技术部', '销售部', '市场部', '技术部'],
        'status': ['在职', '在职', '离职', '在职', '在职'],
        'entry_date': ['2021.01.15', '2021.03.16', '2021.11.05', '2021.01.05', '2021.05.18'],
    }
    return pd.DataFrame(data)

# Metrics
total_employees = 248
active_positions = 224
new_hires = 12
departures = 5

# Layout
st.title("员工管理系统")

# Metrics row
col1, col2, col3, col4 = st.columns(4)
with col1:
    st.metric("员工总数", total_employees)
with col2:
    st.metric("合同总数", active_positions)
with col3:
    st.metric("本月入职", new_hires)
with col4:
    st.metric("本月离职", departures)

# Employee table section
st.subheader("员工列表")

# Search bar and add button row
search_col, button_col = st.columns([4,1])
with search_col:
    search = st.text_input("搜索员工名称、部门等", key="search")
with button_col:
    st.button("+ 新增员工", type="primary")

# Display employee table
df = generate_sample_data()
st.dataframe(
    df,
    hide_index=True,
    column_config={
        "employee_id": "工号",
        "name": "姓名",
        "department": "部门",
        "status": "状态",
        "entry_date": "入职日期"
    },
    use_container_width=True
)

# Pagination
col1, col2, col3 = st.columns([4, 1, 1])
with col2:
    st.write("1 2 3 4 5 ›")