shalu-agent-workflow/apps/web/src/components/Sidebar/index.vue

<template>
	<div :class="['sidebar', { collapsed }]">
		<div class="top-bar">
			<div class="brand" v-if="!collapsed">
				<span class="brand-logo">AI Agent</span>
			</div>
			<div
				class="top-icons"
				:style="{
					flexDirection: collapsed ? 'column' : 'row',
					width: collapsed ? '100%' : 'auto'
				}"
			>
				<el-dropdown placement="bottom-start" trigger="click">
					<span style="cursor: pointer">
						<SvgIcon name="Plus" />
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item @click="createWorkflow">工作流程</el-dropdown-item>
							<el-dropdown-item @click="createCertificate">凭证</el-dropdown-item>
							<el-dropdown-item @click="createTable">数据表</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-tooltip placement="bottom">
					<template #content>
						<div class="tooltip-keys">
							<kbd>Ctrl</kbd>
							<span class="plus">+</span>
							<kbd>K</kbd>
							<span class="desc">快速搜索</span>
						</div>
					</template>
					<span style="cursor: pointer" @click="showSearchDialog = true">
						<SvgIcon name="Search" />
					</span>
				</el-tooltip>
				<el-tooltip placement="bottom">
					<template #content>
						<div class="tooltip-keys">
							<kbd>[</kbd>
							<span class="desc">折叠侧边栏</span>
						</div>
					</template>
					<span style="cursor: pointer" @click="toggle">
						<SvgIcon name="Fold" />
					</span>
				</el-tooltip>
			</div>
		</div>

		<el-menu :default-active="activeMenu" router class="el-menu-vertical-demo main-menu">
			<el-menu-item index="/">
				<el-tooltip v-if="collapsed" content="概览" placement="right">
					<span><SvgIcon name="home" /></span>
				</el-tooltip>
				<SvgIcon v-else name="home" />
				<span v-if="!collapsed" class="label">概览</span>
			</el-menu-item>

			<el-menu-item index="/chat">
				<el-tooltip v-if="collapsed" content="聊天" placement="right">
					<span><SvgIcon name="chatMessage" /></span>
				</el-tooltip>
				<SvgIcon v-else name="chatMessage" />
				<span v-if="!collapsed" class="label">聊天 <small class="beta">beta</small></span>
			</el-menu-item>
		</el-menu>

		<div class="spacer"></div>

		<div class="bottom-menu">
			<!-- <div
				class="bottom-item"
				:class="{ active: router.currentRoute.value.path === '/management' }"
				@click="$router.push('/management')"
			>
				<el-tooltip v-if="collapsed" content="管理面板" placement="right">
					<span><SvgIcon name="platForm" /></span>
				</el-tooltip>
				<SvgIcon v-else name="platForm" />
				<span v-if="!collapsed" class="label">管理面板</span>
			</div> -->

			<div class="bottom-item" :class="{ active: showTemplateModal }" @click="handleTemplateClick">
				<el-tooltip v-if="collapsed" content="模板" placement="right">
					<span><SvgIcon name="box" /></span>
				</el-tooltip>
				<SvgIcon v-else name="box" />
				<span v-if="!collapsed" class="label">模板</span>
			</div>

			<div
				class="bottom-item"
				:class="{ active: router.currentRoute.value.path === '/statistics' }"
				@click="$router.push('/statistics')"
			>
				<el-tooltip v-if="collapsed" content="统计" placement="right">
					<span><SvgIcon name="line" /></span>
				</el-tooltip>
				<SvgIcon v-else name="line" />
				<span v-if="!collapsed" class="label">统计</span>
			</div>

			<div class="bottom-item" @click="handleSettingsClick($event, 'help')">
				<el-tooltip v-if="collapsed" content="帮助" placement="right">
					<span><SvgIcon name="help" /></span>
				</el-tooltip>
				<SvgIcon v-else name="help" />
				<span v-if="!collapsed" class="label">帮助</span>
				<SvgIcon v-if="!collapsed" name="chevron-right" />
			</div>

			<div class="bottom-item" @click="handleSettingsClick($event, 'settings')">
				<el-tooltip v-if="collapsed" content="设置" placement="right">
					<span><SvgIcon name="setting" /></span>
				</el-tooltip>
				<SvgIcon v-else name="setting" />
				<span v-if="!collapsed" class="label">设置</span>
				<SvgIcon v-if="!collapsed" name="chevron-right" />
			</div>
		</div>
	</div>

	<!-- 搜索对话框 -->
	<SearchDialog
		:is-open="showSearchDialog"
		@close="showSearchDialog = false"
		@select="handleSearchSelect"
	/>

	<!-- 模板弹窗 -->
	<TemplateModal
		:visible="showTemplateModal"
		@close="showTemplateModal = false"
		@select="handleTemplateSelect"
	/>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import SearchDialog from '../SearchDialog/index.vue'
import { v4 } from 'uuid'
import TemplateModal from '../TemplateModal/index.vue'

const emit = defineEmits<{
	'settings-menu-toggle': [position: { top: number; left: number }, name: string]
}>()

const router = useRouter()
const collapsed = ref(false)
const showSearchDialog = ref(false)
const showTemplateModal = ref(false)

// 计算当前活跃的菜单项
const activeMenu = computed(() => router.currentRoute.value.path)

const toggle = () => {
	collapsed.value = !collapsed.value
}

const createWorkflow = () => {
	const id = v4()
	router.push(`/workflow/${id}`)
}

const createCertificate = () => {}

const createTable = () => {}

const handleTemplateClick = () => {
	showTemplateModal.value = true
}

const handleTemplateSelect = (templateId: string) => {
	// 导航到模板详情页面
	router.push(`/templates/${templateId}`)
	showTemplateModal.value = false
}

const handleKeyDown = (e: KeyboardEvent) => {
	if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
		e.preventDefault()
		showSearchDialog.value = true
	}
	if (e.key === '[') {
		e.preventDefault()
		toggle()
	}
}

