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; +} 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') { diff --git a/src/app/view/link/link.component.html b/src/app/view/link/link.component.html index 27d66d9..a93944a 100644 --- a/src/app/view/link/link.component.html +++ b/src/app/view/link/link.component.html @@ -3,24 +3,55 @@ 友情链接 - - +
友链公告
+
+

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

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

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

    +
  • 本站的友链申请会自动进行抓取，并在12h内进行审核
    • +
@@ -92,7 +123,13 @@ 网站图标 - + + + + + icon + 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..822bdf9 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,17 @@ export class LinkComponent implements OnInit { linkList: Link[]; loading: boolean = false; applyFormGroup: FormGroup; + colors: Color[]; + private lastUrl: string = ''; + 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://'], @@ -46,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() {