feat: #103

6d07f071 · xjh22222228 · 84616545 · 6d07f071 · 6d07f071 · 6d07f071
7 changed file
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
+blank_issues_enabled: true
+contact_links:
+  - name: Create new issue
+    url: https://issue-helper.vercel.app/
+    about: The issue which is not created via https://issue-helper.vercel.app/ will be closed immediately.
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
@@ -170,9 +170,9 @@
      }
    },
    "@angular/cdk": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.0.tgz",
-      "integrity": "sha512-yFEHtdp0o/xGnYebrU/PQqWVIlB7SaP3cSviq/LTv/h2EINn3PzU/Zhdhg0k0fk09BrKoS+o8AVIddduIdDpYw==",
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.4.tgz",
+      "integrity": "sha512-BcMHRaKZxkpK+dPwmjqktAzWUnywbyHyrORGlF4OMtbE88IvbI8tQ+0xANfBm0cPaAm+na5AlGKyH2ptzedyRQ==",
      "requires": {
        "parse5": "^5.0.0",
        "tslib": "^2.0.0"
@@ -429,9 +429,9 @@
      }
    },
    "@ant-design/colors": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-5.0.1.tgz",
-      "integrity": "sha512-x1TUaRILaqy3zgFNo+kIqOa3eTYPt81H1/3E4dCjDP4Qvk/xaPEizLDFdRUcIx0cWwyu2LklwfyLHWpbYK8v6A==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-5.1.1.tgz",
+      "integrity": "sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==",
      "requires": {
        "@ctrl/tinycolor": "^3.3.1"
      }
@@ -1547,9 +1547,9 @@
      }
    },
    "@ctrl/tinycolor": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.3.3.tgz",
-      "integrity": "sha512-v75yutF4BDMv9weDQVM+K5XEfjiODhugSV729pnoxtBDO61ij2CsDnQa4N4E9xGaH3/FX5ASZjnajljT2F71tA=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
    },
    "@eslint/eslintrc": {
      "version": "0.2.2",
@@ -3095,9 +3095,9 @@
      "dev": true
    },
    "clipboard": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
-      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
+      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
      "requires": {
        "good-listener": "^1.2.2",
        "select": "^1.1.2",
@@ -3946,9 +3946,9 @@
      }
    },
    "date-fns": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
-      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.19.0.tgz",
+      "integrity": "sha512-X3bf2iTPgCAQp9wvjOQytnf5vO5rESYRXlPIVcgSbtT5OTScPcsf9eZU+B/YIkKAtYr5WeCii58BgATrNitlWg=="
    },
    "debug": {
      "version": "4.3.1",
@@ -5811,9 +5811,9 @@
      }
    },
    "hotkeys-js": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.2.tgz",
-      "integrity": "sha512-HZZ9RVNr3nBbs2nW968o4rp3xXSdPjJ4B7GTXE375WwboltDJMsP9mcHfAAv+igsTeVxetr10mEbnoac/1U+oQ=="
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.3.tgz",
+      "integrity": "sha512-rUmoryG4lEAtkjF5tcYaihrVoE86Fdw1BLqO/UiBWOOF56h32a6ax8oV4urBlinVtNNtArLlBq8igGfZf2tQnw=="
    },
    "hpack.js": {
      "version": "2.1.6",
@@ -7654,9 +7654,9 @@
      "dev": true
    },
    "ng-zorro-antd": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/ng-zorro-antd/-/ng-zorro-antd-11.1.0.tgz",
