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
opentiny · Nov 1, 2023 · 7b6db16 · 7b6db16
1 parent 16dde3a
commit 7b6db16
Show file tree

Hide file tree

Showing 29 changed files with 87 additions and 77 deletions.
diff --git a/packages/toolkits/pro/template/tinyng/angular.json b/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"
             ],

diff --git a/packages/toolkits/pro/template/tinyng/package.json b/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",

diff --git a/...src/app/@shared/components/header-collapsed-button/header-collapsed-button.component.html b/...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">

diff --git a/...src/app/@shared/components/header-collapsed-button/header-collapsed-button.component.scss b/...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;
     }
   }
 

diff --git a/...app/@shared/components/header/header-operation/header-notice/header-notice.component.html b/...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>

diff --git a/...tinyng/src/app/@shared/components/header/header-operation/header-operation.component.html b/...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>

diff --git a/...olkits/pro/template/tinyng/src/app/@shared/components/header/navbar/navbar.component.html b/...olkits/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>

diff --git a/...olkits/pro/template/tinyng/src/app/@shared/components/header/navbar/navbar.component.scss b/...olkits/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;
         }

diff --git a/...es/toolkits/pro/template/tinyng/src/app/@shared/components/helptip/helptip.component.html b/...es/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>
diff --git a/packages/toolkits/pro/template/tinyng/src/app/@shared/components/login/login.component.html b/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 }"

diff --git a/...nyng/src/app/@shared/components/multi-settings/side-settings/side-settings.component.html b/...nyng/src/app/@shared/components/multi-settings/side-settings/side-settings.component.html
@@ -3,7 +3,7 @@
   <div class="t-pro-options">
     <h3>
       {{ 'side-setting.layout' | translate }}
-      <ti-icon name="help-circle-outline" [tiTip]="helpContent"></ti-icon>
+      <ti-svg name="help-circle-outline" [tiTip]="helpContent"></ti-svg>
     </h3>
     <ti-alert [type]="'error'" [closeIcon]="false" [typeIcon]=false>{{ 'side-setting.notice' | translate }}</ti-alert>
   </div>
@@ -16,19 +16,19 @@ <h4>
     </div>
     <div class="t-pro-option-items">
       <div class="t-pro-option-item t-pro-side-bar-layout-item" (click)="handleLayoutClicked('sidebar')">
-        <ti-icon name="checkmark-circle" class="icon-green" [ngStyle]="{ display: layout === 'sidebar' ? '' : 'none' }"></ti-icon>
-        <ti-icon name="checkmark-circle" class="icon-grey"></ti-icon>
+        <ti-svg name="checkmark-circle" class="icon-green" [ngStyle]="{ display: layout === 'sidebar' ? '' : 'none' }"></ti-svg>
+        <ti-svg name="checkmark-circle" class="icon-grey"></ti-svg>
         <div class="option-desc">{{ 'side-setting.desc-sidebar' | translate }}</div>
       </div>
       <div class="t-pro-option-item t-pro-topnav-layout-item" (click)="handleLayoutClicked('topNav')">
-        <ti-icon name="checkmark-circle" class="icon-green" [ngStyle]="{ display: layout === 'topNav' ? '' : 'none' }"></ti-icon>
-        <ti-icon name="checkmark-circle" class="icon-grey"></ti-icon>
+        <ti-svg name="checkmark-circle" class="icon-green" [ngStyle]="{ display: layout === 'topNav' ? '' : 'none' }"></ti-svg>
+        <ti-svg name="checkmark-circle" class="icon-grey"></ti-svg>
         <span class="icon-bg-white"></span>
         <div class="option-desc">{{ 'side-setting.desc-header' | translate }}</div>
       </div>
       <div class="t-pro-option-item t-pro-left-right-layout-item" (click)="handleLayoutClicked('left-right')">
-        <ti-icon name="checkmark-circle" class="icon-green" [ngStyle]="{ display: layout === 'left-right' ? '' : 'none' }"></ti-icon>
-        <ti-icon name="checkmark-circle" class="icon-grey"></ti-icon>
+        <ti-svg name="checkmark-circle" class="icon-green" [ngStyle]="{ display: layout === 'left-right' ? '' : 'none' }"></ti-svg>
+        <ti-svg name="checkmark-circle" class="icon-grey"></ti-svg>
         <div class="option-desc">{{ 'side-setting.desc-header-sidebar' | translate }}</div>
       </div>
     </div>
@@ -77,7 +77,7 @@ <h4>{{ 'side-setting.content-area' | translate }}</h4>
   <div class="t-pro-options">
     <button tiButton (click)="onCopyClicked()" color="primary">
       {{ 'side-setting.copy-config' | translate }}
