From 447da9db64b9c280dd0f1a007032dcf10710dee5 Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Mon, 7 Nov 2022 09:39:46 +0800
Subject: [PATCH 01/16] =?UTF-8?q?BUG:=20#144182=20=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E4=B8=8E=E5=9B=BE=E6=A1=88=E9=94=81=E5=AE=9A?=
 =?UTF-8?q?=E8=BE=93=E5=85=A53=E6=AC=A1=E9=94=99=E8=AF=AF=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81=E5=B0=B1=E4=BC=9A=E9=94=81=E5=AE=9A=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/digicipher/digicipher.ts | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts
index 2dcab7d..615fe92 100644
--- a/src/components/digicipher/digicipher.ts
+++ b/src/components/digicipher/digicipher.ts
@@ -115,6 +115,7 @@ export class StarLockNumber extends LitElement {
         this.changeText = '保存成功'
         break
       case 'passcode-verify-success':
+        this.errors = 0
         this.guess = ''
         this.clicks = 0
         for (let i = 0; i < 6; i++) {
@@ -122,6 +123,22 @@ export class StarLockNumber extends LitElement {
         }
         break
       case 'passcode-verify-error':
+        this.errors += 1
+        console.log(this.errors)
+        //当密码失败三次后
+        if (this.errors == 3) {
+          console.log('进入已锁定页面')
+          this.dispatchEvent(
+            new CustomEvent('star-digicipher-passcode-error-third', {
+              detail: {
+                value: true,
+              },
+              bubbles: true,
+              composed: true,
+            })
+          )
+          this.errors = 0
+        }
         // 抖动反馈
         for (let i = 0; i < 10; i++) {
           this.buttons[i].style.setProperty('animation', 'errtips .5s')
@@ -164,6 +181,7 @@ export class StarLockNumber extends LitElement {
         this.clicks += 1
         this.guess += (e.target as HTMLElement).dataset.num
       } else if (this.clicks == 5) {
+        // console.log('guess', this.guess)
         this.changeBgColor('#F4F4F4', this.clicks, 1)
         if (this.mode == 'create') {
           if (!this.confirm) {
@@ -194,8 +212,6 @@ export class StarLockNumber extends LitElement {
   }
   touchEnd(e: TouchEvent) {
     if ((e.target as Element).tagName === 'BUTTON') {
-      console.log('this.guess', this.guess)
-
       this.removeNumberBgColor()
     }
   }
@@ -221,6 +237,7 @@ export class StarLockNumber extends LitElement {
   //发送密码
   dispatchPasswd() {
     this.passwd = this.guess
+    // console.log('passwd', this.passwd)
     this.guess = ''
     this.clicks = 0
     this.dispatchEvent(
@@ -236,6 +253,7 @@ export class StarLockNumber extends LitElement {
   //更改密码
   changePasswd() {
     this.savewd = this.guess
+    // console.log('更改密码', this.savewd)
     this.clicks = 0
     for (let i = 0; i < 6; i++) {
       this.changeBgColor('#F4F4F4', i, 0.4)
@@ -257,6 +275,7 @@ export class StarLockNumber extends LitElement {
       this.guess = ''
       this.clicks = 0
       this.changeText = '新建密码'
+      // console.log('确认密码', this.passwd)
       this.dispatchEvent(
         new CustomEvent('star-digicipher-passcode-create', {
           detail: {

From e1718cdc2939088371e64e802076f84d6ae74b2f Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Mon, 7 Nov 2022 16:37:09 +0800
Subject: [PATCH 02/16] =?UTF-8?q?BUG:=20#144182=20=E5=9B=BE=E5=BD=A2?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E4=B8=89=E6=AC=A1=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pattern-view/pattern-view.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts
index b9c1497..71e4598 100644
--- a/src/components/pattern-view/pattern-view.ts
+++ b/src/components/pattern-view/pattern-view.ts
@@ -26,6 +26,7 @@ export class StarPatternView extends LitElement {
   @property({type: Boolean}) saveMode = false
   @property({type: Boolean}) lessfour = false
   @property({type: Boolean}) confirm = false
+  @property({type: Number}) errors = 0
   @property({type: Number}) top = 0
   @property({type: Number}) R = (35 / 600) * document.body.offsetWidth
   @property({type: Number}) X = 0
@@ -118,10 +119,27 @@ export class StarPatternView extends LitElement {
         break
       case 'passcode-verify-success':
         this.getRed = false
+        this.errors = 0
         break
       case 'passcode-verify-error':
         this.getRed = true
         this.changeText = '绘制图案错误'
+        //当密码失败三次后
+        this.errors += 1
+        console.log(this.errors)
+        if (this.errors == 3) {
+          console.log('进入已锁定页面')
+          this.dispatchEvent(
+            new CustomEvent('star-pattern-view-passwd-error-third', {
+              detail: {
+                value: true,
+              },
+              bubbles: true,
+              composed: true,
+            })
+          )
+          this.errors = 0
+        }
         break
 
       default:
@@ -186,6 +204,7 @@ export class StarPatternView extends LitElement {
         )
         this.passwd = []
         this.Draw()
+        
       }
     }
   }

From b20c3a9c8f24544e1febcafac9f95b364ab79b84 Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Tue, 8 Nov 2022 15:34:53 +0800
Subject: [PATCH 03/16] =?UTF-8?q?BUG:=20#144182=20=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E8=A7=A3=E9=94=81=E5=A4=B1=E8=B4=A5=E6=AC=A1?=
 =?UTF-8?q?=E6=95=B0=E4=B8=8Esettings.json=E5=85=B3=E8=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/digicipher/digicipher.ts     | 5 +----
 src/components/pattern-view/pattern-view.ts | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts
index 615fe92..cd390fd 100644
--- a/src/components/digicipher/digicipher.ts
+++ b/src/components/digicipher/digicipher.ts
@@ -115,7 +115,6 @@ export class StarLockNumber extends LitElement {
         this.changeText = '保存成功'
         break
       case 'passcode-verify-success':
-        this.errors = 0
         this.guess = ''
         this.clicks = 0
         for (let i = 0; i < 6; i++) {
@@ -123,8 +122,7 @@ export class StarLockNumber extends LitElement {
         }
         break
       case 'passcode-verify-error':
-        this.errors += 1
-        console.log(this.errors)
+        this.errors = event.detail.value;
         //当密码失败三次后
         if (this.errors == 3) {
           console.log('进入已锁定页面')
@@ -137,7 +135,6 @@ export class StarLockNumber extends LitElement {
               composed: true,
             })
           )
-          this.errors = 0
         }
         // 抖动反馈
         for (let i = 0; i < 10; i++) {
diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts
index b9c1497..fd40fde 100644
--- a/src/components/pattern-view/pattern-view.ts
+++ b/src/components/pattern-view/pattern-view.ts
@@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
 import {customElement, property, query} from 'lit/decorators.js'
-import {sharedStyles} from './pattern-view-style'
+import {sharedStyles} from './pattern-view-style.js'
 
 @customElement('star-pattern-view')
 export class StarPatternView extends LitElement {

From 667a47e9e13ae08b82f21b95c71f9519f37fb566 Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Tue, 8 Nov 2022 20:11:49 +0800
Subject: [PATCH 04/16] =?UTF-8?q?BUG:=20#144182=20=E5=9B=BE=E5=BD=A2?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81=E8=A7=A3=E9=94=81=E9=80=BB=E8=BE=91=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E4=BB=A5=E5=8F=8A=E5=A4=B1=E8=B4=A5=E6=AC=A1=E6=95=B0?=
 =?UTF-8?q?=E4=B8=8Esettings.json=E5=85=B3=E8=81=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pattern-view/pattern-view.ts | 23 +++++++++++----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts
index 0eaccf8..9d402de 100644
--- a/src/components/pattern-view/pattern-view.ts
+++ b/src/components/pattern-view/pattern-view.ts
@@ -118,17 +118,23 @@ export class StarPatternView extends LitElement {
         this.changeText = '密码设置成功'
         break
       case 'passcode-verify-success':
+        console.log('图案正确')
         this.getRed = false
-        this.errors = 0
+        this.changeText = '绘制图案'
         break
       case 'passcode-verify-error':
+        this.passwd = event.detail.passwd
         this.getRed = true
         this.changeText = '绘制图案错误'
         //当密码失败三次后
-        this.errors += 1
-        console.log(this.errors)
+        this.errors = event.detail.value
         if (this.errors == 3) {
           console.log('进入已锁定页面')
+          this.changeText = '绘制图案'
+          this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+          this.passwd = []
+          this.getRed = false 
+          this.Draw()
           this.dispatchEvent(
             new CustomEvent('star-pattern-view-passwd-error-third', {
               detail: {
@@ -138,7 +144,6 @@ export class StarPatternView extends LitElement {
               composed: true,
             })
           )
-          this.errors = 0
         }
         break
 
@@ -147,6 +152,7 @@ export class StarPatternView extends LitElement {
     }
   }
   touchStart(e: TouchEvent) {
+    // this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
     this.lessfourinfo = ''
     this.passwd = []
     this.getRed = false
@@ -174,10 +180,8 @@ export class StarPatternView extends LitElement {
     })
   }
   touchEnd(_e: TouchEvent) {
-    console.log('###', this.passwd.length)
-
     if (this.saveMode && this.passwd.length < 4) {
-      this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+      // this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
       this.getRed = true
       this.lessfourinfo = '至少连接四个点'
     } else {
@@ -301,7 +305,7 @@ export class StarPatternView extends LitElement {
       var dir = Math.pow(xdiff * xdiff + ydiff * ydiff, 0.5)
       if (dir > this.R || passwd.indexOf(i) >= 0) continue
       passwd.push(i)
-      console.log(this.passwd)
+      // console.log(this.passwd)
       break
     }
   }
@@ -310,7 +314,6 @@ export class StarPatternView extends LitElement {
     console.log('请确认密码', this.savewd.toString())
     this.confirm = true
     this.changeText = '请确认图案'
-    console.log('###', this.passwd)
 
     this.dispatchEvent(
       new CustomEvent('star-pattern-view-settings-change', {
@@ -324,7 +327,6 @@ export class StarPatternView extends LitElement {
   }
   confirmPasswd() {
     if (this.savewd.toString() == this.passwd.toString()) {
-      console.log('###', this.passwd)
       this.dispatchEvent(
         new CustomEvent('star-pattern-view-settings-confirm', {
           detail: {
@@ -336,7 +338,6 @@ export class StarPatternView extends LitElement {
       )
     } else {
       this.changeText = '请重新绘制图案'
-      console.log('###', this.passwd)
       this.confirm = false
       this.passwd = []
     }

From ed67ff29e93f1ec33ea932e98a11e5cf23bfc4b8 Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Wed, 9 Nov 2022 16:07:26 +0800
Subject: [PATCH 05/16] =?UTF-8?q?BUG:=20#144182=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E7=BB=98=E5=88=B6=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pattern-view/pattern-view.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts
index 9d402de..a0ff5dc 100644
--- a/src/components/pattern-view/pattern-view.ts
+++ b/src/components/pattern-view/pattern-view.ts
@@ -130,11 +130,7 @@ export class StarPatternView extends LitElement {
         this.errors = event.detail.value
         if (this.errors == 3) {
           console.log('进入已锁定页面')
-          this.changeText = '绘制图案'
-          this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
-          this.passwd = []
-          this.getRed = false 
-          this.Draw()
+          this.initialState()
           this.dispatchEvent(
             new CustomEvent('star-pattern-view-passwd-error-third', {
               detail: {
@@ -151,6 +147,14 @@ export class StarPatternView extends LitElement {
         break
     }
   }
+  /* 擦除线条，恢复初始状态 */
+  initialState() {
+    this.changeText = '绘制图案'
+    this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
+    this.passwd = []
+    this.getRed = false
+    this.Draw()
+  }
   touchStart(e: TouchEvent) {
     // this.cxt.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
     this.lessfourinfo = ''
@@ -213,6 +217,8 @@ export class StarPatternView extends LitElement {
     }
   }
   touchStartCancel() {
+    /* 点击取消，擦除绘制图案 */
+    this.initialState()
     this.dispatchEvent(
       new CustomEvent('star-pattern-view-cancel', {
         detail: {

From 8899d8918de4107b9dc915f1dcdab698b2f10c9f Mon Sep 17 00:00:00 2001
From: luojiahao <luojiahao@kylinos.cn>
Date: Thu, 10 Nov 2022 09:23:13 +0800
Subject: [PATCH 06/16] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BB=E5=B1=8F?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=9B=BE=E6=A0=87=E6=8D=A2=E4=BD=8D=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/auto-px-style.ts          |  1 +
 src/components/base/global-style.ts           | 15 ++++++++++++
 src/components/grid-container/container.ts    | 23 +++++++++++++++----
 .../grid-container/gaia-container-child.ts    |  4 +++-
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts
index d95e47d..c735c43 100644
--- a/src/components/base/auto-px-style.ts
+++ b/src/components/base/auto-px-style.ts
@@ -10,6 +10,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-15px: calc(15px / var(--hostDevicePixelRatio));
     --auto-16px: calc(16px / var(--hostDevicePixelRatio));
     --auto-18px: calc(18px / var(--hostDevicePixelRatio));
+    --auto-20px: calc(20px / var(--hostDevicePixelRatio));
     --auto-24px: calc(24px / var(--hostDevicePixelRatio));
     --auto-26px: calc(26px / var(--hostDevicePixelRatio));
     --auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
diff --git a/src/components/base/global-style.ts b/src/components/base/global-style.ts
index 9b8a51b..be3ba9b 100644
--- a/src/components/base/global-style.ts
+++ b/src/components/base/global-style.ts
@@ -227,6 +227,9 @@ const baseStyle = css`
     /*******************************基础色**************************************/
     /* 底色/base白 */
     --base-white: #fafafa;
+    /* 底色/侧栏黑 */
+    --base-slider-black: #2e2e2e;
+    --base-normal-bgc: var(--base-white);
     /* 底色/base黑 */
     --base-black: #110101; //////提交时更新
     /****************************主题色汇总*************************************/
@@ -284,6 +287,7 @@ const baseStyle = css`
     --font-main-white: #f0f0f0;
     /* 文字/正文黑 */
     --font-main-black: #262626;
+    --font-normal-color: var(--font-main-black);
     /* 文字/底色黑 */
     --font-base-black: var(--pure-black);
     /* 文字/底色白 */
@@ -374,6 +378,16 @@ const baseStyle = css`
   }
 `
 
+const baseDarkStyle = css`
+  @media (prefers-color-scheme: light) {
+    :root {
+      /****************************文字颜色*************************************/
+      --font-normal-color: var(--font-secondary-white);
+      /*****************************基础色**************************************/
+      --base-normal-bgc: var(--base-slider-black);
+    }
+  }
+`
 /**
  * 基础组件所需变量
  */
@@ -795,6 +809,7 @@ const darkStyle = css`
 
 export const globalStyles: CSSResultArray = [
   baseStyle,
+  baseDarkStyle,
   baseComponentStyle,
   homeWidgetStyle,
   themeStyle,
diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts
index 045a37a..b09348a 100644
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@@ -522,7 +522,7 @@ export class GaiaContainer extends StarBaseElement {
   set sortMode(value) {
     if (value) {
       this.status |= STATUS.SORT
-      this.gestureDetector.setOption('holdThreshold', 100)
+      this.gestureDetector.setOption('holdThreshold', 120)
       this.setAttribute('sort-mode', '')
       this.updateComplete.then(this.addTailPage)
       this.setAttribute('sort-mode', '')
@@ -905,6 +905,7 @@ export class GaiaContainer extends StarBaseElement {
    * @param {Object} options 所添加元素的尺寸信息和添加回调
    */
   appendContainerChild(element: HTMLElement, options?: ChildElementInfo) {
+    let child
     if (element.tagName.split('-').length > 1 || options?.isWidget) {
       let obj: ChildElementInfo = options
         ? {...options}
@@ -913,10 +914,21 @@ export class GaiaContainer extends StarBaseElement {
         obj.row = (element as any).size[0]
         obj.column = (element as any).size[1]
       }
-      this.insertContainerBefore(element, null, obj)
+      child = this.insertContainerBefore(element, null, obj)
     } else {
-      this.insertContainerBefore(element, null, options)
+      child = this.insertContainerBefore(element, null, options)
     }
+
+    if (child.breakout) {
+      this.dispatchEvent(
+        new CustomEvent('cross-field', {
+          detail: child,
+          composed: true,
+        })
+      )
+    }
+
+    return child
   }
 
   removeContainerChild(element: HTMLElement, callback?: Function) {
@@ -1197,6 +1209,7 @@ export class GaiaContainer extends StarBaseElement {
     } else {
       this.updateComplete.then(setGridId)
     }
+    return childToInsert
   }
 
   /**
@@ -1253,7 +1266,7 @@ export class GaiaContainer extends StarBaseElement {
     child.container.addEventListener('animationstart', animStart)
     child.container.classList.add(state)
 
-    child[state] = window.window.setTimeout(() => {
+    child[state] = window.setTimeout(() => {
       delete child[state]
       child.container.removeEventListener('animationstart', animStart)
       child.container.classList.remove(state)
@@ -2405,7 +2418,7 @@ export class GaiaContainer extends StarBaseElement {
       } else if (
         child.element === target ||
         child.master === target ||
-        child.container === target ||
+        // child.container === target ||
         child.element.compareDocumentPosition(target) & 16
       ) {
         this._dnd.child = child
diff --git a/src/components/grid-container/gaia-container-child.ts b/src/components/grid-container/gaia-container-child.ts
index 760839a..da2e324 100644
--- a/src/components/grid-container/gaia-container-child.ts
+++ b/src/components/grid-container/gaia-container-child.ts
@@ -76,7 +76,7 @@ export default class GaiaContainerChild {
     manager: GaiaContainer,
     isWidget: boolean = false
   ) {
-    this._element = element
+    this.element = element
     this.isWidget = isWidget
     this.row = row
     this.column = column
@@ -179,6 +179,8 @@ export default class GaiaContainerChild {
     if (this._element) {
       this.container.replaceChild(node, this._element)
     }
+
+    node.classList.add('child-element')
     this._element = node
   }
 

From 233a039dadebf3191d4315637f759c08eb23ec38 Mon Sep 17 00:00:00 2001
From: luojiahao <luojiahao@kylinos.cn>
Date: Thu, 10 Nov 2022 09:30:57 +0800
Subject: [PATCH 07/16] =?UTF-8?q?BUG:=20#144763=20-=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=A4=A9=E6=B0=94=E5=92=8C=E7=94=B5=E6=B1=A0=E5=B0=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/weather/weather.ts |  2 +-
 src/widgets/battery/battery.ts    | 10 ++++------
 src/widgets/mozElement.ts         |  1 +
 src/widgets/weather/weather.ts    | 21 ++++++++++-----------
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/weather/weather.ts b/src/components/weather/weather.ts
index 181c004..2cfdda1 100644
--- a/src/components/weather/weather.ts
+++ b/src/components/weather/weather.ts
@@ -264,7 +264,7 @@ export class StarWeather extends LitElement {
     }
     return airQualityType
   }
-  protected resize() {
+  resize() {
     let width = this.starWeather?.clientWidth || 10
     let height = this.starWeather?.clientHeight || 10
     let proportion: any = height / width
diff --git a/src/widgets/battery/battery.ts b/src/widgets/battery/battery.ts
index 47052f9..c47d771 100644
--- a/src/widgets/battery/battery.ts
+++ b/src/widgets/battery/battery.ts
@@ -36,7 +36,7 @@ class BatteryWidget extends GaiaWidget {
 
   @query('star-battery') battery!: StarBattery
   _battery: any
-  async init() {
+  init = async () => {
     // @ts-ignore
     this._battery = await navigator.getBattery()
     this.percent = this._battery.level * 100
@@ -44,14 +44,12 @@ class BatteryWidget extends GaiaWidget {
     this._battery.addEventListener('levelchange', this)
     this._battery.addEventListener('chargingchange', this)
     this.lifeCycle = 'initialized'
+    this.percent = this._battery.level * 100
+    this.charge = this._battery.charging
   }
 
   firstUpdated = async () => {
-    if (this.lifeCycle == 'initializing') {
-      await this.init()
-    }
-    this.percent = this._battery.level * 100
-    this.charge = this._battery.charging
+    this.init()
   }
 
   handleEvent(event: Event): void {
diff --git a/src/widgets/mozElement.ts b/src/widgets/mozElement.ts
index 8f32210..861919e 100644
--- a/src/widgets/mozElement.ts
+++ b/src/widgets/mozElement.ts
@@ -54,6 +54,7 @@ export default class MozElement extends LitElement {
           background: -moz-element(#${this._id});
           background-size: cover;
           background-repeat: no-repeat;
+          background-position: center;
         }
       </style>
     `
diff --git a/src/widgets/weather/weather.ts b/src/widgets/weather/weather.ts
index 0d6b348..729d394 100644
--- a/src/widgets/weather/weather.ts
+++ b/src/widgets/weather/weather.ts
@@ -2,7 +2,7 @@ import GaiaWidget from '../gaia-widget'
 import '../../components/weather/weather'
 import {StarWeather} from '../../components/weather/weather'
 import {customElement, query} from 'lit/decorators.js'
-import {css, html} from 'lit'
+import {html} from 'lit'
 
 @customElement('gaia-weather')
 class WeatherWidget extends GaiaWidget {
@@ -63,8 +63,12 @@ class WeatherWidget extends GaiaWidget {
     }
   }
 
-  // @ts-ignore
-  init() {}
+  init = () => {
+    return Promise.resolve()
+  }
+  protected firstUpdated() {
+    this.widget.resize()
+  }
 
   static get observedAttributes() {
     return ['type']
@@ -81,18 +85,13 @@ class WeatherWidget extends GaiaWidget {
   render() {
     return html`
       <star-weather type="${this.type}"></star-weather>
-    `
-  }
-
-  static override get styles() {
-    return [
-      css`
+      <style>
         :host {
           height: 100%;
           width: 100%;
         }
-      `,
-    ]
+      </style>
+    `
   }
 }
 

From 670c5f43a903c9ba7a4c6b569ba33f419466e280 Mon Sep 17 00:00:00 2001
From: wurou <wurou@yhkylin.cn>
Date: Thu, 10 Nov 2022 15:50:34 +0800
Subject: [PATCH 08/16] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E3=80=81=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E6=A0=8F=E5=9B=BE=E6=A0=87=E7=AD=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../brightness-slider/brightness-slider.ts    |  34 +-
 .../drop-down-menu/drop-down-menu.ts          |   2 +-
 src/components/header-bar/header-bar.ts       |  42 +-
 .../icon-control-bar-group.ts                 |  34 +-
 src/components/icon-control-bar/iconstyle.ts  |  70 +-
 .../notification/notificationstyle.ts         | 622 +++---------------
 6 files changed, 214 insertions(+), 590 deletions(-)

diff --git a/src/components/brightness-slider/brightness-slider.ts b/src/components/brightness-slider/brightness-slider.ts
index 4d31614..0e8b9c3 100644
--- a/src/components/brightness-slider/brightness-slider.ts
+++ b/src/components/brightness-slider/brightness-slider.ts
@@ -88,7 +88,6 @@ export class BrightnessSlider extends LitElement {
       position: absolute;
       left: 0px;
       right: 0px;
-      background: var(--background-lm);
       border-radius: 1.3vw;
     }
 
@@ -98,7 +97,6 @@ export class BrightnessSlider extends LitElement {
       position: absolute;
       left: 0px;
       right: 0px;
-      background: var(--progress-background-lm);
       border-radius: 1.3vw;
     }
 
@@ -114,8 +112,36 @@ export class BrightnessSlider extends LitElement {
       font-style: normal;
       text-rendering: optimizelegibility;
       font-weight: 500;
-      color: var(--icon-color-lm);
-      z-index: 1;
+    }
+
+    @media (prefers-color-scheme: light) {
+      .sliderBar {
+        background: var(--background-lm);
+      }
+
+      .progress {
+        background: var(--progress-background-lm);
+      }
+
+      .sliderBar::before {
+        color: var(--icon-color-lm);
+        z-index: 1;
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .sliderBar {
+        background: var(--background-dm);
+      }
+
+      .progress {
+        background: var(--progress-background-dm);
+      }
+
+      .sliderBar::before {
+        color: var(--icon-color-dm);
+        z-index: auto;
+      }
     }
   `
 
diff --git a/src/components/drop-down-menu/drop-down-menu.ts b/src/components/drop-down-menu/drop-down-menu.ts
index 06f7dbf..bf6f30a 100644
--- a/src/components/drop-down-menu/drop-down-menu.ts
+++ b/src/components/drop-down-menu/drop-down-menu.ts
@@ -110,7 +110,7 @@ export class DropDownMenu extends LitElement {
 
     .all-quick-icons {
       width: 100%;
-      height: calc(100% - 31px);
+      height: 97.6%;
       position: relative;
       top: 2.4%;
     }
diff --git a/src/components/header-bar/header-bar.ts b/src/components/header-bar/header-bar.ts
index bbd4ce4..c7572b8 100644
--- a/src/components/header-bar/header-bar.ts
+++ b/src/components/header-bar/header-bar.ts
@@ -76,7 +76,6 @@ export class HeaderBar extends LitElement {
       font-family: OPPOSans;
       font-style: normal;
       font-weight: 400;
-      color: var(--only-time-color-lm);
     }
 
     .time-icons > ::slotted(*) {
@@ -102,25 +101,12 @@ export class HeaderBar extends LitElement {
       position: relative;
     }
 
-    .time-date > #time {
-      color: var(--time-date-time-color-lm);
-    }
-
     #date {
       position: relative;
       opacity: 0.6;
-      color: var(--time-date-date-color-lm);
       mix-blend-mode: normal;
     }
 
-    .host([deep-mode]) .time-outer > #time {
-      color: var(--only-time-color-dm);
-    }
-
-    .host([deep-mode]) #date {
-      color: var(--time-date-date-color-dm);
-    }
-
     .time-outer > #time {
       height: 2.7vh;
       line-height: 2.7vh;
@@ -159,6 +145,34 @@ export class HeaderBar extends LitElement {
       position: relative;
       right: 0.9vw;
     }
+
+    @media (prefers-color-scheme: light) {
+      .time-outer > #time {
+        color: var(--only-time-color-lm);
+      }
+
+      .time-date > #time {
+        color: var(--time-date-time-color-lm);
+      }
+
+      #date {
+        color: var(--time-date-date-color-lm);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .time-outer > #time {
+        color: var(--only-time-color-dm);
+      }
+
+      .time-date > #time {
+        color: var(--time-date-time-color-dm);
+      }
+
+      #date {
+        color: var(--time-date-date-color-dm);
+      }
+    }
   `
 
   firstUpdated() {
diff --git a/src/components/icon-control-bar-group/icon-control-bar-group.ts b/src/components/icon-control-bar-group/icon-control-bar-group.ts
index 00c9888..dd03364 100644
--- a/src/components/icon-control-bar-group/icon-control-bar-group.ts
+++ b/src/components/icon-control-bar-group/icon-control-bar-group.ts
@@ -60,7 +60,8 @@ export class IconControlBarGroup extends LitElement {
   static styles = css`
     :host {
       --background-lm: #ffffff;
-      --background-dm: #000000;
+      // --background-dm: #000000;
+      --background-dm: rgba(0, 0, 0, 0.15);
       --opacity-lm: 0.75;
       --opacity-dm: 0.25;
       --line-border-lm: rgba(0, 0, 0, 0.07);
@@ -68,9 +69,8 @@ export class IconControlBarGroup extends LitElement {
 
       width: inherit;
       height: inherit;
-      background: var(--background-lm);
       mix-blend-mode: normal;
-      opacity: var(--opacity-lm);
+      // opacity: var(--opacity-lm);
       border-radius: 1.3vw;
     }
 
@@ -101,20 +101,32 @@ export class IconControlBarGroup extends LitElement {
       align-items: center;
       justify-content: center;
       height: 2.5vw;
-      border-left: 0.17vw solid var(--line-border-lm);
       border-radius: 0.17vw;
     }
 
-    :host([deep-mode]) .icon-only > div > ::slotted(*) {
-      border-left: 0.17vw solid var(--line-border-dm);
+    @media (prefers-color-scheme: light) {
+      :host {
+        background: var(--background-lm);
+        opacity: var(--opacity-lm);
+      }
+
+      .icon-only > div > ::slotted(*) {
+        border-left: 0.17vw solid var(--line-border-lm);
+      }
     }
 
-    .icon-only > div > ::slotted(:first-child) {
-      border-left-style: none;
-    }
+    @media (prefers-color-scheme: dark) {
+      .icon-only > div > ::slotted(*) {
+        border-left: 0.17vw solid var(--line-border-dm);
+      }
 
-    :host([deep-mode]) {
-      background: var(--background-dm);
+      .icon-only > div > ::slotted(:first-child) {
+        border-left-style: none;
+      }
+
+      :host {
+        background: var(--background-dm);
+      }
     }
   `
 }
diff --git a/src/components/icon-control-bar/iconstyle.ts b/src/components/icon-control-bar/iconstyle.ts
index 7c71589..f2f2403 100644
--- a/src/components/icon-control-bar/iconstyle.ts
+++ b/src/components/icon-control-bar/iconstyle.ts
@@ -21,7 +21,6 @@ export const sharedStyles: CSSResult = css`
     // height: 100%;
     display: flex;
     align-items: center;
-    background: var(--background-lm);
     border-radius: 1.3vw;
   }
 
@@ -44,7 +43,6 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     text-rendering: optimizelegibility;
     font-weight: 500;
-    color: var(--text-color-lm);
   }
 
   .more-info-icon {
@@ -70,7 +68,6 @@ export const sharedStyles: CSSResult = css`
   p {
     position: relative;
     left: 13.1%;
-    color: var(--text-color-lm);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -85,9 +82,6 @@ export const sharedStyles: CSSResult = css`
 
   .icon-name-shown,
   .icon-name {
-    // font-size: 7px;
-    // height: 16px;
-
     // font-size: 20px;
     // height: 48px;
 
@@ -103,17 +97,6 @@ export const sharedStyles: CSSResult = css`
     color: var(--text-color-active);
   }
 
-  :host([deep-mode]) .with-border {
-    background: var(--background-dm);
-  }
-
-  :host([deep-mode]) p,
-  :host([deep-mode]) .icon-button::before,
-  :host([deep-mode]) .more-info-icon::after,
-  :host([dark-mode]) .icon-name {
-    color: var(--text-color-dm);
-  }
-
   .icon-with-state::before {
     position: relative;
     left: 9.2%;
@@ -124,8 +107,7 @@ export const sharedStyles: CSSResult = css`
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
-    font-size: 7px;
-    color: var(--text-color-lm);
+    font-size: 1.75vw;
     display: none;
   }
 
@@ -147,8 +129,7 @@ export const sharedStyles: CSSResult = css`
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
-    font-size: 7px;
-    color: var(--text-color-lm);
+    font-size: 1.75vw;
   }
 
   .icon-button::before {
@@ -157,14 +138,51 @@ export const sharedStyles: CSSResult = css`
     // line-height: 48px;
     // font-size: 48px;
 
-    // width: 16px;
-    // height: 16px;
-    // line-height: 16px;
-    // font-size: 16px;
-
     width: 4vw;
     height: 4vw;
     line-height: 4vw;
     font-size: 4vw;
   }
+
+  :host([disabled='true']) {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  @media (prefers-color-scheme: light) {
+    .with-border {
+      background: var(--background-lm);
+    }
+
+    .icon-button::before,
+    .more-info-icon::after {
+      color: var(--text-color-lm);
+    }
+
+    p {
+      color: var(--text-color-lm);
+    }
+
+    .icon-name {
+      color: var(--text-color-lm);
+    }
+
+    .icon-name-shown {
+      color: var(--text-color-lm);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .with-border {
+      background: var(--background-dm);
+    }
+
+    p,
+    .icon-button::before,
+    .more-info-icon::after,
+    .icon-name,
+    .icon-name-shown {
+      color: var(--text-color-dm);
+    }
+  }
 `
diff --git a/src/components/notification/notificationstyle.ts b/src/components/notification/notificationstyle.ts
index 10c0b29..a82f00e 100644
--- a/src/components/notification/notificationstyle.ts
+++ b/src/components/notification/notificationstyle.ts
@@ -14,6 +14,7 @@ export const sharedStyles: CSSResult = css`
     --notification-counts-lm: #000000;
     --notification-counts-dm: #ffffff;
     --arrow-background-lm: rgba(0, 0, 0, 0.06);
+    --arrow-background-dm: rgba(255, 255, 255, 0.08);
     --title-color-lm: #404040;
     --title-color-dm: #f0f0f0;
     --single-text-color-lm: #404040;
@@ -37,7 +38,6 @@ export const sharedStyles: CSSResult = css`
   }
 
   .notification {
-    background: var(--notification-background-lm);
     transition: transform 0.6s;
     height: inherit;
     width: inherit;
@@ -57,9 +57,6 @@ export const sharedStyles: CSSResult = css`
     //   border-top-left-radius: 20px;
     //   border-top-right-radius: 20px;
 
-    // border-top-left-radius: 6px;
-    // border-top-right-radius: 6px;
-
     border-top-left-radius: 1.7vw;
     border-top-right-radius: 1.7vw;
   }
@@ -68,9 +65,6 @@ export const sharedStyles: CSSResult = css`
     // border-bottom-left-radius: 20px;
     // border-bottom-right-radius: 20px;
 
-    // border-bottom-left-radius: 6px;
-    // border-bottom-right-radius: 6px;
-
     border-bottom-left-radius: 1.7vw;
     border-bottom-right-radius: 1.7vw;
   }
@@ -78,8 +72,6 @@ export const sharedStyles: CSSResult = css`
   .border-radius {
     // border-radius: 20px;
 
-    // border-radius: 6px;
-
     border-radius: 1.7vw;
   }
 
@@ -89,11 +81,6 @@ export const sharedStyles: CSSResult = css`
     // pointer-events: none;
     // margin: 26px 10px 78px 26px;
 
-    //   width: 16px;
-    //   height: 16px;
-    //   pointer-events: none;
-    //   margin: 9px 3px 26px 9px;
-
     width: 4vw;
     height: 4vw;
     position: absolute;
@@ -110,10 +97,6 @@ export const sharedStyles: CSSResult = css`
     //   left: 28px;
     //   top: 23.7%;
 
-    // width: calc(100% - 84px);
-    // left: 84px;
-    // top: 36px;
-    // top: 23.7%;
     font-family: 'OPPOSans';
     font-style: normal;
     width: 90.2%;
@@ -129,16 +112,11 @@ export const sharedStyles: CSSResult = css`
     order: 0;
     flex-grow: 0;
     font-weight: 400;
-    color: var(--title-color-lm);
 
     // height: 28px;
     // line-height: 28px;
     // font-size: 28px;
 
-    // height: 9px;
-    // line-height: 9px;
-    // font-size: 9px;
-
     line-height: 1;
     font-size: 2.3vw;
   }
@@ -155,7 +133,6 @@ export const sharedStyles: CSSResult = css`
     text-overflow: ellipsis;
     white-space: nowrap;
     opacity: 0.65;
-    color: var(--title-color-lm);
 
     // height: 32px;
     // right: 32px;
@@ -163,12 +140,6 @@ export const sharedStyles: CSSResult = css`
     // font-size: 24px;
     // line-height: 32px;
 
-    //   height: 10px;
-    //   right: 10px;
-    //   top: -1px;
-    //   font-size: 8px;
-    //   line-height: 10px;
-
     right: 10.67px;
     top: -1.33px;
     font-size: 2vw;
@@ -187,12 +158,6 @@ export const sharedStyles: CSSResult = css`
     // left: 84px;
     // top: 84px;
 
-    // top: 55.3%;
-
-    //   width: calc(100% - 28px);
-    //   left: 28px;
-    //   top: 55.3%;
-
     width: 90.2%;
     left: 9.8%;
     top: 55.3%;
@@ -208,7 +173,6 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     // font-weight: 300;
     font-weight: 400;
-    color: var(--single-text-color-lm);
     mix-blend-mode: normal;
     opacity: 0.65;
     font-size: 2.2vw;
@@ -217,11 +181,6 @@ export const sharedStyles: CSSResult = css`
     // height: 11px;
     // font-size: 8px;
     // line-height: 11px;
-
-    // width: 740px;
-    // height: 34px;
-    // font-size: 26px;
-    // line-height: 34px;
   }
 
   .notification > div.detail .arrow-up {
@@ -230,7 +189,6 @@ export const sharedStyles: CSSResult = css`
     text-align: center;
     vertical-align: middle;
     display: none;
-    background: var(--arrow-background-lm);
 
     // width: 56px;
     // height: 34px;
@@ -239,13 +197,6 @@ export const sharedStyles: CSSResult = css`
     // line-height: 34px;
     // border-radius: 189px;
 
-    // width: 18px;
-    // height: 11px;
-    // right: 9px;
-    // bottom: 10px;
-    // line-height: 11px;
-    // border-radius: 63px;
-
     height: 1.8vh;
     width: 4.7vw;
     right: 3%;
@@ -299,7 +250,6 @@ export const sharedStyles: CSSResult = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--button-background-color-lm);
     border-radius: 50%;
     opacity: 0.6;
     transition: transform 0.1s;
@@ -307,9 +257,6 @@ export const sharedStyles: CSSResult = css`
     // width: 80px;
     // height: 80px;
 
-    //   width: 26px;
-    //   height: 26px;
-
     width: 6.7vw;
     height: 6.7vw;
   }
@@ -342,18 +289,12 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     text-rendering: optimizelegibility;
     font-weight: 500;
-    color: var(--button-color-lm);
 
     // width: 32px;
     // height: 32px;
     // line-height: 32px;
     // font-size: 32px;
 
-    // width: 10px;
-    // height: 10px;
-    // line-height: 10px;
-    // font-size: 10px;
-
     width: 40%;
     height: 40%;
     font-size: 2.7vw;
@@ -368,15 +309,11 @@ export const sharedStyles: CSSResult = css`
     // width: calc(100% - 28px);
     // left: 28px;
 
-    // width: calc(100% - 84px);
-    // left: 84px;
-
     width: 90.2%;
     left: 9.8%;
   }
 
   .container .title {
-    color: var(--title-color-lm);
     flex: none;
     order: 0;
     flex-grow: 0;
@@ -385,10 +322,6 @@ export const sharedStyles: CSSResult = css`
     //   line-height: 28px;
     //   font-size: 28px;
 
-    //   height: 9.3px;
-    //   line-height: 9.3px;
-    //   font-size: 9.3px;
-
     height: 18.4%;
     line-height: 1;
     font-size: 1.45vh;
@@ -397,7 +330,6 @@ export const sharedStyles: CSSResult = css`
 
   .container .detail-content {
     position: relative;
-    color: var(--more-text-color-lm);
     mix-blend-mode: normal;
     opacity: 0.65;
     flex: none;
@@ -414,12 +346,6 @@ export const sharedStyles: CSSResult = css`
     // top: -3px;
     // font-size: 26px;
 
-    // height: 11px;
-    // line-height: 11px;
-    // left: 8px;
-    // top: -1px;
-    // font-size: 9px;
-
     left: 0.93%;
     top: -3px;
     top: -2%;
@@ -444,7 +370,6 @@ export const sharedStyles: CSSResult = css`
     text-align: right;
     mix-blend-mode: normal;
     opacity: 0.65;
-    color: var(--single-text-color-lm);
 
     // height: 34px;
     // right: 34px;
@@ -469,8 +394,6 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     text-align: center;
     vertical-align: middle;
-    color: var(--notification-counts-lm);
-    background: var(--notification-counts-background-lm);
     opacity: 0.55;
 
     // width: 56px;
@@ -502,463 +425,94 @@ export const sharedStyles: CSSResult = css`
     vertical-align: middle;
   }
 
-  :host([dark-mode]) .notification {
-    background: var(--notification-background-dm);
+  @media (prefers-color-scheme: light) {
+    .notification {
+      background: var(--notification-background-lm);
+    }
+
+    .notification > div.title-container .title {
+      color: var(--title-color-lm);
+    }
+
+    .notification > div.title-container .timestamp {
+      color: var(--title-color-lm);
+    }
+
+    .notification > div.detail .detail-content {
+      color: var(--single-text-color-lm);
+    }
+
+    .notification > div.detail .arrow-up {
+      background: var(--arrow-background-lm);
+    }
+
+    .btn-tool > div {
+      background: var(--button-background-color-lm);
+    }
+
+    .btn-tool > div::after {
+      color: var(--button-color-lm);
+    }
+
+    .container .title {
+      color: var(--title-color-lm);
+    }
+
+    .container .detail-content {
+      color: var(--more-text-color-lm);
+    }
+
+    .one-container .timestamp {
+      color: var(--single-text-color-lm);
+    }
+
+    .another-container .notificaiton-counts {
+      color: var(--notification-counts-lm);
+      background: var(--notification-counts-background-lm);
+    }
   }
 
-  :host([dark-mode]) .btn-tool > div {
-    background: var(--button-background-color-dm);
+  @media (prefers-color-scheme: dark) {
+    .notification {
+      background: var(--notification-background-dm);
+    }
+
+    .notification > div.detail .arrow-up {
+      background: var(--arrow-background-dm);
+    }
+
+    .btn-tool > div {
+      background: var(--button-background-color-dm);
+    }
+
+    .btn-tool > div::after {
+      color: var(--button-color-dm);
+    }
+
+    .another-container .notificaiton-counts {
+      color: var(--notification-counts-dm);
+      background: var(--notification-counts-background-dm);
+    }
+
+    .container .title,
+    .notification > div.title-container .title {
+      color: var(--title-color-dm);
+    }
+
+    .notification > div.title-container .timestamp {
+      color: var(--single-text-color-dm);
+    }
+
+    .notification > div.detail .detail-content {
+      color: var(--single-text-color-dm);
+    }
+
+    .container .detail-content {
+      color: var(--more-text-color-dm);
+    }
+
+    .one-container .timestamp {
+      color: var(--single-text-color-dm);
+    }
   }
-
-  :host([dark-mode]) .btn-tool > div::after {
-    color: var(--button-color-dm);
-  }
-
-  :host([dark-mode]) .another-container .notificaiton-counts {
-    color: var(--notification-counts-dm);
-    background: var(--notification-counts-background-dm);
-  }
-
-  :host([dark-mode]) .container .title,
-  :host([dark-mode]) .notification > div.title-container .title {
-    color: var(--title-color-dm);
-  }
-
-  :host([dark-mode]) .notification > div.title-container .timestamp {
-    color: var(--single-text-color-dm);
-  }
-
-  :host([dark-mode]) .notification > div.detail .detail-content {
-    color: var(--single-text-color-dm);
-  }
-
-  :host([dark-mode]) .container .detail-content {
-    color: var(--more-text-color-dm);
-  }
-
-  :host([dark-mode]) .one-container .timestamp {
-    color: var(--single-text-color-dm);
-  }
-
-  // @media screen and (min-width: 300px) {
-  //   // :host([notificationType='one-notification']) {
-  //   //   margin: 5px 0 0 0;
-  //   // }
-
-  //   // .notification {
-  //   //   height: 50px;
-  //   //   width: 286px;
-  //   // }
-
-  //   // .top-border-radius {
-  //   //   border-top-left-radius: 6px;
-  //   //   border-top-right-radius: 6px;
-  //   // }
-
-  //   // .bottom-border-radius {
-  //   //   border-bottom-left-radius: 6px;
-  //   //   border-bottom-right-radius: 6px;
-  //   // }
-
-  //   // .border-radius {
-  //   //   border-radius: 6px;
-  //   // }
-
-  //   // .notification > img {
-  //   //   width: 16px;
-  //   //   height: 16px;
-  //   //   pointer-events: none;
-  //   //   margin: 9px 3px 26px 9px;
-  //   // }
-
-  //   // .notification > div.title-container {
-  //   //   width: calc(100% - 28px);
-  //   //   left: 28px;
-  //   //   top: 23.7%;
-  //   // }
-
-  //   .notification > div.title-container .title {
-  //     // height: 9px;
-  //     // line-height: 9px;
-  //     // font-size: 9px;
-  //   }
-
-  //   // .notification > div.title-container .timestamp {
-  //   //   height: 10px;
-  //   //   right: 10px;
-  //   //   top: -1px;
-  //   //   font-size: 8px;
-  //   //   line-height: 10px;
-  //   // }
-
-  //   // .notification > div.detail {
-  //   //   width: calc(100% - 28px);
-  //   //   left: 28px;
-  //   //   top: 55.3%;
-  //   // }
-
-  //   // .notification > div.detail .detail-content {
-  //   //   // width: 246px;
-  //   //   // height: 11px;
-  //   //   // font-size: 8px;
-  //   //   // line-height: 11px;
-  //   // }
-
-  //   // .notification > div.detail .arrow-up {
-  //   //   // width: 18px;
-  //   //   // height: 11px;
-  //   //   // right: 9px;
-  //   //   // bottom: 10px;
-  //   //   // line-height: 11px;
-  //   //   // border-radius: 63px;
-  //   // }
-
-  //   // .notification > div.detail .arrow-up::after {
-  //   //   font-size: 12px;
-  //   // }
-
-  //   // .btn-tool {
-  //   //   right: 6px;
-  //   // }
-
-  //   // .btn-tool > div:first-child {
-  //   //   margin-right: 15px;
-  //   //   visibility: hidden;
-  //   // }
-
-  //   // .btn-tool > div {
-  //   //   width: 26px;
-  //   //   height: 26px;
-  //   // }
-
-  //   // .btn-tool > div::after {
-  //   //   width: 10px;
-  //   //   height: 10px;
-  //   //   line-height: 10px;
-  //   //   font-size: 10px;
-  //   // }
-
-  //   // .container .detail-content {
-  //   //   height: 11px;
-  //   //   line-height: 11px;
-  //   //   left: 8px;
-  //   //   top: -1px;
-  //   //   font-size: 9px;
-  //   // }
-
-  //   // .one-container .timestamp {
-  //   //   height: 11px;
-  //   //   right: 11px;
-  //   //   top: -1px;
-  //   //   font-size: 8px;
-  //   //   line-height: 11px;
-  //   // }
-
-  //   // .another-container .notificaiton-counts {
-  //   //   width: 18px;
-  //   //   height: 11px;
-  //   //   right: 8px;
-  //   //   bottom: 10px;
-  //   //   top: -1px;
-  //   //   line-height: 11px;
-  //   //   font-size: 7px;
-  //   //   border-radius: 63px;
-  //   // }
-  // }
-
-  // @media screen and (min-width: 600px) {
-  //   // :host([notificationType='one-notification']) {
-  //   //   margin: 8px 0 0 0;
-  //   // }
-
-  //   // .notification {
-  //   //   height: 76px;
-  //   //   width: 430px;
-  //   // }
-
-  //   // .top-border-radius {
-  //   //   border-top-left-radius: 10px;
-  //   //   border-top-right-radius: 10px;
-  //   // }
-
-  //   // .bottom-border-radius {
-  //   //   border-bottom-left-radius: 10px;
-  //   //   border-bottom-right-radius: 10px;
-  //   // }
-
-  //   // .border-radius {
-  //   //   border-radius: 10px;
-  //   // }
-
-  //   // .notification > img {
-  //   //   width: 24px;
-  //   //   height: 24px;
-  //   //   pointer-events: none;
-  //   //   margin: 13px 5px 39px 13px;
-  //   // }
-
-  //   // .notification > div.title-container {
-  //   //   width: calc(100% - 42px);
-  //   //   left: 42px;
-  //   //   top: 18px;
-  //   //   top: 23.7%;
-  //   // }
-
-  //   // .notification > div.title-container .title {
-  //   //   height: 14px;
-  //   //   line-height: 14px;
-  //   //   font-size: 14px;
-  //   // }
-
-  //   // .notification > div.title-container .timestamp {
-  //   //   height: 16px;
-  //   //   right: 16px;
-  //   //   top: -2px;
-  //   //   font-size: 12px;
-  //   //   line-height: 16px;
-  //   // }
-
-  //   // .notification > div.detail {
-  //   //   width: calc(100% - 42px);
-  //   //   left: 42px;
-  //   //   top: 42px;
-  //   //   top: 55.3%;
-  //   // }
-
-  //   // .notification > div.detail .detail-content {
-  //   //   width: 370px;
-  //   //   height: 17px;
-  //   //   font-size: 13px;
-  //   //   line-height: 17px;
-  //   // }
-
-  //   // .notification > div.detail .arrow-up {
-  //   //   width: 28px;
-  //   //   height: 17px;
-  //   //   right: 13px;
-  //   //   bottom: 15px;
-  //   //   line-height: 17px;
-  //   //   border-radius: 94.5px;
-  //   // }
-
-  //   // .notification > div.detail .arrow-up::after {
-  //   //   font-size: 17.5px;
-  //   // }
-
-  //   // .btn-tool {
-  //   //   right: 9px;
-  //   // }
-
-  //   // .btn-tool > div:first-child {
-  //   //   margin-right: 22px;
-  //   //   visibility: hidden;
-  //   // }
-
-  //   // .btn-tool > div {
-  //   //   width: 40px;
-  //   //   height: 40px;
-  //   // }
-
-  //   // .btn-tool > div::after {
-  //   //   width: 16px;
-  //   //   height: 16px;
-  //   //   line-height: 16px;
-  //   //   font-size: 16px;
-  //   // }
-
-  //   // .container {
-  //   //   width: calc(100% - 42px);
-  //   //   left: 42px;
-  //   // }
-
-  //   // .one-container {
-  //   //   top: 18px;
-  //   // }
-
-  //   // .another-container {
-  //   //   top: 44.5px;
-  //   // }
-
-  //   // .container .title {
-  //   //   height: 14px;
-  //   //   line-height: 14px;
-  //   //   font-size: 14px;
-  //   // }
-
-  //   // .container .detail-content {
-  //   //   height: 17px;
-  //   //   line-height: 17px;
-  //   //   left: 12px;
-  //   //   top: -1.5px;
-  //   //   font-size: 13px;
-  //   // }
-
-  //   // .one-container .timestamp {
-  //   //   height: 17px;
-  //   //   right: 17px;
-  //   //   top: -2px;
-  //   //   font-size: 12px;
-  //   //   line-height: 16px;
-  //   // }
-
-  //   // .another-container .notificaiton-counts {
-  //   //   width: 28px;
-  //   //   height: 17px;
-  //   //   right: 13px;
-  //   //   bottom: 15px;
-  //   //   top: -0.5px;
-  //   //   line-height: 17px;
-  //   //   font-size: 10px;
-  //   //   border-radius: 94.5px;
-  //   // }
-  // }
-
-  // @media screen and (min-width: 900px) {
-  //   // :host([notificationType='one-notification']) {
-  //   //   margin: 16px 0 0 0;
-  //   // }
-
-  //   // .notification {
-  //   //   height: 152px;
-  //   //   width: 860px;
-  //   // }
-
-  //   // .top-border-radius {
-  //   //   border-top-left-radius: 20px;
-  //   //   border-top-right-radius: 20px;
-  //   // }
-
-  //   // .bottom-border-radius {
-  //   //   border-bottom-left-radius: 20px;
-  //   //   border-bottom-right-radius: 20px;
-  //   // }
-
-  //   // .border-radius {
-  //   //   border-radius: 20px;
-  //   // }
-
-  //   // .notification > img {
-  //   //   width: 48px;
-  //   //   height: 48px;
-  //   //   pointer-events: none;
-  //   //   margin: 26px 10px 78px 26px;
-  //   // }
-
-  //   // .notification > div.title-container {
-  //   //   width: calc(100% - 84px);
-  //   //   left: 84px;
-
-  //   //   top: 36px;
-  //   //   top: 23.7%;
-  //   // }
-
-  //   // .notification > div.title-container .title {
-  //   //   height: 28px;
-  //   //   line-height: 28px;
-  //   //   font-size: 28px;
-  //   // }
-
-  //   // .notification > div.title-container .timestamp {
-  //   //   height: 32px;
-  //   //   right: 32px;
-  //   //   top: -4px;
-  //   //   font-size: 24px;
-  //   //   line-height: 32px;
-  //   // }
-
-  //   // .notification > div.detail {
-  //   //   width: calc(100% - 84px);
-  //   //   left: 84px;
-  //   //   top: 84px;
-
-  //   //   top: 55.3%;
-  //   // }
-
-  //   // .notification > div.detail .detail-content {
-  //   //   width: 740px;
-  //   //   height: 34px;
-  //   //   font-size: 26px;
-  //   //   line-height: 34px;
-  //   // }
-
-  //   // .notification > div.detail .arrow-up {
-  //   //   width: 56px;
-  //   //   height: 34px;
-  //   //   right: 26px;
-  //   //   bottom: 30px;
-  //   //   line-height: 34px;
-  //   //   border-radius: 189px;
-  //   // }
-
-  //   // .notification > div.detail .arrow-up::after {
-  //   //   font-size: 35px;
-  //   // }
-
-  //   // .btn-tool {
-  //   //   right: 18px;
-  //   // }
-
-  //   // .btn-tool > div:first-child {
-  //   //   margin-right: 44px;
-  //   //   visibility: hidden;
-  //   // }
-
-  //   // .btn-tool > div {
-  //   //   width: 80px;
-  //   //   height: 80px;
-  //   // }
-
-  //   // .btn-tool > div::after {
-  //   //   width: 32px;
-  //   //   height: 32px;
-  //   //   line-height: 32px;
-  //   //   font-size: 32px;
-  //   // }
-
-  //   // .container {
-  //   //   width: calc(100% - 84px);
-  //   //   left: 84px;
-  //   // }
-
-  //   // .one-container {
-  //   //   top: 36px;
-  //   // }
-
-  //   // .another-container {
-  //   //   top: 89px;
-  //   // }
-
-  //   // .container .title {
-  //   //   height: 28px;
-  //   //   line-height: 28px;
-  //   //   font-size: 28px;
-  //   // }
-
-  //   // .container .detail-content {
-  //   //   height: 34px;
-  //   //   line-height: 34px;
-  //   //   left: 24px;
-  //   //   top: -3px;
-  //   //   font-size: 26px;
-  //   // }
-
-  //   // .one-container .timestamp {
-  //   //   height: 34px;
-  //   //   right: 34px;
-  //   //   top: -4px;
-  //   //   font-size: 24px;
-  //   //   line-height: 32px;
-  //   // }
-
-  //   // .another-container .notificaiton-counts {
-  //   //   width: 56px;
-  //   //   height: 34px;
-  //   //   right: 26px;
-  //   //   bottom: 30px;
-  //   //   top: -1px;
-  //   //   line-height: 34px;
-  //   //   font-size: 20px;
-  //   //   border-radius: 189px;
-  //   // }
-  // }
 `

From 8b018f5450a699e5cabbbb1f9145887764db2e9e Mon Sep 17 00:00:00 2001
From: luojiahao <luojiahao@kylinos.cn>
Date: Fri, 11 Nov 2022 10:53:47 +0800
Subject: [PATCH 09/16] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=BB=E5=B1=8F?=
 =?UTF-8?q?=E5=AE=B9=E5=99=A8=E7=BB=84=E4=BB=B6=E6=8B=96=E6=8B=BD=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=92=8C=E5=88=A4=E6=96=AD=E8=B6=8A=E7=95=8C=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/grid-container/container.ts           |  7 ++++---
 .../grid-container/gaia-container-child.ts           | 12 +++++-------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts
index b09348a..ace4d8f 100644
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@@ -1864,9 +1864,10 @@ export class GaiaContainer extends StarBaseElement {
         this._children.add(this._dnd.child)
         this._dnd.child.container.classList.add('dragging')
       }
-
-      let containerX = centerX - this.gridWidth / 2 - this.left
-      let containerY = centerY - this.gridHeight / 2 - this.top
+      let containerX =
+        centerX - (dragInfo?.gridWidth || this.gridWidth) / 2 - this.left
+      let containerY =
+        centerY - (dragInfo?.gridHeight || this.gridWidth) / 2 - this.top
 
       gridX = containerX + this.gridWidth / 2
       gridY = containerY + this.gridHeight / 2
diff --git a/src/components/grid-container/gaia-container-child.ts b/src/components/grid-container/gaia-container-child.ts
index da2e324..95b6fc2 100644
--- a/src/components/grid-container/gaia-container-child.ts
+++ b/src/components/grid-container/gaia-container-child.ts
@@ -436,6 +436,11 @@ export default class GaiaContainerChild {
       return true
     }
     if (position == 'page' && gridId !== this.curGridId) {
+      const crossResult = this.manager.exchangeStratege.handleCrossField(
+        gridId,
+        this
+      )
+      this.breakout = crossResult.bottom || crossResult.right
       // this.manager.recordCoordinate(this, this.pagination, gridId)
       if (!this.manager.recordCoordinate(this, this.pagination, gridId)) {
         /* 未能成功记录，记录位置已有其他子节点，需要清空位置记录并重新归位 */
@@ -457,13 +462,6 @@ export default class GaiaContainerChild {
       this._lastElementHeight = this.element?.offsetHeight!
     }
 
-    const crossResult = this.manager.exchangeStratege.handleCrossField(
-      this.curGridId,
-      this
-    )
-
-    this.breakout = crossResult.bottom || crossResult.right
-
     !isActive &&
       !this.breakout &&
       !this.container.classList.contains('dragging') &&

From ed4bee1eb4b7f5a9e79876e8a8857b6cc202f851 Mon Sep 17 00:00:00 2001
From: luojiahao <luojiahao@kylinos.cn>
Date: Fri, 11 Nov 2022 10:54:31 +0800
Subject: [PATCH 10/16] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=B0=8F=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/clock/clock.ts     | 2 +-
 src/widgets/mozElement.ts      | 2 +-
 src/widgets/weather/weather.ts | 5 ++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/widgets/clock/clock.ts b/src/widgets/clock/clock.ts
index f39a472..f8cd225 100644
--- a/src/widgets/clock/clock.ts
+++ b/src/widgets/clock/clock.ts
@@ -92,7 +92,7 @@ class ClockWidget extends GaiaWidget {
     return html`
       <style>
         :host {
-          height: 100%;
+          height: 102% !important;
           width: 100%;
         }
       </style>
diff --git a/src/widgets/mozElement.ts b/src/widgets/mozElement.ts
index 861919e..d046e43 100644
--- a/src/widgets/mozElement.ts
+++ b/src/widgets/mozElement.ts
@@ -52,7 +52,7 @@ export default class MozElement extends LitElement {
           height: 100%;
           width: 100%;
           background: -moz-element(#${this._id});
-          background-size: cover;
+          background-size: contain;
           background-repeat: no-repeat;
           background-position: center;
         }
diff --git a/src/widgets/weather/weather.ts b/src/widgets/weather/weather.ts
index 729d394..3a54372 100644
--- a/src/widgets/weather/weather.ts
+++ b/src/widgets/weather/weather.ts
@@ -63,9 +63,8 @@ class WeatherWidget extends GaiaWidget {
     }
   }
 
-  init = () => {
-    return Promise.resolve()
-  }
+  // @ts-ignore
+  init = () => {}
   protected firstUpdated() {
     this.widget.resize()
   }

From 74e4a32deb36f0e1902ec239fe0ed9228e9ce24b Mon Sep 17 00:00:00 2001
From: wangchangqi <wangchangqi@kylinos.cn>
Date: Fri, 11 Nov 2022 15:27:56 +0800
Subject: [PATCH 11/16] =?UTF-8?q?(improve)=E9=80=82=E9=85=8D=E4=BB=A51920x?=
 =?UTF-8?q?1200=E5=AE=BD=E9=AB=98=E4=B8=BA=E5=9F=BA=E5=87=86=E7=9A=84?=
 =?UTF-8?q?=E7=AD=89=E6=AF=94=E4=BE=8B=E6=94=BE=E7=BC=A9=E5=B1=8F=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/star-base-element.ts | 33 +++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/base/star-base-element.ts b/src/components/base/star-base-element.ts
index adbd215..2311f5d 100644
--- a/src/components/base/star-base-element.ts
+++ b/src/components/base/star-base-element.ts
@@ -62,6 +62,37 @@ function handleContextMenu(e: Event) {
   }
 }
 
+/**
+ * 2560:1600=1920:1200=1280:800=16:10
+ *
+ * 当屏幕长宽同比例时：将以1920:1200，devicePixelRatio=1为基准，
+ *
+ * 计算等比例放缩系数，写入 --devicePixelRatio 计算基准中。
+ */
+function computeNeededDevicePixelRatio(): string {
+  const defaultRatio = Number(window.devicePixelRatio)
+  let ratio = 1
+  const {width, height} = window.screen
+  const [realWidth, realHeight] = [
+    width * devicePixelRatio,
+    height * devicePixelRatio,
+  ]
+  const currentWidthHeightRatio = Math.max(
+    realWidth / realHeight,
+    realHeight / realWidth
+  )
+
+  switch (currentWidthHeightRatio) {
+    case 1.6: // 16:10
+      ratio = 1920 / Math.max(realWidth, realHeight)
+      break
+    default:
+      console.log(new Error('The current pixel ratio is not matched'))
+  }
+
+  return (defaultRatio * ratio).toFixed(2)
+}
+
 export function StarMixin<T extends Constructor<ReactiveElement>>(
   constructor: T
 ): T & Constructor<StarInterface> {
@@ -84,7 +115,7 @@ export function StarMixin<T extends Constructor<ReactiveElement>>(
       .toString()
       .replace(/(--devicePixelRatio: )\d+/, (_, s1) => {
         // 替换 devicepixelRatio
-        return s1 + String(devicePixelRatio)
+        return s1 + computeNeededDevicePixelRatio()
       })
     const autoPxStyleString = autoPxStyle.toString()
     style.innerHTML = globalStylesString + autoPxStyleString

From 6a8ab3478fa03b660b78cb7d9cf1939c0e44b723 Mon Sep 17 00:00:00 2001
From: luojiahao <luojiahao@kylinos.cn>
Date: Fri, 11 Nov 2022 16:27:20 +0800
Subject: [PATCH 12/16] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=B8=BB=E5=B1=8F?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=BA=E6=97=8B=E8=BD=AC=E5=B1=8F=E5=B9=95?=
 =?UTF-8?q?=E6=8F=90=E4=BE=9B=E7=9A=84=E9=A2=84=E5=85=88=E8=B6=8A=E7=95=8C?=
 =?UTF-8?q?=E6=A3=80=E6=9F=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/grid-container/container.ts            | 4 ++++
 src/components/grid-container/gaia-container-child.ts | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts
index ace4d8f..1aed5f8 100644
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@@ -1882,6 +1882,7 @@ export class GaiaContainer extends StarBaseElement {
     pagination: number,
     gridId: number
   ) {
+    if (pagination >= this.pages.length) return false
     let resolve!: Function
     let promise = new Promise((res) => {
       resolve = res
@@ -1890,6 +1891,9 @@ export class GaiaContainer extends StarBaseElement {
     for (let row = 0; row < child.row; row++) {
       for (let column = 0; column < child.column; column++) {
         const targetId = gridId + column + row * this.column
+        if (!this.childCoordinate[pagination]) {
+          this.childCoordinate[pagination] = {}
+        }
         if (
           this.childCoordinate[pagination][targetId] != undefined &&
           this.childCoordinate[pagination][targetId] != child
diff --git a/src/components/grid-container/gaia-container-child.ts b/src/components/grid-container/gaia-container-child.ts
index 95b6fc2..980260f 100644
--- a/src/components/grid-container/gaia-container-child.ts
+++ b/src/components/grid-container/gaia-container-child.ts
@@ -249,8 +249,8 @@ export default class GaiaContainerChild {
     const offsetLeft = Math.abs(
       this.master.offsetLeft - this.pagination * this.manager.pageHeight
     )
-    const rowStart = Math.floor(offsetTop / this.manager.gridHeight) + 1
-    const columnStart = Math.floor(offsetLeft / this.manager.gridWidth) + 1
+    const rowStart = Math.round(offsetTop / this.manager.gridHeight) + 1
+    const columnStart = Math.round(offsetLeft / this.manager.gridWidth) + 1
 
     return [rowStart, columnStart]
   }
@@ -268,7 +268,7 @@ export default class GaiaContainerChild {
       grid = Math.min(...grid)
     }
 
-    const rowStart = Math.floor(grid / this.manager.column) + 1
+    const rowStart = Math.round(grid / this.manager.column) + 1
     const columnStart = (grid % this.manager.column) + 1
     return [rowStart, columnStart]
   }
@@ -326,6 +326,8 @@ export default class GaiaContainerChild {
       const container = document.createElement('div')
       container.style.gridRowStart = `span ${this.row}`
       container.style.gridColumnStart = `span ${this.column}`
+      // 为了保证影子页面进行越界检测时, 能先放置大组件再放置小组件
+      container.style.order = `${24 - this.column * this.row}`
       this._shadowContainer = container
     }
     return this._shadowContainer

From 9897a2ba97b7318a97e1aef919ff6f6e3d9ab1c6 Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Fri, 11 Nov 2022 21:04:17 +0800
Subject: [PATCH 13/16] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=94=81=E5=B1=8F?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=BB=93=E6=9E=84=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=9B=BE=E5=BD=A2=E5=92=8C=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E5=AF=86=E7=A0=81setting=E6=A0=BC=E5=BC=8F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/auto-px-style.ts          |  8 +++
 .../clock-widget/clock-widget-style.ts        |  3 +-
 src/components/clock-widget/clock-widget.ts   | 11 +++-
 .../clock-widget/date/date-style.ts           |  4 +-
 .../clock-widget/time/time-style.ts           | 64 ++++++-------------
 src/components/clock-widget/time/time.ts      | 25 +++++++-
 src/components/digicipher/digicipher-style.ts | 62 ++++++++++++------
 .../pattern-view/pattern-view-style.ts        | 16 +++--
 src/components/pattern-view/pattern-view.ts   |  2 +-
 9 files changed, 119 insertions(+), 76 deletions(-)

diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts
index b1dda15..63f92cc 100644
--- a/src/components/base/auto-px-style.ts
+++ b/src/components/base/auto-px-style.ts
@@ -26,18 +26,24 @@ export const autoPxStyle: CSSResult = css`
     --auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
     --auto-48px: calc(48px / var(--hostDevicePixelRatio));
     --auto-50px: calc(50px / var(--hostDevicePixelRatio));
+    --auto-53px: calc(53px / var(--hostDevicePixelRatio));
     --auto-56px: calc(56px / var(--hostDevicePixelRatio));
     --auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
+    --auto-58px: calc(58px / var(--hostDevicePixelRatio));
     --auto-64px: calc(64px / var(--hostDevicePixelRatio));
     --auto-66px: calc(66px / var(--hostDevicePixelRatio));
+    --auto-72px: calc(72px / var(--hostDevicePixelRatio));
     --auto-76px: calc(76px / var(--hostDevicePixelRatio));
     --auto-80px: calc(80px / var(--hostDevicePixelRatio));
+    --auto-85px: calc(85px / var(--hostDevicePixelRatio));
     --auto-88px: calc(88px / var(--hostDevicePixelRatio));
     --auto-92px: calc(92px / var(--hostDevicePixelRatio));
     --auto-96px: calc(96px / var(--hostDevicePixelRatio));
     --auto-112px: calc(112px / var(--hostDevicePixelRatio));
+    --auto-116px: calc(116px / var(--hostDevicePixelRatio));
     --auto-128px: calc(128px / var(--hostDevicePixelRatio));
     --auto-152px: calc(152px / var(--hostDevicePixelRatio));
+    --auto-160px: calc(160px / var(--hostDevicePixelRatio));
     --auto-176px: calc(176px / var(--hostDevicePixelRatio));
     --auto-200px: calc(200px / var(--hostDevicePixelRatio));
     --auto-201px: calc(201px / var(--hostDevicePixelRatio));
@@ -51,7 +57,9 @@ export const autoPxStyle: CSSResult = css`
     --auto-368px: calc(368px / var(--hostDevicePixelRatio));
     --auto-418px: calc(418px / var(--hostDevicePixelRatio));
     --auto-440px: calc(440px / var(--hostDevicePixelRatio));
+    --auto-500px: calc(500px / var(--hostDevicePixelRatio));
     --auto-520px: calc(520px / var(--hostDevicePixelRatio));
     --auto-607px: calc(607px / var(--hostDevicePixelRatio));
+    --auto-815px: calc(815px / var(--hostDevicePixelRatio));
   }
 `
diff --git a/src/components/clock-widget/clock-widget-style.ts b/src/components/clock-widget/clock-widget-style.ts
index dd5d3fc..8185c72 100644
--- a/src/components/clock-widget/clock-widget-style.ts
+++ b/src/components/clock-widget/clock-widget-style.ts
@@ -4,8 +4,9 @@ export default css`
   clock-time {
     display: inline-flex;
     align-items: center;
+    justify-content:center;
     vertical-align: middle;
-    line-height: var(--auto-96px);
+    line-height: var(--auto-128px);
     width: 100%;
   }
   clock-date {
diff --git a/src/components/clock-widget/clock-widget.ts b/src/components/clock-widget/clock-widget.ts
index 8d8adfb..ad09528 100644
--- a/src/components/clock-widget/clock-widget.ts
+++ b/src/components/clock-widget/clock-widget.ts
@@ -6,8 +6,11 @@ import './time/time.js'
 @customElement('clock-widget')
 class ClockContainer extends LitElement {
   @property({type: String}) name = 'clock-widget'
+  @property({type: String}) type = 3
   @property({type: String}) minute = 0
+  @property({type: String}) minute2 = 0
   @property({type: String}) hour = 0
+  @property({type: String}) hour2 = 0
   @property({type: String}) date = 0
 
   public static override get styles(): CSSResultArray {
@@ -16,7 +19,13 @@ class ClockContainer extends LitElement {
 
   render() {
     return html`
-      <clock-time minute=${this.minute} hour=${this.hour}></clock-time>
+      <clock-time
+        minute=${this.minute}
+        minute2=${this.minute2}
+        hour=${this.hour}
+        hour2=${this.hour2}
+        type=${this.type}
+      ></clock-time>
       <clock-date date=${this.date}></clock-date>
     `
   }
diff --git a/src/components/clock-widget/date/date-style.ts b/src/components/clock-widget/date/date-style.ts
index e3f95d7..4c5b5f3 100644
--- a/src/components/clock-widget/date/date-style.ts
+++ b/src/components/clock-widget/date/date-style.ts
@@ -4,6 +4,8 @@ export default css`
   #clock-date {
     text-align: center;
     margin: auto;
+    font-size: var(--auto-48px);
+    line-height: var(--auto-58px);
   }
 
   @media screen and (max-width: 640px) {
@@ -11,8 +13,6 @@ export default css`
       font-family: 'OPPOSans';
       font-style: normal;
       font-weight: 400;
-      font-size: var(--auto-48px);
-      line-height: 29px;
     }
   }
 
diff --git a/src/components/clock-widget/time/time-style.ts b/src/components/clock-widget/time/time-style.ts
index 87edb5a..c7758f6 100644
--- a/src/components/clock-widget/time/time-style.ts
+++ b/src/components/clock-widget/time/time-style.ts
@@ -1,62 +1,40 @@
 import {css} from 'lit'
 
 export default css`
-  #clock-time-minute {
+  .clock-time {
     flex: 1;
-    text-align: right;
-    padding-inline-end: var(--auto-10px);
+    width: var(--auto-85px);
+    text-align: center;
     font-family: 'OPPOSans';
     font-style: normal;
-    font-weight: 400;
+  }
+  .clock-time[type='3'] {
+    font-weight: 600;
     font-size: var(--auto-128px);
+    line-height: var(--auto-128px);
+  }
+  #clock-minute,
+  #clock-hour {
+    display: flex;
+  }
+  #clock-minute div[type='3'] {
     opacity: 0.67;
+    padding-inline-end: var(--auto-10px);
   }
 
-  #clock-time-hour {
-    flex: 1;
-    text-align: left;
+  #clock-hour div[type='3'] {
     padding-inline-start: var(--auto-10px);
-    font-family: 'OPPOSans';
-    font-style: normal;
-    font-weight: 400;
-    font-size: var(--auto-128px);
-    /* identical to box height, or 100% */
-    text-align: left;
     /* 主题色/黄金渐变 */
     background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
 
-  /*   @media screen and (max-width: 640px) {
-    #clock-time-minute {
-      font-weight: 600;
-      font-size: 64px;
-      line-height: 64px;
-      height: 64px;
-    }
-
-    #clock-time-hour {
-      font-weight: 600;
-      font-size: 64px;
-      line-height: 64px;
-      height: 64px;
-    }
+  /* 默认 */
+  #clock-line .clock-time[type='4'] {
+    font-weight: 400;
+    font-size: var(--auto-116px);
+    line-height: var(--auto-116px);
+    color: #f0f0f0;
   }
-
-  @media screen and (max-width: 400px) {
-    #clock-time-minute {
-      font-weight: 600;
-      font-size: 43px;
-      line-height: 43px;
-      height: 43px;
-    }
-
-    #clock-time-hour {
-      font-weight: 600;
-      font-size: 43px;
-      line-height: 43px;
-      height: 43px;
-    }
-  } */
 `
diff --git a/src/components/clock-widget/time/time.ts b/src/components/clock-widget/time/time.ts
index dc97129..0a0d0e5 100644
--- a/src/components/clock-widget/time/time.ts
+++ b/src/components/clock-widget/time/time.ts
@@ -4,16 +4,37 @@ import timeStyles from './time-style.js'
 
 @customElement('clock-time')
 class LockScreenClockTimeContainer extends LitElement {
+  @property({type: String}) type = 3
   @property({type: String}) name = 'clock-time'
   @property({type: String}) minute = 0
+  @property({type: String}) minute2 = 0
   @property({type: String}) hour = 0
+  @property({type: String}) hour2 = 0
+  @property({type: String}) line = ':'
   public static override get styles(): CSSResultArray {
     return [timeStyles]
   }
   render() {
     return html`
-      <div id="clock-time-minute">${this.minute}</div>
-      <div id="clock-time-hour">${this.hour}</div>
+      <div id="clock-minute">
+        <div class="clock-time" id="clock-time-minute" type=${this.type}>
+          ${this.minute}
+        </div>
+        <div class="clock-time" id="clock-time-minute2" type=${this.type}>
+          ${this.minute2}
+        </div>
+      </div>
+      <div id="clock-line" type=${this.type}>
+        ${this.type == 4 ? this.line : ''}
+      </div>
+      <div id="clock-hour">
+        <div class="clock-time" id="clock-time-hour" type=${this.type}>
+          ${this.hour}
+        </div>
+        <div class="clock-time" id="clock-time-hour2" type=${this.type}>
+          ${this.hour2}
+        </div>
+      </div>
     `
   }
 }
diff --git a/src/components/digicipher/digicipher-style.ts b/src/components/digicipher/digicipher-style.ts
index f921b9b..d5f84dd 100644
--- a/src/components/digicipher/digicipher-style.ts
+++ b/src/components/digicipher/digicipher-style.ts
@@ -17,11 +17,14 @@ export const sharedStyles: CSSResult = css`
   }
   span {
     position: relative;
-    width: 12px;
-    height: 12px;
+    /* width: var(--auto-24px);
+    margin-right: var(--auto-40px);
+    height: var(--auto-24px); */
+    width: calc(100vw * 24 / 1200);
+    height: calc(100vw * 24 / 1200);
+    margin-right: calc(100vw * 40 / 1200);
     border-radius: 50%;
     display: inline-block;
-    margin-right: 20px;
     background: #f4f4f4;
     opacity: 0.3;
   }
@@ -30,8 +33,10 @@ export const sharedStyles: CSSResult = css`
   }
   #parent {
     position: relative;
-    height: 250px;
-    width: 250px;
+    /* height: var(--auto-500px);
+    width: var(--auto-500px); */
+    height: calc(100vw * 500 / 1200);
+    width: calc(100vw * 500 / 1200);
     left: 50%;
     top: 53%;
     transform: translate(-50%, -50%);
@@ -40,7 +45,8 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     display: grid;
     grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9';
-    gap: 20px;
+    /* gap: var(--auto-40px); */
+    gap: calc(100vw * 40 / 1200);
   }
 
   p {
@@ -54,18 +60,22 @@ export const sharedStyles: CSSResult = css`
   #zero {
     position: absolute;
     left: 36%;
-    top: 270px;
+    /* top: 270px; */
+    top: 109%;
   }
   button {
     position: relative;
-    width: 70px;
+    /* width: 70px;
     height: 70px;
+    font-size: var(--auto-36px); */
+    width: calc(100vw * 140 / 1200);
+    height: calc(100vw * 140 / 1200);
+    font-size: calc(100vw * 70 / 1200);
     border-radius: 50%;
     border: none;
     /*button背景无色*/
     background: rgba(0, 0, 0, 0);
     display: inline-block;
-    font-size: 35px;
   }
 
   /*按钮点击的效果*/
@@ -75,8 +85,10 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     top: 0px;
     left: 0px;
-    width: 70px;
-    height: 70px;
+    /* width: var(--auto-140px);
+    height: var(--auto-140px); */
+    width: calc(100vw * 140 / 1200);
+    height: calc(100vw * 140 / 1200);
     border-radius: 50%;
     background-color: #ffffff;
     opacity: 0;
@@ -96,12 +108,18 @@ export const sharedStyles: CSSResult = css`
     text-align: center;
   }
   .topText {
-    font-size: 20px;
-    height: 26.5px;
-    line-height: 26.5px;
-    width: 160px;
-    left: calc(50% - 160px / 2);
+    /* font-size: 20px;
+    height: var(--auto-53px);
+    line-height: var(--auto-53px);
+    width: var(--auto-160px);
+    left: calc(50% - var(--auto-160px) / 2);
+     */
     top: 31%;
+    font-size: calc(100vw * 40 / 1200);
+    height: calc(100vw * 53 / 1200);
+    line-height: calc(100vw * 53 / 1200);
+    width: calc(100vw * 160 / 1200);
+    left: calc(50% - calc(100vw * 160 / 1200) / 2);
   }
   .spanContainer {
     position: absolute;
@@ -117,10 +135,14 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     font-weight: 400;
     color: #292929;
-    width: 36px;
-    height: 23.5px;
-    line-height: 23.5px;
-    font-size: 18px;
+    /* width: var(--auto-72px);
+    height: var(--auto-47px);
+    line-height: var(--auto-47px);
+    font-size: var(--auto-36px); */
+    width: calc(100vw * 72 / 1200);
+    height: calc(100vw * 47 / 1200);
+    line-height: calc(100vw * 47 / 1200);
+    font-size: calc(100vw * 36 / 1200);
     top: 118.5%;
   }
   .cancel {
diff --git a/src/components/pattern-view/pattern-view-style.ts b/src/components/pattern-view/pattern-view-style.ts
index 8cd42e4..5dcda69 100644
--- a/src/components/pattern-view/pattern-view-style.ts
+++ b/src/components/pattern-view/pattern-view-style.ts
@@ -1,7 +1,7 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
   :host {
-    --top-dir: 42.4%;
+    --top-dir: 40%;
   }
   canvas {
     display: block;
@@ -15,17 +15,21 @@ export const sharedStyles: CSSResult = css`
   }
   p {
     position: absolute;
+    /* width: var(--auto-160px);
+    line-height: var(--auto-53px);
+    font-size: var(--auto-40px);
+    height: var(--auto-53px); */
+    width: calc(100vw * 300 / 1200);
+    height: calc(100vw * 53 / 1200);
+    line-height: calc(100vw * 53 / 1200);
+    font-size: calc(100vw * 40 / 1200);
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
     color: #292929;
     font-family: 'OPPOSans';
     color: #292929;
-    font-size: 16px;
-    height: 26.5px;
-    line-height: 26.5px;
     left: 50%;
-    width: 150px;
     transform: translateX(-50%);
     margin-top: 0;
     text-align: center;
@@ -38,7 +42,7 @@ export const sharedStyles: CSSResult = css`
     top: 31%;
   }
   .cancel {
-    bottom: 13.5%;
+    bottom: 23.5%;
   }
   .errorinfo {
     top: 66%;
diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts
index a0ff5dc..ccd06b1 100644
--- a/src/components/pattern-view/pattern-view.ts
+++ b/src/components/pattern-view/pattern-view.ts
@@ -94,7 +94,7 @@ export class StarPatternView extends LitElement {
   ): void {
     //settings中，图形密码上下的文字以及图形密码的位置都有所变化
     if (this.saveMode) {
-      this.topDir = '34.7%'
+      this.topDir = '34%'
       this.saveP.style.setProperty('top', '27.8%')
     }
     //canvas的高度和宽度都是

From 75f315da4b23119bddafd17e15a72484741625a0 Mon Sep 17 00:00:00 2001
From: yuanchongjun <yuanchongjun@kylinos.cn>
Date: Sat, 12 Nov 2022 16:19:33 +0800
Subject: [PATCH 14/16] add auto-222px

---
 src/components/base/auto-px-style.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/base/auto-px-style.ts b/src/components/base/auto-px-style.ts
index b7940c9..85e6bfb 100644
--- a/src/components/base/auto-px-style.ts
+++ b/src/components/base/auto-px-style.ts
@@ -46,6 +46,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-201px: calc(201px / var(--hostDevicePixelRatio));
     --auto-206px: calc(206px / var(--hostDevicePixelRatio));
     --auto-208px: calc(208px / var(--hostDevicePixelRatio));
+    --auto-222px: calc(222px / var(--hostDevicePixelRatio));
     --auto-260px: calc(260px / var(--hostDevicePixelRatio));
     --auto-310px: calc(310px / var(--hostDevicePixelRatio));
     --auto-312px: calc(312px / var(--hostDevicePixelRatio));

From 6a3d9ac77c9af061488c19069df86c8c053cbf20 Mon Sep 17 00:00:00 2001
From: wangchangqi <wangchangqi@kylinos.cn>
Date: Sat, 12 Nov 2022 16:32:59 +0800
Subject: [PATCH 15/16] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=BC=AA=E7=B1=BB=E5=9B=BE=E6=A0=87=E6=98=BE=E7=A4=BA=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=E7=9A=84=E9=97=AE=E9=A2=98,=E6=B7=BB=E5=8A=A02?=
 =?UTF-8?q?=E4=B8=AAsvg=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/asset/icons/index.ts | 26 ++++++++++++++++++++++----
 src/components/button/button.ts     |  4 ++--
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/asset/icons/index.ts b/src/components/asset/icons/index.ts
index da23d12..926ed01 100644
--- a/src/components/asset/icons/index.ts
+++ b/src/components/asset/icons/index.ts
@@ -262,16 +262,34 @@ export const goback = html`
   </svg>
 `
 
+// '＋', 返回按中使用
+export const add = html`
+  <svg viewBox="0 0 48 48" fill="#4D4D4D" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23 26V37H26V26H37V23H26V11H23V23H11V26H23Z" />
+  </svg>
+`
+
+// '＋', 返回按中使用
+export const personalization = html`
+  <svg viewBox="0 0 48 48" fill="#4D4D4D" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M37.6219 13.5813L27.5 7.80625C25.5448 6.73125 23.254 6.73125 21.2988 7.80625L10.3746 13.5813C8.30461 14.7155 7.01044 16.8864 7 19.2521V30.3813C7.01392 32.74 8.30809 34.9074 10.3746 36.0416L20.5 42C21.4776 42.5392 22.925 43 24 43C25.0715 43 26.5224 42.5392 27.5 42L38 36C40.0665 34.8659 40.9896 32.74 41 30.3743V19.2416C40.9861 16.8829 39.6919 14.712 37.6219 13.5813ZM22.5 10.5C23.1019 10.1695 23.839 10 24.5 10C25.161 10 25.8981 10.1695 26.5 10.5L34.5 15.5C34.7505 15.6357 35.7913 16.3156 36 16.5L24.5 23L12 16.5C12.2087 16.3191 13.2495 15.6392 13.5 15.5L22.5 10.5ZM12 33.5C10.7232 32.8007 10.007 31.9473 10 30.5V20C10 19.6973 9.9339 19.2888 10 19L23 26V39C22.7704 38.9235 21.7192 38.6183 21.5 38.5L12 33.5ZM38 30.5C37.993 31.9542 37.7733 32.8007 36.5 33.5L27.5 38.5C27.2773 38.6218 26.2366 38.9235 26 39V26L38 19C38.0661 19.2853 37.9965 19.7008 38 20V30.5Z"
+    />
+  </svg>
+`
+
 export type stackInstances = typeof store
 
 export default {
-  store,
+  add,
   app,
-  desktopWallpaper,
-  lockscreen,
-  privacy,
   deletecorner,
+  desktopWallpaper,
   goback,
+  lockscreen,
+  personalization,
+  privacy,
+  store,
 } as {
   [key: string]: stackInstances
 }
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 8087ac4..f7944f8 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -122,7 +122,7 @@ export class StarButton extends StarBaseElement {
   /**
    * 在 GaiaIcons 中包含的图标名称
    */
-  @property({type: String}) icon = ''
+  @property({type: String}) icon!: string
 
   /**
    * 默认支持元素禁用属性
@@ -151,7 +151,7 @@ export class StarButton extends StarBaseElement {
   }
 
   protected get hasIcon(): boolean {
-    return this.icon !== ''
+    return this.icon !== undefined && this.icon !== ''
   }
 
   renderBaseButton(): HTMLTemplateResult {

From 25ce3760a428633b774e34537967054f9f2ac30e Mon Sep 17 00:00:00 2001
From: duanzhijiang <duanzhijiang@kylinos.cn>
Date: Sat, 12 Nov 2022 16:42:24 +0800
Subject: [PATCH 16/16] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=94=81=E5=B1=8F?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=A0=B7=E5=BC=8F=E3=80=81=E5=9B=BE=E5=BD=A2?=
 =?UTF-8?q?=E4=B8=8E=E6=95=B0=E5=AD=97=E5=AF=86=E7=A0=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/clock-widget/clock-widget.ts   | 16 +++----
 .../clock-widget/time/time-style.ts           |  4 +-
 src/components/clock-widget/time/time.ts      | 28 +++++------
 src/components/digicipher/digicipher-style.ts | 46 +++++--------------
 src/components/digicipher/digicipher.ts       | 11 +++--
 .../pattern-view/pattern-view-style.ts        |  8 +---
 src/components/pattern-view/pattern-view.ts   | 10 ++--
 7 files changed, 53 insertions(+), 70 deletions(-)

diff --git a/src/components/clock-widget/clock-widget.ts b/src/components/clock-widget/clock-widget.ts
index ad09528..bd558ca 100644
--- a/src/components/clock-widget/clock-widget.ts
+++ b/src/components/clock-widget/clock-widget.ts
@@ -7,10 +7,10 @@ import './time/time.js'
 class ClockContainer extends LitElement {
   @property({type: String}) name = 'clock-widget'
   @property({type: String}) type = 3
-  @property({type: String}) minute = 0
-  @property({type: String}) minute2 = 0
-  @property({type: String}) hour = 0
-  @property({type: String}) hour2 = 0
+  @property({type: String}) hourFirst = 0
+  @property({type: String}) hourSecond = 0
+  @property({type: String}) minuteFirst = 0
+  @property({type: String}) minuteSecond = 0
   @property({type: String}) date = 0
 
   public static override get styles(): CSSResultArray {
@@ -20,10 +20,10 @@ class ClockContainer extends LitElement {
   render() {
     return html`
       <clock-time
-        minute=${this.minute}
-        minute2=${this.minute2}
-        hour=${this.hour}
-        hour2=${this.hour2}
+        hourFirst=${this.hourFirst}
+        hourSecond=${this.hourSecond}
+        minuteFirst=${this.minuteFirst}
+        minuteSecond=${this.minuteSecond}
         type=${this.type}
       ></clock-time>
       <clock-date date=${this.date}></clock-date>
diff --git a/src/components/clock-widget/time/time-style.ts b/src/components/clock-widget/time/time-style.ts
index c7758f6..bb222f2 100644
--- a/src/components/clock-widget/time/time-style.ts
+++ b/src/components/clock-widget/time/time-style.ts
@@ -17,12 +17,12 @@ export default css`
   #clock-hour {
     display: flex;
   }
-  #clock-minute div[type='3'] {
+  #clock-hour div[type='3'] {
     opacity: 0.67;
     padding-inline-end: var(--auto-10px);
   }
 
-  #clock-hour div[type='3'] {
+  #clock-minute div[type='3'] {
     padding-inline-start: var(--auto-10px);
     /* 主题色/黄金渐变 */
     background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
diff --git a/src/components/clock-widget/time/time.ts b/src/components/clock-widget/time/time.ts
index 0a0d0e5..d99ef75 100644
--- a/src/components/clock-widget/time/time.ts
+++ b/src/components/clock-widget/time/time.ts
@@ -6,33 +6,33 @@ import timeStyles from './time-style.js'
 class LockScreenClockTimeContainer extends LitElement {
   @property({type: String}) type = 3
   @property({type: String}) name = 'clock-time'
-  @property({type: String}) minute = 0
-  @property({type: String}) minute2 = 0
-  @property({type: String}) hour = 0
-  @property({type: String}) hour2 = 0
+  @property({type: String}) hourFirst = 0
+  @property({type: String}) hourSecond = 0
+  @property({type: String}) minuteFirst = 0
+  @property({type: String}) minuteSecond = 0
   @property({type: String}) line = ':'
   public static override get styles(): CSSResultArray {
     return [timeStyles]
   }
   render() {
     return html`
-      <div id="clock-minute">
-        <div class="clock-time" id="clock-time-minute" type=${this.type}>
-          ${this.minute}
+      <div id="clock-hour">
+        <div class="clock-time" id="clock-time-hourFirst" type=${this.type}>
+          ${this.hourFirst}
         </div>
-        <div class="clock-time" id="clock-time-minute2" type=${this.type}>
-          ${this.minute2}
+        <div class="clock-time" id="clock-time-hourSecond" type=${this.type}>
+          ${this.hourSecond}
         </div>
       </div>
       <div id="clock-line" type=${this.type}>
         ${this.type == 4 ? this.line : ''}
       </div>
-      <div id="clock-hour">
-        <div class="clock-time" id="clock-time-hour" type=${this.type}>
-          ${this.hour}
+      <div id="clock-minute">
+        <div class="clock-time" id="clock-time-minuteFirst" type=${this.type}>
+          ${this.minuteFirst}
         </div>
-        <div class="clock-time" id="clock-time-hour2" type=${this.type}>
-          ${this.hour2}
+        <div class="clock-time" id="clock-time-minuteSecond" type=${this.type}>
+          ${this.minuteSecond}
         </div>
       </div>
     `
diff --git a/src/components/digicipher/digicipher-style.ts b/src/components/digicipher/digicipher-style.ts
index d5f84dd..fbe16b9 100644
--- a/src/components/digicipher/digicipher-style.ts
+++ b/src/components/digicipher/digicipher-style.ts
@@ -17,12 +17,9 @@ export const sharedStyles: CSSResult = css`
   }
   span {
     position: relative;
-    /* width: var(--auto-24px);
+    width: var(--auto-24px);
     margin-right: var(--auto-40px);
-    height: var(--auto-24px); */
-    width: calc(100vw * 24 / 1200);
-    height: calc(100vw * 24 / 1200);
-    margin-right: calc(100vw * 40 / 1200);
+    height: var(--auto-24px);
     border-radius: 50%;
     display: inline-block;
     background: #f4f4f4;
@@ -33,10 +30,8 @@ export const sharedStyles: CSSResult = css`
   }
   #parent {
     position: relative;
-    /* height: var(--auto-500px);
-    width: var(--auto-500px); */
-    height: calc(100vw * 500 / 1200);
-    width: calc(100vw * 500 / 1200);
+    height: var(--auto-500px);
+    width: var(--auto-500px);
     left: 50%;
     top: 53%;
     transform: translate(-50%, -50%);
@@ -45,8 +40,7 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     display: grid;
     grid-template-areas: '1 2 3 ' '4 5 6' '7 8 9';
-    /* gap: var(--auto-40px); */
-    gap: calc(100vw * 40 / 1200);
+    gap: var(--auto-40px);
   }
 
   p {
@@ -60,17 +54,13 @@ export const sharedStyles: CSSResult = css`
   #zero {
     position: absolute;
     left: 36%;
-    /* top: 270px; */
     top: 109%;
   }
   button {
     position: relative;
-    /* width: 70px;
+    width: 70px;
     height: 70px;
-    font-size: var(--auto-36px); */
-    width: calc(100vw * 140 / 1200);
-    height: calc(100vw * 140 / 1200);
-    font-size: calc(100vw * 70 / 1200);
+    font-size: var(--auto-36px);
     border-radius: 50%;
     border: none;
     /*button背景无色*/
@@ -85,10 +75,8 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     top: 0px;
     left: 0px;
-    /* width: var(--auto-140px);
-    height: var(--auto-140px); */
-    width: calc(100vw * 140 / 1200);
-    height: calc(100vw * 140 / 1200);
+    width: var(--auto-140px);
+    height: var(--auto-140px);
     border-radius: 50%;
     background-color: #ffffff;
     opacity: 0;
@@ -108,18 +96,12 @@ export const sharedStyles: CSSResult = css`
     text-align: center;
   }
   .topText {
-    /* font-size: 20px;
+    font-size: 20px;
     height: var(--auto-53px);
     line-height: var(--auto-53px);
     width: var(--auto-160px);
     left: calc(50% - var(--auto-160px) / 2);
-     */
     top: 31%;
-    font-size: calc(100vw * 40 / 1200);
-    height: calc(100vw * 53 / 1200);
-    line-height: calc(100vw * 53 / 1200);
-    width: calc(100vw * 160 / 1200);
-    left: calc(50% - calc(100vw * 160 / 1200) / 2);
   }
   .spanContainer {
     position: absolute;
@@ -135,14 +117,10 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     font-weight: 400;
     color: #292929;
-    /* width: var(--auto-72px);
+    width: var(--auto-72px);
     height: var(--auto-47px);
     line-height: var(--auto-47px);
-    font-size: var(--auto-36px); */
-    width: calc(100vw * 72 / 1200);
-    height: calc(100vw * 47 / 1200);
-    line-height: calc(100vw * 47 / 1200);
-    font-size: calc(100vw * 36 / 1200);
+    font-size: var(--auto-36px);
     top: 118.5%;
   }
   .cancel {
diff --git a/src/components/digicipher/digicipher.ts b/src/components/digicipher/digicipher.ts
index cd390fd..5dd1207 100644
--- a/src/components/digicipher/digicipher.ts
+++ b/src/components/digicipher/digicipher.ts
@@ -1,9 +1,14 @@
-import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
+import {
+  html,
+  StarBaseElement,
+  CSSResultArray,
+  PropertyValueMap,
+} from '../base/star-base-element.js'
 import {customElement, property, query, queryAll} from 'lit/decorators.js'
 import {sharedStyles} from './digicipher-style.js'
 
 @customElement('star-digicipher')
-export class StarLockNumber extends LitElement {
+export class StarLockNumber extends StarBaseElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
@@ -122,7 +127,7 @@ export class StarLockNumber extends LitElement {
         }
         break
       case 'passcode-verify-error':
-        this.errors = event.detail.value;
+        this.errors = event.detail.value
         //当密码失败三次后
         if (this.errors == 3) {
           console.log('进入已锁定页面')
diff --git a/src/components/pattern-view/pattern-view-style.ts b/src/components/pattern-view/pattern-view-style.ts
index 5dcda69..b801e4c 100644
--- a/src/components/pattern-view/pattern-view-style.ts
+++ b/src/components/pattern-view/pattern-view-style.ts
@@ -15,14 +15,10 @@ export const sharedStyles: CSSResult = css`
   }
   p {
     position: absolute;
-    /* width: var(--auto-160px);
+    width: var(--auto-160px);
     line-height: var(--auto-53px);
     font-size: var(--auto-40px);
-    height: var(--auto-53px); */
-    width: calc(100vw * 300 / 1200);
-    height: calc(100vw * 53 / 1200);
-    line-height: calc(100vw * 53 / 1200);
-    font-size: calc(100vw * 40 / 1200);
+    height: var(--auto-53px);
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
diff --git a/src/components/pattern-view/pattern-view.ts b/src/components/pattern-view/pattern-view.ts
index ccd06b1..95e5175 100644
--- a/src/components/pattern-view/pattern-view.ts
+++ b/src/components/pattern-view/pattern-view.ts
@@ -1,9 +1,14 @@
-import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
+import {
+  html,
+  StarBaseElement,
+  CSSResultArray,
+  PropertyValueMap,
+} from '../base/star-base-element.js'
 import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './pattern-view-style.js'
 
 @customElement('star-pattern-view')
-export class StarPatternView extends LitElement {
+export class StarPatternView extends StarBaseElement {
   _topDir: string = ''
   _getRed: boolean = false
 
@@ -212,7 +217,6 @@ export class StarPatternView extends LitElement {
         )
         this.passwd = []
         this.Draw()
-        
       }
     }
   }