vue3实现ai对话式可视化生成网页并修改代码-html代码-BFW代码库

vue3实现ai对话式可视化生成网页并修改代码

代码语言：html

所属分类：其他

代码描述：vue3实现ai对话式可视化生成网页并修改代码，可以调用兼容openai的大模型api

下面为部分代码预览，完整代码请点击下载或在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/vue3.2.22.js"></script>
    <!-- Tailwind CSS CDN for rapid styling -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <style>
        /* Custom styles for a polished look */
        [v-cloak] { display: none; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #1f2937; }
        ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #6b7280; }
        .slide-fade-enter-active { transition: all 0.3s ease-out; }
        .slide-fade-leave-active { transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); }
        .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(20px); opacity: 0; }
        .code-highlight .tag { color: #e06c75; } /* red */
        .code-highlight .attr { color: #d19a66; } /* orange */
        .code-highlight .string { color: #98c379; } /* green */
        .code-highlight .comment { color: #5c6370; font-style: italic; } /* grey */
    </style>
</head>
<body class="bg-slate-900 text-slate-200 font-sans antialiased overflow-hidden">

<div id="app" v-cloak class="flex h-screen">
    <!-- Left Panel: Chat Interface -->
    <aside class="flex flex-col w-full md:w-1/3 lg:w-1/4 max-w-md bg-slate-800 border-r border-slate-700 h-full">
        <header class="p-4 border-b border-slate-700 flex-shrink-0">
            <h1 class="text-xl font-bold text-white">AI 网页生成器</h1>
            <div class="mt-3 relative">
                <input type="password" v-model="apiKey" placeholder="在此输入您的 OpenAI API Key"
                       class="w-full bg-slate-700 text-white placeholder-slate-400 p-2 rounded-md pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <button @click="saveApiKey" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white">
                    <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path></svg>
                </button>
            </div>
        </header>

        <div ref="chatHistoryEl" class="flex-1 p-4 overflow-y-auto space-y-6">
            <div v-for="(msg, index) in messages" :key="index" class="flex" :class="msg.role === 'user' ? 'justify-end' : 'justify-start'">
                <div class="max-w-xs lg:max-w-md p-3 rounded-lg" :class="msg.role === 'user' ? 'bg-indigo-600 text-white' : 'bg-slate-700'">
                    <p class="whitespace-pre-wrap text-sm">{{ msg.content }}</p>
                <.........完整代码请登录后点击上方下载按钮下载查看