<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · CardList（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="CardList.css" />
  <style>
    body { margin: 0; padding: 24px; background: var(--kole-color-page-bg); }
    .kole-demo-toolbar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
    .kole-demo-toolbar label { font-size: 13px; color: var(--kole-color-text-body); }
    .kole-demo-toolbar select { border: 1px solid var(--kole-color-border); border-radius: 6px; padding: 4px 8px; color: var(--kole-color-text-body); }
  </style>
</head>
<body>
  <div class="kole-demo-toolbar">
    <label>列数：</label>
    <select id="cols">
      <option value="2">2 列</option>
      <option value="3" selected>3 列</option>
      <option value="4">4 列</option>
    </select>
  </div>

  <div class="kole-cardlist" id="app"></div>

  <script>
    var DATA = [
      { title: '用户管理', desc: '集中维护组织架构、账号与权限分配。', emoji: '👥', tags: ['账号', '权限'], actions: ['配置', '查看'] },
      { title: '订单中心', desc: '实时追踪订单状态，支持退款与导出。', emoji: '📦', tags: ['交易'], actions: ['详情', '导出'] },
      { title: '数据分析', desc: '多维报表与漏斗分析，驱动业务决策。', emoji: '📊', tags: ['报表', 'BI'], actions: ['打开'] },
      { title: '消息推送', desc: '全渠道触达，支持模板与定时发送。', emoji: '🔔', tags: ['营销'], actions: ['新建', '记录'] },
      { title: '内容库', desc: '统一管理图文、音视频素材资源。', emoji: '🗂️', tags: ['素材'], actions: ['上传'] },
      { title: '系统设置', desc: '基础参数、日志与安全策略配置。', emoji: '⚙️', tags: ['配置'], actions: ['设置'] }
    ];

    function render() {
      var cols = document.getElementById('cols').value;
      var root = document.getElementById('app');
      root.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
      root.innerHTML = DATA.map(function (it) {
        var tags = (it.tags || []).map(function (t) {
          return '<span class="kole-card-tag">' + t + '</span>';
        }).join('');
        var actions = (it.actions || []).map(function (a) {
          return '<button data-title="' + it.title + '">' + a + '</button>';
        }).join('');
        return '' +
          '<div class="kole-cardlist-item">' +
            '<div class="kole-card-cover">' + (it.emoji || '📄') + '</div>' +
            '<div class="kole-card-body">' +
              '<div class="kole-card-title">' + it.title + '</div>' +
              '<div class="kole-card-desc">' + it.desc + '</div>' +
              (tags ? '<div class="kole-card-tags">' + tags + '</div>' : '') +
            '</div>' +
            (actions ? '<div class="kole-card-actions">' + actions + '</div>' : '') +
          '</div>';
      }).join('');

      root.querySelectorAll('.kole-card-actions button').forEach(function (btn) {
        btn.addEventListener('click', function () {
          alert(btn.dataset.title + ' · ' + btn.textContent);
        });
      });
    }

    document.getElementById('cols').addEventListener('change', render);
    render();
  </script>
</body>
</html>
