♻️ 重构弹窗参数

#201

src/components/func/dialog.ts

@@ -1,27 +1,39 @@
 /**
  * dialog 组件封装，函数式调用
- * @since Beta v0.6.3
+ * @since Beta v0.9.1
  */
 
-import { h, render } from "vue";
 import type { ComponentInternalInstance, VNode } from "vue";
+import { h, render } from "vue";
 
 import dialog from "./dialog.vue";
 
 const dialogId = "tg-func-dialog";
 
 export type DialogParams = DialogCheckParams | DialogInputParams;
-export type DialogCheckParams = {
-  mode: "check";
+/** 基础弹窗参数 */
+type DialogBaseParams = {
+  /** 标题 */
   title: string;
+  /** 文本 */
   text?: string;
+  /** 点击外部取消 */
   otcancel?: boolean;
+  /** 确认label */
+  confirmLabel?: string;
+  /** 取消label */
+  cancelLabel?: string;
 };
-export type DialogInputParams = {
+/** 确认弹窗 */
+export type DialogCheckParams = DialogBaseParams & {
+  /** 模式：确认 */
+  mode: "check";
+};
+/** 输入弹窗 */
+export type DialogInputParams = DialogBaseParams & {
+  /** 模式：输入 */
   mode: "input";
-  title: string;
-  text?: string;
-  otcancel?: boolean;
+  /** 默认值 */
   input?: string;
 };
 
@@ -78,6 +90,17 @@ async function showDialogCheck(
   }
 }
 
+async function showDialogCheckFull(opts: DialogBaseParams): Promise<boolean | undefined> {
+  const params: DialogCheckParams = { mode: "check", ...opts };
+  if (dialogInstance !== undefined) {
+    const boxVue = <DialogInstance>dialogInstance.component;
+    return await boxVue.exposeProxy.displayCheckBox(params);
+  } else {
+    dialogInstance = renderBox(params);
+    return await showDialogCheckFull(opts);
+  }
+}
+
 async function showDialogInput(
   title: string,
   text?: string,
@@ -100,10 +123,26 @@ async function showDialogInput(
   }
 }
 
+async function showDialogInputFull(
+  opts: DialogBaseParams,
+  input?: string,
+): Promise<string | false | undefined> {
+  const params: DialogInputParams = { mode: "input", input, ...opts };
+  if (dialogInstance !== undefined) {
+    const boxVue = <DialogInstance>dialogInstance.component;
+    return await boxVue.exposeProxy.displayInputBox(params);
+  } else {
+    dialogInstance = renderBox(params);
+    return await showDialogInputFull(opts);
+  }
+}
+
 const showDialog = {
   _: showDialogFull,
   check: showDialogCheck,
   input: showDialogInput,
+  inputF: showDialogInputFull,
+  checkF: showDialogCheckFull,
 };
 
 export default showDialog;

src/components/func/dialog.vue

@@ -22,8 +22,12 @@
             />
           </div>
           <div class="dialog-btn-box">
-            <button class="dialog-btn no-btn" @click="handleCancel">取消</button>
-            <button class="dialog-btn ok-btn" @click="handleConfirm">确定</button>
+            <button class="dialog-btn no-btn" @click="handleCancel">
+              {{ data.cancelLabel }}
+            </button>
+            <button class="dialog-btn ok-btn" @click="handleConfirm">
+              {{ data.confirmLabel }}
+            </button>
           </div>
         </div>
       </transition>
@@ -35,7 +39,14 @@ import { computed, onMounted, ref, shallowRef, useTemplateRef, watch } from "vue
 
 import type { DialogCheckParams, DialogInputParams, DialogParams } from "./dialog.js";
 
-const defaultProp: DialogParams = { title: "", text: "", mode: "check", otcancel: false };
+const defaultProp: DialogParams = {
+  title: "",
+  text: "",
+  mode: "check",
+  otcancel: false,
+  cancelLabel: "取消",
+  confirmLabel: "确认",
+};
 const props = defineProps<DialogParams>();
 
 // 组件参数
@@ -101,6 +112,8 @@ async function displayCheckBox(params: DialogCheckParams): Promise<boolean | und
     text: params.text ?? "",
     mode: "check",
     otcancel: params.otcancel ?? true,
+    confirmLabel: params.confirmLabel ?? defaultProp.confirmLabel,
+    cancelLabel: params.cancelLabel ?? defaultProp.cancelLabel,
   };
   show.value = true;
   return await new Promise<boolean | undefined>((resolve) => {
@@ -120,6 +133,8 @@ async function displayInputBox(params: DialogInputParams): Promise<string | fals
     text: params.text ?? "",
     mode: "input",
     otcancel: params.otcancel ?? true,
+    confirmLabel: params.confirmLabel ?? defaultProp.confirmLabel,
+    cancelLabel: params.cancelLabel ?? defaultProp.cancelLabel,
   };
   inputDefault.value = params.input ?? "";
   show.value = true;