-      "integrity": "sha512-3EMqRRM7Gc4OghfjmKtQxRV1dv0Mao2USNyokAPSxAXDhYVtMz+AJRVwf7bpnjxxzxe7RQU5GChGeNewUNmPBw==",
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/ng-zorro-antd/-/ng-zorro-antd-11.2.0.tgz",
+      "integrity": "sha512-5ovAC7A790wlK2syOw8Q4PjE2rNpzTXpouitLopKwlYoOcMsSY79qv6WTixxNAtcmIrPuPPYuX8BKBelg1gaAQ==",
      "requires": {
        "@angular/cdk": "^11.0.2",
        "@ant-design/icons-angular": "^11.0.1",
@@ -9852,9 +9852,9 @@
      "dev": true
    },
    "qs": {
-      "version": "6.9.4",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
-      "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
+      "version": "6.9.6",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
+      "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
    },
    "querystring": {
      "version": "0.2.0",

--- a/package.json
+++ b/package.json
@@ -28,11 +28,11 @@
    "@angular/platform-browser-dynamic": "~11.0.5",
    "@angular/router": "~11.0.5",
    "axios": "^0.21.1",
-    "clipboard": "^2.0.6",
-    "hotkeys-js": "^3.8.2",
+    "clipboard": "^2.0.8",
+    "hotkeys-js": "^3.8.3",
    "js-base64": "^3.6.0",
-    "ng-zorro-antd": "^11.1.0",
-    "qs": "^6.9.4",
+    "ng-zorro-antd": "^11.2.0",
+    "qs": "^6.9.6",
    "rough-notation": "^0.5.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",

--- a/src/components/create-web/index.component.html
+++ b/src/components/create-web/index.component.html
@@ -34,7 +34,7 @@
          <!-- <nz-form-item>
            <nz-form-label [nzSpan]="8" nzRequired>是否公开</nz-form-label>
            <nz-form-control [nzSpan]="16">
-              <nz-switch formControlName="public"></nz-switch>
+              <nz-switch formControlName="visible"></nz-switch>
            </nz-form-control>
          </nz-form-item> -->
        </div>
@@ -51,7 +51,13 @@
        <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
        <nz-form-control [nzSpan]="20">
          <nz-input-group [nzPrefix]="prefixIcon" [nzSuffix]="suffixIconSearch">
-            <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onIconBlur($event)" />
+            <input
+              formControlName="icon"
+              nz-input
+              placeholder="支持将截图或复制图片粘贴此处上传"
+              (blur)="onIconBlur($event)"
+              (focus)="onIconFocus($event)"
+            />
          </nz-input-group>

          <ng-template #prefixIcon>
@@ -65,7 +71,7 @@
                <input
                  type="file"
                  name="file"
-                  (change)="handleUploadIcon($event)"
+                  (change)="onChangeFile($event)"
                  accept="image/*"
                  class="file-upload"
                >

--- a/src/components/create-web/index.component.ts
+++ b/src/components/create-web/index.component.ts
 // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
 // See https://github.com/xjh22222228/nav

-import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core'
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 import { getLogoUrl, getTextContent } from '../../utils'
 import { FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { ITagProp, INavFourProp } from '../../types'
@@ -17,7 +17,6 @@ const tagKeys = Object.keys(tagMap)
  selector: 'app-create-web',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateWebComponent implements OnInit {
  @Input() detail: object
@@ -56,6 +55,7 @@ export class CreateWebComponent implements OnInit {
  }

  ngOnChanges() {
+    // 回显表单
    setTimeout(() => {
      if (!this.visible) {
        this.validateForm.reset()
@@ -85,11 +85,18 @@ export class CreateWebComponent implements OnInit {

  async onUrlBlur(e) {
    const res = await getLogoUrl(e.target?.value)
-    this.iconUrl = (res || '') as string
-    this.validateForm.get('icon')!.setValue(res || '')
+    if (res) {
+      this.iconUrl = (res || '') as string
+      this.validateForm.get('icon')!.setValue(res || '')
+    }
+  }
+
+  onIconFocus() {
+    document.addEventListener('paste', this.handlePasteImage)
  }

  onIconBlur(e) {
+    document.removeEventListener('paste', this.handlePasteImage)
    this.iconUrl = e.target.value
  }

@@ -101,17 +108,28 @@ 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()
+  handlePasteImage = event => {
+    const items = event.clipboardData?.items
+    let file = null
+    let suffix = ''
+
+    if (items.length) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].type.startsWith('image')) {
+          file = items[i].getAsFile()
+          suffix = file.type.split('/').pop()
+          break;
+        }
+      }
+    }

-    if (!file.type.startsWith('image')) {
-      return this.message.error('请不要上传非法图片')
+    if (file) {
+      this.handleUploadImage(file, suffix)
    }
+  }

+  handleUploadImage(file: Blob, suffix: string) {
+    const that = this
    const fileReader = new FileReader()
    fileReader.readAsDataURL(file)
    fileReader.onload = function() {
@@ -140,6 +158,18 @@ export class CreateWebComponent implements OnInit {
    }
  }

+  onChangeFile(e) {
+    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('请不要上传非法图片')
+    }
+    this.handleUploadImage(file, suffix)
+  }
+
  handleCancel() {
    this.onCancel.emit()
  }

--- a/src/components/logo/logo.component.scss
+++ b/src/components/logo/logo.component.scss
@@ -2,6 +2,7 @@
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
+  background-color: #eee;
 }

 .circle {

--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "importHelpers": true,
+    "allowSyntheticDefaultImports": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"