From 25f4a2c2908b9fb249fa3b776f150f436880214f Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 11 Dec 2024 15:32:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E6=8F=90=E7=A4=BA=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/locales/langs/en-us.ts            |   3 +
 src/locales/langs/zh-cn.ts            |   5 +-
 src/views/user-center/index.vue       | 252 +++++++++++++++++++++++++-
 src/views/userInfo/profile/index.vue  |   8 +-
 src/views/userInfo/resetpwd/index.vue | 116 +++++++++---
 5 files changed, 354 insertions(+), 30 deletions(-)

diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 1c07702..5f19baf 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -9,6 +9,9 @@ const viewEn: any = {
   "view.billing_Internetdetails":"Internet details",
   "view.set-meal": "Package",
   "view.userInfo":"User Information",
+  "view.userInfo_profile":"Change Information",
+  "view.userInfo_resetpwd":"Reset Password",
+  "view.userInfo_device":"Device management",
 };
 
 const local: any = {
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 41d0c24..e83028f 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -8,7 +8,10 @@ const viewZh: any = {
   "view.billing_Rechargehistory":"充值记录",
   "view.billing_Internetdetails":"上网详单",
   "view.set-meal": "套餐",
-  "view.userInfo":"个人信息"
+  "view.userInfo":"个人信息",
+  "view.userInfo_profile":"修改信息",
+  "view.userInfo_resetpwd":"修改密码",
+  "view.userInfo_device":"设备管理",
 };
 
 const local:any = {
diff --git a/src/views/user-center/index.vue b/src/views/user-center/index.vue
index 6c9affb..98c660a 100644
--- a/src/views/user-center/index.vue
+++ b/src/views/user-center/index.vue
@@ -1,11 +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>{{ authStore.userInfo.user }}</div>
+  <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></style>
+<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>
diff --git a/src/views/userInfo/profile/index.vue b/src/views/userInfo/profile/index.vue
index d15e3b6..07fd46a 100644
--- a/src/views/userInfo/profile/index.vue
+++ b/src/views/userInfo/profile/index.vue
@@ -90,9 +90,7 @@ const rules = computed<{ [k: string]: RuleObject | RuleObject[] }>(() => {
       { required: true, message: t('page.login.register.usernameRequired'), trigger: 'change' },
       { validator: validateUsername, trigger: 'blur' }
     ],
-    fullname: [
-      { required: true, message: t('page.login.register.fullNameRequired'), trigger: 'blur' }
-    ],
+    fullname: [],
     email: [
       { required: true, message: t('page.login.register.emailRequired'), trigger: 'change' },
       { validator: validateEmail, trigger: 'blur' }
@@ -209,14 +207,14 @@ const handleBack = () => {
         <a-form-item :label="t('page.login.register.email')" name="email">
           <a-input
             v-model:value="formState.email"
-            :placeholder="t('page.login.register.emailPlaceholder')"
+            :placeholder="t('page.login.common.emailPlaceholder')"
           />
         </a-form-item>
 
         <a-form-item :label="t('page.login.register.phone')" name="phonenumber">
           <a-input
             v-model:value="formState.phonenumber"
-            :placeholder="t('page.login.register.phonePlaceholder')"
+            :placeholder="t('page.login.common.phonePlaceholder')"
           />
         </a-form-item>
 
diff --git a/src/views/userInfo/resetpwd/index.vue b/src/views/userInfo/resetpwd/index.vue
index 984a7a5..6c3b2b9 100644
--- a/src/views/userInfo/resetpwd/index.vue
+++ b/src/views/userInfo/resetpwd/index.vue
@@ -59,59 +59,131 @@ const handleBack = () => {
 
 <template>
   <div class="reset-password-container">
-    <ACard :title="t('page.login.resetPwd.title')" :bordered="false">
+    <a-card :title="t('page.login.resetPwd.title')" :bordered="false">
       <template #extra>
-        <AButton @click="handleBack">
+        <a-button @click="handleBack">
           {{ t('page.login.common.back') }}
-        </AButton>
+        </a-button>
       </template>
-      <AForm
+      <a-form
         ref="formRef"
         :model="formModel"
         :rules="formRules"
-        :label-col="{ span: 6 }"
-        :wrapper-col="{ span: 18 }"
+        :label-col="{
+          xs: { span: 24 },  // 移动端占满宽度
+          sm: { span: 8 },   // 小屏幕占8格
+          md: { span: 6 }    // 中等及以上屏幕占6格
+        }"
+        :wrapper-col="{
+          xs: { span: 24 },  // 移动端占满宽度
+          sm: { span: 16 },  // 小屏幕占16格
+          md: { span: 18 }   // 中等及以上屏幕占18格
+        }"
       >
-        <AFormItem name="password" :label="t('page.login.register.password')">
-          <AInputPassword
+        <a-form-item name="password" :label="t('page.login.register.password')">
+          <a-input-password
             v-model:value="formModel.password"
             :placeholder="t('page.login.common.passwordPlaceholder')"
           />
-        </AFormItem>
-        <AFormItem name="confirmPassword" :label="t('page.login.register.confirmPassword')">
-          <AInputPassword
+        </a-form-item>
+        <a-form-item name="confirmPassword" :label="t('page.login.register.confirmPassword')">
+          <a-input-password
             v-model:value="formModel.confirmPassword"
             :placeholder="t('page.login.common.confirmPasswordPlaceholder')"
           />
-        </AFormItem>
-        <AFormItem :wrapper-col="{ span: 24 }">
-          <AButton type="primary" block @click="handleSubmit">
+        </a-form-item>
+        <a-form-item
+          :wrapper-col="{
+            xs: { span: 24, offset: 0 },
+            sm: { span: 16, offset: 8 },
+            md: { span: 18, offset: 6 }
+          }"
+        >
+          <a-button type="primary" block @click="handleSubmit">
             {{ t('common.confirm') }}
-          </AButton>
-        </AFormItem>
-      </AForm>
-    </ACard>
+          </a-button>
+        </a-form-item>
+      </a-form>
+    </a-card>
   </div>
 </template>
 
 <style scoped>
 .reset-password-container {
-  max-width: 480px;
-  margin: 0 auto;
   padding: 24px;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+:deep(.ant-card) {
+  max-width: 800px;
+  margin: 0 auto;
+  border-radius: 8px;
 }
 
 :deep(.ant-card-head-title) {
-  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
 }
 
-@media (max-width: 640px) {
+:deep(.ant-form-item-label) {
+  white-space: normal;  /* 允许标签文字换行 */
+  height: auto;
+  line-height: 1.5;
+  padding-bottom: 8px;
+}
+
+/* PC端断点 */
+@media (min-width: 1200px) {
+  :deep(.ant-card) {
+    max-width: 800px;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  :deep(.ant-card) {
+    max-width: 700px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  :deep(.ant-card) {
+    max-width: 600px;
+  }
+}
+
+/* 平板和移动端断点 */
+@media (max-width: 767px) {
   .reset-password-container {
     padding: 16px;
   }
 
+  :deep(.ant-card) {
+    max-width: 100%;
+  }
+
+  :deep(.ant-form) {
+    :deep(.ant-form-item-label) {
+      flex: 0 0 100%;
+      max-width: 100%;
+      text-align: left;
+      padding: 0 0 8px;
+    }
+
+    :deep(.ant-form-item-control) {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+
   :deep(.ant-form-item) {
     margin-bottom: 16px;
   }
 }
+
+@media (max-width: 480px) {
+  .reset-password-container {
+    padding: 12px;
+  }
+}
 </style>