Merge pull request #154 in YR/star-web-components from star-lockscreen-adjust-position to master

* commit '82aae349e75eb6820f4a03907f459b684fcaf7f1':
  TASK: #120449 修改需求-图形和数字分别输入错误5次，锁定，并在120秒内记录错误次数。
  TASK: #120449 区分图形和密码验证密码事件name
  TASK: #120449 lockscreen样式调整

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

@@ -52,6 +52,10 @@ export const autoPxStyle: CSSResult = css`
     --auto-77px: calc(77px / var(--hostDevicePixelRatio));
     --auto-80px: calc(80px / var(--hostDevicePixelRatio));
     --auto-82px: calc(80px / var(--hostDevicePixelRatio));
+    --auto-70px: calc(70px / 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));
@@ -62,6 +66,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-124px: calc(124px / var(--hostDevicePixelRatio));
     --auto-128px: calc(128px / var(--hostDevicePixelRatio));
     --auto-129px: calc(129px / var(--hostDevicePixelRatio));
+    --auto-140px: calc(140px / var(--hostDevicePixelRatio));
     --auto-152px: calc(152px / var(--hostDevicePixelRatio));
     --auto-160px: calc(160px / var(--hostDevicePixelRatio));
     --auto-166px: calc(166px / var(--hostDevicePixelRatio));
@@ -88,6 +93,7 @@ export const autoPxStyle: CSSResult = css`
     --auto-382px: calc(382px / var(--hostDevicePixelRatio));
     --auto-388px: calc(388px / var(--hostDevicePixelRatio));
     --auto-396px: calc(396px / var(--hostDevicePixelRatio));
+    --auto-411px: calc(411px / var(--hostDevicePixelRatio));
     --auto-418px: calc(418px / var(--hostDevicePixelRatio));
     --auto-424px: calc(424px / var(--hostDevicePixelRatio));
     --auto-436px: calc(436px / var(--hostDevicePixelRatio));
@@ -101,10 +107,12 @@ export const autoPxStyle: CSSResult = css`
     --auto-520px: calc(520px / var(--hostDevicePixelRatio));
     --auto-524px: calc(520px / var(--hostDevicePixelRatio));
     --auto-534px: calc(534px / var(--hostDevicePixelRatio));
+    --auto-543px: calc(543px / var(--hostDevicePixelRatio));
     --auto-607px: calc(607px / var(--hostDevicePixelRatio));
     --auto-620px: calc(620px / var(--hostDevicePixelRatio));
     --auto-640px: calc(640px / var(--hostDevicePixelRatio));
     --auto-736px: calc(736px / var(--hostDevicePixelRatio));
+    --auto-781px: calc(781px / var(--hostDevicePixelRatio));
     --auto-815px: calc(815px / var(--hostDevicePixelRatio));
     --auto-1040px: calc(1040px / var(--hostDevicePixelRatio));
     --auto-1592px: calc(1592px / var(--hostDevicePixelRatio));

src/components/digicipher/digicipher-style.ts

@@ -46,6 +46,7 @@ export const sharedStyles: CSSResult = css`
   p {
     position: absolute;
     font-family: 'OPPOSans';
+    font-size: var(--auto-40px);
     font-style: normal;
     font-weight: 400;
     color: #292929;
@@ -58,9 +59,9 @@ export const sharedStyles: CSSResult = css`
   }
   button {
     position: relative;
-    width: 70px;
+    width: var(--auto-140px);
-    height: 70px;
+    height: var(--auto-140px);
-    font-size: var(--auto-36px);
+    font-size: var(--auto-70px);
     border-radius: 50%;
     border: none;
     /*button背景无色*/
@@ -94,13 +95,13 @@ export const sharedStyles: CSSResult = css`
   }
   #textcenter {
     text-align: center;
