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

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

代码语言：html

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<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">

    <style>
        /* 自定义滚动条 */
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }

        /* 动画类 */
        .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
        .fade-enter-from, .fade-leave-to { opacity: 0; }
        
        .slide-up-enter-active, .slide-up-leave-active { transition: all 0.3s ease; }
        .slide-up-enter-from { opacity: 0; transform: translateY(10px); }
        .slide-up-leave-to { opacity: 0; transform: translateY(10px); }

        /* 模拟打字光标 */
        .typing-cursor::after { content: '|'; animation: blink 1s infinite; }
        @keyframes blink { 50% { opacity: 0; } }
    </style>
</head>
<body class="bg-gray-100 h-screen w-full overflow-hidden text-slate-800 font-sans">

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

        <!-- 1. 左侧历史会话侧边栏 -->
        <aside class="w-64 bg-gray-900 text-gray-300 flex flex-col shrink-0 transition-all duration-300 z-20" 
               :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full absolute md:relative md:translate-x-0'">
            
            <!-- Logo & 新建 -->
            <div class="p-4 border-b border-gray-800">
                <div class="flex items-center space-x-2 mb-6 text-white">
                    <div class="w-8 h-8 bg-gradient-to-tr from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                        <i class="fa-solid fa-layer-group"></i>
                    </div>
                    <span class="font-bold text-lg tracking-wide">AI Matrix</span>
                </div>
                <button @click="createNewSession" class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 px-4 rounded-xl flex items-center justify-start space-x-3 transition-colors border border-gray-700">
                    <i class="fa-solid fa-plus"></i>
                    <span class="text-sm font-medium">新建创作会话</span>
                </button>
            </div>

            <!-- 会话列表 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
                <div v-for="session in sessions" :key="session.id" 
                     @click="switchSession(session.id)"
                     class="group flex items-center p-3 rounded-lg cursor-pointer transition-colors relative"
                     :class="currentSessionId === session.id ? 'bg-gray-800 text-white' : 'hover:bg-gray-800/50'">
                    
                    <i class="fa-regular fa-message w-5 text-center text-xs opacity-70"></i>
                    <div class="ml-3 text-sm truncate flex-1 pr-6">
                        {{ session.title || '新对话' }}
                    </div>
                    
                    <!-- 删除按钮 (hover显示) -->
                    <button @click.stop="deleteSession(session.id)" class="absolute right-2 opacity-0 group-hover:opacity-100 text-gray-500 hover:text-red-400 transition-opacity">
                        <i class="fa-solid fa-xmark text-xs"></i>
                    </button>
                </div>
            </div>

      .........完整代码请登录后点击上方下载按钮下载查看