first commit

2026-01-29 04:16:00 -08:00
commit e233c87fe6
81 changed files with 11399 additions and 0 deletions
@@ -0,0 +1,96 @@
+<template>
+  <div class="flex min-h-screen flex-col bg-black text-white">
+    <!-- Full Width Header -->
+    <div class="h-[60px] md:h-[125px]">
+      <div class="fixed top-[20px] z-50 w-full md:top-[45px]">
+        <div class="container">
+          <header
+            class="lucid-glass-bar flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[60px] md:pr-[10px]"
+          >
+            <router-link to="/" class="flex items-center gap-2">
+              <!-- Desktop Logo -->
+              <Logo alt="Hi快VPN" class="h-[18px] w-auto md:ml-8 md:h-[29px]" />
+              <span class="font-black text-2xl ml-3">高能合伙人</span>
+            </router-link>
+            <div v-if="isLoggedIn" class="flex items-center">
+              <router-link
+                to="/user-center"
+                class="flex size-[30px] items-center justify-center rounded-full bg-[#78788029] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[40px] md:text-3xl"
+              >
+                {{ userLetter }}
+              </router-link>
+            </div>
+            <button
+              v-else
+              class="flex h-[30px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[40px] md:w-[220px] md:text-xl"
+            >
+              代理后台登录/注册
+            </button>
+          </header>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-1 flex-col">
+      <!-- Main Neon Green Card -->
+<!--      <div class="container md:hidden">
+
+      </div>-->
+      <div class="hidden flex-1 items-center justify-center md:flex md:pb-[50px]">
+        <div class="container mx-auto">
+          <DesktopLayout
+            :user-info="userSubInfo"
+            :selected-plan-id="selectedPlanId"
+            :selected-plan="activePlan"
+            :is-paying="isPaying"
+            :is-user-loading="isUserLoading"
+            :is-plans-loading="isPlansLoading"
+            :is-payments-loading="isPaymentsLoading"
+            @pay="handlePay"
+            @show-order-details="orderDetailsModalRef?.show()"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import DesktopLayout from './DesktopLayout/index.vue'
+import OrderStatusDialog from '@/components/user-center/OrderStatusDialog.vue'
+import OrderDetailsModal from './components/OrderDetails/index.vue'
+import Logo from '@/pages/Home/logo.svg?component'
+import request from '@/utils/request'
+import { toast } from 'vue-sonner'
+import { useLocalStorage } from '@vueuse/core'
+
+const route = useRoute()
+const router = useRouter()
+const token = useLocalStorage('Authorization', '')
+const userEmail = useLocalStorage('UserEmail', '')
+
+const isLoggedIn = computed(() => !!token.value)
+const userLetter = computed(() => {
+  if (!userEmail.value) return '?'
+  return userEmail.value.charAt(0).toUpperCase()
+})
+// --- State ---
+const selectedPlanId = ref('p2')
+const isPaying = ref(false)
+const isUserLoading = ref(true)
+const isPlansLoading = ref(true)
+const isPaymentsLoading = ref(true)
+const orderStatusDialogRef = ref<InstanceType<typeof OrderStatusDialog> | null>(null)
+const orderDetailsModalRef = ref<InstanceType<typeof OrderDetailsModal> | null>(null)
+
+
+
+</script>
+
+<style scoped>
+
+</style>
+
+<style scoped>
+</style>