Test vercel preview

nav.config.yaml

@@ -9,7 +9,7 @@
 
 # 仓库地址，填写 Fork 后的仓库地址，支持 Gitee / GitHub
 # 作者 Gitee 仓库地址 https://gitee.com/xiejiahe/nav
-gitRepoUrl: https://github.com/xjh22222228/nav
+gitRepoUrl: https://github.com/nuo-ai/nav
 
 # Fork 部署分支
 branch: main

scripts/start.mjs

@@ -120,6 +120,7 @@ try {
     type: 4,
     id: -4,
     url: 'https://gcore.jsdelivr.net/gh/xjh22222228/public@gh-pages/nav/component1.jpg',
+    go: '',
     text: '只有认可，才能强大',
   }
   if (idx >= 0) {
@@ -183,6 +184,20 @@ try {
   } else {
     components.push(html)
   }
+  idx = components.findIndex((item) => item.type === 7)
+  const holiday = {
+    type: 7,
+    id: -7,
+    items: [],
+  }
+  if (idx >= 0) {
+    components[idx] = {
+      ...holiday,
+      ...components[idx],
+    }
+  } else {
+    components.push(holiday)
+  }
   fs.writeFileSync(componentPath, JSON.stringify(components))
 }
 

scripts/util.mjs

@@ -78,6 +78,7 @@ export function setWeb(nav, settings, tags = []) {
     if (typeof item.icon === 'string' && item.icon.startsWith('icon')) {
       item.icon = ''
     }
+    item.icon = replaceJsdelivrCDN(item.icon, settings)
   }
 
   function formatDate(item) {

src/app/app.module.ts

@@ -79,6 +79,8 @@ import { CountdownComponent } from '../components/countdown/index.component'
 import { CountdownDrawerComponent } from '../components/countdown/drawer/index.component'
 import { HTMLComponent } from '../components/html/index.component'
 import { HTMLDrawerComponent } from '../components/html/drawer/index.component'
+import { HolidayComponent } from '../components/holiday/index.component'
+import { HolidayDrawerComponent } from '../components/holiday/drawer/index.component'
 
 import LightComponent from '../view/light/index.component'
 import SuperComponent from '../view/super/index.component'
@@ -175,6 +177,8 @@ const icons: IconDefinition[] = [
     CountdownDrawerComponent,
     HTMLComponent,
     HTMLDrawerComponent,
+    HolidayComponent,
+    HolidayDrawerComponent,
     OffWorkDrawerComponent,
     CalendarDrawerComponent,
     ComponentGroupComponent,

src/components/calendar/index.component.scss

@@ -1,7 +1,6 @@
 .calendar {
   width: 130px;
   height: var(--componentHeight);
-  max-width: 100%;
   max-height: 100%;
   border-radius: 12px;
   text-align: center;

src/components/calendar/index.component.ts

@@ -15,14 +15,14 @@ export class CalendarComponent {
   @Input() data!: IComponentProps
 
   date = ''
-  day = 0
+  day = ''
   week = ''
   dayOfYear = 0
 
   constructor() {
     const date = getDateTime()
     this.date = `${date.year}年${date.month}月`
-    this.day = date.date
+    this.day = date.zeroDate
     this.week = date.dayText
     this.dayOfYear = getDayOfYear()
   }

src/components/component-group/index.component.html

@@ -15,6 +15,7 @@
         [data]="item"
         [class.hidden]="!item['html']"
       />
+      <app-holiday *ngSwitchCase="ComponentType.Holiday" [data]="item" />
     </ng-container>
   </ng-container>
 

src/components/component-group/index.component.scss

@@ -21,15 +21,21 @@
   user-select: none;
   column-gap: 15px;
   justify-content: flex-start;
+  max-width: 100%;
   &.directionCol {
     flex-wrap: wrap;
     justify-content: center;
     row-gap: 15px;
     overflow-x: hidden;
+    ::ng-deep {
+      > .ng-star-inserted,
+      .citems {
+        max-width: 100%;
+      }
+    }
   }
   ::ng-deep {
     > .ng-star-inserted {
-      max-width: 100%;
       animation-duration: 0.5s;
       animation-fill-mode: both;
       animation-name: zoomInDown;

src/components/countdown/index.component.scss

@@ -2,7 +2,6 @@
   position: relative;
   width: 160px;
   height: var(--componentHeight);
-  max-width: 100%;
   max-height: 100%;
   border-radius: 12px;
   overflow: hidden;

src/components/create-web/index.component.html

@@ -35,7 +35,6 @@
           <input
             formControlName="title"
             nz-input
-            [placeholder]="$t('_webTitle')"
             [readonly]="getting"
             [placeholder]="getting ? $t('_pendingGet') : ''"
           />
@@ -132,7 +131,6 @@
         <nz-form-control [nzSpan]="20">
           <textarea
             formControlName="desc"
-            [placeholder]="settings.description"
             nz-input
             [nzAutosize]="{ minRows: 3, maxRows: 5 }"
             [readonly]="getting"

src/components/create-web/index.component.ts

@@ -104,8 +104,7 @@ export class CreateWebComponent {
     if (detail) {
       if (Array.isArray(detail.tags)) {
         detail.tags.forEach((item: IWebTag) => {
-          // @ts-ignore
-          this.validateForm?.get('urlArr').push?.(
+          ;(this.validateForm?.get('urlArr') as FormArray).push?.(
             this.fb.group({
               id: Number(item.id),
               name: tagMap[item.id].name ?? '',
@@ -185,8 +184,7 @@ export class CreateWebComponent {
   }
 
   addMoreUrl() {
-    // @ts-ignore
-    this.validateForm.get('urlArr').push(
+    ;(this.validateForm.get('urlArr') as FormArray).push(
       this.fb.group({
         id: '',
         name: '',
@@ -196,8 +194,7 @@ export class CreateWebComponent {
   }
 
   lessMoreUrl(idx: number) {
-    // @ts-ignore
-    this.validateForm.get('urlArr').removeAt(idx)
+    ;(this.validateForm.get('urlArr') as FormArray).removeAt(idx)
   }
 
   onChangeFile(data: any) {

src/components/holiday/drawer/index.component.html

@@ -0,0 +1,68 @@
+<nz-drawer
+  [nzClosable]="false"
+  [nzVisible]="visible"
+  nzPlacement="right"
+  [nzTitle]="$t('_edit')"
+  (nzOnClose)="handleClose()"
+  [nzFooter]="footerTpl"
+>
+  <form nz-form [formGroup]="validateForm" *nzDrawerContent>
+    <div formArrayName="items">
+      <div
+        *ngFor="let n of items.controls; let idx = index"
+        class="border-b border-solid mb-4"
+      >
+        <ng-container [formGroupName]="idx">
+          <nz-form-item>
+            <nz-form-label [nzSpan]="6">{{ $t('_title') }}</nz-form-label>
+            <nz-form-control [nzSpan]="18">
+              <input
+                formControlName="title"
+                type="text"
+                nz-input
+                maxlength="10"
+              />
+            </nz-form-control>
+          </nz-form-item>
+
+          <!-- <nz-form-item>
+            <nz-form-label [nzSpan]="6">{{
+              $t('_backgroundImage')
+            }}</nz-form-label>
+            <nz-form-control [nzSpan]="18">
+              <input formControlName="url" type="text" nz-input />
+            </nz-form-control>
+          </nz-form-item> -->
+
+          <nz-form-item>
+            <nz-form-label [nzSpan]="6">休息天数</nz-form-label>
+            <nz-form-control [nzSpan]="18">
+              <input formControlName="day" type="text" nz-input />
+            </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>
+        </ng-container>
+      </div>
+    </div>
+
+    <button class="mt-4" nz-button nzType="primary" (click)="handleAdd()">
+      {{ $t('_add') }}
+    </button>
+  </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>

src/components/holiday/drawer/index.component.ts

@@ -0,0 +1,90 @@
+// 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
+// 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, FormArray } from '@angular/forms'
+import dayjs from 'dayjs'
+
+@Component({
+  selector: 'holiday-drawer',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+})
+export class HolidayDrawerComponent {
+  @Output() ok = new EventEmitter<void>()
+
+  $t = $t
+  visible = false
+  validateForm!: FormGroup
+  index = 0
+
+  constructor(private fb: FormBuilder) {
+    this.validateForm = this.fb.group({
+      items: this.fb.array([]),
+    })
+  }
+
+  get items(): FormArray {
+    return this.validateForm.get('items') as FormArray
+  }
+
+  open(data: any, idx: number) {
+    this.index = idx
+    if (data['items']) {
+      data['items'].forEach((item: any) => {
+        ;(this.validateForm.get('items') as FormArray).push(
+          this.fb.group({
+            url: item.url || '',
+            day: String(item.day),
+            title: item.title,
+            date: item.date,
+          })
+        )
+      })
+    }
+    this.visible = true
+  }
+
+  handleAdd() {
+    ;(this.validateForm.get('items') as FormArray).push(
+      this.fb.group({
+        day: '0',
+        url: '',
+        title: '',
+        date: Date.now(),
+      })
+    )
+  }
+
+  handleClose() {
+    this.visible = false
+    ;(this.validateForm.get('items') as FormArray).controls = []
+  }
+
+  handleSubmit() {
+    const values = this.validateForm.value
+    const now = dayjs(dayjs().format('YYYY-MM-DD'))
+    this.ok.emit({
+      ...values,
+      items: [...values.items]
+        .filter((item: any) => {
+          const day = parseInt(item.day)
+          item.day = day || 0
+          item.date = dayjs(item.date).format('YYYY-MM-DD')
+          let date = dayjs(item.date)
+          if (item.day > 0) {
+            date = date.add(item.day - 1, 'day')
+          }
+          if (date.isBefore(now)) {
+            return false
+          }
+          return !!item.title.trim()
+        })
+        .sort((a, b) => dayjs(a.date).valueOf() - dayjs(b.date).valueOf()),
+      index: this.index,
+    })
+    this.handleClose()
+  }
+}

src/components/holiday/index.component.html

@@ -0,0 +1,30 @@
+<div class="holiday family citems" *ngIf="items.length">
+  <div class="left" [class.today]="items[0].isToday || items[0].isRest">
+    <div class="title">
+      {{
+        items[0].isToday || items[0].isRest
+          ? '今天就是'
+          : '距离' + items[0].title
+      }}
+    </div>
+    <div class="days">{{ items[0].diffStr }}</div>
+    <div class="flex items-center justify-center whitespace-nowrap">
+      <span class="tag" *ngIf="items[0].day > 0">休</span>
+      <span
+        >{{ items[0].dateStr }}
+        <ng-container *ngIf="items[0].afterDay"
+          >- {{ items[0].afterDay }}</ng-container
+        ></span
+      >
+    </div>
+  </div>
+  <div class="right">
+    <div class="items" *ngFor="let item of items; let idx = index">
+      <div class="cleft">
+        {{ item.title }} {{ item.dateStr
+        }}<span class="tag" *ngIf="item.day > 0">休</span>
+      </div>
+      <div class="cright" *ngIf="item.diffDay > 0">{{ item.diffDay }}天</div>
+    </div>
+  </div>
+</div>