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>
                &.........完整代码请登录后点击上方下载按钮下载查看