From 67d60540e7999a568df98630a7f4b2683996bdc7 Mon Sep 17 00:00:00 2001 From: llkui Date: Sat, 14 Nov 2020 14:20:22 +0800 Subject: [PATCH] add list search-articles and search-applications --- src/app/admin/home/home.component.html | 279 +++++++++--------- src/app/admin/home/home.component.scss | 5 + src/app/admin/home/home.component.ts | 3 +- .../list/search/applications.component.html | 96 ++++++ .../list/search/applications.component.scss | 78 +++++ .../list/search/applications.component.ts | 99 ++++++- .../admin/list/search/articles.component.html | 97 ++++++ .../admin/list/search/articles.component.scss | 100 +++++++ .../admin/list/search/articles.component.ts | 107 +++++++ .../admin/list/search/projects.component.html | 8 +- .../admin/list/search/projects.component.scss | 15 +- src/app/admin/list/search/search.module.ts | 4 + 12 files changed, 744 insertions(+), 147 deletions(-) create mode 100644 src/app/admin/home/home.component.scss create mode 100644 src/app/admin/list/search/applications.component.scss diff --git a/src/app/admin/home/home.component.html b/src/app/admin/home/home.component.html index cc63a1e..dc3cabc 100644 --- a/src/app/admin/home/home.component.html +++ b/src/app/admin/home/home.component.html @@ -264,172 +264,177 @@ -
- - -
- - - - - - - + +
+ + +
+ + + + + + + + - - + - {{ title }} app is running! + {{ title }} app is running! - - - + + + -
+
- -

Resources

-

Here are some links to help you get started:

+ +

Resources

+

Here are some links to help you get started:

-
- - - +
+ + + - Learn Angular + Learn Angular - - + + - - - + + + - ng zorro antd + ng zorro antd - - - + + + -
+
- -

Next Steps

-

What do you want to do next with your app?

+ +

Next Steps

+

What do you want to do next with your app?

- + -
-
- - +
+
+ + - install -
+ install +
-
- - +
+ + - serve -
+ serve +
-
- - +
+ + - build + build +
-
- - -
- 
git clone https://github.com/llkui/sky-admin.git sky-admin
- 
ng serve --open
- 
ng build --prod
-
- -
- - Angular Logo - - - - NG-ZORRO Logo - -
+ +
+ 
git clone https://github.com/llkui/sky-admin.git sky-admin
+ 
ng serve --open
+ 
ng build --prod
+
- - - - - - + + + +
+
+ Love sky-admin?  + Give our repo a star. +
+ + + + + Star +
+ + + + + + +
+ + + + + -
+
+ diff --git a/src/app/admin/home/home.component.scss b/src/app/admin/home/home.component.scss new file mode 100644 index 0000000..7a9123e --- /dev/null +++ b/src/app/admin/home/home.component.scss @@ -0,0 +1,5 @@ +:host ::ng-deep { + .ant-card { + background: inherit; + } +} diff --git a/src/app/admin/home/home.component.ts b/src/app/admin/home/home.component.ts index 0cac2a1..4c67069 100644 --- a/src/app/admin/home/home.component.ts +++ b/src/app/admin/home/home.component.ts @@ -2,7 +2,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-home', - templateUrl: './home.component.html' + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] }) export class HomeComponent { diff --git a/src/app/admin/list/search/applications.component.html b/src/app/admin/list/search/applications.component.html index e69de29..97c69c2 100644 --- a/src/app/admin/list/search/applications.component.html +++ b/src/app/admin/list/search/applications.component.html @@ -0,0 +1,96 @@ + +
+
所属类目：
+
+ + 全部 + + + + {{type.name}} + + +
+ 展开 + 收起 +
+
+
其它选项：
+
+
+
+ + 作者 + + + + + + +
+
+ + 好评度 + + + + + + + +
+
+
+
+ +
+
+
+ + + + + +
+
+

活跃用户

+
+ {{application.activeUser}} + 万 +
+
+
+

新增用户

+
+ {{application.newUser | number}} +
+
+
+ + + + + + + + + + + + + + + + +
    +
  • 1st menu item
    • +
  • 2nd menu item
    • +
  • 3d menu item
    • +
