From b8a0ad9a2a7690771b850aa38721371b56d70dee Mon Sep 17 00:00:00 2001 From: xjh22222228 Date: Sun, 17 Jan 2021 17:56:10 +0800 Subject: [PATCH] feat: view info & auto input logo --- README.md | 4 +-- build.mjs | 4 +++ nav.config.ts | 2 +- src/assets/img/view.svg | 1 + src/components/create/create.component.html | 10 +++++-- src/components/create/create.component.scss | 5 ++++ src/components/create/create.component.ts | 11 ++++++-- src/components/fixbar/index.component.html | 9 ++++++ src/components/fixbar/index.component.ts | 13 +++++++++ src/components/logo/logo.component.html | 5 ++-- src/components/logo/logo.component.scss | 2 -- src/components/logo/logo.component.ts | 1 + src/utils/index.ts | 31 ++++++++++++++++++++- 13 files changed, 86 insertions(+), 12 deletions(-) create mode 100644 src/assets/img/view.svg diff --git a/README.md b/README.md index 0238fbd..336154d 100644 --- a/README.md +++ b/README.md @@ -35,8 +35,8 @@ ## 预览 **主题** -- [sim 在线预览](https://nav3.cn/#/sim) -- [light 在线预览](https://nav3.cn/#/light) +- [Sim 在线预览](https://nav3.cn/#/sim) +- [Light 在线预览](https://nav3.cn/#/light) ![Preview](media/1.png) ![Preview](media/2.png) diff --git a/build.mjs b/build.mjs index b332e6d..27d1a35 100644 --- a/build.mjs +++ b/build.mjs @@ -4,6 +4,9 @@ import fs from 'fs' import config from './nav.config.js' import path from 'path' +const now = new Date() +const date = `${now.getMonth() + 1}-${now.getDate()}-${now.getDay()} ${now.getHours()}:${now.getMinutes()}` + const { description, title, keywords, baiduStatisticsUrl } = config.default const htmlTemplate = ` ${title} @@ -20,6 +23,7 @@ hm.src = '${baiduStatisticsUrl}'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); + `.trim() try { diff --git a/nav.config.ts b/nav.config.ts index 94a987a..66119bd 100644 --- a/nav.config.ts +++ b/nav.config.ts @@ -71,7 +71,7 @@ const c: IConfig = { baiduStatisticsUrl: 'https://hm.baidu.com/hm.js?4582be7af7e7c95ef75351e07c6c32ba', // 只支持 Light 主题 - // https://www.nav3.cn/#/index?q=grabient + // https://www.nav3.cn/#/light?q=grabient backgroundLinear: [ 'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)', 'linear-gradient(90deg, #FEE140 0%, #FA709A 100%)', diff --git a/src/assets/img/view.svg b/src/assets/img/view.svg new file mode 100644 index 0000000..c4b3e4d --- /dev/null +++ b/src/assets/img/view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/create/create.component.html b/src/components/create/create.component.html index 4562f1e..21bbd6a 100644 --- a/src/components/create/create.component.html +++ b/src/components/create/create.component.html @@ -83,14 +83,20 @@ 网站链接 - + 图标地址 - + + + + + + + diff --git a/src/components/create/create.component.scss b/src/components/create/create.component.scss index e69de29..3d2a49a 100644 --- a/src/components/create/create.component.scss +++ b/src/components/create/create.component.scss @@ -0,0 +1,5 @@ +.prefix-icon { + width: 20px; + height: 20px; + pointer-events: none; +} diff --git a/src/components/create/create.component.ts b/src/components/create/create.component.ts index cfe0974..12e97c0 100644 --- a/src/components/create/create.component.ts +++ b/src/components/create/create.component.ts @@ -1,7 +1,7 @@ // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license. import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core' -import { setWebsiteList } from '../../utils' +import { setWebsiteList, getLogoUrl } from '../../utils' import { NzMessageService } from 'ng-zorro-antd/message' import { NzNotificationService } from 'ng-zorro-antd/notification' import { updateFileContent } from '../../services' @@ -27,6 +27,7 @@ export class CreateComponent implements OnInit { isLogin = !!getToken() radioType: '1'|'2'|'3'|'6' = '6' submiting = false + iconUrl = '' constructor( private fb: FormBuilder, @@ -34,7 +35,7 @@ export class CreateComponent implements OnInit { private notification: NzNotificationService, ) {} - ngOnInit(): void { + ngOnInit() { this.validateForm = this.fb.group({ title: [null, [Validators.required]], oneSelect: [null, [Validators.required]], @@ -62,6 +63,12 @@ export class CreateComponent implements OnInit { } } + async onUrlBlur(e) { + const res = await getLogoUrl(e.target?.value) + this.iconUrl = (res || '') as string + this.validateForm.get('icon')!.setValue(res || '') + } + hanldeOneSelect(value) { if (!value) return diff --git a/src/components/fixbar/index.component.html b/src/components/fixbar/index.component.html index 4fb75ca..898b62d 100644 --- a/src/components/fixbar/index.component.html +++ b/src/components/fixbar/index.component.html @@ -1,4 +1,13 @@
+ +
+ +
+ +
Token: ${getToken()}

