💄 style: 优化组件样式

arvinxx · Feb 27, 2022 · 0005421 · 0005421
1 parent 1e4be5f
commit 0005421
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 92 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 → ...set-gallery/src/components/AssetCard.less b/packages/asset-gallery/src/style.less → ...set-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
@@ -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
@@ -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