😵 出错了

页面遇到了一个意外问题，请刷新试试。

📄 选择文件查看
👋

欢迎来到 AI 架构师 IDE！
在下方聊天框里告诉 AI 你想搭建什么项目，
AI 会帮你生成文件，一起完成作品！

`, 'style.css': `/* 个人主页 - 附加样式 */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .avatar { animation: float 3s ease-in-out infinite; } `, 'README.md': `# 我的个人主页 这是我的个人介绍页面！用 AI 架构师 IDE 搭建的。 ## 功能介绍 - 展示个人头像和简介 - 链接到我的作品 - 响应式设计，手机也能看 ` } }, '计算器': { desc: '一个简单好用的计算器', files: { 'index.html': ` 计算器
0
`, 'README.md': `# 计算器 一个简单好用的计算器应用。 ## 功能 - 加减乘除运算 - 括号支持 - 小数点运算 - 清空功能 ` } }, '猜数字游戏': { desc: '和电脑玩猜数字游戏', files: { 'index.html': ` 猜数字游戏

🎯 猜数字

我心里想了一个数字，你能猜到吗？

1 ~ 100
输入数字开始猜吧！
已猜 0 次
`, 'README.md': `# 猜数字游戏 和电脑玩猜数字游戏！ ## 玩法 1. 电脑随机选一个 1~100 的数字 2. 你猜是多少，电脑会提示"大了"或"小了" 3. 越接近提示越热哦🔥 4. 猜对就赢啦！ ` } }, '倒计时器': { desc: '一个实用的倒计时工具', files: { 'index.html': ` 倒计时器

⏱️ 倒计时器

05:00
`, 'README.md': `# ⏱️ 倒计时器 一个简单好用的倒计时工具。 ## 功能 - 预设：1分钟、5分钟、10分钟、15分钟 - 自定义时间设定 - 开始/暂停/重置 - 到时间会变红提醒 ` } }, '待办清单': { desc: '一个清爽的待办事项清单', files: { 'index.html': ` 我的待办清单

📋 我的待办清单

完成一件事就勾掉它吧！

