af-mobile-client-vue3 1.0.90 → 1.0.93

package/package.json

@@ -1,13 +1,10 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.0.90",
+  "version": "1.0.93",
+  "packageManager": "pnpm@10.7.0",
   "description": "Vue + Vite component lib",
   "license": "MIT",
-  "engines": {
-    "node": ">=18.12.0",
-    "pnpm": ">=8.15.0"
-  },
   "scripts": {
     "dev": "cross-env MOCK_SERVER_PORT=8086 vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -19,90 +16,105 @@
     "release": "bumpp --commit --push --tag"
   },
   "dependencies": {
-    "@micro-zoe/micro-app": "1.0.0-rc.4",
-    "@unhead/vue": "^1.8.11",
-    "@vant/area-data": "^1.5.1",
-    "@vant/touch-emulator": "^1.4.0",
-    "@vant/use": "^1.6.0",
-    "@vueuse/core": "^10.9.0",
+    "@micro-zoe/micro-app": "1.0.0-rc.24",
+    "@vant/area-data": "^2.0.0",
     "animate.css": "^4.1.1",
-    "axios": "^1.6.7",
     "crypto-js": "^4.2.0",
-    "echarts": "^5.5.0",
+    "qs": "^6.14.0",
+    "store": "^2.0.12",
+    "@unhead/vue": "^2.0.5",
+    "@vant/touch-emulator": "^1.4.0",
+    "@vant/use": "^1.6.0",
+    "@vueuse/core": "^13.1.0",
+    "axios": "^1.8.4",
+    "echarts": "^5.6.0",
     "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
-    "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.2.1",
-    "pnpm": "^9.4.0",
-    "qs": "^6.11.2",
+    "pinia": "^3.0.2",
+    "pinia-plugin-persistedstate": "^4.2.0",
     "resize-detector": "^0.3.0",
-    "store": "^2.0.12",
-    "vant": "^4.9.0",
+    "vant": "^4.9.18",
     "vconsole": "^3.15.1",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.3",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.8.0",
     "@types/crypto-js": "^4.2.2",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.11.25",
-    "@types/nprogress": "^0.2.3",
     "@types/store": "^2.0.5",
-    "@unocss/eslint-plugin": "^0.58.5",
-    "@unocss/preset-rem-to-px": "^0.58.5",
-    "@vitejs/plugin-legacy": "^5.3.1",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "autoprefixer": "^10.4.18",
-    "bumpp": "^9.4.0",
-    "commitizen": "^4.3.0",
-    "consola": "^3.2.3",
-    "cross-env": "^7.0.3",
+    "commitizen": "^4.3.1",
     "cz-emoji-chinese": "^0.3.1",
-    "eslint": "npm:eslint-ts-patch@8.57.0-0",
-    "eslint-ts-patch": "8.57.0-0",
-    "husky": "^9.0.11",
-    "less": "^4.2.0",
-    "mockjs": "^1.1.0",
-    "postcss-mobile-forever": "^4.1.1",
-    "rollup": "^4.12.1",
-    "terser": "^5.29.1",
-    "typescript": "^5.4.2",
-    "unocss": "^0.58.5",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.26.0",
-    "unplugin-vue-router": "^0.8.4",
-    "vite": "^5.1.5",
+    "eslint-ts-patch": "^8.57.0-0",
+    "husky": "^9.1.7",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock-dev-server": "^1.4.7",
-    "vite-plugin-pwa": "^0.19.2",
-    "vite-plugin-sitemap": "^0.5.3",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vconsole": "^2.1.1",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vitest": "^1.3.1",
-    "vue-tsc": "^2.0.6"
+    "@antfu/eslint-config": "^4.12.0",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/types": "^19.8.0",
+    "@iconify-json/carbon": "^1.2.8",
+    "@intlify/unplugin-vue-i18n": "^6.0.5",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.14.1",
+    "@types/nprogress": "^0.2.3",
+    "@unocss/eslint-plugin": "^66.1.0-beta.11",
+    "@unocss/preset-rem-to-px": "66.1.0-beta.11",
+    "@vant/auto-import-resolver": "^1.3.0",
+    "@vitejs/plugin-legacy": "^6.0.2",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "autoprefixer": "^10.4.21",
+    "bumpp": "^10.1.0",
+    "consola": "^3.4.2",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.24.0",
+    "eslint-plugin-format": "^1.0.1",
+    "less": "^4.3.0",
+    "lint-staged": "^15.5.1",
+    "mockjs": "^1.1.0",
+    "postcss-mobile-forever": "^5.0.0",
+    "rollup": "^4.40.0",
+    "simple-git-hooks": "^2.12.1",
+    "terser": "^5.39.0",
+    "typescript": "^5.8.3",
+    "unocss": "^66.1.0-beta.11",
+    "unplugin-auto-import": "^19.1.2",
+    "unplugin-vue-components": "^28.4.1",
+    "unplugin-vue-router": "^0.12.0",
+    "vite": "^6.2.6",
+    "vite-plugin-mock-dev-server": "^1.8.5",
+    "vite-plugin-pwa": "^1.0.0",
+    "vite-plugin-sitemap": "^0.7.1",
+    "vite-plugin-vconsole": "^2.1.1",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vitest": "^3.1.1",
+    "vue-tsc": "^2.2.8"
   },
   "pnpm": {
+    "allowedDeprecatedVersions": {
+      "glob": "7.2.3",
+      "inflight": "1.0.6",
+      "sourcemap-codec": "1.4.8"
+    },
     "peerDependencyRules": {
-      "ignoreMissing": [
-        "postcss",
-        "esbuild"
-      ],
       "allowedVersions": {
-        "rollup": "^4.x"
+        "typescript": "5.8.2"
       }
-    }
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-emoji-chinese"
     },
