@peng_kai/kit 0.3.0-beta.32 → 0.3.0-beta.34

package/admin/components/settings/index.ts

@@ -1,2 +1,2 @@
 export { default as Settings } from './src/Settings.vue';
-export { default as SchemaForm, type IConfigDetail } from './src/SchemaForm.vue';
+export { default as SchemaForm, type IConfigDetail, FormTypes } from './src/SchemaForm.vue';

package/admin/components/settings/src/SchemaForm.vue

@@ -4,6 +4,7 @@ import { CheckboxGroup, DatePicker, type DatePickerProps, Form, FormItem, Input,
 import { computed, toRef } from 'vue';
 import dayjs from '../../../../libs/dayjs';
 import { type ItemSchema, useAntdForm } from '../../../../antd';
+import { PictureCardUpload } from '../../../components/upload';
 
 export interface IConfigDetail {
   category_id: number
@@ -19,7 +20,7 @@ export interface IConfigDetail {
   value: any
 }
 
-enum FormTypes {
+export enum FormTypes {
   /** 数字输入框 */
   NUMBER_INPUT = 0,
   /** 文本输入框 */
@@ -36,6 +37,8 @@ enum FormTypes {
   SINGLE_SELECT = 6,
   /** 多选下拉选择器 */
   MULTIPLE_SELECT = 7,
+  /** 图片上传 */
+  IMAGE_UPLOAD = 8,
   /** 单一日期选择器 */
   SINGLE_DATE_PICKER = 13,
   /** 日期范围选择器 */
@@ -81,6 +84,10 @@ const antdPropsResolvers: Record<number, (config: IConfigDetail) => IConfigDetai
   [FormTypes.MULTIPLE_SELECT](config) {
     return this[FormTypes.CHECKBOX](config);
   },
+  [FormTypes.IMAGE_UPLOAD](config) {
+    config.value = config.value.split(',');
+    return config;
+  },
   [FormTypes.SINGLE_DATE_PICKER](config) {
     const props: DatePickerProps = {};
 
@@ -130,9 +137,11 @@ const antdValueResolvers: Record<number, (value: any) => any> = {
   [FormTypes.MULTIPLE_SELECT](value) {
     if (Array.isArray(value))
       return value.join(',');
-
     return value;
   },
+  [FormTypes.IMAGE_UPLOAD](value) {
+    return value.join(',');
+  },
   [FormTypes.SINGLE_DATE_PICKER](value) {
     if (dayjs.isDayjs(value))
       return value.format('YYYY-MM-DD');
@@ -151,9 +160,11 @@ const antdValueResolvers: Record<number, (value: any) => any> = {
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
   formConfig: IConfigDetail[]
+  formsOptions?: Partial<Record<FormTypes, any>>;
   disabled?: boolean
 }>(), {
   disabled: false,
+  formsOptions: () => ({} as any),
 });
 
 const configList = computed(() => {
@@ -268,6 +279,10 @@ defineExpose({ reset, validate });
             <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" mode="multiple" />
           </slot>
 
+          <slot v-else-if="item.form_type === FormTypes.IMAGE_UPLOAD" :name="FormTypes.IMAGE_UPLOAD">
+            <PictureCardUpload v-model:urls="settingForm.state[item.key]" useUrl v-bind="{ ...formsOptions[item.form_type], ...item.options}" />
+          </slot>
+
           <slot v-else-if="item.form_type === FormTypes.SINGLE_DATE_PICKER" :name="FormTypes.SINGLE_DATE_PICKER">
             <DatePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
           </slot>

package/admin/components/upload/src/PictureCardUpload.vue

@@ -2,10 +2,10 @@
 import { Image as AImage, ImagePreviewGroup as AImagePreviewGroup, Upload as AUpload, message } from 'ant-design-vue';
 import type { UploadProps } from 'ant-design-vue';
 import type { PreviewGroupPreview } from 'ant-design-vue/es/vc-image/src/PreviewGroup';
-import { useVModel } from '@vueuse/core';
-import { ref } from 'vue';
+import { ref, customRef, nextTick, triggerRef } from 'vue';
 import type { AwsS3 } from '../../../../utils/upload';
 import { createAwsS3Request } from './customRequests';
+import { urlToUploadFile } from './helpers';
 
 type UploadFile = Parameters<NonNullable<UploadProps['onPreview']>>['0'];
 </script>
@@ -13,8 +13,12 @@ type UploadFile = Parameters<NonNullable<UploadProps['onPreview']>>['0'];
 <script lang="ts" setup>
 const props = withDefaults(
   defineProps<{
-    /** 上传文件的数组 */
+    /** 上传图片的数组 */
     modelValue?: UploadFile[]
+    /** 上传图片的 url 数组 */
+    urls?: string[]
+    /** 是否使用 url 数组 */
+    useUrl?: boolean
     /** awsS3 实例对象 */
     awsS3: AwsS3
     /** 根目录 */
@@ -27,6 +31,8 @@ const props = withDefaults(
     cardSize?: string
     /** 允许的图片后缀 */
     allowExts?: string[]
+    /** 允许的图片大小，单位为字节 */
+    maxSize?: number
     /** 禁用 */
     disabled?: boolean
   }>(),
@@ -36,14 +42,47 @@ const props = withDefaults(
     rowCount: 'auto-fill',
     cardSize: '90px',
     allowExts: () => ['jpg', 'jpeg', 'png', 'gif', 'apng', 'webp', 'svg'],
+    maxSize: 1024 * 1024 * 2,
     disabled: false,
+    useUrl: false,
   },
 );
 const emits = defineEmits<{
   (e: 'update:modelValue', value: UploadFile[]): void
+  (e: 'update:urls', value: string[]): void
 }>();
 
-const fileList = useVModel(props, 'modelValue', emits);
+const fileList = customRef<any>((track, trigger) => {
+  let tempValue: any[] = [];
+  let isAllDone = true;
+  return {
+    get() {
+      track();
+      if (props.useUrl) {
+        return isAllDone ? urlToUploadFile(props.urls || []) : tempValue;
+      }
+      return props.modelValue || [];
+    },
+    set(v: any) {
+      if (props.useUrl) {
+        isAllDone = (v || []).every((x: any) => typeof x === 'string' ||  x.status === 'done');
+        if (isAllDone) {
+          const urls = (v || []).map((x: any) => typeof x === 'string' ? x : x.response?.url);
+          emits('update:urls', urls);
+          tempValue = [];
+        }
+        else {
+          tempValue = v;
+        }
+      }
+      else {
+        emits('update:modelValue', v);
+      }
+      trigger();
+    }
+  }
+})
+
 const preview = ref<PreviewGroupPreview>({
   visible: false,
   onVisibleChange(value) {
@@ -54,36 +93,33 @@ const preview = ref<PreviewGroupPreview>({
 function handlePreview(file: UploadFile) {
   preview.value.src = file.url || file.thumbUrl;
   preview.value.visible = true;
-  preview.value.current = fileList.value?.findIndex(item => preview.value.src === (item.url || item.thumbUrl)) ?? 0;
+  preview.value.current = fileList.value?.findIndex((x: any) => preview.value.src === (x.url || x.thumbUrl)) ?? 0;
 }
 
 function beforeUpload(file: UploadFile) {
   const isImg = props.allowExts.some(item => String(file.type).toLowerCase().includes(item));
-
+  const isSizeValid = !!(props.maxSize && file.size && file.size <= props.maxSize);
   if (!isImg)
     message.error(`${file.name} 不是图片 (${props.allowExts.join(',')})`);
-
-  return isImg;
+  if (!isSizeValid)
+    message.error(`${file.name} 大小不能超过 ${props.maxSize / 1024 / 1024}MB`);
+  
+  return isImg && isSizeValid;
 }
 </script>
 
 <template>
   <div :class="{ 'w-fit': typeof props.rowCount === 'number' }">
-    <AUpload
-      v-model:fileList="fileList" class="pic-card-upload" listType="picture-card" multiple :maxCount="$props.maxCount"
-      :disabled="props.disabled" :beforeUpload="beforeUpload" :customRequest="createAwsS3Request($props.awsS3, $props.rootDir)"
-      @preview="handlePreview"
-    >
-      <i v-if="fileList.length < props.maxCount" class="i-ant-design:plus-outlined text-26px text-$antd-colorTextTertiary" />
+    <AUpload v-model:fileList="fileList" class="pic-card-upload" listType="picture-card" multiple
+      :maxCount="$props.maxCount" :disabled="props.disabled" :beforeUpload="beforeUpload"
+      :customRequest="createAwsS3Request($props.awsS3, $props.rootDir)" @preview="handlePreview">
+      <i v-if="fileList.length < props.maxCount"
+        class="i-ant-design:plus-outlined text-[26px] text-$antd-colorTextTertiary" />
     </AUpload>
 
     <div style="display: none">
       <AImagePreviewGroup :preview="preview">
-        <AImage
-          v-for="item of fileList"
-          :key="item.uid"
-          :src="item.url || item.thumbUrl"
-        />
+        <AImage v-for="item of fileList" :key="item.uid" :src="item.url || item.thumbUrl" />
       </AImagePreviewGroup>
     </div>
   </div>
@@ -117,7 +153,7 @@ function beforeUpload(file: UploadFile) {
     margin: 0;
   }
 
-  :deep(.ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before ) {
+  :deep(.ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before) {
     width: 100%;
     height: 100%;
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.3.0-beta.32",
+  "version": "0.3.0-beta.34",
   "description": "",
   "author": "",
   "license": "ISC",