feat : middleware and refresh token

2026-04-06 13:55:31 +07:00
parent d438fb0f5f
commit 4325bae76f
16 changed files with 1127 additions and 476 deletions
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+
+import type { RolePage } from '~/types/setting/menu';
+
+const props = defineProps<{
+  page: RolePage;
+  level: number;
+}>();
+
+const emit = defineEmits(['detail', 'edit', 'delete']);
+
+const handleDetail = (page: RolePage) => emit('detail', page);
+const handleEdit = (page: RolePage) => emit('edit', page);
+const handleDelete = (page: RolePage) => emit('delete', page);
+</script>
+
+<template>
+  <div
+    :style="{ marginLeft: (level > 0 ? 40 : 0) + 'px' }"
+    :class="{ 'is-child': level > 0 }"
+    class="page-row-container"
+  >
+     <v-card class="mb-3 page-card" elevation="2" @click="handleDetail(page)">
+      <v-card-text class="pa-5">
+        <div class="d-flex align-center">
+          <v-avatar color="primary" size="40" class="me-3">
+            <Icon :icon="'solar:' + page.icon" width="24" />
+          </v-avatar>
+          <div class="flex-grow-1">
+            <div class="d-flex align-center">
+              <h6 class="text-subtitle-1 font-weight-semibold">{{ page.name }}</h6>
+            </div>
+            <p class="text-muted mb-0">{{ page.url }}</p>
+          </div>
+          <v-btn icon variant="text" class="ml-2" @click.stop="handleEdit(page)">
+            <v-icon>mdi-pencil</v-icon>
+          </v-btn>
+          <v-btn icon variant="text" class="ml-2" @click.stop="handleDelete(page)">
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </div>
+      </v-card-text>
+    </v-card>
+    <div v-if="page.children && page.children.length > 0" class="children-container">
+      <PageRow
+        v-for="child in page.children"
+        :key="child.id"
+        :page="child"
+        :level="level + 1"
+        @detail="handleDetail"
+        @edit="handleEdit"
+        @delete="handleDelete"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-row-container {
+  position: relative;
+}
+.page-card {
+  cursor: pointer;
+}
+.children-container {
+  position: relative;
+}
+
+
+.children-container::before {
+  content: '';
+  position: absolute;
+  top: -12px;
+  bottom: 0;
+  left: 20px;
+  width: 3px;
+  background-color: #e0e0e0;
+}
+
+.children-container > .page-row-container::before {
+    content: '';
+    position: absolute;
+    top: 28px;
+    left: -20px;
+    width: 20px;
+    height: 3px;
+    background-color: #e0e0e0;
+}
+</style>