docs: improve resource page style (#48460)

* docs: improve resource page style

* docs: improve resource page style

* docs: improve resource page style

* Update .dumi/theme/builtins/ResourceCards/index.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>

.dumi/theme/builtins/ResourceCards/index.tsx

@@ -1,39 +1,27 @@
 import React from 'react';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip } from 'antd';
+import { Col, Row, Tooltip, Card, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-
 import useLocale from '../../../hooks/useLocale';
 
-const useStyle = createStyles(({ token, css }) => {
+const { Paragraph } = Typography;
-  const { boxShadowSecondary } = token;
 
-  return {
+const useStyle = createStyles(({ token, css }) => ({
-    card: css`
+  card: css`
       position: relative;
-      display: flex;
+      overflow: hidden;
-      flex-direction: column;
-      height: 100%;
-      color: inherit;
-      list-style: none;
-      border: 1px solid ${token.colorSplit};
-      border-radius: ${token.borderRadiusXS}px;
-      cursor: pointer;
-      transition: box-shadow ${token.motionDurationSlow};
 
-      &:hover {
+      .ant-card-cover {
-        box-shadow: ${boxShadowSecondary};
+        overflow: hidden;
-        color: inherit;
       }
-    `,
+      img {
-    image: css`
+        transition: all ${token.motionDurationSlow} ease-out;
-      width: calc(100% + 2px);
+      }
-      max-width: none;
+
-      height: 184px;
+      &:hover img {
-      margin: -1px -1px 0;
+        transform: scale(1.3);
-      object-fit: cover;
+        `,
-    `,
+  badge: css`
-    badge: css`
       position: absolute;
       top: 8px;
       right: 8px;
@@ -42,25 +30,12 @@ const useStyle = createStyles(({ token, css }) => {
       font-size: ${token.fontSizeSM}px;
       line-height: 1;
       background: rgba(0, 0, 0, 0.65);
-      border-radius: ${token.borderRadiusXS}px;
+      border-radius: ${token.borderRadiusLG}px;
       box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
       display: inline-flex;
       column-gap: ${token.paddingXXS}px;
     `,
-    title: css`
+}));
-      margin: ${token.margin}px ${token.marginMD}px ${token.marginXS}px;
-      opacity: 0.85;
-      font-size: ${token.fontSizeXL}px;
-      line-height: 28px;
-    `,
-    description: css`
-      margin: 0 ${token.marginMD}px ${token.marginMD}px;
-      opacity: 0.65;
-      font-size: ${token.fontSizeXL}px;
-      line-height: 22px;
-    `,
-  };
-});
 
 export type Resource = {
   title: string;
@@ -91,38 +66,33 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
   const { styles } = useStyle();
   const [locale] = useLocale(locales);
 
-  const { title: titleStr, description, cover, src, official } = resource;
+  const { title, description, cover, src, official } = resource;
 
-  let coverColor: string | null = null;
+  const badge = official ? (
-  let title: string = titleStr;
+    <div className={styles.badge}>{locale.official}</div>
-  const titleMatch = titleStr.match(/(.*)(#[\dA-Fa-f]{6})/);
+  ) : (
-  if (titleMatch) {
+    <Tooltip title={locale.thirdPartDesc}>
-    title = titleMatch[1].trim();
+      <div className={styles.badge}>
-    // eslint-disable-next-line prefer-destructuring
+        <ExclamationCircleOutlined />
-    coverColor = titleMatch[2];
+        {locale.thirdPart}
-  }
+      </div>
+    </Tooltip>
+  );
 
   return (
-    <Col xs={24} sm={12} md={8} lg={6} style={{ padding: 12 }}>
+    <Col xs={24} sm={12} md={8} lg={6}>
       <a className={styles.card} target="_blank" href={src} rel="noreferrer">
-        <img
+        <Card hoverable className={styles.card} cover={<img src={cover} alt={title} />}>
-          className={styles.image}
+          <Card.Meta
-          src={cover}
+            title={title}
-          alt={title}
+            description={
-          style={coverColor ? { backgroundColor: coverColor } : {}}
+              <Paragraph style={{ marginBottom: 0 }} ellipsis={{ rows: 1 }} title={description}>
-        />
+                {description}
-        {official ? (
+              </Paragraph>
-          <div className={styles.badge}>{locale.official}</div>
+            }
-        ) : (
+          />
-          <Tooltip title={locale.thirdPartDesc}>
+          {badge}
-            <div className={styles.badge}>
+        </Card>
-              <ExclamationCircleOutlined />
-              {locale.thirdPart}
-            </div>
-          </Tooltip>
-        )}
-        <p className={styles?.title}>{title}</p>
-        <p className={styles.description}>{description}</p>
       </a>
     </Col>
   );
@@ -133,7 +103,7 @@ export type ResourceCardsProps = {
 };
 
 const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => (
-  <Row style={{ margin: '-12px -12px 0 -12px' }}>
+  <Row gutter={[24, 24]}>
     {resources.map((item) => (
       <ResourceCard resource={item} key={item?.title} />
     ))}