[web-app] ng-alain模版工程初始化

web-app/src/app/layout/passport/passport.component.html

@@ -0,0 +1,19 @@
+<div class="container">
+  <header-i18n showLangText="false" class="langs"></header-i18n>
+  <div class="wrap">
+    <div class="top">
+      <div class="head">
+        <img class="logo" src="./assets/logo-color.svg">
+        <span class="title">HertzBeat</span>
+      </div>
+      <div class="desc">面向开发者，易用友好的高性能监控云服务</div>
+    </div>
+    <router-outlet></router-outlet>
+    <global-footer [links]="links">
+      Copyright
+      <i class="anticon anticon-copyright"></i> 2021
+      <a href="https://tancloud.cn" target="_blank">探云 tancloud.cn | </a>
+      <a href="https://tancloud.cn" target="_blank">赫兹跳动 hertzbeat.com</a>
+    </global-footer>
+  </div>
+</div>

web-app/src/app/layout/passport/passport.component.less

@@ -0,0 +1,98 @@
+@import '~@delon/theme/index';
+:host ::ng-deep {
+  .container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    background: #f0f2f5;
+  }
+  .langs {
+    width: 100%;
+    height: 40px;
+    line-height: 44px;
+    text-align: right;
+    .anticon {
+      margin-top: 24px;
+      margin-right: 24px;
+      font-size: 14px;
+      vertical-align: top;
+      cursor: pointer;
+    }
+  }
+  .wrap {
+    flex: 1;
+    padding: 32px 0;
+  }
+  .ant-form-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  }
+
+  @media (min-width: @screen-md-min) {
+    .container {
+      background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+      background-repeat: no-repeat;
+      background-position: center 110px;
+      background-size: 100%;
+    }
+    .wrap {
+      padding: 32px 0 24px;
+    }
+  }
+  .top {
+    text-align: center;
+  }
+  .header {
+    height: 44px;
+    line-height: 44px;
+    a {
+      text-decoration: none;
+    }
+  }
+  .logo {
+    height: 44px;
+    margin-right: 16px;
+  }
+  .title {
+    position: relative;
+    color: @heading-color;
+    font-weight: 600;
+    font-size: 33px;
+    font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    vertical-align: middle;
+  }
+  .desc {
+    margin-top: 12px;
+    margin-bottom: 40px;
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+  }
+}
+
+[data-theme='dark'] {
+  :host ::ng-deep {
+    .container {
+      background: #141414;
+    }
+    .title {
+      color: fade(@white, 85%);
+    }
+    .desc {
+      color: fade(@white, 45%);
+    }
+    @media (min-width: @screen-md-min) {
+      .container {
+        background-image: none;
+      }
+    }
+  }
+}
+
+[data-theme='compact'] {
+  :host ::ng-deep {
+    .ant-form-item {
+      margin-bottom: 16px;
+    }
+  }
+}

web-app/src/app/layout/passport/passport.component.ts

@@ -0,0 +1,30 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+
+@Component({
+  selector: 'layout-passport',
+  templateUrl: './passport.component.html',
+  styleUrls: ['./passport.component.less']
+})
+export class LayoutPassportComponent implements OnInit {
+  links = [
+    {
+      title: '帮助',
+      href: ''
+    },
+    {
+      title: '隐私',
+      href: ''
+    },
+    {
+      title: '条款',
+      href: ''
+    }
+  ];
+
+  constructor(@Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService) {}
+
+  ngOnInit(): void {
+    this.tokenService.clear();
+  }
+}