vue3+tailwindcss实现ai生成网页可视化建站助手代码-html代码-BFW代码库

代码语言：html

代码描述：vue3+tailwindcss实现ai生成网页可视化建站助手代码，通过描述需求，调用兼容openai的大模型api来进行请求编写html代码预览效果

下面为部分代码预览，完整代码请点击下载或在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代码生成平台</title>
    <!-- Vue 3 CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.prod.3.5.17.js"></script>
    <!-- Tailwind CSS for utility-first styling -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <!-- Prism.js for Syntax Highlighting -->
    <link href="//repo.bfw.wiki/bfwrepo/js/prism/themes/prism-tomorrow.min.css" rel="stylesheet" />
    <script src="//repo.bfw.wiki/bfwrepo/js/prism/components/prism-core.min.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/prism/components/prism-clike.min.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/prism/components/prism-javascript.min.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/prism/components/prism-markup.min.js"></script>
    <script src="//repo.bfw.wiki/bfwrepo/js/prism/components/prism-css.min.js"></script>
    <style>
        [v-cloak] { display: none; }
        body { background-color: #0f172a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #1e293b; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }
        .resizable-handle { cursor: col-resize; width: 8px; background-color: #334155; }
        .resizable-handle:hover { background-color: #4f46e5; }
        /* Prism.js Tomorrow Night theme overrides */
        pre[class*="language-"] { background: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; margin: 0; }
        .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6b7280; }
        .token.tag, .token.selector, .token.keyword { color: #e06c75; }
        .token.attr-name, .token.property, .token.entity { color: #d19a66; }
        .token.string, .token.attr-value { color: #98c379; }
        .token.operator, .token.url, .token.variable { color: #61afef; }
        .token.function { color: #c678dd; }
    </style>
</head>
<body class="text-slate-300">

<div id="app" v-cloak class="flex h-screen overflow-hidden">
    <!-- 左侧导航/会话列表 -->
    <aside class="w-64 bg-slate-900/70 backdrop-blur-sm border-r border-slate-700/50 flex flex-col flex-shrink-0">
        <header class="h-16 flex items-center justify-between p-4 border-b border-slate-700/50 flex-shrink-0">
            <h1 class="text-lg font-bold text-white">AI Copilot</h1>
            <button @click="createNewChat" title="新会话" class="p-2 rounded-md hover:bg-slate-700">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
            </button>
        </header>
        <div class="flex-1 overflow-y-auto p-2 space-y-1">
            <div v-if="chatSessions.length === 0" class="text-center text-slate-500 text-sm mt-4 px-2">
                点击上方 "+" 开始您的第一个会话。
            </div>
            <button v-for="session in chatSessions" :key="session.id" @click="selectSession(session.id)"
                    class="w-full flex items-center justify-between p-2 rounded-md text-left text-sm group"
                    :class="session.id === activeSessionId ? 'bg-slate-700' : 'hover:bg-slate-700/50'">
                <span class="truncate">{{ session.title }}</span>
        .........完整代码请登录后点击上方下载按钮下载查看