feat: add prime vue

frontend/admin/src/App.vue

@@ -1,42 +1,53 @@
 <script setup>
-// 不再需要下拉菜单的状态，可以删除相关代码
+import Button from 'primevue/button';
+import Menubar from 'primevue/menubar';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const navItems = ref([
+    {
+        label: 'Dashboard',
+        icon: 'pi pi-home',
+        command: () => router.push('/')
+    },
+    {
+        label: 'Media',
+        icon: 'pi pi-image',
+        command: () => router.push('/media')
+    },
+    {
+        label: 'Articles',
+        icon: 'pi pi-file',
+        command: () => router.push('/articles')
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-cog',
+        command: () => router.push('/settings')
+    }
+]);
+
 </script>
 
 <template>
-    <div class="min-h-screen bg-base-200">
-        <div class="navbar bg-base-100 shadow-md">
-            <div class="navbar-start">
-                <div class="px-2 mx-2">
-                    <h1 class="text-xl font-bold">Hello</h1>
-                </div>
-            </div>
-            <div class="navbar-center">
-                <div class="tabs tabs-boxed bg-base-100">
-                    <router-link to="/posts" class="tab" :class="{ 'tab-active': $route.path === '/posts' }">
-                        文章管理
-                    </router-link>
-                    <router-link to="/medias" class="tab" :class="{ 'tab-active': $route.path === '/medias' }">
-                        媒体库
-                    </router-link>
-                </div>
-            </div>
-            <div class="navbar-end">
-                <button class="btn btn-error btn-sm">退出登录</button>
-            </div>
-        </div>
+    <div class="flex flex-col min-h-screen">
+        <header class="sticky top-0 z-50 shadow-md">
+            <Menubar :model="navItems" class="!rounded-none">
+                <template #start>
+                    <div class="flex items-center pr-4">
+                        <h2 class="m-0 text-2xl text-primary font-semibold">Admin Panel</h2>
+                    </div>
+                </template>
+                <template #end>
+                    <Button label="Logout" icon="pi pi-power-off" severity="secondary" text />
+                </template>
+            </Menubar>
+        </header>
 
-        <main class="container mx-auto py-6 px-4">
-            <div class="card bg-base-100 shadow-xl">
-                <div class="card-body">
-                    <router-view />
-                </div>
-            </div>
+        <main class="flex-1 p-6 bg-surface-ground">
+            <router-view />
         </main>
     </div>
 </template>
-
-<script>
-export default {
-    name: 'App'
-}
-</script>