feat(site): redesign component overview page with SVG card grid

Replace flat button list with a responsive card grid. Each component
gets a clickable card showing its SVG illustration with the name below.

Author: wangdicoder

site/src/containers/components/component-overview.scss

@@ -1,31 +1,54 @@
 .component-overview {
-  // &__btn {
-  //   border: 1px solid #f4f5f7;
-  //   margin: 0 20px 20px 0;
-  //   display: flex;
-  //   flex-direction: column;
-  //   cursor: pointer;
-  //   transition: all 350ms;
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    margin-bottom: 16px;
+  }
+
+  &__grid > .ty-card + .ty-card {
+    margin-top: 0;
+  }
 
-  //   & + & {
-  //     margin-left: 0;
-  //   }
+  &__card {
+    cursor: pointer;
+    border-radius: 12px;
+    overflow: hidden;
+    padding: 0;
+    transition: all 0.3s;
 
-  //   &:hover {
-  //     box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px -8px, rgba(0, 0, 0, 0.05) 0px 9px 28px 0px,
-  //       rgba(0, 0, 0, 0.03) 0px 12px 48px 16px;
-  //   }
-  // }
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
 
-  // &__btn-title {
-  //   padding: 10px 12px;
-  //   border-bottom: 1px solid #f4f5f7;
-  // }
-  &__btn {
-    margin: 0 10px 10px 0;
+  &__card-img {
+    height: 140px;
+    background: #f4f5f7;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
 
-    & + & {
-      margin-left: 0;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
   }
+
+  &__card-placeholder {
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    background: #e5e7eb;
+  }
+
+  &__card-name {
+    padding: 12px 16px;
+    text-align: center;
+    font-size: 14px;
+    color: var(--ty-color-text, #1f2937);
+    border-top: 1px solid var(--ty-color-border, #e5e7eb);
+  }
 }

site/src/containers/components/overview.tsx

@@ -1,10 +1,24 @@
 import React, { useMemo } from 'react';
 import './component-overview.scss';
 import { useNavigate } from 'react-router-dom';
-import { Row, Tag, Button } from '../../../../components';
+import { Card, Tag } from '../../../../components';
 import { getComponentMenu } from '../../routers';
 import { useLocaleContext } from '../../context/locale-context';
 
+const svgCache: Record<string, string> = {};
+
+function getSvgSrc(route: string): string | undefined {
+  if (svgCache[route] !== undefined) return svgCache[route] || undefined;
+  try {
+    const src = require(`../../assets/icon/${route}.svg`);
+    svgCache[route] = src;
+    return src;
+  } catch {
+    svgCache[route] = '';
+    return undefined;
+  }
+}
+
 const ComponentOverview = () => {
   const navigate = useNavigate();
   const { siteLocale: s } = useLocaleContext();
@@ -13,25 +27,37 @@ const ComponentOverview = () => {
     res += i.children!.length;
     return res;
   }, 0);
+
   return (
     <div className="component-overview">
       <h1 className="markdown__heading-1">{s.overview.title}</h1>
       <p className="markdown__p">{s.overview.desc(numOfComps)}</p>
       {componentMenu.map((router) => (
-        <div key={router.title}>
+        <div key={router.title} className="component-overview__category">
           <h3 className="markdown__heading-3">
             {router.title} <Tag>{router.children?.length}</Tag>
           </h3>
-          <Row gutter={24} gutterSide>
-            {router.children!.map((item) => (
-              <Button
-                className="component-overview__btn"
-                key={item.route}
-                onClick={() => navigate(`/components/${item.route!}`)}>
-                {item.title}
-              </Button>
-            ))}
-          </Row>
+          <div className="component-overview__grid">
+            {router.children!.map((item) => {
+              const svgSrc = getSvgSrc(item.route!);
+              return (
+                <Card
+                  className="component-overview__card"
+                  key={item.route}
+                  hoverable
+                  onClick={() => navigate(`/components/${item.route!}`)}>
+                  <div className="component-overview__card-img">
+                    {svgSrc ? (
+                      <img src={svgSrc} alt={item.title} />
+                    ) : (
+                      <div className="component-overview__card-placeholder" />
+                    )}
+                  </div>
+                  <div className="component-overview__card-name">{item.title}</div>
+                </Card>
+              );
+            })}
+          </div>
         </div>
       ))}
     </div>