vue3实现大模型输入框动态表单切换获取值代码-html代码-BFW代码库

vue3实现大模型输入框动态表单切换获取值代码

代码语言：html

代码描述：vue3实现大模型输入框动态表单切换获取值代码

下面为部分代码预览，完整代码请点击下载或在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 Dynamic Input Interface</title>
    <!-- 引入 Phosphor Icons (图标库) -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/phosphor-icons.css">
    <!-- 引入 Vue 3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.2.33.js"></script>
    <style>
        :root {
            --bg-color: #f3f4f6;
            --card-bg: #ffffff;
            --primary: #4f46e5;
            --text-main: #1f2937;
            --text-sub: #6b7280;
            --border: #e5e7eb;
            --input-bg: #f9fafb;
            --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: var(--text-main);
        }

        /* 主容器 */
        .app-container {
            width: 100%;
            max-width: 800px;
            padding: 20px;
        }

        /* AI 输入框大容器 */
        .ai-input-wrapper {
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            position: relative;
            transition: all 0.3s ease;
            overflow: visible; /* 允许下拉菜单溢出 */
        }

        .ai-input-wrapper.is-tool-active {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
        }

        /* 顶部工具标题栏 (仅在工具激活时显示) */
        .tool-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: #f8fafc;
            border-radius: 16px 16px 0 0;.........完整代码请登录后点击上方下载按钮下载查看