调整友链页面，友链管理页面

2020-08-07 22:05:03 +08:00
parent 7803629cd3 398716e3ff
commit 1e8acd91c2
6 changed files with 228 additions and 32 deletions
--- 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<number, number>();
+    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;
+}
--- 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">
    <form nz-form [formGroup]="formGroup">
        <nz-form-item>
-            <nz-form-label nzRequired>网站名称</nz-form-label>
-            <nz-form-control nzErrorTip="网站名称不可为空">
+            <nz-form-label nzFlex="80px" nzRequired>网站名称</nz-form-label>
+            <nz-form-control nzFlex="auto" nzErrorTip="网站名称不可为空">
                <input nz-input formControlName="name">
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
-            <nz-form-label nzRequired>网站链接</nz-form-label>
-            <nz-form-control [nzErrorTip]="nameErrTip">
+            <nz-form-label nzFlex="80px" nzRequired>网站链接</nz-form-label>
+            <nz-form-control nzFlex="auto" [nzErrorTip]="nameErrTip">
                <input nz-input formControlName="url">
                <ng-template #nameErrTip>
                    <div *ngIf="formGroup.controls.url.hasError('required')">网站链接不可为空</div>
@@ -37,13 +37,32 @@
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
-            <nz-form-label nzRequired>是否公开</nz-form-label>
-            <nz-form-control nzErrorTip="不可为空">
+            <nz-form-label nzFlex="80px" nzRequired>是否公开</nz-form-label>
+            <nz-form-control nzFlex="auto" nzErrorTip="不可为空">
                <nz-select nzPlaceHolder="请选择" formControlName="open" [nzAllowClear]="true">
                    <nz-option [nzValue]="true" nzLabel="公开"></nz-option>
                    <nz-option [nzValue]="false" nzLabel="不公开"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label nzFlex="80px">网站图标</nz-form-label>
+            <nz-form-control nzFlex="auto" nzErrorTip="链接格式不正确">
+                <nz-input-group [nzSuffix]="icon" nzSize="large">
+                    <input nz-input formControlName="iconPath">
+                </nz-input-group>
+                <ng-template #icon>
+                    <img style="width: 25px;height: 25px" *ngIf="formGroup.value.iconPath"
+                         [src]="formGroup.value.iconPath" alt="icon">
+                </ng-template>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label nzFlex="80px">网站描述</nz-form-label>
+            <nz-form-control nzFlex="auto" nzErrorTip="可输入最大文字长度为255">
+                <textarea nz-input formControlName="desc" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
+            </nz-form-control>
+        </nz-form-item>
+
    </form>
 </nz-modal>
--- 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<Response<Link>>;
        if (oper === 'edit') {
--- a/src/app/view/link/link.component.html
+++ b/src/app/view/link/link.component.html
@@ -3,24 +3,55 @@
        <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友情链接</span>
    </div>
    <ul class="partner-sites">
-        <li *ngFor="let link of linkList">
-            <i nz-icon nzType="link" nzTheme="outline"></i>
-            <a [href]="link.url" target="_blank" [title]="link.name">{{link.name}}</a>
+        <li *ngFor="let link of linkList;let i = index" [style.background]="colors[i].bgColor"
+            [style.color]="colors[i].fontColor">
+            <a [href]="link.url" target="_blank" [title]="link.desc||link.name" [style.color]="colors[i].fontColor">
+                <div class="link-name">
+                    <i nz-icon nzType="link" nzTheme="outline" [style.color]="colors[i].fontColor"></i>
+                    {{link.name}}
+                </div>
+                <div class="link-info" [style.color]="colors[i].fontColor">
+                    <div class="link-icon">
+                        <img *ngIf="link.iconPath" [src]="link.iconPath" [alt]="link.iconPath">
+                        <i *ngIf="!link.iconPath" nz-icon nzType="link" nzTheme="outline"
+                           [style.color]="colors[i].fontColor"></i>
+                    </div>
+                    <p>
+                        {{link.desc || '该站长暂时未留下网站简介'}}
+                    </p>
+                </div>
+            </a>
        </li>
        <li class="applylink" (click)="showModal=!showModal">申请友链</li>
    </ul>
-
-
 </div>
+
 <div class="placard am-animation-slide-bottom">
    <div class="title">
        <i nz-icon nzType="smile" nzTheme="outline" class="titleTag"></i><span class="title">友链公告</span>
    </div>
+    <br>
+    <p style="padding-left: 30px;">
+        <i class="fa fa-check" style="color: green"></i>原创优先&nbsp;
+        <i class="fa fa-check" style="color: green"></i>技术优先&nbsp;
+        <i class="fa fa-close" style="color: red"></i>经常宕机&nbsp;
+        <i class="fa fa-close" style="color: red"></i>不合法规&nbsp;
+        <i class="fa fa-close" style="color: red"></i>插边球站&nbsp;
+        <i class="fa fa-close" style="color: red"></i>红标报毒&nbsp;
+    </p>
    <ul class="placard-content">
        <li>请确认贵站可正常访问</li>
        <li>原创博客、技术博客、游记博客优先</li>
-        <li>博客内容时常更新</li>
-        <li><strong>提交申请时若为https链接请带上https否则将视为http</strong></li>
+        <li>交换友链请先在您的网站添加本站链接</li>
+        <p style="margin: 20px;">
+            本站信息 <br>
+            名称：小海博客<br>
+            网址：https://www.celess.cn/<br>
+            图标：https://www.celess.cn/logo.ico<br>
+            描述：小海博客，记录学习成长历程,主要关注与java后端的技术学习
+        </p>
+        <li>本站的友链申请会自动进行抓取，并在12h内进行审核</li>
+
    </ul>
 </div>

@@ -92,7 +123,13 @@
            <nz-form-item>
                <nz-form-label nzFlex="100px">网站图标</nz-form-label>
                <nz-form-control nzFlex="auto" nzErrorTip="链接格式不正确">
+                    <nz-input-group [nzSuffix]="icon" nzSize="large">
                        <input nz-input formControlName="iconPath">
+                    </nz-input-group>
+                    <ng-template #icon>
+                        <img style="width: 25px;height: 25px" *ngIf="applyFormGroup.value.iconPath"
+                             [src]="applyFormGroup.value.iconPath" alt="icon">
+                    </ng-template>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
--- 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;
--- 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() {