From fee6f45ea9080e3479799697121ee385eac218f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= Date: Fri, 7 Aug 2020 21:10:10 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E9=9A=8F=E6=9C=BA=E9=A2=9C=E8=89=B2=E7=9A=84=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/utils/color.ts | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/app/utils/color.ts b/src/app/utils/color.ts index 944ab63..7f9773c 100644 --- a/src/app/utils/color.ts +++ b/src/app/utils/color.ts @@ -1,4 +1,9 @@ -export const ColorList: { bgColor: string, fontColor: string }[] = [ +export class Color { + bgColor: string; + fontColor: string +} + +export const ColorList: Color[] = [ {bgColor: '#7bcfa6', fontColor: '#000000'}, // 石青 {bgColor: '#bce672', fontColor: '#000000'}, // 松花色 {bgColor: '#ff8936', fontColor: '#000000'}, // 橘黄 @@ -7,3 +12,27 @@ export const ColorList: { bgColor: string, fontColor: string }[] = [ {bgColor: '#3eede7', fontColor: '#000000'}, // 碧蓝 {bgColor: '#177cb0', fontColor: '#ffffff'}, // 靛青 ]; + +export const ColorListLength = ColorList.length + +/** + * 获取一组随机颜色 + * @param count 数量 + */ +export function RandomColor(count: number = 1): Color[] { + const map = new Map(); + ColorList.forEach((color, index) => map.set(index, 0)) + const colorArray: Color[] = []; + const oneRandomColor = () => { + const minValue = Math.min.apply(null, Array.from(map.values())) + const keys = Array.from(map.keys()).filter(key => map.get(key) === minValue); + const keyIndex = Math.floor(Math.random() * keys.length); + const index = keys[keyIndex]; + map.set(index, minValue + 1); + return ColorList[index] + }; + for (let i = 0; i < count; i++) { + colorArray.push(oneRandomColor()); + } + return colorArray; +} From 953fba5b170f1deb4822456dc4670142247d92f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= Date: Fri, 7 Aug 2020 21:10:20 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=8F=8B=E9=93=BE?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/view/link/link.component.html | 44 ++++++++-- src/app/view/link/link.component.less | 121 ++++++++++++++++++++++++-- src/app/view/link/link.component.ts | 6 +- 3 files changed, 154 insertions(+), 17 deletions(-) diff --git a/src/app/view/link/link.component.html b/src/app/view/link/link.component.html index 27d66d9..b818b8f 100644 --- a/src/app/view/link/link.component.html +++ b/src/app/view/link/link.component.html @@ -3,24 +3,54 @@ 友情链接 - - +
友链公告
+
+

+ 原创优先  + 技术优先  + 经常宕机  + 不合法规  + 插边球站  + 红标报毒  +

  • 请确认贵站可正常访问
  • 原创博客、技术博客、游记博客优先
    • -
  • 博客内容时常更新
    • -
  • 提交申请时若为https链接请带上https否则将视为http
    • +
  • 交换友链请先在您的网站添加本站链接
    • +

    + 本站信息
    + 名称：小海博客
    + 网址：https://www.celess.cn/
    + 图标：https://www.celess.cn/logo.ico
    + 描述：小海博客，记录学习成长历程,主要关注与java后端的技术学习 +

    +
  • 本站的友链申请会自动进行抓取，并在12h内进行审核
    • +
diff --git a/src/app/view/link/link.component.less b/src/app/view/link/link.component.less index 2eaa95e..e7233a6 100644 --- a/src/app/view/link/link.component.less +++ b/src/app/view/link/link.component.less @@ -16,15 +16,100 @@ i { list-style: none; display: flex; flex-wrap: wrap; - padding: 20px 10px; + justify-content: space-between; + align-items: flex-start; + li { - width: 25%; - margin: 10px 0; - height: 30px; - line-height: 30px; - text-align: center + flex: 1; + width: 20%; + min-width: 20%; // 加入这两个后每个item的宽度就生效了 + max-width: 20%; // 加入这两个后每个item的宽度就生效了 + height: 80px; + text-align: center; + overflow: hidden; + margin: 10px; + border-radius: 5px; + border: 1px solid rgba(0, 0, 0, .1); + + .link-icon { + display: none; + transition: 0.3s; + } + + .link-name, .link-info { + height: 80px; + width: 100%; + margin: 0; + transition: 0.3s; + padding: 0; + } + + .link-name { + // background: #eed1b3; + line-height: 80px; + cursor: pointer; + + i { + display: inline; + } + + } + + .link-info { + // background: #00d95a; + } } + + li:hover { + transition: 0.3s; + + + .link-icon { + //width: 80px; + height: 56px; + line-height: 56px; + // background: #00aaaa; + transition: 0.3s; + display: inline-block; + width: 56px; + float: left; + + img { + height: 80%; + width: 80%; + border-radius: 50%; + line-height: 56px; + //padding: 3px; + } + } + + + .link-name { + height: 24px; + line-height: 24px; + + i { + display: none; + transition: 0.3s; + } + } + + .link-info { + border-top: 1px solid rgba(150, 150, 150, .1); + height: 56px; + line-height: 56px; + padding-bottom: 2px; + + p { + width: 100%; + height: 100%; + text-align: left; + font-size: xx-small; + } + } + } + } .placard { @@ -32,14 +117,20 @@ i { margin: 0 auto; } +.site-middle, .placard { + background: #fff; + padding: 20px; +} + .placard-content { margin-top: 30px; margin-left: 30px; - border-left: 5px solid #aaa4a4; + border-left: 3px solid #6bc30d; + padding: 0; list-style: none; li { - padding-left: 15px; + padding-left: 20px; font-size: 1.2em; margin: 5px 0; } @@ -48,9 +139,12 @@ i { .applylink { float: right; border: none; - background: white; + background: #f6f1f1; border-radius: 5px; width: 150px; + height: 80px; + line-height: 80px; + font-size: x-large; } .applylink:hover { @@ -71,6 +165,15 @@ i { border-radius: 4px; } +@keyframes hiddenAnimation { + form { + height: 100%; + } + to { + height: 0%; + } +} + @media only screen and ( max-width: 768px ) { .site-middle, .placard { margin-left: 2px; diff --git a/src/app/view/link/link.component.ts b/src/app/view/link/link.component.ts index 790c4a8..007e0cc 100644 --- a/src/app/view/link/link.component.ts +++ b/src/app/view/link/link.component.ts @@ -4,6 +4,7 @@ import {Title} from '@angular/platform-browser'; import {ApiService} from '../../api/api.service'; import {ApplyLinkReq, Link} from '../../class/Link'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {Color, RandomColor} from '../../utils/color'; @Component({ selector: 'view-link', @@ -28,13 +29,16 @@ export class LinkComponent implements OnInit { linkList: Link[]; loading: boolean = false; applyFormGroup: FormGroup; + colors: Color[]; + ngOnInit() { window.scrollTo(0, 0); this.link = new Link(); this.apiService.links().subscribe({ next: data => this.linkList = data.result, - error: err => this.message.error(err.msg) + error: err => this.message.error(err.msg), + complete: () => this.colors = RandomColor(this.linkList.length) }); this.applyFormGroup = this.fb.group({ urlLinkProtocol: ['http://'], From 5454a747a729ea7cb310feed32b82698e07aed71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= Date: Fri, 7 Aug 2020 21:29:30 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E7=BD=91=E7=AB=99?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=A2=84=E8=A7=88=E5=92=8C=E5=8F=8B=E9=93=BE?= =?UTF-8?q?=E9=A1=B5=E9=93=BE=E6=8E=A5=E8=87=AA=E5=8A=A8=E8=A1=A5=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/view/link/link.component.html | 8 +++++++- src/app/view/link/link.component.ts | 8 ++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/app/view/link/link.component.html b/src/app/view/link/link.component.html index b818b8f..f42631b 100644 --- a/src/app/view/link/link.component.html +++ b/src/app/view/link/link.component.html @@ -122,7 +122,13 @@ 网站图标 - + + + + + icon + diff --git a/src/app/view/link/link.component.ts b/src/app/view/link/link.component.ts index 007e0cc..822bdf9 100644 --- a/src/app/view/link/link.component.ts +++ b/src/app/view/link/link.component.ts @@ -30,6 +30,7 @@ export class LinkComponent implements OnInit { loading: boolean = false; applyFormGroup: FormGroup; colors: Color[]; + private lastUrl: string = ''; ngOnInit() { @@ -50,6 +51,13 @@ export class LinkComponent implements OnInit { name: [null, [Validators.required, Validators.maxLength(255)]], url: [null, [Validators.required, Validators.pattern(/^([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]] }); + this.applyFormGroup.controls.url.valueChanges.subscribe({ + next: data => { + const linkUrlData: string = this.applyFormGroup.value.linkUrl || ''; + this.applyFormGroup.patchValue({linkUrl: linkUrlData.replace(this.lastUrl, data)}); + this.lastUrl = data; + }, + }) } apply() { From 58d11c4fa8af0be3096a6d61fe55755716a99c4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= Date: Fri, 7 Aug 2020 21:31:24 +0800 Subject: [PATCH 4/5] =?UTF-8?q?icon=20=E5=9B=BE=E6=A0=87=E7=9A=84=E9=A2=9C?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/view/link/link.component.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/view/link/link.component.html b/src/app/view/link/link.component.html index f42631b..a93944a 100644 --- a/src/app/view/link/link.component.html +++ b/src/app/view/link/link.component.html @@ -7,13 +7,14 @@ [style.color]="colors[i].fontColor">
- + {{link.name}}
- +

{{link.desc || '该站长暂时未留下网站简介'}} From 398716e3ffffb2384544a5aca40fce2ba71d17d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BE=E5=87=A0=E6=B5=B7?= Date: Fri, 7 Aug 2020 21:45:39 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E8=A1=A5=E5=85=A8=E8=A1=A8=E5=8D=95?= =?UTF-8?q?=E7=BC=BA=E5=A4=B1=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin-link/admin-link.component.html | 31 +++++++++++++++---- .../admin/admin-link/admin-link.component.ts | 10 ++---- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/app/view/admin/admin-link/admin-link.component.html b/src/app/view/admin/admin-link/admin-link.component.html index 7d68b1c..e40fa71 100644 --- a/src/app/view/admin/admin-link/admin-link.component.html +++ b/src/app/view/admin/admin-link/admin-link.component.html @@ -20,14 +20,14 @@ (nzOnCancel)="modalVisible = false" [nzClosable]="true" [nzOkDisabled]="!formGroup.valid">

- 网站名称 - + 网站名称 + - 网站链接 - + 网站链接 +
网站链接不可为空
@@ -37,13 +37,32 @@ - 是否公开 - + 是否公开 + + + 网站图标 + + + + + + icon + + + + + 网站描述 + + + + +
diff --git a/src/app/view/admin/admin-link/admin-link.component.ts b/src/app/view/admin/admin-link/admin-link.component.ts index a3c7a91..cbbe489 100644 --- a/src/app/view/admin/admin-link/admin-link.component.ts +++ b/src/app/view/admin/admin-link/admin-link.component.ts @@ -22,6 +22,8 @@ export class AdminLinkComponent implements OnInit { name: new FormControl(null, [Validators.required]), url: new FormControl(null, [Validators.required, Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]), open: new FormControl(null, [Validators.required]), + desc: new FormControl(null, [Validators.maxLength(255)]), + iconPath: new FormControl(null, [Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]), oper: new FormControl(null) }) } @@ -83,13 +85,7 @@ export class AdminLinkComponent implements OnInit { modalConfirm() { this.modalVisible = false; - const linkReq: Link = new Link(); - linkReq.name = this.formGroup.value.name; - linkReq.url = this.formGroup.value.url; - linkReq.open = this.formGroup.value.open; - // 暂时设置未空 - linkReq.desc = ''; - linkReq.iconPath = ''; + const linkReq: Link = this.formGroup.value const oper = this.formGroup.value.oper; let observable: Observable>; if (oper === 'edit') {