chore: add data theme

src/app/core/i18n/en-US.ts

@@ -25,6 +25,8 @@ export const ENUS = {
   'app.home.theme.ms.desc': 'For microservice development style',
   'app.home.theme.yun': 'Yun',
   'app.home.theme.yun.desc': 'Let users focus more on business',
+  'app.home.theme.data': 'Data',
+  'app.home.theme.data.desc': 'Mainly dashboard and large screen data view',
   'app.header.menu.home': 'Home',
   'app.header.menu.docs': 'Docs',
   'app.header.menu.components': 'Components',

src/app/core/i18n/zh-CN.ts

@@ -25,6 +25,8 @@ export const ZHCN = {
   'app.home.theme.ms.desc': '面向微服务开发风格的主题',
   'app.home.theme.yun': '云',
   'app.home.theme.yun.desc': '将功能细节化让用户更聚焦业务',
+  'app.home.theme.data': '数据',
+  'app.home.theme.data.desc': '以仪表盘、大屏展示为主',
   'app.header.menu.home': '首页',
   'app.header.menu.docs': '文档',
   'app.header.menu.components': '组件',

src/app/routes/home/home.component.html

@@ -24,10 +24,10 @@ <h1 data-aos="fade-up" data-aos-once="true">NG-ALAIN</h1>
     </div>
   </div>
   <nz-carousel class="page-banner__img" nzAutoPlay>
-    @for (i of list; track $index) {
+    @for (i of allThemes; track $index) {
       <div nz-carousel-content>
-        <a href="{{ i.url }}" target="_blank">
-          <img src="./assets/screenshot/{{ i.type }}.png" />
+        <a [attr.href]="i.url" target="_blank">
+          <img src="./assets/screenshot/{{ i.screenshot }}" />
         </a>
       </div>
     }
@@ -118,7 +118,7 @@ <h3>{{ 'app.home.feature.demo' | i18n }}</h3>
   <div class="page">
     <h2>{{ 'app.home.theme' | i18n }}</h2>
     <div class="ant-row">
-      @for (t of themes; track $index) {
+      @for (t of bussionThemes; track $index) {
         <div class="ant-col-xs-24 ant-col-md-12">
           <a
             class="page-theme__item"
@@ -127,9 +127,9 @@ <h2>{{ 'app.home.theme' | i18n }}</h2>
             data-aos-delay="0"
             [attr.data-theme]="t"
           >
-            <img src="./assets/screenshot/{{ t }}.png" />
-            <h3>{{ 'app.home.theme.' + t | i18n }}</h3>
-            <p>{{ 'app.home.theme.' + t + '.desc' | i18n }}</p>
+            <img src="./assets/screenshot/{{ t.screenshot }}" />
+            <h3>{{ 'app.home.theme.' + t.type | i18n }}</h3>
+            <p>{{ 'app.home.theme.' + t.type + '.desc' | i18n }}</p>
           </a>
         </div>
       }

src/app/routes/home/home.component.ts

@@ -15,6 +15,13 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 import { I18NService } from '@core';
 
+interface ThemeItem {
+  type: string;
+  url: string;
+  screenshot: string;
+  buession: boolean;
+}
+
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
@@ -33,13 +40,16 @@ import { I18NService } from '@core';
   ]
 })
 export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
-  list = [
-    { type: 'basic', url: 'https://ng-alain.github.io/ng-alain' },
-    { type: 'pro', url: 'https://e.ng-alain.com/theme/pro' },
-    { type: 'ms', url: 'https://e.ng-alain.com/theme/ms' },
-    { type: 'yun', url: 'https://e.ng-alain.com/theme/yun' }
+  allThemes: ThemeItem[] = [
+    { type: 'data', url: 'https://e.ng-alain.com/theme/data', screenshot: 'data.webp', buession: true },
+    { type: 'basic', url: 'https://ng-alain.github.io/ng-alain', screenshot: 'basic.png', buession: false },
+    { type: 'pro', url: 'https://e.ng-alain.com/theme/pro', screenshot: 'pro.png', buession: true },
+    { type: 'ms', url: 'https://e.ng-alain.com/theme/ms', screenshot: 'ms.png', buession: true },
+    { type: 'yun', url: 'https://e.ng-alain.com/theme/yun', screenshot: 'yun.png', buession: true }
   ];
-  themes = ['pro', 'ms', 'yun'];
+  get bussionThemes(): ThemeItem[] {
+    return this.allThemes.filter(w => w.buession);
+  }
   get isBrowser(): boolean {
     return this.platform.isBrowser;
   }