feat(component): add HTML component

package.json

@@ -15,14 +15,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.4",
-    "@angular/common": "^18.2.4",
-    "@angular/compiler": "^18.2.4",
-    "@angular/core": "^18.2.4",
-    "@angular/forms": "^18.2.4",
-    "@angular/platform-browser": "^18.2.4",
-    "@angular/platform-browser-dynamic": "^18.2.4",
-    "@angular/router": "^18.2.4",
+    "@angular/animations": "^18.2.6",
+    "@angular/common": "^18.2.6",
+    "@angular/compiler": "^18.2.6",
+    "@angular/core": "^18.2.6",
+    "@angular/forms": "^18.2.6",
+    "@angular/platform-browser": "^18.2.6",
+    "@angular/platform-browser-dynamic": "^18.2.6",
+    "@angular/router": "^18.2.6",
     "@types/file-saver": "^2.0.7",
     "@types/qs": "^6.9.16",
     "axios": "^1.7.7",
@@ -42,14 +42,14 @@
     "qs": "^6.13.0",
     "rough-notation": "^0.5.1",
     "rxjs": "~7.8.1",
-    "tailwindcss": "^3.4.11",
+    "tailwindcss": "^3.4.13",
     "tslib": "^2.7.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.4",
-    "@angular/cli": "^18.2.4",
-    "@angular/compiler-cli": "^18.2.4",
+    "@angular-devkit/build-angular": "^18.2.6",
+    "@angular/cli": "^18.2.6",
+    "@angular/compiler-cli": "^18.2.6",
     "@types/jasmine": "~5.1.4",
     "@types/nprogress": "^0.2.3",
     "body-parser": "^1.20.3",

scripts/start.mjs

@@ -168,6 +168,21 @@ try {
   } else {
     components.push(runtime)
   }
+  //
+  idx = components.findIndex((item) => item.type === 6)
+  const html = {
+    type: 6,
+    id: -6,
+    html: 'hello world',
+  }
+  if (idx >= 0) {
+    components[idx] = {
+      ...html,
+      ...components[idx],
+    }
+  } else {
+    components.push(html)
+  }
   fs.writeFileSync(componentPath, JSON.stringify(components))
 }
 

src/app/app.module.ts

@@ -77,6 +77,8 @@ 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 { HTMLComponent } from '../components/html/index.component'
+import { HTMLDrawerComponent } from '../components/html/drawer/index.component'
 
 import LightComponent from '../view/light/index.component'
 import SuperComponent from '../view/super/index.component'
@@ -171,6 +173,8 @@ const icons: IconDefinition[] = [
     ImageDrawerComponent,
     CountdownComponent,
     CountdownDrawerComponent,
+    HTMLComponent,
+    HTMLDrawerComponent,
     OffWorkDrawerComponent,
     CalendarDrawerComponent,
     ComponentGroupComponent,

src/components/calendar/index.component.html

@@ -1,8 +1,8 @@
 <div class="calendar family citems">
-  <div class="ctop" [style.background]="component['topColor']">
+  <div class="ctop" [style.background]="data['topColor']">
     {{ date }}
   </div>
-  <div class="box" [style.background]="component['bgColor']">
+  <div class="box" [style.background]="data['bgColor']">
     <div class="cday">{{ day }}</div>
     <div class="cdate">
       <span class="mr-1.5">第{{ dayOfYear }}天</span>

src/components/calendar/index.component.ts

@@ -4,9 +4,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'
+import { IComponentProps } from 'src/types'
 
 @Component({
   selector: 'app-calendar',
@@ -16,7 +14,6 @@ import event from 'src/utils/mitt'
 export class CalendarComponent {
   @Input() data!: IComponentProps
 
-  component: Record<string, any> = {}
   date = ''
   day = 0
   week = ''
@@ -29,16 +26,4 @@ export class CalendarComponent {
     this.week = date.dayText
     this.dayOfYear = getDayOfYear()
   }
-
-  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
-    )
-    this.component = data || {}
-  }
 }

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

@@ -10,6 +10,11 @@
       <app-offwork *ngSwitchCase="ComponentType.OffWork" [data]="item" />
       <app-image *ngSwitchCase="ComponentType.Image" [data]="item" />
       <app-countdown *ngSwitchCase="ComponentType.Countdown" [data]="item" />
+      <app-html
+        *ngSwitchCase="ComponentType.HTML"
+        [data]="item"
+        [class.hidden]="!item['html']"
+      />
     </ng-container>
   </ng-container>
 

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

@@ -25,7 +25,10 @@ export class ComponentGroupComponent {
         (c) => c.type === item.type && c.id === item.id
       )
       if (has) {
-        c.push(has)
+        c.push({
+          ...item,
+          ...has,
+        })
       }
     })
     this.components = c

src/components/countdown/index.component.html

@@ -1,18 +1,16 @@
 <div class="holiday family citems">
-  <div class="top" [style.background]="component['topColor']">
-    {{ component['title'] }}
+  <div class="top" [style.background]="data['topColor']">
+    {{ data['title'] }}
   </div>
   <div
     class="box"
-    [style.backgroundImage]="
-      component['url'] && 'url(' + component['url'] + ')'
-    "
-    [style.backgroundColor]="component['bgColor']"
+    [style.backgroundImage]="data['url'] && 'url(' + data['url'] + ')'"
+    [style.backgroundColor]="data['bgColor']"
   >
