TASK:113634 - 优化数字锁屏组件逻辑，符合使用条件，添加数字/图案锁屏组件编译配置

src/components/digicipher/digicipher.ts

@@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray, PropertyValueMap} from 'lit'
 import {customElement, property, query, queryAll} from 'lit/decorators.js'
-import {sharedStyles} from './digicipher-style'
+import {sharedStyles} from './digicipher-style.js'
 
 @customElement('star-digicipher')
 export class StarLockNumber extends LitElement {
@@ -11,15 +11,16 @@ export class StarLockNumber extends LitElement {
   @queryAll('button') buttons!: NodeListOf<HTMLButtonElement>
   @query('zero') zero!: HTMLButtonElement
   @queryAll('span') span!: NodeListOf<HTMLSpanElement>
-  @query('spanContainer') spanContainer!: HTMLDivElement
+  @query('.spanContainer') spanContainer!: HTMLDivElement
   @query('#parent') parent!: HTMLDivElement
   @query('.delete') _delete!: HTMLParagraphElement
   @query('.cancel') cancel!: HTMLParagraphElement
   @query('.topText') topText!: HTMLParagraphElement
   @query('.screen') screen!: HTMLDivElement
 
-  @property({type: Boolean}) locked = false
+  @property({type: String}) mode = "default"
-  @property({type: Boolean}) saveMode = false
+  @property({type: String}) cancelNote = "取消"
+  @property({type: String}) deleteNote = "删除"
   @property({type: Boolean}) confirm = false
   @property({type: Number}) tried = 0
   @property({type: Number}) time = 0
@@ -38,14 +39,29 @@ export class StarLockNumber extends LitElement {
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
-    console.log(this.saveMode)
+    switch(this.mode){
-    this.changeText = this.saveMode ? '更改' : '输入'
+      case "create":
+        this.changeText = '新建密码';
+        break;
+      case "verify":
+      case "comfirm":
+        this.changeText = '输入密码';
+        break;
+      case "default":
+        this.changeText = '星光麒麟密码组件'
+    }
+    this.spanContainer.style.visibility = `visible`
+    this.parent.style.visibility = `visible`
+    this.addEventListener('passcode-create-success',this)
+    this.addEventListener('passcode-verify-success',this)
+    this.addEventListener('passcode-verify-error',this)
+    this.addEventListener('passcode-reset',this)
   }
 
   render() {
     return html`
       <div id="slideUp">
-        <p class="topText">${this.changeText}密码</p>
+        <p class="topText">${this.changeText}</p>
         <div class="spanContainer">
           <span id="sOne"></span>
           <span id="sTwo"></span>
@@ -71,8 +87,8 @@ export class StarLockNumber extends LitElement {
             <button data-num="8">8</button>
             <button data-num="9">9</button>
           </div>
-          <p class="cancel" id="lockCancel">取消</p>
+          <p class="cancel" id="lockCancel">${this.cancelNote}</p>
-          <p class="delete">删除</p>
+          <p class="delete">${this.deleteNote}</p>
         </div>
       </div>
     `
@@ -87,6 +103,50 @@ export class StarLockNumber extends LitElement {
       console.log(this.second)
     }, 1000)
   }
+  handleEvent(event: CustomEvent) {
+    switch (event.type) {
+      case 'passcode-create-success':
+        this.guess = ''
+        this.clicks = 0
+        this.spanContainer.style.visibility = `hidden`;
+        this.parent.style.visibility = `hidden`;
+        this.changeText = '保存成功';
+        break
+      case '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':
+             // 抖动反馈
+        for (let i = 0; i < 10; i++) {
+          this.buttons[i].style.setProperty('animation', 'errtips .5s')
+        }
+        //清空密码且删除抖动反馈
+        for (let i = 0; i < 6; i++) {
+          this.changeBgColor('#F4F4F4', i, 0.4)
+        }
+        this.guess = ''
+        this.clicks = 0
+        break
+        case 'passcode-reset':
+          this.guess = ''
+          this.clicks = 0
+          for (let i = 0; i < 6; i++) {
+            this.changeBgColor('#F4F4F4', i, 0.4)
+          }
+          if(this.mode == "create"){
+          this.changeText = '新建密码'
+          this.spanContainer.style.visibility = `visible`
+          this.parent.style.visibility = `visible`
+          }else{
+            this.changeText = '输入密码'
+          }
+      break
+    }
+  }
 
   touchStart(e: TouchEvent) {
     e.preventDefault()
@@ -96,105 +156,38 @@ export class StarLockNumber extends LitElement {
       this.makeZero()
       //点击反馈
       this.changeNumberBgColor()
-      if (this.clicks < 6) {
+      if (this.clicks < 5) {
         //圆点变化
-        this.changeBgColor('#333333', this.clicks, 1)
+        this.changeBgColor('#F4F4F4', this.clicks, 1)
         this.clicks += 1
         this.guess += (e.target as HTMLElement).dataset.num
-        // console.log('输入后为：', this.guess)
+      }else if (this.clicks == 5){
-      }
+        if (this.mode == "create"){
-      //进入存储模式，输入6次数字后存储密码，圆点变色
+          if (!this.confirm) {
-      if (this.saveMode && this.clicks == 6) {
+            this.changePasswd()
-        if (!this.confirm) {
+          } else {
-          this.changePasswd()
+            this.confirmPasswd()
-        } else {
+          }
-          this.confirmPasswd()
+        }else if(this.mode == "verify"){
+          this.dispatchPasswd()
         }
       }
-      //密码错误
-      // if (this.clicks == 6 && this.guess !== this.passwd && !this.saveMode) {
-      if (this.clicks == 6 && !this.saveMode) {
-        //第一次密码错误开始计时120秒
-        if (this.tried == 0) {
-          this.second = 120
-          this.timer()
-        }
-        //输错密码5次后 --- 锁定屏幕
-        if (this.tried++ < 4) {
-          this.locked = false
-          // console.log('密码错误 已尝试' + this.tried + '次', this.locked)
-        } else {
-          // console.log('密码错误 已尝试' + this.tried + '次')
-          this.locked = true
-          clearInterval(this.time)
-          // console.log('locked = ' + this.locked + ' 进入已锁定')
-          this.tried = 0
-          this.dispatchEvent(
-            new CustomEvent('star-digicipher-locked', {
-              detail: {
-                value: this.passwd,
-              },
-              bubbles: true,
-              composed: true,
-            })
-          )
-          // 跳转到已锁屏页面
-          // window.location.href = '#locked'
-        }
-        // 抖动反馈
-        // for (let i = 0; i < 10; i++) {
-        //   this.buttons[i].style.setProperty('animation', 'errtips .5s')
-        // }
-        //清空密码且删除抖动反馈
-        for (let i = 0; i < 6; i++) {
-          this.changeBgColor('#000000', i, 0.2)
-        }
-        this.guess = ''
-        this.clicks = 0
-      }
     } else if ((e.target as Element).className === 'delete') {
       if (this.clicks == 0) {
-        // console.log('不可再删除')
       } else {
         this.clicks -= 1
-        this.changeBgColor('#000000', this.clicks, 0.2)
+        this.changeBgColor('#F4F4F4', this.clicks, 0.4)
         this.guess = this.guess.slice(0, -1)
-        // console.log('删除后为：', this.guess)
       }
     } else if ((e.target as Element).className === 'cancel') {
       //点击取消，返回锁屏
-      console.log('返回锁屏')
       //   this.makeZero()
       for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
+        this.changeBgColor('#F4F4F4', i, 0.4)
       }
       this.guess = ''
       this.clicks = 0
     }
-    //密码正确
-    if (this.guess === this.passwd && !this.saveMode) {
-      clearInterval(this.time)
-      this.tried = 0
-      for (let j = 0; j < 10; j++) {
-        this.buttons[j].removeAttribute('style')
-      }
-      // console.log('密码正确')
-      for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
-      }
-      this.guess = ''
-      this.clicks = 0
-      this.slideUp.style.setProperty('animation', 'suctip .6s')
-      this.dispatchEvent(
-        new CustomEvent('star-digicipher-success', {
-          detail: {
-            value: this.passwd,
-          },
-          bubbles: true,
-          composed: true,
-        })
-      )
-    }
   }
   touchEnd(e: TouchEvent) {
     if ((e.target as Element).tagName === 'BUTTON') {
@@ -219,32 +212,48 @@ export class StarLockNumber extends LitElement {
       this.buttons[j].removeAttribute('style')
     }
   }
-  //更改密码
+
-  changePasswd() {
+  //发送密码
-    // this.savewd = this.guess
+  dispatchPasswd(){
-    // console.log('this.savewd = ', this.savewd)
+    this.passwd = this.guess
-    for (let i = 0; i < 6; i++) {
-      this.changeBgColor('#000000', i, 0.2)
-    }
     this.guess = ''
     this.clicks = 0
+    this.dispatchEvent(
+      new CustomEvent('star-digicipher-passcode-verify', {
+        detail: {
+          value: this.passwd,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+  //更改密码
+  changePasswd() {
+    this.savewd = this.guess
+    this.clicks = 0
+    for (let i = 0; i < 6; i++) {
+      this.changeBgColor('#F4F4F4', i, 0.4)
+    }
+    this.guess = ''
+
     this.confirm = true
-    this.changeText = '确认'
+    this.changeText = '确认密码'
   }
   //确认密码
   confirmPasswd() {
-    // if (this.savewd == this.guess) {
+    if (this.savewd.toString() == this.guess.toString() ) {
-    if (1) {
+    // if (1) {
-      // this.passwd = this.savewd
+      this.passwd = this.savewd
       this.savewd = ''
       for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
+        this.changeBgColor('#F4F4F4', i, 0.4)
       }
       this.guess = ''
       this.clicks = 0
-      console.log('新密码设置成功：', this.passwd)
+      this.changeText = '新建密码'
       this.dispatchEvent(
-        new CustomEvent('star-digicipher-savesuccess', {
+        new CustomEvent('star-digicipher-passcode-create', {
           detail: {
             value: this.passwd,
           },
@@ -253,18 +262,14 @@ export class StarLockNumber extends LitElement {
         })
       )
     } else {
-      // console.log('两次密码输入不一致，请重新设置密码')
-      // console.log('this.savewd = ', this.savewd)
       for (let i = 0; i < 6; i++) {
-        this.changeBgColor('#000000', i, 0.2)
+        this.changeBgColor('#F4F4F4', i, 0.4)
       }
       this.guess = ''
       this.clicks = 0
       this.savewd = ''
-      // console.log('this.savewd', this.savewd)
-      // console.log('this.passwd', this.passwd)
       this.confirm = false
-      this.changeText = '更改'
+      this.changeText = '更改密码'
     }
-  }
+}
 }

src/components/digicipher/index.ts

@@ -0,0 +1 @@
+export * from './digicipher.js'

src/components/digicipher/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/digicipher",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./digicipher.js": {
+      "default": "./digicipher.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}

src/components/pattern-view/index.ts

@@ -0,0 +1 @@
+export * from './pattern-view.js'

src/components/pattern-view/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/pattern",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./pattern-view.js": {
+      "default": "./pattern-view.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}