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="在此输入您的.........完整代码请登录后点击上方下载按钮下载查看