feat(74): Local icon upload

src/components/create-web/index.component.html

@@ -3,6 +3,7 @@
   [nzTitle]="detail ? '编辑' : '新增'"
   (nzOnCancel)="handleCancel()"
   (nzOnOk)="handleOk()"
+  [nzOkLoading]="uploading"
 >
   <ng-container *nzModalContent>
     <form nz-form [formGroup]="validateForm">
@@ -23,13 +24,28 @@
       <nz-form-item>
         <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
         <nz-form-control [nzSpan]="20">
-          <nz-input-group [nzPrefix]="prefixIcon">
+          <nz-input-group [nzPrefix]="prefixIcon" [nzSuffix]="suffixIconSearch">
             <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onIconBlur($event)" />
           </nz-input-group>
 
           <ng-template #prefixIcon>
             <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
           </ng-template>
+          <ng-template #suffixIconSearch>
+            <i nz-icon nzType="loading" nzTheme="outline" *ngIf="uploading; else loading"></i>
+            <ng-template #loading>
+              <label id="file">
+                <i nz-icon nzType="upload" nzTheme="outline" class="cursor-pointer"></i>
+                <input
+                  type="file"
+                  name="file"
+                  (change)="handleUploadIcon($event)"
+                  accept="image/*"
+                  class="file-upload"
+                >
+              </label>
+            </ng-template>
+          </ng-template>
         </nz-form-control>
       </nz-form-item>
 

src/components/create-web/index.component.scss

+.file-upload {
+  display: none !important;
+}

src/components/create-web/index.component.ts

@@ -5,7 +5,10 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 import { getLogoUrl } from '../../utils'
 import { FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { ITagProp, INavFourProp } from '../../types'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzNotificationService } from 'ng-zorro-antd/notification'
 import * as __tag from '../../../data/tag.json'
+import { createFile } from '../../services'
 
 const tagMap: ITagProp = (__tag as any).default
 const tagKeys = Object.keys(tagMap)
@@ -26,9 +29,12 @@ export class CreateWebComponent implements OnInit {
   urlArr = []
   tags = tagKeys
   tagMap = tagMap
+  uploading = false
 
   constructor(
     private fb: FormBuilder,
+    private message: NzMessageService,
+    private notification: NzNotificationService,
   ) {}
 
   ngOnInit() {
@@ -90,6 +96,45 @@ export class CreateWebComponent implements OnInit {
     this.urlArr.pop()
   }
 
+  handleUploadIcon(e) {
+    const that = this
+    const { files } = e.target
+    if (files.length <= 0) return;
+    const file = files[0]
+    const suffix = file.type.split('/').pop()
+
+    if (!file.type.startsWith('image')) {
+      return this.message.error('请不要上传非法图片')
+    }
+
+    const fileReader = new FileReader()
+    fileReader.readAsDataURL(file)
+    fileReader.onload = function() {
+      that.uploading = true
+      that.iconUrl = this.result as string
+      const url = (this.result as string).split(',')[1]
+      const path = `nav-${Date.now()}.${suffix}`
+
+      createFile({
+        branch: 'image',
+        message: 'create image',
+        content: url,
+        isEncode: false,
+        path
+      }).then(() => {
+        that.validateForm.get('icon')!.setValue(path)
+        that.message.success('上传成功')
+      }).catch(res => {
+        that.notification.error(
+          `错误: ${res?.response?.status ?? 401}`,
+          '上传失败，请重试！'
+        )
+      }).finally(() => {
+        that.uploading = false
+      })
+    }
+  }
+
   handleCancel() {
     this.onCancel.emit()
   }

src/components/logo/logo.component.html

 <img
-  *ngIf="src && !hasError; else noSrc"
-  [src]="src"
+  *ngIf="url && !hasError; else noSrc"
+  [src]="url"
   class="icon dark-border-color"
   [ngStyle]="{ width: (size || 35) + 'px', height: (size || 35) + 'px' }"
 >

src/components/logo/logo.component.ts

 import { Component, Input } from '@angular/core'
 import { isValidImg } from '../../utils'
+import { authorName, branchName } from '../../services'
 
 @Component({
   selector: 'app-logo',
@@ -14,12 +15,21 @@ export class LogoComponent {
 
   hasError = true
   color = '#1890ff'
+  url: string
 
   constructor() { }
 
+  ngOnInit() {
+    if (this.src?.startsWith('nav-')) {
+      this.url = `https://raw.sevencdn.com/${authorName}/${branchName}/image/${this.src}`
+    } else {
+      this.url = this.src
+    }
+  }
+
   ngAfterViewInit() {
     setTimeout(async() => {
-      const isValid = await isValidImg(this.src)
+      const isValid = await isValidImg(this.url)
       if (isValid) {
         this.hasError = false
       }

src/services/index.ts

@@ -6,19 +6,12 @@ import { encode } from 'js-base64'
 import { getToken } from '../utils/user'
 
 const { gitRepoUrl } = config
+const s = gitRepoUrl.split('/')
 
-let authorName = ''
-let branchName = ''
+export const authorName = s[s.length - 2]
+export const branchName = s[s.length - 1]
 const token = getToken()
 
-try {
-  const { pathname } = new URL(gitRepoUrl)  
-  const p = pathname.split('/')
-  authorName = p[1]
-  branchName = p[2]
-} catch {}
-
-
 // 验证Token
 export function verifyToken(token: string) {
   return http.get(`/users/${authorName}`, {
@@ -43,10 +36,11 @@ type Iupdate = {
   message: string
   content: string
   path: string
+  branch?: string
   isEncode?: boolean
 }
 export async function updateFileContent(
-  { message, content, path, isEncode = true }: Iupdate,
+  { message, content, path, branch, isEncode = true }: Iupdate,
   authToken?: string
 ) {
   const _token = `${authToken ? authToken : token}`.trim()
@@ -54,6 +48,7 @@ export async function updateFileContent(
 
   return http.put(`/repos/${authorName}/${branchName}/contents/${path}`, {
     message: `rebot(CI): ${message}`,
+    branch,
     content: isEncode ? encode(content) : content,
     sha: fileInfo.data.sha
   }, {
@@ -62,3 +57,20 @@ export async function updateFileContent(
     }
   })
 }
+
+export async function createFile(
+  { message, content, path, branch, isEncode = true }: Iupdate,
+  authToken?: string
+) {
+  const _token = `${authToken ? authToken : token}`.trim()
+
+  return http.put(`/repos/${authorName}/${branchName}/contents/${path}`, {
+    message: `rebot(CI): ${message}`,
+    branch,
+    content: isEncode ? encode(content) : content,
+  }, {
+    headers: {
+      Authorization: `token ${_token}`
+    }
+  })
+}