feat: #31

README.md

@@ -97,12 +97,56 @@ npm run build
 ## 更新数据
 只需要关注根目录 `data` 文件夹, 如果你使用了上面教程提供的自动化部署服务，那么当更新数据后大概5分钟即可看到。
 
+```js
+{
+  title: '工具',
+  icon: 'https://example/favicon.ico',
+  nav: [
+    {
+      subtitle: '网站',
+      collapsed: false, // 默认展开，设置 false 折叠
+      showSideIcon: false, // 右侧边图标，如果设置Icon则默认显示
+      nav: [
+        {
+          name: '发现导航',
+          desc: '发现导航 - 精选实用导航网站',
+          link: 'https://nav3.cn',
+        }
+      ]
+    }
+  ]
+}
+```
+
 
 
 ## 配置
 所有可配置位于文件 `config/index.ts`。
 
 
+## 图标
+图标是支持继承的，每一级的 `icon` 字段都是可选，如果当前没有就会继承上一级Icon,
+
+```js
+{
+  title: 'Example',
+  icon: 'https://example/icon',
+  nav: [
+    {
+      showSideIcon: false, // 如果这层设置 icon 图标会默认在右侧边栏显示ICON, 设置 false 关闭显示
+      subtitle: 'Example',
+      // icon: 'https://favicon.ico',
+      nav: [
+        {
+          // icon: 'https://favicon.ico',
+        },
+      ]
+    }
+  ]
+}
+```
+
+
 
 
 

config/index.ts

@@ -4,13 +4,13 @@
  * @url https://github.com/xjh22222228/nav
  */
 
