Merge branch 'master' into feature-improve-dialog

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
 }

src/components/base/auto-px-style.ts

@@ -31,25 +31,34 @@ 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-74px: calc(66px / var(--hostDevicePixelRatio));
     --auto-76px: calc(76px / var(--hostDevicePixelRatio));
     --auto-80px: calc(80px / var(--hostDevicePixelRatio));
     --auto-82px: calc(80px / 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));
     --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));
@@ -59,9 +68,11 @@ export const autoPxStyle: CSSResult = css`
     --auto-418px: calc(418px / var(--hostDevicePixelRatio));
     --auto-440px: calc(440px / var(--hostDevicePixelRatio));
     --auto-472px: calc(440px / var(--hostDevicePixelRatio));
+    --auto-500px: calc(500px / var(--hostDevicePixelRatio));
     --auto-520px: calc(520px / var(--hostDevicePixelRatio));
     --auto-524px: calc(520px / var(--hostDevicePixelRatio));
     --auto-607px: calc(607px / var(--hostDevicePixelRatio));
     --auto-620px: calc(607px / var(--hostDevicePixelRatio));
+    --auto-815px: calc(815px / var(--hostDevicePixelRatio));
   }
 `

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: #1a1a1a;
     /****************************主题色汇总*************************************/
@@ -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,

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

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,9 +112,37 @@ export class BrightnessSlider extends LitElement {
       font-style: normal;
       text-rendering: optimizelegibility;
       font-weight: 500;
+    }
+
+    @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;
+      }
+    }
   `
 
   handleEvent(event: TouchEvent) {

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 {

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 {

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}) minute = 0
+  @property({type: String}) type = 3
-  @property({type: String}) hour = 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 {
@@ -16,7 +19,13 @@ class ClockContainer extends LitElement {
 
   render() {
     return html`
-      <clock-time minute=${this.minute} hour=${this.hour}></clock-time>
+      <clock-time
+        hourFirst=${this.hourFirst}
+        hourSecond=${this.hourSecond}
+        minuteFirst=${this.minuteFirst}
+        minuteSecond=${this.minuteSecond}
+        type=${this.type}
+      ></clock-time>
       <clock-date date=${this.date}></clock-date>
     `
   }

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;
     }
   }
 

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;
+    width: var(--auto-85px);
-    padding-inline-end: var(--auto-10px);
+    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-hour div[type='3'] {
     opacity: 0.67;
+    padding-inline-end: var(--auto-10px);
   }
 
-  #clock-time-hour {
+  #clock-minute div[type='3'] {
-    flex: 1;
-    text-align: left;
     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 {
+  #clock-line .clock-time[type='4'] {
-      font-weight: 600;
+    font-weight: 400;
-      font-size: 64px;
+    font-size: var(--auto-116px);
-      line-height: 64px;
+    line-height: var(--auto-116px);
-      height: 64px;
+    color: #f0f0f0;
   }
-
-    #clock-time-hour {
-      font-weight: 600;
-      font-size: 64px;
-      line-height: 64px;
-      height: 64px;
-    }
-  }
-
-  @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;
-    }
-  } */
 `

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}) hourFirst = 0
-  @property({type: String}) hour = 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-time-minute">${this.minute}</div>
+      <div id="clock-hour">
-      <div id="clock-time-hour">${this.hour}</div>
+        <div class="clock-time" id="clock-time-hourFirst" type=${this.type}>
+          ${this.hourFirst}
+        </div>
+        <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-minute">
+        <div class="clock-time" id="clock-time-minuteFirst" type=${this.type}>
+          ${this.minuteFirst}
+        </div>
+        <div class="clock-time" id="clock-time-minuteSecond" type=${this.type}>
+          ${this.minuteSecond}
+        </div>
+      </div>
     `
   }
 }

src/components/digicipher/digicipher-style.ts

@@ -17,11 +17,11 @@ export const sharedStyles: CSSResult = css`
   }
   span {
     position: relative;
-    width: 12px;
+    width: var(--auto-24px);
-    height: 12px;
+    margin-right: var(--auto-40px);
+    height: var(--auto-24px);
     border-radius: 50%;
     display: inline-block;
-    margin-right: 20px;
     background: #f4f4f4;
     opacity: 0.3;
   }
@@ -30,8 +30,8 @@ export const sharedStyles: CSSResult = css`
   }
   #parent {
     position: relative;
-    height: 250px;
+    height: var(--auto-500px);
-    width: 250px;
+    width: var(--auto-500px);
     left: 50%;
     top: 53%;
     transform: translate(-50%, -50%);
@@ -40,7 +40,7 @@ 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);
   }
 
   p {
@@ -54,18 +54,18 @@ export const sharedStyles: CSSResult = css`
   #zero {
     position: absolute;
     left: 36%;