-    <div class="days" [style.color]="component['dayColor']">
+    <div class="days" [style.color]="data['dayColor']">
       {{ component['dayStr'] }}
     </div>
-    <div class="date" [style.color]="component['dateColor']">
+    <div class="date" [style.color]="data['dateColor']">
       - {{ component['dateStr'] }} -
     </div>
   </div>

src/components/countdown/index.component.ts

@@ -3,8 +3,7 @@
 // See https://github.com/xjh22222228/nav
 
 import { Component, Input } from '@angular/core'
-import { components } from 'src/store'
-import { ComponentType, IComponentProps } from 'src/types'
+import { IComponentProps } from 'src/types'
 import dayjs from 'dayjs'
 import event from 'src/utils/mitt'
 
@@ -21,21 +20,20 @@ export class CountdownComponent {
 
   ngOnInit() {
     this.init()
-    event.on('COMPONENT_OK', this.init.bind(this))
+    event.on('COMPONENT_OK', () => {
+      setTimeout(() => {
+        this.init()
+      }, 100)
+    })
   }
 
   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'
-      )
+    const payload: any = {}
+    if (this.data['date']) {
+      payload.dateStr = dayjs(this.data['date']).format('YYYY.MM.DD')
+      payload.dayStr = dayjs(
+        dayjs(this.data['date']).format('YYYY-MM-DD')
+      ).diff(dayjs().format('YYYY-MM-DD'), 'day')
       payload.dayStr = payload.dayStr < 0 ? 0 : payload.dayStr
       payload.dayStr = payload.dayStr > 9999 ? 9999 : payload.dayStr
     }

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

@@ -0,0 +1,33 @@
+<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]="4">HTML</nz-form-label>
+      <nz-form-control [nzSpan]="20">
+        <textarea
+          formControlName="html"
+          nz-input
+          [nzAutosize]="{ minRows: 5, maxRows: 25 }"
+        >
+        </textarea>
+      </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>

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

@@ -0,0 +1,48 @@
+// 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
+// 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'
+
+@Component({
+  selector: 'html-drawer',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+})
+export class HTMLDrawerComponent {
+  @Output() ok = new EventEmitter<void>()
+
+  $t = $t
+  visible = false
+  validateForm!: FormGroup
+  index = 0
+
+  constructor(private fb: FormBuilder) {
+    this.validateForm = this.fb.group({
+      html: [''],
+    })
+  }
+
+  open(data: any, idx: number) {
+    this.index = idx
+    for (const k in data) {
+      this.validateForm.get(k)!?.setValue(data[k])
+    }
+    this.visible = true
+  }
+
+  handleClose() {
+    this.visible = false
+  }
+
+  handleSubmit() {
+    const values = this.validateForm.value
+    this.ok.emit({
+      ...values,
+      index: this.index,
+    })
+    this.handleClose()
+  }
+}

src/components/html/index.component.html

@@ -0,0 +1 @@
+<div class="html family citems" [innerHTML]="data['html'] | safeHtml"></div>

src/components/html/index.component.scss

@@ -0,0 +1,10 @@
+.html {
+  position: relative;
+  width: var(--componentHeight);
+  height: var(--componentHeight);
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+}

src/components/html/index.component.ts

@@ -0,0 +1,18 @@
+// 开源项目，未经作者同意，不得以抄袭/复制代码/修改源代码版权信息。
+// Copyright @ 2018-present xiejiahe. All rights reserved.
+// See https://github.com/xjh22222228/nav
+
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
+import { IComponentProps } from 'src/types'
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-html',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+})
+export class HTMLComponent {
+  @Input() data!: IComponentProps
+
+  constructor() {}
+}

src/components/image/index.component.html

@@ -1,6 +1,6 @@
 <div
   class="cimage family citems"
-  [style.backgroundImage]="component['url'] && 'url(' + component['url'] + ')'"
+  [style.backgroundImage]="data['url'] && 'url(' + data['url'] + ')'"
 >
-  <div class="text">{{ component['text'] }}</div>
+  <div class="text">{{ data['text'] }}</div>
 </div>

src/components/image/index.component.ts

@@ -2,31 +2,17 @@
 // 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 event from 'src/utils/mitt'
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
+import { IComponentProps } from 'src/types'
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'app-image',
   templateUrl: './index.component.html',
   styleUrls: ['./index.component.scss'],
 })
 export class ImageComponent {
   @Input() data!: IComponentProps
-  component: Record<string, any> = {}
 
   constructor() {}
-
-  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
-    )
-    this.component = data || {}
-  }
 }

src/components/off-work/index.component.html

@@ -1,6 +1,6 @@
 <div class="offwork family citems" [class.rest]="isRest">
   <div class="title">
-    {{ isRest ? component['restTitle'] : component['workTitle'] }}
+    {{ isRest ? data['restTitle'] : data['workTitle'] }}
   </div>
   <div class="coutdown" *ngIf="!isRest">{{ countdownStr }}</div>
   <img

src/components/off-work/index.component.scss

@@ -16,6 +16,7 @@
   &.rest {
     .title {
       font-size: 22px;
+      color: #666;
     }
   }
   .title {