diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..48d1d17cef5dccae17449526f068804f061cf46f
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "vueIndentScriptAndStyle": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index fec16197c725f4dc709bb9cbbad20ffd3bc00bc0..ba2dad46fbead7e9cc53073139e91e79d358ba01 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -59,5 +59,10 @@
     "CHANGELOG.md": "CHANGELOG*",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,.npmrc,.browserslistrc",
     ".eslintrc.cjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,.stylelintrc.*,.eslintrc-auto-import.json,.editorconfig,.commitlint.cjs"
+  },
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "on",
+    "strings": "on"
   }
 }
diff --git a/package.json b/package.json
index 04106a1168837061dd18393e2a9b95cde06ee4ca..095645cd3283f065e42a494b77aecf760747f14e 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "@dcloudio/uni-components": "3.0.0-alpha-4010520240507001",
     "@dcloudio/uni-h5": "3.0.0-alpha-4010520240507001",
     "@dcloudio/uni-mp-weixin": "3.0.0-alpha-4010520240507001",
+    "@iconify/json": "^2.2.260",
     "dayjs": "1.11.10",
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "3.2.1",
diff --git a/src/App.vue b/src/App.vue
index 21c41bbdf60122843e6e2446914adfbe535db153..f4fa07434758552f6bbf7c902160e6eae4d69470 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,62 +1,74 @@
 <script setup lang="ts">
-import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
-
-onLaunch(() => {
-  console.log('App Launch')
-})
-onShow(() => {
-  console.log('App Show')
-})
-onHide(() => {
-  console.log('App Hide')
-})
+  import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
+
+  onLaunch(() => {
+    console.log('App Launch')
+  })
+  onShow(() => {
+    console.log('App Show')
+  })
+  onHide(() => {
+    console.log('App Hide')
+  })
 </script>
 
 <style lang="scss">
-page {
-  // 默认背景颜色
-  background: #f2f3f7;
-}
-/* stylelint-disable selector-type-no-unknown */
-button::after {
-  border: none;
-}
-
-swiper,
-scroll-view {
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
-}
-
-image {
-  width: 100%;
-  height: 100%;
-  vertical-align: middle;
-}
-
-// 单行省略，优先使用 unocss: text-ellipsis
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// 两行省略
-.ellipsis-2 {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-// 三行省略
-.ellipsis-3 {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
+  page {
+    height: 100%;
+    // 默认背景颜色
+    background: #f2f3f7;
+  }
+  /* stylelint-disable selector-type-no-unknown */
+  button::after {
+    border: none;
+  }
+
+  swiper,
+  scroll-view {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  // 单行省略，优先使用 unocss: text-ellipsis
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 两行省略
+  .ellipsis-2 {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  // 三行省略
+  .ellipsis-3 {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  view {
+    box-sizing: border-box;
+  }
 </style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 768d87501f8d6f885aeca4697685b1f028edb05e..4d0b0dadc08354d672439131e43b085b9737543b 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <wd-config-provider :themeVars="themeVars">
+  <wd-config-provider :themeVars="themeVars" class="h-full">
     <slot />
     <wd-toast />
     <wd-message-box />
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
+  import type { ConfigProviderThemeVars } from 'wot-design-uni'
 
-const themeVars: ConfigProviderThemeVars = {
-  // colorTheme: 'red',
-  // buttonPrimaryBgColor: '#07c160',
-  // buttonPrimaryColor: '#07c160',
-}
+  const themeVars: ConfigProviderThemeVars = {
+    // colorTheme: 'red',
+    // buttonPrimaryBgColor: '#07c160',
+    // buttonPrimaryColor: '#07c160',
+  }
 </script>
diff --git a/src/pages.json b/src/pages.json
index 5a442d81275ddd3717305d9793d629753b3f9443..097498da631d4e561ab4ecd111449cf66b4f3ad8 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -82,13 +82,35 @@
         "navigationBarTitleText": "通讯录"
       }
     },
+    {
+      "path": "pages/login/forget",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "忘记密码"
+      }
+    },
     {
       "path": "pages/login/index",
       "type": "page",
       "style": {
+        "navigationStyle": "custom",
         "navigationBarTitleText": "登录页面"
       }
     },
+    {
+      "path": "pages/login/phone-index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/login/registerCode",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "获取验证码"
+      }
+    },
     {
       "path": "pages/message/index",
       "type": "page",
diff --git a/src/pages/login/components/Banner.vue b/src/pages/login/components/Banner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..36d83cb719e7b7f8d57803e3956177eeb77f499c
--- /dev/null
+++ b/src/pages/login/components/Banner.vue
@@ -0,0 +1,23 @@
+<!-- banner区域 -->
+<template>
+  <view class="relative w-full h-50">
+    <view class="absolute pt-15 pl-8 z-1 text-white">
+      <view>
+        <text class="text-8 font-700">你好</text>
+      </view>
+      <view class="mt-4">
+        <text class="text-6">欢迎登录芋道快速开发平台</text>
+      </view>
+    </view>
+    <!-- TODO @芋艿：后续把静态资源，放到 CDN -->
+    <image
+      class="w-full h-full"
+      src="/static/images/login-bg.png"
+      mode="aspectFill"
+    />
+  </view>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'Banner' })
+</script>
diff --git a/src/pages/login/components/Copyright.vue b/src/pages/login/components/Copyright.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f47ab9c7fab1cac3261c9a132de08f0ffbd1a66c
--- /dev/null
+++ b/src/pages/login/components/Copyright.vue
@@ -0,0 +1,30 @@
+<!-- 隐私与用户条款 -->
+<template>
+  <view class="pb-2 flex justify-center text-3 text-[#999]">
+    <wd-checkbox v-model="isAgree" @change="toggleAgree" />
+    <text>已阅读并同意</text>
+    <text class="text-[#0B5EFF]">《用户协议》</text>
+    <text>和</text>
+    <text class="text-[#0B5EFF]">《隐私政策》</text>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'Copyright' })
+  const props = defineProps({
+    agree: {
+      type: Boolean
+    }
+  })
+  const isAgree = ref(props.agree)
+
+  const emits = defineEmits(['update:agree'])
+  /*
+   *@Description: 是否阅读且同意协议
+   *@MethodAuthor: xiaohong
+   *@Date: 2024-10-17 16:08:17
+   */
+  function toggleAgree() {
+    emits('update:agree', isAgree.value)
+  }
+</script>
diff --git a/src/pages/login/components/LoginForm.vue b/src/pages/login/components/LoginForm.vue
index b449cbb129f3a2575bb08ab9b24c9e7124ac14a9..6ac059542fbed61aa28a3dc5f3cbc7229a164584 100644
--- a/src/pages/login/components/LoginForm.vue
+++ b/src/pages/login/components/LoginForm.vue
@@ -1,146 +1,141 @@
 <!-- 账号密码登录 -->
 <template>
