fix: 1

.env.development

@@ -0,0 +1,31 @@
+# 开发环境
+NODE_ENV=development
+
+VITE_DEV=false
+
+# 请求路径
+VITE_BASE_URL='http://localhost:12080'
+
+# 上传路径
+VITE_UPLOAD_URL='http://localhost:12080/admin-api/infra/file/upload'
+
+# 接口前缀
+VITE_API_BASEPATH=/dev-api
+
+# 接口地址
+VITE_API_URL=/admin-api
+
+# 打包路径
+VITE_BASE_PATH=/
+
+# 是否删除debugger
+VITE_DROP_DEBUGGER=true
+
+# 是否删除console.log
+VITE_DROP_CONSOLE=false
+
+# 是否sourcemap
+VITE_SOURCEMAP=false
+
+# 输出路径
+VITE_OUT_DIR=dist

.env.production

@@ -0,0 +1,31 @@
+# 生产环境
+NODE_ENV=production
+
+VITE_DEV=false
+
+# 请求路径
+VITE_BASE_URL='http://localhost:12080'
+
+# 上传路径
+VITE_UPLOAD_URL='http://localhost:12080/admin-api/infra/file/upload'
+
+# 接口前缀
+VITE_API_BASEPATH=
+
+# 接口地址
+VITE_API_URL=/admin-api
+
+# 是否删除debugger
+VITE_DROP_DEBUGGER=true
+
+# 是否删除console.log
+VITE_DROP_CONSOLE=true
+
+# 是否sourcemap
+VITE_SOURCEMAP=false
+
+# 打包路径
+VITE_BASE_PATH=/
+
+# 输出路径
+VITE_OUT_DIR=dist-pro

.env.test

@@ -0,0 +1,31 @@
+# 生产环境
+NODE_ENV=test
+
+VITE_DEV=false
+
+# 请求路径
+VITE_BASE_URL='http://dev.ccwin-in.com:25100/api'
+
+# 上传路径
+VITE_UPLOAD_URL='http://dev.ccwin-in.com:25100/api/admin-api/infra/file/upload'
+
+# 接口前缀
+VITE_API_BASEPATH=
+
+# 接口地址
+VITE_API_URL=/admin-api
+
+# 是否删除debugger
+VITE_DROP_DEBUGGER=true
+
+# 是否删除console.log
+VITE_DROP_CONSOLE=true
+
+# 是否sourcemap
+VITE_SOURCEMAP=false
+
+# 打包路径
+VITE_BASE_PATH=/
+
+# 输出路径
+VITE_OUT_DIR=dist-test

src/api/path/system.api.ts

@@ -45,6 +45,21 @@ export const getCodeApi = async (data: any) => {
   }
 }
 
