FiDA_Front/src/views/home/left-nav.vue

<template>
	<div class="left-nav" :class="{ collapse: isCollapse }">
		<div class="top">
			<img class="logo-img" src="@/assets/images/logo.png" alt="FiDA" v-show="!isCollapse" />
			<span class="logo-text" v-show="!isCollapse">FiDA</span>
			<div class="close" @click="onCollapse">
				<svg-icon name="shouqi" size="24" />
			</div>
		</div>
		<button class="create-btn" @click="onCreateProject">
			<span class="icon"><svg-icon name="add" size="16" /></span>
			<span v-show="!isCollapse" class="text">{{ $t('Home.newProject') }}</span>
		</button>
		<!-- <div class="menu-item" @click="onHome">
			<span class="icon"><svg-icon name="home" size="24" /></span>
			<span class="title" v-show="!isCollapse">{{ $t('Home.home') }}</span>
		</div> -->
		<div class="menu-item" @click="onTest">
			<span class="title">TEST</span>
		</div>
		<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
			<span class="icon"><svg-icon name="history" size="24" /></span>
			<span class="title" v-show="!isCollapse">{{ $t('Home.history') }}</span>
			<span class="icon jiantou" v-show="!isCollapse"
				><svg-icon name="arrow-right" size="14" />
			</span>
		</div>
		<div class="history-list" v-show="!isCollapse && showHistory">
			<div v-for="item in historyList" :key="item.name" class="history-item">
				<div v-if="item.title" class="title">{{ item.name }}</div>
				<div
					v-else
					class="box"
					@click="onClickHistoryItem(item)"
					:class="{ active: item.id == id }"
				>
					<input
						v-show="item.edit"
						type="text"
						:value="item.name"
						ref="inputRef"
						:input-id="item.id"
						@click.stop
						@keyup.enter="(e) => onEnterHistoryItem(e, item)"
						@blur="(e) => onBlurHistoryItem(e, item)"
					/>
					<span class="label" v-show="!item.edit">{{ item.name }}</span>
					<el-popover
						placement="right"
						trigger="click"
						popper-style="padding: 1rem 0.5rem;"
						v-model:visible="item.visible"
					>
						<template #reference>
							<span @click.stop class="icon"><svg-icon name="more" size="16" /></span>
						</template>
						<div class="history-item-menu">
							<div class="rename" @click="onRenameHistoryItem(item)">
								{{ $t('Home.rename') }}
							</div>
							<div class="delete" @click="onDeleteHistoryItem(item)">
								{{ $t('Home.delete') }}
							</div>
						</div>
					</el-popover>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, nextTick } from 'vue'
	import { useRoute, useRouter } from 'vue-router'
	import { useI18n } from 'vue-i18n'
	import { getProjectList, updateProject, deleteProject } from '@/api/agent'
	import { FormatDate } from '@/utils/tools'
	import MyEvent from '@/utils/myEvent'
	const { t: $t } = useI18n()
	const route = useRoute()
	const router = useRouter()
	import { useGlobalStore } from '@/stores'
	const id = computed(() => route.params.id)
	const globalStore = useGlobalStore()
	const isCollapse = computed(() => globalStore.state.homeLeftNavCollapse)
	const onCollapse = () => {
		globalStore.setHomeLeftNavCollapse(!isCollapse.value)
	}
	const showHistory = ref(true)
	const list = ref([])
	const historyList = computed(() => {
		const str = 'yyyyMMdd'
		const today = FormatDate(Date.now(), str)
		const yesterday = FormatDate(Date.now() - 24 * 60 * 60 * 1000, str)
		const todayList = []
		const yesterdayList = []
		const earlierChatList = []
		list.value.forEach((item: any) => {
			const date = FormatDate(item.updateTime * 1000, str)
			if (date == today) {
				todayList.push(item)
			} else if (date == yesterday) {
				yesterdayList.push(item)
			} else {
				earlierChatList.push(item)
			}
		})
		const arr = []
		if (todayList.length > 0) {
			arr.push({
				title: true,
				name: $t('Home.today')
			})
			arr.push(...todayList)
		}
		if (yesterdayList.length > 0) {
			arr.push({
				title: true,
				name: $t('Home.yesterday')
			})
			arr.push(...yesterdayList)
		}
		if (earlierChatList.length > 0) {
			arr.push({
				title: true,
				name: $t('Home.earlierChat')
			})
			arr.push(...earlierChatList)
		}
		return arr
	})

	const onCreateProject = () => {
		router.push({ name: 'mainInput' })
	}
	const onHome = () => {}
	const onTest = () => {
		router.push({ name: 'test' })
	}
	const onHistory = () => {
		if (isCollapse.value) {
			globalStore.setHomeLeftNavCollapse(false)
			showHistory.value = true
		} else {
			showHistory.value = !showHistory.value
		}
	}
	const onClickHistoryItem = (item: any) => {
		router.push({ name: 'agent', params: { id: item.id } })
	}
	const inputRef = ref(null)
	const onRenameHistoryItem = (item: any) => {
		item.visible = false
		item.edit = true
		nextTick(() => {
			inputRef.value.forEach((v: any) => {
				const id = v.getAttribute('input-id')
				if (id == item.id) v.focus()
			})
		})
	}
	const onEnterHistoryItem = (e: any, item: any) => {
		e.target.blur()
	}
	const onBlurHistoryItem = (e: any, item: any) => {
		item.edit = false
		const name = e.target.value
		if (!name) return console.warn('未输入名称，不允许重命名')
		item.name = name
		updateProject(item.id, { name }).then(() => {
			GetProjectList()
		})
	}
	const onDeleteHistoryItem = (item: any) => {
		item.visible = false
		deleteProject(item.id).then(() => {
			GetProjectList()
			if (item.id == id.value) {
				router.push({ name: 'mainInput' })
			}
		})
	}

	const GetProjectList = async () => {
		const res = await getProjectList({
			page: 1,
			size: 100
		})
		list.value = []
		const arr = res.records || []
		arr.forEach((item: any) => {
			const obj = { ...item, edit: false, visible: false }
			list.value.push(obj)
		})
	}
	MyEvent.add('updateProjectList', GetProjectList)
	GetProjectList()
