Skip to content

G
Git2

茶陵後 / Git2
与 Fork 源项目一致

Fork自 gitcode_dev / 开源百科

通知 2
Star 0
Fork 0
G
Git2

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 bc0ecc00 编写于 作者: X xjh22222228
浏览文件
操作

feat(#63): Create a website quickly

上级 37252571
隐藏空白更改
内联 并排
Showing with 454 addition and 400 deletion
README.md
浏览文件 @ bc0ecc00
......@@ -186,4 +186,5 @@ Thank you for your [contribution](https://github.com/xjh22222228/nav/issues), me
| 姓名 | 支持金额 |
| --------------------------------------- |----------- |
| [aiyou9](https://github.com/aiyou9) | ￥20.00 |
| 路人甲 | ￥50.00 |
src/app/app.module.ts
浏览文件 @ bc0ecc00
......@@ -45,7 +45,9 @@ import { FooterComponent } from '../components/footer/footer.component'
import { IconGitComponent } from '../components/icon-git/icon-git.component'
import { NoDataComponent } from '../components/no-data/no-data.component'
import { SearchEngineComponent } from '../components/search-engine/search-engine.component';
import { CreateComponent } from '../components/create/create.component';
import { LoginComponent } from '../components/login/login.component';
import { CreateWebComponent } from '../components/create-web/index.component';
import { ToolbarTitleWebComponent } from '../components/toolbar-title/index.component';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';
import { registerLocaleData } from '@angular/common';
......@@ -100,7 +102,9 @@ const appRoutes: Routes = [
IconGitComponent,
NoDataComponent,
SearchEngineComponent,
CreateComponent,
LoginComponent,
CreateWebComponent,
ToolbarTitleWebComponent,
LogoComponent,
CardComponent
],
......
src/components/card/index.component.html
浏览文件 @ bc0ecc00
......@@ -59,7 +59,7 @@
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li nz-menu-item (click)="toggleModal()">编辑</li>
<li nz-menu-item (click)="toggleModal(); detail = dataSource">编辑</li>
<!-- <a
nz-popconfirm
nzPopconfirmPlacement="rightTop"
......@@ -75,53 +75,11 @@
</ng-template>
</div>
<nz-modal
[(nzVisible)]="showModal"
nzTitle="修改"
(nzOnCancel)="toggleModal()"
(nzOnOk)="handleOk()"
<app-create-web
*ngIf="showModal"
[visible]="showModal"
(onCancel)="toggleModal()"
(onOk)="handleOk($event)"
[detail]="dataSource"
>
<ng-container *nzModalContent>
<form nz-form [formGroup]="validateForm" (ngSubmit)="handleOk()">
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired>网站名称</nz-form-label>
<nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
<input formControlName="title" nz-input placeholder="发现导航" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired>网站链接</nz-form-label>
<nz-form-control [nzSpan]="20">
<input formControlName="url" nz-input placeholder="https://nav3.cn" (blur)="onUrlBlur($event)" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">图标地址</nz-form-label>
<nz-form-control [nzSpan]="20">
<nz-input-group [nzPrefix]="prefixIcon">
<input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onIconBlur($event)" />
</nz-input-group>
<ng-template #prefixIcon>
<app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">网站描述</nz-form-label>
<nz-form-control [nzSpan]="20">
<textarea
formControlName="desc"
placeholder="发现导航, 精选实用导航网站"
nz-input
[nzAutosize]="{ minRows: 3, maxRows: 5 }"
>
</textarea>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
</nz-modal>
</app-create-web>
src/components/card/index.component.scss
浏览文件 @ bc0ecc00
......@@ -7,6 +7,18 @@
}
}
.add-wrapper {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
.add-icon {
font-size: 50px;
color: #ccc
}
}
::ng-deep {
.gutter-row .ant-card {
height: 100%;
......
src/components/card/index.component.ts
浏览文件 @ bc0ecc00
......@@ -2,11 +2,9 @@
// See https://github.com/xjh22222228/nav
import { Component, OnInit, Input } from '@angular/core'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { NzMessageService } from 'ng-zorro-antd/message'
import { NzNotificationService } from 'ng-zorro-antd/notification'
import { getToken } from '../../utils/user'
import { setWebsiteList, getLogoUrl, copyText } from '../../utils'
import { setWebsiteList, copyText } from '../../utils'
import { websiteList } from '../../store'
import { INavProps, ITagProp, INavFourProp } from '../../types'
import * as __tag from '../../../data/tag.json'
......@@ -21,36 +19,19 @@ const tagMap: ITagProp = (__tag as any).default
export class CardComponent implements OnInit {
@Input() dataSource: INavFourProp
validateForm!: FormGroup;
objectKeys = Object.keys
websiteList: INavProps[] = websiteList
isLogin: boolean = !!getToken()
showModal = false
iconUrl = ''
copyUrlDone = false
copyPathDone = false
tagMap = tagMap
constructor(
private fb: FormBuilder,
private message: NzMessageService,
private notification: NzNotificationService,
) {}
ngOnInit(): void {
this.validateForm = this.fb.group({
title: [this.dataSource.name, [Validators.required]],
url: [this.dataSource.url, [Validators.required]],
icon: [this.dataSource.icon || null],
desc: [this.dataSource.desc || ''],
});
}
async onUrlBlur(e) {
const res = await getLogoUrl(e.target?.value)
this.iconUrl = (res || '') as string
this.validateForm.get('icon')!.setValue(res || '')
}
ngOnInit(): void {}
async copyUrl(e, type: number) {
const w = this.dataSource
......@@ -70,36 +51,21 @@ export class CardComponent implements OnInit {
this.copyPathDone = false
}
onIconBlur(e) {
this.iconUrl = e.target.value
}
toggleModal() {
this.showModal = !this.showModal
}
handleOk() {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
try {
let { title, icon, url, desc } = this.validateForm.value
if (!title) return
title = title.trim()
this.dataSource.name = title
this.dataSource.icon = icon
this.dataSource.url = url
this.dataSource.desc = desc
setWebsiteList(this.websiteList)
this.message.success('修改成功')
this.toggleModal()
} catch (err) {
this.notification.error('内部异常', err.message)
}
handleOk(payload: INavFourProp) {
this.dataSource.name = payload.name
this.dataSource.createdAt = payload.createdAt
this.dataSource.desc = payload.desc
this.dataSource.icon = payload.icon
this.dataSource.url = payload.url
this.dataSource.urls = payload.urls
this.message.success('修改成功!')
setWebsiteList(this.websiteList)
this.toggleModal()
}
confirmDel() {}
......
src/components/create-web/index.component.html 0 → 100644
浏览文件 @ bc0ecc00
<nz-modal
[(nzVisible)]="visible"
[nzTitle]="detail ? '编辑' : '新增'"
(nzOnCancel)="handleCancel()"
(nzOnOk)="handleOk()"
>
<ng-container *nzModalContent>
<form nz-form [formGroup]="validateForm">
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired>网站名称</nz-form-label>
<nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
<input formControlName="title" nz-input placeholder="发现导航" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired>网站链接</nz-form-label>
<nz-form-control [nzSpan]="20" nzErrorTip="请输入网站链接">
<input formControlName="url" nz-input placeholder="https://nav3.cn" (blur)="onUrlBlur($event)" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">图标地址</nz-form-label>
<nz-form-control [nzSpan]="20">
<nz-input-group [nzPrefix]="prefixIcon">
<input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onIconBlur($event)" />
</nz-input-group>
<ng-template #prefixIcon>
<app-logo [src]="iconUrl" [size]="25" *ngIf="iconUrl"></app-logo>
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">网站描述</nz-form-label>
<nz-form-control [nzSpan]="20">
<textarea
formControlName="desc"
placeholder="发现导航, 精选实用导航网站"
nz-input
[nzAutosize]="{ minRows: 3, maxRows: 5 }"
>
</textarea>
</nz-form-control>
</nz-form-item>
<!-- more url -->
<div>
<nz-form-item *ngFor="let n of urlArr; let idx = index">
<nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
<nz-form-control [nzSpan]="20">
<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
<input [formControlName]="'url' + idx" type="text" nz-input />
</nz-input-group>
<ng-template #addOnBeforeTemplate>
<nz-select style="width: 100px;" [formControlName]="'tagVal' + idx">
<nz-option
*ngFor="let tag of tags"
[nzLabel]="tag"
[nzValue]="tag"
>
</nz-option>
</nz-select>
</ng-template>
<ng-template #addOnAfterTemplate>
<i
class="cursor-pointer"
nz-icon
nzType="minus"
nzTheme="outline"
(click)="lessMoreUrl()"
>
</i>
</ng-template>
</nz-form-control>
</nz-form-item>
</div>
<nz-form-item *ngIf="tags.length > 0 && urlArr.length < 3">
<nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
<nz-form-control [nzSpan]="20">
<button nz-button nzType="default" nzBlock (click)="addMoreUrl()">
<i nz-icon nzType="plus"></i>继续添加链接
</button>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
</nz-modal>
src/components/create-web/index.component.ts 0 → 100644
浏览文件 @ bc0ecc00
// Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
// See https://github.com/xjh22222228/nav
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
import { getLogoUrl } from '../../utils'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { ITagProp, INavFourProp } from '../../types'
import * as __tag from '../../../data/tag.json'
const tagMap: ITagProp = (__tag as any).default
const tagKeys = Object.keys(tagMap)
@Component({
selector: 'app-create-web',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class CreateWebComponent implements OnInit {
@Input() detail: object
@Input() visible: boolean
@Output() onCancel = new EventEmitter()
@Output() onOk = new EventEmitter()
validateForm!: FormGroup;
iconUrl = ''
urlArr = []
tags = tagKeys
tagMap = tagMap
constructor(
private fb: FormBuilder,
) {}
ngOnInit() {
this.validateForm = this.fb.group({
title: ['', [Validators.required]],
url: ['', [Validators.required]],
url0: [''],
url1: [''],
url2: [''],
tagVal0: [tagKeys[0]],
tagVal1: [tagKeys[0]],
tagVal2: [tagKeys[0]],
icon: [''],
desc: [''],
})
}
ngOnChanges() {
setTimeout(() => {
if (this.visible) {
this.validateForm.reset()
}
const detail = this.detail as INavFourProp
if (this.detail && this.visible) {
this.validateForm.get('title')!.setValue(detail.name)
this.validateForm.get('icon')!.setValue(detail.icon || '')
this.validateForm.get('url')!.setValue(detail.url || '')
this.validateForm.get('desc')!.setValue(detail.desc || '')
if (typeof detail.urls === 'object') {
let i = 0
for (let k in detail.urls) {
this.urlArr.push(null)
this.validateForm.get(`url${i}`)!.setValue(detail.urls[k])
this.validateForm.get(`tagVal${i}`)!.setValue(k)
i++
}
}
}
}, 100)
}
async onUrlBlur(e) {
const res = await getLogoUrl(e.target?.value)
this.iconUrl = (res || '') as string
this.validateForm.get('icon')!.setValue(res || '')
}
onIconBlur(e) {
this.iconUrl = e.target.value
}
addMoreUrl() {
this.urlArr.push(null)
}
lessMoreUrl() {
this.urlArr.pop()
}
handleCancel() {
this.onCancel.emit()
}
handleOk() {
for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
const createdAt = new Date().toISOString()
let urls = {}
let {
title,
icon,
url,
desc,
url0,
url1,
url2,
tagVal0,
tagVal1,
tagVal2
} = this.validateForm.value
if (!title || !url) return
title = title.trim()
if (tagVal0 && url0) {
urls[tagVal0] = url0
}
if (tagVal1 && url1) {
urls[tagVal1] = url1
}
if (tagVal2 && url2) {
urls[tagVal2] = url2
}
const payload = {
name: title,
createdAt: (this.detail as any)?.createdAt ?? createdAt,
desc: desc || '',
icon,
url,
urls
}
this.iconUrl = ''
this.urlArr = []
this.onOk.emit(payload)
}
}
src/components/fixbar/index.component.html
浏览文件 @ bc0ecc00
......@@ -62,4 +62,4 @@
</div>
</div>
<app-create [visible]="showCreateModal" (onCancel)="toggleModal()"></app-create>
<app-login [visible]="showCreateModal" (onCancel)="toggleModal()"></app-login>
src/components/create/create.component.ts → src/components/login/login.component.ts
浏览文件 @ bc0ecc00
......@@ -8,11 +8,11 @@ import { verifyToken } from '../../services'
import { getToken, setToken } from '../../utils/user'
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.scss']
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class CreateComponent implements OnInit {
export class LoginComponent implements OnInit {
@Input() visible: boolean
@Output() onCancel = new EventEmitter()
......
src/components/toolbar-title/index.component.html 0 → 100644
浏览文件 @ bc0ecc00
<div
class="title dark-primary dark-border-color"
*ngIf="dataSource && dataSource.title"
>
<span class="cursor-pointer" (click)="onCollapse.emit()">
<app-logo
[src]="dataSource.icon"
[name]="dataSource.title"
colour="#ff4d4f"
>
</app-logo>
<span style="margin-left: 10px;align-self: center;vertical-align: middle;">
{{ dataSource.title }} x {{ dataSource.nav.length }}
</span>
<i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="dataSource.collapsed"></i>
</span>
<i nz-icon nzType="plus" nzTheme="outline" class="add-icon" (click)="toggleCreateModal()"></i>
</div>
<app-create-web
*ngIf="showCreateModal"
[visible]="showCreateModal"
(onCancel)="toggleCreateModal()"
(onOk)="handleAdd($event)"
>
</app-create-web>
src/components/toolbar-title/index.component.scss 0 → 100644
浏览文件 @ bc0ecc00
.title {
position: relative;
font-size: 18px;
border-bottom: 1px solid #eee;
padding: 10px 0;
color: #3f51b5;
font-weight: 500;
display: flex;
margin-bottom: 15px;
.add-icon {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
cursor: pointer;
}
}
src/components/toolbar-title/index.component.ts 0 → 100644
浏览文件 @ bc0ecc00
// Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
// See https://github.com/xjh22222228/nav
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
import { INavThreeProp, INavProps, INavFourProp } from '../../types'
import { NzMessageService } from 'ng-zorro-antd/message'
import * as __tag from '../../../data/tag.json'
import { queryString, setWebsiteList } from '../../utils'
import { websiteList } from '../../store'
@Component({
selector: 'app-toolbar-title',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class ToolbarTitleWebComponent implements OnInit {
@Input() index: number
@Input() dataSource: INavThreeProp
@Output() onCollapse = new EventEmitter()
showCreateModal = false
websiteList: INavProps[] = websiteList
constructor(
private message: NzMessageService,
) {}
ngOnInit() {}
toggleCreateModal() {
this.showCreateModal = !this.showCreateModal
}
handleAdd(payload: INavFourProp) {
const { page, id } = queryString()
const w = this.websiteList[page].nav[id].nav[this.index].nav
const exists = w.some(item => item.name === payload.name)
if (exists) {
return this.message.error('请不要重复添加')
}
w.unshift(payload)
this.message.success('新增成功!')
setWebsiteList(this.websiteList)
this.toggleCreateModal()
}
}
src/view/admin/index.component.html
浏览文件 @ bc0ecc00
......@@ -261,7 +261,7 @@
<button
nz-button
nzType="primary"
(click)="toggleCreateModal()"
(click)="toggleCreateWebModal()"
style="margin-left: 20px;"
>
添加网站
......@@ -298,7 +298,7 @@
<td>{{ data.desc }}</td>
<td>{{ data.createdAt }}</td>
<td>
<a (click)="handleEditBtn(data, idx)">编辑</a>
<a (click)="toggleCreateWebModal(); websiteDetail = data; editIdx = idx">编辑</a>
<a
nz-popconfirm
nzPopconfirmTitle="您确定要删除吗?"
......@@ -315,6 +315,14 @@
</nz-tabset>
</div>
<app-create-web
[visible]="showCreateWebModal"
(onCancel)="toggleCreateWebModal()"
(onOk)="onOkCreateWeb($event)"
[detail]="websiteDetail"
>
</app-create-web>
<nz-modal
[(nzVisible)]="showCreateModal"
[nzTitle]="isEdit ? '编辑' : '新增'"
......@@ -324,24 +332,17 @@
<ng-container *nzModalContent>
<form nz-form [formGroup]="validateForm">
<nz-form-item>
<nz-form-label [nzSpan]="4" nzRequired>{{ tabActive === 3 ? '网站名称' : '分类名称'}}</nz-form-label>
<nz-form-label [nzSpan]="4" nzRequired>分类名称</nz-form-label>
<nz-form-control [nzSpan]="20" nzErrorTip="请输入名称">
<input formControlName="title" nz-input placeholder="发现导航" />
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="tabActive === 3">
<nz-form-label [nzSpan]="4" nzRequired>网站链接</nz-form-label>
<nz-form-control [nzSpan]="20" nzErrorTip="请输入网站链接">
<input formControlName="url" nz-input placeholder="https://nav3.cn" (blur)="onUrlBlur($event)" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">图标地址</nz-form-label>
<nz-form-control [nzSpan]="20">
<nz-input-group [nzPrefix]="prefixIcon">
<input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" (blur)="onIconBlur($event)" />
<input formControlName="icon" nz-input placeholder="https://example.com/favicon.png" />
</nz-input-group>
<ng-template #prefixIcon>
......@@ -349,60 +350,6 @@
</ng-template>
</nz-form-control>
</nz-form-item>
<nz-form-item *ngIf="tabActive === 3">
<nz-form-label [nzSpan]="4">网站描述</nz-form-label>
<nz-form-control [nzSpan]="20">
<textarea
formControlName="desc"
placeholder="发现导航, 精选实用导航网站"
nz-input
[nzAutosize]="{ minRows: 3, maxRows: 5 }"
>
</textarea>
</nz-form-control>
</nz-form-item>
<!-- more url -->
<div *ngIf="tabActive === 3">
<nz-form-item *ngFor="let n of urlArr; let idx = index">
<nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
<nz-form-control [nzSpan]="20">
<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
<input [formControlName]="'url' + idx" type="text" nz-input />
</nz-input-group>
<ng-template #addOnBeforeTemplate>
<nz-select style="width: 100px;" [formControlName]="'tagVal' + idx">
<nz-option
*ngFor="let tag of tags"
[nzLabel]="tag"
[nzValue]="tag"
>
</nz-option>
</nz-select>
</ng-template>
<ng-template #addOnAfterTemplate>
<i
class="cursor-pointer"
nz-icon
nzType="minus"
nzTheme="outline"
(click)="lessMoreUrl()"
>
</i>
</ng-template>
</nz-form-control>
</nz-form-item>
</div>
<nz-form-item *ngIf="tabActive === 3 && tags.length > 0 && urlArr.length < 3">
<nz-form-label [nzSpan]="4" [nzNoColon]="true"></nz-form-label>
<nz-form-control [nzSpan]="20">
<button nz-button nzType="default" nzBlock (click)="addMoreUrl()">
<i nz-icon nzType="plus"></i>继续添加链接
</button>
</nz-form-control>
</nz-form-item>
</form>
</ng-container>
</nz-modal>
src/view/admin/index.component.ts
浏览文件 @ bc0ecc00
......@@ -10,15 +10,14 @@ import { NzMessageService } from 'ng-zorro-antd/message'
import { NzModalService } from 'ng-zorro-antd/modal'
import { NzNotificationService } from 'ng-zorro-antd/notification'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { setWebsiteList, getLogoUrl } from '../../utils'
import { setWebsiteList } from '../../utils'
import { updateFileContent } from '../../services'
import { DB_PATH, LOGO_PATH } from '../../constants'
import { parseBookmark } from '../../utils/bookmark'
import * as __tag from '../../../data/tag.json'
import config from '../../../nav.config'
import { parseBookmark } from '../../utils/bookmark'
const tagMap: ITagProp = (__tag as any).default
const tagKeys = Object.keys(tagMap)
@Component({
selector: 'app-admin',
......@@ -31,6 +30,7 @@ export default class WebpComponent {
gitRepoUrl = config.gitRepoUrl
isLogin = !!getToken()
showCreateModal = false
showCreateWebModal = false
syncLoading = false
uploading = false
tabActive = 0
......@@ -39,11 +39,9 @@ export default class WebpComponent {
oneSelect = ''
twoSelect = ''
threeSelect = ''
iconUrl = ''
urlArr = []
tags = tagKeys
tagMap = tagMap
objectKeys = Object.keys
websiteDetail: INavFourProp|null
twoTableData: INavTwoProp[] = []
threeTableData: INavThreeProp[] = []
......@@ -59,16 +57,8 @@ export default class WebpComponent {
ngOnInit () {
this.validateForm = this.fb.group({
title: ['', [Validators.required]],
url: ['', [Validators.required]],
url0: [''],
url1: [''],
url2: [''],
tagVal0: [tagKeys[0]],
tagVal1: [tagKeys[0]],
tagVal2: [tagKeys[0]],
icon: [''],
desc: [''],
});
})
}
onBookChange(e) {
......@@ -133,14 +123,6 @@ export default class WebpComponent {
}
}
addMoreUrl() {
this.urlArr.push(null)
}
lessMoreUrl() {
this.urlArr.pop()
}
handleReset() {
this.modal.info({
nzTitle: '重置初始数据',
......@@ -160,6 +142,15 @@ export default class WebpComponent {
history.go(-1)
}
toggleCreateWebModal() {
if (this.tabActive === 3 && !this.threeSelect) {
return this.message.error('请选择三级分类')
}
this.websiteDetail = null
this.showCreateWebModal = !this.showCreateWebModal
}
toggleCreateModal() {
// 检测是否有选择
if (!this.showCreateModal) {
......@@ -169,15 +160,30 @@ export default class WebpComponent {
if (this.tabActive === 2 && !this.twoSelect) {
return this.message.error('请选择二级分类')
}
if (this.tabActive === 3 && !this.threeSelect) {
return this.message.error('请选择三级分类')
}
}
this.isEdit = false
this.showCreateModal = !this.showCreateModal
this.validateForm.reset()
this.urlArr = []
}
onOkCreateWeb(payload: INavFourProp) {
// 编辑
if (this.websiteDetail) {
this.websiteTableData[this.editIdx] = payload
} else {
// 创建
const exists = this.websiteTableData.some(item => item.name === payload.name)
if (exists) {
return this.message.error('请不要重复添加')
}
this.websiteTableData.unshift(payload)
this.message.success('新增成功!')
}
setWebsiteList(this.websiteList)
this.toggleCreateWebModal()
}
onTabChange(index: number) {
......@@ -273,36 +279,13 @@ export default class WebpComponent {
this.websiteTableData = findItem.nav
}
async onUrlBlur(e) {
const res = await getLogoUrl(e.target?.value)
this.iconUrl = (res || '') as string
this.validateForm.get('icon')!.setValue(res || '')
}
onIconBlur(e) {
this.iconUrl = e.target.value
}
handleEditBtn(data, editIdx) {
let { title, icon, url, desc, name, urls } = data
let { title, icon, name } = data
this.toggleCreateModal()
this.isEdit = true
this.editIdx = editIdx
this.urlArr = []
this.validateForm.get('title')!.setValue(title || name || '')
this.validateForm.get('icon')!.setValue(icon || '')
this.validateForm.get('url')!.setValue(url || '')
this.validateForm.get('desc')!.setValue(desc || '')
if (typeof urls === 'object') {
let i = 0
for (let k in urls) {
this.urlArr.push(null)
this.validateForm.get(`url${i}`)!.setValue(urls[k])
this.validateForm.get(`tagVal${i}`)!.setValue(k)
i++
}
}
}
handleSync() {
......@@ -343,33 +326,9 @@ export default class WebpComponent {
this.validateForm.controls[i].updateValueAndValidity();
}
const urls = {}
let {
title,
icon,
url,
desc,
tagVal0,
tagVal1,
tagVal2,
url0,
url1,
url2
} = this.validateForm.value
if (tagVal0 && url0) {
urls[tagVal0] = url0
}
if (tagVal1 && url1) {
urls[tagVal1] = url1
}
if (tagVal2 && url2) {
urls[tagVal2] = url2
}
let { title, icon } = this.validateForm.value
if (!title) {
return
}
if (!title) return
if (this.isEdit) {
switch (this.tabActive) {
......@@ -393,17 +352,6 @@ export default class WebpComponent {
this.threeTableData[this.editIdx].icon = icon
}
break
// 编辑网站
case 3: {
if (!url) return
this.websiteTableData[this.editIdx].name = title
this.websiteTableData[this.editIdx].desc = desc
this.websiteTableData[this.editIdx].url = url
this.websiteTableData[this.editIdx].icon = icon
this.websiteTableData[this.editIdx].urls = urls
}
break
}
this.message.success('保存成功!')
......@@ -456,33 +404,12 @@ export default class WebpComponent {
})
}
break
// 新增网站
case 3: {
if (!url) return
const exists = this.websiteTableData.some(item => item.name === title)
if (exists) {
return this.message.error('请不要重复添加')
}
this.websiteTableData.unshift({
createdAt,
name: title,
icon,
url,
desc,
urls
})
}
break
}
this.message.success('新增成功!')
}
this.iconUrl = ''
this.validateForm.reset()
this.toggleCreateModal()
this.urlArr = []
setWebsiteList(this.websiteList)
}
}
src/view/index/light/index.component.html
浏览文件 @ bc0ecc00
......@@ -39,37 +39,11 @@
<div *ngIf="currentList.length > 0; else noData">
<div *ngFor="let item of currentList; let i=index">
<div class="title-wrapper dark-border-color" *ngIf="item.title">
<h2 class="block-title">
<app-logo
[src]="item.icon"
[name]="item.title"
colour="#ff4d4f"
>
</app-logo>
<span
(click)="onCollapse(item, i)"
class="cursor-pointer dark-primary"
style="align-self: center; margin-left: 10px;"
>
{{ item.title }} x {{ item.nav.length }}
</span>
<i
class="iconfont iconjiantouarrow483 down-arrow"
[class.active]="item.collapsed"
(click)="onCollapse(item, i)"
>
</i>
</h2>
</div>
<app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)"></app-toolbar-title>
<div style="padding: 0 10px;" nz-row [nzGutter]="[16, 16]" *ngIf="!item.collapsed">
<div class="gutter-row" nz-col [nzSpan]="8" *ngFor="let el of item.nav;">
<app-card
[dataSource]="el"
>
</app-card>
<div class="gutter-row" nz-col [nzSpan]="8" *ngFor="let el of item.nav">
<app-card [dataSource]="el"></app-card>
</div>
</div>
</div>
......
src/view/index/light/index.component.scss
浏览文件 @ bc0ecc00
......@@ -103,21 +103,5 @@
padding-bottom: 50px;
overflow: hidden;
overflow-y: auto;
.title-wrapper {
border-bottom: 1px solid #eee;
padding: 10px 30px 10px 15px;
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.block-title {
display: inline-block;
position: relative;
color: #3F51B5;
align-self: center;
display: flex;
}
}
}
src/view/index/side/index.component.html
浏览文件 @ bc0ecc00
......@@ -32,38 +32,23 @@
</div>
<div class="box" [style.marginTop]="searchEngineList.length > 0 ? '80px' : '0'">
<app-no-data *ngIf="currentList.length === 0 || currentList[0].nav.length === 0"></app-no-data>
<div *ngFor="let item of currentList; let i=index">
<div class="nav-wrapper">
<div
class="title dark-primary dark-border-color"
*ngIf="item.title"
>
<span class="cursor-pointer" (click)="onCollapse(item, i)">
<app-logo
[src]="item.icon"
[name]="item.title"
colour="#ff4d4f"
>
</app-logo>
<span style="margin-left: 10px;align-self: center;vertical-align: middle;">{{ item.title }} x {{ item.nav.length }}</span>
<i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
</span>
</div>
<div nz-row [nzGutter]="[16, 16]" *ngIf="!item.collapsed">
<div class="gutter-row" nz-col [nzSpan]="6" *ngFor="let el of item.nav; let idx=index">
<app-card
[dataSource]="el"
>
</app-card>
<div *ngIf="currentList.length > 0; else noData">
<div *ngFor="let item of currentList; let i=index">
<div class="nav-wrapper">
<app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)" [index]="i"></app-toolbar-title>
<div nz-row [nzGutter]="[16, 16]" *ngIf="!item.collapsed">
<div class="gutter-row" nz-col [nzSpan]="6" *ngFor="let el of item.nav">
<app-card [dataSource]="el"></app-card>
</div>
</div>
</div>
</div>
</div>
<ng-template #noData>
<app-no-data></app-no-data>
</ng-template>
</div>
<app-footer className="side-footer"></app-footer>
......
src/view/index/side/index.component.scss
浏览文件 @ bc0ecc00
$sideWidth: 200px;
.layout {
......@@ -36,17 +35,6 @@ $sideWidth: 200px;
}
}
.title {
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 10px 0;
margin-top: 15px;
margin-bottom: 10px;
color: #3f51b5;
font-weight: 500;
display: flex;
}
.logo {
z-index: 11;
position: fixed;
......
src/view/index/sim/index.component.html
浏览文件 @ bc0ecc00
......@@ -33,38 +33,27 @@
</nav>
<aside class="site-box dark-bg">
<div *ngFor="let item of currentList; let i=index">
<div class="nav-wrapper">
<div
class="title dark-primary dark-border-color"
*ngIf="item.title"
>
<span class="cursor-pointer" (click)="onCollapse(item, i)">
<app-logo
[src]="item.icon"
[name]="item.title"
colour="#ff4d4f"
>
</app-logo>
<span style="margin-left: 10px;align-self: center;vertical-align: middle;">{{ item.title }} x {{ item.nav.length }}</span>
<i class="iconfont iconjiantouarrow483 down-arrow" [class.active]="item.collapsed"></i>
</span>
</div>
<div nz-row [nzGutter]="[16, 16]" *ngIf="!item.collapsed">
<div class="gutter-row" nz-col [nzSpan]="8" *ngFor="let el of item.nav; let idx=index">
<app-card
[dataSource]="el"
>
</app-card>
<div *ngIf="currentList.length > 0; else noData">
<div *ngFor="let item of currentList; let i=index">
<div class="nav-wrapper">
<app-toolbar-title [dataSource]="item" (onCollapse)="onCollapse(item, i)"></app-toolbar-title>
<div nz-row [nzGutter]="[16, 16]" *ngIf="!item.collapsed">
<div class="gutter-row" nz-col [nzSpan]="8" *ngFor="let el of item.nav; let idx=index">
<app-card
[dataSource]="el"
[index]="idx"
>
</app-card>
</div>
</div>
</div>
</div>
</div>
<app-no-data *ngIf="currentList.length === 0 || currentList[0].nav.length === 0"></app-no-data>
<ng-template #noData>
<app-no-data></app-no-data>
</ng-template>
</aside>
</div>
</div>
......
src/view/index/sim/index.component.scss
浏览文件 @ bc0ecc00
......@@ -105,16 +105,6 @@ $width: 1200px;
margin-left: 30px;
padding: 15px;
float: right;
.title {
font-size: 18px;
border-bottom: 1px solid #eee;
padding: 10px 0;
color: #3f51b5;
font-weight: 500;
display: flex;
margin-bottom: 15px;
}
}
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或