tailwind布局支持亮色与暗色主题切换的ai聊天助手pc端ui代码-html代码-BFW代码库

tailwind布局支持亮色与暗色主题切换的ai聊天助手pc端ui代码

代码语言：html

代码描述：tailwind布局支持亮色与暗色主题切换的ai聊天助手pc端ui代码

代码标签： tailwind 布局支持亮色暗色主题切换 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>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <script>
        // 配置Tailwind主题，支持亮色/暗色模式
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#7c3aed', // 主紫色
                        secondary: '#ec4899', // 辅助粉色
                        dark: {
                            bg: '#121212',
                            surface: '#1e1e1e',
                            border: '#2d2d2d'
                        },
                        light: {
                            bg: '#f8fafc',
                            surface: '#ffffff',
                            border: '#e2e8f0'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    </style>
</head>

<body class="bg-light-bg dark:bg-dark-bg text-gray-800 dark:text-gray-200 transition-colors duration-300 font-sans">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <div class="w-64 bg-light-surface dark:bg-dark-surface border-r border-light-border dark:border-dark-border flex flex-col transition-all duration-300 ease-in-out">
            <!-- 顶部logo和标题 -->
            <div class="p-4 border-b border-light-border dark:border-dark-border">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                        <i class="fas fa-comment-dots text-white text-xl"></i>
                    </div>
                    <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">AI助手</h1>
                </div>
            </div>
            
            <!-- 新建聊天按钮 -->
            <button class="mt-4 mx-4 px-4 py-2.5 bg-primary hover:bg-primary/90 text-white rounded-lg font-medium transition-all duration-200 flex items-center justify-center space-x-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                <i class="fas fa-plus"></i>
                <span>新建聊天</span>
            </button>
            
            <!-- 聊天历史 -->
            <div class="mt-4 flex-1 overflow-y-auto scrollbar-hide">
                <div class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                    最近聊天
                </div>
                
                <!-- 聊天记录项 -->
                <div class="chat-history-item px-4 py-3 flex items-center hover:bg-gray-100 dark:hover:bg-gray-800/50 cursor-pointer transition-colors duration-150">
                    <div class="w-8 h-8 rounded-md bg-primary/1.........完整代码请登录后点击上方下载按钮下载查看