-  <view class="mt-4">
-    <view>
-      <wd-form ref="gennerateForm" :model="loginData.loginForm" class="">
-        <view class="flex flex-col items-center gap-4">
-          <view
-            class="rounded-xl p-10rpx border-2rpx border-blue-400 border-solid"
-            :class="{
-              'border-4rpx border-blue-500 p-8rpx': focusInput === 'tenantName',
-            }"
-          >
-            <wd-input
-              v-if="loginData.tenantEnable"
-              type="text"
-              placeholder="请输入租户名称"
-              v-model="loginData.loginForm.tenantName"
-              custom-class="w-620rpx"
-              :no-border="true"
-              @focus="() => handleInputFocus('tenantName')"
-            />
-          </view>
-
-          <view
-            class="rounded-xl p-10rpx border-2rpx border-blue-400 border-solid"
-            :class="{
-              'border-4rpx border-blue-500 p-8rpx': focusInput === 'username',
-            }"
-          >
-            <wd-input
-              type="text"
-              v-model="loginData.loginForm.username"
-              placeholder="请输入账号"
-              custom-class="w-620rpx"
-              :no-border="true"
-              @focus="() => handleInputFocus('username')"
-            />
-          </view>
-
-          <view
-            class="rounded-xl p-10rpx border-2rpx border-blue-400 border-solid"
-            :class="{
-              'border-4rpx border-blue-500 p-8rpx': focusInput === 'password',
-            }"
-          >
-            <wd-input
-              type="password"
-              v-model="loginData.loginForm.password"
-              placeholder="请输入密码"
-              custom-class="w-620rpx"
-              :no-border="true"
-              @focus="() => handleInputFocus('password')"
-            />
-          </view>
-        </view>
-      </wd-form>
-    </view>
-    <view class="w-620rpx mx-auto">
-      <wd-button custom-class="mt-8" type="primary" block @click="handleLogin">
-        <text>登录</text>
-      </wd-button>
+  <wd-form :model="loginData.loginForm" ref="gennerateForm">
+    <wd-input
+      v-model="loginData.loginForm.username"
+      prop="username"
+      :rules="[{ required: true, message: '请填写用户名' }]"
+      placeholder="请输入用户名"
+      prefixIcon="user"
+    />
+
+    <wd-input
+      v-model="loginData.loginForm.password"
+      prop="password"
+      :rules="[{ required: true, message: '请填写密码' }]"
+      placeholder="请输入密码"
+      show-password
+      prefixIcon="lock-on"
+    />
+
+    <view class="flex items-center justify-between mt-4">
+      <wd-checkbox
+        v-model="loginData.loginForm.rememberMe"
+        prop="rememberMe"
+        shape="square"
+      >
+        记住
+      </wd-checkbox>
+      <navigator url="forget" class="text-[var(--wot-color-primary)]">
+        忘记密码
+      </navigator>
     </view>
 
+    <wd-button
+      :block="true"
+      :round="false"
+      custom-class="mt-8"
+      @click="handleLogin('userinfo')"
+    >
+      <text>登录</text>
+    </wd-button>
+
+    <wd-button
+      :block="true"
+      :round="false"
+      :plain="true"
+      type="info"
+      class="mt-4"
+      @click="handleLogin('phoneIndex')"
+    >
+      <text>本机号登录</text>
+    </wd-button>
+
     <!-- 提示组件 -->
     <wd-toast />
