af-mobile-client-vue3 1.0.94 → 1.0.96

package/src/components/data/XFormItem/index.vue

@@ -1,8 +1,21 @@
 <script setup lang="ts">
+import type { Numeric } from 'vant/es/utils'
+import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
+import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
+import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
+import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
+import { runLogic } from '@af-mobile-client-vue3/services/api/common'
+import { searchToListOption, searchToOption } from '@af-mobile-client-vue3/services/v3Api'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
+import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
+import { areaList } from '@vant/area-data'
+import { debounce } from 'lodash-es'
 import {
   Area as VanArea,
   Calendar as VanCalendar,
   Checkbox as VanCheckbox,
+  CheckboxGroup as vanCheckboxGroup,
   DatePicker as VanDatePicker,
   Field as VanField,
   Picker as VanPicker,
@@ -15,21 +28,8 @@ import {
   Stepper as VanStepper,
   Switch as VanSwitch,
   TimePicker as VanTimePicker,
-  CheckboxGroup as vanCheckboxGroup,
 } from 'vant'
 import { computed, defineEmits, defineProps, getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
-import { areaList } from '@vant/area-data'
-import { runLogic } from '@af-mobile-client-vue3/services/api/common'
-import Uploader from '@af-mobile-client-vue3/components/core/Uploader/index.vue'
-import XSelect from '@af-mobile-client-vue3/components/core/XSelect/index.vue'
-import XMultiSelect from '@af-mobile-client-vue3/components/core/XMultiSelect/index.vue'
-import XGridDropOption from '@af-mobile-client-vue3/components/core/XGridDropOption/index.vue'
-import type { Numeric } from 'vant/es/utils'
-import { getDict } from '@af-mobile-client-vue3/utils/dictUtil'
-import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-import { debounce } from 'lodash-es'
-import { searchToListOption, searchToOption } from '@af-mobile-client-vue3/services/v3Api'
 
 const props = defineProps({
   attr: {
@@ -87,8 +87,8 @@ const props = defineProps({
 
 const emits = defineEmits(['update:modelValue'])
 // 判断并初始化防抖函数
-let debouncedUserLinkFunc: Function | null = null
-let debouncedDepLinkFunc: Function | null = null
+let debouncedUserLinkFunc: (() => void) | null = null
+let debouncedDepLinkFunc: (() => void) | null = null
 
 const { attr, form, mode, serviceName, getDataParams, columnsField } = props
 const calendarShow = ref(false)
@@ -237,7 +237,7 @@ function formTypeCheck(attr, value) {
       }
       break
     case 'number':
-      if (!/^[+-]?(\d+(\.\d*)?|\.\d+)$/.test(value)) {
+      if (!/^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/.test(value)) {
         errorMessage.value = `${attr.name}必须为数字`
         return
       }
@@ -263,13 +263,13 @@ function formTypeCheck(attr, value) {
       }
       break
     case 'email':
-      if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
+      if (!/^[\w.%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test(value)) {
         errorMessage.value = `请输入正确的邮箱地址`
         return
       }
       break
     case 'idNumber':
-      if (!/^(^\d{15}$|^\d{17}([0-9]|X)$)$/.test(value)) {
+      if (!/^(?:\d{15}|\d{17}[0-9X])$/.test(value)) {
         errorMessage.value = `请输入正确的身份证号码`
         return
       }
@@ -281,13 +281,13 @@ function formTypeCheck(attr, value) {
       }
       break
     case 'landlineNumber':
-      if (!/^(0\d{2,3}[-\s]?)\d{7,8}$/.test(value)) {
+      if (!/^0\d{2,3}[-\s]?\d{7,8}$/.test(value)) {
         errorMessage.value = `请输入正确的座机号码`
         return
       }
       break
     case 'greaterThanZero':
-      if (!/^(?:[1-9]\d*(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/.test(value)) {
+      if (!/^(?:[1-9]\d*(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(value)) {
         errorMessage.value = `请输入一个大于0的数字`
         return
       }
@@ -312,7 +312,7 @@ function formTypeCheck(attr, value) {
       const status = ref(true)
       // 提取函数体部分
       // eslint-disable-next-line no-case-declarations
-      const funcBodyMatch = funcStr.match(/function\s*\(.*?\)\s*{([\s\S]*)}/)
+      const funcBodyMatch = funcStr.match(/function\s*\(.*?\)\s*\{([\s\S]*)\}/)
       if (!funcBodyMatch)
         throw new Error('自定义校验函数不合法')
       // eslint-disable-next-line no-case-declarations
@@ -624,7 +624,7 @@ function onPickerCancel() {
         name="checkboxGroup"
         :label="labelData"
         :label-align="labelAlign"
-      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+        :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
         :rules="[{ required: attr.rule.required === 'true', message: `请选择${attr.name}` }]"
       >
         <template #input>
@@ -713,7 +713,7 @@ function onPickerCancel() {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
-        <VanStepper :disabled="readonly" v-model="(localValue as string)" />
+        <VanStepper v-model="(localValue as string)" :disabled="readonly" />
       </template>
     </VanField>
 
@@ -727,7 +727,7 @@ function onPickerCancel() {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
-        <VanRate :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" v-model="(localValue as number)" />
+        <VanRate v-model="(localValue as number)" :size="25" :readonly="readonly" void-color="#eee" void-icon="star" color="#ffd21e" />
       </template>
     </VanField>
 
@@ -741,7 +741,7 @@ function onPickerCancel() {
       :rules="[{ required: attr.rule.required === 'true', message: '请选择' }]"
     >
       <template #input>
-        <VanSlider :readonly="readonly" v-model="(localValue as number)" />
+        <VanSlider v-model="(localValue as number)" :readonly="readonly" />
       </template>
     </VanField>
 
@@ -969,7 +969,6 @@ function onPickerCancel() {
       :maxlength="attr.maxlength ? attr.maxlength : 200"
       :placeholder="attr.placeholder ? attr.placeholder : `请输入${attr.name}`"
       show-word-limit
-      label-align="top"
       :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
     />
 

package/src/components/data/XOlMap/demo.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import XOlMap from './index.vue'
+import 'vant/lib/index.css'
+
+const mapRef = ref()
+
+onMounted(() => {
+  // 初始化地图
+  mapRef.value.init({
+    center: [108.948024, 34.263161], // 西安坐标
+    zoom: 12,
+    maxZoom: 18,
+    minZoom: 4,
+    tianDiTuKey: 'c16876b28898637c0a1a68b3fa410504',
+  })
+})
+
+// 地图控制函数
+function handleSetCenter(): void {
+  // 切换到北京
+  mapRef.value.setCenter([116.404, 39.915])
+}
+
+function handleSetZoom(): void {
+  // 设置缩放级别为14
+  mapRef.value.setZoom(14)
+}
+
+function handleGetZoom(): void {
+  // 获取当前缩放级别
+  const zoom = mapRef.value.getZoom()
+  // eslint-disable-next-line no-alert
+  alert(`当前缩放级别：${zoom}`)
+}
+
+function handleSetCenterAndZoom(): void {
+  // 切换到杭州并设置缩放级别
+  mapRef.value.setCenterAndZoom([120.153576, 30.287459], 15)
+}
+
+// 添加点位示例,创建两种类型
+function handleAddPoints(): void {
+  mapRef.value.addVectorPoints({
+    icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+    iconAnchor: [0.5, 1],
+    data: [
+      {
+        longitude: 108.988024,
+        latitude: 34.283161,
+        title: '示例点2',
+        extData: { type: 'poi' },
+      },
+    ],
+    onClick: (point) => {
+      // eslint-disable-next-line no-alert
+      alert(`点击了: ${point.title}`)
+    },
+  })
+  mapRef.value.addVectorPoints({
+    icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+    iconAnchor: [0.5, 1],
+    data: [
+      {
+        longitude: 108.948024,
+        latitude: 34.263161,
+        title: '西安市',
+        extData: { type: 'city' },
+      },
+    ],
+    onClick: (point) => {
+      // eslint-disable-next-line no-alert
+      alert(`点击了: ${point.title}`)
+    },
+  })
+}
+
+// 添加海量点示例
+function handleAddMassPoints(): void {
+  // 生成10000个随机点
+  const data = Array.from({ length: 10000 }, (_, index) => {
+    // 在西安市区范围内随机生成点
+    const offset = 0.1 // 控制点的分布范围
+    return {
+      longitude: 108.948024 + (Math.random() - 0.5) * offset,
+      latitude: 34.263161 + (Math.random() - 0.5) * offset,
+      title: `点位${index + 1}`,
+      extData: { type: 'mass' },
+    }
+  })
+
+  mapRef.value.addWebGLPoints({
+    icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
+    iconSize: [6, 6],
+    data,
+    performance: {
+      enableChunk: true,
+      chunkSize: 1000,
+    },
+  })
+}
+</script>
+
+<template>
+  <div class="demo-container">
+    <div class="map-container">
+      <XOlMap ref="mapRef" />
+    </div>
+    <div class="control-panel">
+      <div class="control-group">
+        <div class="group-title">
+          地图控制
+        </div>
+        <van-button type="primary" size="small" @click="handleSetCenter">
+          切换到北京
+        </van-button>
+        <van-button type="primary" size="small" @click="handleSetZoom">
+          设置缩放级别14
+        </van-button>
+        <van-button type="primary" size="small" @click="handleGetZoom">
+          获取当前缩放级别
+        </van-button>
+        <van-button type="primary" size="small" @click="handleSetCenterAndZoom">
+          切换到杭州(级别15)
+        </van-button>
+      </div>
+
+      <div class="control-group">
+        <div class="group-title">
+          点位示例
+        </div>
+        <van-button type="success" size="small" @click="handleAddPoints">
+          添加普通点位
+        </van-button>
+        <van-button type="warning" size="small" @click="handleAddMassPoints">
+          添加海量点(1万)
+        </van-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.demo-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+
+.control-panel {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  z-index: 1000;
+  background: white;
+  padding: 10px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .group-title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+      padding-left: 4px;
+      border-left: 3px solid #1989fa;
+    }
+  }
+
+  :deep(.van-button) {
+    width: 140px;
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .control-panel {
+    left: 8px;
+    top: 8px;
+    padding: 8px;
+    gap: 12px;
+
+    .control-group {
+      gap: 6px;
+
+      .group-title {
+        font-size: 12px;
+      }
+    }
+
+    :deep(.van-button) {
+      width: 120px;
+      font-size: 12px;
+    }
+  }
+}
+</style>