-    top: 270px;
+    top: 109%;
   }
   button {
     position: relative;
     width: 70px;
     height: 70px;
+    font-size: var(--auto-36px);
     border-radius: 50%;
     border: none;
     /*button背景无色*/
     background: rgba(0, 0, 0, 0);
     display: inline-block;
-    font-size: 35px;
   }
 
   /*按钮点击的效果*/
@@ -75,8 +75,8 @@ export const sharedStyles: CSSResult = css`
     position: absolute;
     top: 0px;
     left: 0px;
-    width: 70px;
+    width: var(--auto-140px);
-    height: 70px;
+    height: var(--auto-140px);
     border-radius: 50%;
     background-color: #ffffff;
     opacity: 0;
@@ -97,10 +97,10 @@ export const sharedStyles: CSSResult = css`
   }
   .topText {
     font-size: 20px;
-    height: 26.5px;
+    height: var(--auto-53px);
-    line-height: 26.5px;
+    line-height: var(--auto-53px);
-    width: 160px;
+    width: var(--auto-160px);
-    left: calc(50% - 160px / 2);
+    left: calc(50% - var(--auto-160px) / 2);
     top: 31%;
   }
   .spanContainer {
@@ -117,10 +117,10 @@ export const sharedStyles: CSSResult = css`
     font-style: normal;
     font-weight: 400;
     color: #292929;
-    width: 36px;
+    width: var(--auto-72px);
-    height: 23.5px;
+    height: var(--auto-47px);
-    line-height: 23.5px;
+    line-height: var(--auto-47px);
-    font-size: 18px;
+    font-size: var(--auto-36px);
     top: 118.5%;
   }
   .cancel {

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,6 +127,20 @@ export class StarLockNumber extends LitElement {
         }
         break
       case 'passcode-verify-error':
+        this.errors = event.detail.value
+        //当密码失败三次后
+        if (this.errors == 3) {
+          console.log('进入已锁定页面')
+          this.dispatchEvent(
+            new CustomEvent('star-digicipher-passcode-error-third', {
+              detail: {
+                value: true,
+              },
+              bubbles: true,
+              composed: true,
+            })
+          )
+        }
         // 抖动反馈
         for (let i = 0; i < 10; i++) {
           this.buttons[i].style.setProperty('animation', 'errtips .5s')
@@ -164,6 +183,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 +214,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 +239,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 +255,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 +277,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: {

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%;
     }

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)
@@ -1851,9 +1864,10 @@ export class GaiaContainer extends StarBaseElement {
         this._children.add(this._dnd.child)
         this._dnd.child.container.classList.add('dragging')
       }
-
+      let containerX =
-      let containerX = centerX - this.gridWidth / 2 - this.left
+        centerX - (dragInfo?.gridWidth || this.gridWidth) / 2 - this.left
-      let containerY = centerY - this.gridHeight / 2 - this.top
+      let containerY =
+        centerY - (dragInfo?.gridHeight || this.gridWidth) / 2 - this.top
 
       gridX = containerX + this.gridWidth / 2
       gridY = containerY + this.gridHeight / 2
@@ -1868,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
@@ -1876,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
@@ -2405,7 +2423,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

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
   }
 
@@ -247,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 rowStart = Math.round(offsetTop / this.manager.gridHeight) + 1
-    const columnStart = Math.floor(offsetLeft / this.manager.gridWidth) + 1
+    const columnStart = Math.round(offsetLeft / this.manager.gridWidth) + 1
 
     return [rowStart, columnStart]
   }
@@ -266,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]
   }
@@ -324,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
@@ -434,6 +438,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)) {
         /* 未能成功记录，记录位置已有其他子节点，需要清空位置记录并重新归位 */
@@ -455,13 +464,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') &&

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() {

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,11 +101,22 @@ 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(*) {
+    @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);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .icon-only > div > ::slotted(*) {
         border-left: 0.17vw solid var(--line-border-dm);
       }
 
@@ -113,9 +124,10 @@ export class IconControlBarGroup extends LitElement {
         border-left-style: none;
       }
 
-    :host([deep-mode]) {
+      :host {
         background: var(--background-dm);
       }
+    }
   `
 }
 

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;
+    font-size: 1.75vw;
-    color: var(--text-color-lm);
     display: none;
   }
 
