tailwind+vue3实现简洁ai聊天助手pc端ui交互代码-html代码-BFW代码库

tailwind+vue3实现简洁ai聊天助手pc端ui交互代码

代码语言：html

代码描述：tailwind+vue3实现简洁ai聊天助手pc端ui交互代码

代码标签： tailwind vue 简洁 ai 聊天助手 pc端 ui 交互代码

下面为部分代码预览，完整代码请点击下载或在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>
    
    <!-- 引入 Tailwind CSS (样式库) -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 引入 Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    
    <!-- 引入 Marked (Markdown解析) -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    
    <!-- 引入 Highlight.js (代码高亮) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

    <!-- Google Fonts (Inter & Noto Sans SC) -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            background-color: #f5f6fa;
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Markdown 样式微调 */
        .markdown-body p { margin-bottom: 0.5em; line-height: 1.6; }
        .markdown-body pre { background: #0d1117; padding: 1em; border-radius: 8px; margin: 10px 0; overflow-x: auto; }
        .markdown-body code { font-family: 'Consolas', monospace; background: #f1f5f9; padding: 2px 4px; border-radius: 4px; color: #ef4444; }
        .markdown-body pre code { background: transparent; color: inherit; padding: 0; color: #e6edf3; }
        .markdown-body ul { list-style-type: disc; padding-left: 1.5em; }
        .markdown-body ol { list-style-type: decimal; padding-left: 1.5em; }
        
        /* 动画 */
        .cursor-blink {
            animation: blink 1s step-end infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
        .fade-enter-from, .fade-leave-to { opacity: 0; }
    </style>
</head>
<body>

<div id="app" class="flex h-screen overflow-hidden text-slate-700">

    <!-- 左侧侧边栏 -->
    <aside class="w-64 bg-white border-r border-slate-200 flex flex-col flex-shrink-0 z-20">
        <!-- Logo区 -->
        <div class="h.........完整代码请登录后点击上方下载按钮下载查看