更改字体

src/views/home/left-nav.vue

@@ -25,15 +25,24 @@
 		<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)">
+				<div
+					v-else
+					class="box"
+					@click="onClickHistoryItem(item)"
+					:class="{ active: item.id == id }"
+				>
 					<span>{{ item.name }}</span>
-					<el-popover placement="right" trigger="click">
+					<el-popover
+						placement="right"
+						trigger="click"
+						popper-style="padding: 1rem 0.5rem;"
+					>
 						<template #reference>
-							<span class="icon"><svg-icon name="more" size="16" /></span>
+							<span @click.stop class="icon"><svg-icon name="more" size="16" /></span>
 						</template>
-						<div class="button-box">
-							<div class="rename-btn">Rename</div>
-							<div class="delete-btn">Delete</div>
+						<div class="history-item-menu">
+							<div class="rename" @click="onRenameHistoryItem(item)">Rename</div>
+							<div class="delete" @click="onDeleteHistoryItem(item)">Delete</div>
 						</div>
 					</el-popover>
 				</div>
@@ -50,6 +59,7 @@
 	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 = () => {
@@ -97,9 +107,21 @@
 		showHistory.value = !showHistory.value
 	}
 	const onClickHistoryItem = (item: any) => {
-		console.log(item)
 		router.push({ name: 'test', params: { id: item.id } })
 	}
+	const onRenameHistoryItem = (item: any) => {
+		// const index = historyList.value.findIndex((i: any) => i.id == item.id)
+		// if (index != -1) {
+
+		// }
+	}
+	const onDeleteHistoryItem = (item: any) => {
+		console.log(item)
+		const index = historyList.value.findIndex((i: any) => i.id == item.id)
+		if (index != -1) {
+			historyList.value.splice(index, 1)
+		}
+	}
 </script>
 
 <style lang="less" scoped>
@@ -131,7 +153,7 @@
 				margin-right: 1rem;
 			}
 			> .logo-text {
-				font-family: Mazzard;
+				font-family: SemiBold;
 				font-weight: 600;
 				font-size: 3rem;
 				margin-right: auto;
@@ -204,14 +226,19 @@
 				> .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;
@@ -220,8 +247,28 @@
 						white-space: nowrap;
 						overflow: hidden;
 					}
+					>.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>