+// 获取验证码
+export const getCodeImg = async () => {
+  // return request.get({
+  //   url: 'system/captcha/captchaImage', headers: {
+  //     isToken: false
+  //   }
+  // })
+  try {
+    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/captcha/captchaImage`)
+    return res
+  } catch (err) {
+    httpErrorHandle()
+  }
+}
+
 // 滑动或者点选验证
 export const reqCheckApi = async (data: any) => {
   try {

src/views/login/index.vue

@@ -24,18 +24,9 @@
     </layout-header>
     <div class="go-login">
       <div class="go-login-carousel">
-        <n-carousel
+        <n-carousel autoplay dot-type="line" :interval="Number(carouselInterval)">
-          autoplay
+          <img v-for="(item, i) in carouselImgList" :key="i" class="go-login-carousel-img"
-          dot-type="line"
+            :src="getImageUrl(item, 'login')" alt="image" />
-          :interval="Number(carouselInterval)"
-        >
-          <img
-            v-for="(item, i) in carouselImgList"
-            :key="i"
-            class="go-login-carousel-img"
-            :src="getImageUrl(item, 'login')"
-            alt="image"
-          />
         </n-carousel>
       </div>
       <div class="login-account">
@@ -43,24 +34,11 @@
           <n-collapse-transition :appear="true" :show="show">
             <n-card class="login-account-card" :title="$t('login.desc')">
               <div class="login-account-top">
-                <img
+                <img class="login-account-top-logo" src="~@/assets/images/login/input.png" alt="展示图片" />
-                  class="login-account-top-logo"
-                  src="~@/assets/images/login/input.png"
-                  alt="展示图片"
-                />
               </div>
-              <n-form
+              <n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
-                ref="formRef"
+                <n-form-item path="tenantId" v-if="tenantEnable === 'true'">
-                label-placement="left"
+                  <n-input v-model:value="formInline.tenantName" :placeholder="$t('global.form_tenant')">
-                size="large"
-                :model="formInline"
-                :rules="rules"
-              >
-                <n-form-item path="tenantId" v-if="tenantEnable ==='true'">
-                  <n-input
-                      v-model:value="formInline.tenantName"
-                      :placeholder="$t('global.form_tenant')"
-                  >
                     <template #prefix>
                       <n-icon size="18">
                         <TvOutlineIcon></TvOutlineIcon>
@@ -69,10 +47,7 @@
                   </n-input>
                 </n-form-item>
                 <n-form-item path="username">
-                  <n-input
+                  <n-input v-model:value="formInline.username" :placeholder="$t('global.form_account')">
-                    v-model:value="formInline.username"
-                    :placeholder="$t('global.form_account')"
-                  >
                     <template #prefix>
                       <n-icon size="18">
                         <PersonOutlineIcon></PersonOutlineIcon>
@@ -81,12 +56,8 @@
                   </n-input>
                 </n-form-item>
                 <n-form-item path="password">
-                  <n-input
+                  <n-input v-model:value="formInline.password" type="password" show-password-on="click"
-                    v-model:value="formInline.password"
+                    :placeholder="$t('global.form_password')">
-                    type="password"
-                    show-password-on="click"
-                    :placeholder="$t('global.form_password')"
-                  >
                     <template #prefix>
                       <n-icon size="18">
                         <LockClosedOutlineIcon></LockClosedOutlineIcon>
@@ -94,6 +65,24 @@
                     </template>
                   </n-input>
                 </n-form-item>
+                  <n-form-item prop="code">
+                    <div class="flex w-[100%]">
+                      <n-input v-model="formInline.code" placeholder="请输入验证码"
+                        style="width: 76%;margin-right: 10px;height: 42px;" :prefix-icon="iconLock"
+                        @keyup.enter="getCode()" >
+                         <template #prefix>
+                        <n-icon size="18">
+                          <LockClosedOutlineIcon></LockClosedOutlineIcon>
+                        </n-icon>
+                      </template>
+                    </n-input>
+                      <div class="login-code flex-1">
+                        <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                      </div>
+                    </div>
+
+                  </n-form-item>
+
                 <n-form-item>
                   <div class="flex justify-between">
                     <div class="flex-initial">
@@ -104,22 +93,11 @@
                   </div>
                 </n-form-item>
                 <n-form-item>
-                  <n-button
+                  <n-button type="primary" @click="getCode" size="large" :loading="loading" block>{{
-                    type="primary"
+                    $t('login.form_button') }}</n-button>
-                    @click="getCode"
-                    size="large"
-                    :loading="loading"
-                    block
-                    >{{ $t('login.form_button') }}</n-button
-                  >
                 </n-form-item>
-                <Verify
+                <Verify ref="verify" mode="pop" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }"
-                    ref="verify"
+                  @success="handleSubmit" />
-                    mode="pop"
-                    :captchaType="captchaType"
-                    :imgSize="{ width: '400px', height: '200px' }"
-                    @success="handleSubmit"
-                />
               </n-form>
             </n-card>
           </n-collapse-transition>
@@ -147,7 +125,7 @@ import { PageEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
 import { routerTurnByName } from '@/utils'
-import {getTenantIdByNameApi, getUserProfileApi, loginApi} from '@/api/path'
+import { getTenantIdByNameApi, getUserProfileApi, loginApi, getCodeImg } from '@/api/path'
 import { Verify } from '@/components/Verifition'
 
 interface FormState {
@@ -171,7 +149,10 @@ const formInline = reactive({
   tenantName: '闻荫源码',
   username: 'admin',
   password: 'admin123',
+  code:'',
+  uuid:''
 })
+const codeUrl = ref("");
 
 const rules = {
   username: {
@@ -227,15 +208,22 @@ const verify = ref()
 const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
 const captchaEnable = import.meta.env.VITE_APP_CAPTCHA_ENABLE
 // 获取验证码
-const getCode = async () => {
+// const getCode = async () => {
-  // 情况一，未开启：则直接登录
+//   // 情况一，未开启：则直接登录
-  if (captchaEnable === 'false') {
+//   if (captchaEnable === 'false') {
-    await handleSubmit({})
+//     await handleSubmit({})
-  } else {
+//   } else {
-    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+//     // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
-    // 弹出验证码
+//     // 弹出验证码
-    verify.value.show()
+//     verify.value.show()
-  }
+//   }
+// }
+
+function getCode() {
+  getCodeImg().then(res => {
+      codeUrl.value = "data:image/gif;base64," + res.img;
+      formInline.uuid = res.uuid;
+  });
 }
 
 // 多租户
@@ -253,6 +241,7 @@ const getTenantId = async () => {
   }
 }
 
+
 // 登录
 const handleSubmit = async (params: any) => {
   formRef.value.validate(async (errors: any) => {
@@ -268,7 +257,7 @@ const handleSubmit = async (params: any) => {
         password,
         captchaVerification: params.captchaVerification
       })
-      if(loginRes && loginRes.data) {
+      if (loginRes && loginRes.data) {
         // ① Token 信息（先存储下，保证可以加载个人信息）
         const tokenValue = loginRes.data.accessToken
         const tokenName = 'Authorization'
@@ -309,7 +298,7 @@ onMounted(() => {
   setTimeout(() => {
     showBg.value = true
   }, 100)
-
+  getCode()
   shuffleHandle()
 })
 </script>
@@ -325,10 +314,12 @@ $carousel-image-height: 60vh;
 * {
   box-sizing: border-box;
 }
+
 @include go(login-box) {
   height: $go-login-height;
   overflow: hidden;
   @include background-image('background-image');
+
   &-header {
     display: flex;
     justify-content: space-between;
@@ -336,6 +327,7 @@ $carousel-image-height: 60vh;
     padding: 0 40px;
     height: $--header-height;
   }
+
   &-divider {
     margin: 0;
     padding-top: 0;
@@ -349,20 +341,24 @@ $carousel-image-height: 60vh;
     margin-top: -$--header-height;
     height: $go-login-height;
     width: 100vw;
+
     &-carousel {
       width: $carousel-width;
       margin-top: 100px;
       min-width: 500px;
+
       &-img {
         display: block;
         margin: 0 auto;
         height: $carousel-image-height;
       }
     }
+
     .login-account {
       display: flex;
       flex-direction: column;
       margin: 0 160px;
+
       &-container {
         width: $width;
       }
@@ -398,15 +394,18 @@ $carousel-image-height: 60vh;
     width: 100vw;
     height: 100vh;
     background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px;
+
     .bg-slot {
       width: $carousel-width;
     }
+
     .bg-img-box {
       position: relative;
       display: flex;
       flex-wrap: wrap;
       width: 770px;
       margin-right: -20px;
+
       &-li {
         img {
           margin-right: 20px;
@@ -419,12 +418,15 @@ $carousel-image-height: 60vh;
     }
   }
 }
+
 @media only screen and (max-width: 1200px) {
+
   .bg-img-box,
   .bg-slot,
   .go-login-carousel {
     display: none !important;
   }
+
   .go-login-box-footer {
     position: relative;
   }