@3266161160
你要的复刻UI
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatGPT 界面复刻 v4.6 (导航栏调整)</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/petite-vue" defer init></script>
<style>
/* Petite-Vue 初始化前隐藏 */
[v-cloak] { display: none; }
body { background-color: #f9fafb; }
textarea::-webkit-resizer { display: none; }
/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-track { background-color: transparent; }
</style>
</head>
<body class="text-gray-800 antialiased">
<div v-scope="chatApp()" v-cloak class="relative min-h-screen">
<aside :class="['fixed inset-y-0 left-0 z-30 w-72 bg-white border-r border-gray-200 flex flex-col transform transition-transform duration-300 ease-in-out', isSidebarOpen ? 'translate-x-0' : '-translate-x-full']">
<div class="h-16 flex items-center justify-between px-4 border-b border-gray-200 flex-shrink-0"> <button @click="toggleSidebar" class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /> </svg> </button> <span class="text-lg font-semibold"></span> <button class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /> </svg> </button> </div>
<div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1"> <a href="#" class="flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100 group"> <span class="mr-3 p-1 bg-black text-white rounded-full text-xs font-bold flex items-center justify-center w-5 h-5">G</span> ChatGPT </a> <a href="#" class="flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100 group"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-700"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> </svg> 探索 GPT </a> <hr class="my-2 border-gray-200"> <div class="space-y-1"> <div class="px-3 py-1 text-xs font-medium text-gray-500 uppercase">前 30 天</div> <a href="#" class="block px-3 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 truncate">初音未来形象创作</a> <a href="#" class="block px-3 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 truncate">制作演示图片</a> <a href="#" class="block px-3 py-2 text-sm text-gray-700 rounded-lg hover:bg-gray-100 truncate">Hello Conversation</a> </div> </div>
<div class="p-2 border-t border-gray-200 flex-shrink-0"> <div class="space-y-1"> <a href="#" class="flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100 group"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 text-gray-500 group-hover:text-gray-700"> <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" /> </svg> 升级套餐 <span class="ml-auto text-xs bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded-full">Plus</span> </a> <a href="#" class="flex items-center px-3 py-2.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100 group"> <span class="w-5 h-5 mr-3 rounded-full bg-blue-200 text-blue-800 text-xs font-semibold flex items-center justify-center">HE</span> Halley Edwin </a> </div> </div>
</aside>
<div v-if="isSidebarOpen" @click="toggleSidebar" :class="['fixed inset-0 z-20 bg-black bg-opacity-50 transition-opacity duration-300 ease-in-out', isSidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none']"></div>
<div class="flex flex-col h-screen">
<header class="h-16 flex items-center justify-between px-4 bg-white flex-shrink-0 relative z-10">
<button @click="toggleSidebar" class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
</svg>
</button>
<div class="flex items-center space-x-2">
<div class="flex items-center cursor-pointer">
<span class="text-base font-medium">GPT</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-500 ml-1"> <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg>
</div>
</div>
<button class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</button>
</header>
<main class="flex-1 flex flex-col items-center justify-center bg-white relative overflow-hidden">
<h1 class="text-2xl font-semibold text-gray-700 z-10">有什么可以帮忙的？</h1>
</main>
<footer class="sticky bottom-0 p-2 sm:p-4 bg-white flex-shrink-0">
<div class="max-w-3xl mx-auto bg-white border border-gray-200 rounded-3xl shadow-md flex flex-col overflow-hidden"> <textarea v-model="newMessage" placeholder="询问任何问题" class="w-full pl-5 pr-3 py-3 bg-transparent border-none focus:outline-none focus:ring-0 text-base placeholder-gray-500 resize-none" rows="1" @input="autoGrow"></textarea> <div class="flex items-center justify-between px-3 py-2"> <div class="flex items-center space-x-2"> <button @click="handleAttach" class="flex items-center space-x-1.5 px-3 py-1.5 text-sm text-gray-700 border border-gray-200 rounded-[15px] shadow-sm hover:bg-gray-50 hover:border-gray-300 hover:shadow-md transition-all"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.122 2.122l7.81-7.81" /> </svg> <span>附件</span> </button> <button @click="handleSearch" class="flex items-center space-x-1.5 px-3 py-1.5 text-sm text-gray-700 border border-gray-200 rounded-[15px] shadow-sm hover:bg-gray-50 hover:border-gray-300 hover:shadow-md transition-all"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" /> </svg> <span>搜索</span> </button> <button @click="handleRecommend" class="flex items-center space-x-1.5 px-3 py-1.5 text-sm text-gray-700 border border-gray-200 rounded-[15px] shadow-sm hover:bg-gray-50 hover:border-gray-300 hover:shadow-md transition-all"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" /> </svg> <span>推理</span> </button> <button @click="handleMore" class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /> </svg> </button> </div> <div class="flex items-center"> <button @click="sendMessage" :disabled="!newMessage.trim()" class="p-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed transition-colors"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" /> </svg> </button> </div> </div> </div>
</footer>
</div> </div> <script>
function chatApp() {
return {
isSidebarOpen: false,
newMessage: '',
chatHistory: { "前 30 天": ["初音未来形象创作", "制作演示图片", "Hello Conversation"], "更早": ["另一个旧对话"] },
toggleSidebar() { this.isSidebarOpen = !this.isSidebarOpen; },
sendMessage() { const textarea = event.target.form ? event.target.form.querySelector('textarea') : event.target.closest('footer').querySelector('textarea'); if (textarea) { textarea.style.height = 'auto'; } this.newMessage = ''; },
autoGrow(event) { const textarea = event.target; textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; },
handleAttach() { alert('点击了附件按钮 (模拟)'); },
handleSearch() { alert('点击了搜索按钮 (模拟)'); },
handleRecommend() { alert('点击了推理按钮 (模拟)'); },
handleMore() { alert('点击了更多按钮 (模拟)'); },
handleMic() { /* Removed */ }
};
}
</script>
</body>
</html>
主打一个慢慢抠