✨新增pin码解锁功能

package.json

@@ -12,13 +12,15 @@
     "axios": "^0.26.1",
     "dayjs": "^1.11.0",
     "element-plus": "^2.1.7",
+    "md5": "^2.3.0",
     "mitt": "^3.0.0",
     "pinia": "^2.0.12",
     "vue": "^3.2.31"
   },
   "devDependencies": {
     "@tailwindcss/line-clamp": "^0.3.1",
     "@types/chrome": "0.0.180",
+    "@types/md5": "^2.3.2",
     "@types/node": "^17.0.21",
     "@vitejs/plugin-vue": "^2.2.4",
     "autoprefixer": "^10.4.2",

src/components/layout/user-layout.vue

@@ -15,9 +15,8 @@
 
 <script lang="ts" setup>
 
-import {onBeforeMount, ref} from "vue";
+import {ref} from "vue";
 import {useNavigation} from "@/hooks/useNavigation";
-import {useGlobalStore} from "@/edge/popup/useGlobal";
 
 interface ITab {
   name: string;

src/components/popup.vue

@@ -6,10 +6,30 @@
 
 <script lang="ts" setup>
 import {CONNECT_NAME} from "@/helpers/constants";
+import {adapter} from "@/helpers/adapter";
+import {MessageType} from "@/helpers/message";
+import {useNavigation} from "@/hooks/useNavigation";
+import {useGlobalStore} from "@/edge/popup/useGlobal";
 
 if (import.meta.env.PROD) {
   chrome.runtime.connect({name: CONNECT_NAME});
 }
+const {routerTo} = useNavigation()
+const store = useGlobalStore()
+adapter.on((message, sender, sendResponse) => {
+  switch (message.type) {
+    case MessageType.PIN_STATE:
+      const locked = message.data
+      store.$patch({
+        passed: !locked
+      })
+      if (locked) {
+        routerTo("/locked")
+      }
+      sendResponse('ok')
+      break
+  }
+})
 
 
 </script>

src/components/popup/init.vue

@@ -50,7 +50,7 @@ const onSave = (formEl: FormInstance | undefined) => {
         const {endpoint} = form
         store.set(ENDPOINT, endpoint)
         ElMessage.success('保存成功')
-        routerTo({
+        await routerTo({
           name: "Login"
         })
       }

src/components/popup/locked.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="lock p-[24px] flex items-center justify-center relative">
+    <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        label-width="40px"
+        class="w-full"
+    >
+      <el-form-item label="PIN">
+        <el-input v-model="ruleForm.pin" type="password" show-password placeholder="请输入pin码"/>
+      </el-form-item>
+      <el-form-item class="mt-[24px]">
+        <el-button type="primary" class="w-full" @click="submitForm">确定</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button type="text" class="absolute right-[24px] top-[12px]" @click="open">注销</el-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive, ref} from 'vue'
+import type {FormInstance} from 'element-plus'
+import {ElMessage, ElMessageBox} from "element-plus";
+import {useGlobalStore} from "@/edge/popup/useGlobal";
+import {useNavigation} from "@/hooks/useNavigation";
+import {adapter} from "@/helpers/adapter";
+import {MessageType} from "@/helpers/message";
+
+const store = useGlobalStore()
+const {routerTo} = useNavigation()
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive({
+  pin: '',
+})
+
+const submitForm = async () => {
+  const {pin} = ruleForm
+  if (!pin) {
+    ElMessage.error('请输入pin码')
+    return
+  }
+  if (adapter.md5(pin) === store.pin) {
+    ElMessage.success('解锁成功！')
+    adapter.emit({
+      type: MessageType.PIN_PASS
+    })
+    await routerTo('/user')
+  } else {
+    ElMessage.error('错误的PIN码')
+  }
+}
+
+const open = () => {
+  ElMessageBox.confirm(
+      '确定要注销吗?',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        customClass: '!w-[300px]',
+        type: 'warning',
+      }
+  )
+      .then(async () => {
+        await store.clear()
+        ElMessage({
+          type: 'success',
+          message: '注销成功！',
+        })
+        await routerTo({
+          name: "Login"
+        })
+      }).catch(() => {
+  })
+}
+</script>
+
+<style lang="less">
+.lock {
+  background: url("../../assets/deer.png") 100% no-repeat;
+  height: 100%;
+  width: 100%;
+}
+</style>

src/components/popup/setting.vue

@@ -8,6 +8,12 @@
       <span>API endpoint</span>
       <el-button type="primary" class="!bg-[#343e7e] !border-[#343e7e]" @click="reset">重置</el-button>
     </div>
+    <div class="box">
+      <span>使用PIN解锁</span>
+      <div class="w-[60px] text-center">
+        <el-switch v-model="pin" @change="changePin"/>
+      </div>
+    </div>
     <div class="box">
       <span>项目地址（GitHub） </span>
       <el-button type="primary" class="!bg-[#343e7e] !border-[#343e7e]" @click="openUrl">前往</el-button>
@@ -20,10 +26,13 @@ import {useGlobalStore} from "@/edge/popup/useGlobal";
 import {storeToRefs} from "pinia";
 import {useNavigation} from "@/hooks/useNavigation";
 import {adapter} from "@/helpers/adapter";
+import {ref} from "vue";
+import {ElMessage, ElMessageBox} from "element-plus";
 
 const store = useGlobalStore()
 const {userInfo} = storeToRefs(store)
 const {routerTo} = useNavigation()
+const pin = ref(!!store.pin)
 
 const logout = () => {
   store.clear()
@@ -43,6 +52,32 @@ const openUrl = () => {
   adapter.openUrl("https://github.com/xkrfer/pushdeer-crx")
 }
 
+const changePin = () => {
+  if (pin.value) {
+    ElMessageBox.prompt('请输入4位数字PIN码，当重新打开浏览器时需要输入PIN码才能查看消息内容：', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      customClass: '!w-[300px]',
+      inputPattern: /^\d{4}$/,
+      inputErrorMessage: '请输入正确的PIN码',
+    })
+        .then(async ({value}) => {
+          const md5 = adapter.md5(value)
+          await store.set('pin', md5)
+          ElMessage({
+            type: 'success',
+            message: `设置成功，PIN码为${value}`,
+          })
+        })
+        .catch(async () => {
+          pin.value = false
+          await store.set('pin', "")
+        })
+  }else{
+    store.set('pin', "")
+  }
+}
+
 </script>
 
 <style lang="less">