diff --git a/README.md b/README.md index 57c649e8781b728b5394b4c3750b9cc7b05eac81..d44307ce39bf8c190a691d4dab20547b56efa2bf 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,8 @@ - [√] 支持自定义引擎搜索。 - [√] 纯静态, 提供自动化部署功能。 - [√] 完全开源，轻松定制化。 -- [√] 多款主题。 +- [√] 多款主题切换。 +- [√] 支持暗黑模式。 ## 贡献 diff --git a/config/index.ts b/config/index.ts index b11054b72932918164ce1f06bdf2b7297da7f838..4a9b7806f58eb195831d733623f5a63cd83aad13 100644 --- a/config/index.ts +++ b/config/index.ts @@ -5,12 +5,17 @@ */ import { ISearchEngineProps, ThemeType } from '../src/types' -// 主题: light | 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,9 +57,6 @@ export const SEARCH_ENGINE_LIST: ISearchEngineProps[] = [ } ] -// 网站标题 -export const TITLE = '发现导航 - 精选实用导航网站' - // Git 仓库地址, 没有填空字符串 export const GIT_REPO_URL = 'https://github.com/xjh22222228/nav' @@ -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%)', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a9670e0f0ed344ef8ebade77ee92017162ce7d75..be8dfc6077cd537db5529bae472ccd2c28b4726f 100644 --- a/src/app/app.module.ts +++ b/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: [ diff --git a/src/assets/img/light.svg b/src/assets/img/light.svg new file mode 100644 index 0000000000000000000000000000000000000000..c910707dee9088eda62ec9c753ff126974b342c8 --- /dev/null +++ b/src/assets/img/light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/img/transparent.gif b/src/assets/img/transparent.gif deleted file mode 100644 index f55d454174c86cf2a8bf76baec8c872de08c8992..0000000000000000000000000000000000000000 Binary files a/src/assets/img/transparent.gif and /dev/null differ diff --git a/src/components/fixbar/index.component.html b/src/components/fixbar/index.component.html index 4ea59f92b221e0e0c0789d6ae09558f87c735c01..fa02935b9fe94a1786b27a1a2bc1a2f4eb27b0ad 100644 --- a/src/components/fixbar/index.component.html +++ b/src/components/fixbar/index.component.html @@ -1,13 +1,14 @@
-
+
- +
+ + +
-
- +
+
diff --git a/src/components/fixbar/index.component.scss b/src/components/fixbar/index.component.scss index 403f68758d375d21846c7d78f422b90884eb3583..208872330948088e5a7847c60a6dc10d90cd93ff 100644 --- a/src/components/fixbar/index.component.scss +++ b/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; diff --git a/src/components/fixbar/index.component.ts b/src/components/fixbar/index.component.ts index 0d943f8b310d16488a735f42a2d58d6bf422236b..f470ea34af7d88ad2b7cca47743be9f07ebd626e 100644 --- a/src/components/fixbar/index.component.ts +++ b/src/components/fixbar/index.component.ts @@ -1,4 +1,5 @@ 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() + } } } diff --git a/src/components/footer/footer.component.html b/src/components/footer/footer.component.html index 89ef03a769553c44376858af67f63425e6faa253..57cb5f861f9fbfc1692ff13c4215c4e2a05a0051 100644 --- a/src/components/footer/footer.component.html +++ b/src/components/footer/footer.component.html @@ -1,4 +1,4 @@ -