Эх сурвалжийг харах

refactor(pc): 优化 PC 端组件样式和布局

- 调整对话框宽度和输入框样式
- 优化二维码容器样式
- 增加联系电话格式校验
- 引入全局样式文件

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>
tangshizhe 1 долоо хоног өмнө
parent
commit
cbe3820cfc

+ 1 - 1
plugins/leave-source/src/lib/pc/components/BaseDialog.vue

@@ -19,7 +19,7 @@ import AnimatedOverlay from '../../../components/dialog/AnimatedOverlay.vue'
 const props = defineProps({
   width: {
     type: String,
-    default: '316px'
+    default: '380px'
   }
 })
 

+ 6 - 1
plugins/leave-source/src/lib/pc/components/ContractMine.vue

@@ -51,10 +51,15 @@ export default {
     }
     .contract-mine-input {
       width: 138px;
-      height: 24px;
+      height: 32px;
       border-radius: 4px;
       border: 1px solid #E0E0E0;
       padding: 4px 16px;
+      line-height: 32px;
+      &::placeholder {
+        font-size: 12px;
+        line-height: 32px;
+      }
     }
   }
   .contract-mine-btn {

+ 2 - 2
plugins/leave-source/src/lib/pc/components/PhoneEditDialog.vue

@@ -89,8 +89,8 @@ defineExpose({
       .phone-edit-ipt {
         margin-left: 8px;
         padding: 4px 16px;
-        width: 138px;
-        height: 24px;
+        width: 170px;
+        height: 32px;
         border: 1px solid #E0E0E0;
         border-radius: 4px;
         color: #1D1D1D;

+ 0 - 1
plugins/leave-source/src/lib/pc/components/QrCode.vue

@@ -34,7 +34,6 @@ export default {
 <style lang="scss" scoped>
 .qr-code-container {
   display: flex;
-  width: 185px;
   padding: 0 20px 0 32px;
   .qr-code-content {
     padding: 0 20px;

+ 6 - 0
plugins/leave-source/src/lib/pc/content-dialog.vue

@@ -2,6 +2,7 @@
 import { watch, watchEffect } from 'vue'
 import AnimatedOverlay from '../../components/dialog/AnimatedOverlay.vue'
 import { useContactMeLogic, usePreLeaveInfo } from '../../utils/hooks.js'
+import { showToast } from '../../utils/toast'
 import ContentCard from './components/content-card.vue'
 import PhoneConfirmDialog from './components/PhoneConfirmDialog.vue'
 import PhoneEditDialog from './components/PhoneEditDialog.vue'
@@ -53,7 +54,12 @@ const {
 })
 
 function contactMeEvent(phone) {
+  const phonePass = checkPhonePass(phone)
+  if (!phonePass) {
+    return showToast('联系电话格式不正确')
+  }
   configInfo.phone = phone
+  changePhoneDialog.phoneNumber = phone
   contactMe()
 }
 

+ 1 - 0
plugins/leave-source/src/utils/hooks.js

@@ -213,6 +213,7 @@ export function useContactMeLogic(options = {}) {
     confirmPhoneDialog,
     closeAllDialog,
     showSuccessDialog,
+    checkPhonePass,
     dialogEvents,
     contactMe
   }

+ 3 - 0
plugins/leave-source/vite.config.js

@@ -42,6 +42,9 @@ export default defineConfig(({ mode, command }) => {
           }
         }
       },
+      styles: [
+        './src/assets/style/common.scss'
+      ],
       target: 'es2015' // 指定目标语法版本
     },
     plugins: [