修改登录页面验证码框

src/permission.ts

@@ -44,8 +44,9 @@ router.beforeEach(async (to:any, from:any, next:any) => {
           // const { roles } = await userStore.getInfo();
 					const { perms } = await userStore.getInfo();
           const accessRoutes = await permissionStore.generateRoutes(perms);
-					// console.log("路由权限--perms--》",accessRoutes);
+					console.log("路由权限--perms--》",accessRoutes);
           accessRoutes.forEach((route:any) => {
+            console.log("路由权限--addRoutecessRoutes",route);
             router.addRoute(route);
           });
           next({ ...to, replace: true });

src/store/modules/permission.ts

@@ -103,8 +103,13 @@ export const usePermissionStore = defineStore("permission", () => {
       listRoutes()
         .then(({ data: asyncRoutes }) => {
           // 根据角色获取有访问权限的路由
-					// console.log("获取到的路由---->",asyncRoutes, roles);
+					console.log("获取到的路由---->",asyncRoutes);
           const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
+
+          console.log("获取到的路由--1-->",accessedRoutes);
+
+          console.log("获取到的路由--2-->",roles);
+
           setRoutes(accessedRoutes);
           resolve(accessedRoutes);
         })
@@ -113,6 +118,9 @@ export const usePermissionStore = defineStore("permission", () => {
         });
     });
   }
+  console.log("获取到的路由--3->",routes)
+  console.log("获取到的路由--4->",setRoutes)
+  console.log("获取到的路由--5->",generateRoutes)
   return { routes, setRoutes, generateRoutes };
 });
 

src/views/login/index.vue

@@ -2,97 +2,90 @@
   <div class="login-container">
     <div class="login-main">
       <div class="login-form">
-        <el-form
-      ref="loginFormRef"
-      :model="loginData"
-      :rules="loginRules"
-    >
-  
-      <!-- <div class="flex text-white items-center py-4">
+        <el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
+          <!-- <div class="flex text-white items-center py-4">
         <span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span>
         <lang-select style="color: #fff" />
       </div> -->
-      <div class="login-title">
-        用户登录
-      </div>
-      <el-form-item prop="username">
-        <div class="p-2">
-          <svg-icon icon-class="user" />
-        </div>
-        <el-input
-          ref="username"
-          v-model="loginData.username"
-          class="flex-1"
-          size="large"
-          :placeholder="$t('login.username')"
-          name="username"
-        />
-      </el-form-item>
-
-      <el-tooltip
-        :disabled="isCapslock === false"
-        content="Caps lock is On"
-        placement="right"
-      >
-        <el-form-item prop="password">
-          <span class="p-2">
-            <svg-icon icon-class="password" />
-          </span>
-          <el-input
-            v-model="loginData.password"
-            class="flex-1"
-            placeholder="密码"
-            :type="passwordVisible === false ? 'password' : 'input'"
-            size="large"
-            name="password"
-            @keyup="checkCapslock"
-            @keyup.enter="handleLogin"
-          />
-          <span class="mr-2" @click="passwordVisible = !passwordVisible">
-            <svg-icon
-              :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
-              class="text-white cursor-pointer"
+          <div class="login-title">用户登录</div>
+          <el-form-item prop="username">
+            <div class="p-2">
+              <svg-icon icon-class="user" />
+            </div>
+            <el-input
+              ref="username"
+              v-model="loginData.username"
+              class="flex-1"
+              size="large"
+              :placeholder="$t('login.username')"
+              name="username"
             />
-          </span>
-        </el-form-item>
-      </el-tooltip>
+          </el-form-item>
 
-      <!-- 验证码 -->
-      <el-form-item prop="captcha">
-        <span class="p-2">
-          <svg-icon icon-class="verify_code" />
-        </span>
-        <el-input
-          v-model="loginData.captcha"
-          auto-complete="off"
-          :placeholder="$t('login.verifyCode')"
-          class="w-[60%]"
-          @keyup.enter="handleLogin"
-        />
+          <el-tooltip
+            :disabled="isCapslock === false"
+            content="Caps lock is On"
+            placement="right"
+          >
+            <el-form-item prop="password">
+              <span class="p-2">
+                <svg-icon icon-class="password" />
+              </span>
+              <el-input
+                v-model="loginData.password"
+                class="flex-1"
+                placeholder="密码"
+                :type="passwordVisible === false ? 'password' : 'input'"
+                size="large"
+                name="password"
+                @keyup="checkCapslock"
+                @keyup.enter="handleLogin"
+              />
+              <span class="mr-2" @click="passwordVisible = !passwordVisible">
+                <svg-icon
+                  :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
+                  class="text-white cursor-pointer"
+                />
+              </span>
+            </el-form-item>
+          </el-tooltip>
 
