Merge pull request #116 in YR/star-web-components from improve-clock to master

* commit '3eefbd7cbbd6d2583bb1711c01081becdfd0f7c0':
  TASK:110915 实现时钟深浅模式切换,优化时钟旋转角度保留小数点一位,减少时针帧率刷新频率

src/components/clock/clock-style.ts

@@ -1,5 +1,56 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
+   @media (prefers-color-scheme: light) {
+    :host{
+       /* 商务/组件浅/ 表盘渐变-毛玻璃 */
+       --back-clock-border: radial-gradient(
+        rgba(230, 225, 225, 0.85),
+        rgba(232, 246, 255, 1),
+        rgba(204, 211, 219, 0.85)
+      );
+      --back-clock-case: linear-gradient(
+        145.7deg,
+        rgba(179, 193, 242, 0.8) 16.24%,
+        rgba(122, 130, 161, 0.8) 94.91%
+      );
+     --back-clock-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
+     --back-clock-backdrop-filter:blur(20px);
+    }
+    .star-clock-hour-hand {
+      background: url('./src/components/clock/svg/light_hour.svg') no-repeat;
+    }
+    .star-clock-minute-hand {
+      background: url('./src/components/clock/svg/light_minute.svg') no-repeat;
+    }
+    .star-clock-second-hand {
+      background: url('./src/components/clock/svg/second.svg') no-repeat;
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    :host{
+      /* 商务/组件深/ 表盘渐变-毛玻璃 */
+      --back-clock-border: linear-gradient(
+        rgba(217, 195, 147, 1),
+        rgba(217, 201, 165, 0.45)
+      );
+      --back-clock-case: radial-gradient(
+        46.11% 46.11% at 29.45% 23.09%,
+        rgba(64, 70, 89, 0.8) 0%,
+        rgba(36, 40, 56, 0.8) 100%
+      );
+      --back-clock-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
+      --back-clock-backdrop-filter:blur(20.3871px);
+    }
+    .star-clock-hour-hand {
+      background: url('./src/components/clock/svg/dark_hour.svg') no-repeat;
+    }
+    .star-clock-minute-hand {
+      background: url('./src/components/clock/svg/dark_minute.svg') no-repeat;
+    }
+    .star-clock-second-hand {
+      background: url('./src/components/clock/svg/second.svg') no-repeat;
+    }
+  }
   * {
     margin: 0;
     padding: 0;
@@ -24,10 +75,7 @@ export const sharedStyles: CSSResult = css`
     align-items: center;
     border-radius: 50%;
     flex-direction: column;
-    background: linear-gradient(
-      rgba(217, 195, 147, 1),
-      rgba(217, 201, 165, 0.45)
-    );
+    background: var(--back-clock-border);
   }
   .star-clock-case {
     position: relative;
@@ -38,13 +86,9 @@ export const sharedStyles: CSSResult = css`
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
-    backdrop-filter: blur(20.3871px);
-    background: radial-gradient(
-      46.11% 46.11% at 29.45% 23.09%,
-      rgba(64, 70, 89, 0.8) 0%,
-      rgba(36, 40, 56, 0.8) 100%
-    );
+    box-shadow: var(--back-clock-box-shadow);
+    backdrop-filter: var(--back-clock-backdrop-filter);
+    background: var(--back-clock-case);
   }
   .star-clock-shaft {
     position: absolute;
@@ -87,7 +131,8 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     bottom: 50%;
     left: 50%;
-    height: 25%;
+    width: 12px;
+    height: 90px;
     transform-origin: 0 100%;
     display: inline-block;
     transform: rotate(var(--rotateHour)) translate(-50%, 0);
@@ -96,7 +141,8 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     bottom: 50%;
     left: 50%;
-    height: 35%;
+    width: 12px;
+    height: 132px;
     transform-origin: 0 100%;
     display: inline-block;
     transform: rotate(var(--rotateMinute)) translate(-50%, 0);
@@ -106,39 +152,14 @@ export const sharedStyles: CSSResult = css`
     bottom: calc(50% - 17px);
     left: 50%;
     display: inline-block;
-    height: 43%;
+    width: 4px;
+    height: 160px;
     transform-origin: 0 calc(100% - 17px);
     transform: rotate(var(--rotateSecond)) translate(-50%, 0);
   }
-  /*有表盘浅色模式*/
-  .star-clock-main.light {
-    background: radial-gradient(
-      rgba(230, 225, 225, 0.85),
-      rgba(232, 246, 255, 1),
-      rgba(204, 211, 219, 0.85)
-    );
-  }
-  .light .star-clock-case {
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
-    backdrop-filter: blur(20px);
-    background: linear-gradient(
-      145.7deg,
-      rgba(179, 193, 242, 0.8) 16.24%,
-      rgba(122, 130, 161, 0.8) 94.91%
-    );
-  }
-  .light .star-clock-case .star-clock-point {
-    background: linear-gradient(
-      90deg,
-      rgba(245, 245, 245, 0.95) 0%,
-      rgba(245, 245, 245, 0.01) 100%
-    );
-  }
   /*无表盘深色模式*/
   .star-clock-case-transparent {
     display: inline-block;
-    /* width: var(--autoHeight);
-    height: var(--autoHeight); */
     width: var(--autoWidth);
     min-width: var(--autoWidth);
     height: var(--autoWidth);
@@ -210,7 +231,4 @@ export const sharedStyles: CSSResult = css`
   .star-clock-case-transparent.light .star-clock-minute-hand-transparent {
     background: #ffffff;
   }
-  .star-clock-case-transparent.light .star-clock-second-hand-transparent {
-    background: #f43737;
-  }
 `

src/components/clock/clock.ts

@@ -1,11 +1,6 @@
 import {html, LitElement, CSSResultArray, nothing} from 'lit'
 import {customElement, property, query, state} from 'lit/decorators.js'
 import {sharedStyles} from './clock-style'
-import darkHour from './svg/dark_hour.svg'
-import darkMinute from './svg/dark_minute.svg'
-import lightHour from './svg/light_hour.svg'
-import lightMinute from './svg/light_minute.svg'
-import second from './svg/second.svg'
 
 export enum ClockType {
   Transparent = 'transparent',
@@ -17,7 +12,7 @@ export class StarClock extends LitElement {
     return [sharedStyles]
   }
   @property({type: String}) type = '' //时钟样式类型
-  @property({type: String}) mode = 'dark' //支持深色模式和浅色模式,默认背景是深色模式
+  @property({type: String}) mode = '' //支持深色模式和浅色模式,默认背景是深色模式
   @state() rotateHour = 0
   @state() rotateMinute = 0
   @state() rotateSecond = 0
@@ -57,7 +52,7 @@ export class StarClock extends LitElement {
   getDialeClock() {
     return html`
       <div class="star-clock">
-        <div class="star-clock-main  ${this.mode}">
+        <div class="star-clock-main">
           <div class="star-clock-case">
             <div class="star-clock-shaft"></div>
             ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
@@ -74,15 +69,9 @@ export class StarClock extends LitElement {
                 </span>
               `
             )}
-            <img
-              class="star-clock-hour-hand"
-              src=${this.modeChange(this.mode).hour}
-            />
-            <img
-              class="star-clock-minute-hand"
-              src=${this.modeChange(this.mode).minute}
-            />
-            <img class="star-clock-second-hand" src=${second} />
+            <span class="star-clock-hour-hand"></span>
+            <span class="star-clock-minute-hand"></span>
+            <span class="star-clock-second-hand"></span>
           </div>
         </div>
       </div>
@@ -100,19 +89,6 @@ export class StarClock extends LitElement {
         return nothing
     }
   }
-  modeChange(mode: any) {
-    if (mode === 'light') {
-      return {
-        hour: lightHour,
-        minute: lightMinute,
-      }
-    } else {
-      return {
-        hour: darkHour,
-        minute: darkMinute,
-      }
-    }
-  }
   dateUpdated(date: any) {
     let timeMy = new Date(date)
     let hour = timeMy.getHours()
@@ -122,14 +98,15 @@ export class StarClock extends LitElement {
     let minuteTime = Number(minute || 0) + secondTime / 60 //获取分针时间
     let hourTime = Number(hour || 0) + minuteTime / 60 //获取时针时间
     hourTime >= 12 ? (hourTime -= 12) : '' //24小时转换为12小时
-    this.rotateSecond = (secondTime / 60) * 360
-    this.rotateMinute = (minuteTime / 60) * 360
-    this.rotateHour = (hourTime / 12) * 360
-    this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
-    this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
-    this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
+    let rotateSecond = ((secondTime / 60) * 360).toFixed(1)
+    let rotateMinute = ((minuteTime / 60) * 360).toFixed(1)
+    let rotateHour = ((hourTime / 12) * 360).toFixed(1)
+    this.style.setProperty('--rotateSecond', rotateSecond + 'deg')
+    this.style.setProperty('--rotateMinute', rotateMinute + 'deg')
+    this.style.setProperty('--rotateHour', rotateHour + 'deg')
   }
   protected firstUpdated() {
+    this.resize()
     this.dateUpdated('00:00:00')
     setInterval(() => {
       this.dateUpdated(new Date())

src/test/panels/clock/clock.ts

@@ -25,7 +25,7 @@ export class PanelClock extends LitElement {
           <star-clock id="test1" type="diale"></star-clock>
         </div>
         <div style="width: 380px; height: 380px;overflow: hidden">
-          <star-clock id="test2" type="diale" mode="light"></star-clock>
+          <star-clock id="test2" type="diale"></star-clock>
         </div>
       </div>
       <h3