✨ 消息页/badge完成

package.json

@@ -17,6 +17,7 @@
     "vue": "^3.2.31"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.3.1",
     "@types/chrome": "0.0.180",
     "@types/node": "^17.0.21",
     "@vitejs/plugin-vue": "^2.2.4",

src/components/layout/user-layout.vue

@@ -26,9 +26,9 @@ interface ITab {
 
 const Tabs: ITab[] = [
   {
-    name: "消息",
-    path: "Message",
-    icon: "icon-xiaoxi"
+    name: '消息',
+    path: 'Message',
+    icon: ''
   },
   {
     name: "设备",
@@ -71,17 +71,20 @@ const onTabChange = (tab: ITab) => {
   background: url("../../assets/deer.png") 100% no-repeat;
   height: 100%;
   width: 100%;
+
   .tab-box {
     display: flex;
     background: #f6f5f6;
     font-size: 14px;
     position: relative;
     z-index: 10;
+
     .tab {
       flex: 1;
       display: flex;
       justify-content: center;
       align-items: center;
+
       &.active {
         color: #313d7d;
       }
@@ -96,4 +99,11 @@ const onTabChange = (tab: ITab) => {
     }
   }
 }
+
+.badge {
+  :deep(.el-badge__content) {
+    color: var(--el-color-danger);
+    overflow: hidden;
+  }
+}
 </style>

src/components/popup.vue

@@ -4,7 +4,15 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import {CONNECT_NAME} from "@/helpers/constants";
+
+if (import.meta.env.PROD) {
+  chrome.runtime.connect({name: CONNECT_NAME});
+}
+
+
+</script>
 
 <style lang="less">
 .popup {

src/components/popup/device.vue

@@ -14,8 +14,8 @@
           }"></span>
             <span>{{ device.name }}</span>
           </div>
-          <span v-if="device.device_id === device_id">(当前设备)</span>
-          <div class="operate absolute hidden right-[-24px] flex-col right-[-24px]">
+          <span v-if="device.device_id === device_id" class="pr-[25px]">(当前设备)</span>
+          <div class="operate absolute flex flex-col  right-[5px] ">
             <span class="iconfont icon-bianji text-[18px] cursor-pointer hover:text-[#313d7d]"
                   @click="rename(device.id)"></span>
             <el-popconfirm title="确认删除此设备?" confirm-button-text="确定"
@@ -84,13 +84,6 @@ const rename = async (id: number) => {
 </script>
 
 <style lang="less">
-.device {
-  &:hover {
-    .operate {
-      display: flex;
-    }
-  }
-}
 
 .device-remove {
   width: 300px !important;

src/components/popup/key.vue

@@ -24,7 +24,7 @@
             <el-button type="primary" @click="copy(key.key)">复制</el-button>
           </div>
         </div>
-        <div class="absolute right-[28px] top-0">
+        <div class="absolute right-[10px] top-0">
           <el-popconfirm title="确认删除此Key?" confirm-button-text="确定"
                          @confirm="remove(key.id)"
                          cancel-button-text="取消">

src/components/popup/message.vue

@@ -3,9 +3,83 @@
     <div class="flex justify-between items-center text-[24px] pb-[12px]">
       <h3 class="font-bold">消息</h3>
     </div>
+    <div class="flex">
+      <el-input v-model="keyword" placeholder="请输入关键词" class="mr-[5px]" @keydown.enter="search" clearable
+                @clear="search"/>
+      <el-button type="primary" @click="search">查询</el-button>
+    </div>
+    <div class="h-[460px] py-[12px]">
+      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
+        <li v-for="message in list" :key="message.id" class="infinite-list-item">
+          <div class="flex items-center my-[12px]">
+            <span class="w-[20px] h-[1px] line"></span>
+            <img :src="avatar" alt="" class="w-[32px] h-[32px] mx-[5px] relative top-[-5px]">
+            {{ message.pushkey_name }}
+            <div class="text-[12px] ml-[10px] mr-[5px]">
+              <p>{{ message.date[0] }}</p>
+              <p>{{ message.date[1] }}</p>
+            </div>
+            <span class="flex-1 h-[1px] line"></span>
+          </div>
+          <div class="message-info py-[5px] px-[15px]">
+            <div class="flex items-center">
+              <h3 class="font-bold text-[16px] flex-1 mr-[5px] line-clamp-1">{{ message.text }}</h3>
+              <el-button type="text" plain >查看详情</el-button>
+            </div>
+            <p class="line-clamp-3">{{ message.desp }}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import {useGetMessageList} from "@/hooks/message/useGetMessageList";
+import avatar from "@/assets/avatar.png";
+import {adapter} from "@/helpers/adapter";
+
+adapter.clearBadge()
+
+const {getMessageList, list, disabled, page, keyword} = useGetMessageList()
+const load = async () => {
+  if (disabled.value) return
+  await getMessageList()
+}
+const search = async () => {
+  page.value = 1
+  list.value = []
+  await getMessageList()
+}
 
 </script>
+
+<style lang="less" scoped>
+.infinite-list {
+  height: 436px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.infinite-list .infinite-list-item {
+  margin: 24px 0;
+}
+
+
+.line {
+  background: #313d7d;
+}
+
+
+.message-info {
+  min-height: 48px;
+  border: 1px solid #313d7d;
+  border-radius: 4px;
+  box-shadow: 1px 1px 10px rgba(49, 61, 125, 0.25);
+}
+
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
+}
+</style>

src/components/popup/setting.vue

@@ -20,6 +20,6 @@ const {userInfo} = useGlobalStore()
 
 <style lang="less">
 .setting {
-  padding-top: 24px;
+  padding: 24px 12px 0;
 }
 </style>

src/edge/background/background.ts

@@ -1,9 +1,12 @@
 // 插件id
 import {MessageType, receiveMessageFromContent} from "@/helpers/message";
+import {polling} from "@/helpers/polling";
+import {State} from "@/helpers/state";
 import {adapter} from "@/helpers/adapter";
-import {ENDPOINT, TOKEN} from "@/helpers/constants";
+import {CONNECT_NAME} from "@/helpers/constants";
 
 const CHROME_ID = chrome.runtime.id
+
 receiveMessageFromContent(async (message, sendResponse) => {
     switch (message.type) {
         case MessageType.GET_BACKGROUND_CHROME_ID:
@@ -18,9 +21,44 @@ receiveMessageFromContent(async (message, sendResponse) => {
 // 处理token
 async function handlerToken(data: { token: string, origin: string }) {
     if (data.token && data.origin) {
-        const endpoint = await adapter.getStorage(ENDPOINT)
+        const endpoint = await State.getInstance().getEndpoint()
         if (data.origin === endpoint) {
-            await adapter.setStorage(TOKEN, data.token)
+            await State.getInstance().setToken(data.token)
         }
     }
 }
+
+
+
+adapter.on((message, sender, sendResponse) => {
+    switch (message.type) {
+        case MessageType.POPUP_OPEN:
+            State.getInstance().setPopupOpen(true)
+            sendResponse('background:ok')
+            break
+        case MessageType.POPUP_CLOSE:
+            State.getInstance().setPopupOpen(false)
+            sendResponse('background:ok')
+            break
+        case MessageType.PING:
+            sendResponse({
+                type: MessageType.PONG
+            })
+            break
+        default:
+            break
+    }
+})
+
+chrome.runtime.onConnect.addListener(function (port) {
+    if (port.name === CONNECT_NAME) {
+        State.getInstance().setPopupOpen(true)
+        port.onDisconnect.addListener(function () {
+            State.getInstance().setPopupOpen(false)
+        });
+    }
+});
+
+setTimeout(async () => {
+    await polling()
+}, 2000)

src/edge/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    InfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
     Loading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

src/edge/content/content-script.ts

@@ -1,7 +1,10 @@
 export enum MessageType {
     GET_BACKGROUND_CHROME_ID = 'GET_BACKGROUND_CHROME_ID',
-    TO_CONTENT = 'to_content',
-    PING = 'ping',
+    TO_CONTENT = 'TO_CONTENT',
+    PING = 'PING',
+    PONG = 'PONG',
+    POPUP_OPEN = 'POPUP_OPEN',
+    POPUP_CLOSE = 'POPUP_CLOSE'
 }
 
 function main() {
@@ -15,6 +18,19 @@ function main() {
             }
         });
     })
+    connect_to_background()
+}
+
+function connect_to_background() {
+    chrome.runtime.sendMessage({
+        type: MessageType.PING
+    }, (message) => {
+        if (message.type === MessageType.PONG) {
+            setTimeout(() => {
+                connect_to_background()
+            }, 1000)
+        }
+    });
 }
 
 main()

src/edge/popup/router.ts

@@ -40,7 +40,7 @@ export const router = createRouter({
                 {
                     path: "user",
                     name: "User",
-                    redirect: "/user/setting",
+                    redirect: "/user/message",
                     component: UserLayout,
                     children: [
                         {

src/edge/popup/useGlobal.ts

@@ -25,7 +25,8 @@ export const useGlobalStore = defineStore<'global', {
     mounted: boolean,
     device_id: string,
     devices: any[],
-    pushkeys: string[]
+    pushkeys: string[],
+    messageRandom: number,
 }, any, any>("global", {
     state() {
         return {
@@ -36,7 +37,8 @@ export const useGlobalStore = defineStore<'global', {
             mounted: false,
             device_id: "",
             devices: [],
-            pushkeys: []
+            pushkeys: [],
+            messageRandom: 0,
         }
     },
     actions: {

src/helpers/adapter.ts

@@ -1,4 +1,5 @@
 import {ENDPOINT, GITHUB} from "@/helpers/constants";
+import {Message} from "@/helpers/message";
 
 class Adapter {
 
@@ -46,6 +47,31 @@ class Adapter {
         await chrome.tabs.create({url: `https://github.com/login/oauth/authorize?client_id=${data[GITHUB]}&redirect_uri=${data[ENDPOINT]}/login/github`})
     }
 
+    async setBadge(text: string = "new") {
+        if (import.meta.env.DEV) return
+        await chrome.action.setBadgeText({text})
+        await chrome.action.setBadgeBackgroundColor({color: [255, 0, 0, 255]});
+    }
+
+    async clearBadge() {
+        if (import.meta.env.DEV) return
+        await chrome.action.setBadgeText({text: ""})
+    }
+
+    emit(message: Message) {
+        if (import.meta.env.DEV) return
+        chrome.runtime.sendMessage(message, (response) => {
+            console.log('emit response', response)
+        })
+    }
+
+    on(callback: (message: any, sender: chrome.runtime.MessageSender, sendResponse: (response?: any) => void) => void) {
+        if (import.meta.env.DEV) return
+        chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+            callback(message, sender, sendResponse)
+        })
+    }
+
     static getInstance() {
         if (!this.instance) {
             this.instance = new Adapter()

src/helpers/constants.ts

@@ -7,3 +7,4 @@ export const TOKEN = "token"
 export const DEVICE_ID = "device_id"
 export const LOGIN_SUCCESS = "LOGIN_SUCCESS"
 export const UNAUTHORIZED_CODE = "80403"
+export const CONNECT_NAME = 'xkrfer_connect'