登录处理

src/components/user-center/DeviceList.vue

@@ -25,10 +25,14 @@
 
 <script setup lang="ts">
 import { Laptop, Smartphone, Tablet, Monitor, Cpu, HelpCircle, X } from 'lucide-vue-next'
+import request from '@/utils/request'
+import { toast } from 'vue-sonner'
 
 interface Device {
   id: string
   name: string
+  user_agent: string
+  identifier: string
   type: 'mobile' | 'desktop'
   deviceId: string
 }
@@ -37,13 +41,20 @@ defineProps<{
   devices: Device[]
 }>()
 
-function delDevice(item) {
-  console.log('Device removed', item)
+const emit = defineEmits(['refresh'])
+
+function delDevice(device: Device) {
+  if (confirm('请确认是否移除此设备？')) {
+    request.put('/api/v1/public/user/unbind_device', { id: device.id }).then(() => {
+      toast.success('设备已移除')
+      emit('refresh')
+    })
+  }
 }
 
 interface DeviceTypeInfo {
   type: string
-  icon: string
+  iconComponent: any
 }
 
 /**

src/pages/Home/index.vue

@@ -106,18 +106,38 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import type { LocationQueryValue } from 'vue-router'
 import LoginFormModal from './components/LoginFormModal.vue'
 import DownloadButton from './components/DownloadButton.vue'
 import Logo from './logo.svg?component'
 import MobileLogo from './mobile-logo.svg?component'
 import ScreenshotMobile from './screenshot-mobile.png'
 import ScreenshotDesktop from './screenshot-desktop.png'
-import { AppleIcon, MonitorIcon, SmartphoneIcon, LocateFixedIcon } from 'lucide-vue-next'
 
+const route = useRoute()
+const router = useRouter()
 const loginModalRef = ref<InstanceType<typeof LoginFormModal> | null>(null)
 
 const openLoginModal = () => {
   loginModalRef.value?.show()
 }
+
+onMounted(() => {
+  if (route.query.login === 'true') {
+    openLoginModal()
+    router.replace({ query: { ...route.query, login: undefined } })
+  }
+})
+
+watch(
+  () => route.query.login,
+  (newVal) => {
+    if (newVal === 'true') {
+      openLoginModal()
+      router.replace({ query: { ...route.query, login: undefined } })
+    }
+  },
+)
 </script>

src/pages/UserCenter/DesktopLayout/index.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
         <div class="mb-5 px-[20px] text-white">
-          <DeviceList :devices="devices" />
+          <DeviceList :devices="devices" @refresh="emit('refresh')" />
         </div>
       </div>
       <div>
@@ -78,7 +78,7 @@ const props = defineProps<{
   selectedPlan: any
 }>()
 
-const emit = defineEmits(['select-plan', 'pay'])
+const emit = defineEmits(['select-plan', 'pay', 'refresh'])
 
 // --- Handlers ---
 const handlePlanSelect = (id: string) => {
@@ -127,7 +127,6 @@ const expireDateInfo = computed(() => {
 function logout() {
   router.push('/')
   localStorage.removeItem('Authorization')
-  toast.success('退出成功')
 }
 </script>
 

src/pages/UserCenter/MobileLayout/index.vue

@@ -12,7 +12,7 @@
     </div>
 
     <div class="mb-5 pr-[25px] pl-[21px] text-white">
-      <DeviceList :devices="devices" />
+      <DeviceList :devices="devices" @refresh="emit('refresh')" />
     </div>
     <div class="overflow-hidden rounded-4xl bg-[#A8FF53]">
       <div class="pt-7">
@@ -65,7 +65,7 @@ const props = defineProps<{
   selectedPlan: any
 }>()
 
-const emit = defineEmits(['select-plan', 'pay'])
+const emit = defineEmits(['select-plan', 'pay', 'refresh'])
 
 // --- Handlers ---
 const handlePlanSelect = (id: string) => {
@@ -114,7 +114,6 @@ const expireDateInfo = computed(() => {
 function logout() {
   router.push('/')
   localStorage.removeItem('Authorization')
-  toast.success('退出成功')
 }
 </script>
 

src/pages/UserCenter/index.vue

@@ -34,6 +34,7 @@
         :selected-plan="activePlan"
         @select-plan="handlePlanSelect"
         @pay="handlePay"
+        @refresh="init"
       />
     </div>
     <div class="container mx-auto hidden flex-1 items-center justify-center md:flex">
@@ -47,6 +48,7 @@
         :selected-plan="activePlan"
         @select-plan="handlePlanSelect"
         @pay="handlePay"
+        @refresh="init"
       />
     </div>
   </div>
@@ -157,7 +159,6 @@ function init() {
   // 用户信息 & 设备列表
   request.get('/api/v1/public/user/info').then((res: any) => {
     devices.value = res.user_devices
-
     const emailInfo = res.auth_methods?.find((item: any) => item.auth_type === 'email')
     if (emailInfo) {
       userSubInfo.value.email = emailInfo.auth_identifier

src/router/index.ts

@@ -21,4 +21,12 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach((to, _from, next) => {
+  if (to.path === '/user-center' && !localStorage.getItem('Authorization')) {
+    next({ path: '/', query: { login: 'true' } })
+  } else {
+    next()
+  }
+})
+
 export default router

src/utils/request/core.ts

@@ -7,7 +7,7 @@ import { HiAesUtil } from './HiAesUtil.ts'
 const encryptionKey = 'c0qhq99a-nq8h-ropg-wrlc-ezj4dlkxqpzx'
 function redirectLogin() {
   localStorage.removeItem('Authorization')
-  router.push('/')
+  router.push({ path: '/', query: { login: 'true' } })
 }
 export interface ExtraConfig {
   /**