admin-ui/src/views/home/components/ReplyList.vue

<template>
	<div class="reply-list">
		<div v-for="reply in replyList" :key="reply.id" class="reply-card" @click="handleReplyClick(reply)">
			<div class="reply-header">
				<div class="reply-category">
					<el-tag :type="getCategoryType(reply.category)" size="small">{{ reply.category }}</el-tag>
				</div>
				<div class="reply-usage">
					<el-icon><ChatDotRound /></el-icon>
					<span>{{ reply.usageCount }} 次使用</span>
				</div>
			</div>
			<h3 class="reply-title">{{ reply.title }}</h3>
			<p class="reply-content">{{ reply.content }}</p>
			<div class="reply-footer">
				<div class="reply-tags">
					<el-tag v-for="tag in reply.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
				</div>
				<div class="reply-actions">
					<el-button text size="small" @click.stop="handleCopy(reply)">
						<el-icon><CopyDocument /></el-icon>
					</el-button>
					<el-button text size="small" @click.stop="handleEdit(reply)">
						<el-icon><Edit /></el-icon>
					</el-button>
					<el-button text size="small" type="danger" @click.stop="handleDelete(reply)">
						<el-icon><Delete /></el-icon>
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ChatDotRound, CopyDocument, Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

interface Reply {
	id: number;
	title: string;
	content: string;
	category: string;
	tags: string[];
	usageCount: number;
}

const replyList = ref<Reply[]>([
	{
		id: 1,
		title: '欢迎语',
		content: '您好！很高兴为您服务。请问有什么可以帮助您的吗？',
		category: '问候',
		tags: ['欢迎', '问候'],
		usageCount: 156,
	},
	{
		id: 2,
		title: '感谢回复',
		content: '非常感谢您的反馈！我们会继续努力为您提供更好的服务。',
		category: '感谢',
		tags: ['感谢', '反馈'],
		usageCount: 89,
	},
	{
		id: 3,
		title: '技术支持',
		content: '我已经收到您的问题，正在为您查询相关信息。请稍等片刻，我会尽快回复您。',
		category: '支持',
		tags: ['技术', '支持'],
		usageCount: 234,
	},
	{
		id: 4,
		title: '道歉回复',
		content: '非常抱歉给您带来不便。我们会立即处理这个问题，并尽快给您一个满意的答复。',
		category: '道歉',
		tags: ['道歉', '问题'],
		usageCount: 45,
	},
	{
		id: 5,
		title: '结束语',
		content: '如果您还有其他问题，随时欢迎联系我们。祝您生活愉快！',
		category: '结束',
		tags: ['结束', '祝福'],
		usageCount: 178,
	},
	{
		id: 6,
		title: '产品介绍',
		content: '我们的产品采用最新技术，为您提供高效、稳定、安全的服务体验。',
		category: '介绍',
		tags: ['产品', '介绍'],
		usageCount: 67,
	},
]);

const getCategoryType = (category: string) => {
	const typeMap: Record<string, any> = {
		问候: 'success',
		感谢: 'primary',
		支持: 'warning',
		道歉: 'danger',
		结束: 'info',
		介绍: '',
	};
	return typeMap[category] || '';
};

const handleReplyClick = (reply: Reply) => {
	ElMessage.success(`使用快捷回复: ${reply.title}`);
};

const handleCopy = (reply: Reply) => {
	navigator.clipboard.writeText(reply.content);
	ElMessage.success('已复制到剪贴板');
};

const handleEdit = (reply: Reply) => {
	ElMessage.info(`编辑回复: ${reply.title}`);
};

const handleDelete = (reply: Reply) => {
	ElMessage.warning(`删除回复: ${reply.title}`);
};
</script>

<style scoped lang="scss">
.reply-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.reply-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 20px;
	border: 1px solid #e5e7eb;
	cursor: pointer;
	transition: all 0.3s ease;

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transform: translateY(-2px);
		border-color: #3b82f6;
	}
}

.reply-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.reply-category {
	flex-shrink: 0;
}

.reply-usage {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: #6b7280;
}

.reply-title {
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 12px 0;
}

.reply-content {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.6;
	margin: 0 0 16px 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.reply-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
	border-top: 1px solid #f3f4f6;
}

.reply-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.reply-actions {
	display: flex;
	gap: 4px;
}
</style>