From cd85a96ca818d7a87071f171e1262c4549720d23 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 22 Aug 2022 15:41:59 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-2136=20feat=EF=BC=9A=20=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/js/common.js        | 297 ++++++++++++++++++
 nezha-fronted/src/components/common/login.vue | 137 +++++++-
 nezha-fronted/test/unit/jest.conf.js          |   5 +-
 .../unit/specs/components/chart/chart.spec.js |  15 +
 4 files changed, 437 insertions(+), 17 deletions(-)
 create mode 100644 nezha-fronted/test/unit/specs/components/chart/chart.spec.js

diff --git a/nezha-fronted/src/components/common/js/common.js b/nezha-fronted/src/components/common/js/common.js
index 2fc6a0787..9705de778 100644
--- a/nezha-fronted/src/components/common/js/common.js
+++ b/nezha-fronted/src/components/common/js/common.js
@@ -120,3 +120,300 @@ export function lineChartMove (e) {
 export function getMousePoint () {
   return mousePoint
 }
+export const coordinatePoint = {
+  Libra: {
+    name: 'Libra',
+    offsetX: '6.5%',
+    offsetY: '15.6%',
+    point: [
+      { x: 10, y: 70 },
+      { x: 45, y: 55 },
+      { x: 70, y: 10 },
+      { x: 110, y: 50 },
+      { x: 100, y: 110 },
+      { x: 60, y: 130 },
+      { x: 58, y: 150 },
+      { x: 60, y: 130 },
+      { x: 100, y: 110 },
+      { x: 70, y: 10 }
+    ],
+    dot: [
+      [[10, 70], [45, 55]],
+      [[45, 55], [70, 10]],
+      [[100, 110], [70, 10]]
+    ]
+  },
+  Cancer: {
+    name: 'Cancer',
+    offsetX: '20%',
+    offsetY: '12.4%',
+    point: [
+      { x: 65, y: 130 },
+      { x: 60, y: 70 },
+      { x: 145, y: 100 },
+      { x: 60, y: 70 },
+      // { x: 45, y: 50 },
+      { x: 10, y: 10 }],
+    dot: [
+      [[60, 70], [145, 100]]
+    ]
+  },
+  Taurus: {
+    name: 'Taurus',
+    offsetX: '34.9%',
+    offsetY: '6.5%',
+    point: [
+      { x: 200, y: 240 },
+      // { x: 198, y: 225 },
+      { x: 140, y: 190, disabled: true },
+      { x: 110, y: 145 },
+      // { x: 95, y: 135 },
+      { x: 83, y: 130, disabled: true },
+      { x: 10, y: 55 },
+      { x: 83, y: 130, disabled: true },
+      // { x: 95, y: 135 },
+      { x: 110, y: 145 },
+      // { x: 115, y: 125 },
+      // { x: 105, y: 120 },
+      // { x: 105, y: 105 },
+      { x: 90, y: 70 },
+      { x: 50, y: 10 }],
+    dot: [
+      [[110, 145], [83, 130]],
+      [[83, 130], [10, 55]]
+    ]
+  },
+  Gemini: {
+    name: 'Gemini',
+    offsetX: '53%',
+    offsetY: '5.1%',
+    point: [
+      { x: 175, y: 180 },
+      { x: 185, y: 140, disabled: true },
+      { x: 65, y: 100 },
+      { x: 15, y: 80 },
+      { x: 10, y: 55 },
+      { x: 30, y: 10 },
+      // { x: 45, y: 10 , disabled: true},
+      { x: 70, y: 15 },
+      { x: 165, y: 55 },
+      { x: 205, y: 65 },
+      { x: 225, y: 60 },
+      { x: 205, y: 65 },
+      { x: 185, y: 140, disabled: true }],
+    dot: [
+      [[205, 65], [185, 140]]
+    ]
+  },
+  Gapricorn: {
+    name: 'Gapricorn',
+    offsetX: '73.4%',
+    offsetY: '12.5%',
+    point: [
+      { x: 10, y: 180 },
+      // { x: 15, y: 160 },
+      { x: 30, y: 140 },
+      { x: 50, y: 110 },
+      { x: 80, y: 10 },
+      { x: 130, y: 110 },
+      { x: 135, y: 130 },
+      { x: 110, y: 140 },
+      { x: 70, y: 165 },
+      { x: 35, y: 170 },
+      { x: 10, y: 180 }]
+  },
+  Leo: {
+    name: 'Leo',
+    offsetX: '86.6%',
+    offsetY: '31.5%',
+    point: [
+      { x: 80, y: 10 },
+      { x: 60, y: 15 },
+      { x: 55, y: 60 },
+      { x: 70, y: 80 },
+      { x: 100, y: 75 },
+      { x: 130, y: 95 },
+      { x: 40, y: 195 },
+      { x: 10, y: 245 },
+      { x: 10, y: 160 },
+      { x: 70, y: 80 }],
+    dot: [
+      [[80, 10], [60, 15]],
+      [[60, 15], [55, 60]],
+      [[55, 60], [70, 80]]
+    ],
+    dasharray: '4 10'
+  },
+  Aries: {
+    name: 'Aries',
+    offsetX: '89%',
+    offsetY: '57.8%',
+    point: [
+      { x: 10, y: 10 },
+      { x: 130, y: 40 },
+      { x: 180, y: 70 },
+      { x: 190, y: 90 }]
+  },
+  Pisces: {
+    name: 'Pisces',
+    offsetX: '79.6%',
+    offsetY: '71.4%',
+    point: [
+      { x: 10, y: 275 },
+      { x: 30, y: 295 },
+      { x: 50, y: 270 },
+      { x: 110, y: 270 },
+      { x: 150, y: 270 },
+      { x: 200, y: 285 },
+      { x: 160, y: 235 },
+      { x: 130, y: 205 },
+      { x: 115, y: 175 },
+      { x: 90, y: 105 },
+      { x: 80, y: 75 },
+      { x: 65, y: 55 },
+      { x: 70, y: 25 },
+      { x: 90, y: 10 },
+      { x: 120, y: 30 },
+      { x: 125, y: 55 },
+      { x: 110, y: 80 },
+      { x: 80, y: 75 }],
+    dot: [
+      [[10, 275], [30, 295]],
+      [[30, 295], [50, 270]],
+      [[50, 270], [110, 270]],
+      [[110, 270], [150, 270]],
+      [[150, 270], [200, 285]]
+    ]
+  },
+  Sagittarius: {
+    name: 'Sagittarius',
+    offsetX: '61.8%',
+    offsetY: '82.9%',
+    point: [
+      { x: 90, y: 185 },
+      { x: 60, y: 205 },
+      { x: 95, y: 215 },
+      { x: 60, y: 205 },
+      { x: 35, y: 165 },
+      { x: 10, y: 115 },
+      { x: 15, y: 100, disabled: true },
+      { x: 45, y: 65 },
+      { x: 95, y: 85 },
+      { x: 120, y: 70 },
+      { x: 100, y: 35 },
+      { x: 85, y: 30, disabled: true },
+      { x: 55, y: 10 },
+      { x: 85, y: 30, disabled: true },
+      { x: 100, y: 35 },
+      { x: 115, y: 20 },
+      { x: 100, y: 35 },
+      { x: 120, y: 70 },
+      { x: 135, y: 75 },
+      { x: 135, y: 75 },
+      { x: 170, y: 65 },
+      { x: 185, y: 15 },
+      { x: 170, y: 65 },
+      { x: 180, y: 95 },
+      { x: 210, y: 105 },
+      { x: 215, y: 95, disabled: true },
+      { x: 255, y: 65 },
+      { x: 215, y: 95, disabled: true },
+      { x: 210, y: 105 },
+      { x: 180, y: 95 },
+      { x: 180, y: 125 },
+      { x: 195, y: 145 },
+      { x: 180, y: 125 },
+      { x: 180, y: 95 },
+      { x: 170, y: 65 },
+      { x: 135, y: 75 },
+      { x: 110, y: 105 },
+      { x: 95, y: 85 }],
+    dot: [
+      [[110, 105], [135, 75]],
+      [[135, 75], [170, 65]],
+      [[170, 65], [185, 15]],
+      [[170, 65], [180, 95]],
+      [[180, 95], [210, 105]],
+      [[210, 105], [215, 95]],
+      [[255, 65], [215, 95]]
+    ]
+  },
+  Virgo: {
+    name: 'Virgo',
+    offsetX: '37.1%',
+    offsetY: '81.2%',
+    point: [
+      { x: 110, y: 10 },
+      { x: 115, y: 50 },
+      { x: 105, y: 80 },
+      { x: 70, y: 90 },
+      { x: 20, y: 80 },
+      { x: 70, y: 90 },
+      { x: 75, y: 150 },
+      { x: 40, y: 180 },
+      { x: 10, y: 240 },
+      { x: 40, y: 180 },
+      { x: 75, y: 150 },
+      { x: 130, y: 170 },
+      { x: 110, y: 220 },
+      { x: 90, y: 215 },
+      { x: 75, y: 265 },
+      { x: 90, y: 215 },
+      { x: 110, y: 220 },
+      { x: 130, y: 170 },
+      { x: 110, y: 135 },
+      { x: 105, y: 80 }],
+    dot: [
+      [[130, 170], [110, 220]],
+      [[110, 220], [90, 215]],
+      [[90, 215], [75, 265]]
+    ]
+  },
+  Scorpio: {
+    name: 'Scorpio',
+    offsetX: '17.2%',
+    offsetY: '77.5%',
+    point: [
+      { x: 40, y: 130 },
+      { x: 20, y: 150 , disabled: true},
+      { x: 10, y: 160 },
+      { x: 30, y: 180 },
+      { x: 70, y: 185 },
+      { x: 100, y: 175 },
+      { x: 110, y: 150 },
+      { x: 120, y: 120 },
+      { x: 160, y: 70 },
+      { x: 170, y: 60 , disabled: true},
+      { x: 190, y: 50 },
+      { x: 230, y: 30 },
+      { x: 220, y: 10 },
+      { x: 230, y: 30 },
+      { x: 235, y: 50 },
+      { x: 235, y: 70 }]
+  },
+  Aquarius: {
+    name: 'Aquarius',
+    offsetX: '12%',
+    offsetY: '47.5%',
+    point: [
+      { x: 160, y: 260 },
+      { x: 120, y: 230 , disabled: true},
+      { x: 110, y: 220 },
+      { x: 70, y: 225 },
+      { x: 65, y: 260 },
+      { x: 10, y: 180 },
+      { x: 15, y: 165 },
+      { x: 30, y: 150 },
+      { x: 25, y: 120 },
+      { x: 80, y: 140 },
+      { x: 130, y: 130 },
+      { x: 80, y: 140 },
+      { x: 25, y: 120 },
+      { x: 90, y: 70 },
+      { x: 160, y: 10 }],
+    dot: [
+      [[25, 120], [80, 140]],
+      [[80, 140], [130, 130]]
+    ]
+  }
+}
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 76eea54a9..ad16edc34 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -2,7 +2,30 @@
   <div class="login"  id="login-bgimg">
     <div class="model"></div>
     <div class="stars-wrapper" id="stars-wrapper" v-if="!this.bgImg">
-      <img src="../../assets/img/starCloud1.svg">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 358.52 351.84" class="star-cloud star-cloud1">
+        <g id="Layer_2" data-name="Layer 2">
+          <g id="Layer_1-2" data-name="Layer 1">
+            <path class="cls-1" d="M79.83,335.09c33.16-34,60.94-32.19,107.59-41.09,6.37-1.22,13.19-2.6,17.72-7.24,8.86-9.07,4.05-24,5.16-36.64,1.86-21.09,20.94-36.07,39.18-46.81a395,395,0,0,1,62.72-29.84c6.13-2.28,12.5-4.5,17.37-8.87,11.86-10.6,10.78-29.42,6.5-44.74s-10.84-31.23-6.74-46.6C332.4,61.78,341,52.73,348,43.13s12.93-21.62,9.59-33c-1.19-4.06-3.81-8-7.79-9.44-2.9-1-6.1-.66-9.11,0-24.6,5.3-42.89,25.57-57.87,45.78s-29.31,42.29-51.34,54.44c-19.76,10.9-44,12.73-62.16,26.16-20.21,15-28.35,40.75-38.3,63.84s-25.94,49.95-51.07,50.85c-50.74,1.81-76.38,9-79.67,47.84S26.45,378.46,79.83,335.09Z"/>
+            <path class="cls-2" d="M142,210.5c9.94-19.16,22.64-38.16,41.83-48,9.31-4.79,19.68-7.18,29.08-11.76a68.68,68.68,0,0,0,23.51-18.81c5.75-7.19,10-15.46,15.26-23s11.95-14.61,20.62-17.74,19.6-1.3,25,6.17c3,4.19,4,9.59,3.67,14.75-.94,16.29-13.16,29.81-26.63,39s-28.83,15.62-41.46,26c-18.83,15.42-29.9,38.07-43.9,58s-34,38.73-58.31,39.33c-14.23.35-28.68-11.68-17.93-25.72,4-5.2,10.56-8.43,14.8-13.65C133.49,227.63,137.62,218.89,142,210.5Z"/>
+          </g>
+        </g>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.14 220.95" class="star-cloud star-cloud2">
+        <g id="Layer_2" data-name="Layer 2">
+          <g id="Layer_1-2" data-name="Layer 1">
+            <path class="cls-1" d="M127,56.49c21-.45,41.34-6.92,62-10.69a244,244,0,0,1,46.26-3.93c9.68.11,19.72.89,28.19,5.57,15.33,8.46,22.15,27.6,37.13,36.65C312.92,91.51,328.84,91,341,98.69c15.33,9.78,20,32.94,9.65,47.89-11.09,16-34.24,20.51-44.5,37.06-4.38,7.06-6.08,15.88-12,21.66-5,4.85-12.08,6.68-18.85,8.27-31.3,7.32-65.71,12.8-94.37-1.76-20.14-10.24-34.79-29.25-55-39.35-20.06-10-44.27-10.6-63-22.93A58.63,58.63,0,0,1,38.42,115c-2.16-8.73-2.32-18-6.13-26.19-3.16-6.74-8.57-12.11-13.5-17.68C10.46,61.75,3,51,.68,38.61S2,12.14,12.32,4.9c9.51-6.7,22.89-6.17,33.11-.61,14,7.64,18.81,22.58,29.49,33.35C88.55,51.38,108.07,56.91,127,56.49Z"/>
+            <path class="cls-2" d="M246.9,98c9,5.42,16.79,13.2,26.69,16.84,3.4,1.26,7.05,2,10.09,4,7.16,4.67,8.7,14.67,7.19,23.08a47.29,47.29,0,0,1-25.44,33.6c-9.26,4.49-19.79,5.8-30.08,5.58-9.28-.19-18.63-1.6-27.18-5.21-11.8-5-21.44-13.85-31.89-21.25-21.47-15.2-46.71-24.44-68.14-39.7-16.53-11.76-30.53-26.8-43.8-42-3.08-3.53-7.33-6.11-4.27-10.55,2.41-3.5,9.28-2.77,12.65-1.93,8.72,2.18,16.37,9.87,24,14.37,24.95,14.65,56.39,12,84.36,12C203.36,86.76,227.13,86.23,246.9,98Z"/>
+          </g>
+        </g>
+      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 351.44 371.77" class="star-cloud star-cloud3">
+        <g id="Layer_2" data-name="Layer 2">
+          <g id="Layer_1-2" data-name="Layer 1">
+            <path class="cls-1" d="M12.39,255.31c1.09,6.23,4,12.1,4.39,18.41,1,15.91-13.4,28.73-16.32,44.4C-3,336.53,13.35,356,32.08,355.76c10.54-.12,21.57-5.35,31.17-1,6.5,2.94,10.54,9.6,16.59,13.38,7.77,4.85,17.81,4.27,26.6,1.7s17-6.92,25.85-9.27c14.76-3.93,30.43-2.13,45.51-4.49s31.19-11,34.35-25.93c2.37-11.23-3.25-22.9-1.38-34.23,2.8-16.91,20.57-26.62,36.8-32.16s34.52-10.55,43.64-25.06c17.51-27.85-12.18-65.72-.32-96.41,8.17-21.11,34.4-33.52,36.49-56.05.73-7.9-1.77-16.08.55-23.67,2.38-7.8,9.27-13.18,14.94-19.06s10.59-14.2,7.74-21.85c-1.3-3.48-4-6.2-6.68-8.8C336,5.1,325.12-3.2,315,1.25c-5,2.2-8.31,7.1-10.86,12-5.61,10.71-9.07,22.44-14.79,33.09S274.89,66.88,263.21,70c-9.67,2.55-19.84.08-29.8-.84s-21.3.33-27.63,8.07c-3,3.61-4.41,8.18-5.85,12.61q-5.94,18.42-12.81,36.53c-7.3,19.26-15.91,39-31.71,52.19-10.41,8.69-23.21,13.91-35.78,19-25.14,10.17-48.76,17.68-75.78,19.9C24.73,219,8.69,234.2,12.39,255.31Z"/>
+            <path class="cls-2" d="M45.15,264.26c-5.9,9.7-5.35,23.85,3.47,31,5.75,4.66,13.55,5.55,20.71,7.42,20.43,5.32,39,19.81,60,18.47,2.71-.18,5.54-.68,7.67-2.37,3-2.39,3.89-6.51,5.11-10.16A40.51,40.51,0,0,1,163.4,285c6.11-2.81,13-4.09,18.54-7.84,9.57-6.44,13.42-19.57,10.45-30.72s-11.88-20.15-22.36-25c-21-9.72-40.63,13-61.37,17.23C87,243,58.11,242.92,45.15,264.26Z"/>
+          </g>
+        </g>
+      </svg>
     </div>
     <div class="login-main">
       <div class="logo"><img src="../../assets/img/logo-big.png"></div>
@@ -120,7 +143,7 @@ import { mapActions } from 'vuex'
 import QRCode from 'qrcodejs2'
 import bus from '@/libs/bus.js'
 import { SVG } from '@svgdotjs/svg.js'
-import svgCloud1 from '@/assets/img/starCloud1.svg'
+import { coordinatePoint } from '@/components/common/js/common'
 import { get } from '@/http'
 export default {
   name: 'login',
@@ -153,6 +176,10 @@ export default {
       fileContent: '',
       recoveryCode: [],
       userInfo: {},
+      zoom: 0.75,
+      circleStar: [],
+      starTimer: '',
+      starTimerIndex: 0,
       bgImg: '' // 背景图
     }
   },
@@ -378,21 +405,62 @@ export default {
       })
     },
     initStar () {
+      this.circleStar = [[], [], [], []]
       document.getElementById('login-bgimg').style['background-image'] = 'url()'
       const box = document.getElementById('stars-wrapper')
       for (let i = 0; i < 3; i++) {
         const svg = SVG().addTo(box).size('100%', '100%')
-        svg.attr('class', 'stars' + i)
+        svg.attr('class', 'stars' + (i + 1))
         svg.attr('width', '100%')
         svg.attr('height', '100%')
         svg.attr('preserveAspectRatio', 'none')
-        for (let j = 0; j < 100; j++) {
-          const circle = svg.circle(r(0.5, 3))
+        for (let j = 0; j < 50; j++) {
+          const circle = svg.circle(r(0.5, 2))
           circle.attr('class', 'star')
           circle.attr('cx', r(0, 100) + '%')
           circle.attr('cy', r(0, 100) + '%')
+          this.circleStar[i].push(circle)
         }
       }
+      Object.keys(coordinatePoint).forEach((key, index) => {
+        const group = SVG().addTo(box).attr('id', key).size('255', '305')
+        group.attr('width', '265')
+        group.attr('height', '305')
+        group.attr('style', `left: ${coordinatePoint[key].offsetX};top:${coordinatePoint[key].offsetY};transform:scale(${this.zoom}) translate(0, -50px)`)
+        group.attr('class', 'constellation')
+        const polyline = group.polyline(coordinatePoint[key].point.map(item => [item.x, item.y])) // 先将所有点 用直线链接
+        polyline.fill('none')
+        polyline.stroke({ color: '#868096', width: 4, linecap: 'round', linejoin: 'round' })
+        if (coordinatePoint[key].dot && coordinatePoint[key].dot.length) { // 再用虚线 覆盖原本直线
+          coordinatePoint[key].dot.forEach(point => {
+            group.line(point).fill('none').stroke({ color: '#07011D', width: 4, linecap: 'round', linejoin: 'round', dasharray: coordinatePoint[key].dasharray || '10 15' })
+          })
+          // const polyline1 = group.polyline([[165, 210], [250, 240]])
+          // polyline1.fill('none')
+          // polyline1.stroke({ color: '#07011D', width: 3, linecap: 'round', linejoin: 'round', dasharray: '8 8' })
+        }
+        coordinatePoint[key].point.forEach(item => { // 最后添加所有点
+          if (item.disabled) return
+          group.circle(14)
+            .fill('#868096')
+            .attr('cx', item.x)
+            .attr('cy', item.y)
+        })
+      })
+      this.starTimer = setInterval(() => {
+        this.starTimerIndex++
+        let index = 0
+        if (this.starTimerIndex === 1) return
+        if (this.starTimerIndex === 2) index = 2
+        if (this.starTimerIndex === 3) index = 1
+        if (this.starTimerIndex === 0) index = 0
+        this.starTimerIndex = this.starTimerIndex === 3 ? -1 : this.starTimerIndex
+        this.circleStar[index] && this.circleStar[index].forEach(circle => {
+          circle.radius(r(0.5, 2))
+          circle.attr('cx', r(0, 100) + '%')
+          circle.attr('cy', r(0, 100) + '%')
+        })
+      }, 1000)
       function r (m, n) {
         return (Math.random() * (n - m) + m).toFixed(2)
       }
@@ -414,6 +482,10 @@ export default {
     } else {
       this.initStar()
     }
+  },
+  beforeDestroy () {
+    clearInterval(this.starTimer)
+    this.starTimer = null
   }
 }
 </script>
