feat:个人信息界面

src/views/userInfo/index.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/store/modules/auth';
+import { useRouter } from 'vue-router';
+import { computed } from 'vue';
+import { UserOutlined } from '@ant-design/icons-vue';
+
+const router = useRouter();
+const authStore = useAuthStore();
+const user = computed(() => authStore.userInfo?.user || null);
+
+const menuItems = [
+  {
+    icon: 'i-carbon:user-profile',
+    title: '个人信息',
+    path: '/user/profile'
+  },
+  {
+    icon: 'i-carbon:password',
+    title: '修改密码',
+    path: '/user/change-password'
+  },
+  {
+    icon: 'i-carbon:security',
+    title: 'KYC认证',
+    path: '/user/kyc'
+  },
+  {
+    icon: 'i-carbon:devices',
+    title: '设备管理',
+    path: '/user/devices'
+  }
+];
+
+const handleMenuClick = (path: string) => {
+  router.push(path);
+};
+</script>
+
+<template>
+  <div class="user-center">
+    <div class="user-center-content">
+      <!-- 顶部用户信息卡片 -->
+      <div class="user-card">
+        <div class="avatar">
+          <template v-if="user?.avatar">
+            <img
+              :src="user.avatar"
+              :alt="user.nickName"
+            >
+          </template>
+          <template v-else>
+            <UserOutlined class="default-avatar" />
+          </template>
+        </div>
+        <div class="user-info">
+          <h2>{{ user?.nickName || '用户' }}</h2>
+          <p>{{ user?.userName || '-' }}</p>
+        </div>
+      </div>
+
+      <!-- 菜单列表 -->
+      <div class="menu-list">
+        <div
+          v-for="item in menuItems"
+          :key="item.title"
+          class="menu-item"
+          @click="handleMenuClick(item.path)"
+        >
+          <div class="menu-content">
+            <div class="icon-wrapper">
+              <div :class="item.icon"></div>
+            </div>
+            <span>{{ item.title }}</span>
+          </div>
+          <div class="i-carbon:chevron-right"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 移动优先的响应式设计 */
+.user-center {
+  width: 100%;
+  min-height: 100vh;
+  padding: 16px;
+  background-color: #f5f5f7;
+}
+
+.user-center-content {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.user-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+  background: #fff;
+  border-radius: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.avatar {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.default-avatar {
+  font-size: 40px;
+  color: #999;
+}
+
+.user-info h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.user-info p {
+  margin: 4px 0 0;
+  color: #666;
+  font-size: 0.875rem;
+}
+
+.menu-list {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.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;
+}
+
+[class^="i-"] {
+  width: 20px;
+  height: 20px;
+}
+
+/* 平板设备断点 */
+@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;
+  }
+
+  .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;
+    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>