-  </view>
+  </wd-form>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { useToast } from 'wot-design-uni'
-import { login, getTenantIdByName } from '@/service/login/LoginAPI'
-import { useUserStore } from '@/store'
-import * as authUtil from '@/utils/auth'
-
-// 提示组件 TODO @ Qiksy 讨论：// 提示组件 这种，我们要不放在 useToast()，作为尾注释，简洁一点。
-const toast = useToast()
-
-const focusInput = ref('')
-const handleInputFocus = (type: string) => {
-  focusInput.value = type
-}
-
-const props = defineProps({
-  agree: {
-    type: Boolean,
-    required: true,
-    default: false,
-  },
-})
-
-const loginData = reactive({
-  isShowPassword: false,
-  captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
-  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
-  loginForm: {
-    tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
-    username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
-    password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
-    captchaVerification: '',
-    rememberMe: true, // 默认记录我。如果不需要，可手动修改
-  },
-})
-
-// 获取租户 ID // TODO @ Qiksy 讨论：这个方法注释，要不用 /** 获取租户 ID */ 高亮的更明显哈。
-const getTenantId = async () => {
-  if (loginData.tenantEnable === 'true') {
-    const res = (await getTenantIdByName(loginData.loginForm.tenantName)) as string
-    authUtil.setTenantId(res)
-  }
-}
-
-const handleLogin = async () => {
-  console.log('账号密码登录')
-  focusInput.value = ''
-  if (!props.agree) {
-    toast.warning('请阅读并同意《用户协议》和《隐私政策》')
-    return
-  }
+  import { ref, reactive } from 'vue'
+  import { useToast } from 'wot-design-uni'
+  import { login, getTenantIdByName } from '@/service/login/LoginAPI'
+  import { useUserStore } from '@/store'
+  import * as authUtil from '@/utils/auth'
+
+  const props = defineProps({
+    agree: {
+      type: Boolean,
+      required: true,
+      default: false
+    }
+  })
 
-  // 1. 先根据租户名，获取 tenantId
-  await getTenantId()
+  // 提示组件 TODO @ Qiksy 讨论：// 提示组件 这种，我们要不放在 useToast()，作为尾注释，简洁一点。
+  const toast = useToast()
 
-  // todo 校验form数据
-  const res = await login(loginData.loginForm)
-  if (!res) {
-    return
+  const focusInput = ref('')
+  const handleInputFocus = (type: string) => {
+    focusInput.value = type
   }
 
-  authUtil.setToken(res)
-
-  // 获取用户信息，保存到 store
-  const userStore = useUserStore()
-  await userStore.setUserInfoAction()
-
-  // 暂时先跳到首页
-  uni.switchTab({
-    url: '/pages/work/index',
+  const loginData = reactive({
+    isShowPassword: false,
+    captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
+    tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
+    loginForm: {
+      tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+      username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
+      password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
+      captchaVerification: '',
+      rememberMe: true // 默认记录我。如果不需要，可手动修改
+    }
   })
-  console.log('登录成功')
 
-  // todo 判断重定向
+  // 获取租户 ID // TODO @ Qiksy 讨论：这个方法注释，要不用 /** 获取租户 ID */ 高亮的更明显哈。
+  const getTenantId = async () => {
+    if (loginData.tenantEnable === 'true') {
+      const res = (await getTenantIdByName(
+        loginData.loginForm.tenantName
+      )) as string
+      authUtil.setTenantId(res)
+    }
+  }
 
-  // todo 处理页面loading展示
-}
+  const handleLogin = async (type: string) => {
+    if (!props.agree) {
+      toast.warning('请阅读并同意《用户协议》和《隐私政策》')
+      return
+    }
+    if (type === 'userinfo') {
+      focusInput.value = ''
+
+      // 1. 先根据租户名，获取 tenantId
+      await getTenantId()
+
+      // todo 校验form数据
+      const res = await login(loginData.loginForm)
+      if (!res) {
+        return
+      }
+
+      authUtil.setToken(res)
+
+      // 获取用户信息，保存到 store
+      const userStore = useUserStore()
+      await userStore.setUserInfoAction()
+
+      // 暂时先跳到首页
+      uni.switchTab({
+        url: '/pages/work/index'
+      })
+      console.log('登录成功')
+
+      // todo 判断重定向
+
+      // todo 处理页面loading展示
+    } else {
+      uni.navigateTo({ url: '/pages/login/phone-index' })
+    }
+  }
 </script>
diff --git a/src/pages/login/components/MoreLoginWays.vue b/src/pages/login/components/MoreLoginWays.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e99d9ada09206ea821ef33c7d73ab3ead6473b61
--- /dev/null
+++ b/src/pages/login/components/MoreLoginWays.vue
@@ -0,0 +1,14 @@
+<!-- 更多登录方式 -->
+<template>
+  <view class="w-full">
+    <wd-divider class="mb-4">更多登录方式</wd-divider>
+    <view class="flex justify-around items-center">
+      <view class="i-ic:round-wechat w-7 h-7 text-[var(--wot-color-primary)]" />
+      <view class="i-cib:qq w-6 h-6 text-[var(--wot-color-primary)]" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'MoreLoginWays' })
+</script>
diff --git a/src/pages/login/components/PhoneLogin.vue b/src/pages/login/components/PhoneLogin.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0cc9174a07f6b37b13e08fc8e5f670ae2ec71233
--- /dev/null
+++ b/src/pages/login/components/PhoneLogin.vue
@@ -0,0 +1,36 @@
+<!-- 手机号登录 -->
+<template>
+  <wd-form :model="loginData.loginForm" ref="gennerateForm">
+    <wd-input
+      v-model="loginData.loginForm.phoneNo"
+      prefixIcon="phone"
+      placeholder="请输入手机号"
+      @focus="() => handleInputFocus('tenantName')"
+    />
+    <view class="mt-5">
+      还没有账号？
+      <navigator href="#" class="inline text-[var(--wot-color-primary)]">
+        注册账号
+      </navigator>
+    </view>
+
+    <wd-button :block="true" :round="false" custom-class="mt-8">
+      <text>下一步</text>
+    </wd-button>
+  </wd-form>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({ name: 'PhoneLogin' })
+  const loginData = ref({
+    loginForm: {
+      tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
+      username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
+      password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
+      phoneNo: '',
+      rememberMe: true // 默认记录我。如果不需要，可手动修改
+    }
+  })
+
+  function handleInputFocus(name: string) {}
+</script>
diff --git a/src/pages/login/forget.vue b/src/pages/login/forget.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b643f65b303d2e924c4778fc99e34a77e614cf5
--- /dev/null
+++ b/src/pages/login/forget.vue
@@ -0,0 +1,52 @@
+<route lang="json5" type="page">
+{
+  style: {
+    navigationBarTitleText: '忘记密码'
+  }
+}
+</route>
+
+<template>
+  <view class="h-full p-4 bg-white">
+    <view class="mb-5 font-700 text-5">忘记密码</view>
+    <wd-form :model="formData.phoneNo" ref="form">
+      <wd-input
+        v-model="formData.phoneNo"
+        prop="phoneNo"
+        :rules="[{ required: true, message: '请输入手机号' }]"
+        type="number"
+        placeholder="请输入手机号"
+        prefixIcon="phone"
+      />
+
+      <wd-button
+        :block="true"
+        :round="false"
+        class="mt-4"
+        @click="getRegisterCode"
+      >
+        <text>获取验证码</text>
+      </wd-button>
+    </wd-form>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  //
+  const formData = ref({
+    phoneNo: ''
+  })
+
+  /*
+   *@Description: 跳转到验证码填写页面
+   *@MethodAuthor: xiaohong
+   *@Date: 2024-10-17 15:32:31
+   */
+  function getRegisterCode() {
+    uni.navigateTo({ url: '/pages/login/registerCode' })
+  }
+</script>
+
+<style lang="scss" scoped>
+  //
+</style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 9479b3b234f9272b67a23b3a3be2210266d57ace..e1b503de93c017c852f2f603af7b7d8535744724 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,74 +1,65 @@
 <route lang="json5" type="page">
 {
   style: {
-    navigationBarTitleText: '登录页面',
-  },
+    navigationStyle: 'custom',
+    navigationBarTitleText: '登录页面'
+  }
 }
 </route>
 
 <template>
-  <view class="relative h-full">
+  <view class="h-full pb-30 bg-white overflow-auto">
     <!-- banner区域 -->
-    <view class="absolute w-full h-480rpx">
-      <view class="color-white pt-[116rpx] pl-[68rpx] z-10">
-        <view><text class="text-[64rpx] font-700">你好</text></view>
-        <view class="mt-[36rpx]"><text class="text-[36rpx]">欢迎登录芋道快速开发平台</text></view>
-      </view>
-      <!-- TODO @芋艿：后续把静态资源，放到 CDN -->
-      <image
-        class="absolute w-full top-0 -z-1"
-        src="/static/images/login-bg.png"
-        mode="aspectFit"
-      />
-    </view>
+    <Banner />
+
     <!-- 主要容器区域 -->
-    <!-- 430rpx 是上面banner的高度，50rpx是留给底部的空间 -->
-    <view
-      class="top-[430rpx] h-[calc(100vh-430rpx-50rpx)] w-full rounded-t-2xl bg-white flex flex-col items-center absolute px-4 box-border"
-    >
+    <view class="p-4">
       <!-- tabs 切换 -->
