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

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

代码语言：html

代码描述：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">
    <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">

    <!-- 引入 Markdown 解析 (可选，这里用简单处理代替，为了单文件演示) -->

    <style>
        /* 滚动条美化 */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

        /* 动画 */
        .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.4s ease; }
        .slide-up-enter-from { opacity: 0; transform: translateY(20px); }
        .slide-up-leave-to { opacity: 0; transform: translateY(-20px); }

        /* 代码块样式 */
        pre { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; }
        
        /* 思考中的动画点 */
        .typing-dot {
            width: 6px; height: 6px; 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-50 h-screen w-full text-gray-800 font-sans overflow-hidden">

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

        <!-- 1. 顶部导航 (仅在有消息时，或者你想一直显示) -->
        <header class="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0 z-10 transition-all duration-300"
            :class="hasStarted ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-full absolute w-full'">
            <div class="flex items-center space-x-2">
                <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">AI</div>
                <span class="font-semibold text-lg tracking-tight">Studio</span>
            </div>
            <div class="text-sm text-gray-500">
                当前工具: <span class="text-blue-600 font-medium">{{ currentToolDef.name }}</span>
            </div>
            <button @click="resetChat" class="text-gray-400 hover:text-red-500 transition-colors" title="清空对话">
                <i class="fa-solid fa-trash-can"><.........完整代码请登录后点击上方下载按钮下载查看