技能名称：mission-control
详细描述：

任务控制技能

为OpenClaw构建个人仪表盘——一个集任务、记忆、日历和团队管理于一体的中央指挥中心。

你将构建的内容

一个连接到OpenClaw实例的Next.js网页仪表盘，提供以下功能：

• - 任务看板 - 看板式任务管理
• 记忆浏览器 - 搜索和查看OpenClaw记忆
• 日历视图 - 查看预定事件和定时任务
• 团队状态 - 追踪每个人的工作内容
• GitHub趋势 - 发现热门仓库

架构概览

┌─────────────────────────────────────┐
│ Next.js 前端 │
│ ┌─────────┐ ┌─────────┐ ┌────────┐ │
│ │ 任务 │ │ 记忆 │ │ 日历 │ │
│ │ 看板 │ │ 列表 │ │ 视图 │ │
│ └────┬────┘ └────┬────┘ └───┬────┘ │
│ └───────────┴──────────┘ │
│ │ │
│ ┌──────┴──────┐ │
│ │ API 路由 │ │
│ └──────┬──────┘ │
└──────────────┼───────────────────────┘
│
┌───────┴───────┐
│ │
┌──────┴──────┐ ┌──────┴──────┐
│ 本地JSON │ │ OpenClaw │
│ 文件 │ │ 记忆 │
└─────────────┘ └─────────────┘

前提条件

• - Node.js 18+
• 安装并运行OpenClaw
• 具备React/Next.js基础知识

分步指南

第一步：初始化项目

bash
npx create-next-app@latest mission-control --typescript --tailwind

第二步：安装依赖

bash
cd mission-control
npm install lucide-react

第三步：创建数据层

创建src/lib/data.ts用于文件存储：

typescript
import fs from fs/promises;
import path from path;

const DATA_DIR = path.join(process.cwd(), src, data);

// 类型定义
export interface Task {
id: string;
title: string;
description: string;
status: todo | in-progress | done;
assignee: string;
createdAt: string;
updatedAt: string;
}

// 初始化数据文件
async function initDataFile(filename: string, defaultData: unknown) {
const filepath = path.join(DATA_DIR, filename);
try {
await fs.access(filepath);
} catch {
await fs.mkdir(DATA_DIR, { recursive: true });
await fs.writeFile(filepath, JSON.stringify(defaultData, null, 2));
}
return filepath;
}

// 任务
export async function getTasks(): Promise {
const filepath = await initDataFile(tasks.json, []);
const data = await fs.readFile(filepath, utf-8);
return JSON.parse(data);
}

export async function addTask(task: Omit): Promise {
const tasks = await getTasks();
const newTask: Task = {
...task,
id: Date.now().toString(),
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
};
tasks.push(newTask);
await fs.writeFile(
path.join(DATA_DIR, tasks.json),
JSON.stringify(tasks, null, 2)
);
return newTask;
}

export async function updateTask(id: string, updates: Partial): Promise {
const tasks = await getTasks();
const index = tasks.findIndex((t) => t.id === id);
if (index === -1) return null;

tasks[index] = {
...tasks[index],
...updates,
updatedAt: new Date().toISOString()
};
await fs.writeFile(
path.join(DATA_DIR, tasks.json),
JSON.stringify(tasks, null, 2)
);
return tasks[index];
}

第四步：创建API路由

创建src/app/api/tasks/route.ts：

typescript
import { NextRequest, NextResponse } from next/server;
import { getTasks, addTask, updateTask } from @/lib/data;

export async function GET() {
const tasks = await getTasks();
return NextResponse.json(tasks);
}

export async function POST(request: NextRequest) {
try {
const body = await request.json();
const task = await addTask(body);
return NextResponse.json(task, { status: 201 });
} catch (error) {
return NextResponse.json(
{ error: 创建任务失败 },
{ status: 500 }
);
}
}

export async function PUT(request: NextRequest) {
try {
const { id, ...updates } = await request.json();
const task = await updateTask(id, updates);
if (!task) {
return NextResponse.json({ error: 任务未找到 }, { status: 404 });
}
return NextResponse.json(task);
} catch (error) {
return NextResponse.json(
{ error: 更新任务失败 },
{ status: 500 }
);
}
}

第五步：创建组件

导航组件 (src/components/Navigation.tsx)：

typescript
use client;

import Link from next/link;
import { usePathname } from next/navigation;
import { useState } from react;
import { LayoutDashboard, ClipboardList, Menu, X } from lucide-react;

const navItems = [
{ href: /, label: 仪表盘, icon: LayoutDashboard },
{ href: /tasks, label: 任务, icon: ClipboardList },
];

export function Navigation() {
const pathname = usePathname();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

return (
<>
{/ 桌面端侧边栏 /}

{/ 移动端头部 /}

{/ 移动端抽屉 /}
{mobileMenuOpen && (

第六步：创建任务看板

typescript
use client;

import { useState, useEffect } from react;

interface Task {
id: string;
title: string;
description: string;
status: todo | in-progress | done;
assignee: string;
}

export function TaskBoard() {
const [tasks, setTasks] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
fetchTasks();
}, []);

const fetchTasks = async () => {
try {
const response = await fetch(/api