小调整

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <NavBar
     v-if="showNavBar"
-    :show-nav-icons="$route.path !== '/password'"
+    :show-nav-icons="!/^\/password/.test($route.path)"
     :fixed="true"
   />
   <div
@@ -21,7 +21,7 @@
   <ul v-if="$route.path === '/'" class="contents">
     <li><router-link to="/login">登录</router-link></li>
     <li><router-link to="/account">账号信息</router-link></li>
-    <li><router-link to="/password">密码找回</router-link></li>
+    <li><router-link to="/password/reset">密码找回</router-link></li>
     <li><router-link to="/order">我的订单</router-link></li>
     <li><router-link to="/gift-card">我的礼品卡</router-link></li>
     <li><router-link to="/benefits">会员权益</router-link></li>

src/components/nav-bar/index.vue

@@ -6,7 +6,11 @@
         <router-link class="icon-logo" to="/"></router-link>
         <i v-if="showNavIcons" class="icon-mine" @click="showMine = true"></i>
       </div>
-      <transition enter-active-class="fadeIn" leave-active-class="fadeOut">
+      <transition
+        v-if="showNavIcons"
+        enter-active-class="fadeIn"
+        leave-active-class="fadeOut"
+      >
         <div v-show="showMenu" class="nav-menu nav-links">
           <div class="nav-menu-header">
             <i class="logo"></i>
@@ -28,7 +32,7 @@
         </div>
       </transition>
     </div>
-    <div class="nav-bar-right">
+    <div v-if="showNavIcons" class="nav-bar-right">
       <div class="user flex-ac" @click="showMine = !showMine">
         <i class="icon-mine"></i>
         <span class="user-name">Rebecca</span>

src/pages/login/index.vue

@@ -48,7 +48,7 @@
     </div>
   </div>
 
-  <div v-else class="surprise">
+  <!-- <div v-else class="surprise">
     <NavBar :show-nav-icons="false" />
     <div class="ptc-form">
       <div class="title">Change Password</div>
@@ -70,7 +70,7 @@
         <button class="ptc-button" @click="showSurprise = false">SUBMIT</button>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script setup lang="ts">
@@ -87,8 +87,9 @@ const loginData = reactive<ApiUser.Login.Request>({
 })
 
 async function handleLogin() {
-  await login(loginData)
-  router.push('/')
+  // await login(loginData)
+  // router.push('/')
+  router.push('/password/change')
 }
 </script>
 

src/pages/password/index.vue

@@ -1,6 +1,29 @@
 <template>
   <div class="p-password">
-    <div v-if="step === 0" class="step ptc-inner">
+    <div v-if="$route.params.action === 'change'" class="step ptc-inner">
+      <div class="ptc-form">
+        <h3 class="title">Change Password</h3>
+        <div class="ptc-form-item">
+          <input
+            class="ptc-input"
+            type="password"
+            placeholder="Enter new password"
+          />
+        </div>
+        <div class="ptc-form-item">
+          <input
+            class="ptc-input"
+            type="password"
+            placeholder="Repeat new password"
+          />
+        </div>
+        <div class="ptc-form-item">
+          <button class="ptc-button">SUBMIT</button>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="step === 0" class="step ptc-inner">
       <h3 class="title">Recover password</h3>
       <div class="desc">
         We will send you an email for password reset. Please check it

src/router.ts

@@ -12,7 +12,7 @@ export default createRouter({
       component: () => import('./pages/register/index.vue'),
     },
     {
-      path: '/password',
+      path: '/password/:action',
       component: () => import('./pages/password/index.vue'),
     },
     {