+

上次构建时间: ${date || '未知'}

+ `, + }); + } + toggleZorroDark(dark: boolean) { if (dark) { const link = document.createElement('link') diff --git a/src/components/logo/logo.component.html b/src/components/logo/logo.component.html index ad59dbe..fe33f90 100644 --- a/src/components/logo/logo.component.html +++ b/src/components/logo/logo.component.html @@ -3,14 +3,15 @@ [src]="src" class="icon dark-border-color" (error)="onImgError($event)" + [ngStyle]="{ width: (size || 35) + 'px', height: (size || 35) + 'px' }" > diff --git a/src/components/logo/logo.component.scss b/src/components/logo/logo.component.scss index 351157c..6976479 100644 --- a/src/components/logo/logo.component.scss +++ b/src/components/logo/logo.component.scss @@ -1,7 +1,5 @@ .icon { display: inline-block; - width: 35px; - height: 35px; vertical-align: middle; border-radius: 50%; pointer-events: none; diff --git a/src/components/logo/logo.component.ts b/src/components/logo/logo.component.ts index 903669e..a67d0d6 100644 --- a/src/components/logo/logo.component.ts +++ b/src/components/logo/logo.component.ts @@ -9,6 +9,7 @@ export class LogoComponent implements OnInit { @Input() src: string @Input() name: string @Input() colour: string + @Input() size: number hasError = false color = '#1890ff' diff --git a/src/utils/index.ts b/src/utils/index.ts index a83c3ec..1eca2c6 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -169,7 +169,7 @@ export function getWebsiteList() { // 检测到网站更新，清除缓存 if (storageScriptUrl !== scriptUrl) { - const whiteList = ['token'] + const whiteList = ['token', 'IS_DARK'] const len = window.localStorage.length for (let i = 0; i < len; i++) { const key = window.localStorage.key(i) @@ -256,3 +256,32 @@ export function isDark(): boolean { return Boolean(Number(storageVal)) } + +export async function getLogoUrl(url: string): Promise { + try { + // const c = ['/favicon.ico', '/favicon.png', '/logo.png', '/favicon.svg', '/favicon.jpg'] + const { origin } = new URL(url) + const iconUrl = origin + '/favicon.ico' + + return new Promise(resolve => { + try { + const img = document.createElement('img') + img.src = iconUrl + img.style.display = 'none' + img.onload = () => { + img.parentNode.removeChild(img) + resolve(iconUrl) + } + img.onerror = () => { + img.parentNode.removeChild(img) + resolve(false) + } + document.body.append(img) + } catch (error) { + resolve(false) + } + }) + } catch { + return false + } +} -- GitLab