onMounted(() => {
	window.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
	window.removeEventListener('keydown', handleKeyDown)
})

const handleSearchSelect = (item: any) => {
	console.log('Selected:', item)
}

const handleSettingsClick = (event: MouseEvent, name: string) => {
	const element = event.currentTarget as HTMLElement
	const rect = element.getBoundingClientRect()

	emit(
		'settings-menu-toggle',
		{
			top: rect.top,
			left: rect.right + 8
		},
		name
	)
}
</script>

<style lang="less" scoped>
* {
	color: hsl(0, 0%, 46%);
}
.sidebar {
	width: 200px;
	height: 100%;
	background: #fff;
	border-right: 1px solid #f0f0f0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	transition: width 0.18s ease;
	overflow: hidden;
}
.sidebar.collapsed {
	width: 41px;
}
.top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-bottom: 1px solid #f2f2f2;
}
.brand-logo {
	font-weight: 700;
	color: #ff6b6b;
	font-size: 14px;
}
.top-icons {
	display: flex;
	gap: 10px;
	align-items: center;
}
.top-icons svg {
	cursor: pointer;
	padding: 6px 8px;
	margin: -6px -8px;
	border-radius: 4px;
	transition: all 0.2s ease;
}
.top-icons svg:hover {
	color: #ff6b6b;
	background-color: #f0f0f0;
}
.top-icons > span {
	display: flex;
	align-items: center;
	justify-content: center;
}
.top-icons > span svg {
	padding: 6px 8px;
	margin: -6px -8px;
	border-radius: 4px;
	transition: all 0.2s ease;
}
.top-icons > span:hover svg {
	color: #ff6b6b;
	background-color: #f0f0f0;
}

.main-menu {
	padding-top: 8px;
	border-right: none;
}
.el-menu-vertical-demo .el-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	height: 32px;
}
.el-menu-vertical-demo .el-menu-item:hover {
	background: #f0f0f0;
}
.el-menu-vertical-demo .el-menu-item.is-active {
	background: #f0f0f0 !important;
}
.label {
	font-size: 13px;
	flex: 1;
}
.beta {
	font-size: 10px;
	color: #999;
	margin-left: 6px;
}
.spacer {
	flex: 1 1 auto;
}
.bottom-menu {
	padding-bottom: 8px;
	border-top: 1px solid #f2f2f2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bottom-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 18px;
	padding-right: 10px;
	color: #333;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.2s ease;
}
.bottom-item:hover {
	background: #fafafa;
	color: #ff6b6b;
}
.bottom-item.active {
	background: #fafafa;
	color: #ff6b6b;
}

.settings-menu-panel {
	position: absolute;
	left: 100%;
	width: 240px;
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.12);
	z-index: 999;
	margin-left: 8px;
	animation: slideInRight 0.2s ease;

	.settings-menu-list {
		padding: 8px 0;
		max-height: 500px;
		overflow-y: auto;

		.settings-menu-item {
			padding: 10px 16px;
			color: #666;
			cursor: pointer;
			transition: all 0.2s;
			font-size: 13px;
			white-space: nowrap;

			&:hover {
				background: #f5f5f5;
				color: #333;
			}

			&.logout {
				color: #ff6b6b;
				border-top: 1px solid #f0f0f0;
				margin-top: 4px;
				padding-top: 12px;

				&:hover {
					background: #fff5f5;
				}
			}
		}
	}
}

.sidebar.collapsed .label {
	display: none;
}
.sidebar.collapsed .el-menu-vertical-demo .el-menu-item,
.sidebar.collapsed .bottom-item {
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
}
.sidebar.collapsed .top-icons {
	gap: 10px;
	flex-direction: column;
}
.sidebar.collapsed .top-icons > span {
	width: 100%;
	justify-content: center;
}
:deep(.el-button + .el-button) {
	margin-left: 0;
}

.tooltip-keys {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;

	kbd {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 1px 4px;
		min-width: 18px;
		height: 18px;
		background: #f0f0f0;
		color: #333;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		font-family: 'Monaco', 'Courier New', monospace;
		font-weight: 500;
		font-size: 10px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}

	.plus {
		color: #999;
		margin: 0 1px;
		font-size: 10px;
	}

	.desc {
		color: #ccc;
		margin-left: 2px;
		font-size: 11px;
	}
}
:deep(.el-menu-item *) {
	vertical-align: initial;
}
</style>