From 7bf517ce120c4020bd5ff8d1db1e37c72e8c2c4d Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sat, 12 Apr 2025 16:33:10 +0800
Subject: [PATCH] feat(front): enhance Navbar component with icons for better
 visual representation

---
 front/components/Navbar.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/front/components/Navbar.vue b/front/components/Navbar.vue
index 4002665..ba4e067 100644
--- a/front/components/Navbar.vue
+++ b/front/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex flex-row bg-white/10 backdrop-blur-xl p-2 rounded-full">
         <div v-for="item in routes" :key="item.key" 
-        class="flex flex-row text-sm px-4 py-2 font-bold rounded-full cursor-pointer relative"
+        class="flex flex-row items-center gap-2 text-sm px-4 py-2 font-bold rounded-full cursor-pointer relative select-none"
         @click="()=>{
             router.push({
                 query: {
@@ -12,17 +12,18 @@
         }"
         >
           <motion.div v-if="item?.key === type" layoutId="navbar-active" class="absolute inset-0 rounded-full w-full h-full bg-black/10"/>
+          <component :is="item.icon" />
           {{ item.name }}
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { cx } from 'class-variance-authority'
+import { LucidePaperclip, LucideClipboardType } from 'lucide-vue-next'
 import { motion } from "motion-v"
 const routes = [
-    { name: '文件', key: 'file' },
-    { name: '文本', key: 'text' }
+    { name: '文件', key: 'file', icon: LucidePaperclip },
+    { name: '文本', key: 'text', icon: LucideClipboardType }
 ]
 const route = useRoute()
 const router = useRouter()