diff --git a/src/api/pay.js b/src/api/pay.js
new file mode 100644
index 0000000..f9b8bc9
--- /dev/null
+++ b/src/api/pay.js
@@ -0,0 +1,39 @@
+import { get, post } from "../utils/http.js";
+
+// 获取支付应用信息
+export const getPayAplication = async (applicationId) => {
+  try {
+    const response = await get(`/order/web/pay/application/${applicationId}`);
+    return response;
+  } catch (error) {
+    console.error("Failed to fetch get pay application:", error);
+    onsole.error("error:" + error.response.errorMsg);
+    throw error;
+  }
+};
+
+// 获取商品列表
+export const getAppCommodityCard = async (params) => {
+  try {
+    const response = await get(
+      `/order/web/pay/commodity?applicationId=${params.applicationId}&payCountryId=${params.payCountryId}&regionId=${params.regionId}&type=GOLD`
+    );
+    return response;
+  } catch (error) {
+    console.error("Failed to fetch get app commodity card:", error);
+    onsole.error("error:" + error.response.errorMsg);
+    throw error;
+  }
+};
+
+// 下单充值
+export const payPlaceAnOrderRecharge = async (data) => {
+  try {
+    const response = await post("/order/web/pay/recharge", data);
+    return response;
+  } catch (error) {
+    console.error("Failed to fetch get pay application:", error);
+    onsole.error("error:" + error.response.errorMsg);
+    throw error;
+  }
+};
diff --git a/src/components/MobileHeader.vue b/src/components/MobileHeader.vue
index 9c27180..9029b8b 100644
--- a/src/components/MobileHeader.vue
+++ b/src/components/MobileHeader.vue
@@ -2,91 +2,111 @@
   <div class="mobile-header" :class="{ 'in-app': isInAppEnvironment }">
     <!-- 状态栏占位区域（仅在APP中显示） -->
     <div v-if="isInAppEnvironment" class="status-bar-spacer"></div>
-    
+
     <!-- header内容 -->
     <div class="header-content">
       <button v-if="showBack" class="back-btn" @click="handleBack">
         <svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <path
+            d="M15 18L9 12L15 6"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
       </button>
       <h1 class="title">{{ title }}</h1>
       <button v-if="showHelp" class="help-btn" @click="$emit('help')">
         <svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
-          <path d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+          <path
+            d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M12 17h.01"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
       </button>
       <div v-else class="placeholder"></div>
+
+      <slot name="extraFunction"></slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useRouter, useRoute } from 'vue-router'
-import { computed, ref, onMounted } from 'vue'
-import { closePage, isInApp } from '../utils/appBridge.js'
+import { useRouter, useRoute } from "vue-router";
+import { computed, ref, onMounted } from "vue";
+import { closePage, isInApp } from "../utils/appBridge.js";
 
 // 定义props
 const props = defineProps({
   title: {
     type: String,
-    required: true
+    required: true,
   },
   showBack: {
     type: Boolean,
-    default: true
+    default: true,
   },
   showHelp: {
     type: Boolean,
-    default: false
+    default: false,
   },
   isHomePage: {
     type: Boolean,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 
 // 定义emits
-defineEmits(['help'])
+defineEmits(["help"]);
 
-const router = useRouter()
-const route = useRoute()
+const router = useRouter();
+const route = useRoute();
 
 // 检测是否在APP环境中
-const isInAppEnvironment = ref(false)
+const isInAppEnvironment = ref(false);
 
 // 定义首页路由列表
-const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']
+const homeRoutes = ["/host-center", "/agency-center", "/coin-seller", "/"];
 
 // 计算是否为首页
 const isCurrentlyHomePage = computed(() => {
   // 1. 首先检查 props
-  const propsHomePage = props.isHomePage === true || props.isHomePage === 'true'
+  const propsHomePage = props.isHomePage === true || props.isHomePage === "true";
 
   // 2. 然后检查路由
-  const routeHomePage = homeRoutes.includes(route.path)
+  const routeHomePage = homeRoutes.includes(route.path);
 
   // 3. 两者任一为true即为首页
-  return propsHomePage || routeHomePage
-})
+  return propsHomePage || routeHomePage;
+});
 
 const handleBack = () => {
   if (isCurrentlyHomePage.value && isInApp()) {
     // 首页且在APP中：关闭页面
-    console.log('home back')
-    closePage()
+    console.log("home back");
+    closePage();
   } else {
     // 非首页或浏览器环境：正常返回
-    router.go(-1)
+    router.go(-1);
   }
-}
+};
 
 // 组件挂载时检测环境
 onMounted(() => {
-  isInAppEnvironment.value = isInApp()
-})
+  isInAppEnvironment.value = isInApp();
+});
 </script>
 
 <style scoped>
