From 00054214e596617c25c103f8af8594a141463d10 Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Sun, 27 Feb 2022 18:23:50 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20style:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/asset-gallery/package.json           |  2 +-
 packages/asset-gallery/src/AssetGallery.less  | 18 ++++++
 packages/asset-gallery/src/AssetGallery.tsx   |  3 +-
 .../src/components/ActionButton.tsx           |  8 ++-
 .../{style.less => components/AssetCard.less} | 39 ++++--------
 .../src/components/AssetCard.tsx              | 21 ++++---
 .../__snapshots__/AssetCard.test.tsx.snap     | 58 +++++++++++-------
 .../tests/__snapshots__/index.test.tsx.snap   | 60 +++++++++----------
 8 files changed, 117 insertions(+), 92 deletions(-)
 create mode 100644 packages/asset-gallery/src/AssetGallery.less
 rename packages/asset-gallery/src/{style.less => components/AssetCard.less} (66%)

diff --git a/packages/asset-gallery/package.json b/packages/asset-gallery/package.json
index 288809cd..d674e1d9 100644
--- a/packages/asset-gallery/package.json
+++ b/packages/asset-gallery/package.json
@@ -14,7 +14,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "father-build && yarn webpack",
+    "build": "father-build && pnpm run webpack",
     "webpack": "webpack",
     "test": "jest",
     "test:update": "jest -u",
diff --git a/packages/asset-gallery/src/AssetGallery.less b/packages/asset-gallery/src/AssetGallery.less
new file mode 100644
index 00000000..e09316d8
--- /dev/null
+++ b/packages/asset-gallery/src/AssetGallery.less
@@ -0,0 +1,18 @@
+.avx-asset-gallery {
+  &-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+  &-masonry {
+    column-count: 4;
+    column-gap: 0;
+
+    @media (max-width: 400px) {
+      column-count: 2;
+    }
+
+    @media (max-width: 1200px) {
+      column-count: 3;
+    }
+  }
+}
diff --git a/packages/asset-gallery/src/AssetGallery.tsx b/packages/asset-gallery/src/AssetGallery.tsx
index 096d3a69..4b8bcdc0 100644
--- a/packages/asset-gallery/src/AssetGallery.tsx
+++ b/packages/asset-gallery/src/AssetGallery.tsx
@@ -3,13 +3,12 @@ import React from 'react';
 import useMergeValue from 'use-merge-value';
 
 import Layout from './components/Layout';
-
 import AssetCard from './components/AssetCard';
 
 import { YMLToJSON } from './utils/yml';
 import type { AssetGalleryProps } from './types';
 
