## 属性/Props

### 统计信息

|参数名|描述|类型|默认值|
|---|---|---|---|
|viewCount|预览量|`number` **(必填)**|`-`|
|downloadCount|使用量|`number` **(必填)**|`-`|

### 作者信息

|参数名|描述|类型|默认值|
|---|---|---|---|
|email|邮箱|`string`|`-`|
|avatar_url|头像|`string`|`-`|
|name|名字|`string`|`-`|

### DesignItem

|参数名|描述|类型|默认值|
|---|---|---|---|
|name|资源名|`string` **(必填)**|`-`|
|author|作者信息|`Author[]` **(必填)**|`-`|
|category|资源分类|`string` **(必填)**|`-`|
|cover|封面地址|`string` **(必填)**|`-`|
|desc|资源描述|`string`|`-`|
|detail|详情页图片地址（如PPT会有详情页）|`{images: Array<{ url: string; index: number; _poorUrl?: string }>;}`|`-`|
|products|产品分类|`string[]`|`-`|
|tokens|资源标签|`string[]`|`-`|
|downloadUrl|下载地址|`string`|`-`|
|resourceUrl|资源实际地址，详情地址。如果有会有立即使用按钮点击跳转链接。|`string`|`-`|
|group|设计团队名|`string`|`-`|
|library|资源所属业务|`string`|`-`|
|statistic|统计指标|`Statistic` **(必填)**|`-`|

### DesignCover

|参数名|描述|类型|默认值|
|---|---|---|---|
|resource|资源详情|`DesignItem` **(必填)**|`-`|
|resourceTag|特殊标识，会放在资源 `title` 旁作为作为着重显示|`React.ReactNode`|`-`|
|style|节点样式|`CSSProperties`|`-`|
|coverNode|封面节点|`React.ReactNode`|`-`|
|hasModal|封面图片样式，直接挂在img上|`boolean \| 'ppt'`|`-`|
|className|节点类名|`string \| string[]`|`-`|
|onClick|点击回调|`(item: DesignItem) => void \| Promise<void>`|`-`|
|onUse|点击试用回调|`(item: DesignItem, type?: 'common' \| 'download') => void \| Promise<void>`|`-`|
|onCopy|点击复制按钮回调|`(path: string, item: DesignItem) => Promise<any>`|`-`|
|codeCopy|是否展示复制按钮（如果resourceUrl是以svg结尾默认会有复制）|`boolean`|`-`|

## Demos


~~~jsx
import React from 'react';
import { Tag, Grid } from '@arco-design/web-react';
import DesignCover from '@arco-materials/design-cover';

const { Row, Col } = Grid;
const resourceInfo = {
  author: [
    {
      email: 'wangliqun@xxx.com',
      avatar_url:
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
      name: '王立群',
    },
  ],
  cover:
    'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/pro-cover/d4519f93246c2dce6af679e3adaccd92.png~tplv-uwbnlip3yd-webp.webp',
  desc: 'Arco Design 是由字节跳动 GIP UED 团队 和 架构前端团队联合推出的企业级设计系统。中后台最佳实践官方模板Pro 2. 0正式上线，此版本更新了Arco 官方的中后台典型页面，包含工作台、列表、数据可视化、详情页等20+主要场景页面，设计风格也做了创新升级，React 及Vue 两种前端框架开箱即用。欢迎设计师同学使用新版 Pro 并提出宝贵的建议~',
  details: {
    images: [],
  },
  group: 'Arco设计团队',
  library: 'volc-engine',
  name: 'Arco Design Pro 2.0 设计资源',
  resourceUrl: 'https://www.figma.com/community/file/1065157704393387989',
  statistic: {
    downloadCount: 40,
    linkCount: 0,
    starCount: 0,
    viewCount: 66,
  },
  status: 1,
};

const resourceInfo2 = {
  author: [
    {
      email: 'wangliqun@xxx.com',
      avatar_url:
        'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
      name: '王立群',
    },
  ],
  cover:
    'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/pro-cover/d4519f93246c2dce6af679e3adaccd92.png~tplv-uwbnlip3yd-webp.webp',
  desc: 'Arco Design 是由字节跳动 GIP UED 团队 和 架构前端团队联合推出的企业级设计系统。中后台最佳实践官方模板Pro 2. 0正式上线，此版本更新了Arco 官方的中后台典型页面，包含工作台、列表、数据可视化、详情页等20+主要场景页面，设计风格也做了创新升级，React 及Vue 两种前端框架开箱即用。欢迎设计师同学使用新版 Pro 并提出宝贵的建议~',
  detail: {
    images: new Array(20)
      .fill(
        'http://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/pro-cover/d4519f93246c2dce6af679e3adaccd92.png~tplv-uwbnlip3yd-webp.webp'
      )
      .map((url, index) => ({ url, index })),
  },
  group: 'Arco设计团队',
  library: 'volc-engine',
  products: ['ArcoDesign'],
  tokens: ['PPT模版'],
  name: 'Arco Design Pro 2.0 设计资源',
  resourceUrl: 'https://www.figma.com/community/file/1065157704393387989',
  statistic: {
    downloadCount: 40,
    linkCount: 0,
    starCount: 0,
    viewCount: 66,
  },
  status: 1,
};
export default () => {
  return (
    <Row gutter={32}>
      <Col span={8}>
        <DesignCover
          resource={resourceInfo}
          hasModal
          codeCopy
          resourceTag={<Tag color="arcoblue">ArcoDesign</Tag>}
        />
      </Col>
      <Col span={8}>
        <DesignCover resource={resourceInfo2} />
      </Col>
    </Row>
  );
};

~~~