@@ -112,7 +132,8 @@ onMounted(() => {
   background: white !important;
 }
 
-.back-btn, .help-btn {
+.back-btn,
+.help-btn {
   width: 36px;
   height: 36px;
   border: none;
@@ -127,19 +148,22 @@ onMounted(() => {
   border: 1px solid #e9ecef;
 }
 
-.back-btn:hover, .help-btn:hover {
+.back-btn:hover,
+.help-btn:hover {
   background: #e9ecef !important;
   color: #343a40 !important;
   transform: scale(1.05);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.back-btn:active, .help-btn:active {
+.back-btn:active,
+.help-btn:active {
   transform: scale(0.95);
   background: #dee2e6 !important;
 }
 
-.back-icon, .help-icon {
+.back-icon,
+.help-icon {
   width: 20px;
   height: 20px;
   color: inherit;
@@ -167,26 +191,28 @@ onMounted(() => {
     background: white !important;
     border-bottom-color: #f0f0f0 !important;
   }
-  
+
   .status-bar-spacer {
     background: white !important;
   }
-  
+
   .header-content {
     background: white !important;
   }
-  
-  .back-btn, .help-btn {
+
+  .back-btn,
+  .help-btn {
     background: #f8f9fa !important;
     border-color: #e9ecef !important;
     color: #495057 !important;
   }
-  
-  .back-btn:hover, .help-btn:hover {
+
+  .back-btn:hover,
+  .help-btn:hover {
     background: #e9ecef !important;
     color: #343a40 !important;
   }
-  
+
   .title {
     color: #212529 !important;
   }
@@ -198,16 +224,17 @@ onMounted(() => {
     background: white !important;
     color: #212529 !important;
   }
-  
+
   .mobile-header * {
     color: inherit !important;
   }
-  
+
   .title {
     color: #212529 !important;
   }
-  
-  .back-btn, .help-btn {
+
+  .back-btn,
+  .help-btn {
     background: #f8f9fa !important;
     color: #495057 !important;
     border-color: #e9ecef !important;
@@ -219,12 +246,13 @@ onMounted(() => {
   .mobile-header {
     background: white !important;
   }
-  
+
   .title {
     color: #212529 !important;
   }
-  
-  .back-btn, .help-btn {
+
+  .back-btn,
+  .help-btn {
     background: #f8f9fa !important;
     color: #495057 !important;
   }
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index c548c25..e0bc140 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -5,162 +5,175 @@
 
 // 用户身份类型
 export const USER_ROLES = {
-  FREIGHT_AGENT: 'freightAgent',
-  AGENT: 'agent',
-  BD: 'bd',
-  ANCHOR: 'anchor',
-  GUEST: 'guest'
-}
+  FREIGHT_AGENT: "freightAgent",
+  AGENT: "agent",
+  BD: "bd",
+  ANCHOR: "anchor",
+  GUEST: "guest",
+  ADMIN: "admin",
+};
 
 // 页面路径常量
 export const PAGES = {
-  COIN_SELLER: '/coin-seller',
-  AGENCY_CENTER: '/agency-center',
-  BD_CENTER: '/bd-center',
-  HOST_CENTER: '/host-center',
-  APPLY: '/apply',
-  MESSAGE: '/message',
-  TRANSFER: '/transfer',
-  EXCHANGE: '/exchange-gold-coins',
-  PERSONAL_SALARY: '/platform-policy',
-  HOST_SETTING: '/host-setting',
-  NOT_APP: '/not_app',
-  LOADING: '/loading',
-}
+  COIN_SELLER: "/coin-seller",
+  AGENCY_CENTER: "/agency-center",
+  BD_CENTER: "/bd-center",
+  HOST_CENTER: "/host-center",
+  APPLY: "/apply",
+  MESSAGE: "/message",
+  TRANSFER: "/transfer",
+  EXCHANGE: "/exchange-gold-coins",
+  PERSONAL_SALARY: "/platform-policy",
+  HOST_SETTING: "/host-setting",
+  NOT_APP: "/not_app",
+  LOADING: "/loading",
+  ADMIN_CENTER: "/admin-center",
+  RECHARGE_STANDARD: "/recharge-standard",
+};
 
 // 🎯 核心改变：基于身份的权限配置
 // 每个身份拥有的页面权限列表
 export const ROLE_PERMISSIONS = {
   // Freight Agent (货运代理/金币销售员)
   [USER_ROLES.FREIGHT_AGENT]: [
-    PAGES.COIN_SELLER,        // 主页面
-    '/seller-records',
-    '/coin-seller-search'
+    PAGES.COIN_SELLER, // 主页面
+    "/seller-records",
+    "/coin-seller-search",
+    "/recharge-freight-agent",
   ],
 
   // Agent (代理商)
   [USER_ROLES.AGENT]: [
-    PAGES.AGENCY_CENTER,      // 主页面
-    PAGES.TRANSFER,           // 转账功能
-    PAGES.EXCHANGE,           // 兑换功能
-    PAGES.MESSAGE,            // 消息功能
-    PAGES.PERSONAL_SALARY,    // 个人薪资查看
-    '/team-member',
-    '/information-details',
-    '/search-payee',
-    '/history-salary',
-    '/platform-salary',
-    '/invite-members',
-    '/team-bill'
+    PAGES.AGENCY_CENTER, // 主页面
+    PAGES.TRANSFER, // 转账功能
+    PAGES.EXCHANGE, // 兑换功能
+    PAGES.MESSAGE, // 消息功能
+    PAGES.PERSONAL_SALARY, // 个人薪资查看
+    PAGES.RECHARGE_STANDARD, //普通转账功能
+    "/team-member",
+    "/information-details",
+    "/search-payee",
+    "/history-salary",
+    "/platform-salary",
+    "/invite-members",
+    "/team-bill",
   ],
 
   // BD (商务拓展)
   [USER_ROLES.BD]: [
-    PAGES.BD_CENTER,          // 主页面
-    PAGES.TRANSFER,           // 转账功能
-    PAGES.EXCHANGE,           // 兑换功能
-    PAGES.MESSAGE,            // 消息功能
-    '/team-member',
-    '/history-salary',
-    '/platform-salary'
+    PAGES.BD_CENTER, // 主页面
+    PAGES.TRANSFER, // 转账功能
+    PAGES.EXCHANGE, // 兑换功能
+    PAGES.MESSAGE, // 消息功能
+    PAGES.RECHARGE_STANDARD, //普通转账功能
+    "/team-member",
+    "/history-salary",
+    "/platform-salary",
   ],
 
   // Anchor (主播)
   [USER_ROLES.ANCHOR]: [
-    PAGES.HOST_CENTER,        // 主页面
-    PAGES.TRANSFER,           // 转账功能
-    PAGES.EXCHANGE,           // 兑换功能
-    PAGES.MESSAGE,            // 消息功能
-    PAGES.PERSONAL_SALARY,    // 个人薪资查看
-    PAGES.HOST_SETTING,       // 主播设置
-    '/information-details',
-    '/search-payee',
-    '/apply',
-    '/history-salary',
-    '/platform-salary',
-    '/invite-members',
-    '/team-bill'
+    PAGES.HOST_CENTER, // 主页面
+    PAGES.TRANSFER, // 转账功能
+    PAGES.EXCHANGE, // 兑换功能
+    PAGES.MESSAGE, // 消息功能
+    PAGES.PERSONAL_SALARY, // 个人薪资查看
+    PAGES.HOST_SETTING, // 主播设置
+    PAGES.RECHARGE_STANDARD, //普通转账功能
+    "/information-details",
+    "/search-payee",
+    "/apply",
+    "/history-salary",
+    "/platform-salary",
+    "/invite-members",
+    "/team-bill",
+  ],
+
+  // Admin（管理员）
+  [USER_ROLES.ADMIN]: [
+    PAGES.ADMIN_CENTER, //管理员的身份验证
+    "/item-distribution", //赠送商品页面
+    PAGES.RECHARGE_STANDARD, //普通转账功能
   ],
 
   // Guest (访客/申请者)
   [USER_ROLES.GUEST]: [
-    PAGES.APPLY,              // 申请页面
+    PAGES.APPLY, // 申请页面
   ],
 
   // 公共页面（所有身份都可以访问）
   PUBLIC_PAGES: [
-    PAGES.NOT_APP,            // 错误页面
+    PAGES.NOT_APP, // 错误页面
   ],
 
   // 加载页面
-  LOADING_PAGE: [
-    PAGES.LOADING
-  ]
-
-}
+  LOADING_PAGE: [PAGES.LOADING],
+};
 
 // 身份优先级（数字越大优先级越高）
 export const ROLE_PRIORITY = {
+  [USER_ROLES.ADMIN]: 5,
   [USER_ROLES.FREIGHT_AGENT]: 4,
   [USER_ROLES.BD]: 3,
   [USER_ROLES.AGENT]: 2,
   [USER_ROLES.ANCHOR]: 1,
-  [USER_ROLES.GUEST]: 0
-}
+  [USER_ROLES.GUEST]: 0,
+};
 
 // 身份对应的默认首页
 export const ROLE_DEFAULT_PAGES = {
+  [USER_ROLES.ADMIN]: PAGES.ADMIN_CENTER,
   [USER_ROLES.FREIGHT_AGENT]: PAGES.COIN_SELLER,
   [USER_ROLES.AGENT]: PAGES.AGENCY_CENTER,
   [USER_ROLES.BD]: PAGES.BD_CENTER,
   [USER_ROLES.ANCHOR]: PAGES.HOST_CENTER,
-  [USER_ROLES.GUEST]: PAGES.APPLY
-}
+  [USER_ROLES.GUEST]: PAGES.APPLY,
+};
 
 // 身份显示配置
 export const ROLE_DISPLAY_CONFIG = {
   [USER_ROLES.FREIGHT_AGENT]: {
-    name: 'Freight Agent',
-    tag: '💰 Coin Seller',
-    color: '#FCD34D',
-    bgColor: '#FEF3C7'
+    name: "Freight Agent",
+    tag: "💰 Coin Seller",
+    color: "#FCD34D",
+    bgColor: "#FEF3C7",
   },
   [USER_ROLES.AGENT]: {
-    name: 'Agent',
-    tag: '🏢 Agency',
-    color: '#1E40AF',
-    bgColor: '#DBEAFE'
+    name: "Agent",
+    tag: "🏢 Agency",
+    color: "#1E40AF",
+    bgColor: "#DBEAFE",
   },
   [USER_ROLES.BD]: {
-    name: 'BD',
-    tag: '📈 BD',
-    color: '#059669',
-    bgColor: '#D1FAE5'
+    name: "BD",
+    tag: "📈 BD",
+    color: "#059669",
+    bgColor: "#D1FAE5",
   },
   [USER_ROLES.ANCHOR]: {
-    name: 'Anchor',
-    tag: '👑 Host',
-    color: '#5B21B6',
-    bgColor: '#E0E7FF'
+    name: "Anchor",
+    tag: "👑 Host",
+    color: "#5B21B6",
+    bgColor: "#E0E7FF",
   },
   [USER_ROLES.GUEST]: {
-    name: 'Guest',
-    tag: '👤 Guest',
-    color: '#6B7280',
-    bgColor: '#F3F4F6'
-  }
-}
+    name: "Guest",
+    tag: "👤 Guest",
+    color: "#6B7280",
+    bgColor: "#F3F4F6",
+  },
+};
 
 /**
  * 基于身份的权限管理类
  */
 class RoleBasedPermissionManager {
   constructor() {
-    this.userIdentity = null
-    this.primaryRole = null
-    this.allRoles = []
-    this.isIdentityLoaded = false
-    this.allowedPages = []
+    this.userIdentity = null;
+    this.primaryRole = null;
+    this.allRoles = [];
+    this.isIdentityLoaded = false;
+    this.allowedPages = [];
   }
 
   /**
@@ -168,18 +181,18 @@ class RoleBasedPermissionManager {
    * @param {Object} identity - 身份信息对象
    */
   setUserIdentity(identity) {
-    this.userIdentity = identity
-    this.allRoles = this.calculateAllRoles(identity)
-    this.primaryRole = this.calculatePrimaryRole(this.allRoles)
-    this.allowedPages = this.calculateAllowedPages(this.allRoles)
-    this.isIdentityLoaded = true
+    this.userIdentity = identity;
+    this.allRoles = this.calculateAllRoles(identity);
+    this.primaryRole = this.calculatePrimaryRole(this.allRoles);
+    this.allowedPages = this.calculateAllowedPages(this.allRoles);
+    this.isIdentityLoaded = true;
 
-    console.debug('🔐 User identity updated:', {
+    console.debug("🔐 User identity updated:", {
       identity: this.userIdentity,
       allRoles: this.allRoles,
       primaryRole: this.primaryRole,
-      allowedPages: this.allowedPages
-    })
+      allowedPages: this.allowedPages,
+    });
   }
 
   /**
@@ -188,15 +201,16 @@ class RoleBasedPermissionManager {
    * @returns {Array} 所有身份列表
    */
   calculateAllRoles(identity) {
-    if (!identity) return [USER_ROLES.GUEST]
+    if (!identity) return [USER_ROLES.GUEST];
 
-    const roles = []
-    if (identity.freightAgent) roles.push(USER_ROLES.FREIGHT_AGENT)
-    if (identity.agent) roles.push(USER_ROLES.AGENT)
-    if (identity.bd) roles.push(USER_ROLES.BD)
-    if (identity.anchor) roles.push(USER_ROLES.ANCHOR)
+    const roles = [];
+    if (identity.freightAgent) roles.push(USER_ROLES.FREIGHT_AGENT);
+    if (identity.agent) roles.push(USER_ROLES.AGENT);
+    if (identity.bd) roles.push(USER_ROLES.BD);
+    if (identity.anchor) roles.push(USER_ROLES.ANCHOR);
+    if (identity.admin) roles.push(USER_ROLES.ADMIN);
 
-    return roles.length > 0 ? roles : [USER_ROLES.GUEST]
+    return roles.length > 0 ? roles : [USER_ROLES.GUEST];
   }
 
   /**
@@ -205,12 +219,12 @@ class RoleBasedPermissionManager {
    * @returns {string} 主要身份
    */
   calculatePrimaryRole(roles) {
-    if (!roles || roles.length === 0) return USER_ROLES.GUEST
+    if (!roles || roles.length === 0) return USER_ROLES.GUEST;
 
     // 按优先级排序，返回优先级最高的身份
     return roles.reduce((highest, current) => {
-      return ROLE_PRIORITY[current] > ROLE_PRIORITY[highest] ? current : highest
-    }, USER_ROLES.GUEST)
+      return ROLE_PRIORITY[current] > ROLE_PRIORITY[highest] ? current : highest;
+    }, USER_ROLES.GUEST);
   }
 
   /**
@@ -219,27 +233,27 @@ class RoleBasedPermissionManager {
    * @returns {Array} 允许访问的页面列表
    */
   calculateAllowedPages(roles) {
-    const allowedPages = new Set()
+    const allowedPages = new Set();
 
     // 添加公共页面
-    ROLE_PERMISSIONS.PUBLIC_PAGES.forEach(page => {
-      allowedPages.add(page)
-    })
+    ROLE_PERMISSIONS.PUBLIC_PAGES.forEach((page) => {
+      allowedPages.add(page);
+    });
 
     // 添加loading页面
-    ROLE_PERMISSIONS.LOADING_PAGE.forEach(page => {
-      allowedPages.add(page)
-    })
+    ROLE_PERMISSIONS.LOADING_PAGE.forEach((page) => {
+      allowedPages.add(page);
+    });
 
     // 根据用户拥有的每个身份，添加对应的页面权限
-    roles.forEach(role => {
-      const rolePages = ROLE_PERMISSIONS[role] || []
-      rolePages.forEach(page => {
-        allowedPages.add(page)
-      })
-    })
+    roles.forEach((role) => {
+      const rolePages = ROLE_PERMISSIONS[role] || [];
+      rolePages.forEach((page) => {
+        allowedPages.add(page);
+      });
+    });
 
-    return Array.from(allowedPages)
+    return Array.from(allowedPages);
   }
 
   /**
@@ -249,20 +263,20 @@ class RoleBasedPermissionManager {
    */
   hasPagePermission(page) {
     if (!this.isIdentityLoaded) {
-      console.warn('⚠️ Identity not loaded yet')
-      return false
+      console.warn("⚠️ Identity not loaded yet");
+      return false;
     }
 
-    const hasPermission = this.allowedPages.includes(page)
+    const hasPermission = this.allowedPages.includes(page);
 
-    console.debug('🔍 Permission check:', {
+    console.debug("🔍 Permission check:", {
       page,
       allRoles: this.allRoles,
       primaryRole: this.primaryRole,
-      hasPermission
-    })
+      hasPermission,
+    });
 
-    return hasPermission
+    return hasPermission;
   }
 
   /**
@@ -272,10 +286,10 @@ class RoleBasedPermissionManager {
    * @returns {boolean} 是否有权限
    */
   hasRolePagePermission(role, page) {
-    const rolePages = ROLE_PERMISSIONS[role] || []
-    const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || []
+    const rolePages = ROLE_PERMISSIONS[role] || [];
+    const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || [];
 
-    return rolePages.includes(page) || publicPages.includes(page)
+    return rolePages.includes(page) || publicPages.includes(page);
   }
 
   /**
@@ -284,10 +298,10 @@ class RoleBasedPermissionManager {
    * @returns {Array} 页面权限列表
    */
   getRolePermissions(role) {
-    const rolePages = ROLE_PERMISSIONS[role] || []
-    const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || []
+    const rolePages = ROLE_PERMISSIONS[role] || [];
+    const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || [];
 
-    return [...new Set([...rolePages, ...publicPages])]
+    return [...new Set([...rolePages, ...publicPages])];
   }
 
   /**
@@ -295,7 +309,7 @@ class RoleBasedPermissionManager {
    * @returns {string} 默认页面路径
    */
   getDefaultPage() {
-    return ROLE_DEFAULT_PAGES[this.primaryRole] || PAGES.APPLY
+    return ROLE_DEFAULT_PAGES[this.primaryRole] || PAGES.APPLY;
   }
 
   /**
@@ -303,7 +317,7 @@ class RoleBasedPermissionManager {
    * @returns {string} 当前主要身份
    */
   getPrimaryRole() {
-    return this.primaryRole
+    return this.primaryRole;
   }
 
   /**
@@ -311,7 +325,7 @@ class RoleBasedPermissionManager {
    * @returns {Array} 所有身份
    */
   getAllRoles() {
-    return this.allRoles
+    return this.allRoles;
   }
 
   /**
@@ -320,7 +334,7 @@ class RoleBasedPermissionManager {
    * @returns {Object} 显示信息
    */
   getRoleDisplayInfo(role = this.primaryRole) {
-    return ROLE_DISPLAY_CONFIG[role] || ROLE_DISPLAY_CONFIG[USER_ROLES.GUEST]
+    return ROLE_DISPLAY_CONFIG[role] || ROLE_DISPLAY_CONFIG[USER_ROLES.GUEST];
   }
 
   /**
@@ -328,7 +342,7 @@ class RoleBasedPermissionManager {
    * @returns {boolean} 是否有多重身份
    */
   hasMultipleRoles() {
-    return this.allRoles.length > 1
+    return this.allRoles.length > 1;
   }
 
   /**
@@ -338,11 +352,11 @@ class RoleBasedPermissionManager {
    */
   switchToRole(role) {
     if (!this.allRoles.includes(role)) {
-      console.warn(`⚠️ User does not have role: ${role}`)
-      return this.getDefaultPage()
+      console.warn(`⚠️ User does not have role: ${role}`);
+      return this.getDefaultPage();
     }
 
-    return ROLE_DEFAULT_PAGES[role] || PAGES.APPLY
+    return ROLE_DEFAULT_PAGES[role] || PAGES.APPLY;
   }
 
   /**
@@ -350,16 +364,16 @@ class RoleBasedPermissionManager {
    * @returns {Array} 可访问的页面菜单
    */
   getNavigationMenu() {
-    const menu = []
+    const menu = [];
 
-    this.allowedPages.forEach(page => {
-      const menuItem = this.getPageMenuInfo(page)
+    this.allowedPages.forEach((page) => {
+      const menuItem = this.getPageMenuInfo(page);
       if (menuItem) {
-        menu.push(menuItem)
+        menu.push(menuItem);
       }
-    })
+    });
 
-    return menu
+    return menu;
   }
 
   /**
@@ -369,31 +383,31 @@ class RoleBasedPermissionManager {
    */
   getPageMenuInfo(page) {
     const pageMenuConfig = {
-      [PAGES.COIN_SELLER]: { title: 'Coin Seller', icon: '💰', order: 1 },
-      [PAGES.AGENCY_CENTER]: { title: 'Agency Center', icon: '🏢', order: 2 },
-      [PAGES.BD_CENTER]: { title: 'BD Center', icon: '📈', order: 3 },
-      [PAGES.HOST_CENTER]: { title: 'Host Center', icon: '👑', order: 4 },
-      [PAGES.TRANSFER]: { title: 'Transfer', icon: '💸', order: 5 },
-      [PAGES.EXCHANGE]: { title: 'Exchange', icon: '🔄', order: 6 },
-      [PAGES.MESSAGE]: { title: 'Messages', icon: '💬', order: 7 },
-      [PAGES.PERSONAL_SALARY]: { title: 'Salary', icon: '💵', order: 8 },
-      [PAGES.HOST_SETTING]: { title: 'Settings', icon: '⚙️', order: 9 }
-    }
+      [PAGES.COIN_SELLER]: { title: "Coin Seller", icon: "💰", order: 1 },
+      [PAGES.AGENCY_CENTER]: { title: "Agency Center", icon: "🏢", order: 2 },
+      [PAGES.BD_CENTER]: { title: "BD Center", icon: "📈", order: 3 },
+      [PAGES.HOST_CENTER]: { title: "Host Center", icon: "👑", order: 4 },
+      [PAGES.TRANSFER]: { title: "Transfer", icon: "💸", order: 5 },
+      [PAGES.EXCHANGE]: { title: "Exchange", icon: "🔄", order: 6 },
+      [PAGES.MESSAGE]: { title: "Messages", icon: "💬", order: 7 },
+      [PAGES.PERSONAL_SALARY]: { title: "Salary", icon: "💵", order: 8 },
+      [PAGES.HOST_SETTING]: { title: "Settings", icon: "⚙️", order: 9 },
+    };
 
-    const config = pageMenuConfig[page]
-    return config ? { ...config, path: page } : null
+    const config = pageMenuConfig[page];
+    return config ? { ...config, path: page } : null;
   }
 
   /**
    * 重置权限信息
    */
   reset() {
-    this.userIdentity = null
-    this.primaryRole = null
-    this.allRoles = []
-    this.isIdentityLoaded = false
-    this.allowedPages = []
-    console.debug('🔄 Permission manager reset')
+    this.userIdentity = null;
+    this.primaryRole = null;
+    this.allRoles = [];
+    this.isIdentityLoaded = false;
+    this.allowedPages = [];
+    console.debug("🔄 Permission manager reset");
   }
 
   /**
@@ -401,64 +415,65 @@ class RoleBasedPermissionManager {
    * @returns {boolean}
    */
   isLoaded() {
-    return this.isIdentityLoaded
+    return this.isIdentityLoaded;
   }
 
   /**
    * 调试方法：打印当前权限状态
    */
   debugPermissions() {
-    console.group('🔐 Current Permission State')
-    console.log('User Identity:', this.userIdentity)
-    console.log('All Roles:', this.allRoles)
-    console.log('Primary Role:', this.primaryRole)
-    console.log('Allowed Pages:', this.allowedPages)
-    console.log('Default Page:', this.getDefaultPage())
-    console.log('Navigation Menu:', this.getNavigationMenu())
-    console.groupEnd()
+    console.group("🔐 Current Permission State");
+    console.log("User Identity:", this.userIdentity);
+    console.log("All Roles:", this.allRoles);
+    console.log("Primary Role:", this.primaryRole);
+    console.log("Allowed Pages:", this.allowedPages);
+    console.log("Default Page:", this.getDefaultPage());
+    console.log("Navigation Menu:", this.getNavigationMenu());
+    console.groupEnd();
   }
 }
 
 // 创建全局权限管理实例
-export const permissionManager = new RoleBasedPermissionManager()
+export const permissionManager = new RoleBasedPermissionManager();
 
 // 便捷方法
-export const hasPermission = (page) => permissionManager.hasPagePermission(page)
-export const hasRolePermission = (role, page) => permissionManager.hasRolePagePermission(role, page)
-export const getRolePermissions = (role) => permissionManager.getRolePermissions(role)
-export const getDefaultPage = () => permissionManager.getDefaultPage()
-export const getPrimaryRole = () => permissionManager.getPrimaryRole()
-export const getAllRoles = () => permissionManager.getAllRoles()
-export const getRoleDisplayInfo = (role) => permissionManager.getRoleDisplayInfo(role)
-export const setUserIdentity = (identity) => permissionManager.setUserIdentity(identity)
-export const resetPermissions = () => permissionManager.reset()
-export const switchToRole = (role) => permissionManager.switchToRole(role)
-export const getNavigationMenu = () => permissionManager.getNavigationMenu()
-export const debugPermissions = () => permissionManager.debugPermissions()
+export const hasPermission = (page) => permissionManager.hasPagePermission(page);
+export const hasRolePermission = (role, page) =>
+  permissionManager.hasRolePagePermission(role, page);
+export const getRolePermissions = (role) => permissionManager.getRolePermissions(role);
+export const getDefaultPage = () => permissionManager.getDefaultPage();
+export const getPrimaryRole = () => permissionManager.getPrimaryRole();
+export const getAllRoles = () => permissionManager.getAllRoles();
+export const getRoleDisplayInfo = (role) => permissionManager.getRoleDisplayInfo(role);
+export const setUserIdentity = (identity) => permissionManager.setUserIdentity(identity);
+export const resetPermissions = () => permissionManager.reset();
+export const switchToRole = (role) => permissionManager.switchToRole(role);
+export const getNavigationMenu = () => permissionManager.getNavigationMenu();
+export const debugPermissions = () => permissionManager.debugPermissions();
 
 // 🎯 新增：快速查询某个身份的权限
 export const QUICK_ROLE_CHECK = {
   // 检查 Freight Agent 的权限
   freightAgent: {
     pages: getRolePermissions(USER_ROLES.FREIGHT_AGENT),
-    canAccess: (page) => hasRolePermission(USER_ROLES.FREIGHT_AGENT, page)
+    canAccess: (page) => hasRolePermission(USER_ROLES.FREIGHT_AGENT, page),
   },
 
   // 检查 Agent 的权限
   agent: {
     pages: getRolePermissions(USER_ROLES.AGENT),
-    canAccess: (page) => hasRolePermission(USER_ROLES.AGENT, page)
+    canAccess: (page) => hasRolePermission(USER_ROLES.AGENT, page),
   },
 
   // 检查 BD 的权限
   bd: {
     pages: getRolePermissions(USER_ROLES.BD),
-    canAccess: (page) => hasRolePermission(USER_ROLES.BD, page)
+    canAccess: (page) => hasRolePermission(USER_ROLES.BD, page),
   },
 
   // 检查 Anchor 的权限
   anchor: {
     pages: getRolePermissions(USER_ROLES.ANCHOR),
-    canAccess: (page) => hasRolePermission(USER_ROLES.ANCHOR, page)
-  }
-}
+    canAccess: (page) => hasRolePermission(USER_ROLES.ANCHOR, page),
+  },
+};
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index b5235f7..a0662ed 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -3,18 +3,24 @@
  * 提供APP连接检查、页面访问权限控制和自动重定向功能
  */
 
-import { permissionManager, PAGES, USER_ROLES } from './permissionManager.js'
-import {getUserIdentity, getMemberProfile} from '../api/wallet.js'
-import {getUserId, setUserInfo} from './userStore.js'
-import { connectApplication, parseAccessOrigin, parseHeader, setHttpHeaders, isInApp } from './appBridge.js'
-import { appConnectionManager, isAppConnected } from './appConnectionManager.js'
+import { permissionManager, PAGES, USER_ROLES } from "./permissionManager.js";
+import { getUserIdentity, getMemberProfile } from "../api/wallet.js";
+import { getUserId, setUserInfo } from "./userStore.js";
+import {
+  connectApplication,
+  parseAccessOrigin,
+  parseHeader,
+  setHttpHeaders,
+  isInApp,
+} from "./appBridge.js";
+import { appConnectionManager, isAppConnected } from "./appConnectionManager.js";
 
 /**
  * APP连接检查器
  */
 class AppConnectionChecker {
   constructor() {
-    this.isConnecting = false
+    this.isConnecting = false;
   }
 
   /**
@@ -22,88 +28,91 @@ class AppConnectionChecker {
    * @returns {Promise<boolean>} 连接是否成功
    */
   async ensureConnection() {
-    console.debug('🔗 Checking APP connection...')
+    console.debug("🔗 Checking APP connection...");
 
     // 如果不在APP环境中，直接返回成功
+
+    console.log("我是app环境", window.app);
+    console.log("我是app环境", window.webkit);
+    console.log("我是app环境", window.FlutterPageControl);
     if (!isInApp()) {
-      console.debug('🌐 Browser environment, no connection needed')
-      return true
+      console.debug("🌐 Browser environment, no connection needed");
+      return true;
     }
 
     // 如果已经连接且未超时，直接返回成功
     if (isAppConnected()) {
-      console.debug('✅ APP already connected')
-      return true
+      console.debug("✅ APP already connected");
+      return true;
     }
 
     // 如果正在连接中，等待现有连接
     if (appConnectionManager.isConnecting()) {
-      console.debug('⏳ Connection already in progress, waiting...')
+      console.debug("⏳ Connection already in progress, waiting...");
       try {
-        await appConnectionManager.getConnectionPromise()
-        return isAppConnected()
+        await appConnectionManager.getConnectionPromise();
+        return isAppConnected();
       } catch (error) {
-        console.error('❌ Connection wait failed:', error)
-        return false
+        console.error("❌ Connection wait failed:", error);
+        return false;
       }
     }
 
     // 开始新的连接
-    return await this._performConnection()
+    return await this._performConnection();
   }
 
   /**
-  * 执行APP连接
-  * @returns {Promise<boolean>}
-  */
+   * 执行APP连接
+   * @returns {Promise<boolean>}
+   */
   async _performConnection() {
-  try {
-    console.debug('📱 Starting new APP connection...')
-
-    const connectionPromise = new Promise((resolve, reject) => {
-    connectApplication(async (access) => {
     try {
-    const result = parseAccessOrigin(access)
+      console.debug("📱 Starting new APP connection...");
 
-    if (result.success) {
-    // 解析头部信息
-    const headerInfo = parseHeader(result.data)
+      const connectionPromise = new Promise((resolve, reject) => {
+        connectApplication(async (access) => {
+          try {
+            const result = parseAccessOrigin(access);
 
-    // 设置HTTP请求头
-    await setHttpHeaders(headerInfo)
+            if (result.success) {
+              // 解析头部信息
+              const headerInfo = parseHeader(result.data);
 
-    // 更新连接状态
-    appConnectionManager.setConnected(headerInfo)
+              // 设置HTTP请求头
+              await setHttpHeaders(headerInfo);
 
-    console.debug('🎉 APP connection established successfully')
+              // 更新连接状态
+              appConnectionManager.setConnected(headerInfo);
 
-      // APP连接成功后立即获取用户信息
-    await this._fetchUserInfoAfterConnection()
+              console.debug("🎉 APP connection established successfully");
 
-    resolve(true)
-  } else {
-      console.error('❌ Failed to parse access origin:', result.error)
-      appConnectionManager.reset()
-      reject(new Error(result.error))
-  }
-  } catch (error) {
-      console.error('❌ Connection process failed:', error)
-        appConnectionManager.reset()
-        reject(error)
-      }
-    })
-  })
+              // APP连接成功后立即获取用户信息
+              await this._fetchUserInfoAfterConnection();
 
-  // 设置连接状态
-  appConnectionManager.setConnecting(connectionPromise)
+              resolve(true);
+            } else {
+              console.error("❌ Failed to parse access origin:", result.error);
+              appConnectionManager.reset();
+              reject(new Error(result.error));
+            }
+          } catch (error) {
+            console.error("❌ Connection process failed:", error);
+            appConnectionManager.reset();
+            reject(error);
+          }
+        });
+      });
 
-  // 等待连接完成
-  return await connectionPromise
+      // 设置连接状态
+      appConnectionManager.setConnecting(connectionPromise);
 
-  } catch (error) {
-      console.error('❌ APP connection failed:', error)
-      appConnectionManager.reset()
-      return false
+      // 等待连接完成
+      return await connectionPromise;
+    } catch (error) {
+      console.error("❌ APP connection failed:", error);
+      appConnectionManager.reset();
+      return false;
     }
   }
 
@@ -113,21 +122,21 @@ class AppConnectionChecker {
    */
   async _fetchUserInfoAfterConnection() {
     try {
-      console.debug('👤 Fetching user info after connection...')
+      console.debug("👤 Fetching user info after connection...");
 
-      const response = await getMemberProfile()
+      const response = await getMemberProfile();
 
       if (response && response.status && response.body) {
         // 缓存用户信息
-        console.debug('✅ User info cached successfully')
-        setUserInfo(response.body, null)
+        console.debug("✅ User info cached successfully");
+        setUserInfo(response.body, null);
       } else {
-        console.warn('⚠️ Failed to get team entry or invalid response')
+        console.warn("⚠️ Failed to get team entry or invalid response");
       }
     } catch (error) {
       // 这里不抛出错误，因为APP连接已经成功
       // 用户信息获取失败可以在后续的身份检查中处理
-      console.warn('⚠️ Failed to fetch user info after connection:', error)
+      console.warn("⚠️ Failed to fetch user info after connection:", error);
     }
   }
 
@@ -135,7 +144,7 @@ class AppConnectionChecker {
    * 重置连接状态
    */
   reset() {
-    appConnectionManager.reset()
+    appConnectionManager.reset();
   }
 }
 
@@ -144,8 +153,8 @@ class AppConnectionChecker {
  */
 class IdentityChecker {
   constructor() {
-    this.isChecking = false
-    this.checkPromise = null
+    this.isChecking = false;
+    this.checkPromise = null;
   }
 
   /**
@@ -155,26 +164,26 @@ class IdentityChecker {
    */
   async checkUserIdentity(userId) {
     if (!userId) {
-      console.warn('⚠️ No user ID provided')
-      permissionManager.setUserIdentity(null)
-      return USER_ROLES.GUEST
+      console.warn("⚠️ No user ID provided");
+      permissionManager.setUserIdentity(null);
+      return USER_ROLES.GUEST;
     }
 
     // 如果正在检查中，等待现有的检查完成
     if (this.isChecking && this.checkPromise) {
-      console.debug('⏳ Identity check already in progress, waiting...')
-      return await this.checkPromise
+      console.debug("⏳ Identity check already in progress, waiting...");
+      return await this.checkPromise;
     }
 
-    this.isChecking = true
-    this.checkPromise = this._performIdentityCheck(userId)
+    this.isChecking = true;
+    this.checkPromise = this._performIdentityCheck(userId);
 
     try {
-      const primaryRole = await this.checkPromise
-      return primaryRole
+      const primaryRole = await this.checkPromise;
+      return primaryRole;
     } finally {
-      this.isChecking = false
-      this.checkPromise = null
+      this.isChecking = false;
+      this.checkPromise = null;
     }
   }
 
@@ -185,27 +194,27 @@ class IdentityChecker {
    */
   async _performIdentityCheck(userId) {
     try {
-      console.debug('🔍 Checking user identity for:', userId)
+      console.debug("🔍 Checking user identity for:", userId);
 
-      const response = await getUserIdentity(userId)
+      const response = await getUserIdentity(userId);
 
       if (response && response.status && response.body) {
-        const identity = response.body
-        console.debug('✅ Identity fetched:', identity)
+        const identity = response.body;
+        console.debug("✅ Identity fetched:", identity);
 
         // 设置权限信息
-        permissionManager.setUserIdentity(identity)
+        permissionManager.setUserIdentity(identity);
 
-        return permissionManager.getPrimaryRole()
+        return permissionManager.getPrimaryRole();
       } else {
-        console.warn('⚠️ Invalid identity response')
-        permissionManager.setUserIdentity(null)
-        return USER_ROLES.GUEST
+        console.warn("⚠️ Invalid identity response");
+        permissionManager.setUserIdentity(null);
+        return USER_ROLES.GUEST;
       }
     } catch (error) {
-      console.error('❌ Failed to fetch user identity:', error)
-      permissionManager.setUserIdentity(null)
-      return USER_ROLES.GUEST
+      console.error("❌ Failed to fetch user identity:", error);
+      permissionManager.setUserIdentity(null);
+      return USER_ROLES.GUEST;
     }
   }
 
@@ -213,8 +222,8 @@ class IdentityChecker {
    * 重置检查状态
    */
   reset() {
-    this.isChecking = false
-    this.checkPromise = null
+    this.isChecking = false;
+    this.checkPromise = null;
   }
 }
 
@@ -230,36 +239,36 @@ class PageRedirector {
    * @returns {Promise<boolean>} 是否进行了重定向
    */
   async redirectToCorrectPage(router, targetPath, currentPath) {
-    const primaryRole = permissionManager.getPrimaryRole()
+    const primaryRole = permissionManager.getPrimaryRole();
 
     // 检查目标页面权限
-    const hasPermission = permissionManager.hasPagePermission(targetPath)
+    const hasPermission = permissionManager.hasPagePermission(targetPath);
 
-    console.debug('🔄 Redirect check:', {
+    console.debug("🔄 Redirect check:", {
       targetPath,
       currentPath,
       primaryRole,
-      hasPermission
-    })
+      hasPermission,
+    });
 
     if (hasPermission) {
       // 有权限访问目标页面
       if (targetPath !== currentPath) {
-        console.debug('✅ Access granted, navigating to:', targetPath)
-        return false // 不需要重定向，让路由正常进行
+        console.debug("✅ Access granted, navigating to:", targetPath);
+        return false; // 不需要重定向，让路由正常进行
       }
-      return false
+      return false;
     } else {
       // 无权限访问，重定向到默认页面
-      const defaultPage = permissionManager.getDefaultPage()
+      const defaultPage = permissionManager.getDefaultPage();
 
-      console.debug('❌ Access denied, redirecting to:', defaultPage)
+      console.debug("❌ Access denied, redirecting to:", defaultPage);
 
       if (defaultPage !== currentPath) {
-        await router.replace(defaultPage)
-        return true // 已进行重定向
+        await router.replace(defaultPage);
+        return true; // 已进行重定向
       }
-      return false
+      return false;
     }
   }
 
@@ -269,17 +278,17 @@ class PageRedirector {
    * @param {string} attemptedPage - 尝试访问的页面
    */
   async handleUnauthorizedAccess(router, attemptedPage) {
-    const primaryRole = permissionManager.getPrimaryRole()
-    const defaultPage = permissionManager.getDefaultPage()
+    const primaryRole = permissionManager.getPrimaryRole();
+    const defaultPage = permissionManager.getDefaultPage();
 
-    console.warn('🚫 Unauthorized access attempt:', {
+    console.warn("🚫 Unauthorized access attempt:", {
       attemptedPage,
       primaryRole,
-      redirectingTo: defaultPage
-    })
+      redirectingTo: defaultPage,
+    });
 
     // 重定向到用户有权限的默认页面
-    await router.replace(defaultPage)
+    await router.replace(defaultPage);
   }
 }
 
@@ -288,10 +297,10 @@ class PageRedirector {
  */
 class RouteGuard {
   constructor() {
-    this.appConnectionChecker = new AppConnectionChecker()
-    this.identityChecker = new IdentityChecker()
-    this.pageRedirector = new PageRedirector()
-    this.isGuardActive = false
+    this.appConnectionChecker = new AppConnectionChecker();
+    this.identityChecker = new IdentityChecker();
+    this.pageRedirector = new PageRedirector();
+    this.isGuardActive = false;
   }
 
   /**
@@ -300,11 +309,11 @@ class RouteGuard {
    */
   install(router) {
     router.beforeEach(async (to, from, next) => {
-      await this.handleRouteChange(to, from, next)
-    })
+      await this.handleRouteChange(to, from, next);
+    });
 
-    this.isGuardActive = true
-    console.debug('🛡️ Route guard installed')
+    this.isGuardActive = true;
+    console.debug("🛡️ Route guard installed");
   }
 
   /**
@@ -314,69 +323,68 @@ class RouteGuard {
    * @param {Function} next - 路由继续函数
    */
   async handleRouteChange(to, from, next) {
-    console.group('🛡️ Route Guard Check')
-    console.debug('📍 Route change:', from.path, '→', to.path)
+    console.group("🛡️ Route Guard Check");
+    console.debug("📍 Route change:", from.path, "→", to.path);
 
     try {
       // 1. 检查是否为公共页面（无需任何验证）
       if (this.isPublicPage(to.path)) {
-        console.debug('🌐 Public page, allowing access')
-        console.groupEnd()
-        next()
-        return
+        console.debug("🌐 Public page, allowing access");
+        console.groupEnd();
+        next();
+        return;
       }
 
       // 2. 确保APP连接
-      console.debug('🔗 Ensuring APP connection...')
-      const isConnected = await this.appConnectionChecker.ensureConnection()
+      console.debug("🔗 Ensuring APP connection...");
+      const isConnected = await this.appConnectionChecker.ensureConnection();
 
       if (!isConnected) {
-        console.error('❌ APP connection failed, redirecting to error page')
-        console.groupEnd()
-        next(PAGES.NOT_APP)
-        return
+        console.error("❌ APP connection failed, redirecting to error page");
+        console.groupEnd();
+        next(PAGES.NOT_APP);
+        return;
       }
 
       // 3. 检查用户身份是否已加载
       if (!permissionManager.isLoaded()) {
-        console.debug('🔍 Identity not loaded, checking...')
+        console.debug("🔍 Identity not loaded, checking...");
 
-        const userId = getUserId()
+        const userId = getUserId();
         if (!userId) {
-          console.debug('❌ No user ID available, redirecting to apply')
-          console.groupEnd()
-          next(PAGES.APPLY)
-          return
+          console.debug("❌ No user ID available, redirecting to apply");
+          console.groupEnd();
+          next(PAGES.APPLY);
+          return;
         }
 
         // 检查用户身份
-        await this.identityChecker.checkUserIdentity(userId)
+        await this.identityChecker.checkUserIdentity(userId);
       }
 
       // 4. 检查页面访问权限
-      const hasPermission = permissionManager.hasPagePermission(to.path)
+      const hasPermission = permissionManager.hasPagePermission(to.path);
 
       if (hasPermission) {
-        console.debug('✅ Permission granted, allowing access')
-        console.groupEnd()
-        next()
+        console.debug("✅ Permission granted, allowing access");
+        console.groupEnd();
+        next();
       } else {
-        console.debug('❌ Permission denied')
-        const defaultPage = permissionManager.getDefaultPage()
-        console.debug('🔄 Redirecting to default page:', defaultPage)
-        console.groupEnd()
-        next(defaultPage)
+        console.debug("❌ Permission denied");
+        const defaultPage = permissionManager.getDefaultPage();
+        console.debug("🔄 Redirecting to default page:", defaultPage);
+        console.groupEnd();
+        next(defaultPage);
       }
-
     } catch (error) {
-      console.error('❌ Route guard error:', error)
-      console.groupEnd()
+      console.error("❌ Route guard error:", error);
+      console.groupEnd();
 
       // 根据错误类型决定重定向目标
-      if (error.message && error.message.includes('connection')) {
-        next(PAGES.NOT_APP) // 连接相关错误
+      if (error.message && error.message.includes("connection")) {
+        next(PAGES.NOT_APP); // 连接相关错误
       } else {
-        next(PAGES.APPLY) // 其他错误
+        next(PAGES.APPLY); // 其他错误
       }
     }
   }
@@ -388,12 +396,18 @@ class RouteGuard {
    */
   isPublicPage(path) {
     const publicPages = [
-      PAGES.APPLY,          // 申请页面 - 重要：申请页面不需要权限检查
-      PAGES.NOT_APP,        // 错误页面 - APP连接失败时的页面
-      '/404',               // 404页面
-      '/error'              // 通用错误页面
-    ]
-    return publicPages.includes(path)
+      PAGES.APPLY, // 申请页面 - 重要：申请页面不需要权限检查
+      PAGES.NOT_APP, // 错误页面 - APP连接失败时的页面
+      "/404", // 404页面
+      "/error", // 通用错误页面
+
+      // "/admin-center", //管理员中心（临时配置）
+      "/item-distribution", //赠送页面（临时配置）
+      "/recharge", //支付前页面（临时配置）
+      "/recharge-standard", //标准支付页面（临时配置）
+      "/recharge-freight-agent", //金币代理支付页面（临时配置）
+    ];
+    return publicPages.includes(path);
   }
 
   /**
@@ -403,26 +417,26 @@ class RouteGuard {
    */
   async checkAndRedirect(router, userId) {
     try {
-      console.debug('🔄 Manual identity check and redirect')
+      console.debug("🔄 Manual identity check and redirect");
 
       // 检查身份
-      const primaryRole = await this.identityChecker.checkUserIdentity(userId)
+      const primaryRole = await this.identityChecker.checkUserIdentity(userId);
 
       // 获取当前页面
-      const currentPath = router.currentRoute.value.path
+      const currentPath = router.currentRoute.value.path;
 
       // 检查当前页面权限
-      const hasPermission = permissionManager.hasPagePermission(currentPath)
+      const hasPermission = permissionManager.hasPagePermission(currentPath);
 
       if (!hasPermission) {
         // 重定向到默认页面
-        await this.pageRedirector.redirectToCorrectPage(router, currentPath, currentPath)
+        await this.pageRedirector.redirectToCorrectPage(router, currentPath, currentPath);
       }
 
-      return primaryRole
+      return primaryRole;
     } catch (error) {
-      console.error('❌ Manual check and redirect failed:', error)
-      throw error
+      console.error("❌ Manual check and redirect failed:", error);
+      throw error;
     }
   }
 
@@ -430,17 +444,17 @@ class RouteGuard {
    * 重置守卫状态
    */
   reset() {
-    this.appConnectionChecker.reset()
-    this.identityChecker.reset()
-    permissionManager.reset()
-    console.debug('🔄 Route guard reset')
+    this.appConnectionChecker.reset();
+    this.identityChecker.reset();
+    permissionManager.reset();
+    console.debug("🔄 Route guard reset");
   }
 }
 
 // 创建全局路由守卫实例
-export const routeGuard = new RouteGuard()
+export const routeGuard = new RouteGuard();
 
 // 便捷方法
-export const installRouteGuard = (router) => routeGuard.install(router)
-export const checkAndRedirect = (router, userId) => routeGuard.checkAndRedirect(router, userId)
-export const resetRouteGuard = () => routeGuard.reset()
+export const installRouteGuard = (router) => routeGuard.install(router);
+export const checkAndRedirect = (router, userId) => routeGuard.checkAndRedirect(router, userId);
+export const resetRouteGuard = () => routeGuard.reset();
diff --git a/src/views/Recharge.vue b/src/views/Recharge.vue
new file mode 100644
index 0000000..461fb12
--- /dev/null
+++ b/src/views/Recharge.vue
@@ -0,0 +1,197 @@
+<!-- Recharge.vue -->
+<template>
+  <div class="fullPage">
+    <!-- 顶部 -->
+    <MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />
+
+    <!-- 内容 -->
+    <div style="padding: 4%">
+      <!-- 输入框 -->
+      <div style="display: flex; gap: 20px; width: 100%">
+        <input
+          style="
+            flex: 1;
+            border: 0;
+            border-radius: 8px;
+            box-shadow: 0 0 2px 2px #00000020;
+            padding: 10px 8px;
+          "
+          type="text"
+          placeholder="Please enter your Likei's lD"
+          v-model="targetUserId"
+        />
+        <button
+          style="
+            border: 0;
+            border-radius: 8px;
+            font-weight: 590;
+            color: white;
+            padding: 10px 8px;
+            background-color: #c670ff;
+            background: linear-gradient(to bottom, rgba(198, 112, 255, 1), rgba(119, 38, 255, 1));
+            box-shadow: 0 0 1px 1px #00000020;
+          "
+          @click="checkUserId"
+        >
+          Recharge
+        </button>
+      </div>
+
+      <!-- 功能介绍 -->
+      <div style="margin-top: 16px">
+        <p style="font-weight: bold">Frequently asked question:</p>
+        <div class="textContent">
+          <p>1.Question:</p>
+          <p>How to check whether the account recharge amounthasbeen received.</p>
+          <p>Ask:</p>
+          <p>
+            Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the
+            recharge record in theupper right corner.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <!-- 遮罩层 -->
+    <div
+      style="
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 9999;
+        background-color: #00000080;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      "
+      v-show="dialogshow"
+      @click="closedPopup"
+    >
+      <div
+        style="
+          width: 80%;
+          padding: 8%;
+          background-color: white;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border-radius: 20px;
+        "
+        @click.stop
+      >
+        <!-- 标题行 -->
+        <div
+          style="
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            font-weight: 800;
+            font-size: 16px;
+            position: relative;
+            padding: 5px 0;
+          "
+        >
+          Help
+          <div
+            style="
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              font-weight: bold;
+            "
+            @click="closedPopup"
+          >
+            x
+          </div>
+        </div>
+
+        <!-- 内容 -->
+        <div>
+          <p style="font-weight: bold">User recharge instructions:</p>
+          <div class="textContent">
+            <p>
+              1、Before recharging,the user needs toprovide the correct Likei lD to complete
+              thisrecharge.
+            </p>
+            <p>
+              2、After the coin seller recharges, therecharged coins will be directly sent to
+              thecoin seller account.
+            </p>
+            <p>
+              3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can confrm
+              the account lD at the topof the page.
+            </p>
+            <p>
+              4、lf the lD account you enter is a coinseller account, the coin will be sent to
+              thecoin seller center of that account.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MobileHeader from "../components/MobileHeader.vue";
+import { onMounted, ref, computed } from "vue";
+import { searchUser } from "@/api/userInfo";
+// import { getUserIdentity } from "@/api/wallet";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const dialogshow = ref(false);
+// 展示弹窗
+const popupHelp = () => {
+  dialogshow.value = true;
+};
+
+// 关闭弹窗
+const closedPopup = () => {
+  dialogshow.value = false;
+};
+
+const targetUserId = ref("");
+
+const checkUserId = async () => {
+  console.log("充值目标用户id：", targetUserId.value);
+
+  try {
+    const targetUserInfo = await searchUser(targetUserId.value);
+    console.log("targetUserInfo:", targetUserInfo);
+    if (targetUserInfo.status && targetUserInfo.body.id) {
+      router.push({ path: "/recharge-freight-agent", query: { targetUserId: targetUserId.value } });
+    }
+  } catch (error) {
+    console.log("error:", error);
+    // 信息提示id有误
+    showWarning("User info not found");
+    throw error;
+  }
+};
+</script>
+
+<style scoped>
+.fullPage {
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/images/secondBg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.textContent > p {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+input::placeholder {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+</style>
diff --git a/src/views/RechargeFreightAgent.vue b/src/views/RechargeFreightAgent.vue
new file mode 100644
index 0000000..f1cbc70
--- /dev/null
+++ b/src/views/RechargeFreightAgent.vue
@@ -0,0 +1,183 @@
+<template>
+  <div>
+    <!-- 顶部 -->
+    <MobileHeader title="Recharge">
+      <template v-slot:extraFunction>
+        <div
+          style="
+            display: flex;
+            align-items: center;
+            position: relative;
+            color: rgba(187, 146, 255, 1) !important;
+          "
+        >
+          <div style="font-weight: bold">English</div>
+          <div style="margin-left: 5px">></div>
+          <transition name="slide-fade">
+            <div
+              style="
+                position: absolute;
+                right: 0;
+                top: 100%;
+                padding: 10px;
+                display: flex;
+                flex-direction: column;
+                width: max-content;
+                background-color: rgba(255, 255, 255, 0.1);
+                border-radius: 10px;
+                margin-top: 5px;
+                backdrop-filter: blur(8px);
+              "
+              v-show="visibleList"
+              class="extraList"
+            >
+              <div
+                style="padding: 8px; opacity: 0.5"
+                v-for="(item, index) in switchList"
+                :key="index"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </transition>
+        </div>
+      </template>
+    </MobileHeader>
+
+    <div style="padding: 10px">
+      <div>Recharge ID：</div>
+      <!-- 个人信息 -->
+      <div>name:{{ userProfile.userNickname }}</div>
+
+      <div style="width: 100%; display: flex; justify-content: space-between">
+        <div>Select a country：</div>
+        <div>图标{{ selectedCountry.countryName }}</div>
+      </div>
+
+      <!-- 支付渠道 -->
+      <div v-if="channels.length != 0">
+        <div v-for="(channelItem, index) in channels" :key="index">
+          <!-- 支付类型 -->
+          <div
+            style="
+              display: flex;
+              border-radius: 8px;
+              box-shadow: 0 0 4px 0 #00000050;
+              align-items: center;
+            "
+          >
+            <img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
+            <div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
+          </div>
+
+          <!-- 支付商品 -->
+          <div
+            style="
+              border-radius: 8px;
+              box-shadow: 0 0 4px 0 #00000050;
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              gap: 12px;
+              padding: 10px;
+              margin-top: 1rem;
+            "
+          >
+            <div
+              style="
+                width: 100%;
+                border-radius: 8px;
+                box-shadow: 0 0 4px 0 #00000050;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+              "
+              v-for="(goods, index) in commodityList"
+              :key="index"
+              @click="goPay(channelItem, goods)"
+            >
+              <img src="../assets/icon/coin.png" alt="" style="width: 30%" />
+              <div>{{ goods.content }}</div>
+              <div>${{ goods.amountUsd }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import MobileHeader from "../components/MobileHeader.vue";
+import { searchUser, searchPayRechargeUser } from "@/api/userInfo";
+// import { getUserIdentity } from "@/api/wallet";
+import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from "@/api/pay";
+
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const applicationId = ref("1963531459019739137");
+const userProfile = ref({}); //用户信息
+const countryList = ref([]); //国家信息
+const regionId = ref(""); //区域id
+const selectedCountry = ref("");
+
+const commodityList = ref([]); //商品列表
+const channels = ref([]); //支付渠道
+
+const selectedCommodity = ref({}); //选中的商品
+
+const goPay = async (item, commodity) => {
+  selectedCommodity.value = commodity;
+  let payData = {
+    applicationId: applicationId.value,
+    payCountryId: applicationId.value,
+    goodsId: commodity.id,
+    userId: userProfile.id,
+    channelCode: item.channel.channelCode,
+  };
+
+  const payRes = await payPlaceAnOrderRecharge(data);
+  const body = payRes.body;
+  if (!body) {
+    console.log("Payment not available, please contact administrator!!!");
+    return;
+  }
+  if (body.factoryCode === "AIRWALLEX") {
+  }
+};
+
+onMounted(async () => {
+  const PayAplication = await getPayAplication(applicationId.value);
+  console.log("PayAplication:", PayAplication);
+  if (PayAplication.body && PayAplication.body.appCode) {
+    let params = {
+      sysOrigin: PayAplication.body.appCode,
+      account: route.query.targetUserId,
+    };
+    const userInfo = await searchPayRechargeUser(params);
+    console.log("userInfo:", userInfo);
+
+    if (userInfo.body && userInfo.body.regionId && userInfo.body.countryList.length != 0) {
+      userProfile.value = { ...userInfo.body.userProfile, type: "GOLD" };
+
+      countryList.value = userInfo.body.countryList;
+      selectedCountry.value = userInfo.body.countryList[0];
+      regionId.value = userInfo.body.regionId;
+
+      let appCommodityCardParams = {
+        applicationId: applicationId.value,
+        payCountryId: userInfo.body.countryList[0].id,
+        regionId: userInfo.body.regionId,
+      };
+      const appCommodityCard = await getAppCommodityCard(appCommodityCardParams);
+      console.log("appCommodityCard:", appCommodityCard);
+      commodityList.value = appCommodityCard.body.commodity;
+      channels.value = appCommodityCard.body.channels;
+    }
+  }
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/RechargeStandard.vue b/src/views/RechargeStandard.vue
new file mode 100644
index 0000000..810cbeb
--- /dev/null
+++ b/src/views/RechargeStandard.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="fullPage">
+    <!-- 上区域 -->
+    <div
+      style="
+        width: 100vw;
+        height: 40vh;
+        background-image: url(/src/assets/images/rechargeBg.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        display: flex;
+        flex-direction: column;
+      "
+    >
+      <!-- 顶部 -->
+      <MobileHeader title="Recharge">
+        <template v-slot:extraFunction>
+          <div style="display: flex; align-items: center; position: relative">
+            <img src="../assets/icon/listBt.png" style="width: 1.2rem" alt="" @click="listBt" />
+            <transition name="slide-fade">
+              <div
+                style="
+                  position: absolute;
+                  right: 0;
+                  top: 100%;
+                  padding: 10px;
+                  display: flex;
+                  flex-direction: column;
+                  width: max-content;
+                  background-color: rgba(255, 255, 255, 0.1);
+                  border-radius: 10px;
+                  margin-top: 5px;
+                  backdrop-filter: blur(8px);
+                "
+                v-show="visibleList"
+                class="extraList"
+              >
+                <div
+                  style="padding: 8px; opacity: 0.5"
+                  v-for="(item, index) in switchList"
+                  :key="index"
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </transition>
+          </div>
+        </template>
+      </MobileHeader>
+
+      <!-- 余额展示 -->
+      <div style="flex: 1; display: flex; justify-content: center; align-items: center">
+        <img src="/src/assets/icon/coin.png" alt="" style="width: 32px" />
+        <div style="margin-left: 10px; font-weight: 500">999999</div>
+      </div>
+    </div>
+
+    <!-- 圆角修饰 -->
+    <div
+      style="
+        background-color: white;
+        margin-top: -10px;
+        height: 11px;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+      "
+    ></div>
+
+    <!-- 主要展示 -->
+    <div style="padding: 10px; display: flex; flex-direction: column; align-items: center">
+      <!-- 商品展示 -->
+      <div style="width: 100%; display: flex; flex-direction: column; gap: 20px">
+        <div
+          v-for="(goods, index) in coinGoodsList"
+          :key="index"
+          style="
+            width: 100%;
+            padding: 10px;
+            border-radius: 10px;
+            box-shadow: 0 0 3px 0.5px #00000050;
+            display: flex;
+            justify-content: space-between;
+            box-sizing: border-box;
+          "
+          @click="selectGoods(index)"
+          :class="[selectedIndex == index ? 'selectedGoods' : 'notSelectedGoods']"
+        >
+          <!-- 数量 -->
+          <div style="display: flex; align-items: center">
+            <img :src="getImageUrl(goods.cover)" alt="" style="width: 32px; margin-right: 8px" />
+            <div style="font-weight: 500">{{ goods.amount }}</div>
+          </div>
+          <!-- 价格 -->
+          <div style="font-weight: 500; line-height: 32px">${{ goods.price }}</div>
+        </div>
+      </div>
+
+      <!-- 充值按钮 -->
+      <button
+        style="
+          width: 70%;
+          margin: 32px 0;
+          padding: 10px;
+          border-radius: 32px;
+          border: 0;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+        "
+        :class="[selectedIndex != -1 ? 'selectedBt' : 'notSelectedBt']"
+      >
+        Recharge
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import MobileHeader from "../components/MobileHeader.vue";
+
+const switchList = ref(["Gold List", "Recharge List"]);
+const visibleList = ref(false);
+const listBt = () => {
+  visibleList.value = !visibleList.value;
+};
+
+const coinGoodsList = ref([
+  {
+    cover: "/src/assets/icon/coin.png",
+    amount: 10000,
+    price: 0.99,
+  },
+  {
+    cover: "/src/assets/icon/coinMore.png",
+    amount: 50000,
+    price: 4.99,
+  },
+]);
+
+const getImageUrl = (imgUrl) => {
+  return new URL(imgUrl, import.meta.url).href;
+};
+
+const selectedIndex = ref(-1); //选中商品下标
+const selectedGoods = ref({}); //选中商品
+
+const selectGoods = (index) => {
+  if (selectedIndex.value != index) {
+    selectedIndex.value = index;
+    selectedGoods.value = coinGoodsList.value[index];
+
+    console.log("选中下标:", selectedIndex.value);
+    console.log("选中商品:", coinGoodsList.value[index]);
+  } else {
+    selectedIndex.value = -1;
+    selectedGoods.value = {};
+  }
+};
+</script>
+
+<style scoped>
+.fullPage {
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+/* 未选中状态 */
+.notSelectedGoods {
+  border: 1px solid transparent;
+}
+
+/* 选中状态 */
+.selectedGoods {
+  background-color: rgba(187, 146, 255, 1);
+  /* border: 1px solid rgba(119, 38, 255, 1); */
+  border: 1px solid rgba(119, 38, 255, 1);
+}
+
+/* 未选中状态 */
+.notSelectedBt {
+  background-color: white;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+/* 选中状态 */
+.selectedBt {
+  background: linear-gradient(to bottom, rgba(198, 112, 255, 0.7), rgba(119, 38, 255, 0.7));
+  color: white;
+}
+
+.extraList > div:not(:last-child) {
+  border-bottom: 0.1px solid black;
+}
+</style>