官网发布活动价格样式适配

删除限速说明
处理邀请链接
2026-06-17 12:07:20 +08:00 · 2026-05-19 22:34:17 +08:00 · 2026-05-05 04:47:38 +03:00 · 2026-05-02 19:45:06 +03:00 · 2026-05-02 18:44:53 +03:00 · 2026-04-28 06:24:56 +03:00
122 changed files with 10603 additions and 202 deletions
@@ -0,0 +1 @@
+VITE_APP_BASE_URL=/
@@ -0,0 +1 @@
+VITE_APP_BASE_URL=/
@@ -0,0 +1 @@
+VITE_APP_BASE_URL=/
@@ -0,0 +1,196 @@
+name: site-dist-deploy
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop 
+
+
+env:
+  VITE_APP_BASE_URL: /
+  SSH_HOST: ${{ vars.PRO_SSH_HOST }}
+  SSH_PORT: ${{ vars.PRO_SSH_PORT }}
+  SSH_USER: ${{ vars.PRO_SSH_USER }}
+  SSH_PASSWORD: ${{ vars.PRO_SSH_PASSWORD }}
+  DEPLOY_PATH: /var/www/hi-landing-hero
+    # TG通知
+  TG_BOT_TOKEN: 8114337882:AAHkEx03HSu7RxN4IHBJJEnsK9aPPzNLIk0
+  TG_CHAT_ID: "-4940243803"
+
+jobs:
+  build-and-deploy:
+    runs-on: landing-hero-web01
+    steps:
+      - name: Manual checkout (no Node required)
+        run: |
+          set -e
+          if git rev-parse --is-inside-work-tree >/dev/null 2>&1; then
+            git fetch --all --tags
+            git checkout "${{ github.ref_name }}"
+            git reset --hard "origin/${{ github.ref_name }}"
+          else
+            REPO_URL="${{ github.server_url }}/${{ github.repository }}"
+            echo "Cloning $REPO_URL"
+            git clone --depth=1 --branch "${{ github.ref_name }}" "$REPO_URL" .
+            git fetch --tags
+          fi
+
+      - name: Build dist with Unified Script
+        env:
+          VITE_APP_BASE_URL: "/"
+        run: |
+          chmod +x scripts/ci-build.sh
+          ./scripts/ci-build.sh
+
+      - name: Check Artifacts
+        run: |
+          echo "Current directory: $(pwd)"
+          echo "Listing all files in workspace:"
+          find . -maxdepth 2 -not -path '*/.*'
+          if [ -f "site_dist.tgz" ]; then
+            echo "✅ File exists: site_dist.tgz"
+            ls -lh site_dist.tgz
+            echo "File path: $(readlink -f site_dist.tgz)"
+          else
+            echo "❌ File NOT found: site_dist.tgz"
+            exit 1
+          fi
+
+      - name: Deploy to Host (Native SSH/SCP)
+        run: |
+          echo "Installing SSH tools..."
+          if command -v apk &> /dev/null; then
+              echo "Detected Alpine Linux. Installing sshpass openssh-client via apk..."
+              apk add --no-cache sshpass openssh-client
+          elif command -v apt-get &> /dev/null; then
+              echo "Detected Debian/Ubuntu. Installing sshpass openssh-client via apt..."
+              apt-get update -y && apt-get install -y sshpass openssh-client
+          elif command -v yum &> /dev/null; then
+              echo "Detected RHEL/CentOS. Installing sshpass openssh-clients via yum..."
+              yum install -y sshpass openssh-clients
+          elif command -v dnf &> /dev/null; then
+              echo "Detected Fedora/RHEL8+. Installing sshpass openssh-clients via dnf..."
+              dnf install -y sshpass openssh-clients
+          elif command -v zypper &> /dev/null; then
+              echo "Detected OpenSUSE. Installing sshpass openssh via zypper..."
+              zypper install -y sshpass openssh
+          else
+              echo "Error: No known package manager found. Cannot install sshpass."
+              exit 1
+          fi
+
+          echo "Uploading artifact..."
+          # 使用 sshpass 传递密码 (更安全的方式是使用 key，但此处沿用 password)
+          export SSHPASS="${{ env.SSH_PASSWORD }}"
+          
+          # 1. 检查连接并创建目录 (包含 /tmp/ci-upload 和 目标目录的准备)
+          sshpass -e ssh -o StrictHostKeyChecking=no -p ${{ env.SSH_PORT }} ${{ env.SSH_USER }}@${{ env.SSH_HOST }} "mkdir -p /tmp/ci-upload"
+          
+          # 2. SCP 上传 (直接使用当前目录下的 site_dist.tgz，规避跨容器挂载问题)
+          if [ ! -f "site_dist.tgz" ]; then
+            echo "❌ Error: site_dist.tgz not found in current directory!"
+            exit 1
+          fi
+          
+          sshpass -e scp -o StrictHostKeyChecking=no -P ${{ env.SSH_PORT }} site_dist.tgz ${{ env.SSH_USER }}@${{ env.SSH_HOST }}:/tmp/ci-upload/site_dist.tgz
+          
+          # 3. 解压并重启 Nginx
+          echo "Deploying on remote host..."
+          sshpass -e ssh -o StrictHostKeyChecking=no -p ${{ env.SSH_PORT }} ${{ env.SSH_USER }}@${{ env.SSH_HOST }} "
+            echo 'Preparing target directory ${{ env.DEPLOY_PATH }}...'
+            mkdir -p ${{ env.DEPLOY_PATH }}
+            
+            # 切换到目录，确保操作安全
+            cd ${{ env.DEPLOY_PATH }} || exit 1
+            
+            echo 'Cleaning up old files (preserving download/downsload)...'
+            
+            # 使用更安全的策略：
+            # 1. 创建临时备份目录
+            mkdir -p /tmp/site_backup_safe
+            rm -rf /tmp/site_backup_safe/*
+            
+            # 2. 将需要保留的文件夹移到备份目录 (如果存在)
+            if [ -d 'download' ]; then 
+                echo 'Backing up download folder...'
+                mv download /tmp/site_backup_safe/
+            fi
+            if [ -d 'downsload' ]; then 
+                echo 'Backing up downsload folder...'
+                mv downsload /tmp/site_backup_safe/
+            fi
+            
+            # 3. 清空当前目录 (此时 download/downsload 已经移走，安全删除所有)
+            # 注意：不删除当前目录本身，只删除内容
+            find . -mindepth 1 -delete
+            
+            # 4. 移回备份的文件夹
+            if [ -d '/tmp/site_backup_safe/download' ]; then 
+                echo 'Restoring download folder...'
+                mv /tmp/site_backup_safe/download .
+            fi
+            if [ -d '/tmp/site_backup_safe/downsload' ]; then 
+                echo 'Restoring downsload folder...'
+                mv /tmp/site_backup_safe/downsload .
+            fi
+            
+            # 5. 清理备份目录
+            rm -rf /tmp/site_backup_safe
+
+            echo 'Extracting to ${{ env.DEPLOY_PATH }}...'
+            # 解压覆盖
+            tar -xzf /tmp/ci-upload/site_dist.tgz -C ${{ env.DEPLOY_PATH }}
+            
+            echo 'Reloading Nginx...'
+            # 尝试多种 reload 方式
+            nginx -s reload || systemctl reload nginx || echo 'Warning: Nginx reload returned non-zero'
+            
+            echo 'Cleanup...'
+            rm -f /tmp/ci-upload/site_dist.tgz
+          "
+          echo "✅ Deployment complete!"
+
+     
+      # 步骤6: TG通知 (成功)
+      - name: 📱 发送成功通知到Telegram
+        if: success()
+        uses: appleboy/telegram-action@master
+        with:
+          token: ${{ env.TG_BOT_TOKEN }}
+          to: ${{ env.TG_CHAT_ID }}
+          message: |
+            ✅ 部署成功！
+            
+            📦 项目: ${{ github.repository }}
+            🌿 分支: ${{ github.ref_name }}
+            📝 提交: ${{ github.sha }}
+            👤 提交者: ${{ github.actor }}
+            🕐 时间: ${{ github.event.head_commit.timestamp }}
+            
+            🚀 服务已成功部署到生产环境
+          parse_mode: Markdown
+          
+      # 步骤5: TG通知 (失败)
+      - name: 📱 发送失败通知到Telegram
+        if: failure()
+        uses: appleboy/telegram-action@master
+        with:
+          token: ${{ env.TG_BOT_TOKEN }}
+          to: ${{ env.TG_CHAT_ID }}
+          message: |
+            ❌ 部署失败！
+            
+            📦 项目: ${{ github.repository }}
+            🌿 分支: ${{ github.ref_name }}
+            📝 提交: ${{ github.sha }}
+            👤 提交者: ${{ github.actor }}
+            🕐 时间: ${{ github.event.head_commit.timestamp }}
+            
+            ⚠️ 请检查构建日志获取详细信息
+          parse_mode: Markdown
+          
@@ -5,3 +5,9 @@ declare module '*.vue' {
  const component: DefineComponent<{}, {}, any>
  export default component
 }
+
+declare module '*.svg?component' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
@@ -18,6 +18,21 @@ export default defineConfigWithVueTs(

  ...pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
+  {
+    rules: {
+      // 1. 强制 Vue 文件内标签块的顺序
+      'vue/block-order': [
+        'error',
+        {
+          order: ['template', 'script', 'style'],
+        },
+      ],
+      // 2. 自动关闭单单词组件名检查（根据需要可选）
+      'vue/multi-word-component-names': 'off',
+      // 3. 可以在这里添加更多 TypeScript 或 Vue 的自定义校验
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },

  skipFormatting,
 )
@@ -1,13 +1,55 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>HiFast VPN - 高速稳定的全球网络加速服务</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
+    <meta name="description" content="HiFast VPN 提供安全、匿名且高速的全球网络连接。支持 Windows, Mac, Android 等多平台下载，一键开启极速体验。" />
+
+    <meta name="keywords" content="VPN, 加速器, HiFast, 网络安全, 翻墙, 科学上网" />
+
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="HiFast VPN - 极速连接全球" />
+    <meta property="og:description" content="专业加密协议，保护隐私，解除地理限制。立即下载各平台客户端。" />
+<!--    <meta property="og:image" content="https://h.hifastapp.com/og-image.png" />-->
+    <meta property="og:url" content="https://hifastvpn.com/" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="HiFast VPN" />
+<!--    <link rel="apple-touch-icon" href="/icon-192x192.png" />-->
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=AW-17916853811">
+    </script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'AW-17916853811');
+    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
+    <script>
+      (function(d,t) {
+        var BASE_URL="https://app.chatwoot.com";
+        var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+        g.src=BASE_URL+"/packs/js/sdk.js";
+        g.async = true;
+        s.parentNode.insertBefore(g,s);
+        g.onload=function(){
+          window.chatwootSDK.run({
+            websiteToken: 'YXQmh16ymNYW1SVybhnoQQ9w',
+            baseUrl: BASE_URL
+          })
+        }
+      })(document,"script");
+    </script>
  </body>
 </html>
@@ -7,10 +7,10 @@
    "node": "^20.19.0 || >=22.12.0"
  },
  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "dev": "vite --mode dev",
+    "build:test": "vite build --mode test",
+    "build:prod": "vite build --mode pord",
    "preview": "vite preview",
-    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix --cache",
    "format": "prettier --write --experimental-cli src/"
@@ -18,8 +18,10 @@
  "dependencies": {
    "@tailwindcss/vite": "^4.1.18",
    "@vueuse/core": "^14.1.0",
+    "axios": "^1.13.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "crypto-js": "^4.2.0",
    "lucide-vue-next": "^0.562.0",
    "reka-ui": "^2.7.0",
    "tailwind-merge": "^3.4.0",
@@ -29,6 +31,7 @@
    "vue-sonner": "^2.0.9"
  },
  "devDependencies": {
+    "@csstools/postcss-cascade-layers": "^5.0.2",
    "@tsconfig/node24": "^24.0.3",
    "@types/node": "^24.10.4",
    "@vitejs/plugin-vue": "^6.0.3",
@@ -38,6 +41,7 @@
    "eslint": "^9.39.2",
    "eslint-plugin-vue": "~10.6.2",
    "jiti": "^2.6.1",
+    "lightningcss": "^1.32.0",
    "npm-run-all2": "^8.0.4",
    "prettier": "3.7.4",
    "prettier-plugin-tailwindcss": "^0.7.2",
@@ -45,6 +49,14 @@
    "typescript": "~5.9.3",
    "vite": "^7.3.0",
    "vite-plugin-vue-devtools": "^8.0.5",
+    "vite-svg-loader": "^5.1.0",
    "vue-tsc": "^3.2.1"
-  }
+  },
+  "browserslist": [
+    "chrome >= 90",
+    "edge >= 90",
+    "safari >= 15",
+    "firefox >= 90"
+  ]
 }
+
@@ -14,12 +14,18 @@ importers:
      '@vueuse/core':
        specifier: ^14.1.0
        version: 14.1.0(vue@3.5.26(typescript@5.9.3))
+      axios:
+        specifier: ^1.13.2
+        version: 1.13.2
      class-variance-authority:
        specifier: ^0.7.1
        version: 0.7.1
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
      lucide-vue-next:
        specifier: ^0.562.0
        version: 0.562.0(vue@3.5.26(typescript@5.9.3))
@@ -90,6 +96,9 @@ importers:
      vite-plugin-vue-devtools:
        specifier: ^8.0.5
        version: 8.0.5(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))(vue@3.5.26(typescript@5.9.3))
+      vite-svg-loader:
+        specifier: ^5.1.0
+        version: 5.1.0(vue@3.5.26(typescript@5.9.3))
      vue-tsc:
        specifier: ^3.2.1
        version: 3.2.1(typescript@5.9.3)
@@ -713,6 +722,10 @@ packages:
    peerDependencies:
      vue: ^2.7.0 || ^3.0.0

+  '@trysound/sax@0.2.0':
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+
  '@tsconfig/node24@24.0.3':
    resolution: {integrity: sha512-vcERKtKQKHgzt/vfS3Gjasd8SUI2a0WZXpgJURdJsMySpS5+ctgbPfuLj2z/W+w4lAfTWxoN4upKfu2WzIRYnw==}

@@ -950,6 +963,12 @@ packages:
    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
    engines: {node: '>=10'}

+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

@@ -982,6 +1001,10 @@ packages:
    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
    engines: {node: '>=18'}

+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
  callsites@3.1.0:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}
@@ -1007,6 +1030,14 @@ packages:
  color-name@1.1.4:
    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}

+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
  concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}

@@ -1021,11 +1052,33 @@ packages:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}

+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
+  css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
  cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true

+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
  csstype@3.2.3:
    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}

@@ -1056,10 +1109,31 @@ packages:
  defu@6.1.4:
    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}

+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
  detect-libc@2.1.2:
    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
    engines: {node: '>=8'}

+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
  electron-to-chromium@1.5.267:
    resolution: {integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==}

@@ -1067,6 +1141,10 @@ packages:
    resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
    engines: {node: '>=10.13.0'}

+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
  entities@7.0.0:
    resolution: {integrity: sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ==}
    engines: {node: '>=0.12'}
@@ -1074,6 +1152,22 @@ packages:
  error-stack-parser-es@1.0.5:
    resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}

+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
  esbuild@0.27.2:
    resolution: {integrity: sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==}
    engines: {node: '>=18'}
@@ -1213,15 +1307,39 @@ packages:
  flatted@3.3.3:
    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}

+  follow-redirects@1.15.11:
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  form-data@4.0.5:
+    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+    engines: {node: '>= 6'}
+
  fsevents@2.3.3:
    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]

+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
  gensync@1.0.0-beta.2:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}

+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
  glob-parent@5.1.2:
    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
    engines: {node: '>= 6'}
@@ -1234,6 +1352,10 @@ packages:
    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
    engines: {node: '>=18'}

+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
  graceful-fs@4.2.11:
    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}

@@ -1241,6 +1363,18 @@ packages:
    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
    engines: {node: '>=8'}

+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
  hookable@5.5.3:
    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}

@@ -1429,6 +1563,16 @@ packages:
  magic-string@0.30.21:
    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}

+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
+  mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+
  memorystream@0.3.1:
    resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
    engines: {node: '>= 0.10.0'}
@@ -1441,6 +1585,14 @@ packages:
    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
    engines: {node: '>=8.6'}

+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
  minimatch@3.1.2:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}

@@ -1621,6 +1773,9 @@ packages:
    engines: {node: '>=14'}
    hasBin: true

+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
  punycode@2.3.1:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}
@@ -1705,6 +1860,11 @@ packages:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}

+  svgo@3.3.2:
+    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
  synckit@0.11.11:
    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
    engines: {node: ^14.18.0 || >=16.0.0}
@@ -1809,6 +1969,11 @@ packages:
    peerDependencies:
      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0

+  vite-svg-loader@5.1.0:
+    resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
+    peerDependencies:
+      vue: '>=3.2.13'
+
  vite@7.3.0:
    resolution: {integrity: sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -2469,6 +2634,8 @@ snapshots:
      '@tanstack/virtual-core': 3.13.13
      vue: 3.5.26(typescript@5.9.3)

+  '@trysound/sax@0.2.0': {}
+
  '@tsconfig/node24@24.0.3': {}

  '@types/estree@1.0.8': {}
@@ -2797,6 +2964,16 @@ snapshots:
    dependencies:
      tslib: 2.8.1

+  asynckit@0.4.0: {}
+
+  axios@1.13.2:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
  balanced-match@1.0.2: {}

  baseline-browser-mapping@2.9.11: {}
@@ -2830,6 +3007,11 @@ snapshots:
    dependencies:
      run-applescript: 7.1.0

+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
  callsites@3.1.0: {}

  caniuse-lite@1.0.30001761: {}
@@ -2851,6 +3033,12 @@ snapshots:

  color-name@1.1.4: {}

+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  commander@7.2.0: {}
+
  concat-map@0.0.1: {}

  convert-source-map@2.0.0: {}
@@ -2865,8 +3053,34 @@ snapshots:
      shebang-command: 2.0.0
      which: 2.0.2

+  crypto-js@4.2.0: {}
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
+  css-tree@2.3.1:
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.2.1
+
+  css-what@6.2.2: {}
+
  cssesc@3.0.0: {}

+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
  csstype@3.2.3: {}

  debug@4.4.3:
@@ -2886,8 +3100,34 @@ snapshots:

  defu@6.1.4: {}

+  delayed-stream@1.0.0: {}
+
  detect-libc@2.1.2: {}

+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
  electron-to-chromium@1.5.267: {}

  enhanced-resolve@5.18.4:
@@ -2895,10 +3135,27 @@ snapshots:
      graceful-fs: 4.2.11
      tapable: 2.3.0

+  entities@4.5.0: {}
+
  entities@7.0.0: {}

  error-stack-parser-es@1.0.5: {}

+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
  esbuild@0.27.2:
    optionalDependencies:
      '@esbuild/aix-ppc64': 0.27.2
@@ -3072,11 +3329,41 @@ snapshots:

  flatted@3.3.3: {}

+  follow-redirects@1.15.11: {}
+
+  form-data@4.0.5:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
+
  fsevents@2.3.3:
    optional: true

+  function-bind@1.1.2: {}
+
  gensync@1.0.0-beta.2: {}

+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
  glob-parent@5.1.2:
    dependencies:
      is-glob: 4.0.3
@@ -3087,10 +3374,22 @@ snapshots:

  globals@14.0.0: {}

+  gopd@1.2.0: {}
+
  graceful-fs@4.2.11: {}

  has-flag@4.0.0: {}

+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
  hookable@5.5.3: {}

  ignore@5.3.2: {}
@@ -3226,6 +3525,12 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5

+  math-intrinsics@1.1.0: {}
+
+  mdn-data@2.0.28: {}
+
+  mdn-data@2.0.30: {}
+
  memorystream@0.3.1: {}

  merge2@1.4.1: {}
@@ -3235,6 +3540,12 @@ snapshots:
      braces: 3.0.3
      picomatch: 2.3.1

+  mime-db@1.52.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
  minimatch@3.1.2:
    dependencies:
      brace-expansion: 1.1.12
@@ -3347,6 +3658,8 @@ snapshots:

  prettier@3.7.4: {}

+  proxy-from-env@1.1.0: {}
+
  punycode@2.3.1: {}

  queue-microtask@1.2.3: {}
@@ -3445,6 +3758,16 @@ snapshots:
    dependencies:
      has-flag: 4.0.0

+  svgo@3.3.2:
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 5.2.2
+      css-tree: 2.3.1
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+
  synckit@0.11.11:
    dependencies:
      '@pkgr/core': 0.2.9
@@ -3564,6 +3887,11 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  vite-svg-loader@5.1.0(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      svgo: 3.3.2
+      vue: 3.5.26(typescript@5.9.3)
+
  vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2):
    dependencies:
      esbuild: 0.27.2
@@ -0,0 +1,133 @@
+#!/bin/bash
+set -e
+
+# ==========================================
+# 统一构建脚本 (CI Build Script)
+# 功能：自动检测环境、安装 Node.js (不依赖系统预装)、构建项目、打包产物
+# 解决：Runner 环境缺失 Node/Docker/Python 等工具导致的问题
+# ==========================================
+
+# 配置节点版本
+NODE_VERSION="20.10.0"
+DIST_FILE="site_dist.tgz"
+
+echo ">>> [Init] Starting CI Build Script..."
+
+# ----------------------------------------------------------------
+# 1. 基础工具检测与安装 (curl, tar, xz)
+# ----------------------------------------------------------------
+ensure_tools() {
+    echo ">>> [Tools] Checking basic tools..."
+    local missing_tools=()
+    
+    for tool in curl tar xz; do
+        if ! command -v "$tool" &> /dev/null; then
+            missing_tools+=("$tool")
+        fi
+    done
+
+    if [ ${#missing_tools[@]} -eq 0 ]; then
+        echo "    All tools present."
+        return 0
+    fi
+
+    echo "    Missing tools: ${missing_tools[*]}. Attempting installation..."
+    
+    if command -v apk &> /dev/null; then
+        apk add --no-cache curl tar xz
+    elif command -v apt-get &> /dev/null; then
+        apt-get update && apt-get install -y curl tar xz-utils
+    elif command -v yum &> /dev/null; then
+        yum install -y curl tar xz
+    elif command -v dnf &> /dev/null; then
+        dnf install -y curl tar xz
+    elif command -v zypper &> /dev/null; then
+        zypper install -y curl tar xz
+    else
+        echo "!!! Error: Cannot install missing tools. No known package manager found."
+        exit 1
+    fi
+}
+
+# ----------------------------------------------------------------
+# 2. 环境安装 (System Node.js - Most Reliable on Alpine)
+# ----------------------------------------------------------------
+install_env() {
+    echo ">>> [Env] Setting up System Node.js environment..."
+    
+    # 尝试使用系统包管理器安装 Node.js 和 npm
+    if command -v apk &> /dev/null; then
+        echo "    Detected Alpine Linux. Installing nodejs and npm via apk..."
+        apk add --no-cache nodejs npm
+    elif command -v apt-get &> /dev/null; then
+        echo "    Detected Debian/Ubuntu. Installing nodejs and npm via apt..."
+        apt-get update && apt-get install -y nodejs npm
+    elif command -v yum &> /dev/null; then
+        yum install -y nodejs npm
+    elif command -v dnf &> /dev/null; then
+        dnf install -y nodejs npm
+    elif command -v zypper &> /dev/null; then
+        zypper install -y nodejs npm
+    else
+        echo "!!! Warning: No package manager found. Checking if Node is pre-installed..."
+    fi
+
+    # 验证安装
+    if ! command -v node &> /dev/null; then
+        echo "!!! Error: Node.js not found and could not be installed."
+        exit 1
+    fi
+    
+    if ! command -v npm &> /dev/null; then
+        echo "!!! Error: npm not found and could not be installed."
+        exit 1
+    fi
+
+    echo "    Node version: $(node -v)"
+    echo "    npm version: $(npm -v)"
+}
+
+# ----------------------------------------------------------------
+# 3. 项目构建与打包
+# ----------------------------------------------------------------
+build_project() {
+    echo ">>> [Build] Starting project build..."
+    
+    # 注入环境变量
+    if [ -n "$VITE_APP_BASE_URL" ]; then
+        echo "    Setting VITE_APP_BASE_URL=${VITE_APP_BASE_URL}"
+        # 兼容 package.json 中的 mode: pord (Typo in original project)
+        echo "VITE_APP_BASE_URL=${VITE_APP_BASE_URL}" > .env.pord
+        # 同时写入 .env 以防万一
+        echo "VITE_APP_BASE_URL=${VITE_APP_BASE_URL}" >> .env
+    fi
+
+    echo "    Installing dependencies..."
+    # 使用 npm install 而不是 npm ci，以避免因 lockfile 版本不匹配或 engines 检查导致的失败
+    npm install --no-audit --progress=false
+
+    echo "    Building..."
+    # 使用 package.json 中定义的 build:prod 命令
+    npm run build:prod
+
+    echo ">>> [Package] Compressing artifacts..."
+    if [ ! -d "dist" ]; then
+        echo "!!! Error: 'dist' directory not found after build."
+        # 列出当前目录以便调试
+        ls -la
+        exit 1
+    fi
+
+    # 直接打包 dist 目录下的内容
+    tar -C dist -czf "$DIST_FILE" .
+    
+    echo "    Success! Artifact created: $DIST_FILE"
+    ls -lh "$DIST_FILE"
+}
+
+# ==========================================
+# Main Execution Flow
+# ==========================================
+ensure_tools
+install_env
+build_project
@@ -1,9 +1,30 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>
-
 <template>
-  <RouterView />
+  <div>
+    <main>
+      <RouterView />
+    </main>
+    <Toaster
+      position="top-center"
+      :toast-options="{
+        style: {
+          background: '#ddd',
+          color: '#000',
+          border: '1px solid rgba(255, 255, 255)',
+        },
+        classes: {
+          title: 'text-[20px] font-bold',
+          toast: 'rounded-[20px]', // 顺便统一一下你 Dialog 的圆角风格
+        },
+      }"
+    />
+  </div>
 </template>

+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { onMounted } from 'vue'
+import 'vue-sonner/style.css'
+import { Toaster } from '@/components/ui/sonner'
+</script>
+
 <style scoped></style>
@@ -1,37 +1,34 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'

-export { default as Button } from "./Button.vue"
+export { default as Button } from './Button.vue'

 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
    },
  },
 )
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes["class"]
+}>()
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      props.class,
+    )"
+  >
+</template>
@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue"
@@ -0,0 +1,92 @@
+<template>
+  <div class="device-list-container">
+    <div v-if="!devices?.length" class="w-full text-center">暂无绑定设备</div>
+    <div v-else class="grid min-h-[76px] grid-cols-2 gap-3">
+      <div
+        v-for="device in devices"
+        :key="device.id"
+        @click="delDevice(device)"
+        class="relative h-[76px] rounded-[25px] border-2 p-4 text-[10px]"
+      >
+        <div class="flex h-full items-center justify-center gap-3">
+          <component
+            :is="getDeviceTypeInfo(device.user_agent)?.iconComponent"
+            class="h-6 w-6 text-white"
+          />
+          <div class="flex flex-col overflow-hidden">
+            <span class="text-white">设备: {{ getDeviceTypeInfo(device.user_agent)?.type }}</span>
+            <span class="font-mono text-[11px] tracking-tighter uppercase"
+              >SN: {{ device?.identifier?.slice(0, 4) }}{{ device.id }}
+            </span>
+          </div>
+        </div>
+        <X :size="16" class="absolute top-[5px] right-[10px] text-[12px]" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<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
+}
+
+defineProps<{
+  devices: Device[]
+}>()
+
+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
+  iconComponent: any
+}
+
+/**
+ * 获取设备类型和图标
+ * @param userAgent 浏览器代理字符串
+ */
+const getDeviceTypeInfo = (userAgent: string): DeviceTypeInfo => {
+  // 转换为小写以便进行不区分大小写的匹配
+  const ua = userAgent.toLowerCase()
+
+  if (ua.includes('ipad')) {
+    return { type: 'iPad', iconComponent: Tablet }
+  }
+  if (ua.includes('iphone') || ua.includes('ios')) {
+    return { type: 'iPhone', iconComponent: Smartphone }
+  }
+  if (ua.includes('android')) {
+    return { type: 'Android', iconComponent: Smartphone }
+  }
+  if (ua.includes('mac') || ua.includes('macos')) {
+    return { type: 'Mac', iconComponent: Laptop }
+  }
+  if (ua.includes('windows')) {
+    return { type: 'Windows', iconComponent: Monitor }
+  }
+  if (ua.includes('linux')) {
+    return { type: 'Linux', iconComponent: Cpu }
+  }
+
+  return { type: 'Unknown', iconComponent: HelpCircle }
+}
+</script>
@@ -0,0 +1,199 @@
+<template>
+  <Dialog :open="open" @update:open="handleClose">
+    <DialogContent
+      :show-close-button="false"
+      @pointer-down-outside="(event) => event.preventDefault()"
+      @focus-outside="(event) => event.preventDefault()"
+      class="max-w-[345px] rounded-[32px] border-none bg-[#E5E5E5] p-6"
+    >
+      <div class="flex flex-col items-center py-6">
+        <h2 class="mb-1 text-xl font-semibold text-black">订单状态</h2>
+        <div class="mb-10 text-[24px] font-bold text-black">
+          {{ statusInfo.title }}
+        </div>
+
+        <div
+          v-if="statusInfo.description"
+          class="mb-8 text-center text-sm whitespace-pre-line text-gray-600"
+        >
+          {{ statusInfo.description }}
+        </div>
+
+        <div class="mt-4 flex w-full gap-3">
+          <Button
+            variant="secondary"
+            class="h-[50px] flex-1 rounded-[25px] bg-[#D1D1D1] text-lg font-bold text-gray-600 hover:bg-gray-300"
+            @click="handleClose"
+          >
+            关闭
+          </Button>
+          <Button
+            class="h-[50px] flex-1 rounded-[25px] bg-[#ADFF5B] text-lg font-bold text-black hover:bg-[#9EE64F]"
+            @click="handleClose"
+          >
+            返回首页
+          </Button>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import request from '@/utils/request'
+
+const emit = defineEmits(['close', 'refresh'])
+
+const open = ref(false)
+const orderNo = ref<string | null>(null)
+const status = ref<number>(1) // 1: Pending, 2: Paid, 3: Finished, 4: Close, 5: Failed, -1: Error
+const countdown = ref('')
+let timer: any = null
+let countdownTimer: any = null
+let createdAt: Date | null = null
+/*
+*   static const int kr_statusPending = 1;    // 待支付
+  static const int kr_statusPaid = 2;       // 已支付
+  static const int kr_statusClose = 3;      // 已关闭
+  static const int kr_statusFailed = 4;     // 支付失败
+  static const int kr_statusFinished = 5;   // 已完成
+*
+* */
+const statusInfo = computed(() => {
+  switch (status.value) {
+    case -1:
+      return {
+        title: '检查失败',
+        description: '获取支付状态失败，请稍后刷新页面',
+      }
+    case 1: // kr_statusPending
+      return {
+        title: '待支付',
+        description: `订单正在处理中\n剩余时间: ${countdown.value}`,
+      }
+    case 2: // kr_statusPaid
+      return {
+        title: '支付确认中',
+        description: '订单已支付，系统正在确认，请稍候...',
+      }
+    case 3: // kr_statusClose
+      return {
+        title: '订单已关闭',
+        description: '该订单已超时或被手动关闭',
+      }
+    case 4: // kr_statusFailed
+      return {
+        title: '支付失败',
+        description: '订单支付失败，请检查支付信息并重试',
+      }
+    case 5: // kr_statusFinished
+      return {
+        title: '支付成功',
+        description: '您的订单已支付完成，感谢您的支持',
+      }
+    default:
+      return {
+        title: '订单处理中',
+        description: '请稍候...',
+      }
+  }
+})
+
+function handleClose() {
+  stopPolling()
+  open.value = false
+  emit('close')
+}
+
+async function checkStatus() {
+  if (!orderNo.value) return
+
+  try {
+    const res: any = await request.get('/api/v1/public/order/detail', { order_no: orderNo.value })
+    // 1. 保存订单创建时间（用于倒计时）
+    if (!createdAt && res.created_at) {
+      const timestamp = res.created_at
+      const isMilliseconds = timestamp > 10000000000
+      createdAt = new Date(isMilliseconds ? timestamp : timestamp * 1000)
+      startCountdown()
+    }
+
+    status.value = res.status
+
+    // --- 核心逻辑修改点 ---
+    if (status.value === 5) {
+      // 5: 已完成 (kr_statusFinished)
+      stopPolling()
+      emit('refresh') // 只有真正完成后才刷新父组件数据
+    } else if (status.value === 3 || status.value === 4) {
+      // 3: 已关闭 (kr_statusClose), 4: 支付失败 (kr_statusFailed)
+      stopPolling() // 终止态，不再查询
+    }
+    // 状态 1 和 2 继续保持定时器轮询
+  } catch (error) {
+    console.error('❌ 查询失败:', error)
+    status.value = -1
+    stopPolling()
+  }
+}
+
+function startPolling() {
+  stopPolling()
+  checkStatus()
+  timer = setInterval(checkStatus, 3000)
+}
+
+function stopPolling() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+}
+
+function startCountdown() {
+  if (!createdAt) return
+
+  const updateCountdown = () => {
+    const now = new Date()
+    // 假设订单有效期为 15 分钟 (900 秒)
+    const expiryTime = new Date(createdAt!.getTime() + 900 * 1000)
+    const diff = expiryTime.getTime() - now.getTime()
+    console.log('diff', diff)
+    if (diff <= 0) {
+      countdown.value = '00:00'
+      clearInterval(countdownTimer)
+      return
+    }
+
+    const minutes = Math.floor(diff / 1000 / 60)
+    const seconds = Math.floor((diff / 1000) % 60)
+    countdown.value = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+  }
+
+  updateCountdown()
+  if (countdownTimer) clearInterval(countdownTimer)
+  countdownTimer = setInterval(updateCountdown, 1000)
+}
+
+function show(no: string) {
+  orderNo.value = no
+  status.value = 1
+  createdAt = null
+  countdown.value = '15:00'
+  open.value = true
+  startPolling()
+}
+
+defineExpose({ show })
+
+onUnmounted(() => {
+  stopPolling()
+})
+</script>
@@ -0,0 +1,89 @@
+<template>
+  <div class="md:flex md:h-full md:flex-col md:justify-between">
+    <div class="bg-[#A8FF53] px-6 font-sans text-black md:flex-1">
+      <h2 class="mb-1 text-center text-2xl font-bold">选择付款方式</h2>
+
+      <div class="flex flex-col gap-4 pt-[43px]">
+        <div
+          v-for="item in list"
+          :key="item.value"
+          @click="handleSelect(item.value)"
+          :class="[
+            'flex h-[66px] cursor-pointer items-center justify-between border-[5px] border-black px-6 transition-all active:scale-[0.98]',
+            'rounded-[32px]', // 超大圆角
+            selectedValue === item.value ? 'bg-[#A8FF53]' : 'bg-[#A8FF53]',
+          ]"
+        >
+          <span class="text-xl font-semibold">{{ item.label }}</span>
+
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-full border-[1px] border-black bg-transparent"
+          >
+            <div
+              v-if="selectedValue === item.value"
+              class="h-3.5 w-3.5 rounded-full bg-black"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="px-6 pt-[55px]">
+      <h2 class="mb-1 text-center text-2xl font-bold">订单信息</h2>
+      <div class="ml-[11px] pt-[22px] text-[16px] font-semibold">
+        {{ selectedPlan?.days }}天套餐
+      </div>
+      <div class="ml-[11px] flex items-center justify-between pt-[22px] text-[16px] font-semibold">
+        <div>订单金额</div>
+        <div>USD {{ selectedPlan?.price }}</div>
+      </div>
+    </div>
+    <div class="px-6 pt-[85px] pb-[23px]">
+      <Button
+        :disabled="isPaying"
+        @click="$emit('pay', selectedValue)"
+        class="h-[50px] w-full rounded-[32px] border-none bg-black text-[16px] font-black text-white transition-all hover:bg-black/90 active:scale-[0.98] disabled:opacity-50"
+      >
+        <Loader2 v-if="isPaying" class="mr-2 h-4 w-4 animate-spin" />
+        {{ isPaying ? '正在支付...' : '立即支付' }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Loader2 } from 'lucide-vue-next'
+
+interface PaymentOption {
+  label: string
+  value: number | string
+}
+
+const props = defineProps<{
+  methods: any[]
+  selectedPlan: any
+  isPaying?: boolean
+}>()
+
+const list = computed(() =>
+  props.methods.map((item) => ({
+    label: item.name,
+    value: item.id,
+  })),
+)
+
+// 当前选中的值，默认选中第一个
+const selectedValue = ref<number | string>(props.methods[0]?.id || 1)
+
+const handleSelect = (value: number | string) => {
+  selectedValue.value = value
+}
+</script>
+
+<style scoped>
+/* 如果需要特殊的斜体感，可以在这里微调 */
+span {
+  letter-spacing: -0.02em;
+}
+</style>
@@ -0,0 +1,165 @@
+<template>
+  <div class="px-6 font-sans">
+    <h2 class="mb-1 text-center text-2xl font-bold">套餐选择</h2>
+    <p class="mb-4 text-center text-sm font-[100] text-gray-600">*所有套餐均不限流量</p>
+
+    <div class="space-y-4">
+      <template v-for="(plan, index) in plans" :key="plan.id">
+        <!-- Activity Price Card -->
+        <div
+          v-if="hasActivityPrice(plan, index)"
+          @click="$emit('select', activityPlan(plan, index).id)"
+          class="relative h-[126px] cursor-pointer overflow-hidden rounded-[40px] border-4 border-black bg-[#A8FF53] transition-all"
+        >
+          <!-- Left content (Original Plan but dimmed/struck) -->
+          <div class="py-4 pl-[25px] opacity-60">
+            <div class="text-2xl font-bold text-black">{{ plan.days }}天</div>
+            <div class="relative w-fit text-[40px] leading-none font-semibold text-black">
+              ${{ plan.price }}
+              <div class="absolute top-1/2 left-0 h-1.5 w-full -translate-y-1/2 bg-black/60"></div>
+            </div>
+            <div class="text-sm text-black">约${{ plan.daily }}/天</div>
+          </div>
+
+          <!-- Right overlay (Activity Info) -->
+          <div
+            class="absolute top-0 right-0 bottom-0 flex h-[120px] w-[126px] flex-col justify-center rounded-bl-[40px] bg-black/60 text-[#ADFF5B]"
+          >
+            <div class="ml-[4px] flex h-full w-full flex-col rounded-bl-[40px] bg-black">
+              <div class="pt-1.5 pl-1 leading-[1.05]">
+                <div class="text-[14px] font-bold">{{ activityTitle(plan, index) }}</div>
+                <div class="mb-0.5 text-[10px]" v-if="activityCountdown(plan, index)">
+                  {{ activityCountdown(plan, index) }}
+                </div>
+              </div>
+              <div
+                class="flex h-full flex-1 items-center justify-center rounded-bl-[40px] border-4 border-black bg-[#ADFF5B] text-[32px] leading-none font-semibold"
+                :class="
+                  isActivitySelected(plan, index)
+                    ? 'bg-black text-white'
+                    : 'bg-[#ADFF5B] text-black'
+                "
+              >
+                ${{ activityPrice(plan, index) }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Normal Card -->
+        <div
+          v-else
+          @click="$emit('select', plan.id)"
+          :class="[
+            'relative h-[126px] cursor-pointer overflow-hidden rounded-[40px] border-4 border-black py-4 pl-[45px] transition-all',
+            currentPlanIndex === index ? 'bg-black text-white' : 'bg-[#A8FF53] text-black',
+          ]"
+        >
+          <div class="flex items-center gap-2 text-2xl font-bold">
+            <Goods90Icon
+              v-if="plan.days === 90 && !plan.promoPrice"
+              :class="[currentPlanIndex === index ? 'text-[#ADFF5B]' : 'text-black']"
+            />
+            {{ plan.days }}天
+          </div>
+          <div class="text-[40px] leading-none font-semibold">${{ plan.price }}</div>
+          <div :class="'text-sm'">约${{ plan.daily }}/天</div>
+          <div
+            v-if="plan.discount"
+            :class="[
+              currentPlanIndex === index ? 'bg-[#A8FF53]! text-black' : ' ',
+              index > 1 ? 'top-[15px] -right-[30px] h-[35px]' : 'top-[20px] -right-[40px] h-[16px]',
+            ]"
+            class="absolute h-[16px] w-[126px] origin-center rotate-45 bg-black text-center text-[14px] leading-[16px] font-[200] font-semibold text-[#ADFF5B]"
+          >
+            <span
+              v-html="
+                plan.discount + (index === 2 ? '<br>年销百万' : index === 3 ? '<br>最划算' : '')
+              "
+            ></span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import Goods90Icon from './goods-90-icon.svg'
+const props = defineProps({
+  plans: Array,
+  currentPlanIndex: Number,
+  trialPlan: Object,
+  trialCountdown: String,
+  selectedPlanId: [String, Number],
+})
+defineEmits(['select'])
+
+const now = ref(Date.now())
+const countdownStart = Date.now()
+let timer = null
+
+const isTrialSelected = computed(() => {
+  return props.trialPlan && props.selectedPlanId === props.trialPlan.id
+})
+
+const hasActivityPrice = (plan, index) => {
+  return Boolean(plan?.promoPrice || (index === 0 && props.trialPlan))
+}
+
+const activityPlan = (plan, index) => {
+  if (plan?.promoPrice) return plan
+  if (index === 0 && props.trialPlan) return props.trialPlan
+  return plan
+}
+
+const activityTitle = (plan, index) => {
+  const promoPlan = activityPlan(plan, index)
+  return promoPlan?.promoTitle || promoPlan?.discount || '新客尝鲜价'
+}
+
+const activityPrice = (plan, index) => {
+  const promoPlan = activityPlan(plan, index)
+  return promoPlan?.promoPrice || promoPlan?.price
+}
+
+const activityCountdown = (plan, index) => {
+  const promoPlan = activityPlan(plan, index)
+  if (promoPlan?.promoPrice) {
+    return formatPromoCountdown(promoPlan.promoRemainingSeconds)
+  }
+  return props.trialCountdown
+}
+
+const isActivitySelected = (plan, index) => {
+  const promoPlan = activityPlan(plan, index)
+  return props.selectedPlanId === promoPlan?.id || (index === 0 && isTrialSelected.value)
+}
+
+const formatPromoCountdown = (remainingSeconds) => {
+  if (remainingSeconds === null || remainingSeconds === undefined) return ''
+
+  const elapsedSeconds = Math.floor((now.value - countdownStart) / 1000)
+  const totalSeconds = Math.max(0, Math.floor(remainingSeconds) - elapsedSeconds)
+  if (totalSeconds <= 0) return ''
+
+  const days = Math.floor(totalSeconds / 86400)
+  const hours = Math.floor((totalSeconds % 86400) / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+
+  if (days > 0) return `${days}d:${hours}h:${minutes}m后失效`
+  return `${hours}h:${minutes}m:${seconds}s后失效`
+}
+
+onMounted(() => {
+  timer = setInterval(() => {
+    now.value = Date.now()
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
@@ -0,0 +1,64 @@
+<template>
+  <div class="user-center-skeleton custom-pulse" :class="[layout === 'desktop' ? 'w-full' : '']">
+    <!-- --- Header Part --- -->
+    <template v-if="type === 'header'">
+      <div v-if="layout === 'mobile'" class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
+        <div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
+        <div class="flex flex-col gap-2">
+          <div class="h-5 w-40 rounded bg-[#A8FF53]/60"></div>
+          <div class="h-3 w-24 rounded bg-[#A8FF53]/40"></div>
+        </div>
+      </div>
+      <div v-else class="mb-3 flex flex-col items-center">
+        <div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
+        <div class="mt-2 h-6 w-32 rounded bg-[#A8FF53]/60"></div>
+      </div>
+    </template>
+
+    <!-- --- Devices Part --- -->
+    <template v-if="type === 'devices'">
+      <div v-if="layout === 'mobile'" class="h-[76px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
+      <div v-else class="h-[160px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
+    </template>
+
+    <!-- --- Plans Part --- -->
+    <template v-if="type === 'plans'">
+      <div class="space-y-4">
+        <div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
+        <div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
+      </div>
+    </template>
+
+    <!-- --- Payments Part --- -->
+    <template v-if="type === 'payments'">
+      <div class="h-[300px] w-full rounded-2xl bg-black/15"></div>
+    </template>
+
+    <!-- --- Full Layouts (Backward Compatibility) --- -->
+    <template v-if="!type">
+      <!-- Old Full Layout implementation if needed, but we'll use type-based now -->
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  type?: 'header' | 'devices' | 'plans' | 'payments'
+  layout?: 'mobile' | 'desktop'
+}>()
+</script>
+
+<style scoped>
+.custom-pulse {
+  animation: fast-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes fast-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+</style>
@@ -0,0 +1,3 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9698 0.620247L14.559 6.21814C14.5851 6.27797 14.6271 6.32974 14.6804 6.36799C14.7338 6.40624 14.7967 6.42956 14.8623 6.43549L21.0502 7.139C21.254 7.16112 21.4469 7.24088 21.6059 7.3687C21.7649 7.49652 21.8832 7.66698 21.9466 7.85961C22.01 8.05223 22.0158 8.25884 21.9632 8.45462C21.9107 8.65041 21.8021 8.82705 21.6505 8.96334L17.063 13.126C17.0131 13.1689 16.9759 13.2244 16.9554 13.2866C16.9349 13.3488 16.9317 13.4153 16.9464 13.479L18.1814 19.5116C18.2232 19.7098 18.2063 19.9157 18.1325 20.1046C18.0587 20.2935 17.9312 20.4572 17.7654 20.5762C17.5996 20.6952 17.4026 20.7642 17.198 20.7751C16.9934 20.786 16.79 20.7382 16.6123 20.6375L11.1877 17.6127C11.1306 17.5799 11.0657 17.5627 10.9997 17.5627C10.9337 17.5627 10.8689 17.5799 10.8118 17.6127L5.38595 20.6375C5.20818 20.7379 5.00485 20.7855 4.80041 20.7745C4.59596 20.7634 4.39908 20.6943 4.23341 20.5754C4.06774 20.4565 3.94033 20.2929 3.86648 20.1042C3.79263 19.9155 3.77549 19.7097 3.8171 19.5116L5.05209 13.479C5.06671 13.4153 5.0636 13.3488 5.04307 13.2866C5.02255 13.2244 4.98538 13.1689 4.93551 13.126L0.348975 8.96286C0.197134 8.82666 0.0883434 8.65001 0.0356868 8.45417C-0.0169699 8.25832 -0.0112508 8.05162 0.0521563 7.85891C0.115563 7.6662 0.233959 7.49569 0.393104 7.36789C0.552249 7.24009 0.745368 7.16044 0.949237 7.13852L7.1381 6.43501C7.20376 6.42908 7.26659 6.40576 7.31997 6.36751C7.37335 6.32926 7.4153 6.27749 7.4414 6.21765L10.0297 0.620247C10.1137 0.435474 10.2499 0.278626 10.422 0.168585C10.5941 0.0585442 10.7947 0 10.9997 0C11.2047 0 11.4053 0.0585442 11.5774 0.168585C11.7495 0.278626 11.8858 0.435474 11.9698 0.620247Z" fill="currentColor"/>
+</svg>
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './styles/index.css'
+import '@/utils/openinstall'

 const app = createApp(App)

@@ -0,0 +1,448 @@
+<template>
+  <div class="font-sans text-white">
+    <div class="flex flex-col gap-[10px]">
+      <div
+        v-for="item in downloadMethods"
+        :key="item.id"
+        @click="toggle(item.id)"
+        class="group relative flex flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all md:pb-6"
+      >
+        <div class="px-4 md:pl-[42px]">
+          <div
+            class="flex flex-wrap items-center gap-x-2 text-sm leading-tight font-bold md:text-2xl"
+          >
+            <StartIcon v-if="item.isHot" class="size-[20px] md:size-[30px]" />
+            <span>{{ item.title }}</span>
+
+            <span v-if="item.subtitle" class="font-medium">——{{ item.subtitle }}</span>
+
+            <span v-if="item.highlight" class="font-black text-[#FF00FF]"
+              >——{{ item.highlight }}</span
+            >
+          </div>
+
+          <!--  打开按钮      -->
+          <div
+            class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100"
+          >
+            <div
+              v-show="activeId !== item.id"
+              class="mt-[16px] flex items-center gap-[10px] md:mt-[60px] md:text-xl"
+            >
+              <span class="tracking-tight">点击展开详情</span>
+              <ArrowIcon class="size-[12px] md:size-[18px]" />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="activeId === item.id" class="px-2 pt-4 md:pt-8">
+          <div
+            class="animate-in fade-in zoom-in-95 border-t-2 border-white pt-[10px] text-[15px] leading-relaxed duration-200 md:pt-[20px]"
+          >
+            <!--  内容区域 (点击图片不收起，只有特定的关闭按钮收起) -->
+            <div class="relative px-2" @click.stop>
+              <div
+                class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100 md:text-xl"
+              >
+                <div class="relative z-10 flex items-center gap-[10px]" @click="toggle(item.id)">
+                  <span class="tracking-tight">点击收起</span>
+                  <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
+                </div>
+              </div>
+
+              <!-- Mobile Image Stack -->
+              <div class="relative -mt-10 flex min-h-[800px] flex-col md:hidden">
+                <img
+                  v-for="(img, idx) in item.mobileImages"
+                  :key="idx"
+                  :src="img"
+                  class="w-full"
+                  alt="mobile guide"
+                />
+                <!-- Mobile Hot Zones -->
+                <div
+                  v-for="(hz, hzIdx) in item.mobileHotzones"
+                  :key="hzIdx"
+                  class="absolute z-20 cursor-pointer"
+                  :style="{
+                    left: hz.x + 'px',
+                    top: hz.y + 'px',
+                    width: hz.w + 'px',
+                    height: hz.h + 'px',
+                  }"
+                  @click="handleHotzone(hz)"
+                >
+                  <span class="text-xs font-bold text-black" v-if="hz.type === 'text'">{{
+                    hz.payload
+                  }}</span>
+                </div>
+              </div>
+
+              <!-- PC Image Stack -->
+              <div class="relative mt-4 hidden min-h-[800px] flex-col md:flex">
+                <img
+                  v-for="(img, idx) in item.pcImages"
+                  :key="idx"
+                  :src="img"
+                  class="w-full"
+                  alt="pc guide"
+                />
+                <!-- PC Hot Zones -->
+                <div
+                  v-for="(hz, hzIdx) in item.pcHotzones"
+                  :key="hzIdx"
+                  class="absolute z-20 cursor-pointer"
+                  :style="{
+                    left: hz.x + 'px',
+                    top: hz.y + 'px',
+                    width: hz.w + 'px',
+                    height: hz.h + 'px',
+                  }"
+                  @click="handleHotzone(hz)"
+                >
+                  <span class="text-xs font-bold text-black" v-if="hz.type === 'text'">{{
+                    hz.payload
+                  }}</span>
+                </div>
+              </div>
+
+              <!-- 底部收起按钮 -->
+              <div class="absolute right-4 bottom-4 z-10">
+                <div @click="toggle(item.id)" class="h-[30px] w-[200px]">
+                  <div
+                    class="hidden cursor-pointer items-center justify-end gap-[10px] rounded-full bg-black/40 px-3 py-1 text-xl backdrop-blur-sm transition-all hover:bg-black/60 md:flex"
+                  >
+                    <span class="tracking-tight">点击收起</span>
+                    <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- iframe 弹窗 -->
+    <div
+      v-if="iframeVisible"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4"
+    >
+      <div class="relative w-full max-w-[400px] rounded-2xl bg-white p-4">
+        <div class="mb-2 flex justify-end">
+          <button
+            class="rounded-lg bg-black px-4 py-1 text-sm font-bold text-white"
+            @click="iframeVisible = false"
+          >
+            关闭
+          </button>
+        </div>
+        <iframe
+          width="100%"
+          height="400"
+          :src="accountShareUrl"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+          class="rounded-lg"
+        ></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ArrowIcon from './arrow-icon.svg?component'
+import StartIcon from './Star-1.svg?component'
+
+// Sliced WebP Images
+// Method 1
+import m1_1 from './mobile1/row-1-column-1.webp'
+import m1_2 from './mobile1/row-2-column-1.webp'
+import m1_3 from './mobile1/row-3-column-1.webp'
+import pc1_1 from './pc1/row-1-column-1.webp'
+import pc1_2 from './pc1/row-2-column-1.webp'
+import pc1_3 from './pc1/row-3-column-1.webp'
+
+// Method 2
+import m2_1 from './mobile2/row-1-column-1.webp'
+import m2_2 from './mobile2/row-2-column-1.webp'
+import m2_3 from './mobile2/row-3-column-1.webp'
+import pc2_1 from './pc2/row-1-column-1.webp'
+import pc2_2 from './pc2/row-2-column-1.webp'
+import pc2_3 from './pc2/row-3-column-1.webp'
+
+// Method 3
+import m3_1 from './mobile3/row-1-column-1.webp'
+import m3_2 from './mobile3/row-2-column-1.webp'
+import m3_3 from './mobile3/row-3-column-1.webp'
+import pc3_1 from './pc3/row-1-column-1.webp'
+import pc3_2 from './pc3/row-2-column-1.webp'
+import pc3_3 from './pc3/row-3-column-1.webp'
+import { getAllQueryString } from '@/utils/url-utils.ts'
+
+const ic = getAllQueryString('ic') || sessionStorage.getItem('ic')
+const ADJ_GO_LINK =
+  ic && typeof ic === 'string'
+    ? `https://hifastvpn.go.link?adj_t=1xf6e7ru&inviteCode=${ic}`
+    : 'https://hifastvpn.go.link/?adj_t=1xf6e7ru'
+
+const downLoadIos = ADJ_GO_LINK
+const accountShareUrl = 'https://aunlock.laomaos.com/share/jibsPdEN'
+
+interface Hotzone {
+  x: number
+  y: number
+  w: number
+  h: number
+  type: 'copy' | 'link' | 'text'
+  payload: string
+  label?: string
+}
+const accounts = [
+  { account: '点击获取邮箱', password: '****' },
+  // { account: 'prla08741@gmx.com', password: 'Qw990088' },
+  // { account: 'zhongcujiu8051@hotmail.com', password: 'Dx114461' },
+]
+const selectedIndex = ref(0) // 直接在内部定义数据
+const downloadMethods = computed(() => {
+  const account = accounts[selectedIndex.value]
+  return [
+    {
+      id: 1,
+      title: '创建新“香港Apple ID”',
+      subtitle: '首推',
+      isHot: true,
+      highlight: '',
+      mobileImages: [m1_1, m1_2, m1_3],
+      pcImages: [pc1_1, pc1_2, pc1_3],
+      mobileHotzones: [
+        {
+          x: 62,
+          y: 130,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com/account',
+        },
+        {
+          x: 142,
+          y: 1952,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
+      ] as Hotzone[],
+      pcHotzones: [
+        {
+          x: 410,
+          y: 224,
+          w: 140,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com/account',
+        },
+        {
+          x: 580,
+          y: 1689,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
+      ] as Hotzone[],
+    },
+    {
+      id: 2,
+      title: '修改已有 Apple ID 至 <香港>',
+      subtitle: '',
+      isHot: false,
+      highlight: '',
+      mobileImages: [m2_1, m2_2, m2_3],
+      pcImages: [pc2_1, pc2_2, pc2_3],
+      mobileHotzones: [
+        {
+          x: 62,
+          y: 130,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com',
+        },
+        {
+          x: 142,
+          y: 2510,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
+      ] as Hotzone[],
+      pcHotzones: [
+        {
+          x: 410,
+          y: 224,
+          w: 140,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com',
+        },
+        {
+          x: 580,
+          y: 2106,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
+      ] as Hotzone[],
+    },
+    {
+      id: 3,
+      title: '使用Hi快提供的公用账号',
+      subtitle: '',
+      isHot: false,
+      highlight: '谨慎选择',
+      mobileImages: [m3_1, m3_2, m3_3],
+      pcImages: [pc3_1, pc3_2, pc3_3],
+      mobileHotzones: [
+        {
+          x: 62,
+          y: 1950,
+          w: 170,
+          h: 20,
+          type: 'text', // 展示账号文字
+          payload: account.account,
+        },
+        {
+          x: 62,
+          y: 1985,
+          w: 170,
+          h: 20,
+          type: 'text', // 展示账号文字
+          payload: account.password,
+        },
+        {
+          x: 53,
+          y: 1941,
+          w: 200,
+          h: 32,
+          type: 'copy',
+          payload: account.account,
+          label: '账号',
+        },
+        {
+          x: 53,
+          y: 1976,
+          w: 200,
+          h: 32,
+          type: 'copy',
+          payload: account.password,
+          label: '密码',
+        },
+        {
+          x: 142,
+          y: 3006,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
+      ] as Hotzone[],
+      pcHotzones: [
+        {
+          x: 103,
+          y: 1426,
+          w: 140,
+          h: 20,
+          type: 'text', // 展示账号文字
+          payload: account.account,
+        },
+        {
+          x: 103,
+          y: 1463,
+          w: 140,
+          h: 20,
+          type: 'text', // 展示密码文字
+          payload: account.password,
+        },
+        {
+          x: 103,
+          y: 1414,
+          w: 194,
+          h: 34,
+          type: 'copy',
+          payload: account.account,
+          label: '账号',
+        },
+        {
+          x: 103,
+          y: 1451,
+          w: 194,
+          h: 34,
+          type: 'copy',
+          payload: account.password,
+          label: '密码',
+        },
+        {
+          x: 580,
+          y: 2386,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
+      ] as Hotzone[],
+    },
+  ]
+})
+
+const activeId = ref<number | null>(null)
+const iframeVisible = ref(false)
+
+/**
+ * 切换下载方式详情面板显示状态。
+ * @param {number} id 当前点击的下载方式 ID。
+ * @returns {void} 无返回值。
+ */
+const toggle = (id: number) => {
+  if (activeId.value === id) {
+    activeId.value = null
+    window.scrollTo(0, 0)
+  } else {
+    activeId.value = id
+
+    // 重点：当点开 ID 为 3 的面板时，随机切换账号索引
+    if (id === 3) {
+      // 生成一个与当前不同的随机数，或者纯随机
+      selectedIndex.value = selectedIndex.value === 0 ? 1 : 0
+    }
+  }
+}
+
+/**
+ * 处理热区点击行为。
+ * @param {Hotzone} hz 当前点击的热区配置。
+ * @returns {void} 无返回值。
+ */
+const handleHotzone = (hz: Hotzone) => {
+  if (hz.type === 'copy') {
+    iframeVisible.value = true
+  } else if (hz.type === 'link') {
+    window.open(hz.payload, '_blank')
+  }
+}
+</script>
+
+<style scoped>
+/* 针对整体风格进行微调 */
+.font-bold {
+  letter-spacing: -0.02em;
+}
+
+/* 移除移动端点击的高亮蓝色框 */
+div {
+  -webkit-tap-highlight-color: transparent;
+}
+</style>
@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5105 0L11.7556 6.90983H19.0211L13.1432 11.1803L15.3884 18.0902L9.5105 13.8197L3.63265 18.0902L5.87779 11.1803L-6.67572e-05 6.90983H7.26536L9.5105 0Z" fill="#ADFF5B"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.35098 0.101416L4.35098 7.62314C4.35079 7.64339 4.34446 7.66314 4.33279 7.6799C4.32112 7.69666 4.30463 7.70968 4.28539 7.71733C4.26615 7.72497 4.24502 7.72689 4.22467 7.72286C4.20431 7.71882 4.18563 7.70901 4.17097 7.69465L0.178818 3.7225C0.164119 3.70767 0.145131 3.69756 0.124387 3.69352C0.103641 3.68948 0.0821265 3.69171 0.0627125 3.6999C0.0432995 3.7081 0.0269087 3.72187 0.0157297 3.73938C0.00455077 3.75689 -0.000885175 3.77731 0.000145746 3.79792L0.105484 7.51912C0.105567 7.53222 0.10832 7.54517 0.113585 7.55723C0.11885 7.56928 0.126521 7.58019 0.136151 7.58933L5.52169 12.9683C5.53164 12.9783 5.54355 12.9863 5.55672 12.9917C5.5699 12.9972 5.58405 13 5.59836 13C5.61267 13 5.62683 12.9972 5.64 12.9917C5.65317 12.9863 5.66508 12.9783 5.67503 12.9683L11.1966 7.61793C11.2067 7.60781 11.2146 7.5958 11.2199 7.58262C11.2252 7.56944 11.2277 7.55536 11.2272 7.54122L11.1672 4.14767C11.1668 4.12768 11.1604 4.10825 11.1488 4.09176C11.1372 4.07527 11.1209 4.06244 11.1019 4.05485C11.083 4.04726 11.0621 4.04523 11.042 4.04901C11.0219 4.0528 11.0033 4.06223 10.9886 4.07616L7.19242 7.67124C7.17788 7.68535 7.15939 7.69494 7.13926 7.69882C7.11914 7.7027 7.0983 7.70069 7.07934 7.69305C7.06039 7.68541 7.04418 7.67247 7.03274 7.65587C7.02131 7.63926 7.01516 7.61973 7.01508 7.59973L7.01508 0.221036C7.01576 0.185813 7.01843 0.150654 7.02308 0.115719C7.02518 0.101361 7.0241 0.0867316 7.0199 0.0728175C7.01571 0.0589035 7.0085 0.0460284 6.99877 0.0350608C6.98904 0.0240932 6.97701 0.0152882 6.96349 0.00923998C6.94998 0.00319171 6.93529 4.07951e-05 6.92041 -1.8826e-07L4.45499 -2.96027e-07C4.4274 -2.97233e-07 4.40095 0.0106846 4.38144 0.0297039C4.36194 0.0487232 4.35098 0.0745188 4.35098 0.101416Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="20" height="11" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.664368 0.747314L9.66437 8.74731L18.6644 0.747314" stroke="white" stroke-width="2"/>
+</svg>
@@ -0,0 +1,110 @@
+<template>
+  <div class="bg-black font-sans text-white">
+    <div class="rounded-[30px]">
+      <div class="flex flex-col">
+        <div v-for="(item, index) in faqList" :key="index" class="flex flex-col">
+          <div
+            @click="toggle(index)"
+            class="flex cursor-pointer items-center justify-between py-4 transition-opacity active:opacity-70 md:py-8"
+          >
+            <h3 class="pr-5 text-[17px] leading-snug font-bold tracking-tight md:text-xl">
+              {{ item.question }}
+            </h3>
+
+            <ArrowIcon
+              :class="[
+                'mt-1 h-5 w-5 shrink-0 transition-transform duration-300',
+                activeIds.has(index) ? 'rotate-180' : '',
+              ]"
+            />
+          </div>
+
+          <transition
+            enter-active-class="transition-all duration-300 ease-out"
+            leave-active-class="transition-all duration-200 ease-in"
+            enter-from-class="max-h-0 opacity-0"
+            enter-to-class="max-h-[500px] opacity-100"
+            leave-from-class="max-h-[500px] opacity-100"
+            leave-to-class="max-h-0 opacity-0"
+          >
+            <div v-if="activeIds.has(index)" class="overflow-hidden">
+              <div class="pb-6 text-base leading-relaxed text-white/60">
+                <p
+                  class="mb-6 whitespace-pre-line last:mb-0"
+                  v-for="(answer, answerIndex) in item.answer"
+                  :key="answerIndex"
+                >
+                  {{ answer }}
+                </p>
+              </div>
+            </div>
+          </transition>
+
+          <div class="h-[1px] w-full bg-[#757575]"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import ArrowIcon from './arrow-icon2.svg?component'
+
+const faqList = ref([
+  {
+    question: '登陆公共 Apple ID 时，出现“双重验证”提示，且要求输入验证码怎么办？',
+    answer: [
+      '这是由于有其他用户没有按照教程操作，将公共 Apple ID 绑定手机号码，开启了双重验证所导致。',
+      '解决办法：请您先清除浏览器缓存，再刷新本页面，获取新的公共 Apple ID ，接着请按照教程一步一步操作。',
+    ],
+  },
+  {
+    question: '手机显示“丢失的 iPhone”，要求联系非官方的私人账号怎么办？',
+    answer: [
+      '这是因为您在手机设置中登陆了公开账号，导致设备被其他用户设置为“丢失模式”。',
+      '解决方法：输入正确的手机锁屏密码即可解除“丢失模式”，随后请从手机设置中 <立即退出公开账号>。切勿相信或添加任何非Hi快官方的私人账号！如有疑问，请通过右下角的官方客服获取帮助。',
+    ],
+  },
+  {
+    question: '下载Hi快 App 时提示出现 “App 不可用” 怎么办？',
+    answer: [
+      '遇到这种情况请首先检查您登录的 Apple ID 地区是否处于 <中国大陆>；或者是否刚切换过地区，Apple 可能还没完成信息同步。',
+      '解决办法：重新退出登录 <香港 Apple ID>，再进行下载。',
+    ],
+  },
+  {
+    question: '登入 App Store 却提示“验证失败”怎么办？',
+    answer: [
+      '这种错误场景会出现在您使用 <Apple ID A> 下载Hi快 VPN，然后使用 <Apple ID B> 进行版本更新。',
+      '解决办法：登录<Apple ID A>更新Hi快，或者删除旧版本，重新安装新版本。',
+    ],
+  },
+  {
+    question: '使用Hi快 App 时却提示 “不能购买此项目” 怎么办？',
+    answer: [
+      '遇到此情况可能说明您的手机中还存在Hi快 VPN 的 <历史旧版本>，它会与 App Store 版本产生冲突。',
+      '解决办法：删除旧版本，重新安装新版本。',
+    ],
+  },
+  {
+    question: '下载Hi快 App 时提示出现 “此项目已不再提供” 怎么办？',
+    answer: [
+      '遇到此情况可能说明您的手机中还存在Hi快 VPN 的 <历史旧版本>，它会与 App Store 版本产生冲突。',
+      '解决办法：删除旧版本，重新安装新版本。',
+    ],
+  },
+])
+
+// 1. 使用 reactive 配合 Set 记录所有展开的 ID
+const activeIds = reactive(new Set<number>())
+
+// 2. 修改 toggle 逻辑：如果已存在则删除（收起），不存在则添加（展开）
+const toggle = (index: number) => {
+  if (activeIds.has(index)) {
+    activeIds.delete(index)
+  } else {
+    activeIds.add(index)
+  }
+}
+</script>
@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 61 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.5 0C13.6572 0 0 10.2105 0 22.8242C0 28.0805 2.38578 32.8937 6.38467 36.7806C6.44567 36.9215 6.51344 37.0491 6.56767 37.1968C7.00057 38.4969 7.06851 39.8891 6.76422 41.2246C6.40891 42.8122 5.6666 44.2895 4.60211 45.5276C3.34634 46.966 1.77109 48.0965 0 48.8304C2.0481 49.6896 4.26434 50.0841 6.48633 49.9851C9.01057 49.8736 11.4803 49.2209 13.725 48.0718C15.7601 47.0254 17.595 45.6351 19.1472 43.9635C22.8299 45.0581 26.6551 45.61 30.5 45.6015C47.3428 45.6015 61 35.391 61 22.7772C61 10.1635 47.3428 0 30.5 0ZM32.4859 34.7599H28.5141V30.8261H32.4859V34.7599ZM33.9499 14.8089L32.4588 28.7652H28.5412L27.0501 14.8089V11.882H33.9499V14.8089Z" fill="white"/>
+</svg>
@@ -0,0 +1,14 @@
+<svg width="49" height="73" viewBox="0 0 49 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.175484 64L2.94748 55.06H5.51548L8.28748 64H6.03148L4.91548 59.536C4.79548 59.088 4.67548 58.612 4.55548 58.108C4.44348 57.604 4.32748 57.124 4.20748 56.668H4.15948C4.05548 57.132 3.94348 57.616 3.82348 58.12C3.70348 58.616 3.58748 59.088 3.47548 59.536L2.35948 64H0.175484ZM2.05948 61.948V60.292H6.37948V61.948H2.05948ZM9.05736 64V57.172H10.7974L10.9534 58.024H10.9894C11.2694 57.744 11.5854 57.504 11.9374 57.304C12.2974 57.104 12.7094 57.004 13.1734 57.004C13.9174 57.004 14.4574 57.252 14.7934 57.748C15.1294 58.244 15.2974 58.92 15.2974 59.776V64H13.1614V60.04C13.1614 59.568 13.0974 59.248 12.9694 59.08C12.8414 58.912 12.6414 58.828 12.3694 58.828C12.1294 58.828 11.9254 58.88 11.7574 58.984C11.5894 59.088 11.4014 59.24 11.1934 59.44V64H9.05736ZM19.4038 64.168C18.8358 64.168 18.3398 64.024 17.9158 63.736C17.4998 63.448 17.1758 63.036 16.9438 62.5C16.7198 61.964 16.6078 61.324 16.6078 60.58C16.6078 59.836 16.7438 59.2 17.0158 58.672C17.2878 58.136 17.6398 57.724 18.0718 57.436C18.5038 57.148 18.9558 57.004 19.4278 57.004C19.8038 57.004 20.1158 57.068 20.3638 57.196C20.6118 57.324 20.8478 57.496 21.0718 57.712L20.9998 56.692V54.412H23.1358V64H21.3958L21.2398 63.34H21.1918C20.9518 63.58 20.6758 63.78 20.3638 63.94C20.0518 64.092 19.7318 64.168 19.4038 64.168ZM19.9678 62.416C20.1758 62.416 20.3598 62.376 20.5198 62.296C20.6878 62.216 20.8478 62.064 20.9998 61.84V59.152C20.8398 59 20.6678 58.896 20.4838 58.84C20.2998 58.776 20.1158 58.744 19.9318 58.744C19.7398 58.744 19.5558 58.808 19.3798 58.936C19.2118 59.064 19.0718 59.26 18.9598 59.524C18.8558 59.788 18.8038 60.132 18.8038 60.556C18.8038 60.988 18.8478 61.344 18.9358 61.624C19.0318 61.896 19.1678 62.096 19.3438 62.224C19.5198 62.352 19.7278 62.416 19.9678 62.416ZM24.8542 64V57.172H26.5942L26.7502 58.36H26.7862C27.0422 57.904 27.3422 57.564 27.6862 57.34C28.0382 57.116 28.3862 57.004 28.7302 57.004C28.9382 57.004 29.1022 57.02 29.2222 57.052C29.3502 57.076 29.4622 57.108 29.5582 57.148L29.2102 58.984C29.0822 58.952 28.9622 58.928 28.8502 58.912C28.7382 58.888 28.6062 58.876 28.4542 58.876C28.2062 58.876 27.9422 58.968 27.6622 59.152C27.3902 59.336 27.1662 59.652 26.9902 60.1V64H24.8542ZM33.162 64.168C32.586 64.168 32.042 64.028 31.53 63.748C31.018 63.46 30.602 63.048 30.282 62.512C29.97 61.976 29.814 61.332 29.814 60.58C29.814 59.828 29.97 59.188 30.282 58.66C30.602 58.124 31.018 57.716 31.53 57.436C32.042 57.148 32.586 57.004 33.162 57.004C33.594 57.004 34.01 57.084 34.41 57.244C34.81 57.404 35.166 57.64 35.478 57.952C35.79 58.256 36.038 58.628 36.222 59.068C36.406 59.508 36.498 60.012 36.498 60.58C36.498 61.332 36.338 61.976 36.018 62.512C35.706 63.048 35.294 63.46 34.782 63.748C34.278 64.028 33.738 64.168 33.162 64.168ZM33.162 62.44C33.426 62.44 33.642 62.364 33.81 62.212C33.986 62.06 34.114 61.844 34.194 61.564C34.274 61.284 34.314 60.956 34.314 60.58C34.314 60.204 34.274 59.88 34.194 59.608C34.114 59.328 33.986 59.112 33.81 58.96C33.642 58.808 33.426 58.732 33.162 58.732C32.898 58.732 32.678 58.808 32.502 58.96C32.334 59.112 32.206 59.328 32.118 59.608C32.038 59.88 31.998 60.204 31.998 60.58C31.998 60.956 32.038 61.284 32.118 61.564C32.206 61.844 32.334 62.06 32.502 62.212C32.678 62.364 32.898 62.44 33.162 62.44ZM37.8386 64V57.172H39.9746V64H37.8386ZM38.9066 56.224C38.5466 56.224 38.2586 56.124 38.0426 55.924C37.8266 55.724 37.7186 55.456 37.7186 55.12C37.7186 54.792 37.8266 54.528 38.0426 54.328C38.2586 54.128 38.5466 54.028 38.9066 54.028C39.2586 54.028 39.5426 54.128 39.7586 54.328C39.9826 54.528 40.0946 54.792 40.0946 55.12C40.0946 55.456 39.9826 55.724 39.7586 55.924C39.5426 56.124 39.2586 56.224 38.9066 56.224ZM44.1421 64.168C43.5741 64.168 43.0781 64.024 42.6541 63.736C42.2381 63.448 41.9141 63.036 41.6821 62.5C41.4581 61.964 41.3461 61.324 41.3461 60.58C41.3461 59.836 41.4821 59.2 41.7541 58.672C42.0261 58.136 42.3781 57.724 42.8101 57.436C43.2421 57.148 43.6941 57.004 44.1661 57.004C44.5421 57.004 44.8541 57.068 45.1021 57.196C45.3501 57.324 45.5861 57.496 45.8101 57.712L45.7381 56.692V54.412H47.8741V64H46.1341L45.9781 63.34H45.9301C45.6901 63.58 45.4141 63.78 45.1021 63.94C44.7901 64.092 44.4701 64.168 44.1421 64.168ZM44.7061 62.416C44.9141 62.416 45.0981 62.376 45.2581 62.296C45.4261 62.216 45.5861 62.064 45.7381 61.84V59.152C45.5781 59 45.4061 58.896 45.2221 58.84C45.0381 58.776 44.8541 58.744 44.6701 58.744C44.4781 58.744 44.2941 58.808 44.1181 58.936C43.9501 59.064 43.8101 59.26 43.6981 59.524C43.5941 59.788 43.5421 60.132 43.5421 60.556C43.5421 60.988 43.5861 61.344 43.6741 61.624C43.7701 61.896 43.9061 62.096 44.0821 62.224C44.2581 62.352 44.4661 62.416 44.7061 62.416Z" fill="white"/>
+<g clip-path="url(#clip0_9522_1052)">
+<path d="M28.3624 37.0001C29.5995 37.0001 30.6784 35.9213 30.6784 34.6842V29.2754H32.2248C33.1527 29.2754 33.7712 28.6567 33.7712 27.729V12.2808H15.229V27.7291C15.229 28.657 15.8476 29.2755 16.7754 29.2755H18.3219V34.6843C18.3219 35.9214 19.4005 37.0003 20.6379 37.0003C21.8749 37.0003 22.9536 35.9214 22.9536 34.6843V29.2755H26.0466V34.6843C26.0464 35.9213 27.1253 37.0001 28.3624 37.0001Z" fill="white"/>
+<path d="M37.6333 27.7291C38.8705 27.7291 39.9491 26.6504 39.9491 25.4132V14.5957C39.9491 13.3652 38.8705 12.2808 37.6333 12.2808C36.3961 12.2808 35.3174 13.3652 35.3174 14.5957V25.4132C35.3174 26.6503 36.396 27.7291 37.6333 27.7291Z" fill="white"/>
+<path d="M11.3665 27.7291C12.6037 27.7291 13.6825 26.6504 13.6825 25.4132V14.5957C13.6825 13.3652 12.6039 12.2808 11.3665 12.2808C10.1294 12.2808 9.05078 13.3652 9.05078 14.5957V25.4132C9.05078 26.6503 10.1294 27.7291 11.3665 27.7291Z" fill="white"/>
+<path d="M31.9154 0.23335C31.6062 -0.0777832 31.1459 -0.0777832 30.8368 0.23335L28.7627 2.30053L28.667 2.39609C27.4371 1.78025 26.0583 1.4727 24.5227 1.46973C24.5152 1.46973 24.5078 1.46949 24.5003 1.46949H24.5C24.4922 1.46949 24.4851 1.46973 24.4773 1.46973C22.9419 1.4727 21.563 1.78025 20.3333 2.39609L20.2374 2.30053L18.1634 0.23335C17.854 -0.0777832 17.394 -0.0777832 17.0848 0.23335C16.7754 0.542754 16.7754 1.00192 17.0848 1.31108L19.0911 3.31776C18.4447 3.7494 17.8584 4.27758 17.3487 4.8817C16.1282 6.32835 15.3498 8.21107 15.2427 10.251C15.2417 10.2722 15.2396 10.2932 15.2386 10.3144C15.2321 10.4533 15.229 10.593 15.229 10.7331H33.7712C33.7712 10.593 33.7678 10.4533 33.7615 10.3144C33.7605 10.2932 33.7584 10.2722 33.7572 10.251C33.6504 8.21107 32.8717 6.32822 31.6513 4.88182C31.1417 4.27771 30.5553 3.74952 29.9088 3.31789L31.9154 1.3112C32.2248 1.00192 32.2248 0.542754 31.9154 0.23335ZM20.6349 8.03303C19.9951 8.03303 19.4765 7.51436 19.4765 6.87456C19.4765 6.23476 19.9951 5.71608 20.6349 5.71608C21.2747 5.71608 21.7934 6.23476 21.7934 6.87456C21.7934 7.51436 21.2747 8.03303 20.6349 8.03303ZM28.3652 8.03303C27.7254 8.03303 27.2068 7.51436 27.2068 6.87456C27.2068 6.23476 27.7254 5.71608 28.3652 5.71608C29.005 5.71608 29.5237 6.23476 29.5237 6.87456C29.5237 7.51436 29.005 8.03303 28.3652 8.03303Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_9522_1052">
+<rect width="37" height="37" fill="white" transform="translate(6)"/>
+</clipPath>
+</defs>
+</svg>
@@ -1,10 +1,259 @@
 <template>
-  <div class="container mx-auto p-8">
-    <h1 class="text-3xl font-bold mb-4">Help Page</h1>
-    <p class="text-gray-600">This is the help page content.</p>
+  <div class="min-h-screen bg-black text-white">
+    <!-- Full Width Header -->
+    <div class="h-[80px] md:h-[114px]">
+      <div class="fixed z-50 w-full bg-black pt-[20px] pb-[20px] md:pt-[34px]">
+        <div class="container">
+          <header
+            class="flex h-[40px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-5 md:h-[60px] md:pr-[58px] md:pl-[41px]"
+          >
+            <router-link to="/" class="flex items-center gap-2">
+              <!-- Desktop Logo -->
+              <!--              <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
+              <!-- Mobile Logo -->
+              <MobileLogo alt="Hi快VPN" class="block h-[22px] text-black md:h-[36px]" />
+            </router-link>
+            <RightText class="block h-[12px] text-black md:h-[24px]" />
+          </header>
+        </div>
+      </div>
+    </div>
+    <div class="">
+      <div class="w-full bg-black">
+        <div class="m-auto w-[340px] pb-[10px] md:w-[760px]">
+          <div
+            class="pb-[15px] text-center text-xl font-[900] md:pt-[20px] md:pb-[30px] md:text-2xl"
+          >
+            请选择适用您情形的选项
+          </div>
+          <div class="flex items-center justify-between">
+            <div
+              class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
+              :class="[activeIndex === 0 ? 'border-white' : 'border-black']"
+              @click="changeActiveIndex(0)"
+            >
+              <Button
+                class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
+              >
+                我只有中国大陆Apple ID
+              </Button>
+            </div>
+            <div
+              class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
+              :class="[activeIndex === 1 ? 'border-white' : 'border-black']"
+              @click="changeActiveIndex(1)"
+            >
+              <Button
+                class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
+              >
+                我有海外Apple ID
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="m-auto w-[340px] md:w-[760px]">
+      <Transition name="fade" mode="out-in">
+        <!--  tab1    -->
+        <div v-if="activeIndex === 0" key="tab1">
+          <div class="pt-[15px] pb-[15px] text-center text-xl font-[900] md:pb-[39px] md:text-2xl">
+            Hi快提供三种下载方式
+          </div>
+          <DownloadMethodList />
+        </div>
+        <!--  tab2    -->
+        <div v-else-if="activeIndex === 1" key="tab2">
+          <div
+            class="mx-auto flex w-[237px] items-center justify-center pt-[34px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:text-2xl"
+          >
+            <ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
+          </div>
+          <div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[494px]">
+            <div
+              @click="handleDownload('ios')"
+              class="relative block h-full w-full cursor-pointer transition-transform active:scale-95"
+            >
+              <img src="./Group%20100.png" class="h-full w-full" alt="下载" />
+              <!-- Loading Overlay -->
+              <div
+                v-if="isLoadingIos"
+                class="absolute inset-0 flex items-center justify-center rounded-[20px] bg-black/40"
+              >
+                <div
+                  class="h-8 w-8 animate-spin rounded-full border-4 border-[#ADFF5B] border-t-transparent md:h-12 md:w-12"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+
+    <div class="container md:px-[92px]">
+      <div class="pt-[56px] pb-[15px] text-center text-xl font-[900] md:text-2xl">
+        常见问题与解答
+      </div>
+      <div class="px-[24px]">
+        <FAQAccordion />
+      </div>
+    </div>
+
+    <div class="container px-[92px] pt-[34px]">
+      <div class="mx-auto w-[240px] text-center font-black text-[#757575] md:w-full md:text-xl">
+        若您在下载过程中遇到任何问题，
+        <br class="md:hidden" />
+        点击右下角在线客服按钮，
+        <br class="md:hidden" />
+        会有专业客服帮您解决问题
+      </div>
+    </div>
+
+    <div class="px-[18px] pt-[34px] pb-[calc(50px+env(safe-area-inset-bottom))]">
+      <div class="pb-[15px] text-center text-xl font-[900] md:pb-[30px] md:text-3xl">
+        其他客户端下载
+      </div>
+      <div class="flex justify-center gap-4">
+        <template v-for="client in otherClients" :key="client.type">
+          <div
+            @click="handleDownload(client.type)"
+            class="relative cursor-pointer transition-transform hover:brightness-110 active:scale-95"
+          >
+            <MacosIcon v-if="client.type === 'mac'" />
+            <WindowsIcon v-if="client.type === 'window'" />
+            <AndroidIcon v-if="client.type === 'android'" />
+
+            <!-- Loading Overlay for Android -->
+            <div
+              v-if="client.type === 'android' && isLoadingAndroid"
+              class="absolute inset-0 flex items-center justify-center rounded-lg bg-black/40"
+            >
+              <div
+                class="h-6 w-6 animate-spin rounded-full border-2 border-[#ADFF5B] border-t-transparent"
+              ></div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { computed, ref } from 'vue'
 // Help page logic
+import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
+import RightText from './right-text.svg?component'
+import ChatIcon from './Vector.svg?component'
+import MacosIcon from './macos.svg?component'
+import WindowsIcon from './windows.svg?component'
+import AndroidIcon from './android.svg?component'
+import request from '@/utils/request'
+import { getAllQueryString } from '@/utils/url-utils.ts'
+import { toast } from 'vue-sonner'
+
+import DownloadMethodList from './DownloadMethodList/DownloadMethodList.vue'
+import FAQAccordion from './FAQAccordion/index.vue'
+import { Button } from '@/components/ui/button'
+
+const handleDownload = async (key: string) => {
+  const platformMap: Record<string, string> = {
+    window: 'windows',
+    mac: 'mac',
+    android: 'android',
+    ios: 'ios',
+  }
+  const platform = platformMap[key] || 'windows'
+  const ic = getAllQueryString('ic') || sessionStorage.getItem('ic') || 'uSSfg1Y1vt'
+
+  // 设备环境检测
+  const ua = navigator.userAgent
+  const isAndroidDevice = /Android/i.test(ua)
+  const isIosDevice =
+    /iPhone|iPod|iPad/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+  const isMobileDevice = isAndroidDevice || isIosDevice
+
+  // 1. 安卓下载逻辑
+  if (key === 'android') {
+    if (isAndroidDevice) {
+      isLoadingAndroid.value = true
+      await triggerOpenInstall(ic)
+      isLoadingAndroid.value = false
+      return
+    } else {
+      window.open(
+        'https://api.hifast.biz/v1/common/client/download/file/Hi%E5%BF%ABVPN-android-1.0.0.apk',
+        '_blank',
+      )
+      return
+    }
+  }
+
+  // 2. iOS/Mac 下载逻辑
+  if (key === 'ios' || key === 'mac') {
+    if (isMobileDevice) {
+      if (key === 'ios') isLoadingIos.value = true
+      await triggerOpenInstall(ic)
+      isLoadingIos.value = false
+      return
+    } else {
+      window.open(
+        'https://apps.apple.com/us/app/hi%E5%BF%ABvpn/id6755683167?l=zh-Hans-CN',
+        '_blank',
+      )
+      return
+    }
+  }
+
+  // 3. 原有逻辑 (如 Windows)
+  try {
+    const res: any = await request.get('/api/v1/common/client/download', {
+      invite_code: ic,
+      platform: platform,
+    })
+    if (res.url) {
+      window.open(res.url, '_blank')
+    }
+  } catch (error) {
+    console.error('Download fetch failed', error)
+  }
+}
+
+// 提取 OpenInstall 触发逻辑
+const triggerOpenInstall = async (ic: string) => {
+  if (!(window as any).OI_SDK?.isReady && (window as any).OI_SDK_PROMISE) {
+    try {
+      await Promise.race([
+        (window as any).OI_SDK_PROMISE,
+        new Promise((_, reject) => setTimeout(() => reject(new Error('OpenInstall timeout')), 3000)),
+      ])
+    } catch (e) {
+      console.warn('OpenInstall readiness wait failed or timeout:', e)
+    }
+  }
+
+  if ((window as any).OI_SDK && (window as any).OI_SDK.OI) {
+    ;(window as any).OI_SDK.OI.wakeupOrInstall({ data: { platform: 'download', inviteCode: ic } })
+  }
+}
+
+const activeIndex = ref(0)
+const isLoadingIos = ref(false)
+const isLoadingAndroid = ref(false)
+
+const otherClients = computed(() => {
+  return [
+    { icon: WindowsIcon, type: 'window' },
+    { icon: MacosIcon, type: 'mac' },
+    { icon: AndroidIcon, type: 'android' },
+  ]
+})
+
+function changeActiveIndex(index: number) {
+  activeIndex.value = index
+  window.scrollTo(0, 0)
+}
 </script>
+
+<style scoped></style>
@@ -0,0 +1,13 @@
+<svg viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13954_5340)">
+<path d="M13.7436 22.7399C14.5039 22.7399 15.167 22.0768 15.167 21.3165V17.9923H16.1174C16.6877 17.9923 17.0678 17.6121 17.0678 17.0419V7.54761H5.672V17.042C5.672 17.6122 6.05216 17.9924 6.6224 17.9924H7.57288V21.3166C7.57288 22.0769 8.23577 22.7399 8.99624 22.7399C9.75649 22.7399 10.4195 22.0769 10.4195 21.3166V17.9924H12.3203V21.3166C12.3203 22.0768 12.9833 22.7399 13.7436 22.7399Z" fill="currentColor"/>
+<path d="M19.4417 17.042C20.202 17.042 20.8649 16.379 20.8649 15.6186V8.97037C20.8649 8.21407 20.202 7.54761 19.4417 7.54761C18.6813 7.54761 18.0183 8.21407 18.0183 8.97037V15.6186C18.0183 16.379 18.6812 17.042 19.4417 17.042Z" fill="currentColor"/>
+<path d="M3.29821 17.042C4.05861 17.042 4.72158 16.379 4.72158 15.6186V8.97037C4.72158 8.21407 4.05869 7.54761 3.29821 7.54761C2.53789 7.54761 1.875 8.21407 1.875 8.97037V15.6186C1.875 16.379 2.53789 17.042 3.29821 17.042Z" fill="currentColor"/>
+<path d="M15.9272 0.143414C15.7372 -0.0478047 15.4544 -0.0478047 15.2643 0.143414L13.9896 1.41388L13.9308 1.47261C13.175 1.09412 12.3275 0.905102 11.3838 0.903281C11.3792 0.903281 11.3746 0.903129 11.37 0.903129H11.3699C11.3651 0.903129 11.3607 0.903281 11.3559 0.903281C10.4122 0.905102 9.56482 1.09412 8.80905 1.47261L8.75009 1.41388L7.47545 0.143414C7.28529 -0.0478047 7.00256 -0.0478047 6.81256 0.143414C6.6224 0.333571 6.6224 0.61577 6.81256 0.805775L8.04561 2.03906C7.6483 2.30434 7.28802 2.62895 6.97471 3.00024C6.22463 3.88933 5.74621 5.04643 5.68042 6.30013C5.67981 6.31318 5.67852 6.32608 5.67792 6.33913C5.67389 6.4245 5.672 6.51032 5.672 6.59644H17.0678C17.0678 6.51032 17.0657 6.4245 17.0619 6.33913C17.0613 6.32608 17.06 6.31318 17.0592 6.30013C16.9936 5.04643 16.515 3.88925 15.7649 3.00031C15.4518 2.62903 15.0913 2.30441 14.694 2.03914L15.9272 0.805851C16.1174 0.61577 16.1174 0.333571 15.9272 0.143414ZM8.99442 4.93701C8.60121 4.93701 8.28244 4.61824 8.28244 4.22502C8.28244 3.83181 8.60121 3.51304 8.99442 3.51304C9.38763 3.51304 9.70641 3.83181 9.70641 4.22502C9.70641 4.61824 9.38763 4.93701 8.99442 4.93701ZM13.7454 4.93701C13.3522 4.93701 13.0334 4.61824 13.0334 4.22502C13.0334 3.83181 13.3522 3.51304 13.7454 3.51304C14.1386 3.51304 14.4574 3.83181 14.4574 4.22502C14.4574 4.61824 14.1386 4.93701 13.7454 4.93701Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_13954_5340">
+<rect width="22.7398" height="22.7398" fill="currentColor"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7045 12.7631C16.729 10.9104 17.7481 9.15738 19.3648 8.18699C18.3449 6.76488 16.6366 5.86322 14.8592 5.80893C12.9636 5.61467 11.1258 6.91639 10.1598 6.91639C9.17508 6.91639 7.68777 5.82822 6.08619 5.86039C3.99859 5.92624 2.05242 7.08501 1.03676 8.86687C-1.14651 12.5573 0.482015 17.9809 2.5734 20.964C3.61977 22.4247 4.84267 24.0564 6.44281 23.9985C8.00865 23.9351 8.59346 23.0237 10.4836 23.0237C12.3561 23.0237 12.9048 23.9985 14.5374 23.9617C16.2176 23.9351 17.2762 22.4945 18.2859 21.02C19.0377 19.9791 19.6162 18.8288 20 17.6116C18.0254 16.7962 16.7068 14.8562 16.7045 12.7631Z" fill="currentColor"/>
+<path d="M13.6208 3.84713C14.5369 2.77343 14.9882 1.39335 14.8789 0C13.4793 0.143521 12.1864 0.796601 11.2579 1.82911C10.35 2.83793 9.87748 4.19372 9.96681 5.53382C11.3669 5.54789 12.7434 4.91252 13.6208 3.84713Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,72 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="visible"
+        class="!pointer-events-auto fixed inset-0 z-[100] flex items-center justify-center p-4"
+      >
+        <div
+          class="backdrop-blur-[2px z-[110]] absolute inset-0 bg-black/40"
+          @click.stop="hide"
+        ></div>
+
+        <div
+          class="relative z-10 w-full max-w-[280px] rounded-[40px] border border-white/0 bg-[#DDDDDD] px-8 pt-8 pb-4 shadow-2xl"
+          @click.stop
+        >
+          <div class="space-y-2 text-black">
+            <h3 class="flex items-start text-lg font-black"><span class="mr-1">*</span>重要提示</h3>
+            <p class="text-[15px] leading-relaxed font-bold tracking-tight">
+              验证邮件已发送至邮箱，如无法找到，请检查垃圾邮件箱或营销邮件箱。
+            </p>
+          </div>
+
+          <div class="flex justify-center pt-3">
+            <Button
+              class="h-[40px] w-[85px] cursor-pointer rounded-full bg-[#A8FF53] font-medium text-black hover:bg-[#96E64A]"
+              @click.stop="hide"
+            >
+              好的
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeUnmount } from 'vue'
+import { Button } from '@/components/ui/button'
+
+const visible = ref(false)
+const timer: ReturnType<typeof setTimeout> | null = null
+
+const show = () => {
+  visible.value = true
+}
+
+const hide = () => {
+  console.log('hide')
+  visible.value = false
+}
+
+// 组件卸载前清除计时器防止内存泄漏
+onBeforeUnmount(() => {
+  if (timer) clearTimeout(timer)
+})
+
+defineExpose({ show, hide })
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+</style>
@@ -1,17 +1,257 @@
 <template>
-  <button
-    class="flex h-[40px] w-[140px] items-center space-x-2 bg-[url('@/pages/Home/liquid-button-bg.png')]"
-  >
-    <component :is="icon" class="h-6 w-6" />
-    <span class="text-sm font-medium">{{ label }}</span>
-  </button>
+  <div class="flex w-full flex-col items-center justify-center md:justify-start">
+    <!-- 主下载按钮 -->
+    <div
+      class="relative mx-auto flex h-[60px] w-[210px] items-center justify-center overflow-hidden rounded-full bg-[#ADFF5B] px-[16px] md:mb-4 md:ml-0 md:h-[83px] md:w-[300px] md:px-[24px]"
+    >
+      <router-link
+        v-if="mainButton?.link && !mainButton.link.startsWith('http')"
+        :to="mainButton.link"
+        class="flex h-full w-full items-center justify-center transition-transform hover:brightness-110 active:scale-95"
+      >
+        <component
+          :is="mainButton.mainIcon"
+          class="h-auto w-full text-black transition-transform"
+        />
+      </router-link>
+      <a
+        v-else-if="mainButton?.link"
+        :href="mainButton.link"
+        target="_blank"
+        :aria-label="mainButton.label"
+        class="flex h-full w-full items-center justify-center transition-transform hover:brightness-110 active:scale-95"
+      >
+        <component
+          :is="mainButton.mainIcon"
+          class="h-auto w-full text-black transition-transform"
+        />
+      </a>
+      <div
+        v-else
+        :id="mainButton?.id"
+        :aria-label="mainButton?.label"
+        @click="handleDownload(mainButton.key)"
+        class="flex h-full w-full cursor-pointer items-center justify-center transition-transform hover:brightness-110 active:scale-95"
+      >
+        <component
+          :is="mainButton?.mainIcon"
+          class="h-auto w-full text-black transition-transform"
+        />
+      </div>
+    </div>
+
+    <!-- 其他版本下载 -->
+    <div class="mt-2 w-full">
+      <div class="mb-3 text-center md:text-left">
+        <span class="text-xs whitespace-nowrap md:text-sm">其他版本下载</span>
+      </div>
+
+      <div class="flex items-center justify-center gap-4 md:justify-start">
+        <template v-for="(item, index) in otherButtons" :key="index">
+          <router-link
+            v-if="item.link && !item.link.startsWith('http')"
+            :to="item.link"
+            class="transition-transform hover:brightness-110 active:scale-95"
+          >
+            <component :is="item.secondaryIcon" class="h-[24px] text-white md:h-[34px]" />
+          </router-link>
+          <a
+            v-else-if="item.link"
+            :href="item.link"
+            target="_blank"
+            :aria-label="item.label"
+            class="transition-transform hover:brightness-110 active:scale-95"
+          >
+            <component :is="item.secondaryIcon" class="h-[24px] text-white md:h-[34px]" />
+          </a>
+          <div
+            v-else
+            :id="item.id"
+            :aria-label="item.label"
+            @click="handleDownload(item.key)"
+            class="cursor-pointer transition-transform hover:brightness-110 active:scale-95"
+          >
+            <component :is="item.secondaryIcon" class="h-[24px] text-white md:h-[34px]" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
-import type { Component } from 'vue'
+import Icon1 from './Group 105.svg?component'
+import Icon2 from './Group 106.svg?component'
+import Icon3 from './Group 107.svg?component'
+import Icon4 from './Group 108.svg?component'
+import WinIcon from './WinIcon.svg?component'
+import MacIcon from './MacIcon.svg?component'
+import AppleIcon from './AppleIcon.svg?component'
+import AndroidIcon from './AndroidIcon.svg?component'

-defineProps<{
-  icon: Component
-  label: string
-}>()
+import request from '@/utils/request'
+import { computed, ref, onMounted } from 'vue'
+import { getAllQueryString } from '@/utils/url-utils.ts'
+
+const currentPlatform = ref('win')
+
+onMounted(() => {
+  const ua = navigator.userAgent
+  const platform = navigator.platform || '' // 辅助判断
+
+  // 1. 先判断 Android (通常比较稳定)
+  if (/Android/i.test(ua)) {
+    currentPlatform.value = 'android'
+  }
+  // 2. 判断 iOS 设备 (iPhone, iPod)
+  else if (/iPhone|iPod/i.test(ua)) {
+    currentPlatform.value = 'ios'
+  }
+  // 3. 核心改进：区分 Mac 和 iPad
+  else if (/Macintosh|Mac OS X/i.test(ua)) {
+    // iPadOS 桌面模式下，支持多点触控（通常 > 1）
+    // 而真正的 Mac 电脑通常 maxTouchPoints 为 0 或 undefined
+    if (navigator.maxTouchPoints > 1) {
+      currentPlatform.value = 'ios' // 归类为 iOS 端（iPad）
+    } else {
+      currentPlatform.value = 'mac'
+    }
+  }
+  // 4. 其他情况默认为 Windows
+  else {
+    currentPlatform.value = 'win'
+  }
+
+  console.log('Detected Platform:', currentPlatform.value)
+})
+
+// request.get('/api/v1/common/client/download', {
+//   invite_code: getAllQueryString('ic'),
+//   platform: 'mac',
+// }).then((res: any) => {
+//   downLoadMac.value = res.url
+// })
+
+const downLoadWin = ref('')
+
+const handleDownload = async (key: string) => {
+  const platformMap: Record<string, string> = {
+    win: 'windows',
+    mac: 'mac',
+    android: 'android',
+    ios: 'ios',
+  }
+  const platform = platformMap[key] || 'windows'
+  const ic = getAllQueryString('ic') || sessionStorage.getItem('ic') || 'uSSfg1Y1vt'
+
+  // 设备环境检测
+  const ua = navigator.userAgent
+  const isAndroidDevice = /Android/i.test(ua)
+  const isIosDevice =
+    /iPhone|iPod|iPad/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+  const isMobileDevice = isAndroidDevice || isIosDevice
+
+  // 1. 安卓下载逻辑
+  if (key === 'android') {
+    if (isAndroidDevice) {
+      await triggerOpenInstall(ic)
+      return
+    } else {
+      window.open(
+        'https://api.hifast.biz/v1/common/client/download/file/Hi%E5%BF%ABVPN-android-1.0.0.apk',
+        '_blank',
+      )
+      return
+    }
+  }
+
+  // 2. iOS/Mac 下载逻辑
+  if (key === 'ios' || key === 'mac') {
+    if (isMobileDevice) {
+      await triggerOpenInstall(ic)
+      return
+    } else {
+      window.open(
+        'https://apps.apple.com/us/app/hi%E5%BF%ABvpn/id6755683167?l=zh-Hans-CN',
+        '_blank',
+      )
+      return
+    }
+  }
+
+  // 3. 原有逻辑 (如 Windows)
+  try {
+    const res: any = await request.get('/api/v1/common/client/download', {
+      invite_code: ic,
+      platform: platform,
+    })
+    if (res.url) {
+      if (key === 'win') {
+        downLoadWin.value = res.url
+      }
+      window.open(res.url, '_blank')
+    }
+  } catch (error) {
+    console.error('Download fetch failed', error)
+  }
+}
+
+// 提取 OpenInstall 触发逻辑
+const triggerOpenInstall = async (ic: string) => {
+  if (!(window as any).OI_SDK?.isReady && (window as any).OI_SDK_PROMISE) {
+    try {
+      await Promise.race([
+        (window as any).OI_SDK_PROMISE,
+        new Promise((_, reject) => setTimeout(() => reject(new Error('OpenInstall timeout')), 3000)),
+      ])
+    } catch (e) {
+      console.warn('OpenInstall readiness wait failed or timeout:', e)
+    }
+  }
+
+  if ((window as any).OI_SDK && (window as any).OI_SDK.OI) {
+    ;(window as any).OI_SDK.OI.wakeupOrInstall({ data: { platform: 'download', inviteCode: ic } })
+  }
+}
+
+const allDownloadOptions = computed(() => [
+  {
+    key: 'win',
+    mainIcon: Icon1,
+    secondaryIcon: WinIcon,
+    link: downLoadWin.value,
+    label: 'Windows',
+    id: 'downloadButton_win',
+  },
+  {
+    key: 'mac',
+    mainIcon: Icon3,
+    secondaryIcon: MacIcon,
+    link: '/help',
+    label: 'macOS',
+  },
+  {
+    key: 'ios',
+    mainIcon: Icon2,
+    secondaryIcon: AppleIcon,
+    link: '/help',
+    label: 'iOS',
+  },
+  {
+    key: 'android',
+    mainIcon: Icon4,
+    secondaryIcon: AndroidIcon,
+    label: 'Android',
+    id: 'downloadButton_android',
+  },
+])
+
+const mainButton = computed(() => {
+  const platform = currentPlatform.value
+  return allDownloadOptions.value.find((opt) => opt.key === platform) || allDownloadOptions.value[0]
+})
+
+const otherButtons = computed(() => {
+  return allDownloadOptions.value.filter((opt) => opt.key !== currentPlatform.value)
+})
 </script>
@@ -1,26 +1,259 @@
 <template>
-  <div class="grid gap-4 py-4">
-    <div class="grid gap-2">
-      <label for="email" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Email</label>
-      <input
-        id="email"
-        type="email"
-        placeholder="m@example.com"
-        class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-      />
+  <form @submit.prevent="handleLogin" class="flex flex-col gap-6 text-base text-black md:text-2xl">
+    <div class="rounded-[20px] bg-[#78788029] px-4">
+      <div class="relative">
+        <Input
+          v-model.trim="email"
+          type="text"
+          name="user_email_identity"
+          autocomplete="new-password"
+          placeholder="Email"
+          class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
+          @focus="isFocused = true"
+          @blur="onBlur"
+          @keydown="handleKeyDown"
+        />
+        <transition name="fade">
+          <div
+            v-if="isFocused && suggestList.length > 0"
+            class="absolute top-[55px] left-0 z-[100] w-full rounded-xl border border-white/20 bg-white/95 p-1 shadow-2xl backdrop-blur-xl dark:bg-black/90"
+          >
+            <div
+              v-for="(item, index) in suggestList"
+              :key="item.full"
+              @mousedown="selectSuggest(item.full)"
+              :class="[
+                'flex cursor-pointer items-center rounded-lg px-3 py-2 text-sm transition-colors md:text-xl',
+                activeIndex === index ? 'bg-[#A8FF53]/10' : '',
+              ]"
+            >
+              <span class="font-medium text-black/80">{{ prefix }}</span>
+
+              <span class="font-medium text-black">{{ item.userInputPart }}</span>
+
+              <span class="text-black opacity-30">{{ item.suggestPart }}</span>
+            </div>
+          </div>
+        </transition>
+        <div class="absolute bottom-0 left-0 h-[1px] w-full bg-gray-400/30"></div>
+      </div>
+
+      <div class="relative flex items-center">
+        <div class="flex-1">
+          <Input
+            v-model.trim="code"
+            type="text"
+            inputmode="numeric"
+            name="code"
+            autocomplete="one-time-code"
+            placeholder="验证码"
+            class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
+          />
+        </div>
+        <Button
+          @click="handleGetCode"
+          :disabled="countdown > 0 || isSendingCode"
+          class="relative h-10 min-w-[100px] cursor-pointer overflow-hidden rounded-full bg-[#4B94E6] px-[32px] text-base font-bold text-white hover:bg-[#4B94E6]/90 md:min-w-[130px] md:px-[45px] md:text-[18px]"
+        >
+          <div class="flex items-center justify-center">
+            <Loader2 v-if="isSendingCode" class="absolute left-4 h-4 w-4 animate-spin md:left-8" />
+
+            <span :class="{ 'ml-4': isSendingCode }">
+              {{ isSendingCode ? '发送中' : countdown > 0 ? `${countdown}s` : '获取' }}
+            </span>
+          </div>
+        </Button>
+      </div>
    </div>
-    <div class="grid gap-2">
-      <label for="password" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Password</label>
-      <input
-        id="password"
-        type="password"
-        class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-      />
+
+    <div class="flex gap-4 pt-2">
+      <Button
+        type="button"
+        variant="secondary"
+        @click="emit('close')"
+        class="h-[48px] flex-1 cursor-pointer rounded-[25px] bg-[#D1D1D1] text-lg font-medium text-[#757575] hover:bg-[#C1C1C1]"
+      >
+        取消
+      </Button>
+      <Button
+        type="submit"
+        :disabled="isLoggingIn"
+        class="relative h-[48px] flex-1 cursor-pointer overflow-hidden rounded-[25px] bg-[#A8FF53] text-lg font-medium text-black hover:bg-[#96E64A]"
+      >
+        <div class="flex items-center justify-center">
+          <Loader2 v-if="isLoggingIn" class="absolute left-4 h-5 w-5 animate-spin md:left-8" />
+          <span :class="{ 'ml-2': isLoggingIn }"> 登录/注册 </span>
+        </div>
+      </Button>
    </div>
-    <Button type="submit" class="w-full">Sign In</Button>
-  </div>
+    <CodeSentTip ref="CodeSentTipRef" />
+  </form>
 </template>

 <script setup lang="ts">
+import { ref, computed, watch } from 'vue'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { toast } from 'vue-sonner'
+import CodeSentTip from '@/pages/Home/components/CodeSentTip.vue'
+import request from '@/utils/request'
+import { useRouter } from 'vue-router'
+import { Loader2 } from 'lucide-vue-next'
+
+const CodeSentTipRef = ref<InstanceType<typeof CodeSentTip> | null>(null)
+const email = ref('')
+const code = ref('')
+const countdown = ref(0)
+const isFocused = ref(false)
+const commonSuffixes = ['@gmail.com', '@outlook.com', '@qq.com', '@163.com']
+const activeIndex = ref(-1) // 记录当前键盘选中的索引
+const isSendingCode = ref(false) // 新增 loading 状态
+
+// 1. 逻辑：提取 @ 前的字符
+const prefix = computed(() => {
+  const atIndex = email.value.indexOf('@')
+  return atIndex > -1 ? email.value.slice(0, atIndex) : email.value
+})
+
+// 输入变化时重置索引
+watch(email, () => {
+  activeIndex.value = -1
+})
+// 键盘控制逻辑
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (!suggestList.value.length) return
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value + 1) % suggestList.value.length
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value =
+      (activeIndex.value - 1 + suggestList.value.length) % suggestList.value.length
+  } else if (e.key === 'Enter' && activeIndex.value !== -1) {
+    e.preventDefault()
+    // 修复之前的 [object Object] 问题，确保传入的是 .full
+    selectSuggest(suggestList.value[activeIndex.value].full)
+  } else if (e.key === 'Tab' && activeIndex.value !== -1) {
+    // 💡 新增：按下 Tab 键时也自动补全
+    e.preventDefault()
+    selectSuggest(suggestList.value[activeIndex.value].full)
+  }
+}
+
+// 2. 逻辑：生成建议列表
+const suggestList = computed(() => {
+  const val = email.value.trim()
+  if (!val || val.length < 1) return []
+
+  const atIndex = val.indexOf('@')
+  // 用户目前输入的后缀部分（例如输入了 "abc@gm"，则 domainPart 为 "@gm"）
+  const domainPart = atIndex > -1 ? val.slice(atIndex) : ''
+
+  // 过滤匹配的后缀
+  const matches = commonSuffixes.filter((s) => s.startsWith(domainPart) && s !== domainPart)
+
+  return matches.map((full) => {
+    return {
+      full: full, // 完整后缀，用于点击填入
+      userInputPart: domainPart, // 用户已经输入的后缀部分（标色）
+      suggestPart: full.replace(domainPart, ''), // 还没输入的推荐部分（置灰）
+    }
+  })
+})
+
+// 4. 处理选中
+const selectSuggest = (fullSuffix: string) => {
+  email.value = prefix.value + fullSuffix
+  isFocused.value = false
+}
+
+const onBlur = () => {
+  // 必须延迟，否则点击列表时会先触发 blur 导致列表消失无法选中
+  setTimeout(() => {
+    isFocused.value = false
+    activeIndex.value = -1 // 重置索引
+  }, 200)
+}
+
+// 3. 校验逻辑
+const validateEmail = (str: string) => {
+  return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(str)
+}
+const emit = defineEmits(['close'])
+const handleGetCode = async () => {
+  if (!email.value) {
+    toast('请输入邮箱')
+    return
+  }
+
+  if (!validateEmail(email.value)) {
+    return toast.error('邮箱格式无效，请检查')
+  }
+
+  isSendingCode.value = true // [开始加载]
+
+  try {
+    // 1. 检查用户是否存在
+    const { exist } = await request.get<{ exist: boolean }>('/api/v1/auth/check', {
+      email: email.value,
+    })
+
+    // 2. 发送验证码
+    await request.post('/api/v1/common/send_code', {
+      email: email.value,
+      type: exist ? 2 : 1, // 1=登录, 2=注册
+    })
+
+    // 3. 成功后的后续处理
+    CodeSentTipRef.value?.show()
+    countdown.value = 60
+    const timer = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) clearInterval(timer)
+    }, 1000)
+  } catch (error: any) {
+    console.error('发送验证码失败:', error)
+    // 错误处理已经在 request 拦截器或此处 toast 过了
+  } finally {
+    isSendingCode.value = false // [结束加载]
+  }
+}
+const router = useRouter()
+const isLoggingIn = ref(false)
+
+const handleLogin = () => {
+  if (!code.value) {
+    toast('请输入验证码')
+    return
+  }
+  if (!validateEmail(email.value)) {
+    return toast.error('邮箱格式无效，请检查')
+  }
+
+  isLoggingIn.value = true
+  request
+    .post<any, { token: string }>('/api/v1/auth/login/email', {
+      email: email.value,
+      code: code.value,
+    })
+    .then((res) => {
+      localStorage.setItem('Authorization', res.token)
+      localStorage.setItem('UserEmail', email.value)
+      router.push({ path: '/user-center' })
+    })
+    .catch((error) => {
+      console.error('登录失败', error)
+    })
+    .finally(() => {
+      isLoggingIn.value = false
+    })
+}
 </script>
