Merge branch 'data'

README.md

@@ -60,7 +60,8 @@
 - [√] 支持自定义引擎搜索。
 - [√] 纯静态, 提供自动化部署功能。
 - [√] 完全开源，轻松定制化。
-- [√] 多款主题。
+- [√] 多款主题切换。
+- [√] 支持暗黑模式。
 
 
 ## 贡献

config/index.ts

@@ -5,12 +5,17 @@
  */
 import { ISearchEngineProps, ThemeType } from '../src/types'
 
-// 主题: light | sim
-export const THEME: ThemeType = 'sim'
+// 网站标题
+export const TITLE = '发现导航 - 精选实用导航网站'
+
+// 默认主题: light | sim
+export const THEME: ThemeType = 'light'
+
+// 海报图, 只支持 sim 主题
+export const POSTER_IMAGE = 'assets/img/wallpaper.jpg'
 
 // 搜索引擎列表, 为空时不显示搜索引擎
-// 以下系统内置了一些，需要其他的自行添加
-// 自定义引擎 icon 建议使用网络图标 减少入侵
+// 自定义引擎 icon 请使用网络图标
 export const SEARCH_ENGINE_LIST: ISearchEngineProps[] = [
   {
     name: '站内',
@@ -52,15 +57,12 @@ export const SEARCH_ENGINE_LIST: ISearchEngineProps[] = [
   }
 ]
 
-// 网站标题
-export const TITLE = '发现导航 - 精选实用导航网站'
-
 // Git 仓库地址, 没有填空字符串
 export const GIT_REPO_URL = 'https://github.com/xjh22222228/nav'
 
 // 错误图标, 图标地址访问不了时显示
 // 建议使用网络地址，放在您任何服务器上, 减少入侵
-export const ERROR_ICON = 'assets/img/transparent.gif'
+export const ERROR_ICON = ''
 
 // 网站底部描述, 可以是 HTML
 // 可以是版权信息，备案号
@@ -81,6 +83,7 @@ export const APP_LANGUAGE = [
   'Git'
 ]
 
+// 只支持 light 主题
 // http://www.nav3.cn/#/index?q=grabient
 export const BACKGROUND_LINEAR = [
   'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',

data/frontend/javascript.ts

@@ -814,6 +814,12 @@ export default {
             'https://github.com/apache/incubator-echarts'
           ]
         },
+        {
+          icon: 'https://avatars1.githubusercontent.com/u/1562726?s=200&v=4',
+          name: 'd3',
+          desc: '借助SVG，Canvas和HTML使数据栩栩如生。',
+          url: 'https://github.com/d3/d3',
+        },
       ]
     },
     {

data/node/module.ts

@@ -613,6 +613,12 @@ export default {
           desc: 'Node.js的HTTP请求记录器中间件',
           url: 'https://github.com/expressjs/morgan',
         },
+        {
+          icon: 'https://avatars0.githubusercontent.com/u/9271229?s=200&v=4',
+          name: 'jsdom',
+          desc: '与Node.js一起使用的各种Web标准的JavaScript实现',
+          url: 'https://github.com/jsdom/jsdom',
+        },
       ]
     },
   ]

data/utilityTool/devops.ts