-        <div class="captcha">
-          <img :src="captchaBase64" @click="getCaptcha" />
-        </div>
-      </el-form-item>
+          <!-- 验证码 -->
+          <el-form-item prop="captcha">
+            <span class="p-2">
+              <svg-icon icon-class="verify_code" />
+            </span>
+            <el-input
+              v-model="loginData.captcha"
+              auto-complete="off"
+              :placeholder="$t('login.verifyCode')"
+              class="w-[60%]"
+              style="width: 60%"
+              @keyup.enter="handleLogin"
+            />
 
-      <el-button
-        size="default"
-        :loading="loading"
-        type="primary"
-        class="w-full"
-        @click.prevent="handleLogin"
-        >{{ $t("login.login") }}
-      </el-button>
+            <div class="captcha">
+              <img :src="captchaBase64" @click="getCaptcha" />
+            </div>
+          </el-form-item>
 
-      <!-- 账号密码提示 -->
-      <div class="mt-4 text-sm" style="color:#333">
-        <span>{{ $t("login.username") }}: ceshi</span>
-        <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
-      </div>
-    </el-form>
+          <el-button
+            size="default"
+            :loading="loading"
+            type="primary"
+            class="w-full"
+            @click.prevent="handleLogin"
+            >{{ $t("login.login") }}
+          </el-button>
+
+          <!-- 账号密码提示 -->
+          <div class="mt-4 text-sm" style="color: #333">
+            <span>{{ $t("login.username") }}: ceshi</span>
+            <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
+          </div>
+        </el-form>
       </div>
     </div>
-   
   </div>
 </template>
 
@@ -190,18 +183,15 @@ function handleLogin() {
 
           const redirect = (query.redirect as LocationQueryValue) ?? "/";
 
-          const otherQueryParams = Object.keys(query).reduce(
-            (acc: any, cur: string) => {
-              if (cur !== "redirect") {
-                acc[cur] = query[cur];
-              }
-              return acc;
-            },
-            {}
-          );
-						//console.log("登陆输出：",redirect,otherQueryParams);
+          const otherQueryParams = Object.keys(query).reduce((acc: any, cur: string) => {
+            if (cur !== "redirect") {
+              acc[cur] = query[cur];
+            }
+            return acc;
+          }, {});
+          //console.log("登陆输出：",redirect,otherQueryParams);
           router.push({ path: redirect, query: otherQueryParams });
-					getCaptcha();
+          getCaptcha();
         })
         .catch(() => {
           // 验证失败，重新生成验证码
@@ -227,11 +217,11 @@ onMounted(() => {
   background-image: url(../../assets/login/bg.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  background-color: #ECEFF5;
+  background-color: #eceff5;
   display: flex;
   justify-content: center;
   align-items: center;
-	.login-main{
+  .login-main {
     width: 800px;
     height: 700px;
     position: relative;
@@ -239,11 +229,11 @@ onMounted(() => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
     margin-left: -18%;
-    .login-title{
+    .login-title {
       font-weight: bold;
       font-size: 37px;
       text-align: center;
-      color: #1E5EFF;
+      color: #1e5eff;
       line-height: 43px;
       margin-bottom: 30px;
     }
@@ -252,12 +242,12 @@ onMounted(() => {
     width: 500px;
     background-color: #fff;
     border-radius: 6px;
-    box-shadow: 0px 0px 42px -28px #37508E;
+    box-shadow: 0px 0px 42px -28px #37508e;
     padding: 60px 30px;
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     margin-left: 60%;
     overflow: hidden;
     box-sizing: border-box;
@@ -278,12 +268,11 @@ onMounted(() => {
 
 .el-form-item {
   border-radius: 5px;
-  border: solid 1px #D9D9D9;
+  border: solid 1px #d9d9d9;
   color: #666;
 }
 
 .el-input {
-
   // 子组件 scoped 无效，使用 :deep
   :deep(.el-input__wrapper) {
     padding: 0;