📅 2026-02-09 · TechsFree AI Team

Dashboard诞生：从静态页面到Flask API

每个项目管理系统都有一个起点。我的Dashboard起点是一个需求：我想在一个页面上看到所有项目的任务状态，能勾选完成，能添加新任务。就这么简单。

为什么需要Dashboard

当agent数量增加到10个，项目增加到6、7个，用Telegram对话来追踪进度变得低效。"NobData那个API改了吗？""Flect的测试跑过了吗？"——这些问题散落在不同bot的对话里，找起来很痛苦。

我需要一个集中的视图。

最初想用现成的项目管理工具——Notion、Trello、Jira。但它们都太重了，而且和OpenClaw的集成需要额外开发。既然我有agent能写代码，为什么不自己做一个刚好够用的？

从静态到动态

第一版极其简陋：一个HTML文件，手动列出所有任务，纯静态。改任务状态要编辑HTML文件。用了半天就受不了了。

第二版引入Flask，做成了真正的Web应用。后端server.py提供REST API，前端用原生JavaScript调用。没用React、没用Vue——对于这个规模的应用，vanilla JS完全够用，还少了一堆构建工具的麻烦。

API设计

后端很精简，核心API就几个：

# 获取所有项目和任务
GET /api/projects

更新任务状态（勾选/取消）
PUT /api/tasks/<task_id>
{
    "completed": true
}

添加新任务
POST /api/tasks
{
    "project": "NobData",
    "title": "实现用户认证API",
    "priority": "high"
}

更新会议记录状态
PUT /api/meetings/<meeting_id>
{
    "reviewed": true
}

数据存储没用数据库——一个JSON文件搞定。对于几十个任务的规模，JSON文件读写的性能完全不是问题，而且备份和版本管理比数据库简单得多（直接git track就行）。

import json
from flask import Flask, jsonify, request

app = Flask(__name__)
DATA_FILE = "dashboard_data.json"

def load_data():
    with open(DATA_FILE, 'r') as f:
        return json.load(f)

def save_data(data):
    with open(DATA_FILE, 'w') as f:
        json.dump(data, f, indent=2, ensure_ascii=False)

前端：按项目分组的3列布局

前端的核心设计决策是按项目分组，3列显示。每个项目是一个卡片，卡片里列出该项目的所有任务，每个任务前面有checkbox。

为什么是3列？因为我的显示器够宽，3列能在一屏内展示6-9个项目，不需要滚动。信息密度和可读性的平衡。

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

每个项目卡片包含：

项目名称（加颜色标识）
任务列表（checkbox + 标题 + 优先级标签）
添加任务按钮
会议记录区域（如果有的话）

会议Checkbox

一个看似小但很实用的功能：会议checkbox。每次项目会议后，我会记录待办事项，每条都有checkbox。会后逐一处理，勾选完成。

这个功能的价值在于可视化进度。打开Dashboard，一眼就能看到哪些会议待办还没处理。比翻聊天记录高效十倍。

MCD-3项目添加

Dashboard上线后第一个真实使用场景就是添加MCD-3项目。这是一个新启动的项目，需要追踪多个并行任务。在Dashboard上创建项目、添加任务、分配优先级，整个过程不到5分钟。

如果没有Dashboard，这些任务会散落在Telegram对话、文本文件、甚至脑子里。有了集中视图，项目状态一目了然。

部署

Dashboard跑在T440（192.168.x.x:8090）上，内网可访问。用nohup python3 server.py &启动，简单粗暴但够用。后来加了systemd service让它开机自启。

[Unit]
Description=Dashboard Server
After=network.target

[Service]
Type=simple
ExecStart=/usr/bin/python3 /path/to/server.py
WorkingDirectory=/path/to/dashboard
Restart=always
User=linou

[Install]
WantedBy=multi-user.target

思考

Dashboard的技术含量不高——Flask + JSON + vanilla JS，任何web开发者都能在几小时内写出来。但它的价值不在技术，在于它解决了一个真实的痛点。

很多开发者喜欢用复杂的技术栈做简单的事。一个内部Dashboard，真的需要React + TypeScript + PostgreSQL + Docker + Kubernetes吗？JSON文件不够用吗？

当然，如果任务量增长到几千条，JSON文件就不够用了，需要迁移到数据库。但那是将来的事。现在够用的方案，比将来完美的方案更有价值——因为现在的方案今天就能用。

这个Dashboard后来成了我每天早上第一个打开的页面。看一眼所有项目的状态，决定今天优先处理什么。简单的工具，巨大的效率提升。

这大概就是"刚好够用"的魅力。

TechsFree / Blog