Streamlit工单系统开发求助：创建待审批文本标签队列

1. 中文格式工单数据示例 #

先将你提供的英文数据转换为中文结构：

ticket_data = [
    {"标题": "工单A", "描述": "设备故障报修", "日期": "2024-05-20"},
    {"标题": "工单B", "描述": "系统权限申请", "日期": "2024-05-21"}
]

2. 自定义卡片样式实现 #

利用Streamlit的st.markdown结合内联CSS，实现类似附图的卡片式文本标签，无需依赖外部资源：

import streamlit as st

# 自定义卡片CSS样式
card_style = """
<style>
.ticket-card {
    background-color: #f0f2f6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #2196f3;
}
.ticket-title {
    font-size: 18px;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 8px;
}
.ticket-desc {
    font-size: 14px;
    color: #475569;
    margin-bottom: 4px;
}
.ticket-date {
    font-size: 12px;
    color: #64748b;
}
</style>
"""

# 加载样式
st.markdown(card_style, unsafe_allow_html=True)

# 遍历渲染所有工单卡片
for ticket in ticket_data:
    card_html = f"""
    <div class="ticket-card">
        <div class="ticket-title">{ticket["标题"]}</div>
        <div class="ticket-desc">{ticket["描述"]}</div>
        <div class="ticket-date">提交日期: {ticket["日期"]}</div>
    </div>
    """
    st.markdown(card_html, unsafe_allow_html=True)

3. 扩展管理员审批/驳回功能 #

如果需要给管理员添加操作按钮，可在卡片下方追加按钮组件：

# 遍历渲染卡片+操作按钮
for idx, ticket in enumerate(ticket_data):
    with st.container():
        # 渲染卡片内容
        card_html = f"""
        <div class="ticket-card">
            <div class="ticket-title">{ticket["标题"]}</div>
            <div class="ticket-desc">{ticket["描述"]}</div>
            <div class="ticket-date">提交日期: {ticket["日期"]}</div>
        </div>
        """
        st.markdown(card_html, unsafe_allow_html=True)
        
        # 添加审批/驳回按钮
        col1, col2 = st.columns(2)
        with col1:
            if st.button(f"审批工单 {idx+1}", key=f"approve_{idx}"):
                # 此处可添加审批状态更新逻辑
                st.success(f"已审批工单 {ticket['标题']}")
        with col2:
            if st.button(f"驳回工单 {idx+1}", key=f"reject_{idx}"):
                # 此处可添加驳回状态更新逻辑
                st.error(f"已驳回工单 {ticket['标题']}")

你可以根据附图的实际样式，调整CSS中的颜色、边框、内边距等参数，匹配需求效果。

内容的提问来源于stack exchange，提问作者Hayat