tailwind+vue3实现ai大模型技能工具切换输入动态表单聊天对话布局代码-html代码-BFW代码库

tailwind+vue3实现ai大模型技能工具切换输入动态表单聊天对话布局代码

代码语言：html

代码描述：tailwind+vue3实现ai大模型技能工具切换输入动态表单聊天对话布局代码

代码标签： tailwind vue ai 大模型全能技能工具输入切换动态表单聊天对话布局

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN" class="antialiased">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Workspace Pro</title>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    
    <!-- Google Fonts 优化排版 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

    <style>
        body { font-family: 'Inter', sans-serif; }
        
        /* 隐藏默认滚动条但保留功能 */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* 优雅的自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

        /* 动画关键帧 */
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-enter { animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

        /* 玻璃拟态效果 */
        .glass-panel {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        /* 输入框聚焦时的光晕 */
        .input-glow:focus-within {
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1), 0 10px 40px -10px rgba(0, 0, 0, 0.1);
            border-color: rgba(59, 130, 246, 0.4);
        }
    </style>
</head>
<body class="bg-[#f8f9fa] h-screen w-full overflow-hidden text-slate-800">

    <div id="app" class="flex h-full">

        <!-- 1. 侧边栏 (深色沉浸式) -->
        <aside class="w-[280px] bg-[#0f172a] text-slate-400 flex flex-col shrink-0 transition-all duration-300 z-30 shadow-2xl"
               :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full absolute md:relative md:translate-x-0'">
            
            <!-- Logo -->
            <div class="h-16 flex items-center px-6 border-b border-white/5">
                <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white mr-3 shadow-[0_0_15px_rgba(37,99,235,0.5)]">
                    <i class="fa-solid fa-shapes"></i>
                </div>
                <span class="text-slate-100 font-semibold text-lg tracking-tight">Nexus AI</span>
            </div>

            <!-- 新建按钮 -->
            <div class="p-4">
                <button @click="createNewSession" 
                    class="w-full bg-white/5 hover:bg-white/10 text-slate-200 border border-white/10 py-3 px-4 rounded-xl flex items-center space-x-3 transition-all duration-200 group">
                    <div class="bg-blue-600/20 text-blue-400 w-6 h-6 rounded flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-plus text-xs"></i>
                    </div>
                    <span class="text-sm font-medium">开启新创作</span>
                </button>
            </div>

            <!-- 会话列表 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar px-3 pb-4">
                <div class="text-[10px] font-bold text-slate-600 uppercase tracking-wider mb-2 px-3 mt-2">历史记录</div>
                
                <div v-for="session in sessions" :key="session.id" 
                .........完整代码请登录后点击上方下载按钮下载查看