From 6d07f0715738b36ce8e8534182a305fbfcee593f Mon Sep 17 00:00:00 2001 From: xjh22222228 Date: Mon, 15 Mar 2021 19:33:05 +0800 Subject: [PATCH] feat: #103 --- .github/ISSUE_TEMPLATE/config.yml | 5 ++ package-lock.json | 48 ++++++++--------- package.json | 8 +-- .../create-web/index.component.html | 12 +++-- src/components/create-web/index.component.ts | 54 ++++++++++++++----- src/components/logo/logo.component.scss | 1 + tsconfig.json | 1 + 7 files changed, 86 insertions(+), 43 deletions(-) create mode 100644 .github/ISSUE_TEMPLATE/config.yml diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..9d148ff --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,5 @@ +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 diff --git a/package-lock.json b/package-lock.json index b5ec923..9b8f78f 100644 --- 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", diff --git a/package.json b/package.json index 534f486..56ef6e9 100644 --- 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", diff --git a/src/components/create-web/index.component.html b/src/components/create-web/index.component.html index 30f7844..99c8395 100644 --- a/src/components/create-web/index.component.html +++ b/src/components/create-web/index.component.html @@ -34,7 +34,7 @@ @@ -51,7 +51,13 @@ 图标地址 - + @@ -65,7 +71,7 @@ diff --git a/src/components/create-web/index.component.ts b/src/components/create-web/index.component.ts index 090f3d2..6309033 100644 --- a/src/components/create-web/index.component.ts +++ b/src/components/create-web/index.component.ts @@ -1,7 +1,7 @@ // 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() } diff --git a/src/components/logo/logo.component.scss b/src/components/logo/logo.component.scss index 3c023d6..8449988 100644 --- 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 { diff --git a/tsconfig.json b/tsconfig.json index 28cb9f1..092689b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,6 +11,7 @@ "moduleResolution": "node", "resolveJsonModule": true, "importHelpers": true, + "allowSyntheticDefaultImports": true, "target": "es2015", "typeRoots": [ "node_modules/@types" -- GitLab