feat(toolkits/pro) Upgrading the Dependency of the tinyvue and tinyng templates (#115)

* feat(toolkits/pro) Upgrading the Dependency of the tinyvue and tinyng templates

Author: liberty-zlk

packages/toolkits/pro/template/tinyng/angular.json

@@ -34,8 +34,8 @@
               "src/assets"
             ],
             "styles": [
-              "node_modules/@opentiny/ng/themes/styles.css",
-              "node_modules/@opentiny/ng/themes/theme-default.css",
+              "node_modules/@opentiny/ng-themes/styles.css",
+              "node_modules/@opentiny/ng-themes/theme-default.css",
               "src/app/@shared/modules/grid/style/grid.scss",
               "src/styles.scss"
             ],

packages/toolkits/pro/template/tinyng/package.json

@@ -23,15 +23,15 @@
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
     "@opentiny/hwc-client": "^0.0.14",
-    "@opentiny/ng": "^14.0.0-alpha.2",
+    "@opentiny/ng": "^1.0.1",
     "bootstrap": "^5.1.3",
     "color": "^4.2.1",
+    "core-js": "^3.29.0",
+    "html-loader": "^1.3.0",
     "ngx-markdown": "^14.0.1",
     "rxjs": "^7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4",
-    "core-js": "^3.29.0",
-    "html-loader": "^1.3.0"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.0.1",

packages/toolkits/pro/template/tinyng/src/app/@shared/components/header-collapsed-button/header-collapsed-button.component.html

@@ -1,14 +1,14 @@
 <span class="t-pro-header-collapsed-button" (mouseenter)="SideMenuDrawer(num-1)" (click)="SideMenuDrawer(num+1)"
   [ngStyle]="{ marginLeft: hideLogo?'16px':null }">
-  <ti-icon name="list-outline"></ti-icon>
+  <ti-svg name="list-outline"></ti-svg>
 </span>
 <div class="left-menu-container" [hidden]="collapsed" (mouseleave)="SideMenuDrawer(num)">
   <ti-leftmenu [(active)]="active" [(reloadState)]="reloadState" [toggleable]="toggleable" [(collapsed)]="collapsed"
     class="left-menu">
     <ti-leftmenu-level1 [item]="m1" *ngFor="let m1 of menu">
       <ti-leftmenu-item *ngIf="m1.title">
         <div class="menu-item">
-          <ti-icon [name]="m1.menuIcon" class="menu-icon"></ti-icon>{{ m1.title }}
+          <ti-svg [name]="m1.menuIcon" class="menu-icon"></ti-svg>{{ m1.title }}
         </div>
       </ti-leftmenu-item>
       <ti-leftmenu-level2 [item]="m2" *ngFor="let m2 of m1.children">

packages/toolkits/pro/template/tinyng/src/app/@shared/components/header-collapsed-button/header-collapsed-button.component.scss

@@ -31,18 +31,18 @@
   .ti3-leftmenu-level2-active:before {
     background-color: var(--ti-base-color-brand-6);
   }
-
+  
   ::ng-deep .ti3-leftmenu-panel {
     color: var(--ti-common-color-text-primary);
     font-size: 14px;
   }
 
   ::ng-deep .ti3-leftmenu-level1-item.ti3-leftmenu-level1-active-item {
     background-color: var(--ti-common-color-bg-light-normal);
-
+    color: #fff;
     &:hover {
       background-color: var(--ti-common-color-bg-light-normal);
-      color: var(--ti-common-color-text-highlight);
+      color: #fff;
     }
   }
 
@@ -57,10 +57,10 @@
 
   ::ng-deep .ti3-leftmenu-level2.ti3-leftmenu-level2-active {
     background-color: var(--ti-common-color-bg-light-normal);
-
+    color: #fff;
     &:hover {
       background-color: var(--ti-common-color-bg-light-normal);
-      color: var(--ti-common-color-text-highlight);
+      color: #fff;
     }
   }
 

packages/toolkits/pro/template/tinyng/src/app/@shared/components/header/header-operation/header-notice/header-notice.component.html

@@ -3,7 +3,7 @@
     <span class="box-title-lable">{{ 'notice.messageCenter' | translate }}</span>
     <div class="box-title-links">
       <a tiNavigation target="_blank" rel="noopener noreferrer">
-        <ti-icon name="settings-sharp" class="icon-grey"></ti-icon>
+        <ti-svg name="settings-sharp" class="icon-grey"></ti-svg>
       </a>
     </div>
   </div>

packages/toolkits/pro/template/tinyng/src/app/@shared/components/header/header-operation/header-operation.component.html

@@ -11,7 +11,7 @@
     </span>
     <!-- 小分辨率下显示为icon图标 -->
     <span *ngIf="shrink" class="language-icon">
