tailwind+vue实现大气ai建站应用网站ui交互代码-html代码-BFW代码库

代码语言：html

代码描述：tailwind+vue实现大气ai建站应用网站ui交互代码，支持多轮对话，支持代码生成及版本选择，支持发布网站，支持预览，支持手机二维码生成，支持pc与手机设备视图切换。

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

<!DOCTYPE html>
<html lang="zh-CN" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI建站-Solo 模式 Pro</title>
    
    <!-- Tailwind CSS (Via CDN for standalone usage) -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#4f46e5', // Indigo 600
                        secondary: '#64748b', // Slate 500
                        dark: {
                            bg: '#0f172a', // Slate 900
                            surface: '#1e293b', // Slate 800
                            border: '#334155', // Slate 700
                        }
                    }
                }
            }
        }
    </script>

    <!-- Vue and Element UI -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/element-ui.2.15.1.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
    <!-- Libraries -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/qrcode.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marked.min.js"></script>

    <style>
        /* Custom Scrollbar for Webkit */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        html.dark ::-webkit-scrollbar-thumb { background: #475569; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* Element UI Override for Dark Mode & Tailwind Compatibility */
        html.dark .el-dialog, html.dark .el-message-box { background-color: #1e293b; border: 1px solid #334155; }
        html.dark .el-dialog__title, html.dark .el-message-box__title, html.dark .el-message-box__content { color: #f1f5f9; }
        html.dark .el-input__inner, html.dark .el-textarea__inner { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
        html.dark .el-button--default { background-color: #1e293b; border-color: #334155; color: #e2e8f0; }
        html.dark .el-button--default:hover { background-color: #334155; color: #fff; }
        html.dark .el-tabs__item { color: #94a3b8; }
        html.dark .el-tabs__item.is-active { color: #818cf8; }
        html.dark .el-tabs__nav-wrap::after { background-color: #334155; }
        
        /* Loading Animation */
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .animate-spin-slow { animation: spin 3s linear infinite; }
        
        /* Utilities */
        [v-cloak] { display: none; }
        .glass-effect {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
        }
        html.dark .glass-effect {
            background: rgba(30, 41, 59, 0.7);
        }
    </style>
</head>
<body class="h-screen overflow-hidden font-sans text-slate-800 bg-slate-50 dark:bg-slate-900 dark:text-slate-200 transition-colors duration-300">

    <!-- Splash Screen -->
    <div id="splash-screen" :class="{'opacity-0 pointer-events-none': !showSplashScreen}" class="fixed inset-0 z-50 flex bg-slate-50 dark:bg-slate-900 transition-opacity duration-700">
        
        <!-- Left Sidebar: History (Requested Feature) -->
        <div class="w-80 bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col shadow-lg z-10">
            <div class="p-6 border-b border-slate-100 dark:border-slate-700">
                <div class="text-xl font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-2">
                    <i class="el-icon-time"></i> 历史记录
                </div>
                <p class="text-xs text-slate-400 mt-2">继续您之前的伟大创作</p>
            </div>
            
            <div class="flex-1 overflow-y-auto p-4 space-y-2">
                <div v-if="pages.length === 0" class="text-center py-10 text-slate-400 text-sm">
                    暂无记录
                </div>
                <div v-for="page in pages" :key="page.id" 
                     @click="selectExistingPage(page)"
                     class="group p-4 rounded-xl border border-transparent hover:border-indigo-100 hover:bg-indigo-50 dark:hover:bg-slate-700 dark:hover:border-slate-600 cursor-pointer transition-all duration-200">
                    <div class="font-medium text-slate-700 dark:text-slate-200 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 truncate">
                        {{ page.memostr || '未命名项目' }}
                    </div>
                    <div class="flex justify-between items-center mt-2 text-xs text-slate-400">
                        <span>{{ page.conversationCount || 0 }} 次对话</span>
                        <i class="el-icon-arrow-right opacity-0 group-hover:opacity-100 transition-opacity"></i>
                    </div>
                </div>
            </div>
            
            <div class="p-4 border-t border-slate-100 dark:border-slate-700 text-center text-xs text-slate-400">
                Solo Pro AI Assistant
            </div>
        </div>

        <!-- Right Main Content -->
        <div class="flex-1 flex flex-col relative overflow-hidden">
            <!-- Abstract Background Shapes -->
            <div class="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 rounded-full bg-indigo-500/10 blur-3xl"></div>
            <div class="absolute bottom-0 left-80 -ml-20 -mb-20 w-80 h-80 rounded-full bg-purple-500/10 blur-3xl"></div>

            <div class="flex-1 flex flex-col justify-center items-center p-10 z-10 max-w-5xl mx-auto w-full">
                <!-- Logo & Slogan -->
                <div class="text-center mb-12">
                    <div class="inline-block px-3 py-1 mb-4 text-xs font-semibold tracking-wider text-indigo-600 uppercase bg-indigo-100 rounded-full dark:bg-indigo-900/30 dark:text-indigo-400">
                        AI Power
                    </div>
                    <h1 class="text-5xl md:text-6xl font-extrabold tracking-tight text-slate-900 dark:text-white mb-6">
                        开启您的下一个<br><span class="text-indigo-600 dark:text-indigo-400">伟大项目</span>
                    </h1>
                    <p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
                        无论是个人博客、作品集，还是复杂的电商网站，只需一句话，Solo Pro 即刻为您生成。
                    </p>
                </div>

                <!-- Input Area -->
                <div class="w-full max-w-2xl mb-16 relative group">
                    <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
                    <div class="relative flex items-center bg-white dark:bg-slate-800 rounded-xl shadow-xl p-2 border border-slate-100 dark:border-slate-600">
                    .........完整代码请登录后点击上方下载按钮下载查看