feat(管理员中心): 静态页面样式完成

src/utils/appBridge.js

@@ -115,6 +115,20 @@ export function gotoRoom(roomId) {
   }
 }
 
+/**
+ * 前往app页面
+ */
+export function gotoAppPage(pageName) {
+  if (!roomId) return
+  try {
+    console.log(`pageName:${pageName}`)
+    // 直接使用Flutter通道
+    window.FlutterPageControl.postMessage(`pageName`)
+  } catch (error) {
+    console.error('前往APP页面失败:', error)
+  }
+}
+
 /**
  * 退出APP
  */

src/views/AdminCenter/index.vue

@@ -1,368 +1,384 @@
 <template>
   <div class="fullPage">
-    <div class="bg">
-      <MobileHeader title="Admin Center" :isHomePage="true">
-        <template v-slot:extraFunction>
-          <div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
-            Send
-          </div>
-        </template>
-      </MobileHeader>
-      <!-- 标签 -->
+    <div class="bg gradient-background-circles">
+      <!-- 顶部导航 -->
+      <GeneralHeader
+        :isHomePage="true"
+        :showLanguageList="true"
+        title="Admin Center"
+        :backImg="imgUrl"
+        color="black"
+        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      />
+
+      <!-- 主要内容 -->
       <div
         style="
+          padding: 16px;
+
           display: flex;
-          justify-content: space-around;
-          border-bottom: 1px solid #cccccc;
-          background-color: transparent;
-          position: relative;
+          flex-direction: column;
+          gap: 12px;
         "
       >
+        <!-- 用户信息卡片 -->
         <div
-          v-for="(item, index) in tabList"
-          :key="index"
-          style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
-          class="tab-item"
-          :class="activeIndex == index ? 'tabName-active' : 'tabName'"
-          ref="tabItems"
-          @click="setActiveTab(index)"
-        >
-          {{ item.name }}
-        </div>
-        <!-- 下划线元素 -->
-        <div
-          style="width: 15px; height: 3px; background-color: #bb92ff"
-          :style="underlineStyle"
-        ></div>
-      </div>
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
-      <!-- BD列表 -->
-      <div style="padding: 10px" v-show="activeIndex == 0">
-        <div
-          v-for="(info, BDIndex) in BDList"
-          :key="BDIndex"
-          style="
-            box-shadow: 0 0 4px 0 #00000066;
-            padding: 10px;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            transition: all 0.3s ease-out;
-          "
-          @click="showUserInfo(BDIndex)"
-        >
-          <!-- 基本信息 -->
-          <div style="display: flex; justify-content: space-between">
-            <div style="display: flex; align-items: center">
-              <img
-                :src="info.userProfile.userAvatar"
-                style="width: 36px; height: 36px; border-radius: 50%"
-              />
-              <div style="margin-left: 8px">
-                <div style="font-weight: 700">{{ info.userProfile.userNickname }}</div>
-                <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
-                  ID:{{ info.userProfile.account }}
-                </div>
-              </div>
-            </div>
-            <div style="display: flex; align-items: center">
-              <img
-                src="../../assets/icon/arrow.png"
-                alt=""
-                style="width: 24px; transition: transform 0.5s"
-                :class="{ rotated: BDIndex == selectedBDIndex }"
-              />
-            </div>
-          </div>
-          <!-- 展示信息 -->
-          <transition name="info-fade">
-            <div style="display: flex" v-show="BDIndex == selectedBDIndex">
-              <div style="flex: 1">
-                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
-                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                  {{ info.allAnchorCount || 0 }}
-                </div>
-              </div>
-              <div style="flex: 1">
-                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
-                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                  {{ info.agentCount || 0 }}
-                </div>
-              </div>
-            </div>
-          </transition>
-        </div>
-        <!-- 触发加载功能 -->
-        <div ref="BDloadmore" v-if="showBDLoading"></div>
-      </div>
+            padding: 16px;
+            border: 1px solid #e5e7eb;
 
-      <!-- agency列表 -->
-      <div style="padding: 10px" v-show="activeIndex == 1">
-        <div
-          style="
-            box-shadow: 0 0 4px 0 #00000066;
-            padding: 10px;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            transition: all 0.3s ease-out;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
           "
         >
