feat 搭建架构骨架

src/views/profile/security.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { ConfirmDialog } from '@/components'
+import { getPasswordLevel, isValidPassword } from '@/utils/validate'
+import { useProfileStore } from '@/stores/modules/profile'
+import SecurityPanel from './cpns/SecurityPanel.vue'
+import ChangePasswordDialog from './cpns/ChangePasswordDialog.vue'
+import BindContactDialog from './cpns/BindContactDialog.vue'
+import type { BindContactMode } from './cpns/BindContactDialog.vue'
+
+const router = useRouter()
+const profileStore = useProfileStore()
+const { profile } = storeToRefs(profileStore)
+
+// ── 修改密码 ──
+const pwdVisible = ref(false)
+
+function onChangePasswordSubmit(payload: { code: string; password: string; confirm: string }): void {
+  if (payload.password !== payload.confirm) {
+    ElMessage.warning('两次密码不一致')
+    return
+  }
+  if (!isValidPassword(payload.password) || getPasswordLevel(payload.password) === 'weak') {
+    ElMessage.warning('密码等级过低，请重新输入')
+    return
+  }
+  void profileStore
+    .changePassword({ code: payload.code, password: payload.password })
+    .then(() => {
+      pwdVisible.value = false
+    })
+}
+
+// ── 绑定/换绑（手机 & 邮箱） ──
+const bindVisible = ref(false)
+const bindMode = ref<BindContactMode>('phone-rebind')
+
+function onBindPhone(): void {
+  bindMode.value = 'phone-rebind'
+  bindVisible.value = true
+}
+
+function onBindEmail(mode: 'email-bind' | 'email-rebind'): void {
+  bindMode.value = mode
+  bindVisible.value = true
+}
+
+function onBindSubmit(payload: { contact: string; code: string }): void {
+  const action
+    = bindMode.value === 'phone-rebind' || bindMode.value === 'phone-bind'
+      ? profileStore.bindPhone(payload.contact, payload.code)
+      : profileStore.bindEmail(payload.contact, payload.code)
+  void action.then(() => {
+    bindVisible.value = false
+  })
+}
+
+// ── 取消绑定邮箱 ──
+const unbindVisible = ref(false)
+
+function onUnbindConfirm(): void {
+  void profileStore.unbindEmail()
+}
+
+// ── 注销账号 ──
+const deleteVisible = ref(false)
+const identityVisible = ref(false)
+
+function onDeleteConfirm(): void {
+  // 确认注销 → 进入安全身份验证
+  identityVisible.value = true
+}
+
+function onIdentitySubmit(payload: { contact: string; code: string }): void {
+  void (async () => {
+    await profileStore.verifyIdentity(payload.contact, payload.code)
+    await profileStore.deleteAccount()
+    setTimeout(() => {
+      void router.push('/login')
+    }, 3000)
+  })()
+}
+</script>
+
+<template>
+  <div class="security-page">
+    <SecurityPanel
+      :profile="profile"
+      @change-password="pwdVisible = true"
+      @bind-phone="onBindPhone"
+      @bind-email="onBindEmail"
+      @unbind-email="unbindVisible = true"
+      @delete-account="deleteVisible = true"
+    />
+
+    <ChangePasswordDialog
+      v-model:visible="pwdVisible"
+      :phone="profile?.phone ?? ''"
+      @submit="onChangePasswordSubmit"
+    />
+
+    <BindContactDialog
+      v-model:visible="bindVisible"
+      :mode="bindMode"
+      :hint-phone="profile?.phone ?? ''"
+      :hint-email="profile?.email ?? ''"
+      @submit="onBindSubmit"
+    />
+
+    <BindContactDialog
+      v-model:visible="identityVisible"
+      mode="identity"
+      :hint-phone="profile?.phone ?? ''"
+      @submit="onIdentitySubmit"
+    />
+
+    <ConfirmDialog
+      v-model:visible="unbindVisible"
+      title="取消绑定"
+      message="确定要取消绑定该邮箱吗？取消后将无法通过邮箱接收通知。"
+      confirm-text="取消绑定"
+      cancel-text="暂不取消"
+      danger
+      @confirm="onUnbindConfirm"
+    />
+
+    <ConfirmDialog
+      v-model:visible="deleteVisible"
+      title="注销账号"
+      message="确定要注销账号吗？"
+      confirm-text="注销账号"
+      cancel-text="暂不注销"
+      danger
+      @confirm="onDeleteConfirm"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.security-page {
+  .flex(column, flex-start);
+  gap: @spacing-base;
+}
+</style>