From 57ad7ae1a3930a1700edc798ac72f238846ee8a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A9=99=E5=AD=90?= <454313500@qq.com>
Date: Mon, 21 Oct 2024 23:07:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97=E8=BF=87=E6=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dtos/Account/PhoneCaptchaImageDto.cs      |  4 +-
 .../YiFrameworkRbacApplicationModule.cs       |  9 +-
 Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs  |  4 +-
 Yi.Bbs.Vue3/src/apis/accountApi.js            |  8 +-
 .../src/views/login/forgotPassword.vue        | 77 +++++++++++++++--
 Yi.Bbs.Vue3/src/views/login/register.vue      | 83 +++++++++++++++++--
 6 files changed, 164 insertions(+), 21 deletions(-)

diff --git a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Account/PhoneCaptchaImageDto.cs b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Account/PhoneCaptchaImageDto.cs
index 94e8f33c..1428dd6b 100644
--- a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Account/PhoneCaptchaImageDto.cs
+++ b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application.Contracts/Dtos/Account/PhoneCaptchaImageDto.cs
@@ -4,8 +4,8 @@
     {
         public string Phone { get; set; }
         
-        public string? Uuid { get; set; }
+        public string Uuid { get; set; }
 
-        public string? Code { get; set; }
+        public string Code { get; set; }
     }
 }
diff --git a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application/YiFrameworkRbacApplicationModule.cs b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application/YiFrameworkRbacApplicationModule.cs
index 6ebec32f..13d07949 100644
--- a/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application/YiFrameworkRbacApplicationModule.cs
+++ b/Yi.Abp.Net8/module/rbac/Yi.Framework.Rbac.Application/YiFrameworkRbacApplicationModule.cs
@@ -1,4 +1,5 @@
-using Microsoft.Extensions.DependencyInjection;
+using Lazy.Captcha.Core.Generator;
+using Microsoft.Extensions.DependencyInjection;
 using Volo.Abp;
 using Volo.Abp.BackgroundWorkers;
 using Volo.Abp.BackgroundWorkers.Quartz;
@@ -24,7 +25,11 @@ namespace Yi.Framework.Rbac.Application
         {
             var service = context.Services;
 
-            service.AddCaptcha();
+            service.AddCaptcha(options =>
+            {
+                options.CaptchaType = CaptchaType.ARITHMETIC;
+
+            });
         }
 
         public async override Task OnApplicationInitializationAsync(ApplicationInitializationContext context)
diff --git a/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs b/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
index 3d6e17fc..2b1a2ebf 100644
--- a/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
+++ b/Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs
@@ -67,9 +67,9 @@ namespace Yi.Abp.Web
             Configure<AbpAuditingOptions>(optios =>
             {
                 //默认关闭，开启会有大量的审计日志
-                optios.IsEnabled = false;
+                optios.IsEnabled = true;
                 //审计日志过滤器
-                optios.AlwaysLogSelectors.Add(x => Task.FromResult(true));
+                optios.AlwaysLogSelectors.Add(x => Task.FromResult(!x.Url.StartsWith("/api/app/file/")));
             });
 
             //采用furion格式的规范化api，默认不开启，使用abp优雅的方式
diff --git a/Yi.Bbs.Vue3/src/apis/accountApi.js b/Yi.Bbs.Vue3/src/apis/accountApi.js
index 4dae948f..b46cf302 100644
--- a/Yi.Bbs.Vue3/src/apis/accountApi.js
+++ b/Yi.Bbs.Vue3/src/apis/accountApi.js
@@ -83,7 +83,7 @@ export function getCodeImg() {
   });
 }
 // 获取短信验证码
