@yxhl/specter-pui-vtk 1.0.91 → 1.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yxhl/specter-pui-vtk",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "description": "雅心互联 Vue 3 + Vuetify3 组件库",
   "type": "module",
   "main": "./dist/specter-pui.umd.js",

package/src/components/assembly/VtkDateSelector.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vtk-date-selector">
+  <div class="vtk-date-selector" :style="rootStyle">
     <VMenu
       v-if="!inline"
       v-model="showPicker"
@@ -26,7 +26,7 @@
           </VTextField>
         </div>
       </template>
-      <div class="date-picker-dropdown" @click.stop @mousedown.stop>
+      <div class="date-picker-dropdown" :style="popupStyle" @click.stop @mousedown.stop>
         <!-- 头部控制区（非日期/月份范围选择模式时显示） -->
         <div v-if="!(mode === 'range' && (displayMode === 'day' || displayMode === 'month'))" class="picker-header">
           <button class="nav-btn" @click="prevPeriod">‹</button>
@@ -222,7 +222,7 @@
         </div>
       </div>
     </VMenu>
-    <div v-if="inline" class="date-picker-dropdown inline-mode" @click.stop @mousedown.stop>
+    <div v-if="inline" class="date-picker-dropdown inline-mode" :style="popupStyle" @click.stop @mousedown.stop>
       <!-- 头部控制区（非日期/月份范围选择模式时显示） -->
       <div v-if="!(mode === 'range' && (displayMode === 'day' || displayMode === 'month'))" class="picker-header">
         <button class="nav-btn" @click="prevPeriod">‹</button>
