diff --git a/web1/src/api/index.js b/web1/src/api/index.js
index d4a130c..a017c23 100644
--- a/web1/src/api/index.js
+++ b/web1/src/api/index.js
@@ -5,6 +5,11 @@ export default {
   getUserInfo: () => request.get('/base/userinfo'),
   getUserMenu: () => request.get('/base/usermenu'),
   getUserApi: () => request.get('/base/userapi'),
+  deleteAccount: (data) => request.delete('/app-user/account', {
+  data: {
+    code: data.code // Body 中携带 code
+  }
+}),
   // 手机号
   registerPhone: (data) => request.post('/app-user/register', data, { noNeedToken: true }),
   loginPhone: (data) => request.post('/app-user/login', data, { noNeedToken: true }),
diff --git a/web1/src/assets/icon/iconLogout.png b/web1/src/assets/icon/iconLogout.png
new file mode 100644
index 0000000..3af7cf4
Binary files /dev/null and b/web1/src/assets/icon/iconLogout.png differ
diff --git a/web1/src/assets/icon/评估完成.png b/web1/src/assets/icon/评估完成.png
new file mode 100644
index 0000000..dca9175
Binary files /dev/null and b/web1/src/assets/icon/评估完成.png differ
diff --git a/web1/src/router/routes/index.js b/web1/src/router/routes/index.js
index 9943186..144a88d 100644
--- a/web1/src/router/routes/index.js
+++ b/web1/src/router/routes/index.js
@@ -52,6 +52,14 @@ export const basicRoutes = [
           title: '抬头管理',
         },
       },