-      <ti-icon *ngIf="shrink" name="language-outline" class="tpicon-translation"></ti-icon>
+      <ti-svg *ngIf="shrink" name="language-outline" class="tpicon-translation"></ti-svg>
     </span>
     <ul tProBaseDropDownMenu class="t-pro-dropdown-menu t-pro-scrollbar item-width" role="menu">
       <li *ngFor="let item of languages" role="menuitem" class="menu-item"
@@ -28,7 +28,7 @@
   <a tiNavigation [href]="helpCenter" target="_blank" rel="noopener noreferrer" class="help-center">
     <span *ngIf="!shrink">{{ 'header.helpCenter' | translate }}</span>
     <!-- 小分辨率下显示为icon图标 -->
-    <ti-icon *ngIf="shrink" name="help-circle-outline" class="tpicon-helping"></ti-icon>
+    <ti-svg *ngIf="shrink" name="help-circle-outline" class="tpicon-helping"></ti-svg>
   </a>
   <!-- 个人中心 -->
   <div class="t-pro-operations-user" tProBaseDropDown [trigger]="'hover'" appendToBody tProBaseDropDownToggle>
@@ -55,7 +55,7 @@
   <div class="t-pro-operations-notice" tProBaseDropDown [trigger]="'click'" tProBaseDropDownToggle appendToBody
     [closeScope]="'blank'" (mouseenter)="showNoticeModal(true)" (mouseleave)="showNoticeModal(false)">
     <t-pro-base-badge [count]="noticeCount">
-      <ti-icon name="mail-outline" class="email-icon"></ti-icon>
+      <ti-svg name="mail-outline" class="email-icon"></ti-svg>
     </t-pro-base-badge>
     <t-pro-header-notice [show]="isShowNoticeModal" (showStatus)="parentStatus($event)" (countEvent)="handleNoticeCount($event)"></t-pro-header-notice>
   </div>

packages/toolkits/pro/template/tinyng/src/app/@shared/components/header/navbar/navbar.component.html

@@ -7,7 +7,7 @@
           [routerLinkActive]="['t-pro-active-link']" [ngClass]="{
             't-pro-active-title': currentUrl.indexOf(item.router) !== -1
           }">
-          <ti-icon [name]="item.menuIcon"></ti-icon>
+          <ti-svg [name]="item.menuIcon"></ti-svg>
           <span *ngIf="showTitle" style="margin-left: 8px">{{ item.title }}</span>
         </span>
         <ul tProBaseDropDownMenu [attr.class]="'t-pro-base-dropdown-menu t-pro-scrollbar t-pro-nav-' + mode"
@@ -32,7 +32,7 @@
           <span tProBaseDropDownToggle class="t-pro-nav-title t-pro-base-dropdown-item" [ngClass]="{
               't-pro-active-link': currentUrl.indexOf(item.router) !== -1
             }">
-            <ti-icon [name]="item.menuIcon"></ti-icon>
+            <ti-svg [name]="item.menuIcon"></ti-svg>
             <span *ngIf="showTitle" style="margin-left: 8px; flex: 1 1 0%">{{ item.title }}</span>
             <ti-icon name="angle-right"></ti-icon>
           </span>

packages/toolkits/pro/template/tinyng/src/app/@shared/components/header/navbar/navbar.component.scss

@@ -29,7 +29,7 @@
       .t-pro-nav-title:hover {
         color: var(--ti-base-color-brand-6);
 
-        ti-icon {
+        ti-svg {
           color: var(--ti-base-color-brand-6);
         }
       }
@@ -38,7 +38,7 @@
         color: var(--ti-base-color-brand-2);
         font-weight: 700;
 
-        ti-icon {
+        ti-svg {
           color: var(--ti-base-color-brand-2);
           font-weight: 700;
         }

packages/toolkits/pro/template/tinyng/src/app/@shared/components/helptip/helptip.component.html

@@ -1,4 +1,4 @@
 <span class="t-pro-helptop">
   <ng-content *ngIf="!label"></ng-content>
-  <ti-icon class="t-pro-help-icon" name="help-circle-outline" [tiTip]="iconTip" [tiTipPosition]="iconTipPosition"></ti-icon>
+  <ti-svg class="t-pro-help-icon" name="help-circle-outline" [tiTip]="iconTip" [tiTipPosition]="iconTipPosition"></ti-svg>
 </span>

packages/toolkits/pro/template/tinyng/src/app/@shared/components/login/login.component.html

@@ -27,7 +27,7 @@
   </div>
 
   <div class="t-pro-language-wrapper" tProBaseDropDown [trigger]="'hover'" tProBaseDropDownToggle appendToBody>
-    <ti-icon name="language-outline"></ti-icon>
+    <ti-svg name="language-outline"></ti-svg>
     <span class="font-change">{{ 'loginPage.language' | translate }}</span>
     <ul tProBaseDropDownMenu class="t-pro-dropdown-menu t-pro-scrollbar" role="menu" style="width: 120px">
       <li *ngFor="let item of languages" role="menuitem" [ngClass]="{ 't-pro-active-lang': language === item.code }"