chore(管理员赠送礼物页): 补充翻译，替换头部组件

src/locales/ar.json

@@ -401,5 +401,17 @@
   "this_period_recharge": "إعادة الشحن لهذه الفترة:",
   "recharge_agency_list": "قائمة وكيل إعادة الشحن:",
 
-  "invite_recharge_agent": "دعوة المستخدم ليصبح وكيل إعادة الشحن"
+  "invite_recharge_agent": "دعوة المستخدم ليصبح وكيل إعادة الشحن",
+
+  "item_distribution": "توزيع العناصر",
+  "validity": "الصلاحية",
+  "day": "يوم",
+  "enter_user_id_placeholder": "أدخل معرف المستخدم",
+  "send": "إرسال",
+  "gift_delivery_successful": "تم تسليم الهدية بنجاح",
+  "frames": "الإطارات",
+  "vehicles": "المركبات",
+  "chat_box": "صندوق الدردشة",
+  "theme": "الموضوع",
+  "vip": "VIP"
 }

src/locales/en.json

@@ -401,5 +401,17 @@
   "this_period_recharge": "This period's recharge:",
   "recharge_agency_list": "Recharge Agency List:",
 
-  "invite_recharge_agent": "Invite User To Become Recharge Agency"
+  "invite_recharge_agent": "Invite User To Become Recharge Agency",
+
+  "item_distribution": "Item Distribution",
+  "validity": "Validity",
+  "day": "day",
+  "enter_user_id_placeholder": "Enter user ID",
+  "send": "Send",
+  "gift_delivery_successful": "Gift delivery successful",
+  "frames": "Frames",
+  "vehicles": "Vehicles",
+  "chat_box": "Chat Box",
+  "theme": "Theme",
+  "vip": "VIP"
 }

src/locales/zh.json

@@ -401,5 +401,17 @@
   "this_period_recharge": "本期充值：",
   "recharge_agency_list": "充值代理列表：",
 
-  "invite_recharge_agent": "邀请用户成为充值代理"
+  "invite_recharge_agent": "邀请用户成为充值代理",
+
+  "item_distribution": "道具分发",
+  "validity": "有效期",
+  "day": "天",
+  "enter_user_id_placeholder": "请输入用户ID",
+  "send": "发送",
+  "gift_delivery_successful": "礼物发送成功",
+  "frames": "头像框",
+  "vehicles": "坐骑",
+  "chat_box": "聊天框",
+  "theme": "主题",
+  "vip": "VIP"
 }

src/views/AdminCenter/ItemDistribution.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="fullPage">
     <div class="bg">
-      <MobileHeader title="Item Distribution" />
+      <!-- 顶部导航 -->
+      <GeneralHeader
+        :showLanguageList="true"
+        :title="t('item_distribution')"
+        :backImg="imgUrl"
+        color="black"
+        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      />
+
       <!-- 标签 -->
       <div
         style="
           display: flex;
           justify-content: space-around;
-          border-bottom: 1px solid #cccccc;
+
           background-color: transparent;
           position: relative;
         "
@@ -15,13 +23,13 @@
         <div
           v-for="(item, index) in tabList"
           :key="index"
-          style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
+          style="font-size: 1.3em; padding: 10px 0; flex: 1; text-align: center"
           class="tab-item"
           :class="activeIndex == index ? 'tabName-active' : 'tabName'"
           ref="tabItems"
           @click="setActiveTab(index)"
         >
-          {{ item.name }}
+          {{ t(item.name) }}
         </div>
         <!-- 下划线元素 -->
         <div
@@ -51,7 +59,7 @@
               align-items: center;
             "
           >
-            <img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
+            <img :src="product.cover" alt="" style="width: 60%; margin: 10px 0" />
             <button
               style="
                 background-color: #bb92ff;
@@ -62,7 +70,7 @@
                 padding: 5px 10px;
               "
             >
-              Send
+              {{ t('send') }}
             </button>
           </div>
         </div>
@@ -84,42 +92,55 @@
           @click.stop
         >
           <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
