[web-app] 菜单功能布局大致样式定义

2021-11-28 14:58:20 +08:00
parent cdee4add2a
commit 034b6c175c
21 changed files with 384 additions and 1663 deletions
--- a/web-app/src/app/core/startup/startup.service.ts
+++ b/web-app/src/app/core/startup/startup.service.ts
@@ -119,9 +119,9 @@ export class StartupService {

  load(): Observable<void> {
    // http
-    // return this.viaHttp();
+    return this.viaHttp();
    // mock: Don’t use it in a production environment. ViaMock is just to simulate some data to make the scaffolding work normally
    // mock：请勿在生产环境中这么使用，viaMock 单纯只是为了模拟一些数据使脚手架一开始能正常运行
-    return this.viaMockI18n();
+    // return this.viaMockI18n();
  }
 }
--- a/web-app/src/app/layout/basic/basic.component.ts
+++ b/web-app/src/app/layout/basic/basic.component.ts
@@ -25,6 +25,9 @@ import { environment } from '@env/environment';
      <layout-default-header-item direction="middle">
        <header-search class="alain-default__search" [toggleChange]="searchToggleStatus"></header-search>
      </layout-default-header-item>
+      <layout-default-header-item direction="right">
+        <header-notify></header-notify>
+      </layout-default-header-item>
      <layout-default-header-item direction="right" hidden="mobile">
        <div layout-default-header-item-trigger nz-dropdown [nzDropdownMenu]="settingsMenu" nzTrigger="click" nzPlacement="bottomRight">
          <i nz-icon nzType="setting"></i>
