<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超大容量快捷图标库（300+）</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        purple: '#722ED1',
                        blue: '#1890FF',
                        green: '#00B42A',
                        yellow: '#FF7D00',
                        indigo: '#4096ff',
                        pink: '#f5222d',
                        cyan: '#13c2c2',
                        orange: '#fa8c16',
                        dark: '#1D2129',
                    }
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .icon-card {
                @apply flex flex-col items-center p-4 rounded-xl border border-gray-200 hover:border-primary hover:shadow-md transition-all duration-300 cursor-pointer;
            }

            .icon-container {
                @apply w-14 h-14 rounded-full flex items-center justify-center mb-3 text-xl;
            }

            .icon-search-highlight {
                @apply bg-primary/5 border-primary/30;
            }
        }
    </style>
</head>
<body class="bg-gray-50 p-4 md:p-6">
<div class="max-w-7xl mx-auto">
    <!-- 头部与搜索区 -->
    <div class="mb-8">
        <h1 class="text-2xl md:text-3xl font-bold text-dark mb-2">快捷图标库（300+图标）</h1>
        <p class="text-gray-600 mb-6">海量功能图标与名称组合，支持搜索和筛选</p>

        <!-- 搜索与筛选区 -->
        <div class="flex flex-col sm:flex-row gap-4 mb-6">
            <div class="relative flex-1">
                <input
                        type="text"
                        id="iconSearch"
                        placeholder="搜索图标名称或类名（如：数据库、fa-database）..."
                        class="w-full py-3 pl-10 pr-4 rounded-lg border border-gray-200 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
                >
                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="flex gap-2">
                <select id="colorFilter"
                        class="py-3 px-4 rounded-lg border border-gray-200 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary">
                    <option value="all">所有颜色</option>
                    <option value="primary"> primary</option>
                    <option value="secondary"> secondary</option>
                    <option value="success"> success</option>
                    <option value="warning"> warning</option>
                    <option value="danger"> danger</option>
                    <option value="purple"> purple</option>
                </select>

                <button id="resetFilter" class="py-3 px-4 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                    <i class="fa fa-refresh mr-1"></i> 重置
                </button>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="text-sm text-gray-500 mb-2">
            <span id="iconCount">0</span> 个图标（显示 <span id="visibleCount">0</span> 个）
        </div>
    </div>

    <!-- 图标网格容器 -->
    <div id="iconGrid"
         class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 md:gap-6">
        <!-- 图标将通过JavaScript动态生成 -->
    </div>

    <!-- 使用说明 -->
    <div class="mt-10 p-4 bg-white rounded-lg border border-gray-200">
        <h3 class="font-bold mb-3">使用说明</h3>
        <ul class="list-disc pl-5 text-gray-600 space-y-2 text-sm">
            <li>每个图标下方显示了对应的Font Awesome类名（如fa-database）</li>
            <li>点击图标可复制其HTML代码到剪贴板</li>
            <li>支持按名称、类名搜索和按颜色筛选</li>
            <li>如需调整颜色，可修改容器的bg-*和text-*类（如bg-primary/10和text-primary）</li>
            <li>Font Awesome官方文档：<a href="https://fontawesome.com/v4/icons/" class="text-primary hover:underline"
                                        target="_blank">https://fontawesome.com/v4/icons/</a></li>
        </ul>
    </div>
</div>

<!-- 复制成功提示 -->
<div id="copyToast"
     class="fixed bottom-6 right-6 bg-success text-white px-4 py-2 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 flex items-center">
    <i class="fa fa-check-circle mr-2"></i> 已复制到剪贴板
</div>