-          <div style="font-weight: 600; font-size: 16px; margin: 10px 0">
+          <div style="font-weight: 600; margin: 10px 0">
-            <span style="color: #00000080; margin-right: 10px">Validity:</span>
+            <span style="color: #00000080; margin-right: 10px">{{ t('validity') }}:</span>
-            <span style="font-weight: 700; color: #000">{{ validityPeriod }}day</span>
+            <span style="font-weight: 700; color: #000">{{ validityPeriod }}{{ t('day') }}</span>
           </div>
-          <div>
+          <div
+            style="
+              width: 90%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              gap: 4px;
+            "
+          >
             <input
               type="text"
-              placeholder="Enter user ID"
+              :placeholder="t('enter_user_id_placeholder')"
               style="
-                height: 36px;
+                flex: 1;
-                width: 171px;
+                min-width: 0;
+                align-self: stretch;
+
                 border-radius: 8px;
                 border: 0;
+                outline: none;
                 background-color: #f1f1f1b2;
                 padding: 8px;
                 margin-right: 4px;
-                font-size: 14px;
+                font-size: 1em;
                 font-weight: 590;
               "
               v-model="targetUserId"
             />
             <button
               style="
-                height: 36px;
+                width: auto;
-                width: 72px;
+                min-width: 0;
+                align-self: stretch;
+
                 border-radius: 8px;
                 border: 0;
                 padding: 8px;
                 color: white;
-                font-size: 14px;
+                font-size: 1em;
                 font-weight: 590;
               "
               :style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
               @click="sendGoods"
             >
-              Confirm
+              {{ t('confirm') }}
             </button>
           </div>
         </div>
@@ -131,34 +152,39 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue'
 import { showWarning, showSuccess } from '@/utils/toast.js'
+import { useI18n } from 'vue-i18n'
 
 import { getAdminCenterList, giveProps, hasSendGiftsPermission } from '@/api/itemDistribution'
 import { searchUser } from '@/api/userInfo'
 
-import MobileHeader from '@/components/MobileHeader.vue'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
+const { t, locale } = useI18n()
+
+const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
+
 const tabList = ref([
   {
     id: 1,
-    name: 'Frames',
+    name: 'frames',
   },
   {
     id: 2,
-    name: 'Vehicles',
+    name: 'vehicles',
   },
   // {
   //   id: 3,
-  //   name: 'Chat Box',
+  //   name: 'chat_box',
   // },
   // {
   //   id: 4,
-  //   name: 'Theme',
+  //   name: 'theme',
   // },
 ])
 
 const activeIndex = ref(0)
-const currentTab = ref('Frames') //选中名字
+const currentTab = ref('frames') //选中名字
 const tabItems = ref([]) // 存储标签DOM引用
 
 const confirmClick = ref(true)
@@ -218,7 +244,7 @@ const sendGoods = async () => {
         const res = await giveProps(data)
         if (res.errorCode == 0 && res.status) {
           closedPopup()
-          showSuccess('Gift delivery successful')
+          showSuccess(t('gift_delivery_successful'))
         } else {
           confirmClick.value = true
         }
@@ -238,11 +264,11 @@ const sendGoods = async () => {
 // 选中的标签
 const getPropsType = () => {
   const typeMap = {
-    Frames: 'AVATAR_FRAME',
+    frames: 'AVATAR_FRAME',
-    Vehicles: 'RIDE',
+    vehicles: 'RIDE',
-    'Chat Box': 'CHAT_BUBBLE',
+    chat_box: 'CHAT_BUBBLE',
-    Theme: 'THEME',
+    theme: 'THEME',
-    VIP: 'NOBLE_VIP',
+    vip: 'NOBLE_VIP',
   }
   return typeMap[currentTab.value]
 }
@@ -300,7 +326,7 @@ onMounted(() => {
   if (getHasSendVIPPermission('NOBLE_VIP')) {
     tabList.value.push({
       id: 3,
-      name: 'VIP',
+      name: 'vip',
     })
   }
 
@@ -339,4 +365,28 @@ onMounted(() => {
   color: black;
   font-weight: 500;
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
 </style>