diff --git a/components/Creation/CreationComments/CreationComments.vue b/components/Creation/CreationComments/CreationComments.vue
index 90db64c9..70001641 100755
--- a/components/Creation/CreationComments/CreationComments.vue
+++ b/components/Creation/CreationComments/CreationComments.vue
@@ -5,17 +5,17 @@
 <script setup lang="ts">
 	const props = withDefaults(defineProps<{
 		/** 评论数目。 */
-		count?: number | string;
-		comments?: Comments200ResponseInner[];
-		videoId?: number;
+		count?: number;
+		comments?: GetVideoCommentByKvidResponseDto["videoCommentList"];
+		videoId: number;
 	}>(), {
 		count: 0,
 		comments: () => [],
-		videoId: undefined,
 	});
 
-	const downvote = ref(0), pinned = ref(false);
+	const pinned = ref(false);
 	const search = ref("");
+	const pageCount = computed(() => Math.floor(props.count / 20) + 1);
 </script>
 
 <template>
@@ -28,27 +28,29 @@
 			</div>
 			<div class="right">
 				<TextBox v-model="search" :placeholder="t.search" icon="search" />
-				<Pagination :current="1" :pages="99" :displayPageCount="7" />
+				<Pagination :current="1" :pages="pageCount" :displayPageCount="7" />
 				<SoftButton icon="deletion_history" />
 			</div>
 		</div>
 		<div class="items">
 			<CreationCommentsItem
 				v-for="comment in comments"
-				:key="comment.id"
+				:key="comment._id"
 				v-model:upvote="comment.upvoteCount"
-				v-model:downvote="downvote"
-				v-model:isUpvoted="comment.userHasUpvoted"
-				v-model:isDownvoted="comment.userHasDownvoted"
+				v-model:downvote="comment.downvoteCount"
+				v-model:isUpvoted="comment.isUpvote"
+				v-model:isDownvoted="comment.isDownvote"
 				v-model:pinned="pinned"
-				:index="comment.id"
-				:username="comment.fullname"
-				:avatar="comment.profilePictureUrl"
-				:date="new Date(comment.created!)"
+				:commentId="comment._id"
+				:videoId="videoId"
+				:index="comment.commentIndex"
+				:username="comment.userInfo?.username"
+				:avatar="comment.userInfo?.avatar"
+				:date="new Date(comment.editDateTime)"
 				:upvote_score="comment.upvoteCount"
 			>
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div v-html="comment.content"></div>
+				<div v-html="comment.text"></div>
 			</CreationCommentsItem>
 		</div>
 	</Comp>
