diff --git a/.env.development b/.env.development
index 4029ed4..e9a402f 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,8 @@
 # 开发环境标识（Vite 内置变量，无需修改）
 NODE_ENV = development
 
-# 开发环境接口基础地址（对应你配置的 http://18.167.120.9:8085/api）
-VITE_API_BASE_URL = http://18.167.120.9:8085/api
+# 开发环境接口基础地址（对应你配置的 https://adminapi.nplus.top/api）
+VITE_API_BASE_URL = https://adminapi.nplus.top/api
 
 # 请求超时时间（毫秒）
 VITE_REQUEST_TIMEOUT = 10000
diff --git a/.env.production b/.env.production
index 7184e14..61f9fd9 100644
--- a/.env.production
+++ b/.env.production
@@ -2,7 +2,7 @@
 NODE_ENV = production
 
 # 生产环境接口基础地址
-VITE_API_BASE_URL = http://18.167.120.9:8085/api
+VITE_API_BASE_URL = https://adminapi.nplus.top/api
 
 # 请求超时时间（毫秒）
 VITE_REQUEST_TIMEOUT = 10000
diff --git a/package.json b/package.json
index df1e679..f29f8fd 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.20",
     "element-plus": "^2.13.2",
+    "face-api.js": "^0.22.2",
     "file-saver": "^2.0.5",
     "mqtt": "^5.15.1",
     "pinia": "^3.0.4",
@@ -42,6 +43,7 @@
     "@types/file-saver": "^2.0.7",
     "@types/node": "^24.10.13",
     "@types/xlsx": "^0.0.36",
+    "@vitejs/plugin-basic-ssl": "^2.3.0",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/tsconfig": "^0.8.1",
diff --git a/public/models/face/face_landmark_68_model-shard1 b/public/models/face/face_landmark_68_model-shard1
new file mode 100644
index 0000000..fcaca47
Binary files /dev/null and b/public/models/face/face_landmark_68_model-shard1 differ
diff --git a/public/models/face/face_landmark_68_model-weights_manifest.json b/public/models/face/face_landmark_68_model-weights_manifest.json
new file mode 100644
index 0000000..0fe2707
--- /dev/null
+++ b/public/models/face/face_landmark_68_model-weights_manifest.json
@@ -0,0 +1 @@
+[{"weights":[{"name":"dense0/conv0/filters","shape":[3,3,3,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004853619781194949,"min":-0.5872879935245888}},{"name":"dense0/conv0/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004396426443960153,"min":-0.7298067896973853}},{"name":"dense0/conv1/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00635151559231328,"min":-0.5589333721235686}},{"name":"dense0/conv1/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009354315552057004,"min":-1.2628325995276957}},{"name":"dense0/conv1/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0029380727048013726,"min":-0.5846764682554731}},{"name":"dense0/conv2/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0049374802439820535,"min":-0.6171850304977566}},{"name":"dense0/conv2/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009941946758943446,"min":-1.3421628124573652}},{"name":"dense0/conv2/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030300481062309416,"min":-0.5272283704841838}},{"name":"dense0/conv3/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005672684837790097,"min":-0.7431217137505026}},{"name":"dense0/conv3/pointwise_filter","shape":[1,1,32,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010712201455060173,"min":-1.5639814124387852}},{"name":"dense0/conv3/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030966934035806097,"min":-0.3839899820439956}},{"name":"dense1/conv0/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0039155554537679636,"min":-0.48161332081345953}},{"name":"dense1/conv0/pointwise_filter","shape":[1,1,32,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01023082966898002,"min":-1.094698774580862}},{"name":"dense1/conv0/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0027264176630506327,"min":-0.3871513081531898}},{"name":"dense1/conv1/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004583378632863362,"min":-0.5454220573107401}},{"name":"dense1/conv1/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00915846403907327,"min":-1.117332612766939}},{"name":"dense1/conv1/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003091680419211294,"min":-0.5966943209077797}},{"name":"dense1/conv2/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005407439727409214,"min":-0.708374604290607}},{"name":"dense1/conv2/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00946493943532308,"min":-1.2399070660273235}},{"name":"dense1/conv2/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004409168514550901,"min":-0.9788354102303}},{"name":"dense1/conv3/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004478132958505668,"min":-0.6493292789833219}},{"name":"dense1/conv3/pointwise_filter","shape":[1,1,64,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.011063695888893277,"min":-1.2501976354449402}},{"name":"dense1/conv3/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003909627596537272,"min":-0.6646366914113363}},{"name":"dense2/conv0/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003213915404151468,"min":-0.3374611174359041}},{"name":"dense2/conv0/pointwise_filter","shape":[1,1,64,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010917326048308728,"min":-1.4520043644250609}},{"name":"dense2/conv0/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002800439152063108,"min":-0.38085972468058266}},{"name":"dense2/conv1/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0050568851770139206,"min":-0.6927932692509071}},{"name":"dense2/conv1/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01074961213504567,"min":-1.3222022926106174}},{"name":"dense2/conv1/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0030654204242369708,"min":-0.5487102559384177}},{"name":"dense2/conv2/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00591809165244009,"min":-0.917304206128214}},{"name":"dense2/conv2/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.01092823346455892,"min":-1.366029183069865}},{"name":"dense2/conv2/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002681120470458386,"min":-0.36463238398234055}},{"name":"dense2/conv3/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0048311497650894465,"min":-0.5797379718107336}},{"name":"dense2/conv3/pointwise_filter","shape":[1,1,128,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.011227761062921263,"min":-1.4483811771168429}},{"name":"dense2/conv3/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0034643323982463162,"min":-0.3360402426298927}},{"name":"dense3/conv0/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003394978887894574,"min":-0.49227193874471326}},{"name":"dense3/conv0/pointwise_filter","shape":[1,1,128,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010051267287310432,"min":-1.2765109454884247}},{"name":"dense3/conv0/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003142924752889895,"min":-0.4588670139219247}},{"name":"dense3/conv1/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00448304671867221,"min":-0.5872791201460595}},{"name":"dense3/conv1/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.016063522357566685,"min":-2.3613377865623026}},{"name":"dense3/conv1/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.00287135781026354,"min":-0.47664539650374765}},{"name":"dense3/conv2/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006002906724518421,"min":-0.7923836876364315}},{"name":"dense3/conv2/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.017087187019048954,"min":-1.6061955797906016}},{"name":"dense3/conv2/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003124481205846749,"min":-0.46242321846531886}},{"name":"dense3/conv3/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006576311588287353,"min":-1.0193282961845398}},{"name":"dense3/conv3/pointwise_filter","shape":[1,1,256,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015590153955945782,"min":-1.99553970636106}},{"name":"dense3/conv3/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004453541601405424,"min":-0.6546706154065973}},{"name":"fc/weights","shape":[256,136],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.010417488509533453,"min":-1.500118345372817}},{"name":"fc/bias","shape":[136],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0025084222648658005,"min":0.07683877646923065}}],"paths":["face_landmark_68_model-shard1"]}]
\ No newline at end of file
diff --git a/public/models/face/tiny_face_detector_model-shard1 b/public/models/face/tiny_face_detector_model-shard1
new file mode 100644
index 0000000..a3f113a
Binary files /dev/null and b/public/models/face/tiny_face_detector_model-shard1 differ
diff --git a/public/models/face/tiny_face_detector_model-weights_manifest.json b/public/models/face/tiny_face_detector_model-weights_manifest.json
new file mode 100644
index 0000000..7d3b222
--- /dev/null
+++ b/public/models/face/tiny_face_detector_model-weights_manifest.json
@@ -0,0 +1 @@
+[{"weights":[{"name":"conv0/filters","shape":[3,3,3,16],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.009007044399485869,"min":-1.2069439495311063}},{"name":"conv0/bias","shape":[16],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.005263455241334205,"min":-0.9211046672334858}},{"name":"conv1/depthwise_filter","shape":[3,3,16,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.004001977630690033,"min":-0.5042491814669441}},{"name":"conv1/pointwise_filter","shape":[1,1,16,32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.013836609615999109,"min":-1.411334180831909}},{"name":"conv1/bias","shape":[32],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0015159862590771096,"min":-0.30926119685173037}},{"name":"conv2/depthwise_filter","shape":[3,3,32,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002666276225856706,"min":-0.317286870876948}},{"name":"conv2/pointwise_filter","shape":[1,1,32,64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.015265831292844286,"min":-1.6792414422128714}},{"name":"conv2/bias","shape":[64],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0020280554598453,"min":-0.37113414915168985}},{"name":"conv3/depthwise_filter","shape":[3,3,64,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006100742489683862,"min":-0.8907084034938438}},{"name":"conv3/pointwise_filter","shape":[1,1,64,128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.016276211832083907,"min":-2.0508026908425725}},{"name":"conv3/bias","shape":[128],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.003394414279975143,"min":-0.7637432129944072}},{"name":"conv4/depthwise_filter","shape":[3,3,128,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.006716050119961009,"min":-0.8059260143953211}},{"name":"conv4/pointwise_filter","shape":[1,1,128,256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.021875603993733724,"min":-2.8875797271728514}},{"name":"conv4/bias","shape":[256],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.0041141652009066415,"min":-0.8187188749804216}},{"name":"conv5/depthwise_filter","shape":[3,3,256,1],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.008423839597141042,"min":-0.9013508368940915}},{"name":"conv5/pointwise_filter","shape":[1,1,256,512],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.030007277283014035,"min":-3.8709387695088107}},{"name":"conv5/bias","shape":[512],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.008402082966823203,"min":-1.4871686851277068}},{"name":"conv8/filters","shape":[1,1,512,25],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.028336129469030042,"min":-4.675461362389957}},{"name":"conv8/bias","shape":[25],"dtype":"float32","quantization":{"dtype":"uint8","scale":0.002268134028303857,"min":-0.41053225912299807}}],"paths":["tiny_face_detector_model-shard1"]}]
\ No newline at end of file
diff --git a/src/api/modules/livenessVerification.ts b/src/api/modules/livenessVerification.ts
new file mode 100644
index 0000000..ec816ee
--- /dev/null
+++ b/src/api/modules/livenessVerification.ts
@@ -0,0 +1,40 @@
+import { request } from '@/api'
+
+
+
+
+/**
+ * 上传实时照片
+ */
+export async function uploadCard(params: any): Promise<any> {
+  return request.post<any>('/aws/uploadCard', params, {
+    headers: {
+      'Content-Type': 'multipart/form-data', // 表单上传必须的头
+    },
+  })
+}
+
+/**
+ * 上传实时照片
+ */
+export async function uploadLivePhoto(params: any): Promise<any> {
+  return request.post<any>('/aws/uploadLivePhoto', params, {
+    headers: {
+      'Content-Type': 'multipart/form-data', // 表单上传必须的头
+    }
+  })
+}
+
+/**
+ * 活体检测
+ */
+export async function checkLiveness(): Promise<any> {
+  return request.post<any>('/aws/checkLiveness')
+}
+
+/**
+ * 验证身份照片
+ */
+export async function verifyCard(): Promise<any> {
+  return request.post<any>('/aws/verifyCard')
+}
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 39dfb2f..6ab41a4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -70,6 +70,18 @@ const routes = [
       },
     ],
   },
