opentiny · h-ivy · Sep 4, 2023 · Aug 8, 2023 · Aug 29, 2023 · Aug 29, 2023
diff --git a/packages/toolkits/pro/template/tinyng/package.json b/packages/toolkits/pro/template/tinyng/package.json
@@ -29,7 +29,9 @@
     "ngx-markdown": "^14.0.1",
     "rxjs": "^7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.4",
+    "core-js": "^3.29.0",
+    "html-loader": "^1.3.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.0.1",

diff --git a/packages/toolkits/pro/template/tinyng/src/app/@core/services/custom-theme.service.ts b/packages/toolkits/pro/template/tinyng/src/app/@core/services/custom-theme.service.ts
@@ -3,20 +3,18 @@ import { ThemeAddrPrefix, ThemeType } from 'src/app/@shared/models/theme';
 import { CustomStyle, textWhiteStyle } from '@config/tiny-pro';
 
 export class CustomThemeService {
-  changeCustomTheme(color: string, isDark: boolean) {
+  changeCustomTheme(color: string, isDark: boolean, themeId:any) {
     if (isDark) {
       setTimeout(() => {
-        TiTheme.loadCss(`${ThemeAddrPrefix}/tiny-dark-theme.css`, 'tiny3theme');
+        TiTheme.loadCss(
+          `${ThemeAddrPrefix}/${themeId}.css`,
+          'tiny3theme'
+        );
       });
     } else {
-      TiTheme.loadCss(`${ThemeAddrPrefix}/tiny-hws-theme.css`, 'tiny3theme');
+      // 加载默认主题不传入路径避免报错
+      TiTheme.loadCss('', 'tiny3theme');
     }
-
-    for (const style of CustomStyle) {
-      document.documentElement.style.setProperty(style, color);
-      document.body.style.setProperty('--ti-leftmenu-item-selected-border-left-color', 'red');
-    }
-
     // 自定义主题下显示字体颜色设置为#fff
     for (const style of textWhiteStyle) {
       document.documentElement.style.setProperty(style, '#fff');

diff --git a/packages/toolkits/pro/template/tinyng/src/app/@core/services/personalize.service.ts b/packages/toolkits/pro/template/tinyng/src/app/@core/services/personalize.service.ts
@@ -1,6 +1,11 @@
 import { Injectable } from '@angular/core';
 import { TiTheme } from '@opentiny/ng';
-import { TinyThemeConfigItems, DefaultTheme, ThemeAddrPrefix, ThemeType } from 'src/app/@shared/models/theme';
+import {
+  TinyThemeConfigItems,
+  DefaultTheme,
+  ThemeAddrPrefix,
+  ThemeType,
+} from 'src/app/@shared/models/theme';
 import { CustomStyle } from '@config/tiny-pro';
 import { CustomThemeService } from './custom-theme.service';
 
@@ -13,15 +18,17 @@ export class PersonalizeService {
       items: [],
     },
   ];
-
+  
   constructor(private customThemeService: CustomThemeService) {}
 
   initTheme(): void {
     // 添加Tiny相关主题
     this.addTinyTheme();
 
     // 主题设置
-    const theme = localStorage.getItem('t-pro-theme') ? JSON.parse(localStorage.getItem('t-pro-theme')!) : DefaultTheme;
+    const theme = localStorage.getItem('t-pro-theme')
+      ? JSON.parse(localStorage.getItem('t-pro-theme')!)
+      : DefaultTheme;
 
     if (theme.id === DefaultTheme.id) {
       this.setDefaultThemeStorage(theme);
@@ -30,12 +37,12 @@ export class PersonalizeService {
 
     // 添加setTimeout原因：页面link的样式会比import加载快
     // 因此loadCss加载的样式会被覆盖，添加setTimeout延迟执行
-    if (theme.id === ThemeType.Custom) {
-      const { brand, isDark } = theme.custom;
-      this.customThemeService.changeCustomTheme(brand, isDark);
-    } else {
+    if (theme.id !== ThemeType.Custom) {
       setTimeout(() => {
-        TiTheme.loadCss(`${ThemeAddrPrefix}/${theme.id}.css`, 'tiny3theme');
+        TiTheme.loadCss(
+          `${ThemeAddrPrefix}/${theme.id}.css`,
+          'tiny3theme'
+        );
       });
     }
   }
@@ -75,19 +82,20 @@ export class PersonalizeService {
       document.body.style.setProperty('--ti-leftmenu-item-selected-border-left-color', '');
     }
 
-    const theme = localStorage.getItem('t-pro-theme') ? JSON.parse(localStorage.getItem('t-pro-theme')!) : DefaultTheme;
+    const theme = localStorage.getItem('t-pro-theme')
+      ? JSON.parse(localStorage.getItem('t-pro-theme')!)
+      : DefaultTheme;
 
     // 需要保存之前设置过的自定义主题相关配置
     this.setDefaultThemeStorage(theme);
 
-    if (themeId === ThemeType.Custom) {
-      const { brand, isDark } = theme.custom;
-      this.customThemeService.changeCustomTheme(brand, isDark);
-    } else {
+    if (themeId !== ThemeType.Custom) {
       TiTheme.loadCss(`${ThemeAddrPrefix}/${themeId}.css`, 'tiny3theme');
     }
-
     const { brand, isDark } = theme.custom;
-    localStorage.setItem('t-pro-theme', JSON.stringify({ id: themeId, custom: { brand, isDark } }));
+    localStorage.setItem(
+      't-pro-theme',
+      JSON.stringify({ id: themeId, custom: { brand, isDark } })
+    );
   }
 }
diff --git a/...ages/toolkits/pro/template/tinyng/src/app/@shared/components/footer/footer.component.scss b/...ages/toolkits/pro/template/tinyng/src/app/@shared/components/footer/footer.component.scss
@@ -1,14 +1,15 @@
 .t-pro-footer {
-  height: 80px;
-  padding-top: 8px;
-  background-color: #f6f8f9;
+  height: 60px;
+  background-color: var(--ti-base-content-bg-color);
 
   .t-pro-footer-intro {
+    padding-top: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
+    letter-spacing: 0.5px;
     font-size: 14px;
-
+    
     .t-pro-production-name {
       a {
         color: var(--ti-base-color-common-5);

diff --git a/...tinyng/src/app/@shared/components/header/header-left-menu/header-left-menu.component.html b/...tinyng/src/app/@shared/components/header/header-left-menu/header-left-menu.component.html
@@ -1,9 +1,33 @@
 <div class="console-home">
-  <span class="divide-line"></span>
-  <span class="console-text">{{ 'header.console' | translate }}</span>
+  <div class="divide-line"></div>
+  <svg class="home-icon" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="top" transform="translate(-476.000000, -21.000000)">
+            <g id="编组-2" transform="translate(476.000000, 14.000000)">
+                <g id="console" transform="translate(0.000000, 7.000000)">
+                    <path d="M12.5128205,15.9030695 L9.94871795,15.9030695 C9.53846154,15.9030695 9.12820513,15.6122779 9.12820513,15.2245557 L9.12820513,11.5411955 C9.12820513,10.9596123 8.61538462,10.5718901 8.1025641,10.5718901 C7.58974359,10.5718901 7.07692308,10.9596123 7.07692308,11.4442649 L7.07692308,11.5411955 L7.07692308,15.2245557 C7.07692308,15.6122779 6.76923077,16 6.25641026,16 L3.69230769,16 C2.66666667,16 1.84615385,15.2245557 1.84615385,14.2552504 L1.84615385,9.31179321 C0.820512821,9.31179321 0,8.53634895 0,7.56704362 C0,7.08239095 0.205128205,6.59773829 0.615384615,6.30694669 L6.87179487,1.3634895 C7.48717949,0.878836834 8.51282051,0.878836834 9.12820513,1.3634895 L15.3846154,6.30694669 C15.7948718,6.59773829 16,6.98546042 16,7.47011309 C16,7.95476575 15.8974359,8.34248788 15.5897436,8.73021002 C15.2820513,9.11793215 14.7692308,9.31179321 14.2564103,9.31179321 L14.2564103,9.31179321 L14.2564103,14.2552504 C14.3589744,15.1276252 13.5384615,15.9030695 12.5128205,15.9030695 Z M10.6666667,14.4491115 L12.5128205,14.4491115 C12.6153846,14.4491115 12.7179487,14.3521809 12.7179487,14.2552504 L12.7179487,8.63327948 C12.7179487,8.43941842 12.8205128,8.24555735 12.9230769,8.14862682 C13.025641,8.05169628 13.2307692,7.95476575 13.4358974,7.95476575 L14.2564103,7.95476575 C14.3589744,7.95476575 14.3589744,7.95476575 14.4615385,7.85783522 C14.5641026,7.76090468 14.5641026,7.76090468 14.5641026,7.66397415 C14.5641026,7.66397415 14.5641026,7.56704362 14.4615385,7.47011309 L8.30769231,2.5266559 L8.30769231,2.5266559 C8.20512821,2.42972536 8.1025641,2.42972536 8,2.5266559 L1.64102564,7.37318255 C1.64102564,7.47011309 1.53846154,7.56704362 1.53846154,7.56704362 C1.53846154,7.66397415 1.64102564,7.76090468 1.74358974,7.76090468 L2.56410256,7.76090468 C2.97435897,7.76090468 3.38461538,8.05169628 3.38461538,8.53634895 L3.38461538,14.1583199 C3.38461538,14.2552504 3.48717949,14.3521809 3.58974359,14.3521809 L5.43589744,14.3521809 L5.43589744,11.2504039 C5.64102564,10.0872375 6.76923077,9.11793215 8.1025641,9.11793215 C9.53846154,9.11793215 10.6666667,10.184168 10.6666667,11.5411955 L10.6666667,14.4491115 Z" id="home" fill="currentColor" fill-rule="nonzero"></path>
+                    <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
+  <div class="console-text">{{ 'header.console' | translate }}</div>
   <ti-select [(ngModel)]="selectedRegion" (select)="regionChange($event)" [options]="regionItems | tProTranslate" class="region-select">
     <ng-template #item let-item>
-      <ti-icon *ngIf="item === selectedRegion" name="location" class="region-icon"></ti-icon>
+      <svg class="region-icon" *ngIf="item === selectedRegion" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>编组</title>
+        <g id="控件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="top备份" transform="translate(-571.000000, -22.000000)">
+                <g id="编组-2" transform="translate(466.000000, 14.000000)">
+                    <g id="编组" transform="translate(105.000000, 8.000000)">
+                        <path d="M8,3 C10.209139,3 12,4.790861 12,7 C12,8.47275933 10.6666667,10.8727593 8,14.2 C5.33333333,10.8727593 4,8.47275933 4,7 C4,4.790861 5.790861,3 8,3 Z M8,5.4 C7.1163444,5.4 6.4,6.1163444 6.4,7 C6.4,7.8836556 7.1163444,8.6 8,8.6 C8.8836556,8.6 9.6,7.8836556 9.6,7 C9.6,6.1163444 8.8836556,5.4 8,5.4 Z" id="合并形状" fill="currentColor"></path>
+                        <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+      </svg>
       <span>
         {{ item.label }}
       </span>

diff --git a/...tinyng/src/app/@shared/components/header/header-left-menu/header-left-menu.component.scss b/...tinyng/src/app/@shared/components/header/header-left-menu/header-left-menu.component.scss
@@ -7,23 +7,41 @@
   line-height: 10px;
   cursor: pointer;
 
+  > img {
+    margin-bottom: 2px;
+  }
+
   ::ng-deep .ti3-overflow-padding {
     font-size: 14px;
-    color: #575d6c;
+    display: flex;
+    align-items: center;
+    color: var(--ti-common-select-color) !important;
   }
 }
 
+
 .divide-line {
   height: 18px;
   padding-left: 28px;
-  border-left: 1px solid #dfe1e6;
+  border-left: 1px solid var(--ti-base-navbar-line-color);
+  img {
+    filter: drop-shadow(#ff0 100px 0);
+  }
+}
+
+.home-icon {
+  color: var(--ti-common-select-color);
 }
 
 .console-text {
   font-size: 14px;
-  color: #202e54;
+  color: var( --ti-common-title-color-top);
   min-width: 42px;
-  margin-right: 10px;
+  margin: 0 10px 0 8px;
+
+  &:hover {
+    color: var( --ti-common-title-color-top);
+  }
 }
 
 .region-select {
@@ -33,10 +51,18 @@
   padding: 0 8px 0 2px;
   border-radius: 16px;
   border: none;
-  background-color: #eff2f8 !important;
+  background-color: var(--ti-base-search-color) !important;
 }
 
 .region-icon {
   color: var(--ti-common-color-icon-normal);
   margin-right: var(--ti-common-space-base);
 }
+
+::ng-deep .ti3-select-dominator-dropdown-btn:after {
+  border-top: var(--ti-dominator-fold-icon-height) solid var(--ti-base-search-icon-color) !important;
+}
+
+::ng-deep .region-icon {
+  color: var(--ti-common-select-color) !important;
+}
diff --git a/.../template/tinyng/src/app/@shared/components/header/header-logo/header-logo.component.html b/.../template/tinyng/src/app/@shared/components/header/header-logo/header-logo.component.html
@@ -1,15 +1,15 @@
 <div class="t-pro-logo" [ngClass]="{ 't-pro-logo-shrink': shrink }" routerLink="/">
-  <span class="t-pro-logo-tiny">
-    <img src="assets/img/opentiny-logo.svg" alt="Tiny-Logo" />
-  </span>
-  <span class="t-pro-logo-text">OpenTiny</span>
+  <a class="t-pro-logo-tiny" href="/" title="OpenTiny">
+    <img src="assets/img/opentiny-logo.svg" />
+    <span class="t-pro-logo-text">OpenTiny</span>
+  </a>
   <span *ngIf="!shrink" class="t-pro-logo-page">
     <span class="divide-line"></span>
-    <img src="assets/img/page-logo.png" alt="Page-Logo" />
+    <img src="assets/img/page-logo.svg" alt="Page-Logo" />
     <span *ngIf="!shrink" class="t-pro-page-logo-text">TinyPro of NG</span>
   </span>
   <!-- 导航栏头部左侧控制台和region下拉框, leftRight布局下不展示 -->
   <ng-container *ngIf="!shrink && config.id !== 'leftRight'">
     <t-pro-header-left-menu></t-pro-header-left-menu>
   </ng-container>
-</div>
+</div>
diff --git a/.../template/tinyng/src/app/@shared/components/header/header-logo/header-logo.component.scss b/.../template/tinyng/src/app/@shared/components/header/header-logo/header-logo.component.scss
@@ -4,6 +4,7 @@
   height: 60px;
   line-height: 60px;
   padding-left: 10px;
+  background-color: var(--ti-common-color-header-bg-color);
 
   &.t-pro-logo-shrink {
     padding-left: 0;
@@ -17,6 +18,9 @@
   .t-pro-logo-tiny {
     display: flex;
     align-items: center;
+    color: #151b24;
+    text-decoration: none;
+    cursor: pointer;
 
     img {
       width: 53px;
@@ -38,25 +42,26 @@
   .divide-line {
     height: 18px;
     padding-left: 32px;
-    border-left: 1px solid #dfe1e6;
+    border-left: 1px solid var(--ti-base-navbar-line-color);
   }
-
+  
   .t-pro-logo-text {
     margin: 0 32px 0 12px;
     line-height: 32px;
     font-size: 23px;
-    color: #202e54;
+    color: var(--ti-common-title-color-top);
     font-weight: 700;
     vertical-align: middle;
     letter-spacing: 0.7px;
+    cursor: pointer;
   }
 
   .t-pro-page-logo-text {
     font-size: 16px;
     font-family: PingFang SC, PingFang SC-PingFang SC;
     font-weight: 400;
     text-align: left;
-    color: #202e54;
+    color: var(--ti-common-title-color-top);
     line-height: 22px;
     margin: 0 28px 0 10px;
     min-width: 130px;