feat: component support light

2024-09-25 18:16:43 +08:00
parent 5df9473d6e
commit afb0979c2d
16 changed files with 95 additions and 31 deletions
@@ -1,2 +1,4 @@
 *.css linguist-language=TypeScript
-*.scss linguist-language=TypeScript
+*.scss linguist-language=TypeScript
+*.js linguist-language=TypeScript
+*.mjs linguist-language=TypeScript
@@ -88,21 +88,6 @@ try {
    components.push(calendar)
  }
  //
-  idx = components.findIndex((item) => item.type === 3)
-  const runtime = {
-    type: 3,
-    id: -3,
-    title: '已稳定运行',
-  }
-  if (idx >= 0) {
-    components[idx] = {
-      ...runtime,
-      ...components[idx],
-    }
-  } else {
-    components.push(runtime)
-  }
-  //
  idx = components.findIndex((item) => item.type === 2)
  const offWork = {
    type: 2,
@@ -158,6 +143,21 @@ try {
  } else {
    components.push(countdown)
  }
+  //
+  idx = components.findIndex((item) => item.type === 3)
+  const runtime = {
+    type: 3,
+    id: -3,
+    title: '已稳定运行',
+  }
+  if (idx >= 0) {
+    components[idx] = {
+      ...runtime,
+      ...components[idx],
+    }
+  } else {
+    components.push(runtime)
+  }
  fs.writeFileSync(componentPath, JSON.stringify(components))
 }

@@ -1,4 +1,4 @@
-<div class="calendar family">
+<div class="calendar family citems">
  <div class="ctop" [style.background]="component['topColor']">
    {{ date }}
  </div>
@@ -24,7 +24,7 @@
  }
  .cday {
    font-weight: bold;
-    font-size: 38px;
+    font-size: 40px;
    line-height: 1;
    padding: 24px 0 5px 0;
  }
@@ -1,6 +1,7 @@
 <div
  class="component-group dark-scrollbar justify-center md:justify-start"
  *ngIf="components.length > 0"
+  [class.directionCol]="direction === 'column'"
 >
  <ng-container *ngFor="let item of components; trackBy: trackByItem">
    <ng-container [ngSwitch]="item.type">
@@ -1,4 +1,19 @@
+@keyframes zoomInDown {
+  from {
+    opacity: 0;
+    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+  }
+}
+
 .component-group {
+  position: relative;
  padding: 10px;
  display: flex;
  overflow: hidden;
@@ -6,4 +21,23 @@
  user-select: none;
  column-gap: 15px;
  justify-content: flex-start;
+  &.directionCol {
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 15px;
+    overflow-x: hidden;
+  }
+  ::ng-deep {
+    > .ng-star-inserted {
+      max-width: 100%;
+      animation-duration: 0.5s;
+      animation-fill-mode: both;
+      animation-name: zoomInDown;
+    }
+    @for $i from 2 through 20 {
+      > .ng-star-inserted:nth-child(#{$i}) {
+        animation-delay: $i * 0.05s;
+      }
+    }
+  }
 }
@@ -2,7 +2,7 @@
 // Copyright @ 2018-present xiejiahe. All rights reserved.
 // See https://github.com/xjh22222228/nav

-import { Component } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { settings, components } from 'src/store'
 import { ComponentType, IComponentProps } from 'src/types'

@@ -12,6 +12,8 @@ import { ComponentType, IComponentProps } from 'src/types'
  styleUrls: ['./index.component.scss'],
 })
 export class ComponentGroupComponent {
+  @Input() direction: string = ''
+
  ComponentType = ComponentType
  components: IComponentProps[] = []

@@ -1,4 +1,4 @@
-<div class="holiday family">
+<div class="holiday family citems">
  <div class="top" [style.background]="component['topColor']">
    {{ component['title'] }}
  </div>
@@ -1,5 +1,5 @@
 <div
-  class="cimage family"
+  class="cimage family citems"
  [style.backgroundImage]="component['url'] && 'url(' + component['url'] + ')'"
 >
  <div class="text">{{ component['text'] }}</div>
@@ -1,4 +1,4 @@
-<div class="offwork family" [class.rest]="isRest">
+<div class="offwork family citems" [class.rest]="isRest">
  <div class="title">
    {{ isRest ? component['restTitle'] : component['workTitle'] }}
  </div>
@@ -1,8 +1,8 @@
-<div class="runtime family">
+<div class="runtime family citems">
  <div class="title">{{ component['title'] }}</div>
  <div class="days">
-    <span>{{ runDays }}</span>
-    <span class="unit">天</span>
+    <span class="day">{{ runDays }}</span>
+    <span class="unit">{{ unit }}</span>
  </div>
  <img src="assets/img/component/runtime.svg" class="img" />
 </div>
@@ -1,7 +1,7 @@
 .runtime {
  pointer-events: none;
  position: relative;
-  width: 300px;
+  width: 230px;
  height: var(--componentHeight);
  max-width: 100%;
  max-height: 100%;
@@ -30,8 +30,14 @@
    line-height: 1;
    color: #d67272;
  }
+  .day {
+    vertical-align: text-bottom;
+  }
  .unit {
    font-size: 15px;
+    margin-left: 2px;
+    margin-bottom: 2px;
+    font-weight: 500;
  }
  .img {
    position: absolute;
@@ -17,11 +17,19 @@ export class RuntimeComponent {

  component: Record<string, any> = {}
  runDays = 0
+  unit = ''

  constructor() {
    let now = Date.now() - settings.runtime
    now = now < 0 ? 0 : now
-    this.runDays = Math.floor(now / (1000 * 60 * 60 * 24))
+    const diffYear = Math.floor(now / (1000 * 60 * 60 * 24 * 365))
+    if (diffYear > 0) {
+      this.runDays = diffYear
+      this.unit = '年'
+    } else {
+      this.runDays = Math.floor(now / (1000 * 60 * 60 * 24))
+      this.unit = '天'
+    }
  }

  ngOnInit() {
@@ -14,7 +14,8 @@
  font-display: swap;
 }
 .family {
-  font-family: text;
+  font-family: text, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }

 :root {
@@ -3,6 +3,13 @@
  [class.noimg]="commonService.settings.lightImages.length <= 0"
 >
  <div class="light-box">
+    <div
+      class="component-box hidden-scrollbar hidden 2xl:block"
+      *ngIf="commonService.settings.components.length"
+    >
+      <component-group direction="column"></component-group>
+    </div>
+
    <main class="homepage dark-border-color dark-bg">
      <nav
        *ngIf="commonService.websiteList.length"
@@ -135,9 +142,7 @@
    </div>
  </div>

-  <div>
-    <app-footer [content]="commonService.settings.lightFooterHTML" />
-  </div>
+  <app-footer [content]="commonService.settings.lightFooterHTML" />
  <app-fixbar
    (onCollapse)="commonService.onCollapseAll()"
    [collapsed]="commonService.collapsed"
@@ -43,6 +43,11 @@
    column-gap: 20px;
    overflow: hidden;
  }
+  .component-box {
+    width: 250px;
+    overflow: hidden;
+    overflow-y: auto;
+  }
  .right {
    width: var(--rightWidth, 230px);
    min-width: var(--rightWidth, 230px);