+  {
+    path: '/realName',
+    name: '实名认证',
+    component: () => import('@/views/realName/index.vue'),
+    meta: { requiresAuth: true, title: '实名认证', keepAlive: false },
+  },
+  {
+    path: '/livenessVerification',
+    name: '活体认证',
+    component: () => import('@/views/livenessVerification/index.vue'),
+    meta: { requiresAuth: true, title: '活体认证', keepAlive: false },
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: () => {
diff --git a/src/stores/modules/user.ts b/src/stores/modules/user.ts
index 21dce0c..36dadd0 100644
--- a/src/stores/modules/user.ts
+++ b/src/stores/modules/user.ts
@@ -1,201 +1,218 @@
-import { getStorage, setStorage, removeStorage } from '@/utils/storage';
-import { loginApi, registerApi, logoutApi, forgotPasswordApi, changePasswordApi, sendCodeApi } from '@/api/modules/user';
-import type { LoginParams, RegisterParams, ForgotPasswordParams, ChangePasswordParams, SendCodeParams } from '@/api/types/user';
-import type { UserInfo, MenuItem, PermissionItem } from '@/stores/types/user';
-import { formatMenuToElMenu, type ElMenuItem } from '@/utils/menuFormat';
+import { getStorage, setStorage, removeStorage } from '@/utils/storage'
+import {
+  loginApi,
+  registerApi,
+  logoutApi,
+  forgotPasswordApi,
+  changePasswordApi,
+  sendCodeApi,
+} from '@/api/modules/user'
+import type {
+  LoginParams,
+  RegisterParams,
+  ForgotPasswordParams,
+  ChangePasswordParams,
+  SendCodeParams,
+} from '@/api/types/user'
+import type { UserInfo, MenuItem, PermissionItem } from '@/stores/types/user'
+import { formatMenuToElMenu, type ElMenuItem } from '@/utils/menuFormat'
 import { handleRouter, setRouter } from '@/router/handleRouter.ts'
 
 // 定义用户 Store
 export const useUserStore = defineStore('user', () => {
-  const router = useRouter();
+  const router = useRouter()
 
   // ========== 状态定义（与后端返回数据对应） ==========
   // 用户/菜单和权限状态
-  const userInfo = ref<UserInfo | null>(getStorage('userInfo') || null);
-  const token = ref<string>(getStorage('token') || '');
-  const menusInfo = ref<MenuItem[]>(getStorage('menusInfo') || []);
-  const permissionsInfo = ref<PermissionItem[]>(getStorage('permissionsInfo') || []);
+  const userInfo = ref<UserInfo | null>(getStorage('userInfo') || null)
+  const token = ref<string>(getStorage('token') || '')
+  const menusInfo = ref<MenuItem[]>(getStorage('menusInfo') || [])
+  const permissionsInfo = ref<PermissionItem[]>(getStorage('permissionsInfo') || [])
 
   // ========== 计算属性 ==========
-  const isLoggedIn = computed(() => !!token.value);
+  const isLoggedIn = computed(() => !!token.value)
   // const permissionKeys = computed(() => permissions.value.map(item => item.name));
   // 格式化后的 el-menu 数据（自动更新）
-  const sideMenu = computed<ElMenuItem[]>(() => formatMenuToElMenu(menusInfo.value));
-/**
- * 设置用户信息
- * 作用：根据后端返回数据设置用户状态 + 本地存储
- */
-const setUserInfo = (set: any) => {
-  token.value = set.user.token;
-  userInfo.value = set.user;
-  menusInfo.value = set.menus_info;
-  permissionsInfo.value = set.permissions_info;
+  const sideMenu = computed<ElMenuItem[]>(() => formatMenuToElMenu(menusInfo.value))
+  /**
+   * 设置用户信息
+   * 作用：根据后端返回数据设置用户状态 + 本地存储
+   */
+  const setUserInfo = (set: any) => {
+    token.value = set.user.token
+    userInfo.value = set.user
+    menusInfo.value = set.menus_info
+    permissionsInfo.value = set.permissions_info
 
-  const btnAuth = (set.permissions_info || []).map((item: any) => item.code).filter((item: any) => item)
+    const btnAuth = (set.permissions_info || [])
+      .map((item: any) => item.code)
+      .filter((item: any) => item)
 
-  // 保存到本地存储
-  setStorage('token', set.user.token);
-  setStorage('userInfo', set.user);
-  setStorage('menusInfo', set.menus_info);
-  setStorage('permissionsInfo', set.permissions_info);
-  setStorage('btnAuth', btnAuth)
-
-  setRouter()
-  
-};
-
-/**
- * 清空用户信息（核心复用方法）
- * 作用：重置所有用户相关状态 + 清除本地存储
- */
-const clearUserInfo = () => {
-  // 重置 Pinia 中的状态
-  token.value = '';
-  userInfo.value = null;
-  menusInfo.value = [];
-  permissionsInfo.value = [];
-
-  // 清除本地存储的用户数据
-  removeStorage('token');
-  removeStorage('userInfo');
-  removeStorage('menusInfo');
-  removeStorage('permissionsInfo');
-  removeStorage('device_no');
-  console.log('用户信息已清空');
-};
-
-/**
- * 登录方法
- * @param params 登录参数
- */
-const login = async (params: LoginParams) => {
-  try {
-    const res = await loginApi(params);
-    if (res.isUserNotExist) {
-      // 用户不存在，跳转到注册页面
-      router.push('/user/register');
-      return;
-    }
-    setUserInfo(res);
-    // 跳转到首页
-    router.push('/');
-  } catch (error) {
-    console.error('登录失败', error);
-
-    throw error;
+    // 保存到本地存储
+    setStorage('token', set.user.token)
+    setStorage('userInfo', set.user)
+    setStorage('menusInfo', set.menus_info)
+    setStorage('permissionsInfo', set.permissions_info)
+    setStorage('btnAuth', btnAuth)
 
+    setRouter()
   }
-};
 
-/**
+  /**
+   * 清空用户信息（核心复用方法）
+   * 作用：重置所有用户相关状态 + 清除本地存储
+   */
+  const clearUserInfo = () => {
+    // 重置 Pinia 中的状态
+    token.value = ''
+    userInfo.value = null
+    menusInfo.value = []
+    permissionsInfo.value = []
+
+    // 清除本地存储的用户数据
+    removeStorage('token')
+    removeStorage('userInfo')
+    removeStorage('menusInfo')
+    removeStorage('permissionsInfo')
+    removeStorage('device_no')
+    console.log('用户信息已清空')
+  }
+
+  /**
+   * 登录方法
+   * @param params 登录参数
+   */
+  const login = async (params: LoginParams) => {
+    try {
+      const res = await loginApi(params)
+      if (res.isUserNotExist) {
+        // 用户不存在，跳转到注册页面
+        router.push('/user/register')
+        return
+      }
+      setUserInfo(res)
+      // 跳转到首页
+      if (res.user.real_check !== 1) {
+        router.push('/')
+      } else {
+        router.push('/realName')
+      }
+    } catch (error) {
+      console.error('登录失败', error)
+
+      throw error
+    }
+  }
+
+  /**
    * 注册方法
    * @param params 登录参数
    */
-const register = async (params: RegisterParams) => {
-  try {
-    const res = await registerApi(params);
-    //跳转登录页面
-    router.push('/user/login');
-  } catch (error) {
-    console.error('注册失败', error);
-    throw error;
+  const register = async (params: RegisterParams) => {
+    try {
+      const res = await registerApi(params)
+      //跳转登录页面
+      router.push('/user/login')
+    } catch (error) {
+      console.error('注册失败', error)
+      throw error
+    }
   }
-};
 
-/**
- * 退出登录
- */
-const logout = async (params: { device_no: string }) => {
-  try {
-    await logoutApi(params);
-  } catch (error) {
-    console.error('退出登录接口调用失败', error);
-  } finally {
-    clearUserInfo();
+  /**
+   * 退出登录
+   */
+  const logout = async (params: { device_no: string }) => {
+    try {
+      await logoutApi(params)
+    } catch (error) {
+      console.error('退出登录接口调用失败', error)
+    } finally {
+      clearUserInfo()
 
-    // 跳转到登录页面
-    router.push('/user/login');
+      // 跳转到登录页面
+      router.push('/user/login')
+    }
   }
-};
 
-/**
- * 忘记密码
- */
-const forgotPassword = async (params: ForgotPasswordParams) => {
-  try {
-    await forgotPasswordApi(params);
-    // 跳转登录页面
-    router.push('/user/login');
-  } catch (error) {
-    console.error('重置密码失败', error);
-    throw error;
+  /**
+   * 忘记密码
+   */
+  const forgotPassword = async (params: ForgotPasswordParams) => {
+    try {
+      await forgotPasswordApi(params)
+      // 跳转登录页面
+      router.push('/user/login')
+    } catch (error) {
+      console.error('重置密码失败', error)
+      throw error
+    }
   }
-};
 
-/**
- * 修改密码
- */
-const changePassword = async (params: ChangePasswordParams) => {
-  try {
-    await changePasswordApi(params);
-    // 跳转登录页面
-    clearUserInfo();
-    router.push('/user/login');
-  } catch (error) {
-    console.error('修改密码失败', error);
-    throw error;
+  /**
+   * 修改密码
+   */
+  const changePassword = async (params: ChangePasswordParams) => {
+    try {
+      await changePasswordApi(params)
+      // 跳转登录页面
+      clearUserInfo()
+      router.push('/user/login')
+    } catch (error) {
+      console.error('修改密码失败', error)
+      throw error
+    }
   }
-};
 
-/**
- * 发送验证码
- */
-const sendCode = async (params: SendCodeParams) => {
-  try {
-    const res = await sendCodeApi(params);
-  } catch (error) {
-    console.error('发送验证码失败', error);
-    throw error;
+  /**
+   * 发送验证码
+   */
+  const sendCode = async (params: SendCodeParams) => {
+    try {
+      const res = await sendCodeApi(params)
+    } catch (error) {
+      console.error('发送验证码失败', error)
+      throw error
+    }
+  }
+  /**
+   * 切换账户
+   */
+  const switchAccount = async () => {
+    clearUserInfo()
+    router.push('/user/login')
   }
-};
-/**
- * 切换账户
- */
-const switchAccount = async () => {
-  clearUserInfo();
-  router.push('/user/login');
-};
 
-/**
- * 更新用户信息
- * @param data 要更新的用户信息
- */
-const updateUserInfo = (data: Partial<UserInfo>) => {
-  if (userInfo.value) {
-    // 合并更新用户信息
-    userInfo.value = { ...userInfo.value, ...data };
-    // 更新本地存储
-    setStorage('userInfo', userInfo.value);
+  /**
+   * 更新用户信息
+   * @param data 要更新的用户信息
+   */
+  const updateUserInfo = (data: Partial<UserInfo>) => {
+    if (userInfo.value) {
+      // 合并更新用户信息
+      userInfo.value = { ...userInfo.value, ...data }
+      // 更新本地存储
+      setStorage('userInfo', userInfo.value)
+    }
   }
-};
-return {
-  // 状态
-  token,
-  userInfo,
-  menusInfo,
-  permissionsInfo,
-  // 计算属性
-  isLoggedIn,
-  sideMenu,
-  // 方法（箭头函数）
-  login,
-  setUserInfo,
-  register,
-  logout,
-  forgotPassword,
-  changePassword,
-  sendCode,
-  switchAccount,
-  updateUserInfo
-};
-});
+  return {
+    // 状态
+    token,
+    userInfo,
+    menusInfo,
+    permissionsInfo,
+    // 计算属性
+    isLoggedIn,
+    sideMenu,
+    // 方法（箭头函数）
+    login,
+    setUserInfo,
+    register,
+    logout,
+    forgotPassword,
+    changePassword,
+    sendCode,
+    switchAccount,
+    updateUserInfo,
+  }
+})
diff --git a/src/views/livenessVerification/index.vue b/src/views/livenessVerification/index.vue
new file mode 100644
index 0000000..804c904
--- /dev/null
+++ b/src/views/livenessVerification/index.vue
@@ -0,0 +1,235 @@
+<template>
+  <div class="container">
+    <h2>人脸认证</h2>
+    <div class="video-box">
+      <video ref="video" autoplay muted playsinline webkit-playsinline x5-playsinline></video>
+    </div>
+    <canvas ref="overlay" class="overlay"></canvas>
+
+    <!--    <div class="message">{{ message }}</div>-->
+    <div v-if="currentAction" class="action-tip">
+      {{ actionTips[currentAction] }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import * as faceapi from 'face-api.js'
+import { checkLiveness, uploadLivePhoto, verifyCard } from '@/api/modules/livenessVerification.ts'
+import { useRouter } from 'vue-router'
+import { clearStorage } from '@/utils/storage/index.ts'
+
+const router = useRouter()
+
+// DOM refs
+const video = ref(null)
+const overlay = ref(null)
+
+// 状态
+const message = ref('初始化中...')
+const capturedFiles = reactive({ front: null, mouth: null, yaw: null })
+
+// 动作提示
+const currentAction = ref(null)
+const actionTips = {
+  front: '请保持正面朝向摄像头',
+  mouth: '请张开嘴',
+  yaw: '请左右摇头',
+}
+
+// 阈值参数
+const MOUTH_OPEN_THRESHOLD = 15
+const YAW_THRESHOLD = 20
+
+// --------- 核心函数 ---------
+async function init() {
+  try {
+    message.value = '加载模型中...'
+    await faceapi.nets.tinyFaceDetector.load('/models/face')
+    await faceapi.nets.faceLandmark68Net.load('/models/face')
+    message.value = '模型加载完成，打开摄像头...'
+
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true })
+    video.value.srcObject = stream
+    await video.value.play()
+    message.value = '准备就绪'
+    startDetection()
+  } catch (err) {
+    console.error(err)
+    message.value = '摄像头或模型加载失败，请检查'
+  }
+}
+
+function startDetection() {
+  const actions = ['front', 'mouth', 'yaw']
+  let index = 0
+
+  const nextAction = async () => {
+    if (index >= actions.length) {
+      message.value = '认证完成！'
+      console.log('抓拍文件结果：', capturedFiles)
+      let formData = new FormData()
+      formData.append('live_photo1', capturedFiles.front)
+      formData.append('live_photo2', capturedFiles.mouth)
+      formData.append('live_photo3', capturedFiles.yaw)
+      try {
+        await uploadLivePhoto(formData)
+        const data = await checkLiveness()
+        if (!data.flag) {
+          ElMessage.error('检测失败，请重新检测')
+          await init()
+          return
+        }
+        const verifyCardData = await verifyCard()
+        if (!verifyCardData.flag) {
+          router.back()
+          return ElMessage.error('检测失败')
+        }
+        clearStorage()
+        router.push('/user/login')
+        ElMessage.warning('请重新登录')
+      } catch (e) {
+        ElMessage.error(e.message)
+      }
+
+      return
+    }
+
+    currentAction.value = actions[index]
+    await detectAction(actions[index])
+    index++
+    nextAction()
+  }
+
+  nextAction()
+}
+
+async function detectAction(action) {
+  return new Promise((resolve) => {
+    const interval = setInterval(async () => {
+      const detection = await faceapi
+        .detectSingleFace(video.value, new faceapi.TinyFaceDetectorOptions())
+        .withFaceLandmarks()
+
+      if (!detection) return
+
+      const landmarks = detection.landmarks
+
+      if (action === 'front') {
+        const leftEye = landmarks.getLeftEye()
+        const rightEye = landmarks.getRightEye()
+        const eyeDiff = Math.abs(leftEye[0].y - rightEye[3].y)
+        if (eyeDiff < 10) {
+          capturedFiles.front = await captureImage(video.value, 'front.png')
+          clearInterval(interval)
+          resolve()
+        }
+      }
+
+      if (action === 'mouth') {
+        if (isMouthOpen(landmarks)) {
+          capturedFiles.mouth = await captureImage(video.value, 'mouth.png')
+          clearInterval(interval)
+          resolve()
+        }
+      }
+
+      if (action === 'yaw') {
+        const yaw = estimateYaw(landmarks)
+        if (Math.abs(yaw) > YAW_THRESHOLD) {
+          capturedFiles.yaw = await captureImage(video.value, 'yaw.png')
+          clearInterval(interval)
+          resolve()
+        }
+      }
+    }, 200)
+  })
+}
+
+// ----------------- 工具函数 -----------------
+async function captureImage(videoEl, fileName) {
+  const canvas = document.createElement('canvas')
+  canvas.width = videoEl.videoWidth
+  canvas.height = videoEl.videoHeight
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(videoEl, 0, 0)
+
+  return new Promise((resolve) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) {
+          const file = new File([blob], fileName, { type: 'image/jpeg' })
+          resolve(file)
+        }
+      },
+      'image/jpeg',
+      0.95,
+    )
+  })
+}
+
+function isMouthOpen(landmarks) {
+  const mouth = landmarks.getMouth()
+  const top = mouth[13]
+  const bottom = mouth[19]
+  const distance = Math.hypot(top.x - bottom.x, top.y - bottom.y)
+  return distance > MOUTH_OPEN_THRESHOLD
+}
+
+function estimateYaw(landmarks) {
+  const nose = landmarks.getNose()
+  const noseTip = nose[3]
+  const noseBase = nose[0]
+  return noseTip.x - noseBase.x
+}
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<style scoped>
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  margin: 20px auto;
+}
+h2 {
+  text-align: center;
+  line-height: 40px;
+}
+.video-box {
+  width: 80vw;
+  height: 80vw;
+  border-radius: 50%;
+  overflow: hidden;
+  margin: 20px auto;
+  padding: 0;
+}
+video {
+  width: 100%;
+  height: 100%;
+  transform: scaleX(-1);
+  object-fit: cover;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.message {
+  text-align: center;
+  margin-top: 10px;
+  font-weight: bold;
+}
+.action-tip {
+  text-align: center;
+  margin-top: 80px;
+  font-size: 18px;
+  color: #333;
+}
+</style>
diff --git a/src/views/realName/index.vue b/src/views/realName/index.vue
new file mode 100644
index 0000000..3e43e7b
--- /dev/null
+++ b/src/views/realName/index.vue
@@ -0,0 +1,1015 @@
+<template>
+  <div class="mobile-id-upload">
+    <!-- 顶部导航 -->
+    <div class="nav-bar">
+      <div class="nav-back" @click="goBack">
+        <el-icon><ArrowLeft /></el-icon>
+      </div>
+      <h1 class="nav-title">证件上传</h1>
+      <div class="nav-placeholder"></div>
+    </div>
+
+    <!-- 步骤指示 -->
+    <!--        <div class="step-bar">-->
+    <!--            <div class="step-item" :class="{ active: step >= 1 }">-->
+    <!--                <div class="step-num">1</div>-->
+    <!--                <span>正面</span>-->
+    <!--            </div>-->
+    <!--            <div class="step-line" :class="{ active: step >= 2 }"></div>-->
+    <!--            <div class="step-item" :class="{ active: step >= 2 }">-->
+    <!--                <div class="step-num">2</div>-->
+    <!--                <span>反面</span>-->
+    <!--            </div>-->
+    <!--            <div class="step-line" :class="{ active: step >= 3 }"></div>-->
+    <!--            <div class="step-item" :class="{ active: step >= 3 }">-->
+    <!--                <div class="step-num">3</div>-->
+    <!--                <span>确认</span>-->
+    <!--            </div>-->
+    <!--        </div>-->
+    <div class="content-box">
+      <!-- 证件类型 -->
+      <div class="type-selector">
+        <div
+          class="type-item"
+          :class="{ active: form.idType === 'idcard' }"
+          @click="switchType('idcard')"
+        >
+          <el-icon><Postcard /></el-icon>
+          <span>身份证</span>
+        </div>
+        <div
+          class="type-item"
+          :class="{ active: form.idType === 'passport' }"
+          @click="switchType('passport')"
+        >
+          <el-icon><Ticket /></el-icon>
+          <span>护照</span>
+        </div>
+      </div>
+
+      <!-- 拍摄提示 -->
+      <div class="shoot-tips">
+        <div class="tips-title">
+          <el-icon><InfoFilled /></el-icon>
+          拍摄要求
+        </div>
+        <div class="tips-grid">
+          <div class="tip-item">
+            <div class="tip-icon">📷</div>
+            <span>光线充足</span>
+          </div>
+          <div class="tip-item">
+            <div class="tip-icon">⬜</div>
+            <span>背景纯色</span>
+          </div>
+          <div class="tip-item">
+            <div class="tip-icon">✋</div>
+            <span>手持平稳</span>
+          </div>
+          <div class="tip-item">
+            <div class="tip-icon">🔍</div>
+            <span>文字清晰</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 上传区域 -->
+      <div class="upload-section">
+        <!-- 正面 -->
+        <div class="upload-card" :class="{ uploaded: form.frontImage }">
+          <div class="card-label">
+            <span class="label-tag">必传</span>
+            {{ frontLabel }}
+          </div>
+
+          <div
+            class="upload-area"
+            @click="handleClickUpload('front')"
+            @touchstart="touchStart"
+            @touchend="touchEndFront"
+          >
+            <input
+              ref="frontInputRef"
+              type="file"
+              accept="image/*"
+              style="display: none"
+              @change="(e: Event) => handleFileChange(e, 'front')"
+            />
+
+            <template v-if="form.frontImage">
+              <div class="preview-wrap">
+                <img
+                  :src="form.frontPreview"
+                  alt="正面"
+                  @click.stop="previewImage(form.frontPreview)"
+                />
+                <div class="preview-mask" @click.stop>
+                  <el-icon @click="previewImage(form.frontPreview)"><ZoomIn /></el-icon>
+                  <el-icon @click="removeImage('front')"><Delete /></el-icon>
+                </div>
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="upload-inner" :class="{ pressing: frontPressing }">
+                <div class="camera-icon">
+                  <el-icon><Camera /></el-icon>
+                  <div class="camera-ring"></div>
+                </div>
+                <p class="upload-title">点击拍照或选择相册</p>
+                <p class="upload-desc">支持 JPG、PNG，最大 5MB</p>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <!-- 反面 -->
+        <div class="upload-card" :class="{ uploaded: form.backImage }">
+          <div class="card-label">
+            <span class="label-tag">必传</span>
+            {{ backLabel }}
+          </div>
+
+          <div
+            class="upload-area"
+            @click="handleClickUpload('back')"
+            @touchstart="touchStartBack"
+            @touchend="touchEndBack"
+          >
+            <input
+              ref="backInputRef"
+              type="file"
+              accept="image/*"
+              style="display: none"
+              @change="(e: Event) => handleFileChange(e, 'back')"
+            />
+
+            <template v-if="form.backImage">
+              <div class="preview-wrap">
+                <img
+                  :src="form.backPreview"
+                  alt="反面"
+                  @click.stop="previewImage(form.backPreview)"
+                />
+                <div class="preview-mask" @click.stop>
+                  <el-icon @click="previewImage(form.backPreview)"><ZoomIn /></el-icon>
+                  <el-icon @click="removeImage('back')"><Delete /></el-icon>
+                </div>
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="upload-inner" :class="{ pressing: backPressing }">
+                <div class="camera-icon">
+                  <el-icon><Camera /></el-icon>
+                  <div class="camera-ring"></div>
+                </div>
+                <p class="upload-title">点击拍照或选择相册</p>
+                <p class="upload-desc">支持 JPG、PNG，最大 5MB</p>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部提交 -->
+    <div class="bottom-bar">
+      <el-button
+        class="submit-btn"
+        type="primary"
+        size="large"
+        :loading="submitting"
+        :disabled="!isReady"
+        @click="handleSubmit"
+      >
+        {{ isReady ? '提交审核' : `请上传${!form.frontImage ? '正面' : '反面'}照片` }}
+      </el-button>
+    </div>
+
+    <!-- 大图预览 -->
+    <el-dialog
+      v-model="previewVisible"
+      :show-close="false"
+      width="90%"
+      class="preview-dialog"
+      destroy-on-close
+    >
+      <img :src="previewUrl" class="preview-img" alt="preview" />
+      <div class="preview-close" @click="previewVisible = false">
+        <el-icon><Close /></el-icon>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  ArrowLeft,
+  Postcard,
+  Ticket,
+  Camera,
+  ZoomIn,
+  Delete,
+  InfoFilled,
+  Close,
+} from '@element-plus/icons-vue'
+import { uploadCard } from '@/api/modules/livenessVerification'
+
+/* ==================== 类型定义 ==================== */
+
+/** 证件类型 */
+type IdType = 'idcard' | 'passport'
+
+/** 照片面类型 */
+type PhotoSide = 'front' | 'back'
+
+/** 证件表单数据 */
+interface IdForm {
+  idType: IdType
+  frontImage: File | null
+  frontPreview: string
+  backImage: File | null
+  backPreview: string
+}
+
+/** 提交载荷 */
+interface SubmitPayload {
+  idType: IdType
+  frontImage: File
+  backImage: File
+}
+
+/** 上传错误类型 */
+interface UploadError {
+  side: PhotoSide
+  message: string
+}
+
+/* ==================== 常量配置 ==================== */
+
+const MAX_SIZE_MB = 5 // 最大文件大小（MB）
+
+/* ==================== 响应式数据 ==================== */
+
+const router = useRouter()
+
+const form = reactive<IdForm>({
+  idType: 'idcard',
+  frontImage: null,
+  frontPreview: '',
+  backImage: null,
+  backPreview: '',
+})
+
+const errors = reactive<Record<PhotoSide, string>>({
+  front: '',
+  back: '',
+})
+
+const frontInputRef = ref<HTMLInputElement | null>(null)
+const backInputRef = ref<HTMLInputElement | null>(null)
+
+const submitting = ref<boolean>(false)
+const previewVisible = ref<boolean>(false)
+const previewUrl = ref<string>('')
+
+const frontPressing = ref<boolean>(false)
+const backPressing = ref<boolean>(false)
+
+let touchTimer: ReturnType<typeof setTimeout> | null = null
+// 标记是否已通过触摸事件处理（防止 touchEnd 和 click 双重触发）
+let touchedFront = false
+let touchedBack = false
+
+/* ==================== 计算属性 ==================== */
+
+const step = computed<number>(() => {
+  if (form.frontImage && form.backImage) return 3
+  if (form.frontImage || form.backImage) return 2
+  return 1
+})
+
+const frontLabel = computed<string>(() =>
+  form.idType === 'idcard' ? '身份证人像面' : '护照个人信息页',
+)
+
+const backLabel = computed<string>(() =>
+  form.idType === 'idcard' ? '身份证国徽面' : '护照封底/签证页',
+)
+
+const isReady = computed<boolean>(() => Boolean(form.frontImage && form.backImage))
+
+const maxSizeBytes = computed<number>(() => MAX_SIZE_MB * 1024 * 1024)
+
+/* ==================== 方法 ==================== */
+
+/**
+ * 切换证件类型
+ * @param type - 目标证件类型
+ */
+const switchType = async (type: IdType): Promise<void> => {
+  if (form.frontImage || form.backImage) {
+    try {
+      await ElMessageBox.confirm('切换证件类型将清空已上传照片，是否继续？', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+      resetAll()
+      form.idType = type
+    } catch {
+      // 用户取消，不做任何操作
+    }
+  } else {
+    form.idType = type
+  }
+}
+
+/** 重置所有数据 */
+const resetAll = (): void => {
+  if (form.frontPreview) URL.revokeObjectURL(form.frontPreview)
+  if (form.backPreview) URL.revokeObjectURL(form.backPreview)
+  form.frontImage = null
+  form.frontPreview = ''
+  form.backImage = null
+  form.backPreview = ''
+  errors.front = ''
+  errors.back = ''
+  if (frontInputRef.value) frontInputRef.value.value = ''
+  if (backInputRef.value) backInputRef.value.value = ''
+}
+
+/**
+ * 触发文件选择
+ * @param side - 正面或反面
+ */
+const triggerUpload = (side: PhotoSide): void => {
+  const input = side === 'front' ? frontInputRef.value : backInputRef.value
+  input?.click()
+}
+
+/**
+ * 点击上传（带触摸防抖）
+ * 移动端：touchEnd 已处理 → touched=true → click 跳过
+ * 桌面端：无 touch 事件 → touched=false → click 正常执行
+ */
+const handleClickUpload = (side: PhotoSide): void => {
+  const isTouched = side === 'front' ? touchedFront : touchedBack
+  if (isTouched) {
+    // 已经被 touchEnd 处理过了，跳过
+    return
+  }
+  // 桌面端或未经过触摸的情况，正常触发
+  triggerUpload(side)
+}
+
+/* ---------- 触摸反馈 ---------- */
+
+const touchStart = (): void => {
+  frontPressing.value = true
+  touchedFront = true // 标记正面已触摸
+  if (touchTimer) clearTimeout(touchTimer)
+}
+
+/** 正面：触摸结束 → 触发上传 */
+const touchEndFront = (): void => {
+  frontPressing.value = true
+  triggerUpload('front')
+
+  touchTimer = setTimeout(() => {
+    frontPressing.value = false
+    touchedFront = false // 延迟重置，允许下一次操作
+  }, 300) // 300ms > 浏览器 click 延迟
+}
+
+const touchStartBack = (): void => {
+  backPressing.value = true
+  touchedBack = true // 标记反面已触摸
+  if (touchTimer) clearTimeout(touchTimer)
+}
+
+/** 反面：触摸结束 → 触发上传 */
+const touchEndBack = (): void => {
+  backPressing.value = true
+  triggerUpload('back')
+
+  touchTimer = setTimeout(() => {
+    backPressing.value = false
+    touchedBack = false // 延迟重置，允许下一次操作
+  }, 300) // 300ms > 浏览器 click 延迟
+}
+
+/* ---------- 图片处理 ---------- */
+
+/**
+ * 验证文件
+ * @param file - 待验证文件
+ * @param side - 上传面
+ * @returns 是否通过验证
+ */
+const validateFile = (file: File, side: PhotoSide): boolean => {
+  errors[side] = ''
+
+  if (!file.type.startsWith('image/')) {
+    errors[side] = '仅支持图片文件'
+    ElMessage.error('请选择图片文件')
+    return false
+  }
+
+  if (file.size > maxSizeBytes.value) {
+    errors[side] = `文件大小不能超过 ${MAX_SIZE_MB}MB`
+    ElMessage.error(`文件过大，最大支持 ${MAX_SIZE_MB}MB`)
+    return false
+  }
+
+  return true
+}
+
+/**
+ * 处理文件选择变化
+ * @param event - 输入事件
+ * @param side - 上传面
+ */
+const handleFileChange = async (event: Event, side: PhotoSide): Promise<void> => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+
+  if (!validateFile(file, side)) {
+    target.value = ''
+    return
+  }
+
+  try {
+    // 创建预览 URL
+    const previewUrl = URL.createObjectURL(file)
+
+    if (side === 'front') {
+      // 释放旧的预览 URL
+      if (form.frontPreview) URL.revokeObjectURL(form.frontPreview)
+      form.frontImage = file
+      form.frontPreview = previewUrl
+    } else {
+      if (form.backPreview) URL.revokeObjectURL(form.backPreview)
+      form.backImage = file
+      form.backPreview = previewUrl
+    }
+  } catch (err) {
+    const errorMsg = err instanceof Error ? err.message : '图片处理失败'
+    ElMessage.error(errorMsg)
+  } finally {
+    target.value = ''
+  }
+}
+
+/**
+ * 删除已上传图片
+ * @param side - 要删除的面
+ */
+const removeImage = async (side: PhotoSide): Promise<void> => {
+  try {
+    await ElMessageBox.confirm('确定删除这张照片？', '删除确认', {
+      confirmButtonText: '删除',
+      cancelButtonText: '保留',
+      type: 'warning',
+    })
+
+    if (side === 'front') {
+      if (form.frontPreview) URL.revokeObjectURL(form.frontPreview)
+      form.frontImage = null
+      form.frontPreview = ''
+    } else {
+      if (form.backPreview) URL.revokeObjectURL(form.backPreview)
+      form.backImage = null
+      form.backPreview = ''
+    }
+
+    const input = side === 'front' ? frontInputRef.value : backInputRef.value
+    if (input) input.value = ''
+    ElMessage.success('已删除')
+  } catch {
+    // 取消删除
+  }
+}
+
+/**
+ * 预览图片
+ * @param url - 图片地址
+ */
+const previewImage = (url: string): void => {
+  previewUrl.value = url
+  previewVisible.value = true
+}
+
+/** 提交表单 */
+const handleSubmit = async (): Promise<void> => {
+  if (!isReady.value) return
+
+  submitting.value = true
+  try {
+    const formData = new FormData()
+    formData.append('type', form.idType === 'idcard' ? '1' : '2')
+    formData.append('card_1', form.frontImage!)
+    formData.append('card_2', form.backImage!)
+
+    await uploadCard(formData)
+
+    router.push('/livenessVerification')
+  } catch (err) {
+    const errorMsg = err instanceof Error ? err.message : '提交失败'
+    ElMessage.error(errorMsg)
+  } finally {
+    submitting.value = false
+  }
+}
+
+/** 返回上一页 */
+const goBack = (): void => {
+  if (form.frontImage || form.backImage) {
+    ElMessageBox.confirm('退出将丢失已上传的照片，是否继续？', '提示', {
+      confirmButtonText: '退出',
+      cancelButtonText: '留在页面',
+      type: 'warning',
+    })
+      .then(() => {
+        // 清理预览 URL
+        if (form.frontPreview) URL.revokeObjectURL(form.frontPreview)
+        if (form.backPreview) URL.revokeObjectURL(form.backPreview)
+        router.back()
+      })
+      .catch(() => {})
+  } else {
+    router.back()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.mobile-id-upload {
+  width: 100vw;
+  min-height: 100vh;
+  background: #f5f6fa;
+  padding-bottom: 100px;
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// ========== 导航栏 ==========
+.nav-bar {
+  width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 16px;
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+
+  .nav-back {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #333;
+    border-radius: 50%;
+
+    &:active {
+      background: #f5f5f5;
+    }
+  }
+
+  .nav-title {
+    font-size: 17px;
+    font-weight: 600;
+    color: #1a1a1a;
+  }
+
+  .nav-placeholder {
+    width: 32px;
+  }
+}
+
+.content-box {
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  overflow-y: auto;
+}
+
+// ========== 步骤条 ==========
+.step-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 24px;
+  background: #fff;
+  margin-bottom: 12px;
+
+  .step-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+
+    .step-num {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: #e4e7ed;
+      color: #909399;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 600;
+      transition: all 0.3s;
+    }
+
+    span {
+      font-size: 12px;
+      color: #909399;
+    }
+
+    &.active {
+      .step-num {
+        background: var(--el-color-primary);
+        color: #fff;
+      }
+      span {
+        color: var(--el-color-primary);
+        font-weight: 500;
+      }
+    }
+  }
+
+  .step-line {
+    width: 40px;
+    height: 2px;
+    background: #e4e7ed;
+    margin: 0 12px;
+    margin-bottom: 20px;
+    transition: all 0.3s;
+
+    &.active {
+      background: var(--el-color-primary);
+    }
+  }
+}
+
+// ========== 证件类型选择 ==========
+.type-selector {
+  display: flex;
+  gap: 12px;
+  padding: 0 16px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+
+  .type-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 0;
+    background: #fff;
+    border-radius: 12px;
+    border: 2px solid transparent;
+    transition: all 0.2s;
+
+    .el-icon {
+      font-size: 28px;
+      color: #909399;
+    }
+
+    span {
+      font-size: 14px;
+      color: #606266;
+    }
+
+    &.active {
+      border-color: var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+
+      .el-icon,
+      span {
+        color: var(--el-color-primary);
+      }
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+}
+
+// ========== 上传卡片 ==========
+.upload-section {
+  padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.upload-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
+  &.uploaded {
+    .upload-area {
+      border-color: var(--el-color-success);
+      background: var(--el-color-success-light-9);
+    }
+  }
+}
+
+.card-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1a1a1a;
+
+  .label-tag {
+    font-size: 11px;
+    padding: 2px 6px;
+    background: var(--el-color-danger-light-9);
+    color: var(--el-color-danger);
+    border-radius: 4px;
+    font-weight: 500;
+  }
+}
+
+// ========== 上传区域 ==========
+.upload-area {
+  width: 100%;
+  aspect-ratio: 1.6;
+  border-radius: 12px;
+  border: 2px dashed #dcdfe6;
+  background: #fafbfc;
+  overflow: hidden;
+  position: relative;
+  transition: all 0.2s;
+
+  &:active {
+    border-color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+  }
+}
+
+.upload-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: transform 0.1s;
+
+  &.pressing {
+    transform: scale(0.96);
+  }
+
+  .camera-icon {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-icon {
+      font-size: 36px;
+      color: var(--el-color-primary);
+      z-index: 2;
+    }
+
+    .camera-ring {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      border: 2px solid var(--el-color-primary-light-5);
+      animation: pulse 2s infinite;
+    }
+  }
+
+  .upload-title {
+    font-size: 15px;
+    color: #303133;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .upload-desc {
+    font-size: 12px;
+    color: #909399;
+    margin: 0;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.6;
+  }
+}
+
+// ========== 预览 ==========
+.preview-wrap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .preview-mask {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 24px;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    .el-icon {
+      font-size: 28px;
+      color: #fff;
+      padding: 12px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  &:active .preview-mask {
+    opacity: 1;
+  }
+}
+
+// ========== 拍摄提示 ==========
+.shoot-tips {
+  margin: 16px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 16px;
+
+  .tips-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 12px;
+
+    .el-icon {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .tips-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+
+    .tip-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+
+      .tip-icon {
+        font-size: 24px;
+      }
+
+      span {
+        font-size: 12px;
+        color: #606266;
+      }
+    }
+  }
+}
+
+// ========== 底部提交 ==========
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12px 16px 24px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+  z-index: 100;
+
+  .submit-btn {
+    width: 100%;
+    height: 48px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 24px;
+
+    &:disabled {
+      background: #c0c4cc;
+      border-color: #c0c4cc;
+    }
+  }
+}
+
+// ========== 预览弹窗 ==========
+.preview-dialog {
+  :deep(.el-dialog) {
+    border-radius: 12px;
+    overflow: hidden;
+    margin-top: 15vh !important;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 0;
+  }
+
+  .preview-img {
+    width: 100%;
+    display: block;
+  }
+
+  .preview-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 20px;
+  }
+}
+
+// ========== 加载遮罩 ==========
+.loading-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #fff;
+  z-index: 9999;
+
+  .loading-icon {
+    font-size: 32px;
+    animation: rotate 1s linear infinite;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// ========== 适配安全区 ==========
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .bottom-bar {
+    padding-bottom: calc(24px + env(safe-area-inset-bottom));
+  }
+
+  .mobile-id-upload {
+    padding-bottom: calc(100px + env(safe-area-inset-bottom));
+  }
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index e5ba6a7..e3106da 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,7 @@ import { loadEnv, defineConfig, ConfigEnv } from 'vite'
 import type { UserConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import basicSsl from '@vitejs/plugin-basic-ssl'
 
 // 自动导入插件
 import AutoImport from 'unplugin-auto-import/vite'
@@ -37,6 +38,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         dts: 'src/components.d.ts',
         dirs: ['src/components'],
       }),
+      basicSsl(),
     ],
     resolve: {
       alias: {
@@ -84,6 +86,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
       host: true,
       port: 9999,
       open: true,
+      https: true,
       proxy: {
         '/api': {
           target: env.VITE_API_BASE_URL,