-    "cz-emoji-chinese": {
-      "skipQuestions": [
-        "body",
-        "scope"
-      ]
-    }
+    "onlyBuiltDependencies": [
+      "core-js",
+      "esbuild",
+      "simple-git-hooks"
+    ]
+  },
+  "resolutions": {
+    "vite": "^6.2.4"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged",
+    "commit-msg": "pnpm commitlint $1"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
   }
 }

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { getDictItemByValue } from '@af-mobile-client-vue3/utils/dictUtil'
+import { ref } from 'vue'
 
 const { serviceName, dictName, dictValue } = withDefaults(defineProps<{
   serviceName?: string

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

@@ -4,6 +4,7 @@ import {
   BackTop as VanBackTop,
   Button as VanButton,
   Col as VanCol,
+  Icon as VanIcon,
   List as VanList,
   Popover as VanPopover,
   PullRefresh as VanPullRefresh,
@@ -31,7 +32,7 @@ const { configName, serviceName, fixQueryForm } = withDefaults(defineProps<{
   serviceName: undefined,
 })
 
-const emit = defineEmits(['toDetail', 'addOption', 'handleCall', 'handleLocation'])
+const emit = defineEmits([])
 
 const router = useRouter()
 
@@ -54,6 +55,9 @@ const detailColumns = ref([])
 // 标签列
 const tagList = ref([])
 
+// 标题按钮列
+const btnList = ref([])
+
 // 底部列
 const footColumns = ref([])
 
@@ -89,7 +93,7 @@ const pageSize = 20
 
 const searchValue = ref('')
 
-const inputSpan = ref(20)
+const inputSpan = ref(16)
 
 // 数据加载状态
 const loading = ref(false)
@@ -144,6 +148,9 @@ function initComponent() {
           allActions.value.push({ text: item.actionArr[j].text, func: item.actionArr[j].func })
       }
 
+      if (item.showTitleBtn)
+        btnList.value.push(item)
+
       if (result.showSortIcon && item.sortable) {
         orderList.value.push({
           title: item.title,
@@ -306,15 +313,10 @@ function addOption() {
   // emit('addOption', totalCount.value)
 }
 
-// 处理拨打电话
-// function handleCall(item: any) {
-//   emit('handleCall', item)
-// }
-
-// 处理查看位置
-// function handleLocation(item: any) {
-//   emit('handleLocation', item)
-// }
+// 处理按钮点击
+function handleButtonClick(btn, item) {
+  emit(`${btn.btnIcon}`, item)
+}
 </script>
 
 <template>
@@ -330,7 +332,7 @@ function addOption() {
           @search="onRefresh"
         />
       </VanCol>
-      <VanCol span="4" class="search-icon">
+      <VanCol span="8" class="search-icon">
         <XCellListFilter
           v-model:sortord-val="sortordVal"
           v-model:order-val="orderVal"
@@ -380,27 +382,22 @@ function addOption() {
                         />
                       </p>
                     </div>
-                    <!-- <div class="action-buttons">
-                      <VanButton
-                        class="action-button"
-                        icon="phone"
-                        size="small"
-                        @click.stop="handleCall(item)"
-                      />
+                    <div class="action-buttons">
                       <VanButton
+                        v-for="btn in btnList"
+                        :key="btn.dataIndex"
                         class="action-button"
-                        icon="location"
+                        :icon="btn.btnIcon"
                         size="small"
-                        @click.stop="handleLocation(item)"
+                        @click.stop="handleButtonClick(btn, item)"
                       />
-                    </div> -->
+                    </div>
                   </div>
                 </VanCol>
               </VanRow>
               <VanRow gutter="20" class="card_item_details" @click="emit('toDetail', item)">
                 <VanCol v-for="column of detailColumns" :key="`details_${column.dataIndex}`" :span="column.span">
                   <p>
-                    {{ column.title }}：
                     <XBadge
                       :style="handleFunctionStyle(column.styleFunctionForValue, item[column.dataIndex])"
                       :dict-name="column.dictName" :dict-value="item[column.dataIndex]"
@@ -426,11 +423,15 @@ function addOption() {
                           size="medium"
                           class="tag-item"
                         >
-                          {{ column.title }}：<XBadge
-                          :dict-name="column.dictName"
-                          :dict-value="item[column.dataIndex]"
-                          :service-name="serviceName"
-                        />
+                          <div class="tag-content">
+                            <VanIcon v-if="column.tagIcon" :name="column.tagIcon" class="tag-icon" />
+                            <span class="tag-title">{{ column.title }}：</span>
+                            <XBadge
+                              :dict-name="column.dictName"
+                              :dict-value="item[column.dataIndex]"
+                              :service-name="serviceName"
+                            />
+                          </div>
                         </VanTag>
                       </VanCol>
                     </div>
@@ -610,6 +611,20 @@ function addOption() {
               display: inline-flex;
               align-items: center;
             }
+            .tag-content {
+              display: flex;
+              align-items: center;
+              white-space: nowrap;
+            }
+            .tag-icon {
+              margin-right: 4px;
+              font-size: 14px;
+              display: inline-flex;
+              align-items: center;
+            }
+            .tag-title {
+              font-weight: normal;
+            }
           }
         }
       }
@@ -667,9 +682,10 @@ function addOption() {
     .search-icon {
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-end;
       height: 100%;
-      padding: var(--van-search-padding);
+      padding: 0;
+      flex-shrink: 0;
     }
   }
 

package/src/components/data/XCellListFilter/QrScanner/index.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { Icon as VanIcon } from 'vant'
+import { startScanAnimation, stopScanAnimation } from './startScanAnimation'
+
+// 扫码框的引用
+const scannerRef = ref<HTMLDivElement>()
+// 扫码动画的引用
+const scanLineRef = ref<HTMLDivElement>()
+// 闪光灯状态
+const isLightOn = ref(false)
+
+// 初始化扫描动画
+async function initScanAnimation() {
+  // 确保元素已渲染完成
+  await nextTick()
+  // 添加延迟确保元素尺寸已计算完成
+  setTimeout(() => {
+    if (scannerRef.value && scanLineRef.value) {
+      // 设置初始位置
+      scanLineRef.value.style.top = '0px'
+      startScanAnimation(scanLineRef, scannerRef)
+    }
+  }, 300)
+}
+
+// 切换闪光灯
+function toggleLight() {
+  isLightOn.value = !isLightOn.value
+}
+
+onMounted(() => {
+  initScanAnimation()
+})
+
+onUnmounted(() => {
+  stopScanAnimation()
+})
+</script>
+
+<template>
+  <div class="qr-scanner">
+    <div class="scanner-container">
+      <div class="scanner-bg">
+        <div ref="scannerRef" class="scanner-box">
+          <div class="corner-lt" />
+          <div class="corner-rt" />
+          <div class="corner-lb" />
+          <div class="corner-rb" />
+          <div ref="scanLineRef" class="scan-line" />
+          <div class="light-btn" @click="toggleLight">
+            <VanIcon :name="isLightOn ? 'bulb-o' : 'bulb'" class="light-icon" />
+          </div>
+        </div>
+        <div class="scanner-tip">
+          将二维码放入框内，即可自动扫描
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.qr-scanner {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+
+  .scanner-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background-color: #fff;
+
+    .scanner-bg {
+      width: 320px;
+      height: 320px;
+      background-color: #f0f0f0;
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding-top: 40px;
+    }
+
+    .scanner-box {
+      width: 200px;
+      height: 200px;
+      position: relative;
+      background-color: transparent;
+      border: 1px solid #1989fa;
+      border-radius: 0;
+      box-sizing: border-box;
+      margin: 0;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: none;
+        z-index: 1;
+      }
+
+      .corner-lt,
+      .corner-rt,
+      .corner-lb,
+      .corner-rb {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border-color: #1989fa;
+        border-style: solid;
+        z-index: 2;
+        margin: 0;
+      }
+
+      .corner-lt {
+        top: -3px;
+        left: -3px;
+        border-width: 3px 0 0 3px;
+        border-radius: 0;
+        margin: -8px 0 0 -8px;
+      }
+
+      .corner-rt {
+        top: -3px;
+        right: -3px;
+        border-width: 3px 3px 0 0;
+        border-radius: 0;
+        margin: -8px -8px 0 0;
+      }
+
+      .corner-lb {
+        bottom: -3px;
+        left: -3px;
+        border-width: 0 0 3px 3px;
+        border-radius: 0;
+        margin: 0 0 -8px -8px;
+      }
+
+      .corner-rb {
+        bottom: -3px;
+        right: -3px;
+        border-width: 0 3px 3px 0;
+        border-radius: 0;
+        margin: 0 -8px -8px 0;
+      }
+
+      .scan-line {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 2px;
+        background: linear-gradient(to right, transparent, #1989fa, transparent);
+        box-shadow: 0 0 4px #1989fa;
+        z-index: 3;
+      }
+
+      .light-btn {
+        position: absolute;
+        right: -20px;
+        bottom: -20px;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: rgba(44, 44, 44, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 3;
+
+        .light-icon {
+          font-size: 20px;
+          color: #fff;
+        }
+
+        &:active {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .scanner-tip {
+      color: #666;
+      font-size: 14px;
+      text-align: center;
+      margin-top: 30px;
+      margin-bottom: 0;
+      width: 100%;
+    }
+  }
+}
+</style>

package/src/components/data/XCellListFilter/QrScanner/startScanAnimation.ts

@@ -0,0 +1,53 @@
+import type { Ref } from 'vue'
+
+let animationTimer: ReturnType<typeof setInterval> | null = null
+
+// 开始扫码动画
+export function startScanAnimation(scanLineRef: Ref<HTMLDivElement | undefined>, scannerRef: Ref<HTMLDivElement | undefined>) {
+  // 先停止之前的动画
+  stopScanAnimation()
+
+  if (!scanLineRef.value || !scannerRef.value)
+    return
+
+  // 确保扫描线初始位置正确
+  scanLineRef.value.style.top = '0px'
+
+  let direction = 'down'
+  let position = 0
+  const speed = 2
+  const maxPosition = scannerRef.value.offsetHeight || 200
+
+  // 确保maxPosition不为0
+  if (maxPosition <= 10) {
+    // 如果容器高度获取失败,使用一个默认延迟后再尝试
+    setTimeout(() => {
+      startScanAnimation(scanLineRef, scannerRef)
+    }, 500)
+    return
+  }
+
+  animationTimer = setInterval(() => {
+    if (direction === 'down') {
+      position += speed
+      if (position >= maxPosition - 2)
+        direction = 'up'
+    }
+    else {
+      position -= speed
+      if (position <= 0)
+        direction = 'down'
+    }
+    if (scanLineRef.value)
+      scanLineRef.value.style.top = `${position}px`
+  }, 20)
+
+  return animationTimer
+}
+
+export function stopScanAnimation() {
+  if (animationTimer) {
+    clearInterval(animationTimer)
+    animationTimer = null
+  }
+}