Initial project

2025-07-16 16:41:21 +08:00
parent 09bd61b486
commit 1c4c53bb91
38 changed files with 12796 additions and 129 deletions
--- a/src/views/comment/ReplyByReceiverList.vue
+++ b/src/views/comment/ReplyByReceiverList.vue
@ -0,0 +1,144 @@
+<template>
+	<div class="reply-by-receiver-list">
+		<div class="items">
+			<loading :showOn="!pageResult"/>
+			<template v-if="pageResult">
+				<section class="item" v-for="item in pageResult.list" :key="item.id">
+					<header class="header">
+						<div class="left">
+							<div class="biz-type" v-text="(<any> UserCommentBizType)[item.comment.bizType]"></div>
+							<h5 v-if="item.comment.article" class="title selectable" v-text="(item.comment.article as any).title"></h5>
+							<div class="gray sender">
+								<span class="word-space" v-if="item.sender" v-text="item.sender.name"></span>
+								<span class="word-space" v-if="item.senderNick" v-text="item.senderNick"></span>
+								<span v-if="item.sender || item.senderNick">回复</span>
+							</div>
+						</div>
+						<div class="right">
+							<t-link
+								:href="UserAPI.getCommentTargetUrl(item.comment)"
+								class="word-space"
+								theme="primary"
+								hover="color" target="_blank"
+							>查看</t-link>
+							<t-popconfirm
+								content="确定继续删除这条回复通知吗？"
+								@confirm="doDelete(item)"
+								:popup-props="{ placement: 'left' }"
+							>
+								<t-link class="del" theme="danger" hover="color">删除</t-link>
+							</t-popconfirm>
+						</div>
+					</header>
+					<div class="content gray clip-text selectable" v-text="item.content"></div>
+				</section>
+			</template>
+		</div>
+		<footer v-if="pageResult && 16 < pageResult.total" class="footer">
+			<t-pagination
+				v-if="pageResult"
+				:total="pageResult.total"
+				:pageSize="16"
+				:showPageSize="false"
+				:onCurrentChange="(current: number) => page.index = current - 1"
+			>
+				<template #totalContent>
+					<div style="flex: 1" v-text="`共 ${pageResult.total} 条回复`"></div>
+				</template>
+			</t-pagination>
+		</footer>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { CommentReplyBizType, CommentReplyPage, CommentReplyView, Loading, PageResult, Toolkit } from "timi-web";
+import { UserCommentBizType } from "@/types/User.ts";
+import UserAPI from "@/api/UserAPI.ts";
+
+const page = reactive<CommentReplyPage>({
+	bizType: (<any>CommentReplyBizType).RECEIVER,
+	index: 0,
+	size: 12
+});
+const pageResult = ref<PageResult<CommentReplyView>>();
+const fetchList = Toolkit.debounce(async () => pageResult.value = await UserAPI.listCommentReply(page));
+watch(() => page.index, fetchList);
+onMounted(fetchList);
+
+async function doDelete(item: CommentReplyView) {
+	item.id && await UserAPI.ignoreCommentReply(item.id);
+	await fetchList();
+}
+</script>
+
+<style lang="less" scoped>
+.reply-by-receiver-list {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	.items {
+		flex: 1;
+		font-size: 1rem;
+
+		.item {
+			padding: .5rem 1rem 2rem 1rem;
+
+			&:hover {
+				background: var(--tui-dark-white);
+			}
+
+			.header {
+				display: flex;
+				align-items: center;
+				margin-bottom: .5rem;
+				justify-content: space-between;
+
+				.left {
+					display: flex;
+					align-items: center;
+
+					.biz-type {
+						width: fit-content;
+						color: #FFF;
+						padding: .1rem .5rem;
+						text-align: center;
+						background: var(--tui-light-blue);
+						margin-right: .5rem;
+					}
+
+					.title {
+						margin: 0;
+					}
+
+					.sender {
+						font-size: 12px;
+					}
+				}
+
+				.right {
+					display: flex;
+					font-size: 14px;
+					align-items: center;
+					justify-content: flex-end;
+				}
+			}
+
+			.content {
+				font-size: 14px;
+				margin-right: 1rem;
+			}
+		}
+	}
+
+	.footer {
+		bottom: -1px;
+		padding: var(--tui-page-padding);
+		position: sticky;
+		background: rgba(255, 255, 255, .8);
+		border-top: var(--tui-border);
+		backdrop-filter: blur(10px);
+		-webkit-backdrop-filter: blur(10px);
+	}
+}
+</style>