Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
gitcode_dev
开源百科
提交
8a62af7e
开
开源百科
项目概览
gitcode_dev
/
开源百科
通知
256
Star
3
Fork
3
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
17
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
代码片段
项目成员
Pages
开
开源百科
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
17
Issue
17
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8a62af7e
编写于
1月 23, 2021
作者:
X
xjh22222228
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: Add Side theme.
上级
1eb4edea
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
260 addition
and
3 deletion
+260
-3
nav.config.ts
nav.config.ts
+1
-1
src/app/app.module.ts
src/app/app.module.ts
+10
-0
src/components/fixbar/index.component.ts
src/components/fixbar/index.component.ts
+4
-0
src/styles.scss
src/styles.scss
+1
-0
src/types/index.d.ts
src/types/index.d.ts
+1
-0
src/view/index/side/index.component.html
src/view/index/side/index.component.html
+82
-0
src/view/index/side/index.component.scss
src/view/index/side/index.component.scss
+73
-0
src/view/index/side/index.component.ts
src/view/index/side/index.component.ts
+86
-0
src/view/index/sim/index.component.scss
src/view/index/sim/index.component.scss
+2
-2
未找到文件。
nav.config.ts
浏览文件 @
8a62af7e
...
...
@@ -20,7 +20,7 @@ const c: IConfig = {
// 网站关键字
keywords
:
'
导航,前端资源,社区站点,设计师,实用工具,学习资源,运营,网络安全,node.js
'
,
// 默认主题: Light | Sim
// 默认主题: Light | Sim
| Side
theme
:
'
Light
'
,
// 搜索引擎列表, 为空时不显示搜索引擎
...
...
src/app/app.module.ts
浏览文件 @
8a62af7e
...
...
@@ -24,6 +24,8 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
import
{
NzCardModule
}
from
'
ng-zorro-antd/card
'
import
{
NzIconModule
}
from
'
ng-zorro-antd/icon
'
import
{
NzGridModule
}
from
'
ng-zorro-antd/grid
'
import
{
NzLayoutModule
}
from
'
ng-zorro-antd/layout
'
import
{
NzMenuModule
}
from
'
ng-zorro-antd/menu
'
// components
import
{
AppComponent
}
from
'
./app.component
'
...
...
@@ -32,6 +34,7 @@ import { AppComponent } from './app.component'
import
LightComponent
from
'
../view/index/light/index.component
'
import
SimComponent
from
'
../view/index/sim/index.component
'
import
AdminComponent
from
'
../view/admin/index.component
'
import
SideComponent
from
'
../view/index/side/index.component
'
import
WebpComponent
from
'
../view/app/default/app.component
'
import
{
FixbarComponent
}
from
'
../components/fixbar/index.component
'
import
{
MultipleSiteComponent
}
from
'
../components/multiple-site/index.component
'
...
...
@@ -56,6 +59,10 @@ const appRoutes: Routes = [
path
:
'
sim
'
,
component
:
SimComponent
,
},
{
path
:
'
side
'
,
component
:
SideComponent
,
},
{
path
:
'
light
'
,
component
:
LightComponent
,
...
...
@@ -82,6 +89,7 @@ const appRoutes: Routes = [
AppComponent
,
LightComponent
,
SimComponent
,
SideComponent
,
WebpComponent
,
FixbarComponent
,
MultipleSiteComponent
,
...
...
@@ -111,6 +119,8 @@ const appRoutes: Routes = [
NzCardModule
,
NzIconModule
,
NzGridModule
,
NzLayoutModule
,
NzMenuModule
,
BrowserModule
,
FormsModule
,
RouterModule
.
forRoot
(
...
...
src/components/fixbar/index.component.ts
浏览文件 @
8a62af7e
...
...
@@ -38,6 +38,10 @@ export class FixbarComponent {
{
name
:
'
切换到 Sim
'
,
url
:
'
/sim
'
},
{
name
:
'
切换到 Side
'
,
url
:
'
/side
'
}
]
...
...
src/styles.scss
浏览文件 @
8a62af7e
...
...
@@ -110,6 +110,7 @@ b {
// 折叠箭头
.down-arrow
{
display
:
inline-block
;
align-self
:
center
;
margin-left
:
15px
;
cursor
:
pointer
;
...
...
src/types/index.d.ts
浏览文件 @
8a62af7e
...
...
@@ -3,6 +3,7 @@
export
type
ThemeType
=
|
'
Light
'
|
'
Sim
'
|
'
Side
'
export
interface
INavFourProp
{
icon
?:
string
|
null
...
...
src/view/index/side/index.component.html
0 → 100644
浏览文件 @
8a62af7e
<nz-layout
class=
"layout"
>
<nz-layout>
<nz-sider
nzWidth=
"200px"
nzTheme=
"light"
class=
"sider"
>
<div
class=
"logo dark-bg"
>
<img
src=
"assets/logo.png"
alt=
"发现导航nav3.cn"
>
<span
class=
"site-title"
>
{{ title }}
</span>
</div>
<ul
nz-menu
nzMode=
"inline"
class=
"sider-menu"
>
<li
nz-submenu
nzOpen
[nzTitle]=
"item.title"
*ngFor=
"let item of websiteList; let pageIdx = index;"
>
<ul>
<li
nz-menu-item
*ngFor=
"let el of item.nav; let idIdx = index;"
[nzSelected]=
"page === pageIdx && id === idIdx"
(click)=
"handleSidebarNav(pageIdx, idIdx)"
>
{{ el.title }}
</li>
</ul>
</li>
</ul>
</nz-sider>
<nz-layout
class=
"inner-layout"
>
<nz-content
class=
"content"
>
<app-search-engine></app-search-engine>
<div
class=
"box"
>
<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"
>
<app-card
[oIdx]=
"page"
[twoIdx]=
"id"
[threeIdx]=
"i"
>
<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>
</app-card>
</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
[oIdx]=
"page"
[twoIdx]=
"id"
[threeIdx]=
"i"
[fourIdx]=
"idx"
[dataSource]=
"el"
>
</app-card>
</div>
</div>
</div>
</div>
</div>
<app-footer
className=
"side-footer"
></app-footer>
</nz-content>
</nz-layout>
</nz-layout>
</nz-layout>
<app-fixbar
(onCollapse)=
"onCollapseAll()"
[collapsed]=
"collapsed()"
>
</app-fixbar>
src/view/index/side/index.component.scss
0 → 100644
浏览文件 @
8a62af7e
.layout
{
min-height
:
100vh
;
.inner-layout
{
padding
:
20px
70px
0
20px
;
margin-left
:
200px
;
.content
{
display
:
flex
;
flex-direction
:
column
;
}
}
.box
{
flex
:
1
;
}
}
.title
{
font-size
:
18px
;
border-bottom
:
1px
solid
#eee
;
padding
:
10px
0
;
color
:
#3f51b5
;
font-weight
:
500
;
display
:
flex
;
margin-top
:
15px
;
}
.logo
{
padding
:
10px
;
padding-left
:
15px
;
img
{
width
:
50px
;
height
:
50px
;
}
.site-title
{
font-weight
:
500
;
font-size
:
18px
;
margin-left
:
10px
;
vertical-align
:
middle
;
}
}
.sider
{
position
:
fixed
;
height
:
100vh
;
left
:
0
;
overflow
:
auto
;
&
::-webkit-scrollbar
{
width
:
6px
;
height
:
6px
;
}
&
::-webkit-scrollbar-thumb
{
background-color
:
hsla
(
0
,
0%
,
100%
,
.2
);
border-radius
:
3px
;
}
&
::-webkit-scrollbar-track
{
background-color
:
hsla
(
0
,
0%
,
100%
,
.15
);
border-radius
:
3px
;
}
}
::ng-deep
.side-footer
{
margin-top
:
45px
!
important
;
&
>
*
{
color
:
#666
!
important
;
}
}
src/view/index/side/index.component.ts
0 → 100644
浏览文件 @
8a62af7e
// Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
// See https://github.com/xjh22222228/nav
import
config
from
'
../../../../nav.config
'
import
{
Component
}
from
'
@angular/core
'
import
{
Router
,
ActivatedRoute
}
from
'
@angular/router
'
import
{
INavProps
,
INavThreeProp
}
from
'
../../../types
'
import
{
fuzzySearch
,
queryString
,
setWebsiteList
,
toggleCollapseAll
,
}
from
'
../../../utils
'
import
{
websiteList
}
from
'
../../../store
'
@
Component
({
selector
:
'
app-home
'
,
templateUrl
:
'
./index.component.html
'
,
styleUrls
:
[
'
./index.component.scss
'
]
})
export
default
class
HomeComponent
{
constructor
(
private
router
:
Router
,
private
activatedRoute
:
ActivatedRoute
)
{}
websiteList
:
INavProps
[]
=
websiteList
currentList
:
INavThreeProp
[]
=
[]
id
:
number
=
0
page
:
number
=
0
title
:
string
=
config
.
title
.
trim
().
split
(
/
\s
/
)[
0
]
ngOnInit
()
{
const
initList
=
()
=>
{
try
{
if
(
this
.
websiteList
[
this
.
page
]
&&
this
.
websiteList
[
this
.
page
]?.
nav
?.
length
>
0
)
{
this
.
currentList
=
this
.
websiteList
[
this
.
page
].
nav
[
this
.
id
].
nav
}
else
{
this
.
currentList
=
[]
}
}
catch
(
error
)
{
this
.
currentList
=
[]
}
}
this
.
activatedRoute
.
queryParams
.
subscribe
(()
=>
{
const
{
id
,
page
,
q
}
=
queryString
()
this
.
page
=
page
this
.
id
=
id
if
(
q
)
{
this
.
currentList
=
fuzzySearch
(
this
.
websiteList
,
q
)
}
else
{
initList
()
}
setWebsiteList
(
this
.
websiteList
)
})
}
handleSidebarNav
(
page
,
id
)
{
this
.
websiteList
[
page
].
id
=
id
this
.
router
.
navigate
([
this
.
router
.
url
.
split
(
'
?
'
)[
0
]],
{
queryParams
:
{
page
,
id
,
}
})
}
onCollapse
=
(
item
,
index
)
=>
{
item
.
collapsed
=
!
item
.
collapsed
this
.
websiteList
[
this
.
page
].
nav
[
this
.
id
].
nav
[
index
]
=
item
setWebsiteList
(
this
.
websiteList
)
}
onCollapseAll
=
()
=>
{
toggleCollapseAll
(
this
.
websiteList
)
}
collapsed
()
{
try
{
return
websiteList
[
this
.
page
].
nav
[
this
.
id
].
collapsed
}
catch
(
error
)
{
return
false
}
}
}
src/view/index/sim/index.component.scss
浏览文件 @
8a62af7e
...
...
@@ -119,10 +119,10 @@ $width: 1200px;
}
}
::ng-deep
.
copyright
{
::ng-deep
.
sim-footer
{
margin-bottom
:
10px
;
&
>
*
{
color
:
#666
;
color
:
#666
!
important
;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录