<script>
    // 颜色池 - 用于随机分配图标颜色
    const colorPool = [
        'primary', 'secondary', 'success', 'warning', 'danger',
        'purple', 'blue', 'green', 'yellow', 'indigo', 'pink', 'cyan', 'orange'
    ];

    // 基础图标数据（50个示例，实际使用时可扩展到300+）
    const baseIcons = [
        {name: '数据库管理', icon: 'fa-database'},
        {name: '性能监控', icon: 'fa-line-chart'},
        {name: '用户管理', icon: 'fa-user-circle'},
        {name: '安全中心', icon: 'fa-shield'},
        {name: '日志审计', icon: 'fa-file-text'},
        {name: '系统设置', icon: 'fa-cog'},
        {name: '备份恢复', icon: 'fa-cloud-upload'},
        {name: 'API接口', icon: 'fa-plug'},
        {name: '告警中心', icon: 'fa-bell'},
        {name: '网络配置', icon: 'fa-wifi'},
        {name: '存储管理', icon: 'fa-hdd-o'},
        {name: '任务调度', icon: 'fa-calendar-check-o'},
        {name: '消息中心', icon: 'fa-envelope'},
        {name: '报表分析', icon: 'fa-bar-chart'},
        {name: '帮助中心', icon: 'fa-question-circle'},
        {name: '服务器管理', icon: 'fa-server'},
        {name: '代码仓库', icon: 'fa-code'},
        {name: '项目管理', icon: 'fa-tasks'},
        {name: '团队管理', icon: 'fa-users'},
        {name: '密钥管理', icon: 'fa-key'},
        {name: '流量分析', icon: 'fa-area-chart'},
        {name: '访问控制', icon: 'fa-ban'},
        {name: '风险检测', icon: 'fa-exclamation-triangle'},
        {name: '国际化设置', icon: 'fa-language'},
        {name: '资源下载', icon: 'fa-download'},
        {name: '文件上传', icon: 'fa-upload'},
        {name: '定时任务', icon: 'fa-clock-o'},
        {name: '数据地图', icon: 'fa-map'},
        {name: '文档中心', icon: 'fa-book'},
        {name: '收藏夹', icon: 'fa-star'},
        {name: '邮件系统', icon: 'fa-envelope-o'},
        {name: '即时通讯', icon: 'fa-comments'},
        {name: '视频会议', icon: 'fa-video-camera'},
        {name: '语音通话', icon: 'fa-phone'},
        {name: '数据同步', icon: 'fa-exchange'},
        {name: '缓存清理', icon: 'fa-trash'},
        {name: '病毒扫描', icon: 'fa-bug'},
        {name: '防火墙', icon: 'fa-shield'},
        {name: '负载均衡', icon: 'fa-balance-scale'},
        {name: '容器管理', icon: 'fa-cubes'},
        {name: '虚拟机', icon: 'fa-desktop'},
        {name: '云存储', icon: 'fa-cloud'},
        {name: 'CDN加速', icon: 'fa-bolt'},
        {name: 'DNS配置', icon: 'fa-sitemap'},
        {name: 'SSL证书', icon: 'fa-lock'},
        {name: 'API文档', icon: 'fa-file-code-o'},
        {name: '错误跟踪', icon: 'fa-bug'},
        {name: '性能分析', icon: 'fa-tachometer'},
        {name: '代码审查', icon: 'fa-search'}
    ];

    // 扩展到300个图标（通过组合基础图标+功能前缀）
    function generate300Icons() {
        const prefixes = [
            '用户', '系统', '数据', '安全', '网络', '存储', '应用',
            '服务', '设备', '终端', '日志', '监控', '分析', '报表',
            '配置', '管理', '运维', '开发', '测试', '生产', '备份',
            '恢复', '同步', '迁移', '部署', '发布', '更新', '升级',
            '降级', '回滚', '审计', '统计', '查询', '过滤', '导出',
            '导入', '打印', '分享', '协作', '权限', '角色', '部门'
        ];

        const icons = [...baseIcons];
        let currentLength = baseIcons.length;

        // 循环生成直到达到300个
        while (currentLength < 300) {
            // 随机组合前缀和基础图标
            const randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)];
            const randomBase = baseIcons[Math.floor(Math.random() * baseIcons.length)];

            // 避免重复名称
            const newName = `${randomPrefix}${randomBase.name}`;
            if (!icons.some(icon => icon.name === newName)) {
                icons.push({
                    name: newName,
                    icon: randomBase.icon // 复用基础图标
                });
                currentLength++;
            }
        }

        return icons;
    }

    // 生成所有图标
    const allIcons = generate300Icons();
    const iconGrid = document.getElementById('iconGrid');
    const iconCountEl = document.getElementById('iconCount');
    const visibleCountEl = document.getElementById('visibleCount');
    const copyToast = document.getElementById('copyToast');

    // 初始化图标网格
    function renderIcons(iconsToRender = allIcons) {
        // 清空网格
        iconGrid.innerHTML = '';

        // 渲染图标
        iconsToRender.forEach(icon => {
            // 随机分配颜色（也可根据需要固定颜色）
            const color = colorPool[Math.floor(Math.random() * colorPool.length)];

            const iconCard = document.createElement('div');
            iconCard.className = 'icon-card';
            iconCard.dataset.name = icon.name;
            iconCard.dataset.icon = icon.icon;
            iconCard.dataset.color = color;

            iconCard.innerHTML = `
          <div class="icon-container bg-${color}/10 text-${color}">
            <i class="fa ${icon.icon}"></i>
          </div>
          <span class="font-medium text-center">${icon.name}</span>
          <div class="text-xs text-gray-500 mt-1">${icon.icon}</div>
        `;

            // 点击复制功能
            iconCard.addEventListener('click', () => {
                const html = `
<div class="icon-card">
  <div class="icon-container bg-${color}/10 text-${color}">
    <i class="fa ${icon.icon}"></i>
  </div>
  <span class="font-medium">${icon.name}</span>
  <div class="text-xs text-gray-500 mt-2">${icon.icon}</div>
</div>
          `.trim();

                navigator.clipboard.writeText(html).then(() => {
                    // 显示复制成功提示
                    copyToast.style.opacity = '1';
                    setTimeout(() => {
                        copyToast.style.opacity = '0';
                    }, 2000);
                });
            });

            iconGrid.appendChild(iconCard);
        });

        // 更新统计
        iconCountEl.textContent = allIcons.length;
        visibleCountEl.textContent = iconsToRender.length;
    }

    // 初始化页面
    renderIcons();

    // 搜索功能
    document.getElementById('iconSearch').addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase().trim();
        const colorFilter = document.getElementById('colorFilter').value;

        if (!searchTerm && colorFilter === 'all') {
            renderIcons();
            return;
        }

        // 筛选图标
        const filtered = allIcons.filter(icon => {
            const matchesSearch =
                icon.name.toLowerCase().includes(searchTerm) ||
                icon.icon.toLowerCase().includes(searchTerm);

            const matchesColor = colorFilter === 'all' || true; // 颜色筛选在渲染时处理

            return matchesSearch && matchesColor;
        });

        renderIcons(filtered);

        // 高亮搜索结果
        if (searchTerm) {
            document.querySelectorAll('.icon-card').forEach(card => {
                const nameMatch = card.dataset.name.toLowerCase().includes(searchTerm);
                const iconMatch = card.dataset.icon.toLowerCase().includes(searchTerm);

                if (nameMatch || iconMatch) {
                    card.classList.add('icon-search-highlight');
                } else {
                    card.classList.remove('icon-search-highlight');
                }
            });
        }

        // 应用颜色筛选
        if (colorFilter !== 'all') {
            document.querySelectorAll('.icon-card').forEach(card => {
                if (card.dataset.color === colorFilter) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });

            // 更新可见计数
            const visibleCount = document.querySelectorAll(`.icon-card[data-color="${colorFilter}"]`).length;
            visibleCountEl.textContent = visibleCount;
        }
    });

    // 颜色筛选
    document.getElementById('colorFilter').addEventListener('change', (e) => {
        // 触发搜索事件以应用筛选
        document.getElementById('iconSearch').dispatchEvent(new Event('input'));
    });

    // 重置筛选
    document.getElementById('resetFilter').addEventListener('click', () => {
        document.getElementById('iconSearch').value = '';
        document.getElementById('colorFilter').value = 'all';
        renderIcons();
    });
</script>
</body>
</html>