From fec929bf06916db9d24599a19e4d6955c02e13f0 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Thu, 11 Sep 2025 21:21:56 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=AD=E5=BF=83=E8=B4=A6=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/personal-Center/index.vue               | 12 +++++-
 pages/personal-Center/index/account-bind.vue  | 26 +++++++++++++
 .../personal-Center/index/account-logout.vue  | 18 +++++++++
 .../index/account-management.vue              | 18 +++++++++
 .../index/account-security-v2.vue             | 37 +++++++++++++++++++
 .../index/account-security.vue                | 10 ++---
 .../index/personal-profile.vue                |  8 ++--
 7 files changed, 119 insertions(+), 10 deletions(-)
 create mode 100644 pages/personal-Center/index/account-bind.vue
 create mode 100644 pages/personal-Center/index/account-logout.vue
 create mode 100644 pages/personal-Center/index/account-management.vue
 create mode 100644 pages/personal-Center/index/account-security-v2.vue

diff --git a/pages/personal-Center/index.vue b/pages/personal-Center/index.vue
index 50ea311..7a98e2d 100644
--- a/pages/personal-Center/index.vue
+++ b/pages/personal-Center/index.vue
@@ -15,7 +15,7 @@
         </div>
       </nuxt-link>
 
-      <nuxt-link to="/personal-Center/personal-profile" class="flex items-center justify-between py-[14px]">
+      <!-- <nuxt-link to="/personal-Center/personal-profile" class="flex items-center justify-between py-[14px]">
         <div class="flex items-center pl-[20px]">
           <img v-if="!route.path.startsWith('/personal-Center/personal-profile')" src="~/assets/images/user_zl.png" alt="" srcset="" class="h-[16px]" />
           <img v-else src="~/assets/images/个人资料 (1).png" alt="" srcset="" class="h-[16px]" />
@@ -34,6 +34,16 @@
         <div class="pr-[20px]">
           <el-icon><ArrowRight /></el-icon>
         </div>
+      </nuxt-link> -->
+      <nuxt-link to="/personal-Center/account-management" class="flex items-center justify-between py-[14px]">
+        <div class="flex items-center pl-[20px]">
+          <img v-if="!route.path.startsWith('/personal-Center/account-management')" src="~/assets/images/account.png" alt="" srcset="" class="h-[20px]" />
+          <img v-else src="~/assets/images/账户安全.png" alt="" srcset="" class="h-[20px]" />
+          <span class="ml-[14px]">账户管理</span>
+        </div>
+        <div class="pr-[20px]">
+          <el-icon><ArrowRight /></el-icon>
+        </div>
       </nuxt-link>
       <nuxt-link to="/personal-Center/resource-center" class="flex items-center justify-between py-[14px]">
         <div class="flex items-center pl-[20px]">
