feat: view info & auto input logo

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)

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>${title}</title>
@@ -20,6 +23,7 @@ hm.src = '${baiduStatisticsUrl}';
 var s = document.getElementsByTagName("script")[0]; 
 s.parentNode.insertBefore(hm, s);
 </script>
+<span data-date="${date}" id="BUILD-DATE-NAV"></span>
 `.trim()
 
 try {

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%)',

src/assets/img/view.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1610870988842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8793" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M491.3664 905.6256h-226.816c-71.7824 0-130.2016-58.4192-130.2016-130.2016V237.9776c0-71.7824 58.4192-130.2016 130.2016-130.2016h463.104c71.7824 0 130.2016 58.4192 130.2016 130.2016v249.7024c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V237.9776c0-43.5712-35.4304-79.0016-79.0016-79.0016H264.5504c-43.5712 0-79.0016 35.4304-79.0016 79.0016v537.3952c0 43.5712 35.4304 79.0016 79.0016 79.0016h226.7648c14.1312 0 25.6 11.4688 25.6 25.6s-11.4176 25.6512-25.5488 25.6512z" fill="#191919" p-id="8794"></path><path d="M695.7568 350.8224H294.7584c-14.1312 0-25.6-11.4688-25.6-25.6s11.4688-25.6 25.6-25.6h400.9472c14.1312 0 25.6 11.4688 25.6 25.6s-11.4176 25.6-25.5488 25.6zM495.2576 498.5856H294.7584c-14.1312 0-25.6-11.4688-25.6-25.6s11.4688-25.6 25.6-25.6h200.4992c14.1312 0 25.6 11.4688 25.6 25.6s-11.4688 25.6-25.6 25.6zM430.4384 646.3488h-135.68c-14.1312 0-25.6-11.4688-25.6-25.6s11.4688-25.6 25.6-25.6h135.68c14.1312 0 25.6 11.4688 25.6 25.6s-11.4688 25.6-25.6 25.6z" fill="#191919" p-id="8795"></path><path d="M705.6896 718.1312m-172.8512 0a172.8512 172.8512 0 1 0 345.7024 0 172.8512 172.8512 0 1 0-345.7024 0Z" fill="#FACC31" p-id="8796"></path><path d="M920.576 883.1488l-53.4528-49.8688c23.2448-32.512 36.9664-72.2432 36.9664-115.1488 0-109.4144-89.0368-198.4512-198.4512-198.4512s-198.4512 89.0368-198.4512 198.4512 89.0368 198.4512 198.4512 198.4512c48.0768 0 92.2624-17.2032 126.6176-45.7728l53.3504 49.7664c4.9152 4.608 11.2128 6.8608 17.4592 6.8608 6.8608 0 13.6704-2.7136 18.7392-8.1408a25.5232 25.5232 0 0 0-1.2288-36.1472z m-362.1376-165.0176c0-81.2032 66.048-147.2512 147.2512-147.2512s147.2512 66.048 147.2512 147.2512-66.048 147.2512-147.2512 147.2512-147.2512-66.048-147.2512-147.2512z" fill="#191919" p-id="8797"></path></svg>
\ No newline at end of file

src/components/create/create.component.html

@@ -83,14 +83,20 @@
         <nz-form-item *ngIf="radioType === '6'">
           <nz-form-label [nzSpan]="4" nzRequired>网站链接</nz-form-label>
           <nz-form-control [nzSpan]="20">
-            <input formControlName="url" nz-input placeholder="https://nav3.cn" />
+            <input formControlName="url" nz-input placeholder="https://nav3.cn" (blur)="onUrlBlur($event)" />
           </nz-form-control>
         </nz-form-item>
 
         <nz-form-item>
           <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
           <nz-form-control [nzSpan]="20">
-            <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" />
+            <nz-input-group [nzPrefix]="prefixIcon">
+              <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onUrlBlur($event)" />
+            </nz-input-group>
+
+            <ng-template #prefixIcon>
+              <app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
+            </ng-template>
           </nz-form-control>
         </nz-form-item>
 

src/components/create/create.component.scss

+.prefix-icon {
+  width: 20px;
+  height: 20px;
+  pointer-events: none;
+}

src/components/create/create.component.ts

 // 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
     

src/components/fixbar/index.component.html

 <div class="fixbar">
+  <span *ngIf="isLogin" nz-tooltip nzTooltipTitle="查看信息">
+    <div
+      class="wrapper dark-bg dark-border-color dark-action-hover"
+      (click)="viewInfo()"
+    >
+    <img src="assets/img/view.svg" />
+    </div>
+  </span>
+
   <div
     class="wrapper dark-bg dark-border-color dark-action-hover"
     (click)="toggleEditMode()"

src/components/fixbar/index.component.ts

@@ -60,6 +60,19 @@ export class FixbarComponent {
     })
   }
 
+  viewInfo() {
+    const date = document.getElementById('BUILD-DATE-NAV')?.dataset?.date
+
+    this.modal.info({
+      nzTitle: '以下信息只有您能查看，请放心！',
+      nzOkText: '知道了',
+      nzContent: `
+        <p>Token: ${getToken()}</p>
+        <p>上次构建时间: ${date || '未知'}</p>
+      `,
+    });
+  }
+
   toggleZorroDark(dark: boolean) {
     if (dark) {
       const link = document.createElement('link')

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' }"
 >
 
 <ng-template #noSrc>
   <nz-avatar
-    [nzSize]="35"
+    [nzSize]="size || 35"
     [nzGap]="gap"
     [ngStyle]="{ 'background-color': colour || color }"
-    [nzText]="name[0]"
+    [nzText]="name ? name[0] : ''"
     nzSize="large"
     style="vertical-align: middle;"
   >

src/components/logo/logo.component.scss

 .icon {
   display: inline-block;
-  width: 35px;
-  height: 35px;
   vertical-align: middle;
   border-radius: 50%;
   pointer-events: none;

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'

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<boolean|string> {
+  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
+  }
+}