@@ -433,6 +505,38 @@ export default {
   .license-upload .el-upload-list{
     display: none;
   }
+  .cls-1{
+    fill: #150F29;
+  }
+  .cls-2{
+    fill: #201B33;
+  }
+  .star-cloud{
+    width: 70%;
+    height: 70%;
+    position: absolute;
+    opacity: 0.9;
+  }
+  .star-cloud1{
+    right: 0;
+    top: 0;
+    transform: translate(40%, -50%);
+  }
+  .star-cloud2{
+    left: 5%;
+    bottom: 0;
+    transform: translate(-60%, -10%);
+    width: 60%;
+    height: 60%;
+  }
+  .star-cloud3{
+    right: 0;
+    bottom: 0;
+    transform: translate(50%, 15%);
+  }
+  .constellation{
+    position: absolute;
+  }
   :root {
     --twinkle-duration: 4s;
   }
@@ -441,14 +545,15 @@ export default {
     pointer-events: none;
     width: 100vw;
     height: 100vh;
-    background: -webkit-gradient(linear, left top, left bottom, from(#16161d), color-stop(#080430), to(#0D0635));
-    background: linear-gradient(#16161d, #080430, #0D0635);
+    /*background: -webkit-gradient(linear, left top, left bottom, from(#16161d), to(#07011D));*/
+    background: #07011D;
     overflow: hidden;
     z-index: 1;
   }
   .stars0,
   .stars1,
-  .stars2 {
+  .stars2,
+  .stars3{
     position: absolute;
     top: 0;
     left: 0;
@@ -457,17 +562,17 @@ export default {
     -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;
     animation: twinkle var(--twinkle-duration) ease-in-out infinite;
   }
-  .stars0 {
-    -webkit-animation-delay: calc(var(--twinkle-duration) * -0.22);
-    animation-delay: calc(var(--twinkle-duration) * -0.22);
-  }
   .stars1 {
-    -webkit-animation-delay: calc(var(--twinkle-duration) * -0.44);
-    animation-delay: calc(var(--twinkle-duration) * -0.44);
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
   }
   .stars2 {
-    -webkit-animation-delay: calc(var(--twinkle-duration) * -0.66);
-    animation-delay: calc(var(--twinkle-duration) * -0.66);
+    -webkit-animation-delay: -2s;
+    animation-delay: -2s;
+  }
+  .stars3 {
+    -webkit-animation-delay: -3s;
+    animation-delay: -3s;
   }
   @-webkit-keyframes twinkle {
     25% {
diff --git a/nezha-fronted/test/unit/jest.conf.js b/nezha-fronted/test/unit/jest.conf.js
index 3c3d0c999..c6a9eee23 100644
--- a/nezha-fronted/test/unit/jest.conf.js
+++ b/nezha-fronted/test/unit/jest.conf.js
@@ -30,6 +30,7 @@ module.exports = {
     '@interactjs': '<rootDir>/test/unit/__mocks__/fileMock.js',
     'pl-table': '<rootDir>/test/unit/__mocks__/fileMock.js',
     '/htmlToPdf': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    'maplibre-gl': '<rootDir>/test/unit/__mocks__/fileMock.js',
     '\/*\/http': '<rootDir>/test/unit/__mocks__/axios.js',
     // '\/*\/permission': '<rootDir>/test/unit/__mocks__/fileMock.js',
     '/i18n': '<rootDir>/test/unit/__mocks__/i18nMock.js',
@@ -41,7 +42,8 @@ module.exports = {
   testMatch: [ // 匹配测试用例的文件
     '<rootDir>/test/unit/specs/*.spec.js',
     '<rootDir>/test/unit/specs/lib/*.spec.js',
-    '<rootDir>/test/unit/specs/components/*.spec.js'
+    '<rootDir>/test/unit/specs/components/*.spec.js',
+    '<rootDir>/test/unit/specs/components/chart/*.spec.js'
   ],
   moduleDirectories: [
     'node_modules'
@@ -57,6 +59,7 @@ module.exports = {
     'src/components/common/js/example.js',
     'src/libs/bus.js',
     'src/components/common/mixin/*.js',
+    'src/components/chart/chart.vue',
     // 'src/components/common/js/tools.js',
     // '!src/*.(js)',
     '!src/http.js',
diff --git a/nezha-fronted/test/unit/specs/components/chart/chart.spec.js b/nezha-fronted/test/unit/specs/components/chart/chart.spec.js
new file mode 100644
index 000000000..c977a08c4
--- /dev/null
+++ b/nezha-fronted/test/unit/specs/components/chart/chart.spec.js
@@ -0,0 +1,15 @@
+import { shallowMount } from '@vue/test-utils'
+import chart from '@/components/chart/chart.vue'
+
+describe('Counter.vue', () => {
+  it('increments count when button is clicked', () => {
+    const wrapper = shallowMount(chart, {
+      propsData: {
+        chartInfo: {
+          param: {}
+        }
+      }
+    })
+    expect(chart.methods.add(1, 2)).toBe(3)
+  })
+})