perf: 优化弹窗移动端适配

src/components/ExportImage.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
+import { useDialogWidth } from '@/hooks'
 interface ImageConfig {
   name: string
   type: string
   padding: number
   backgroundColor: string
 }
-
+const width = useDialogWidth()
 const visible = defineModel<boolean>()
 const emit = defineEmits({
   'confirm': (val: ImageConfig) => true,
@@ -46,7 +47,7 @@ function confirm() {
 </script>
 
 <template>
-  <el-dialog v-model="visible" title="将画布导出为图片" width="378">
+  <el-dialog v-model="visible" title="将画布导出为图片" :width="width">
     <el-form label-width="72px">
       <el-form-item label="图片名称">
         <el-input

src/components/FieldsCustom.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-const visible = defineModel<boolean>()
 import { useGlobalStore } from '@/store'
+import { useDialogWidth } from '@/hooks'
+
 
+const width = useDialogWidth()
+const visible = defineModel<boolean>()
 const { fields } = toRefs(useGlobalStore())
 function handleType(index: number) {
   return ['success', 'info', 'warning'][index % 3] as any
@@ -21,7 +24,7 @@ function addField() {
 </script>
 
 <template>
-  <el-dialog v-model="visible" title="指定额外解析字段" width="400">
+  <el-dialog v-model="visible" title="指定额外解析字段" :width="width">
     <div class='flex gap-3'>
       <el-input ref="inputRef" class='flex-1' v-model.trim="inputValue" placeholder="输入字段名称，可按回车确认" size="small"
         @keyup.enter="addField" />

src/components/LayoutCustom.vue

@@ -1,13 +1,11 @@
 <script lang="ts" setup>
 import LayoutOptions from './LayoutOptions.vue'
 import { useLayoutStore } from '@/store'
-import {  useMobile } from '@/hooks'
+import { useDialogWidth } from '@/hooks'
 
 const visible = defineModel<boolean>()
 
-const isMobile = useMobile()
-const { width } = useWindowSize()
-const drawerSize = computed(() =>  isMobile.value ? width.value :   400 )
+const width = useDialogWidth()
 // 弹窗相关
 const { activeLayout, activeConfig } = toRefs(useLayoutStore())
 </script>
@@ -21,7 +19,7 @@ const { activeLayout, activeConfig } = toRefs(useLayoutStore())
     append-to-body
     modal-class="md:w-100"
     direction="ltr"
-    :size="drawerSize"
+    :size="width"
     close-on-press-escape
   >
     <LayoutOptions v-model="activeLayout" />

src/components/SearchInput.vue

@@ -2,12 +2,14 @@
 import { useGlobalStore } from '@/store'
 
 const { keyword, focusCount } = toRefs(useGlobalStore())
+
+
 </script>
 
 <template>
-  <div class="flex-y-center gap-1 bg-white dark:bg-white/20 rounded px1  h-30px flex-nowrap lt-md:my-2">
+  <div class="flex-y-center gap-1 bg-white dark:bg-white/20 rounded px1  h-30px flex-nowrap md:w-50 lt-md:my-2">
     <span class="iconfont icon-search text-gray" />
     <input v-model.trim="keyword" class="flex-1 outline-none bg-transparent" text="gray-500 dark:gray-300" type="text" placeholder="请输入">
-    <span v-show="focusCount" class="text-green text-nowrap ">{{ focusCount }} 个</span>
+    <span v-show="focusCount" class="text-primary text-nowrap ">{{ focusCount }} 个</span>
   </div>
 </template>

src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useDarkAnimate'
 export * from './useMobile'
+export * from './useDialogWidth'

src/hooks/useDialogWidth.ts

@@ -0,0 +1,8 @@
+import { useMobile } from '@/hooks'
+
+export function useDialogWidth() {
+  const isMobile = useMobile()
+  const { width:w } = useWindowSize()
+  const width = computed(() => isMobile.value && w.value < 400 ? w.value : 400)
+  return width
+}