@@ -449,10 +449,20 @@ const props = defineProps({
     validator: (value) => ['single', 'range'].includes(value)
   },
   // 占位符
-  placeholder: {
-    type: String,
-    default: '请选择日期'
-  },
+  placeholder: {
+    type: String,
+    default: '请选择日期'
+  },
+  // 输入框宽度，数字按 px 处理，也支持 100%、12rem 等 CSS 宽度
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  // 日期弹层宽度，数字按 px 处理，也支持 100%、24rem 等 CSS 宽度
+  popupWidth: {
+    type: [String, Number],
+    default: ''
+  },
   // 禁用状态
   disabled: {
     type: Boolean,
@@ -533,12 +543,29 @@ const YEAR_PANEL_CENTER_OFFSET = 4;
 const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
 const monthList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
 
-// 显示值
-const menuAttach = computed(() => (props.noTeleport ? true : false));
-
-const menuLocation = computed(() => props.placement === 'right' ? 'bottom end' : 'bottom start');
-
-const menuOrigin = computed(() => props.placement === 'right' ? 'top end' : 'top start');
+// 显示值
+const menuAttach = computed(() => (props.noTeleport ? true : false));
+
+const menuLocation = computed(() => props.placement === 'right' ? 'bottom end' : 'bottom start');
+
+const menuOrigin = computed(() => props.placement === 'right' ? 'top end' : 'top start');
+
+const normalizeCssSize = (value) => {
+  if (value === null || value === undefined || value === '') return '';
+  if (typeof value === 'number') return `${value}px`;
+  const nextValue = String(value).trim();
+  return /^\d+(\.\d+)?$/.test(nextValue) ? `${nextValue}px` : nextValue;
+};
+
+const rootStyle = computed(() => {
+  const width = normalizeCssSize(props.width);
+  return width ? { width } : {};
+});
+
+const popupStyle = computed(() => {
+  const width = normalizeCssSize(props.popupWidth);
+  return width ? { width } : {};
+});
 
 const displayValue = computed(() => {
   if (!selectedValue.value) return '';
@@ -1206,10 +1233,13 @@ watch(() => props.modelValue, (newValue) => {
   color: rgb(var(--v-theme-on-surface), 0.87);
 }
 
-.date-picker-dropdown {
-  background: rgb(var(--v-theme-surface));
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+.date-picker-dropdown {
+  box-sizing: border-box;
+  max-width: calc(100vw - 24px);
+  overflow-x: auto;
+  background: rgb(var(--v-theme-surface));
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
   border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
 }
 

package/src/components/assembly/VtkEmptyNew.vue

@@ -1,20 +1,18 @@
-<template>
-    <v-card class="pa-4 mx-auto text-center pt-10" color="transparent" elevation="0" style="border: none !important;box-shadow: none !important;">
-        <v-img contain width="120" class="mx-auto" src="@/assets/img/empty.svg" alt="" />
-        <p class="text-grey mt-1">{{ text || "暂无数据" }}</p>
-    </v-card>
-</template>
-
-<script setup>
-import { useAttrs } from 'vue';
-
-const attrs = useAttrs();
-
-// 定义 props
-const props = defineProps({
-    text: {
-        type: String,
-        default: null,
+<template>
+    <v-card class="pa-4 mx-auto text-center pt-10" color="transparent" elevation="0" style="border: none !important;box-shadow: none !important;">
+        <v-img contain width="120" class="mx-auto" :src="emptyImg" alt="" />
+        <p class="text-grey mt-1">{{ text || "暂无数据" }}</p>
+    </v-card>
+</template>
+
+<script setup>
+import emptyImg from '@/assets/img/empty.svg';
+
+// 定义 props
+defineProps({
+    text: {
+        type: String,
+        default: null,
     },
     items: {
         type: Array,
@@ -23,4 +21,4 @@ const props = defineProps({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>

package/src/components/assembly/VtkUpload.vue

@@ -26,7 +26,7 @@
         :key="file.uid"
         class="vtk-upload__picture-card-item"
       >
-        <v-img :src="file.url || file.preview" cover class="fill-height" />
+        <v-img :key="file.url || file.preview || file.uid" :src="file.url || file.preview" cover class="fill-height" />
         <div class="vtk-upload__picture-card-mask">
           <VBtn icon size="x-small" variant="text" color="white" title="查看" @click.stop="handlePreview(file)">
             <VIcon>mdi-eye</VIcon>
@@ -297,9 +297,10 @@ const previewTranslateX = ref(0);
 const previewTranslateY = ref(0);
 const previewDragState = ref(null);
 
-// 内部维护文件列表
-const fileList = ref([]);
-let isSyncingModel = false;
+// 内部维护文件列表
+const fileList = ref([]);
+let isSyncingModel = false;
+const localPreviewUrls = new Set();
 
 watch(
   () => props.modelValue,
@@ -309,10 +310,11 @@ watch(
       return;
     }
 
-    // Accept external URL lists or file object lists.
-    fileList.value = normalizeFileList(val || []);
-  },
-);
+    // Accept external URL lists or file object lists.
+    revokeAllLocalPreviews();
+    fileList.value = normalizeFileList(val || []);
+  },
+);
 
 /* -------------------- 工具函数 -------------------- */
 let uidCounter = 0;
@@ -384,7 +386,21 @@ const fileIcon = (file) => {
   return 'mdi-file-outline';
 };
 
-const getPreviewSrc = (file) => file?.url || file?.preview || '';
+const getPreviewSrc = (file) => file?.url || file?.preview || '';
+
+const revokeLocalPreview = (file) => {
+  const preview = file?.preview;
+  if (preview && localPreviewUrls.has(preview)) {
+    URL.revokeObjectURL(preview);
+    localPreviewUrls.delete(preview);
+  }
+};
+
+const revokeAllLocalPreviews = () => {
+  fileList.value.forEach(revokeLocalPreview);
+  localPreviewUrls.forEach((url) => URL.revokeObjectURL(url));
+  localPreviewUrls.clear();
+};
 
 const previewImageList = computed(() => fileList.value.filter((file) => isImage(file) && getPreviewSrc(file)));
 
@@ -444,12 +460,20 @@ const processFiles = (rawFiles) => {
 
     const file = buildFile(raw, 'ready');
 
-    // 生成预览
-    if (isImage(raw)) {
-      const reader = new FileReader();
-      reader.onload = (e) => { file.preview = e.target.result; };
-      reader.readAsDataURL(raw);
-    }
+    // 生成本地预览地址，保证 picture-card 选图后立即回显缩略图。
+    if (isImage(raw)) {
+      if (typeof URL !== 'undefined' && URL.createObjectURL) {
+        file.preview = URL.createObjectURL(raw);
+        localPreviewUrls.add(file.preview);
+      } else {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          file.preview = e.target.result;
+          emit('change', file, fileList.value);
+        };
+        reader.readAsDataURL(raw);
+      }
+    }
 
     const beforeHook = props.beforeUpload ? props.beforeUpload(raw) : true;
     Promise.resolve(beforeHook).then((result) => {
@@ -512,9 +536,12 @@ const uploadFile = (file) => {
   Request.http(props.action, formData, 'POST', headers).then((res) => {
     file.status = 'success';
     file.response = res;
-    // 兼容 { data: 'url' } 和 { data: { url: '...' } } 两种结构
-    const url = typeof res?.data === 'string' ? res.data : (res?.data?.url || res?.url || '');
-    if (url) file.url = url;
+    // 兼容 { data: 'url' } 和 { data: { url: '...' } } 两种结构
+    const url = typeof res?.data === 'string' ? res.data : (res?.data?.url || res?.url || '');
+    if (url) {
+      file.url = url;
+      revokeLocalPreview(file);
+    }
     console.log('[VtkUpload] res:', res, '| file.url:', file.url, '| fileList:', JSON.parse(JSON.stringify(fileList.value)));
     syncModel();
     emit('success', res, file, fileList.value);
@@ -529,10 +556,11 @@ const uploadFile = (file) => {
 
 /* -------------------- 移除文件 -------------------- */
 const handleRemove = (file) => {
-  const doRemove = () => {
-    fileList.value = fileList.value.filter((f) => f.uid !== file.uid);
-    syncModel();
-    emit('remove', file, fileList.value);
+  const doRemove = () => {
+    revokeLocalPreview(file);
+    fileList.value = fileList.value.filter((f) => f.uid !== file.uid);
+    syncModel();
+    emit('remove', file, fileList.value);
   };
 
   if (props.beforeRemove) {
@@ -687,9 +715,10 @@ watch(previewVisible, (visible) => {
   resetPreviewTransform();
 });
 
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handlePreviewKeydown);
-});
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handlePreviewKeydown);
+  revokeAllLocalPreviews();
+});
 
 /* -------------------- 对外暴露方法 -------------------- */
 /** 手动触发未上传文件的上传 */
@@ -700,10 +729,11 @@ const submit = () => {
 };
 
 /** 清空文件列表 */
-const clearFiles = () => {
-  fileList.value = [];
-  syncModel();
-};
+const clearFiles = () => {
+  revokeAllLocalPreviews();
+  fileList.value = [];
+  syncModel();
+};
 
 /** 手动移除某个文件 */
 const remove = (file) => handleRemove(file);

package/src/index.js

@@ -11,9 +11,10 @@ export { default as VtkDatePicker } from "./components/assembly/VtkDatePicker.vu
 export { default as VtkDateSelector } from "./components/assembly/VtkDateSelector.vue";
 export { default as VtkDateTimePicker } from "./components/assembly/VtkDateTimePicker.vue";
 export { default as VtkDept } from "./components/assembly/VtkDept.vue";
-export { default as VtkEmpty } from "./components/assembly/VtkEmpty.vue";
-export { default as VtkFab } from "./components/assembly/VtkFab.vue";
-export { default as VtkFormItem } from "./components/assembly/VtkFormItem.vue";
+export { default as VtkEmpty } from "./components/assembly/VtkEmpty.vue";
+export { default as VtkEmptyNew } from "./components/assembly/VtkEmptyNew.vue";
+export { default as VtkFab } from "./components/assembly/VtkFab.vue";
+export { default as VtkFormItem } from "./components/assembly/VtkFormItem.vue";
 export { default as VtkImg } from "./components/assembly/VtkImg.vue";
 export { default as VtkPage } from "./components/assembly/VtkPage.vue";
 export { default as VtkPdf } from "./components/assembly/VtkPdf.vue";
@@ -55,9 +56,10 @@ import VtkDatePicker from "./components/assembly/VtkDatePicker.vue";
 import VtkDateSelector from "./components/assembly/VtkDateSelector.vue";
 import VtkDateTimePicker from "./components/assembly/VtkDateTimePicker.vue";
 import VtkDept from "./components/assembly/VtkDept.vue";
-import VtkEmpty from "./components/assembly/VtkEmpty.vue";
-import VtkFab from "./components/assembly/VtkFab.vue";
-import VtkFormItem from "./components/assembly/VtkFormItem.vue";
+import VtkEmpty from "./components/assembly/VtkEmpty.vue";
+import VtkEmptyNew from "./components/assembly/VtkEmptyNew.vue";
+import VtkFab from "./components/assembly/VtkFab.vue";
+import VtkFormItem from "./components/assembly/VtkFormItem.vue";
 import VtkImg from "./components/assembly/VtkImg.vue";
 import VtkPage from "./components/assembly/VtkPage.vue";
 import VtkPdf from "./components/assembly/VtkPdf.vue";
@@ -80,9 +82,10 @@ function install(app, options = {}) {
     VtkDateSelector,
     VtkDateTimePicker,
     VtkDept,
-    VtkEmpty,
-    VtkFab,
-    VtkFormItem,
+    VtkEmpty,
+    VtkEmptyNew,
+    VtkFab,
+    VtkFormItem,
     VtkImg,
     VtkPage,
     VtkPdf,
@@ -128,8 +131,9 @@ export default {
   VtkDateSelector,
   VtkDateTimePicker,
   VtkDept,
-  VtkEmpty,
-  VtkFab,
+  VtkEmpty,
+  VtkEmptyNew,
+  VtkFab,
   VtkFormItem,
   VtkImg,
   VtkPage,