style: 优化部分弹框响应式效果

src/components/Breadcrumb/index.vue

@@ -4,8 +4,9 @@
       <span
         v-if="item.redirect === 'noRedirect' || item.redirect === '' || index === breadcrumbList.length - 1"
         class="gi_line_1"
-        >{{ item.meta.title }}</span
       >
+        {{ item.meta.title }}
+      </span>
       <span v-else class="gi_line_1 breadcrumb-item-title" @click="handleLink(item)">{{ item.meta.title }}</span>
     </a-breadcrumb-item>
   </a-breadcrumb>

src/views/setting/components/VerifyModel.vue

@@ -1,5 +1,13 @@
 <template>
-  <a-modal v-model:visible="visible" :title="title" @before-ok="save" @close="reset">
+  <a-modal
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 500 ? 500 : '100%'"
+    @before-ok="save"
+    @close="reset"
+  >
     <GiForm ref="formRef" v-model="form" :options="options" :columns="columns">
       <template #captcha>
         <a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1" />
@@ -18,8 +26,9 @@
 </template>
 
 <script setup lang="ts">
-// import { getSmsCaptcha, getEmailCaptcha, updateUserEmail, updateUserPhone } from '@/apis'
+import { useWindowSize } from '@vueuse/core'
 import { Message } from '@arco-design/web-vue'
+// import { getSmsCaptcha, getEmailCaptcha, updateUserEmail, updateUserPhone } from '@/apis'
 import { updateUserPassword } from '@/apis'
 import { encryptByRsa } from '@/utils/encrypt'
 import { useUserStore } from '@/stores'
@@ -27,6 +36,7 @@ import { type Columns, GiForm } from '@/components/GiForm'
 import { useForm } from '@/hooks'
 import * as Regexp from '@/utils/regexp'
 
+const { width } = useWindowSize()
 const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
 

src/views/setting/profile/BasicInfoUpdateModal.vue

@@ -1,16 +1,27 @@
 <template>
-  <a-modal v-model:visible="visible" title="修改基本信息" @before-ok="save" @close="reset">
+  <a-modal
+    v-model:visible="visible"
+    title="修改基本信息"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 500 ? 500 : '100%'"
+    @before-ok="save"
+    @close="reset"
+  >
     <GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
   </a-modal>
 </template>
 
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
 import { Message } from '@arco-design/web-vue'
 import { updateUserBaseInfo } from '@/apis'
 import { type Columns, GiForm } from '@/components/GiForm'
 import { useForm } from '@/hooks'
 import { useUserStore } from '@/stores'
 
+const { width } = useWindowSize()
+
 const options: Options = {
   form: {},
   col: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },

src/views/setting/profile/Security.vue

@@ -49,7 +49,7 @@ modeList.value = [
     title: '安全手机',
     icon: 'phone-color',
     value: `${`${userInfo.value.phone} ` || '手机号'}`,
-    subtitle: `可用于身份验证、密码找回、通知接收`,
+    subtitle: `可用于登录、身份验证、密码找回、通知接收`,
     type: 'phone',
     jumpMode: 'modal',
     status: !!userInfo.value.phone,
@@ -59,7 +59,7 @@ modeList.value = [
     title: '安全邮箱',
     icon: 'email-color',
     value: `${`${userInfo.value.email} ` || '邮箱'}`,
-    subtitle: `可用于身份验证、密码找回、通知接收`,
+    subtitle: `可用于登录、身份验证、密码找回、通知接收`,
     type: 'email',
     jumpMode: 'modal',
     status: !!userInfo.value.email,