Initial project

2025-07-08 16:28:40 +08:00
parent 03cf3638d7
commit fb1438c393
44 changed files with 13002 additions and 129 deletions
@@ -0,0 +1,168 @@
+<template>
+	<t-form class="tui-comment-reply-form">
+		<t-form-item label="昵称" name="nick">
+			<t-input
+				ref="nickRef"
+				class="nick"
+				v-model="formData.data.senderNick"
+				placeholder="昵称"
+				:disabled="userStore.isLogged()"
+			/>
+			<span v-if="replyToNick" class="gray selectable clip-text" v-text="`&nbsp;回复 ${replyToNick}`"></span>
+		</t-form-item>
+		<t-form-item label="评论" name="content">
+			<markdown-editor ref="contentRef" v-model:data="formData.data.content" />
+		</t-form-item>
+		<t-form-item label="验证码" name="captcha">
+			<div class="captcha-box">
+				<div>
+					<t-input class="captcha" v-model="formData.captcha" placeholder="" />
+					<captcha
+						ref="captchaRef"
+						class="captcha-img"
+						:api="CommonAPI.getCaptchaAPI()"
+						:width="90"
+						:height="28"
+						:from="CaptchaFrom.COMMENT_REPLY"
+					/>
+				</div>
+				<div>
+					<t-button
+						class="submit"
+						type="submit"
+						:loading="doSubmitting"
+						:disabled="doSubmitting"
+						@click="doSubmit"
+					>提交</t-button>
+					<t-button theme="default" @click="onCancel">取消</t-button>
+				</div>
+			</div>
+		</t-form-item>
+	</t-form>
+</template>
+
+<script lang="ts" setup>
+import {
+	Captcha,
+	CaptchaData,
+	CaptchaFrom,
+	CommentAPI,
+	CommentReply,
+	CommonAPI,
+	MarkdownEditor,
+	Scroller,
+	userStore
+} from "timi-web";
+import { Emits, useHandler } from "~/components/comment/form/reply/emits";
+
+defineOptions({
+	name: "CommentReplyForm"
+});
+
+const emits = defineEmits<Emits>();
+const { onCancel, onSubmit } = useHandler(emits);
+
+const props = withDefaults(defineProps<{
+	commentId: number,
+	replyId?: number,
+	replyToNick?: string,
+}>(), {});
+const { commentId, replyId, replyToNick } = toRefs(props);
+
+const doSubmitting = ref(false);
+const nickRef = ref();
+const contentRef = ref();
+
+const formData = reactive<CaptchaData<CommentReply>>({
+	from: CaptchaFrom.COMMENT_REPLY,
+	captcha: "",
+	data: {
+		commentId: commentId.value,
+		replyId: replyId.value,
+		senderNick: "",
+		content: ""
+	}
+});
+
+/** 提交回复 */
+async function doSubmit() {
+	doSubmitting.value = true;
+
+	formData.data.commentId = commentId.value;
+	formData.data.replyId = replyId.value;
+	const loginUser = userStore.loginUser;
+	if (userStore.isLogged() && loginUser.user) {
+		formData.data.senderNick = loginUser.user.name;
+		formData.data.senderId = loginUser.user.id;
+	}
+	await CommentAPI.createReply(formData);
+	formData.captcha = "";
+	await onSubmit(formData.data);
+
+	doSubmitting.value = false;
+}
+
+async function focus() {
+	await nextTick();
+	let focusEl: HTMLElement;
+	if (userStore.isLogged()) {
+		focusEl = nickRef.value[0].textArea;
+	} else {
+		focusEl = contentRef.value[0].inputRef;
+	}
+	focusEl.focus();
+	Scroller.toElement(focusEl);
+}
+
+// 登录用户
+const updateNick = () => formData.data.senderNick = userStore.loginUser?.user?.name || "";
+watch(userStore.loginUser, updateNick);
+onMounted(updateNick);
+
+defineExpose({
+	focus
+});
+</script>
+
+<style lang="less" scoped>
+.tui-comment-reply-form {
+	padding: 1rem 1rem 1rem 0;
+
+	.nick {
+		width: 12rem;
+	}
+
+	.captcha-box {
+		display: flex;
+		flex-wrap: wrap;
+
+		div {
+			display: flex;
+		}
+
+		.captcha {
+			width: 6rem;
+		}
+
+		.captcha-img {
+			margin: 0 1rem;
+		}
+
+		.submit {
+			margin-right: 1rem;
+		}
+	}
+}
+
+@media screen and (max-width: 650px) {
+	.tui-comment-reply-form {
+
+		.captcha-box {
+
+			> div:first-child {
+				margin-bottom: 1rem;
+			}
+		}
+	}
+}
+</style>