+    font-size: var(--auto-40px);
+    display: flex;
+    justify-content: center;
   }
   .topText {
-    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%;
   }
   .spanContainer {

src/components/digicipher/digicipher.ts

@@ -58,8 +58,8 @@ export class StarLockNumber extends StarBaseElement {
     this.spanContainer.style.visibility = `visible`
     this.parent.style.visibility = `visible`
     this.addEventListener('passcode-create-success', this)
-    this.addEventListener('passcode-verify-success', this)
+    this.addEventListener('digicipher-passcode-verify-success', this)
-    this.addEventListener('passcode-verify-error', this)
+    this.addEventListener('digicipher-passcode-verify-error', this)
     this.addEventListener('passcode-reset', this)
   }
 
@@ -119,20 +119,19 @@ export class StarLockNumber extends StarBaseElement {
         this.parent.style.visibility = `hidden`
         this.changeText = '保存成功'
         break
-      case 'passcode-verify-success':
+      case 'digicipher-passcode-verify-success':
         this.guess = ''
         this.clicks = 0
         for (let i = 0; i < 6; i++) {
           this.changeBgColor('#F4F4F4', i, 0.4)
         }
         break
-      case 'passcode-verify-error':
+      case 'digicipher-passcode-verify-error':
         this.errors = event.detail.value
-        //当密码失败三次后
+        //当密码失败5次后
-        if (this.errors == 3) {
+        if (this.errors == 5) {
-          console.log('进入已锁定页面')
           this.dispatchEvent(
-            new CustomEvent('star-digicipher-passcode-error-third', {
+            new CustomEvent('star-digicipher-passcode-error-fifth', {
               detail: {
                 value: true,
               },
@@ -252,7 +251,7 @@ export class StarLockNumber extends StarBaseElement {
     this.guess = ''
     this.clicks = 0
     this.dispatchEvent(
-      new CustomEvent('star-digicipher-passcode-verify', {
+      new CustomEvent('star-digicipher-passwd', {
         detail: {
           value: this.passwd,
         },

src/components/pattern-view/pattern-view-style.ts

@@ -1,8 +1,8 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
-  :host {
+  /* :host {
     --top-dir: 40%;
-  }
+  } */
   canvas {
     display: block;
     margin: 0 auto;
@@ -15,7 +15,6 @@ 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);
@@ -32,7 +31,7 @@ export const sharedStyles: CSSResult = css`
   }
   #canvasdown {
     position: relative;
-    top: var(--top-dir);
+    top: var(--auto-781px);
   }
   .textTop {
     top: 31%;

src/components/pattern-view/pattern-view.ts

@@ -9,7 +9,7 @@ import {sharedStyles} from './pattern-view-style.js'
 
 @customElement('star-pattern-view')
 export class StarPatternView extends StarBaseElement {
-  _topDir: string = ''
+  /* _topDir: string = '' */
   _getRed: boolean = false
 
   public static override get styles(): CSSResultArray {
@@ -17,6 +17,7 @@ export class StarPatternView extends StarBaseElement {
   }
   @query('canvas') canvas!: HTMLCanvasElement
   @query('.textTop') saveP!: HTMLParagraphElement
+  @query('#canvasdown') canvasdown!: HTMLDivElement
   @property({attribute: false}) cxt!: CanvasRenderingContext2D
   @property({type: Boolean})
   get getRed() {
@@ -48,7 +49,7 @@ export class StarPatternView extends StarBaseElement {
   @property({type: String}) changeText = ''
   @property({type: String}) cancel = '取消'
   @property({type: String}) lessfourinfo = ''
-  @property({type: String})
+  /* @property({type: String})
   get topDir() {
     return this._topDir
   }
@@ -56,7 +57,7 @@ export class StarPatternView extends StarBaseElement {
     this.style.setProperty('--top-dir', value)
     this._topDir = value
     this.top = parseInt(this._topDir)
-  }
+  } */
 
   render() {
     if (!this.saveMode) {
@@ -99,8 +100,8 @@ export class StarPatternView extends StarBaseElement {
   ): void {
     //settings中，图形密码上下的文字以及图形密码的位置都有所变化
     if (this.saveMode) {
-      this.topDir = '34%'
+      this.canvasdown.style.setProperty('top', 'var(--auto-543px)')
-      this.saveP.style.setProperty('top', '27.8%')
+      this.saveP.style.setProperty('top', 'var(--auto-411px)')
     }
     //canvas的高度和宽度都是
     this.canvas.width = this.canvasWidth
@@ -113,8 +114,8 @@ export class StarPatternView extends StarBaseElement {
     this.Draw()
     this.changeText = this.saveMode ? '请绘制图案' : '绘制图案'
     this.addEventListener('passcode-create-success', this)
-    this.addEventListener('passcode-verify-success', this)
+    this.addEventListener('pattern-passcode-verify-success', this)
-    this.addEventListener('passcode-verify-error', this)
+    this.addEventListener('pattern-passcode-verify-error', this)
   }
 
   handleEvent(event: CustomEvent) {
@@ -122,22 +123,21 @@ export class StarPatternView extends StarBaseElement {
       case 'passcode-create-success':
         this.changeText = '密码设置成功'
         break
-      case 'passcode-verify-success':
+      case 'pattern-passcode-verify-success':
         console.log('图案正确')
         this.getRed = false
         this.changeText = '绘制图案'
         break
-      case 'passcode-verify-error':
+      case 'pattern-passcode-verify-error':
         this.passwd = event.detail.passwd
         this.getRed = true
         this.changeText = '绘制图案错误'
         //当密码失败三次后
         this.errors = event.detail.value
-        if (this.errors == 3) {
+        if (this.errors == 5) {
-          console.log('进入已锁定页面')
           this.initialState()
           this.dispatchEvent(
-            new CustomEvent('star-pattern-view-passwd-error-third', {
+            new CustomEvent('star-pattern-view-passwd-error-fifth', {
               detail: {
                 value: true,
               },