npm - prd-workflow-cli - Versions diffs - 1.1.31 → 1.2.6 - Mend

prd-workflow-cli 1.1.31 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/.agent/workflows/prd-b1-planning-draft.md +68 -0
package/.agent/workflows/prd-b2-planning-breakdown.md +44 -0
package/.agent/workflows/prd-c1-a2ui-guide.md +245 -0
package/.agent/workflows/prd-c1-requirement-list.md +131 -815
package/.agent/workflows/prd-p0-project-info.md +44 -0
package/.antigravity/rules.md +112 -7
package/.cursorrules +189 -8
package/a2ui-viewer/index.html +460 -0
package/bin/prd-cli.js +11 -0
package/commands/a2ui-server.js +69 -0
package/commands/init.js +35 -0
package/commands/upgrade.js +6 -0
package/package.json +3 -2

package/a2ui-viewer/index.html ADDED Viewed

@@ -0,0 +1,460 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PRD A2UI 预览器</title>
+    <style>
+        :root {
+            --bg-color: #f3f4f6;
+            --panel-bg: #ffffff;
+            --text-primary: #1f2937;
+            --border-color: #e5e7eb;
+            --primary-color: #2563eb;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+        }
+        #app {
+            width: 100%;
+            max-width: 1200px;
+        }
+        /* 基础组件样式 */
+        .component-page {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .component-panel {
+            background: var(--panel-bg);
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            border: 1px solid var(--border-color);
+        }
+        .component-header {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 16px;
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 12px;
+        }
+        .component-button {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: background 0.2s;
+        }
+        .component-button:hover {
+            background-color: #1d4ed8;
+        }
+        .component-input {
+            width: 100%;
+            padding: 8px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            margin-top: 4px;
+        }
+        .component-label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 4px;
+            font-size: 0.9rem;
+        }
+        .component-group {
+            margin-bottom: 16px;
+        }
+        /* 布局组件 */
+        .layout-row {
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+        }
+        .layout-col {
+            flex: 1;
+            min-width: 300px;
+        }
+        /* 状态提示 */
+        #status {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: #333;
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            opacity: 0.8;
+        }
+        /* ========== 架构图组件样式 ========== */
+        /* 图表容器 */
+        .component-diagram {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 12px;
+            padding: 24px;
+            min-height: 300px;
+            position: relative;
+        }
+        .diagram-title {
+            color: white;
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .diagram-content {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            align-items: center;
+        }
+        /* 模块方框 */
+        .component-box {
+            background: white;
+            border-radius: 8px;
+            padding: 16px 24px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            text-align: center;
+            min-width: 120px;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .component-box:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
+        .box-title {
+            font-weight: 600;
+            font-size: 1rem;
+            color: #1f2937;
+            margin-bottom: 4px;
+        }
+        .box-desc {
+            font-size: 0.8rem;
+            color: #6b7280;
+        }
+        /* 分组容器 */
+        .component-group-diagram {
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px dashed rgba(255, 255, 255, 0.3);
+            border-radius: 12px;
+            padding: 16px;
+            width: 100%;
+        }
+        .group-title {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 0.9rem;
+            font-weight: 500;
+            margin-bottom: 12px;
+        }
+        .group-content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            justify-content: center;
+        }
+        /* 连接线/箭头 */
+        .component-arrow {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1.5rem;
+            padding: 8px 0;
+        }
+        .arrow-label {
+            font-size: 0.75rem;
+            margin-left: 8px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+        /* 层级容器 */
+        .component-layer {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            justify-content: center;
+            padding: 12px 0;
+        }
+        .layer-title {
+            width: 100%;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.8rem;
+            margin-bottom: 8px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <div style="text-align: center; padding: 50px;">
+            <h2>等待 A2UI 数据...</h2>
+            <p>请在 CLI 中生成界面数据</p>
+        </div>
+    </div>
+    <div id="status">连接中...</div>
+    <script>
+        // A2UI 渲染引擎
+        const Renderer = {
+            create(type, props) {
+                console.log('Creating component:', type, props);
+                const el = document.createElement('div');
+                el.className = `component-${type.toLowerCase()}`;
+                // 处理通用属性
+                if (props.id) el.id = props.id;
+                if (props.style) Object.assign(el.style, props.style);
+                // 特定组件渲染逻辑
+                switch (type) {
+                    case 'Page':
+                        if (props.title) {
+                            const title = document.createElement('div');
+                            title.className = 'component-header'; // 复用 header 样式
+                            title.style.borderBottom = 'none';
+                            title.style.fontSize = '2rem';
+                            title.textContent = props.title;
+                            el.appendChild(title);
+                        }
+                        return el;
+                    case 'Panel':
+                        if (props.title) {
+                            const title = document.createElement('div');
+                            title.className = 'component-header';
+                            title.textContent = props.title;
+                            el.appendChild(title);
+                        }
+                        return el;
+                    case 'Button':
+                        const btn = document.createElement('button');
+                        btn.className = 'component-button';
+                        btn.textContent = props.text || 'Button';
+                        return btn;
+                    case 'Input':
+                        const group = document.createElement('div');
+                        group.className = 'component-group';
+                        if (props.label) {
+                            const label = document.createElement('label');
+                            label.className = 'component-label';
+                            label.textContent = props.label;
+                            group.appendChild(label);
+                        }
+                        const input = document.createElement('input');
+                        input.className = 'component-input';
+                        input.placeholder = props.placeholder || '';
+                        group.appendChild(input);
+                        return group;
+                    case 'Text':
+                        const p = document.createElement('p');
+                        p.style.margin = '8px 0';
+                        p.textContent = props.content || '';
+                        return p;
+                    case 'Row':
+                        el.className = 'layout-row';
+                        return el;
+                    case 'Col':
+                        el.className = 'layout-col';
+                        return el;
+                    // ========== 架构图组件 ==========
+                    case 'Diagram':
+                        el.className = 'component-diagram';
+                        if (props.title) {
+                            const title = document.createElement('div');
+                            title.className = 'diagram-title';
+                            title.textContent = props.title;
+                            el.appendChild(title);
+                        }
+                        const content = document.createElement('div');
+                        content.className = 'diagram-content';
+                        el.appendChild(content);
+                        el._content = content; // 用于子元素渲染
+                        return el;
+                    case 'Box':
+                        el.className = 'component-box';
+                        if (props.color) {
+                            el.style.borderLeft = `4px solid ${props.color}`;
+                        }
+                        const boxTitle = document.createElement('div');
+                        boxTitle.className = 'box-title';
+                        boxTitle.textContent = props.title || props.text || '';
+                        el.appendChild(boxTitle);
+                        if (props.desc) {
+                            const boxDesc = document.createElement('div');
+                            boxDesc.className = 'box-desc';
+                            boxDesc.textContent = props.desc;
+                            el.appendChild(boxDesc);
+                        }
+                        return el;
+                    case 'Arrow':
+                        el.className = 'component-arrow';
+                        const arrowSymbol = props.direction === 'up' ? '↑' :
+                            props.direction === 'left' ? '←' :
+                                props.direction === 'right' ? '→' : '↓';
+                        el.textContent = arrowSymbol;
+                        if (props.label) {
+                            const arrowLabel = document.createElement('span');
+                            arrowLabel.className = 'arrow-label';
+                            arrowLabel.textContent = props.label;
+                            el.appendChild(arrowLabel);
+                        }
+                        return el;
+                    case 'Layer':
+                        el.className = 'component-layer';
+                        if (props.title) {
+                            const layerTitle = document.createElement('div');
+                            layerTitle.className = 'layer-title';
+                            layerTitle.textContent = props.title;
+                            el.appendChild(layerTitle);
+                        }
+                        return el;
+                    case 'DiagramGroup':
+                        el.className = 'component-group-diagram';
+                        if (props.title) {
+                            const groupTitle = document.createElement('div');
+                            groupTitle.className = 'group-title';
+                            groupTitle.textContent = props.title;
+                            el.appendChild(groupTitle);
+                        }
+                        const groupContent = document.createElement('div');
+                        groupContent.className = 'group-content';
+                        el.appendChild(groupContent);
+                        el._content = groupContent;
+                        return el;
+                    default:
+                        console.warn('Unknown component type:', type);
+                        el.textContent = `Unknown Component: ${type}`;
+                        el.style.border = '1px dashed red';
+                        el.style.padding = '10px';
+                        el.style.color = 'red';
+                        return el;
+                }
+            },
+            // 递归渲染树
+            renderNode(node, container) {
+                if (!node) return;
+                try {
+                    const el = this.create(node.type || 'Unknown', node);
+                    // 容器只有在非叶子节点时才去递归渲染 children
+                    // Input, Button, Text, Box, Arrow 等通常不包含 children
+                    const containerTypes = ['Page', 'Panel', 'Row', 'Col', 'Diagram', 'Layer', 'DiagramGroup'];
+                    if (containerTypes.includes(node.type)) {
+                        if (node.children && Array.isArray(node.children)) {
+                            // Diagram 和 DiagramGroup 有特殊的内容容器
+                            const targetContainer = el._content || el;
+                            node.children.forEach(child => this.renderNode(child, targetContainer));
+                        }
+                    }
+                    container.appendChild(el);
+                } catch (err) {
+                    console.error('Render Error:', err, node);
+                    const errEl = document.createElement('div');
+                    errEl.style.color = 'red';
+                    errEl.textContent = `渲染错误: ${err.message}`;
+                    container.appendChild(errEl);
+                }
+            },
+            render(data) {
+                console.log('Rendering data:', data);
+                const app = document.getElementById('app');
+                app.innerHTML = ''; // 清空当前视图
+                if (!data) {
+                    app.innerHTML = '<div style="text-align: center; padding: 50px;">无数据</div>';
+                    return;
+                }
+                this.renderNode(data, app);
+            }
+        };
+        // 模拟数据轮询 (真实环境应该用 WebSocket 或 SSE)
+        let lastDataStr = '';
+        async function checkUpdate() {
+            try {
+                const res = await fetch('/ui.json');
+                if (res.ok) {
+                    const data = await res.json();
+                    const currentDataStr = JSON.stringify(data);
+                    // 只有数据变化时才重新渲染
+                    if (currentDataStr !== lastDataStr) {
+                        lastDataStr = currentDataStr;
+                        Renderer.render(data);
+                    }
+                    document.getElementById('status').textContent = '已连接: 实时预览中';
+                    document.getElementById('status').style.background = '#059669';
+                }
+            } catch (e) {
+                console.log('Waiting for data...', e);
+                document.getElementById('status').textContent = `连接失败: ${e.message}`;
+                document.getElementById('status').style.background = '#dc2626';
+            }
+        }
+        // 初始化
+        setInterval(checkUpdate, 1000); // 每秒轮询一次
+        checkUpdate();
+    </script>
+</body>
+</html>

package/bin/prd-cli.js CHANGED Viewed

@@ -100,6 +100,17 @@ program
     require('../commands/upgrade')(options);
   });
+// A2UI 预览服务
+program
+  .command('ui')
+  .description('启动 A2UI 界面预览服务')
+  .option('-p, --port <number>', '指定端口号', '3333')
+  .action((options) => {
+    const A2UIServer = require('../commands/a2ui-server');
+    const server = new A2UIServer(options.port);
+    server.start();
+  });
 // 帮助信息增强
 program.on('--help', () => {
   console.log('');

package/commands/a2ui-server.js ADDED Viewed

@@ -0,0 +1,69 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const { exec } = require('child_process');
+class A2UIServer {
+    constructor(port = 3333) {
+        this.port = port;
+        this.viewerPath = path.join(__dirname, '../a2ui-viewer');
+        this.projectPath = process.cwd();
+    }
+    start() {
+        const server = http.createServer((req, res) => {
+            // 处理 CORS
+            res.setHeader('Access-Control-Allow-Origin', '*');
+            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+            // 路由处理
+            if (req.url === '/') {
+                this.serveFile(res, path.join(this.viewerPath, 'index.html'), 'text/html');
+            } else if (req.url === '/ui.json') {
+                // 读取项目根目录下的 a2ui-data.json
+                this.serveFile(res, path.join(this.projectPath, '.a2ui/current.json'), 'application/json');
+            } else {
+                res.writeHead(404);
+                res.end('Not found');
+            }
+        });
+        server.listen(this.port, () => {
+            console.log(chalk.green(`\n🚀 A2UI 预览服务已启动!`));
+            console.log(chalk.cyan(`👉 打开浏览器访问: http://localhost:${this.port}\n`));
+            // 自动打开浏览器
+            const startCommand = process.platform === 'darwin' ? 'open' :
+                process.platform === 'win32' ? 'start' : 'xdg-open';
+            exec(`${startCommand} http://localhost:${this.port}`);
+        });
+        return server;
+    }
+    serveFile(res, filePath, contentType) {
+        fs.readFile(filePath, (err, content) => {
+            if (err) {
+                if (err.code === 'ENOENT') {
+                    // 如果数据文件不存在，返回空对象
+                    if (filePath.endsWith('.json')) {
+                        res.writeHead(200, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ type: 'Page', title: '等待数据...', children: [] }));
+                    } else {
+                        res.writeHead(404);
+                        res.end('File not found');
+                    }
+                } else {
+                    res.writeHead(500);
+                    res.end(`Server Error: ${err.code}`);
+                }
+            } else {
+                res.writeHead(200, { 'Content-Type': contentType });
+                res.end(content);
+            }
+        });
+    }
+}
+module.exports = A2UIServer;

package/commands/init.js CHANGED Viewed

@@ -18,6 +18,21 @@ module.exports = async function (projectName) {
         // 检查当前目录是否已经是 PRD 项目
         if (isCurrentDir && await fs.pathExists(path.join(projectPath, '.prd-config.json'))) {
             console.log(chalk.red('✗ 当前目录已经是 PRD 项目'));
+            console.log(chalk.yellow('   如需更新规则文件，请运行: prd upgrade'));
+            return;
+        }
+        // ⚠️ 检查是否在已有 PRD 项目中创建子项目（常见错误）
+        if (!isCurrentDir && await fs.pathExists(path.join(process.cwd(), '.prd-config.json'))) {
+            console.log(chalk.yellow('⚠️ 警告：当前目录已经是一个 PRD 项目！'));
+            console.log(chalk.yellow(`   你正在尝试在 PRD 项目中创建子项目 "${projectName}"。`));
+            console.log('');
+            console.log(chalk.cyan('   建议操作：'));
+            console.log(chalk.gray('   1. 如果要在当前项目工作，直接使用 prd baseline create A0 等命令'));
+            console.log(chalk.gray('   2. 如果确实要创建独立新项目，请先 cd 到其他目录'));
+            console.log(chalk.gray('   3. 如果要更新规则文件，请运行: prd upgrade'));
+            console.log('');
+            console.log(chalk.red('   已取消操作。'));
             return;
         }
@@ -267,6 +282,18 @@ module.exports = async function (projectName) {
             );
         }
+        // 复制 A2UI 预览器
+        const a2uiViewerDir = path.join(__dirname, '../a2ui-viewer');
+        if (await fs.pathExists(a2uiViewerDir)) {
+            await fs.copy(
+                a2uiViewerDir,
+                path.join(projectPath, 'a2ui-viewer')
+            );
+        }
+        // 创建 .a2ui 目录（用于临时预览数据）
+        await fs.ensureDir(path.join(projectPath, '.a2ui'));
         // 创建 README
         const readme = `# ${displayName}
@@ -352,9 +379,12 @@ prd plan freeze
         console.log(chalk.gray('   ✓ .agent/workflows/  - PRD 工作流指引（包含所有阶段的详细步骤）'));
         console.log(chalk.gray('   ✓ .cursorrules       - Cursor AI 规则'));
         console.log(chalk.gray('   ✓ .antigravity/      - Antigravity AI 规则'));
+        console.log(chalk.gray('   ✓ a2ui-viewer/       - A2UI 界面预览器'));
+        console.log(chalk.gray('   ✓ .a2ui/             - A2UI 临时数据目录'));
         console.log('');
         console.log(chalk.yellow('   💡 现在你可以直接与 AI 助手对话，AI 已经知道如何协助你完成 PRD 流程！'));
         console.log(chalk.gray('   例如：告诉 AI "我要创建一个新项目的需求文档"'));
+        console.log(chalk.gray('   启动界面预览：运行 prd ui'));
         console.log('');
         console.log(chalk.bold('📋 下一步操作（请按顺序执行）:'));
@@ -375,6 +405,11 @@ prd plan freeze
         console.log('  prd baseline create A0  # P0 填写完成后执行');
         console.log('');
+        console.log(chalk.bold('🔄 后续更新:'));
+        console.log(chalk.gray('   当 CLI 包有新版本时，运行以下命令同步更新项目规则:'));
+        console.log(chalk.cyan('   npm update -g prd-workflow-cli && prd upgrade'));
+        console.log('');
     } catch (error) {
         console.log(chalk.red('✗ 创建项目失败:'), error.message);
     }

package/commands/upgrade.js CHANGED Viewed

@@ -105,6 +105,12 @@ module.exports = async function (options = {}) {
                 source: '.antigravity',
                 target: '.antigravity',
                 isDir: true
+            },
+            {
+                name: 'A2UI Viewer (预览器)',
+                source: 'a2ui-viewer',
+                target: 'a2ui-viewer',
+                isDir: true
             }
         ];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "prd-workflow-cli",
-  "version": "1.1.31",
+  "version": "1.2.6",
   "description": "产品需求管理规范 CLI 工具 - 基于 A→R→B→C 流程，集成 PM 确认机制和对话归档的需求管理命令行工具",
   "main": "index.js",
   "bin": {
@@ -48,6 +48,7 @@
     "bin/",
     "commands/",
     "scripts/",
+    "a2ui-viewer/",
     ".agent/",
     ".antigravity/",
     "templates/",
@@ -70,4 +71,4 @@
       "/tests/"
     ]
   }
-}
+}