-      <wd-tabs v-model="tab" custom-class="h-full">
-        <block :key="0">
-          <wd-tab title="手机号登录">手机号登录</wd-tab>
-        </block>
-        <block :key="1">
-          <wd-tab title="密码登录">
-            <LoginForm :agree="agree" />
-          </wd-tab>
-        </block>
+      <wd-tabs v-model="tab">
+        <wd-tab title="用户名登录">
+          <LoginForm :agree="agree" />
+        </wd-tab>
+        <wd-tab title="手机号登录">
+          <PhoneLogin />
+        </wd-tab>
       </wd-tabs>
+    </view>
+
+    <view class="fixed bottom-0 left-0 right-0 h-30 z-1">
+      <!-- 更多登录方式 -->
+      <MoreLoginWays class="mb-4" />
 
       <!-- 隐私与用户条款 -->
-      <view class="text-[14px] text-[#999] mt-4 h-50rpx flex justify-center">
-        <wd-checkbox class="inline-block" v-model="agree"></wd-checkbox>
-        <text>已阅读并同意</text>
-        <text class="text-[#0B5EFF]">《用户协议》</text>
-        <text>和</text>
-        <text class="text-[#0B5EFF]">《隐私政策》</text>
-      </view>
+      <Copyright v-model:agree="agree" />
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import LoginForm from '@/pages/login/components/LoginForm.vue'
-import { ref, reactive } from 'vue'
+  // banner
+  import Banner from '@/pages/login/components/Banner.vue'
+  // 隐私与用户条款
+  import Copyright from '@/pages/login/components/Copyright.vue'
+  // 更多登录方式
+  import MoreLoginWays from '@/pages/login/components/MoreLoginWays.vue'
+  // 手机号登录
+  import PhoneLogin from '@/pages/login/components/PhoneLogin.vue'
+  // 用户名登录
+  import LoginForm from '@/pages/login/components/LoginForm.vue'
 
-//
+  const tab = ref(0) // tabs的索引
+  const agree = ref(false) // 是否同意协议
 
-const tab = ref(1) // tabs的索引
-const agree = ref(false) // 是否同意协议
+  onLoad(() => {
+    //
+  })
 
-onLoad(() => {
-  //
-})
-
-onMounted(() => {})
+  onMounted(() => {})
 </script>
 
 <style lang="scss" scoped>
-//
-.login-bg {
-  background-image: url('/static/images/login-bg.png');
-}
+  //
+  .login-bg {
+    background-image: url('/static/images/login-bg.png');
+  }
 </style>
