refactor(components): Notify 下的所有通知现在都返回 Promise 对象

Author: caixw

apps/docs/src/components/demo/notify/api.zh-Hans.json

@@ -59,7 +59,7 @@
 				"name": "duration",
 				"summary": "持续时间，单位毫秒。\n\n",
 				"type": "number | undefined",
-				"reactive": true
+				"readonly": true
 			},
 			{
 				"name": "onAccept",
@@ -113,7 +113,7 @@
 		"kind": "function",
 		"name": "Notify.notify",
 		"summary": "发送一条通知给用户\n\n",
-		"type": "declare function notify(title: string, o?: NotifyOptions): Promise<void>",
+		"type": "declare function notify(title: string, o?: NotifyOptions): Promise<boolean>",
 		"params": [
 			{
 				"name": "title",
@@ -127,15 +127,15 @@
 			}
 		],
 		"return": {
-			"type": "Promise<void>"
+			"type": "Promise<boolean>"
 		},
 		"pkg": "@cmfx/components"
 	},
 	{
 		"kind": "function",
 		"name": "Notify.info",
 		"summary": "`notify`\n的快捷方式，用于显示普通信息。\n\n",
-		"type": "declare function info(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void>",
+		"type": "declare function info(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean>",
 		"params": [
 			{
 				"name": "title",
@@ -147,15 +147,15 @@
 			}
 		],
 		"return": {
-			"type": "Promise<void>"
+			"type": "Promise<boolean>"
 		},
 		"pkg": "@cmfx/components"
 	},
 	{
 		"kind": "function",
 		"name": "Notify.warning",
 		"summary": "`notify`\n的快捷方式，用于显示警告信息。\n\n",
-		"type": "declare function warning(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void>",
+		"type": "declare function warning(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean>",
 		"params": [
 			{
 				"name": "title",
@@ -167,15 +167,15 @@
 			}
 		],
 		"return": {
-			"type": "Promise<void>"
+			"type": "Promise<boolean>"
 		},
 		"pkg": "@cmfx/components"
 	},
 	{
 		"kind": "function",
 		"name": "Notify.success",
 		"summary": "`notify`\n的快捷方式，用于显示成功信息。\n\n",
-		"type": "declare function success(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void>",
+		"type": "declare function success(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean>",
 		"params": [
 			{
 				"name": "title",
@@ -187,15 +187,15 @@
 			}
 		],
 		"return": {
-			"type": "Promise<void>"
+			"type": "Promise<boolean>"
 		},
 		"pkg": "@cmfx/components"
 	},
 	{
 		"kind": "function",
 		"name": "Notify.error",
 		"summary": "`notify`\n的快捷方式，用于显示错误信息。\n\n",
-		"type": "declare function error(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void>",
+		"type": "declare function error(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean>",
 		"params": [
 			{
 				"name": "title",
@@ -207,7 +207,7 @@
 			}
 		],
 		"return": {
-			"type": "Promise<void>"
+			"type": "Promise<boolean>"
 		},
 		"pkg": "@cmfx/components"
 	},

apps/docs/src/components/demo/notify/notify.tsx

@@ -4,26 +4,41 @@
 
 import { Alert, Button, Checkbox, Choice, InputNumber, InputText, Notify } from '@cmfx/components';
 import { sleep } from '@cmfx/core';
