feat: keyboard event

fix: bug

CHANGELOG.md

+## 5.0.3
+`2021-01-19`
+
+- 🐞 新增/编辑 网站名称错别字修复
+- 🐞 修复构建时区差异问题
+- 💄 新增/编辑网站分类和网站名称长度不再限制
+- 💄 优化网站图标为空时继承父类图标
+

README.md

@@ -62,6 +62,8 @@
 - [√] 完全开源，轻松定制化。
 - [√] 多款主题切换。
 - [√] 支持暗黑模式。
+- [√] 支持快捷键操作，一步到位。
+- [√] 支持在线新增数据, 没有传统的后台概念。
 
 
 
@@ -70,17 +72,15 @@
 
 1、Fork 当前项目。
 
-2、修改项目配置文件 [nav.config.ts](nav.config.ts)
+2、[https://github.com/settings/tokens](https://github.com/settings/tokens) 申请 token, 勾选相应的权限, 如果不懂就全部选中，复制并保存Token。
 
-3、[https://github.com/settings/tokens](https://github.com/settings/tokens) 申请 token, 勾选相应的权限, 如果不懂就全部选中。
+3、到 https://github.com/用户名/nav/settings/secrets/new  添加刚刚申请的token， name填写 `TOKEN` 大写。
 
-4、到 https://github.com/用户名/nav/settings/secrets/new  添加刚刚申请的token， name填写 `TOKEN` 大写。
+4、打开 https://github.com/用户名/nav/actions 点击 `绿色按钮`
 
-5、打开 https://github.com/用户名/nav/actions 点击 `绿色按钮`
+5、务必修改项目配置文件 [nav.config.ts](nav.config.ts)
 
-6、往仓库推送一条Commit (非常重要)。
-
-7、5分钟后打开 https://用户名.github.io/nav 就能看到一个非常强大的导航网站了。
+6、5分钟后打开 https://用户名.github.io/nav 就能看到一个非常强大的导航网站了。
 
 
 注：如果想部署到自己的域名，那么以上教程同样适合，因为它提供了自动化部署， 之后可以通过 `CNAME` 或 `反向代理` 实现：
@@ -108,6 +108,24 @@ server {
 ## 关于升级
 在升级之前请保存根目录下的 `data` 文件夹,最好把 `nav.config.ts` 配置文件也保存一份以防万一, 升级完后替换即可。
 
+点击右上角 `Watch` 按钮第一时间跟踪版本升级。
+
+
+
+## 更新日志
+[CHANGELOG](CHANGELOG.md)
+
+
+
+
+## 快捷键
+mac下是 `Command`，windows 下是 `Ctrl`
+
+- `ctrl+e` 开启或关闭编辑模式
+- `ctrl+v` 查看信息
+- `ctrl+d` 开启或关闭暗黑模式
+
+如对快捷键有特殊要求请发起 [issues](https://github.com/xjh22222228/nav/issues)
 
 
 
@@ -150,6 +168,9 @@ Thank you for your [contribution](https://github.com/xjh22222228/nav/issues), me
 
 
 
+
+
+
 ## 建议
 如果有任何功能上的建议可通过 [issue](https://github.com/xjh22222228/nav/issues) 发起, Thank you.
 

package-lock.json

@@ -5787,6 +5787,11 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "hotkeys-js": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.1.tgz",
+      "integrity": "sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",

package.json

@@ -28,6 +28,7 @@
     "@angular/platform-browser-dynamic": "~11.0.5",
     "@angular/router": "~11.0.5",
     "axios": "^0.21.1",
+    "hotkeys-js": "^3.8.1",
     "js-base64": "^3.6.0",
     "ng-zorro-antd": "^11.0.2",
     "qs": "^6.9.4",

scripts/build.mjs

@@ -9,6 +9,7 @@ function addZero(num) {
 }
 
 const now = new Date()
+now.setHours(now.getHours() + 8)
 const date = `${now.getFullYear()}年${addZero(now.getMonth() + 1)}月${addZero(now.getDate())}日 ${addZero(now.getHours())}:${addZero(now.getMinutes())}`
 
 const {

src/components/create/create.component.html

@@ -76,7 +76,7 @@
         <nz-form-item>
           <nz-form-label [nzSpan]="4" nzRequired>{{ radioType === '6' ? '网站名称' : '分类名称'}}</nz-form-label>
           <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
-            <input formControlName="title" nz-input placeholder="发现导航" maxlength="10" />
+            <input formControlName="title" nz-input placeholder="发现导航" />
           </nz-form-control>
         </nz-form-item>
 

src/components/dropdown/dropdown.component.html

@@ -33,9 +33,9 @@
   <ng-container *nzModalContent>
     <form nz-form [formGroup]="validateForm" (ngSubmit)="handleOk()">
       <nz-form-item>
-        <nz-form-label [nzSpan]="4" nzRequired>{{ radioType === '6' ? '网站名称' : '分类名称'}}</nz-form-label>
+        <nz-form-label [nzSpan]="4" nzRequired>{{ getEditType() === EditType.isWebsite ? '网站名称' : '分类名称'}}</nz-form-label>
         <nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
-          <input formControlName="title" nz-input placeholder="发现导航" maxlength="10" />
+          <input formControlName="title" nz-input placeholder="发现导航" />
         </nz-form-control>
       </nz-form-item>
 

src/components/fixbar/index.component.ts

 // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
 
+import hotkeys from 'hotkeys-js'
 import { Component, Output, EventEmitter, Input } from '@angular/core'
 import { isDark as isDarkFn, randomBgImg, queryString } from '../../utils'
 import { NzModalService } from 'ng-zorro-antd/modal'
@@ -8,7 +9,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification'
 import { getToken } from '../../utils/user'
 import { updateFileContent } from '../../services'
 import { websiteList, isEditing } from '../../store'
-import { DB_PATH } from '../../constants'
+import { DB_PATH, KEY_MAP } from '../../constants'
 import { Router } from '@angular/router'
 import { setAnnotate } from '../../utils/ripple'
 
@@ -58,6 +59,28 @@ export class FixbarComponent {
     this.themeList = this.themeList.filter(t => {
       return t.url !== url
     })
+
+    this.initHotKeys()
+  }
+
+  ngOnDestroy() {
+    // @ts-ignore
+    hotkeys.unbind()
+  }
+
+  initHotKeys() {
+    hotkeys(KEY_MAP.view, (e) => {
+      e.preventDefault()
+      this.viewInfo()
+    })
+    hotkeys(KEY_MAP.edit, (e) => {
+      e.preventDefault()
+      this.isEditing.value = !this.isEditing.value
+    })
+    hotkeys(KEY_MAP.dark, (e) => {
+      e.preventDefault()
+      this.toggleMode()
+    })
   }
 
   viewInfo() {
@@ -163,7 +186,7 @@ export class FixbarComponent {
         })
         .catch(res => {
           this.notification.error(
-            `错误: ${res?.response?.status ?? 404}`,
+            `错误: ${res?.response?.status ?? 401}`,
             '同步失败, 请重试'
           )
         })

src/constants/index.ts

 // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
+function isMac() {
+  return /mac os x/i.test(navigator.userAgent.toLowerCase());
+}
 
 export const VERIFY_PATH = 'nav.verify.txt'
 
 export const DB_PATH = 'data/db.json'
 
 export const VERSION = '5.0.2'
+
+// keyboard event
+const prefix = isMac() ? 'command' : 'ctrl'
+export const KEY_MAP = {
+  // 编辑模式
+  edit: `${prefix}+e`,
+
+  // 查看信息
+  view: `${prefix}+v`,
+
+  // 暗黑模式
+  dark: `${prefix}+d`
+}

src/services/index.ts

@@ -20,9 +20,10 @@ try {
 
 // 获取文件信息
 export function getFileContent(path: string, authToken?: string) {
+  const _token = `${authToken ? authToken : token}`.trim()
   return http.get(`/repos/${authorName}/${branchName}/contents/${path}`, {
     headers: {
-      Authorization: `token ${authToken ? authToken : token}`
+      Authorization: `token ${_token}`
     }
   })
 }
@@ -37,15 +38,16 @@ export async function updateFileContent(
   { message, content, path }: Iupdate,
   authToken?: string
 ) {
-  const fileInfo = await getFileContent(path, authToken)
+  const _token = `${authToken ? authToken : token}`.trim()
+  const fileInfo = await getFileContent(path, _token)
 
   return http.put(`/repos/${authorName}/${branchName}/contents/${path}`, {
-    message: `rebot: ${message}`,
+    message: `rebot(CI): ${message}`,
     content: encode(content),
     sha: fileInfo.data.sha
   }, {
     headers: {
-      Authorization: `token ${authToken ? authToken : token}`
+      Authorization: `token ${_token}`
     }
   })
 }

src/styles.scss

@@ -115,6 +115,7 @@ b {
   cursor: pointer;
   transition: .1s linear;
   color: #666;
+  vertical-align: middle;
 
   &.active {
     transform: rotate(-90deg);

src/utils/index.ts

@@ -2,8 +2,10 @@
 
 import qs from 'qs'
 import config from '../../nav.config'
+import hotkeys from 'hotkeys-js'
 import { INavProps, ISearchEngineProps } from '../types'
 import * as db from '../../data/db.json'
+import { KEY_MAP } from '../constants'
 
 export const websiteList = getWebsiteList()
 
@@ -75,7 +77,7 @@ export function fuzzySearch(navList: INavProps[], keyword: string) {
   f()
 
   if (searchResultList[0].nav.length <= 0) {
-    return[]
+    return []
   }
 
   return searchResultList
@@ -162,8 +164,26 @@ export function queryString() {
   }
 }
 
+export function adapterWebsiteList(websiteList: any[], parentItem?: any) {
+  for (let i = 0; i < websiteList.length; i++) {
+    const item = websiteList[i]
+
+    if (Array.isArray(item.nav)) {
+      adapterWebsiteList(item.nav, item)
+    }
+
+    if (item.url) {
+      if (!item.icon && parentItem.icon) {
+        item.icon = parentItem.icon
+      }
+    }
+  }
+
+  return websiteList;
+}
+
 export function getWebsiteList() {
-  let webSiteList = (db as any).default
+  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')
@@ -242,11 +262,6 @@ export function setDefaultSearchEngine(engine: ISearchEngineProps) {
   window.localStorage.setItem('engine', JSON.stringify(engine))
 }
 
-export function imgErrorInRemove(e) {
-  const el = e.currentTarget;
-  el?.parentNode?.removeChild?.(el)
-}
-
 export function isDark(): boolean {
   const storageVal = window.localStorage.getItem('IS_DARK')
   const darkMode = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches

src/view/app/default/app.component.html

@@ -41,7 +41,7 @@
             <a [href]="el.url" target="_blank">
               <div class="top">
                 <app-logo
-                  [src]="el.icon || item.icon"
+                  [src]="el.icon"
                   [name]="el.name"
                 >
                 </app-logo>

src/view/index/light/index.component.html

@@ -77,7 +77,7 @@
                   <a [href]="el.url" target="_blank" rel="noopener noreferer">
                     <div class="top">
                       <app-logo
-                        [src]="el.icon || item.icon || websiteList[page].nav[id].icon"
+                        [src]="el.icon"
                         [name]="el.name"
                       >
                       </app-logo>

src/view/index/sim/index.component.html

@@ -39,24 +39,25 @@
     <aside class="site-box dark-bg">
       <div *ngFor="let item of currentList; let i=index">
         <div class="nav-wrapper">
-          <app-dropdown [oIdx]="page" [twoIdx]="id" [threeIdx]="i">
-            <div
-              class="title dark-primary dark-border-color"
-              *ngIf="item.title"
-              (click)="onCollapse(item, i)"
-            >
-              <app-logo
-                [src]="item.icon"
-                [name]="item.title"
-                colour="#ff4d4f"
-              >
-              </app-logo>
+          <div
+            class="title dark-primary dark-border-color"
+            *ngIf="item.title"
+          >
+            <app-dropdown [oIdx]="page" [twoIdx]="id" [threeIdx]="i">
+              <span class="cursor-pointer" (click)="onCollapse(item, i)">
+                <app-logo
+                  [src]="item.icon"
+                  [name]="item.title"
+                  colour="#ff4d4f"
+                >
+                </app-logo>
 
-              <span style="margin-left: 10px;align-self: center;">{{ item.title }} x {{ item.nav.length }}</span>
+                <span style="margin-left: 10px;align-self: center;vertical-align: middle;">{{ item.title }} x {{ item.nav.length }}</span>
 
-              <i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
-            </div>
-          </app-dropdown>
+                <i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
+              </span>
+            </app-dropdown>
+          </div>
 
           <ul class="ul" *ngIf="!item.collapsed">
             <li *ngFor="let ele of item.nav; let idx=index" class="dark-border-color">
@@ -70,7 +71,7 @@
                   <div class="box-wrapper">
                     <div class="left">
                       <app-logo
-                        [src]="ele.icon || item.icon || websiteList[page].nav[id].icon"
+                        [src]="ele.icon"
                         [name]="ele.name"
                       >
                       </app-logo>

src/view/index/sim/index.component.scss

@@ -113,7 +113,6 @@ $width: 1200px;
         color: #3f51b5;
         font-weight: 500;
         display: flex;
-        cursor: pointer;
       }
 
       ul {