savor-ui 0.14.2 → 0.15.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+# [0.15.0](https://gitee.com/mach552/savor-ui/compare/v0.14.2...v0.15.0) (2026-08-02)
+
+
+### Features
+
+* **upload:** 添加禁用属性 ([44bc570](https://gitee.com/mach552/savor-ui/commits/44bc570873f340882cca731bad7e72c321065527))
+* **upload:** 新增照片墙模式 ([7fd2908](https://gitee.com/mach552/savor-ui/commits/7fd2908b757fa2b4b699cf2585b98f6825fc0996))
+
 ## [0.14.2](https://gitee.com/mach552/savor-ui/compare/v0.14.1...v0.14.2) (2026-07-31)
 
 

package/dist/es/components/src/image/image-preview.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -32,7 +32,7 @@ var F = /*@__PURE__*/ h({
 		M(L, (e) => {
 			e ? (I.value = _(), O()) : F();
 		});
-		let z = j("contentRef"), B = S(0), V = S(1), H = S(0), U = S(0), W = () => {
+		let z = j("contentRef"), B = S(0), V = S(.8), H = S(0), U = S(0), W = () => {
 			z.value && (B.value += 90);
 		}, G = () => {
 			z.value && (B.value -= 90);
@@ -41,7 +41,7 @@ var F = /*@__PURE__*/ h({
 		}, q = () => {
 			z.value && (V.value -= .2, V.value < .5 && (V.value = .5));
 		}, J = () => {
-			z.value && (B.value = 0, V.value = 1, H.value = 0, U.value = 0);
+			z.value && (B.value = 0, V.value = .8, H.value = 0, U.value = 0);
 		}, Y = () => {
 			R();
 		}, X = (e) => {

package/dist/es/components/src/upload/index.d.ts

@@ -3,11 +3,13 @@ import { PublicProps, ShallowUnwrapRef, VNode, Plugin } from 'vue';
 export declare const SUpload: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
     slots: {
+        trigger?: (props: {}) => any;
+    } & {
         drag?: (props: {}) => any;
     } & {
         btn?: (props: {}) => any;
     };
-    emit: (((evt: "progress", file: UploadFile, progress: number) => void) & ((evt: "change", files: UploadFile[]) => void) & ((evt: "error", file: UploadFile, error: any) => void) & ((evt: "success", file: UploadFile, response: any) => void) & ((evt: "remove", file: UploadFile, files: UploadFile[]) => void) & ((evt: "exceed", files: UploadFile[]) => void)) & ((event: "update:fileList", value: UploadFile[]) => void);
+    emit: (((evt: "progress", file: UploadFile, progress: number) => void) & ((evt: "change", files: UploadFile[]) => void) & ((evt: "error", file: UploadFile, error: any) => void) & ((evt: "success", file: UploadFile, response: any) => void) & ((evt: "remove", file: UploadFile, files: UploadFile[]) => void) & ((evt: "preview", file: UploadFile) => void) & ((evt: "exceed", files: UploadFile[]) => void)) & ((event: "update:modelValue", value: string) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
         multiple?: boolean | undefined;
@@ -17,31 +19,37 @@ export declare const SUpload: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
         autoUpload?: boolean | undefined;
         drag?: boolean | undefined;
         showList?: boolean | undefined;
+        picture?: boolean | undefined;
         accept?: string | undefined;
         limit?: number | undefined;
         showRetry?: boolean | undefined;
         showCancel?: boolean | undefined;
         showUpload?: boolean | undefined;
+        disabled?: boolean | undefined;
         beforeUpload?: ((file: UploadFile) => Promise<any>) | undefined;
-        fileList?: UploadFile[] | undefined;
+        afterSuccess?: ((file: UploadFile, response: any) => string) | undefined;
+        modelValue?: string | undefined;
         onProgress?: ((file: UploadFile, progress: number) => any) | undefined;
         onChange?: ((files: UploadFile[]) => any) | undefined;
         onError?: ((file: UploadFile, error: any) => any) | undefined;
         onSuccess?: ((file: UploadFile, response: any) => any) | undefined;
         onRemove?: ((file: UploadFile, files: UploadFile[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onPreview?: ((file: UploadFile) => any) | undefined;
         onExceed?: ((files: UploadFile[]) => any) | undefined;
-        "onUpdate:fileList"?: ((value: UploadFile[]) => any) | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<UploadExpose>) => void;
     attrs: any;
     slots: {
+        trigger?: (props: {}) => any;
+    } & {
         drag?: (props: {}) => any;
     } & {
         btn?: (props: {}) => any;
     };
-    emit: (((evt: "progress", file: UploadFile, progress: number) => void) & ((evt: "change", files: UploadFile[]) => void) & ((evt: "error", file: UploadFile, error: any) => void) & ((evt: "success", file: UploadFile, response: any) => void) & ((evt: "remove", file: UploadFile, files: UploadFile[]) => void) & ((evt: "exceed", files: UploadFile[]) => void)) & ((event: "update:fileList", value: UploadFile[]) => void);
+    emit: (((evt: "progress", file: UploadFile, progress: number) => void) & ((evt: "change", files: UploadFile[]) => void) & ((evt: "error", file: UploadFile, error: any) => void) & ((evt: "success", file: UploadFile, response: any) => void) & ((evt: "remove", file: UploadFile, files: UploadFile[]) => void) & ((evt: "preview", file: UploadFile) => void) & ((evt: "exceed", files: UploadFile[]) => void)) & ((event: "update:modelValue", value: string) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 }) & Plugin;

package/dist/es/components/src/upload/types.d.ts

@@ -2,7 +2,8 @@ export interface UploadFile {
     uid: string;
     name: string;
     size: number;
-    raw: File;
+    raw?: File;
+    url?: string;
     status?: "ready" | "uploading" | "success" | "error";
     percentage?: number;
 }
@@ -20,11 +21,11 @@ export interface RequestOptions {
 export interface UploadProps {
     /** 是否支持多选 */
     multiple?: boolean;
-    /** 上传文件的请求头 */
+    /** 请求头 */
     headers?: Headers;
-    /** 上传文件的请求体 */
+    /** 请求体 */
     data?: Record<string, any>;
-    /** 上传文件的请求地址 */
+    /** 请求地址 */
     action?: string;
     /** 是否自动上传 */
     autoUpload?: boolean;
@@ -32,9 +33,11 @@ export interface UploadProps {
     drag?: boolean;
     /** 是否显示上传列表 */
     showList?: boolean;
-    /** 上传文件的类型 */
+    /** 是否显示图片墙 */
+    picture?: boolean;
+    /** 文件的类型 */
     accept?: string;
-    /** 上传文件的数量限制 */
+    /** 数量限制 */
     limit?: number;
     /** 是否显示重试按钮 */
     showRetry?: boolean;
@@ -42,21 +45,27 @@ export interface UploadProps {
     showCancel?: boolean;
     /** 是否显示上传按钮 */
     showUpload?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
     /** 上传前的回调函数 */
     beforeUpload?: (file: UploadFile) => Promise<any>;
+    /** 上传成功后从响应中提取 URL，返回的 URL 会合并到 modelValue */
+    afterSuccess?: (file: UploadFile, response: any) => string;
 }
 export interface UploadEmits {
-    /** 上传文件变化时 */
+    /** 文件变化时 */
     change: [files: UploadFile[]];
-    /** 上传文件错误时 */
+    /** 文件错误时 */
     error: [file: UploadFile, error: any];
-    /** 上传文件成功时 */
+    /** 文件成功时 */
     success: [file: UploadFile, response: any];
-    /** 上传文件进度时 */
+    /** 文件进度时 */
     progress: [file: UploadFile, progress: number];
-    /** 上传文件数量超过限制时 */
+    /** 文件数量超过限制时 */
     exceed: [files: UploadFile[]];
-    /** 上传文件移除时 */
+    /** 文件预览时 */
+    preview: [file: UploadFile];
+    /** 文件移除时 */
     remove: [file: UploadFile, files: UploadFile[]];
 }
 export interface UploadSlots {
@@ -64,6 +73,8 @@ export interface UploadSlots {
     btn?: () => any;
     /** 拖拽区域 */
     drag?: () => any;
+    /** 照片墙触发块 */
+    trigger?: () => any;
 }
 export interface UploadExpose {
     /** 上传文件 */

package/dist/es/components/src/upload/upload-drag.d.ts

@@ -1,6 +1,8 @@
 import { PublicProps, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: PublicProps & __VLS_PrettifyLocal<{} & {
+    props: PublicProps & __VLS_PrettifyLocal<{
+        disabled?: boolean;
+    } & {
         onChange?: ((files: FileList) => any) | undefined;
         onClick?: (() => any) | undefined;
     }> & (typeof globalThis extends {

package/dist/es/components/src/upload/upload-drag.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -8,22 +8,32 @@ var g = p("<span></span>"), _ = p("<span>拖拽文件到此处上传", 2), v = p
 s("click");
 var y = /*@__PURE__*/ o({
 	__name: "upload-drag",
+	props: { disabled: {
+		type: Boolean,
+		default: !1
+	} },
 	emits: ["change", "click"],
 	setup(o, { emit: s }) {
-		let p = s, y = s, b = e("upload"), x = l(!1), S = () => {
-			x.value = !0;
+		let p = o, y = s, b = e("upload"), x = l(!1), S = () => {
+			p.disabled || y("click");
 		}, C = () => {
-			x.value = !1;
-		}, w = (e) => {
-			x.value = !1, e.dataTransfer?.files && e.dataTransfer.files.length > 0 && y("change", e.dataTransfer.files);
-		}, T = v(), E = n(T);
+			p.disabled || (x.value = !0);
+		}, w = () => {
+			p.disabled || (x.value = !1);
+		}, T = (e) => {
+			p.disabled || (x.value = !1, e.dataTransfer?.files && e.dataTransfer.files.length > 0 && y("change", e.dataTransfer.files));
+		}, E = v(), D = n(E);
 		return u(() => {
 			let e = m(b);
-			d(T, [e.e("drag-wrapper"), e.is("dragover", x.value)]), d(E, [e.e("drag-content")]);
-		}), f(E, null, 0), a("default", null, () => {
+			d(E, [
+				e.e("drag-wrapper"),
+				e.is("dragover", x.value),
+				e.is("disabled", o.disabled)
+			]), d(D, [e.e("drag-content")]);
+		}), f(D, null, 0), a("default", null, () => {
 			let e = g();
 			return f(e, null, 0), r(m(t)), [e, _()];
-		}), c(T, "dragover", h(S, ["prevent"])), c(T, "dragleave", h(C, ["prevent"])), c(T, "drop", h(w, ["prevent"])), T.$evtclick = i(() => p("click")), T;
+		}), c(E, "dragover", h(C, ["prevent"])), c(E, "dragleave", h(w, ["prevent"])), c(E, "drop", h(T, ["prevent"])), E.$evtclick = i(S), E;
 	}
 });
 //#endregion

package/dist/es/components/src/upload/upload.d.ts

@@ -2,26 +2,29 @@ import { UploadExpose, UploadFile, UploadProps } from './types';
 import { PublicProps, ShallowUnwrapRef, VNode } from 'vue';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & __VLS_PrettifyLocal<(UploadProps & {
-        fileList?: UploadFile[];
+        modelValue?: string;
     }) & {
         onProgress?: ((file: UploadFile, progress: number) => any) | undefined;
         onChange?: ((files: UploadFile[]) => any) | undefined;
         onError?: ((file: UploadFile, error: any) => any) | undefined;
         onSuccess?: ((file: UploadFile, response: any) => any) | undefined;
         onRemove?: ((file: UploadFile, files: UploadFile[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        onPreview?: ((file: UploadFile) => any) | undefined;
         onExceed?: ((files: UploadFile[]) => any) | undefined;
-        "onUpdate:fileList"?: ((value: UploadFile[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: ShallowUnwrapRef<UploadExpose>) => void;
     attrs: any;
     slots: {
+        trigger?: (props: {}) => any;
+    } & {
         drag?: (props: {}) => any;
     } & {
         btn?: (props: {}) => any;
     };
-    emit: (((evt: "progress", file: UploadFile, progress: number) => void) & ((evt: "change", files: UploadFile[]) => void) & ((evt: "error", file: UploadFile, error: any) => void) & ((evt: "success", file: UploadFile, response: any) => void) & ((evt: "remove", file: UploadFile, files: UploadFile[]) => void) & ((evt: "exceed", files: UploadFile[]) => void)) & ((event: "update:fileList", value: UploadFile[]) => void);
+    emit: (((evt: "progress", file: UploadFile, progress: number) => void) & ((evt: "change", files: UploadFile[]) => void) & ((evt: "error", file: UploadFile, error: any) => void) & ((evt: "success", file: UploadFile, response: any) => void) & ((evt: "remove", file: UploadFile, files: UploadFile[]) => void) & ((evt: "preview", file: UploadFile) => void) & ((evt: "exceed", files: UploadFile[]) => void)) & ((event: "update:modelValue", value: string) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/es/components/src/upload/upload.vue_vue_type_script_setup_true_vapor_true_lang.mjs

@@ -4,21 +4,25 @@ import { useNamespace as t } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
 import n from "../../../icons/src/close.vue.mjs";
 import r from "../../../icons/src/delete.vue.mjs";
-import ee from "../../../icons/src/refresh-left.vue.mjs";
-import i from "../../../icons/src/upload.vue.mjs";
+import i from "../../../icons/src/empty.vue.mjs";
+import a from "../../../icons/src/plus.vue.mjs";
+import o from "../../../icons/src/refresh-left.vue.mjs";
+import s from "../../../icons/src/upload.vue.mjs";
+import c from "../../../icons/src/zoom-in.vue.mjs";
 import "../../../icons/index.mjs";
-import { SButton as a } from "../button/index.mjs";
-import { SProgress as o } from "../progress/index.mjs";
-import { httpRequest as s } from "./request.mjs";
-import c from "./upload-drag.vue.mjs";
-import { child as l, computed as u, createComponent as d, createFor as f, createIf as p, createInvoker as m, createSlot as h, createTemplateRefSetter as te, defineVaporComponent as g, delegateEvents as _, mergeModels as v, next as y, on as b, onMounted as x, onUnmounted as S, renderEffect as C, setClass as w, setInsertionState as T, setProp as E, setText as ne, template as D, toDisplayString as re, txt as ie, unref as O, useModel as k, useTemplateRef as A } from "vue";
+import { SButton as l } from "../button/index.mjs";
+import { SImagePreview as ee } from "../image/index.mjs";
+import { SProgress as u } from "../progress/index.mjs";
+import { httpRequest as d } from "./request.mjs";
+import te from "./upload-drag.vue.mjs";
+import { child as f, computed as p, createComponent as m, createFor as h, createIf as g, createInvoker as _, createSlot as v, createTemplateRefSetter as ne, defineVaporComponent as y, delegateEvents as b, mergeModels as x, next as S, on as re, onUnmounted as ie, ref as C, renderEffect as w, setClass as T, setInsertionState as E, setProp as D, setText as ae, template as O, toDisplayString as oe, txt as se, unref as k, useModel as A, useTemplateRef as ce } from "vue";
 //#region ../components/src/upload/upload.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var j = D("<div>"), M = D("<div><div> </div><div></div><div><div>"), N = D("<div><div><input type=file></div>", 1);
-_("click");
-var P = /*@__PURE__*/ g({
+var le = O("<img>"), j = O("<div>"), ue = O("<div></div>"), de = O("<div><div> </div><div></div><div>"), fe = O("<div><input type=file>", 1);
+b("click");
+var M = /*@__PURE__*/ y({
 	name: "SUpload",
 	__name: "upload",
-	props: /*@__PURE__*/ v({
+	props: /*@__PURE__*/ x({
 		multiple: { type: Boolean },
 		headers: {},
 		data: {},
@@ -29,6 +33,7 @@ var P = /*@__PURE__*/ g({
 			type: Boolean,
 			default: !0
 		},
+		picture: { type: Boolean },
 		accept: {},
 		limit: {},
 		showRetry: {
@@ -43,32 +48,44 @@ var P = /*@__PURE__*/ g({
 			type: Boolean,
 			default: !0
 		},
-		beforeUpload: {}
+		disabled: { type: Boolean },
+		beforeUpload: {},
+		afterSuccess: {}
 	}, {
-		fileList: { default: () => [] },
-		fileListModifiers: {}
+		modelValue: { default: "" },
+		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ v([
+	emits: /*@__PURE__*/ x([
 		"change",
 		"error",
 		"success",
 		"progress",
 		"exceed",
+		"preview",
 		"remove"
-	], ["update:fileList"]),
-	setup(g, { expose: _, emit: v }) {
-		let D = g, P = v, F = t("upload"), I = A("inputRef"), L = A("contentBtnRef"), R = null, z = k(g, "fileList"), B = u(() => z.value.some((e) => e.status === "ready" || e.status === "error")), V = /* @__PURE__ */ new Map(), H = () => {
-			I.value?.click();
-		}, U = (t) => {
+	], ["update:modelValue"]),
+	setup(y, { expose: b, emit: x }) {
+		let O = y, M = x, N = t("upload"), P = ce("inputRef"), F = C([]), I = A(y, "modelValue"), L = (e) => e ? e.split(",").map((e) => e.trim()).filter(Boolean) : [], R = p(() => L(I.value).map((e, t) => ({
+			uid: `model-${t}-${e}`,
+			name: decodeURIComponent(e.split("/").pop()?.split("?")[0] || e),
+			size: 0,
+			url: e,
+			status: "success",
+			percentage: 100
+		}))), z = p(() => [...F.value, ...R.value]), B = p(() => F.value.length + R.value.length), pe = p(() => !(O.limit && B.value >= O.limit)), V = C(!1), H = C(""), U = /* @__PURE__ */ new Map(), me = (e) => e.type.startsWith("image/"), W = (e) => {
+			e && e.startsWith("blob:") && URL.revokeObjectURL(e);
+		}, G = () => {
+			O.disabled || P.value?.click();
+		}, K = (t) => {
 			let n = [];
 			for (let e of t) n.push(e);
-			if (D.limit) {
-				let t = D.limit - z.value.length;
+			if (O.limit) {
+				let t = O.limit - B.value;
 				if (t <= 0) {
-					P("exceed", z.value);
+					M("exceed", z.value);
 					return;
 				}
-				n.length > t && (P("exceed", n.slice(t).map((t) => ({
+				n.length > t && (M("exceed", n.slice(t).map((t) => ({
 					uid: e(8),
 					name: t.name,
 					size: t.size,
@@ -83,113 +100,177 @@ var P = /*@__PURE__*/ g({
 					name: t.name,
 					size: t.size,
 					raw: t,
+					url: me(t) ? URL.createObjectURL(t) : void 0,
 					status: "ready",
 					percentage: 0
 				};
-				z.value = [...z.value, n];
+				F.value = [...F.value, n];
 			}
-			P("change", z.value), D.autoUpload && Y();
-		}, W = (e) => {
-			let t = e.target.files;
-			t && U(t);
-		}, G = (e) => {
-			U(e);
-		}, K = (e) => {
-			let t = z.value.findIndex((t) => t.uid === e.uid);
-			t !== -1 && (z.value = z.value.toSpliced(t, 1), P("remove", e, z.value), P("change", z.value));
+			M("change", z.value), O.autoUpload && Z();
+		}, he = (e) => {
+			let t = e.target, n = t.files;
+			n && K(n), t.value = "";
+		}, ge = (e) => {
+			O.disabled || K(e);
 		}, q = (e) => {
-			Y(e);
-		}, ae = (e) => {
-			let t = V.get(e.uid);
-			t && (t.abort(), V.delete(e.uid), J(e.uid, { status: "error" }));
-		}, J = (e, t) => {
-			let n = z.value.findIndex((t) => t.uid === e);
-			n !== -1 && (z.value[n] = {
-				...z.value[n],
+			if (e.uid.startsWith("model-")) {
+				I.value = L(I.value).filter((t) => t !== e.url).join(","), M("remove", e, z.value), M("change", z.value);
+				return;
+			}
+			let t = F.value.findIndex((t) => t.uid === e.uid);
+			t !== -1 && (W(e.url), F.value = F.value.toSpliced(t, 1), M("remove", e, z.value), M("change", z.value));
+		}, J = (e) => {
+			Z(e);
+		}, _e = (e) => {
+			let t = U.get(e.uid);
+			t && (t.abort(), U.delete(e.uid), X(e.uid, { status: "error" }));
+		}, Y = (e) => {
+			H.value = e.url || "", V.value = !0, M("preview", e);
+		}, X = (e, t) => {
+			let n = F.value.findIndex((t) => t.uid === e);
+			n !== -1 && (F.value[n] = {
+				...F.value[n],
 				...t
-			}, z.value = [...z.value]);
-		}, Y = async (e) => {
-			I.value.value = "";
+			}, F.value = [...F.value]);
+		}, ve = (e) => {
+			if (!e) return;
+			let t = L(I.value);
+			t.includes(e) || (t.push(e), I.value = t.join(","));
+		}, Z = async (e) => {
 			let t = async (e) => {
-				if (e.status === "uploading") return;
+				if (e.status === "uploading" || !e.raw) return;
 				try {
-					await D.beforeUpload?.(e);
+					await O.beforeUpload?.(e);
 				} catch {
 					return;
 				}
-				J(e.uid, {
+				X(e.uid, {
 					status: "uploading",
 					percentage: 0
 				});
-				let t = s({
+				let t = d({
 					method: "POST",
 					file: e.raw,
 					name: e.name,
-					action: D.action,
-					headers: D.headers,
-					data: D.data,
+					action: O.action,
+					headers: O.headers,
+					data: O.data,
 					onProgress: (t) => {
-						J(e.uid, { percentage: t }), P("progress", e, t);
+						X(e.uid, { percentage: t }), M("progress", e, t);
 					},
 					onSuccess: (t) => {
-						J(e.uid, {
-							status: "success",
-							percentage: 100
-						}), V.delete(e.uid), P("success", e, t);
+						ve(O.afterSuccess?.(e, t) ?? "");
+						let n = F.value.findIndex((t) => t.uid === e.uid);
+						n !== -1 && (W(e.url), F.value = F.value.toSpliced(n, 1)), U.delete(e.uid), M("success", e, t);
 					},
 					onError: (t) => {
-						J(e.uid, { status: "error" }), V.delete(e.uid), P("error", e, t);
+						X(e.uid, { status: "error" }), U.delete(e.uid), M("error", e, t);
 					}
 				});
-				V.set(e.uid, t);
+				U.set(e.uid, t);
 			};
 			if (e) {
-				let n = z.value.find((t) => t.uid === e.uid);
+				let n = F.value.find((t) => t.uid === e.uid);
 				n && await t(n);
-			} else for (let e of z.value) e.status !== "success" && await t(e);
+			} else for (let e of F.value) e.status !== "success" && await t(e);
 		};
-		x(() => {
-			let e = L.value;
-			e && (R = e.querySelector("button:first-of-type"), R && R.addEventListener("click", H));
-		}), S(() => {
-			R &&= (R.removeEventListener("click", H), null), V.forEach((e) => e.abort()), V.clear();
-		}), _({ upload: Y });
-		let X = te(), Z = N(), Q = l(Z), $ = l(Q);
-		return b($, "change", W), X($, I, null, "inputRef"), C(() => {
-			let e = O(F);
-			w(Z, [e.b()]), w(Q, [e.e("content")]), w($, [e.e("inner")]), E($, "multiple", g.multiple), E($, "accept", g.accept);
-		}), T(Q, null, 1), p(() => g.drag, () => d(c, {
-			onClick: () => H,
-			onChange: () => G
-		}, () => h("drag", null, null, 4)), () => {
-			let e = j();
-			return C(() => w(e, [O(F).e("btn")])), T(e, null, 0), h("btn", null, () => d(O(a), {
-				type: "primary",
-				label: "选择文件"
-			})), X(e, L, null, "contentBtnRef"), e;
-		}, 261), T(Z, null, 1), p(() => g.showList && z.value.length > 0, () => {
+		C(!1), ie(() => {
+			U.forEach((e) => e.abort()), U.clear(), F.value.forEach((e) => W(e.url));
+		}), b({ upload: Z });
+		let ye = ne(), Q = fe(), $ = f(Q);
+		return re($, "change", he), ye($, P, null, "inputRef"), w(() => {
+			let e = k(N);
+			T(Q, [
+				e.b(),
+				e.is("picture", y.picture),
+				e.is("disabled", O.disabled)
+			]), T($, [e.e("inner")]), D($, "multiple", y.multiple), D($, "accept", y.accept);
+		}), E(Q, null, 1), g(() => y.picture, () => {
 			let e = j();
-			return C(() => w(e, [O(F).e("list")])), T(e, null, 0), f(() => z.value, (e) => {
-				let t = M(), a = l(t), s = y(a, 1), c = y(s, 2), u = l(c, 3), f = ie(a);
-				return C(() => {
-					let n = O(F), r = e.value;
-					w(t, [n.e("item"), n.is(r.status)]), w(a, [n.e("name")]), ne(f, re(r.name)), w(s, [n.e("progress")]);
-				}), T(s, null, 0), p(() => e.value.percentage && e.value.status === "uploading", () => d(O(o), {
-					percent: () => parseInt((e.value.percentage / 100).toFixed(1)),
-					type: "primary"
-				})), C(() => w(c, [O(F).e("actions")])), T(c, 0, 0), p(() => g.showUpload && B.value, () => {
-					let t = j();
-					return C(() => w(t, [O(F).e("action")])), T(t, null, 0), d(O(i)), t.$evtclick = m(() => Y(e.value)), t;
-				}), T(c, 0, 1), p(() => g.showRetry && e.value.status === "error", () => {
+			return w(() => T(e, [k(N).e("picture-wall")])), E(e, null, 0), h(() => z.value, (e) => {
+				let t = j();
+				return w(() => {
+					let n = k(N);
+					T(t, [n.e("picture-item"), n.is(e.value.status)]);
+				}), E(t, null, 0), g(() => e.value.url, () => {
+					let t = le();
+					return w(() => {
+						let n = e.value;
+						D(t, "src", n.url), T(t, [k(N).e("picture-thumb")]), D(t, "alt", n.name);
+					}), t;
+				}, () => {
+					let e = j();
+					return w(() => T(e, [k(N).e("picture-placeholder")])), E(e, null, 0), m(k(i)), e;
+				}, 261), E(t, null, 1), g(() => e.value.status === "uploading", () => {
 					let t = j();
-					return C(() => w(t, [O(F).e("action")])), T(t, null, 0), d(O(ee)), t.$evtclick = m(() => q(e.value)), t;
-				}), T(c, 0, 2), p(() => g.showCancel && e.value.status === "uploading", () => {
+					return w(() => T(t, [k(N).e("picture-loading")])), E(t, null, 0), m(k(u), {
+						percent: () => parseInt((e.value.percentage / 100).toFixed(1)),
+						type: "primary"
+					}), t;
+				}, () => {
 					let t = j();
-					return C(() => w(t, [O(F).e("action")])), T(t, null, 0), d(O(n)), t.$evtclick = m(() => ae(e.value)), t;
-				}), C(() => w(u, [O(F).e("action")])), T(u, null, 0), d(O(r)), u.$evtclick = m(() => K(e.value)), t;
-			}, (e) => e.uid, 9), e;
-		}), Z;
+					return w(() => T(t, [k(N).e("picture-mask")])), E(t, null, 0), g(() => !O.disabled && !y.autoUpload && y.showUpload && (e.value.status === "ready" || e.value.status === "error"), () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(s)), t.$evtclick = _(() => Z(e.value)), t;
+					}), E(t, null, 1), g(() => e.value.url, () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(c)), t.$evtclick = _(() => Y(e.value)), t;
+					}), E(t, null, 2), g(() => !O.disabled && y.showRetry && e.value.status === "error", () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(o)), t.$evtclick = _(() => J(e.value)), t;
+					}), E(t, null, 3), g(() => !O.disabled, () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("picture-action")])), E(t, null, 0), m(k(r)), t.$evtclick = _(() => q(e.value)), t;
+					}), t;
+				}, 517), t;
+			}, (e) => e.uid, 8), E(e, null, 1), g(() => pe.value, () => {
+				let e = j();
+				return w(() => T(e, [k(N).e("picture-trigger")])), E(e, null, 0), v("trigger", null, () => m(k(a))), e.$evtclick = _(G), e;
+			}), e;
+		}, () => {
+			let e = ue();
+			return w(() => T(e, [k(N).e("content")])), E(e, null, 0), g(() => y.drag, () => m(te, {
+				disabled: () => O.disabled,
+				onClick: () => G,
+				onChange: () => ge
+			}, () => v("drag", null, null, 4)), () => {
+				let e = j();
+				return w(() => T(e, [k(N).e("btn")])), E(e, null, 0), v("btn", null, () => m(k(l), {
+					type: "primary",
+					label: "选择文件",
+					disabled: () => O.disabled
+				})), e.$evtclick = _(G), e;
+			}, 2309), [e, g(() => y.showList && z.value.length > 0, () => {
+				let e = j();
+				return w(() => T(e, [k(N).e("list")])), E(e, null, 0), h(() => z.value, (e) => {
+					let t = de(), i = f(t), a = S(i, 1), c = S(a, 2), l = se(i);
+					return w(() => {
+						let n = k(N), r = e.value;
+						T(t, [n.e("item"), n.is(r.status)]), T(i, [n.e("name")]), ae(l, oe(r.name)), T(a, [n.e("progress")]);
+					}), E(a, null, 0), g(() => e.value.percentage && e.value.status === "uploading", () => m(k(u), {
+						percent: () => parseInt((e.value.percentage / 100).toFixed(1)),
+						type: "primary"
+					})), w(() => T(c, [k(N).e("actions")])), E(c, null, 0), g(() => !O.disabled && !y.autoUpload && y.showUpload && (e.value.status === "ready" || e.value.status === "error"), () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(s)), t.$evtclick = _(() => Z(e.value)), t;
+					}), E(c, null, 1), g(() => !O.disabled && y.showRetry && e.value.status === "error", () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(o)), t.$evtclick = _(() => J(e.value)), t;
+					}), E(c, null, 2), g(() => !O.disabled && y.showCancel && e.value.status === "uploading", () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(n)), t.$evtclick = _(() => _e(e.value)), t;
+					}), E(c, null, 3), g(() => !O.disabled, () => {
+						let t = j();
+						return w(() => T(t, [k(N).e("action")])), E(t, null, 0), m(k(r)), t.$evtclick = _(() => q(e.value)), t;
+					}), t;
+				}, (e) => e.uid, 9), e;
+			})];
+		}, 2057), E(Q, null, 2), m(k(ee), {
+			modelValue: () => V.value,
+			"onUpdate:modelValue": () => (e) => V.value = e,
+			src: () => H.value
+		}), Q;
 	}
 });
 //#endregion
-export { P as default };
+export { M as default };

package/dist/es/theme/components/upload.scss

@@ -7,6 +7,30 @@
   display: inline-flex;
   flex-direction: column;
   gap: 12px;
+
+  @include when(disabled) {
+    @include be(upload, picture-trigger) {
+      cursor: not-allowed;
+      color: getCssVar("color", "text-4");
+      &:hover {
+        border-color: getCssVar("color", "fill-3");
+        color: getCssVar("color", "text-4");
+      }
+    }
+    @include be(upload, drag-wrapper) {
+      cursor: not-allowed;
+      &:hover {
+        background-color: getCssVar("color", "fill-2");
+      }
+      @include when(dragover) {
+        border: 1px dashed getCssVar("color", "fill-3");
+      }
+    }
+    @include be(upload, drag-content) {
+      cursor: not-allowed;
+    }
+  }
+
   @include e(content) {
     display: flex;
     flex-direction: column;
@@ -80,4 +104,97 @@
     gap: 12px;
     cursor: pointer;
   }
+  @include e(picture-wall) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  @include e(picture-item) {
+    position: relative;
+    width: 104px;
+    height: 104px;
+    box-sizing: border-box;
+    border-radius: getCssVar("radius", "medium");
+    overflow: hidden;
+    border: 1px solid getCssVar("color", "fill-3");
+    background-color: getCssVar("color", "fill-2");
+    @include when(error) {
+      border-color: getCssVar("color", "danger-6");
+    }
+    &:hover {
+      @include within-be(upload, picture-mask) {
+        opacity: 1;
+      }
+    }
+  }
+  @include e(picture-thumb) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  @include e(picture-placeholder) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: getCssVar("color", "text-3");
+    font-size: 32px;
+  }
+  @include e(picture-loading) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 0, 0.45);
+  }
+  @include e(picture-mask) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transition: opacity 0.2s getCssVar("bezier", "1");
+  }
+  @include e(picture-action) {
+    width: 26px;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+    border-radius: getCssVar("radius", "small");
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+  @include e(picture-trigger) {
+    width: 104px;
+    height: 104px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: getCssVar("color", "text-3");
+    background-color: getCssVar("color", "fill-2");
+    border: 1px dashed getCssVar("color", "fill-3");
+    border-radius: getCssVar("radius", "medium");
+    cursor: pointer;
+    transition:
+      border-color 0.2s getCssVar("bezier", "1"),
+      color 0.2s getCssVar("bezier", "1");
+    &:hover {
+      background-color: getCssVar("color", "fill-3");
+    }
+  }
 }

package/dist/json/vetur-attributes.json

@@ -2702,35 +2702,38 @@
     "description": "弹出层属性 [PopoverProps](/components/other/popover#popover-props)"
   },
   "s-upload/change": {
-    "description": "上传文件变化时"
+    "description": "文件变化时"
   },
   "s-upload/error": {
-    "description": "上传文件错误时"
+    "description": "文件错误时"
   },
   "s-upload/success": {
-    "description": "上传文件成功时"
+    "description": "文件成功时"
   },
   "s-upload/progress": {
-    "description": "上传文件进度时"
+    "description": "文件进度时"
   },
   "s-upload/exceed": {
-    "description": "上传文件数量超过限制时"
+    "description": "文件数量超过限制时"
+  },
+  "s-upload/preview": {
+    "description": "文件预览时"
   },
   "s-upload/remove": {
-    "description": "上传文件移除时"
+    "description": "文件移除时"
   },
   "s-upload/multiple": {
     "description": "是否支持多选",
     "type": "boolean"
   },
   "s-upload/headers": {
-    "description": "上传文件的请求头"
+    "description": "请求头"
   },
   "s-upload/data": {
-    "description": "上传文件的请求体"
+    "description": "请求体"
   },
   "s-upload/action": {
-    "description": "上传文件的请求地址",
+    "description": "请求地址",
     "type": "string"
   },
   "s-upload/autoUpload": {
@@ -2745,12 +2748,16 @@
     "description": "是否显示上传列表",
     "type": "boolean"
   },
+  "s-upload/picture": {
+    "description": "是否显示图片墙",
+    "type": "boolean"
+  },
   "s-upload/accept": {
-    "description": "上传文件的类型",
+    "description": "文件的类型",
     "type": "string"
   },
   "s-upload/limit": {
-    "description": "上传文件的数量限制",
+    "description": "数量限制",
     "type": "number"
   },
   "s-upload/showRetry": {
@@ -2765,9 +2772,16 @@
     "description": "是否显示上传按钮",
     "type": "boolean"
   },
+  "s-upload/disabled": {
+    "description": "是否禁用",
+    "type": "boolean"
+  },
   "s-upload/beforeUpload": {
     "description": "上传前的回调函数"
   },
+  "s-upload/afterSuccess": {
+    "description": "上传成功后从响应中提取 URL，返回的 URL 会合并到 modelValue"
+  },
   "s-waterfall/data": {
     "description": "列表数据"
   },

package/dist/json/vetur-tags.json

@@ -1126,6 +1126,7 @@
       "success",
       "progress",
       "exceed",
+      "preview",
       "remove",
       "multiple",
       "headers",
@@ -1134,12 +1135,15 @@
       "autoUpload",
       "drag",
       "showList",
+      "picture",
       "accept",
       "limit",
       "showRetry",
       "showCancel",
       "showUpload",
-      "beforeUpload"
+      "disabled",
+      "beforeUpload",
+      "afterSuccess"
     ]
   },
   "s-waterfall": {

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "savor-ui",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -6925,7 +6925,7 @@
             },
             {
               "name": "headers",
-              "description": "上传文件的请求头",
+              "description": "请求头",
               "value": {
                 "type": "Headers",
                 "kind": "expression"
@@ -6933,7 +6933,7 @@
             },
             {
               "name": "data",
-              "description": "上传文件的请求体",
+              "description": "请求体",
               "value": {
                 "type": "Record<string, any>",
                 "kind": "expression"
@@ -6941,7 +6941,7 @@
             },
             {
               "name": "action",
-              "description": "上传文件的请求地址",
+              "description": "请求地址",
               "value": {
                 "type": "string",
                 "kind": "expression"
@@ -6971,9 +6971,17 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "picture",
+              "description": "是否显示图片墙",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "accept",
-              "description": "上传文件的类型",
+              "description": "文件的类型",
               "value": {
                 "type": "string",
                 "kind": "expression"
@@ -6981,7 +6989,7 @@
             },
             {
               "name": "limit",
-              "description": "上传文件的数量限制",
+              "description": "数量限制",
               "value": {
                 "type": "number",
                 "kind": "expression"
@@ -7011,6 +7019,14 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "disabled",
+              "description": "是否禁用",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "beforeUpload",
               "description": "上传前的回调函数",
@@ -7018,32 +7034,44 @@
                 "type": "(file: UploadFile) => Promise<any>",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "afterSuccess",
+              "description": "上传成功后从响应中提取 URL，返回的 URL 会合并到 modelValue",
+              "value": {
+                "type": "(file: UploadFile, response: any) => string",
+                "kind": "expression"
+              }
             }
           ],
           "events": [
             {
               "name": "change",
-              "description": "上传文件变化时"
+              "description": "文件变化时"
             },
             {
               "name": "error",
-              "description": "上传文件错误时"
+              "description": "文件错误时"
             },
             {
               "name": "success",
-              "description": "上传文件成功时"
+              "description": "文件成功时"
             },
             {
               "name": "progress",
-              "description": "上传文件进度时"
+              "description": "文件进度时"
             },
             {
               "name": "exceed",
-              "description": "上传文件数量超过限制时"
+              "description": "文件数量超过限制时"
+            },
+            {
+              "name": "preview",
+              "description": "文件预览时"
             },
             {
               "name": "remove",
-              "description": "上传文件移除时"
+              "description": "文件移除时"
             }
           ],
           "slots": [
@@ -7054,6 +7082,10 @@
             {
               "name": "drag",
               "description": "拖拽区域"
+            },
+            {
+              "name": "trigger",
+              "description": "照片墙触发块"
             }
           ]
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "savor-ui",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "description": "A Vue3 Components Library",
   "keywords": [
     "component library",