✏️ 完善 showConfirm 类型

This commit is contained in:
BTMuli
2023-10-13 22:45:45 +08:00
parent c8c157852f
commit 980b420eb1
5 changed files with 71 additions and 22 deletions

View File

@@ -4,12 +4,26 @@
* @since Beta v0.3.3
*/
import { h, render, type VNode } from "vue";
import { h, render } from "vue";
import type { ComponentInternalInstance, VNode } from "vue";
import confirm from "./confirm.vue";
const confirmId = "tg-func-confirm";
/**
* @description 自定义 confirm 组件
* @since Beta v0.3.3
* @extends ComponentInternalInstance
* @property {Function} exposeProxy.displayBox 显示 confirm
* @return ConfirmInstance
*/
interface ConfirmInstance extends ComponentInternalInstance {
exposeProxy: {
displayBox: typeof TGApp.Component.Confirm.displayBox;
};
}
const renderBox = (props: TGApp.Component.Confirm.Params): VNode => {
const container = document.createElement("div");
container.id = confirmId;
@@ -21,14 +35,17 @@ const renderBox = (props: TGApp.Component.Confirm.Params): VNode => {
let confirmInstance: VNode;
const showConfirm = async (props: TGApp.Component.Confirm.Params): Promise<string | boolean> => {
async function showConfirm(props: TGApp.Component.Confirm.ParamsConfirm): Promise<boolean>;
async function showConfirm(props: TGApp.Component.Confirm.ParamsInput): Promise<string>;
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean>;
async function showConfirm(props: TGApp.Component.Confirm.Params): Promise<string | boolean> {
if (confirmInstance !== undefined) {
const boxVue = confirmInstance.component;
return boxVue?.exposeProxy?.displayBox(props);
const boxVue = <ConfirmInstance>confirmInstance.component;
return boxVue.exposeProxy.displayBox(props);
} else {
confirmInstance = renderBox(props);
return await showConfirm(props);
}
};
}
export default showConfirm;

View File

@@ -34,17 +34,9 @@
</template>
<script lang="ts" setup>
// vue
import { onMounted, reactive, ref, watch } from "vue";
interface ConfirmProps {
title: string;
text?: string;
mode?: "confirm" | "input";
otcancel?: boolean;
}
const props = withDefaults(defineProps<ConfirmProps>(), {
const props = withDefaults(defineProps<TGApp.Component.Confirm.Params>(), {
title: "",
text: "",
mode: "confirm",

View File

@@ -370,7 +370,7 @@ async function deleteGacha(): Promise<void> {
text: `UID${uidCur.value},共 ${gachaListCur.value.length} 条数据`,
});
}
if (secondConfirm === false) {
if (!secondConfirm) {
showSnackbar({
color: "grey",
text: "已取消祈愿数据删除",

View File

@@ -353,7 +353,7 @@ async function handleImportOuter(app: string): Promise<void> {
title: "是否导入祈愿数据?",
text: `来源APP${app}`,
});
if (confirm === true) {
if (confirm) {
// 读取 剪贴板
const clipboard = await window.navigator.clipboard.readText();
let data: TGApp.Plugins.UIAF.Achievement[];

View File

@@ -1,25 +1,65 @@
/**
* @file types Component Confirm.d.ts
* @description Component Confirm 类型声明文件
* @author BTMuli <bt-muli@outlook.com>
* @since Alpha v0.2.3
* @since Beta v0.3.3
*/
declare namespace TGApp.Component.Confirm {
/**
* @description Confirm 参数
* @interface Params
* @since Alpha v0.2.3
* @interface ParamsBase
* @since Beta v0.3.3
* @property {string} title 标题
* @property {string} text 文本
* @property {string} mode 模式 // normal: 正常(默认),input: 输入框
* @property {boolean} otcancel 点击外部取消 // true: 取消(默认),false: 不取消
* @return Params
* @return ParamsBase
*/
export interface Params {
interface ParamsBase {
title: string;
text?: string;
mode?: "confirm" | "input";
otcancel?: boolean;
}
/**
* @description Confirm 参数- confirm mode
* @interface ParamsConfirm
* @since Beta v0.3.3
* @extends ParamsBase
* @property {"confirm"|undefined} mode
* @return ParamsConfirm
*/
interface ParamsConfirm extends ParamsBase {
mode?: "confirm";
}
/**
* @description Confirm 参数 - input mode
* @interface ParamsInput
* @since Beta v0.3.3
* @extends ParamsBase
* @property {"input"} mode
* @return ParamsInput
*/
interface ParamsInput extends ParamsBase {
mode: "input";
}
/**
* @description Confirm 参数
* @since Beta v0.3.3
* @type Params
* @return Params
*/
type Params = ParamsConfirm | ParamsInput;
/**
* @description Confirm 方法 - displayBox
* @since Beta v0.3.3
* @function displayBox
* @param {Params} props
* @return string | boolean
*/
function displayBox(props: Params): boolean | string;
}