STARWARCLOUD STARWAR.AI
返回市场
生命周期查看器

生命周期查看器

作者：heffrey782 星标更新：2025-10-01
安装使用来源：spider==github.com

项目介绍

生命周期查看器

一个现代的Svelte/TypeScript Web应用程序，用于与Lifecycle MCP服务器进行交互。该UI通过直观的Web界面提供了对软件需求、任务和架构决策的全面管理。

🚀 功能

  • 仪表板概览：实时项目指标和健康状况指示器
  • 需求管理：从草稿到验证的全生命周期跟踪
  • 任务管理：带有GitHub集成的实现跟踪
  • 架构决策：ADR管理和审查工作流
  • 实时更新：与MCP服务器的WebSocket连接
  • 响应式设计：适用于桌面、平板和移动设备

📋 先决条件

必需

  • Node.js（推荐v18+）
  • 生命周期MCP服务器 - 安装指南

MCP服务器设置

在运行生命周期查看器之前，需要启动生命周期MCP服务器：

# 克隆并设置MCP服务器
git clone https://github.com/heffrey78/lifecycle-mcp.git
cd lifecycle-mcp

# 使用uv安装（推荐）
uv sync
uv run server.py

# 或者使用pip安装
pip install -e .
lifecycle-mcp

MCP服务器应运行在ws://localhost:3000/mcp（或在客户端中配置URL）。

🛠️ 安装与设置

  1. 克隆此仓库

    git clone https://github.com/heffrey78/lifecycle-viewer.git
cd lifecycle-viewer

  2. 安装依赖

    npm install

  3. 配置MCP连接（可选） 编辑src/lib/services/mcp-client.ts以修改服务器URL：

    constructor(private serverUrl: string = 'ws://localhost:3000/mcp')

  4. 启动MCP桥接服务器（在单独的终端中）

    npm run mcp-bridge

    这会启动WebSocket桥接，将Web UI连接到MCP服务器。

  5. 启动开发服务器（在另一个终端中）

    npm run dev

  6. 打开应用 导航至http://localhost:5173/

🔌 连接到真实数据

当前状态

当MCP服务器未连接时，应用程序显示模拟/虚拟数据。这是为了允许在没有运行MCP服务器的情况下进行开发和演示。

获取真实数据

要查看实际项目数据：

  1. 确保MCP服务器正在运行

    cd /path/to/lifecycle-mcp
uv run server.py  # 或lifecycle-m

  2. 启动MCP桥接（在lifecycle-viewer目录中）

    npm run mcp-bridge

    此桥接是必需的 - 它将浏览器中的WebSocket连接转换为与MCP服务器的标准I/O通信。

  3. 验证连接

  4. 创建真实数据 使用Claude Code或直接通过MCP协议使用MCP服务器工具：

    # 将服务器添加到Claude Code
claude mcp add lifecycle lifecycle-mcp -e LIFECYCLE_DB=./lifecycle.db

  5. 通过Claude互动 一旦连接到Claude，您可以使用MCP工具创建真实数据：

    • create_requirement - 添加项目需求
    • create_task - 添加实施任务
    • create_architecture_decision - 记录架构选择

模拟数据 vs 真实数据

  • 模拟数据：当MCP服务器不可用时使用（开发/演示）
  • 真实数据：当连接到MCP服务器时从您的实际生命周期数据库加载
  • 无缝回退：应用程序自动检测连接状态

🏗️ 架构

项目结构

lifecycle-viewer/
├── src/
│   ├── lib/
│   │   ├── types/lifecycle.ts          # TypeScript定义
│   │   └── services/mcp-client.ts      # MCP通信
│   ├── routes/
│   │   ├── +layout.svelte              # 带导航的主要布局
│   │   ├── +page.svelte                # 仪表盘
│   │   ├── requirements/+page.svelte    # 需求管理
│   │   └── tasks/+page.svelte          # 任务管理
│   └── app.html                        # 基础HTML模板
├── static/                             # 静态资源
└── tailwind.config.js                  # 样式配置

