✨ feat (rbac): implement role-based access control

app/layouts/default.vue

@@ -1,4 +1,21 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const route = useRoute()
+const contentFrame = computed(() => route.meta.contentFrame)
+const contentContent = computed(() => {
+  switch (contentFrame.value) {
+    case 'cf-container-lg':
+      return 'cf-frame cf-container-lg-content'
+    case 'cf-container-md':
+      return 'cf-frame cf-container-md-content'
+    case 'cf-container-sm':
+      return 'cf-frame cf-container-sm-content'
+    case 'cf-full-width':
+      return 'cf-frame-width'
+    default:
+      return 'cf-frame'
+  }
+})
+</script>
 
 <template>
   <SidebarProvider>
@@ -6,10 +23,70 @@
     <SidebarInset>
       <LayoutHeader />
       <div class="w-full min-w-0 flex-1 overflow-x-auto p-4 lg:p-6">
-        <slot />
+        <div v-if="contentFrame !== 'cf-no-frame'" class="contentFrame">
+          <div :class="`${contentContent} ${contentFrame}`">
+            <slot />
+          </div>
+        </div>
+        <slot v-else />
       </div>
     </SidebarInset>
   </SidebarProvider>
 </template>
 
-<style scoped></style>
+<style scoped>
+.cf-container,
+.cf-container-lg,
+.cf-container-md,
+.cf-container-sm {
+  container-type: inline-size;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 5rem;
+}
+
+.cf-container > *,
+.cf-container-lg > *,
+.cf-container-md > *,
+.cf-container-sm > *,
+.cf-full-width {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.75rem; /* p-3 */
+  padding-bottom: 5rem; /* pb-20 */
+  border-width: 1px;
+  background-color: white !important;
+  border-color: rgb(226 232 240); /* slate-200 */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cf-container-lg > * {
+  max-width: 992px;
+}
+
+.cf-container-md > * {
+  max-width: 768px;
+}
+
+.cf-container-sm > * {
+  max-width: 576px;
+}
+
+.cf-frame-width {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.75rem;
+  background-color: white;
+  border: 1px solid rgb(226 232 240);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.cf-frame {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0.75rem;
+  background-color: white;
+  border: 1px solid rgb(226 232 240);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+</style>