+      {
+        name: 'Logout',
+        path: 'logout',
+        component: () => import('@/views/user-center/components/Logout.vue'),
+        meta: {
+          title: '账号注销',
+        },
+      },
     ],
   },
   {
diff --git a/web1/src/views/pages/index.vue b/web1/src/views/pages/index.vue
index 6b8fc7b..3b787ff 100644
--- a/web1/src/views/pages/index.vue
+++ b/web1/src/views/pages/index.vue
@@ -2,7 +2,17 @@
   <div class="pages">
     <AppHeader class="page-header" />
     <!-- 页面初始化 loading -->
-    <div v-if="pageLoading" class="right" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center">
+    <div
+      v-if="pageLoading"
+      class="right"
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      "
+    >
       <n-spin size="large" />
       <div style="font-size: 16px; color: #999999; margin-top: 20px">加载中...</div>
     </div>
@@ -305,7 +315,9 @@
                 :default-file-list="modalForm.inheritor_certificates"
                 :max="uploadLimit"
                 list-type="image-card"
-                :on-before-upload="(options) => handleBeforeUpload(options, 'inheritor_certificates')"
+                :on-before-upload="
+                  (options) => handleBeforeUpload(options, 'inheritor_certificates')
+                "
                 @finish="handleFinish3"
                 @remove="delete3"
               >
@@ -569,35 +581,48 @@
                 </n-tooltip>
               </div>
             </template>
-            <n-select
-              style="width: 330px"
-              v-model:value="modalForm.online_accounts[0]"
-              placeholder="请选择"
-              :options="accountsOptions"
-            />
-            <NInput
-              v-model:value="modalForm.online_accounts[1]"
-              placeholder="请输入账号"
-              style="width: 220px; margin-left: 10px"
-            />
-            <NInput
-              v-model:value="modalForm.online_accounts[2]"
-              placeholder="请输入点赞数量"
-              style="width: 220px; margin-left: 10px"
-              type="number"
-            />
-            <NInput
-              v-model:value="modalForm.online_accounts[3]"
-              placeholder="请输入评论数量"
-              style="width: 220px; margin-left: 10px"
-              type="number"
-            />
-            <NInput
-              v-model:value="modalForm.online_accounts[4]"
-              placeholder="请输入分享数量"
-              style="width: 220px; margin-left: 10px"
-              type="number"
-            />
+            <div>
+              <div style="display: flex">
+                <n-select
+                  style="width: 220px"
+                  v-model:value="modalForm.online_accounts[0]"
+                  placeholder="请选择"
+                  :options="accountsOptions"
+                />
+                <NInput
+                  v-model:value="modalForm.online_accounts[1]"
+                  placeholder="请输入账号"
+                  style="width: 220px; margin-left: 10px"
+                />
+                <NInput
+                  v-model:value="modalForm.online_accounts[2]"
+                  placeholder="请输入点赞数量"
+                  style="width: 220px; margin-left: 10px"
+                  type="number"
+                />
+              </div>
+
+              <div style="display: flex; margin-top: 12px">
+                <NInput
+                  v-model:value="modalForm.online_accounts[3]"
+                  placeholder="请输入评论数量"
+                  style="width: 220px"
+                  type="number"
+                />
+                <NInput
+                  v-model:value="modalForm.online_accounts[4]"
+                  placeholder="请输入分享数量"
+                  style="width: 220px; margin-left: 10px"
+                  type="number"
+                />
+                <NInput
+                  v-model:value="modalForm.online_accounts[5]"
+                  placeholder="请输入近七天点击量"
+                  style="width: 220px; margin-left: 10px"
+                  type="number"
+                />
+              </div>
+            </div>
           </n-form-item-gi>
         </n-grid>
         <n-grid v-if="currentStep == 4" :cols="24" :x-gap="0">
@@ -903,7 +928,17 @@
         重新评估
       </div>
     </div>
-    <div v-if="!pageLoading && status == 'pending'" class="right" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center">
+    <div
+      v-if="!pageLoading && status == 'pending'"
+      class="right"
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      "
+    >
       <img
         class="loading-icon"
         style="width: 100px; height: 100px"
@@ -1168,7 +1203,7 @@ const modalRules = {
       required: true,
       message: '',
       trigger: ['input', 'blur'],
-      len: 5,
+      len: 6,
       fields: [
         {
           required: true,
@@ -1195,6 +1230,11 @@ const modalRules = {
           message: '请输入账号分享量',
           trigger: ['input', 'blur'],
         },
+        {
+          required: true,
+          message: '请输入近七天点击量',
+          trigger: ['input', 'blur'],
+        },
       ],
     },
   ],
@@ -1544,6 +1584,7 @@ const submit = () => {
         likes: modalForm.online_accounts[2],
         comments: modalForm.online_accounts[3],
         shares: modalForm.online_accounts[4],
+        views: modalForm.online_accounts[5],
       },
     }
   } else if (modalForm.online_accounts[0] == '1') {
@@ -1553,6 +1594,7 @@ const submit = () => {
         likes: modalForm.online_accounts[2],
         comments: modalForm.online_accounts[3],
         shares: modalForm.online_accounts[4],
+        views: modalForm.online_accounts[5],
       },
     }
   } else if (modalForm.online_accounts[0] == '2') {
@@ -1562,6 +1604,7 @@ const submit = () => {
         likes: modalForm.online_accounts[2],
         comments: modalForm.online_accounts[3],
         shares: modalForm.online_accounts[4],
+        views: modalForm.online_accounts[5],
       },
     }
   } else if (modalForm.online_accounts[0] == '3') {
@@ -1571,6 +1614,7 @@ const submit = () => {
         likes: modalForm.online_accounts[2],
         comments: modalForm.online_accounts[3],
         shares: modalForm.online_accounts[4],
+        views: modalForm.online_accounts[5],
       },
     }
   }