-export function getCodePhone(phone) {
+export function getCodePhone(phoneForm) {
   return request({
     url: "/account/captcha-phone",
     headers: {
@@ -91,11 +91,11 @@ export function getCodePhone(phone) {
     },
     method: "post",
     timeout: 20000,
-    data: { phone },
+    data: phoneForm,
   });
 }
 // 获取短信验证码-为了重置密码
-export function getCodePhoneForRetrievePassword(phone) {
+export function getCodePhoneForRetrievePassword(form) {
   return request({
     url: "/account/captcha-phone/repassword",
     headers: {
@@ -103,6 +103,6 @@ export function getCodePhoneForRetrievePassword(phone) {
     },
     method: "post",
     timeout: 20000,
-    data: { phone },
+    data: form,
   });
 }
diff --git a/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue b/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
index 29c91948..98d88b8d 100644
--- a/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
+++ b/Yi.Bbs.Vue3/src/views/login/forgotPassword.vue
@@ -1,15 +1,20 @@
 <script setup>
 
 // 注册逻辑
-import {reactive, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {getCodePhoneForRetrievePassword} from "@/apis/accountApi";
 import useAuths from "@/hooks/useAuths";
 import { useRouter} from "vue-router";
 const { retrievePasswordFun } = useAuths();
 const router = useRouter();
+import useUserStore from "@/stores/user";
 const retrievePasswordFormRef = ref();
+//验证码弹窗
+const codeDialogVisible=ref(false);
 
-
+// 获取图片验证码
+const codeImageURL = computed(() => useUserStore().codeImageURL);
+const codeUUid = computed(() => useUserStore().codeUUid);
 // 确认密码
 const passwordConfirm = ref("");
 const registerForm = reactive({
@@ -18,6 +23,11 @@ const registerForm = reactive({
   uuid: "",
   code: ""
 });
+const phoneForm=reactive({
+  code:"",
+  phone:"",
+  uuid:codeUUid
+});
 const registerRules = reactive({
   phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
   code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
@@ -56,14 +66,38 @@ const retrievePassword = async (formEl) => {
 const codeInfo = ref("发送短信");
 const isDisabledCode = ref(false);
 
+//点击验证码
+const  handleGetCodeImage=()=>{
+  useUserStore().updateCodeImage();
+}
+
+//点击手机发送短信
+const  clickPhoneCaptcha=()=>{
+  if (registerForm.phone !== "")
+  {
+    handleGetCodeImage();
+    codeDialogVisible.value=true;
+  }
+  else {
+    ElMessage({
+      message: `请先输入手机号`,
+      type: "warning",
+    });
+  }
+}
+
+
 //前往登录
 const  handleSignInNow=()=>{
   router.push("/login");
 }
 const captcha = async () => {
-  if (registerForm.phone !== "") {
-    const { data } = await getCodePhoneForRetrievePassword(registerForm.phone);
+  if (registerForm.phone!==""&&phoneForm.code!=="")
+  {
+    phoneForm.phone=registerForm.phone;
+    const { data } = await getCodePhoneForRetrievePassword(phoneForm);
     registerForm.uuid = data.uuid;
+    codeDialogVisible.value=false;
     ElMessage({
       message: `已向${registerForm.phone}发送验证码，请注意查收`,
       type: "success",
@@ -113,7 +147,7 @@ const captcha = async () => {
                 <el-form-item prop="phone">
                   <div class="phone-code">
                     <input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
-                    <button type="button" class="phone-code-btn" @click="captcha()">{{codeInfo}}</button>
+                    <button type="button" class="phone-code-btn" @click="clickPhoneCaptcha()">{{codeInfo}}</button>
                   </div>
                 </el-form-item>
               </div>
@@ -146,8 +180,41 @@ const captcha = async () => {
       </div>
 
     </div>
+    <el-dialog
+        v-model="codeDialogVisible"
+        title="发送短信"
+        width="500"
+        center
+    >
+      <div class="dialog-body">
+        <img class="code-img" alt="加载中" @click="handleGetCodeImage"  :src="codeImageURL">
+
+        <div class="input">
+          <p>*图片验证码</p>
+          <el-form-item prop="code" >
+            <input type="text" v-model.trim="phoneForm.code">
+          </el-form-item>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <button @click="captcha" style="width:80% " type="button" class="phone-code-btn">确认发送</button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <style src="@/assets/styles/login.css" scoped>
+</style>
+<style scoped>
+.dialog-body
+{
+  display: flex  !important;
+  justify-content: center !important;
+  padding: 0 !important;
+}
+.code-img{
+  margin: 25px !important;
+}
 </style>
\ No newline at end of file
diff --git a/Yi.Bbs.Vue3/src/views/login/register.vue b/Yi.Bbs.Vue3/src/views/login/register.vue
index 50b301c1..c2db5d06 100644
--- a/Yi.Bbs.Vue3/src/views/login/register.vue
+++ b/Yi.Bbs.Vue3/src/views/login/register.vue
@@ -1,16 +1,21 @@
 <script setup>
 
 // 注册逻辑
-import {reactive, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import {getCodePhone} from "@/apis/accountApi";
 import useAuths from "@/hooks/useAuths";
 import {useRoute, useRouter} from "vue-router";
+import useUserStore from "@/stores/user";
 const { registerFun } = useAuths();
 const router = useRouter();
 const route = useRoute();
 const registerFormRef = ref();
+//验证码弹窗
+const codeDialogVisible=ref(false);
 
-
+// 获取图片验证码
+const codeImageURL = computed(() => useUserStore().codeImageURL);
+const codeUUid = computed(() => useUserStore().codeUUid);
 // 确认密码
 const passwordConfirm = ref("");
 const registerForm = reactive({
@@ -21,6 +26,11 @@ const registerForm = reactive({
   code: "",
   nick:""
 });
+const phoneForm=reactive({
+  code:"",
+  phone:"",
+  uuid:codeUUid
+});
 const registerRules = reactive({
   nick: [
     { min: 2, message: "昵称需大于两位", trigger: "blur" },
@@ -65,14 +75,37 @@ const register = async (formEl) => {
 const codeInfo = ref("发送短信");
 const isDisabledCode = ref(false);
 
+//点击验证码
+const  handleGetCodeImage=()=>{
+  useUserStore().updateCodeImage();
+}
+
+//点击手机发送短信
+const  clickPhoneCaptcha=()=>{
+  if (registerForm.phone !== "")
+  {
+    handleGetCodeImage();
+    codeDialogVisible.value=true;
+  }
+  else {
+    ElMessage({
+      message: `请先输入手机号`,
+      type: "warning",
+    });
+  }
+}
+
 //前往登录
 const  handleSignInNow=()=>{
     router.push("/login");
 }
 const captcha = async () => {
-  if (registerForm.phone !== "") {
-    const { data } = await getCodePhone(registerForm.phone);
+  if (registerForm.phone!==""&&phoneForm.code!=="")
+  {
+    phoneForm.phone=registerForm.phone;
+    const { data } = await getCodePhone(phoneForm);
     registerForm.uuid = data.uuid;
+    codeDialogVisible.value=false;
     ElMessage({
       message: `已向${registerForm.phone}发送验证码，请注意查收`,
       type: "success",
@@ -90,12 +123,15 @@ const captcha = async () => {
         time--;
       }
     }, 1000);
-  } else {
+  }
+  else
+  {
     ElMessage({
       message: `请先输入手机号`,
       type: "warning",
     });
   }
+  
 };
 </script>
 
@@ -138,7 +174,7 @@ const captcha = async () => {
               <el-form-item prop="phone">
                 <div class="phone-code">
                   <input class="phone-code-input" type="text" v-model.trim="registerForm.phone">
-                  <button type="button" class="phone-code-btn" @click="captcha()">{{codeInfo}}</button>
+                  <button type="button" class="phone-code-btn" @click="clickPhoneCaptcha()">{{codeInfo}}</button>
                 </div>
               </el-form-item>
             </div>
@@ -171,8 +207,43 @@ const captcha = async () => {
     </div>
 
   </div>
+
+    <el-dialog
+        v-model="codeDialogVisible"
+        title="发送短信"
+        width="500"
+        center
+    >
+      <div class="dialog-body">
+      <img class="code-img" alt="加载中" @click="handleGetCodeImage"  :src="codeImageURL">
+
+      <div class="input">
+        <p>*图片验证码</p>
+        <el-form-item prop="code" >
+          <input type="text" v-model.trim="phoneForm.code">
+        </el-form-item>
+      </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <button @click="captcha" style="width:80% " type="button" class="phone-code-btn">确认发送</button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <style src="@/assets/styles/login.css" scoped>
+
+</style>
+<style scoped>
+.dialog-body
+{
+  display: flex  !important;
+  justify-content: center !important;
+  padding: 0 !important;
+}
+.code-img{
+  margin: 25px !important;
+}
 </style>
\ No newline at end of file