-          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
-            Total recharge for the month:
-          </div>
-          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-            ${{ totalRechargeDetail[0]?.totalAmount || 0 }}
-          </div>
-          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
-          <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-            ${{ totalRechargeDetail[1]?.totalAmount || 0 }}
-          </div>
-        </div>
-        <div
-          v-for="(agency, aIndex) in agencyList"
-          :key="aIndex"
-          style="
-            box-shadow: 0 0 4px 0 #00000066;
-            padding: 10px;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            transition: all 0.3s ease-out;
-          "
-          @click="showAgencyInfo(aIndex)"
-        >
-          <!-- 基本信息 -->
-          <div style="display: flex; justify-content: space-between">
-            <div style="display: flex; align-items: center">
-              <img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
-              <div style="margin-left: 8px">
-                <div style="font-weight: 700">{{ agency.name }}</div>
-                <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
-                  ID:{{ agency.account }}
-                </div>
-              </div>
-            </div>
-            <div style="display: flex; align-items: center">
+          <!-- 标题 -->
+          <div style="font-weight: 600">My Leader:</div>
+
+          <!-- 用户信息 -->
+          <div style="display: flex; align-items: center; gap: 4px">
+            <!-- 头像 -->
+            <div
+              style="
+                width: 15%;
+                align-self: stretch;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+            >
               <img
-                src="../../assets/icon/arrow.png"
-                alt=""
+                :src="''"
                 style="
-                  width: 24px;
-                  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+                  display: block;
+                  width: 100%;
+                  aspect-ratio: 1/1;
+                  object-fit: cover;
+                  border-radius: 50%;
                 "
-                :class="{ rotated: aIndex == selectedAgencyIndex }"
+                @error="defaultAvatarUrl"
               />
             </div>
-          </div>
 
-          <!-- 展示信息 -->
-          <transition name="info-fade">
-            <div style="display: flex" v-show="aIndex == selectedAgencyIndex">
-              <div style="flex: 1">
-                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
-                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                  ${{ formatPrice(agency.thisMonth) || 0 }}
-                </div>
+            <!-- 基本信息 -->
+            <div
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                gap: 4px;
+              "
+            >
+              <div
+                style="
+                  font-weight: 700;
+                  width: 100%;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                "
+              >
+                User1
               </div>
-              <div style="flex: 1">
-                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
-                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
-                  ${{ formatPrice(agency.lastMonth) || 0 }}
-                </div>
+              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                ID:1234567890
               </div>
             </div>
