用Ai生成webos设计稿
现在的ai确实越来越先进了，只是描述的了一下，就可以用单一个html完成初步的设计，而且果里果的气息，确实6，代码如下：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>WeOS - 浏览器中的操作系统</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body {font-family: 'Segoe UI', sans-serif;height: 100vh;overflow: hidden;background: linear-gradient(135deg, #1e3c72, #2a5298);user-select: none;}/* 桌面 */#desktop {position: relative;width: 100%;height: calc(100% - 50px);background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==') repeat;}/* 任务栏 */#taskbar {position: fixed;bottom: 0;width: 100%;height: 50px;background: rgba(0, 0, 0, 0.8);backdrop-filter: blur(10px);display: flex;align-items: center;padding: 0 10px;color: white;z-index: 1000;}/* 暗黑模式标签栏 */#tab-list-* {font-family: 'Consolas', monospace;font-size: 13px;}/* 滚动条美化 */#tabs-container-*::-webkit-scrollbar {width: 6px;}#tabs-container-*::-webkit-scrollbar-track {background: #1e1e1e;}#tabs-container-*::-webkit-scrollbar-thumb {background: #444;border-radius: 3px;}#start-btn {width: 40px;height: 40px;background: #0078d4;border-radius: 8px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-weight: bold;}/* 桌面图标 */.icon {position: absolute;width: 80px;text-align: center;color: white;cursor: pointer;padding: 10px;border-radius: 8px;transition: background 0.2s;}.icon:hover { background: rgba(255,255,255,0.2); }.icon img { width: 48px; height: 48px; }.icon span { display: block; margin-top: 5px; font-size: 12px; }/* 窗口 */.window {position: absolute;background: white;border-radius: 10px;box-shadow: 0 10px 30px rgba(0,0,0,0.3);overflow: hidden;resize: both;min-width: 300px;min-height: 200px;display: flex;flex-direction: column;}.window-header {background: #f0f0f0;padding: 8px 12px;display: flex;justify-content: space-between;align-items: center;cursor: move;font-weight: bold;border-bottom: 1px solid #ddd;}.window-controls button {width: 16px; height: 16px; margin-left: 6px;border: none; border-radius: 50%; cursor: pointer;}.close { background: #ff5f57; }.minimize { background: #ffbd2e; }.maximize { background: #28ca42; }/* 内嵌浏览器 */#browser-toolbar {display: flex;padding: 8px;background: #f8f8f8;border-bottom: 1px solid #ddd;gap: 8px;align-items: center;}#browser-toolbar input {flex: 1;padding: 6px 10px;border: 1px solid #ccc;border-radius: 4px;font-size: 14px;}#browser-toolbar button {padding: 6px 10px;background: #0078d4;color: white;border: none;border-radius: 4px;cursor: pointer;}#browser-frame {flex: 1;border: none;width: 100%;height: 100%;}/* 启动菜单 */#start-menu {position: fixed;bottom: 60px;left: 10px;width: 300px;background: rgba(255,255,255,0.95);backdrop-filter: blur(10px);border-radius: 10px;box-shadow: 0 10px 30px rgba(0,0,0,0.2);padding: 10px;display: none;z-index: 999;}.menu-item {padding: 12px;display: flex;align-items: center;gap: 12px;cursor: pointer;border-radius: 6px;}.menu-item:hover { background: #e0e0e0; }.menu-item img { width: 24px; height: 24px; }</style>
</head>
<body><!-- 桌面 --><div id="desktop"><!-- 桌面图标 --><div class="icon" style="top:20px;left:20px;" onclick="openBrowser()"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTE5IDNINmMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxM2MxLjEgMCAyLS45IDItMlY1Yy0tLjktMS0xLjgtMi0yem0wIDE2SDZjLS4zIDAtLjUtLjItLjUtLjV2LTVjMC0uMy4yLS41LjUtLjVoMTNjLjMgMCAuNS4yLjUuNXY1Yy4uMy0uMi41LS41LjV6TTYgNmgxM3YySDZ6Ii8+PC9zdmc+" alt="浏览器"/><span>浏览器</span></div></div><!-- 任务栏 --><div id="taskbar"><div id="start-btn" onclick="toggleStartMenu()">We</div></div><!-- 启动菜单 --><div id="start-menu"><div class="menu-item" onclick="openBrowser()"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJibGFjayI+PHBhdGggZD0iTTE5IDNINmMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxM2MxLjEgMCAyLS45IDItMlY1Yy0tLjktMS0xLjgtMi0yem0wIDE2SDZjLS4zIDAtLjUtLjItLjUtLjV2LTVjMC0uMy4yLS41LjUtLjVoMTNjLjMgMCAuNS4yLjUuNXY1Yy4uMy0uMi41LS41LjV6TTYgNmgxM3YySDZ6Ii8+PC9zdmc+" alt=""/><span>打开浏览器</span></div></div><script>let windowCount = 0;let zIndex = 100;// === 替换原来的 openBrowser() 函数 ===
function openBrowser() {windowCount++;const win = document.createElement('div');win.className = 'window';win.id = 'win-' + windowCount;win.style.width = '900px';win.style.height = '650px';win.style.left = `${100 + (windowCount % 5) * 30}px`;win.style.top = `${50 + (windowCount % 5) * 30}px`;win.style.zIndex = zIndex++;// 标签页数据结构const tabs = [{ id: 'tab-1', title: 'Example', url: 'https://example.com' }];let activeTabId = 'tab-1';let tabCounter = 1;win.innerHTML = `<div class="window-header"><span>浏览器预览 - WeOS</span><div class="window-controls"><button class="minimize" onclick="minimizeWindow('${win.id}')">-</button><button class="maximize" onclick="toggleMaximize('${win.id}')">□</button><button class="close" onclick="closeWindow('${win.id}')">×</button></div></div><div style="display:flex;height:calc(100% - 40px);"><!-- 左侧标签栏 --><div id="tab-list-${win.id}" style="width:200px;background:#1e1e1e;color:#ccc;display:flex;flex-direction:column;"><div style="padding:8px;font-weight:bold;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center;"><span>标签页</span><button onclick="addTab('${win.id}')" style="background:none;border:none;color:#0a0;cursor:pointer;font-size:18px;">+</button></div><div id="tabs-container-${win.id}" style="flex:1;overflow-y:auto;"></div></div><!-- 右侧预览区 --><div style="flex:1;display:flex;flex-direction:column;background:#fff;"><div id="browser-toolbar-${win.id}" style="display:flex;padding:8px;background:#f0f0f0;border-bottom:1px solid #ddd;gap:8px;align-items:center;"><button onclick="navBack('${win.id}')">←</button><button onclick="navForward('${win.id}')">→</button><button onclick="reload('${win.id}')">↻</button><input type="text" id="url-${win.id}" style="flex:1;padding:6px;border:1px solid #ccc;border-radius:4px;" placeholder="输入 URL 按 Enter 访问" /><button onclick="loadURL('${win.id}')">前往</button></div><iframe id="frame-${win.id}" src="https://example.com" sandbox="allow-same-origin allow-scripts allow-forms allow-modals allow-popups" style="flex:1;border:none;"></iframe></div></div>`;document.getElementById('desktop').appendChild(win);makeDraggable(win);// 初始化标签const container = win.querySelector(`#tabs-container-${win.id}`);function renderTabs() {container.innerHTML = '';tabs.forEach(tab => {const tabEl = document.createElement('div');tabEl.style.cssText = `padding:10px 12px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:${tab.id === activeTabId ? '#007acc' : 'transparent'};color:${tab.id === activeTabId ? 'white' : '#ccc'};transition:all 0.2s;`;tabEl.innerHTML = `<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${tab.title}</span><span onclick="event.stopPropagation(); closeTab('${win.id}', '${tab.id}')" style="margin-left:8px;font-size:14px;opacity:0.7;">×</span>`;tabEl.onclick = () => switchTab(win.id, tab.id);container.appendChild(tabEl);});}// 切换标签function switchTab(winId, tabId) {const tab = tabs.find(t => t.id === tabId);if (!tab) return;activeTabId = tabId;const iframe = document.getElementById(`frame-${winId}`);const urlInput = document.getElementById(`url-${winId}`);iframe.src = tab.url;urlInput.value = tab.url;renderTabs();}// 新建标签window.addTab = function(winId) {tabCounter++;const newTab = {id: `tab-${tabCounter}`,title: '新标签页',url: 'https://baidu.com'};tabs.push(newTab);switchTab(winId, newTab.id);};// 关闭标签window.closeTab = function(winId, tabId) {const idx = tabs.findIndex(t => t.id === tabId);if (idx === -1) return;tabs.splice(idx, 1);if (activeTabId === tabId && tabs.length > 0) {switchTab(winId, tabs[Math.max(0, idx - 1)].id);} else if (tabs.length === 0) {closeWindow(winId);} else {renderTabs();}};// 加载 URLwindow.loadURL = function(winId) {const input = document.getElementById(`url-${winId}`);let url = input.value.trim();if (!url) return;if (!/^https?:\/\//i.test(url)) url = 'https://' + url;const iframe = document.getElementById(`frame-${winId}`);iframe.src = url;// 更新当前标签const tab = tabs.find(t => t.id === activeTabId);if (tab) {tab.url = url;tab.title = new URL(url).hostname;renderTabs();}input.value = url;};// 导航window.navBack = (winId) => {const iframe = document.getElementById(`frame-${winId}`);if (iframe.contentWindow.history.length > 1) iframe.contentWindow.history.back();};window.navForward = (winId) => {const iframe = document.getElementById(`frame-${winId}`);iframe.contentWindow.history.forward();};window.reload = (winId) => {document.getElementById(`frame-${winId}`).contentWindow.location.reload();};// 监听 iframe 标题变化const iframe = win.querySelector(`#frame-${win.id}`);iframe.onload = () => {try {const title = iframe.contentDocument.title || '无标题';const tab = tabs.find(t => t.id === activeTabId);if (tab) {tab.title = title.substring(0, 20);renderTabs();}} catch (e) {}};// 键盘快捷键win.addEventListener('keydown', (e) => {if (e.ctrlKey || e.metaKey) {if (e.key === 't') { e.preventDefault(); addTab(win.id); }if (e.key === 'w') { e.preventDefault(); closeTab(win.id, activeTabId); }}});// 初始化renderTabs();win.focus();
}function loadURL(winId) {const input = document.getElementById('url-' + winId);let url = input.value.trim();if (!url) return;if (!url.startsWith('http://') && !url.startsWith('https://')) {url = 'https://' + url;}const iframe = document.getElementById('frame-' + winId);iframe.src = url;input.value = url;}function navBack(winId) {const iframe = document.getElementById('frame-' + winId);if (iframe.contentWindow.history.length > 1) {iframe.contentWindow.history.back();}}function navForward(winId) {const iframe = document.getElementById('frame-' + winId);iframe.contentWindow.history.forward();}function reload(winId) {document.getElementById('frame-' + winId).contentWindow.location.reload();}// 窗口操作function closeWindow(id) {const win = document.getElementById(id);if (win) win.remove();}function minimizeWindow(id) {const win = document.getElementById(id);win.style.display = win.style.display === 'none' ? 'flex' : 'none';}function toggleMaximize(id) {const win = document.getElementById(id);if (win.style.width === '100vw' && win.style.height === 'calc(100vh - 50px)') {win.style.width = '800px';win.style.height = '600px';win.style.left = '100px';win.style.top = '50px';} else {win.style.width = '100vw';win.style.height = 'calc(100vh - 50px)';win.style.left = '0';win.style.top = '0';win.style.borderRadius = '0';}}// 拖拽支持function makeDraggable(el) {const header = el.querySelector('.window-header');let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;header.onmousedown = (e) => {if (e.target.tagName === 'BUTTON') return;e.preventDefault();pos3 = e.clientX;pos4 = e.clientY;el.style.zIndex = ++zIndex;document.onmouseup = () => {document.onmouseup = null;document.onmousemove = null;};document.onmousemove = (e) => {pos1 = pos3 - e.clientX;pos2 = pos4 - e.clientY;pos3 = e.clientX;pos4 = e.clientY;el.style.top = (el.offsetTop - pos2) + "px";el.style.left = (el.offsetLeft - pos1) + "px";};};}// 启动菜单function toggleStartMenu() {const menu = document.getElementById('start-menu');menu.style.display = menu.style.display === 'block' ? 'none' : 'block';}// 点击桌面关闭菜单document.getElementById('desktop').onclick = (e) => {if (!e.target.closest('#start-btn') && !e.target.closest('#start-menu')) {document.getElementById('start-menu').style.display = 'none';}};</script>
</body>
</html>结果如下：
