python
/
aceflow-pateoas-framework-main


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AceFlow v2.0 - AI驱动的敏捷开发工作流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .card h3 {
            color: #4a5568;
            margin-bottom: 15px;
            font-size: 1.3em;
            display: flex;
            align-items: center;
        }

        .card h3 .icon {
            margin-right: 8px;
            font-size: 1.2em;
        }

        .project-info {
            grid-column: 1 / -1;
        }

        .project-status {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .status-item {
            background: #f7fafc;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }

        .status-item h4 {
            color: #2d3748;
            margin-bottom: 5px;
        }

        .status-value {
            font-size: 1.5em;
            font-weight: bold;
            color: #667eea;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
            margin: 15px 0;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .flow-modes {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin: 20px 0;
        }

        .mode-card {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .mode-card:hover {
            border-color: #667eea;
            transform: translateY(-2px);
        }

        .mode-card.active {
            border-color: #667eea;
            background: #eef2ff;
        }

        .mode-title {
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .mode-desc {
            font-size: 0.9em;
            color: #718096;
        }

        .stages-flow {
            margin: 20px 0;
        }

        .stages-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 15px 0;
        }

        .stage {
            flex: 1;
            max-width: 120px;
            text-align: center;
            position: relative;
        }

        .stage-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 1.1em;
        }

        .stage-circle.completed {
            background: #48bb78;
        }

        .stage-circle.in-progress {
            background: #ed8936;
        }

        .stage-circle.pending {
            background: #a0aec0;
        }

        .stage-name {
            font-size: 0.9em;
            color: #4a5568;
            font-weight: 500;
        }

        .stage-arrow {
            color: #a0aec0;
            font-size: 1.5em;
            margin: 0 10px;
        }

        .actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        .btn-secondary {
            background: #e2e8f0;
            color: #4a5568;
        }

        .btn-secondary:hover {
            background: #cbd5e0;
        }

        .ai-suggestions {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            border: none;
        }

        .suggestions-list {
            list-style: none;
            margin-top: 15px;
        }

        .suggestions-list li {
            background: rgba(255, 255, 255, 0.7);
            margin: 8px 0;
            padding: 10px;
            border-radius: 6px;
            border-left: 4px solid #f6ad55;
        }

        .memory-pool {
            background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);
            border: none;
        }

        .memory-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }

        .memory-item {
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 6px;
            text-align: center;
        }

        .memory-count {
            font-size: 1.5em;
            font-weight: bold;
            color: #805ad5;
        }

        .footer {
            text-align: center;
            color: white;
            margin-top: 40px;
            opacity: 0.8;
        }

        @media (max-width: 768px) {
            .dashboard {
                grid-template-columns: 1fr;
            }
            
            .flow-modes {
                grid-template-columns: 1fr;
            }
            
            .stages-container {
                flex-direction: column;
                gap: 10px;
            }
            
            .stage-arrow {
                transform: rotate(90deg);
                margin: 5px 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🚀 AceFlow v2.0</h1>
            <p>AI驱动的敏捷开发工作流框架</p>
        </header>

        <div class="dashboard">
            <!-- 项目概览 -->
            <div class="card project-info">
                <h3><span class="icon">📁</span>项目概览</h3>
                <div class="project-status">
                    <div class="status-item">
                        <h4>项目名称</h4>
                        <div class="status-value" id="project-name">aceflow-pateoas-framework</div>
                    </div>
                    <div class="status-item">
                        <h4>流程模式</h4>
                        <div class="status-value" id="flow-mode">轻量级</div>
                    </div>
                    <div class="status-item">
                        <h4>当前阶段</h4>
                        <div class="status-value" id="current-stage">未开始</div>
                    </div>
                    <div class="status-item">
                        <h4>整体进度</h4>
                        <div class="status-value" id="overall-progress">0%</div>
                    </div>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
                </div>
            </div>

            <!-- 流程模式选择 -->
            <div class="card">
                <h3><span class="icon">⚙️</span>流程模式</h3>
                <div class="flow-modes">
                    <div class="mode-card active" data-mode="minimal">
                        <div class="mode-title">轻量级</div>
                        <div class="mode-desc">P→D→R<br>2-7天</div>
                    </div>
                    <div class="mode-card" data-mode="standard">
                        <div class="mode-title">标准</div>
                        <div class="mode-desc">P1→P2→D1→D2→R1<br>1-2周</div>
                    </div>
                    <div class="mode-card" data-mode="complete">
                        <div class="mode-title">完整</div>
                        <div class="mode-desc">S1→...→S8<br>2-4周</div>
                    </div>
                </div>
                <div class="actions">
                    <button class="btn btn-primary" onclick="switchMode()">
                        <span>🔄</span>切换模式
                    </button>
                </div>
            </div>

            <!-- 阶段流程 -->
            <div class="card">
                <h3><span class="icon">🎯</span>阶段流程</h3>
                <div class="stages-flow">
                    <div class="stages-container" id="stages-container">
                        <!-- 动态生成阶段 -->
                    </div>
                </div>
                <div class="actions">
                    <button class="btn btn-primary" onclick="startStage()">
                        <span>🚀</span>开始阶段
                    </button>
                    <button class="btn btn-secondary" onclick="updateProgress()">
                        <span>📈</span>更新进度
                    </button>
                    <button class="btn btn-secondary" onclick="completeStage()">
                        <span>✅</span>完成阶段
                    </button>
                </div>
            </div>

            <!-- AI建议 -->
            <div class="card ai-suggestions">
                <h3><span class="icon">🤖</span>AI智能建议</h3>
                <ul class="suggestions-list" id="ai-suggestions">
                    <li>💡 推荐使用轻量级模式，适合当前项目规模</li>
                    <li>🎯 建议从规划阶段开始，明确核心需求</li>
                    <li>⚡ 可以启用敏捷集成，提升团队协作效率</li>
                </ul>
                <div class="actions">
                    <button class="btn btn-primary" onclick="getAIAdvice()">
                        <span>🧠</span>获取建议
                    </button>
                </div>
            </div>

            <!-- 记忆中心 -->
            <div class="card memory-pool">
                <h3><span class="icon">🧠</span>记忆中心</h3>
                <div class="memory-items">
                    <div class="memory-item">
                        <div class="memory-count">0</div>
                        <div>需求记忆</div>
                    </div>
                    <div class="memory-item">
                        <div class="memory-count">0</div>
                        <div>技术决策</div>
                    </div>
                    <div class="memory-item">
                        <div class="memory-count">0</div>
                        <div>问题记录</div>
                    </div>
                    <div class="memory-item">
                        <div class="memory-count">0</div>
                        <div>用户反馈</div>
                    </div>
                </div>
                <div class="actions">
                    <button class="btn btn-primary" onclick="openMemoryCenter()">
                        <span>🔍</span>浏览记忆
                    </button>
                </div>
            </div>
        </div>

        <footer class="footer">
            <p>AceFlow v2.0 - 让AI赋能你的敏捷开发流程 🎉</p>
        </footer>
    </div>

    <script>
        // 流程模式配置
        const flowModes = {
            minimal: {
                name: '轻量级',
                stages: ['P', 'D', 'R'],
                stageNames: { P: '规划', D: '开发', R: '评审' }
            },
            standard: {
                name: '标准',
                stages: ['P1', 'P2', 'D1', 'D2', 'R1'],
                stageNames: { P1: '需求', P2: '规划', D1: '实现', D2: '测试', R1: '评审' }
            },
            complete: {
                name: '完整',
                stages: ['S1', 'S2', 'S3', 'S4', 'S5', 'S6', 'S7', 'S8'],
                stageNames: { 
                    S1: '用户故事', S2: '任务拆分', S3: '测试用例', S4: '功能实现',
                    S5: '测试执行', S6: '代码评审', S7: '演示反馈', S8: '总结归档'
                }
            }
        };

        let currentMode = 'minimal';
        let currentStage = null;
        let stageStates = {};

        // 初始化页面
        function init() {
            loadProjectState();
            updateModeSelection();
            renderStages();
        }

        // 加载项目状态
        function loadProjectState() {
            // 这里应该从后端API加载状态
            // 暂时使用模拟数据
            const mockState = {
                project_name: 'aceflow-pateoas-framework',
                flow_mode: 'minimal',
                current_stage: null,
                overall_progress: 0,
                stage_states: {}
            };

            document.getElementById('project-name').textContent = mockState.project_name;
            document.getElementById('flow-mode').textContent = flowModes[mockState.flow_mode].name;
            document.getElementById('current-stage').textContent = mockState.current_stage || '未开始';
            document.getElementById('overall-progress').textContent = mockState.overall_progress + '%';
            document.getElementById('progress-fill').style.width = mockState.overall_progress + '%';

            currentMode = mockState.flow_mode;
            currentStage = mockState.current_stage;
            stageStates = mockState.stage_states;
        }

        // 更新模式选择
        function updateModeSelection() {
            document.querySelectorAll('.mode-card').forEach(card => {
                card.classList.remove('active');
                if (card.dataset.mode === currentMode) {
                    card.classList.add('active');
                }
            });
        }

        // 渲染阶段流程
        function renderStages() {
            const container = document.getElementById('stages-container');
            const mode = flowModes[currentMode];
            
            container.innerHTML = '';
            
            mode.stages.forEach((stage, index) => {
                // 阶段圆圈
                const stageDiv = document.createElement('div');
                stageDiv.className = 'stage';
                
                const circle = document.createElement('div');
                circle.className = 'stage-circle';
                
                // 确定阶段状态
                let status = 'pending';
                if (stageStates[stage]) {
                    status = stageStates[stage].status;
                } else if (stage === currentStage) {
                    status = 'in-progress';
                }
                
                circle.classList.add(status);
                circle.textContent = stage;
                
                const name = document.createElement('div');
                name.className = 'stage-name';
                name.textContent = mode.stageNames[stage];
                
                stageDiv.appendChild(circle);
                stageDiv.appendChild(name);
                container.appendChild(stageDiv);
                
                // 添加箭头（除了最后一个阶段）
                if (index < mode.stages.length - 1) {
                    const arrow = document.createElement('div');
                    arrow.className = 'stage-arrow';
                    arrow.textContent = '→';
                    container.appendChild(arrow);
                }
            });
        }

        // 模式卡片点击事件
        document.querySelectorAll('.mode-card').forEach(card => {
            card.addEventListener('click', () => {
                currentMode = card.dataset.mode;
                updateModeSelection();
                renderStages();
                document.getElementById('flow-mode').textContent = flowModes[currentMode].name;
            });
        });

        // 切换模式
        function switchMode() {
            alert('模式切换功能开发中...\n将支持智能数据迁移和进度保留');
        }

        // 开始阶段
        function startStage() {
            if (!currentStage) {
                const firstStage = flowModes[currentMode].stages[0];
                currentStage = firstStage;
                stageStates[firstStage] = { status: 'in-progress', progress: 0 };
                
                document.getElementById('current-stage').textContent = currentStage;
                renderStages();
                
                alert(`🚀 已开始阶段: ${currentStage} - ${flowModes[currentMode].stageNames[currentStage]}`);
            } else {
                alert(`当前已有活跃阶段: ${currentStage}`);
            }
        }

        // 更新进度
        function updateProgress() {
            if (!currentStage) {
                alert('❌ 没有活跃的阶段');
                return;
            }
            
            const progress = prompt('请输入当前阶段进度 (0-100):', '50');
            if (progress !== null && !isNaN(progress)) {
                const progressNum = Math.max(0, Math.min(100, parseInt(progress)));
                stageStates[currentStage].progress = progressNum;
                
                // 更新整体进度
                updateOverallProgress();
                
                alert(`📈 阶段 ${currentStage} 进度更新为 ${progressNum}%`);
            }
        }

        // 完成阶段
        function completeStage() {
            if (!currentStage) {
                alert('❌ 没有活跃的阶段');
                return;
            }
            
            stageStates[currentStage].status = 'completed';
            stageStates[currentStage].progress = 100;
            
            // 切换到下一阶段
            const stages = flowModes[currentMode].stages;
            const currentIndex = stages.indexOf(currentStage);
            
            if (currentIndex < stages.length - 1) {
                const nextStage = stages[currentIndex + 1];
                currentStage = nextStage;
                stageStates[nextStage] = { status: 'in-progress', progress: 0 };
                
                document.getElementById('current-stage').textContent = currentStage;
                alert(`🎉 阶段完成！自动切换到下一阶段: ${nextStage}`);
            } else {
                currentStage = null;
                document.getElementById('current-stage').textContent = '已完成';
                alert('🎊 所有阶段已完成！');
            }
            
            updateOverallProgress();
            renderStages();
        }

        // 更新整体进度
        function updateOverallProgress() {
            const stages = flowModes[currentMode].stages;
            let totalProgress = 0;
            
            stages.forEach(stage => {
                if (stageStates[stage]) {
                    totalProgress += stageStates[stage].progress || 0;
                }
            });
            
            const overallProgress = Math.round(totalProgress / stages.length);
            document.getElementById('overall-progress').textContent = overallProgress + '%';
            document.getElementById('progress-fill').style.width = overallProgress + '%';
        }

        // 获取AI建议
        function getAIAdvice() {
            const suggestions = [
                '💡 当前阶段建议：专注核心功能实现，避免过度设计',
                '⚡ 性能优化：建议在开发阶段同步进行单元测试',
                '🎯 用户体验：建议添加用户反馈收集机制',
                '🔧 技术债务：检测到部分代码可以重构优化',
                '📈 进度管理：当前进度良好，建议保持开发节奏'
            ];
            
            const randomSuggestion = suggestions[Math.floor(Math.random() * suggestions.length)];
            
            const suggestionsList = document.getElementById('ai-suggestions');
            const newSuggestion = document.createElement('li');
            newSuggestion.textContent = randomSuggestion;
            suggestionsList.appendChild(newSuggestion);
            
            // 保持最多5条建议
            if (suggestionsList.children.length > 5) {
                suggestionsList.removeChild(suggestionsList.firstChild);
            }
        }

        // 打开记忆中心
        function openMemoryCenter() {
            alert('📚 记忆中心功能开发中...\n将支持智能知识检索和项目经验积累');
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>