tailwind+vue布局实现ai聊天大模型动态表单输入切换ui代码-html代码-BFW代码库

tailwind+vue布局实现ai聊天大模型动态表单输入切换ui代码

代码语言：html

代码描述：tailwind+vue布局实现ai聊天大模型动态表单输入切换ui代码，底部微信图标聊天点击可切换不同的场景的表单输入模式

代码标签： tailwind vue ai 聊天大模型动态表单输入切换 ui 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Studio - 多会话完整版</title>
    
    <!-- 引入 Vue 3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
    
    <!-- 引入 Tailwind CSS -->
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <!-- 引入 FontAwesome -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">

    <style>
        /* 滚动条优化 */
        .custom-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
        .custom-scroll::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
        .custom-scroll::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }
        
        /* 动画类 */
        .slide-enter-active, .slide-leave-active { transition: all 0.3s ease; }
        .slide-enter-from, .slide-leave-to { transform: translateX(-100%); opacity: 0; width: 0; }
        
        .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
        .fade-enter-from, .fade-leave-to { opacity: 0; }

        /* 思考点动画 */
        .typing-dot {
            width: 5px; height: 5px; background-color: #94a3b8; border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out both;
        }
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
    </style>
</head>
<body class="bg-gray-100 h-screen w-full text-gray-800 font-sans overflow-hidden">

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

        <!-- 1. 左侧历史会话侧边栏 -->
        <aside class="bg-gray-900 text-gray-300 flex flex-col transition-all duration-300 ease-in-out border-r border-gray-800 shrink-0 relative z-30"
               :class="isSidebarOpen ? 'w-64 translate-x-0' : 'w-0 -translate-x-full opacity-0 overflow-hidden'">
            
            <!-- 侧边栏头部 -->
            <div class="h-14 flex items-center justify-between px-4 border-b border-gray-800 shrink-0">
                <span class="font-bold text-white tracking-wider flex items-center gap-2">
                    <i class="fa-solid fa-cube text-blue-500"></i> AI Studio
                </span>
                <button @click="toggleSidebar" class="text-gray-500 hover:text-white transition">
                    <i class="fa-solid fa-angles-left"></i>
                </button>
            </div>

            <!-- 新建聊天按钮 -->
            <div class="p-3">
                <button @click="createNewSession" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2 transition-colors shadow-lg shadow-blue-900/20">
                    <i class="fa-solid fa-plus"></i>
                    <span class="text-sm f.........完整代码请登录后点击上方下载按钮下载查看