feat: add download icon & link (#72)

* feat: add download icon & link

* feat: change icon theme

* feat: fixed layout

* feat: fixed card size

src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.html

@@ -1 +1,13 @@
-<nz-result [nzIcon]="'smile-twotone'" [nzTitle]="'即将发布，敬请期待'"> <div nz-result-extra></div> </nz-result>
+<section class="w-full pt-1/3 flex justify-center h-40 py-20">
+  <div *ngFor="let item of resourceInfo" class="border mx-8 h-48 flex flex-col justify-center items-center">
+    <a [href]="item.link">
+      <span class="card text-6xl flex items-center justify-center">
+        <i nz-icon class="relative" [nzType]="item.icon" nzTheme="fill"></i>
+        <i nz-icon class="absolute" nzType="download" nzTheme="outline"></i>
+      </span>
+    </a>
+    <span class="my-4 text-lg">
+      {{ item.name }}
+    </span>
+  </div>
+</section>

src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.scss

@@ -0,0 +1,27 @@
+.card {
+    width: 160px;
+    height: 160px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    border-radius: 4px;
+    cursor: pointer;
+    color: #00785a;
+    i {
+        &.relative {
+            transition: all 0.3s ease;
+            z-index: 10;
+            opacity: 1;
+        }
+        &.absolute {
+            opacity: 0;
+        }
+        
+    }
+    &:hover {
+        i.relative {
+            opacity: 0;
+        }
+        i.absolute {
+            opacity: 1;
+        }
+    }
+}

src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.ts

@@ -3,13 +3,75 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'eo-page-feature-preview',
   templateUrl: './page-feature-preview.component.html',
-  styleUrls: ['./page-feature-preview.component.scss']
+  styleUrls: ['./page-feature-preview.component.scss'],
 })
 export class PageFeaturePreviewComponent implements OnInit {
+  resourceInfo = [
+    {
+      id: 'win',
+      name: 'Windows 客户端',
+      icon: 'windows',
+      keyword: 'Setup',
+      suffix: 'exe',
+      link: '',
+    },
+    {
+      id: 'mac',
+      name: 'macOS(Intel) 客户端',
+      icon: 'apple',
+      suffix: 'dmg',
+      link: '',
+    },
+    {
+      id: 'mac',
+      name: 'macOS(M1) 客户端',
+      icon: 'apple',
+      suffix: 'arm64.dmg',
+      link: '',
+    },
+  ];
 
-  constructor() { }
-
-  ngOnInit(): void {
+  constructor() {
+    this.getInstaller();
   }
 
+  ngOnInit(): void {}
+
+  private findLinkInSingleAssets(assets, item) {
+    let result = '';
+    const assetIndex = assets.findIndex(
+      (asset) =>
+        new RegExp(`${item.suffix}$`, 'g').test(asset.browser_download_url) &&
+        (!item.keyword || asset.browser_download_url.includes(item.keyword))
+    );
+    if (assetIndex === -1) {
+      return result;
+    }
+    result = assets[assetIndex].browser_download_url;
+    assets.splice(assetIndex, 1);
+    return result;
+  }
+
+  private findLink(allAssets, item) {
+    let result = '';
+    allAssets.some((assets) => {
+      result = this.findLinkInSingleAssets(assets, item);
+      return result;
+    });
+    return result;
+  }
+  getInstaller() {
+    fetch('https://api.github.com/repos/eolinker/eoapi/releases')
+      .then((response) => response.json())
+      .then((data) => {
+        [...this.resourceInfo]
+          .sort((a1, a2) => a2.suffix.length - a1.suffix.length)
+          .forEach((item) => {
+            item.link = this.findLink(
+              data.map((val) => val.assets),
+              item
+            );
+          });
+      });
+  }
 }