-          </transition>
+          </div>
+        </div>
+
+        <!-- 角色模块 -->
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+            padding: 16px;
+            border: 1px solid #e5e7eb;
+
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+          "
+        >
+          <!-- 标题 -->
+          <div style="font-weight: 600; color: #1f2937">My Role:</div>
+
+          <!-- 角色身份 -->
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div style="font-size: 1.1em; font-weight: 600">Admin</div>
+            <img
+              src="../../assets/icon/detail.png"
+              alt=""
+              style="display: block; width: 1.5em"
+              class="flipImg"
+            />
+          </div>
+
+          <!-- 分割线 -->
+          <div style="border-bottom: 1px solid #e6e6e6"></div>
+
+          <!-- 已完成任务 -->
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div style="font-weight: 600">Task completion status:</div>
+            <div style="font-weight: 600">（0）</div>
+          </div>
+
+          <div style="display: flex; flex-direction: column; gap: 10px">
+            <div style="font-weight: 500">2025.11.1-2025.11.16</div>
+            <!-- 任务列表与完成状态 -->
+            <div
+              v-for="value in 5"
+              style="display: flex; justify-content: space-between; align-items: center"
+            >
+              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                Mic usage time:
+              </div>
+              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                （0/20h）
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 本期团队收入 -->
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+            padding: 16px;
+            border: 1px solid #e5e7eb;
+
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+          "
+        >
+          <!-- 总收入 -->
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div style="font-weight: 600">Team earnings this period: $3000</div>
+            <img
+              src="../../assets/icon/arrowBlack.png"
+              alt=""
+              style="display: block; width: 1.5em"
+              class="flipImg"
+            />
+          </div>
+
+          <!-- 我的BD Leader团队 -->
+          <div style="display: flex; flex-direction: column; gap: 10px">
+            <div style="display: flex; justify-content: space-between; align-items: center">
+              <div style="font-weight: 600">My BD Leader Teams(3)</div>
+              <div style="align-self: stretch; display: flex; align-items: center; gap: 4px">
+                <img
+                  src="../../assets/icon/addUser.png"
+                  alt=""
+                  style="display: block; width: 1.6em"
+                  class="flipImg"
+                />
+                <img
+                  src="../../assets/icon/list.png"
+                  alt=""
+                  style="display: block; width: 1.6em"
+                  class="flipImg"
+                />
+              </div>
+            </div>
+
+            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+              Total income:$1500
+            </div>
+
+            <!-- 分割线 -->
+            <div style="border-bottom: 1px solid #e6e6e6"></div>
+          </div>
+
+          <!-- 我的BD团队 -->
+          <div style="display: flex; flex-direction: column; gap: 10px">
+            <div style="display: flex; justify-content: space-between; align-items: center">
+              <div style="font-weight: 600">My BD Teams(5)</div>
+              <div style="align-self: stretch; display: flex; align-items: center; gap: 4px">
+                <img
+                  src="../../assets/icon/addUser.png"
+                  alt=""
+                  style="display: block; width: 1.6em"
+                  class="flipImg"
+                />
+                <img
+                  src="../../assets/icon/list.png"
+                  alt=""
+                  style="display: block; width: 1.6em"
+                  class="flipImg"
+                />
+              </div>
+            </div>
+
+            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+              Total income:$1500
+            </div>
+
+            <!-- 分割线 -->
+            <div style="border-bottom: 1px solid #e6e6e6"></div>
+          </div>
+
+          <!-- 我的Agency团队 -->
+          <div style="display: flex; flex-direction: column; gap: 10px">
+            <div style="display: flex; justify-content: space-between; align-items: center">
+              <div style="font-weight: 600">My Agency Teams(2)</div>
+              <div style="align-self: stretch; display: flex; align-items: center; gap: 4px">
+                <img
+                  src="../../assets/icon/addUser.png"
+                  alt=""
+                  style="display: block; width: 1.6em"
+                  class="flipImg"
+                />
+                <img
+                  src="../../assets/icon/list.png"
+                  alt=""
+                  style="display: block; width: 1.6em"
+                  class="flipImg"
+                />
+              </div>
+            </div>
+
+            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+              Total income:$1500
+            </div>
+          </div>
+        </div>
+
+        <!-- 赠送礼物 -->
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+            padding: 16px;
+            border: 1px solid #e5e7eb;
+
+            display: flex;
+            justify-content: space-between;
+            gap: 10px;
+          "
+          @click="send"
+        >
+          <div style="font-weight: 600">Send Welcome Gift</div>
+          <img
+            src="../../assets/icon/arrowBlack.png"
+            alt=""
+            style="display: block; width: 1.5em"
+            class="flipImg"
+          />
+        </div>
+
+        <!-- 前往用户编辑 -->
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+            padding: 16px;
+            border: 1px solid #e5e7eb;
+
+            display: flex;
+            justify-content: space-between;
+            gap: 10px;
+          "
+          @click="gotoAppPage('editingUser')"
+        >
+          <div style="font-weight: 600">User Editing</div>
+          <img
+            src="../../assets/icon/arrowBlack.png"
+            alt=""
+            style="display: block; width: 1.5em"
+            class="flipImg"
+          />
+        </div>
+
+        <!-- 前往房间编辑 -->
+        <div
+          style="
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+            padding: 16px;
+            border: 1px solid #e5e7eb;
+
+            display: flex;
+            justify-content: space-between;
+            gap: 10px;
+          "
+          @click="gotoAppPage('editingRoom')"
+        >
+          <div style="font-weight: 600">Room Editing</div>
+          <img
+            src="../../assets/icon/arrowBlack.png"
+            alt=""
+            style="display: block; width: 1.5em"
+            class="flipImg"
+          />
         </div>
-        <!-- 触发加载功能 -->
-        <div ref="Agloadmore" v-if="showAgLoading"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
-import { getUserId } from '@/utils/userStore.js'
-import { useThrottle } from '@/utils/useDebounce'
+import { useI18n } from 'vue-i18n'
+import { setDocumentDirection } from '@/locales/i18n'
+import { gotoAppPage } from '@/utils/appBridge.js'
 
-import { getBDList, getAgencyList, getAgencyTotalRecharge } from '@/api/userInfo'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 
-import MobileHeader from '@/components/MobileHeader.vue'
+const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
 
+const { t, locale } = useI18n()
 const router = useRouter()
 
-const tabList = ref([
-  {
-    id: 1,
-    name: 'BD',
-  },
-  {
-    id: 2,
-    name: 'Recharge Agency',
-  },
-])
+// 监听语言变化并设置文档方向
+locale.value && setDocumentDirection(locale.value)
 
-const activeIndex = ref(0)
-const tabItems = ref([]) // 存储标签DOM引用
-
-// 选择标签
-const setActiveTab = (index) => {
-  if (activeIndex.value != index) {
-    console.log('切换标签')
-    activeIndex.value = index
-    selectedBDIndex.value = -1
-    selectedAgencyIndex.value = -1
-  }
+const defaultAvatarUrl = (e) => {
+  console.log('头像资源出错')
+  e.target.onerror = null //防止循环
+  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
 }
 
-// 计算下划线样式
-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: 'left 0.3s ease', // 平滑过渡
-  }
-})
-
-const selectedBDIndex = ref(-1) //选中的BD用户下标
-const showUserInfo = (index) => {
-  selectedBDIndex.value = selectedBDIndex.value != index ? index : -1
-} //选中的BD用户
-
-const selectedAgencyIndex = ref(-1) //选中的agency用户下标
-const showAgencyInfo = (index) => {
-  selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1
-} //选中的agency用户
-
 const send = async () => {
   router.push({ path: '/item-distribution' })
 }
