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>
ant-design · Apr 16, 2024 · e7d685d · e7d685d
1 parent cd90120
commit e7d685d
Showing 1 changed file with 41 additions and 71 deletions.
diff --git a/.dumi/theme/builtins/ResourceCards/index.tsx b/.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 { boxShadowSecondary } = token;
+const { Paragraph } = Typography;
 
-  return {
-    card: css`
+const useStyle = createStyles(({ token, css }) => ({
+  card: css`
       position: relative;
-      display: flex;
-      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};
+      overflow: hidden;
 
-      &:hover {
-        box-shadow: ${boxShadowSecondary};
-        color: inherit;
+      .ant-card-cover {
+        overflow: hidden;
       }
-    `,
-    image: css`
-      width: calc(100% + 2px);
-      max-width: none;
-      height: 184px;
-      margin: -1px -1px 0;
-      object-fit: cover;
-    `,
-    badge: css`
+      img {
+        transition: all ${token.motionDurationSlow} ease-out;
+      }
+
+      &:hover img {
+        transform: scale(1.3);
+        `,
+  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;
-  let title: string = titleStr;
-  const titleMatch = titleStr.match(/(.*)(#[\dA-Fa-f]{6})/);
-  if (titleMatch) {
-    title = titleMatch[1].trim();
-    // eslint-disable-next-line prefer-destructuring
-    coverColor = titleMatch[2];
-  }
+  const badge = official ? (
+    <div className={styles.badge}>{locale.official}</div>
+  ) : (
+    <Tooltip title={locale.thirdPartDesc}>
+      <div className={styles.badge}>
+        <ExclamationCircleOutlined />
+        {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
-          className={styles.image}
-          src={cover}
-          alt={title}
-          style={coverColor ? { backgroundColor: coverColor } : {}}
-        />
-        {official ? (
-          <div className={styles.badge}>{locale.official}</div>
-        ) : (
-          <Tooltip title={locale.thirdPartDesc}>
-            <div className={styles.badge}>
-              <ExclamationCircleOutlined />
-              {locale.thirdPart}
-            </div>
-          </Tooltip>
-        )}
-        <p className={styles?.title}>{title}</p>
-        <p className={styles.description}>{description}</p>
+        <Card hoverable className={styles.card} cover={<img src={cover} alt={title} />}>
+          <Card.Meta
+            title={title}
+            description={
+              <Paragraph style={{ marginBottom: 0 }} ellipsis={{ rows: 1 }} title={description}>
+                {description}
+              </Paragraph>
+            }
+          />
+          {badge}
+        </Card>
       </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} />
     ))}