diff --git a/package.json b/package.json
index 7dd4b9a..631871f 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "lint": "eslint . --fix"
   },
   "dependencies": {
+    "airwallex-payment-elements": "^1.131.0",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },
diff --git a/src/api/itemDistribution.js b/src/api/itemDistribution.js
new file mode 100644
index 0000000..40d06e9
--- /dev/null
+++ b/src/api/itemDistribution.js
@@ -0,0 +1,25 @@
+import { get, post } from "../utils/http.js";
+
+export const getAdminCenterList = async (params) => {
+  try {
+    const response = await get(
+      `/sys/manager/props?propsType=${params.propsType}&currencyType=${params.currencyType}`
+    );
+    return response;
+  } catch (error) {
+    console.error("Failed to fetch admin center list:", error);
+    console.error("error:" + error.response.errorMsg);
+    throw error;
+  }
+};
+
+export const giveProps = async (data) => {
+  try {
+    const response = await post("/sys/manager/send", data);
+    return response;
+  } catch (error) {
+    console.error("Failed to fetch give props:", error);
+    onsole.error("error:" + error.response.errorMsg);
+    throw error;
+  }
+};
diff --git a/src/api/userInfo.js b/src/api/userInfo.js
new file mode 100644
index 0000000..e1138ac
--- /dev/null
+++ b/src/api/userInfo.js
@@ -0,0 +1,26 @@
+import { get, post } from "../utils/http.js";
+
+export const searchUser = async (userId) => {
+  try {
+    const response = await get(`/user/user-profile/search?account=${userId}`);
+    return response;
+  } catch (error) {
+    console.error("Failed to fetch search user:", error);
+    console.error("error:" + error.response.errorMsg);
+    throw error;
+  }
+};
+
+// 用户支付充值用户搜索
+export const searchPayRechargeUser = async (params) => {
+  try {
+    const response = await get(
+      `/order/web/pay/user-profile?sysOrigin=${params.sysOrigin}&account=${params.account}&type=GOLD`
+    );
+    return response;
+  } catch (error) {
+    console.error("Failed to fetch search pay recharge user:", error);
+    console.error("error:" + error.response.errorMsg);
+    throw error;
+  }
+};
diff --git a/src/assets/icon/coin.png b/src/assets/icon/coin.png
new file mode 100644
index 0000000..ea8481e
Binary files /dev/null and b/src/assets/icon/coin.png differ
diff --git a/src/assets/icon/coinMore.png b/src/assets/icon/coinMore.png
new file mode 100644
index 0000000..86afa13
Binary files /dev/null and b/src/assets/icon/coinMore.png differ
diff --git a/src/assets/icon/listBt.png b/src/assets/icon/listBt.png
new file mode 100644
index 0000000..638cfe6
Binary files /dev/null and b/src/assets/icon/listBt.png differ
diff --git a/src/assets/images/rechargeBg.png b/src/assets/images/rechargeBg.png
new file mode 100644
index 0000000..2e4da56
Binary files /dev/null and b/src/assets/images/rechargeBg.png differ
diff --git a/src/assets/images/secondBg.png b/src/assets/images/secondBg.png
new file mode 100644
index 0000000..276728c
Binary files /dev/null and b/src/assets/images/secondBg.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 059d3d6..86adb46 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,162 +1,192 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { installRouteGuard } from '../utils/routeGuard.js'
+import { createRouter, createWebHistory } from "vue-router";
+import { installRouteGuard } from "../utils/routeGuard.js";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      redirect: '/loading' // 默认跳转到加载页面
+      path: "/",
+      redirect: "/loading", // 默认跳转到加载页面
     },
     {
-      path: '/loading',
-      name: 'loading',
-      component: () => import('../views/LoadingView.vue'),
-      meta: { requiresAuth: false, isPublic: true }
+      path: "/loading",
+      name: "loading",
+      component: () => import("../views/LoadingView.vue"),
+      meta: { requiresAuth: false, isPublic: true },
     },
     {
-      path: '/host-center',
-      name: 'host-center',
-      component: () => import('../views/HostCenterView.vue'),
-      meta: { requiresAuth: true }
+      path: "/host-center",
+      name: "host-center",
+      component: () => import("../views/HostCenterView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/agency-center',
-      name: 'agency-center',
-      component: () => import('../views/AgencyCenterView.vue'),
-      meta: { requiresAuth: true }
+      path: "/agency-center",
+      name: "agency-center",
+      component: () => import("../views/AgencyCenterView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/bd-center',
-      name: 'bd-center',
-      component: () => import('../views/BDCenterView.vue'),
-      meta: { requiresAuth: true }
+      path: "/bd-center",
+      name: "bd-center",
+      component: () => import("../views/BDCenterView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/coin-seller',
-      name: 'coin-seller',
-      component: () => import('../views/CoinSellerView.vue'),
-      meta: { requiresAuth: true }
+      path: "/coin-seller",
+      name: "coin-seller",
+      component: () => import("../views/CoinSellerView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/apply',
-      name: 'apply',
-      component: () => import('../views/ApplyView.vue'),
-      meta: { requiresAuth: false }
+      path: "/apply",
+      name: "apply",
+      component: () => import("../views/ApplyView.vue"),
+      meta: { requiresAuth: false },
     },
     {
-      path: '/message',
-      name: 'message',
-      component: () => import('../views/MessageView.vue'),
-      meta: { requiresAuth: true }
+      path: "/message",
+      name: "message",
+      component: () => import("../views/MessageView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/transfer',
-      name: 'transfer',
-      component: () => import('../views/TransferView.vue'),
-      meta: { requiresAuth: true }
+      path: "/transfer",
+      name: "transfer",
+      component: () => import("../views/TransferView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/exchange-gold-coins',
-      name: 'exchange-gold-coins',
-      component: () => import('../views/ExchangeGoldCoinsView.vue'),
-      meta: { requiresAuth: true }
+      path: "/exchange-gold-coins",
+      name: "exchange-gold-coins",
+      component: () => import("../views/ExchangeGoldCoinsView.vue"),
+      meta: { requiresAuth: true },
     },
     // 辅助页面
     {
-      path: '/about',
-      name: 'about',
-      component: () => import('../views/AboutView.vue'),
+      path: "/about",
+      name: "about",
+      component: () => import("../views/AboutView.vue"),
     },
     {
-      path: '/host-setting',
-      name: 'host-setting',
-      component: () => import('../views/HostSettingView.vue'),
-      meta: { requiresAuth: true }
+      path: "/host-setting",
+      name: "host-setting",
+      component: () => import("../views/HostSettingView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/search-payee',
-      name: 'search-payee',
-      component: () => import('../views/SearchPayeeView.vue'),
-      meta: { requiresAuth: true }
+      path: "/search-payee",
+      name: "search-payee",
+      component: () => import("../views/SearchPayeeView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/information-details',
-      name: 'information-details',
-      component: () => import('../views/InformationDetailsView.vue'),
-      meta: { requiresAuth: true }
+      path: "/information-details",
+      name: "information-details",
+      component: () => import("../views/InformationDetailsView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/invite-members',
-      name: 'invite-members',
-      component: () => import('../views/InviteMembersView.vue'),
-      meta: { requiresAuth: true }
+      path: "/invite-members",
+      name: "invite-members",
+      component: () => import("../views/InviteMembersView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/team-bill',
-      name: 'team-bill',
-      component: () => import('../views/TeamBillView.vue'),
-      meta: { requiresAuth: true }
+      path: "/team-bill",
+      name: "team-bill",
+      component: () => import("../views/TeamBillView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/team-member',
-      name: 'team-member',
-      component: () => import('../views/TeamMemberView.vue'),
-      meta: { requiresAuth: true }
+      path: "/team-member",
+      name: "team-member",
+      component: () => import("../views/TeamMemberView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/platform-policy',
-      name: 'platform-policy',
-      component: () => import('../views/PlatformPolicyView.vue'),
-      meta: { requiresAuth: true }
+      path: "/platform-policy",
+      name: "platform-policy",
+      component: () => import("../views/PlatformPolicyView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/coin-seller-search',
-      name: 'coin-seller-search',
-      component: () => import('../views/CoinSellerSearchView.vue'),
-      meta: { requiresAuth: true }
+      path: "/coin-seller-search",
+      name: "coin-seller-search",
+      component: () => import("../views/CoinSellerSearchView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/seller-records',
-      name: 'seller-records',
-      component: () => import('../views/SellerRecordsView.vue'),
-      meta: { requiresAuth: true }
+      path: "/seller-records",
+      name: "seller-records",
+      component: () => import("../views/SellerRecordsView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/bd-setting',
-      name: 'bd-setting',
-      component: () => import('../views/BDSettingView.vue'),
-      meta: { requiresAuth: true }
+      path: "/bd-setting",
+      name: "bd-setting",
+      component: () => import("../views/BDSettingView.vue"),
+      meta: { requiresAuth: true },
     },
     // 公共页面
     {
-      path: '/not_app',
-      name: 'not-app',
-      component: () => import('../views/NotAppView.vue'),
-      meta: { requiresAuth: false }
+      path: "/not_app",
+      name: "not-app",
+      component: () => import("../views/NotAppView.vue"),
+      meta: { requiresAuth: false },
     },
     // 404 页面
     {
-      path: '/:pathMatch(.*)*',
-      name: 'not-found',
-      redirect: '/apply'
+      path: "/:pathMatch(.*)*",
+      name: "not-found",
+      redirect: "/apply",
     },
     {
-      path: '/history-salary',
-      name: 'history-salary',
-      component: () => import('../views/HistorySalaryView.vue'),
-      meta: { requiresAuth: true }
+      path: "/history-salary",
+      name: "history-salary",
+      component: () => import("../views/HistorySalaryView.vue"),
+      meta: { requiresAuth: true },
     },
     {
-      path: '/platform-salary',
-      name: 'platform-salary',
-      component: () => import('../views/PlatformPolicyView.vue'),
-      meta: { requiresAuth: true }
-    }
+      path: "/platform-salary",
+      name: "platform-salary",
+      component: () => import("../views/PlatformPolicyView.vue"),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/admin-center",
+      name: "admin-center",
+      component: () => import("../views/AdminCenter.vue"),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/item-distribution",
+      name: "item-distribution",
+      component: () => import("../views/ItemDistribution.vue"),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/recharge",
+      name: "recharge",
+      component: () => import("../views/Recharge.vue"),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/recharge-standard",
+      name: "recharge-standard",
+      component: () => import("../views/RechargeStandard.vue"),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/recharge-freight-agent",
+      name: "recharge-freight-agent",
+      component: () => import("../views/RechargeFreightAgent.vue"),
+      meta: { requiresAuth: true },
+    },
   ],
-})
+});
 
 // 安装路由守卫
-installRouteGuard(router)
+installRouteGuard(router);
 
-export default router
+export default router;
diff --git a/src/views/AdminCenter.vue b/src/views/AdminCenter.vue
new file mode 100644
index 0000000..3c7ad95
--- /dev/null
+++ b/src/views/AdminCenter.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="fullPage">
+    <MobileHeader title="Admin Center" />
+    <!-- 标签 -->
+    <div
+      style="
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #cccccc;
+        background-color: transparent;
+        position: relative;
+      "
+    >
+      <div
+        v-for="(item, index) in tabList"
+        :key="index"
+        style="
+          font-weight: 400;
+          font-size: 18px;
+          color: #00000066;
+          padding: 10px 0;
+          flex: 1;
+          text-align: center;
+        "
+        class="tab-item"
+        :class="{ active: activeIndex == index }"
+        ref="tabItems"
+        @click="setActiveTab(index)"
+      >
+        {{ item.name }}
+      </div>
+      <!-- 下划线元素 -->
+      <div
+        style="width: 15px; height: 3px; background-color: #bb92ff"
+        :style="underlineStyle"
+      ></div>
+    </div>
+
+    <!-- 商品列表 -->
+    <div
+      style="
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        padding: 15px;
+      "
+    >
+      <div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
+        <div
+          style="
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          "
+        >
+          <img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
+          <button
+            style="
+              background-color: #bb92ff;
+              color: white;
+              margin-bottom: 10px;
+              border: 0;
+              border-radius: 20px;
+              padding: 5px 10px;
+            "
+          >
+            Send
+          </button>
+        </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="
+          padding: 20px;
+          background-color: white;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border-radius: 20px;
+        "
+        @click.stop
+      >
+        <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
+        <div style="font-weight: 600; font-size: 16px; margin: 10px 0">
+          <span style="color: #00000080; margin-right: 10px">Validity:</span>
+          <span style="font-weight: 700">7day</span>
+        </div>
+        <div>
+          <input
+            type="text"
+            placeholder="Enter user ID"
+            style="
+              height: 36px;
+              width: 171px;
+              border-radius: 8px;
+              border: 0;
+              background-color: #f1f1f1b2;
+              padding: 8px;
+              margin-right: 4px;
+              font-size: 14px;
+              font-weight: 590;
+            "
+            v-model="targetUserId"
+          />
+          <button
+            style="
+              height: 36px;
+              width: 72px;
+              border-radius: 8px;
+              border: 0;
+              padding: 8px;
+              background-color: #bb92ff;
+              color: white;
+              font-size: 14px;
+              font-weight: 590;
+            "
+            @click="sendGoods"
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MobileHeader from "../components/MobileHeader.vue";
+import { onMounted, ref, computed } from "vue";
+import { getAdminCenterList, giveProps } from "@/api/itemDistribution";
+import { searchUser } from "@/api/userInfo";
+import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
+
+const tabList = ref([
+  {
+    id: 1,
+    name: "Frames",
+  },
+  {
+    id: 2,
+    name: "Vehicles",
+  },
+  {
+    id: 3,
+    name: "Chat Box",
+  },
+  {
+    id: 4,
+    name: "Theme",
+  },
+]);
+
+const activeIndex = ref(0);
+const currentTab = ref("Frames"); //选中名字
+const tabItems = ref([]); // 存储标签DOM引用
+
+// 选择标签
+const setActiveTab = (index) => {
+  if (activeIndex.value != index) {
+    console.log("切换标签");
+    productList.value = []; //置空商品列表
+    activeIndex.value = index;
+    currentTab.value = tabList.value[index].name;
+
+    loadProps();
+  }
+};
+
+// 计算下划线样式
+const underlineStyle = computed(() => {
+  console.log("计算属性");
+
+  if (tabItems.value.length === 0) return {}; //没有这个元素
+  const activeTab = tabItems.value[activeIndex.value];
+  console.log("选中元素的左边距", activeTab.offsetLeft);
+
+  return {
+    position: "absolute",
+    left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
+    bottom: "0",
+    transition: "transform 0.3s ease, width 0.3s ease", // 平滑过渡
+  };
+});
+
+const targetUserId = ref("");
+
+const sendGoods = async () => {
+  console.log("赠送用户id：", targetUserId.value);
+  console.log("赠送商品：", selectedGoods.value);
+
+  try {
+    const targetUserInfo = await searchUser(targetUserId.value);
+    console.log("targetUserInfo:", targetUserInfo);
+    if (targetUserInfo.status && targetUserInfo.body) {
+      const data = {
+        propsId: selectedGoods.value.id,
+        acceptUserId: targetUserInfo.body.id,
+      };
+      const res = await giveProps(data);
+      if (res.errorCode == 0 && res.status) {
+        closedPopup();
+      }
+    }
+  } catch (error) {
+    console.log("error:", error);
+    // 信息提示id有误
+    showWarning("User info not found");
+    throw error;
+  }
+};
+
+// 选中的标签
+const getPropsType = () => {
+  const typeMap = {
+    Frames: "AVATAR_FRAME",
+    Vehicles: "RIDE",
+    "Chat Box": "CHAT_BUBBLE",
+    Theme: "THEME",
+  };
+  return typeMap[currentTab.value];
+};
+
+// 获取商品列表
+const loadProps = async () => {
+  try {
+    const params = {
+      propsType: getPropsType(),
+      currencyType: "GOLD",
+    };
+    const response = await getAdminCenterList(params);
+    console.log("response:", response);
+    productList.value = response.body;
+  } catch (error) {
+    throw error;
+  }
+};
+
+onMounted(() => {
+  console.log("onMounted");
+
+  if (tabItems.value.length > 0) {
+    underlineStyle.value; // 触发计算属性更新
+  }
+  loadProps();
+});
+
+// 虚拟商品数据
+const productList = ref([]);
+
+// 选中商品
+const selectedGoods = ref({});
+
+// 获取本地图片
+const getImageUrl = (imgUrl) => {
+  return new URL(imgUrl, import.meta.url).href;
+};
+
+const dialogshow = ref(false);
+// 展示弹窗
+const showSendDialog = (product) => {
+  console.log("product:", product);
+  selectedGoods.value = product;
+  dialogshow.value = true;
+};
+
+// 关闭弹窗
+const closedPopup = () => {
+  selectedGoods.value = {};
+  targetUserId.value = "";
+  dialogshow.value = false;
+};
+</script>
+
+<style scoped>
+/* 添加页面样式 */
+.fullPage {
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/images/secondBg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.tab-item .active {
+  color: #3498db; /* 激活态文字颜色 */
+}
+</style>
diff --git a/src/views/ItemDistribution.vue b/src/views/ItemDistribution.vue
new file mode 100644
index 0000000..3c7ad95
--- /dev/null
+++ b/src/views/ItemDistribution.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="fullPage">
+    <MobileHeader title="Admin Center" />
+    <!-- 标签 -->
+    <div
+      style="
+        display: flex;
+        justify-content: space-around;
+        border-bottom: 1px solid #cccccc;
+        background-color: transparent;
+        position: relative;
+      "
+    >
+      <div
+        v-for="(item, index) in tabList"
+        :key="index"
+        style="
+          font-weight: 400;
+          font-size: 18px;
+          color: #00000066;
+          padding: 10px 0;
+          flex: 1;
+          text-align: center;
+        "
+        class="tab-item"
+        :class="{ active: activeIndex == index }"
+        ref="tabItems"
+        @click="setActiveTab(index)"
+      >
+        {{ item.name }}
+      </div>
+      <!-- 下划线元素 -->
+      <div
+        style="width: 15px; height: 3px; background-color: #bb92ff"
+        :style="underlineStyle"
+      ></div>
+    </div>
+
+    <!-- 商品列表 -->
+    <div
+      style="
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        padding: 15px;
+      "
+    >
+      <div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
+        <div
+          style="
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          "
+        >
+          <img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
+          <button
+            style="
+              background-color: #bb92ff;
+              color: white;
+              margin-bottom: 10px;
+              border: 0;
+              border-radius: 20px;
+              padding: 5px 10px;
+            "
+          >
+            Send
+          </button>
+        </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="
+          padding: 20px;
+          background-color: white;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border-radius: 20px;
+        "
+        @click.stop
+      >
+        <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
+        <div style="font-weight: 600; font-size: 16px; margin: 10px 0">
+          <span style="color: #00000080; margin-right: 10px">Validity:</span>
+          <span style="font-weight: 700">7day</span>
+        </div>
+        <div>
+          <input
+            type="text"
+            placeholder="Enter user ID"
+            style="
+              height: 36px;
+              width: 171px;
+              border-radius: 8px;
+              border: 0;
+              background-color: #f1f1f1b2;
+              padding: 8px;
+              margin-right: 4px;
+              font-size: 14px;
+              font-weight: 590;
+            "
+            v-model="targetUserId"
+          />
+          <button
+            style="
+              height: 36px;
+              width: 72px;
+              border-radius: 8px;
+              border: 0;
+              padding: 8px;
+              background-color: #bb92ff;
+              color: white;
+              font-size: 14px;
+              font-weight: 590;
+            "
+            @click="sendGoods"
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import MobileHeader from "../components/MobileHeader.vue";
+import { onMounted, ref, computed } from "vue";
+import { getAdminCenterList, giveProps } from "@/api/itemDistribution";
+import { searchUser } from "@/api/userInfo";
+import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
+
+const tabList = ref([
+  {
+    id: 1,
+    name: "Frames",
+  },
+  {
+    id: 2,
+    name: "Vehicles",
+  },
+  {
+    id: 3,
+    name: "Chat Box",
+  },
+  {
+    id: 4,
+    name: "Theme",
+  },
+]);
+
+const activeIndex = ref(0);
+const currentTab = ref("Frames"); //选中名字
+const tabItems = ref([]); // 存储标签DOM引用
+
+// 选择标签
+const setActiveTab = (index) => {
+  if (activeIndex.value != index) {
+    console.log("切换标签");
+    productList.value = []; //置空商品列表
+    activeIndex.value = index;
+    currentTab.value = tabList.value[index].name;
+
+    loadProps();
+  }
+};
+
+// 计算下划线样式
+const underlineStyle = computed(() => {
+  console.log("计算属性");
+
+  if (tabItems.value.length === 0) return {}; //没有这个元素
+  const activeTab = tabItems.value[activeIndex.value];
+  console.log("选中元素的左边距", activeTab.offsetLeft);
+
+  return {
+    position: "absolute",
+    left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
+    bottom: "0",
+    transition: "transform 0.3s ease, width 0.3s ease", // 平滑过渡
+  };
+});
+
+const targetUserId = ref("");
+
+const sendGoods = async () => {
+  console.log("赠送用户id：", targetUserId.value);
+  console.log("赠送商品：", selectedGoods.value);
+
+  try {
+    const targetUserInfo = await searchUser(targetUserId.value);
+    console.log("targetUserInfo:", targetUserInfo);
+    if (targetUserInfo.status && targetUserInfo.body) {
+      const data = {
+        propsId: selectedGoods.value.id,
+        acceptUserId: targetUserInfo.body.id,
+      };
+      const res = await giveProps(data);
+      if (res.errorCode == 0 && res.status) {
+        closedPopup();
+      }
+    }
+  } catch (error) {
+    console.log("error:", error);
+    // 信息提示id有误
+    showWarning("User info not found");
+    throw error;
+  }
+};
+
+// 选中的标签
+const getPropsType = () => {
+  const typeMap = {
+    Frames: "AVATAR_FRAME",
+    Vehicles: "RIDE",
+    "Chat Box": "CHAT_BUBBLE",
+    Theme: "THEME",
+  };
+  return typeMap[currentTab.value];
+};
+
+// 获取商品列表
+const loadProps = async () => {
+  try {
+    const params = {
+      propsType: getPropsType(),
+      currencyType: "GOLD",
+    };
+    const response = await getAdminCenterList(params);
+    console.log("response:", response);
+    productList.value = response.body;
+  } catch (error) {
+    throw error;
+  }
+};
+
+onMounted(() => {
+  console.log("onMounted");
+
+  if (tabItems.value.length > 0) {
+    underlineStyle.value; // 触发计算属性更新
+  }
+  loadProps();
+});
+
+// 虚拟商品数据
+const productList = ref([]);
+
+// 选中商品
+const selectedGoods = ref({});
+
+// 获取本地图片
+const getImageUrl = (imgUrl) => {
+  return new URL(imgUrl, import.meta.url).href;
+};
+
+const dialogshow = ref(false);
+// 展示弹窗
+const showSendDialog = (product) => {
+  console.log("product:", product);
+  selectedGoods.value = product;
+  dialogshow.value = true;
+};
+
+// 关闭弹窗
+const closedPopup = () => {
+  selectedGoods.value = {};
+  targetUserId.value = "";
+  dialogshow.value = false;
+};
+</script>
+
+<style scoped>
+/* 添加页面样式 */
+.fullPage {
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../assets/images/secondBg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.tab-item .active {
+  color: #3498db; /* 激活态文字颜色 */
+}
+</style>