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

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

代码语言：html

代码描述：tailwind+vue实现ai聊天大模型动态表单输入切换代码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>Vue 3 AI 工作台 - 历史记录版</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-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
        
        /* 隐藏默认滚动条但保留功能 (用于侧边栏) */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* 动画 */
        .fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
        .fade-enter-from, .fade-leave-to { opacity: 0; }
        
        /* 侧边栏过渡 */
        .slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
        .slide-enter-from, .slide-leave-to { transform: translateX(-100%); }

        /* 思考动画点 */
        .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. 左侧侧边栏 (历史记录) -->
        <!-- 遮罩层 (移动端) -->
        <div v-if="isSidebarOpen" @click="toggleSidebar" class="fixed inset-0 bg-black/20 z-20 md:hidden"></div>
        
        <aside class="bg-gray-900 text-gray-300 flex flex-col transition-all duration-300 ease-in-out z-30 absolute md:relative h-full shadow-xl md:shadow-none"
               :class="isSidebarOpen ? 'w-64 translate-x-0' : 'w-0 -translate-x-full md:w-0 md:-translate-x-0 overflow-hidden'">
            
            <!-- 侧边栏头部: 新建会话 -->
            <div class="p-4 shrink-0">
                <button @click="createNewSession" class="w-full flex items-center justify-between border border-gray-700 bg-gray-800 hover:bg-gray-700 text-white rounded-lg px-4 py-3 transition-colors group">
                    <span class="text-sm font-medium"><i class="fa-solid fa-plus mr-2"></i>新建会话</span>
                    <i cl.........完整代码请登录后点击上方下载按钮下载查看