|
|
@@ -1,23 +1,24 @@
|
|
|
-# 全局提示与输入调用规范(window.fmode.alert / window.fmode.input)
|
|
|
+# 全局提示、确认与输入调用规范(window.fmode.alert / window.fmode.confirm / window.fmode.input)
|
|
|
|
|
|
-本文定义统一的 UI 提示与输入接口,避免在各页面中分散使用浏览器 `alert()` 或事件派发。通过在 `app.ts` 中挂载的 `window.fmode`,可直接以函数方式调用。
|
|
|
+本文定义统一的 UI 提示、确认与输入接口,避免在各页面中分散使用浏览器 `alert()` / `confirm()` / `prompt()` 或事件派发。通过在 `app.ts` 中挂载的 `window.fmode`,可直接以函数方式调用。
|
|
|
|
|
|
## 总览
|
|
|
-
|
|
|
- `window.fmode.alert(detail)`:信息提示或确认弹窗
|
|
|
+- `window.fmode.confirm(messageOrDetail)`:确认弹窗(等价于 `confirm()`),返回 `boolean`
|
|
|
- `window.fmode.input(detail)`:输入弹窗(含 `inputs`)
|
|
|
- - 简化输入用法(与 `prompt()` 等价):`await window.fmode.input(message: string, defaultValue?: string)` 返回输入的字符串或 `null`
|
|
|
+ - 简化输入用法(与 `prompt()` 等价):`await window.fmode.input(message: string, defaultValue?: string)` 返回输入的字符串或 `null`
|
|
|
|
|
|
-二者均返回一个结果对象(等同于 Ionic `AlertController.onDidDismiss()` 的结果),可被 `await`。如果在 `detail` 中提供了 `callback(result)`,系统会优先回调并同时派发 `globalAlert:result` 事件,含 `detail.requestId`(可选)。
|
|
|
+`alert/input` 返回一个结果对象(等同于 Ionic `AlertController.onDidDismiss()` 的结果),可被 `await`。`confirm` 返回 `boolean`(`true` 表示点击“确定”,`false` 表示取消)。如果在 `detail` 中提供了 `callback(result)`,系统会优先回调并同时派发 `globalAlert:result` 事件,含 `detail.requestId`(可选)。
|
|
|
|
|
|
## 参数 detail 结构
|
|
|
|
|
|
-通用字段(两者均支持):
|
|
|
-- `header?: string` 标题,默认:`提示` / `请输入`
|
|
|
+通用字段(`alert/input/confirm` 均支持对象用法):
|
|
|
+- `header?: string` 标题,默认:`提示` / `请输入` / `确认`
|
|
|
- `subHeader?: string` 副标题
|
|
|
- `message?: string` 消息正文(支持换行)
|
|
|
- `buttons?: Array<{ text: string; role?: 'cancel'|'confirm'|string }>` 按钮定义,默认:
|
|
|
- alert:`[{ text: '确定', role: 'confirm' }]`
|
|
|
+ - confirm(字符串用法):`[{ text: '取消', role: 'cancel' }, { text: '确定', role: 'confirm' }]`
|
|
|
- input:`[{ text: '取消', role: 'cancel' }, { text: '确定', role: 'confirm' }]`
|
|
|
- `callback?: (result: any) => void` 结果回调函数(优先级高于结果事件派发)
|
|
|
- `requestId?: string` 请求 ID(用于在结果事件中关联)
|
|
|
@@ -27,9 +28,10 @@
|
|
|
|
|
|
## 返回结果
|
|
|
|
|
|
-- Promise 解析为 `result` 对象,包含:
|
|
|
+- `alert/input`:Promise 解析为 `result` 对象,包含:
|
|
|
- `role`: 按钮角色,如 `'confirm' | 'cancel' | string`
|
|
|
- 可能包含输入值(参考 Ionic Alert 返回的 `data` 格式)
|
|
|
+- `confirm`:Promise 解析为 `boolean`
|
|
|
- 若定义了 `detail.callback`,会被调用:`detail.callback(result)`
|
|
|
- 同时派发:`window.dispatchEvent(new CustomEvent('globalAlert:result', { detail: { requestId, result } }))`
|
|
|
|
|
|
@@ -45,7 +47,7 @@ await window.fmode.alert({
|
|
|
});
|
|
|
```
|
|
|
|
|
|
-### 确认交互(await 结果)
|
|
|
+### 确认交互(alert 对象用法返回结果)
|
|
|
|
|
|
```ts
|
|
|
const result = await window.fmode.alert({
|
|
|
@@ -61,6 +63,15 @@ if (result?.role === 'confirm') {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
+### 简化确认用法(confirm 等价)
|
|
|
+
|
|
|
+```ts
|
|
|
+const ok = await window.fmode.confirm('确定要删除该记录吗?');
|
|
|
+if (ok) {
|
|
|
+ // 执行删除
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
### 输入弹窗
|
|
|
|
|
|
```ts
|
|
|
@@ -95,15 +106,15 @@ if (name !== null) {
|
|
|
|
|
|
## 迁移规则
|
|
|
|
|
|
-- 禁止使用浏览器 `alert()`,统一改为 `window.fmode.alert()`
|
|
|
+- 禁止使用浏览器 `alert()` / `confirm()` / `prompt()`,统一改为 `window.fmode.alert/confirm/input`
|
|
|
- 禁止派发 `globalAlert/globalPrompt` 事件,统一改为直接函数调用
|
|
|
- 若需要跨组件监听结果,使用 `requestId` + `globalAlert:result` 事件进行关联
|
|
|
|
|
|
## 实现位置
|
|
|
|
|
|
-- `src/app/app.ts`:挂载 `window.fmode.alert` / `window.fmode.input`,并通过 Ionic `AlertController` 实现 UI 弹窗与结果返回
|
|
|
+- `src/app/app.ts`:挂载 `window.fmode.alert` / `window.fmode.confirm` / `window.fmode.input`,并通过 Ionic `AlertController` 实现 UI 弹窗与结果返回
|
|
|
- 字符串简化用法由 `presentPromptSimple(message, defaultValue?)` 提供,直接返回字符串或 `null`
|
|
|
-- `src/fmode-ng-augmentation.d.ts`:为 `window.fmode` 添加 TypeScript 类型声明
|
|
|
+- `src/fmode-ng-augmentation.d.ts`:为 `window.fmode` 添加 TypeScript 类型声明,包含 `confirm(messageOrDetail): Promise<boolean>`
|
|
|
|
|
|
## 注意事项
|
|
|
|