[web-app] 菜单功能布局大致样式定义
This commit is contained in:
tomsun28
@@ -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>
|
||||
|
||||
193
web-app/src/app/layout/basic/widgets/notify.component.ts
Normal file
193
web-app/src/app/layout/basic/widgets/notify.component.ts
Normal file
@@ -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}`);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user