</script>
 
<style lang="less" scoped>
	.left-nav {
		width: var(--left-nav-collapse-width, 30rem);
		height: 100%;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		&,
		& * {
			transition: width 0.2s ease-in-out;
		}
		&.collapse {
			--left-nav-collapse-width: 9.4rem;
			--collapse-top-padding: 4.6rem 0 0 0;
			--collapse-create-btn-width: 5.1rem;
			--collapse-menu-item-width: 50%;
			--collapse-menu-item-icon-margin-right: 0;
		}
		> .top {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: var(--collapse-top-padding, 2.6rem 1.6rem 0 3.6rem);
			> .logo-img {
				width: 3.4rem;
				height: auto;
				margin-right: 1rem;
			}
			> .logo-text {
				font-family: SemiBold;
				font-weight: 600;
				font-size: 3rem;
				margin-right: auto;
			}
		}
		> .create-btn {
			margin: 4.5rem auto 2.5rem;
			width: var(--collapse-create-btn-width, 23rem);
			height: 5.1rem;
			border-radius: 5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: rgba(255, 122, 81, 1);
			border: none;
			outline: none;
			&:active {
				background-color: rgba(255, 122, 81, 0.8);
			}

			> .text {
				font-weight: 500;
				font-size: 1.8rem;
				margin-left: 1rem;
			}
		}
		> .menu-item {
			width: var(--collapse-menu-item-width, 23rem);
			margin: 2.5rem auto 0;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			border-radius: 8px;
			padding: 0.9rem 0.8rem;
			> * {
				margin-right: 1.6rem;
				&:last-child {
					margin-right: 0;
				}
			}
			&:hover {
				background-color: rgba(0, 0, 0, 0.06);
			}
			> .title {
				flex: 1;
				font-weight: 500;
				font-size: 2rem;
			}
			> .icon {
				transition: transform 0.2s ease-in-out;
				margin-right: var(--collapse-menu-item-icon-margin-right, 1.6rem);
			}
			&.active > .jiantou {
				transform: rotate(90deg);
			}
		}
		> .history-list {
			flex: 1;
			overflow-y: auto;
			width: 23.2rem;
			margin: 1rem auto 0;
			> .history-item {
				width: 100%;
				height: 4rem;
				margin-bottom: 0.4rem;
				> div {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 0.8rem;
				}
				> .title {
					font-weight: 600;
					font-size: 1.6rem;
					font-family: SemiBold;
				}
				> .box {
					font-family: Regular;
					border-radius: 0.8rem;
					cursor: pointer;
					&.active,
					&:hover {
						background-color: rgba(0, 0, 0, 0.06);
					}
					&.active {
						font-family: SemiBold;
					}
					> .label {
						flex: 1;
						font-weight: 400;
						font-size: 1.6rem;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					> input {
						flex: 1;
						width: 0;
						height: 100%;
						border: none;
						outline: none;
						background-color: transparent;
					}
					> .icon {
						width: 2.5rem;
						height: 2.5rem;
					}
				}
			}
		}
	}
	.history-item-menu {
		user-select: none;
		> div {
			cursor: pointer;
			padding: 0.5rem 1rem;
			&:hover {
				background-color: rgba(0, 0, 0, 0.06);
			}
		}
		> .rename {
			color: #409eff;
		}
		> .delete {
			color: #ff4d4f;
		}
	}
</style>