@@ -1746,12 +1790,12 @@ onMounted(async () => {
     page: 1,
     page_size: 99,
   }
-  
+
   // 如果有 id 参数,说明是从估值记录进入,需要显示 loading
   if (route.query.id) {
     pageLoading.value = true
   }
-  
+
   await getHistoryList()
 
   if (route.query.id) {
diff --git a/web1/src/views/user-center/components/CorporateTransfer.vue b/web1/src/views/user-center/components/CorporateTransfer.vue
index b9eb63c..843aa7c 100644
--- a/web1/src/views/user-center/components/CorporateTransfer.vue
+++ b/web1/src/views/user-center/components/CorporateTransfer.vue
@@ -185,11 +185,7 @@
             </n-form-item>
 
             <div class="btn-container">
-              <button
-                class="primary-btn"
-                :disabled="!isFormValid"
-                @click="handleUploadSubmit"
-              >
+              <button class="primary-btn" :disabled="!isFormValid" @click="handleUploadSubmit">
                 确认上传
               </button>
             </div>
@@ -295,11 +291,7 @@ const message = useMessage()
 
 // 计算表单是否有效
 const isFormValid = computed(() => {
-  return (
-    uploadedFiles.value.length > 0 &&
-    !!formModel.invoiceHeader &&
-    !!formModel.invoiceType
-  )
+  return uploadedFiles.value.length > 0 && !!formModel.invoiceHeader && !!formModel.invoiceType
 })
 
 const handleUploadFinish = ({ file, event }) => {
@@ -384,10 +376,10 @@ defineExpose({
 }
 
 .title-bar {
-  width: 4px;
-  height: 16px;
+  width: 6px;
+  height: 24px;
   background: #a30113;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .title-text {
diff --git a/web1/src/views/user-center/components/InvoiceManagement.vue b/web1/src/views/user-center/components/InvoiceManagement.vue
index 552db0a..bd9ad28 100644
--- a/web1/src/views/user-center/components/InvoiceManagement.vue
+++ b/web1/src/views/user-center/components/InvoiceManagement.vue
@@ -315,10 +315,10 @@ const rowKey = (row) => row.id ?? row.name ?? row.company_name ?? row.taxId ?? r
 }
 
 .title-bar {
-  width: 4px;
-  height: 16px;
+  width: 6px;
+  height: 24px;
   background: #a30113;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .title-text {
diff --git a/web1/src/views/user-center/components/Logout.vue b/web1/src/views/user-center/components/Logout.vue
new file mode 100644
index 0000000..4dc2bc2
--- /dev/null
+++ b/web1/src/views/user-center/components/Logout.vue
@@ -0,0 +1,368 @@
+<template>
+  <div>
+    <div class="header-left">
+      <div class="title-bar"></div>
+      <div class="title-text">账号注销</div>
+    </div>
+    <div v-if="deleteAble" class="logout-container">
+      <!-- 手机号信息 -->
+      <div class="phone-info">当前绑定的手机号码为：{{ maskedPhone }}</div>
+
+      <!-- 验证码输入区域 -->
+      <div class="code-form">
+        <n-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+          <n-form-item label="" prop="code" class="verify-code-item">
+            <!-- 验证码输入框 + 按钮 容器 -->
+            <div class="code-input-wrapper">
+              <n-input
+                v-model:value="form.code"
+                placeholder="手机验证码"
+                maxlength="6"
+                @input="handleCodeInput"
+                class="custom-code-input"
+                :bordered="false"
+              />
+              <n-button
+                class="send-code-btn"
+                text
+                @click="handleSendCode"
+                :disabled="countDown > 0"
+              >
+                {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
+              </n-button>
+            </div>
+          </n-form-item>
+        </n-form>
+      </div>
+
+      <!-- 注销按钮 -->
+      <n-button class="logout-btn" @click="handleLogout" :disabled="!isFormValid"> 确定 </n-button>
+    </div>
+    <div v-else class="logout-container" style="text-align: center">
+      <img src="@/assets/icon/评估完成.png" mode="scaleToFill" class="warn-icon" />
+      <p class="warn-title">无法注销</p>
+      <p class="warn-content">当前有未完成的估值记录/剩余估值次数，无法注销账号</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { useMessage, useDialog } from 'naive-ui' // 引入 Naive UI 消息/弹窗
+
+// 初始化 Naive UI 消息和弹窗
+const message = useMessage()
+const dialog = useDialog()
+
+// 接收父组件传递的手机号
+const props = defineProps({
+  userPhone: {
+    type: String,
+    required: true,
+  },
+  deleteAble: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+// 定义事件
+const emits = defineEmits(['send-code', 'confirm-logout'])
+
+// 表单引用
+const formRef = ref(null)
+
+// 表单数据
+const form = ref({
+  code: '',
+})
+// 倒计时
+const countDown = ref(0)
+let timer = null
+
+// 手机号脱敏处理
+const maskedPhone = computed(() => {
+  if (!props.userPhone) return ''
+  return `${props.userPhone.slice(0, 3)}****${props.userPhone.slice(7, 11)}`
+})
+
+// 表单验证规则
+const rules = ref({
+  code: [
+    { required: true, message: '请输入验证码', trigger: 'blur' },
+    { len: 6, message: '请输入6位验证码', trigger: 'blur' },
+  ],
+})
+
+// 表单是否有效
+const isFormValid = computed(() => {
+  return props.userPhone && form.value.code.length === 6
+})
+
+// 验证码输入限制
+const handleCodeInput = () => {
+  if (form.value.code.length > 6) {
+    form.value.code = form.value.code.slice(0, 6)
+  }
+}
+
+// 发送验证码
+const handleSendCode = async () => {
+  if (!props.userPhone) {
+    message.warning('手机号不存在，无法发送验证码')
+    return
+  }
+
+  // 调用父组件的发送验证码方法
+  const res = await emits('send-code', props.userPhone)
+  if (res) {
+    // 启动倒计时
+    countDown.value = 60
+    timer = setInterval(() => {
+      countDown.value--
+      if (countDown.value <= 0) {
+        clearInterval(timer)
+        timer = null
+      }
+    }, 1000)
+    message.success('验证码发送成功')
+  }
+}
+
+// 提交注销
+const handleLogout = () => {
+  // 表单验证
+  formRef.value.validate((errors) => {
+    if (!errors) {
+      emits('confirm-logout', {
+        code: form.value.code,
+      })
+    } else {
+      message.warning('请填写正确的6位验证码')
+    }
+  })
+}
+
+// 页面卸载时清除定时器
+watch(
+  () => countDown.value,
+  (val) => {
+    if (val <= 0 && timer) {
+      clearInterval(timer)
+      timer = null
+    }
+  }
+)
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
+</script>
+
+<style scoped>
+/* 根容器样式 */
+.logout-container {
+  width: 600px;
+  margin: 50px auto;
+  padding: 30px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+/* 标题样式 */
+.logout-title {
+  font-size: 12px;
+  color: #303133;
+  line-height: 12px;
+  text-align: center;
+}
+
+/* 手机号信息样式 */
+.phone-info {
+  font-size: 12px;
+  color: #303133;
+}
+
+/* 表单容器 */
+.code-form {
+  margin-bottom: 40px;
+  margin-top: -20px;
+}
+
+/* 验证码表单项 */
+.verify-code-item {
+  margin-bottom: 0 !important;
+}
+
+/* 验证码输入框 + 按钮 容器（核心布局） */
+.code-input-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 42px;
+  gap: 10px; /* 输入框和按钮间距 */
+}
+
+/* 自定义验证码输入框样式 */
+.custom-code-input {
+  flex: 1;
+  height: 100%;
+  border-radius: 4px;
+  border: 1px solid #e5e5e5;
+  font-size: 14px;
+  transition: all 0.3s ease;
+}
+.warn-icon {
+  margin-top: 80px;
+  width: 100px;
+  height: 100px;
+}
+.warn-title {
+  margin-top: 20px;
+  font-size: 20px;
+  color: #000000;
+  font-weight: bold;
+}
+.warn-content {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #999999;
+}
+/* 穿透修改 Naive UI 输入框样式 */
+:deep(.custom-code-input .n-input-wrapper) {
+  height: 100%;
+  padding: 0 10px;
+}
+:deep(.custom-code-input .n-input__input-el) {
+  height: 100%;
+  line-height: 40px;
+  font-size: 14px;
+}
+
+/* 输入框 hover 状态 */
+.custom-code-input:hover {
+  border-color: #a3011380; /* 半透明红 */
+}
+
+/* 输入框 聚焦状态 */
+:deep(.custom-code-input .n-input-wrapper:focus-within) {
+  border-color: #a30113;
+  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
+  outline: none;
+}
+
+/* 输入框 错误状态 */
+:deep(.n-form-item--error .custom-code-input) {
+  border-color: #d03050;
+}
+:deep(.n-form-item--error .custom-code-input .n-input-wrapper:focus-within) {
+  border-color: #d03050;
+  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
+}
+
+/* 验证码按钮样式 */
+.send-code-btn {
+  height: 100%;
+  min-width: 120px;
+  padding: 0 15px;
+  border-radius: 4px;
+  color: #a30113;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  background: #a3011332;
+  font-weight: bold;
+}
+
+/* 按钮 hover（非禁用） */
+.send-code-btn:not(:disabled):hover {
+  background: #a3011332;
+  color: #a30113;
+}
+
+/* 按钮 点击态 */
+.send-code-btn:not(:disabled):active {
+  transform: scale(0.98);
+}
+
+/* 按钮 禁用态 */
+.send-code-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* 注销按钮样式 */
+.logout-btn {
+  margin: auto;
+  display: block;
+  width: 100%;
+  height: 48px;
+  font-size: 16px;
+  width: 180px;
+  height: 40px;
+  background: #a30113;
+  border-radius: 4px;
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+}
+
+/* 注销按钮 hover（非禁用） */
+.logout-btn:not(:disabled):hover {
+  background: #a30113;
+  color: #fff;
+}
+
+/* 注销按钮 禁用态 */
+.logout-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.title-bar {
+  width: 6px;
+  height: 24px;
+  background: #a30113;
+  border-radius: 4px;
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 表单错误提示位置调整 */
+:deep(.n-form-item-feedback-wrapper) {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  padding-top: 2px;
+  line-height: 1;
+}
+
+:deep(.custom-code-input) {
+  /* Chrome/Safari/Edge */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* Firefox */
+  input[type='number'] {
+    -moz-appearance: textfield;
+  }
+}
+:deep(.n-button__content) {
+  justify-content: center;
+}
+</style>
diff --git a/web1/src/views/user-center/components/UserSidebar.vue b/web1/src/views/user-center/components/UserSidebar.vue
index d81d598..3e3cafa 100644
--- a/web1/src/views/user-center/components/UserSidebar.vue
+++ b/web1/src/views/user-center/components/UserSidebar.vue
@@ -6,6 +6,8 @@
       </div>
       <div class="user-phone">{{ userPhone || '18988880000' }}</div>
       <div class="valuation-count">剩余评估次数：{{ valuationCount }}</div>
+
+      <div class="logout-btn" @click="logout">退出登录</div>
     </div>
 
     <div class="menu-list">
@@ -29,24 +31,48 @@
 import iconHistory from '@/assets/icon/估值记录.png'
 import iconTransfer from '@/assets/icon/对公转账.png'
 import iconInvoice from '@/assets/icon/抬头管理.png'
+import iconLogout from '@/assets/icon/iconLogout.png'
+import { useDialog } from 'naive-ui'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+const dialog = useDialog()
 defineProps({
   userPhone: String,
   valuationCount: Number,
   currentMenu: String,
-  menuList: Array
+  menuList: Array,
 })
 
 defineEmits(['menu-click'])
 
 function getMenuIcon(id) {
   const iconMap = {
-    'history': iconHistory,
-    'transfer': iconTransfer,
-    'invoice': iconInvoice
+    history: iconHistory,
+    transfer: iconTransfer,
+    invoice: iconInvoice,
+    logout: iconLogout,
   }
   return iconMap[id]
 }
+
+async function logout() {
+  await new Promise((resolve, reject) => {
+    dialog.warning({
+      title: '提示',
+      content: '确认退出登录',
+      positiveText: '确认',
+      negativeText: '取消',
+      onPositiveClick: () => resolve(),
+      onNegativeClick: () => reject('cancel'),
+      onClose: () => reject('cancel'),
+    })
+  })
+  // 清除本地缓存
+  localStorage.removeItem('ACCESS_TOKEN')
+  // 跳转到登录页
+  router.push('/login')
+}
 </script>
 
 <style scoped>
@@ -117,12 +143,12 @@ function getMenuIcon(id) {
 }
 
 .menu-item:hover {
-  background: #F5F7FA;
+  background: #f5f7fa;
 }
 
 .menu-item.active {
-  background: #FFF0F0;
-  color: #A30113;
+  background: #fff0f0;
+  color: #a30113;
   font-weight: 500;
 }
 
@@ -153,6 +179,19 @@ function getMenuIcon(id) {
   font-size: 14px;
 }
 
+.logout-btn {
+  width: 168px;
+  height: 32px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #909399;
+  line-height: 32px;
+  text-align: center;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
 @media (max-width: 768px) {
   .sidebar-card {
     width: 100%;
diff --git a/web1/src/views/user-center/components/ValuationHistory.vue b/web1/src/views/user-center/components/ValuationHistory.vue
index 75e15b6..46e7dcc 100644
--- a/web1/src/views/user-center/components/ValuationHistory.vue
+++ b/web1/src/views/user-center/components/ValuationHistory.vue
@@ -217,10 +217,10 @@ onMounted(fetchHistory)
 }
 
 .title-bar {
-  width: 4px;
-  height: 16px;
+  width: 6px;
+  height: 24px;
   background: #a30113;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .title-text {
diff --git a/web1/src/views/user-center/index.vue b/web1/src/views/user-center/index.vue
index d2a823e..502c55d 100644
--- a/web1/src/views/user-center/index.vue
+++ b/web1/src/views/user-center/index.vue
@@ -16,23 +16,19 @@
 
       <!-- 右侧内容区 -->
       <div class="content-area">
-        <!-- 返回按钮 (暂时注释) -->
-        <!-- <div class="back-button" @click="handleBackToHome">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-          <span>返回首页</span>
-        </div> -->
-
         <!-- 子路由视图 -->
         <router-view
           :asset-list="assetList"
           :invoice-list="invoiceList"
+          :user-phone="userPhone"
+          :deleteAble="deleteAble"
           @return-home="handleBackToHome"
           @add-invoice="addInvoice"
           @update-invoice="updateInvoice"
           @delete-invoice="deleteInvoice"
           @upload-submit="uploadSubmit"
+          @send-code="sendVerificationCode"
+          @confirm-logout="confirmAccountLogout"
         />
       </div>
     </div>
@@ -40,12 +36,17 @@
 </template>
 
 <script setup>
-import { ref, onMounted, h, watch, computed } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useMessage, useDialog } from 'naive-ui' // 引入 Naive UI 消息/弹窗
 import api from '@/api'
 import AppHeader from '@/components/AppHeader.vue'
 import UserSidebar from './components/UserSidebar.vue'
 
+// 初始化 Naive UI 消息和弹窗实例
+const message = useMessage()
+const dialog = useDialog()
+
 const router = useRouter()
 const route = useRoute()
 
@@ -55,12 +56,14 @@ const currentMenu = computed(() => {
   if (path.includes('/history')) return 'history'
   if (path.includes('/transfer')) return 'transfer'
   if (path.includes('/invoice')) return 'invoice'
+  if (path.includes('/logout')) return 'logout' // 新增：注销菜单匹配
   return 'history'
 })
 
 // 用户信息
 const userPhone = ref('')
 const valuationCount = ref(0)
+const deleteAble = ref(true)
 
 // 资产列表
 const assetList = ref([])
@@ -68,7 +71,7 @@ const assetList = ref([])
 // 开票列表
 const invoiceList = ref([])
 
-// 菜单列表
+// 菜单列表（新增注销菜单）
 const menuList = ref([
   {
     id: 'history',
@@ -82,6 +85,10 @@ const menuList = ref([
     id: 'invoice',
     label: '抬头管理',
   },
+  {
+    id: 'logout', // 新增：注销账号菜单
+    label: '账号注销',
+  },
 ])
 
 // 返回首页
@@ -91,7 +98,6 @@ function handleBackToHome() {
 
 // 菜单点击
 function handleMenuClick(menu) {
-  // 使用路由导航
   router.push(`/user-center/${menu.id}`)
 }
 
@@ -114,10 +120,12 @@ async function loadData() {
     }
   } catch (error) {
     console.error('加载估值记录失败:', error)
-    $message.error('加载估值记录失败，请稍后重试')
+    // 替换：ElMessage → message
+    message.error('加载估值记录失败，请稍后重试')
   }
 }
-//加载发票抬头列表
+
+// 加载发票抬头列表
 async function loadInvoiceList() {
   try {
     const res = await api.getInvoiceHeaders()
@@ -127,37 +135,43 @@ async function loadInvoiceList() {
   }
 }
 
-//添加发票抬头
+// 添加发票抬头
 async function addInvoice(data) {
   try {
     await api.addInvoiceHeaders(data)
-    $message.success('添加成功')
+    // 替换：ElMessage → message
+    message.success('添加成功')
     loadInvoiceList()
   } catch (error) {
     console.error('新增发票抬头失败:', error)
   }
 }
-//更新发票抬头
+
+// 更新发票抬头
 async function updateInvoice(data) {
   try {
     await api.updateInvoiceHeaders(data)
-    $message.success('编辑成功')
+    // 替换：ElMessage → message
+    message.success('编辑成功')
     loadInvoiceList()
   } catch (error) {
     console.error('更新发票抬头失败:', error)
   }
 }
-//删除发票抬头
+
+// 删除发票抬头
 async function deleteInvoice(data) {
   try {
     await api.deleteInvoiceHeaders(data.id)
-    $message.success('删除成功')
+    // 替换：ElMessage → message
+    message.success('删除成功')
     loadInvoiceList()
   } catch (error) {
     console.error('删除发票抬头失败:', error)
   }
 }
-//上传对公转账凭证
+
+// 上传对公转账凭证
 async function uploadSubmit(data) {
   try {
     console.log('上传对公转账凭证===', data)
@@ -167,6 +181,53 @@ async function uploadSubmit(data) {
   }
 }
 
+// 新增：发送注销验证码
+async function sendVerificationCode(phone) {
+  try {
+    await api.sendVerifyCode({ phone })
+    message.success('验证码已发送，请注意查收')
+    return true
+  } catch (error) {
+    console.error('发送验证码失败:', error)
+    return false
+  }
+}
+
+// 新增：确认注销账号
+async function confirmAccountLogout(formData) {
+  // 替换：ElMessageBox.confirm → dialog.warning
+  await new Promise((resolve, reject) => {
+    dialog.warning({
+      title: '提示',
+      content: '提交后账号将注销，不可撤回，确认注销账户？',
+      positiveText: '确认',
+      negativeText: '取消',
+      onPositiveClick: () => resolve(),
+      onNegativeClick: () => reject('cancel'),
+      onClose: () => reject('cancel'),
+    })
+  })
+
+  // 调用注销接口（传入手机号和验证码）
+  api
+    .deleteAccount({
+      code: formData.code,
+    })
+    .then((res) => {
+      console.log(res, '111111111111111')
+      // 替换：ElMessage → message
+      message.success('账号注销成功')
+      // 清除本地缓存
+      localStorage.removeItem('phone')
+      // 跳转到登录页
+      router.push('/login')
+    })
+    .catch((err) => {
+      console.log(err, '111111111111111')
+      deleteAble.value = false
+    })
+}
+
 onMounted(() => {
   loadData()
   loadInvoiceList()
@@ -200,26 +261,7 @@ onMounted(() => {
   min-height: calc(100vh - 100px); /* Adjust based on header + margin */
   position: relative;
   overflow: hidden; /* Ensure rounded corners */
-}
-
-.back-button {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0;
-  color: #606266;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  font-size: 14px;
-  background: transparent;
-  z-index: 10;
-}
-
-.back-button:hover {
-  color: #a30113;
+  padding: 20px; /* 新增：添加内边距 */
 }
 
 @media (max-width: 1200px) {
@@ -232,9 +274,5 @@ onMounted(() => {
   .main-container {
     flex-direction: column;
   }
-
-  .header {
-    padding: 10px 20px;
-  }
 }
 </style>