+
+<style scoped>
+/* 移除 Shadcn Input 的默认边框阴影，保持纯净感 */
+input:focus {
+  outline: none;
+}
+</style>
@@ -1,13 +1,18 @@
 <template>
  <Dialog :open="isOpen" @update:open="setOpen">
-    <DialogContent class="sm:max-w-[425px]">
-      <DialogHeader>
-        <DialogTitle>Login</DialogTitle>
-        <DialogDescription>
-          Enter your credentials to access your account.
+    <DialogContent
+      @pointer-down-outside="(event) => event.preventDefault()"
+      @focus-outside="(event) => event.preventDefault()"
+      class="max-w-[300px] rounded-4xl bg-[#DDDDDD] p-[14px] md:max-w-[390px]"
+      :showCloseButton="false"
+    >
+      <DialogHeader class="py-2 pl-2">
+        <DialogTitle class="text-left text-base md:text-2xl">登录Hi快帐户</DialogTitle>
+        <DialogDescription class="text-left text-base text-black md:text-2xl">
+          如使用新邮箱地址，将自动为您创建Hi快帐户
        </DialogDescription>
      </DialogHeader>
-      <LoginForm />
+      <LoginForm @close="isOpen = false" />
    </DialogContent>
  </Dialog>
 </template>
@@ -39,6 +44,6 @@ const hide = () => {

 defineExpose({
  show,
-  hide
+  hide,
 })
 </script>
@@ -0,0 +1,5 @@
+<svg  viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1116 0.0118162C16.9306 -0.294218 22.1579 5.38658 21.2692 12.1411C20.6604 16.7678 17.0315 20.4574 12.4153 21.1753C5.11499 22.3107 -0.973361 16.2395 0.129739 8.96223C0.880978 4.00611 5.08396 0.237434 10.1116 0.0118162ZM6.49253 5.57971V5.15095L5.98082 5.17139V7.82566H6.51301V6.03912C6.51301 5.98384 6.63856 5.77528 6.68403 5.72991C6.88648 5.5281 7.29764 5.51339 7.4835 5.74493C7.50613 5.77314 7.57751 5.89024 7.57751 5.9166V7.82566H8.1097V5.99835C8.1097 5.94388 8.21835 5.76649 8.26341 5.72286C8.46761 5.52535 8.93703 5.50705 9.10159 5.76445C9.11408 5.78387 9.1742 5.92774 9.1742 5.93704V7.82566H9.70639V5.79408C9.70639 5.7478 9.62795 5.54057 9.6004 5.49142C9.3318 5.01168 8.57411 4.99431 8.20125 5.3545C8.14677 5.40712 8.05789 5.57378 8.01795 5.58022C7.97975 5.58798 7.99153 5.56969 7.9818 5.55365C7.95384 5.50726 7.94073 5.45402 7.905 5.4061C7.60444 5.00309 6.91567 5.00514 6.61542 5.4061C6.57978 5.45372 6.56678 5.5094 6.53851 5.55324C6.52551 5.57347 6.54087 5.58941 6.49263 5.5796L6.49253 5.57971ZM12.5518 7.82566V5.85539C12.5518 5.81707 12.4886 5.63723 12.4674 5.59248C12.1186 4.85861 10.5293 4.96621 10.4024 5.84517H10.9039C11.0519 5.48621 11.7558 5.45167 11.9549 5.75658C11.9666 5.77446 12.0196 5.88727 12.0196 5.89627V6.23316C11.4897 6.3051 10.5307 6.18166 10.3345 6.84942C10.0652 7.76599 11.284 8.18596 11.8843 7.59902C11.9319 7.55243 11.97 7.44902 12.04 7.43778V7.82566H12.5517H12.5518ZM15.5608 6.00846C15.4337 4.96539 13.8804 4.80915 13.3746 5.63478C13.0153 6.22141 13.0868 7.29166 13.7078 7.68322C14.3639 8.09685 15.4815 7.83905 15.561 6.96815H15.0595C14.9687 7.24251 14.7832 7.40059 14.4871 7.41796C13.5044 7.47579 13.4897 5.83066 14.1785 5.59932C14.5531 5.47354 14.9288 5.63356 15.0595 6.00846H15.561H15.5608ZM7.1639 9.17927C5.47873 9.29443 4.41475 10.5135 4.18239 12.1265C3.87671 14.2482 4.74347 16.4983 7.13758 16.6867C9.76558 16.8934 11.0634 14.884 10.8525 12.4504C10.6708 10.3526 9.32217 9.03182 7.1639 9.17916V9.17927ZM16.83 11.2762C16.7202 9.40591 14.6005 8.79854 13.0581 9.3822C11.3439 10.0309 11.1638 12.1881 12.9005 12.96C13.8462 13.3804 16.4376 13.3588 15.9806 14.9514C15.7548 15.7383 14.68 15.9375 13.9772 15.8676C13.2545 15.7957 12.5363 15.3986 12.429 14.6247H11.5284C11.5735 15.7605 12.4946 16.458 13.5512 16.6397C15.195 16.9222 17.1231 16.2394 16.9504 14.2701C16.7967 12.5179 14.6073 12.67 13.4325 12.1845C12.3671 11.7442 12.3516 10.5542 13.4063 10.1377C14.3723 9.75629 15.8132 10.0661 15.909 11.2762H16.8302H16.83Z" fill="currentColor"/>
+<path d="M7.26639 10.0163C8.68592 9.90412 9.63357 10.7978 9.86378 12.1503C10.179 14.0017 9.43061 16.0109 7.24008 15.8494C6.04358 15.7612 5.31119 14.8035 5.12758 13.6891C4.86675 12.1062 5.39639 10.1641 7.26639 10.0163Z" fill="currentColor"/>
+<path d="M12.0195 6.62085C12.0894 7.12757 11.7454 7.48858 11.2338 7.43514C10.9315 7.40346 10.6886 7.10938 10.8934 6.83523C11.0759 6.5906 11.737 6.64987 12.0195 6.62095V6.62085Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,193 @@
+<template>
+  <div class="review-carousel-container relative">
+    <div
+      class="review-card lucid-glass-bar relative flex items-center overflow-hidden rounded-2xl p-4 text-white md:p-5"
+      :style="{ height: isMobile ? '114px' : '130px' }"
+    >
+      <!-- Static More Reviews Button, 不受动画影响，随时可点 -->
+      <router-link
+        to="/reviews"
+        class="absolute top-[18px] right-4 z-20 cursor-pointer text-[10px] text-white underline decoration-white underline-offset-4 transition-colors hover:text-[#ADFF5B] md:top-[16px] md:right-5 md:text-sm"
+      >
+        More Reviews
+      </router-link>
+      <!-- 动画应用在卡片内部的内容上 -->
+      <transition name="fade" mode="out-in">
+        <div v-if="currentReview" :key="currentIndex" class="flex h-full w-full items-center">
+          <!-- Avatar -->
+          <div class="mr-4 flex-shrink-0 md:mr-6">
+            <img
+              :src="currentReview.avatar"
+              alt="User Avatar"
+              class="h-[70px] w-[70px] rounded-full border-2 border-pink-300/30 object-cover md:h-[84px] md:w-[84px]"
+            />
+          </div>
+
+          <!-- Content -->
+          <div class="min-w-0 flex-grow">
+            <div class="mb-1 flex items-start justify-between">
+              <h3 class="truncate pr-20 text-base font-bold md:pr-28 md:text-xl">
+                {{ currentReview.username }}
+              </h3>
+            </div>
+
+            <!-- Stars and Rating -->
+            <div class="mb-1 flex items-center gap-1 md:mb-2">
+              <div class="flex gap-0.5">
+                <svg
+                  v-for="i in 5"
+                  :key="i"
+                  class="h-3 w-3 text-[#ADFF5B] md:h-4 md:w-4"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                  />
+                </svg>
+              </div>
+              <span class="ml-1 text-xs font-medium text-white/50 md:text-sm">4.9</span>
+              <span class="ml-2 text-xs text-white/30 md:text-sm"
+                >{{ currentReview.reviewCount }}k reviews</span
+              >
+            </div>
+
+            <!-- Comment Text -->
+            <p class="line-clamp-2 text-xs leading-[1.4] text-white/90 md:pr-4 md:text-sm">
+              “{{ currentReview.comment }}”
+            </p>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed } from 'vue'
+
+// Import avatars
+import avatar1 from './avatars/avatar1.png'
+import avatar2 from './avatars/avatar2.png'
+import avatar3 from './avatars/avatar3.png'
+import avatar4 from './avatars/avatar4.png'
+import avatar6 from './avatars/avatar6.png'
+
+const isMobile = ref(false)
+
+const reviews = [
+  {
+    username: '庄子不给',
+    avatar: avatar1,
+    comment: '真心不错，比我只前买的那个好用多了。网宿很给力。',
+    reviewCount: '5.7',
+  },
+  {
+    username: 'TechEnthusiast',
+    avatar: avatar6,
+    comment: 'Speed is incredible! The best VPN I have used in years for international streaming.',
+    reviewCount: '12.4',
+  },
+  {
+    username: '阿杰',
+    avatar: avatar2,
+    comment: '非常稳定的连接，在高峰时段也没掉过线。UI设计很现代，用着很舒服。',
+    reviewCount: '3.2',
+  },
+  {
+    username: 'Lina_Zhang',
+    avatar: avatar3,
+    comment: '客服响应速度很快，配置简单。推荐给需要长期稳定翻墙的朋友们。',
+    reviewCount: '8.9',
+  },
+  {
+    username: 'GlobalNomad',
+    avatar: avatar4,
+    comment: 'Perfect for my travels. Low latency and high security. A must-have for privacy.',
+    reviewCount: '6.1',
+  },
+]
+
+const currentIndex = ref(0)
+const currentReview = computed(() => reviews[currentIndex.value])
+
+let timer: any = null
+
+const startCarousel = () => {
+  timer = setInterval(() => {
+    currentIndex.value = (currentIndex.value + 1) % reviews.length
+  }, 5000)
+}
+
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 768
+}
+
+onMounted(() => {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+  startCarousel()
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<style scoped>
+.review-carousel-container {
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .review-carousel-container {
+    max-width: 400px;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.review-card {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  transition: all 0.3s ease;
+  border-radius: 16px !important;
+}
+
+.review-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(173, 255, 91, 0.1), transparent 50%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+</style>
@@ -0,0 +1,6 @@
+<svg  viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="9.08603" height="9.1215" fill="currentColor"/>
+<rect x="9.91211" width="9.08603" height="9.1215" fill="currentColor"/>
+<rect y="9.95068" width="9.08603" height="9.1215" fill="currentColor"/>
+<rect x="9.91211" y="9.95068" width="9.08603" height="9.1215" fill="currentColor"/>
+</svg>
@@ -1,100 +1,147 @@
 <template>
  <div
-    class="relative min-h-screen overflow-hidden bg-[#24963e] pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:pb-0"
+    class="relative min-h-screen overflow-hidden bg-black bg-[url('@/pages/Home/bg-mobile.webp')] bg-cover bg-center bg-no-repeat pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col md:bg-[url('@/pages/Home/bg-desktop.webp')] md:pb-0"
  >
-    <!-- Background Gradient Effects -->
-    <div
-      class="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full bg-[#34d399] opacity-20 blur-[100px]"
-    ></div>
-
    <!-- Full Width Header -->
-    <div class="h-[88px]">
-      <header
-        class="fixed top-[20px] right-[18px] left-[18px] z-50 flex h-[68px] items-center justify-between rounded-[90px] pr-[10px] pl-6 transition-all duration-300"
-        style="
-          backdrop-filter: blur(36px);
-          box-shadow:
-            0px 0px 33px 0px #f2f2f280 inset,
-            -3px -4.5px 1.5px -3px #b3b3b3 inset,
-            3px 4.5px 1.5px -3px #b3b3b333 inset,
-            4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
-            -4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
-          border-image-source: linear-gradient(
-            135deg,
-            rgba(255, 255, 255, 0.4) 0%,
-            rgba(255, 255, 255, 0) 30%
-          );
-          border-image-slice: 1;
-        "
-      >
-        <div class="flex items-center gap-2">
-          <!-- Desktop Logo -->
-          <img :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto md:block" />
-          <!-- Mobile Logo -->
-          <img :src="MobileLogo" alt="Hi快VPN" class="block h-[28px] w-[67px] w-auto md:hidden" />
+    <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]" />
+            </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
+              @click="openLoginModal"
+              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>
-        <button
-          @click="openLoginModal"
-          class="flex h-[48px] items-center rounded-full bg-[#70C877] px-6 text-sm font-bold backdrop-blur-md transition hover:bg-white/30"
-        >
-          登陆 / 注册
-        </button>
-      </header>
+      </div>
    </div>

    <!-- Main Content Container -->
-    <div class="container mx-auto flex flex-1 flex-col md:px-6">
-      <main class="f pt-10">
+    <div class="container mx-auto flex flex-1 flex-col">
+      <main class="pt-10 md:flex md:flex-1 md:justify-between md:pt-0">
        <!-- Left Column: Text & Downloads -->
-        <div class="md:w-1/2">
-          <div class="mb-[20px] ml-[42px]">
-            <h2 class="mb-2 text-5xl font-black italic md:text-7xl">
-              <img :src="Logo" alt="Hi快VPN" class="h-[34px] w-auto" />
+        <div class="pb-4 md:flex md:w-[432px] md:flex-col md:justify-center">
+          <div class="mb-[20px] ml-[42px] md:ml-[17px]">
+            <h2 class="mb-2 text-2xl font-black md:text-8xl">
+              <Logo class="h-[34px] md:h-[66px]" />
            </h2>
-            <p class="font-600 text-3xl md:text-4xl">网在我在, 网快我快</p>
+            <p class="font-600 text-3xl md:text-[48px]">网在我在, 网快我快</p>
+            <div class="overflow-hidden">
+              <div class="float-left mt-2 rounded-full bg-white px-4 py-2 md:mt-4">
+                <UserCount class="h-[29px]" />
+              </div>
+            </div>
          </div>

          <!-- Screenshot Image -->
-          <div class="relative z-10 mx-auto mb-9 w-full max-w-[182px]">
+          <div class="relative z-10 mx-auto mb-9 w-full max-w-[182px] md:hidden">
            <img
              :src="ScreenshotMobile"
              alt="App Screenshot"
-              class="h-auto w-full drop-shadow-2xl"
+              class="h-auto min-h-[284px] w-full drop-shadow-2xl"
            />
+            <div class="absolute right-[8%] bottom-[97px] z-50 aspect-square w-[58%]">
+              <!-- Ripple Animation (Background) -->
+              <div class="ripple-container absolute inset-0 top-[7px]">
+                <div class="ripple ripple-outer-3"></div>
+                <div class="ripple ripple-outer-2"></div>
+                <div class="ripple ripple-outer-1"></div>
+                <div class="ripple ripple-core size-[80%]!"></div>
+              </div>
+              <!-- Center Image (Foreground/Top Layer) -->
+              <div
+                class="absolute inset-0 bottom-0 z-100 bg-[url('@/pages/Home/connected-mobile-bg.png')] bg-cover bg-center bg-no-repeat"
+              ></div>
+            </div>
          </div>

          <!-- Download Buttons Grid -->
-          <div class="mb-9 grid grid-cols-2 gap-4 px-[42px]">
-            <DownloadButton :icon="AppleIcon" label="iPho版本下载" />
-            <DownloadButton :icon="MonitorIcon" label="Wind下载" />
-            <DownloadButton :icon="SmartphoneIcon" label="Andro本下载" />
-            <DownloadButton :icon="MonitorIcon" label="Mac电脑下载" />
+          <div
+            class="mb-4 flex grid-cols-2 flex-wrap gap-[10px] px-[24px] md:mt-[124px] md:ml-[17px] md:px-0"
+          >
+            <DownloadButton />
+          </div>
+          <!-- Review Carousel -->
+          <div class="mb-2 md:hidden">
+            <ReviewCarousel />
          </div>

          <!-- Features / Footer Info -->
-          <div class="mb-5 w-full text-center text-xs leading-5 font-[300]">
-            <p>最先进加密协议 - 安全有保障</p>
-            <p>全真实IEPL专线 - IP纯净且稳定</p>
-            <p>4K高清 / 不限流量 - 网速有多快, Hi快有多快</p>
-            <p>极速闪连功能 - 连接永远快人一步</p>
+          <div
+            class="mb-5 w-full text-center text-[10px] leading-5 font-[300] md:ml-[17px] md:text-left md:text-sm"
+          >
+            <p>最新加密协议-安全有保障</p>
+            <p>IEPL专线-纯净、稳定</p>
+            <p>不限流-网速多快，Hi快多快</p>
+            <p>极速闪连-永远快人一步</p>
+            <div class="flex justify-center md:justify-start">
+              <a
+                href="https://getsapp.net/xcom"
+                target="_blank"
+                class="lucid-glass-bar mt-[8px] flex h-[30px] w-[100px] shrink-0 items-center justify-center space-x-2 rounded-full transition-transform hover:brightness-110 md:mt-[16px]"
+              >
+                <div class="flex items-center justify-center">
+                  <img src="./x-logo.png" alt="X.com" class="h-[16px] w-[77px]" />
+                </div>
+              </a>
+            </div>
          </div>
-
-          <div class="mx-auto mb-1 h-[20px] w-[352px]">
+          <div class="mb-[10px] hidden md:ml-[17px] md:block md:text-left">
+            <CompanyNameIcon class="h-[16px]" />
+          </div>
+          <div class="mx-auto mb-1 h-[20px] w-[352px] md:ml-[17px]">
            <img src="./image-1.png" alt="image" />
          </div>
-          <div class="text-center text-[10px] leading-[14px] font-[300]">
+          <div class="mt-2 mb-1 md:hidden">
+            <CompanyNameIcon class="mx-auto h-[10px]" />
+          </div>
+          <div class="text-center text-[10px] leading-[14px] font-[300] md:ml-[17px] md:text-left">
            <span class="font-[600]">Hi快VPN™</span> &copy; All rights reserved.<br />
-            <a href="#" class="underline">Terms of Service</a>
-            <a href="#" class="ml-2 underline">Privacy Policy</a>
+            <router-link to="/terms" class="underline">Terms of Service</router-link>
+            <router-link to="/privacy" class="ml-2 underline">Privacy Policy</router-link>
          </div>
        </div>

        <!-- Right Column: Phone Screenshot -->
-        <div class="relative mt-12 flex hidden w-full justify-center md:mt-0 md:w-1/2">
-          <!-- Decorative elements behind phone -->
-          <div
-            class="absolute top-1/2 left-1/2 -z-0 h-[60%] w-[60%] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#a3e635] opacity-20 blur-[60px]"
-          ></div>
+        <div class="relative hidden w-full max-w-[582px] md:mt-0 md:block">
+          <!-- Review Carousel -->
+          <div class="absolute right-[2vw]">
+            <ReviewCarousel />
+          </div>
+          <!-- Screenshot with Ripple Effect -->
+          <div class="absolute right-[10%] bottom-0 z-50 aspect-square w-[58%] overflow-hidden">
+            <!-- Ripple Animation (Background) -->
+            <div class="ripple-container absolute inset-0">
+              <div class="ripple ripple-outer-3"></div>
+              <div class="ripple ripple-outer-2"></div>
+              <div class="ripple ripple-outer-1"></div>
+              <div class="ripple ripple-core"></div>
+            </div>
+            <!-- Center Image (Foreground/Top Layer) -->
+            <div
+              class="absolute inset-0 bottom-[36px] z-100 bg-[url('@/pages/Home/connected-bg.png')] bg-cover bg-center bg-no-repeat"
+            ></div>
+          </div>
+          <div class="absolute right-[2vw] bottom-0 max-w-[582px]">
+            <img :src="ScreenshotDesktop" alt="App Screenshot" class="relative z-10 w-full" />
+          </div>
        </div>
      </main>
    </div>
@@ -104,13 +151,71 @@
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useLocalStorage } from '@vueuse/core'
+import CompanyNameIcon from './company-name.svg?component'
 import LoginFormModal from './components/LoginFormModal.vue'
 import DownloadButton from './components/DownloadButton.vue'
-import Logo from './logo.svg'
-import MobileLogo from './mobile-logo.svg'
+import Logo from './logo.svg?component'
+import UserCount from './user-count.svg?component'
+import ReviewCarousel from './components/ReviewCarousel/index.vue'
+import MobileLogo from './mobile-logo.svg?component'
 import ScreenshotMobile from './screenshot-mobile.png'
-import { AppleIcon, MonitorIcon, SmartphoneIcon, LocateFixedIcon } from 'lucide-vue-next'
+import ScreenshotDesktop from './screenshot-desktop.webp'
+import request from '@/utils/request'
+import { getAllQueryString } from '@/utils/url-utils.ts'
+
+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()
+})
+
+const fetchUserInfo = async () => {
+  if (!token.value) return
+
+  try {
+    const res = (await request.get('/api/v1/public/user/info')) as any
+    const emailInfo = res.auth_methods?.find((item: any) => item.auth_type === 'email')
+    if (emailInfo) {
+      userEmail.value = emailInfo.auth_identifier
+    }
+  } catch (error: any) {
+    console.error('Failed to fetch user info:', error)
+    if (error?.code === 401 || error?.status === 401) {
+      token.value = ''
+      userEmail.value = ''
+    }
+  }
+}
+
+onMounted(() => {
+  const ic = getAllQueryString('ic')
+  if (ic && typeof ic === 'string') {
+    sessionStorage.setItem('ic', ic)
+  }
+  fetchUserInfo()
+  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 } })
+    }
+  },
+)

 const loginModalRef = ref<InstanceType<typeof LoginFormModal> | null>(null)