-import { createSignal, type JSX } from 'solid-js';
+import { createMemo, createSignal, type JSX } from 'solid-js';
 
 export default function (): JSX.Element {
 	const [typ, setTyp] = createSignal<Alert.Type>('success');
 	const [pos, setPos] = createSignal<Notify.Position>('top');
 	const [timeout, setTimeout] = createSignal(5000);
 	const [title, setTitle] = createSignal('title');
-	const [accept, setAccept] = createSignal('accept');
+	const [accept, setAccept] = createSignal(true);
+	const [cancel, setCancel] = createSignal(true);
 	const [body, setBody] = createSignal('');
 	const [bodyType, setBodyType] = createSignal<'empty' | 'line' | 'multiple'>('empty');
 
+	const actions = createMemo(() => {
+		const list: Notify.Param['actions'] = [];
+		const a = accept();
+		const c = cancel();
+
+		if (a) {
+			list.push('accept');
+		}
+		if (c) {
+			list.push('cancel');
+		}
+		return list;
+	});
 	const click = async (): Promise<void> => {
-		await Notify.notify(title(), {
+		const ret = await Notify.notify(title(), {
 			body: body(),
 			type: typ(),
 			duration: timeout(),
 			system: false,
 			pos: pos(),
-			accept: accept() ? (): Promise<boolean | undefined> => Promise.resolve(false) : undefined,
+			actions: actions(),
 		});
+		console.log(ret);
 	};
 
 	return (
@@ -74,7 +89,8 @@ export default function (): JSX.Element {
 				<InputNumber step={500} placeholder="timeout" value={timeout()} onChange={setTimeout} />
 				<InputText placeholder="title" value={title()} onChange={setTitle} />
 				<InputText placeholder="body" value={body()} onChange={setBody} />
-				<Checkbox label="accept" onChange={setAccept} />
+				<Checkbox label="accept" onChange={setAccept} checked={accept()} />
+				<Checkbox label="cancel" onChange={setCancel} checked={cancel()} />
 				<Button palette="primary" onclick={click}>
 					notify
 				</Button>

apps/docs/src/components/demo/upload/api.zh-Hans.json

@@ -240,16 +240,16 @@
 				"type": "boolean | undefined",
 				"reactive": true
 			},
-			{
-				"name": "accept",
-				"summary": "支持的文件列表，同 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/accept，但改为数组类型。\n\n",
-				"type": "string[] | undefined"
-			},
 			{
 				"name": "fieldName",
 				"summary": "上传文件在表单中的名称\n\n",
 				"type": "string"
 			},
+			{
+				"name": "accept",
+				"summary": "支持的文件列表，同 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/accept，但改为数组类型。\n\n",
+				"type": "string[] | undefined"
+			},
 			{
 				"name": "upload",
 				"summary": "执行上传操作\n\n",

packages/components/src/notify/message/message.tsx

@@ -126,7 +126,7 @@ export function Message(props: MessageProps): JSX.Element {
 		rootRef.remove();
 	};
 
-	const close = async () => {
+	const cancel = async () => {
 		if (typeof props.onCancel === 'function') {
 			await props.onCancel();
 		}
@@ -148,7 +148,7 @@ export function Message(props: MessageProps): JSX.Element {
 				const p = ((timeout - t) / timeout) * 100;
 				rootRef.style.background = `linear-gradient(to right, var(--palette-bg) 0% ${p}%, var(--palette-bg-low) ${p}% 100%)`;
 				if (t <= 0) {
-					await remove();
+					await cancel();
 				}
 			});
 			timer.start();
@@ -194,7 +194,7 @@ export function Message(props: MessageProps): JSX.Element {
 				if (props.ref) {
 					props.ref({
 						root: () => el,
-						cancel: close,
+						cancel,
 						accept,
 					});
 				}
@@ -227,7 +227,7 @@ export function Message(props: MessageProps): JSX.Element {
 					<Show when={props.onCancel || props.onAccept}>
 						<div class={styles.actions}>
 							<Show when={props.onCancel}>
-								<Button square kind="fill" onclick={close} class={styles.btn} palette="error">
+								<Button square kind="fill" onclick={cancel} class={styles.btn} palette="error">
 									<IconClose />
 								</Button>
 							</Show>

packages/components/src/notify/notify/notify.tsx

@@ -11,6 +11,7 @@ import type { MountProps } from '@components/base';
 import { useOptions } from '@components/context';
 import { type NotifyPosition, notifyPositions } from '@components/context/options/options';
 import { Message, type MessageProps, type MessageType } from '@components/notify/message';
+import { createDeferred } from './promise';
 import styles from './style.module.css';
 
 let notifyInst: typeof notify;
@@ -45,48 +46,39 @@ export interface NotifyOptions {
 	pos?: NotifyPosition;
 
 	/**
-	 * 点击确认按钮时触发的回调
+	 * 显示的操作按钮
 	 *
-	 * @remarks
-	 * 只有指定该值，才会显示确定按钮。该操作会关闭整个消息框，但是返回 true 可以取消关闭通知框。
+	 * @reactive
 	 */
-	accept?: MessageProps['onAccept'];
-
-	/**
-	 * 点击取消按钮时触发的回调
-	 *
-	 * @remarks
-	 * 只有指定该值，才会显示取消按钮。该操作会关闭整个消息框，但是返回 true 可以取消关闭通知框。
-	 */
-	cancel?: MessageProps['onCancel'];
+	actions?: Array<'accept' | 'cancel'>;
 }
 
 /**
  * {@link notify} 的快捷方式，用于显示成功信息。
  */
-export async function success(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void> {
-	await notify(title, o ? { ...o, type: 'success' } : { type: 'success' });
+export async function success(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean> {
+	return await notify(title, o ? { ...o, type: 'success' } : { type: 'success' });
 }
 
 /**
  * {@link notify} 的快捷方式，用于显示普通信息。
  */
-export async function info(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void> {
-	await notify(title, o ? { ...o, type: 'info' } : { type: 'info' });
+export async function info(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean> {
+	return await notify(title, o ? { ...o, type: 'info' } : { type: 'info' });
 }
 
 /**
  * {@link notify} 的快捷方式，用于显示警告信息。
  */
-export async function warning(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void> {
-	await notify(title, o ? { ...o, type: 'warning' } : { type: 'warning' });
+export async function warning(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean> {
+	return await notify(title, o ? { ...o, type: 'warning' } : { type: 'warning' });
 }
 
 /**
  * {@link notify} 的快捷方式，用于显示错误信息。
  */
-export async function error(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<void> {
-	await notify(title, o ? { ...o, type: 'error' } : { type: 'error' });
+export async function error(title: string, o?: Omit<NotifyOptions, 'type'>): Promise<boolean> {
+	return await notify(title, o ? { ...o, type: 'error' } : { type: 'error' });
 }
 
 /**
@@ -95,8 +87,8 @@ export async function error(title: string, o?: Omit<NotifyOptions, 'type'>): Pro
  * @param title - 通知标题；
  * @param o - 其他选项；
  */
-export async function notify(title: string, o?: NotifyOptions): Promise<void> {
-	await notifyInst(title, o);
+export async function notify(title: string, o?: NotifyOptions): Promise<boolean> {
+	return await notifyInst(title, o);
 }
 
 /**
@@ -134,24 +126,26 @@ function init(): JSX.Element {
 	let bottomRef: HTMLDivElement;
 	const owner = getOwner();
 
-	notifyInst = async (title: string, o?: NotifyOptions): Promise<void> => {
+	notifyInst = async (title: string, o?: NotifyOptions): Promise<boolean> => {
 		if (o?.system && document.visibilityState === 'hidden') {
 			const n = await system(title, { body: o?.body });
 
 			if (o?.duration && n) {
 				await sleep(o.duration);
 				n.close();
 			}
-			return;
+			return new Promise<boolean>(resolve => resolve(false));
 		}
 
+		const [p, resolve] = createDeferred<boolean>();
+
 		const props: MessageProps = {
 			title: title,
 			body: o?.body,
 			type: o?.type,
 			duration: o?.duration ?? opt.getStays(),
-			onAccept: o?.accept,
-			onCancel: o?.cancel,
+			onAccept: o?.actions?.includes('accept') ? async () => resolve(true) : undefined,
+			onCancel: o?.actions?.includes('cancel') ? async () => resolve(false) : undefined,
 		};
 
 		const pos = o?.pos ?? opt.getNotifyPosition();
@@ -162,6 +156,8 @@ function init(): JSX.Element {
 			case 'bottom':
 				runWithOwner(owner, () => render(() => <Message {...props} />, bottomRef));
 		}
+
+		return p;
 	};
 
 	systemInst = async (title: string, o?: NotificationOptions): Promise<Notification | undefined> => {

packages/components/src/notify/notify/promise.ts

@@ -0,0 +1,20 @@
+// SPDX-FileCopyrightText: 2026 caixw
+//
+// SPDX-License-Identifier: MIT
+
+type Resolve<T> = (value: T) => void;
+
+// biome-ignore lint/suspicious/noExplicitAny: Promise.reject
+type Reject = (reason: any) => void;
+
+export function createDeferred<T>(): [Promise<T>, Resolve<T>, Reject] {
+	let resolve!: Reject;
+	let reject!: Reject;
+
+	const promise = new Promise<T>((res, rej) => {
+		resolve = res;
+		reject = rej;
+	});
+
+	return [promise, resolve, reject];
+}