菜单目录优化

zyplayer-doc-ui/wiki-ui/src/components/single/MessagePrompt.js

@@ -0,0 +1,41 @@
+import { createVNode, render } from "vue";
+import PromptDialog from "./PromptDialog.vue";
+
+/**
+ * 生成一个带输入框的弹窗
+ * @author zyplayer-doc
+ * @date 2024-12-08
+ */
+let promise = null;
+function getInstance(config) {
+	if (promise) {
+		try {
+			promise.close();
+		} catch (error) {}
+	}
+	const div = document.createElement("div");
+	const conf = Object.assign({cancelText: '取消', okText: '确定'}, config);
+	const close = () => {
+		try {
+			document.body.removeChild(div);
+			promise.reject();
+			promise = null;
+		} catch (error) {}
+	};
+	conf.close = close;
+	conf.ok = (value) => {
+		promise.resolve(value);
+	};
+	const node = createVNode(PromptDialog, conf);
+	render(node, div);
+	document.body.appendChild(div);
+	return new Promise((resolve, reject) => {
+		promise = {resolve, reject, close};
+	});
+}
+const MessagePrompt = (opts) => {
+	return getInstance(opts);
+};
+
+export default MessagePrompt;
+

zyplayer-doc-ui/wiki-ui/src/components/single/PromptDialog.vue

@@ -0,0 +1,80 @@
+<template>
+	<!--通用输入弹窗-->
+	<a-modal :title="title" v-model:open="editDialogVisible" :destroyOnClose="true" width="420px" class="message-prompt-dialog">
+		<a-form layout="vertical" :model="inputForm" :rules="inputFormRules" ref="inputFormRef" @submit.prevent>
+			<a-form-item :label="label" name="data">
+				<a-input ref="formDataInput" v-model:value="inputForm.data" @keyup.enter.native="editOk" :placeholder="placeholder"></a-input>
+			</a-form-item>
+		</a-form>
+		<template #footer>
+			<a-button @click="editCancel">{{cancelText}}</a-button>
+			<a-button type="primary" @click="editOk">{{okText}}</a-button>
+		</template>
+	</a-modal>
+</template>
+
+<script setup>
+import {Modal as AModal, Button as AButton, Form as AForm, FormItem as AFormItem, Input as AInput} from 'ant-design-vue';
+import {onBeforeUnmount, ref, shallowRef, watch, onMounted, nextTick, useAttrs, defineProps, defineEmits, defineExpose} from 'vue';
+
+const props = defineProps({
+	cancelText: String,
+	okText: String,
+	title: String,
+	label: String,
+	placeholder: String,
+	value: String,
+	validator: Function,
+	ok: Function,
+	close: Function,
+	rules: {type: Object, default: {}}
+});
+onMounted(() => {
+	setTimeout(() => {
+		formDataInput.value.focus();
+		inputForm.value.data = props.value || '';
+	}, 100);
+});
+let editDialogVisible = ref(true);
+watch(editDialogVisible, () => {
+	if (!editDialogVisible.value) {
+		setTimeout(() => {
+			props.close && props.close();
+		}, 300);
+	}
+});
+let inputForm = ref({data: ''});
+let inputFormRef = ref();
+let formDataInput = ref();
+let inputFormRules = ref({
+	data: [{
+		trigger: 'blur',
+		validator: (rule, value) => {
+			if (props.validator) {
+				let res = props.validator(value);
+				if (res !== true) {
+					return Promise.reject(res);
+				}
+			}
+			return Promise.resolve();
+		}
+	}],
+});
+const editCancel = () => {
+	editDialogVisible.value = false;
+}
+const editOk = () => {
+	inputFormRef.value.validate().then(() => {
+		if (props.ok) {
+			props.ok(inputForm.value.data);
+		}
+		editDialogVisible.value = false;
+	}).catch(() => {
+	});
+}
+</script>
+
+<style lang="scss">
+.message-prompt-dialog {
+}
+</style>