2 |
13 |
--------------------------------------------------------------------------------
/src/components/calendar/index.component.scss:
--------------------------------------------------------------------------------
1 | .calendar {
2 | width: 130px;
3 | height: var(--componentHeight);
4 | max-height: 100%;
5 | border-radius: 12px;
6 | text-align: center;
7 | overflow: hidden;
8 | color: #fff;
9 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
10 | display: flex;
11 | flex-direction: column;
12 | .ctop {
13 | font-size: 17px;
14 | height: 40px;
15 | line-height: 0;
16 | display: flex;
17 | align-items: center;
18 | justify-content: center;
19 | font-weight: 500;
20 | }
21 | .box {
22 | flex: 1;
23 | }
24 | .cday {
25 | font-weight: bold;
26 | font-size: 40px;
27 | line-height: 1;
28 | padding: 24px 0 5px 0;
29 | }
30 | .cdate {
31 | color: rgba(255, 255, 255, 0.7);
32 | font-size: 13px;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/calendar/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input } from '@angular/core'
6 | import { getDateTime, getDayOfYear } from 'src/utils'
7 | import type { IComponentItemProps } from 'src/types'
8 | import { $t } from 'src/locale'
9 | import { component } from 'src/store'
10 |
11 | @Component({
12 | standalone: true,
13 | selector: 'app-calendar',
14 | templateUrl: './index.component.html',
15 | styleUrls: ['./index.component.scss'],
16 | })
17 | export class CalendarComponent {
18 | @Input() data!: IComponentItemProps
19 |
20 | readonly component = component()
21 | date = ''
22 | day = ''
23 | week = ''
24 | dayOfYear = ''
25 |
26 | constructor() {
27 | const date = getDateTime()
28 | this.date = $t('_calendarDate', { year: date.year, month: date.month })
29 | this.day = date.zeroDate
30 | this.week = date.dayText
31 | this.dayOfYear = $t('_dayOfYear', { day: getDayOfYear() })
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/class-tabs/index.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{ date }}
4 |
5 |
6 |
12 | {{ day }}
7 |
8 | {{ dayOfYear }}
9 | {{ week }}
10 |
11 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/src/components/class-tabs/index.component.scss:
--------------------------------------------------------------------------------
1 | .class-tabs {
2 | --height: 28px;
3 | position: relative;
4 | padding: 4px;
5 | border-radius: 8px;
6 | background-color: #ededee;
7 | display: inline-flex;
8 | font-size: 14px;
9 | overflow: hidden;
10 | overflow-x: auto;
11 | max-width: 100%;
12 | white-space: nowrap;
13 | color: #93959a;
14 | user-select: none;
15 | transform: translateZ(0);
16 | .anchor {
17 | position: absolute;
18 | height: var(--height);
19 | background-color: #1890ff !important;
20 | color: #fff;
21 | transition: left 0.15s linear;
22 | border-radius: 6px;
23 | }
24 | .tab {
25 | z-index: 2;
26 | position: relative;
27 | padding: 0 8px;
28 | height: var(--height);
29 | display: flex;
30 | align-items: center;
31 | justify-content: center;
32 | transition: all 0.1s linear;
33 | cursor: pointer;
34 | border-radius: 6px;
35 | &:hover:not(.active) {
36 | background-color: rgba(0, 0, 0, 0.055);
37 | }
38 | &.active {
39 | color: #fff;
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/component-group/index.component.html:
--------------------------------------------------------------------------------
1 |
10 | {{ tab.title }}
11 |
12 |
9 |
13 |
14 |
27 |
28 |
29 |
31 |
--------------------------------------------------------------------------------
/src/components/component-group/index.component.scss:
--------------------------------------------------------------------------------
1 | @keyframes zoomInDown {
2 | from {
3 | opacity: 0;
4 | }
5 |
6 | 100% {
7 | opacity: 1;
8 | }
9 | }
10 |
11 | @keyframes arrow {
12 | 0% {
13 | transform: translateX(0);
14 | }
15 | 11% {
16 | transform: translateX(4px);
17 | }
18 | 21% {
19 | transform: translateX(-2px);
20 | }
21 | 31% {
22 | transform: translateX(4px);
23 | }
24 | 41% {
25 | transform: translateX(-2px);
26 | }
27 | 51% {
28 | transform: translateX(0);
29 | }
30 | }
31 |
32 | .component-group {
33 | position: relative;
34 | padding: 10px;
35 | display: flex;
36 | overflow: hidden;
37 | user-select: none;
38 | gap: 15px;
39 | justify-content: flex-start;
40 | max-width: 100%;
41 | &.over {
42 | padding-bottom: 30px;
43 | margin-bottom: 15px;
44 | }
45 | &.showAll {
46 | flex-wrap: wrap;
47 | .arrow {
48 | transform: translateX(-50%) rotate(-90deg) !important;
49 | }
50 | .arrowicon {
51 | animation: none;
52 | }
53 | }
54 | &.directionCol {
55 | flex-wrap: wrap;
56 | justify-content: center;
57 | overflow-y: auto;
58 | ::ng-deep {
59 | > .ng-star-inserted,
60 | .citems {
61 | max-width: 100%;
62 | }
63 | }
64 | }
65 | .arrow {
66 | display: inline-block;
67 | position: absolute;
68 | bottom: 0;
69 | left: 50%;
70 | transform: translate(-50%, 0) rotate(90deg);
71 | cursor: pointer;
72 | transition: all 0.3s;
73 | }
74 | .arrowicon {
75 | font-size: 18px;
76 | animation: arrow 3s ease-in-out infinite;
77 | color: #f38181;
78 | }
79 | ::ng-deep {
80 | > .ng-star-inserted {
81 | animation-duration: 0.5s;
82 | animation-fill-mode: both;
83 | animation-name: zoomInDown;
84 | }
85 | @for $i from 2 through 20 {
86 | > .ng-star-inserted:nth-child(#{$i}) {
87 | animation-delay: $i * 0.05s;
88 | }
89 | }
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/countdown/drawer/index.component.html:
--------------------------------------------------------------------------------
1 |
80 |
83 |
86 |
87 |
2 |
18 |
--------------------------------------------------------------------------------
/src/components/countdown/index.component.scss:
--------------------------------------------------------------------------------
1 | .holiday {
2 | position: relative;
3 | width: 160px;
4 | height: var(--componentHeight);
5 | max-height: 100%;
6 | border-radius: 12px;
7 | overflow: hidden;
8 | color: #fff;
9 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
10 | display: flex;
11 | flex-direction: column;
12 | text-align: center;
13 | .top {
14 | padding: 6px 10px;
15 | font-weight: 500;
16 | }
17 | .box {
18 | position: relative;
19 | flex: 1;
20 | background-size: cover;
21 | }
22 | .days {
23 | font-weight: bold;
24 | font-size: 50px;
25 | margin-top: 16px;
26 | }
27 | .date {
28 | position: absolute;
29 | bottom: 5px;
30 | left: 0;
31 | width: 100%;
32 | font-weight: 500;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/countdown/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input } from '@angular/core'
6 | import type { IComponentItemProps } from 'src/types'
7 | import dayjs from 'dayjs'
8 | import { component } from 'src/store'
9 |
10 | interface IProps {
11 | dateStr: string
12 | dayStr: number
13 | }
14 |
15 | @Component({
16 | standalone: true,
17 | selector: 'app-countdown',
18 | templateUrl: './index.component.html',
19 | styleUrls: ['./index.component.scss'],
20 | })
21 | export class CountdownComponent {
22 | @Input() data!: IComponentItemProps
23 |
24 | readonly component = component()
25 | countdownData = {} as IProps
26 |
27 | constructor() {}
28 |
29 | ngOnInit() {
30 | this.init()
31 | }
32 |
33 | ngOnChanges() {
34 | this.init()
35 | }
36 |
37 | private init() {
38 | const payload = {} as IProps
39 | if (this.data['date']) {
40 | payload.dateStr = dayjs(this.data['date']).format('YYYY.MM.DD')
41 | payload.dayStr = dayjs(
42 | dayjs(this.data['date']).format('YYYY-MM-DD'),
43 | ).diff(dayjs().format('YYYY-MM-DD'), 'day')
44 | payload.dayStr = payload.dayStr < 0 ? 0 : payload.dayStr
45 | payload.dayStr = payload.dayStr > 9999 ? 9999 : payload.dayStr
46 | }
47 | this.countdownData = payload
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/create-web/index.component.scss:
--------------------------------------------------------------------------------
1 | .row {
2 | display: flex;
3 | justify-content: space-around;
4 | }
5 |
6 | @media (max-width: 580px) {
7 | ::ng-deep .ant-modal {
8 | top: 0;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/delete-modal/index.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{ data['title'] }}
4 |
5 |
10 |
17 |
11 | {{ countdownData['dayStr'] }}
12 |
13 |
14 | - {{ countdownData['dateStr'] }} -
15 |
16 | ID: {{ ids }}
9 |
10 |
11 |
16 | 该项目引用自 ID {{ ids }}
12 |
15 |
19 |
22 |
31 |
32 |
60 |
63 |
66 |
67 |
6 |
37 |
--------------------------------------------------------------------------------
/src/components/holiday/index.component.scss:
--------------------------------------------------------------------------------
1 | .holiday {
2 | position: relative;
3 | width: 320px;
4 | height: var(--componentHeight);
5 | max-height: 100%;
6 | border-radius: 12px;
7 | overflow: hidden;
8 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
9 | display: flex;
10 | background-color: #fff;
11 | color: #666;
12 | .title {
13 | font-weight: 500;
14 | font-size: 16px;
15 | }
16 | .left {
17 | width: 140px;
18 | padding: 12px 0 12px 12px;
19 | display: flex;
20 | flex-direction: column;
21 | .days {
22 | font-size: 46px;
23 | text-align: center;
24 | font-weight: bold;
25 | color: rgba(0, 0, 0, 0.85);
26 | flex: 1;
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 | }
31 | &.today {
32 | .days {
33 | font-size: 30px;
34 | }
35 | }
36 | }
37 | .tag {
38 | background-color: rgb(223, 252, 234);
39 | color: rgb(85, 170, 111);
40 | font-size: 10px;
41 | font-weight: 500;
42 | padding: 1px 2px;
43 | border-radius: 2px;
44 | display: inline-flex;
45 | align-items: center;
46 | justify-content: center;
47 | margin-right: 3px;
48 | margin-left: 2px;
49 | }
50 | .right {
51 | padding: 12px 12px 12px 0;
52 | flex: 1;
53 | padding-left: 12px;
54 | .items {
55 | display: flex;
56 | align-items: center;
57 | justify-content: space-between;
58 | padding: 4px 0;
59 | color: rgba(0, 0, 0, 0.8);
60 | &:not(:nth-last-child(1)) {
61 | margin-bottom: 3px;
62 | border-bottom: 1px solid #eee;
63 | }
64 | }
65 | }
66 | .cleft {
67 | position: relative;
68 | white-space: nowrap;
69 | display: flex;
70 | align-items: center;
71 | .tag {
72 | position: absolute;
73 | top: 50%;
74 | left: -5px;
75 | transform: translate(-100%, -50%);
76 | }
77 | }
78 | .cright {
79 | font-weight: 500;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/holiday/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import type { IComponentItemProps } from 'src/types'
8 | import { $t } from 'src/locale'
9 | import dayjs from 'dayjs'
10 | import { component } from 'src/store'
11 |
12 | @Component({
13 | standalone: true,
14 | imports: [CommonModule],
15 | selector: 'app-holiday',
16 | templateUrl: './index.component.html',
17 | styleUrls: ['./index.component.scss'],
18 | })
19 | export class HolidayComponent {
20 | @Input() data!: IComponentItemProps
21 | items: any[] = []
22 |
23 | readonly component = component()
24 | readonly $t = $t
25 |
26 | constructor() {}
27 |
28 | ngOnChanges() {
29 | this.init()
30 | }
31 |
32 | private init() {
33 | let items: any = {}
34 | const now = dayjs(dayjs().format('YYYY-MM-DD'))
35 | if (this.data['items']) {
36 | items = [...this.data['items']]
37 | .filter((item: any) => {
38 | item.date = dayjs(item.date).format('YYYY-MM-DD')
39 | let date = dayjs(item.date)
40 | if (item.day > 0) {
41 | date = date.add(item.day - 1, 'day')
42 | }
43 | if (date.isBefore(now)) {
44 | return false
45 | }
46 | return true
47 | })
48 | .slice(0, 4)
49 | .map((item: any) => {
50 | item.dateStr = dayjs(item.date).format('MM.DD')
51 | item.diffDay = dayjs(dayjs(item.date).format('YYYY-MM-DD')).diff(
52 | now,
53 | 'day',
54 | )
55 | item.diffDay = item.diffDay < 0 ? 0 : item.diffDay
56 | item.diffDay = item.diffDay > 999 ? 999 : item.diffDay
57 | item.diffStr = item.diffDay
58 | if (item.day > 0) {
59 | item.afterDay = dayjs(item.date)
60 | .add(item.day - 1, 'day')
61 | .format('MM.DD')
62 | if (item.afterDay === item.dateStr) {
63 | item.afterDay = null
64 | }
65 | }
66 | item.isToday = item.dateStr === dayjs().format('MM.DD')
67 | if (item.diffDay <= 0) {
68 | if (item.isToday) {
69 | item.diffStr = item.title
70 | } else {
71 | item.isRest = true
72 | item.diffStr = '休息日'
73 | }
74 | }
75 |
76 | return item
77 | })
78 | }
79 | this.items = items
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/html/drawer/index.component.html:
--------------------------------------------------------------------------------
1 |
7 |
25 |
8 | {{
9 | items[0].isToday || items[0].isRest
10 | ? $t('_dayIs')
11 | : $t('_distance') + items[0].title
12 | }}
13 |
14 | {{ items[0].diffStr }}
15 |
16 | {{ $t('_rest') }}
17 | {{ items[0].dateStr }}
19 | - {{ items[0].afterDay }}
23 |
24 |
26 |
36 |
27 |
35 |
28 | {{ item.title }} {{ item.dateStr
29 | }}{{ $t('_rest') }}
30 |
31 |
32 | {{ item.diffDay }}{{ $t('_day') }}
33 |
34 |
44 |
47 |
50 |
51 |
42 |
45 |
48 |
49 |
8 |
10 |
--------------------------------------------------------------------------------
/src/components/image/index.component.scss:
--------------------------------------------------------------------------------
1 | .cimage {
2 | position: relative;
3 | width: 170px;
4 | height: var(--componentHeight);
5 | max-height: 100%;
6 | border-radius: 12px;
7 | overflow: hidden;
8 | color: #fff;
9 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
10 | background-size: cover;
11 | .text {
12 | position: absolute;
13 | bottom: 5px;
14 | left: 0;
15 | width: 100%;
16 | font-size: 12px;
17 | text-align: center;
18 | font-weight: 500;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/image/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input } from '@angular/core'
6 | import type { IComponentItemProps } from 'src/types'
7 | import { JumpService } from 'src/services/jump'
8 | import { component } from 'src/store'
9 |
10 | @Component({
11 | standalone: true,
12 | selector: 'app-image',
13 | templateUrl: './index.component.html',
14 | styleUrls: ['./index.component.scss'],
15 | })
16 | export class ImageComponent {
17 | @Input() data!: IComponentItemProps
18 |
19 | readonly component = component()
20 |
21 | constructor(public jumpService: JumpService) {}
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/loading/index.component.html:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/loading/index.component.scss:
--------------------------------------------------------------------------------
1 | .cc1 {
2 | z-index: 2;
3 | position: absolute;
4 | top: 50%;
5 | left: 50%;
6 | transform: translate(-50%, -50%);
7 | width: 15px;
8 | height: 15px;
9 | animation: my-rotatex1 2s linear infinite;
10 | }
11 | .cc2 {
12 | stroke-dasharray: 90, 150;
13 | stroke-dashoffset: 0;
14 | stroke-width: 5;
15 | stroke: #6d8ba7;
16 | stroke-linecap: round;
17 | animation: loading-dashx2 1.5s ease-in-out infinite;
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/loading/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, ChangeDetectionStrategy } from '@angular/core'
6 |
7 | @Component({
8 | standalone: true,
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | imports: [],
11 | selector: 'app-loading',
12 | templateUrl: './index.component.html',
13 | styleUrls: ['./index.component.scss'],
14 | })
15 | export class LoadingComponent {
16 | constructor() {}
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/login/login.component.html:
--------------------------------------------------------------------------------
1 | {{ data['text'] }}
9 | {{ $t('_inputTokenMsg') }}
10 | 18 |
19 |
26 |
27 | 28 | {{ $t('_getToken') 29 | }} 33 | {{ $t('_readDoc') }} 35 |
36 |
10 |
17 |
22 |
23 |
24 |
25 |
33 |
38 |
39 |
40 |
41 |
49 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
63 |
64 |
42 |
45 |
48 |
49 |
5 |
21 |
22 |
38 |
39 |
--------------------------------------------------------------------------------
/src/components/news/index.component.scss:
--------------------------------------------------------------------------------
1 | .news {
2 | position: relative;
3 | width: 310px;
4 | height: var(--componentHeight) !important;
5 | max-height: 100%;
6 | border-radius: 12px;
7 | overflow: hidden;
8 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
9 | background: linear-gradient(100deg, #2a2d38, #535a68);
10 | color: #fff;
11 | padding: 10px 10px 0 10px;
12 | font-size: 12px;
13 | display: flex;
14 | flex-direction: column;
15 | .tabs {
16 | display: flex;
17 | column-gap: 4px;
18 | white-space: nowrap;
19 | overflow: hidden;
20 | overflow-x: auto;
21 | }
22 | .tab {
23 | border-radius: 4px;
24 | padding: 2px 4px;
25 | cursor: pointer;
26 | transition: all 0.2s linear;
27 | &.active {
28 | background-color: #fff2;
29 | }
30 | }
31 | .content-box {
32 | position: relative;
33 | flex: 1;
34 | overflow: hidden;
35 | overflow-y: auto;
36 | padding: 10px 0;
37 | color: #f1f1f1;
38 | }
39 | .nodata {
40 | position: absolute;
41 | top: 50%;
42 | left: 50%;
43 | transform: translate(-50%, -50%);
44 | color: #aeaeae;
45 | }
46 | .content {
47 | cursor: pointer;
48 | display: flex;
49 | align-items: center;
50 | &:not(:last-child) {
51 | margin-bottom: 4px;
52 | }
53 | &:hover {
54 | opacity: 0.9;
55 | }
56 | &:nth-child(1) .n {
57 | color: #fff;
58 | }
59 | &:nth-child(2) .n {
60 | color: rgba(255, 255, 255, 0.9);
61 | }
62 | &:nth-child(3) .n {
63 | color: rgba(255, 255, 255, 0.8);
64 | }
65 |
66 | .mid {
67 | flex: 1;
68 | }
69 | }
70 | .n {
71 | color: #969c9c;
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/news/types.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { $t } from 'src/locale'
6 | import { NewsType } from 'src/types'
7 |
8 | export const newsTypeMap = {
9 | [NewsType.Weibo]: $t('_weibo'),
10 | [NewsType.V2ex]: 'V2EX',
11 | [NewsType.Douyin]: $t('_douyin'),
12 | [NewsType.Bilibili]: $t('_bilibili'),
13 | [NewsType.Juejin]: $t('_juejin'),
14 | [NewsType.Baidu]: $t('_baidu'),
15 | [NewsType.GitHub]: 'GitHub',
16 | [NewsType.Pojie52]: $t('_52'),
17 | [NewsType.Xiaohongshu]: $t('_hongshu'),
18 | [NewsType.Toutiao]: $t('_toutiao'),
19 | [NewsType.Douban]: $t('_douban'),
20 | [NewsType.HackerNews]: 'Hacker News',
21 | [NewsType.Zhihu]: $t('_zhihu'),
22 | [NewsType.ZhihuDaily]: $t('_zhihuDaily'),
23 | } as const
24 |
--------------------------------------------------------------------------------
/src/components/no-data/no-data.component.html:
--------------------------------------------------------------------------------
1 |
2 |
7 |
--------------------------------------------------------------------------------
/src/components/no-data/no-data.component.scss:
--------------------------------------------------------------------------------
1 | .no-result {
2 | padding: 80px 0;
3 | text-align: center;
4 |
5 | .back {
6 | margin-top: 30px;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/components/no-data/no-data.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 |
4 | import { Component, ChangeDetectionStrategy } from '@angular/core'
5 | import { $t } from 'src/locale'
6 | import { NzButtonModule } from 'ng-zorro-antd/button'
7 | import { NzEmptyModule } from 'ng-zorro-antd/empty'
8 |
9 | @Component({
10 | standalone: true,
11 | imports: [NzButtonModule, NzEmptyModule],
12 | changeDetection: ChangeDetectionStrategy.OnPush,
13 | selector: 'app-no-data',
14 | templateUrl: './no-data.component.html',
15 | styleUrls: ['./no-data.component.scss'],
16 | })
17 | export class NoDataComponent {
18 | $t = $t
19 |
20 | goBack = () => {
21 | history.go(-1)
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/off-work/drawer/index.component.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
38 |
41 |
44 |
45 |
6 | 
15 |
16 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/components/off-work/index.component.scss:
--------------------------------------------------------------------------------
1 | .offwork {
2 | pointer-events: none;
3 | position: relative;
4 | width: 170px;
5 | height: var(--componentHeight);
6 | max-height: 100%;
7 | border-radius: 12px;
8 | overflow: hidden;
9 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
10 | display: flex;
11 | align-items: center;
12 | flex-direction: column;
13 | font-weight: bold;
14 | background-color: #fff;
15 | &.rest {
16 | .title {
17 | font-size: 22px;
18 | color: #666;
19 | }
20 | }
21 | .title {
22 | margin-top: 20px;
23 | z-index: 2;
24 | position: relative;
25 | font-size: 14px;
26 | color: gray;
27 | text-align: center;
28 | }
29 | .img {
30 | position: absolute;
31 | left: 0;
32 | bottom: 0;
33 | width: 100%;
34 | }
35 | .coutdown {
36 | z-index: 2;
37 | position: relative;
38 | font-size: 24px;
39 | color: #666;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/off-work/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import type { IComponentItemProps } from 'src/types'
8 | import { $t } from 'src/locale'
9 | import { component } from 'src/store'
10 |
11 | @Component({
12 | standalone: true,
13 | imports: [CommonModule],
14 | selector: 'app-offwork',
15 | templateUrl: './index.component.html',
16 | styleUrls: ['./index.component.scss'],
17 | })
18 | export class OffWorkComponent {
19 | @Input() data!: IComponentItemProps
20 |
21 | readonly component = component()
22 | private timer: any
23 | countdownStr = ''
24 | isRest = false
25 |
26 | constructor() {
27 | document.addEventListener(
28 | 'visibilitychange',
29 | this.visibilitychange.bind(this),
30 | )
31 | }
32 |
33 | ngOnChanges() {
34 | clearTimeout(this.timer)
35 | this.init()
36 | }
37 |
38 | ngOnDestroy() {
39 | clearTimeout(this.timer)
40 | document.removeEventListener('visibilitychange', this.visibilitychange)
41 | }
42 |
43 | private visibilitychange(e: any) {
44 | if (e.target.hidden) {
45 | clearTimeout(this.timer)
46 | } else {
47 | this.init()
48 | }
49 | }
50 |
51 | private init() {
52 | if (this.data) {
53 | const now = new Date()
54 | const nowTime = now.getTime()
55 | const startDate = new Date(this.data['startDate'] as number)
56 | startDate.setFullYear(now.getFullYear())
57 | startDate.setMonth(now.getMonth())
58 | startDate.setDate(now.getDate())
59 | const startTime = startDate.getTime()
60 | const date = new Date(this.data['date'] as number)
61 | date.setFullYear(now.getFullYear())
62 | date.setMonth(now.getMonth())
63 | date.setDate(now.getDate())
64 | const dateTime = date.getTime()
65 | const diffTime = (dateTime - nowTime) / 1000
66 | const hours = diffTime / (60 * 60)
67 | const decimal = Math.floor((hours % 1) * 10) / 10
68 | const minutes = Math.floor((diffTime / 60) % 60)
69 | const seconds = Math.floor(diffTime % 60)
70 | const hoursDecimal = Math.floor(hours) + decimal
71 |
72 | if (nowTime >= startTime && nowTime <= dateTime) {
73 | if (hoursDecimal >= 1) {
74 | this.countdownStr = $t('_hours', { num: hoursDecimal })
75 | } else if (minutes > 0) {
76 | this.countdownStr = $t('_minutes', { num: minutes })
77 | } else if (seconds >= 0) {
78 | this.countdownStr = $t('_seconds', { num: seconds })
79 | }
80 | } else {
81 | this.isRest = true
82 | return clearTimeout(this.timer)
83 | }
84 | this.isRest = false
85 | }
86 | this.timer = setTimeout(() => this.init(), 1000)
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/src/components/phone-class/index.component.html:
--------------------------------------------------------------------------------
1 |
7 | {{ isRest ? data['restTitle'] : data['workTitle'] }}
8 |
9 | {{ countdownStr }}
10 |
15 |
20 |
9 |
22 |
23 |
--------------------------------------------------------------------------------
/src/components/phone-class/index.component.scss:
--------------------------------------------------------------------------------
1 | .phone-nav {
2 | display: flex;
3 | align-items: center;
4 | background-color: #e1e1e1;
5 | border-radius: 50px;
6 | padding: 4px;
7 | overflow: hidden;
8 | overflow-x: auto;
9 | white-space: nowrap;
10 | .nav-item {
11 | padding: 4px 12px;
12 | cursor: pointer;
13 | border-radius: 50px;
14 | color: #666;
15 | &.active {
16 | background-color: #1e80ff !important;
17 | color: #fff !important;
18 | }
19 | &:hover {
20 | background: rgba(0, 0, 0, 0.03);
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/phone-class/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import {
6 | Component,
7 | ViewChild,
8 | ElementRef,
9 | ViewChildren,
10 | QueryList,
11 | } from '@angular/core'
12 | import { CommonModule } from '@angular/common'
13 | import { CommonService } from 'src/services/common'
14 | import type { INavTwoProp } from 'src/types'
15 | import { scrollIntoViewLeft } from 'src/utils'
16 |
17 | @Component({
18 | standalone: true,
19 | imports: [CommonModule],
20 | selector: 'app-phone-class',
21 | templateUrl: './index.component.html',
22 | styleUrls: ['./index.component.scss'],
23 | })
24 | export class PhoneClassComponent {
25 | @ViewChild('parent') parentRef!: ElementRef
26 | @ViewChildren('item') itemsRef!: QueryList
20 |
23 |
26 |
27 |
2 | 
11 |
12 |
--------------------------------------------------------------------------------
/src/components/runtime/index.component.scss:
--------------------------------------------------------------------------------
1 | .runtime {
2 | pointer-events: none;
3 | position: relative;
4 | width: 230px;
5 | height: var(--componentHeight);
6 | max-height: 100%;
7 | border-radius: 12px;
8 | overflow: hidden;
9 | color: #fff;
10 | box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
11 | display: flex;
12 | justify-content: center;
13 | padding: 30px 30px;
14 | flex-direction: column;
15 | background: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
16 | font-weight: bold;
17 |
18 | .title {
19 | z-index: 2;
20 | position: relative;
21 | font-size: 18px;
22 | color: #f9f6f6;
23 | }
24 | .days {
25 | z-index: 2;
26 | position: relative;
27 | margin-top: 10px;
28 | font-size: 48px;
29 | line-height: 1;
30 | color: #d67272;
31 | }
32 | .day {
33 | vertical-align: text-bottom;
34 | }
35 | .unit {
36 | font-size: 15px;
37 | margin-left: 2px;
38 | margin-bottom: 2px;
39 | font-weight: 500;
40 | }
41 | .img {
42 | position: absolute;
43 | bottom: 30px;
44 | right: 30px;
45 | width: 70px;
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/components/runtime/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input } from '@angular/core'
6 | import { settings } from 'src/store'
7 | import type { IComponentItemProps } from 'src/types'
8 | import { $t } from 'src/locale'
9 | import { component } from 'src/store'
10 |
11 | @Component({
12 | standalone: true,
13 | selector: 'app-runtime',
14 | templateUrl: './index.component.html',
15 | styleUrls: ['./index.component.scss'],
16 | })
17 | export class RuntimeComponent {
18 | @Input() data!: IComponentItemProps
19 |
20 | readonly component = component()
21 | runDays = 0
22 | unit = ''
23 |
24 | constructor() {
25 | let now = Date.now() - settings().runtime
26 | now = now < 0 ? 0 : now
27 | const diffYear = Math.floor(now / (1000 * 60 * 60 * 24 * 365))
28 | if (diffYear > 0) {
29 | this.runDays = diffYear
30 | this.unit = $t('_year')
31 | } else {
32 | this.runDays = Math.floor(now / (1000 * 60 * 60 * 24))
33 | this.unit = $t('_day')
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/search/index.component.scss:
--------------------------------------------------------------------------------
1 | .search-engine {
2 | position: relative;
3 | display: flex;
4 | justify-content: center;
5 | flex-direction: column;
6 | align-items: center;
7 | padding: 10px 0;
8 | .input-wrapper {
9 | position: relative;
10 | width: 650px;
11 | max-width: 95%;
12 | background: #fff;
13 | border-radius: 5px;
14 | overflow: hidden;
15 |
16 | input {
17 | padding-left: 10px;
18 | padding-right: 10px;
19 |
20 | &:-webkit-autofill-selected {
21 | background-color: transparent !important;
22 | box-shadow: inset 0 0 0 500px transparent !important;
23 | }
24 | }
25 |
26 | .left-icon {
27 | position: relative;
28 | width: 20px;
29 | height: 20px;
30 | background-repeat: no-repeat;
31 | background-size: 20px 20px;
32 | cursor: pointer;
33 | }
34 |
35 | .search-icon {
36 | cursor: pointer;
37 | }
38 | }
39 |
40 | ::ng-deep .removeAddon .ant-input-group-addon {
41 | display: none !important;
42 | }
43 | }
44 |
45 | ::ng-deep.engine-main {
46 | border-radius: 5px;
47 | display: flex;
48 | flex-wrap: wrap;
49 | gap: 10px;
50 | max-width: 631px;
51 | .item {
52 | width: 200px;
53 | padding: 6px;
54 | display: flex;
55 | background: #f6f6f6;
56 | cursor: pointer;
57 | border-radius: 4px;
58 | transition: 0.1s linear;
59 | box-sizing: border-box;
60 | border: 1px solid transparent;
61 | &:hover {
62 | background-color: #eee;
63 | }
64 | .name2 {
65 | margin-left: 10px;
66 | font-size: 15px;
67 | align-self: center;
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/search/index.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 |
3 | export enum SearchType {
4 | All = 1,
5 | Title,
6 | Desc,
7 | Url,
8 | Current,
9 | Quick,
10 | Id,
11 | Tag,
12 | Class,
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/side-images/image/index.component.html:
--------------------------------------------------------------------------------
1 |
7 | {{ data['title'] }}
3 |
4 | {{ runDays }}
5 | {{ unit }}
6 |
7 |
11 |
6 |
11 |
20 |
21 |
23 |
--------------------------------------------------------------------------------
/src/components/swiper/index.component.scss:
--------------------------------------------------------------------------------
1 | .swiper {
2 | user-select: none;
3 | overflow: hidden;
4 | ::ng-deep {
5 | .slick-slide,
6 | .slick-track,
7 | .slick-list {
8 | height: auto !important;
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/swiper/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import { JumpService } from 'src/services/jump'
8 | import { NzCarouselModule } from 'ng-zorro-antd/carousel'
9 | import type { ImageProps } from 'src/types'
10 | import { SwiperItemComponent } from './swiper-item/index.component'
11 |
12 | @Component({
13 | standalone: true,
14 | imports: [NzCarouselModule, CommonModule, SwiperItemComponent],
15 | changeDetection: ChangeDetectionStrategy.OnPush,
16 | selector: 'app-swiper',
17 | templateUrl: './index.component.html',
18 | styleUrls: ['./index.component.scss'],
19 | })
20 | export class SwiperComponent {
21 | @Input() images: ImageProps[] = []
22 | @Input() autoplay = true
23 | @Input() height = 300
24 |
25 | constructor(public jumpService: JumpService) {}
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/swiper/swiper-item/index.component.html:
--------------------------------------------------------------------------------
1 |
7 |
17 |
19 |
2 |
13 |
21 |
29 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/src/components/tag-list/index.component.scss:
--------------------------------------------------------------------------------
1 | .tagbox {
2 | display: flex;
3 | flex-wrap: wrap;
4 | gap: 6px;
5 | }
6 | .tag-item {
7 | padding: 0 6px;
8 | border-radius: 2px;
9 | font-size: 12px;
10 | display: flex;
11 | align-items: center;
12 | transition: all 0.1s linear;
13 | color: #fff;
14 | min-height: 15px;
15 | &:hover {
16 | opacity: 0.8;
17 | }
18 | }
19 | .tag-action {
20 | display: none;
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/tag-list/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 | import { Component, Input, EventEmitter, Output } from '@angular/core'
5 | import { CommonModule } from '@angular/common'
6 | import type { IWebTag } from 'src/types'
7 | import { tagMap, settings } from 'src/store'
8 | import { JumpService } from 'src/services/jump'
9 | import { isLogin, getPermissions } from 'src/utils/user'
10 | import { NzIconModule } from 'ng-zorro-antd/icon'
11 | import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'
12 | import { $t } from 'src/locale'
13 |
14 | @Component({
15 | standalone: true,
16 | imports: [CommonModule, NzIconModule, NzPopconfirmModule],
17 | selector: 'tag-list',
18 | templateUrl: './index.component.html',
19 | styleUrls: ['./index.component.scss'],
20 | })
21 | export class TagListComponent {
22 | @Input() data?: IWebTag[] | undefined = []
23 | @Input() action: boolean = false
24 | @Output() onDelete = new EventEmitter
9 | {{ tagMap[item.id] && tagMap[item.id].name }}
10 |
11 |
12 |
6 |
61 |
--------------------------------------------------------------------------------
/src/components/toolbar-title/index.component.scss:
--------------------------------------------------------------------------------
1 | .title {
2 | position: relative;
3 | font-size: 16px;
4 | border-bottom: 1px solid rgba(0, 0, 0, 0.05);
5 | padding: 10px 0;
6 | padding-left: 5px;
7 | color: #3f51b5;
8 | font-weight: 500;
9 | display: flex;
10 | justify-content: space-between;
11 | margin-bottom: 15px;
12 | user-select: none;
13 | margin-top: 10px;
14 | .edit-icon {
15 | display: none;
16 | vertical-align: middle;
17 | margin: 0 5px;
18 | }
19 | &:hover {
20 | .edit-icon {
21 | display: inline-block;
22 | }
23 | }
24 | .add-icon {
25 | position: relative;
26 | z-index: 6;
27 | cursor: pointer;
28 | color: #666;
29 | right: 10px;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/toolbar-title/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, Input, Output, EventEmitter } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import type { INavThreeProp, INavProps } from 'src/types'
8 | import { isLogin, getPermissions } from 'src/utils/user'
9 | import { navs, settings } from 'src/store'
10 | import { NzIconModule } from 'ng-zorro-antd/icon'
11 | import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm'
12 | import { $t } from 'src/locale'
13 | import { isSelfDevelop } from 'src/utils/utils'
14 | import { CommonService } from 'src/services/common'
15 | import event from 'src/utils/mitt'
16 |
17 | @Component({
18 | standalone: true,
19 | imports: [CommonModule, NzIconModule, NzPopconfirmModule],
20 | selector: 'app-toolbar-title',
21 | templateUrl: './index.component.html',
22 | styleUrls: ['./index.component.scss'],
23 | })
24 | export class ToolbarTitleWebComponent {
25 | @Input() dataSource!: INavThreeProp
26 | @Output() onCollapse = new EventEmitter()
27 |
28 | readonly $t = $t
29 | readonly isLogin = isLogin
30 | readonly navs: INavProps[] = navs()
31 | readonly permissions = getPermissions(settings())
32 |
33 | constructor(public commonService: CommonService) {}
34 |
35 | openCreateWebModal() {
36 | event.emit('CREATE_WEB', {
37 | parentId: this.dataSource.id,
38 | })
39 | }
40 |
41 | openMoveModal(e: Event, data: INavThreeProp) {
42 | this.stopPropagation(e)
43 | event.emit('MOVE_WEB', {
44 | id: data.id,
45 | data: [data],
46 | level: 3,
47 | })
48 | }
49 |
50 | async handleDelete(e: Event, id: number) {
51 | this.stopPropagation(e)
52 | event.emit('DELETE_MODAL', {
53 | isClass: true,
54 | ids: [id],
55 | data: this.dataSource,
56 | onOk: () => {
57 | if (!isSelfDevelop) {
58 | event.emit('WEB_REFRESH')
59 | }
60 | },
61 | })
62 | }
63 |
64 | stopPropagation(e: Event) {
65 | e.stopPropagation()
66 | e.preventDefault()
67 | }
68 |
69 | handleEditName(e: Event, data: INavThreeProp) {
70 | this.stopPropagation(e)
71 | event.emit('EDIT_CLASS_OPEN', { ...data })
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/upload-file/index.component.html:
--------------------------------------------------------------------------------
1 |
18 |
--------------------------------------------------------------------------------
/src/components/upload-file/index.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xjh22222228/nav/2c7d24c69b2631c2073bb79ea74ea4fcfa80b2ae/src/components/upload-file/index.component.scss
--------------------------------------------------------------------------------
/src/components/upload-file/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, EventEmitter, Output } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import { $t } from 'src/locale'
8 | import { NzMessageService } from 'ng-zorro-antd/message'
9 | import { createFile } from 'src/api'
10 | import { NzIconModule } from 'ng-zorro-antd/icon'
11 |
12 | @Component({
13 | standalone: true,
14 | imports: [CommonModule, NzIconModule],
15 | selector: 'app-upload-file',
16 | templateUrl: './index.component.html',
17 | styleUrls: ['./index.component.scss'],
18 | })
19 | export class UploadFileComponent {
20 | @Output() onChange = new EventEmitter()
21 |
22 | readonly $t = $t
23 | uploading: boolean = false
24 | // @ts-ignore
25 | id = `f${Date.now()}${parseInt(Math.random() * 1000000)}`
26 |
27 | constructor(private message: NzMessageService) {}
28 |
29 | onChangeFile(e: any): any {
30 | if (this.uploading) {
31 | return
32 | }
33 |
34 | const { files } = e.target
35 | if (files.length <= 0) return
36 | const file = files[0]
37 |
38 | this.onUpload(file).finally(() => {
39 | e.target.value = ''
40 | })
41 | }
42 |
43 | onUpload(file: File) {
44 | const that = this
45 | return new Promise((resolve, reject) => {
46 | const fileReader = new FileReader()
47 | fileReader.readAsDataURL(file)
48 | fileReader.onerror = reject
49 | fileReader.onload = function () {
50 | that.uploading = true
51 | const iconUrl = this.result as string
52 | const url = iconUrl.split(',')[1]
53 | const path = file.name
54 |
55 | createFile({
56 | message: `create ${path}`,
57 | content: url,
58 | path,
59 | })
60 | .then((res) => {
61 | const params = {
62 | cdn: res?.data.filePath,
63 | }
64 | window.open(params.cdn)
65 | that.onChange.emit(params)
66 | that.message.success($t('_uploadSuccess'))
67 | resolve(params)
68 | })
69 | .catch(reject)
70 | .finally(() => {
71 | that.uploading = false
72 | })
73 | }
74 | })
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/upload-image/index.component.html:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/src/components/upload-image/index.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xjh22222228/nav/2c7d24c69b2631c2073bb79ea74ea4fcfa80b2ae/src/components/upload-image/index.component.scss
--------------------------------------------------------------------------------
/src/components/upload-image/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, EventEmitter, Output, Input } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import { $t } from 'src/locale'
8 | import { NzMessageService } from 'ng-zorro-antd/message'
9 | import { createImageFile, getCDN, getImageRepo } from 'src/api'
10 | import { NzIconModule } from 'ng-zorro-antd/icon'
11 | import { isSelfDevelop } from 'src/utils/utils'
12 |
13 | @Component({
14 | standalone: true,
15 | imports: [CommonModule, NzIconModule],
16 | selector: 'app-upload-image',
17 | templateUrl: './index.component.html',
18 | styleUrls: ['./index.component.scss'],
19 | })
20 | export class UploadImageComponent {
21 | @Input() accept = 'image/*'
22 | @Output() onChange = new EventEmitter()
23 |
24 | readonly $t = $t
25 | uploading: boolean = false
26 | // @ts-ignore
27 | id = `f${Date.now()}${parseInt(Math.random() * 1000000)}`
28 |
29 | constructor(private message: NzMessageService) {}
30 |
31 | onChangeFile(e: any): any {
32 | if (this.uploading) {
33 | return
34 | }
35 |
36 | const { files } = e.target
37 | if (files.length <= 0) return
38 | const file = files[0]
39 |
40 | if (!file.type.startsWith('image')) {
41 | return this.message.error($t('_notUpload'))
42 | }
43 | this.onUpload(file).finally(() => {
44 | e.target.value = ''
45 | })
46 | }
47 |
48 | onUpload(file: File) {
49 | const that = this
50 | return new Promise((resolve, reject) => {
51 | const fileReader = new FileReader()
52 | fileReader.readAsDataURL(file)
53 | fileReader.onerror = reject
54 | fileReader.onload = function () {
55 | that.uploading = true
56 | const iconUrl = this.result as string
57 | const url = iconUrl.split(',')[1]
58 | const mime = `.${file.name.split('.').at(-1) || 'png'}`
59 | const path = `${Date.now()}${mime}`
60 |
61 | createImageFile({
62 | branch: getImageRepo().branch,
63 | message: 'create image',
64 | content: url,
65 | isEncode: false,
66 | path,
67 | })
68 | .then((res) => {
69 | const params = {
70 | cdn: isSelfDevelop ? res?.data?.fullImagePath : getCDN(path),
71 | }
72 | that.onChange.emit(params)
73 | that.message.success($t('_uploadSuccess'))
74 | resolve(params)
75 | })
76 | .catch(reject)
77 | .finally(() => {
78 | that.uploading = false
79 | })
80 | }
81 | })
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/components/web-list/index.component.html:
--------------------------------------------------------------------------------
1 |
10 |
14 |
15 |
16 |
20 |
21 |
22 | {{ dataSource.title
23 | }}{{ dataSource.nav.length < 10 ? '' : ' x ' + dataSource.nav.length }}
24 |
25 |
26 |
27 |
34 |
41 |
48 |
49 |
50 |
51 |
59 |
60 |
6 |
15 |
--------------------------------------------------------------------------------
/src/components/web-list/index.component.scss:
--------------------------------------------------------------------------------
1 | @media (max-width: 768px) {
2 | .web-list {
3 | &.overflowScroll .wrapper {
4 | padding: 0;
5 | flex-wrap: nowrap;
6 | overflow: hidden;
7 | overflow-x: auto;
8 | }
9 | }
10 | }
11 |
12 | .web-list {
13 | margin-top: 15px;
14 | margin-bottom: 15px;
15 | display: flex;
16 | padding: 0 10px;
17 | flex-wrap: wrap;
18 | .wrapper {
19 | display: flex;
20 | flex-wrap: wrap;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/web-more-menu/index.component.html:
--------------------------------------------------------------------------------
1 |
8 |
7 |
14 | -
10 |
21 |
89 |
92 |
93 | `
94 | str = str.slice(1)
95 | if (str.includes('#loadingx1')) {
96 | return str.replaceAll('#loadingx1', '') + loadingHtml
97 | }
98 | return str
99 | }
100 |
101 | export function getTempId() {
102 | return -Date.now()
103 | }
104 |
--------------------------------------------------------------------------------
/src/view/light/index.component.scss:
--------------------------------------------------------------------------------
1 | .index-wrapper {
2 | display: flex;
3 | flex-direction: column;
4 | height: 100vh;
5 | padding-top: 0;
6 | overflow: hidden;
7 | .light-box {
8 | display: flex;
9 | justify-content: center;
10 | height: 100%;
11 | margin: 0 auto;
12 | column-gap: 20px;
13 | overflow: hidden;
14 | }
15 | .component-box {
16 | max-width: 320px;
17 | overflow: hidden;
18 | overflow-y: auto;
19 | }
20 | }
21 |
22 | .homepage {
23 | height: 100%;
24 | position: relative;
25 | background: #f9f9f9;
26 | border-radius: 5px;
27 | overflow: hidden;
28 | transition: 0.1s linear;
29 | border: 1px solid transparent;
30 |
31 | .top-nav {
32 | padding: 10px 0;
33 | overflow: none;
34 | overflow-x: auto;
35 | white-space: nowrap;
36 | border-bottom: 1px solid #eee;
37 | text-align: center;
38 | user-select: none;
39 |
40 | ::ng-deep .more-btn,
41 | .ripple-btn {
42 | height: 40px;
43 | position: relative;
44 | padding: 0 15px;
45 | color: #000;
46 | cursor: pointer;
47 | border-radius: 5px;
48 | overflow: hidden;
49 | display: inline-flex;
50 | align-items: center;
51 | &.active::after {
52 | content: '';
53 | position: absolute;
54 | bottom: 0;
55 | left: 20%;
56 | right: 20%;
57 | height: 3px;
58 | border-radius: 2px;
59 | background-color: rgb(16, 142, 233);
60 | }
61 | }
62 | }
63 | }
64 |
65 | .index-section {
66 | position: relative;
67 | height: calc(100% - 52px);
68 | overflow: hidden;
69 | display: flex;
70 |
71 | // 侧边栏分类
72 | $sidebarWidth: 80px;
73 | .sidebar {
74 | position: relative;
75 | width: $sidebarWidth;
76 | min-width: $sidebarWidth;
77 | height: 98%;
78 | text-align: center;
79 | border-right: 1px solid #eee;
80 | overflow: hidden;
81 | overflow-y: auto;
82 |
83 | .tag {
84 | position: relative;
85 | cursor: pointer;
86 | padding: 11px 1px;
87 | overflow-wrap: break-word;
88 | &.active {
89 | color: #1890ff;
90 | &::after,
91 | &::before {
92 | content: '';
93 | position: absolute;
94 | left: 0;
95 | width: 100%;
96 | }
97 | &:after {
98 | top: 0;
99 | border-top: 1px dashed #ccc;
100 | }
101 | &:before {
102 | content: '';
103 | bottom: 0;
104 | border-bottom: 1px dashed #ccc;
105 | }
106 | }
107 | }
108 | }
109 |
110 | .main {
111 | flex: 1;
112 | padding-bottom: 50px;
113 | overflow: hidden;
114 | overflow-y: auto;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/src/view/mobile/index.component.html:
--------------------------------------------------------------------------------
1 |
4 | ![logo]()
5 |
11 |
12 |
26 |
6 |
7 |
8 |
9 |
10 |
31 |
48 |
75 |
76 |
49 |
74 |
66 |
73 |
6 |
65 |
66 |
7 |
64 | 13 | {{ settings.shortcutTitle }} 14 |
15 | 16 |{{ hours }}:{{ minutes }}:{{ seconds }}
17 |
18 | {{ month }}{{ $t('_shortMonth') }}{{ date }}{{ $t('_shortDay') }}
21 | {{ dayText }}
22 |
23 |
24 |
27 |
33 |
34 |
35 |
40 |
63 |
52 |
61 |
62 |
3 |
9 |
20 |
21 |
10 |
18 |
19 |
22 |
47 |
23 | {{ $t('_bindDomain') }}
24 |
25 |
26 |
27 |
35 |
45 |
46 |
5 |
13 |
14 |
--------------------------------------------------------------------------------
/src/view/system/bookmark-export/index.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xjh22222228/nav/2c7d24c69b2631c2073bb79ea74ea4fcfa80b2ae/src/view/system/bookmark-export/index.component.scss
--------------------------------------------------------------------------------
/src/view/system/bookmark-export/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import { FormsModule } from '@angular/forms'
8 | import { $t } from 'src/locale'
9 | import { NzNotificationService } from 'ng-zorro-antd/notification'
10 | import { NzButtonModule } from 'ng-zorro-antd/button'
11 | import type { INavProps } from 'src/types'
12 | import { navs } from 'src/store'
13 | import { bookmarksExport } from 'src/api'
14 | import { saveAs } from 'file-saver'
15 | import { getAuthCode } from 'src/utils/user'
16 | import { NzSwitchModule } from 'ng-zorro-antd/switch'
17 | import { NzSpinModule } from 'ng-zorro-antd/spin'
18 | import LZString from 'lz-string'
19 |
20 | @Component({
21 | standalone: true,
22 | imports: [
23 | CommonModule,
24 | NzSwitchModule,
25 | NzSpinModule,
26 | FormsModule,
27 | NzButtonModule,
28 | ],
29 | selector: 'system-bookmark-export',
30 | templateUrl: './index.component.html',
31 | styleUrls: ['./index.component.scss'],
32 | })
33 | export default class SystemBookmarkExportComponent {
34 | readonly $t = $t
35 | submitting = false
36 |
37 | constructor(private notification: NzNotificationService) {}
38 |
39 | async bookmarksExport(): Promise
2 |
3 |
4 |
7 |
14 |
15 |
--------------------------------------------------------------------------------
/src/view/system/bookmark/index.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xjh22222228/nav/2c7d24c69b2631c2073bb79ea74ea4fcfa80b2ae/src/view/system/bookmark/index.component.scss
--------------------------------------------------------------------------------
/src/view/system/bookmark/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component, ViewChild, ElementRef } from '@angular/core'
6 | import { $t } from 'src/locale'
7 | import { NzNotificationService } from 'ng-zorro-antd/notification'
8 | import { NzMessageService } from 'ng-zorro-antd/message'
9 | import { NzButtonModule } from 'ng-zorro-antd/button'
10 | import { setNavs } from 'src/utils/web'
11 | import { parseBookmark } from 'src/utils/bookmark'
12 | import { NzInputModule } from 'ng-zorro-antd/input'
13 |
14 | @Component({
15 | standalone: true,
16 | imports: [NzInputModule, NzButtonModule],
17 | selector: 'system-bookmark',
18 | templateUrl: './index.component.html',
19 | styleUrls: ['./index.component.scss'],
20 | })
21 | export default class SystemBookmarkComponent {
22 | @ViewChild('file', { static: false }) file!: ElementRef
23 |
24 | readonly $t = $t
25 |
26 | constructor(
27 | private message: NzMessageService,
28 | private notification: NzNotificationService,
29 | ) {}
30 |
31 | ngOnInit() {}
32 |
33 | onClickFile() {
34 | this.file.nativeElement.click()
35 | }
36 |
37 | onBookChange(e: any) {
38 | const that = this
39 | const { files } = e.target
40 | if (files.length <= 0) return
41 | const file = files[0]
42 | const fileReader = new FileReader()
43 | fileReader.readAsText(file)
44 | fileReader.onload = function () {
45 | const html = this.result as string
46 | try {
47 | const result = parseBookmark(html)
48 | if (!Array.isArray(result)) {
49 | that.notification.error(
50 | $t('_errorBookTip'),
51 | `${result?.message ?? ''}`,
52 | )
53 | } else {
54 | that.message.success($t('_importSuccess'))
55 | setNavs(result)
56 | setTimeout(() => window.location.reload(), 2000)
57 | }
58 | } catch (error: any) {
59 | that.notification.error($t('_errorBookTip'), `${error.message}`)
60 | }
61 | e.target.value = ''
62 | }
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/view/system/collect/index.component.scss:
--------------------------------------------------------------------------------
1 | .add-btn {
2 | margin-bottom: 20px;
3 | margin-right: 20px;
4 | }
5 | .desc {
6 | width: 300px;
7 | white-space: pre-wrap;
8 | }
9 | .ant-table-wrapper {
10 | overflow: auto;
11 | }
12 |
--------------------------------------------------------------------------------
/src/view/system/component/index.component.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
24 |
25 |
13 | Size:
14 |
23 |
26 |
61 |
62 |
27 |
28 |
37 |
38 |
60 |
39 |
59 | {{ componentTitleMap[item.type] }}
40 | {{
41 | $t('_moveUp')
42 | }}
43 | {{ $t('_moveDown') }}
44 | {{ $t('_edit') }}
45 |
46 | {{ $t('_copy') }}
47 | {{ $t('_del') }}
57 |
58 |
2 |
13 |
--------------------------------------------------------------------------------
/src/view/system/info/index.component.scss:
--------------------------------------------------------------------------------
1 | p {
2 | margin-bottom: 10px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/view/system/info/index.component.ts:
--------------------------------------------------------------------------------
1 | // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
2 | // Copyright @ 2018-present xiejiahe. All rights reserved.
3 | // See https://github.com/xjh22222228/nav
4 |
5 | import { Component } from '@angular/core'
6 | import { CommonModule } from '@angular/common'
7 | import { $t } from 'src/locale'
8 | import { getToken } from 'src/utils/user'
9 | import { VERSION } from 'src/constants'
10 | import { isSelfDevelop } from 'src/utils/utils'
11 | import config from '../../../../nav.config.json'
12 |
13 | @Component({
14 | standalone: true,
15 | imports: [CommonModule],
16 | selector: 'system-info',
17 | templateUrl: './index.component.html',
18 | styleUrls: ['./index.component.scss'],
19 | })
20 | export default class SystemInfoComponent {
21 | readonly $t = $t
22 | readonly isSelfDevelop = isSelfDevelop
23 | readonly token = getToken()
24 | readonly config = config
25 | readonly date = config.datetime
26 | readonly currentVersionSrc = `https://img.shields.io/badge/current-v${VERSION}-red.svg?longCache=true&style=flat-square`
27 |
28 | constructor() {}
29 | }
30 |
--------------------------------------------------------------------------------
/src/view/system/search/index.component.scss:
--------------------------------------------------------------------------------
1 | .add-btn {
2 | margin-bottom: 20px;
3 | margin-right: 20px;
4 | }
5 |
6 | .icon {
7 | width: 30px;
8 | height: 30px;
9 | margin-right: 10px;
10 | object-fit: cover;
11 | }
12 |
13 | ::ng-deep #file {
14 | vertical-align: middle;
15 | margin-left: 10px;
16 | .anticon {
17 | font-size: 20px;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/view/system/setting/index.component.scss:
--------------------------------------------------------------------------------
1 | #file {
2 | cursor: pointer;
3 | input {
4 | display: none;
5 | }
6 | }
7 | .preview {
8 | width: 300px;
9 | }
10 | .save-tip {
11 | margin-top: 10px;
12 | color: #f50;
13 | font-weight: bold;
14 | }
15 | .divider {
16 | height: 1px;
17 | width: 100%;
18 | margin: 20px 0;
19 | background-color: #eee;
20 | }
21 | .title {
22 | margin-bottom: 20px;
23 | }
24 | .sim-ban {
25 | img {
26 | display: inline-block;
27 | width: 100%;
28 | object-fit: cover;
29 | }
30 | ::ng-deep .anticon {
31 | font-size: 30px;
32 | }
33 | }
34 | .logo-input {
35 | display: block !important;
36 | margin-top: 5px;
37 | }
38 | .bottom-bar {
39 | z-index: 3;
40 | position: fixed;
41 | bottom: 0;
42 | left: 0;
43 | width: 100%;
44 | padding: 10px 0 10px 200px;
45 | background-color: #fff;
46 | box-shadow: 0 0 10px #ccc;
47 | margin-top: 80px;
48 | border-radius: 8px;
49 | display: flex;
50 | align-items: center;
51 | }
52 |
--------------------------------------------------------------------------------
/src/view/system/tag/index.component.html:
--------------------------------------------------------------------------------
1 |
9 |
10 |
18 |
19 | TOKEN: {{ token }}
3 |{{ $t('_devBranch') }}: {{ config.branch }}
4 |{{ $t('_prevDevTime') }}: {{ date }}
5 |{{ $t('_curVer') }}:
7 | {{ $t('_newVer') }}:
8 |
9 | 
{{ data.desc }}
51 |
57 |