关键组件

MCP客户端（src/lib/services/mcp-client.ts）

  • 基于WebSocket与生命周期MCP服务器通信
  • 异步/等待API匹配MCP工具签名
  • 自动回退到模拟数据当服务器不可用时
  • 错误处理和连接管理

类型定义（src/lib/types/lifecycle.ts）

  • 完整的TypeScript接口匹配数据库模式
  • 类型安全的API响应和数据结构
  • 枚举用于状态、优先级和类型值

UI组件

  • 仪表盘：带指标和快速操作的项目概述
  • 需求：可过滤的状态跟踪表
  • 任务：带有GitHub集成的实施跟踪
  • 布局：带有连接状态的导航侧边栏

🎨 自定义

样式

应用程序使用Tailwind CSS，并为生命周期状态定义了自定义颜色：

  • 需求：草稿（红色）→ 审查中（橙色）→ 批准（蓝色）→ 准备就绪（绿色）→ 实现（深绿色）
  • 任务：未开始（红色）→ 进行中（橙色）→ 完成（绿色）
  • 优先级：P0（红色）→ P1（橙色）→ P2（蓝色）→ P3（灰色）

配置

编辑配置在：

  • tailwind.config.js - 样式和颜色
  • src/lib/services/mcp-client.ts - 服务器连接设置
  • 各个页面组件用于UI行为

🔧 开发

可用脚本

npm run dev          # 启动开发服务器
npm run build        # 构建生产环境
npm run preview      # 预览生产构建
npm run test:unit    # 运行单元测试
npm run lint         # 运行ESLint
npm run format       # 使用Prettier格式化代码

开发流程

  1. 启动MCP服务器（用于真实数据）：uv run server.py
  2. 启动MCP桥接：npm run mcp-bridge
  3. 启动开发服务器：npm run dev
  4. 进行更改：启用热重载
  5. 测试：应用程序支持模拟和真实数据
  6. 构建：npm run build用于生产

添加新功能

  1. 定义类型：向src/lib/types/lifecycle.ts添加接口
  2. 扩展MCP客户端：向src/lib/services/mcp-client.ts添加方法
  3. 创建UI：使用TypeScript构建Svelte组件
  4. 添加路由：在src/routes/中创建新的页面

📡 MCP集成

实时连接

  • WebSocket：与MCP服务器的持久连接
  • 连接状态：侧边栏中的视觉指示器
  • 自动重新连接：处理临时断开连接
  • 回退模式：无缝过渡到模拟数据

使用的MCP工具

  • query_requirements - 获取需求列表
  • get_requirement_details - 获取单个需求
  • query_tasks - 获取任务列表
  • get_task_details - 获取单个任务
  • get_project_status - 获取仪表盘指标
  • create_requirement - 添加新需求
  • create_task - 添加新任务
  • update_requirement_status - 更新生命周期状态

🚀 生产部署

构建生产环境

npm run build

部署选项

  • 静态托管：Vercel、Netlify、GitHub Pages
  • Node.js托管：任何Node.js托管提供商
  • Docker：使用包含的Dockerfile容器化（如果添加）

环境配置

为生产设置环境变量：

  • MCP_SERVER_URL - 您的MCP服务器的URL
  • PUBLIC_APP_NAME - 应用程序名称/标题

🤝 贡献

  1. 分叉仓库
  2. 创建功能分支：git checkout -b feature/new-feature
  3. 使用适当的TypeScript类型进行更改
  4. 使用模拟和真实MCP数据进行测试
  5. 提交拉取请求

📄 许可证

[在此处添加您的许可证信息]

🔗 相关项目

💡 下一步

要充分利用生命周期查看器：

  1. 按照安装指南设置MCP服务器
  2. 连接到Claude Code以填充真实项目数据
  3. 使用MCP工具创建第一个需求
  4. 观察UI更新带有真实项目信息
  5. 探索高级功能如GitHub集成和架构跟踪

当前的模拟数据只是一个预览 - 真正的力量来自于连接到您实际的项目生命周期数据！