@@ -5,6 +5,11 @@ const nav = {
     {
       title: '开发神器',
       nav: [
+        {
+          name: 'releasly',
+          desc: '在新的开源版本发布时收到通知，直接发送到您的电子邮件中。',
+          url: 'https://www.releasly.co/',
+        },
         {
           name: 'Convert cURL',
           desc: '将curl命令转换为Python，JavaScript，PHP，R，Go，Rust，Dart，JSON，Ansible，Elixir。',

data/utilityTool/other.ts

@@ -162,6 +162,12 @@ export default {
           desc: '收集来自世界各地的5000多个公共IPTV频道',
           url: 'https://github.com/iptv-org/iptv',
         },
+        {
+          icon: 'https://www.linshiyouxiang.net/public/zh-CN/img/favicon.ico',
+          name: '临时邮箱',
+          desc: '10分钟邮箱，临时邮箱，临时邮，临时电子邮箱，24小时邮箱，一次性邮箱，匿名邮箱，安全邮箱',
+          url: 'https://www.linshiyouxiang.net/',
+        },
       ]
     },
   ]

package.json

 {
   "name": "nav",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "author": "xiejiahe",
   "bugs": {
     "url": "https://github.com/xjh22222228/nav/issues"

src/app/app.module.ts

@@ -12,10 +12,10 @@ import LightComponent from '../view/index/light/index.component'
 import SimComponent from '../view/index/sim/index.component'
 import WebpComponent from '../view/app/default/app.component'
 import { FixbarComponent } from '../components/fixbar/index.component'
+import { MultipleSiteComponent } from '../components/multiple-site/index.component'
 import { FooterComponent } from '../components/footer/footer.component'
 import { IconGitComponent } from '../components/icon-git/icon-git.component'
 import { NoDataComponent } from '../components/no-data/no-data.component'
-import { LoadingComponent } from '../components/loading/loading.component'
 import { SearchEngineComponent } from '../components/search-engine/search-engine.component'
 
 const appRoutes: Routes = [
@@ -45,10 +45,10 @@ const appRoutes: Routes = [
     SimComponent,
     WebpComponent,
     FixbarComponent,
+    MultipleSiteComponent,
     FooterComponent,
     IconGitComponent,
     NoDataComponent,
-    LoadingComponent,
     SearchEngineComponent
   ],
   imports: [

src/assets/img/light.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="1608359352079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1246" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M728.064 573.44a164.864 164.864 0 1 0-164.864 164.864 164.864 164.864 0 0 0 164.864-164.864z" fill="#F4CA1C" p-id="1247"></path><path d="M512.5632 771.584a258.43712 258.43712 0 1 1 258.43712-258.43712A258.72896 258.72896 0 0 1 512.5632 771.584z m0-448.86016a190.42816 190.42816 0 1 0 190.4128 190.40256 190.63808 190.63808 0 0 0-190.4128-190.42304z m1.13664-128.67584a34.00192 34.00192 0 0 1-34.00192-34.00704V95.44704a34.00704 34.00704 0 0 1 68.00896 0V160.0512a34.00704 34.00704 0 0 1-34.00704 33.9968z m0 768.512a34.00192 34.00192 0 0 1-34.00192-34.00192V863.9488a34.00704 34.00704 0 1 1 68.00896 0v64.60928a34.00192 34.00192 0 0 1-34.00704 34.00192z m414.85824-416.55296H863.9488a34.00704 34.00704 0 1 1 0-68.00896h64.60928a34.00704 34.00704 0 0 1 0 68.00896z m-768.512 0H95.44704a34.00704 34.00704 0 0 1 0-68.00896H160.0512a34.00704 34.00704 0 0 1 0 68.00896z m600.81664-248.86784a34.00192 34.00192 0 0 1-24.064-58.04544l45.69088-45.68576a34.00192 34.00192 0 0 1 48.08192 48.08704L784.896 287.1808a33.88416 33.88416 0 0 1-24.03328 9.9584zM217.45152 840.5504a34.00704 34.00704 0 0 1-24.064-58.05568l45.68576-45.68064a34.00704 34.00704 0 1 1 48.10752 48.08192l-45.68576 45.68064a33.91488 33.91488 0 0 1-24.04352 9.97376z m589.10208 0a33.90976 33.90976 0 0 1-24.0384-9.9584l-45.696-45.696a34.00704 34.00704 0 1 1 48.08704-48.09728l45.68576 45.68064a34.00704 34.00704 0 0 1-24.04352 58.07104zM263.13728 297.1392a33.88416 33.88416 0 0 1-24.064-9.96352l-45.68576-45.68576a34.00192 34.00192 0 1 1 48.08704-48.08192L287.1808 239.104a34.00192 34.00192 0 0 1-24.04352 58.0352z" fill="#595BB3" p-id="1248"></path></svg>
\ No newline at end of file

src/components/fixbar/index.component.html

 <div class="fixbar">
-  <div class="wrapper" (click)="collapse()">
+  <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="collapse()">
     <i class="iconfont iconweibiaoti25 collapse" [class.active]="collapsed"></i>
   </div>
 
-  <!-- <div class="wrapper" (click)="toggleMode()">
-    <i class="iconfont icondark" [class.iconA]="isDark" [class.dark]="!isDark"></i>
-  </div> -->
+  <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="toggleMode()">
+    <i class="iconfont icondark dark" *ngIf="!isDark"></i>
+    <img class="iconfont icondark" src="assets/img/light.svg" *ngIf="isDark">
+  </div>
 
-  <div class="wrapper" (click)="scrollTop()">
-    <i class="iconfont iconjiantouarrow483 icon arrow"></i>
+  <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="scrollTop()">
+    <i class="iconfont iconjiantouarrow483 arrow"></i>
   </div>
 </div>

src/components/fixbar/index.component.scss

@@ -3,6 +3,7 @@
   position: fixed;
   bottom: 30px;
   right: 15px;
+  user-select: none;
 
   .wrapper {
     width: 40px;
@@ -23,6 +24,11 @@
     }
   }
 
+  img {
+    width: 25px;
+    height: 25px;
+  }
+
   i {
     transition: .1s linear;
     display: inline-block;

src/components/fixbar/index.component.ts

 import { Component, Output, EventEmitter, Input } from '@angular/core'
+import { isDark as isDarkFn, randomBgImg } from '../../utils'
 
 @Component({
   selector: 'app-fixbar',
@@ -8,10 +9,26 @@ import { Component, Output, EventEmitter, Input } from '@angular/core'
 export class FixbarComponent {
 
   @Input() collapsed: boolean
+  @Input() randomBg: boolean
+  @Input() selector: string
   @Output() onCollapse = new EventEmitter()
-  isDark: boolean = false
+  isDark: boolean = isDarkFn()
+
+  ngOnInit() {
+    if (isDarkFn()) {
+      document.body.classList.add('dark-container')
+    }
+  }
 
   scrollTop() {
+    if (this.selector) {
+      const el = document.querySelector(this.selector)
+      if (el) {
+        el.scrollTop = 0
+      }
+      return
+    }
+
     window.scrollTo({
       top: 0,
       behavior: 'smooth'
@@ -24,5 +41,14 @@ export class FixbarComponent {
 
   toggleMode() {
     this.isDark = !this.isDark
+    window.localStorage.setItem('IS_DARK', String(Number(this.isDark)))
+    document.body.classList.toggle('dark-container')
+
+    if (this.isDark) {
+      const el = document.getElementById('random-light-bg')
+      el?.parentNode?.removeChild?.(el)
+    } else {
+      this.randomBg && randomBgImg()
+    }
   }
 }

src/components/footer/footer.component.html

-<footer class="footer" [class]="className" >
+<footer class="footer dark-text" [class]="className" >
   <div class="total" [ngStyle]="{marginBottom: !FOOTER_DESC && '5px'}">
     共收录 {{ totalWeb }} 个网站
   </div>

src/components/loading/loading.component.html

-<div class="loading">
-  <img src="assets/img/loading.gif" alt="" />
-</div>

src/components/loading/loading.component.scss

-.loading {
-  z-index: 6666;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgb(251, 251, 251);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-}

src/components/loading/loading.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-loading',
-  templateUrl: './loading.component.html',
-  styleUrls: ['./loading.component.scss']
-})
-export class LoadingComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/components/multiple-site/index.component.html

+<div class="mark dark-item-active" *ngIf="dataSource && dataSource.language && dataSource.language.length > 0">
+  <div class="button-box">
+    <a 
+      [href]="dataSource.language[0]" 
+      class="zh" 
+      target="_blank" 
+      *ngIf="dataSource.language[0]" 
+      rel="noopener noreferer"
+    >
+      {{ language[0] }}
+    </a>
+    <a 
+      [href]="dataSource.language[1]" 
+      class="zh" 
+      target="_blank" 
+      *ngIf="dataSource.language[1]" 
+      rel="noopener noreferer"
+    >
+      {{ language[1] }}
+    </a>
+    <a 
+      [href]="dataSource.language[2]" 
+      class="zh" 
+      target="_blank" 
+      *ngIf="dataSource.language[2]" 
+      rel="noopener noreferer"
+    >
+      {{ language[2] }}
+    </a>
+  </div>
+</div>

src/components/multiple-site/index.component.scss

+.mark {
+  z-index: 28;
+  position: absolute;
+  bottom: -50px;
+  left: 0;
+  width: 100%;
+  padding: 10px 0 5px 0px;
+  background: #fbfbfb;
+  cursor: auto;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  transition: .1s linear;
+
+  .button-box {
+    width: 100%;
+    text-align: center;
+  }
+
+  a {
+    display: inline-block;
+    position: relative;
+    width: 50px;
+    font-size: 12px;
+    padding: 3px 0;
+    border: none;
+    background: #2db7f5;
+    color: #fff;
+    border-radius: 3px;
+    overflow: hidden;
+
+    &:not(:nth-last-child(1)) {
+      margin-right: 10px;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: #000;
+      opacity: 0;
+    }
+
+    &:active:after {
+      opacity: .2;
+    }
+  }
+
+  .zh {
+    background: #26a2ff;
+  }
+}

src/components/multiple-site/index.component.ts

+import { Component, Input } from '@angular/core'
+import { INDEX_LANGUAGE } from '../../../config'
+import { INavFourProp } from '../../types'
+
+@Component({
+  selector: 'app-multiple-site',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss']
+})
+export class MultipleSiteComponent {
+  @Input() dataSource: INavFourProp
+
+  language: string[] = INDEX_LANGUAGE
+}

src/components/no-data/no-data.component.html

-<div class="no-result">
+<div class="no-result dark-text">
   对不起，没有找到您想要的结果~
   <div class="back">
     <span (click)="goBack()">Back</span>

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

 <div class="search-engine" *ngIf="SEARCH_ENGINE_LIST && SEARCH_ENGINE_LIST.length > 0">
-  <div class="input-wrapper">
+  <div class="input-wrapper dark-bg dark-border-color">
     <div
       class="left-icon"
       (click)="toggleEngine($event)"
@@ -9,6 +9,7 @@
 
     <input
       id="search-engine-input"
+      class="dark-input"
       type="text"
       autofocus
       [placeholder]="currentEngine.placeholder || ''"
@@ -16,7 +17,7 @@
       (keyup)="onKey($event)"
     />
 
-    <i class="search-icon iconfont iconsousuo" (click)="triggerSearch()"></i>
+    <i class="search-icon iconfont iconsousuo dark-text" (click)="triggerSearch()"></i>
   </div>
 
   <div class="engine-main" *ngIf="showEngine">

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

@@ -23,17 +23,14 @@ $width: 500px;
       border-color: transparent;
       font-size: 16px;
       transition: all .3s;
+      background-color: transparent;
 
       &::placeholder {
         font-size: 14px;
       }
 
-      &:hover {
-        border-color: #40a9ff;
-      }
-
       &:focus {
-        border-color: #40a9ff;
+        border-color: #40a9ff !important;
         box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
       }
     }

src/dark.scss

-.dark {
+.dark-container {
+  .dark {
 
-  .sim-bg {
-    background-color: #0d1117 !important;
+    &-primary {
+      color: #58a6ff !important;
+      font-weight: 600;
+    }
+  
+    &-input {
+      color: #f0f6fc !important;
+      border-color: #21262d !important;
+  
+      &::placeholder {
+        color: #c9d1d9 !important;
+      }
+  
+      &:focus {
+        color: #c9d1d9 !important;
+      }
+    }
+  
+    &-title {
+      color: #c9d1d9 !important;
+      font-weight: 600 !important;
+    }
+  
+    &-bg {
+      background-color: #0d1117 !important;
+    }
+
+    &-text {
+      color: #6e7681 !important;
+    }
+  
+    &-text-active {
+      color: #c9d1d9 !important;
+      font-weight: 600;
+    }
+  
+    &-border-color {
+      border-color: #30363d !important;
+    }
+  
+    &-item-active {
+      background-color: #21262d !important;
+      border-color: #21262d !important;
+      color: #c9d1d9 !important;
+      font-weight: 600;
+    }
+
+    &-scrollbar {
+      &::-webkit-scrollbar {
+        background-color: #0d1117 !important;
+      }
+    }
+  
+    // fix-bar
+    &-action-hover:hover {
+      background-color: #c9d1d9 !important;
+      
+      & > * {
+        color: #fff !important;
+      }
+    }
   }
 }

src/styles.scss

@@ -96,10 +96,7 @@ em {
 .touch-active:active {
   background: rgba(0, 0, 0, .2) !important;
 }
-.container {
-  width: 1000px;
-  margin: 0 auto;
-}
+
 .cursor-pointer {
   cursor: pointer;
 }

src/types/index.d.ts

@@ -8,6 +8,7 @@ export interface INavFourProp {
   name: string
   desc: string
   url?: string
+  language?: string|null|undefined[]
 }
 
 export interface INavThreeProp {

src/utils/index.ts

@@ -91,8 +91,14 @@ export function totalWeb(): number {
   return total
 }
 
+let randomTimer
 export function randomBgImg() {
+  if (isDark()) return
+
+  clearInterval(randomTimer)
+
   const el = document.createElement('div')
+  el.id = 'random-light-bg'
   el.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;z-index:-3;transition: 1s linear;'
   el.style.backgroundImage = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)]
   document.body.appendChild(el)
@@ -106,11 +112,16 @@ export function randomBgImg() {
     }, 1000)
   }
 
-  setInterval(setBg, 10000)
+  randomTimer = setInterval(setBg, 10000)
 }
 
 export function onImgError(e: any) {
-  e.target.src = ERROR_ICON
+  if (ERROR_ICON) {
+    e.target.src = ERROR_ICON
+  } else {
+    const el = e.target
+    el.parentNode.removeChild(el)
+  }
 }
 
 export function queryString() {
@@ -225,3 +236,8 @@ export function imgErrorInRemove(e) {
   const el = e.currentTarget;
   el?.parentNode?.removeChild?.(el)
 }
+
+export function isDark(): boolean {
+  const isDark = Boolean(Number(window.localStorage.getItem('IS_DARK')))
+  return isDark
+}

src/utils/ripple.ts

@@ -21,7 +21,7 @@ export function setAnnotate(querySelector = '.top-nav .ripple-btn') {
 
   const annotation = annotate(elList[page], {
     type: 'underline',
-    color: 'red',
+    color: '#f9826c',
     padding: 3,
     strokeWidth: 3
   })

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

@@ -15,7 +15,8 @@
         *ngFor="let item of nav; let i = index;" 
         (click)="handleCilckNav(i)" 
         [class.active]="page === i" 
-        class="nav-title">
+        class="nav-title"
+      >
         {{ item.title }}
       </div>
     </nav>
@@ -44,7 +45,6 @@
                 <img
                   *ngIf="el.icon || item.icon; else icon"
                   [src]="el.icon || item.icon"
-                  alt=""
                   class="icon"
                   (error)="onImgError($event)"
                 >

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

 <div class="index-wrapper">
-  <main class="homepage container">
-    <div
-      class="fixed-collapse"
-      (click)="onCollapseAll()"
-      [class.active]="websiteList[page].nav[id].collapsed"
+  <main class="homepage dark-border-color">
+    <app-fixbar
+      (onCollapse)="onCollapseAll()"
+      [collapsed]="websiteList[page].nav[id].collapsed"
+      selector=".main"
+      [randomBg]="true"
     >
-      <i class="iconfont iconweibiaoti25"></i>
-    </div>
+    </app-fixbar>
 
-    <nav class="top-nav user-select-none">
+    <nav class="top-nav user-select-none dark-border-color dark-bg">
       <a 
         *ngFor="let item of websiteList; let i = index;" 
         (click)="handleCilckTopNav(i)" 
         [class.active]="page === i" 
-        class="ripple-btn"
+        [class.dark-text-active]="page === i" 
+        class="ripple-btn dark-text"
       >
         {{ item.title }}
       </a>
     </nav>
 
-    <section class="index-section user-select-none">
-      <aside class="sidebar" id="sidebar">
+    <section class="index-section user-select-none dark-bg">
+      <aside class="sidebar dark-bg dark-border-color" id="sidebar">
         <ul>
           <li 
-            class="tag" 
-            *ngFor="let item of websiteList[page].nav; let i = index" 
+            class="tag dark-text" 
             [class.active]="id === i" 
+            [class.dark-item-active]="id === i" 
             (click)="handleSidebarNav(i)"
+            *ngFor="let item of websiteList[page].nav; let i = index" 
           >
             <a class="ripple-btn" *ngIf="item.title">{{ item.title }}</a>
           </li>
         </ul>
       </aside>
 
-      <div class="main">
+      <div class="main dark-scrollbar">
         <app-search-engine (onSearch)="onSearch($event)"></app-search-engine>
  
         <ul *ngIf="currentList.length && currentList[0].nav">
           <li *ngFor="let item of currentList; let i=index">
-            <div class="title-wrapper" *ngIf="item.title">
+            <div class="title-wrapper dark-border-color" *ngIf="item.title">
               <h2 class="block-title">
                 <span
                   (click)="onCollapse(item, i)"
-                  class="cursor-pointer"
+                  class="cursor-pointer dark-primary"
                 >
                   {{ item.title }} x {{ item.nav.length }}
                 </span>
@@ -64,55 +66,21 @@
             </div>
 
             <div class="row" *ngIf="!item.collapsed">
-              <div class="click-btn" *ngFor="let el of item.nav">
+              <div class="click-btn dark-border-color" *ngFor="let el of item.nav">
                 <a [href]="el.url" target="_blank" rel="noopener noreferer">
                   <div class="top">
                     <img
                       *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"
+                      class="icon dark-border-color"
                       (error)="onImgError($event)"
                     >
-                    <ng-template #icon>
-                      <span class="icon"></span>
-                    </ng-template>
-                    <em class="name" [innerHtml]="el.name"></em>
+                    <em class="name dark-primary" [innerHtml]="el.name" [title]="el.name"></em>
                   </div>
-                  <div class="desc" [innerHtml]="el.desc"></div>
+                  <div class="desc dark-border-color dark-text" [innerHtml]="el.desc"></div>
                 </a>
 
-                <div class="mark" *ngIf="el.language && el.language.length > 0">
-                  <div class="button-box">
-                    <a 
-                      [href]="el.language[0]" 
-                      class="zh" 
-                      target="_blank" 
-                      *ngIf="el.language[0]" 
-                      rel="noopener noreferer"
-                    >
-                      {{ language[0] }}
-                    </a>
-                    <a 
-                      [href]="el.language[1]" 
-                      class="zh" 
-                      target="_blank" 
-                      *ngIf="el.language[1]" 
-                      rel="noopener noreferer"
-                    >
-                      {{ language[1] }}
-                    </a>
-                    <a 
-                      [href]="el.language[2]" 
-                      class="zh" 
-                      target="_blank" 
-                      *ngIf="el.language[2]" 
-                      rel="noopener noreferer"
-                    >
-                      {{ language[2] }}
-                    </a>
-                  </div>
-                </div>
+                <app-multiple-site [dataSource]="ele"></app-multiple-site>
               </div>
             </div>
           </li>
@@ -128,3 +96,5 @@
 
   <app-footer></app-footer>
 </div>
+
+<div class="layer-bg dark-bg"></div>

src/view/index/light/index.component.scss

+.layer-bg {
+  z-index: -1;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 .index-wrapper {
   display: flex;
   flex-direction: column;
@@ -6,39 +15,15 @@
 }
 
 .homepage {
+  width: 1000px;
+  margin: 0 auto;
   flex: 1;
   position: relative;
   background: rgb(251, 251, 251);
   border-radius: 5px;
   overflow: hidden;
   transition: .1s linear;
-
-  .fixed-collapse {
-    z-index: 99999;
-    position: absolute;
-    bottom: 30px;
-    right: 30px;
-    width: 39px;
-    height: 39px;
-    background: #eee;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    transform: rotate(-270deg);
-    transition: .1s linear;
-    overflow: hidden;
-
-    &.active {
-      transform: rotate(-360deg);
-    }
-
-    .iconfont {
-      font-size: 22px;
-      color: #666;
-    }
-  }
+  border: 1px solid transparent;
 
   .top-nav {
     padding: 10px;
@@ -137,7 +122,7 @@
 
     .name {
       display: inline-block;
-      font-size: 16px;
+      font-size: 15px;
       margin-left: 5px;
       width: calc(100% - 50px);
       white-space: nowrap;

src/view/index/light/index.component.ts

 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
-import { INDEX_LANGUAGE, GIT_REPO_URL } from '../../../../config'
+import { GIT_REPO_URL } from '../../../../config'
 import { INavProps, INavThreeProp } from '../../../types'
 import {
   debounce,
@@ -30,7 +30,6 @@ export default class HomeComponent {
   page: number = 0
   searchKeyword: string = ''
   showInput = false
-  language: string[] = INDEX_LANGUAGE
   GIT_REPO_URL: string = GIT_REPO_URL
 
   ngOnInit () {

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

 <div class="sim">
-  <div class="wallpaper">
-    <h1 class="title">{{ title }}</h1>
-    <h2 class="description">这里收录多达 <b>{{ totalWeb }}</b> 个优质网站， 助您工作、学习和生活</h2>
+  <div class="wallpaper" [ngStyle]="{ 'background-image': 'url(' + POSTER_IMAGE + ')' }">
+    <h1 class="title dark-title">{{ title }}</h1>
+    <h2 class="description dark-text-active">这里收录多达 <b>{{ totalWeb }}</b> 个优质网站， 助您工作、学习和生活</h2>
     <app-search-engine (onSearch)="onSearch($event)"></app-search-engine>
   </div>
 
-  <nav class="top-nav user-select-none">
+  <nav class="top-nav user-select-none dark-border-color">
     <a 
       *ngFor="let item of websiteList; let i = index;" 
       [class.active]="page === i" 
-      class="ripple-btn"
+      [class.dark-text-active]="page === i" 
+      class="ripple-btn dark-text"
       (click)="handleCilckTopNav(i)" 
     >
       {{ item.title }}
@@ -17,20 +18,21 @@
   </nav>
 
   <div class="wrapper">
-    <nav class="sidebar" id="sidebar">
+    <nav class="sidebar dark-bg" id="sidebar">
       <div *ngIf="websiteList[page].nav.length">
         <div 
           *ngFor="let item of websiteList[page].nav; let i = index" 
           (click)="handleSidebarNav(i)" 
           [class.active]="id === i" 
-          class="ripple-btn"
+          [class.dark-item-active]="id === i" 
+          class="ripple-btn dark-text"
         >
           {{ item.title || websiteList[page].title }}
         </div>
       </div>
     </nav>
 
-    <aside class="site-box">
+    <aside class="site-box dark-bg">
       <app-no-data
         *ngIf="currentList.length && currentList[0].nav && !currentList[0].nav.length"
       >
@@ -38,15 +40,24 @@
 
       <div *ngFor="let item of currentList; let i=index">
         <div class="nav-wrapper">
-          <div class="title" *ngIf="item.title" (click)="onCollapse(item, i)">
+          <div
+            class="title dark-primary dark-border-color"
+            *ngIf="item.title"
+            (click)="onCollapse(item, i)"
+          >
             {{ item.title }} x {{ item.nav.length }}
 
             <i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
           </div>
 
           <ul class="ul" *ngIf="!item.collapsed">
-            <li *ngFor="let ele of item.nav">
-              <a class="url-box" [href]="ele.url" target="_blank" rel="noopener noreferer">
+            <li *ngFor="let ele of item.nav" class="dark-border-color">
+              <a
+                class="url-box"
+                [href]="ele.url"
+                target="_blank"
+                rel="noopener noreferer"
+              >
                 <div class="box-wrapper">
                   <div class="left">
                     <img
@@ -55,48 +66,15 @@
                       class="icon"
                       (error)="onImgError($event)"
                     >
-                    <ng-template #icon>
-                      <span class="icon"></span>
-                    </ng-template>
                   </div>
   
-                  <div class="right" [innerHtml]="ele.name"></div>
+                  <div class="right dark-primary" [innerHtml]="ele.name" [title]="ele.name"></div>
                 </div>
 
-                <div class="desc" [innerHtml]="ele.desc"></div>
+                <div class="desc dark-text" [innerHtml]="ele.desc"></div>
               </a>
 
-              <div class="mark" *ngIf="ele.language && ele.language.length > 0">
-                <div class="button-box">
-                  <a 
-                    [href]="ele.language[0]" 
-                    class="zh" 
-                    target="_blank" 
-                    *ngIf="ele.language[0]" 
-                    rel="noopener noreferer"
-                  >
-                    {{ language[0] }}
-                  </a>
-                  <a 
-                    [href]="ele.language[1]" 
-                    class="zh" 
-                    target="_blank" 
-                    *ngIf="ele.language[1]" 
-                    rel="noopener noreferer"
-                  >
-                    {{ language[1] }}
-                  </a>
-                  <a 
-                    [href]="ele.language[2]" 
-                    class="zh" 
-                    target="_blank" 
-                    *ngIf="ele.language[2]" 
-                    rel="noopener noreferer"
-                  >
-                    {{ language[2] }}
-                  </a>
-                </div>
-              </div>
+              <app-multiple-site [dataSource]="ele"></app-multiple-site>
             </li>
           </ul>
         </div>
@@ -112,4 +90,4 @@
 >
 </app-fixbar>
 
-<div class="sim-bg"></div>
+<div class="sim-bg dark-bg"></div>

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

@@ -40,7 +40,7 @@ $width: 1200px;
 
   .wallpaper {
     height: 350px;
-    background: url("../../../assets/img/wallpaper.jpg") no-repeat;
+    background-repeat: no-repeat;
     background-position: top center;
     display: flex;
     justify-content: center;
@@ -139,7 +139,7 @@ $width: 1200px;
         &:hover {
           box-shadow: 2px 2px 25px -5px rgba(0,0,0,.2);
 
-          .mark {
+          ::ng-deep .mark {
             bottom: 0 !important;
           }
         }
@@ -166,10 +166,13 @@ $width: 1200px;
         .right {
           flex: 1;
           margin-left: 10px;
-          font-size: 16px;
+          font-size: 15px;
           font-weight: 600;
           color: #273a52;
           align-self: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         .desc {
@@ -179,62 +182,6 @@ $width: 1200px;
       }
     }
   }
-
-  .mark {
-    z-index: 28;
-    position: absolute;
-    bottom: -50px;
-    left: 0;
-    width: 100%;
-    padding: 10px 0 5px 0px;
-    background: #fbfbfb;
-    cursor: auto;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    transition: .1s linear;
-
-    .button-box {
-      width: 100%;
-      text-align: center;
-    }
-
-    a {
-      display: inline-block;
-      position: relative;
-      width: 50px;
-      font-size: 12px;
-      padding: 3px 0;
-      border: none;
-      background: #2db7f5;
-      color: #fff;
-      border-radius: 3px;
-      overflow: hidden;
-
-      &:not(:nth-last-child(1)) {
-        margin-right: 10px;
-      }
-
-      &:after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: #000;
-        opacity: 0;
-      }
-
-      &:active:after {
-        opacity: .2;
-      }
-    }
-
-    .zh {
-      background: #26a2ff;
-    }
-  }
 }
 
 ::ng-deep .sim-footer  {

src/view/index/sim/index.component.ts

 import { Component } from '@angular/core'
 import { Router, ActivatedRoute } from '@angular/router'
-import { INDEX_LANGUAGE, GIT_REPO_URL, TITLE } from '../../../../config'
+import { GIT_REPO_URL, TITLE, POSTER_IMAGE } from '../../../../config'
 import { INavProps, INavThreeProp } from '../../../types'
 import {
   debounce,
@@ -31,10 +31,10 @@ export default class HomeComponent {
   id: number = 0
   page: number = 0
   searchKeyword: string = ''
-  language: string[] = INDEX_LANGUAGE
   GIT_REPO_URL: string = GIT_REPO_URL
   totalWeb: number = totalWeb()
   title: string = TITLE
+  POSTER_IMAGE: string = POSTER_IMAGE
 
   ngOnInit() {
     const initList = () => {