完成menuLayout

src/components/Login.vue

@@ -7,7 +7,11 @@
       </header>
       <main class="login-form__main">
         <el-form ref="formRef" :model="login" label-width="auto" class="login-form__form">
-          <el-form-item prop="username" :rules="[{ required: true, message: '账号不能为空' }]">
+          <el-form-item
+            prop="username"
+            :rules="[{ required: true, message: '账号不能为空' }]"
+            v-if="type !== 'modifyPassword'"
+          >
             <el-input
               placeholder="请输入您的账号"
               v-model="login.username"
@@ -17,9 +21,12 @@
               class="el-input--default"
             />
           </el-form-item>
-          <el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空' }]">
+          <el-form-item
+            prop="password"
+            :rules="[{ required: true, message: type === 'modifyPassword' ? '原密码不能为空' : '密码不能为空' }]"
+          >
             <el-input
-              placeholder="请输入您的密码"
+              :placeholder="type !== 'modifyPassword' ? '请输入您的密码' : '请输入原密码'"
               v-model="login.password"
               type="password"
               autocomplete="off"
@@ -28,6 +35,42 @@
               class="el-input--default"
             />
           </el-form-item>
+          <el-form-item
+            prop="newPassword"
+            v-if="type === 'modifyPassword'"
+            :rules="[
+              { required: true, message: '新密码不能为空' },
+              { min: 6, message: '新密码至少6位' },
+            ]"
+          >
+            <el-input
+              placeholder="请输入新密码(至少6位)"
+              v-model="login.newPassword"
+              type="password"
+              autocomplete="off"
+              show-password
+              clearable
+              class="el-input--default"
+            />
+          </el-form-item>
+          <el-form-item
+            prop="confirmPassword"
+            v-if="type === 'modifyPassword'"
+            :rules="[
+              { required: true, message: '确认密码不能为空' },
+              { validator: validatePassword, trigger: 'blur' },
+            ]"
+          >
+            <el-input
+              placeholder="请确认密码"
+              v-model="login.confirmPassword"
+              type="password"
+              autocomplete="off"
+              show-password
+              clearable
+              class="el-input--default"
+            />
+          </el-form-item>
           <el-form-item
             prop="code"
             :rules="[{ required: true, message: '验证码不能为空' }]"
@@ -62,8 +105,17 @@
     username: '',
     password: '',
     code: '',
+    newPassword: '',
+    confirmPassword: '',
   });
   const emit = defineEmits(['close']);
+  const validatePassword = (rule: any, value: string, callback: any) => {
+    if (value !== login.newPassword) {
+      callback(new Error('两次输入密码不一致'));
+    } else {
+      callback();
+    }
+  };
   const formRef = ref<FormInstance>();
   const handleLogin = () => {
     if (!formRef.value) return;

src/layout/MenuLayout.vue

@@ -1,27 +1,31 @@
 <!-- 带有二级菜单的layout -->
-
 <template>
-  <div>
-    <HeaderMenu></HeaderMenu>
-    <div class="contentWrapper">
-      <div style="width: 300px"> 左侧菜单 </div>
-      <div class="main">
-        <router-view></router-view>
-      </div>
+  <div class="component-container home-container">
+    <aside class="aside"></aside>
+    <div class="main">
+      <router-view></router-view>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-  import HeaderMenu from './components/header-menu/HeaderMenu.vue';
-</script>
+<script setup lang="ts"></script>
 
 <style scoped lang="scss">
-  .contentWrapper {
-    display: flex;
-    gap: 20px;
-  }
-  .main {
-    flex: 1;
-  }
+.home-container{
+  display: flex;
+  gap: 10cpx;
+  padding: 10cpx;
+}
+.aside,
+.main{
+  height: 100%;
+  border-radius: 4cpx;
+  background: $white-color;
+}
+.aside{
+  width: 270cpx;
+}
+.main{
+  flex: 1;
+}
 </style>

src/styles/common.scss

@@ -7,5 +7,4 @@
 
 .component-container {
   @extend .container;
-  background-color: $container-bg-color;
 }

src/styles/variables.scss

@@ -1,10 +1,9 @@
 // 主题颜色
 $primary-color: #1777ff;
-$background-color: rgba(#1777ff, 0.2);
+$background-color: rgba(#1777ff, 0.1);
 $error-color: #e74c3c;
 $text-color: #000;
 $white-color: #fff;
-$container-bg-color: #eee;
 $disabled-color: #ccc;
 
 // 混合