-export const appLanguage = [
+export const INDEX_LANGUAGE = [
   '英文',
   '中文',
   'GitHub'
 ]
 
-export const webpLanguage = [
+export const APP_LANGUAGE = [
   'EN',
   'CN',
   'Git'
@@ -19,6 +19,10 @@ export const webpLanguage = [
 // Git 仓库地址, 没有填空字符串
 export const GIT_REPO_URL = 'https://github.com/xjh22222228/nav'
 
+// 错误图标, 图标地址访问不了时显示
+// 建议使用网络地址，放在您任何服务器上, 减少入侵
+export const ERROR_ICON = 'assets/img/transparent.gif'
+
 // 网站底部描述, 可以是 HTML
 // 可以是版权信息，备案号
 export const FOOTER_DESC = ''
@@ -35,7 +39,6 @@ export const BACKGROUND_LINEAR = [
   'linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)',
   'linear-gradient(147deg, #FFE53B 0%, #FF2525 74%)',
   'linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%)',
-  'linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)',
   'linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%)',
   'linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%)',
   'linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%)',
@@ -50,8 +53,9 @@ export const BACKGROUND_LINEAR = [
   'linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)',
   'linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)',
   'linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%)',
-  'linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%)',
   'linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%)',
-  'linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%)',
-  'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)'
+  'linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)',
+  'linear-gradient(132deg, #F4D03F 0%, #16A085 100%)',
+  'linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)',
+  'linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)'
 ]

data/node/official.ts

@@ -1,11 +1,14 @@
+const DEFAULT_ICON = 'assets/icon/frontend/076.png'
+
 export default {
   title: '生态系统',
+  icon: DEFAULT_ICON,
   nav: [
     {
+      icon: DEFAULT_ICON,
       subtitle: '官方',
       nav: [
         {
-          icon: 'assets/icon/frontend/076.png',
           name: 'Node.js',
           desc: 'Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时',
           link: 'http://nodejs.cn',
@@ -16,7 +19,6 @@ export default {
           ]
         },
         {
-          icon: 'assets/icon/frontend/077.png',
           name: 'npm',
           desc: 'npm是JavaScript世界的包管理工具,并且是 Node.js 平台的默认包管理工具',
           link: 'https://www.npmjs.com/',
@@ -32,19 +34,16 @@ export default {
       subtitle: '模块',
       nav: [
         {
-          icon: 'assets/icon/frontend/110.png',
           name: 'urllib',
           desc: '在复杂的世界中请求HTTP(s)URL',
           link: 'https://github.com/node-modules/urllib',
         },
         {
-          icon: 'assets/icon/frontend/110.png',
           name: 'formstream',
           desc: 'multipart / form-data编码流，用于文件上传的帮助程序。',
           link: 'https://github.com/node-modules/formstream',
         },
         {
-          icon: 'assets/icon/frontend/110.png',
           name: 'validate-npm-package-name',
           desc: '给我一个字符串，我会告诉你它是否是有效的npm软件包名称',
           link: 'https://github.com/npm/validate-npm-package-name',
@@ -118,4 +117,4 @@ export default {
       ]
     }
   ]
-}
+}

data/utilityTool/gui.ts

@@ -2,7 +2,7 @@ export default {
   title: 'GUI软件',
   nav: [
     {
-      subtitle: '',
+      subtitle: 'GUI',
       nav: [
         {
           icon: 'https://typora.io/img/favicon-48.png',

src/app/app.component.ts

@@ -42,6 +42,6 @@ export class AppComponent {
     script.src = TONGJI_URL
     script.id = 'tongji_url'
     script.async = true
-    document.documentElement.appendChild(script)
+    document.head.appendChild(script)
   }
 }

src/styles.scss

@@ -102,6 +102,9 @@ em {
   width: 1000px;
   margin: 0 auto;
 }
+.cursor-pointer {
+  cursor: pointer;
+}
 
 /* 搜索高亮关键字 */
 b {

src/utils/index.ts

@@ -1,6 +1,6 @@
-import nav from '../../data'
+import WEBSITE_LIST from '../../data'
 import qs from 'qs'
-import { BACKGROUND_LINEAR } from '../../config'
+import { BACKGROUND_LINEAR, ERROR_ICON } from '../../config'
 
 export function debounce(func, wait, immediate) {
   let timeout
@@ -81,7 +81,7 @@ export function totalWeb(): number {
       }
     }
   }
-  r(nav)
+  r(WEBSITE_LIST)
 
   return total
 }
@@ -105,7 +105,7 @@ export function randomBgImg() {
 }
 
 export function onImgError(e: any) {
-  e.target.src = 'assets/img/transparent.gif'
+  e.target.src = ERROR_ICON
 }
 
 export function queryString() {
@@ -115,15 +115,15 @@ export function queryString() {
   let id = parseInt(parseQs.id) || 0
   let page = parseInt(parseQs.page) || 0
 
-  if (page > nav.length - 1) {
-    page = nav.length - 1;
+  if (page > WEBSITE_LIST.length - 1) {
+    page = WEBSITE_LIST.length - 1;
     id = 0;
   } else {
     page = page;
-    if (id <= nav[page].nav.length - 1) {
+    if (id <= WEBSITE_LIST[page].nav.length - 1) {
       id = id;
     } else {
-      id = nav[page].nav.length - 1;
+      id = WEBSITE_LIST[page].nav.length - 1;
     }
   }
 
@@ -134,3 +134,33 @@ export function queryString() {
     page
   }
 }
+
+export function getWebsiteList() {
+  let webSiteList = WEBSITE_LIST
+  const scriptElAll = document.querySelectorAll('script')
+  const scriptUrl = scriptElAll[scriptElAll.length - 1].src
+  const storageScriptUrl = window.localStorage.getItem('s_url')
+
+  // 更新数据
+  if (storageScriptUrl !== scriptUrl) {
+    window.localStorage.clear()
+    window.localStorage.setItem('s_url', scriptUrl)
+    return webSiteList
+  }
+
+  try {
+    const w = window.localStorage.getItem('website')
+    const json = JSON.parse(w)
+    if (Array.isArray(json)) {
+      webSiteList = json
+    }
+  } catch {}
+
+  return webSiteList
+}
+
+export function setWebsiteList(v) {
+  if (!v) return
+
+  window.localStorage.setItem('website', JSON.stringify(v))
+}

src/view/app/default/app.component.ts

@@ -1,7 +1,7 @@
 import nav from '../../../../data';
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { webpLanguage } from '../../../../config';
+import { APP_LANGUAGE } from '../../../../config';
 import { onImgError, queryString } from '../../../utils';
 
 @Component({
@@ -16,7 +16,7 @@ export default class WebpComponent {
   id: number = 0;
   page: number = 0;
   open: boolean = false;
-  language: string[] = webpLanguage;
+  language: string[] = APP_LANGUAGE;
 
   ngOnInit () {
     this.activatedRoute.queryParams.subscribe(() => {

src/view/index/default/index.component.html

@@ -10,21 +10,23 @@
       *ngIf="showInput"
       (blur)="showInput = false"
     />
+
     <nav class="top-nav user-select-none">
       <a 
-        *ngFor="let item of nav; let i = index;" 
+        *ngFor="let item of websiteList; let i = index;" 
         (click)="handleCilckNav(i)" 
         [class.active]="page === i" 
         class="ripple-btn">
         {{ item.title }}
       </a>
     </nav>
+
     <section class="index-section user-select-none">
       <aside class="sidebar" id="sidebar">
         <ul>
           <li 
             class="tag" 
-            *ngFor="let item of nav[page].nav; let i = index" 
+            *ngFor="let item of websiteList[page].nav; let i = index" 
             [class.active]="id === i" 
             (click)="handleSidebarNav(i)">
             <a class="ripple-btn" *ngIf="item.title">{{ item.title }}</a>
@@ -36,15 +38,32 @@
           </a>
         </div>
       </aside>
+
       <div class="main" id="main" (scroll)="handleScroll($event)">
         <app-loading *ngIf="searchLoading"></app-loading>
         
-        <ul *ngIf="list.length && list[0].nav">
-          <li *ngFor="let item of list">
+        <ul *ngIf="currentList.length && currentList[0].nav">
+          <li *ngFor="let item of currentList; let i=index">
             <div class="title-wrapper" *ngIf="item.subtitle">
               <h2 class="block-title">
-                {{ item.subtitle }} x {{ item.nav.length }}
+                <span
+                  (click)="onCollapse(item, i)"
+                  class="cursor-pointer"
+                >
+                  {{ item.subtitle }} x {{ item.nav.length }}
+                </span>
+
+                <img
+                  src="assets/img/down-arrow.svg"
+                  class="down-arrow"
+                  [class.active]="item.collapsed" 
+                  draggable="false"
+                  alt=""
+                  (click)="onCollapse(item, i)"
+                />
+
                 <a
+                  *ngIf="GIT_REPO_URL"
                   [href]="GIT_REPO_URL + '/tree/master/data'"
                   class="edit"
                   target="_blank"
@@ -53,14 +72,22 @@ <h2 class="block-title">
                 >
                 </a>
               </h2>
+
+              <img
+                *ngIf="item.icon && item.showSideIcon !== false"
+                [src]="item.icon"
+                class="side-logo"
+                alt="" 
+              />
             </div>
-            <div class="row">
+
+            <div class="row" [class.hide]="item.collapsed">
               <div class="click-btn" *ngFor="let el of item.nav">
                 <a [href]="el.link" target="_blank" rel="noopener noreferer">
                   <div class="top">
                     <img
-                      *ngIf="el.icon || item.icon; else icon"
-                      [src]="el.icon || item.icon"
+                      *ngIf="el.icon || item.icon || websiteList[page].nav[id].icon; else icon"
+                      [src]="el.icon || item.icon || websiteList[page].nav[id].icon"
                       alt=""
                       class="icon"
                       (error)="onImgError($event)"
@@ -72,6 +99,7 @@ <h2 class="block-title">
                   </div>
                   <div class="desc" [innerHtml]="el.desc"></div>
                 </a>
+
                 <div class="mark" *ngIf="el.language && el.language.length > 0">
                   <div class="button-box">
                     <a 
@@ -108,7 +136,10 @@ <h2 class="block-title">
           </li>
         </ul>
   
-        <app-no-data *ngIf="list.length && list[0].nav && !list[0].nav.length"></app-no-data>
+        <app-no-data
+          *ngIf="currentList.length && currentList[0].nav && !currentList[0].nav.length"
+        >
+        </app-no-data>
       </div>
     </section>
   </main>