af-mobile-client-vue3 1.3.70 → 1.3.72

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.3.70",
+  "version": "1.3.72",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import cameraIcon from '@af-mobile-client-vue3/assets/img/component/camera.png'
+// import cameraIcon from '@af-mobile-client-vue3/assets/img/component/camera.png'
 import { deleteFile, upload } from '@af-mobile-client-vue3/services/api/common'
 import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
 import {
   ActionSheet,
+  Icon as VanIcon,
   Uploader as vanUploader,
 } from 'vant'
 import { ref } from 'vue'
@@ -379,28 +380,30 @@ function handleActionSelect(option: any) {
       style="display:none"
       @change="(e:any) => handleBrowserFiles(e.target.files)"
     >
-    <div
-      v-if="!props.readonly && props.mode !== '预览' && (imageList.length < props.attr?.acceptCount && props.attr?.addOrEdit !== 'readonly')"
-      class="custom-upload-area"
-      @click="handleUploadAreaClick"
-    >
-      <img :src="cameraIcon" alt="camera" class="upload-camera-img">
-      <div class="upload-title">
-        上传附件
-      </div>
-      <div v-if="props.attr?.acceptCount" class="upload-desc">
-        上传限制: {{ imageList.length }} / {{ props.attr?.acceptCount }}
-      </div>
-    </div>
     <van-uploader
       ref="uploaderRef"
       v-model="imageList"
-      :show-upload="false"
+      class="custom-trigger-uploader"
+      :show-upload="true"
       :deletable="!props.readonly && (props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin') && props.mode !== '预览'"
       :multiple="!props.readonly && props.authority === 'admin'"
       :preview-image="true"
       :before-delete="!props.readonly && props.attr?.addOrEdit !== 'readonly' && props.authority === 'admin' ? deleteFileFunction : undefined"
-    />
+      :before-read="() => false"
+    >
+      <template #default>
+        <div
+          v-if="!props.readonly && props.mode !== '预览' && (imageList.length < props.attr?.acceptCount && props.attr?.addOrEdit !== 'readonly')"
+          class="custom-upload-area"
+          @click="handleUploadAreaClick"
+        >
+          <VanIcon name="plus" size="35" color="#d9d9d9" />
+          <div v-if="props.attr?.acceptCount" class="upload-desc">
+            {{ imageList.length }} / {{ props.attr?.acceptCount }}
+          </div>
+        </div>
+      </template>
+    </van-uploader>
     <ActionSheet
       v-model:show="showActionSheet"
       :actions="actionOptions"
@@ -420,10 +423,13 @@ function handleActionSelect(option: any) {
   // 该属性会影响表单布局
   // gap: 16px;
 }
+/* 让自定义上传按钮可点击：关闭 Vant 覆盖在上方的透明 input 的事件捕获 */
+:deep(.custom-trigger-uploader .van-uploader__input) {
+  pointer-events: none;
+}
 .custom-upload-area {
-  width: 100%;
-  height: 100%;
-  min-height: 80px;
+  width: 82px;
+  height: 82px;
   box-sizing: border-box;
   border: 1px dashed #d9d9d9;
   border-radius: 10px;

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import XBadge from '@af-mobile-client-vue3/components/data/XBadge/index.vue'
 import XCellListFilter from '@af-mobile-client-vue3/components/data/XCellListFilter/index.vue'
+import { isDark } from '@af-mobile-client-vue3/composables/dark'
 import { getConfigByName, query } from '@af-mobile-client-vue3/services/api/common'
 import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
 import { getRangeByType } from '@af-mobile-client-vue3/utils/queryFormDefaultRangePicker'
@@ -724,7 +725,7 @@ function handleCheckboxChange(item: any, checked: boolean) {
 
 <template>
   <div id="XCellList">
-    <VanRow class="filter-condition">
+    <VanRow class="filter-condition" :class="{ dark: isDark }">
       <!-- 左侧动态插槽区域 -->
       <template v-for="(_, name) in slots" :key="name">
         <template v-if="typeof name === 'string' && name.startsWith('search-left-')">
@@ -1290,7 +1291,7 @@ function handleCheckboxChange(item: any, checked: boolean) {
     }
 
     .van-popover__content {
-      background-color: #ffffff !important;
+      //background-color: #ffffff !important;
       border: none !important;
       outline: none !important;
       border-radius: 8px !important;
@@ -1298,7 +1299,7 @@ function handleCheckboxChange(item: any, checked: boolean) {
 
     .van-popover__arrow,
     .van-popover_arrow {
-      background-color: #ffffff !important;
+      //background-color: #ffffff !important;
       border: none !important;
       outline: none !important;
     }
@@ -1306,9 +1307,9 @@ function handleCheckboxChange(item: any, checked: boolean) {
     .van-popover__action {
       color: #333 !important;
 
-      &:hover {
-        background-color: #f5f5f5 !important;
-      }
+      //&:hover {
+      //  //background-color: #f5f5f5 !important;
+      //}
     }
   }
 
@@ -1406,6 +1407,9 @@ function handleCheckboxChange(item: any, checked: boolean) {
       }
     }
   }
+  .filter-condition.dark {
+    background-color: #222222;
+  }
 
   .multi-select-hint {
     display: flex;

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

@@ -586,7 +586,7 @@ function filterButtonPermissions(btn) {
     width: 40px;
     height: 40px;
     border-radius: 10px;
-    background-color: rgba(245, 245, 245);
+    background-color: rgb(83 83 83 / 6%);
     cursor: pointer;
     position: relative;
     z-index: 1;

package/src/styles/var.less

@@ -18,7 +18,7 @@
 .van-popover,
 .van-popover.van-popover--light,
 .van-popover.van-popover--dark {
-  background-color: #ffffff !important;
+  //background-color: #ffffff !important;
   border: none !important;
   outline: none !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;