fix(#87): dark mode lazy loading

.eslintrc.js

@@ -10,13 +10,6 @@ module.exports = {
     jest: true,
     jasmine: true,
   },
-  globals: {
-    App: true,
-    wx: true,
-    Component: true,
-    getApp: true,
-    Page: true
-  },
   rules: {
     'semi': ['error', 'never'],
     'no-var': 2,

CHANGELOG.md

+## 5.3.0
+- 💄 新增快捷创建网站功能 (#63)
+- 💄 图标支持本地上传 (#74)
+- 💄 网址增加推荐指数 (#76)
+- 💄 Side 主题增加置顶快捷图标 (#79)
+- 💄 优化切换暗黑模式延迟问题 (#87)
+- 💄 改进访问速度，资源走CDN
+- 💄 移除配置文件 searchEngineList 字段, 转到 data/search.json
+- 💄 已知问题修复和改进
+
+
 ## 5.2.2
-- 💄  优化Side主题图标不随页面滚动
-- 💄  优化图标显示问题提高加载速度 (#58)
-- 🐞  修复 Side 主题滚动时搜索框闪烁问题 (#57)
-- 🐞  修复编辑时错误回显 (#59)
-- 💄  改进站内搜索 (#61)
+- 💄 优化Side主题图标不随页面滚动
+- 💄 优化图标显示问题提高加载速度 (#58)
+- 🐞 修复 Side 主题滚动时搜索框闪烁问题 (#57)
+- 🐞 修复编辑时错误回显 (#59)
+- 💄 改进站内搜索 (#61)
 
 ## 5.2.1
 - 💄 优化Side主题菜单展开时其他收起

README.md

@@ -38,6 +38,22 @@
 
 
 
+## 在线体验
+提供了一个测试在线体验，与最新版本保持同步，请文明体验：
+
+Token: `60fb4b7d7105477138d99ee97eef721edebdbd5e`
+
+访问以下任意一个网址：
+- [https://vacuum2021.github.io/nav/](https://vacuum2021.github.io/nav/)
+- [https://nav-git-main.vacuum2021.vercel.app/](https://nav-git-main.vacuum2021.vercel.app/)
+- [https://nav.vacuum2021.vercel.app/](https://nav.vacuum2021.vercel.app/)
+- [https://nav-beta.vercel.app/](https://nav-beta.vercel.app/)
+
+
+
+
+
+
 
 ## 特性
 `发现导航` 的理念就是做一款无需依赖后端服务既简单又方便，没有繁杂的配置和数据库等配置概念, 做到开箱即用。

data/settings.json

+{
+}
\ No newline at end of file

src/components/create-web/index.component.ts

@@ -62,12 +62,18 @@ export class CreateWebComponent implements OnInit {
   
       const detail = this.detail as INavFourProp
       if (this.detail && this.visible) {
-        this.validateForm.get('title')!.setValue(detail.name)
+        const divEl = document.createElement('div')
+        divEl.innerHTML = detail.name
+        const name = divEl.innerText
+        divEl.innerHTML = detail.desc
+        const desc = divEl.innerText
+
+        this.validateForm.get('title')!.setValue(name)
+        this.validateForm.get('desc')!.setValue(desc)
         this.validateForm.get('icon')!.setValue(detail.icon || '')
         this.validateForm.get('url')!.setValue(detail.url || '')
         this.validateForm.get('top')!.setValue(detail.top ?? false)
-        this.validateForm.get('rate')!.setValue(detail.rate)
-        this.validateForm.get('desc')!.setValue(detail.desc || '')
+        this.validateForm.get('rate')!.setValue(detail.rate ?? 5)
   
         if (typeof detail.urls === 'object') {
           let i = 0

src/components/fixbar/index.component.ts

@@ -10,7 +10,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'
 import { getToken } from '../../utils/user'
 import { updateFileContent } from '../../services'
 import { websiteList } from '../../store'
-import { DB_PATH, KEY_MAP, VERSION } from '../../constants'
+import { DB_PATH, KEY_MAP, VERSION, STORAGE_KEY_MAP } from '../../constants'
 import { Router, ActivatedRoute } from '@angular/router'
 import { setAnnotate } from '../../utils/ripple'
 
@@ -58,8 +58,7 @@ export class FixbarComponent {
 
   ngOnInit() {
     if (isDarkFn()) {
-      document.body.classList.add('dark-container')
-      this.toggleZorroDark(true)
+      document.documentElement.classList.add('dark-container')
     }
 
     const url = this.router.url.split('?')[0]
@@ -101,21 +100,6 @@ export class FixbarComponent {
     });
   }
 
-  toggleZorroDark(dark: boolean) {
-    if (dark) {
-      const link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.href = 'assets/ng-zorro-antd.dark.css'
-      link.className = 'NG-ZORRO-DARK'
-      document.body.append(link)
-    } else {
-      const findLink = document.querySelectorAll('.NG-ZORRO-DARK')
-      findLink.forEach(child => {
-        child.parentNode.removeChild(child)
-      })
-    }
-  }
-
   toggleTheme(theme) {
     this.router.navigate([theme.url], {
       queryParams: queryString()
@@ -152,16 +136,14 @@ export class FixbarComponent {
 
   toggleMode() {
     this.isDark = !this.isDark
-    window.localStorage.setItem('IS_DARK', String(Number(this.isDark)))
-    document.body.classList.toggle('dark-container')
+    window.localStorage.setItem(STORAGE_KEY_MAP.isDark, String(Number(this.isDark)))
+    document.documentElement.classList.toggle('dark-container')
 
     if (this.isDark) {
       this.removeBackground()
-      this.toggleZorroDark(true)
     } else {
       const { data } = this.activatedRoute.snapshot
       data?.renderLinear && randomBgImg()
-      this.toggleZorroDark(false)
     }
   }
 
@@ -197,7 +179,7 @@ export class FixbarComponent {
         })
         .catch(res => {
           this.notification.error(
-            `错误: ${res?.response?.status ?? 401}`,
+            `错误: ${res?.response?.status ?? 1401}`,
             '同步失败, 请重试'
           )
         })

src/components/search-engine/search-engine.component.ts

@@ -5,6 +5,7 @@ import { Component } from '@angular/core'
 import { getDefaultSearchEngine, setDefaultSearchEngine, queryString } from '../../utils'
 import { Router } from '@angular/router'
 import * as searchEngineList from '../../../data/search.json'
+import { ISearchEngineProps } from '../../types'
 
 @Component({
   selector: 'app-search-engine',
@@ -12,7 +13,7 @@ import * as searchEngineList from '../../../data/search.json'
   styleUrls: ['./search-engine.component.scss']
 })
 export class SearchEngineComponent {
-  searchEngineList = (searchEngineList as any).default
+  searchEngineList: ISearchEngineProps[] = (searchEngineList as any).default
   currentEngine = getDefaultSearchEngine()
   showEngine = false
   keyword = queryString().q

src/components/web-list/index.component.html

-<div class="container">
+<div class="container" *ngIf="dataList.length > 0">
   <a [href]="item.url" target="_blank" *ngFor="let item of dataList">
     <div class="wrapper">
       <div class="logo">

src/constants/index.ts

@@ -26,3 +26,12 @@ export const KEY_MAP = {
   // 暗黑模式
   dark: `${prefix}+d`
 }
+
+export const STORAGE_KEY_MAP = {
+  token: 'token',
+  location: 'location',
+  s_url: 's_url',
+  isDark: 'isDark',
+  website: 'website',
+  engine: 'engine'
+}

src/dark.scss

 // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
+// See https://github.com/xjh22222228/nav
 
+// <html>
 .dark-container {
   .dark {
     &-primary {

src/styles.scss

 // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
+// See https://github.com/xjh22222228/nav
 
 @import "./dark.scss";
 @import "../node_modules/ng-zorro-antd/ng-zorro-antd.css";
+@import "./assets/ng-zorro-antd.dark.scss";
 
 * {
   margin: 0;
@@ -103,6 +105,13 @@ em {
   cursor: pointer;
 }
 
+.clamp3 {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
 /* 搜索高亮关键字 */
 b {
   color: #f50 !important;

src/utils/index.ts

@@ -7,6 +7,7 @@ import Clipboard from 'clipboard'
 import { INavFourProp, INavProps, ISearchEngineProps } from '../types'
 import * as db from '../../data/db.json'
 import * as s from '../../data/search.json'
+import { STORAGE_KEY_MAP } from '../constants'
 
 export const websiteList = getWebsiteList()
 
@@ -135,7 +136,7 @@ export function queryString(): {
 
   if (parseQs.id === undefined && parseQs.page === undefined) {
     try {
-      const location = window.localStorage.getItem('location')
+      const location = window.localStorage.getItem(STORAGE_KEY_MAP.location)
       if (location) {
         const localLocation = JSON.parse(location)
         page = localLocation.page || 0
@@ -193,11 +194,11 @@ export function getWebsiteList() {
   let webSiteList = adapterWebsiteList((db as any).default)
   const scriptElAll = document.querySelectorAll('script')
   const scriptUrl = scriptElAll[scriptElAll.length - 1].src
-  const storageScriptUrl = window.localStorage.getItem('s_url')
+  const storageScriptUrl = window.localStorage.getItem(STORAGE_KEY_MAP.s_url)
 
   // 检测到网站更新，清除缓存
   if (storageScriptUrl !== scriptUrl) {
-    const whiteList = ['token', 'IS_DARK']
+    const whiteList = [STORAGE_KEY_MAP.token, STORAGE_KEY_MAP.isDark]
     const len = window.localStorage.length
     for (let i = 0; i < len; i++) {
       const key = window.localStorage.key(i)
@@ -206,12 +207,12 @@ export function getWebsiteList() {
       }
       window.localStorage.removeItem(key)
     }
-    window.localStorage.setItem('s_url', scriptUrl)
+    window.localStorage.setItem(STORAGE_KEY_MAP.s_url, scriptUrl)
     return webSiteList
   }
 
   try {
-    const w = window.localStorage.getItem('website')
+    const w = window.localStorage.getItem(STORAGE_KEY_MAP.website)
     const json = JSON.parse(w)
     if (Array.isArray(json)) {
       webSiteList = json
@@ -224,7 +225,7 @@ export function getWebsiteList() {
 export function setWebsiteList(v?: INavProps[]) {
   v = v || websiteList
 
-  window.localStorage.setItem('website', JSON.stringify(v))
+  window.localStorage.setItem(STORAGE_KEY_MAP.website, JSON.stringify(v))
 }
 
 export function toggleCollapseAll(wsList?: INavProps[]): boolean {
@@ -248,7 +249,7 @@ export function toggleCollapseAll(wsList?: INavProps[]): boolean {
 export function setLocation() {
   const { page, id } = queryString()
 
-  window.localStorage.setItem('location', JSON.stringify({
+  window.localStorage.setItem(STORAGE_KEY_MAP.location, JSON.stringify({
     page,
     id
   }))
@@ -257,7 +258,7 @@ export function setLocation() {
 export function getDefaultSearchEngine(): ISearchEngineProps {
   let DEFAULT = (searchEngineList[0] || {}) as ISearchEngineProps
   try {
-    const engine = window.localStorage.getItem('engine');
+    const engine = window.localStorage.getItem(STORAGE_KEY_MAP.engine);
     if (engine) {
       DEFAULT = JSON.parse(engine)
     }
@@ -266,11 +267,11 @@ export function getDefaultSearchEngine(): ISearchEngineProps {
 }
 
 export function setDefaultSearchEngine(engine: ISearchEngineProps) {
-  window.localStorage.setItem('engine', JSON.stringify(engine))
+  window.localStorage.setItem(STORAGE_KEY_MAP.engine, JSON.stringify(engine))
 }
 
 export function isDark(): boolean {
-  const storageVal = window.localStorage.getItem('IS_DARK')
+  const storageVal = window.localStorage.getItem(STORAGE_KEY_MAP.isDark)
   const darkMode = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches
 
   if (!storageVal && darkMode) {

src/utils/user.ts

 // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
+// See https://github.com/xjh22222228/nav
+
+import { STORAGE_KEY_MAP } from '../constants'
 
 export function getToken() {
-  return window.localStorage.getItem('token')
+  return window.localStorage.getItem(STORAGE_KEY_MAP.token)
 }
 
 export function setToken(token: string) {
-  return window.localStorage.setItem('token', token)
+  return window.localStorage.setItem(STORAGE_KEY_MAP.token, token)
 }

src/view/admin/index.component.ts

@@ -12,7 +12,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'
 import { FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { setWebsiteList } from '../../utils'
 import { updateFileContent } from '../../services'
-import { DB_PATH, LOGO_PATH, LOGO_CDN } from '../../constants'
+import { DB_PATH, LOGO_PATH, LOGO_CDN, STORAGE_KEY_MAP } from '../../constants'
 import { parseBookmark } from '../../utils/bookmark'
 import * as __tag from '../../../data/tag.json'
 import config from '../../../nav.config'
@@ -132,7 +132,7 @@ export default class WebpComponent {
       nzContent: '所有数据将还原初始状态，不可撤销！',
       nzOnOk: () => {
         this.message.success('数据已重置回初始状态')
-        window.localStorage.removeItem('website')
+        window.localStorage.removeItem(STORAGE_KEY_MAP.website)
         setTimeout(() => {
           window.location.reload()
         }, 1500)