From 71b061a127053c9939ab2a29072d778caac67692 Mon Sep 17 00:00:00 2001 From: xjh22222228 Date: Wed, 25 Sep 2024 14:17:12 +0800 Subject: [PATCH] feat: add countdown component --- README.md | 4 +- angular.json | 3 +- nav.config.yaml | 4 +- scripts/db.mjs | 2 +- scripts/start.mjs | 30 ++++--- src/api/index.ts | 9 +- src/app/app.module.ts | 6 ++ .../calendar/drawer/index.component.html | 14 ++- src/components/calendar/index.component.html | 4 +- src/components/calendar/index.component.ts | 11 ++- .../component-group/index.component.html | 1 + .../countdown/drawer/index.component.html | 86 +++++++++++++++++++ .../countdown/drawer/index.component.scss | 0 .../countdown/drawer/index.component.ts | 60 +++++++++++++ src/components/countdown/index.component.html | 19 ++++ src/components/countdown/index.component.scss | 35 ++++++++ src/components/countdown/index.component.ts | 43 ++++++++++ src/components/image/index.component.html | 2 +- src/components/image/index.component.scss | 5 +- src/components/image/index.component.ts | 11 ++- .../off-work/drawer/index.component.html | 2 +- src/components/off-work/index.component.scss | 3 +- src/components/off-work/index.component.ts | 5 ++ src/components/runtime/index.component.html | 2 +- src/components/runtime/index.component.ts | 11 ++- src/locale/english.ts | 9 +- src/locale/zh_CN.ts | 9 +- src/types/index.ts | 2 +- src/utils/index.ts | 1 + src/utils/mitt.ts | 2 + .../system/component/index.component.html | 2 + src/view/system/component/index.component.ts | 13 ++- src/view/system/component/types.ts | 1 + src/view/system/setting/index.component.html | 12 +-- 34 files changed, 368 insertions(+), 55 deletions(-) create mode 100644 src/components/countdown/drawer/index.component.html create mode 100644 src/components/countdown/drawer/index.component.scss create mode 100644 src/components/countdown/drawer/index.component.ts create mode 100644 src/components/countdown/index.component.html create mode 100644 src/components/countdown/index.component.scss create mode 100644 src/components/countdown/index.component.ts diff --git a/README.md b/README.md index c5f9a8a88e..c7a548ada0 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ - 🍰 支持检测网站存活状态 - 🍰 支持配置仅自己可见 - 🍰 自动抓取网站图标/名称/描述 -- 🍰 海量小组件配置 +- 🍰 海量小组件个性化定制 - 🍰 支持暗黑模式 - 🍰 支持后台管理, 无需部署 - 🍰 支持多种浏览模式，创新 @@ -135,7 +135,7 @@ | | √| address | 自有部署, 一旦填写认为你是自有部署 | |√| √| email | 用户提交收录通知 | | | √| mailConfig | 自有部署，用户收录通知邮箱配置 | -|√ | | imageGitRepoUrl | 图片仓库, 默认主仓库 `https://github.com/xjh22222228/image?branch=main` | +|√ | | imageRepoUrl | 图片仓库, 默认主仓库 `https://github.com/xjh22222228/image?branch=main` | ## 后台 diff --git a/angular.json b/angular.json index 8134e3908c..80b76b7e3f 100644 --- a/angular.json +++ b/angular.json @@ -23,7 +23,8 @@ "nprogress", "clipboard", "file-saver", - "localforage" + "localforage", + "dayjs" ], "outputPath": "dist", "index": "src/main.html", diff --git a/nav.config.yaml b/nav.config.yaml index 539f923482..137a30e80a 100644 --- a/nav.config.yaml +++ b/nav.config.yaml @@ -40,5 +40,5 @@ mailConfig: message: 有用户提交网站收录啦 # 默认主仓库，当仓库作为私密，上传的图片是无法访问的，需要转移到公开仓库 -# 'https://github.com/xjh22222228/image?branch=main' -imageGitRepoUrl: '' +# e.g 'https://github.com/xjh22222228/image?branch=main' +imageRepoUrl: '' diff --git a/scripts/db.mjs b/scripts/db.mjs index e8dde521eb..b3b39d4710 100644 --- a/scripts/db.mjs +++ b/scripts/db.mjs @@ -15,7 +15,7 @@ export default [ top: true, topTypes: [2], desc: '发现导航, 最强轻量级导航网站', - icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/logo.svg', + icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/logo.svg', url: 'https://github.com/xjh22222228/nav', breadcrumb: ['实用工具', '开发相关', '开发神器'], id: 1, diff --git a/scripts/start.mjs b/scripts/start.mjs index b8f20d84c0..8fb5d4ba0f 100644 --- a/scripts/start.mjs +++ b/scripts/start.mjs @@ -32,7 +32,7 @@ const config = yaml.load(fs.readFileSync(configPath)) const configJson = { version: pkgJson.version, gitRepoUrl: config.gitRepoUrl, - imageGitRepoUrl: config.imageGitRepoUrl, + imageRepoUrl: config.imageRepoUrl, branch: config.branch, hashMode: config.hashMode, address: config.address, @@ -138,21 +138,25 @@ try { } // idx = components.findIndex((item) => item.type === 5) - const holiday = { + const countdown = { type: 5, id: -5, - url: 'https://gcore.jsdelivr.net/gh/xjh22222228/public@gh-pages/nav/component1.jpg', + topColor: 'linear-gradient(90deg, #FAD961 0%, #F76B1C 100%)', + bgColor: 'rgb(235,129,124)', + url: 'https://gcore.jsdelivr.net/gh/xjh22222228/public@gh-pages/nav/component2.jpg', title: '距离春节还有', - date: dayjs.tz(new Date(2025, 0, 29)).valueOf(), + dateColor: '#fff', + dayColor: '#fff', + date: '2025-01-29', } if (idx >= 0) { components[idx] = { - ...holiday, + ...countdown, ...components[idx], } components[idx].url = replaceJsdelivrCDN(components[idx].url, settings) } else { - components.push(holiday) + components.push(countdown) } fs.writeFileSync(componentPath, JSON.stringify(components)) } @@ -170,7 +174,7 @@ try { { name: '百度', url: 'https://www.baidu.com/s?wd=', - icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/baidu.svg', + icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/baidu.svg', placeholder: '百度一下', blocked: false, isInner: false, @@ -178,21 +182,21 @@ try { { name: 'Google', url: 'https://www.google.com/search?q=', - icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/google.svg', + icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/google.svg', blocked: false, isInner: false, }, { name: '必应', url: 'https://cn.bing.com/search?q=', - icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/bing.svg', + icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/bing.svg', blocked: false, isInner: false, }, { name: 'GitHub', url: 'https://github.com/search?q=', - icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/github.svg', + icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/github.svg', placeholder: 'Search GitHub', blocked: false, isInner: false, @@ -200,14 +204,14 @@ try { { name: '知乎', url: 'https://www.zhihu.com/search?type=content&q=', - icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/zhihu.svg', + icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/zhihu.svg', blocked: false, isInner: false, }, { name: '豆瓣', url: 'https://search.douban.com/book/subject_search?search_text=', - icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/douban.svg', + icon: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/douban.svg', placeholder: '书名、作者、ISBN', blocked: false, isInner: false, @@ -330,7 +334,7 @@ try { settings.superTitle ||= '' const defImgs = [ { - src: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-web@image/nav-1717494364392-ad.jpg', + src: 'https://gcore.jsdelivr.net/gh/xjh22222228/nav-image@image/nav-1717494364392-ad.jpg', url: 'https://haokawx.lot-ml.com/Product/index/454266', }, { diff --git a/src/api/index.ts b/src/api/index.ts index 44e325714b..644e79bc89 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -18,15 +18,15 @@ import { ISettings } from 'src/types' import { isSelfDevelop } from 'src/utils/util' import { isLogin } from 'src/utils/user' -const { gitRepoUrl, imageGitRepoUrl } = config +const { gitRepoUrl, imageRepoUrl } = config const s = gitRepoUrl.split('/') const DEFAULT_BRANCH = config.branch export let imageRepo = '' export let imageBranch = '' -if (imageGitRepoUrl) { - const split = imageGitRepoUrl.split('?') +if (imageRepoUrl) { + const split = imageRepoUrl.split('?') imageRepo = split[0].split('/').at(-1) || '' const query = qs.parse(split.at(-1) || '') if (query['branch']) { @@ -92,6 +92,9 @@ export async function createBranch(branch: string) { if (isSelfDevelop) { return } + if (imageRepoUrl) { + return + } const url = isGitee() ? `/repos/${authorName}/${repoName}/branches` diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7560cd59a0..51fa6138ae 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,6 +45,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer' import { NzColorPickerModule } from 'ng-zorro-antd/color-picker' import { NzCarouselModule } from 'ng-zorro-antd/carousel' import { NzTimePickerModule } from 'ng-zorro-antd/time-picker' +import { NzDatePickerModule } from 'ng-zorro-antd/date-picker' import { NZ_I18N } from 'ng-zorro-antd/i18n' import { zh_CN } from 'ng-zorro-antd/i18n' @@ -74,6 +75,8 @@ import { OffWorkComponent } from '../components/off-work/index.component' import { OffWorkDrawerComponent } from '../components/off-work/drawer/index.component' import { ImageComponent } from '../components/image/index.component' import { ImageDrawerComponent } from '../components/image/drawer/index.component' +import { CountdownComponent } from '../components/countdown/index.component' +import { CountdownDrawerComponent } from '../components/countdown/drawer/index.component' import LightComponent from '../view/light/index.component' import SuperComponent from '../view/super/index.component' @@ -166,6 +169,8 @@ const icons: IconDefinition[] = [ OffWorkComponent, ImageComponent, ImageDrawerComponent, + CountdownComponent, + CountdownDrawerComponent, OffWorkDrawerComponent, CalendarDrawerComponent, ComponentGroupComponent, @@ -203,6 +208,7 @@ const icons: IconDefinition[] = [ NzColorPickerModule, NzCarouselModule, NzTimePickerModule, + NzDatePickerModule, NzSwitchModule, DragDropModule, BrowserModule, diff --git a/src/components/calendar/drawer/index.component.html b/src/components/calendar/drawer/index.component.html index f32b1360c4..a937a423b9 100644 --- a/src/components/calendar/drawer/index.component.html +++ b/src/components/calendar/drawer/index.component.html @@ -8,17 +8,27 @@ >
- {{ $t('_calendarTopColor') }} + {{ $t('_topColor') }} +
+ + + +
- {{ $t('_calendarBgColor') }} + {{ $t('_bgColor') }} +
+ + + +
diff --git a/src/components/calendar/index.component.html b/src/components/calendar/index.component.html index dd1b958090..d4dd33ab37 100644 --- a/src/components/calendar/index.component.html +++ b/src/components/calendar/index.component.html @@ -1,8 +1,8 @@
-
+
{{ date }}
-
+
{{ day }}
第{{ dayOfYear }}天 diff --git a/src/components/calendar/index.component.ts b/src/components/calendar/index.component.ts index 48130f3ef9..773182bfdc 100644 --- a/src/components/calendar/index.component.ts +++ b/src/components/calendar/index.component.ts @@ -6,6 +6,7 @@ import { Component, Input } from '@angular/core' import { getDateTime, getDayOfYear } from 'src/utils' import { components } from 'src/store' import { ComponentType, IComponentProps } from 'src/types' +import event from 'src/utils/mitt' @Component({ selector: 'app-calendar', @@ -15,6 +16,7 @@ import { ComponentType, IComponentProps } from 'src/types' export class CalendarComponent { @Input() data!: IComponentProps + component: Record = {} date = '' day = 0 week = '' @@ -28,10 +30,15 @@ export class CalendarComponent { this.dayOfYear = getDayOfYear() } - get component(): any { + ngOnInit() { + this.init() + event.on('COMPONENT_OK', this.init.bind(this)) + } + + init() { const data = components.find( (item) => item.type === ComponentType.Calendar && item.id === this.data.id ) - return data || {} + this.component = data || {} } } diff --git a/src/components/component-group/index.component.html b/src/components/component-group/index.component.html index c8b7d3cea4..806313175e 100644 --- a/src/components/component-group/index.component.html +++ b/src/components/component-group/index.component.html @@ -8,6 +8,7 @@ + diff --git a/src/components/countdown/drawer/index.component.html b/src/components/countdown/drawer/index.component.html new file mode 100644 index 0000000000..f88beb4477 --- /dev/null +++ b/src/components/countdown/drawer/index.component.html @@ -0,0 +1,86 @@ + +
+ + {{ $t('_topColor') }} + + + +
+ + + +
+ + + + {{ $t('_image') }} + + + + + + + + + + + + + {{ $t('_bgColor') }} + + + +
+ + + +
+ + + + {{ $t('_title') }} + + + + + + + {{ $t('_dateColor') }} + + + + + + + {{ $t('_timeColor') }} + + + + + + + {{ $t('_date') }} + + + + +
+ + +
+ + +
+ + diff --git a/src/components/countdown/drawer/index.component.scss b/src/components/countdown/drawer/index.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/components/countdown/drawer/index.component.ts b/src/components/countdown/drawer/index.component.ts new file mode 100644 index 0000000000..13f95bd6b9 --- /dev/null +++ b/src/components/countdown/drawer/index.component.ts @@ -0,0 +1,60 @@ +// 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。 +// Copyright @ 2018-present xiejiahe. All rights reserved. +// See https://github.com/xjh22222228/nav + +import { Component, EventEmitter, Output } from '@angular/core' +import { $t } from 'src/locale' +import { FormBuilder, FormGroup } from '@angular/forms' +import dayjs from 'dayjs' + +@Component({ + selector: 'countdown-drawer', + templateUrl: './index.component.html', + styleUrls: ['./index.component.scss'], +}) +export class CountdownDrawerComponent { + @Output() ok = new EventEmitter() + + $t = $t + visible = false + validateForm!: FormGroup + index = 0 + + constructor(private fb: FormBuilder) { + this.validateForm = this.fb.group({ + topColor: [''], + bgColor: [''], + title: [''], + url: [''], + dateColor: [''], + dayColor: [''], + date: [null], + }) + } + + open(data: any, idx: number) { + this.index = idx + for (const k in data) { + this.validateForm.get(k)!?.setValue(data[k]) + } + this.visible = true + } + + onUploadImage(data: any) { + this.validateForm.get('url')!.setValue(data.cdn) + } + + handleClose() { + this.visible = false + } + + handleSubmit() { + const values = this.validateForm.value + this.ok.emit({ + ...values, + date: dayjs(values.date).format('YYYY-MM-DD'), + index: this.index, + }) + this.handleClose() + } +} diff --git a/src/components/countdown/index.component.html b/src/components/countdown/index.component.html new file mode 100644 index 0000000000..5e88b5d4e8 --- /dev/null +++ b/src/components/countdown/index.component.html @@ -0,0 +1,19 @@ +
+
+ {{ component['title'] }} +
+
+
+ {{ component['dayStr'] }} +
+
+ - {{ component['dateStr'] }} - +
+
+
diff --git a/src/components/countdown/index.component.scss b/src/components/countdown/index.component.scss new file mode 100644 index 0000000000..e19d70663e --- /dev/null +++ b/src/components/countdown/index.component.scss @@ -0,0 +1,35 @@ +.holiday { + position: relative; + width: 160px; + height: var(--componentHeight); + max-width: 100%; + max-height: 100%; + border-radius: 12px; + overflow: hidden; + color: #fff; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + text-align: center; + .top { + padding: 6px 10px; + font-weight: 500; + } + .box { + position: relative; + flex: 1; + background-size: cover; + } + .days { + font-weight: bold; + font-size: 50px; + margin-top: 16px; + } + .date { + position: absolute; + bottom: 5px; + left: 0; + width: 100%; + font-weight: 500; + } +} diff --git a/src/components/countdown/index.component.ts b/src/components/countdown/index.component.ts new file mode 100644 index 0000000000..e70e95ccdf --- /dev/null +++ b/src/components/countdown/index.component.ts @@ -0,0 +1,43 @@ +// 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。 +// Copyright @ 2018-present xiejiahe. All rights reserved. +// See https://github.com/xjh22222228/nav + +import { Component, Input } from '@angular/core' +import { components } from 'src/store' +import { ComponentType, IComponentProps } from 'src/types' +import dayjs from 'dayjs' +import event from 'src/utils/mitt' + +@Component({ + selector: 'app-countdown', + templateUrl: './index.component.html', + styleUrls: ['./index.component.scss'], +}) +export class CountdownComponent { + @Input() data!: IComponentProps + component: Record = {} + + constructor() {} + + ngOnInit() { + this.init() + event.on('COMPONENT_OK', this.init.bind(this)) + } + + init() { + const data = components.find( + (item) => + item.type === ComponentType.Countdown && item.id === this.data.id + ) + const payload: any = { ...data } + if (payload.date) { + payload.dateStr = dayjs(payload.date).format('YYYY.MM.DD') + payload.dayStr = dayjs(dayjs(payload.date).format('YYYY-MM-DD')).diff( + dayjs().format('YYYY-MM-DD'), + 'day' + ) + payload.dayStr = payload.dayStr < 0 ? 0 : payload.dayStr + } + this.component = payload + } +} diff --git a/src/components/image/index.component.html b/src/components/image/index.component.html index 2af6dd9f3b..60bf78c1e9 100644 --- a/src/components/image/index.component.html +++ b/src/components/image/index.component.html @@ -2,5 +2,5 @@ class="cimage family" [style.backgroundImage]="component['url'] && 'url(' + component['url'] + ')'" > -
{{ component.text }}
+
{{ component['text'] }}
diff --git a/src/components/image/index.component.scss b/src/components/image/index.component.scss index 9e4d5bca6b..fd1b929856 100644 --- a/src/components/image/index.component.scss +++ b/src/components/image/index.component.scss @@ -12,10 +12,9 @@ .text { position: absolute; bottom: 5px; - left: 50%; - transform: translateX(-50%); - font-size: 12px; + left: 0; width: 100%; + font-size: 12px; text-align: center; font-weight: 500; } diff --git a/src/components/image/index.component.ts b/src/components/image/index.component.ts index 3c791a1af8..4b6845cbc5 100644 --- a/src/components/image/index.component.ts +++ b/src/components/image/index.component.ts @@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core' import { components } from 'src/store' import { ComponentType, IComponentProps } from 'src/types' +import event from 'src/utils/mitt' @Component({ selector: 'app-image', @@ -13,13 +14,19 @@ import { ComponentType, IComponentProps } from 'src/types' }) export class ImageComponent { @Input() data!: IComponentProps + component: Record = {} constructor() {} - get component(): any { + ngOnInit() { + this.init() + event.on('COMPONENT_OK', this.init.bind(this)) + } + + init() { const data = components.find( (item) => item.type === ComponentType.Image && item.id === this.data.id ) - return data || {} + this.component = data || {} } } diff --git a/src/components/off-work/drawer/index.component.html b/src/components/off-work/drawer/index.component.html index d2ee2f4b2f..ce288f06e5 100644 --- a/src/components/off-work/drawer/index.component.html +++ b/src/components/off-work/drawer/index.component.html @@ -20,7 +20,7 @@ - {{ $t('_restTitle') }} + {{ $t('_time') }} diff --git a/src/components/off-work/index.component.scss b/src/components/off-work/index.component.scss index 2a260ddd26..835ab30803 100644 --- a/src/components/off-work/index.component.scss +++ b/src/components/off-work/index.component.scss @@ -28,8 +28,7 @@ } .img { position: absolute; - left: 50%; - transform: translateX(-50%); + left: 0; bottom: 0; width: 100%; } diff --git a/src/components/off-work/index.component.ts b/src/components/off-work/index.component.ts index 3932df42ce..ae122ffddd 100644 --- a/src/components/off-work/index.component.ts +++ b/src/components/off-work/index.component.ts @@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core' import { components } from 'src/store' import { ComponentType, IComponentProps } from 'src/types' +import event from 'src/utils/mitt' @Component({ selector: 'app-offwork', @@ -28,6 +29,10 @@ export class OffWorkComponent { ngOnInit() { this.init() + event.on('COMPONENT_OK', () => { + clearTimeout(this.timer) + this.init() + }) } ngOnDestroy() { diff --git a/src/components/runtime/index.component.html b/src/components/runtime/index.component.html index dc9e7c050f..937dd236fd 100644 --- a/src/components/runtime/index.component.html +++ b/src/components/runtime/index.component.html @@ -1,5 +1,5 @@
-
{{ component.title }}
+
{{ component['title'] }}
{{ runDays }} 天 diff --git a/src/components/runtime/index.component.ts b/src/components/runtime/index.component.ts index 18eac7d0d1..c366f6175c 100644 --- a/src/components/runtime/index.component.ts +++ b/src/components/runtime/index.component.ts @@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core' import { components, settings } from 'src/store' import { ComponentType, IComponentProps } from 'src/types' +import event from 'src/utils/mitt' @Component({ selector: 'app-runtime', @@ -14,6 +15,7 @@ import { ComponentType, IComponentProps } from 'src/types' export class RuntimeComponent { @Input() data!: IComponentProps + component: Record = {} runDays = 0 constructor() { @@ -22,10 +24,15 @@ export class RuntimeComponent { this.runDays = Math.floor(now / (1000 * 60 * 60 * 24)) } - get component(): any { + ngOnInit() { + this.init() + event.on('COMPONENT_OK', this.init.bind(this)) + } + + init() { const data = components.find( (item) => item.type === ComponentType.Runtime && item.id === this.data.id ) - return data || {} + this.component = data || {} } } diff --git a/src/locale/english.ts b/src/locale/english.ts index de25475e2c..ee038ffab5 100644 --- a/src/locale/english.ts +++ b/src/locale/english.ts @@ -257,8 +257,8 @@ const english: Record = { _calendar: 'Calendar', _submit: 'Submit', _cancel: 'Cancel', - _calendarTopColor: 'Top background color', - _calendarBgColor: 'Background color', + _topColor: 'Top background color', + _bgColor: 'Background color', _runtime: 'Running time', _runtimeTitle: 'Title', _offWork: 'Off work', @@ -266,6 +266,11 @@ const english: Record = { _restTitle: 'Rest title', _image: 'Image', _text: 'Text', + _countdown: 'Count down', + _dateColor: 'Date color', + _timeColor: 'Time color', + _date: 'Date', + _time: 'Time', } export default english diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts index 8588ca629a..1bf9438ee7 100644 --- a/src/locale/zh_CN.ts +++ b/src/locale/zh_CN.ts @@ -249,8 +249,8 @@ const zhCN: Record = { _calendar: '日历', _submit: '提交', _cancel: '取消', - _calendarTopColor: '顶部背景色', - _calendarBgColor: '背景色', + _topColor: '顶部背景色', + _bgColor: '背景色', _runtime: '运行时长', _runtimeTitle: '标题', _offWork: '下班', @@ -258,6 +258,11 @@ const zhCN: Record = { _restTitle: '休息标题', _image: '图片', _text: '文本', + _countdown: '倒数', + _dateColor: '日期颜色', + _timeColor: '时间颜色', + _date: '日期', + _time: '时间', } export default zhCN diff --git a/src/types/index.ts b/src/types/index.ts index 3409cfa23a..00d2d95cea 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -20,7 +20,7 @@ export enum ComponentType { OffWork = 2, Runtime = 3, Image = 4, - Holiday = 5, + Countdown = 5, } export interface IComponentProps { diff --git a/src/utils/index.ts b/src/utils/index.ts index 4e07eacdd1..73aee02653 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -391,6 +391,7 @@ export function isMobile() { return 'ontouchstart' in window } +// 今年第几天 export function getDayOfYear() { const now = new Date() const startOfYear = new Date(now.getFullYear(), 0, 0) diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts index 2e4acfd393..ea3abc7cd7 100644 --- a/src/utils/mitt.ts +++ b/src/utils/mitt.ts @@ -1,4 +1,6 @@ // 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。 +// Copyright @ 2018-present xiejiahe. All rights reserved. +// See https://github.com/xjh22222228/nav import mitt from 'mitt' export default mitt() diff --git a/src/view/system/component/index.component.html b/src/view/system/component/index.component.html index 0ad3014346..7ebf348deb 100644 --- a/src/view/system/component/index.component.html +++ b/src/view/system/component/index.component.html @@ -19,6 +19,7 @@ +
@@ -47,3 +48,4 @@ + diff --git a/src/view/system/component/index.component.ts b/src/view/system/component/index.component.ts index e5e0863615..2e90bbe5cb 100644 --- a/src/view/system/component/index.component.ts +++ b/src/view/system/component/index.component.ts @@ -14,8 +14,10 @@ import { CalendarDrawerComponent } from 'src/components/calendar/drawer/index.co import { RuntimeDrawerComponent } from 'src/components/runtime/drawer/index.component' import { OffWorkDrawerComponent } from 'src/components/off-work/drawer/index.component' import { ImageDrawerComponent } from 'src/components/image/drawer/index.component' +import { CountdownDrawerComponent } from 'src/components/countdown/drawer/index.component' import { componentTitleMap } from './types' import { isSelfDevelop } from 'src/utils/util' +import event from 'src/utils/mitt' @Component({ selector: 'system-component', @@ -27,6 +29,7 @@ export default class SystemComponentComponent { @ViewChild('runtime') runtimeChild!: RuntimeDrawerComponent @ViewChild('offwork') offworkChild!: OffWorkDrawerComponent @ViewChild('image') imageChild!: ImageDrawerComponent + @ViewChild('countdown') countdownChild!: CountdownDrawerComponent $t = $t isSelfDevelop = isSelfDevelop @@ -67,10 +70,11 @@ export default class SystemComponentComponent { handleEdit(data: any, idx: number) { const type = data.type const types: Record = { - 1: this.calendarChild, - 2: this.offworkChild, - 3: this.runtimeChild, - 4: this.imageChild, + [ComponentType.Calendar]: this.calendarChild, + [ComponentType.OffWork]: this.offworkChild, + [ComponentType.Runtime]: this.runtimeChild, + [ComponentType.Image]: this.imageChild, + [ComponentType.Countdown]: this.countdownChild, } types[type]?.open(data, idx) } @@ -92,6 +96,7 @@ export default class SystemComponentComponent { ...this.components[index], ...values, } + event.emit('COMPONENT_OK') } handleSubmit() { diff --git a/src/view/system/component/types.ts b/src/view/system/component/types.ts index 83ea041c55..a7c8b40058 100644 --- a/src/view/system/component/types.ts +++ b/src/view/system/component/types.ts @@ -10,4 +10,5 @@ export const componentTitleMap: Record = { [ComponentType.OffWork]: $t('_offWork'), [ComponentType.Runtime]: $t('_runtime'), [ComponentType.Image]: $t('_image'), + [ComponentType.Countdown]: $t('_countdown'), } diff --git a/src/view/system/setting/index.component.html b/src/view/system/setting/index.component.html index 66bcca55b1..4660a28056 100644 --- a/src/view/system/setting/index.component.html +++ b/src/view/system/setting/index.component.html @@ -55,6 +55,10 @@ {{ $t('_imageCDN') }} + +