+ + +
+
+
diff --git a/src/app/admin/list/search/applications.component.scss b/src/app/admin/list/search/applications.component.scss new file mode 100644 index 0000000..046f49b --- /dev/null +++ b/src/app/admin/list/search/applications.component.scss @@ -0,0 +1,78 @@ +:host ::ng-deep { + .ant-tag { + font-size: 14px; + cursor: pointer; + margin-right: 24px; + } + + .ant-form-item { + margin-bottom: 0; + } + + .standard { + margin-bottom: 16px; + padding-bottom: 11px; + border-bottom: 1px dashed #f0f0f0; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + } + + .standard-label { + flex: 0 0 auto; + margin-right: 24px; + color: rgba(0, 0, 0, .85); + text-align: right; + line-height: 32px; + } + + .standard-content { + line-height: 32px; + transition: all .3s; + overflow: hidden; + + &.hasExpanded { + max-height: 32px; + + &.expanded { + max-height: 200px; + } + } + } + + .ant-select.max-width { + max-width: 200px; + width: 100%; + } + + .select-trigger { + line-height: 32px; + } + + .user-title { + font-size: 12px; + } + + .user-number { + color: rgba(0, 0, 0, .85); + font-size: 24px; + line-height: 32px; + } + + .user-unit { + color: rgba(0, 0, 0, .85); + margin-left: 2px; + } + + .ant-card-actions { + background: #ffffff; + } + + .ant-avatar { + width: 24px; + height: 24px; + } +} diff --git a/src/app/admin/list/search/applications.component.ts b/src/app/admin/list/search/applications.component.ts index ad41bba..72e3356 100644 --- a/src/app/admin/list/search/applications.component.ts +++ b/src/app/admin/list/search/applications.component.ts @@ -2,13 +2,110 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-list-search-applications', - templateUrl: './applications.component.html' + templateUrl: './applications.component.html', + styleUrls: ['./applications.component.scss'] }) export class SearchApplicationsComponent implements OnInit { + typeAll = false; + typeList = []; + searchInfo = { + author: null, + like: null + }; + expanded = false; + applicationList = []; + constructor() { } ngOnInit() { + this.typeList = [ + { id: 1, name: '类目一', checked: false }, + { id: 2, name: '类目二', checked: false }, + { id: 3, name: '类目三', checked: false }, + { id: 4, name: '类目四', checked: false }, + { id: 5, name: '类目五', checked: false }, + { id: 6, name: '类目六', checked: false }, + { id: 7, name: '类目七', checked: false }, + { id: 8, name: '类目八', checked: false }, + { id: 9, name: '类目九', checked: false }, + { id: 10, name: '类目十', checked: false }, + { id: 11, name: '类目十一', checked: false }, + { id: 12, name: '类目十二', checked: false }, + ]; + this.applicationList = [ + { + id: 1, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', + title: 'Alipay', + activeUser: '19', + newUser: '1678' + }, + { + id: 2, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', + title: 'Angular', + activeUser: '17', + newUser: '1687' + }, + { + id: 3, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', + title: 'Ant Design', + activeUser: '10', + newUser: '1846' + }, + { + id: 4, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', + title: 'Ant Design Pro', + activeUser: '12', + newUser: '1158' + }, + { + id: 5, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', + title: 'Bootstrap', + activeUser: '15', + newUser: '1307' + }, + { + id: 6, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png', + title: 'React', + activeUser: '18', + newUser: '1333' + }, + { + id: 7, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', + title: 'Vue', + activeUser: '15', + newUser: '1594' + }, + { + id: 8, + cover: 'https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png', + title: 'Webpack', + activeUser: '15', + newUser: '1874' + }, + ]; + } + + typeChangeAll($event) { + this.typeList.forEach(item => { + item.checked = $event; + }); + } + typeChange() { + let checked = true; + this.typeList.forEach(item => { + if (!item.checked) { + checked = false; + } + }); + this.typeAll = checked; } } diff --git a/src/app/admin/list/search/articles.component.html b/src/app/admin/list/search/articles.component.html index e69de29..364e36a 100644 --- a/src/app/admin/list/search/articles.component.html +++ b/src/app/admin/list/search/articles.component.html @@ -0,0 +1,97 @@ + +
+
所属类目：
+
+ + 全部 + + + + {{type.name}} + + +
+ 展开 + 收起 +
+
+
owner：
+
+ + + + + + + + 只看自己的 +
+
+
+
其它选项：
+
+
+
+ + 活跃用户 + + + + + + +
+
+ + 好评度 + + + + + + + +
+
+
+
+ + + + + + + {{item.title}} + + + {{tag.name}} + + +
+
{{item.content}}
+
+ + {{item.author}} + 发布在 + {{item.href}} + {{item.time}} +
+
+
    + {{item.start}} + + {{item.like}} + + {{item.message}} + +
+ + + +
+ +
+ + diff --git a/src/app/admin/list/search/articles.component.scss b/src/app/admin/list/search/articles.component.scss index 8b13789..b91e6b3 100644 --- a/src/app/admin/list/search/articles.component.scss +++ b/src/app/admin/list/search/articles.component.scss @@ -1 +1,101 @@ +:host ::ng-deep { + .ant-form-item { + margin-bottom: 0; + } + + .standard { + margin-bottom: 16px; + padding-bottom: 11px; + border-bottom: 1px dashed #f0f0f0; + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + a { + line-height: 32px; + margin-left: 12px; + } + + .ant-tag { + font-size: 14px; + cursor: pointer; + margin-right: 24px; + } + } + + .standard-label { + flex: 0 0 auto; + margin-right: 24px; + color: rgba(0, 0, 0, .85); + text-align: right; + line-height: 32px; + } + + .standard-content { + line-height: 32px; + transition: all .3s; + overflow: hidden; + + &.hasExpanded { + max-height: 32px; + + &.expanded { + max-height: 200px; + } + } + } + + .ant-select.max-width { + max-width: 200px; + width: auto; + } + + .select-trigger { + line-height: 32px; + } + + .ant-list-item-meta-title>a, + .ant-list-item-meta-description .ant-tag, + .content { + color: rgba(0, 0, 0, 0.85); + } + + .ant-list-item-meta-title>a:hover { + color: #1890ff; + } + + .article-content { + max-width: 720px; + } + + .article-tip { + .ant-avatar { + width: 20px; + height: 20px; + margin-right: 5px; + } + + .article-author { + margin-right: 5px; + } + + .article-url { + margin: 0 5px; + } + + .article-time { + margin-left: 16px; + color: rgba(0, 0, 0, .25); + } + } + + .loadmore { + border-top: 1px solid #f0f0f0; + text-align: center; + padding-top: 16px; + } +} diff --git a/src/app/admin/list/search/articles.component.ts b/src/app/admin/list/search/articles.component.ts index 813f8a1..0af69aa 100644 --- a/src/app/admin/list/search/articles.component.ts +++ b/src/app/admin/list/search/articles.component.ts @@ -7,9 +7,116 @@ import { Component, OnInit } from '@angular/core'; }) export class SearchArticlesComponent implements OnInit { + typeAll = false; + typeList = []; + searchInfo = { + owner: [2, 3, '2', '3'], + author: null, + like: null + }; + expanded = false; + articleList = []; + loadingMore = false; + baseArticle = [ + { + title: 'Alipay', + tagList: [{ name: 'Ant Design' }, { name: '设计语言' }, { name: '蚂蚁金服' }], + content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', + author: '付小小', + href: 'https://ng.ant.design', + time: '2020-11-13 10:12', + start: '145', + like: '116', + message: '19', + }, { + title: 'Angular', + tagList: [{ name: 'Ant Design' }, { name: '设计语言' }, { name: '蚂蚁金服' }], + content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', + author: '曲丽丽', + href: 'https://ng.ant.design', + time: '2020-11-13 08:12', + start: '188', + like: '124', + message: '20', + }, { + title: 'Ant Design', + tagList: [{ name: 'Ant Design' }, { name: '设计语言' }, { name: '蚂蚁金服' }], + content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', + author: '林东东', + href: 'https://ng.ant.design', + time: '2020-11-13 06:12', + start: '134', + like: '185', + message: '18', + }, { + title: 'Ant Design Pro', + tagList: [{ name: 'Ant Design' }, { name: '设计语言' }, { name: '蚂蚁金服' }], + content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', + author: '周星星', + href: 'https://ng.ant.design', + time: '2020-11-13 04:12', + start: '145', + like: '158', + message: '13', + }, { + title: 'Bootstrap', + tagList: [{ name: 'Ant Design' }, { name: '设计语言' }, { name: '蚂蚁金服' }], + content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', + author: '吴加好', + href: 'https://ng.ant.design', + time: '2020-11-13 02:12', + start: '157', + like: '122', + message: '15', + } + ]; + constructor() { } ngOnInit() { + this.typeList = [ + { id: 1, name: '类目一', checked: false }, + { id: 2, name: '类目二', checked: false }, + { id: 3, name: '类目三', checked: false }, + { id: 4, name: '类目四', checked: false }, + { id: 5, name: '类目五', checked: false }, + { id: 6, name: '类目六', checked: false }, + { id: 7, name: '类目七', checked: false }, + { id: 8, name: '类目八', checked: false }, + { id: 9, name: '类目九', checked: false }, + { id: 10, name: '类目十', checked: false }, + { id: 11, name: '类目十一', checked: false }, + { id: 12, name: '类目十二', checked: false }, + ]; + this.articleList = [...this.articleList, ...this.baseArticle]; + } + + typeChangeAll($event) { + this.typeList.forEach(item => { + item.checked = $event; + }); + } + + typeChange() { + let checked = true; + this.typeList.forEach(item => { + if (!item.checked) { + checked = false; + } + }); + this.typeAll = checked; + } + onLoadMore() { + this.loadingMore = true; + setTimeout(() => { + this.loadingMore = false; + this.articleList = [...this.articleList, ...this.baseArticle]; + }, 1000); } } diff --git a/src/app/admin/list/search/projects.component.html b/src/app/admin/list/search/projects.component.html index c462224..37a1e0f 100644 --- a/src/app/admin/list/search/projects.component.html +++ b/src/app/admin/list/search/projects.component.html @@ -1,7 +1,7 @@
所属类目：
-
+
全部 @@ -24,7 +24,7 @@ 作者 - + @@ -34,9 +34,9 @@ 好评度 - + - + diff --git a/src/app/admin/list/search/projects.component.scss b/src/app/admin/list/search/projects.component.scss index 486fcab..5a18504 100644 --- a/src/app/admin/list/search/projects.component.scss +++ b/src/app/admin/list/search/projects.component.scss @@ -5,6 +5,10 @@ margin-right: 24px; } + .ant-form-item { + margin-bottom: 0; + } + .standard { margin-bottom: 16px; padding-bottom: 11px; @@ -27,16 +31,19 @@ .standard-content { line-height: 32px; - max-height: 32px; transition: all .3s; overflow: hidden; - &.expanded { - max-height: 200px; + &.hasExpanded { + max-height: 32px; + + &.expanded { + max-height: 200px; + } } } - .ant-select { + .ant-select.max-width { max-width: 200px; width: auto; } diff --git a/src/app/admin/list/search/search.module.ts b/src/app/admin/list/search/search.module.ts index 1bf0df4..dc6b81e 100644 --- a/src/app/admin/list/search/search.module.ts +++ b/src/app/admin/list/search/search.module.ts @@ -15,6 +15,8 @@ import { NzFormModule } from 'ng-zorro-antd/form'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzAvatarModule } from 'ng-zorro-antd/avatar'; import { NzToolTipModule } from 'ng-zorro-antd/tooltip'; +import { NzListModule } from 'ng-zorro-antd/list'; +import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { SearchRoutingModule } from './search-routing.module'; @@ -52,6 +54,8 @@ import { SearchApplicationsComponent } from './applications.component'; NzIconModule, NzAvatarModule, NzToolTipModule, + NzListModule, + NzDropDownModule, SearchRoutingModule ] })