From 948d79f48b7aa6ffa50f177389953be03bd062ea Mon Sep 17 00:00:00 2001 From: Keaifa Date: Sat, 20 Jul 2024 14:26:54 +0800 Subject: [PATCH 1/3] [bugfix]: fix theme is invalidated after refresh --- web-app/src/app/app.component.ts | 8 ++- .../system-config/system-config.component.ts | 20 ++----- web-app/src/app/service/theme.service.ts | 59 +++++++++++++++++++ 3 files changed, 70 insertions(+), 17 deletions(-) create mode 100644 web-app/src/app/service/theme.service.ts diff --git a/web-app/src/app/app.component.ts b/web-app/src/app/app.component.ts index cb1d008b9db..1446f90ac3c 100644 --- a/web-app/src/app/app.component.ts +++ b/web-app/src/app/app.component.ts @@ -5,7 +5,7 @@ import { ALAIN_I18N_TOKEN, TitleService, VERSION as VERSION_ALAIN } from '@delon import { environment } from '@env/environment'; import { NzModalService } from 'ng-zorro-antd/modal'; import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version'; - +import { ThemeService } from "./service/theme.service"; @Component({ selector: 'app-root', template: ` ` @@ -17,6 +17,7 @@ export class AppComponent implements OnInit { private router: Router, private titleSrv: TitleService, private modalSrv: NzModalService, + private themeService: ThemeService, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService ) { renderer.setAttribute(el.nativeElement, 'ng-alain-version', VERSION_ALAIN.full); @@ -46,5 +47,10 @@ export class AppComponent implements OnInit { this.modalSrv.closeAll(); } }); + // 主题设置 + const storedTheme = localStorage.getItem('theme'); + if(storedTheme) { + this.themeService.changeTheme(storedTheme); + } } } diff --git a/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts b/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts index 16aec313486..c8544ce364b 100644 --- a/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts +++ b/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts @@ -26,6 +26,7 @@ import { finalize } from 'rxjs/operators'; import { SystemConfig } from '../../../../pojo/SystemConfig'; import { GeneralConfigService } from '../../../../service/general-config.service'; +import {ThemeService} from "../../../../service/theme.service"; @Component({ selector: 'app-system-config', @@ -38,6 +39,7 @@ export class SystemConfigComponent implements OnInit { private notifySvc: NzNotificationService, private configService: GeneralConfigService, private settings: SettingsService, + private themeService: ThemeService, @Inject(DOCUMENT) private doc: any, @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService ) {} @@ -103,22 +105,8 @@ export class SystemConfigComponent implements OnInit { } ); } + changeTheme(theme: string): void { - const style = this.doc.createElement('link'); - style.type = 'text/css'; - style.rel = 'stylesheet'; - if (theme == 'dark') { - style.id = 'dark-theme'; - style.href = 'assets/style.dark.css'; - } else if (theme == 'compact') { - style.id = 'compact-theme'; - style.href = 'assets/style.compact.css'; - } else { - const dom = document.getElementById('dark-theme'); - if (dom) { - dom.remove(); - } - } - this.doc.body.append(style); + this.themeService.changeTheme(theme); } } diff --git a/web-app/src/app/service/theme.service.ts b/web-app/src/app/service/theme.service.ts new file mode 100644 index 00000000000..43c8ec62a69 --- /dev/null +++ b/web-app/src/app/service/theme.service.ts @@ -0,0 +1,59 @@ +import {Inject, Injectable} from '@angular/core'; +import {DOCUMENT} from "@angular/common"; + +@Injectable({ + providedIn: 'root' +}) +export class ThemeService { + private readonly themeKey = 'theme'; + + constructor(@Inject(DOCUMENT) private doc: any) { } + + + setTheme(theme: string): void { + localStorage.setItem(this.themeKey, theme); + } + + getTheme(): string | null { + return localStorage.getItem(this.themeKey); + } + + clearTheme(): void { + localStorage.removeItem(this.themeKey); + } + + changeTheme(theme: string): void { + const style = this.doc.createElement('link'); + style.type = 'text/css'; + style.rel = 'stylesheet'; + + if (theme === 'dark') { + style.id = 'dark-theme'; + style.href = 'assets/style.dark.css'; + } else if (theme === 'compact') { + style.id = 'compact-theme'; + style.href = 'assets/style.compact.css'; + } else { + const darkDom = this.doc.getElementById('dark-theme'); + if (darkDom) darkDom.remove(); + + const compactDom = this.doc.getElementById('compact-theme'); + if (compactDom) compactDom.remove(); + + this.clearTheme(); + + return; + } + + this.setTheme(theme); + + // 移除旧的主题 + const existingLink = this.doc.getElementById(style.id); + if (existingLink) { + existingLink.remove(); + } + + // 添加新的主题 + this.doc.body.appendChild(style); + } +} From 8a22c96a7c51975170cc986eb8c16d440b99741c Mon Sep 17 00:00:00 2001 From: Keaifa Date: Sat, 20 Jul 2024 17:41:23 +0800 Subject: [PATCH 2/3] [bugfix]: fix theme is invalidated after refresh --- web-app/src/app/app.component.ts | 4 +-- .../system-config/system-config.component.ts | 2 +- web-app/src/app/service/theme.service.ts | 28 +++++++++++++++++-- 3 files changed, 28 insertions(+), 6 deletions(-) diff --git a/web-app/src/app/app.component.ts b/web-app/src/app/app.component.ts index 1446f90ac3c..dab632e9868 100644 --- a/web-app/src/app/app.component.ts +++ b/web-app/src/app/app.component.ts @@ -5,7 +5,7 @@ import { ALAIN_I18N_TOKEN, TitleService, VERSION as VERSION_ALAIN } from '@delon import { environment } from '@env/environment'; import { NzModalService } from 'ng-zorro-antd/modal'; import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version'; -import { ThemeService } from "./service/theme.service"; +import { ThemeService } from './service/theme.service'; @Component({ selector: 'app-root', template: ` ` @@ -49,7 +49,7 @@ export class AppComponent implements OnInit { }); // 主题设置 const storedTheme = localStorage.getItem('theme'); - if(storedTheme) { + if (storedTheme) { this.themeService.changeTheme(storedTheme); } } diff --git a/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts b/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts index c8544ce364b..f8cca553529 100644 --- a/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts +++ b/web-app/src/app/routes/setting/settings/system-config/system-config.component.ts @@ -26,7 +26,7 @@ import { finalize } from 'rxjs/operators'; import { SystemConfig } from '../../../../pojo/SystemConfig'; import { GeneralConfigService } from '../../../../service/general-config.service'; -import {ThemeService} from "../../../../service/theme.service"; +import { ThemeService } from '../../../../service/theme.service'; @Component({ selector: 'app-system-config', diff --git a/web-app/src/app/service/theme.service.ts b/web-app/src/app/service/theme.service.ts index 43c8ec62a69..a9d2e6f3918 100644 --- a/web-app/src/app/service/theme.service.ts +++ b/web-app/src/app/service/theme.service.ts @@ -1,5 +1,25 @@ -import {Inject, Injectable} from '@angular/core'; -import {DOCUMENT} from "@angular/common"; +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + + +import { Inject, Injectable } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; @Injectable({ providedIn: 'root' @@ -7,7 +27,9 @@ import {DOCUMENT} from "@angular/common"; export class ThemeService { private readonly themeKey = 'theme'; - constructor(@Inject(DOCUMENT) private doc: any) { } + constructor(@Inject(DOCUMENT) private doc: any) { + + } setTheme(theme: string): void { From 4c45ad32d825d0c8eea9994226819cd3e480d8f4 Mon Sep 17 00:00:00 2001 From: Keaifa Date: Sat, 20 Jul 2024 23:23:05 +0800 Subject: [PATCH 3/3] [bugfix]: fix theme is invalidated after refresh --- web-app/src/app/app.component.ts | 4 +++- web-app/src/app/service/theme.service.ts | 12 ++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/web-app/src/app/app.component.ts b/web-app/src/app/app.component.ts index dab632e9868..4f75cfae024 100644 --- a/web-app/src/app/app.component.ts +++ b/web-app/src/app/app.component.ts @@ -5,7 +5,9 @@ import { ALAIN_I18N_TOKEN, TitleService, VERSION as VERSION_ALAIN } from '@delon import { environment } from '@env/environment'; import { NzModalService } from 'ng-zorro-antd/modal'; import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version'; + import { ThemeService } from './service/theme.service'; + @Component({ selector: 'app-root', template: ` ` @@ -47,7 +49,7 @@ export class AppComponent implements OnInit { this.modalSrv.closeAll(); } }); - // 主题设置 + // set theme const storedTheme = localStorage.getItem('theme'); if (storedTheme) { this.themeService.changeTheme(storedTheme); diff --git a/web-app/src/app/service/theme.service.ts b/web-app/src/app/service/theme.service.ts index a9d2e6f3918..1201831066c 100644 --- a/web-app/src/app/service/theme.service.ts +++ b/web-app/src/app/service/theme.service.ts @@ -17,9 +17,8 @@ * under the License. */ - -import { Inject, Injectable } from '@angular/core'; import { DOCUMENT } from '@angular/common'; +import { Inject, Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' @@ -27,10 +26,7 @@ import { DOCUMENT } from '@angular/common'; export class ThemeService { private readonly themeKey = 'theme'; - constructor(@Inject(DOCUMENT) private doc: any) { - - } - + constructor(@Inject(DOCUMENT) private doc: any) {} setTheme(theme: string): void { localStorage.setItem(this.themeKey, theme); @@ -69,13 +65,13 @@ export class ThemeService { this.setTheme(theme); - // 移除旧的主题 + // remove old theme const existingLink = this.doc.getElementById(style.id); if (existingLink) { existingLink.remove(); } - // 添加新的主题 + // add new theme this.doc.body.appendChild(style); } }