✨ key/推送页面

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@fingerprintjs/fingerprintjs": "^3.3.3",
     "axios": "^0.26.1",
+    "dayjs": "^1.11.0",
     "element-plus": "^2.1.7",
     "mitt": "^3.0.0",
     "pinia": "^2.0.12",

src/components/layout/user-layout.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="user">
-    <div>
+    <div class="h-[552px]">
       <router-view/>
     </div>
-    <div class="tab-box">
-      <div class="tab" :class="active === tab.path ? 'active':''" v-for="tab in Tabs" :key="tab.name"
+    <div class="tab-box h-[48px]">
+      <div class="tab cursor-pointer" :class="active === tab.path ? 'active':''" v-for="tab in Tabs" :key="tab.name"
            @click="onTabChange(tab)">
         <span class="iconfont" :class="tab.icon"></span>
         <span>{{ tab.name }}</span>
@@ -40,6 +40,11 @@ const Tabs: ITab[] = [
     path: "Key",
     icon: "icon-yuechi"
   },
+  {
+    name: "推送",
+    path: "Push",
+    icon: "icon-tuisong"
+  },
   {
     name: "设置",
     path: "Setting",
@@ -66,9 +71,6 @@ const onTabChange = (tab: ITab) => {
   background: url("../../assets/deer.png") 100% no-repeat;
   height: 100%;
   width: 100%;
-  display: grid;
-  grid-template-rows: 1fr 48px;
-
   .tab-box {
     display: flex;
     background: #f6f5f6;
@@ -79,8 +81,6 @@ const onTabChange = (tab: ITab) => {
       display: flex;
       justify-content: center;
       align-items: center;
-      cursor: pointer;
-
       &.active {
         color: #313d7d;
       }

src/components/popup/device.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="py-[24px] px-[12px] h-full">
+  <div class="pb-[24px] pt-[12px] px-[12px] h-full" v-loading="listLoading">
     <div class="flex justify-between items-center text-[24px] pb-[12px]">
       <h3 class="font-bold">设备</h3>
       <el-button type="primary" class="!bg-[#343e7e] !border-[#343e7e]" @click="addDevice">新增</el-button>
     </div>
-    <div class="mt-[12px]">
+    <el-scrollbar height="492px">
       <div class="device" v-for="device in devices" :key="device.id">
         <div class="box relative">
           <div class="flex items-center">
@@ -28,27 +28,27 @@
           </div>
         </div>
       </div>
-    </div>
+    </el-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useGetDeviceList} from "@/hooks/useGetDeviceList";
-import {useGetFingerprint} from "@/hooks/useGetFingerprint";
-import {useCreateDevice} from "@/hooks/useCreateDevice";
+import {useGetDeviceList} from "@/hooks/device/useGetDeviceList";
+import {useGetFingerprint} from "@/hooks/device/useGetFingerprint";
+import {useCreateDevice} from "@/hooks/device/useCreateDevice";
 import {useGlobalStore} from "@/edge/popup/useGlobal";
 import {storeToRefs} from "pinia";
 import {ElMessage} from "element-plus";
-import {useRemoveDevice} from "@/hooks/useRemoveDevice";
-import {useRenameDevice} from "@/hooks/useRenameDevice";
+import {useRemoveDevice} from "@/hooks/device/useRemoveDevice";
+import {useRenameDevice} from "@/hooks/device/useRenameDevice";
 
 const store = useGlobalStore()
 
 const {devices, device_id} = storeToRefs(store)
 
 useGetFingerprint()
 
-const {listDevice} = useGetDeviceList()
+const {listDevice, listLoading} = useGetDeviceList()
 
 const {createDevice} = useCreateDevice()
 
@@ -90,7 +90,7 @@ const rename = async (id: number) => {
 }
 
 .device-remove {
-  width: 300px!important;
+  width: 300px !important;
 }
 
 </style>

src/components/popup/key.vue

@@ -1,12 +1,68 @@
 <template>
-  <div class="py-[24px] px-[12px] h-full">
+  <div class="pb-[24px] pt-[12px] px-[12px] h-full" v-loading="listLoading">
     <div class="flex justify-between items-center text-[24px] pb-[12px]">
       <h3 class="font-bold">Key</h3>
-      <el-button type="primary"  class="!bg-[#343e7e] !border-[#343e7e]">新增</el-button>
+      <el-button type="primary" class="!bg-[#343e7e] !border-[#343e7e]" :disabled="createLoading" @click="addKey">新增
+      </el-button>
     </div>
+    <el-scrollbar height="492px">
+      <div v-for="key in keyList" :key="key.id" class="relative">
+        <div class="box flex-col">
+          <div class="flex w-full justify-between items-center">
+            <div class="flex items-center">
+              <img :src="avatar" class="h-[32px] w-[32px]" alt=""/>
+              <span class="self-end ml-[10px]">{{ key.name }}</span>
+            </div>
+            <span class="self-end"> <i class="iconfont icon-icon text-[16px] mr-[5px]"></i>{{ key.created_at }}</span>
+          </div>
+          <div class="my-[12px] w-full">
+            <el-input v-model="key.key" readonly/>
+          </div>
+          <el-divider border-style="dashed" class="!my-[0px]"/>
+          <div class="mt-[12px] flex justify-between w-full">
+            <el-button plain @click="reset(key.id)">重置</el-button>
+            <el-button type="primary" @click="copy(key.key)">复制</el-button>
+          </div>
+        </div>
+        <div class="absolute right-[28px] top-0">
+          <el-popconfirm title="确认删除此Key?" confirm-button-text="确定"
+                         @confirm="remove(key.id)"
+                         cancel-button-text="取消">
+            <template #reference>
+              <span class="iconfont icon-shanchu text-[18px] cursor-pointer hover:text-[#313d7d]"></span>
+            </template>
+          </el-popconfirm>
+        </div>
+      </div>
+    </el-scrollbar>
   </div>
 </template>
 
 <script lang="ts" setup>
+import avatar from "@/assets/avatar.png";
+import {useGetKeyList} from "@/hooks/key/useGetKeyList";
+import {useCreateKey} from "@/hooks/key/useCreateKey";
+import {useRegen} from "@/hooks/key/useRegen";
+import {useCopy} from "@/hooks/useCopy";
+import {useRemoveKey} from "@/hooks/key/useRemoveKey";
 
+const {keyList, getKeyList, listLoading} = useGetKeyList()
+const {createKey, createLoading} = useCreateKey()
+const {regenKey} = useRegen()
+const {removeKey} = useRemoveKey()
+const {copy} = useCopy()
+const addKey = async () => {
+  await createKey()
+  await getKeyList()
+}
+
+const reset = async (id: number) => {
+  await regenKey(id)
+  await getKeyList()
+}
+
+const remove = async (id: number) => {
+  await removeKey(id)
+  await getKeyList()
+}
 </script>

src/components/popup/message.vue

@@ -1,5 +1,9 @@
 <template>
-  message
+  <div class="pb-[24px] pt-[12px] px-[12px] h-full">
+    <div class="flex justify-between items-center text-[24px] pb-[12px]">
+      <h3 class="font-bold">消息</h3>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>

src/components/popup/push.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="pb-[24px] pt-[12px] px-[12px] h-full">
+    <div class="flex justify-between items-center text-[24px] pb-[12px]">
+      <h3 class="font-bold">推送</h3>
+    </div>
+    <div>
+      <el-form :model="form" label-width="60px" :rules="rules" ref="Form">
+        <el-form-item label="类型">
+          <el-radio-group v-model="form.type">
+            <el-radio label="markdown">MarkDown</el-radio>
+            <el-radio label="text">文本</el-radio>
+            <el-radio label="image">图片</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="Key" prop="pushkey">
+          <el-input v-model="form.pushkey" placeholder="请填入Key"/>
+        </el-form-item>
+        <el-form-item label="标题" prop="text">
+          <el-input v-model="form.text" placeholder="请输入消息标题"/>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input v-model="form.desp" type="textarea" :rows="12" resize="none" placeholder="请输入消息内容"/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onPush">发送</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useGetKeyList} from "@/hooks/key/useGetKeyList";
+import {useGlobalStore} from "@/edge/popup/useGlobal";
+import {storeToRefs} from "pinia";
+import {usePushMessage} from "@/hooks/message/usePushMessage";
+import {watch} from "vue";
+const {onPush, Form, form, rules} = usePushMessage()
+const store = useGlobalStore()
+const {pushkeys} = storeToRefs(store)
+
+watch(() => pushkeys, () => {
+  if (pushkeys.value.length > 0) {
+    form.pushkey = pushkeys.value[0]
+  }
+}, {
+  deep: true,
+  immediate: true
+})
+
+
+useGetKeyList()
+</script>

src/edge/auto-imports.d.ts

@@ -1,10 +1,6 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
-  const ElButton: typeof import('element-plus/es')['ElButton']
-  const ElForm: typeof import('element-plus/es')['ElForm']
-  const ElFormItem: typeof import('element-plus/es')['ElFormItem']
-  const ElInput: typeof import('element-plus/es')['ElInput']
-  const ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+
 }
 export {}

src/edge/components.d.ts

@@ -5,10 +5,23 @@
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
+    Loading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }
 

src/edge/popup/popup.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3301458_fsvk2g19d49.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3301458_rqalag1f00t.css">
 </head>
 <body>
 <div id="app"></div>

src/edge/popup/router.ts

@@ -6,6 +6,7 @@ import Setting from "@/components/popup/setting.vue"
 import Device from "@/components/popup/device.vue"
 import Message from "@/components/popup/message.vue"
 import Key from "@/components/popup/key.vue"
+import Push from "@/components/popup/push.vue"
 import BlankLayout from "@/components/layout/blank-layout.vue";
 import UserLayout from "@/components/layout/user-layout.vue";
 import {useGlobalStore} from "@/edge/popup/useGlobal";
@@ -57,6 +58,11 @@ export const router = createRouter({
                             name: "Key",
                             component: Key
                         },
+                        {
+                            path: "push",
+                            name: "Push",
+                            component: Push
+                        },
                         {
                             path: "setting",
                             name: "Setting",

src/edge/popup/useGlobal.ts

@@ -24,7 +24,8 @@ export const useGlobalStore = defineStore<'global', {
     userInfo?: IUser,
     mounted: boolean,
     device_id: string,
-    devices: any[]
+    devices: any[],
+    pushkeys: string[]
 }, any, any>("global", {
     state() {
         return {
@@ -34,7 +35,8 @@ export const useGlobalStore = defineStore<'global', {
             userInfo: undefined,
             mounted: false,
             device_id: "",
-            devices: []
+            devices: [],
+            pushkeys: []
         }
     },
     actions: {

src/helpers/adapter.ts

@@ -1,7 +1,4 @@
-import {ENDPOINT, GITHUB, TOKEN} from "@/helpers/constants";
-import mitt from 'mitt'
-
-const emitter = mitt()
+import {ENDPOINT, GITHUB} from "@/helpers/constants";
 
 class Adapter {
 
@@ -44,15 +41,6 @@ class Adapter {
         })
     }
 
-    on(event: string, callback: (...args: any[]) => void) {
-        emitter.on(event, callback)
-    }
-
-    emit(event: string, ...args: any[]) {
-        // @ts-ignore
-        emitter.emit(event, ...args)
-    }
-
     async loginGithub() {
         const data = await this.getStorage([ENDPOINT, GITHUB])
         await chrome.tabs.create({url: `https://github.com/login/oauth/authorize?client_id=${data[GITHUB]}&redirect_uri=${data[ENDPOINT]}/login/github`})

src/helpers/utils.ts

@@ -0,0 +1,8 @@
+import dayjs from "dayjs";
+import {ElMessage} from "element-plus";
+
+export const Utils = {
+    format(date?: string | number | Date | dayjs.Dayjs | null | undefined) {
+        return dayjs(date).format("YYYY/MM/DD");
+    }
+}

src/hooks/useCreateDevice.ts → src/hooks/device/useCreateDevice.ts

@@ -4,11 +4,10 @@ import {storeToRefs} from "pinia";
 
 export function useCreateDevice() {
     const store = useGlobalStore()
-    const {token, device_id} = storeToRefs(store)
+    const {device_id} = storeToRefs(store)
     const {run} = useRequest("/device/reg", () => ({
         method: "POST",
         data: {
-            token: token.value,
             name: "Browser",
             device_id: device_id.value,
             is_clip: 0,