总计：0  |  已完成：0
`, 'README.md': `# 📋 我的待办清单 一个清爽的待办事项清单应用。 ## 功能 - 添加待办事项 - 勾选完成 - 删除事项 - 自动统计完成数量 - 数据保存在本地 ` } } }; function generateProjectResponse(prompt) { // 匹配模板 for (const [name, tmpl] of Object.entries(TEMPLATES)) { if (prompt.includes(name) || prompt.includes(name.replace('个人主页','主页'))) { const fileList = Object.keys(tmpl.files).map(f => ' 📄 ' + f).join('\n'); return `好！我来帮你搭建一个**${name}**（${tmpl.desc}）✨ 我会生成这些文件： ${fileList} 项目已经创建好了，去侧边栏看看吧！点击文件就能查看代码～`; } } // 没匹配到模板，推荐模板 const names = Object.keys(TEMPLATES); return `好想法！我可以帮你搭建这些项目，你想要哪一个呢？🤔 ${names.map((n, i) => `${i+1}. **${n}** - ${TEMPLATES[n].desc}`).join('\n')} 直接告诉我就行！比如："帮我做个猜数字游戏"`; } function generateAddFeatureResponse(prompt) { return `好主意！我可以帮你给项目加新功能～😊 不过我现在还处在"基础版本"，你能具体说说想加什么功能吗？ 比如： - 加个计数功能？ - 加个重置按钮？ - 加个动画效果？ 告诉我你的想法，我来生成代码！`; } function getDefaultResponse(prompt) { if (/你好|嗨|hi|hello|在吗/i.test(prompt)) { return '你好呀！👋 我是 AI 架构师助手，你想搭建什么样的项目呢？告诉我，我来帮你生成文件！'; } if (/谢谢|感谢/i.test(prompt)) { return '不客气！🎉 有什么需要随时告诉我，我们一起把作品做得更好！'; } if (/功能|你会什么|你能做什么/i.test(prompt)) { return '我可以帮你搭建各种项目！比如：\n\n📄 **个人主页** - 介绍你自己的页面\n🧮 **计算器** - 可以算数的工具\n🎯 **猜数字游戏** - 和电脑玩猜数字\n⏱️ **倒计时器** - 计时工具\n📋 **待办清单** - 管理要做的事\n\n直接告诉我想做哪个就行！'; } if (/ai|人工智能/i.test(prompt)) { return '我就是 AI 呀！🤖 虽然现在是本地版本，发布后就能连上真正的云端 AI，变得更聪明哦！不过现在也能帮你搭建很多项目～想要什么？'; } return `嗯，我听到了！😊 不过能不能说清楚一点你想做什么呀？ 你可以试试： - "帮我做个猜数字游戏" - "我要一个个人主页" - "做个计算器" - "搭建一个倒计时器" 期待你的想法！💡`; } /* ===== 从 AI 响应中提取生成的文件 ===== */ function extractFilesFromResponse(response, prompt) { // 检查是否匹配到模板 for (const [name, tmpl] of Object.entries(TEMPLATES)) { if (response.includes(name) && response.includes('已经创建好了')) { // 添加模板文件 let added = false; for (const [fname, content] of Object.entries(tmpl.files)) { if (!files[fname]) { files[fname] = content; fileOrder.push(fname); added = true; } } return added; } } return false; } /* ===== 渲染文件列表 ===== */ function renderFileList() { let html = ''; const keys = Object.keys(files); if (keys.length === 0) { html = '
📂还没有文件呢～
在下面告诉 AI 你想做什么吧！
'; fileList.innerHTML = html; return; } for (const name of fileOrder) { if (!files[name]) continue; const ext = name.split('.').pop(); const icon = getFileIcon(ext); const isActive = name === activeFile; html += `
${icon} ${escHtml(name)} ${ext.toUpperCase()}
`; } fileList.innerHTML = html; // 绑定点击事件 fileList.querySelectorAll('.file-item').forEach(el => { el.addEventListener('click', function() { const name = this.dataset.file; openFile(name); }); }); } function getFileIcon(ext) { const map = { 'html': '🌐', 'css': '🎨', 'js': '🟨', 'json': '📋', 'md': '📝', 'txt': '📄', 'svg': '🖼️' }; return map[ext] || '📄'; } function escHtml(s) { return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); } /* ===== 打开文件 ===== */ function openFile(name) { if (!files[name]) return; activeFile = name; renderFileList(); const content = files[name]; // 更新 header currentFilename.textContent = '📄 ' + name; const ext = name.split('.').pop(); fileTypeBadge.textContent = ext.toUpperCase(); // 隐藏空状态，显示代码 codeEmpty.style.display = 'none'; codeViewer.textContent = content; codeViewer.style.display = 'block'; codeViewer.scrollTop = 0; saveToStorage(); } /* ===== AI 助手消息 ===== */ function addChatMessage(role, text, isThinking, isError) { const div = document.createElement('div'); div.className = 'chat-msg'; if (isThinking) div.classList.add('thinking'); if (isError) div.classList.add('error'); const roleLabels = { you: '你', ai: '🤖 AI', sys: '⚙️ 系统' }; const roleLabel = roleLabels[role] || role; div.innerHTML = `${roleLabel}${text}`; chatMessages.appendChild(div); chatMessages.scrollTop = chatMessages.scrollHeight; return div; } function showSuggestions(suggestions) { suggestionsEl.innerHTML = suggestions.map(s => ``).join(''); suggestionsEl.querySelectorAll('.suggestion-btn').forEach(btn => { btn.addEventListener('click', function() { chatInput.value = this.textContent; handleSend(); }); }); } /* ===== 主流程：发送消息 ===== */ async function handleSend() { const text = chatInput.value.trim(); if (!text || isLoading) return; chatInput.value = ''; suggestionsEl.innerHTML = ''; // 显示用户消息 addChatMessage('you', text); chatHistory.push({ role: 'user', content: text }); // 显示思考中 const thinkMsg = addChatMessage('ai', '🤔 让我想想…', true); setLoading(true); try { const response = await callAI(text); // 替换思考消息 thinkMsg.remove(); addChatMessage('ai', response); chatHistory.push({ role: 'assistant', content: response }); // 检查是否要生成文件 const hasFiles = extractFilesFromResponse(response, text); if (hasFiles) { renderFileList(); // 自动选中第一个新文件 if (fileOrder.length > 0) { openFile(fileOrder[0]); } addChatMessage('sys', '✅ 文件已创建！点左侧文件名查看代码～', false, false); chatMessages.scrollTop = chatMessages.scrollHeight; // 存盘 await saveToStorage(); } // 显示建议 if (!hasFiles) { showSuggestions(['帮我做个个人主页', '我要一个计算器', '做个猜数字游戏', '倒计时器', '待办清单']); } } catch (err) { thinkMsg.remove(); addChatMessage('ai', '😅 哎呀，出了点小问题：' + err.message + '，再试一次吧！', false, true); } finally { setLoading(false); chatInput.focus(); } } function setLoading(loading) { isLoading = loading; chatSend.disabled = loading; chatInput.disabled = loading; if (loading) { chatSend.textContent = '思考中… 🤔'; } else { chatSend.textContent = '发送 🚀'; } } /* ===== 自动调整 textarea 高度 ===== */ chatInput.addEventListener('input', function() { this.style.height = 'auto'; this.style.height = Math.min(this.scrollHeight, 80) + 'px'; }); /* ===== 回车发送（Shift+Enter 换行） ===== */ chatInput.addEventListener('keydown', function(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }); /* ===== 初始化 ===== */ async function init() { try { // 尝试从存储恢复 const hasData = await loadFromStorage(); if (hasData && Object.keys(files).length > 0) { renderFileList(); if (activeFile && files[activeFile]) { openFile(activeFile); } else if (fileOrder.length > 0) { openFile(fileOrder[0]); } addChatMessage('sys', '📂 欢迎回来！上次的项目还在，继续搭建吧！有什么想法吗？', false, false); } else { // 新项目：显示欢迎 addChatMessage('ai', '👋 你好！我是 **AI 架构师助手**，可以帮你一起搭建网页项目！\n\n告诉我你想做什么，我来生成代码文件～比如：\n\n📄 **个人主页** - 介绍你自己的页面\n🧮 **计算器** - 可以算数的工具\n🎯 **猜数字游戏** - 和电脑玩猜数字\n⏱️ **倒计时器** - 计时工具\n📋 **待办清单** - 管理要做的事', false, false); showSuggestions(['帮我做个个人主页', '我要一个计算器', '做个猜数字游戏', '倒计时器', '待办清单']); } // 显示应用 document.getElementById('app').classList.add('ready'); } catch (err) { // 兜底：即使初始化失败也显示界面 document.getElementById('app').classList.add('ready'); addChatMessage('ai', '👋 你好！我是 AI 架构师助手，我们开始吧！', false, false); } } // 绑定发送按钮 chatSend.addEventListener('click', handleSend); // 启动 init(); })();