feat:登录页面改造

Yi.Pure.Vue3/src/api/user.ts

@@ -1,5 +1,12 @@
 import { http } from "@/utils/http";
 
+export type imageCaptcha = {
+  //uuid
+  uuid: string; // 使用字符串表示 Guid
+  //验证码图片字节数值
+  img: Uint8Array | null;
+};
+
 export type UserResult = {
   success: boolean;
   data: {
@@ -70,7 +77,12 @@ type ResultTable = {
 
 /** 登录 */
 export const getLogin = (data?: object) => {
-  return http.request<UserResult>("post", "/login", { data });
+  return http.request<UserResult>("post", "/account/login", { data });
+};
+
+/** 获取验证码 */
+export const getCodeImg = () => {
+  return http.request<imageCaptcha>("get", "/account/captcha-image");
 };
 
 /** 刷新`token` */

Yi.Pure.Vue3/src/utils/http/index.ts

@@ -16,6 +16,7 @@ import { useUserStoreHook } from "@/store/modules/user";
 
 // 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
 const defaultConfig: AxiosRequestConfig = {
+  baseURL: import.meta.env.VITE_APP_BASE_API,
   // 请求超时时间
   timeout: 10000,
   headers: {

Yi.Pure.Vue3/src/views/login/index.vue

@@ -24,6 +24,7 @@ import { ref, toRaw, reactive, watch, computed } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { getCodeImg } from "@/api/user";
 
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
@@ -37,6 +38,7 @@ defineOptions({
   name: "Login"
 });
 
+const codeUrl = ref("");
 const imgCode = ref("");
 const loginDay = ref(7);
 const router = useRouter();
@@ -57,18 +59,30 @@ const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 
 const ruleForm = reactive({
-  username: "admin",
-  password: "admin123",
-  verifyCode: ""
+  username: "cc",
+  password: "123456",
+  verifyCode: "",
+  uuid: ""
 });
 
+//获取验证码
+const getCode = () => {
+  getCodeImg().then(res => {
+    codeUrl.value = "data:image/gif;base64," + res.img;
+    ruleForm.uuid = res.uuid;
+  });
+};
+
 const onLogin = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(valid => {
     if (valid) {
       loading.value = true;
       useUserStoreHook()
-        .loginByUsername({ username: ruleForm.username, password: "admin123" })
+        .loginByUsername({
+          username: ruleForm.username,
+          password: ruleForm.password
+        })
         .then(res => {
           if (res.success) {
             // 获取后端路由
@@ -114,6 +128,7 @@ watch(checked, bool => {
 watch(loginDay, value => {
   useUserStoreHook().SET_LOGINDAY(value);
 });
+getCode();
 </script>
 
 <template>
@@ -224,7 +239,12 @@ watch(loginDay, value => {
                   :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
                 >
                   <template v-slot:append>
-                    <ReImageVerify v-model:code="imgCode" />
+                   11 {{codeUrl}}
+                    <img
+                      :src="codeUrl"
+                      class="login-code-img"
+                      @click="getCode"
+                    />
                   </template>
                 </el-input>
               </el-form-item>

Yi.Pure.Vue3/src/views/login/utils/rule.ts

@@ -9,7 +9,7 @@ export const REGEXP_SIX = /^\d{6}$/;
 
 /** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
 export const REGEXP_PWD =
-  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){6,18}$/;
 
 /** 登录校验 */
 const loginRules = reactive<FormRules>({