@@ -118,3 +223,63 @@ const openLoginModal = () => {
  loginModalRef.value?.show()
 }
 </script>
+
+<style scoped>
+.ripple-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+.ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: #a8ff53; /* Brand neon green */
+  will-change: width, height, opacity;
+}
+
+/* Core: Fixed minimum diameter (~57% of max) */
+.ripple-core {
+  width: 70%;
+  height: 70%;
+  opacity: 1;
+  z-index: 4;
+}
+
+/* Outer Layer 1: Opacity 0.8, 5.4s */
+.ripple-outer-1 {
+  animation: breathe 5.4s ease-in-out infinite alternate;
+  opacity: 0.8;
+  z-index: 3;
+}
+
+/* Outer Layer 2: Opacity 0.6, 4.2s */
+.ripple-outer-2 {
+  animation: breathe 4.2s ease-in-out infinite alternate;
+  opacity: 0.6;
+  z-index: 2;
+}
+
+/* Outer Layer 3 (Outer-most): Opacity 0.4, 3s */
+.ripple-outer-3 {
+  animation: breathe 3s ease-in-out infinite alternate;
+  opacity: 0.4;
+  z-index: 1;
+}
+
+@keyframes breathe {
+  0% {
+    width: 57%;
+    height: 57%;
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
@@ -1,9 +1,9 @@
-<svg width="103" height="29" viewBox="0 0 103 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.4016 11.4828H17.0339L19.3193 0H26.26L20.5763 28.7559H13.6144L15.8796 17.2933H9.24829L6.96193 28.7559H0L4.88123 4.20849L2.71884 0H12.6668L10.4016 11.4828Z" fill="white"/>
-<path d="M29.5968 28.7559H22.6561L26.7156 8.2363H33.6708L29.5968 28.7559Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8974 5.31659L47.9128 6.28534L48.4606 3.90191H52.8411L53.7012 0H60.0375L59.3081 3.90191H67.3656L65.775 13.4087H67.7568L66.9216 18.8301H58.1346L65.775 24.4081L61.4983 28.7559L53.3629 22.3658L44.1319 28.7559L41.9109 26.556L41.4977 28.7559H35.4228L37.8303 16.29L33.6237 15.7134L36.7327 5.46556H39.9206L40.9768 0H46.896L45.8974 5.31659ZM42.6336 22.706L48.9036 18.8301H43.3612L42.6336 22.706ZM46.896 12.7283L44.7086 11.6538L44.3789 13.4087H51.042L52.0069 9.11375H49.4774L46.896 12.7283ZM57.4561 13.4087H59.5945L60.3768 9.11375H58.3172L57.4561 13.4087Z" fill="white"/>
-<path d="M75.7576 22.3514L78.5379 15.6634H81.5884L76.1459 28.7559H73.0955L72.3103 15.6634H75.3607L75.7576 22.3514Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M85.5412 15.6634C86.4527 15.6725 87.5357 15.7459 88.5464 16.0651C89.0518 16.2202 89.5124 16.4575 89.9275 16.7676C90.7578 17.3971 91.2998 18.3916 91.2999 19.9334C91.2999 21.1832 90.8303 22.4242 89.7564 23.3913C88.6734 24.3584 86.9764 24.9789 84.5215 24.9789H83.7632L83.0501 28.7559H79.9997L82.4994 15.6634H85.5412ZM84.2688 22.3331H85.027C86.7057 22.3331 88.4474 21.6942 88.4474 20.0247C88.4473 18.3279 86.6334 18.3092 85.3067 18.3092H85.0357L84.2688 22.3331Z" fill="white"/>
-<path d="M98.0504 22.3149L99.3228 15.6634H102.373L99.8735 28.7559H96.8231L94.9462 22.114L93.6824 28.7559H90.6319L93.1317 15.6634H96.1821L98.0504 22.3149Z" fill="white"/>
-<path d="M34.011 6.52561H27.0539L28.3407 0.0201823H35.3027L34.011 6.52561Z" fill="white"/>
+<svg  viewBox="0 0 103 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4016 11.4828H17.0339L19.3193 0H26.26L20.5763 28.7559H13.6144L15.8796 17.2933H9.24829L6.96193 28.7559H0L4.88123 4.20849L2.71884 0H12.6668L10.4016 11.4828Z" fill="currentColor"/>
+<path d="M29.5968 28.7559H22.6561L26.7156 8.2363H33.6708L29.5968 28.7559Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8974 5.31659L47.9128 6.28534L48.4606 3.90191H52.8411L53.7012 0H60.0375L59.3081 3.90191H67.3656L65.775 13.4087H67.7568L66.9216 18.8301H58.1346L65.775 24.4081L61.4983 28.7559L53.3629 22.3658L44.1319 28.7559L41.9109 26.556L41.4977 28.7559H35.4228L37.8303 16.29L33.6237 15.7134L36.7327 5.46556H39.9206L40.9768 0H46.896L45.8974 5.31659ZM42.6336 22.706L48.9036 18.8301H43.3612L42.6336 22.706ZM46.896 12.7283L44.7086 11.6538L44.3789 13.4087H51.042L52.0069 9.11375H49.4774L46.896 12.7283ZM57.4561 13.4087H59.5945L60.3768 9.11375H58.3172L57.4561 13.4087Z" fill="currentColor"/>
+<path d="M75.7576 22.3514L78.5379 15.6634H81.5884L76.1459 28.7559H73.0955L72.3103 15.6634H75.3607L75.7576 22.3514Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.5412 15.6634C86.4527 15.6725 87.5357 15.7459 88.5464 16.0651C89.0518 16.2202 89.5124 16.4575 89.9275 16.7676C90.7578 17.3971 91.2998 18.3916 91.2999 19.9334C91.2999 21.1832 90.8303 22.4242 89.7564 23.3913C88.6734 24.3584 86.9764 24.9789 84.5215 24.9789H83.7632L83.0501 28.7559H79.9997L82.4994 15.6634H85.5412ZM84.2688 22.3331H85.027C86.7057 22.3331 88.4474 21.6942 88.4474 20.0247C88.4473 18.3279 86.6334 18.3092 85.3067 18.3092H85.0357L84.2688 22.3331Z" fill="currentColor"/>
+<path d="M98.0504 22.3149L99.3228 15.6634H102.373L99.8735 28.7559H96.8231L94.9462 22.114L93.6824 28.7559H90.6319L93.1317 15.6634H96.1821L98.0504 22.3149Z" fill="currentColor"/>
+<path d="M34.011 6.52561H27.0539L28.3407 0.0201823H35.3027L34.011 6.52561Z" fill="currentColor"/>
 </svg>
@@ -1,18 +1,18 @@
-<svg width="67" height="28" viewBox="0 0 67 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.64761 6.43747H10.3658L11.647 0H15.5382L12.3518 16.1211H8.44879L9.71872 9.69499H6.00106L4.71928 16.1211H0.816284L3.5528 2.35936L2.34052 0H7.91754L6.64761 6.43747Z" fill="white"/>
-<path d="M17.4089 16.1211H13.5177L15.7936 4.61743H19.6928L17.4089 16.1211Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5473 2.98059L27.6771 3.52369L27.9842 2.18749H30.4401L30.9223 0H34.4745L34.0656 2.18749H38.5828L37.6911 7.5172H38.8021L38.3339 10.5565H33.4077L37.6911 13.6837L35.2935 16.1211L30.7326 12.5387L25.5575 16.1211L24.3124 14.8879L24.0807 16.1211H20.675L22.0247 9.13249L19.6664 8.80922L21.4094 3.0641H23.1966L23.7887 0H27.1071L26.5473 2.98059ZM24.7176 12.7295L28.2326 10.5565H25.1254L24.7176 12.7295ZM27.1071 7.13574L25.8808 6.53337L25.696 7.5172H29.4314L29.9724 5.10935H28.5543L27.1071 7.13574ZM33.0273 7.5172H34.2261L34.6647 5.10935H33.5101L33.0273 7.5172Z" fill="white"/>
-<path d="M43.2875 12.5306L44.8462 8.7812H46.5563L43.5052 16.1211H41.7951L41.3549 8.7812H43.065L43.2875 12.5306Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M48.7724 8.7812C49.2834 8.78632 49.8905 8.82745 50.4572 9.00642C50.7405 9.09336 50.9987 9.2264 51.2314 9.40027C51.6969 9.75318 52.0008 10.3107 52.0008 11.175C52.0008 11.8757 51.7376 12.5715 51.1355 13.1136C50.5284 13.6558 49.577 14.0037 48.2007 14.0037H47.7756L47.3758 16.1211H45.6657L47.0671 8.7812H48.7724ZM48.059 12.5204H48.4841C49.4252 12.5204 50.4017 12.1622 50.4017 11.2262C50.4016 10.275 49.3847 10.2645 48.6409 10.2645H48.489L48.059 12.5204Z" fill="white"/>
-<path d="M55.7853 12.5102L56.4986 8.7812H58.2088L56.8074 16.1211H55.0972L54.045 12.3976L53.3365 16.1211H51.6264L53.0278 8.7812H54.7379L55.7853 12.5102Z" fill="white"/>
-<path d="M19.8835 3.65839H15.9832L16.7047 0.0113146H20.6077L19.8835 3.65839Z" fill="white"/>
-<path d="M2.77626 25.5216C2.5952 25.2235 2.41414 24.9333 2.23308 24.651C1.98412 25.3412 1.6899 25.9373 1.35041 26.4392L0.852494 25.7961C1.19953 25.2471 1.48621 24.6039 1.71253 23.8824C1.41076 23.4588 1.09391 23.0431 0.777052 22.6431V27.349H0V20.3373H6.20133V26.4706C6.20133 27.0196 5.93728 27.2941 5.41673 27.2941H4.66231L4.46616 26.502L5.16023 26.5412C5.33375 26.5412 5.42428 26.4549 5.42428 26.2824V25.3961L4.9339 25.9059C4.73775 25.5451 4.54161 25.1922 4.33037 24.8471C4.05878 25.5373 3.74192 26.1255 3.3798 26.6275L2.88188 25.9843C3.25909 25.4196 3.57595 24.7765 3.83245 24.0392C3.53068 23.5765 3.21383 23.1294 2.88943 22.6902L3.37226 22.2039C3.59104 22.4706 3.83245 22.7843 4.08895 23.1608C4.21721 22.651 4.32282 22.1098 4.40581 21.5373L5.14514 21.6706C5.01689 22.5176 4.84337 23.2941 4.63214 23.9843C4.88864 24.3843 5.15269 24.8235 5.42428 25.2941V21.1216H0.777052V22.5569L1.22216 22.1098C1.44849 22.3608 1.6899 22.6588 1.9464 23.0039C2.05202 22.5333 2.14255 22.0314 2.21045 21.5137L2.93469 21.6471C2.82153 22.4314 2.67819 23.1373 2.50467 23.7804C2.76118 24.1412 3.02522 24.5412 3.29681 24.9804L2.77626 25.5216Z" fill="white"/>
-<path d="M9.55095 23.6471H11.173V22.298H11.9726V23.6471H13.7003V24.4471H11.9726V26.2824H14.0247V27.0824H9.27936V26.2824H11.173V24.4471H9.55095V23.6471ZM8.23072 24.4314C8.02702 24.6353 7.81579 24.8314 7.597 25.0275L7.09154 24.3451C7.93649 23.6157 8.61547 22.7843 9.12093 21.8588H7.36313V21.0588H9.49814C9.64148 20.7137 9.76219 20.3608 9.86781 20L10.6826 20.102C10.5921 20.4314 10.4864 20.7451 10.3733 21.0588H14.0247V21.8588H10.0262C9.73956 22.4549 9.40007 23.0118 9.00777 23.5294V27.3647H8.23072V24.4314Z" fill="white"/>
-<path d="M18.272 23.6471V24.4784C17.8722 24.6196 17.4573 24.7451 17.0197 24.8627V26.4549C17.0197 26.9725 16.7557 27.2392 16.2276 27.2392H15.3751L15.2016 26.4627C15.4656 26.4941 15.7146 26.5098 15.956 26.5098C16.1295 26.5098 16.22 26.4157 16.22 26.2431V25.0588C15.7825 25.1529 15.3373 25.2392 14.8696 25.3176L14.7564 24.4941C15.2695 24.4157 15.7598 24.3216 16.22 24.2196V22.8706H14.7489V22.0863H16.22V21.3569C15.8579 21.4353 15.4882 21.498 15.0959 21.5529L14.93 20.7765C15.9711 20.6588 16.9065 20.4314 17.7213 20.0863L17.9929 20.8549C17.6836 20.9725 17.3592 21.0745 17.0197 21.1686V22.0863H18.5663C18.521 21.4824 18.5059 20.8157 18.5059 20.0941H19.2981C19.3056 20.8471 19.3282 21.5059 19.3735 22.0863H21.6292V22.8706H19.4338C19.4791 23.3804 19.547 23.7961 19.63 24.1255C19.6602 24.251 19.6904 24.3608 19.7205 24.4706C20.0298 24.0706 20.3014 23.6235 20.5278 23.1373L21.2067 23.5137C20.8748 24.2196 20.4749 24.8392 20.0148 25.3569C20.0902 25.5451 20.1732 25.7098 20.2562 25.8353C20.4674 26.1804 20.6334 26.3529 20.739 26.3529C20.822 26.3529 20.905 25.9529 20.9955 25.1686L21.6971 25.5529C21.501 26.6745 21.2218 27.2392 20.8522 27.2392C20.5202 27.2392 20.1732 27.0039 19.8186 26.5412C19.6828 26.3608 19.5546 26.1569 19.4414 25.9216C18.9284 26.3608 18.355 26.7059 17.7289 26.9569L17.2913 26.2588C17.9854 25.9922 18.5964 25.6157 19.117 25.1294C19.034 24.8784 18.9586 24.6196 18.8907 24.3529C18.7775 23.9294 18.6945 23.4353 18.6342 22.8706H17.0197V24.0314C17.4573 23.9137 17.8797 23.7882 18.272 23.6471ZM20.1279 20.1647C20.656 20.5098 21.1087 20.8549 21.4859 21.2L20.9201 21.7882C20.6107 21.4431 20.1732 21.0824 19.5998 20.6902L20.1279 20.1647Z" fill="white"/>
-<path d="M24.6393 23.6471H26.2613V22.298H27.061V23.6471H28.7887V24.4471H27.061V26.2824H29.1131V27.0824H24.3678V26.2824H26.2613V24.4471H24.6393V23.6471ZM23.3191 24.4314C23.1154 24.6353 22.9042 24.8314 22.6854 25.0275L22.1799 24.3451C23.0249 23.6157 23.7039 22.7843 24.2093 21.8588H22.4515V21.0588H24.5865C24.7299 20.7137 24.8506 20.3608 24.9562 20L25.771 20.102C25.6804 20.4314 25.5748 20.7451 25.4617 21.0588H29.1131V21.8588H25.1146C24.8279 22.4549 24.4885 23.0118 24.0962 23.5294V27.3647H23.3191V24.4314Z" fill="white"/>
-<path d="M30.9689 25.3412C31.1726 25.3412 31.3461 25.4275 31.4819 25.6C31.6102 25.7725 31.6781 26 31.6781 26.2745C31.6781 26.6902 31.5574 27.051 31.331 27.3647C31.0972 27.6706 30.7803 27.8824 30.388 28V27.4824C30.5917 27.4039 30.7652 27.2784 30.9086 27.1059C31.0368 26.9176 31.1047 26.7373 31.1047 26.549C31.0595 26.5647 30.9991 26.5804 30.9161 26.5804C30.7501 26.5804 30.6143 26.5176 30.5012 26.4C30.388 26.2824 30.3352 26.1333 30.3352 25.9608C30.3352 25.7725 30.3956 25.6235 30.5163 25.5137C30.6294 25.3961 30.7803 25.3412 30.9689 25.3412Z" fill="white"/>
-<path d="M40.4972 25.5216C40.3162 25.2235 40.1351 24.9333 39.9541 24.651C39.7051 25.3412 39.4109 25.9373 39.0714 26.4392L38.5735 25.7961C38.9205 25.2471 39.2072 24.6039 39.4335 23.8824C39.1317 23.4588 38.8149 23.0431 38.498 22.6431V27.349H37.721V20.3373H43.9223V26.4706C43.9223 27.0196 43.6583 27.2941 43.1377 27.2941H42.3833L42.1871 26.502L42.8812 26.5412C43.0547 26.5412 43.1453 26.4549 43.1453 26.2824V25.3961L42.6549 25.9059C42.4587 25.5451 42.2626 25.1922 42.0513 24.8471C41.7798 25.5373 41.4629 26.1255 41.1008 26.6275L40.6029 25.9843C40.9801 25.4196 41.2969 24.7765 41.5534 24.0392C41.2517 23.5765 40.9348 23.1294 40.6104 22.6902L41.0932 22.2039C41.312 22.4706 41.5534 22.7843 41.8099 23.1608C41.9382 22.651 42.0438 22.1098 42.1268 21.5373L42.8661 21.6706C42.7379 22.5176 42.5644 23.2941 42.3531 23.9843C42.6096 24.3843 42.8737 24.8235 43.1453 25.2941V21.1216H38.498V22.5569L38.9431 22.1098C39.1695 22.3608 39.4109 22.6588 39.6674 23.0039C39.773 22.5333 39.8635 22.0314 39.9314 21.5137L40.6557 21.6471C40.5425 22.4314 40.3992 23.1373 40.2257 23.7804C40.4822 24.1412 40.7462 24.5412 41.0178 24.9804L40.4972 25.5216Z" fill="white"/>
-<path d="M47.5963 21.2H48.8487V20.0941H49.6182V21.2H51.2175V23.5451H51.7079V24.3451H49.8596C50.3047 25.2863 50.9912 26.0627 51.9116 26.6588L51.376 27.3098C50.4556 26.6118 49.7615 25.7569 49.2938 24.7373C48.9317 25.8824 48.2829 26.7373 47.3323 27.302L46.8495 26.6275C47.7397 26.149 48.3281 25.3882 48.6223 24.3451H47.2946V23.5451H48.7808C48.826 23.2314 48.8487 22.902 48.8487 22.5569V21.9608H47.5963V21.2ZM49.6182 21.9608V22.3765C49.6182 22.7843 49.588 23.1765 49.5427 23.5451H50.4631V21.9608H49.6182ZM45.069 21.6314L45.6726 21.6784C45.6575 22.4627 45.5745 23.2078 45.4387 23.9137L44.805 23.7255C44.9559 23.0667 45.0464 22.3686 45.069 21.6314ZM47.1663 21.4275C47.3625 21.9294 47.5435 22.5098 47.6944 23.1608L47.0682 23.3255C46.9551 22.7765 46.8117 22.2431 46.6307 21.7333V27.3176H45.8536V20.102H46.6307V21.6078L47.1663 21.4275Z" fill="white"/>
-<path d="M55.993 23.6471V24.4784C55.5932 24.6196 55.1782 24.7451 54.7407 24.8627V26.4549C54.7407 26.9725 54.4766 27.2392 53.9485 27.2392H53.0961L52.9225 26.4627C53.1866 26.4941 53.4355 26.5098 53.6769 26.5098C53.8505 26.5098 53.941 26.4157 53.941 26.2431V25.0588C53.5034 25.1529 53.0583 25.2392 52.5906 25.3176L52.4774 24.4941C52.9904 24.4157 53.4808 24.3216 53.941 24.2196V22.8706H52.4699V22.0863H53.941V21.3569C53.5789 21.4353 53.2092 21.498 52.8169 21.5529L52.6509 20.7765C53.692 20.6588 54.6275 20.4314 55.4423 20.0863L55.7139 20.8549C55.4046 20.9725 55.0802 21.0745 54.7407 21.1686V22.0863H56.2872C56.242 21.4824 56.2269 20.8157 56.2269 20.0941H57.019C57.0266 20.8471 57.0492 21.5059 57.0945 22.0863H59.3502V22.8706H57.1548C57.2001 23.3804 57.268 23.7961 57.351 24.1255C57.3812 24.251 57.4113 24.3608 57.4415 24.4706C57.7508 24.0706 58.0224 23.6235 58.2487 23.1373L58.9277 23.5137C58.5958 24.2196 58.1959 24.8392 57.7357 25.3569C57.8112 25.5451 57.8942 25.7098 57.9771 25.8353C58.1884 26.1804 58.3544 26.3529 58.46 26.3529C58.543 26.3529 58.6259 25.9529 58.7165 25.1686L59.4181 25.5529C59.2219 26.6745 58.9428 27.2392 58.5731 27.2392C58.2412 27.2392 57.8942 27.0039 57.5396 26.5412C57.4038 26.3608 57.2755 26.1569 57.1624 25.9216C56.6494 26.3608 56.076 26.7059 55.4498 26.9569L55.0123 26.2588C55.7063 25.9922 56.3174 25.6157 56.838 25.1294C56.755 24.8784 56.6795 24.6196 56.6116 24.3529C56.4985 23.9294 56.4155 23.4353 56.3551 22.8706H54.7407V24.0314C55.1782 23.9137 55.6007 23.7882 55.993 23.6471ZM57.8489 20.1647C58.377 20.5098 58.8296 20.8549 59.2068 21.2L58.641 21.7882C58.3317 21.4431 57.8942 21.0824 57.3208 20.6902L57.8489 20.1647Z" fill="white"/>
-<path d="M62.6847 21.2H63.9371V20.0941H64.7066V21.2H66.3059V23.5451H66.7963V24.3451H64.948C65.3931 25.2863 66.0796 26.0627 67 26.6588L66.4644 27.3098C65.544 26.6118 64.8499 25.7569 64.3822 24.7373C64.02 25.8824 63.3712 26.7373 62.4207 27.302L61.9378 26.6275C62.8281 26.149 63.4165 25.3882 63.7107 24.3451H62.383V23.5451H63.8692C63.9144 23.2314 63.9371 22.902 63.9371 22.5569V21.9608H62.6847V21.2ZM64.7066 21.9608V22.3765C64.7066 22.7843 64.6764 23.1765 64.6311 23.5451H65.5515V21.9608H64.7066ZM60.1574 21.6314L60.761 21.6784C60.7459 22.4627 60.6629 23.2078 60.5271 23.9137L59.8934 23.7255C60.0443 23.0667 60.1348 22.3686 60.1574 21.6314ZM62.2547 21.4275C62.4509 21.9294 62.6319 22.5098 62.7828 23.1608L62.1566 23.3255C62.0435 22.7765 61.9001 22.2431 61.7191 21.7333V27.3176H60.942V20.102H61.7191V21.6078L62.2547 21.4275Z" fill="white"/>
+<svg  viewBox="0 0 67 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.64761 6.43747H10.3658L11.647 0H15.5382L12.3518 16.1211H8.44879L9.71872 9.69499H6.00106L4.71928 16.1211H0.816284L3.5528 2.35936L2.34052 0H7.91754L6.64761 6.43747Z" fill="currentColor"/>
+<path d="M17.4089 16.1211H13.5177L15.7936 4.61743H19.6928L17.4089 16.1211Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5473 2.98059L27.6771 3.52369L27.9842 2.18749H30.4401L30.9223 0H34.4745L34.0656 2.18749H38.5828L37.6911 7.5172H38.8021L38.3339 10.5565H33.4077L37.6911 13.6837L35.2935 16.1211L30.7326 12.5387L25.5575 16.1211L24.3124 14.8879L24.0807 16.1211H20.675L22.0247 9.13249L19.6664 8.80922L21.4094 3.0641H23.1966L23.7887 0H27.1071L26.5473 2.98059ZM24.7176 12.7295L28.2326 10.5565H25.1254L24.7176 12.7295ZM27.1071 7.13574L25.8808 6.53337L25.696 7.5172H29.4314L29.9724 5.10935H28.5543L27.1071 7.13574ZM33.0273 7.5172H34.2261L34.6647 5.10935H33.5101L33.0273 7.5172Z" fill="currentColor"/>
+<path d="M43.2875 12.5306L44.8462 8.7812H46.5563L43.5052 16.1211H41.7951L41.3549 8.7812H43.065L43.2875 12.5306Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.7724 8.7812C49.2834 8.78632 49.8905 8.82745 50.4572 9.00642C50.7405 9.09336 50.9987 9.2264 51.2314 9.40027C51.6969 9.75318 52.0008 10.3107 52.0008 11.175C52.0008 11.8757 51.7376 12.5715 51.1355 13.1136C50.5284 13.6558 49.577 14.0037 48.2007 14.0037H47.7756L47.3758 16.1211H45.6657L47.0671 8.7812H48.7724ZM48.059 12.5204H48.4841C49.4252 12.5204 50.4017 12.1622 50.4017 11.2262C50.4016 10.275 49.3847 10.2645 48.6409 10.2645H48.489L48.059 12.5204Z" fill="currentColor"/>
+<path d="M55.7853 12.5102L56.4986 8.7812H58.2088L56.8074 16.1211H55.0972L54.045 12.3976L53.3365 16.1211H51.6264L53.0278 8.7812H54.7379L55.7853 12.5102Z" fill="currentColor"/>
+<path d="M19.8835 3.65839H15.9832L16.7047 0.0113146H20.6077L19.8835 3.65839Z" fill="currentColor"/>
+<path d="M2.77626 25.5216C2.5952 25.2235 2.41414 24.9333 2.23308 24.651C1.98412 25.3412 1.6899 25.9373 1.35041 26.4392L0.852494 25.7961C1.19953 25.2471 1.48621 24.6039 1.71253 23.8824C1.41076 23.4588 1.09391 23.0431 0.777052 22.6431V27.349H0V20.3373H6.20133V26.4706C6.20133 27.0196 5.93728 27.2941 5.41673 27.2941H4.66231L4.46616 26.502L5.16023 26.5412C5.33375 26.5412 5.42428 26.4549 5.42428 26.2824V25.3961L4.9339 25.9059C4.73775 25.5451 4.54161 25.1922 4.33037 24.8471C4.05878 25.5373 3.74192 26.1255 3.3798 26.6275L2.88188 25.9843C3.25909 25.4196 3.57595 24.7765 3.83245 24.0392C3.53068 23.5765 3.21383 23.1294 2.88943 22.6902L3.37226 22.2039C3.59104 22.4706 3.83245 22.7843 4.08895 23.1608C4.21721 22.651 4.32282 22.1098 4.40581 21.5373L5.14514 21.6706C5.01689 22.5176 4.84337 23.2941 4.63214 23.9843C4.88864 24.3843 5.15269 24.8235 5.42428 25.2941V21.1216H0.777052V22.5569L1.22216 22.1098C1.44849 22.3608 1.6899 22.6588 1.9464 23.0039C2.05202 22.5333 2.14255 22.0314 2.21045 21.5137L2.93469 21.6471C2.82153 22.4314 2.67819 23.1373 2.50467 23.7804C2.76118 24.1412 3.02522 24.5412 3.29681 24.9804L2.77626 25.5216Z" fill="currentColor"/>
+<path d="M9.55095 23.6471H11.173V22.298H11.9726V23.6471H13.7003V24.4471H11.9726V26.2824H14.0247V27.0824H9.27936V26.2824H11.173V24.4471H9.55095V23.6471ZM8.23072 24.4314C8.02702 24.6353 7.81579 24.8314 7.597 25.0275L7.09154 24.3451C7.93649 23.6157 8.61547 22.7843 9.12093 21.8588H7.36313V21.0588H9.49814C9.64148 20.7137 9.76219 20.3608 9.86781 20L10.6826 20.102C10.5921 20.4314 10.4864 20.7451 10.3733 21.0588H14.0247V21.8588H10.0262C9.73956 22.4549 9.40007 23.0118 9.00777 23.5294V27.3647H8.23072V24.4314Z" fill="currentColor"/>
+<path d="M18.272 23.6471V24.4784C17.8722 24.6196 17.4573 24.7451 17.0197 24.8627V26.4549C17.0197 26.9725 16.7557 27.2392 16.2276 27.2392H15.3751L15.2016 26.4627C15.4656 26.4941 15.7146 26.5098 15.956 26.5098C16.1295 26.5098 16.22 26.4157 16.22 26.2431V25.0588C15.7825 25.1529 15.3373 25.2392 14.8696 25.3176L14.7564 24.4941C15.2695 24.4157 15.7598 24.3216 16.22 24.2196V22.8706H14.7489V22.0863H16.22V21.3569C15.8579 21.4353 15.4882 21.498 15.0959 21.5529L14.93 20.7765C15.9711 20.6588 16.9065 20.4314 17.7213 20.0863L17.9929 20.8549C17.6836 20.9725 17.3592 21.0745 17.0197 21.1686V22.0863H18.5663C18.521 21.4824 18.5059 20.8157 18.5059 20.0941H19.2981C19.3056 20.8471 19.3282 21.5059 19.3735 22.0863H21.6292V22.8706H19.4338C19.4791 23.3804 19.547 23.7961 19.63 24.1255C19.6602 24.251 19.6904 24.3608 19.7205 24.4706C20.0298 24.0706 20.3014 23.6235 20.5278 23.1373L21.2067 23.5137C20.8748 24.2196 20.4749 24.8392 20.0148 25.3569C20.0902 25.5451 20.1732 25.7098 20.2562 25.8353C20.4674 26.1804 20.6334 26.3529 20.739 26.3529C20.822 26.3529 20.905 25.9529 20.9955 25.1686L21.6971 25.5529C21.501 26.6745 21.2218 27.2392 20.8522 27.2392C20.5202 27.2392 20.1732 27.0039 19.8186 26.5412C19.6828 26.3608 19.5546 26.1569 19.4414 25.9216C18.9284 26.3608 18.355 26.7059 17.7289 26.9569L17.2913 26.2588C17.9854 25.9922 18.5964 25.6157 19.117 25.1294C19.034 24.8784 18.9586 24.6196 18.8907 24.3529C18.7775 23.9294 18.6945 23.4353 18.6342 22.8706H17.0197V24.0314C17.4573 23.9137 17.8797 23.7882 18.272 23.6471ZM20.1279 20.1647C20.656 20.5098 21.1087 20.8549 21.4859 21.2L20.9201 21.7882C20.6107 21.4431 20.1732 21.0824 19.5998 20.6902L20.1279 20.1647Z" fill="currentColor"/>
+<path d="M24.6393 23.6471H26.2613V22.298H27.061V23.6471H28.7887V24.4471H27.061V26.2824H29.1131V27.0824H24.3678V26.2824H26.2613V24.4471H24.6393V23.6471ZM23.3191 24.4314C23.1154 24.6353 22.9042 24.8314 22.6854 25.0275L22.1799 24.3451C23.0249 23.6157 23.7039 22.7843 24.2093 21.8588H22.4515V21.0588H24.5865C24.7299 20.7137 24.8506 20.3608 24.9562 20L25.771 20.102C25.6804 20.4314 25.5748 20.7451 25.4617 21.0588H29.1131V21.8588H25.1146C24.8279 22.4549 24.4885 23.0118 24.0962 23.5294V27.3647H23.3191V24.4314Z" fill="currentColor"/>
+<path d="M30.9689 25.3412C31.1726 25.3412 31.3461 25.4275 31.4819 25.6C31.6102 25.7725 31.6781 26 31.6781 26.2745C31.6781 26.6902 31.5574 27.051 31.331 27.3647C31.0972 27.6706 30.7803 27.8824 30.388 28V27.4824C30.5917 27.4039 30.7652 27.2784 30.9086 27.1059C31.0368 26.9176 31.1047 26.7373 31.1047 26.549C31.0595 26.5647 30.9991 26.5804 30.9161 26.5804C30.7501 26.5804 30.6143 26.5176 30.5012 26.4C30.388 26.2824 30.3352 26.1333 30.3352 25.9608C30.3352 25.7725 30.3956 25.6235 30.5163 25.5137C30.6294 25.3961 30.7803 25.3412 30.9689 25.3412Z" fill="currentColor"/>
+<path d="M40.4972 25.5216C40.3162 25.2235 40.1351 24.9333 39.9541 24.651C39.7051 25.3412 39.4109 25.9373 39.0714 26.4392L38.5735 25.7961C38.9205 25.2471 39.2072 24.6039 39.4335 23.8824C39.1317 23.4588 38.8149 23.0431 38.498 22.6431V27.349H37.721V20.3373H43.9223V26.4706C43.9223 27.0196 43.6583 27.2941 43.1377 27.2941H42.3833L42.1871 26.502L42.8812 26.5412C43.0547 26.5412 43.1453 26.4549 43.1453 26.2824V25.3961L42.6549 25.9059C42.4587 25.5451 42.2626 25.1922 42.0513 24.8471C41.7798 25.5373 41.4629 26.1255 41.1008 26.6275L40.6029 25.9843C40.9801 25.4196 41.2969 24.7765 41.5534 24.0392C41.2517 23.5765 40.9348 23.1294 40.6104 22.6902L41.0932 22.2039C41.312 22.4706 41.5534 22.7843 41.8099 23.1608C41.9382 22.651 42.0438 22.1098 42.1268 21.5373L42.8661 21.6706C42.7379 22.5176 42.5644 23.2941 42.3531 23.9843C42.6096 24.3843 42.8737 24.8235 43.1453 25.2941V21.1216H38.498V22.5569L38.9431 22.1098C39.1695 22.3608 39.4109 22.6588 39.6674 23.0039C39.773 22.5333 39.8635 22.0314 39.9314 21.5137L40.6557 21.6471C40.5425 22.4314 40.3992 23.1373 40.2257 23.7804C40.4822 24.1412 40.7462 24.5412 41.0178 24.9804L40.4972 25.5216Z" fill="currentColor"/>
+<path d="M47.5963 21.2H48.8487V20.0941H49.6182V21.2H51.2175V23.5451H51.7079V24.3451H49.8596C50.3047 25.2863 50.9912 26.0627 51.9116 26.6588L51.376 27.3098C50.4556 26.6118 49.7615 25.7569 49.2938 24.7373C48.9317 25.8824 48.2829 26.7373 47.3323 27.302L46.8495 26.6275C47.7397 26.149 48.3281 25.3882 48.6223 24.3451H47.2946V23.5451H48.7808C48.826 23.2314 48.8487 22.902 48.8487 22.5569V21.9608H47.5963V21.2ZM49.6182 21.9608V22.3765C49.6182 22.7843 49.588 23.1765 49.5427 23.5451H50.4631V21.9608H49.6182ZM45.069 21.6314L45.6726 21.6784C45.6575 22.4627 45.5745 23.2078 45.4387 23.9137L44.805 23.7255C44.9559 23.0667 45.0464 22.3686 45.069 21.6314ZM47.1663 21.4275C47.3625 21.9294 47.5435 22.5098 47.6944 23.1608L47.0682 23.3255C46.9551 22.7765 46.8117 22.2431 46.6307 21.7333V27.3176H45.8536V20.102H46.6307V21.6078L47.1663 21.4275Z" fill="currentColor"/>
+<path d="M55.993 23.6471V24.4784C55.5932 24.6196 55.1782 24.7451 54.7407 24.8627V26.4549C54.7407 26.9725 54.4766 27.2392 53.9485 27.2392H53.0961L52.9225 26.4627C53.1866 26.4941 53.4355 26.5098 53.6769 26.5098C53.8505 26.5098 53.941 26.4157 53.941 26.2431V25.0588C53.5034 25.1529 53.0583 25.2392 52.5906 25.3176L52.4774 24.4941C52.9904 24.4157 53.4808 24.3216 53.941 24.2196V22.8706H52.4699V22.0863H53.941V21.3569C53.5789 21.4353 53.2092 21.498 52.8169 21.5529L52.6509 20.7765C53.692 20.6588 54.6275 20.4314 55.4423 20.0863L55.7139 20.8549C55.4046 20.9725 55.0802 21.0745 54.7407 21.1686V22.0863H56.2872C56.242 21.4824 56.2269 20.8157 56.2269 20.0941H57.019C57.0266 20.8471 57.0492 21.5059 57.0945 22.0863H59.3502V22.8706H57.1548C57.2001 23.3804 57.268 23.7961 57.351 24.1255C57.3812 24.251 57.4113 24.3608 57.4415 24.4706C57.7508 24.0706 58.0224 23.6235 58.2487 23.1373L58.9277 23.5137C58.5958 24.2196 58.1959 24.8392 57.7357 25.3569C57.8112 25.5451 57.8942 25.7098 57.9771 25.8353C58.1884 26.1804 58.3544 26.3529 58.46 26.3529C58.543 26.3529 58.6259 25.9529 58.7165 25.1686L59.4181 25.5529C59.2219 26.6745 58.9428 27.2392 58.5731 27.2392C58.2412 27.2392 57.8942 27.0039 57.5396 26.5412C57.4038 26.3608 57.2755 26.1569 57.1624 25.9216C56.6494 26.3608 56.076 26.7059 55.4498 26.9569L55.0123 26.2588C55.7063 25.9922 56.3174 25.6157 56.838 25.1294C56.755 24.8784 56.6795 24.6196 56.6116 24.3529C56.4985 23.9294 56.4155 23.4353 56.3551 22.8706H54.7407V24.0314C55.1782 23.9137 55.6007 23.7882 55.993 23.6471ZM57.8489 20.1647C58.377 20.5098 58.8296 20.8549 59.2068 21.2L58.641 21.7882C58.3317 21.4431 57.8942 21.0824 57.3208 20.6902L57.8489 20.1647Z" fill="currentColor"/>
+<path d="M62.6847 21.2H63.9371V20.0941H64.7066V21.2H66.3059V23.5451H66.7963V24.3451H64.948C65.3931 25.2863 66.0796 26.0627 67 26.6588L66.4644 27.3098C65.544 26.6118 64.8499 25.7569 64.3822 24.7373C64.02 25.8824 63.3712 26.7373 62.4207 27.302L61.9378 26.6275C62.8281 26.149 63.4165 25.3882 63.7107 24.3451H62.383V23.5451H63.8692C63.9144 23.2314 63.9371 22.902 63.9371 22.5569V21.9608H62.6847V21.2ZM64.7066 21.9608V22.3765C64.7066 22.7843 64.6764 23.1765 64.6311 23.5451H65.5515V21.9608H64.7066ZM60.1574 21.6314L60.761 21.6784C60.7459 22.4627 60.6629 23.2078 60.5271 23.9137L59.8934 23.7255C60.0443 23.0667 60.1348 22.3686 60.1574 21.6314ZM62.2547 21.4275C62.4509 21.9294 62.6319 22.5098 62.7828 23.1608L62.1566 23.3255C62.0435 22.7765 61.9001 22.2431 61.7191 21.7333V27.3176H60.942V20.102H61.7191V21.6078L62.2547 21.4275Z" fill="currentColor"/>
 </svg>
@@ -0,0 +1,32 @@
+<template>
+  <div class="login-redirect">
+    <!-- Optional: Adding a loading state for visibility during transition -->
+    <div class="loading-spinner">登录中...</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getQueryString } from '@/utils/url-utils.ts'
+const router = useRouter()
+onMounted(() => {
+  const token = getQueryString('t')
+  console.log(token)
+  if (token) {
+    localStorage.setItem('Authorization', token)
+  }
+  router.replace('/user-center')
+})
+</script>
+
+<style scoped>
+.login-redirect {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-size: 1.2rem;
+  color: #666;
+}
+</style>
@@ -0,0 +1,53 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img
+          src="./pc/row1.png"
+          alt="Terms of Service - Part 1"
+          class="mb-10 origin-left scale-50"
+        />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[28px] w-[594px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>
@@ -0,0 +1,288 @@
+<template>
+  <div class="reviews-page min-h-screen overflow-x-hidden bg-black font-sans text-white">
+    <!-- Header -->
+    <div class="h-[80px] md:h-[114px]">
+      <div class="fixed z-50 w-full bg-black pt-[20px] pb-[20px] md:pt-[34px]">
+        <div class="container">
+          <header
+            class="flex h-[40px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-5 md:h-[60px] md:pr-[58px] md:pl-[41px]"
+          >
+            <router-link to="/" class="flex items-center gap-2">
+              <!-- Desktop Logo -->
+              <!--              <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
+              <!-- Mobile Logo -->
+              <MobileLogo alt="Hi快VPN" class="block h-[22px] text-black md:h-[36px]" />
+            </router-link>
+            <RightText class="block h-[12px] text-black md:h-[24px]" />
+          </header>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <main class="container mx-auto max-w-2xl px-4 py-8">
+      <img src="./image2.png" class="hidden md:block" />
+      <img src="./image1.png" class="md:hidden" />
+      <div class="my-[40px] h-[1px] w-full bg-[#757575]" />
+      <div class="space-y-8">
+        <div
+          v-for="(review, index) in displayReviews"
+          :key="index"
+          class="review-card"
+          :style="{ '--index': index % 10 }"
+        >
+          <div class="mb-3 flex items-start justify-between">
+            <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+              <h2 class="text-lg leading-tight font-bold">{{ review.username }}</h2>
+              <span class="text-sm text-white/40">{{ review.date }}</span>
+            </div>
+            <!-- Stars -->
+            <div class="mt-1 flex shrink-0 gap-0.5">
+              <svg
+                v-for="i in 5"
+                :key="i"
+                class="h-4 w-4"
+                :class="i <= (review.stars || 5) ? 'text-[#ADFF5B]' : 'text-white/10'"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                />
+              </svg>
+            </div>
+          </div>
+
+          <p class="mb-8 text-[15px] leading-relaxed text-white/80 md:text-base">
+            {{ review.comment }}
+          </p>
+
+          <div class="w-full border-b border-[#757575]"></div>
+        </div>
+
+        <!-- Loading state -->
+        <div v-if="isLoading" class="flex justify-center py-10">
+          <div
+            class="h-6 w-6 animate-spin rounded-full border-2 border-[#ADFF5B]/30 border-t-[#ADFF5B]"
+          ></div>
+        </div>
+
+        <!-- No more data -->
+        <div v-if="!hasMore && !isLoading" class="py-10 text-center text-sm text-white/30">
+          已经到底啦 ~
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useInfiniteScroll } from '@vueuse/core'
+import { getAllQueryString } from '@/utils/url-utils.ts'
+import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
+import RightText from './right-text.svg?component'
+const router = useRouter()
+
+onMounted(() => {
+  const ic = getAllQueryString('ic')
+  if (ic && typeof ic === 'string') {
+    sessionStorage.setItem('ic', ic)
+  }
+})
+
+const isLoading = ref(false)
+const hasMore = ref(true)
+
+// Fixed 20 random reviews based on the provided design
+const allReviews = [
+  {
+    username: 'Alex Chen',
+    date: 'Oct.12',
+    stars: 5,
+    comment:
+      '真的是极简主义的胜利。没有多余的按钮，打开软件的瞬间就已经连接成功了。抛弃了传统VPN繁琐的线路选择，这种“无感”的体验让人非常舒服。Netflix 4K 拖拽完全没有缓冲。',
+  },
+  {
+    username: 'Fjafw****@gmail.com',
+    date: 'Feb. 2',
+    stars: 5,
+    comment:
+      'IEPL专线稳定性确实不是普通机场能比的。晚高峰打竞技游戏延迟依然很低，几乎感觉不到身在海外。UI设计长在我的审美上，黑绿配色极其克制且高级。',
+  },
+  {
+    username: 'Sarah Lin',
+    date: 'Sep. 19',
+    stars: 4,
+    comment:
+      '速度和稳定性都没得说，是目前用过最省心的软件。唯一扣掉的一星是希望能在未来加入一些特定地区冷门节点的备选方案，虽然目前的智能分配已经足够好用。总体强烈推荐。',
+  },
+  {
+    username: 'Michael W.',
+    date: 'Jan. 15',
+    stars: 5,
+    comment:
+      'I have tried many VPNs, but HiFast is by far the fastest. The connection is instantaneous and the bandwidth is impressive.',
+  },
+  {
+    username: '张晓明',
+    date: 'Dec. 5',
+    stars: 5,
+    comment: '非常好用，连接速度快，看YouTube 4K一点都不卡。',
+  },
+  {
+    username: 'David K.',
+    date: 'Nov. 22',
+    stars: 5,
+    comment:
+      'The UI is clean and the performance is top-notch. Highly recommended for professionals.',
+  },
+  {
+    username: 'Emily Chen',
+    date: 'Mar. 10',
+    stars: 5,
+    comment: 'Best VPN for gaming! Low ping and no packet loss. Love it.',
+  },
+  {
+    username: '李华',
+    date: 'Feb. 28',
+    stars: 5,
+    comment: '客服态度很好，遇到问题解决得很快。软件本身也非常稳定。',
+  },
+  {
+    username: 'Robert J.',
+    date: 'May. 14',
+    stars: 5,
+    comment: 'Solid performance. I use it for my remote work and it never fails me.',
+  },
+  {
+    username: '王大力',
+    date: 'Jun. 20',
+    stars: 4,
+    comment: '很不错的VPN，虽然价格稍微贵一点，但物有所值。',
+  },
+  {
+    username: 'Jessica S.',
+    date: 'Aug. 3',
+    stars: 5,
+    comment: 'So easy to use. Just one click and I am protected. Great job!',
+  },
+  {
+    username: '陈伟',
+    date: 'Jul. 12',
+    stars: 5,
+    comment: '在国外用这个看国内视频非常流畅，没有任何限制。',
+  },
+  {
+    username: 'Kevin L.',
+    date: 'Sep. 30',
+    stars: 5,
+    comment: 'The encryption makes me feel safe. High speed is a bonus.',
+  },
+  {
+    username: '周杰',
+    date: 'Apr. 18',
+    stars: 5,
+    comment: '支持多设备同时在线，非常方便。家里几个人共用一个账号。',
+  },
+  {
+    username: 'Anna B.',
+    date: 'Oct. 5',
+    stars: 5,
+    comment: 'Love the dark mode UI. It looks so modern and sleek.',
+  },
+  {
+    username: '赵三',
+    date: 'Dec. 25',
+    stars: 4,
+    comment: '整体感觉不错，连接速度挺快的，偶尔会断线。',
+  },
+  {
+    username: 'Thomas M.',
+    date: 'Nov. 8',
+    stars: 5,
+    comment: 'Great service. I have recommended it to all my friends.',
+  },
+  {
+    username: '刘红',
+    date: 'Jan. 22',
+    stars: 5,
+    comment: '非常感谢Hi快VPN，让我能方便地学习国外的课程。',
+  },
+  {
+    username: 'Steven H.',
+    date: 'Feb. 14',
+    stars: 5,
+    comment: 'Excellent bandwidth. Streaming 4K is like watching local videos.',
+  },
+  {
+    username: '吴优',
+    date: 'Mar. 25',
+    stars: 5,
+    comment: '用过最简单的VPN，即使是不懂技术的人也能轻松上手。',
+  },
+]
+
+const displayReviews = ref(allReviews.slice(0, 5))
+const currentIndex = ref(5)
+
+const loadMore = () => {
+  if (isLoading.value || !hasMore.value) return
+  isLoading.value = true
+
+  // Simulate network delay
+  setTimeout(() => {
+    const nextBatch = allReviews.slice(currentIndex.value, currentIndex.value + 3)
+    if (nextBatch.length > 0) {
+      displayReviews.value.push(...nextBatch)
+      currentIndex.value += nextBatch.length
+    }
+
+    if (currentIndex.value >= allReviews.length) {
+      hasMore.value = false
+    }
+    isLoading.value = false
+  }, 800)
+}
+
+useInfiniteScroll(
+  window,
+  () => {
+    loadMore()
+  },
+  { distance: 200 },
+)
+
+const goBack = () => {
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.reviews-page {
+  background-color: #000;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.review-card {
+  animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Staggered animation for initial items */
+.review-card {
+  animation-delay: calc(var(--index, 0) * 0.05s);
+}
+</style>
@@ -0,0 +1,49 @@
+<template>
+  <div class="min-h-screen bg-black text-white" style="font-family: 'Roboto', sans-serif">
+    <!-- Main Content -->
+    <main class="mx-auto max-w-[1000px] px-6 md:px-2 md:pt-16 md:pb-[50px]">
+      <!-- Mobile Images -->
+      <div class="md:hidden">
+        <img
+          src="./mobile/row-1-column-1.webp"
+          alt="Terms of Service - Part 1"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-2-column-1.webp"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+        />
+        <img
+          src="./mobile/row-3-column-1.webp"
+          alt="Terms of Service - Part 3"
+          class="mb-0 w-full"
+        />
+      </div>
+
+      <!-- Desktop Images (2x) -->
+      <div class="hidden md:block">
+        <img src="./pc/row1.png" alt="Terms of Service - Part 1" class="mb-10 h-[18px] w-[206px]" />
+        <img
+          src="./pc/row2.png"
+          alt="Terms of Service - Part 2"
+          class="mb-0 w-full"
+          style="width: 100%; height: auto"
+        />
+        <img
+          src="./pc/row3.png"
+          alt="Terms of Service - Part 3"
+          class="m-auto mt-[60px] h-[70px] w-[693px]"
+        />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No additional logic needed for this static page
+</script>
+
+<style scoped>
+/* No additional styles needed */
+</style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sepakeloudest	6c2cc33620	官网发布活动价格样式适配 site-dist-deploy / build-and-deploy (push) Failing after 13m26s Details	2026-06-17 12:07:20 +08:00
sepakeloudest	82f41b1731	删除限速说明 site-dist-deploy / build-and-deploy (push) Successful in 2m6s Details	2026-05-19 22:34:17 +08:00
sepakeloudest	2e4c6c2329	处理邀请链接 site-dist-deploy / build-and-deploy (push) Successful in 1m42s Details	2026-05-05 04:47:38 +03:00
sepakeloudest	06587fb47b	账号 site-dist-deploy / build-and-deploy (push) Successful in 1m16s Details	2026-05-02 19:45:06 +03:00
sepakeloudest	cd307c3297	尝鲜价 site-dist-deploy / build-and-deploy (push) Successful in 1m16s Details	2026-05-02 18:44:53 +03:00
sepakeloudest	d025ab2d33	样式兼容方案 site-dist-deploy / build-and-deploy (push) Successful in 1m17s Details	2026-04-28 06:24:56 +03:00
sepakeloudest	90699d7fe1	删除网站自动打开app的行为 site-dist-deploy / build-and-deploy (push) Successful in 1m16s Details	2026-04-23 19:30:41 +03:00
sepakeloudest	8d0d609494	增加系统标识 site-dist-deploy / build-and-deploy (push) Successful in 1m19s Details	2026-04-22 06:05:01 +03:00
sepakeloudest	8175f19da0	更换苹果账号 site-dist-deploy / build-and-deploy (push) Successful in 1m21s Details	2026-04-20 03:42:01 +03:00
sepakeloudest	6c296dbaaf	处理下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m17s Details	2026-04-17 14:35:48 +03:00
sepakeloudest	3313b95ab1	添加谷歌tag链接 site-dist-deploy / build-and-deploy (push) Successful in 1m15s Details	2026-04-11 15:14:29 +03:00
sepakeloudest	4dc5cb4dd9	添加默认邀请人，website@hifast.biz 'uSSfg1Y1vt' site-dist-deploy / build-and-deploy (push) Successful in 1m25s Details	2026-04-10 06:36:26 +03:00
sepakeloudest	aeeea4c5d2	增加链接带参数 site-dist-deploy / build-and-deploy (push) Successful in 1m51s Details	2026-04-03 18:52:48 +03:00
sepakeloudest	1414444175	增加链接带参数 site-dist-deploy / build-and-deploy (push) Successful in 1m41s Details	2026-03-30 06:03:15 +03:00
sepakeloudest	5f67cf76bd	替换评论样式 site-dist-deploy / build-and-deploy (push) Successful in 2m6s Details	2026-03-25 10:12:08 +02:00
sepakeloudest	b6caf1c38b	调整细节 site-dist-deploy / build-and-deploy (push) Successful in 1m51s Details	2026-03-25 09:42:52 +02:00
sepakeloudest	784cabaddc	增加评论样式 site-dist-deploy / build-and-deploy (push) Successful in 2m9s Details	2026-03-23 12:09:21 +02:00
sepakeloudest	73afc3c435	增加评论样式 site-dist-deploy / build-and-deploy (push) Successful in 2m27s Details	2026-03-21 02:09:05 +02:00
sepakeloudest	fb7e5031c8	提交尝鲜价套餐 site-dist-deploy / build-and-deploy (push) Successful in 1m44s Details	2026-03-20 14:30:23 +02:00
sepakeloudest	a350863a3e	增加android下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m51s Details	2026-03-20 11:40:13 +02:00
sepakeloudest	f33e4a727a	增加android下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m55s Details	2026-03-20 10:23:53 +02:00
sepakeloudest	26bfcaa5f3	增加android下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m59s Details	2026-03-20 10:18:29 +02:00
sepakeloudest	0ed394ea67	修改下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m51s Details	2026-03-20 08:27:33 +02:00
sepakeloudest	1e017b2453	修改下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m41s Details	2026-03-20 06:00:15 +02:00
sepakeloudest	3bed820d1d	修改下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m57s Details	2026-03-20 05:49:25 +02:00
sepakeloudest	169338cfad	替换mac 应用市场下载 site-dist-deploy / build-and-deploy (push) Successful in 2m1s Details	2026-03-12 05:16:05 +02:00
sepakeloudest	1fa5d49572	登陆页面获取逻辑修改 site-dist-deploy / build-and-deploy (push) Successful in 1m46s Details	2026-03-07 11:47:45 +02:00
sepakeloudest	9e00434eb6	删除下载链接请求 site-dist-deploy / build-and-deploy (push) Successful in 1m48s Details	2026-02-26 10:46:06 +02:00
sepakeloudest	dd58e3ce55	删除下载链接请求 site-dist-deploy / build-and-deploy (push) Successful in 1m41s Details	2026-02-25 05:07:16 +02:00
sepakeloudest	466a7c8592	删除谷歌 site-dist-deploy / build-and-deploy (push) Successful in 2m6s Details	2026-02-25 04:28:59 +02:00
sepakeloudest	719f3bc35b	增加公司名称 site-dist-deploy / build-and-deploy (push) Successful in 1m34s Details	2026-02-06 05:42:46 +02:00
sepakeloudest	08b08574b9	增加公司名称 site-dist-deploy / build-and-deploy (push) Successful in 1m49s Details	2026-02-06 05:36:35 +02:00
sepakeloudest	50ad1852ab	谷歌链接 site-dist-deploy / build-and-deploy (push) Successful in 1m30s Details	2026-02-01 21:50:27 -08:00
sepakeloudest	4578e27d38	修改下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m34s Details	2026-01-29 00:06:47 -08:00
sepakeloudest	08a16a68c6	修改下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m34s Details	2026-01-27 07:52:44 -08:00
sepakeloudest	7a2cf6b8f8	接口进行加密 site-dist-deploy / build-and-deploy (push) Successful in 1m42s Details	2026-01-26 03:38:18 -08:00
sepakeloudest	e768e0f9f0	首页登录增加loading site-dist-deploy / build-and-deploy (push) Successful in 1m34s Details	2026-01-25 00:18:05 -08:00
sepakeloudest	0af2e0f896	增加login- redirect路径 site-dist-deploy / build-and-deploy (push) Successful in 1m27s Details	2026-01-23 06:27:16 -08:00
sepakeloudest	77e7d81c4b	更新下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m8s Details	2026-01-23 06:02:24 -08:00
sepakeloudest	c4f967affa	更新下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m37s Details	2026-01-23 05:59:36 -08:00
sepakeloudest	0c8afb05e3	更新下载链接 site-dist-deploy / build-and-deploy (push) Successful in 1m25s Details	2026-01-23 05:39:59 -08:00
shanshanzhong147	3f61439a96	fix: 修改落地页服务器 site-dist-deploy / build-and-deploy (push) Successful in 1m21s Details	2026-01-22 00:33:35 -08:00
sepakeloudest	7f12066ec4	更改客服到chatwoot site-dist-deploy / build-and-deploy (push) Successful in 1m25s Details	2026-01-19 17:41:35 -08:00
sepakeloudest	833cd9e305	处理到期时间 site-dist-deploy / build-and-deploy (push) Successful in 1m17s Details	2026-01-07 18:47:49 -08:00
sepakeloudest	686be3a855	订单弹窗 site-dist-deploy / build-and-deploy (push) Successful in 1m0s Details	2026-01-07 06:52:00 -08:00
sepakeloudest	c0e22f5a6e	订单弹窗 site-dist-deploy / build-and-deploy (push) Successful in 1m3s Details	2026-01-07 06:48:47 -08:00
sepakeloudest	32bda7da80	去掉前后空格 site-dist-deploy / build-and-deploy (push) Has been cancelled Details	2026-01-07 06:48:11 -08:00
sepakeloudest	5f9b23c112	去掉前后空格 site-dist-deploy / build-and-deploy (push) Successful in 1m3s Details	2026-01-07 00:30:33 -08:00
sepakeloudest	dfd236a70b	去掉前后空格 site-dist-deploy / build-and-deploy (push) Successful in 59s Details	2026-01-07 00:14:36 -08:00
sepakeloudest	8153fdab79	优化选择建议 site-dist-deploy / build-and-deploy (push) Successful in 1m15s Details	2026-01-07 00:11:52 -08:00
sepakeloudest	efafec56e0	增加按钮 site-dist-deploy / build-and-deploy (push) Successful in 1m16s Details	2026-01-07 00:01:48 -08:00
sepakeloudest	0aee63988c	订单和订阅修改 site-dist-deploy / build-and-deploy (push) Successful in 1m4s Details	2026-01-06 23:13:39 -08:00
sepakeloudest	7e12363976	样式修改 site-dist-deploy / build-and-deploy (push) Successful in 1m10s Details	2026-01-06 22:41:33 -08:00
sepakeloudest	a3e58a01a1	样式修改 site-dist-deploy / build-and-deploy (push) Successful in 1m12s Details	2026-01-06 20:01:20 -08:00
sepakeloudest	e3cca4c51c	bugfix site-dist-deploy / build-and-deploy (push) Successful in 1m10s Details	2026-01-06 19:52:48 -08:00
shanshanzhong147	fa29905c7c	fix(ci): 修复基础URL配置问题 site-dist-deploy / build-and-deploy (push) Successful in 1m16s Details 将VITE_APP_BASE_URL默认值设置为'/'，避免环境变量未定义时请求失败	2026-01-06 19:36:37 -08:00
sepakeloudest	8b5444919a	修改路由地址 site-dist-deploy / build-and-deploy (push) Successful in 1m2s Details	2026-01-05 21:25:03 -08:00
sepakeloudest	595d1d0932	增加邮箱校验 site-dist-deploy / build-and-deploy (push) Successful in 1m54s Details	2026-01-05 18:37:02 -08:00
sepakeloudest	be35ecb62a	优化图片大小 site-dist-deploy / build-and-deploy (push) Successful in 1m1s Details	2026-01-05 05:17:00 -08:00
sepakeloudest	69d10f88a0	meta 无障碍 site-dist-deploy / build-and-deploy (push) Successful in 1m5s Details	2026-01-05 04:52:00 -08:00
sepakeloudest	09bc1df55c	样式修改 site-dist-deploy / build-and-deploy (push) Successful in 1m31s Details	2026-01-05 04:21:25 -08:00
sepakeloudest	4e73b7a864	样式修改 site-dist-deploy / build-and-deploy (push) Successful in 54s Details	2026-01-05 03:54:12 -08:00
sepakeloudest	7a03955aac	样式修改 site-dist-deploy / build-and-deploy (push) Successful in 1m14s Details	2026-01-05 03:50:22 -08:00
sepakeloudest	e86cfd0881	样式修改 site-dist-deploy / build-and-deploy (push) Successful in 1m12s Details	2026-01-05 02:56:39 -08:00
sepakeloudest	27ebf5adc5	样式修改 site-dist-deploy / build-and-deploy (push) Successful in 1m12s Details	2026-01-05 01:15:16 -08:00
sepakeloudest	3578d3fb4a	登录入口 site-dist-deploy / build-and-deploy (push) Successful in 1m10s Details	2026-01-05 00:28:23 -08:00
sepakeloudest	e6c3e563a8	登录入口 site-dist-deploy / build-and-deploy (push) Successful in 53s Details	2026-01-05 00:17:17 -08:00
sepakeloudest	dc40c24b73	更新代码 site-dist-deploy / build-and-deploy (push) Successful in 1m6s Details	2026-01-05 00:14:16 -08:00
sepakeloudest	96dbe0c108	桌面端样式 site-dist-deploy / build-and-deploy (push) Successful in 1m8s Details	2026-01-04 22:52:06 -08:00
sepakeloudest	02da9d975f	提交热区点击 site-dist-deploy / build-and-deploy (push) Successful in 1m0s Details	2026-01-04 22:38:23 -08:00
sepakeloudest	8e3076e113	提交热区点击 site-dist-deploy / build-and-deploy (push) Successful in 1m11s Details	2026-01-04 22:31:35 -08:00
shanshanzhong147	1cae216052	fix: 更新API和基础URL至h.hifastapp.com site-dist-deploy / build-and-deploy (push) Successful in 59s Details 修复登录表单的HTML结构和类型定义将API目标服务器和基础URL从h.hifastvpn.com更新为h.hifastapp.com 优化登录表单的HTML结构，添加表单提交处理和自动完成属性	2026-01-04 22:22:00 -08:00
shanshanzhong147	3fddc11b17	ci(workflow): 更新docker工作流中的基础URL为h.hifastvpn.com site-dist-deploy / build-and-deploy (push) Successful in 53s Details	2026-01-04 22:17:53 -08:00
shanshanzhong147	ea20a1016e	fix: 更新环境变量和API目标地址 site-dist-deploy / build-and-deploy (push) Successful in 1m12s Details - 统一各环境中的VITE_APP_BASE_URL值为/ - 将vite配置中的API目标地址从api.hifast.biz更新为h.hifastvpn.com - 删除无用的aaa.txt文件	2026-01-04 22:13:37 -08:00
shanshanzhong147	77e7ec603b	ci: 更新Docker工作流中的基础URL为h.hifastvpn.com site-dist-deploy / build-and-deploy (push) Successful in 1m10s Details	2026-01-04 22:08:24 -08:00
shanshanzhong147	e696e2f551	ci(workflow): 添加Telegram通知功能用于部署状态通知 site-dist-deploy / build-and-deploy (push) Successful in 55s Details	2026-01-04 21:57:47 -08:00
shanshanzhong147	bbe25b027f	fix(ci): use move-delete-restore strategy to safely preserve download folders	2026-01-04 21:54:38 -08:00
shanshanzhong147	3b22c583b7	fix(ci): preserve download folder and remove docker dependency site-dist-deploy / build-and-deploy (push) Successful in 2m10s Details	2026-01-04 21:49:11 -08:00
shanshanzhong147	f2d0bbf36b	Merge remote-tracking branch 'origin/main' into develop site-dist-deploy / build-and-deploy (push) Has been cancelled Details	2026-01-04 21:42:51 -08:00
sepakeloudest	97c2832e89	下载	2026-01-04 21:18:14 -08:00
sepakeloudest	9d43162830	下载	2026-01-04 21:04:03 -08:00
sepakeloudest	530df9ce09	增加客服	2026-01-04 05:07:26 -08:00
sepakeloudest	9f2264514d	增加隐私协议和政策	2026-01-04 04:41:07 -08:00
sepakeloudest	57d7b49aa9	增加隐私协议和政策	2026-01-04 04:37:45 -08:00
sepakeloudest	8e7434f67c	增加隐私协议和政策	2026-01-04 04:28:58 -08:00
shanshanzhong147	e15366d5f7	fix: support multiple package managers for sshpass installation site-dist-deploy / build-and-deploy (push) Successful in 1m33s Details	2026-01-04 04:12:38 -08:00
shanshanzhong147	517d07caaf	fix: replace scp-action with native sshpass/scp to resolve file access issues site-dist-deploy / build-and-deploy (push) Failing after 1m25s Details	2026-01-04 04:06:28 -08:00
shanshanzhong147	3a8f171f19	chore: enable scp debug and enhanced file listing site-dist-deploy / build-and-deploy (push) Failing after 2m13s Details	2026-01-04 03:52:31 -08:00
shanshanzhong147	1c53fc4fe4	chore: add debug steps for scp failure site-dist-deploy / build-and-deploy (push) Failing after 2m10s Details	2026-01-04 03:34:54 -08:00
shanshanzhong147	1c0511d44e	fix: use explicit relative path for scp source site-dist-deploy / build-and-deploy (push) Failing after 2m9s Details	2026-01-04 03:23:58 -08:00
shanshanzhong147	df759063f2	fix: resolve case sensitivity issue in image path site-dist-deploy / build-and-deploy (push) Failing after 1m2s Details	2026-01-04 03:21:32 -08:00
shanshanzhong147	8a0359fd7e	fix(ci): use unified build script with bun site-dist-deploy / build-and-deploy (push) Failing after 1m59s Details	2026-01-04 03:18:13 -08:00
shanshanzhong147	ae9f9063a9	refactor(ci): 将复杂构建逻辑提取到独立脚本中 site-dist-deploy / build-and-deploy (push) Failing after 3s Details 重构 CI 构建流程，将原有的复杂构建逻辑提取到独立的 ci-build.sh 脚本中简化 docker.yml 工作流文件，提高可维护性和复用性	2026-01-04 03:01:23 -08:00
sepakeloudest	d8e29af1dc	增加教程样式	2026-01-04 01:38:25 -08:00
shanshanzhong147	69c037bf51	ci(docker): 优化节点安装流程并添加 musl 支持 site-dist-deploy / build-and-deploy (push) Failing after 30m37s Details 添加 DEBIAN_FRONTEND=noninteractive 以避免 apt 安装交互问题预装编译依赖确保 nvm 安装成功添加 musl libc 检测以支持不同环境的节点安装优化节点目录查找逻辑	2026-01-04 01:15:43 -08:00
shanshanzhong147	be99c7acfa	ci(docker): 优化Node安装流程并添加nvm作为备选方案 site-dist-deploy / build-and-deploy (push) Failing after 30s Details	2026-01-04 01:13:36 -08:00
shanshanzhong147	c5062278a3	ci(docker): 优化构建流程，使用官方Node二进制替代nvm安装 site-dist-deploy / build-and-deploy (push) Failing after 9s Details 重构Docker工作流中的Node安装步骤，将nvm安装方式替换为直接下载官方二进制包。新增通用包安装函数支持多种包管理器，并确保构建环境具备必要工具。	2026-01-04 01:08:10 -08:00
shanshanzhong147	8888382067	ci(docker): 确保构建环境中curl可用 site-dist-deploy / build-and-deploy (push) Failing after 26s Details 添加对curl的检查与安装逻辑，以支持后续nvm安装脚本的执行	2026-01-04 01:00:16 -08:00
shanshanzhong147	d687e47fdc	ci(docker): 使用nvm替代直接运行node容器构建 site-dist-deploy / build-and-deploy (push) Failing after 2s Details 修改docker构建流程，通过nvm安装并使用node 20，替代直接运行node容器的方式	2026-01-04 00:56:14 -08:00
shanshanzhong147	5082885ace	ci(workflow): 替换默认的检出操作为手动实现 site-dist-deploy / build-and-deploy (push) Failing after 1s Details 使用手动实现的git命令替换actions/checkout，以避免Node.js依赖	2026-01-04 00:54:05 -08:00
shanshanzhong147	929e405aab	ci: 添加部署站点的Gitea工作流配置 site-dist-deploy / build-and-deploy (push) Failing after 14s Details	2026-01-04 00:52:28 -08:00
shanshanzhong147	31c1ecb612	Merge remote-tracking branch 'origin/main' into develop	2026-01-04 00:44:37 -08:00
sepakeloudest	e38904422d	修改样式	2026-01-04 00:14:09 -08:00
sepakeloudest	acd0c94e60	桌面端样式	2026-01-03 23:56:40 -08:00
sepakeloudest	f9262b3754	提交交互修改	2026-01-03 20:42:47 -08:00
sepakeloudest	4fc0b21c9c	删除解密	2026-01-03 01:21:25 -08:00
sepakeloudest	ffbed8c72d	下载链接	2026-01-02 21:47:56 -08:00
sepakeloudest	f6b306c823	下载链接	2026-01-02 21:12:09 -08:00
sepakeloudest	ed3b96158f	细节优化	2026-01-02 19:34:12 -08:00
sepakeloudest	f9d55161e6	细节优化	2025-12-31 07:37:03 -08:00
sepakeloudest	ecd6cf1c94	细节优化	2025-12-31 07:26:24 -08:00
sepakeloudest	107d950771	骨架屏细节	2025-12-31 07:12:53 -08:00
sepakeloudest	4d153b4149	优化样式	2025-12-31 06:47:39 -08:00
sepakeloudest	2b0741fdb9	登录对接	2025-12-31 06:39:11 -08:00
sepakeloudest	033dda7744	登录对接	2025-12-31 02:36:33 -08:00
sepakeloudest	259d5a416c	域名	2025-12-30 22:59:29 -08:00
sepakeloudest	f753721492	域名	2025-12-30 22:57:51 -08:00
sepakeloudest	ab5de5e0f5	登录处理	2025-12-30 22:54:57 -08:00
sepakeloudest	a9cbd2b921	样式处理	2025-12-30 22:24:54 -08:00
sepakeloudest	f7a28c1c86	帮助页处理	2025-12-30 20:22:54 -08:00
sepakeloudest	8d64f66cca	首页处理	2025-12-30 18:56:49 -08:00
sepakeloudest	346ad0a4ec	接口处理	2025-12-30 06:50:01 -08:00
sepakeloudest	c7bfc2729c	设备接口处理	2025-12-30 04:21:39 -08:00
sepakeloudest	4392dd4a3e	接口调试用户信息	2025-12-30 02:28:09 -08:00
sepakeloudest	ced65527d5	接口调试	2025-12-30 01:25:17 -08:00
sepakeloudest	de6dfb5e20	接口调试	2025-12-30 01:25:08 -08:00
sepakeloudest	11c05de565	移动端UI	2025-12-29 22:36:35 -08:00
				`@@ -0,0 +1 @@`
				`export { default as Input } from "./Input.vue"`