refactor: serviceWorker move to port message (#5)

package.json

@@ -2,8 +2,8 @@
   "name": "rhodes-headquarters",
   "displayName": "罗德岛远程指挥部",
   "type": "module",
-  "version": "0.1.0-beta.0",
-  "publishVersion": "0.1.0",
+  "version": "0.1.0-beta.1",
+  "publishVersion": "0.1.0.1",
   "private": true,
   "packageManager": "[email protected]",
   "description": "一款用于监控罗德岛运行状态的浏览器扩展",
@@ -33,12 +33,10 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
-    "h3": "^1.11.1",
     "idb-keyval": "^6.2.1",
     "js-md5": "^0.8.3",
     "ofetch": "^1.3.4",
     "tailwind-merge": "^2.2.2",
-    "unstorage": "^1.10.2",
     "vue-router": "^4.3.1",
     "zod": "^3.22.4"
   },
@@ -69,7 +67,6 @@
     "vitest": "^1.5.0",
     "vue": "^3.4.22",
     "vue-demi": "^0.14.7",
-    "webext-bridge": "^6.0.1",
     "wxt": "^0.17.12"
   },
   "pnpm": {

src/api/hypergrayph.ts

@@ -0,0 +1,81 @@
+import { ofetch } from 'ofetch'
+
+const $fetch = ofetch.create({
+  baseURL: 'https://as.hypergryph.com',
+})
+
+interface HypergrayphonResponse<T> {
+  status: string
+  type: string
+  msg: string
+  data: T
+}
+
+export async function getTokenByPhonePassword(phone: string, password: string) {
+  const {
+    data: { token },
+  } = await $fetch<HypergrayphonResponse<{ token: string }>>(
+    '/user/auth/v1/token_by_phone_password',
+    {
+      method: 'POST',
+      body: {
+        phone,
+        password,
+      },
+    },
+  )
+
+  return token
+}
+
+export async function sendPhoneCode(phone: string) {
+  await $fetch<HypergrayphonResponse<{ token: string }>>(
+    '/general/v1/send_phone_code',
+    {
+      method: 'POST',
+      body: {
+        phone,
+        type: 2,
+      },
+    },
+  )
+}
+
+export async function getTokenByPhoneCode(phone: string, code: string) {
+  const {
+    data: { token },
+  } = await $fetch<HypergrayphonResponse<{ token: string }>>(
+    '/user/auth/v2/token_by_phone_code',
+    {
+      method: 'POST',
+      body: {
+        phone,
+        code,
+      },
+    },
+  )
+
+  return token
+}
+
+/**
+ * 通过 token 获取授权码
+ */
+export async function grantAuthorizeCode(token: string) {
+  // grant authorize code using user certificate
+  const {
+    data: { code },
+  } = await $fetch<HypergrayphonResponse<{ code: string, uid: string }>>(
+    '/user/oauth2/v2/grant',
+    {
+      method: 'POST',
+      body: {
+        appCode: '4ca99fa6b56cc2ba',
+        token,
+        type: 0,
+      },
+    },
+  )
+
+  return code
+}

src/api/index.ts

@@ -0,0 +1,4 @@
+export * as hypergrayph from './hypergrayph'
+export * as skland from './skland'
+export * from './hypergrayph'
+export * from './skland'

src/api/skland.ts

@@ -0,0 +1,94 @@
+import { ofetch } from 'ofetch'
+import { generateSignatureHeader } from '@/utils/signature'
+import type { Binding, BindingInfo, Status, User } from '@/types'
+
+const $fetch = ofetch.create({
+  baseURL: 'https://zonai.skland.com/',
+})
+
+interface SklandResponse<T> {
+  code: number
+  message: string
+  data: T
+}
+
+/**
+ * 获取用户访问令牌
+ * @param code 鹰角 OAuth 授权码
+ */
+export async function generateCredByCode(code: string) {
+  const {
+    data: { cred, token, userId },
+  } = await $fetch<SklandResponse<{ cred: string, userId: string, token: string }>>(
+    '/api/v1/user/auth/generate_cred_by_code',
+    {
+      method: 'POST',
+      body: {
+        code,
+        kind: 1,
+      },
+    },
+  )
+  return { cred, token, userId }
+}
+
+/**
+ * 检查用户访问令牌
+ */
+export async function checkAccessToken({ token, cred }: { token: string, cred: string }) {
+  try {
+    const pathname = '/api/v1/user/check'
+    const headers = await generateSignatureHeader({ token, pathname, cred })
+
+    await $fetch(
+      pathname,
+      {
+        method: 'GET',
+        headers,
+      },
+    )
+    return true
+  }
+  catch (error) {
+    return false
+  }
+}
+
+export async function getUserInfo({ token, cred }: { token: string, cred: string }) {
+  const pathname = '/api/v1/user/me'
+  const headers = await generateSignatureHeader({ token, pathname, cred })
+  const {
+    data,
+  } = await $fetch<SklandResponse<{ user: User, gameStatus: Status }>>(
+    pathname,
+    { headers },
+  )
+
+  return data
+}
+
+export async function getPlayerBinding({ token, cred }: { token: string, cred: string }) {
+  const pathname = '/api/v1/game/player/binding'
+  const headers = await generateSignatureHeader({ token, pathname, cred })
+  const {
+    data: { list },
+  } = await $fetch<SklandResponse<{ list: Binding[] }>>(
+    pathname,
+    { headers },
+  )
+
+  return list
+}
+
+export async function getBindingInfo({ token, cred, uid }: { token: string, cred: string, uid: string }) {
+  const pathname = `/api/v1/game/player/info`
+  const headers = await generateSignatureHeader({ token, pathname, cred, params: `uid=${uid}` })
+  const {
+    data,
+  } = await $fetch<SklandResponse<BindingInfo>>(
+    pathname,
+    { headers, query: { uid } },
+  )
+
+  return data
+}

src/components/BaseStatus.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import PopupSection from './PopupSection.vue'
-import { useApInfo } from '~/composables/ap'
-import type { PlayerStatus } from '~/types'
+import { useApInfo } from '@/composables/status/ap'
+import type { Status } from '~/types'
 
-const props = defineProps<{ status: PlayerStatus }>()
+const props = defineProps<{ status: Status }>()
 
 const {
   spendTime,

src/components/CharacterSwitcher.vue

@@ -2,9 +2,9 @@
 import * as menu from '@zag-js/menu'
 import { normalizeProps, useMachine } from '@zag-js/vue'
 import Avatar from '~/components/Avatar.vue'
-import type { PlayerStatus, SklandBindRole } from '~/types'
+import type { BindingRole, Status } from '~/types'
 
-defineProps<{ uid: string, status: PlayerStatus, characters: SklandBindRole[] }>()
+defineProps<{ uid: string, status: Status, characters: BindingRole[] }>()
 const emit = defineEmits<{
   (event: 'update:uid', id: string): void
 }>()

src/components/MissionStat.vue

@@ -1,7 +1,24 @@
 <script setup lang="ts">
-import type { Campaign, Mission, Tower } from '~/types'
+import { useIntervalFn } from '@vueuse/core'
+import type { Account } from '@/store/account'
+import { chararcterStorage } from '@/store/info'
+import * as API from '~/api'
 
-defineProps<{ campaign: Campaign, tower: Tower, routine: Mission }>()
+const props = defineProps<{ account: Account, uid: string }>()
+const authorizeData = useAuthorize(props.account)
+const characterInfo = useWxtStorage(chararcterStorage)
+
+useIntervalFn(
+  async () => {
+    const data = await API.skland.getBindingInfo({
+      uid: props.uid,
+      cred: authorizeData.value.cred,
+      token: authorizeData.value.token,
+    })
+    characterInfo.value = data
+  },
+  1000 * 60 * 10,
+)
 </script>
 
 <template>
@@ -12,7 +29,11 @@ defineProps<{ campaign: Campaign, tower: Tower, routine: Mission }>()
         <span>Annihilation</span>
       </div>
       <div>
-        <span c-red>{{ campaign.reward.current }}</span>/<span>{{ campaign.reward.total }}</span>
+        <span c-red>
+          {{ characterInfo?.campaign.reward.current }}
+        </span>/<span>
+          {{ characterInfo?.campaign.reward.total }}
+        </span>
       </div>
     </div>
     <div flex="~ items-center justify-between">
@@ -23,16 +44,16 @@ defineProps<{ campaign: Campaign, tower: Tower, routine: Mission }>()
       <div flex="inline gap-2">
         <div>
           <span c-purple>
-            {{ tower.reward.higherItem.current }}
+            {{ characterInfo?.tower.reward.higherItem.current }}
           </span>/<span>
-            {{ tower.reward.higherItem.total }}
+            {{ characterInfo?.tower.reward.higherItem.total }}
           </span>
         </div>
         <div>
           <span c-yellow>
-            {{ tower.reward.lowerItem.current }}
+            {{ characterInfo?.tower.reward.lowerItem.current }}
           </span>/<span>
-            {{ tower.reward.lowerItem.total }}
+            {{ characterInfo?.tower.reward.lowerItem.total }}
           </span>
         </div>
       </div>
@@ -46,16 +67,16 @@ defineProps<{ campaign: Campaign, tower: Tower, routine: Mission }>()
       <div flex="inline gap-2">
         <div>
           <span c-primary>
-            {{ routine.daily.current }}
+            {{ characterInfo?.routine.daily.current }}
           </span>/<span>
-            {{ routine.daily.total }}
+            {{ characterInfo?.routine.daily.total }}
           </span>
         </div>
         <div>
           <span c-primary>
-            {{ routine.weekly.current }}
+            {{ characterInfo?.routine.weekly.current }}
           </span>/<span>
-            {{ routine.weekly.total }}
+            {{ characterInfo?.routine.weekly.total }}
           </span>
         </div>
       </div>