af-mobile-client-vue3 1.1.4 → 1.1.6

package/build/vite/index.ts

@@ -1,91 +1,105 @@
-import path from 'node:path'
-import process from 'node:process'
-import legacy from '@vitejs/plugin-legacy'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import viteCompression from 'vite-plugin-compression'
-import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
-import { VitePWA } from 'vite-plugin-pwa'
-import Sitemap from 'vite-plugin-sitemap'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-import { createViteVConsole } from './vconsole'
-
-export function createVitePlugins() {
-  const root = process.cwd()
-
-  return [
-    vue({
-      template: {
-        compilerOptions: {
-          // 注册自定义组件micro-app 防止控制台警告
-          isCustomElement: tag => tag.startsWith('micro-app'),
-        },
-      },
-    }),
-
-    // https://github.com/jbaubree/vite-plugin-sitemap
-    Sitemap(),
-
-    // https://github.com/pengzhanbo/vite-plugin-mock-dev-server
-    mockDevServerPlugin(),
-
-    // svg icon
-    createSvgIconsPlugin({
-      // 指定图标文件夹
-      iconDirs: [path.resolve(root, 'src/icons/svg')],
-      // 指定 symbolId 格式
-      symbolId: 'icon-[dir]-[name]',
-    }),
-
-    // 生产环境 gzip 压缩资源
-    viteCompression({
-      algorithm: 'gzip',
-      // 文件大于10240b（10kb）时才压缩文件
-      threshold: 10240,
-      // 禁止在控制台输出压缩结果
-      verbose: false,
-      // 压缩完文件后删除源文件
-      deleteOriginFile: false,
-    }),
-
-    legacy({
-      targets: ['defaults', 'not IE 11'],
-    }),
-
-    // https://github.com/antfu/unocss
-    // see uno.config.ts for config
-    UnoCSS(),
-
-    // https://github.com/vadxq/vite-plugin-vconsole
-    createViteVConsole(),
-
-    // https://github.com/antfu/vite-plugin-pwa
-    VitePWA({
-      registerType: 'autoUpdate',
-      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
-      manifest: {
-        name: 'af-mobile-client-vue3',
-        short_name: 'af-mobile-client-vue3',
-        theme_color: '#ffffff',
-        icons: [
-          {
-            src: '/pwa-192x192.png',
-            sizes: '192x192',
-            type: 'image/png',
-          },
-          {
-            src: '/pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-          },
-          {
-            src: '/pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'any maskable',
-          },
-        ],
-      },
-    }),
-  ]
-}
+import path from 'node:path'
+import process from 'node:process'
+import legacy from '@vitejs/plugin-legacy'
+import vue from '@vitejs/plugin-vue'
+import { presetIcons } from 'unocss'
+import UnoCSS from 'unocss/vite'
+import viteCompression from 'vite-plugin-compression'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+import { VitePWA } from 'vite-plugin-pwa'
+import Sitemap from 'vite-plugin-sitemap'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import { createViteVConsole } from './vconsole'
+
+export function createVitePlugins() {
+  const root = process.cwd()
+
+  return [
+    vue({
+      template: {
+        compilerOptions: {
+          // 注册自定义组件micro-app 防止控制台警告
+          isCustomElement: tag => tag.startsWith('micro-app'),
+        },
+      },
+    }),
+
+    // https://github.com/jbaubree/vite-plugin-sitemap
+    Sitemap(),
+
+    // https://github.com/pengzhanbo/vite-plugin-mock-dev-server
+    mockDevServerPlugin(),
+
+    // svg icon
+    createSvgIconsPlugin({
+      // 指定图标文件夹
+      iconDirs: [path.resolve(root, 'src/icons/svg')],
+      // 指定 symbolId 格式
+      symbolId: 'icon-[dir]-[name]',
+    }),
+
+    // 生产环境 gzip 压缩资源
+    viteCompression({
+      algorithm: 'gzip',
+      // 文件大于10240b（10kb）时才压缩文件
+      threshold: 10240,
+      // 禁止在控制台输出压缩结果
+      verbose: false,
+      // 压缩完文件后删除源文件
+      deleteOriginFile: false,
+    }),
+
+    legacy({
+      targets: ['defaults', 'not IE 11'],
+    }),
+
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    UnoCSS({
+      presets: [
+        presetIcons({
+          scale: 1.2,
+          warn: true,
+          extraProperties: {
+            'display': 'inline-block',
+            'vertical-align': 'middle',
+            'width': 'var(--van-font-size-md)',
+            'height': 'var(--van-font-size-md)',
+          },
+        }),
+      ],
+    }),
+
+    // https://github.com/vadxq/vite-plugin-vconsole
+    createViteVConsole(),
+
+    // https://github.com/antfu/vite-plugin-pwa
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
+      manifest: {
+        name: 'af-mobile-client-vue3',
+        short_name: 'af-mobile-client-vue3',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: '/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: '/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+    }),
+  ]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Vue + Vite component lib",
   "license": "MIT",
   "engines": {
@@ -25,6 +25,7 @@
     "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.6.0",
     "@vueuse/core": "^13.1.0",
+    "@iconify/vue": "4.3.0",
     "animate.css": "^4.1.1",
     "axios": "^1.8.4",
     "crypto-js": "^4.2.0",
@@ -44,6 +45,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.12.0",
+    "@iconify/json": "2.2.318",
     "@types/crypto-js": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.14.1",

package/src/components/core/Uploader/index.vue

@@ -79,8 +79,8 @@ function deleteFileFunction(file: any) {
 // -------------------------  初始化  -------------------------
 
 function initComponent() {
-  if (props.imageList.length > 0) {
-    imageList.value = props.imageList.map((item) => {
+  if (props?.imageList?.length > 0) {
+    imageList.value = props?.imageList.map((item) => {
       return { id: item.id, name: item.f_filename, url: item.f_downloadpath }
     })
   }

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

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import type { FieldType } from 'vant'
 import type { Numeric } from 'vant/es/utils'
+import type { LocationResult } from '../XOlMap/types'
 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 XLocationPicker from '@af-mobile-client-vue3/components/data/XOlMap/XLocationPicker/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'
@@ -144,13 +147,9 @@ const showFormItemFunc = debounce(async () => {
 
 const localValue = computed({
   get() {
-    // if (props.modelValue !== undefined) {
-    //   return props.modelValue
-    // }
     switch (attr.type) {
       case 'uploader':
         if (mode === '查询') {
-          // console.log(querySelectDefaultValue.value)
           return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
         }
         else {
@@ -510,7 +509,7 @@ function onPickerConfirm({ selectedOptions }) {
 // 日期时间选择数据
 const dateTimePickerValue = ref(undefined)
 function showDataTimePicker() {
-  if (props.modelValue !== undefined && props.modelValue !== '' && props.modelValue !== null) {
+  if (props.modelValue !== undefined && props.modelValue !== '' && props.modelValue !== null && typeof props.modelValue === 'string') {
     // 拆分日期和时间
     const [dateStr, timeStr] = props.modelValue.split(' ')
     // 拆分日期部分
@@ -587,6 +586,14 @@ function onDateTimePickerConfirm() {
 function onPickerCancel() {
   showDatePicker.value = false
 }
+
+const showAddressPicker = ref(false)
+const addressValue = ref('')
+// 处理地址选择器确认
+function handleAddressConfirm(location) {
+  addressValue.value = location.address
+  showAddressPicker.value = false
+}
 </script>
 
 <template>
@@ -843,11 +850,11 @@ function onPickerCancel() {
       >
         <VanDatePicker
           v-model="dateTimePickerValue.date"
-          :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
+          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
         />
         <VanTimePicker
           v-model="dateTimePickerValue.time"
-          :columns-type="['hour', 'minute', 'second']"
+          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
           :min-time="attr.minTime ? attr.minTime : '00:00:00'"
           :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
         />
@@ -880,15 +887,13 @@ function onPickerCancel() {
       >
         <VanDatePicker
           v-model="dateTimePickerValue.date"
-          :columns-type="attr.columnsType ? attr.columnsType : ['year', 'month', 'day']"
-          :readonly="attr.readonly ? attr.readonly : false"
+          :columns-type="attr.dateColumnsType || ['year', 'month', 'day']"
         />
         <VanTimePicker
           v-model="dateTimePickerValue.time"
-          :columns-type="['hour', 'minute', 'second']"
+          :columns-type="attr.timeColumnsType || ['hour', 'minute', 'second']"
           :min-time="attr.minTime ? attr.minTime : '00:00:00'"
           :max-time="attr.maxTime ? attr.maxTime : '23:59:59'"
-          :readonly="attr.readonly ? attr.readonly : false"
         />
       </VanPickerGroup>
     </VanPopup>
@@ -979,7 +984,7 @@ function onPickerCancel() {
       :label="labelData"
       :label-align="labelAlign"
       :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
-      :type="attr.type"
+      :type="attr.type as FieldType"
       :readonly="readonly"
       :disabled="attr.disabled"
       :placeholder="placeholder"
@@ -988,6 +993,36 @@ function onPickerCancel() {
       :rules="[{ required: attr.rule.required === 'true', message: `请填写${attr.name}` }]"
       @blur="() => formTypeCheck(attr, localValue as string)"
     />
+
+    <!-- 地址选择器 -->
+    <VanField
+      v-if="attr.type === 'addressSearch' && showItem"
+      v-model="addressValue"
+      name="addressSearch"
+      :label="labelData"
+      :label-align="labelAlign"
+      :input-align="attr.inputAlign ? attr.inputAlign : 'left'"
+      readonly
+      is-link
+      :placeholder="placeholder"
+      :rules="[{ required: attr.rule.required === 'true', message: '请选择地址' }]"
+      @click="readonly ? null : showAddressPicker = true"
+    />
+    <VanPopup
+      v-model:show="showAddressPicker"
+      position="bottom"
+      :style="{ height: '80vh' }"
+      teleport="body"
+    >
+      <XLocationPicker
+        v-model="localValue as LocationResult"
+        tian-di-tu-key="c16876b28898637c0a1a68b3fa410504"
+        amap-key="5ebabc4536d4b42e0dd1e20175cca8ab"
+        :default-center="[108.948024, 34.263161]"
+        :default-zoom="12"
+        @confirm="handleAddressConfirm"
+      />
+    </VanPopup>
   </div>
 </template>
 

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

@@ -996,7 +996,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .map-wrapper {
   position: relative;
   width: 100%;

package/src/router/routes.ts

@@ -6,6 +6,7 @@ import PageLayout from '@af-mobile-client-vue3/layout/PageLayout.vue'
 import SingleLayout from '@af-mobile-client-vue3/layout/SingleLayout.vue'
 import NotFound from '@af-mobile-client-vue3/views/common/NotFound.vue'
 import EvaluateRecordView from '@af-mobile-client-vue3/views/component/EvaluateRecordView/index.vue'
+import IconifyView from '@af-mobile-client-vue3/views/component/IconifyView/index.vue'
 import ComponentView from '@af-mobile-client-vue3/views/component/index.vue'
 import XCellDetailView from '@af-mobile-client-vue3/views/component/XCellDetailView/index.vue'
 import XCellListView from '@af-mobile-client-vue3/views/component/XCellListView/index.vue'
@@ -140,6 +141,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'XRequestView',
         component: XRequestView,
       },
+      {
+        path: '/Component/IconifyView',
+        name: 'IconifyView',
+        component: IconifyView,
+      },
     ],
   },
   {

package/src/views/component/IconifyView/index.vue

@@ -0,0 +1,507 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import {
+  Cell as VanCell,
+  CellGroup as VanCellGroup,
+  Col as VanCol,
+  Divider as VanDivider,
+  Field as VanField,
+  Grid as VanGrid,
+  GridItem as VanGridItem,
+  NavBar as VanNavBar,
+  Row as VanRow,
+  Tab as VanTab,
+  Tabs as VanTabs,
+} from 'vant'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const searchKeyword = ref('')
+const activeTab = ref(0)
+
+// 图标分类展示
+const iconCategories = [
+  {
+    title: '常用图标',
+    icons: [
+      { name: 'mdi:home', label: '首页' },
+      { name: 'mdi:account', label: '用户' },
+      { name: 'mdi:bell', label: '通知' },
+      { name: 'mdi:cog', label: '设置' },
+      { name: 'mdi:magnify', label: '搜索' },
+      { name: 'mdi:plus', label: '添加' },
+      { name: 'mdi:check', label: '确认' },
+      { name: 'mdi:close', label: '关闭' },
+    ],
+  },
+  {
+    title: '方向图标',
+    icons: [
+      { name: 'mdi:arrow-up', label: '向上' },
+      { name: 'mdi:arrow-right', label: '向右' },
+      { name: 'mdi:arrow-down', label: '向下' },
+      { name: 'mdi:arrow-left', label: '向左' },
+      { name: 'mdi:chevron-up', label: '上箭头' },
+      { name: 'mdi:chevron-right', label: '右箭头' },
+      { name: 'mdi:chevron-down', label: '下箭头' },
+      { name: 'mdi:chevron-left', label: '左箭头' },
+    ],
+  },
+  {
+    title: '文件图标',
+    icons: [
+      { name: 'mdi:file', label: '文件' },
+      { name: 'mdi:file-document', label: '文档' },
+      { name: 'mdi:file-excel', label: 'Excel' },
+      { name: 'mdi:file-pdf', label: 'PDF' },
+      { name: 'mdi:file-image', label: '图片' },
+      { name: 'mdi:file-video', label: '视频' },
+      { name: 'mdi:file-music', label: '音频' },
+      { name: 'mdi:folder', label: '文件夹' },
+    ],
+  },
+  {
+    title: '通信图标',
+    icons: [
+      { name: 'mdi:email', label: '邮件' },
+      { name: 'mdi:phone', label: '电话' },
+      { name: 'mdi:message', label: '消息' },
+      { name: 'mdi:chat', label: '聊天' },
+      { name: 'mdi:wifi', label: 'WiFi' },
+      { name: 'mdi:bluetooth', label: '蓝牙' },
+      { name: 'mdi:share', label: '分享' },
+      { name: 'mdi:cloud', label: '云' },
+    ],
+  },
+]
+
+// UnoCSS图标示例
+const unocssIcons = [
+  { name: 'i-mdi:home', label: '首页' },
+  { name: 'i-mdi:account', label: '用户' },
+  { name: 'i-mdi:bell', label: '通知' },
+  { name: 'i-mdi:cog', label: '设置' },
+  { name: 'i-mdi:magnify', label: '搜索' },
+  { name: 'i-mdi:plus', label: '添加' },
+  { name: 'i-mdi:check', label: '确认' },
+  { name: 'i-mdi:close', label: '关闭' },
+  { name: 'i-mdi:arrow-up', label: '向上' },
+  { name: 'i-mdi:arrow-right', label: '向右' },
+  { name: 'i-mdi:arrow-down', label: '向下' },
+  { name: 'i-mdi:arrow-left', label: '向左' },
+]
+
+// 样式设置示例
+const styleExamples = [
+  { name: 'mdi:home', label: '默认样式', style: {} },
+  { name: 'mdi:home', label: '大尺寸', style: { fontSize: '32px' } },
+  { name: 'mdi:home', label: '自定义颜色', style: { color: '#1989fa' } },
+  { name: 'mdi:home', label: '旋转效果', style: { transform: 'rotate(45deg)' } },
+  { name: 'mdi:home', label: '背景填充', style: { backgroundColor: '#eee', padding: '5px', borderRadius: '4px' } },
+  { name: 'mdi:home', label: '悬停效果', class: 'hover-effect', style: {} },
+]
+
+// UnoCSS样式设例
+const unocssStyleExamples = [
+  { name: 'i-mdi:home', label: '默认样式', classes: '' },
+  { name: 'i-mdi:home', label: '大尺寸 (text-3xl)', classes: 'text-3xl' },
+  { name: 'i-mdi:home', label: '自定义颜色 (text-blue-500)', classes: 'text-blue-500' },
+  { name: 'i-mdi:home', label: '旋转效果 (transform rotate-45)', classes: 'transform rotate-45' },
+  { name: 'i-mdi:home', label: '背景填充 (bg-gray-200 p-1 rounded)', classes: 'bg-gray-200 p-1 rounded' },
+  { name: 'i-mdi:home', label: '悬停效果 (hover:scale-125)', classes: 'transition hover:scale-125' },
+]
+
+// 使用方法示例代码
+const usageExamples = [
+  {
+    title: '基本使用',
+    code: '<Icon icon="mdi:home" />',
+  },
+  {
+    title: '设置尺寸',
+    code: '<Icon icon="mdi:home" :width="24" :height="24" />',
+  },
+  {
+    title: '自定义样式',
+    code: '<Icon icon="mdi:home" style="color: red; font-size: 24px;" />',
+  },
+  {
+    title: '内联样式',
+    code: '<Icon icon="mdi:home" :style="{ color: \'#1989fa\', fontSize: \'24px\' }" />',
+  },
+  {
+    title: '自定义类名',
+    code: '<Icon icon="mdi:home" class="custom-icon" />',
+  },
+]
+
+// UnoCSS使用方法示例代码
+const unocssUsageExamples = [
+  {
+    title: '基本使用',
+    code: '<div class="i-mdi:home"></div>',
+  },
+  {
+    title: '设置尺寸',
+    code: '<div class="i-mdi:home text-2xl"></div>',
+  },
+  {
+    title: '自定义颜色',
+    code: '<div class="i-mdi:home text-red-500"></div>',
+  },
+  {
+    title: '添加多个样式',
+    code: '<div class="i-mdi:home p-1 bg-gray-100 rounded text-blue-500"></div>',
+  },
+  {
+    title: '交互效果',
+    code: '<div class="i-mdi:home transition hover:text-green-500 hover:scale-125"></div>',
+  },
+]
+
+// 过滤显示的图标
+const filteredCategories = computed(() => {
+  if (!searchKeyword.value) {
+    return iconCategories
+  }
+
+  return iconCategories.map((category) => {
+    const filteredIcons = category.icons.filter(icon =>
+      icon.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+      || icon.label.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+    )
+
+    return {
+      ...category,
+      icons: filteredIcons,
+    }
+  }).filter(category => category.icons.length > 0)
+})
+
+// 过滤UnoCSS图标
+const filteredUnocssIcons = computed(() => {
+  if (!searchKeyword.value) {
+    return unocssIcons
+  }
+
+  return unocssIcons.filter(icon =>
+    icon.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+    || icon.label.toLowerCase().includes(searchKeyword.value.toLowerCase()),
+  )
+})
+</script>
+
+<template>
+  <div class="iconify-view">
+    <VanNavBar
+      title="Iconify 图标使用示例"
+      left-arrow
+      @click-left="router.back()"
+    />
+
+    <div class="container">
+      <section class="intro-section">
+        <h2>Iconify 图标使用</h2>
+        <p>
+          Iconify 是一个开源的图标框架，提供超过 100,000 个开源图标。在本项目中有两种使用方式：
+        </p>
+      </section>
+
+      <VanTabs v-model:active="activeTab" animated>
+        <VanTab title="@iconify/vue 组件">
+          <section class="intro-section">
+            <p>
+              使用 @iconify/vue 提供的 Icon 组件可以直接在模板中渲染图标。
+            </p>
+          </section>
+
+          <section class="icons-section">
+            <div v-for="(category, index) in filteredCategories" :key="index" class="icon-category">
+              <h3>{{ category.title }}</h3>
+              <VanGrid :column-num="4" :border="false">
+                <VanGridItem v-for="(icon, iconIndex) in category.icons" :key="iconIndex">
+                  <div class="icon-item">
+                    <Icon :icon="icon.name" width="28" height="28" />
+                    <div class="icon-label">
+                      {{ icon.label }}
+                    </div>
+                    <div class="icon-name">
+                      {{ icon.name }}
+                    </div>
+                  </div>
+                </VanGridItem>
+              </VanGrid>
+            </div>
+          </section>
+
+          <VanDivider />
+
+          <section class="style-section">
+            <h3>样式自定义示例</h3>
+            <VanGrid :column-num="3" :border="false">
+              <VanGridItem v-for="(example, index) in styleExamples" :key="index">
+                <div class="style-example">
+                  <Icon
+                    :icon="example.name"
+                    width="28"
+                    height="28"
+                    :style="example.style"
+                    :class="example.class"
+                  />
+                  <div class="style-label">
+                    {{ example.label }}
+                  </div>
+                </div>
+              </VanGridItem>
+            </VanGrid>
+          </section>
+
+          <VanDivider />
+
+          <section class="usage-section">
+            <h3>使用方法</h3>
+            <VanCellGroup inset>
+              <VanCell v-for="(example, index) in usageExamples" :key="index" :title="example.title">
+                <template #value>
+                  <code class="code-example">{{ example.code }}</code>
+                </template>
+              </VanCell>
+            </VanCellGroup>
+          </section>
+
+          <section class="usage-guide">
+            <h3>使用指南</h3>
+            <div class="guide-content">
+              <h4>1. 安装</h4>
+              <code class="code-block">npm install @iconify/vue</code>
+
+              <h4>2. 导入</h4>
+              <code class="code-block">import { Icon } from '@iconify/vue'</code>
+
+              <h4>3. 在模板中使用</h4>
+              <code class="code-block">&lt;Icon icon="mdi:home" /&gt;</code>
+            </div>
+          </section>
+        </VanTab>
+
+        <VanTab title="UnoCSS 图标类">
+          <section class="intro-section">
+            <p>
+              使用 UnoCSS 的图标预设，可以通过类名直接使用图标，无需导入组件。
+            </p>
+          </section>
+
+          <VanDivider />
+
+          <section class="style-section">
+            <h3>样式自定义示例</h3>
+            <VanGrid :column-num="3" :border="false">
+              <VanGridItem v-for="(example, index) in unocssStyleExamples" :key="index">
+                <div class="style-example">
+                  <div :class="`${example.name} ${example.classes}`" />
+                  <div class="style-label">
+                    {{ example.label }}
+                  </div>
+                </div>
+              </VanGridItem>
+            </VanGrid>
+          </section>
+
+          <VanDivider />
+
+          <section class="usage-section">
+            <h3>使用方法</h3>
+            <VanCellGroup inset>
+              <VanCell v-for="(example, index) in unocssUsageExamples" :key="index" :title="example.title">
+                <template #value>
+                  <code class="code-example">{{ example.code }}</code>
+                </template>
+              </VanCell>
+            </VanCellGroup>
+          </section>
+
+          <section class="usage-guide">
+            <h3>使用指南</h3>
+            <div class="guide-content">
+              <h4>项目配置</h4>
+              <p>本项目已通过 Vite 配置了 UnoCSS 的图标预设：</p>
+              <code class="code-block">
+                {{ `
+                // build/vite/index.ts
+                UnoCSS({
+                    presets: [
+                        presetIcons({
+                        scale: 1.2,
+                            warn: true,
+                            extraProperties: {
+                                'display': 'inline-block',
+                                'vertical-align': 'middle',
+                            // ...
+                            },
+                        }),
+                    ],
+                }),
+               ` }}
+              </code>
+
+              <h4>使用方式</h4>
+              <p>直接在 HTML 元素上使用图标类名，格式为：<code>i-{collection}:{name}</code></p>
+              <code class="code-block">&lt;div class="i-mdi:home"&gt;&lt;/div&gt;</code>
+
+              <h4>结合其他 UnoCSS 类</h4>
+              <p>可以结合 UnoCSS 的其他工具类设置图标样式：</p>
+              <code class="code-block">&lt;div class="i-mdi:home text-blue-500 text-2xl"&gt;&lt;/div&gt;</code>
+            </div>
+          </section>
+        </VanTab>
+      </VanTabs>
+
+      <VanDivider />
+
+      <section class="usage-guide">
+        <h3>图标集</h3>
+        <div class="guide-content">
+          <p>Iconify 支持多个图标集，格式为 "集合名:图标名"。例如：</p>
+          <ul>
+            <li>mdi:home - Material Design Icons</li>
+            <li>fa:user - Font Awesome</li>
+            <li>carbon:settings - Carbon</li>
+            <li>更多图标集可访问 <a href="https://icon-sets.iconify.design/" target="_blank">Iconify Icon Sets</a></li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.iconify-view {
+  background-color: #f7f8fa;
+  min-height: 100vh;
+
+  .container {
+    padding: var(--base-interval-2);
+  }
+
+  .intro-section,
+  .icons-section,
+  .style-section,
+  .usage-section,
+  .usage-guide {
+    margin-bottom: 20px;
+  }
+
+  h2 {
+    font-size: 20px;
+    margin-bottom: 12px;
+    color: #323233;
+  }
+
+  h3 {
+    font-size: 16px;
+    margin-bottom: 12px;
+    color: #323233;
+    padding-left: 12px;
+  }
+
+  h4 {
+    font-size: 14px;
+    margin: 12px 0 8px;
+    color: #323233;
+  }
+
+  p {
+    font-size: 14px;
+    color: #646566;
+    line-height: 1.5;
+  }
+
+  .icon-category {
+    margin-bottom: 16px;
+  }
+
+  .icon-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+  }
+
+  .icon-label {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #323233;
+  }
+
+  .icon-name {
+    margin-top: 4px;
+    font-size: 10px;
+    color: #969799;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 90%;
+  }
+
+  .style-example {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+  }
+
+  .style-label {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #323233;
+  }
+
+  .code-example {
+    font-size: 12px;
+    color: #333;
+    background-color: #f5f5f5;
+    padding: 2px 4px;
+    border-radius: 2px;
+    overflow-wrap: break-word;
+    word-break: break-all;
+  }
+
+  .code-block {
+    display: block;
+    font-size: 12px;
+    color: #333;
+    background-color: #f5f5f5;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin: 8px 0;
+    overflow-x: auto;
+  }
+
+  .guide-content {
+    background-color: white;
+    padding: 16px;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  }
+
+  .guide-content ul {
+    padding-left: 16px;
+    margin: 8px 0;
+  }
+
+  .guide-content li {
+    font-size: 13px;
+    color: #646566;
+    line-height: 1.6;
+  }
+
+  .hover-effect {
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}
+</style>

package/src/views/component/XOlMapView/XLocationPicker/index.vue

@@ -9,8 +9,8 @@ const selectedLocation = ref<LocationResult>()
 
 // 处理位置选择
 function handleLocationConfirm(location: LocationResult) {
-  console.log('选择的位置:', location)
-  selectedLocation.value = location
+  // console.log('选择的位置:', location)
+  // selectedLocation.value = location
   showNotify({ type: 'success', message: '位置已选择' })
 }
 </script>

package/src/views/component/index.vue

@@ -62,6 +62,10 @@ const list = ref([
     name: '请求示例',
     to: '/Component/XRequestView',
   },
+  {
+    name: 'Iconify 图标使用示例',
+    to: '/Component/IconifyView',
+  },
 ])
 
 function cleanConfigCache() {