-
-// 页面加载时获取申请记录
-usePageInitializationWithConfig('ADMIN_CENTER')
-
-const BDList = ref([]) // BD列表
-const BDCurrent = ref(1) //BD列表第几页
-const showBDLoading = ref(true) //触底加载功能
-
-const totalRechargeDetail = ref([]) //代理消费金额
-const agencyList = ref([]) // 代理列表
-const agencyCurrent = ref(1) //代理列表第几页
-const showAgLoading = ref(true) //触底加载功能
-
-onMounted(async () => {
-  if (tabItems.value.length > 0) {
-    underlineStyle.value // 触发计算属性更新
-  }
-
-  getBDs() // 获取BD列表
-  getAgencise() // 获取代理列表
-  getAgencyMonthsRecharge() //获取代理总支付
-
-  // 开始监听底部元素
-  if (BDloadmore.value) {
-    observer.observe(BDloadmore.value)
-  }
-  // 开始监听底部元素
-  if (Agloadmore.value) {
-    observer.observe(Agloadmore.value)
-  }
-})
-
-// 获取BD列表
-const getBDs = async () => {
-  let data = {
-    userId: getUserId(),
-    cursor: BDCurrent.value,
-    limit: 20,
-  }
-
-  const resBDList = await getBDList(data)
-  console.log('resBDList:', resBDList)
-  if (resBDList.status && resBDList.body) {
-    BDList.value.push(...resBDList.body.records)
-    if (resBDList.body.total <= resBDList.body.current * resBDList.body.size) {
-      showBDLoading.value = false
-    }
-  }
-}
-
-// 获取代理列表
-const getAgencyMonthsRecharge = async () => {
-  const resTotalRecharge = await getAgencyTotalRecharge()
-  console.log('resTotalRecharge:', resTotalRecharge)
-  if (resTotalRecharge.status && resTotalRecharge.body) {
-    totalRechargeDetail.value = resTotalRecharge.body
-  }
-}
-
-// 获取代理列表
-const getAgencise = async () => {
-  let data = {
-    cursor: agencyCurrent.value,
-    limit: 20,
-  }
-  const resagencyList = await getAgencyList(data)
-  console.log('resagencyList:', resagencyList)
-  if (resagencyList.status && resagencyList.body) {
-    agencyList.value.push(...resagencyList.body.records)
-    if (resagencyList.body.total <= resagencyList.body.current * resagencyList.body.size) {
-      showAgLoading.value = false
-    }
-  }
-}
-
-// 获取底部加载div
-const BDloadmore = ref(null)
-const Agloadmore = ref(null)
-
-const debouceGetBDList = useThrottle(getBDs, 1000)
-const debouceGetAgList = useThrottle(getAgencise, 1000)
-
-// IntersectionObserver配置
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach((entry) => {
-    if (entry.intersectionRatio > 0) {
-      console.log('监控')
-
-      // 根据目标元素执行对应操作
-      if (entry.target == BDloadmore.value && BDList.value.length != 0) {
-        BDCurrent.value++
-        debouceGetBDList()
-      }
-      if (entry.target == Agloadmore.value && agencyList.value.length != 0) {
-        agencyCurrent.value++
-        debouceGetAgList()
-      }
-    }
-  })
-})
-
-const formatPrice = (value) => {
-  if (value && value != 0) {
-    return Number(value).toFixed(2)
-  }
-  return 0
-}
 </script>
 
 <style scoped>
 * {
-  color: black;
-  font-family: 'SF Pro';
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
 }
 
 .fullPage {
-  background-color: #ffffff;
-  min-height: 100vh;
   position: relative;
+
+  max-height: 100vh;
+  overflow-y: auto;
+  background-color: #ffffff;
+}
+
+.fullPage::-webkit-scrollbar {
+  display: none;
 }
 
 .bg {
@@ -373,30 +389,21 @@ const formatPrice = (value) => {
   background-repeat: no-repeat;
 }
 
-.tabName {
-  color: #00000066;
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
 }
 
-.tabName-active {
-  color: black;
-  font-weight: 500;
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
 }
 
-.info-fade-enter-from,
-.info-fade-leave-to {
-  transform: translateY(-10px);
-  opacity: 0;
-}
-
-.info-fade-enter-active {
-  transition: all 0.5s ease-out;
-}
-
-.info-fade-leave-active {
-  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.rotated {
-  transform: rotate(90deg);
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
 }
 </style>