feat: add countdown component

xjh22222228 · Sep 25, 2024 · 71b061a · 71b061a
1 parent eb2dc6c
commit 71b061a
Show file tree

Hide file tree

Showing 34 changed files with 368 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,44 +174,44 @@ 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,
       },
       {
         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,
       },
       {
         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
@@ -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
@@ -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
@@ -8,17 +8,27 @@
 >
   <form nz-form [formGroup]="validateForm" *nzDrawerContent>
     <nz-form-item>
-      <nz-form-label [nzSpan]="8">{{ $t('_calendarTopColor') }}</nz-form-label>
+      <nz-form-label [nzSpan]="8">{{ $t('_topColor') }}</nz-form-label>
       <nz-form-control [nzSpan]="16">
         <nz-color-picker nzTrigger="hover" formControlName="topColor" />
       </nz-form-control>
+      <div>
+        <nz-form-control>
+          <input nz-input formControlName="topColor" />
+        </nz-form-control>
+      </div>
     </nz-form-item>
 
     <nz-form-item>
-      <nz-form-label [nzSpan]="8">{{ $t('_calendarBgColor') }}</nz-form-label>
+      <nz-form-label [nzSpan]="8">{{ $t('_bgColor') }}</nz-form-label>
       <nz-form-control [nzSpan]="16">
         <nz-color-picker nzTrigger="hover" formControlName="bgColor" />
       </nz-form-control>
+      <div>
+        <nz-form-control>
+          <input nz-input formControlName="bgColor" />
+        </nz-form-control>
+      </div>
     </nz-form-item>
   </form>
 

diff --git a/src/components/calendar/index.component.html b/src/components/calendar/index.component.html
@@ -1,8 +1,8 @@
 <div class="calendar family">
-  <div class="ctop" [style.backgroundColor]="component.topColor">
+  <div class="ctop" [style.background]="component['topColor']">
     {{ date }}
   </div>
-  <div class="box" [style.backgroundColor]="component.bgColor">
+  <div class="box" [style.background]="component['bgColor']">
     <div class="cday">{{ day }}</div>
     <div class="cdate">
       <span class="mr-1.5">第{{ dayOfYear }}天</span>

diff --git 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<string, any> = {}
   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
@@ -8,6 +8,7 @@
       <app-runtime *ngSwitchCase="ComponentType.Runtime" [data]="item" />
       <app-offwork *ngSwitchCase="ComponentType.OffWork" [data]="item" />
       <app-image *ngSwitchCase="ComponentType.Image" [data]="item" />
+      <app-countdown *ngSwitchCase="ComponentType.Countdown" [data]="item" />
     </ng-container>
   </ng-container>
 

diff --git a/src/components/countdown/drawer/index.component.html b/src/components/countdown/drawer/index.component.html
@@ -0,0 +1,86 @@
+<nz-drawer
+  [nzClosable]="false"
+  [nzVisible]="visible"
+  nzPlacement="right"
+  [nzTitle]="$t('_edit')"
+  (nzOnClose)="handleClose()"
+  [nzFooter]="footerTpl"
+>
+  <form nz-form [formGroup]="validateForm" *nzDrawerContent>
+    <nz-form-item>
+      <nz-form-label [nzSpan]="6">{{ $t('_topColor') }}</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <nz-color-picker nzTrigger="hover" formControlName="topColor" />
+      </nz-form-control>
+      <div>
+        <nz-form-control>
+          <input nz-input formControlName="topColor" />
+        </nz-form-control>
+      </div>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzSpan]="6">{{ $t('_image') }}</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <nz-input-group [nzSuffix]="suffixIconSearch">
+          <input formControlName="url" nz-input />
+        </nz-input-group>
+
+        <ng-template #suffixIconSearch>
+          <app-upload (onChange)="onUploadImage($event)"></app-upload>
+        </ng-template>
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzSpan]="6">{{ $t('_bgColor') }}</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <nz-color-picker nzTrigger="hover" formControlName="bgColor" />
+      </nz-form-control>
+      <div>
+        <nz-form-control>
+          <input nz-input formControlName="bgColor" />
+        </nz-form-control>
+      </div>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzSpan]="6">{{ $t('_title') }}</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <input nz-input formControlName="title" maxlength="20" />
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzSpan]="6">{{ $t('_dateColor') }}</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <nz-color-picker nzTrigger="hover" formControlName="dateColor" />
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzSpan]="6">{{ $t('_timeColor') }}</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <nz-color-picker nzTrigger="hover" formControlName="dayColor" />
+      </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+      <nz-form-label [nzSpan]="6">{{ $t('_date') }}</nz-form-label>
+      <nz-form-control [nzSpan]="18">
+        <nz-date-picker formControlName="date"></nz-date-picker>
+      </nz-form-control>
+    </nz-form-item>
+  </form>
+
+  <ng-template #footerTpl>
+    <div style="float: right">
+      <button nz-button style="margin-right: 8px" (click)="handleClose()">
+        {{ $t('_cancel') }}
+      </button>
+      <button nz-button nzType="primary" (click)="handleSubmit()">
+        {{ $t('_submit') }}
+      </button>
+    </div>
+  </ng-template>
+</nz-drawer>
diff --git a/src/components/countdown/drawer/index.component.scss b/src/components/countdown/drawer/index.component.scss