--- a/web-app/src/app/layout/basic/widgets/notify.component.ts
+++ b/web-app/src/app/layout/basic/widgets/notify.component.ts
@@ -0,0 +1,193 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { NoticeIconList, NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon';
+import { add, formatDistanceToNow, parse } from 'date-fns';
+import { NzI18nService } from 'ng-zorro-antd/i18n';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'header-notify',
+  template: `
+    <notice-icon
+      [data]="data"
+      [count]="count"
+      [loading]="loading"
+      btnClass="alain-default__nav-item"
+      btnIconClass="alain-default__nav-item-icon"
+      (select)="select($event)"
+      (clear)="clear($event)"
+      (popoverVisibleChange)="loadData()"
+    ></notice-icon>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HeaderNotifyComponent {
+  data: NoticeItem[] = [
+    {
+      title: '通知',
+      list: [],
+      emptyText: '你已查看所有通知',
+      emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
+      clearText: '清空通知'
+    },
+    {
+      title: '消息',
+      list: [],
+      emptyText: '您已读完所有消息',
+      emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg',
+      clearText: '清空消息'
+    },
+    {
+      title: '待办',
+      list: [],
+      emptyText: '你已完成所有待办',
+      emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg',
+      clearText: '清空待办'
+    }
+  ];
+  count = 5;
+  loading = false;
+
+  constructor(private msg: NzMessageService, private nzI18n: NzI18nService, private cdr: ChangeDetectorRef) {}
+
+  private updateNoticeData(notices: NoticeIconList[]): NoticeItem[] {
+    const data = this.data.slice();
+    data.forEach(i => (i.list = []));
+
+    notices.forEach(item => {
+      const newItem = { ...item } as NoticeIconList;
+      if (typeof newItem.datetime === 'string') {
+        newItem.datetime = parse(newItem.datetime, 'yyyy-MM-dd', new Date());
+      }
+      if (newItem.datetime) {
+        newItem.datetime = formatDistanceToNow(newItem.datetime as Date, { locale: this.nzI18n.getDateLocale() });
+      }
+      if (newItem.extra && newItem.status) {
+        newItem.color = (
+          {
+            todo: undefined,
+            processing: 'blue',
+            urgent: 'red',
+            doing: 'gold'
+          } as { [key: string]: string | undefined }
+        )[newItem.status];
+      }
+      data.find(w => w.title === newItem.type)!.list.push(newItem);
+    });
+    return data;
+  }
+
+  loadData(): void {
+    if (this.loading) {
+      return;
+    }
+    this.loading = true;
+    setTimeout(() => {
+      const now = new Date();
+      this.data = this.updateNoticeData([
+        {
+          id: '000000001',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+          title: '你收到了 14 份新周报',
+          datetime: add(now, { days: 10 }),
+          type: '通知'
+        },
+        {
+          id: '000000002',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
+          title: '你推荐的 曲妮妮 已通过第三轮面试',
+          datetime: add(now, { days: -3 }),
+          type: '通知'
+        },
+        {
+          id: '000000003',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
+          title: '这种模板可以区分多种通知类型',
+          datetime: add(now, { months: -3 }),
+          read: true,
+          type: '通知'
+        },
+        {
+          id: '000000004',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+          title: '左侧图标用于区分不同的类型',
+          datetime: add(now, { years: -1 }),
+          type: '通知'
+        },
+        {
+          id: '000000005',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
+          title: '内容不要超过两行字，超出时自动截断',
+          datetime: '2017-08-07',
+          type: '通知'
+        },
+        {
+          id: '000000006',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+          title: '曲丽丽 评论了你',
+          description: '描述信息描述信息描述信息',
+          datetime: '2017-08-07',
+          type: '消息'
+        },
+        {
+          id: '000000007',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+          title: '朱偏右 回复了你',
+          description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+          datetime: '2017-08-07',
+          type: '消息'
+        },
+        {
+          id: '000000008',
+          avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
+          title: '标题',
+          description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
+          datetime: '2017-08-07',
+          type: '消息'
+        },
+        {
+          id: '000000009',
+          title: '任务名称',
+          description: '任务需要在 2017-01-12 20:00 前启动',
+          extra: '未开始',
+          status: 'todo',
+          type: '待办'
+        },
+        {
+          id: '000000010',
+          title: '第三方紧急代码变更',
+          description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+          extra: '马上到期',
+          status: 'urgent',
+          type: '待办'
+        },
+        {
+          id: '000000011',
+          title: '信息安全考试',
+          description: '指派竹尔于 2017-01-09 前完成更新并发布',
+          extra: '已耗时 8 天',
+          status: 'doing',
+          type: '待办'
+        },
+        {
+          id: '000000012',
+          title: 'ABCD 版本发布',
+          description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
+          extra: '进行中',
+          status: 'processing',
+          type: '待办'
+        }
+      ]);
+
+      this.loading = false;
+      this.cdr.detectChanges();
+    }, 500);
+  }
+
+  clear(type: string): void {
+    this.msg.success(`清空了 ${type}`);
+  }
+
+  select(res: NoticeIconSelect): void {
+    this.msg.success(`点击了 ${res.title} 的 ${res.item.title}`);
+  }
+}
--- a/web-app/src/app/layout/layout.module.ts
+++ b/web-app/src/app/layout/layout.module.ts
@@ -25,6 +25,7 @@ import { HeaderFullScreenComponent } from './basic/widgets/fullscreen.component'
 import { HeaderI18nComponent } from './basic/widgets/i18n.component';
 import { HeaderSearchComponent } from './basic/widgets/search.component';
 import { HeaderUserComponent } from './basic/widgets/user.component';
+import {HeaderNotifyComponent} from "./basic/widgets/notify.component";
 import { LayoutBlankComponent } from './blank/blank.component';

 const COMPONENTS = [LayoutBasicComponent, LayoutBlankComponent];
@@ -35,6 +36,7 @@ const HEADER_COMPONENTS = [
  HeaderI18nComponent,
  HeaderClearStorageComponent,
  HeaderUserComponent,
+  HeaderNotifyComponent
 ];

 // passport
--- a/web-app/src/app/routes/dashboard/dashboard.component.less
+++ b/web-app/src/app/routes/dashboard/dashboard.component.less
@@ -0,0 +1,61 @@
+@import '~@delon/theme/index';
+:host ::ng-deep {
+  .map-chart {
+    height: 457px;
+    padding-top: 24px;
+    text-align: center;
+    img {
+      display: inline-block;
+      max-width: 100%;
+      max-height: 437px;
+    }
+  }
+  .pie-card {
+    .pie-stat {
+      font-size: 24px !important;
+    }
+  }
+  .active-chart {
+    position: relative;
+    g2-mini-area {
+      margin-top: 32px;
+    }
+    .active-grid {
+      p {
+        position: absolute;
+        top: 80px;
+        width: 100%;
+        padding-bottom: 4px;
+        border-bottom: 1px dashed #e9e9e9;
+      }
+      p:last-child {
+        top: 115px;
+      }
+    }
+    .active-legend {
+      position: relative;
+      height: 20px;
+      margin-top: 8px;
+      font-size: 0;
+      line-height: 20px;
+      span {
+        display: inline-block;
+        width: 33.33%;
+        font-size: 12px;
+        text-align: center;
+      }
+      span:first-child {
+        text-align: left;
+      }
+      span:last-child {
+        text-align: right;
+      }
+    }
+  }
+
+  @media screen and (max-width: @screen-lg) {
+    .map-chart {
+      height: auto;
+    }
+  }
+}
--- a/web-app/src/app/routes/dashboard/dashboard.component.ts
+++ b/web-app/src/app/routes/dashboard/dashboard.component.ts
@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DashboardComponent {}
--- a/web-app/src/app/routes/monitor/monitor-routing.module.ts
+++ b/web-app/src/app/routes/monitor/monitor-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MonitorRoutingModule { }
--- a/web-app/src/app/routes/monitor/monitor.module.ts
+++ b/web-app/src/app/routes/monitor/monitor.module.ts
@@ -0,0 +1,14 @@
+import { NgModule, Type } from '@angular/core';
+import { SharedModule } from '@shared';
+import { MonitorRoutingModule } from './monitor-routing.module';
+
+const COMPONENTS: Type<void>[] = [];
+
+@NgModule({
+  imports: [
+    SharedModule,
+    MonitorRoutingModule
+  ],
+  declarations: COMPONENTS,
+})
+export class MonitorModule { }
--- a/web-app/src/app/routes/routes-routing.module.ts
+++ b/web-app/src/app/routes/routes-routing.module.ts
@@ -26,7 +26,7 @@ const routes: Routes = [
      { path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) },
      // 业务子模块
      // { path: 'widgets', loadChildren: () => import('./widgets/widgets.module').then(m => m.WidgetsModule) },
-    ]
+    { path: 'monitor', loadChildren: () => import('./monitor/monitor.module').then((m) => m.MonitorModule) },]
  },
  // 空白布局
  // {