fix:usercard界面移动端报错修复

src/views/userInfo/usercard/index.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
+// 1. 简化导入方式，与 billservice 保持一致
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouter } from 'vue-router';
 import { computed } from 'vue';
-import { UserOutlined, LockOutlined, SafetyCertificateOutlined, MobileOutlined, RightOutlined, LinkOutlined, ApiOutlined, CalendarOutlined} from '@ant-design/icons-vue';
+import { useI18n } from "vue-i18n";
-import { useRouterPush } from '@/hooks/common/router';
+import {
-import {useI18n} from "vue-i18n";
+  UserOutlined,
+  LockOutlined,
+  SafetyCertificateOutlined,
+  MobileOutlined,
+  RightOutlined,
+  LinkOutlined,
+  ApiOutlined,
+  CalendarOutlined
+} from '@ant-design/icons-vue';
 
-const  {t}  = useI18n();
+const { t } = useI18n();
+const router = useRouter();
+const authStore = useAuthStore();
 
-// 添加用户信息的类型定义
+// 2. 保持类型定义
 interface UserInfo {
   avatar?: string;
   nickName?: string;
@@ -16,22 +27,19 @@ interface UserInfo {
   [key: string]: any;
 }
 
-const router = useRouter();
-const authStore = useAuthStore();
-const { toLogin } = useRouterPush();
-// 添加类型断言
 const user = computed<UserInfo | null>(() => authStore.userInfo?.user || null);
 
+// 3. 简化 menuItems 结构，与 billservice 一致
 const menuItems = [
   {
     icon: UserOutlined,
     title: t('page.usercard.changeInfo'),
-    path: 'profile'
+    path: '/userInfo/profile'  // 使用完整路径
   },
   {
     icon: LockOutlined,
     title: t('page.usercard.resetpwd'),
-    path: 'resetpwd'
+    path: '/userInfo/resetpwd'
   },
   {
     icon: SafetyCertificateOutlined,
@@ -41,35 +49,28 @@ const menuItems = [
   {
     icon: MobileOutlined,
     title: t('page.usercard.deviceconsole'),
-    path: 'device'
+    path: '/userInfo/device'
   },
   {
     icon: LinkOutlined,
     title: t('page.usercard.access'),
-    path: 'access'
+    path: '/userInfo/access'
   },
   {
     icon: ApiOutlined,
     title: t('page.usercard.records'),
-    path: 'records'
+    path: '/userInfo/records'
   },
   {
     icon: CalendarOutlined,
     title: t('page.usercard.cdrlrecords'),
-    path: 'cdrlrecords'
+    path: '/userInfo/cdrlrecords'
   },
 ];
 
+// 4. 简化路由跳转方法
 const handleMenuClick = (path: string) => {
-  if (path === '_reset_pwd') {
+  router.push(path);
-    toLogin('reset-pwd');
-    return;
-  }
-  if (path.startsWith('/')) {
-    router.push(path);
-  } else {
-    router.push(`/userInfo/${path}`);
-  }
 };
 </script>
 
@@ -95,7 +96,7 @@ const handleMenuClick = (path: string) => {
         </div>
       </div>
 
-      <!-- 菜单列表 -->
+      <!-- 采用 billservice 的菜单列表结构 -->
       <div class="menu-list">
         <div
           v-for="item in menuItems"
@@ -117,7 +118,7 @@ const handleMenuClick = (path: string) => {
 </template>
 
 <style scoped>
-/* 移优先的响应式设计 */
+/* 采用 billservice 的基础样式结构 */
 .user-center {
   width: 100%;
   min-height: 100vh;
@@ -131,11 +132,52 @@ const handleMenuClick = (path: string) => {
   margin: 0 auto;
 }
 
+.menu-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 16px;
+  padding: 16px;
+  background: transparent;  /* 移除背景色 */
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.menu-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.menu-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background-color: #f0f5ff;
+  color: #1890ff;
+}
+
+/* 用户卡片样式 */
 .user-card {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  text-align: center;
   padding: 20px;
   background: #fff;
   border-radius: 12px;
@@ -146,7 +188,7 @@ const handleMenuClick = (path: string) => {
 .avatar {
   width: 80px;
   height: 80px;
-  margin-bottom: 16px;
+  margin-right: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -178,115 +220,26 @@ const handleMenuClick = (path: string) => {
   font-size: 0.875rem;
 }
 
-.menu-list {
+/* 响应式布局调整 */
-  background: #fff;
+@media screen and (max-width: 768px) {
-  border-radius: 12px;
+  .menu-list {
-  overflow: hidden;
+    grid-template-columns: 1fr;
-}
+    gap: 12px;
-
+    padding: 12px;
-.menu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.menu-item:hover {
-  background-color: #f5f5f5;
-}
-
-.menu-item:not(:last-child) {
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.menu-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: #666;
-}
-
-/* 平板设备断点 */
-@media screen and (min-width: 768px) {
-  .user-center {
-    padding: 24px;
-  }
-
-  .user-card {
-    flex-direction: row;
-    text-align: left;
-    padding: 24px;
-  }
-
-  .avatar {
-    margin-right: 24px;
-    margin-bottom: 0;
   }
 
   .menu-item {
-    padding: 16px 24px;
+    padding: 16px;
-  }
-
-  .user-info h2 {
-    font-size: 1.5rem;
-  }
-
-  .user-info p {
-    font-size: 1rem;
-  }
-}
-
-/* 桌面设备断点 */
-@media screen and (min-width: 1024px) {
-  .user-center {
-    padding: 24px;
   }
 
   .user-card {
-    padding: 28px;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .avatar {
+    margin-right: 0;
     margin-bottom: 16px;
   }
-
-  .avatar {
-    width: 96px;
-    height: 96px;
-  }
-
-  .default-avatar {
-    font-size: 48px;
-  }
-
-  .menu-item {
-    padding: 18px 28px;
-  }
-}
-
-/* 大屏设备断点 */
-@media screen and (min-width: 1440px) {
-  .user-center {
-    padding: 28px;
-  }
-
-  .user-center-content {
-    max-width: 900px;
-  }
-
-  .user-card {
-    padding: 32px;
-  }
-
-  .menu-item {
-    padding: 20px 32px;
-  }
 }
 </style>