feat:个人信息界面改动

src/views/userInfo/usercard/index.vue

@@ -1,76 +1,60 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/store/modules/auth';
-import {clientUnAuth,clientAuth, clientInfo} from '@/service/ue/client';
 import { useRouter } from 'vue-router';
-import { ref, computed } from 'vue';
-import { UserOutlined } from '@ant-design/icons-vue';
+import { computed } from 'vue';
+import { UserOutlined, LockOutlined, SafetyCertificateOutlined, MobileOutlined, RightOutlined} from '@ant-design/icons-vue';
+import { useRouterPush } from '@/hooks/common/router';
+import {useI18n} from "vue-i18n";
+
+const  {t}  = useI18n();
+
+// 添加用户信息的类型定义
+interface UserInfo {
+  avatar?: string;
+  nickName?: string;
+  userName?: string;
+  [key: string]: any;
+}
 
 const router = useRouter();
 const authStore = useAuthStore();
-const user = computed(() => authStore.userInfo?.user || null);
+const { toLogin } = useRouterPush();
+// 添加类型断言
+const user = computed<UserInfo | null>(() => authStore.userInfo?.user || null);
 
 const menuItems = [
   {
-    icon: 'i-carbon:user-profile',
-    title: '个人信息',
-    path: '/user/profile'
+    icon: UserOutlined,
+    title: t('page.usercard.changeInfo'),
+    path: 'profile'
   },
   {
-    icon: 'i-carbon:password',
-    title: '修改密码',
-    path: '/user/change-password'
+    icon: LockOutlined,
+    title: t('page.usercard.resetpwd'),
+    path: 'resetpwd'
   },
   {
-    icon: 'i-carbon:security',
-    title: 'KYC认证',
+    icon: SafetyCertificateOutlined,
+    title: t('page.usercard.KYC'),
     path: '/user/kyc'
   },
   {
-    icon: 'i-carbon:devices',
-    title: '设备管理',
-    path: '/user/devices'
-  },
-  {
-    icon: 'i-carbon:devices',
-    title: '终端上网',
-    path: 'auth'
-  },
-  {
-    icon: 'i-carbon:devices',
-    title: '终端下线',
-    path: 'unauth'
-  },
-  {
-    icon: 'i-carbon:devices',
-    title: '终端信息',
-    path: 'info'
+    icon: MobileOutlined,
+    title: t('page.usercard.deviceconsole'),
+    path: 'device'
   }
 ];
 
-const infoC = ref({})
 const handleMenuClick = (path: string) => {
-  if(path==="auth"){
-    clientAuth().then((res)=>{
-      console.log(res)
-      infoC.value = res.data
-    })
-    return
+  if (path === '_reset_pwd') {
+    toLogin('reset-pwd');
+    return;
   }
-  if(path==="unauth"){
-    clientUnAuth().then((res)=>{
-      console.log(res)
-      infoC.value = res.data
-    })
-    return
+  if (path.startsWith('/')) {
+    router.push(path);
+  } else {
+    router.push(`/userInfo/${path}`);
   }
-  if(path==="info"){
-    clientInfo().then((res)=>{
-      console.log(res)
-      infoC.value = res.data
-    })
-    return
-  }
-  router.push(path);
 };
 </script>
 
@@ -106,20 +90,19 @@ const handleMenuClick = (path: string) => {
         >
           <div class="menu-content">
             <div class="icon-wrapper">
-              <div :class="item.icon"></div>
+              <component :is="item.icon" />
             </div>
             <span>{{ item.title }}</span>
           </div>
-          <div class="i-carbon:chevron-right"></div>
+          <RightOutlined />
         </div>
       </div>
     </div>
-    {{infoC || '无信息'}}
   </div>
 </template>
 
 <style scoped>
-/* 移动优先的响应式设计 */
+/* 移优先的响应式设计 */
 .user-center {
   width: 100%;
   min-height: 100vh;
@@ -215,11 +198,7 @@ const handleMenuClick = (path: string) => {
   justify-content: center;
   width: 24px;
   height: 24px;
-}
-
-[class^="i-"] {
-  width: 20px;
-  height: 20px;
+  color: #666;
 }
 
 /* 平板设备断点 */