fix: get icon url

src/components/create/create.component.html

@@ -91,7 +91,7 @@
           <nz-form-label [nzSpan]="4">图标地址</nz-form-label>
           <nz-form-control [nzSpan]="20">
             <nz-input-group [nzPrefix]="prefixIcon">
-              <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onUrlBlur($event)" />
+              <input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onIconBlur($event)" />
             </nz-input-group>
 
             <ng-template #prefixIcon>

src/components/create/create.component.ts

@@ -69,6 +69,10 @@ export class CreateComponent implements OnInit {
     this.validateForm.get('icon')!.setValue(res || '')
   }
 
+  onIconBlur(e) {
+    this.iconUrl = e.target.value
+  }
+
   hanldeOneSelect(value) {
     if (!value) return
     

src/components/dropdown/dropdown.component.html

@@ -42,14 +42,20 @@
       <nz-form-item *ngIf="getEditType() === EditType.isWebsite">
         <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)="onIconBlur($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/dropdown/dropdown.component.ts

@@ -3,7 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { NzMessageService } from 'ng-zorro-antd/message'
 import { NzNotificationService } from 'ng-zorro-antd/notification'
 import { getToken } from '../../utils/user'
-import { setWebsiteList, queryString } from '../../utils'
+import { setWebsiteList, queryString, getLogoUrl } from '../../utils'
 import { websiteList, isEditing } from '../../store'
 import { Router } from '@angular/router'
 import { setAnnotate } from '../../utils/ripple'
@@ -34,6 +34,7 @@ export class DropdownComponent implements OnInit {
   isEditing = isEditing
   showModal = false
   EditType = EditType
+  iconUrl = ''
 
   constructor(
     private fb: FormBuilder,
@@ -54,6 +55,16 @@ export class DropdownComponent implements OnInit {
     });
   }
 
+  async onUrlBlur(e) {
+    const res = await getLogoUrl(e.target?.value)
+    this.iconUrl = (res || '') as string
+    this.validateForm.get('icon')!.setValue(res || '')
+  }
+
+  onIconBlur(e) {
+    this.iconUrl = e.target.value
+  }
+
   hasKeyword() {
     return !!queryString().q
   }

src/components/fixbar/index.component.ts

@@ -64,6 +64,7 @@ export class FixbarComponent {
     const date = document.getElementById('BUILD-DATE-NAV')?.dataset?.date
 
     this.modal.info({
+      nzWidth: 500,
       nzTitle: '以下信息只有您能查看，请放心！',
       nzOkText: '知道了',
       nzContent: `

src/utils/index.ts

@@ -259,29 +259,39 @@ export function isDark(): boolean {
 
 export async function getLogoUrl(url: string): Promise<boolean|string> {
   try {
-    // const c = ['/favicon.ico', '/favicon.png', '/logo.png', '/favicon.svg', '/favicon.jpg']
+    const c = ['/favicon.png', '/favicon.svg', '/favicon.jpg', '/favicon.ico', '/logo.png']
     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)
+
+    const promises = c.map(url => {
+      const iconUrl = origin + url
+      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)
         }
-        document.body.append(img)
-      } catch (error) {
-        resolve(false)
-      }
+      }) 
     })
+
+    const all = await Promise.all<any>(promises)
+    for (let i = 0; i < all.length; i++) {
+      if (all[i]) {
+        return all[i]
+      }
+    }
+    
   } catch {
-    return false
+    return null
   }
 }