diff --git a/src/pages/login/phone-index.vue b/src/pages/login/phone-index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f7f99d08bd0d3e6ef6275df11e52143a41fe4ab
--- /dev/null
+++ b/src/pages/login/phone-index.vue
@@ -0,0 +1,38 @@
+<route lang="json5" type="page">
+{
+  style: {
+    navigationBarTitleText: ''
+  }
+}
+</route>
+
+<template>
+  <view class="h-full bg-white text-center pt-30 px-10">
+    <view class="text-5">{{ phoneNo }}</view>
+    <view class="text-3 text-[var(--wot-color-secondary)]">
+      认证服务由中国移动提供
+    </view>
+    <wd-button :block="true" :round="false" custom-class="my-2">
+      <text>本机号一键登录</text>
+    </wd-button>
+    <wd-button :block="true" :round="false" @click="otherLoginWay">
+      <text>其他登录方式</text>
+    </wd-button>
+
+    <more-login-ways class="fixed bottom-10 left-0 right-0" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+  import MoreLoginWays from './components/MoreLoginWays.vue'
+  // 手机号
+  const phoneNo = ref('157****1576')
+
+  function otherLoginWay() {
+    uni.navigateTo({ url: '/pages/login/index' })
+  }
+</script>
+
+<style lang="scss" scoped>
+  //
+</style>
diff --git a/src/pages/login/registerCode.vue b/src/pages/login/registerCode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d275f8ec1a7027937a2bc9add216e3a9fd6df414
--- /dev/null
+++ b/src/pages/login/registerCode.vue
@@ -0,0 +1,53 @@
+<route lang="json5" type="page">
+{
+  style: {
+    navigationBarTitleText: '获取验证码'
+  }
+}
+</route>
+
+<template>
+  <view class="h-full bg-white p-4">
+    <view class="text-5 mb-4">验证手机号</view>
+    <view class="text-3.5">
+      请输入发送至
+      <em>{{ phoneNo }}</em>
+      的6位验证码,有效期10分钟。如未收到,请重新获取验证码
+    </view>
+
+    <!-- 密码输入框 -->
+    <wd-password-input
+      v-model="code"
+      :mask="false"
+      :focused="showKeyboard"
+      class="my-4!"
+      @focus="showKeyboard = true"
+    />
+
+    <view>
+      <view v-if="!codeDisabled">
+        {{ loadTime }}秒后可重新获取验证码<br />
+      </view>
+    </view>
+
+    <!-- 数字键盘 -->
+    <wd-number-keyboard v-model:visible="showKeyboard" v-model="code" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+  //   手机号
+  const phoneNo = ref('157****2576')
+  // 验证码
+  const code = ref<string>()
+  //
+  const codeDisabled = ref(false)
+  const loadTime = ref(60)
+  const tips = ref('')
+  // 数字键盘
+  const showKeyboard = ref(true)
+</script>
+
+<style lang="scss" scoped>
+  //
+</style>
diff --git a/src/pages/my-info/components/PasswordEdit.vue b/src/pages/my-info/components/PasswordEdit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d8d68a73eed0a4ddfbc1af9e9ecf60fab811425a
--- /dev/null
+++ b/src/pages/my-info/components/PasswordEdit.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+  import { useToast } from 'wot-design-uni'
+
+  const { success: showSuccess, error: showError } = useToast()
+
+  const props = defineProps<{
+    modelValue: boolean
+  }>()
+  const emit = defineEmits(['update:modelValue', 'confirm'])
+
+  const form = reactive({
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: ''
+  })
+
+  const formRef = ref()
+
+  const rules = {
+    oldPassword: [{ required: true, message: '请输入旧密码' }],
+    newPassword: [
+      { required: true, message: '请输入新密码' },
+      { min: 6, message: '密码长度不能小于6位' }
+    ],
+    confirmPassword: [
+      { required: true, message: '请确认新密码' },
+      {
+        validator: (value: string) => value === form.newPassword,
+        message: '两次输入的密码不一致'
+      }
+    ]
+  }
+
+  const resetForm = () => {
+    form.oldPassword = ''
+    form.newPassword = ''
+    form.confirmPassword = ''
+  }
+
+  const handleClose = () => {
+    emit('update:modelValue', false)
+    resetForm()
+  }
+
+  const handleConfirm = () => {
+    formRef.value.validate().then(({ valid, errors }) => {
+      if (valid) {
+        // 这里可以添加修改密码的逻辑
+        emit('confirm', form)
+        showSuccess({ msg: '密码修改成功' })
+        handleClose()
+      } else {
+        showError({ msg: '请检查输入是否正确' })
+      }
+    })
+  }
+</script>
+
+<template>
+  <wd-popup
+    :model-value="props.modelValue"
+    position="center"
+    @close="handleClose"
+  >
+    <view class="password-edit-container">
+      <view class="password-edit-title">修改密码</view>
+      <wd-form ref="formRef" :model="form" :rules="rules">
+        <wd-input
+          v-model="form.oldPassword"
+          label="旧密码"
+          prop="oldPassword"
+          type="password"
+          placeholder="请输入旧密码"
+        />
+        <wd-input
+          v-model="form.newPassword"
+          label="新密码"
+          prop="newPassword"
+          type="password"
+          placeholder="请输入新密码"
+        />
+        <wd-input
+          v-model="form.confirmPassword"
+          label="确认密码"
+          prop="confirmPassword"
+          type="password"
+          placeholder="请再次输入新密码"
+        />
+      </wd-form>
+      <view class="password-edit-buttons">
+        <wd-button @click="handleClose">取消</wd-button>
+        <wd-button type="primary" @click="handleConfirm">确认</wd-button>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+
+<style scoped lang="scss">
+  .password-edit-container {
+    width: 600rpx;
+    padding: 30rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+  }
+
+  .password-edit-title {
+    margin-bottom: 30rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .password-edit-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 40rpx;
+  }
+</style>
diff --git a/src/pages/my-info/index.vue b/src/pages/my-info/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02721b82f6341d66efe952d958645393157b596e
--- /dev/null
+++ b/src/pages/my-info/index.vue
@@ -0,0 +1,468 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '用户信息'
+  }
+}
+</route>
+<template>
+  <view class="my-info-container">
+    <view class="header-section">
+      <view class="avatar-container">
+        <wd-img-cropper
+          v-model="show"
+          :img-src="src"
+          @confirm="handleConfirm"
+        ></wd-img-cropper>
+        <view v-if="!imgSrc" @click="upload" class="avatar-placeholder">
+          <wd-icon name="camera" size="60px" color="#BDBDBD"></wd-icon>
+        </view>
+        <wd-img
+          v-if="imgSrc"
+          round
+          width="200rpx"
+          height="200rpx"
+          :src="imgSrc"
+          mode="aspectFill"
+          custom-class="profile-img"
+          @click="upload"
+        />
+        <view class="avatar-edit-text">修改头像</view>
+      </view>
+    </view>
+
+    <wd-form ref="form" :model="formData" class="info-form" errorType="toast">
+      <!-- 可编辑信息部分 -->
+      <wd-cell-group border class="form-group editable-group">
+        <view class="section-title">个人信息</view>
+        <wd-input
+          label="用户名"
+          label-width="180rpx"
+          prop="nickname"
+          clearable
+          v-model="formData.nickname"
+          placeholder="请输入用户名"
+          :rules="[{ required: true, message: '请输入用户名' }]"
+        />
+        <wd-input
+          label="邮箱"
+          label-width="180rpx"
+          prop="email"
+          clearable
+          v-model="formData.email"
+          placeholder="请输入邮箱"
+          :rules="[
+            {
+              required: true,
+              message: '请输入邮箱',
+              type: 'email'
+            }
+          ]"
+        />
+        <wd-cell title="性别" title-width="180rpx">
+          <view class="gender-selection">
+            <wd-radio-group v-model="formData.sex" inline shape="dot">
+              <wd-radio :value="1">男</wd-radio>
+              <wd-radio :value="2">女</wd-radio>
+            </wd-radio-group>
+          </view>
+        </wd-cell>
+      </wd-cell-group>
+
+      <!-- 不可编辑信息部分 -->
+      <wd-cell-group border class="form-group info-group">
+        <view class="section-title">账户信息</view>
+        <wd-cell
+          size="large"
+          title="手机号"
+          title-width="180rpx"
+          :value="displayData.mobile"
+        />
+        <wd-cell
+          size="large"
+          title="所属部门"
+          title-width="180rpx"
+          :value="displayData.deptName"
+        />
+        <wd-cell
+          size="large"
+          title="所属岗位"
+          title-width="180rpx"
+          :value="displayData.postNames"
+        />
+        <wd-cell
+          size="large"
+          title="所属角色"
+          title-width="180rpx"
+          :value="displayData.roleNames"
+        />
+      </wd-cell-group>
+
+      <!-- 密码修改部分 -->
+      <wd-cell-group border class="form-group">
+        <view class="section-title">安全设置</view>
+        <wd-cell
+          size="large"
+          title="登录密码"
+          title-width="180rpx"
+          is-link
+          @click="changePassword"
+        >
+          <view class="password-change">修改密码</view>
+        </wd-cell>
+        <wd-cell
+          size="large"
+          title="微信小程序"
+          title-width="180rpx"
+          @click="bindWechatMiniProgram"
+          clickable
+        >
+          <template #icon>
+            <view class="cell-icon"></view>
+          </template>
+          <view v-if="isWechatBound" class="wechat-info">
+            <image src="/static/images/avatar1.jpg" class="wechat-avatar" />
+            <text class="wechat-nickname">{{
+              wechatInfo.nickName || '用户b8x0m5t5'
+            }}</text>
+            <view class="wechat-unbind"> 解绑 </view>
+          </view>
+          <view v-else class="wechat-bind"> 未绑定 </view>
+        </wd-cell>
+      </wd-cell-group>
+
+      <view class="submit-button">
+        <wd-button type="primary" size="large" block @click="handleSubmit"
+          >保存</wd-button
+        >
+      </view>
+
+      <!-- 添加 PasswordEdit 组件 -->
+      <PasswordEdit
+        v-model="showPasswordEdit"
+        @confirm="handlePasswordEditConfirm"
+      />
+    </wd-form>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  import { useUserStore } from '@/store'
+  import { useMessage, useToast } from 'wot-design-uni'
+  import PasswordEdit from './components/PasswordEdit.vue'
+  import {
+    getUserProfile,
+    userProfileUpdate,
+    userProfileUpdatePassword
+  } from '@/service/my-info/MyInfoAPI'
+
+  const message = useMessage()
+  const userStore = useUserStore()
+
+  const src = ref<string>('')
+  const imgSrc = ref<string>('')
+  const show = ref<boolean>(false)
+
+  // 表单数据
+  const formData = reactive({
+    nickname: '',
+    email: '',
+    sex: 1
+  })
+
+  // 显示数据
+  const displayData = reactive({
+    mobile: '',
+    deptName: '',
+    postNames: '',
+    roleNames: ''
+  })
+
+  const { success: showSuccess } = useToast()
+  const form = ref()
+
+  const showPasswordEdit = ref(false)
+
+  // 添加微信信息
+  const wechatInfo = ref({
+    avatarUrl: '',
+    nickName: ''
+  })
+
+  // 添加微信绑定状态
+  const isWechatBound = ref(true)
+
+  function handleSubmit() {
+    form.value
+      .validate()
+      .then(async ({ valid, errors }) => {
+        if (valid) {
+          // 这里可以添加保存用户信息的逻辑
+          const result = await userProfileUpdate(formData)
+          if (!result) {
+            return
+          }
+          showSuccess({
+            msg: '修改成功'
+          })
+        }
+      })
+      .catch((error) => {
+        console.log(error, 'error')
+      })
+  }
+
+  function changePassword() {
+    showPasswordEdit.value = true
+  }
+
+  async function handlePasswordEditConfirm(formData: any) {
+    // 这里可以添加修改密码的逻辑
+    const result = await userProfileUpdatePassword(formData)
+    if (!result) {
+      return
+    }
+    showSuccess({
+      msg: '修改成功'
+    })
+  }
+
+  function upload() {
+    uni.chooseImage({
+      count: 1,
+      success: (res) => {
+        src.value = res.tempFilePaths[0]
+        show.value = true
+      }
+    })
+  }
+
+  function handleConfirm(event) {
+    const { tempFilePath } = event
+    uni.uploadFile({
+      url: '/system/user/profile/update-avatar',
+      filePath: tempFilePath,
+      name: 'avatarFile',
+      success: (res) => {
+        imgSrc.value = tempFilePath
+        showSuccess({
+          msg: '头像修改成功'
+        })
+      }
+    })
+  }
+
+  const user = ref<any>({})
+
+  onLoad(async (_option) => {
+    const res = await getUserProfile()
+    console.log(res)
+    if (!res) {
+      return
+    }
+    user.value = res
+    // 初始化表单数据
+    imgSrc.value = user.value.avatar || ''
+    formData.nickname = user.value.nickname || ''
+    formData.email = user.value.email || ''
+    formData.sex = user.value.sex || 1
+
+    // 初始化显示数据
+    displayData.mobile = user.value.mobile || ''
+    displayData.deptName = user.value.dept?.name || ''
+    displayData.postNames = getPostNames(user.value.posts || [])
+    displayData.roleNames = getRoleNames(user.value.roles || [])
+
+    // 获取微信绑定状态和信息
+    // 这里需要从后端获取用户的微信绑定状态和信息
+    // 例如：
+    // const wechatBindInfo = await getUserWechatBindInfo()
+    // if (wechatBindInfo) {
+    //   isWechatBound.value = true
+    //   wechatInfo.value = {
+    //     avatarUrl: wechatBindInfo.avatarUrl,
+    //     nickName: wechatBindInfo.nickName
+    //   }
+    // } else {
+    //   isWechatBound.value = false
+    // }
+  })
+
+  // 添加这两个新函数
+  function getPostNames(posts: any[]): string {
+    return posts.map((post) => post.name).join('、')
+  }
+
+  function getRoleNames(roles: any[]): string {
+    return roles.map((role) => role.name).join('、')
+  }
+
+  function bindWechatMiniProgram() {
+    if (isWechatBound.value) {
+      // 如果已绑定，询问是否解绑
+      uni.showModal({
+        title: '解绑微信小程序',
+        content: '确定要解绑微信小程序吗？',
+        success: (res) => {
+          if (res.confirm) {
+            // 这里添加解绑逻辑
+            unbindWechatMiniProgram()
+          }
+        }
+      })
+    } else {
+      // 如果未绑定，执行绑定逻辑
+      // uni.login({
+      //   provider: 'weixin',
+      //   success: (loginRes) => {
+      //     if (loginRes.code) {
+      //       // 获取到登录凭证（code）后，发送到后端进行绑定
+      //       bindWechatWithCode(loginRes.code)
+      //     } else {
+      //       console.log('登录失败：' + loginRes.errMsg)
+      //     }
+      //   }
+      // })
+    }
+  }
+
+  function bindWechatWithCode(code: string) {
+    // 这里添加向后端发送绑定请求的逻辑
+    // 例如：
+    // const result = await userProfileBindWechat(code)
+    // if (result) {
+    //   isWechatBound.value = true
+    //   showSuccess({ msg: '微信小程序绑定成功' })
+    // }
+  }
+
+  function unbindWechatMiniProgram() {
+    // 这里添加向后端发送解绑请求的逻辑
+    // 例如：
+    // const result = await userProfileUnbindWechat()
+    // if (result) {
+    //   isWechatBound.value = false
+    //   showSuccess({ msg: '微信小程序解绑成功' })
+    // }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .my-info-container {
+    min-height: 100vh;
+    padding: 30rpx;
+    background-color: #f0f2f5;
+  }
+
+  .header-section {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 50rpx;
+  }
+
+  .avatar-container {
+    position: relative;
+    width: 200rpx;
+    height: 200rpx;
+    overflow: hidden;
+    border-radius: 50%;
+    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
+  }
+
+  .avatar-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: #e0e0e0;
+  }
+
+  .avatar-edit-text {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 10rpx 0;
+    font-size: 24rpx;
+    color: #fff;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  .info-form {
+    overflow: hidden;
+    background-color: transparent;
+    border-radius: 16rpx;
+  }
+
+  .form-group {
+    margin-bottom: 30rpx;
+    overflow: hidden;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  }
+
+  .section-title {
+    padding: 30rpx 30rpx 20rpx;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    background-color: #fff;
+    border-bottom: 2rpx solid #eaeaea;
+  }
+
+  .editable-group {
+    background-color: #fff;
+  }
+
+  .info-group {
+    background-color: #fafafa;
+  }
+
+  .gender-selection {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  .password-change {
+    font-weight: 500;
+    color: #2196f3;
+  }
+
+  .submit-button {
+    margin-top: 60rpx;
+  }
+
+  .wechat-info {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .wechat-avatar {
+    width: 50rpx;
+    height: 50rpx;
+    margin-right: 10rpx;
+    border-radius: 50%;
+  }
+
+  .wechat-nickname {
+    margin-left: 10rpx;
+    font-size: 28rpx;
+    color: #333;
+  }
+
+  .wechat-bind {
+    font-weight: 500;
+    color: #2196f3;
+  }
+  .wechat-unbind {
+    padding: 4rpx 24rpx;
+    margin-left: 20rpx;
+    color: #db8a5b;
+    background-color: #fdf0e5;
+    border-radius: 50rpx;
+  }
+</style>
diff --git a/src/service/my-info/MyInfoAPI.ts b/src/service/my-info/MyInfoAPI.ts
new file mode 100644
index 0000000000000000000000000000000000000000..29c2bc184201df7c38995940802abeaff8eebf88
--- /dev/null
+++ b/src/service/my-info/MyInfoAPI.ts
@@ -0,0 +1,28 @@
+import { http, httpGet, httpPost } from '@/utils/http'
+
+/**
+ * 获取用户信息
+ */
+export const getUserProfile = () => {
+  return httpGet('/system/user/profile/get')
+}
+/**
+ * 修改用户个人信息
+ */
+export const userProfileUpdate = (data) => {
+  return http({
+    url: '/system/user/profile/update',
+    method: 'PUT',
+    data
+  })
+}
+/**
+ * 修改用户个人密码
+ */
+export const userProfileUpdatePassword = (data) => {
+  return http({
+    url: '/system/user/profile/update-password',
+    method: 'PUT',
+    data
+  })
+}
diff --git a/src/style/iconfont.css b/src/style/iconfont.css
index 35da86c69d0f0d8eeb0a21366d43301850e13e95..b6dd1178787bdffac85d6d777ed0a7b3aa51f191 100644
--- a/src/style/iconfont.css
+++ b/src/style/iconfont.css
@@ -3,8 +3,10 @@
   src:
     url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOwAAsAAAAAB9AAAANjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqDBIJqATYCJAMQCwoABCAFhGcHPRvnBsgusG3kMyE15/44PsBX09waBHv0REDt97oHAQDFrOIyPirRiULQ+TJcXV0hCYTuVFcBC915/2vX/32Q80hkZ5PZGZ9snvwruVLloidKqYN6iKC53bOtbKwVLSIi3W6zCWZbs3VbER3j9JpGX3ySYcc94IQRTK5s4epS/jSqIgvg37qlY2/jwQN7D9ADpfRCmIknQByTscVZPTBr+hnnCKg2o4bjakvXEPjuY65DJGeJNtBUhn1JxOBuB2UZmUpBOXdsFp4oxOv4GHgs3h/+wRDcicqSZJG1q9kK1z/Af9NpqxjpC2QaAdpHlCFh4spcYXs5sMWpSk5wUj31G2dLQKVKkZ/w7f/8/i/A3JVUSZK9f7xIKJeU14IFpBI/Qfkkz46GT/CuaGREfCtKJUougWeQWHvVC5Lcz2BGS+SePR99vj3yjJx7h574tp7uWcOh4yfaTjS/245TT/vkQrN+a7RLkK8+Vd+bz+FSGh+9srDQKPeJ2s29z7ah4+efdoxefRbbGwfy7ht+SuIWukzsu1b6ePP+6kN1aamb47qsPim1Ia3xdEpDcl1dckPKGYnneI23+57r2W1Mmkqs6ajrChRCs5qyQ66rTVWhgZaG7toOeHm5cxn0sSQuNDEgcUTdNTSupKI1JRZih/JssAUKezPeOJJzbNozF6zWJuuVavVU5Tgtkop/SDzHa7ytvnCTq0PhkEfi4xLLtb0PuwyOAYqmrYQApFJyoJjTnfz+ve94vvv2f/yWgxl8Jd8Di2DRDPuob59mU/+VfDCROQyR8xSnmP9fXm7liagmN39OlmbvjqG0sMsJKrU0EFXogaRSH5bNY1CmxhyUq7QC1cY1T67RwuQk5CoM2RUQNLoEUb03kDS6h2XzcyjT7iOUa/QXqq1Hn6/GUBAaGcGcWJFlGUmCoVOp8kLvABHnVczGYiOE2SVEUH5OXj/TSnTCDjHAviAWcE4RZYaGWszNiKoayGSGTASeY+PcrMjNpVMvyREMDRoxBMYRVojFMkQiMOhohubdzxtAiOapMMbERpKMnQT9SL4ceQysVdJZVa9kEbsFogIcRyEUE2kN0mL7CDVIGhBzupWMEHA5bDvipgq5hKJcKef8ivbx1kC15KgcYkghhzLxYNntxoKCReJ82jAHAAA=')
       format('woff2'),
-    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.woff?t=1715485842402') format('woff'),
-    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.ttf?t=1715485842402') format('truetype');
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.woff?t=1715485842402')
+      format('woff'),
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.ttf?t=1715485842402')
+      format('truetype');
 }
 
 .iconfont {
diff --git a/src/style/index.scss b/src/style/index.scss
index 4a9f82c86784b66614dc325661b07c36a609b2a6..bdb75539c39e617c3050af1d7a1259d7876d542a 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -10,6 +10,8 @@
 
 :root,
 page {
+  --wot-color-primary: #4f79f9;
+  --wot-color-secondary: #727d7c;
   // 修改按主题色
   // --wot-color-theme: #37c2bc;
 
diff --git a/src/types/auto-import.d.ts b/src/types/auto-import.d.ts
index 635121282d144f41c0a68bc4c01ec089bd452f55..117a03d634d9d3d963cd9d4b6a1dd12f593b7f6f 100644
--- a/src/types/auto-import.d.ts
+++ b/src/types/auto-import.d.ts
@@ -59,6 +59,7 @@ declare global {
   const onUnload: typeof import('@dcloudio/uni-app')['onUnload']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -76,9 +77,12 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
   const useNavbarWeixin: (typeof import('../hooks/useNavbarWeixin'))['default']
   const useRequest: typeof import('../hooks/useRequest')['default']
   const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const useUpload: typeof import('../hooks/useUpload')['default']
   const useUpload2: typeof import('../hooks/useUpload2')['default']
   const watch: typeof import('vue')['watch']
@@ -89,7 +93,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
 // for vue template auto import
@@ -151,6 +155,7 @@ declare module 'vue' {
     readonly onUnload: UnwrapRef<typeof import('@dcloudio/uni-app')['onUnload']>
     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
     readonly provide: UnwrapRef<typeof import('vue')['provide']>
     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
     readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
@@ -168,91 +173,11 @@ declare module 'vue' {
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
     readonly useRequest: UnwrapRef<typeof import('../hooks/useRequest')['default']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
-    readonly useUpload: UnwrapRef<typeof import('../hooks/useUpload')['default']>
-    readonly watch: UnwrapRef<typeof import('vue')['watch']>
-    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
-    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
-    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
-  }
-}
-declare module '@vue/runtime-core' {
-  interface GlobalComponents {}
-  interface ComponentCustomProperties {
-    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    readonly computed: UnwrapRef<typeof import('vue')['computed']>
-    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
-    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
-    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
-    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
-    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
-    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
-    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
-    readonly h: UnwrapRef<typeof import('vue')['h']>
-    readonly inject: UnwrapRef<typeof import('vue')['inject']>
-    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
-    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
-    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
-    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
-    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
-    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
-    readonly onAddToFavorites: UnwrapRef<typeof import('@dcloudio/uni-app')['onAddToFavorites']>
-    readonly onBackPress: UnwrapRef<typeof import('@dcloudio/uni-app')['onBackPress']>
-    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
-    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
-    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
-    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
-    readonly onError: UnwrapRef<typeof import('@dcloudio/uni-app')['onError']>
-    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
-    readonly onHide: UnwrapRef<typeof import('@dcloudio/uni-app')['onHide']>
-    readonly onLaunch: UnwrapRef<typeof import('@dcloudio/uni-app')['onLaunch']>
-    readonly onLoad: UnwrapRef<typeof import('@dcloudio/uni-app')['onLoad']>
-    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
-    readonly onNavigationBarButtonTap: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarButtonTap']>
-    readonly onNavigationBarSearchInputChanged: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputChanged']>
-    readonly onNavigationBarSearchInputClicked: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputClicked']>
-    readonly onNavigationBarSearchInputConfirmed: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputConfirmed']>
-    readonly onNavigationBarSearchInputFocusChanged: UnwrapRef<typeof import('@dcloudio/uni-app')['onNavigationBarSearchInputFocusChanged']>
-    readonly onPageNotFound: UnwrapRef<typeof import('@dcloudio/uni-app')['onPageNotFound']>
-    readonly onPageScroll: UnwrapRef<typeof import('@dcloudio/uni-app')['onPageScroll']>
-    readonly onPullDownRefresh: UnwrapRef<typeof import('@dcloudio/uni-app')['onPullDownRefresh']>
-    readonly onReachBottom: UnwrapRef<typeof import('@dcloudio/uni-app')['onReachBottom']>
-    readonly onReady: UnwrapRef<typeof import('@dcloudio/uni-app')['onReady']>
-    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
-    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
-    readonly onResize: UnwrapRef<typeof import('@dcloudio/uni-app')['onResize']>
-    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
-    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
-    readonly onShareAppMessage: UnwrapRef<typeof import('@dcloudio/uni-app')['onShareAppMessage']>
-    readonly onShareTimeline: UnwrapRef<typeof import('@dcloudio/uni-app')['onShareTimeline']>
-    readonly onShow: UnwrapRef<typeof import('@dcloudio/uni-app')['onShow']>
-    readonly onTabItemTap: UnwrapRef<typeof import('@dcloudio/uni-app')['onTabItemTap']>
-    readonly onThemeChange: UnwrapRef<typeof import('@dcloudio/uni-app')['onThemeChange']>
-    readonly onUnhandledRejection: UnwrapRef<typeof import('@dcloudio/uni-app')['onUnhandledRejection']>
-    readonly onUnload: UnwrapRef<typeof import('@dcloudio/uni-app')['onUnload']>
-    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
-    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
-    readonly provide: UnwrapRef<typeof import('vue')['provide']>
-    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
-    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
-    readonly ref: UnwrapRef<typeof import('vue')['ref']>
-    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
-    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
-    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
-    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
-    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
-    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
-    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
-    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
-    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
-    readonly unref: UnwrapRef<typeof import('vue')['unref']>
-    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
-    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
-    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useRequest: UnwrapRef<typeof import('../hooks/useRequest')['default']>
-    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
     readonly useUpload: UnwrapRef<typeof import('../hooks/useUpload')['default']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
diff --git a/src/types/uni-pages.d.ts b/src/types/uni-pages.d.ts
index b2589ec0f85507fa8e3f888d7f2e6e18a4da3f10..e495193c56de8fe0f53d314fa19156d1ba519df3 100644
--- a/src/types/uni-pages.d.ts
+++ b/src/types/uni-pages.d.ts
@@ -7,7 +7,10 @@ interface NavigateToOptions {
   url: "/pages/work/index" |
        "/pages/colab/index" |
        "/pages/contacts/index" |
+       "/pages/login/forget" |
        "/pages/login/index" |
+       "/pages/login/phone-index" |
+       "/pages/login/registerCode" |
        "/pages/message/index" |
        "/pages/my/index";
 }
diff --git a/uno.config.ts b/uno.config.ts
index 1c15aad197ceb767abf8a6331edfb8d7416dc821..b2793507aced6d962e7801aba6982ee1d55214f5 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -6,10 +6,14 @@ import {
   presetAttributify,
   presetIcons,
   transformerDirectives,
-  transformerVariantGroup,
+  transformerVariantGroup
 } from 'unocss'
 
-import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'
+import {
+  presetApplet,
+  presetRemRpx,
+  transformerAttributify
+} from 'unocss-applet'
 
 // @see https://unocss.dev/presets/legacy-compat
 // import { presetLegacyCompat } from '@unocss/preset-legacy-compat'
@@ -25,7 +29,7 @@ if (isMp) {
     // 非小程序用官方预设
     presetUno(),
     // 支持css class属性化
-    presetAttributify(),
+    presetAttributify()
   )
 }
 export default defineConfig({
@@ -37,9 +41,9 @@ export default defineConfig({
       warn: true,
       extraProperties: {
         display: 'inline-block',
-        'vertical-align': 'middle',
-      },
-    }),
+        'vertical-align': 'middle'
+      }
+    })
     // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
     // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
     // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
@@ -63,20 +67,20 @@ export default defineConfig({
     transformerAttributify({
       // 解决与第三方框架样式冲突问题
       prefixedOnly: true,
-      prefix: 'fg',
-    }),
+      prefix: 'fg'
+    })
   ],
   rules: [
     [
       'p-safe',
       {
         padding:
-          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
-      },
+          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)'
+      }
     ],
     ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
-    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
-  ],
+    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }]
+  ]
 })
 
 /**