shalu-agent-workflow/apps/web/src/views/chat/components/ChatSidebar.vue

<template>
	<div class="chat-sidebar">
		<div class="sidebar-header">
			<el-button type="primary" class="new-chat-btn" @click="$emit('new-chat')">
				<span>{{ t('pages.chat.newChat') }}</span>
			</el-button>
		</div>
		<div class="sidebar-content" @scroll="handleScroll">
			<div class="conversation-list">
				<div class="list-title">{{ t('pages.chat.history') }}</div>

				<!-- 空状态提示 -->
				<div v-if="!conversations || conversations.length === 0" class="empty-history">
					{{ t('pages.chat.noHistory') }}
				</div>

				<div
					v-for="conv in conversations"
					:key="conv.id"
					:class="['conversation-item', { active: activeId === conv.id }]"
					@click="$emit('select-conversation', conv.id)"
				>
					<div class="conv-info">
						<div class="conv-title">{{ conv.title || t('pages.chat.newConversation') }}</div>
						<div class="conv-time">{{ formatTime(conv.updatedAt) }}</div>
					</div>

					<!-- 操作菜单 -->
					<el-dropdown
						class="conv-menu"
						trigger="click"
						@click.stop
						@command="(cmd: string) => $emit('conv-command', cmd, conv.id)"
					>
						<span class="conv-menu-icon">⋯</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="rename">{{ t('pages.chat.rename') }}</el-dropdown-item>
								<el-dropdown-item command="delete" class="delete-item">
									{{ t('pages.chat.delete') }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>

				<!-- 【新增】加载更多状态提示 -->
				<div v-if="isLoadingMore" class="loading-more">
					<el-icon class="is-loading">
						<Loading />
					</el-icon>
					<span>{{ t('common.loading') }}</span>
				</div>
				<div v-else-if="!hasMore && conversations.length > 0" class="no-more">
					{{ t('common.noMore') }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { Loading } from '@element-plus/icons-vue'
import { useI18n } from '@/composables/useI18n'
import type { Conversation } from '../types'

const { t } = useI18n()

const props = defineProps<{
	conversations: Conversation[]
	activeId?: string
	hasMore?: boolean
	isLoadingMore?: boolean
}>()

const emit = defineEmits<{
	(e: 'new-chat'): void
	(e: 'select-conversation', convId: string): void
	(e: 'conv-command', command: string | number, convId: string): void
	(e: 'load-more'): void
}>()

/**
 * 格式化时间显示
 */
const formatTime = (timestamp: number) => {
	if (!timestamp) return ''
	const date = new Date(timestamp)
	const now = new Date()
	const diff = now.getTime() - date.getTime()
	const minutes = Math.floor(diff / 60000)
	const hours = Math.floor(diff / 3600000)
	const days = Math.floor(diff / 86400000)

	if (minutes < 1) return t('common.date.justNow')
	if (minutes < 60) return t('common.date.minutesAgo', { count: minutes })
	if (hours < 24) return t('common.date.hoursAgo', { count: hours })
	if (days < 7) return t('common.date.daysAgo', { count: days })
	return date.toLocaleDateString()
}

/**
 * 处理滚动事件，触底加载
 */
const handleScroll = (event: Event) => {
	const target = event.target as HTMLElement
	// 判断是否滚动到底部 (允许 1px 误差)
	if (target.scrollHeight - target.scrollTop <= target.clientHeight + 1) {
		if (props.hasMore && !props.isLoadingMore) {
			emit('load-more')
		}
	}
}
</script>

<style lang="less" scoped>
.chat-sidebar {
	width: 260px;
	border-right: 1px solid var(--border-light);
	display: flex;
	flex-direction: column;
	background: var(--bg-base);
	height: 100%;
	flex-shrink: 0;

	.sidebar-header {
		height: 64px;
		padding: 16px;
		box-sizing: border-box;
		border-bottom: 1px solid var(--border-light);

		.new-chat-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.sidebar-content {
		flex: 1;
		overflow-y: auto;
		padding: 12px 8px;

		.conversation-list {
			.list-title {
				padding: 8px 12px;
				font-size: 12px;
				color: var(--text-tertiary);
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: 0.5px;
			}

			.empty-history {
				padding: 20px;
				text-align: center;
				color: var(--text-tertiary);
				font-size: 13px;
			}

			.conversation-item {
				padding: 10px 12px;
				margin-bottom: 4px;
				border-radius: 8px;
				cursor: pointer;
				transition: all 0.2s;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:hover {
					background: var(--bg-overlay);

					.conv-menu {
						opacity: 1;
						visibility: visible;
					}
				}

				&.active {
					background: var(--el-color-primary-light-9);

					.conv-title {
						color: var(--el-color-primary);
						font-weight: 600;
					}

					.conv-time {
						color: var(--el-color-primary-light-3);
					}
				}

				.conv-info {
					flex: 1;
					overflow: hidden;
					margin-right: 8px;
				}

				.conv-title {
					font-size: 14px;
					color: var(--text-primary);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 4px;
					line-height: 1.4;
				}

				.conv-time {
					font-size: 11px;
					color: var(--text-tertiary);
				}

				.conv-menu {
					opacity: 0;
					visibility: hidden;
					transition:
						opacity 0.2s,
						visibility 0.2s;

					.conv-menu-icon {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 24px;
						height: 24px;
						border-radius: 4px;
						color: var(--text-tertiary);

						&:hover {
							background: rgba(0, 0, 0, 0.05);
							color: var(--text-primary);
						}
					}
				}
			}

			/* 【新增】加载更多样式 */
			.loading-more,
			.no-more {
				padding: 10px;
				text-align: center;
				font-size: 12px;
				color: var(--text-tertiary);
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
			}
		}
	}
}

:deep(.delete-item) {
	color: var(--el-color-danger);

	&:hover {
		background-color: var(--el-color-danger-light-9);
	}
}

.sidebar-content::-webkit-scrollbar {
	width: 4px;
}

.sidebar-content::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 2px;
}

.sidebar-content:hover::-webkit-scrollbar-thumb {
	background: var(--border-light);
}
</style>