-      <ti-icon name="copy-outline"></ti-icon>
+      <ti-svg name="copy-outline"></ti-svg>
     </button>
     <ti-alert class="alert-copy" [dismissOnTimeout]="3000" [(open)]="open" size="small">{{ 'side-setting.copy-summary' | translate }}</ti-alert>
   </div>

diff --git a/...its/pro/template/tinyng/src/app/@shared/components/personalize/personalize.component.html b/...its/pro/template/tinyng/src/app/@shared/components/personalize/personalize.component.html
@@ -14,7 +14,7 @@
       <div class="t-pro-item-title">{{ theme.name | translate }}</div>
       <div class="t-pro-item-content">{{ theme.feature | translate }}</div>
       <div class="t-pro-item-icon">
-        <ti-icon name="checkmark-sharp" [ngClass]="{'icon-green': theme.id === currentTheme}"></ti-icon>
+        <ti-svg name="checkmark-sharp" [ngClass]="{'icon-green': theme.id === currentTheme}"></ti-svg>
       </div>
     </div>
     <div class="t-pro-list-title content-space">
@@ -25,8 +25,8 @@
     <div class="t-pro-theme-box">
       <div *ngFor="let themes of LightTheme" class="t-pro-theme-item" [ngClass]="{'t-pro-dark': themes.isDark}">
         <div [style.backgroundColor]="themes.color" class="t-pro-color" (click)="selectColor('themes', themes)">
-          <ti-icon name="checkmark-sharp" *ngIf="themes.id === currentTheme">
-          </ti-icon>
+          <ti-svg name="checkmark-sharp" *ngIf="themes.id === currentTheme">
+          </ti-svg>
         </div>
       </div>
     </div>
@@ -35,10 +35,10 @@
       <div class="t-pro-theme-box">
         <div *ngFor="let item of ThemeDarkColor" class="t-pro-theme-item" [ngClass]="{'t-pro-dark': item.isDark}">
           <div [style.backgroundColor]="item.color" class="t-pro-color" (click)="selectDarkColor(item.color, item)">
-            <ti-icon name="checkmark-sharp" *ngIf="
+            <ti-svg name="checkmark-sharp" *ngIf="
                 customColor === item.color && customDark === item.isDark &&
                 currentTheme === themeType.Custom">
-            </ti-icon>
+            </ti-svg>
           </div>
         </div>
       </div>

diff --git a/...its/pro/template/tinyng/src/app/@shared/components/personalize/personalize.component.scss b/...its/pro/template/tinyng/src/app/@shared/components/personalize/personalize.component.scss
@@ -57,7 +57,7 @@
         color: #7bd06c;
       }
 
