Skip to content

开
开源百科

兴科Sinco / 开源百科
与 Fork 源项目一致

Fork自 GitCode官方 / 开源百科

通知 1
Star 0
Fork 0
开
开源百科

体验新版 GitCode，发现更多精彩内容 >>

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

refactor: 重构优化

上级 f6f43de6
隐藏空白更改
内联 并排
Showing with 421 addition and 287 deletion
config/index.ts
浏览文件 @ 063dc280
......@@ -16,12 +16,16 @@ export const webpLanguage = [
'Git'
]
// 如果没有请赋值空字符串
export const git = 'https://github.com/xjh22222228/nav'
// Git 仓库地址, 没有填空字符串
export const GIT_REPO_URL = 'https://github.com/xjh22222228/nav'
// 网站底部描述, 可以是 HTML
// 可以是版权信息，备案号
export const FOOTER_DESC = ''
// 百度统计
export const TONGJI_URL = 'https://hm.baidu.com/hm.js?4582be7af7e7c95ef75351e07c6c32ba'
// http://www.nav3.cn/#/index?q=grabient
export const BACKGROUND_LINEAR = [
'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)',
......
data/node/deno.ts
浏览文件 @ 063dc280
const DEFAULT_ICON = 'https://avatars1.githubusercontent.com/u/42048915?s=200&v=4';
export default {
title: 'Deno',
nav: [
{
subtitle: '官方',
icon: DEFAULT_ICON,
nav: [
{
icon: 'https://avatars1.githubusercontent.com/u/42048915?s=200&v=4',
icon: null,
name: 'Deno',
desc: '一个安全的运行时的JavaScript和TypeScript',
link: 'https://deno.land/',
......@@ -16,7 +20,7 @@ export default {
]
},
{
icon: 'https://avatars1.githubusercontent.com/u/42048915?s=200&v=4',
icon: null,
name: 'Deno 标准库',
desc: 'Deno 标准库',
link: 'https://deno.land/std',
......@@ -25,9 +29,10 @@ export default {
},
{
subtitle: '工具',
icon: DEFAULT_ICON,
nav: [
{
icon: 'https://avatars1.githubusercontent.com/u/42048915?s=200&v=4',
icon: null,
name: 'Deno',
desc: '适用于Deno的Visual Studio Code插件',
link: 'https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno',
......
data/node/frame.ts
浏览文件 @ 063dc280
......@@ -3,9 +3,10 @@ export default {
nav: [
{
subtitle: 'Electron',
icon: 'https://www.electronjs.org/images/favicon.ico',
nav: [
{
icon: 'https://www.electronjs.org/images/favicon.ico',
icon: null,
name: 'Electron',
desc: '使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用',
link: 'https://electronjs.org/',
......@@ -16,13 +17,13 @@ export default {
]
},
{
icon: 'https://www.electronjs.org/images/favicon.ico',
icon: null,
name: 'electron-packager',
desc: '通过JS或CLI自定义和封装您的Electron应用程序与特定于操作系统的软件包（.app，.exe等）',
link: 'https://github.com/electron-userland/electron-packager',
},
{
icon: 'https://www.electronjs.org/images/favicon.ico',
icon: null,
name: 'electron-installer-dmg',
desc: '使用AppDMG为电子应用程序创建DMG安装程序',
link: 'https://github.com/electron-userland/electron-installer-dmg',
......@@ -61,7 +62,7 @@ export default {
]
},
{
icon: '',
icon: null,
name: 'menubar',
desc: 'Electron创建菜单栏桌面应用程序的高级方法。',
link: 'https://github.com/maxogden/menubar',
......@@ -97,4 +98,4 @@ export default {
]
},
]
}
\ No newline at end of file
}
data/node/module.ts
浏览文件 @ 063dc280
......@@ -15,7 +15,7 @@ export default {
link: 'https://github.com/request/request',
},
{
icon: 'assets/icon/frontend/049.png',
icon: null,
name: 'superagent',
desc: '一个小型渐进式客户端HTTP请求库，Node.js模块具有相同的API，具有许多高级HTTP客户端功能',
link: 'http://visionmedia.github.io/superagent/',
......@@ -44,7 +44,7 @@ export default {
link: 'https://github.com/mikeal/bent',
},
{
icon: 'assets/icon/frontend/049.png',
icon: null,
name: 'superagent-proxy',
desc: 'superagent代理扩展，这使您可以通过某种代理来代理HTTP请求',
link: 'https://github.com/TooTallNate/superagent-proxy',
......@@ -282,7 +282,7 @@ export default {
icon: DEFAULT_ICON,
nav: [
{
icon: 'assets/icon/frontend/132.png',
icon: null,
name: 'node-http-proxy',
desc: '一个HTTP可编程代理库，支持websocket。它适用于实现反向代理和负载平衡器等组件',
link: 'https://github.com/nodejitsu/node-http-proxy',
......@@ -368,25 +368,25 @@ export default {
icon: DEFAULT_ICON,
nav: [
{
icon: 'assets/icon/frontend/135.png',
icon: null,
name: 'wechat-oauth',
desc: '微信公共平台OAuth接口消息接口服务中间件与API SDK',
link: 'https://github.com/node-webot/wechat-oauth',
},
{
icon: 'assets/icon/frontend/135.png',
icon: null,
name: 'wechat-api',
desc: '微信公共平台API',
link: 'https://github.com/node-webot/wechat-api',
},
{
icon: 'assets/icon/frontend/135.png',
icon: null,
name: 'wechat',
desc: '微信公共平台消息接口服务中间件',
link: 'https://github.com/node-webot/wechat',
},
{
icon: 'assets/icon/frontend/135.png',
icon: null,
name: 'wechaty',
desc: '是适用于微信个人帐户的Bot SDK ，可以帮助您创建6行javascript的机器人',
link: 'https://chatie.io/wechaty/',
......@@ -468,13 +468,13 @@ export default {
link: 'https://github.com/npm/node-semver'
},
{
icon: 'assets/icon/frontend/076.png',
icon: null,
name: 'node-progress',
desc: 'node.js的灵活ascii进度条',
link: 'https://github.com/visionmedia/node-progress'
},
{
icon: 'assets/icon/frontend/076.png',
icon: null,
name: 'node-qrcode',
desc: '二维码生成',
link: 'https://github.com/soldair/node-qrcode'
......@@ -486,19 +486,19 @@ export default {
link: 'https://github.com/sindresorhus/open',
},
{
icon: 'assets/icon/frontend/076.png',
icon: null,
name: 'ssh2',
desc: '用纯JavaScript编写的SSH2客户端和服务器模块，用于node.js',
link: 'https://github.com/mscdex/ssh2',
},
{
icon: 'assets/icon/frontend/076.png',
icon: null,
name: 'minimist',
desc: '解析参数选项',
link: 'https://github.com/substack/minimist',
},
{
icon: 'assets/icon/frontend/076.png',
icon: null,
name: 'node-clear',
desc: '清空终端屏幕信息',
link: 'https://github.com/bahamas10/node-clear',
......@@ -615,7 +615,7 @@ export default {
]
},
{
icon: 'assets/icon/frontend/136.png',
icon: 'http://www.passportjs.org/images/favicon/apple-icon-57x57.png',
name: 'passport',
desc: 'Node.js的简单，不显眼的身份验证',
link: 'http://www.passportjs.org/',
......
src/app/app.component.html
浏览文件 @ 063dc280
<div id="xiejiahe" class="app">
<a
[href]="git"
target="_blank"
rel="noreferer noopener"
class="github-link"
*ngIf="git"
>
<svg width="60" height="60" viewBox="0 0 250 250" style="fill:#20a0ff;color:#fff;position:fixed;top:-6px;border:0;right:-6px;z-index:10001;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" data-url="https://github.com/xjh22222228" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"><style>@keyframes octocat {0%, 100% {transform:rotate(0);}20%,60%{transform:rotate(-25deg);}40%, 80%{transform: rotate(100deg);}}.octo-arm {animation: octocat 1.1s linear infinite;}</style></path></svg>
</a>
<router-outlet></router-outlet>
<app-icon-git></app-icon-git>
<footer class="footer">
<div>
<span class="total">共收录 {{ includeTotal }} 个网站</span>
</div>
<div class="copyright" *ngIf="FOOTER_DESC" [innerHTML]="FOOTER_DESC"></div>
</footer>
<router-outlet></router-outlet>
</div>
src/app/app.component.scss
浏览文件 @ 063dc280
......@@ -3,24 +3,4 @@
&.app {
color: #000;
}
.footer {
text-align: center;
margin-top: 10px;
color: #fff;
.total {
margin-left: 5px;
vertical-align: super;
font-weight: bold;
}
.runtime {
font-weight: bold;
}
.copyright > * {
color: #fff;
}
}
}
src/app/app.component.ts
浏览文件 @ 063dc280
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import nav from '../../data';
import { BACKGROUND_LINEAR, git, FOOTER_DESC } from '../../config';
import { randomInt } from '../utils';
import nav from '../../data'
import { Component } from '@angular/core'
import { Router, ActivatedRoute } from '@angular/router'
import { BACKGROUND_LINEAR, TONGJI_URL } from '../../config'
import { randomInt } from '../utils'
@Component({
selector: 'app-xiejiahe',
......@@ -10,65 +10,54 @@ import { randomInt } from '../utils';
styleUrls: ['./app.component.scss']
})
export class AppComponent {
nav: Array<any> = nav
constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
nav: Array<any> = nav;
includeTotal: number = 0;
git: string = git;
FOOTER_DESC: string = FOOTER_DESC;
ngOnInit() {
const hash = window.location.hash;
const params = new URLSearchParams(hash.slice(hash.indexOf('?')));
const page = params.get('page');
const id = params.get('id');
const q = params.get('q');
const queryParams = { page, id, q };
this.goRoute(queryParams);
this.computedTotal();
const hash = window.location.hash
const params = new URLSearchParams(hash.slice(hash.indexOf('?')))
const page = params.get('page')
const id = params.get('id')
const q = params.get('q')
const queryParams = { page, id, q }
this.goRoute(queryParams)
this.appendTongji()
}
ngAfterViewInit() {
setInterval(this.setBackground, 10000);
setInterval(this.setBackground, 10000)
}
goRoute(queryParams: object) {
const screenWidth = window.innerWidth;
const screenWidth = window.innerWidth
if (screenWidth < 768) {
this.router.navigate(['/app'], { queryParams });
this.router.navigate(['/app'], { queryParams })
} else {
this.router.navigate(['/index'], { queryParams });
}
}
// 计算收录个数
computedTotal() {
let total = 0;
function r(nav) {
if (!Array.isArray(nav)) return;
for (let i = 0; i < nav.length; i++) {
if (nav[i].link) {
total += 1;
} else {
r(nav[i].nav);
}
}
this.router.navigate(['/index'], { queryParams })
}
r(this.nav);
this.includeTotal = total;
}
setBackground() {
const randomBg = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)];
const el = document.getElementById('index-background');
if (!el) return;
el.style.opacity = '.3';
const randomBg = BACKGROUND_LINEAR[randomInt(BACKGROUND_LINEAR.length)]
const el = document.getElementById('index-background')
if (!el) return
el.style.opacity = '.3'
setTimeout(() => {
el.style.backgroundImage = randomBg;
el.style.opacity = '1';
}, 1000);
el.style.backgroundImage = randomBg
el.style.opacity = '1'
}, 1000)
}
appendTongji() {
if (document.getElementById('tongji_url')) return
const script = document.createElement('script')
script.src = TONGJI_URL
script.id = 'tongji_url'
script.async = true
document.documentElement.appendChild(script)
}
}
src/app/app.module.ts
浏览文件 @ 063dc280
......@@ -7,9 +7,12 @@ import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// views
import { HomeComponent } from '../view/index.component';
import { WebpComponent } from '../view/app.component';
import HomeComponent from '../view/index/default/index.component';
import WebpComponent from '../view/app/default/app.component';
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 { LoadingComponent } from '../components/loading/loading.component';
const appRoutes: Routes = [
{
......@@ -31,7 +34,11 @@ const appRoutes: Routes = [
declarations: [
AppComponent,
HomeComponent,
WebpComponent
WebpComponent,
FooterComponent,
IconGitComponent,
NoDataComponent,
LoadingComponent
],
imports: [
BrowserModule,
......@@ -49,4 +56,5 @@ const appRoutes: Routes = [
AppComponent,
],
})
export class AppModule { }
src/components/footer/footer.component.html 0 → 100644
浏览文件 @ 063dc280
<footer class="footer">
<div class="total" [ngStyle]="{marginBottom: !FOOTER_DESC && '5px'}">
共收录 {{ totalWeb }} 个网站
</div>
<div class="copyright" *ngIf="FOOTER_DESC" [innerHTML]="FOOTER_DESC"></div>
</footer>
src/components/footer/footer.component.scss 0 → 100644
浏览文件 @ 063dc280
.footer {
text-align: center;
margin-top: 5px;
color: #fff;
.total {
font-weight: bold;
}
.runtime {
font-weight: bold;
}
.copyright {
color: #fff;
margin-bottom: 5px;
}
}
src/components/footer/footer.component.ts 0 → 100644
浏览文件 @ 063dc280
import { Component, OnInit } from '@angular/core'
import { FOOTER_DESC } from '../../../config'
import { totalWeb } from '../../utils'
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
FOOTER_DESC: string = FOOTER_DESC;
totalWeb: number = totalWeb()
constructor() { }
ngOnInit(): void {
}
}
src/components/icon-git/icon-git.component.html 0 → 100644
浏览文件 @ 063dc280
<a
[href]="GIT_REPO_URL"
target="_blank"
rel="noreferer noopener"
class="github-link"
*ngIf="GIT_REPO_URL"
>
<svg width="60" height="60" viewBox="0 0 250 250" style="fill:#20a0ff;color:#fff;position:fixed;top:-6px;border:0;right:-6px;z-index:10001;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" data-url="https://github.com/xjh22222228" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"><style>@keyframes octocat {0%, 100% {transform:rotate(0);}20%,60%{transform:rotate(-25deg);}40%, 80%{transform: rotate(100deg);}}.octo-arm {animation: octocat 1.1s linear infinite;}</style></path></svg>
</a>
src/components/icon-git/icon-git.component.ts 0 → 100644
浏览文件 @ 063dc280
import { Component, OnInit } from '@angular/core';
import { GIT_REPO_URL } from '../../../config';
@Component({
selector: 'app-icon-git',
templateUrl: './icon-git.component.html',
styleUrls: ['./icon-git.component.scss']
})
export class IconGitComponent implements OnInit {
GIT_REPO_URL: string = GIT_REPO_URL
constructor() { }
ngOnInit(): void {
}
}
src/components/loading/loading.component.html 0 → 100644
浏览文件 @ 063dc280
<div class="loading">
<img src="assets/img/loading.gif" alt="" />
</div>
src/components/loading/loading.component.scss 0 → 100644
浏览文件 @ 063dc280
.loading {
z-index: 6666;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(251, 251, 251);
display: flex;
align-items: flex-start;
justify-content: center;
}
src/components/loading/loading.component.ts 0 → 100644
浏览文件 @ 063dc280
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.scss']
})
export class LoadingComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/components/no-data/no-data.component.html 0 → 100644
浏览文件 @ 063dc280
<div class="no-result">
对不起，没有找到您想要的结果~
<div class="back">
<span (click)="goBack()">Back</span>
</div>
</div>
src/components/no-data/no-data.component.scss 0 → 100644
浏览文件 @ 063dc280
.no-result {
margin-top: 80px;
text-align: center;
.back {
margin-top: 30px;
span {
cursor: pointer;
}
}
}
src/components/no-data/no-data.component.ts 0 → 100644
浏览文件 @ 063dc280
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-no-data',
templateUrl: './no-data.component.html',
styleUrls: ['./no-data.component.scss']
})
export class NoDataComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
goBack = () => {
history.go(-1);
}
}
src/index.html
浏览文件 @ 063dc280
......@@ -47,6 +47,5 @@
</app-xiejiahe>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/ripple.min.js"></script>
<script src="https://hm.baidu.com/hm.js?4582be7af7e7c95ef75351e07c6c32ba"></script>
</body>
</html>
src/utils/index.ts
浏览文件 @ 063dc280
import nav from '../../data';
export function debounce(func, wait, immediate) {
let timeout;
let timeout
return function () {
let context = this;
let args = arguments;
let context = this
let args = arguments
if (timeout) clearTimeout(timeout)
if (timeout) clearTimeout(timeout);
if (immediate) {
let callNow = !timeout;
let callNow = !timeout
timeout = setTimeout(() => {
timeout = null;
timeout = null
}, wait)
if (callNow) func.apply(context, args)
}
else {
} else {
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}, wait)
}
}
}
export function randomInt(max) {
return Math.floor(Math.random() * max);
export function randomInt(max: number) {
return Math.floor(Math.random() * max)
}
export function fuzzySearch(navList: any[], keyword: string) {
let searchResultList = [{ nav: [] }]
return function f(arr?: any[]) {
arr = arr || navList
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i].nav)) {
f(arr[i].nav)
}
if (arr[i].name) {
const name = arr[i].name.toLowerCase()
const desc = arr[i].desc.toLowerCase()
const search = keyword.toLowerCase()
if (~name.indexOf(search) || ~desc.indexOf(search)) {
try {
let result = Object.assign({}, arr[i])
const regex = new RegExp(`(${keyword})`, 'i')
result.name = result.name.replace(regex, `$1`.bold())
result.desc = result.desc.replace(regex, `$1`.bold())
const idx = searchResultList[0].nav.findIndex(item => item.name === result.name)
if (idx === -1) {
searchResultList[0].nav.push(result)
}
} catch (err) {}
}
}
}
return searchResultList
}
}
export function totalWeb(): number {
let total = 0;
function r(nav) {
if (!Array.isArray(nav)) return
for (let i = 0; i < nav.length; i++) {
if (nav[i].link) {
total += 1
} else {
r(nav[i].nav)
}
}
}
r(nav)
return total
}
src/view/app.component.ts → src/view/app/default/app.component.ts
浏览文件 @ 063dc280
import nav from '../../../../data';
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import nav from '../../data';
import { webpLanguage } from '../../config';
import { webpLanguage } from '../../../../config';
@Component({
selector: 'app-home',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class WebpComponent {
export default class WebpComponent {
constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
nav: Array<any> = nav;
......
src/view/index.component.html 已删除 100644 → 0
浏览文件 @ f6f43de6
<main class="homepage container">
<div class="bg-color-linear" id="index-background"></div>
<input
type="text"
class="search"
placeholder="聚焦搜索"
maxlength="50"
(input)="searchLoading = true; handleSearch()"
[(ngModel)]="search"
*ngIf="showInput"
(blur)="showInput = false"
/>
<nav class="top-nav user-select-none">
<a
*ngFor="let item of nav; let i = index;"
(click)="handleCilckNav(i)"
[class.active]="page === i"
class="ripple-btn">
{{ item.title }}
</a>
</nav>
<section class="index-section user-select-none">
<aside class="sidebar" id="sidebar">
<ul>
<li
class="tag"
*ngFor="let item of nav[page].nav; let i = index"
[class.active]="id === i"
(click)="handleSidebarNav(i)">
<a class="ripple-btn" *ngIf="item.title">{{ item.title }}</a>
</li>
</ul>
<div class="icon-box">
<a href="javascript:;" (click)="handleOnClickSearch()">
<img src="assets/img/search.svg" alt="" class="icon" draggable="false">
</a>
</div>
</aside>
<div class="main" id="main" (scroll)="handleScroll($event)">
<!-- Loading -->
<div class="loading" *ngIf="searchLoading">
<img src="assets/img/loading.gif" alt="" />
</div>
<ul *ngIf="list.length && list[0].nav">
<li *ngFor="let item of list">
<div class="title-wrapper" *ngIf="item.subtitle">
<h2 class="block-title">
{{ item.subtitle }} x {{ item.nav.length }}
<a
[href]="git + '/tree/master/data'"
class="edit"
target="_blank"
rel="noopener noreferer"
title="编辑"
>
</a>
</h2>
</div>
<div class="row">
<div class="click-btn" *ngFor="let el of item.nav">
<a [href]="el.link" target="_blank" rel="noopener noreferer">
<div class="top">
<img
*ngIf="el.icon || item.icon; else icon"
[src]="el.icon || item.icon"
alt=""
class="icon"
>
<ng-template #icon>
<span class="icon"></span>
</ng-template>
<em class="name" [innerHtml]="el.name"></em>
</div>
<div class="desc" [innerHtml]="el.desc"></div>
</a>
<div class="mark" *ngIf="el.language && el.language.length > 0">
<div class="button-box">
<a
[href]="el.language[0]"
class="zh"
target="_blank"
*ngIf="el.language[0]"
rel="noopener noreferer"
>
{{ language[0] }}
</a>
<a
[href]="el.language[1]"
class="zh"
target="_blank"
*ngIf="el.language[1]"
rel="noopener noreferer"
>
{{ language[1] }}
</a>
<a
[href]="el.language[2]"
class="zh"
target="_blank"
*ngIf="el.language[2]"
rel="noopener noreferer"
>
{{ language[2] }}
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="no-result" *ngIf="list.length && list[0].nav && !list[0].nav.length">
对不起，没有找到您想要的结果~
<div class="back">
<span (click)="goBack()">Back</span>
</div>
</div>
</div>
</section>
</main>
src/view/index/default/index.component.html 0 → 100644
浏览文件 @ 063dc280
<div class="index-wrapper">
<main class="homepage container">
<div class="bg-color-linear" id="index-background"></div>
<input
type="text"
class="search"
placeholder="聚焦搜索"
maxlength="50"
(input)="searchLoading = true; handleSearch()"
[(ngModel)]="search"
*ngIf="showInput"
(blur)="showInput = false"
/>
<nav class="top-nav user-select-none">
<a
*ngFor="let item of nav; let i = index;"
(click)="handleCilckNav(i)"
[class.active]="page === i"
class="ripple-btn">
{{ item.title }}
</a>
</nav>
<section class="index-section user-select-none">
<aside class="sidebar" id="sidebar">
<ul>
<li
class="tag"
*ngFor="let item of nav[page].nav; let i = index"
[class.active]="id === i"
(click)="handleSidebarNav(i)">
<a class="ripple-btn" *ngIf="item.title">{{ item.title }}</a>
</li>
</ul>
<div class="icon-box">
<a href="javascript:;" (click)="handleOnClickSearch()">
<img src="assets/img/search.svg" alt="" class="icon" draggable="false">
</a>
</div>
</aside>
<div class="main" id="main" (scroll)="handleScroll($event)">
<app-loading *ngIf="searchLoading"></app-loading>
<ul *ngIf="list.length && list[0].nav">
<li *ngFor="let item of list">
<div class="title-wrapper" *ngIf="item.subtitle">
<h2 class="block-title">
{{ item.subtitle }} x {{ item.nav.length }}
<a
[href]="GIT_REPO_URL + '/tree/master/data'"
class="edit"
target="_blank"
rel="noopener noreferer"
title="编辑"
>
</a>
</h2>
</div>
<div class="row">
<div class="click-btn" *ngFor="let el of item.nav">
<a [href]="el.link" target="_blank" rel="noopener noreferer">
<div class="top">
<img
*ngIf="el.icon || item.icon; else icon"
[src]="el.icon || item.icon"
alt=""
class="icon"
>
<ng-template #icon>
<span class="icon"></span>
</ng-template>
<em class="name" [innerHtml]="el.name"></em>
</div>
<div class="desc" [innerHtml]="el.desc"></div>
</a>
<div class="mark" *ngIf="el.language && el.language.length > 0">
<div class="button-box">
<a
[href]="el.language[0]"
class="zh"
target="_blank"
*ngIf="el.language[0]"
rel="noopener noreferer"
>
{{ language[0] }}
</a>
<a
[href]="el.language[1]"
class="zh"
target="_blank"
*ngIf="el.language[1]"
rel="noopener noreferer"
>
{{ language[1] }}
</a>
<a
[href]="el.language[2]"
class="zh"
target="_blank"
*ngIf="el.language[2]"
rel="noopener noreferer"
>
{{ language[2] }}
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<app-no-data *ngIf="list.length && list[0].nav && !list[0].nav.length"></app-no-data>
</div>
</section>
</main>
<app-footer></app-footer>
</div>
src/view/index.component.scss → src/view/index/default/index.component.scss
浏览文件 @ 063dc280
......@@ -9,10 +9,16 @@
background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);
}
.index-wrapper {
display: flex;
flex-direction: column;
height: 100vh;
padding-top: 15px;
}
.homepage {
flex: 1;
position: relative;
margin-top: 20px;
height: calc(100vh - 76px);
background: rgb(251, 251, 251);
border-radius: 5px;
overflow: hidden;
......@@ -33,32 +39,6 @@
box-shadow: 0 4px 8px 1px #ccc;
}
.no-result {
margin-top: 80px;
text-align: center;
.back {
margin-top: 30px;
span {
cursor: pointer;
}
}
}
.loading {
z-index: 6666;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(251, 251, 251);
display: flex;
align-items: flex-start;
justify-content: center;
}
.top-nav {
padding: 10px;
overflow: none;
......@@ -300,4 +280,4 @@
}
}
}
}
\ No newline at end of file
}
src/view/index.component.ts → src/view/index/default/index.component.ts
浏览文件 @ 063dc280
import nav from '../../data';
import nav from '../../../../data';
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { debounce } from '../utils';
import { appLanguage, git } from '../../config';
import { debounce } from '../../../utils';
import { appLanguage, GIT_REPO_URL } from '../../../../config';
import { annotate } from 'rough-notation';
let equeue = [];
......@@ -12,7 +12,7 @@ let equeue = [];
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class HomeComponent {
export default class HomeComponent {
constructor (private router: Router, private activatedRoute: ActivatedRoute) {}
......@@ -24,7 +24,7 @@ export class HomeComponent {
showInput = false;
searchLoading = false;
language: string[] = appLanguage;
git: string = git;
GIT_REPO_URL: string = GIT_REPO_URL;
ngOnInit () {
const that = this;
......@@ -168,10 +168,6 @@ export class HomeComponent {
} catch (e) {}
}
goBack = () => {
history.go(-1);
}
setAnnotate() {
const elList = document.querySelectorAll('.top-nav .ripple-btn') || [];
if (elList.length === 0) return;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或