diff --git a/pages/personal-Center/index/account-bind.vue b/pages/personal-Center/index/account-bind.vue
new file mode 100644
index 0000000..b091c09
--- /dev/null
+++ b/pages/personal-Center/index/account-bind.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
+    <div class="flex flex-col justify-center text-[14px] text-[#333333] font-normal">
+      <div class="mt-[6px] flex items-center">
+        <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
+        <div class="ml-[19px] w-50px">手机号</div>
+        <div class="ml-[100px] flex items-center"><div class="w-[90px]">手机号码：</div><div class="w-[180px]">xxx</div></div>
+        <div class="btn">绑定</div>
+      </div>
+      <div class="mt-[30px] flex items-center">
+        <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
+        <div class="ml-[19px] w-50px">QQ</div>
+        <div class="ml-[100px] flex items-center"><div class="w-[90px]">QQ昵称：</div><div class="w-[180px]">xxx</div></div>
+        <div class="btn">绑定</div>
+      </div>
+      <div class="mt-[30px] flex items-center">
+        <img src="~/assets/images/weixin-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
+        <div class="ml-[19px] w-50px">微信</div>
+        <div class="ml-[95px] flex items-center"><div class="w-[90px]">微信昵称：</div><div class="w-[180px]">xxx</div></div>
+        <div class="btn">绑定</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/pages/personal-Center/index/account-logout.vue b/pages/personal-Center/index/account-logout.vue
new file mode 100644
index 0000000..db6a6ea
--- /dev/null
+++ b/pages/personal-Center/index/account-logout.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
+    <el-button type="danger" @click="handleClick">注销账号</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const handleClick = () => {
+    console.log('注销账号')
+    ElMessageBox.confirm('确定注销账号吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }).then(() => {
+      console.log('注销账号')
+    })
+  }
+</script>
diff --git a/pages/personal-Center/index/account-management.vue b/pages/personal-Center/index/account-management.vue
new file mode 100644
index 0000000..fab939c
--- /dev/null
+++ b/pages/personal-Center/index/account-management.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
+    <el-tabs v-model="activeName" class="demo-tabs">
+      <el-tab-pane label="个人资料" name="个人资料">
+        <PersonalProfile />
+      </el-tab-pane>
+      <el-tab-pane label="账户安全" name="账户安全">
+       <AccountSecurityV2 />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AccountSecurityV2 from './account-security-v2.vue'
+  import PersonalProfile from './personal-profile.vue'
+  const activeName = ref('个人资料')
+</script>
diff --git a/pages/personal-Center/index/account-security-v2.vue b/pages/personal-Center/index/account-security-v2.vue
new file mode 100644
index 0000000..1223846
--- /dev/null
+++ b/pages/personal-Center/index/account-security-v2.vue
@@ -0,0 +1,37 @@
+<template>
+  <KlTabBar v-model="type" :data="tabBar" />
+  <div v-if="type === '修改密码'">
+    <AccountSecurity />
+  </div>
+  <div v-else-if="type === '账号绑定'">
+    <AccountBind />
+  </div>
+  <div v-else-if="type === '账号注销'">
+    <AccountLogout />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import KlTabBar from '~/components/kl-tab-bar/v2/index.vue'
+  import AccountSecurity from './account-security.vue'
+  import AccountBind from './account-bind.vue'
+  import AccountLogout from './account-logout.vue'
+
+  const tabBar = ref([
+    {
+      label: '修改密码',
+      value: '修改密码',
+    },
+    {
+      label: '账号绑定',
+      value: '账号绑定',
+    },
+    {
+      label: '账号注销',
+      value: '账号注销',
+    },
+  ])
+  const type = ref('修改密码')
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/pages/personal-Center/index/account-security.vue b/pages/personal-Center/index/account-security.vue
index 39c53ae..e963504 100644
--- a/pages/personal-Center/index/account-security.vue
+++ b/pages/personal-Center/index/account-security.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
-    <el-tabs v-model="activeName" class="demo-tabs">
-      <el-tab-pane label="修改密码" name="修改密码">
+  <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
+    <!-- <el-tabs v-model="activeName" class="demo-tabs"> -->
+      <!-- <el-tab-pane label="修改密码" name="修改密码"> -->
         <el-form ref="formRef" :model="form" label-width="120px" class="profile-form" autocomplete="off">
           <el-form-item
             label="手机号"
@@ -46,9 +46,9 @@
             <el-button type="primary" class="h-37px w-121px line-height-37px" @click="handleSave">保存</el-button>
           </el-form-item>
         </el-form>
-      </el-tab-pane>
+      <!-- </el-tab-pane> -->
       <!-- <el-tab-pane label="登录设备管理" name="登录设备管理"> </el-tab-pane> -->
-    </el-tabs>
+    <!-- </el-tabs> -->
   </div>
 </template>
 
diff --git a/pages/personal-Center/index/personal-profile.vue b/pages/personal-Center/index/personal-profile.vue
index e5cdb41..a9720e9 100644
--- a/pages/personal-Center/index/personal-profile.vue
+++ b/pages/personal-Center/index/personal-profile.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="box-border h-[782px] w-[913px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] px-[30px] py-[21px]">
-    <div class="flex items-center justify-between border-b-[1px] border-b-[#eeeeee] border-b-solid pb-[18px]">
+  <div class="box-border h-[682px] w-[913px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] px-[30px] py-[21px]">
+    <!-- <div class="flex items-center justify-between border-b-[1px] border-b-[#eeeeee] border-b-solid pb-[18px]">
       <div class="text-[16px] text-[#333333] font-normal">个人资料</div>
       <div class="flex items-center">
-        <!-- <img src="~/assets/images/fans.png" alt="" srcset="" /> -->
+        <img src="~/assets/images/fans.png" alt="" srcset="" />
         <span class="ml-[8px] text-[14px] text-[#333333] font-normal"></span>
       </div>
-    </div>
+    </div> -->
     <div class="user-profile-container">
       <div class="avatar-section">
         <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarChange">