@neatui/vue 5.6.0 → 5.7.0

package/src/components/form/Upload.vue

@@ -1,10 +1,10 @@
 <template>
   <div ui-flex="row lm :wrap" class="neatui-upload mb-sm-sub mr-sm-sub" v-bind="{ ...attrs }">
     <div v-for="(file, idx) in state.files" :key="idx" ui-flex="col cm" class="flex-fixed pr" :style="`width: ${isNumber(width) ? width + 'em' : width}`" v-bind="itemAttrs">
-      <div class="w-full pr" :style="`box-sizing: content-box; padding-top: ${ratio}%`">
-        <div class="pa full ot-no ol-no bg-fore n-sm b-solid b-case b-xs r-sm" ui-flex="col cm">
+      <div class="w-full pr" :style="boxStyle">
+        <div :class="`${ratio ? 'pa full n-sm' : 'w-full n-ms min-h-ms*s'} ot-no ol-no bg-fore b-solid b-case b-xs r-sm ${canOpen(file) ? 'ux-none' : ''}`" ui-flex="col cm" @click="openFile(file)">
           <!-- 删除按钮 -->
-          <div v-if="!disabled" class="pa w-sl h-sl ot-ss or-ss bg-fore co-risk lh-xs r-xl sub-hover z-ls" ui-flex="row cm" @click="remove(idx)">
+          <div v-if="!disabled" class="pa w-sl h-sl ot-ss or-ss bg-fore co-risk lh-xs r-xl sub-hover z-ls ux-none" ui-flex="row cm" @click.stop="remove(idx)">
             <svg class="block" style="width: 1.2em; height: 1.2em" viewBox="0 0 1024 1024">
               <path
                 d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66 0.3L512 563.4l-99.3 118.4-66.1-0.3c-4.4 0-8-3.5-8-8 0-1.9 0.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2 0-4.4 3.6-8 8-8l66.1 0.3L512 464.6l99.3-118.4 66-0.3c4.4 0 8 3.5 8 8 0 1.9-0.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
@@ -17,7 +17,7 @@
           <img v-if="file.type === 'image'" class="r-ss" :src="getImageUrl(file)" alt="" />
           <video v-else-if="file.type === 'video'" class="full r-ss" :src="getImageUrl(file)" controls muted></video>
           <template v-else-if="file.type === 'pdf'">
-            <svg t="1705645350800" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
+            <svg t="1705645350800" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -38,7 +38,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'xlsx'">
-            <svg t="1705645380770" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060">
+            <svg t="1705645380770" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2060">
               <path
                 d="M205.799024 64.936585H664.850732l231.773658 231.773659v638.376585c0 13.79353-11.18208 24.97561-24.97561 24.97561H205.799024c-13.79353 0-24.97561-11.18208-24.975609-24.97561V89.912195c0-13.79353 11.18208-24.97561 24.975609-24.97561z m448.70681 24.97561H205.799024v845.174634H871.64878V307.055141L654.505834 89.912195z"
                 fill="#B7B7BD"
@@ -87,7 +87,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'docx'">
-            <svg t="1705645401993" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207">
+            <svg t="1705645401993" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -108,7 +108,7 @@
             </svg>
           </template>
           <template v-else-if="file.type === 'pptx'">
-            <svg t="1705645414803" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354">
+            <svg t="1705645414803" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -129,7 +129,7 @@
             </svg>
           </template>
           <template v-else>
-            <svg t="1705645436666" class="w-ls h-ls" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501">
+            <svg t="1705645436666" :class="iconClass" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2501">
               <path
                 d="M205.5 64H665l232 232v639c0 13.807-11.193 25-25 25H205.5c-13.807 0-25-11.193-25-25V89c0-13.807 11.193-25 25-25z m449.145 25H205.5v846H872V306.355L654.645 89z"
                 fill="#B7B7BD"
@@ -150,6 +150,9 @@
             </svg>
           </template>
 
+          <p v-if="file.name && file.type !== 'image' && file.type !== 'video'" class="w-full mt-ss ac" ui-omit="1" :title="file.name">{{ file.name }}</p>
+          <p v-if="viewText || text" class="w-full co-note fs-sm ac" ui-omit="1">{{ viewText || text }}</p>
+
           <!-- 上传状态 -->
           <div class="upload-status" :data-status="file.status">
             <div class="neatui-upload-icon"><i></i></div>
@@ -162,25 +165,26 @@
     <template v-if="showUploadButton">
       <slot name="btn" :disabled="disabled">
         <label
-          class="pr flex-block"
-          :class="{ 'ux-disable': disabled }"
+          class="pr flex-fixed"
+          :class="disabled ? 'ux-disable' : 'ux-none'"
           :ui-form="`${theme} type:upload tips:hover`"
           :style="`width: ${isNumber(width) ? width + 'em' : width}`"
           v-bind="itemAttrs"
         >
-          <div class="w-full pr" :style="`box-sizing: content-box; padding-top: ${ratio}%`">
-            <div ui-flex="row cm" :class="`pa ot-no ol-no full upload n-sl bg-fore b-solid b-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
+          <div class="w-full pr" :style="boxStyle">
+            <div ui-flex="row cm" :class="`${ratio ? 'pa full n-sl' : 'w-full n-ms min-h-ms*s'} ot-no ol-no upload bg-fore b-solid b-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
               <div v-if="tips" ui-form-tips>
                 {{ tips }}
               </div>
               <input style="display: none" type="file" class="pa input" :multiple="!max || max > 1" :accept="accept" :disabled="disabled" @change="change" />
-              <div class="co-note ac input-icon">
+              <div class="co-note ac input-icon" ui-flex="col cm">
                 <svg t="1705642180833" style="width: 1em; height: 1em" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215">
                   <path
                     d="M906.212134 565.732986 565.732986 565.732986 565.732986 906.212134C565.732986 926.013685 541.666486 959.972 511.97312 959.972 482.297674 959.972 458.213254 926.013685 458.213254 906.212134L458.213254 565.732986 117.734106 565.732986C97.950475 565.732986 63.97424 541.666486 63.97424 511.97312 63.97424 482.279754 97.950475 458.213254 117.734106 458.213254L458.213254 458.213254 458.213254 117.734106C458.213254 97.950475 482.297674 63.97424 511.97312 63.97424 541.666486 63.97424 565.732986 97.950475 565.732986 117.734106L565.732986 458.213254 906.212134 458.213254C925.995765 458.213254 959.972 482.279754 959.972 511.97312 959.972 541.666486 925.995765 565.732986 906.212134 565.732986Z"
                     p-id="4216"
                   ></path>
                 </svg>
+                <p v-if="text" class="fs-sm mt-ss">{{ text }}</p>
               </div>
             </div>
           </div>
@@ -202,13 +206,22 @@
     uploadClass?: string;
     uploadStyle?: string;
     tips?: string;
+    /** 未上传时，+ 号下方的文字 */
+    text?: string;
+    /** 已上传时文件名下方的文字；不传则仍用 text */
+    viewText?: string;
+    /** 宽高比（高 / 宽 %）；0 = 不定比例，高度随内容 */
+    ratio?: number;
+    /** 已上传时点整块打开文件（PDF、图片、视频新窗口看，其它下载）；传 false 关掉 */
+    view?: boolean;
+    /** 接管「打开文件」：传了就不再新窗口打开 / 下载，交给它（如加展示水印预览） */
+    preview?: (file: { url: string; name: string; type: string }) => void;
     accept?: string | 'image/*' | 'video/*' | 'audio/*';
     upload?: (formData: FormData, fileExtension?: string) => Promise<any>;
     maxSize?: number;
     compress?: boolean;
     disabled?: boolean;
     width?: number | string;
-    ratio?: number;
     theme?: string;
   }
 
@@ -219,9 +232,12 @@
     attrs: () => ({}),
     itemAttrs: () => ({}),
     tips: '',
+    text: '',
+    viewText: '',
+    view: true,
     accept: '*',
     upload: async () => null,
-    maxSize: 10,
+    maxSize: 500,
     compress: true,
     max: 0,
     disabled: false,
@@ -230,6 +246,10 @@
     theme: '@a',
   });
 
+  /** 定比例：外层 padding-top 撑高、内层铺满；不定比例：高度随内容 */
+  const boxStyle = computed(() => (props.ratio ? `box-sizing: content-box; padding-top: ${props.ratio}%` : ''));
+  const iconClass = computed(() => (props.ratio ? 'w-ls h-ls' : 'w-lm h-lm'));
+
   interface UploadFile {
     name: string;
     type: string;
@@ -265,6 +285,51 @@
     return file.path;
   };
 
+  // 已上传的文件整块打开；上传中、失败不打开
+  const canOpen = (file: UploadFile) => props.view && (file.status === 'yes' || file.status === 'end') && !!getImageUrl(file);
+  // 浏览器能直接看的新窗口打开，Word、Excel 等下载
+  const VIEWABLE = ['pdf', 'image', 'video'];
+  const fileNameOf = (file: UploadFile, url: string) => file.name || decodeURIComponent(url.split(/[?#]/)[0]?.split('/').pop() || '') || 'file';
+  // data URL（mock）不能直接顶层打开，转成 blob URL
+  const dataToBlobUrl = (url: string) => {
+    const [head = '', body = ''] = url.split(',');
+    const mime = head.match(/^data:([^;,]+)/)?.[1] || 'application/octet-stream';
+    const bin = /;base64/i.test(head) ? atob(body) : decodeURIComponent(body);
+    const bytes = new Uint8Array(bin.length);
+    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+    return URL.createObjectURL(new Blob([bytes], { type: mime }));
+  };
+  const download = async (url: string, name: string) => {
+    let href = url;
+    try {
+      // 跨域地址 a[download] 不生效，先取成 blob 才能按原文件名存
+      if (!/^(blob|data):/i.test(url)) {
+        const res = await fetch(url);
+        // 403/404/500 不会抛异常，不检查会把错误页按原文件名存下来
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        href = URL.createObjectURL(await res.blob());
+      }
+    } catch {
+      // 失败交给浏览器直接打开，由服务端显示真实错误
+      window.open(url, '_blank', 'noopener');
+      return;
+    }
+    const a = document.createElement('a');
+    a.href = href;
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    if (href !== url) setTimeout(() => URL.revokeObjectURL(href), 1000);
+  };
+  const openFile = (file: UploadFile) => {
+    if (!canOpen(file)) return;
+    const url = getImageUrl(file);
+    if (props.preview) return props.preview({ url, name: fileNameOf(file, url), type: file.type });
+    if (!VIEWABLE.includes(file.type)) return download(url, fileNameOf(file, url));
+    window.open(/^data:/i.test(url) ? dataToBlobUrl(url) : url, '_blank', 'noopener');
+  };
+
   // 计算属性
   const showUploadButton = computed(() => {
     const currentCount = state.files.length;
@@ -338,6 +403,9 @@
     if (props.accept && props.accept !== '*') {
       const acceptTypes = props.accept.split(',').map((type) => type.trim());
       const isValidType = acceptTypes.some((type) => {
+        if (type.startsWith('.')) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase());
+        }
         if (type.endsWith('/*')) {
           return file.type.startsWith(type.replace('/*', ''));
         }
@@ -385,11 +453,12 @@
     clearFileTimer(file);
     file.timer = window.setTimeout(() => {
       const fileIndex = state.files.findIndex((f) => f.path === file.path);
-      if (fileIndex !== -1) {
+      const hit = state.files[fileIndex];
+      if (hit) {
         if (file.status === 'yes') {
           // yes 状态 3 秒后变为 end
-          state.files[fileIndex].status = 'end';
-          clearFileTimer(state.files[fileIndex]);
+          hit.status = 'end';
+          clearFileTimer(hit);
         } else if (file.status === 'err') {
           // err 状态 3 秒后清除占位（删除文件）
           removeFile(fileIndex, true);
@@ -476,8 +545,7 @@
     // 步骤1：立即添加所有文件到UI，显示占位图
     const validFiles: { file: File; uploadFile: UploadFile }[] = [];
 
-    for (let i = 0; i < selectedFiles.length; i++) {
-      const file = selectedFiles[i];
+    for (const file of Array.from(selectedFiles)) {
 
       // 验证文件
       const validationError = validateFile(file);
@@ -538,21 +606,21 @@
       const result = await props.upload(formData, fileExtension);
 
       // 更新文件状态
-      const fileIndex = state.files.findIndex((f) => f.path === uploadFile.path);
-      if (fileIndex !== -1) {
+      const hit = state.files.find((f) => f.path === uploadFile.path);
+      if (hit) {
         if (result) {
           // 直接保存上传函数的返回值
-          state.files[fileIndex].result = result;
-          state.files[fileIndex].status = 'yes';
+          hit.result = result;
+          hit.status = 'yes';
           // 设置3秒后转换为end状态的定时器
-          setStatusTransitionTimer(state.files[fileIndex]);
+          setStatusTransitionTimer(hit);
           // 每个文件完成后更新外部数据源
           emitUpdateEvents();
         } else {
           // 上传失败时先显示错误状态，3秒后移除文件
-          state.files[fileIndex].status = 'err';
+          hit.status = 'err';
           // 设置3秒后删除文件的定时器
-          setStatusTransitionTimer(state.files[fileIndex]);
+          setStatusTransitionTimer(hit);
           // 发射错误事件
           emit('error', `文件 ${file.name} 上传失败: 上传函数返回空值`);
         }
@@ -561,11 +629,11 @@
       console.error('文件处理失败:', error);
 
       // 上传失败时先显示错误状态，3秒后移除文件
-      const fileIndex = state.files.findIndex((f) => f.path === uploadFile.path);
-      if (fileIndex !== -1) {
-        state.files[fileIndex].status = 'err';
+      const hit = state.files.find((f) => f.path === uploadFile.path);
+      if (hit) {
+        hit.status = 'err';
         // 设置3秒后删除文件的定时器
-        setStatusTransitionTimer(state.files[fileIndex]);
+        setStatusTransitionTimer(hit);
       }
 
       emit('error', `文件 ${file.name} 上传失败: ${error}`);
@@ -586,7 +654,7 @@
             // 如果是字符串URL，尝试从URL判断类型
             const urlType = getFileTypeFromUrl(item);
             return {
-              name: 'file',
+              name: '',
               type: urlType,
               path: item,
               status: 'end' as const,
@@ -595,7 +663,7 @@
           } else {
             // 如果是对象
             return {
-              name: item.name || 'file',
+              name: item.name || '',
               type: item.type || 'file',
               path: item.url || item.path || '',
               status: 'end' as const,
@@ -607,7 +675,7 @@
         const urlType = getFileTypeFromUrl(newValue);
         state.files = [
           {
-            name: 'file',
+            name: '',
             type: urlType,
             path: newValue,
             status: 'end',
@@ -620,7 +688,7 @@
         const objType = objValue.type || (objPath ? getFileTypeFromUrl(objPath) : 'file');
         state.files = [
           {
-            name: objValue.name || 'file',
+            name: objValue.name || '',
             type: objType,
             path: objPath,
             status: 'end',

package/src/components/form/MoreSelectPanel.vue

@@ -1,190 +0,0 @@
-<template>
-  <div :ui-form="`${theme} type:select ${sz ? 'sz:' + sz : ''}`">
-    <IPickerView ref="ipicker" tipBoxClass="ny-sm nx-no" tipBoxStyle="min-width: 100%">
-      <slot>
-        <Input
-          v-bind="{ placeholder, rules, theme, sz, co, block, ready: true, type: 'text', tips, disabled, readonly, clearable: false, verify, prefix, suffix, interacted }"
-          :clearable="false"
-          readonly
-          v-model="state.value"
-          :interacted="interacted"
-        >
-          <template #suffix><i ui-form-select=""></i></template>
-        </Input>
-      </slot>
-      <template #options>
-        <ul v-if="props.options?.length" ui-scroll=":y s" class="nx-sm lh-ml" style="min-width: 100%; max-height: 15em">
-          <template v-for="(item, idx) of props.options" :key="idx">
-            <li v-if="item.disable" class="ux-hover nx-sm r-ss o-ms">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
-                <del class="ml-sm">{{ item.label || item }}</del>
-              </label>
-            </li>
-            <li v-else class="ux-hover nx-sm r-ss" @click.stop="select(item.value)">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="modelValue?.some((i: any) => `${i}` === `${item.value}`)" />
-                <span class="ml-sm">{{ item.label || item }}</span>
-              </label>
-            </li>
-          </template>
-        </ul>
-        <div v-else class="w-full ny-ms" ui-flex="col cm" v-html="spare"></div>
-        <ul class="nx-sm lh-ml" v-if="tools">
-          <li class="my-ss"><div class="o-mm" ui-line="@a"></div></li>
-          <li ui-flex="row xm">
-            <div class="ux-hover nx-sm r-ss co-main" ui-wrap="no" @click.stop="allselect()">
-              <label style="pointer-events: none" :ui-form="`${theme} type:checkbox :block`">
-                <input type="checkbox" :name="state.name" :checked="state.all" />
-                <span class="ml-sm">全选({{ props.options?.length || 0 }})</span>
-              </label>
-            </div>
-            <div>
-              <button v-show="state.has" class="co-risk" ui-btn="@a none s" @click="remove">清空</button>
-            </div>
-          </li>
-        </ul>
-      </template>
-    </IPickerView>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { reactive, ref, computed, watch } from 'vue';
-  import Input from './Input.vue';
-  import { IFollowView, IPickerView } from '../basic';
-  const ipicker: any = ref(null);
-
-  const emits = defineEmits(['update:modelValue']);
-
-  /**
-   * 入参说明
-   *
-   * modelValue     值
-   * options        枚举列表
-   * tools          是否显示工具栏
-   * spare          空闲兜底内容
-   * search         是否显示搜索框
-   *
-   * -----------------------------------------
-   * theme          主题
-   * sz             尺寸
-   * co             颜色
-   * block          撑满
-   * ready          准备就绪
-   * type           类型
-   * tips           提示文案
-   * placeholder    内容占位
-   * maxlength      最大长度
-   * minlength      最小长度
-   * disabled       是否禁用
-   * readonly       是否只读
-   * clearable      是否显示清除按钮
-   * rules          校验规则
-   * verify         是否是示校验图标
-   * prefix         前缀内容
-   * suffix         后缀内容
-   * interacted     用户是否交互
-   */
-
-  // 类型
-  interface Props {
-    modelValue?: Array<string | number>;
-    options: Array<object>;
-    tools?: boolean;
-    spare?: string;
-
-    // Input
-    placeholder?: string;
-    rules?: Array<object>;
-    theme?: string;
-    sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
-    co?: string;
-    block?: boolean;
-    ready?: boolean;
-    type?: string;
-    tips?: string;
-    maxlength?: null | number;
-    minlength?: null | number;
-    disabled?: boolean;
-    readonly?: boolean;
-    clearable?: boolean;
-    verify?: boolean;
-    prefix?: Array<any>;
-    suffix?: Array<any>;
-    interacted?: boolean;
-  }
-  // 入参
-  const props: any = withDefaults(defineProps<Props>(), {
-    modelValue: () => [],
-    options: () => [],
-    tools: true,
-    spare: '当前没有可选项',
-
-    // Input
-    placeholder: '',
-    rules: () => [],
-    theme: '@a',
-    sz: '',
-    co: '',
-    block: true,
-    ready: false,
-    type: 'text',
-    tips: '',
-    maxlength: null,
-    minlength: null,
-    disabled: false,
-    readonly: false,
-    clearable: true,
-    verify: false,
-    prefix: () => [],
-    suffix: () => [],
-    interacted: false,
-  });
-  // 内部数据
-  const state: any = reactive({
-    name: computed(() => {
-      return Array.from({ length: 8 }, () => String.fromCharCode(97 + Math.floor(Math.random() * 26))).join('');
-    }),
-    show: 0,
-    value: '',
-    all: computed(() => {
-      return props.options?.every((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    }),
-    has: computed(() => {
-      return props.options?.some((item: any) => props.modelValue?.some((i: any) => `${i}` === `${item.value}`));
-    }),
-  });
-
-  // 监听外部数据
-  watch(
-    [() => props.modelValue, () => props.options],
-    ([v = [], o = []]: any = []) => {
-      const selectd: any = o?.filter((item: any) => v?.some((i: any) => `${i}` === `${item.value}`))?.map((item: any) => item.label) || [];
-      state.value = selectd.join(' Ι ') || '';
-    },
-    { deep: true, immediate: true },
-  );
-
-  // 更新
-  const change = (item: any) => {
-    emits('update:modelValue', item);
-  };
-  // 选中
-  const select = (item: any) => {
-    const s = [...props.modelValue];
-    s?.indexOf(item) !== -1 ? s?.splice(s?.indexOf(item), 1) : s?.push(item);
-    change(s);
-  };
-  // 全选
-  const allselect = () => {
-    const s = state.all ? [] : props.options?.map((item: any) => item.value);
-    change(s);
-  };
-  // 清除
-  const remove = () => {
-    change([]);
-    ipicker.value.cancel();
-  };
-</script>
-. .