feat(新页面): 个人信息页

src/router/index.js

@@ -76,6 +76,12 @@ const router = createRouter({
       component: () => import('../views/HostSettingView.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/agency-setting',
+      name: 'agency-setting',
+      component: () => import('../views/Agency/AgencySettingView.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/search-payee',
       name: 'search-payee',

src/utils/permissionManager.js

@@ -25,6 +25,7 @@ export const PAGES = {
   EXCHANGE: '/exchange-gold-coins',
   PERSONAL_SALARY: '/platform-policy',
   HOST_SETTING: '/host-setting',
+  AGENCY_SETTING: '/agency-setting',
   NOT_APP: '/not_app',
   LOADING: '/loading',
   ADMIN_CENTER: '/admin-center',
@@ -51,6 +52,7 @@ export const ROLE_PERMISSIONS = {
     PAGES.EXCHANGE, // 兑换功能
     PAGES.MESSAGE, // 消息功能
     PAGES.PERSONAL_SALARY, // 个人薪资查看
+    PAGES.AGENCY_SETTING, // 主播设置
     PAGES.RECHARGE_STANDARD, //普通转账功能
     '/team-member',
     '/information-details',

src/views/Agency/AgencySettingView.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="host-setting gradient-background-circles">
+    <MobileHeader title="Agency Setting" />
+
+    <div style="padding: 16px; position: relative; z-index: 2">
+      <!-- My Agent 部分 -->
+      <div style="margin-bottom: 20px">
+        <div style="display: flex; align-items: center; margin-bottom: 12px">
+          <div style="font-size: 1.4em; font-weight: 600">My Agent</div>
+          <img src="/src/assets/icon/agency.png" alt="" height="25px" style="display: block" />
+        </div>
+
+        <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+            display: flex;
+            justify-content: space-between;
+          "
+        >
+          <!-- 用户信息 -->
+          <div style="display: flex; align-items: center">
+            <img
+              :src="avatarUrl || ''"
+              alt=""
+              width="50px"
+              style="aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
+              @error="defaultAvatarUrl"
+            />
+            <div class="agent-details" style="flex: 1">
+              <div style="margin-bottom: 4px; font-weight: 600">
+                {{ userInfo.name }}
+              </div>
+              <div style="font-size: 0.9em; color: rgba(0, 0, 0, 0.4)">ID: {{ userInfo.id }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import MobileHeader from '../../components/MobileHeader.vue'
+import { showError } from '@/utils/toast.js'
+
+const router = useRouter()
+
+// 用户信息
+const userInfo = reactive({
+  name: 'User1',
+  id: '1234567890',
+})
+
+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 leaveAgent = () => {
+  if (confirm('Are you sure you want to leave this agent?')) {
+    showError('Leave agent request submitted')
+    // 这里可以添加实际的离开代理商逻辑
+  }
+}
+</script>
+
+<style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+.host-setting {
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.leave-btn {
+  background-color: #fff;
+  border: 1px solid #e6e6e6;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.9em;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.leave-btn:active {
+  background-color: #00000010;
+}
+
+@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;
+  }
+}
+</style>

src/views/AgencyCenterView.vue

@@ -53,6 +53,7 @@
           </div>
           <button
             style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
+            @click="gotoEdit"
           >
             <img src="../assets/icon/edit.png" alt="" width="70%" />
           </button>
@@ -447,6 +448,10 @@ const goToNotification = () => {
   router.push('/message')
 }
 
+const gotoEdit = () => {
+  router.push('/agency-setting')
+}
+
 const goToInviteMembers = () => {
   router.push('/invite-members')
 }