项目3：云端团队提醒Dashboard

项目目标

创建一个可分享给同事的云端网页应用，同事上传Excel任务清单后，自动生成任务提醒邮件并显示Dashboard。这将让你的工具真正服务整个团队！

职场场景

痛点描述

作为团队负责人，你需要：

每周收集各成员的任务Excel
整理成汇总表
发邮件提醒即将到期或逾期的任务
分发给团队成员查看

::: 😓 问题所在

需要手动合并多个Excel
每周重复发送提醒邮件
团队成员看不到整体进度
离开电脑就无法处理 :::

解决后收益

用云端Dashboard后：

团队成员自助上传Excel
自动生成可视化Dashboard
自动发送提醒邮件
分享链接，随时随地访问

准备工作

1. 注册云平台账号

我们推荐使用 Streamlit Cloud（免费、简单、与项目2的代码无缝衔接）。

▶️ 注册 Streamlit Cloud

其他选择

Render (https://render.com) - 免费额度，支持多种语言
Railway (https://railway.app) - 简单易用，新用户送免费额度
Cloudflare Pages (https://pages.cloudflare.com) - 全球CDN加速

2. 准备示例文件

下载我们的示例：:download: 任务清单模板.xlsx

Excel格式：

任务名称	负责人	截止日期	状态	优先级
完成Q1报告	张三	2026-03-20	进行中	高
客户演示	李四	2026-03-25	未开始	高
数据整理	王五	2026-03-15	已完成	中

3. 创建GitHub仓库（部署需要）

访问 GitHub.com 并登录
点击右上角 "+" → "New repository"
仓库名：team-dashboard
设置为Public（免费部署需要）
点击"Create repository"

开始项目

步骤1：创建Dashboard应用

打开Claude Code，复制下面的完整Prompt：

✏️ 点击复制完整Prompt

text

我需要你帮我创建一个Streamlit云端Dashboard应用，用于团队任务管理和提醒。

功能需求：
1. 上传Excel任务清单（包含：任务名称、负责人、截止日期、状态、优先级）
2. 显示任务统计面板：
   - 总任务数
   - 进行中/已完成/未开始的任务数
   - 即将到期（3天内）的任务数
   - 逾期任务数
3. 任务列表表格，支持按状态、负责人、优先级筛选
4. 任务进度图表（饼图或柱状图）
5. 即将到期和逾期任务高亮显示
6. 自动生成提醒邮件内容（可复制）
7. 支持多个Excel文件上传，自动合并数据

界面设计：
- 顶部：应用标题和说明
- 统计卡片：4个统计数字横向排列
- 图表区：任务分布饼图
- 筛选区：下拉框筛选条件
- 表格区：任务列表（颜色标识）
- 邮件区：生成的提醒邮件内容

技术要求：
- 使用streamlit创建网页
- 使用plotly或altair绘制图表
- 使用pandas处理数据
- 支持中文显示
- 添加详细注释
- 优化移动端显示

请创建app.py文件。

步骤2：查看生成的代码

关键功能解读：

python

import streamlit as st
import pandas as pd
import plotly.express as px
from datetime import datetime, timedelta

# 页面配置
st.set_page_config(
    page_title="团队任务Dashboard",
    layout="wide",
    page_icon="📊"
)

# 标题和说明
st.title("📊 团队任务管理Dashboard")
st.markdown("上传团队任务清单，查看进度和风险")

# 文件上传
uploaded_file = st.file_uploader(
    "上传任务清单Excel",
    type=['xlsx', 'xls'],
    help="包含：任务名称、负责人、截止日期、状态、优先级"
)

if uploaded_file:
    # 读取数据
    df = pd.read_excel(uploaded_file)

    # 数据预处理
    df['截止日期'] = pd.to_datetime(df['截止日期'])
    today = datetime.now()
    df['剩余天数'] = (df['截止日期'] - today).dt.days

    # 判断任务状态
    df['风险等级'] = '正常'
    df.loc[df['剩余天数'] < 0, '风险等级'] = '已逾期'
    df.loc[(df['剩余天数'] >= 0) & (df['剩余天数'] <= 3), '风险等级'] = '即将到期'

    # === 统计卡片 ===
    col1, col2, col3, col4 = st.columns(4)

    with col1:
        st.metric("总任务数", len(df))

    with col2:
        in_progress = len(df[df['状态'] == '进行中'])
        st.metric("进行中", in_progress)

    with col3:
        urgent = len(df[df['风险等级'] == '即将到期'])
        st.metric("即将到期", urgent, delta_color="inverse")

    with col4:
        overdue = len(df[df['风险等级'] == '已逾期'])
        st.metric("已逾期", overdue, delta_color="inverse")

    # === 图表 ===
    col1, col2 = st.columns(2)

    with col1:
        # 状态分布饼图
        status_counts = df['状态'].value_counts()
        fig_pie = px.pie(
            values=status_counts.values,
            names=status_counts.index,
            title='任务状态分布'
        )
        st.plotly_chart(fig_pie, use_container_width=True)

    with col2:
        # 负责人任务数柱状图
        owner_counts = df['负责人'].value_counts()
        fig_bar = px.bar(
            x=owner_counts.index,
            y=owner_counts.values,
            title='各负责人任务数'
        )
        st.plotly_chart(fig_bar, use_container_width=True)

    # === 筛选和表格 ===
    st.subheader("任务列表")

    # 筛选器
    col1, col2, col3 = st.columns(3)
    with col1:
        status_filter = st.selectbox("按状态筛选", ["全部"] + list(df['状态'].unique()))
    with col2:
        owner_filter = st.selectbox("按负责人筛选", ["全部"] + list(df['负责人'].unique()))
    with col3:
        risk_filter = st.selectbox("按风险筛选", ["全部", "已逾期", "即将到期", "正常"])

    # 应用筛选
    filtered_df = df.copy()
    if status_filter != "全部":
        filtered_df = filtered_df[filtered_df['状态'] == status_filter]
    if owner_filter != "全部":
        filtered_df = filtered_df[filtered_df['负责人'] == owner_filter]
    if risk_filter != "全部":
        filtered_df = filtered_df[filtered_df['风险等级'] == risk_filter]

    # 显示表格，带颜色标识
    def highlight_risk(row):
        if row['风险等级'] == '已逾期':
            return ['background-color: #ffcccc'] * len(row)
        elif row['风险等级'] == '即将到期':
            return ['background-color: #fff3cd'] * len(row)
        return [''] * len(row)

    styled_df = filtered_df.style.apply(highlight_risk, axis=1)
    st.dataframe(styled_df)

    # === 提醒邮件生成 ===
    st.subheader("📧 提醒邮件")

    # 获取需要提醒的任务
    urgent_tasks = df[df['风险等级'].isin(['已逾期', '即将到期'])]

    if len(urgent_tasks) > 0:
        email_content = "各位同事，以下任务需要关注：\n\n"

        for _, task in urgent_tasks.iterrows():
            status_icon = "🔴" if task['风险等级'] == '已逾期' else "🟡"
            email_content += f"{status_icon} **{task['任务名称']}**\n"
            email_content += f"   - 负责人：{task['负责人']}\n"
            email_content += f"   - 截止日期：{task['截止日期'].strftime('%Y-%m-%d')}\n"
            email_content += f"   - 状态：{task['状态']}\n\n"

        email_content += "请各位及时跟进任务进度。"

        st.text_area(
            "邮件内容（可复制）",
            email_content,
            height=200
        )
    else:
        st.success("🎉 没有需要紧急关注的任务！")

步骤3：本地测试

先在本地运行测试：

bash

streamlit run app.py

测试各项功能是否正常：

上传Excel文件
查看统计卡片
查看图表
测试筛选功能
查看邮件生成

部署到云端

方式1：Streamlit Cloud（推荐）

1. 准备文件

在项目文件夹中创建以下文件：

requirements.txt：

txt

streamlit
pandas
openpyxl
plotly

README.md：

markdown

# 团队任务Dashboard

团队成员上传任务清单，查看进度和风险。

2. 推送到GitHub

bash

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/你的用户名/team-dashboard.git
git push -u origin main

3. 部署到Streamlit Cloud

访问 https://share.streamlit.io
点击"New app"
连接你的GitHub账号
选择 team-dashboard 仓库
主文件路径：app.py
点击"Deploy"

等待几分钟，部署完成后会得到一个分享链接，比如： https://team-dashboard-你的用户名.streamlit.app

::🎉 恭喜！你的Dashboard上线了！:::

方式2：Render部署

1. 创建requirements.txt（同上）

2. 推送到GitHub（同上）

3. 部署到Render

访问 https://render.com
注册/登录账号
点击"New +" → "Web Service"
连接GitHub仓库
配置：
- Name: team-dashboard
- Runtime: Python 3
- Build Command: pip install -r requirements.txt
- Start Command: streamlit run app.py --server.port=$PORT --server.address=0.0.0.0
点击"Create Web Service"

云端调试技巧

调试1：查看部署日志

部署失败时，查看日志是关键：

Streamlit Cloud：

在应用页面点击"Manage app"
查看"Logs"标签

Render：

在服务页面点击"Logs"
查看错误信息

调试2：常见部署错误

错误：Module not found

原因：requirements.txt缺少依赖

解决：

txt

streamlit
pandas
openpyxl
plotly

错误：Port binding failed

原因：云平台的端口配置问题

解决（Render）：

bash

streamlit run app.py --server.port=$PORT --server.address=0.0.0.0

错误：File not found

原因：代码中使用了本地绝对路径

解决：使用相对路径或让用户上传文件

调试3：本地复现云端错误

在本地模拟云端环境：

bash

# 创建虚拟环境
python -m venv venv

# 激活虚拟环境
# Windows:
venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt

# 运行
streamlit run app.py

优化进阶

优化1：添加数据持久化

告诉Claude：

请添加数据持久化功能，将上传的任务数据保存到云端。
使用Streamlit的st.session_state或连接数据库。

优化2：添加邮件发送功能

告诉Claude：

请添加直接发送邮件的功能。
使用SMTP协议，配置发件邮箱。

优化3：添加用户认证

告诉Claude：

请添加简单的用户认证功能。
只允许团队成员访问Dashboard。

优化4：添加实时协作

告诉Claude：

请添加实时协作功能。
团队成员可以看到其他人的更新。
使用Streamlit的实验性realtime功能或WebSocket。

项目总结

恭喜你完成了第三个项目！🎉

在这个项目中，你学会了：

✅ 创建完整的Dashboard应用
✅ 数据可视化和统计分析
✅ 将本地应用部署到云端
✅ 生成分享链接给团队使用
✅ 云端环境调试和问题排查

现在你已经能做出真正服务团队的工具了！

毕业寄语

到这里，你已经完成了从零基础到云端应用的完整学习路径：

项目	难度	收获
项目1	⭐	克服命令行恐惧
项目2	⭐⭐	可视化界面开发
项目3	⭐⭐⭐	云端部署和团队协作

接下来你可以：

完善现有工具：添加更多功能，优化用户体验
开发新工具：基于你的工作场景，创造更多自动化工具
分享给团队：让你的工具帮助更多人提高效率
持续学习：探索Claude Code更多高级功能

记住

不用成为编程专家，会用AI描述需求就够了
从小工具做起，逐步积累信心
遇到问题不怕，Claude Code是你最好的编程助手

↩️ 返回项目2

🏠 回到首页

项目3：云端团队提醒Dashboard ​

职场场景 ​

痛点描述 ​

解决后收益 ​

准备工作 ​

1. 注册云平台账号 ​

2. 准备示例文件 ​

3. 创建GitHub仓库（部署需要） ​

开始项目 ​

步骤1：创建Dashboard应用 ​

步骤2：查看生成的代码 ​

步骤3：本地测试 ​

部署到云端 ​

方式1：Streamlit Cloud（推荐） ​

1. 准备文件 ​

2. 推送到GitHub ​

3. 部署到Streamlit Cloud ​

方式2：Render部署 ​

1. 创建requirements.txt（同上） ​

2. 推送到GitHub（同上） ​

3. 部署到Render ​

云端调试技巧 ​

调试1：查看部署日志 ​

调试2：常见部署错误 ​

错误：Module not found ​

错误：Port binding failed ​

错误：File not found ​

调试3：本地复现云端错误 ​

优化进阶 ​

优化1：添加数据持久化 ​

优化2：添加邮件发送功能 ​

优化3：添加用户认证 ​

优化4：添加实时协作 ​

项目总结 ​

毕业寄语 ​

项目3：云端团队提醒Dashboard

职场场景

痛点描述

解决后收益

准备工作

1. 注册云平台账号

2. 准备示例文件

3. 创建GitHub仓库（部署需要）

开始项目

步骤1：创建Dashboard应用

步骤2：查看生成的代码

步骤3：本地测试

部署到云端

方式1：Streamlit Cloud（推荐）

1. 准备文件

2. 推送到GitHub

3. 部署到Streamlit Cloud

方式2：Render部署

1. 创建requirements.txt（同上）

2. 推送到GitHub（同上）

3. 部署到Render

云端调试技巧

调试1：查看部署日志

调试2：常见部署错误

错误：Module not found

错误：Port binding failed

错误：File not found

调试3：本地复现云端错误

优化进阶

优化1：添加数据持久化

优化2：添加邮件发送功能

优化3：添加用户认证

优化4：添加实时协作

项目总结

毕业寄语