diff --git a/components/Creation/CreationComments/CreationCommentsItem.vue b/components/Creation/CreationComments/CreationCommentsItem.vue
index 52a67e70..63e10926 100755
--- a/components/Creation/CreationComments/CreationCommentsItem.vue
+++ b/components/Creation/CreationComments/CreationCommentsItem.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 	const props = withDefaults(defineProps<{
+		/** 评论唯一 ID */
+		commentId: string;
+		/** 评论所在的视频的 ID */
+		videoId: number;
 		/** 评论发布者头像网址。 */
 		avatar?: string;
 		/** 评论发布者昵称。 */
@@ -32,12 +36,16 @@
 	const pinned = defineModel("pinned", { default: false });
 	const unpinnedCaption = computed(() => pinned.value ? "unpin" : "pin");
 
+	const voteLock = ref(false);
+
+	const userSelfInfoStore = useSelfUserInfoStore();
+
 	/**
 	 * 点击加分、减分按钮事件。
 	 * @param button - 点击的按钮是加分还是减分。
 	 * @param [noNestingDolls=false] - 禁止套娃，防止递归调用。
 	 */
-	async function onClickVotes(button: "upvote" | "downvote", noNestingDolls: boolean = false) {
+	function onClickVotes(button: "upvote" | "downvote", noNestingDolls: boolean = false) {
 		// const states = { upvote, isUpvoted, downvote, isDownvoted };
 		// const value = states[button], clicked = states[`${button}Clicked`]; // 面向字符串编程。
 		// const another = button === "like" ? "dislike" : "like";
@@ -45,16 +53,130 @@
 		// value.value += gain;
 		// if (isActive && states[`${another}Clicked`].value && !noNestingDolls) onClickUpvote(another, true);
 
-		if (!props.index) return;
-		const api = useApi();
-		const score = button === "upvote" ? 1 : -1;
-		await api.upvote(props.index, score);
-		upvote.value += score;
-		// TODO: We should separate upvote and downvote value!
+		const commentId = props.commentId; // 视频评论 ID
+		const videoId = props.videoId; // 视频 ID
+
+		if (!props.index || !commentId || videoId === undefined || videoId === null) { // 非空验证
+			useToast("出错啦！请刷新页面再试~", "error"); // TODO 使用多语言
+			return;
+		}
+
+		if (voteLock.value) { // 如果请求的"悲观锁"处于锁定状态，则弹出错误提示并停止
+			useToast("操作过于频繁，请稍后再试~", "error"); // TODO 使用多语言
+			return;
+		}
+		
+		if (!userSelfInfoStore.isLogined) { // 如果用户未登录，则不允许点赞/点踩
+			useToast("请登录后再操作~", "error"); // TODO 使用多语言
+			return;
+		}
+
+		if (button === "upvote") // 判断是点赞还是点踩
+			if (isUpvoted.value) // 如果被点赞的视频评论此前已经被点赞，则取消点赞，否则点赞
+				// 取消点赞
+				cancelVideoCommentUpvote(commentId, videoId);
+			else
+				// 点赞
+				emitVideoCommentUpvote(commentId, videoId);
+		else
+			if (isDownvoted.value) // 如果被踩的视频评论此前已经被点踩，则取消点踩，否则点踩
+				// 取消点踩
+				cancelVideoCommentDownvote(commentId, videoId);
+			else
+				// 点踩
+				emitVideoCommentDownvote(commentId, videoId);
+	}
+
+	/**
+	 * 点赞视频评论
+	 * @param commentId 视频评论 ID
+	 * @param videoId 视频 ID
+	 */
+	function emitVideoCommentUpvote(commentId: string, videoId: number) {
+		voteLock.value = true; // 请求锁：锁定
+		const emitVideoCommentUpvoteRequest: EmitVideoCommentUpvoteRequestDto = { id: commentId, videoId };
+		api.videoComment.emitVideoCommentUpvote(emitVideoCommentUpvoteRequest).catch(error => {
+			voteLock.value = false; // 请求锁：释放
+			useToast("点赞失败！", "error"); // TODO 使用多语言
+			console.error("ERROR", "点赞失败！", error);
+		}).finally(() => {
+			voteLock.value = false; // 请求锁：释放
+		});
+
+		isUpvoted.value = true; // 设置点赞 ICON 高亮
+		upvote.value++; // 赞数增加
+		if (isDownvoted.value) { // 如果用户在点赞操作前，已经有点踩，则取消点踩的高亮，并减少点踩数量
+			isDownvoted.value = false;
+			downvote.value--;
+		}
+	}
+
+	/**
+	 * 取消视频评论点赞
+	 * @param commentId 视频评论 ID
+	 * @param videoId 视频 ID
+	 */
+	function cancelVideoCommentUpvote(commentId: string, videoId: number) {
+		voteLock.value = true; // 请求锁：锁定
+		const cancelVideoCommentUpvoteRequest: CancelVideoCommentUpvoteRequestDto = { id: commentId, videoId };
+		api.videoComment.cancelVideoCommentUpvote(cancelVideoCommentUpvoteRequest).catch(error => {
+			voteLock.value = false; // 请求锁：释放
+			useToast("取消点赞失败！", "error"); // TODO 使用多语言
+			console.error("ERROR", "取消点赞失败！", error);
+		}).finally(() => {
+			voteLock.value = false; // 请求锁：释放
+		});
+
+		isUpvoted.value = false; // 取消点赞 ICON 高亮
+		upvote.value--; // 赞数减少
+	}
+
+	/**
+	 * 视频评论点踩
+	 * @param commentId 视频评论 ID
+	 * @param videoId 视频 ID
+	 */
+	function emitVideoCommentDownvote(commentId: string, videoId: number) {
+		voteLock.value = true; // 请求锁：锁定
+		const emitVideoCommentDownvoteRequest: EmitVideoCommentDownvoteRequestDto = { id: commentId, videoId };
+		api.videoComment.emitVideoCommentDownvote(emitVideoCommentDownvoteRequest).catch(error => {
+			voteLock.value = false; // 请求锁：释放
+			useToast("点踩失败！", "error"); // TODO 使用多语言
+			console.error("ERROR", "点踩失败！", error);
+		}).finally(() => {
+			voteLock.value = false; // 请求锁：释放
+		});
+
+		isDownvoted.value = true; // 设置点踩 ICON 高亮
+		downvote.value++; // 踩数增加
+		if (isUpvoted.value) { // 如果用户在点踩操作前，已经有点赞，则取消点赞的高亮，并减少点赞数量
+			upvote.value--;
+			isUpvoted.value = false;
+		}
+	}
+
+	/**
+	 * 取消视频评论点踩
+	 * @param commentId 视频评论 ID
+	 * @param videoId 视频 ID
+	 */
+	function cancelVideoCommentDownvote(commentId: string, videoId: number) {
+		voteLock.value = true; // 请求锁：锁定
+		const cancelVideoCommentDownvoteRequest: CancelVideoCommentDownvoteRequestDto = { id: commentId, videoId };
+		api.videoComment.cancelVideoCommentDownvote(cancelVideoCommentDownvoteRequest).catch(error => {
+			voteLock.value = false; // 请求锁：释放
+			useToast("取消点踩失败！", "error"); // TODO 使用多语言
+			console.error("ERROR", "取消点踩失败！", error);
+		}).finally(() => {
+			voteLock.value = false; // 请求锁：释放
+		});
+
+		isDownvoted.value = false; // 取消点踩 ICON 高亮
+		downvote.value--; // 踩数减少
 	}
 
 	/**
-	 * 删除评论。
+	 * // TODO 删除评论。
 	 * @param commentId - 评论 ID。
 	 */
 	async function deleteComment(commentId: number | undefined) {
@@ -181,7 +303,7 @@
 			cursor: pointer;
 
 			&.active .soft-button {
-				color: c(accent);
+				color: c(accent); // FIXME 看起来这些样式并没有被正确绑定到元素上
 			}
 		}
 
diff --git a/components/TextEditor/TextEditorRtf.vue b/components/TextEditor/TextEditorRtf.vue
index d2dcb6be..6ff32e31 100755
--- a/components/TextEditor/TextEditorRtf.vue
+++ b/components/TextEditor/TextEditorRtf.vue
@@ -7,7 +7,7 @@
 
 	const props = defineProps<{
 		/** 视频 ID。 */
-		videoId?: number;
+		videoId: number;
 	}>();
 
 	type ActiveType = string | boolean;
@@ -87,16 +87,29 @@
 	/**
 	 * sends comment to the backend.
 	 */
-	function sendComment() {
-		const api = useApi();
-		const content = editor.value?.getText() ?? ""; // Get plain text currently to avoid web attack.
-		const utf8Encode = new TextEncoder();
-		const encodedContent = utf8Encode.encode(content) as unknown as string;
-
-		// TODO: video ID
-		api.comment(0, encodedContent, props.videoId!).then(video => {
-			// TODO
-		}).catch(error => console.error(error));
+	async function sendComment() {
+		try {
+			// TODO // WARN 需要对用户输入的文字进行 Base64 编码
+			const content = editor.value?.getText() ?? ""; // Get plain text currently to avoid web attack.
+			const emitVideoCommentRequest: EmitVideoCommentRequestDto = {
+				videoId: props.videoId,
+				text: content,
+			};
+			// TODO 虽然我很想非阻塞地发送评论，但是楼层号必须在评论成功提交给后端后才会获得。emmmm...
+			const emitVideoCommentResult = await api.videoComment.emitVideoComment(emitVideoCommentRequest);
+			const videoComment = emitVideoCommentResult.videoComment;
+			if (emitVideoCommentResult?.success && videoComment) {
+				useEvent("videoComment:emitVideoComment", videoComment);
+				const messageDuration = 5000;
+				useToast("评论发出去咯~", "success", messageDuration); // TODO 使用多语言
+			} else {
+				useToast("发送评论失败！", "error"); // TODO 使用多语言
+				console.error("ERROR", "发送评论失败：请求未成功");
+			}
+		} catch (error) {
+			useToast("发送评论失败！", "error"); // TODO 使用多语言
+			console.error("ERROR", "发送评论失败！", error);
+		}
 	}
 
 	/**
diff --git a/composables/api.ts b/composables/api.ts
index 31702769..e81a4cb1 100644
--- a/composables/api.ts
+++ b/composables/api.ts
@@ -1,7 +1,8 @@
+import * as videoComment from "api/Comment/VideoCommentController";
 import * as danmaku from "api/Danmaku/DanmakuController";
 import * as user from "api/User/UserController";
 import * as video from "api/Video/VideoController";
 
 export default {
-	user, video, danmaku,
+	user, video, danmaku, videoComment,
 };
diff --git a/composables/api/Comment/VideoCommentController.ts b/composables/api/Comment/VideoCommentController.ts
new file mode 100644
index 00000000..8c4f8d63
--- /dev/null
+++ b/composables/api/Comment/VideoCommentController.ts
@@ -0,0 +1,66 @@
+import { DELETE, GET, POST } from "../Common";
+import getCorrectUri from "../Common/getCorrectUri";
+import type { CancelVideoCommentDownvoteRequestDto, CancelVideoCommentUpvoteRequestDto, EmitVideoCommentDownvoteRequestDto, EmitVideoCommentDownvoteResponseDto, EmitVideoCommentRequestDto, EmitVideoCommentResponseDto, EmitVideoCommentUpvoteRequestDto, EmitVideoCommentUpvoteResponseDto, GetVideoCommentByKvidRequestDto, GetVideoCommentByKvidResponseDto } from "./VideoCommentControllerDto";
+
+const BACK_END_URL = getCorrectUri();
+const USER_API_URI = `${BACK_END_URL}/video/comment`;
+
+/**
+ * 用户发送视频评论
+ * @param emitVideoCommentRequest 用户发送的视频评论的请求载荷
+ * @returns 用户发送视频评论的结果
+ */
+export const emitVideoComment = async (emitVideoCommentRequest: EmitVideoCommentRequestDto): Promise<EmitVideoCommentResponseDto> => {
+	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
+	return await POST(`${USER_API_URI}/emit`, emitVideoCommentRequest, { credentials: "include" }) as EmitVideoCommentResponseDto;
+};
+
+/**
+ * 根据 kvid 获取视频评论列表
+ * @param getVideoCommentByKvidRequest 请求视频评论列表的查询参数
+ * @returns 视频的视频评论列表
+ */
+export const getVideoCommentByKvid = async (getVideoCommentByKvidRequest: GetVideoCommentByKvidRequestDto): Promise<GetVideoCommentByKvidResponseDto> => {
+	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
+	return await GET(`${USER_API_URI}?videoId=${getVideoCommentByKvidRequest.videoId}`, { credentials: "include" }) as GetVideoCommentByKvidResponseDto;
+};
+
+/**
+ * 用户为视频评论点赞
+ * @param emitVideoCommentUpvoteRequest 用户为视频评论点赞的请求载荷
+ * @returns 用户为视频评论点赞的结果
+ */
+export const emitVideoCommentUpvote = async (emitVideoCommentUpvoteRequest: EmitVideoCommentUpvoteRequestDto): Promise<EmitVideoCommentUpvoteResponseDto> => {
+	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
+	return await POST(`${USER_API_URI}/upvote`, emitVideoCommentUpvoteRequest, { credentials: "include" }) as EmitVideoCommentUpvoteResponseDto;
+};
+
+/**
+ * 用户为视频评论点踩
+ * @param emitVideoCommentDownvoteRequest 用户为视频评论点踩的请求载荷
+ * @returns 用户为视频评论点踩的结果
+ */
+export const emitVideoCommentDownvote = async (emitVideoCommentDownvoteRequest: EmitVideoCommentDownvoteRequestDto): Promise<EmitVideoCommentDownvoteResponseDto> => {
+	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
+	return await POST(`${USER_API_URI}/downvote`, emitVideoCommentDownvoteRequest, { credentials: "include" }) as EmitVideoCommentDownvoteResponseDto;
+};
+
+/**
+ * 用户取消一个视频评论的点赞
+ * @param cancelVideoCommentUpvoteRequest 用户取消一个视频评论的点赞的请求载荷
+ * @returns 用户取消一个视频评论的点赞的结果
+ */
+export const cancelVideoCommentUpvote = async (cancelVideoCommentUpvoteRequest: CancelVideoCommentUpvoteRequestDto): Promise<EmitVideoCommentUpvoteResponseDto> => {
+	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
+	return await DELETE(`${USER_API_URI}/upvote/cancel`, cancelVideoCommentUpvoteRequest, { credentials: "include" }) as EmitVideoCommentUpvoteResponseDto;
+};
+
+/**
+ * 用户取消一个视频评论的点踩
+ * @param cancelVideoCommentDownvoteRequest 用户取消一个视频评论的点踩的请求载荷
+ * @returns 用户取消一个视频评论的点踩的结果
+ */
+export const cancelVideoCommentDownvote = async (cancelVideoCommentDownvoteRequest: CancelVideoCommentDownvoteRequestDto): Promise<EmitVideoCommentDownvoteResponseDto> => {
+	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
+	return await DELETE(`${USER_API_URI}/downvote/cancel`, cancelVideoCommentDownvoteRequest, { credentials: "include" }) as EmitVideoCommentDownvoteResponseDto;
+};
diff --git a/composables/api/Comment/VideoCommentControllerDto.d.ts b/composables/api/Comment/VideoCommentControllerDto.d.ts
new file mode 100644
index 00000000..f3239e94
--- /dev/null
+++ b/composables/api/Comment/VideoCommentControllerDto.d.ts
@@ -0,0 +1,251 @@
+/**
+ * 基础视频评论数据
+ */
+type BasicVideoCommentDto = {
+	/** KVID 视频 ID */
+	videoId: number;
+	/** 评论正文 */
+	text: string;
+};
+
+/**
+ * 发送视频评论的请求数据
+ */
+export type EmitVideoCommentRequestDto = BasicVideoCommentDto;
+
+/**
+ * 发送视频评论的响应的数据
+ */
+export type EmitVideoCommentResponseDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+	/** 发送成功的话，返回发送时的评论的数据 */
+	videoComment?: VideoCommentResult;
+};
+
+/**
+ * 获取某个用户在对某个视频的评论的点赞情况的参数
+ */
+export type GetVideoCommentUpvotePropsDto = {
+	/** KVID 视频 ID */
+	videoId: number;
+	/** 视频评论点赞者的用户的 UID */
+	uid: number;
+};
+
+/**
+ * 获取某个用户在对某个视频的评论的点赞情况的结果
+ */
+export type GetVideoCommentUpvoteResultDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+	/** 某个用户在对某个视频的评论的点赞情况 */
+	videoCommentUpvoteResult: {
+		/** KVID 视频 ID */
+		videoId: number;
+		/** 评论的ID */
+		commentId: string;
+		/** 评论点赞者的用户的 UID */
+		uid: number;
+		/** 系统专用字段-最后编辑时间 */
+		editDateTime: number;
+	}[];
+};
+
+/**
+ * 获取某个用户在对某个视频的评论的点踩情况的参数
+ */
+export type GetVideoCommentDownvotePropsDto = {
+	/** KVID 视频 ID */
+	videoId: number;
+	/** 视频评论点踩者的用户的 UID */
+	uid: number;
+};
+
+/**
+ * 获取某个用户在对某个视频的评论的点踩情况的结果
+ */
+export type GetVideoCommentDownvoteResultDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+	/** 某个用户在对某个视频的评论的点踩情况 */
+	videoCommentDownvoteResult: {
+		/** KVID 视频 ID */
+		videoId: number;
+		/** 评论的ID */
+		commentId: string;
+		/** 评论点踩者的用户的 UID */
+		uid: number;
+		/** 系统专用字段-最后编辑时间 */
+		editDateTime: number;
+	}[];
+};
+
+/**
+ * 根据 KVID 获取视频评论的请求的参数
+ */
+export type GetVideoCommentByKvidRequestDto = {
+	/** KVID 视频 ID */
+	videoId: number;
+};
+
+type VideoCommentIdDto = {
+	/** 评论的路由 */ /** 如：1.2.3（视频的第一个评论的第二个回复的第三个回复） */
+	commentRoute: string;
+	/** 评论 ID */
+	upvoteCount: string;
+	/** 评论楼层数 */
+	commentIndex: number;
+};
+
+/**
+ * 评论发送者的用户信息
+ */
+type CommentSenderUserInfo = {
+	/** 用户名 */
+	username?: string;
+	/** 用户头像的链接 */
+	avatar?: string;
+	/** 用户背景图片的链接 */
+	userBannerImage?: string;
+	/** 用户的个性签名 */
+	signature?: string;
+	/** 用户的性别，男、女和自定义（字符串） */
+	gender?: string;
+};
+
+/**
+ * 一条请求到视频评论
+ */
+export type VideoCommentResult = {
+	/** MongoDB 生成的唯一 ID */
+	_id: string;
+	/** 评论的路由 */ /** 如：1.2.3（视频的第一个评论的第二个回复的第三个回复） */
+	commentRoute: string;
+	/** KVID 视频 ID */
+	videoId: number;
+	/** 评论发送者的用户的 UID */
+	uid: number;
+	/** 评论发送者的信息，如 用户名、头像 等 */
+	userInfo?: CommentSenderUserInfo;
+	/** 发送评论的时间 */
+	emitTime: number;
+	/** 评论正文 */
+	text: string;
+	/** 是否已点赞 */
+	isUpvote: boolean;
+	/** 是否已点踩 */
+	isDownvote: boolean;
+	/** 评论点赞数 */
+	upvoteCount: number;
+	/** 评论点踩数 */
+	downvoteCount: number;
+	/** 评论楼层数 */
+	commentIndex: number;
+	/** 子评论 */
+	subComments: VideoCommentIdDto[];
+	/** 该评论的下一级子评论数量 */
+	subCommentsCount: number;
+	/** 系统专用字段-最后编辑时间 */
+	editDateTime: number;
+};
+
+/**
+ * 获取视频评论的响应结果
+ */
+export type GetVideoCommentByKvidResponseDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+	/** 视频评论总数量 */
+	videoCommentCount: number;
+	/** 视频评论 */
+	videoCommentList: VideoCommentResult[];
+};
+
+/**
+ * 为视频评论点赞的请求的请求参数
+ */
+export type EmitVideoCommentUpvoteRequestDto = {
+	/** 评论的唯一 ID */
+	id: string;
+	/** KVID 视频 ID */
+	videoId: number;
+};
+
+/**
+* 为视频评论点赞的请求的响应结果
+*/
+export type EmitVideoCommentUpvoteResponseDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+};
+
+/**
+ * 为视频评论点赞的请求的请求参数
+ */
+export type CancelVideoCommentUpvoteRequestDto = {
+	/** 评论的唯一 ID */
+	id: string;
+	/** KVID 视频 ID */
+	videoId: number;
+};
+
+/**
+* 取消视频评论点赞的请求的响应结果
+*/
+export type CancelVideoCommentUpvoteResponseDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+};
+
+/**
+ * 为视频评论点踩的请求的请求参数
+ */
+export type EmitVideoCommentDownvoteRequestDto = {
+	/** 评论的唯一 ID */
+	id: string;
+	/** KVID 视频 ID */
+	videoId: number;
+};
+
+/**
+* 为视频评论点踩的请求的响应结果
+*/
+export type EmitVideoCommentDownvoteResponseDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+};
+
+/**
+ * 为视频评论点踩的请求的请求参数
+ */
+export type CancelVideoCommentDownvoteRequestDto = {
+	/** 评论的唯一 ID */
+	id: string;
+	/** KVID 视频 ID */
+	videoId: number;
+};
+
+/**
+* 取消视频评论点踩的请求的响应结果
+*/
+export type CancelVideoCommentDownvoteResponseDto = {
+	/** 是否请求成功 */
+	success: boolean;
+	/** 附加的文本消息 */
+	message?: string;
+};
diff --git a/composables/api/Common/index.ts b/composables/api/Common/index.ts
index 9a619e8e..5df4b7b7 100644
--- a/composables/api/Common/index.ts
+++ b/composables/api/Common/index.ts
@@ -33,7 +33,7 @@ async function fetchWithTimeout(resource: RequestInfo, options: RequestInit = {}
  * @param timeout 请求超时时间（毫秒），默认：30000ms
  * @returns 请取结果
  */
-export async function get(url: string, requestOptions: RequestObject = {}, headerOptions: HeadersObject = {}, timeout?: number): Promise<unknown> {
+export async function GET(url: string, requestOptions: RequestObject = {}, headerOptions: HeadersObject = {}, timeout?: number): Promise<unknown> {
 	try {
 		const response = await fetchWithTimeout(url, {
 			method: "GET",
@@ -42,7 +42,7 @@ export async function get(url: string, requestOptions: RequestObject = {}, heade
 		}, timeout);
 		return response.json();
 	} catch (error) {
-		console.error("ERROR", `something wrong in 'get', URL: ${url}`, error); // TODO Remove Console Output?
+		console.error("ERROR", `something wrong in 'GET', URL: ${url}`, error); // TODO Remove Console Output?
 		throw error;
 	}
 }
@@ -56,7 +56,7 @@ export async function get(url: string, requestOptions: RequestObject = {}, heade
  * @param timeout 请求超时时间（毫秒），默认：30000ms
  * @returns 请求结果
  */
-export async function post(url: string, body: unknown, requestOptions: RequestObject = {}, headerOptions: HeadersObject = {}, timeout?: number): Promise<unknown> {
+export async function POST(url: string, body: unknown, requestOptions: RequestObject = {}, headerOptions: HeadersObject = {}, timeout?: number): Promise<unknown> {
 	try {
 		const response = await fetchWithTimeout(url, {
 			method: "POST",
@@ -69,7 +69,34 @@ export async function post(url: string, body: unknown, requestOptions: RequestOb
 		}, timeout);
 		return response.json();
 	} catch (error) {
-		console.error("ERROR", `something wrong in 'post', URL: ${url}`, error); // TODO Remove Console Output?
+		console.error("ERROR", `something wrong in 'POST', URL: ${url}`, error); // TODO Remove Console Output?
+		throw error;
+	}
+}
+
+/**
+ * 发送 DELETE 请求
+ * @param url 请求的网址
+ * @param body 请求的 body 内容
+ * @param requestOptions 请求携带的请求标头
+ * @param headerOptions 请求携带的 Header 内容
+ * @param timeout 请求超时时间（毫秒），默认：30000ms
+ * @returns 请求结果
+ */
+export async function DELETE(url: string, body: unknown, requestOptions: RequestObject = {}, headerOptions: HeadersObject = {}, timeout?: number): Promise<unknown> {
+	try {
+		const response = await fetchWithTimeout(url, {
+			method: "DELETE",
+			...requestOptions,
+			headers: {
+				"Content-Type": "application/json",
+				...headerOptions,
+			},
+			body: JSON.stringify(body),
+		}, timeout);
+		return response.json();
+	} catch (error) {
+		console.error("ERROR", `something wrong in 'DELETE', URL: ${url}`, error); // TODO Remove Console Output?
 		throw error;
 	}
 }
diff --git a/composables/api/Danmaku/DanmakuController.ts b/composables/api/Danmaku/DanmakuController.ts
index d916dcc3..6f539310 100644
--- a/composables/api/Danmaku/DanmakuController.ts
+++ b/composables/api/Danmaku/DanmakuController.ts
@@ -1,4 +1,4 @@
-import { get, post } from "../Common";
+import { GET, POST } from "../Common";
 import getCorrectUri from "../Common/getCorrectUri";
 import type { EmitDanmakuRequestDto, EmitDanmakuResponseDto, GetDanmakuByKvidRequestDto, GetDanmakuByKvidResponseDto } from "./DanmakuControllerDto";
 
@@ -12,7 +12,7 @@ const USER_API_URI = `${BACK_END_URL}/video/danmaku`;
  */
 export const emitDanmaku = async (emitDanmakuRequest: EmitDanmakuRequestDto): Promise<EmitDanmakuResponseDto> => {
 	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
-	return await post(`${USER_API_URI}/emit`, emitDanmakuRequest, { credentials: "include" }) as EmitDanmakuResponseDto;
+	return await POST(`${USER_API_URI}/emit`, emitDanmakuRequest, { credentials: "include" }) as EmitDanmakuResponseDto;
 };
 
 /**
@@ -21,5 +21,5 @@ export const emitDanmaku = async (emitDanmakuRequest: EmitDanmakuRequestDto): Pr
  * @returns 视频的弹幕列表
  */
 export const getDanmakuByKvid = async (getDanmakuByKvidRequest: GetDanmakuByKvidRequestDto): Promise<GetDanmakuByKvidResponseDto> => {
-	return await get(`${USER_API_URI}/?videoId=${getDanmakuByKvidRequest.videoId}`) as GetDanmakuByKvidResponseDto;
+	return await GET(`${USER_API_URI}?videoId=${getDanmakuByKvidRequest.videoId}`) as GetDanmakuByKvidResponseDto;
 };
diff --git a/composables/api/Danmaku/DanmakuControllerDto.d.ts b/composables/api/Danmaku/DanmakuControllerDto.d.ts
index bff38ec3..1ddf972a 100644
--- a/composables/api/Danmaku/DanmakuControllerDto.d.ts
+++ b/composables/api/Danmaku/DanmakuControllerDto.d.ts
@@ -1,3 +1,6 @@
+/**
+ * 基础弹幕数据
+ */
 type BasicDanmakuDto = {
 	/** 非空 - KVID 视频 ID */
 	videoId: number;
diff --git a/composables/api/User/UserController.ts b/composables/api/User/UserController.ts
index f4ae7f72..73385ea7 100644
--- a/composables/api/User/UserController.ts
+++ b/composables/api/User/UserController.ts
@@ -1,4 +1,4 @@
-import { get, post, uploadFile2R2 } from "api/Common";
+import { GET, POST, uploadFile2R2 } from "api/Common";
 import getCorrectUri from "api/Common/getCorrectUri";
 import type { CheckUserTokenResponseDto, GetSelfUserInfoResponseDto, GetUserAvatarUploadSignedUrlResultDto, GetUserInfoByUidRequestDto, GetUserInfoByUidResponseDto, UpdateUserEmailRequestDto, UserExistsCheckRequestDto, UserExistsCheckResponseDto, UserLoginRequestDto, UserLoginResponseDto, UserRegistrationRequestDto, UserRegistrationResponseDto } from "./UserControllerDto";
 
@@ -12,7 +12,7 @@ const USER_API_URI = `${BACK_END_URL}/user`;
  */
 export const registration = async (userRegistrationData: UserRegistrationRequestDto): Promise<UserRegistrationResponseDto> => {
 	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
-	return await post(`${USER_API_URI}/registering`, userRegistrationData, { credentials: "include" }) as UserRegistrationResponseDto;
+	return await POST(`${USER_API_URI}/registering`, userRegistrationData, { credentials: "include" }) as UserRegistrationResponseDto;
 };
 
 /**
@@ -22,7 +22,7 @@ export const registration = async (userRegistrationData: UserRegistrationRequest
  */
 export const login = async (userLoginRequest: UserLoginRequestDto): Promise<UserLoginResponseDto> => {
 	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
-	return await post(`${USER_API_URI}/login`, userLoginRequest, { credentials: "include" }) as UserLoginResponseDto;
+	return await POST(`${USER_API_URI}/login`, userLoginRequest, { credentials: "include" }) as UserLoginResponseDto;
 };
 
 /**
@@ -31,7 +31,7 @@ export const login = async (userLoginRequest: UserLoginRequestDto): Promise<User
  * @returns 验证用户邮箱是否已经存在的返回参数
  */
 export const userExistsCheck = async (userExistsCheckRequest: UserExistsCheckRequestDto): Promise<UserExistsCheckResponseDto> => {
-	return await get(`${USER_API_URI}/existsCheck?email=${userExistsCheckRequest.email}`) as UserExistsCheckResponseDto;
+	return await GET(`${USER_API_URI}/existsCheck?email=${userExistsCheckRequest.email}`) as UserExistsCheckResponseDto;
 };
 
 /**
@@ -40,7 +40,7 @@ export const userExistsCheck = async (userExistsCheckRequest: UserExistsCheckReq
  * @returns 用户更改邮箱返回的参数
  */
 export const updateUserEmail = async (updateUserEmailRequest: UpdateUserEmailRequestDto): Promise<UserLoginResponseDto> => {
-	return await post(`${USER_API_URI}/update/email`, updateUserEmailRequest) as UserLoginResponseDto;
+	return await POST(`${USER_API_URI}/update/email`, updateUserEmailRequest) as UserLoginResponseDto;
 };
 
 /**
@@ -49,7 +49,7 @@ export const updateUserEmail = async (updateUserEmailRequest: UpdateUserEmailReq
  */
 export const getSelfUserInfo = async (): Promise<GetSelfUserInfoResponseDto> => {
 	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
-	const selfUserInfo = await get(`${USER_API_URI}/self`, { credentials: "include" }) as GetSelfUserInfoResponseDto;
+	const selfUserInfo = await GET(`${USER_API_URI}/self`, { credentials: "include" }) as GetSelfUserInfoResponseDto;
 	const selfUserInfoStore = useSelfUserInfoStore();
 	if (selfUserInfo.success) {
 		selfUserInfoStore.isLogined = true;
@@ -78,7 +78,7 @@ export const getUserInfo = async (getUserInfoByUidRequest: GetUserInfoByUidReque
  */
 export const checkUserToken = async (): Promise<CheckUserTokenResponseDto> => {
 	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
-	return await get(`${USER_API_URI}/check`, { credentials: "include" }) as CheckUserTokenResponseDto;
+	return await GET(`${USER_API_URI}/check`, { credentials: "include" }) as CheckUserTokenResponseDto;
 };
 
 /**
@@ -87,7 +87,7 @@ export const checkUserToken = async (): Promise<CheckUserTokenResponseDto> => {
  */
 export const userLogout = async (): Promise<undefined> => {
 	// TODO use { credentials: "include" } to allow save/read cookies from cross-origin domains. Maybe we should remove it before deployment to production env.
-	await get(`${USER_API_URI}/logout`, { credentials: "include" }) as undefined;
+	await GET(`${USER_API_URI}/logout`, { credentials: "include" }) as undefined;
 	const selfUserInfoStore = useSelfUserInfoStore();
 	selfUserInfoStore.isLogined = false;
 	selfUserInfoStore.uid = undefined;
@@ -102,7 +102,7 @@ export const userLogout = async (): Promise<undefined> => {
  * 更新用户头像，并获取用于用户上传头像的预签名 URL, 上传限时 60 秒
  */
 export const getUserAvatarUploadSignedUrl = async (): Promise<GetUserAvatarUploadSignedUrlResultDto> => {
-	return await get(`${USER_API_URI}/avatar/preUpload`, { credentials: "include" }) as GetUserAvatarUploadSignedUrlResultDto;
+	return await GET(`${USER_API_URI}/avatar/preUpload`, { credentials: "include" }) as GetUserAvatarUploadSignedUrlResultDto;
 };
 
 /**
diff --git a/composables/event-bus.ts b/composables/event-bus.ts
index ebfd3132..a8c5d785 100755
--- a/composables/event-bus.ts
+++ b/composables/event-bus.ts
@@ -15,6 +15,7 @@ type ApplicationEvents = {
 	"component:hideAllPlayerVideoMenu": void;
 	"component:hideAllContextualToolbar": void;
 	"user:login": boolean;
+	"videoComment:emitVideoComment": VideoCommentResult;
 };
 
 const emitter = mitt<ApplicationEvents>();
diff --git a/composables/toast.ts b/composables/toast.ts
index 1a95307a..0d31e1a9 100755
--- a/composables/toast.ts
+++ b/composables/toast.ts
@@ -14,7 +14,7 @@ export interface ToastEvent {
  * 发送消息到消息框。
  * @param message - 消息文本。
  * @param severity - 事件级别，即确定图标和颜色。
- * @param duration - 消息显示的时间。
+ * @param duration - 消息显示的时间（单位：毫秒）。
  */
 export function useToast(message: string, severity: ToastEvent["severity"] = "success", duration?: number) {
 	useEvent("app:toast", { message, severity, duration });
diff --git a/pages/video/kv[kvid].vue b/pages/video/kv[kvid].vue
index d0bca744..1f5983d7 100644
--- a/pages/video/kv[kvid].vue
+++ b/pages/video/kv[kvid].vue
@@ -9,14 +9,15 @@
 	const videoSource = ref<string>();
 	const videoDetails = ref<VideoData>();
 	const title = computed(() => videoDetails.value?.title ?? "");
-	const comments = reactive<string[]>([]);
+	const comments = ref<GetVideoCommentByKvidResponseDto["videoCommentList"]>([]);
+	const commentsCount = ref<number>(0);
 	// const recommendations = ref<Videos200ResponseVideosInner[]>();
 	type VideoData = GetVideoByKvidResponseDto["video"];
 
 	/**
 	 * Fetch video data.
 	 */
-	async function fetchData() {
+	async function fetchVideoData() {
 		const handleError = (message: string) => {
 			onMounted(() => {
 				useToast(message, "error");
@@ -61,8 +62,27 @@
 			};
 		}
 	}
-	watch(() => kvid, fetchData);
-	await fetchData();
+
+	/**
+	 * 获取视频的评论数据
+	 */
+	async function fetchVideoCommentData() {
+		const getVideoCommentByKvidRequest: GetVideoCommentByKvidRequestDto = { videoId: kvid };
+		const videoCommentsResponse = await api.videoComment.getVideoCommentByKvid(getVideoCommentByKvidRequest);
+		if (videoCommentsResponse.success) {
+			comments.value = videoCommentsResponse.videoCommentList;
+			commentsCount.value = videoCommentsResponse.videoCommentCount;
+		}
+	}
+
+	watch(() => kvid, fetchVideoData);
+	await fetchVideoData();
+
+	onMounted(fetchVideoCommentData);
+
+	useListen("videoComment:emitVideoComment", videoComment => {
+		comments.value.push(videoComment);
+	});
 
 	useHead({
 		title: title.value,
@@ -106,7 +126,7 @@
 
 				<CreationComments
 					:videoId="kvid"
-					:count="comments.length"
+					:count="commentsCount"
 					:comments="comments"
 				/>
 			</div>
diff --git a/types/backend.d.ts b/types/backend.d.ts
index 1818f7a7..b1d235c1 100755
--- a/types/backend.d.ts
+++ b/types/backend.d.ts
@@ -1,3 +1,4 @@
+import * as _videoComment from "api/Comment/VideoCommentControllerDto";
 import * as _danmaku from "api/Danmaku/DanmakuControllerDto";
 import * as _user from "api/User/UserControllerDto";
 import * as _video from "api/Video/VideoControllerDto";
@@ -6,6 +7,7 @@ import * as _video from "api/Video/VideoControllerDto";
  * 此处声明与后端 API 相关的全局类型。
  */
 declare global {
+	export type { CancelVideoCommentDownvoteRequestDto, CancelVideoCommentUpvoteRequestDto, EmitVideoCommentDownvoteRequestDto, EmitVideoCommentRequestDto, EmitVideoCommentUpvoteRequestDto, GetVideoCommentByKvidRequestDto, GetVideoCommentByKvidResponseDto, VideoCommentResult } from "api/Comment/VideoCommentControllerDto";
 	export type { EmitDanmakuRequestDto, GetDanmakuByKvidRequestDto } from "api/Danmaku/DanmakuControllerDto";
 	export type { GetUserInfoByUidRequestDto, GetUserInfoByUidResponseDto, UserExistsCheckRequestDto, UserLabelSchema, UserLoginRequestDto, UserRegistrationRequestDto } from "api/User/UserControllerDto";
 	export type { GetVideoByKvidRequestDto, GetVideoByKvidResponseDto, GetVideoByUidRequestDto, GetVideoByUidResponseDto, ThumbVideoResponseDto } from "api/Video/VideoControllerDto";