@@ -147,8 +129,7 @@ export const sharedStyles: CSSResult = css`
     font-family: 'OPPOSans';
     font-style: normal;
     font-weight: 400;
-    font-size: 7px;
+    font-size: 1.75vw;
-    color: var(--text-color-lm);
   }
 
   .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);
+    }
+  }
 `

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 {
+  @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);
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .notification {
       background: var(--notification-background-dm);
     }
 
-  :host([dark-mode]) .btn-tool > div {
+    .notification > div.detail .arrow-up {
+      background: var(--arrow-background-dm);
+    }
+
+    .btn-tool > div {
       background: var(--button-background-color-dm);
     }
 
-  :host([dark-mode]) .btn-tool > div::after {
+    .btn-tool > div::after {
       color: var(--button-color-dm);
     }
 
-  :host([dark-mode]) .another-container .notificaiton-counts {
+    .another-container .notificaiton-counts {
       color: var(--notification-counts-dm);
       background: var(--notification-counts-background-dm);
     }
 
-  :host([dark-mode]) .container .title,
+    .container .title,
-  :host([dark-mode]) .notification > div.title-container .title {
+    .notification > div.title-container .title {
       color: var(--title-color-dm);
     }
 
-  :host([dark-mode]) .notification > div.title-container .timestamp {
+    .notification > div.title-container .timestamp {
       color: var(--single-text-color-dm);
     }
 
-  :host([dark-mode]) .notification > div.detail .detail-content {
+    .notification > div.detail .detail-content {
       color: var(--single-text-color-dm);
     }
 
-  :host([dark-mode]) .container .detail-content {
+    .container .detail-content {
       color: var(--more-text-color-dm);
     }
 
-  :host([dark-mode]) .one-container .timestamp {
+    .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;
-  //   // }
-  // }
 `

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,17 @@ 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);
     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 +38,7 @@ export const sharedStyles: CSSResult = css`
     top: 31%;
   }
   .cancel {
-    bottom: 13.5%;
+    bottom: 23.5%;
   }
   .errorinfo {
     top: 66%;

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'
+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
 
@@ -26,6 +31,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
@@ -93,7 +99,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的高度和宽度都是
@@ -117,18 +123,45 @@ export class StarPatternView extends LitElement {
         this.changeText = '密码设置成功'
         break
       case 'passcode-verify-success':
+        console.log('图案正确')
         this.getRed = false
+        this.changeText = '绘制图案'
         break
       case 'passcode-verify-error':
+        this.passwd = event.detail.passwd
         this.getRed = true
         this.changeText = '绘制图案错误'
+        //当密码失败三次后
+        this.errors = event.detail.value
+        if (this.errors == 3) {
+          console.log('进入已锁定页面')
+          this.initialState()
+          this.dispatchEvent(
+            new CustomEvent('star-pattern-view-passwd-error-third', {
+              detail: {
+                value: true,
+              },
+              bubbles: true,
+              composed: true,
+            })
+          )
+        }
         break
 
       default:
         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 = ''
     this.passwd = []
     this.getRed = false
@@ -156,10 +189,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 {
@@ -190,6 +221,8 @@ export class StarPatternView extends LitElement {
     }
   }
   touchStartCancel() {
+    /* 点击取消，擦除绘制图案 */
+    this.initialState()
     this.dispatchEvent(
       new CustomEvent('star-pattern-view-cancel', {
         detail: {
@@ -282,7 +315,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
     }
   }
@@ -291,7 +324,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', {
@@ -305,7 +337,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: {
@@ -317,7 +348,6 @@ export class StarPatternView extends LitElement {
       )
     } else {
       this.changeText = '请重新绘制图案'
-      console.log('###', this.passwd)
       this.confirm = false
       this.passwd = []
     }

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

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') {
+    this.init()
-      await this.init()
-    }
-    this.percent = this._battery.level * 100
-    this.charge = this._battery.charging
   }
 
   handleEvent(event: Event): void {

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>

src/widgets/mozElement.ts

@@ -52,8 +52,9 @@ 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;
         }
       </style>
     `

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 {
@@ -64,7 +64,10 @@ class WeatherWidget extends GaiaWidget {
   }
 
   // @ts-ignore
-  init() {}
+  init = () => {}
+  protected firstUpdated() {
+    this.widget.resize()
+  }
 
   static get observedAttributes() {
     return ['type']
@@ -81,18 +84,13 @@ class WeatherWidget extends GaiaWidget {
   render() {
     return html`
       <star-weather type="${this.type}"></star-weather>
-    `
+      <style>
-  }
-
-  static override get styles() {
-    return [
-      css`
         :host {
           height: 100%;
           width: 100%;
         }
-      `,
+      </style>
-    ]
+    `
   }
 }