-import './style.less';
+import './AssetGallery.less';
 
 const AssetGallery: FC<AssetGalleryProps> = ({
   data,
diff --git a/packages/asset-gallery/src/components/ActionButton.tsx b/packages/asset-gallery/src/components/ActionButton.tsx
index 3bfb7096..eb867509 100644
--- a/packages/asset-gallery/src/components/ActionButton.tsx
+++ b/packages/asset-gallery/src/components/ActionButton.tsx
@@ -1,5 +1,7 @@
-import React, { FC } from 'react';
-import { Button, ButtonProps, Tooltip } from 'antd';
+import type { FC } from 'react';
+import React from 'react';
+import type { ButtonProps } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 export interface ActionButtonProps {
   onClick: ButtonProps['onClick'];
@@ -18,7 +20,7 @@ const ActionButton: FC<ActionButtonProps> = ({
     <Tooltip title={tooltip}>
       <Button
         type={'link'}
-        className="avx-asset-gallery-link"
+        className="avx-asset-card-link"
         onClick={onClick}
         icon={icon ? <img src={icon} alt={content} /> : undefined}
       >
diff --git a/packages/asset-gallery/src/style.less b/packages/asset-gallery/src/components/AssetCard.less
similarity index 66%
rename from packages/asset-gallery/src/style.less
rename to packages/asset-gallery/src/components/AssetCard.less
index 94d4249b..2edc7786 100644
--- a/packages/asset-gallery/src/style.less
+++ b/packages/asset-gallery/src/components/AssetCard.less
@@ -1,33 +1,16 @@
-.avx-asset-gallery {
-  &-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-  }
-  &-masonry {
-    column-count: 4;
-    column-gap: 0;
-
-    @media (max-width: 400px) {
-      column-count: 2;
-    }
-
-    @media (max-width: 1200px) {
-      column-count: 3;
-    }
+.avx-asset-card {
+  &-wrapper {
+    box-sizing: border-box;
+    padding: 8px;
+    break-inside: avoid;
   }
 
-  &-card {
+  &-item {
     overflow: hidden;
     border-radius: 4px;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
   }
 
-  &-item {
-    box-sizing: border-box;
-    padding: 8px;
-    break-inside: avoid;
-  }
-
   &-image {
     width: 100%;
     height: 100%;
@@ -37,9 +20,15 @@
       position: relative;
     }
 
+    &-ctn:hover &-type {
+      opacity: 1;
+    }
+
     &-type {
       position: absolute;
       top: 8px;
+      opacity: 0;
+      z-index: 100;
       left: 8px;
       display: flex;
       align-items: center;
@@ -56,8 +45,4 @@
     padding: 4px 0;
     color: rgba(0, 0, 0, 0.45);
   }
-
-  .ant-card-actions {
-    background: #fafafa;
-  }
 }
diff --git a/packages/asset-gallery/src/components/AssetCard.tsx b/packages/asset-gallery/src/components/AssetCard.tsx
index 28035728..ea80ffe4 100644
--- a/packages/asset-gallery/src/components/AssetCard.tsx
+++ b/packages/asset-gallery/src/components/AssetCard.tsx
@@ -11,7 +11,7 @@ import {
   copyPng,
 } from '../utils';
 
-import '../style.less';
+import './AssetCard.less';
 
 import ActionButton from './ActionButton';
 import type { Asset } from '../types';
@@ -45,6 +45,13 @@ const AssetCard: FC<Asset> = ({
             content: 'Sketch',
             tooltip: '复制为 Sketch 组件',
           },
+          {
+            onClick:
+              /* istanbul ignore next */
+              () => copyPng(url),
+            tooltip: '复制为 Png',
+            content: 'Png',
+          },
         ];
 
       case 'img':
@@ -98,21 +105,21 @@ const AssetCard: FC<Asset> = ({
   const noBody = !(title || description);
 
   return (
-    <div className="avx-asset-gallery-item">
+    <div className="avx-asset-card-wrapper">
       <Card
-        className="avx-asset-gallery-card"
+        className="avx-asset-card-item"
         cover={
           <div
-            className="avx-asset-gallery-image-ctn"
+            className="avx-asset-card-image-ctn"
             style={{
               background: dark ? backgroundColor : undefined,
             }}
           >
-            <div className="avx-asset-gallery-image-type">
+            <div className="avx-asset-card-image-type">
               <img src={typeImage()} alt="sketch" width={18} height={18} />
             </div>
             <img
-              className="avx-asset-gallery-image"
+              className="avx-asset-card-image"
               style={{ padding }}
               src={url}
               alt={title}
@@ -158,7 +165,7 @@ const AssetCard: FC<Asset> = ({
                 </Menu>
               }
             >
-              <Button type={'link'} className="avx-asset-gallery-link">
+              <Button type={'link'} className="avx-asset-card-link">
                 <EllipsisOutlined key="ellipsis" />
               </Button>
             </Dropdown>
diff --git a/packages/asset-gallery/src/components/__snapshots__/AssetCard.test.tsx.snap b/packages/asset-gallery/src/components/__snapshots__/AssetCard.test.tsx.snap
index 53387fa7..2c3c451f 100644
--- a/packages/asset-gallery/src/components/__snapshots__/AssetCard.test.tsx.snap
+++ b/packages/asset-gallery/src/components/__snapshots__/AssetCard.test.tsx.snap
@@ -3,19 +3,19 @@
 exports[`AssetCard Sketch 测试 1`] = `
 <div>
   <div
-    class="avx-asset-gallery-item"
+    class="avx-asset-card-wrapper"
   >
     <div
-      class="ant-card avx-asset-gallery-card"
+      class="ant-card avx-asset-card-item"
     >
       <div
         class="ant-card-cover"
       >
         <div
-          class="avx-asset-gallery-image-ctn"
+          class="avx-asset-card-image-ctn"
         >
           <div
-            class="avx-asset-gallery-image-type"
+            class="avx-asset-card-image-type"
           >
             <img
               alt="sketch"
@@ -26,7 +26,7 @@ exports[`AssetCard Sketch 测试 1`] = `
           </div>
           <img
             alt="Sketch 测试"
-            class="avx-asset-gallery-image"
+            class="avx-asset-card-image"
             src="https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg"
             style="padding: 12px;"
           />
@@ -53,11 +53,11 @@ exports[`AssetCard Sketch 测试 1`] = `
         class="ant-card-actions"
       >
         <li
-          style="width: 100%;"
+          style="width: 50%;"
         >
           <span>
             <button
-              class="ant-btn ant-btn-link avx-asset-gallery-link"
+              class="ant-btn ant-btn-link avx-asset-card-link"
               type="button"
             >
               <span>
@@ -66,6 +66,20 @@ exports[`AssetCard Sketch 测试 1`] = `
             </button>
           </span>
         </li>
+        <li
+          style="width: 50%;"
+        >
+          <span>
+            <button
+              class="ant-btn ant-btn-link avx-asset-card-link"
+              type="button"
+            >
+              <span>
+                Png
+              </span>
+            </button>
+          </span>
+        </li>
       </ul>
     </div>
   </div>
@@ -75,19 +89,19 @@ exports[`AssetCard Sketch 测试 1`] = `
 exports[`AssetCard 图片 Png 1`] = `
 <div>
   <div
-    class="avx-asset-gallery-item"
+    class="avx-asset-card-wrapper"
   >
     <div
-      class="ant-card avx-asset-gallery-card"
+      class="ant-card avx-asset-card-item"
     >
       <div
         class="ant-card-cover"
       >
         <div
-          class="avx-asset-gallery-image-ctn"
+          class="avx-asset-card-image-ctn"
         >
           <div
-            class="avx-asset-gallery-image-type"
+            class="avx-asset-card-image-type"
           >
             <img
               alt="sketch"
@@ -98,7 +112,7 @@ exports[`AssetCard 图片 Png 1`] = `
           </div>
           <img
             alt="测试"
-            class="avx-asset-gallery-image"
+            class="avx-asset-card-image"
             src="https://gw.alipayobjects.com/zos/antfincdn/G5sZluNGGA/25c4fe16-7d52-4b32-904e-3eccb4a1ff47.png"
             style="padding: 12px;"
           />
@@ -129,7 +143,7 @@ exports[`AssetCard 图片 Png 1`] = `
         >
           <span>
             <button
-              class="ant-btn ant-btn-link avx-asset-gallery-link"
+              class="ant-btn ant-btn-link avx-asset-card-link"
               type="button"
             >
               <span>
@@ -143,7 +157,7 @@ exports[`AssetCard 图片 Png 1`] = `
         >
           <span>
             <button
-              class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-gallery-link"
+              class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-card-link"
               type="button"
             >
               <span
@@ -177,19 +191,19 @@ exports[`AssetCard 图片 Png 1`] = `
 exports[`AssetCard 图片 Svg 1`] = `
 <div>
   <div
-    class="avx-asset-gallery-item"
+    class="avx-asset-card-wrapper"
   >
     <div
-      class="ant-card avx-asset-gallery-card"
+      class="ant-card avx-asset-card-item"
     >
       <div
         class="ant-card-cover"
       >
         <div
-          class="avx-asset-gallery-image-ctn"
+          class="avx-asset-card-image-ctn"
         >
           <div
-            class="avx-asset-gallery-image-type"
+            class="avx-asset-card-image-type"
           >
             <img
               alt="sketch"
@@ -200,7 +214,7 @@ exports[`AssetCard 图片 Svg 1`] = `
           </div>
           <img
             alt="Svg 测试"
-            class="avx-asset-gallery-image"
+            class="avx-asset-card-image"
             src="https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg"
             style="padding: 12px;"
           />
@@ -231,7 +245,7 @@ exports[`AssetCard 图片 Svg 1`] = `
         >
           <span>
             <button
-              class="ant-btn ant-btn-link avx-asset-gallery-link"
+              class="ant-btn ant-btn-link avx-asset-card-link"
               type="button"
             >
               <span>
@@ -245,7 +259,7 @@ exports[`AssetCard 图片 Svg 1`] = `
         >
           <span>
             <button
-              class="ant-btn ant-btn-link avx-asset-gallery-link"
+              class="ant-btn ant-btn-link avx-asset-card-link"
               type="button"
             >
               <span>
@@ -259,7 +273,7 @@ exports[`AssetCard 图片 Svg 1`] = `
         >
           <span>
             <button
-              class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-gallery-link"
+              class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-card-link"
               type="button"
             >
               <span
diff --git a/packages/asset-gallery/tests/__snapshots__/index.test.tsx.snap b/packages/asset-gallery/tests/__snapshots__/index.test.tsx.snap
index 1b4050cc..fd19adef 100644
--- a/packages/asset-gallery/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/asset-gallery/tests/__snapshots__/index.test.tsx.snap
@@ -89,19 +89,19 @@ exports[`AssetGallery 加载数据 1`] = `
       style="column-count: 4;"
     >
       <div
-        class="avx-asset-gallery-item"
+        class="avx-asset-card-wrapper"
       >
         <div
-          class="ant-card avx-asset-gallery-card"
+          class="ant-card avx-asset-card-item"
         >
           <div
             class="ant-card-cover"
           >
             <div
-              class="avx-asset-gallery-image-ctn"
+              class="avx-asset-card-image-ctn"
             >
               <div
-                class="avx-asset-gallery-image-type"
+                class="avx-asset-card-image-type"
               >
                 <img
                   alt="sketch"
@@ -112,7 +112,7 @@ exports[`AssetGallery 加载数据 1`] = `
               </div>
               <img
                 alt="渐变色 Logo"
-                class="avx-asset-gallery-image"
+                class="avx-asset-card-image"
                 src="https://gw.alipayobjects.com/zos/antfincdn/LFmaI3%26OJh/logo.svg"
                 style="padding: 12px;"
               />
@@ -148,7 +148,7 @@ exports[`AssetGallery 加载数据 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link avx-asset-card-link"
                   type="button"
                 >
                   <span>
@@ -162,7 +162,7 @@ exports[`AssetGallery 加载数据 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link avx-asset-card-link"
                   type="button"
                 >
                   <span>
@@ -176,7 +176,7 @@ exports[`AssetGallery 加载数据 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-card-link"
                   type="button"
                 >
                   <span
@@ -205,20 +205,20 @@ exports[`AssetGallery 加载数据 1`] = `
         </div>
       </div>
       <div
-        class="avx-asset-gallery-item"
+        class="avx-asset-card-wrapper"
       >
         <div
-          class="ant-card avx-asset-gallery-card"
+          class="ant-card avx-asset-card-item"
         >
           <div
             class="ant-card-cover"
           >
             <div
-              class="avx-asset-gallery-image-ctn"
+              class="avx-asset-card-image-ctn"
               style="background: black;"
             >
               <div
-                class="avx-asset-gallery-image-type"
+                class="avx-asset-card-image-type"
               >
                 <img
                   alt="sketch"
@@ -229,7 +229,7 @@ exports[`AssetGallery 加载数据 1`] = `
               </div>
               <img
                 alt="白色 Logo"
-                class="avx-asset-gallery-image"
+                class="avx-asset-card-image"
                 src="https://gw.alipayobjects.com/zos/antfincdn/5qY87lPw9U/white-logo.svg"
                 style="padding: 12px;"
               />
@@ -265,7 +265,7 @@ exports[`AssetGallery 加载数据 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link avx-asset-card-link"
                   type="button"
                 >
                   <span>
@@ -279,7 +279,7 @@ exports[`AssetGallery 加载数据 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link avx-asset-card-link"
                   type="button"
                 >
                   <span>
@@ -293,7 +293,7 @@ exports[`AssetGallery 加载数据 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-card-link"
                   type="button"
                 >
                   <span
@@ -419,19 +419,19 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
       style="column-count: 4;"
     >
       <div
-        class="avx-asset-gallery-item"
+        class="avx-asset-card-wrapper"
       >
         <div
-          class="ant-card avx-asset-gallery-card"
+          class="ant-card avx-asset-card-item"
         >
           <div
             class="ant-card-cover"
           >
             <div
-              class="avx-asset-gallery-image-ctn"
+              class="avx-asset-card-image-ctn"
             >
               <div
-                class="avx-asset-gallery-image-type"
+                class="avx-asset-card-image-type"
               >
                 <img
                   alt="sketch"
@@ -442,7 +442,7 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
               </div>
               <img
                 alt="渐变色 Logo"
-                class="avx-asset-gallery-image"
+                class="avx-asset-card-image"
                 src="https://gw.alipayobjects.com/zos/antfincdn/OuMB9liYZV/tupian%2525201.png"
                 style="padding: 12px;"
               />
@@ -478,7 +478,7 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link avx-asset-card-link"
                   type="button"
                 >
                   <span>
@@ -492,7 +492,7 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-card-link"
                   type="button"
                 >
                   <span
@@ -521,19 +521,19 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
         </div>
       </div>
       <div
-        class="avx-asset-gallery-item"
+        class="avx-asset-card-wrapper"
       >
         <div
-          class="ant-card avx-asset-gallery-card"
+          class="ant-card avx-asset-card-item"
         >
           <div
             class="ant-card-cover"
           >
             <div
-              class="avx-asset-gallery-image-ctn"
+              class="avx-asset-card-image-ctn"
             >
               <div
-                class="avx-asset-gallery-image-type"
+                class="avx-asset-card-image-type"
               >
                 <img
                   alt="sketch"
@@ -544,7 +544,7 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
               </div>
               <img
                 alt="黑色 Logo"
-                class="avx-asset-gallery-image"
+                class="avx-asset-card-image"
                 src="https://gw.alipayobjects.com/zos/antfincdn/5vmPNr6Qqz/tupian%2525202.png"
                 style="padding: 12px;"
               />
@@ -580,7 +580,7 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link avx-asset-card-link"
                   type="button"
                 >
                   <span>
@@ -594,7 +594,7 @@ exports[`AssetGallery 图片源为 PNG 1`] = `
             >
               <span>
                 <button
-                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-gallery-link"
+                  class="ant-btn ant-btn-link ant-dropdown-trigger avx-asset-card-link"
                   type="button"
                 >
                   <span