frontend

frontend/src/components/dashboard/Sidebar.vue

@@ -0,0 +1,98 @@
+<template>
+  <aside class="w-60 bg-base-100 border-r border-base-200">
+    <div class="flex items-center p-4 outline-none select-none">
+      <div class="w-12 h-12 rounded-full">
+        <img src='@/assets/logo.svg' class="">
+      </div>
+      <div class="p-0 text-2xl font-bold text-center">OpenTeam</div>
+    </div>
+
+
+    <ul class="menu p-4 w-60 min-h-full bg-base-100 text-base-content">
+      <li v-for="item in menuItems" :key="item.label">
+        <template v-if="item.type === 'link'">
+          <router-link :to="item.to" :class="{ 'active': isActive(item.to) }">
+            <component :is="item.icon" class="w-4" />
+            {{ item.label }}
+
+          </router-link>
+        </template>
+        <template v-else-if="item.type === 'title'">
+          <span class="menu-title">
+            <span>{{ item.label }}</span>
+          </span>
+        </template>
+        <template v-else-if="item.type === 'submenu'">
+          <details :open="item.open">
+            <summary>
+              <component :is="item.icon" class="w-4" />
+              {{ item.label }}
+              <div v-if="item.badge" class="badge badge-sm">{{ item.badge }}</div>
+            </summary>
+            <ul>
+              <li v-for="subItem in item.children" :key="subItem.label">
+                <router-link :to="subItem.to" :class="{ 'active': isActive(subItem.to) }">
+                  <component :is="subItem.icon" class="w-4" />
+                  {{ subItem.label }}
+                </router-link>
+              </li>
+            </ul>
+          </details>
+        </template>
+      </li>
+    </ul>
+  </aside>
+</template>
+
+<script setup>
+import {
+  LayoutDashboardIcon,
+  ShieldPlus,
+  UsersRoundIcon,
+  KeyRoundIcon,
+  MessageSquareIcon,
+  SettingsIcon,
+  UserIcon,
+  CommandIcon,
+  BracesIcon,
+} from 'lucide-vue-next'
+import { ref, reactive, onMounted ,computed} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import {routes,generateMenuItemsFromRoutes}from '@/utils/router_menu.js'
+import { useAuthStore } from '@/stores/auth.js';
+
+const authStore = useAuthStore();
+const userrole = computed(() => {
+  const user = authStore.user;
+  return user ? user.role : 0;
+});
+
+const route = useRoute();
+const router = useRouter();
+// 判断当前路由是否激活菜单项
+const isActive = (path) => {
+  return route.path === path;
+  // return router.currentRoute.value.fullPath.startsWith(path);
+};
+
+let menuItems = reactive([
+  { type: 'link', label: 'Overview', to: '/dashboard/overview', icon: LayoutDashboardIcon },
+  { type: 'title', label: 'Apps' },
+  { type: 'link', label: 'Tokens', to: '/dashboard/tokens', icon: BracesIcon },
+  {
+    type: 'submenu', label: 'Manager', icon: CommandIcon, open: true, badge: 'Admin',
+    children: [
+      { label: 'Users', to: '/dashboard/manager/users', icon: UsersRoundIcon },
+      { label: 'ApiKeys', to: '/dashboard/manager/keys', icon: KeyRoundIcon },
+    ],
+  },
+  {
+    type: 'submenu', label: 'Settings',  icon: SettingsIcon,open: false,
+    children: [
+      { label: 'Profile', to: '/dashboard/settings/profile', icon: UserIcon },
+    ]
+  },
+]);
+menuItems = computed(() => generateMenuItemsFromRoutes(routes, userrole.value));
+
+</script>