@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/IconGridPreview.jsx

@@ -0,0 +1,277 @@
+/**
+ * IconGridPreview — 图标库网格预览组件
+ *
+ * 按分类折叠展示所有图标，每个图标一个卡片，下方显示名称。
+ * 点击图标可选择复制「组件代码」或「SVG 代码」。
+ */
+
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, Check } from 'lucide-react';
+import { ICON_CATEGORIES, ICON_MAP } from './icons/icon-data';
+import Icon from './Icon';
+import Input from './Input';
+
+function normalizeIconEntry(entry) {
+  if (Array.isArray(entry)) {
+    return {
+      viewBox: '0 0 24 24',
+      defs: [],
+      shapes: entry,
+      contentTransform: '',
+    };
+  }
+
+  return {
+    viewBox: entry?.viewBox || '0 0 24 24',
+    defs: entry?.defs || [],
+    shapes: entry?.shapes || [],
+    contentTransform: entry?.contentTransform || '',
+  };
+}
+
+function buildSvgString(name) {
+  const entry = ICON_MAP[name];
+  if (!entry) return '';
+
+  const { viewBox, defs, shapes, contentTransform } = normalizeIconEntry(entry);
+  const defsBlock = defs.length
+    ? [
+        '  <defs>',
+        ...defs.map((def) => {
+          if (def.type !== 'linearGradient') return '';
+
+          const stops = def.stops.map((stop) => {
+            let attrs = `offset="${stop.offset}" stop-color="${stop.stopColor}"`;
+            if (stop.stopOpacity !== undefined) attrs += ` stop-opacity="${stop.stopOpacity}"`;
+            return `      <stop ${attrs}/>`;
+          }).join('\n');
+
+          return `    <linearGradient id="${def.id}" x1="${def.x1}" y1="${def.y1}" x2="${def.x2}" y2="${def.y2}" gradientUnits="${def.gradientUnits}">\n${stops}\n    </linearGradient>`;
+        }).filter(Boolean),
+        '  </defs>',
+      ].join('\n')
+    : '';
+
+  const inner = shapes.map((shape) => {
+    if (shape.type === 'ellipse') {
+      const transformAttr = shape.transform ? ` transform="${shape.transform}"` : '';
+      return `  <ellipse cx="${shape.cx}" cy="${shape.cy}" rx="${shape.rx}" ry="${shape.ry}" fill="${shape.fill || 'currentColor'}"${transformAttr}/>`;
+    }
+
+    if (shape.type === 'rect') {
+      let attrs = `x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}"`;
+      if (shape.rx !== undefined) attrs += ` rx="${shape.rx}"`;
+      if (shape.ry !== undefined) attrs += ` ry="${shape.ry}"`;
+      attrs += ` fill="${shape.fill || 'currentColor'}"`;
+      if (shape.stroke) attrs += ` stroke="${shape.strokeColor || 'currentColor'}" stroke-width="${shape.strokeWidth || '2'}"`;
+      if (shape.transform) attrs += ` transform="${shape.transform}"`;
+      return `  <rect ${attrs}/>`;
+    }
+
+    if (shape.stroke) {
+      let attrs = `d="${shape.d}" fill="none" stroke="${shape.strokeColor || 'currentColor'}" stroke-width="${shape.strokeWidth || '2'}" stroke-linecap="${shape.strokeLinecap || 'round'}" stroke-linejoin="${shape.strokeLinejoin || 'round'}"`;
+      if (shape.transform) attrs += ` transform="${shape.transform}"`;
+      return `  <path ${attrs}/>`;
+    }
+
+    let attrs = `d="${shape.d}" fill="${shape.fill || 'currentColor'}"`;
+    if (shape.fillRule) attrs += ` fill-rule="${shape.fillRule}"`;
+    if (shape.clipRule) attrs += ` clip-rule="${shape.clipRule}"`;
+    if (shape.transform) attrs += ` transform="${shape.transform}"`;
+    return `  <path ${attrs}/>`;
+  }).join('\n');
+
+  const body = contentTransform
+    ? `  <g transform="${contentTransform}">\n${inner}\n  </g>`
+    : inner;
+  const blocks = [defsBlock, body].filter(Boolean).join('\n');
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="${viewBox}" preserveAspectRatio="xMidYMid meet" fill="none">\n${blocks}\n</svg>`;
+}
+
+export default function IconGridPreview() {
+  const [collapsed, setCollapsed] = useState({});
+  const [copiedName, setCopiedName] = useState(null);
+  const [copiedType, setCopiedType] = useState(null); // 'jsx' | 'svg'
+  const [searchValue, setSearchValue] = useState('');
+
+  const keyword = searchValue.trim().toLowerCase();
+  const filteredCategories = useMemo(() => {
+    if (!keyword) return ICON_CATEGORIES;
+
+    return ICON_CATEGORIES.map((category) => ({
+      ...category,
+      icons: (category.icons || []).filter((icon) => {
+        const haystacks = [icon.name, icon.label].filter(Boolean).map((text) => String(text).toLowerCase());
+        return haystacks.some((text) => text.includes(keyword));
+      }),
+    })).filter((category) => category.icons.length > 0);
+  }, [keyword]);
+
+  const toggle = (id) =>
+    setCollapsed(prev => ({ ...prev, [id]: !prev[id] }));
+
+  const handleCopy = (name, type) => {
+    const text = type === 'svg'
+      ? buildSvgString(name)
+      : `<Icon name="${name}" />`;
+    navigator.clipboard.writeText(text);
+    setCopiedName(name);
+    setCopiedType(type);
+    setTimeout(() => { setCopiedName(null); setCopiedType(null); }, 1500);
+  };
+
+  return (
+    <div style={{ width: '100%', padding: '0', boxSizing: 'border-box' }}>
+      <div style={{ marginBottom: 20, maxWidth: 320 }}>
+        <Input
+          value={searchValue}
+          onChange={(event) => setSearchValue(event.target.value)}
+          allowClear
+          placeholder="搜索 icon 名称"
+          prefix={<Icon name="search-lg-stroked" size="sm" color="#667085" aria-hidden="true" />}
+        />
+      </div>
+
+      {filteredCategories.length === 0 ? (
+        <div
+          style={{
+            display: 'flex',
+            minHeight: 200,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 12,
+            border: '1px dashed rgba(45,66,107,0.12)',
+            background: '#FCFCFD',
+            color: '#98A2B3',
+            fontSize: 13,
+          }}
+        >
+          未找到匹配的 icon 名称
+        </div>
+      ) : filteredCategories.map(cat => {
+        const isCollapsed = keyword ? false : collapsed[cat.id];
+        return (
+          <div key={cat.id} style={{ marginBottom: 20 }}>
+            <button
+              onClick={() => toggle(cat.id)}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 6,
+                background: 'none', border: 'none', cursor: 'pointer',
+                padding: '4px 0', marginBottom: 12, width: '100%',
+              }}
+            >
+              {isCollapsed
+                ? <ChevronRight size={14} style={{ color: '#667085' }} />
+                : <ChevronDown size={14} style={{ color: '#667085' }} />
+              }
+              <span style={{ fontSize: 13, fontWeight: 600, color: '#344054' }}>
+                {cat.label}
+              </span>
+              <span style={{ fontSize: 12, color: '#98A2B3' }}>
+                ({cat.icons.length})
+              </span>
+            </button>
+
+            {!isCollapsed && (
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',
+                gap: 8,
+              }}>
+                {cat.icons.map(ic => {
+                  const isActive = copiedName === ic.name;
+                  const fallbackName = ic.name
+                    .replace(/-stroked$/, '')
+                    .replace(/-/g, ' ');
+                  const displayName = ic.label || fallbackName;
+                  return (
+                    <div
+                      key={ic.name}
+                      title={ic.name}
+                      style={{
+                        display: 'flex', flexDirection: 'column',
+                        alignItems: 'center', justifyContent: 'center',
+                        gap: 6, padding: '12px 4px 8px',
+                        borderRadius: 8,
+                        border: '1px solid rgba(45,66,107,0.06)',
+                        background: isActive ? '#EAFAF6' : '#FFFFFF',
+                        cursor: 'pointer',
+                        transition: 'all 0.15s ease',
+                        position: 'relative',
+                      }}
+                      onMouseEnter={e => {
+                        if (!isActive) e.currentTarget.style.background = '#F9FAFB';
+                        e.currentTarget.style.borderColor = '#E4E7EC';
+                      }}
+                      onMouseLeave={e => {
+                        if (!isActive) e.currentTarget.style.background = '#FFFFFF';
+                        e.currentTarget.style.borderColor = 'rgba(45,66,107,0.06)';
+                      }}
+                    >
+                      {isActive ? (
+                        <>
+                          <Check size={18} style={{ color: '#56D3BC' }} />
+                          <span style={{ fontSize: 10, color: '#56D3BC', textAlign: 'center', lineHeight: '13px' }}>
+                            {copiedType === 'svg' ? 'SVG 已复制' : '组件已复制'}
+                          </span>
+                        </>
+                      ) : (
+                        <>
+                          <Icon name={ic.name} size="lg" color="#344054" />
+                          <span style={{
+                            fontSize: 10, color: '#98A2B3',
+                            textAlign: 'center', lineHeight: '13px',
+                            maxWidth: '100%', overflow: 'hidden',
+                            textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                            padding: '0 2px',
+                          }}>
+                            {displayName}
+                          </span>
+                          {/* 悬浮时显示两个复制按钮 */}
+                          <div
+                            className="icon-card-actions"
+                            style={{
+                              position: 'absolute', inset: 0,
+                              display: 'flex', flexDirection: 'column',
+                              alignItems: 'center', justifyContent: 'center',
+                              gap: 4, borderRadius: 8,
+                              background: 'rgba(255,255,255,0.95)',
+                              opacity: 0, transition: 'opacity 0.15s ease',
+                            }}
+                            onMouseEnter={e => { e.currentTarget.style.opacity = '1'; }}
+                            onMouseLeave={e => { e.currentTarget.style.opacity = '0'; }}
+                          >
+                            <button
+                              onClick={(e) => { e.stopPropagation(); handleCopy(ic.name, 'jsx'); }}
+                              style={{
+                                fontSize: 11, color: '#344054', background: '#F2F4F7',
+                                border: 'none', borderRadius: 4, padding: '3px 8px',
+                                cursor: 'pointer', whiteSpace: 'nowrap',
+                              }}
+                            >
+                              复制组件
+                            </button>
+                            <button
+                              onClick={(e) => { e.stopPropagation(); handleCopy(ic.name, 'svg'); }}
+                              style={{
+                                fontSize: 11, color: '#344054', background: '#F2F4F7',
+                                border: 'none', borderRadius: 4, padding: '3px 8px',
+                                cursor: 'pointer', whiteSpace: 'nowrap',
+                              }}
+                            >
+                              复制 SVG
+                            </button>
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}