-      > ti-icon {
+      > ti-svg {
         padding-top: 3px;
         font-size: 20px;
         color: #dfe1e6;
@@ -83,7 +83,7 @@
         width: 26px;
         height: 26px;
 
-        > ti-icon {
+        > ti-svg {
           padding: 3px 0 0 3px;
           font-size: 20px;
           color: var(--ti-base-color-white);

diff --git a/.../toolkits/pro/template/tinyng/src/app/@shared/components/register/register.component.html b/.../toolkits/pro/template/tinyng/src/app/@shared/components/register/register.component.html
@@ -34,7 +34,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 }"

diff --git a/...oolkits/pro/template/tinyng/src/app/@shared/components/side-menu/side-menu.component.html b/...oolkits/pro/template/tinyng/src/app/@shared/components/side-menu/side-menu.component.html
@@ -3,7 +3,7 @@
   <ti-leftmenu-level1 [item]="m1" *ngFor="let m1 of data">
     <ti-leftmenu-item *ngIf="m1.title">
       <div class="menu-item">
-        <ti-icon [name]="m1.menuIcon" class="menu-icon"></ti-icon>
+        <ti-svg [name]="m1.menuIcon" class="menu-icon"></ti-svg>
         <span class="item-text">{{ m1.title }}</span>
       </div>
     </ti-leftmenu-item>

diff --git a/...ges/toolkits/pro/template/tinyng/src/app/@shared/modules/back-top/back-top.component.scss b/...ges/toolkits/pro/template/tinyng/src/app/@shared/modules/back-top/back-top.component.scss
@@ -1,4 +1,4 @@
-@import '~@opentiny/ng/themes/theme-default.css';
+@import '~@opentiny/ng-themes/theme-default.css';
 
 .t-pro-base-backtop {
   width: 40px;

diff --git a/packages/toolkits/pro/template/tinyng/src/app/@shared/modules/badge/badge.component.scss b/packages/toolkits/pro/template/tinyng/src/app/@shared/modules/badge/badge.component.scss
@@ -1,4 +1,4 @@
-@import '~@opentiny/ng/themes/theme-default.css';
+@import '~@opentiny/ng-themes/theme-default.css';
 
 @mixin status-color {
   &-danger {

diff --git a/...ges/toolkits/pro/template/tinyng/src/app/@shared/modules/progress/progress.component.scss b/...ges/toolkits/pro/template/tinyng/src/app/@shared/modules/progress/progress.component.scss
@@ -1,4 +1,4 @@
-@import '~@opentiny/ng/themes/theme-default.css';
+@import '~@opentiny/ng-themes/theme-default.css';
 
 :host {
   display: block;

diff --git a/packages/toolkits/pro/template/tinyng/src/app/@shared/modules/tags/tag.component.scss b/packages/toolkits/pro/template/tinyng/src/app/@shared/modules/tags/tag.component.scss
@@ -1,4 +1,4 @@
-@import '~@opentiny/ng/themes/theme-default.css';
+@import '~@opentiny/ng-themes/theme-default.css';
 
 :host {
   display: inline-block;

diff --git a/packages/toolkits/pro/template/tinyng/src/app/app.component.ts b/packages/toolkits/pro/template/tinyng/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { TiLocale, TiIconComponent } from '@opentiny/ng';
+import { TiLocale, TiSvgComponent } from '@opentiny/ng';
 import { DEFAULT_LANG, I18N_LANGUAGES } from '@config/tiny-pro';
 @Component({
   selector: 't-pro-app',
@@ -15,6 +15,6 @@ export class AppComponent {
     this.translate.use(this.currentLang);
     TiLocale.setLocale(this.currentLang === 'zh-cn' ? TiLocale.ZH_CN : TiLocale.EN_US); // tiny3国际化
     // 设置下载地址，全局生效
-    TiIconComponent.setPath('https://unpkg.com/[email protected]/dist/svg/');
+    TiSvgComponent.setPath('https://unpkg.com/[email protected]/dist/svg/');
   }
 }
diff --git a/...src/app/pages/console-home/widgets/user-info/user-info-head/user-info-head.component.scss b/...src/app/pages/console-home/widgets/user-info/user-info-head/user-info-head.component.scss
@@ -37,7 +37,8 @@
   display: inline-block;
 
   & > a {
-    color: #fff;
+    color: #fff !important;
+    cursor: pointer;
   }
 }
 
@@ -72,8 +73,9 @@
   > a {
     display: inline-block;
     width: 160px;
-    color: #fff;
+    color: #fff !important;
     margin-right: 8px;
+    cursor: pointer;
   }
 
   a.auth-status-warn {

diff --git a/.../template/tinyng/src/app/pages/result/widget/result-failure/result-failure.component.html b/.../template/tinyng/src/app/pages/result/widget/result-failure/result-failure.component.html
@@ -1,7 +1,7 @@
 <div class="result-failure">
   <div class="pay-failure-icon-container">
     <div class="pay-failure-icon-bg">
-      <ti-icon name="close-circle" class="pay-failure-icon"></ti-icon>
+      <ti-svg name="close-circle" class="pay-failure-icon"></ti-svg>
     </div>
   </div>
   <div class="pay-failure-text-container">

diff --git a/.../template/tinyng/src/app/pages/result/widget/result-success/result-success.component.html b/.../template/tinyng/src/app/pages/result/widget/result-success/result-success.component.html
@@ -1,7 +1,7 @@
 <div class="result-success">
   <div class="pay-succeed-icon-container">
     <div class="pay-succeed-icon-bg">
-      <ti-icon name="checkmark-circle" class="pay-succeed-icon"></ti-icon>
+      <ti-svg name="checkmark-circle" class="pay-succeed-icon"></ti-svg>
     </div>
   </div>
   <div class="pay-succeed-text-container">

diff --git a/...s/service-list/widgets/list-detail-content/contracts-table/contracts-table.component.html b/...s/service-list/widgets/list-detail-content/contracts-table/contracts-table.component.html
@@ -54,7 +54,7 @@
   <ti-modal-body>
     <div class="current-modal-container">
       <div>
-        <ti-icon name="warning" class="delete-warning-icon"></ti-icon>
+        <ti-svg name="warning" class="delete-warning-icon"></ti-svg>
       </div>
       <!-- 主内容 -->
       <div>
@@ -82,7 +82,7 @@
           />
         </div>
         <div *ngIf="open" class="input-alert" >
-          <ti-icon name="alert-circle"></ti-icon>
+          <ti-svg name="alert-circle"></ti-svg>
           <span>{{ 'serviceList.contracts.detailTable.alert' | translate }}</span>
         </div>
         <button

diff --git a/...s/service-list/widgets/list-detail-content/contracts-table/contracts-table.component.scss b/...s/service-list/widgets/list-detail-content/contracts-table/contracts-table.component.scss
@@ -52,7 +52,7 @@
   span {
     margin-left: 10px;
   }
-  ti-icon {
+  ti-svg {
     font-size: 20px;
     vertical-align: middle;
   }