Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,51 @@
+<template>
+  <SidebarProvider>
+    <div class="flex h-screen w-full">
+      <!-- Main Sidebar -->
+      <AppSidebar />
+      
+      <!-- Main Content Area -->
+      <SidebarInset class="flex-1 flex flex-col">
+        <!-- Header -->
+        <AppHeader />
+        
+        <!-- Content Area -->
+        <main class="flex-1 flex overflow-hidden">
+          <!-- Main Content -->
+          <div class="flex-1 overflow-auto">
+            <router-view />
+          </div>
+          
+          <!-- Detail Panel (conditionally shown) -->
+          <div 
+            v-if="showDetailPanel" 
+            class="w-80 border-l bg-background overflow-auto"
+          >
+            <slot name="detail-panel">
+              <!-- Default detail panel content -->
+              <div class="p-4">
+                <h3 class="text-lg font-semibold mb-4">Details</h3>
+                <p class="text-muted-foreground">Select an item to view details</p>
+              </div>
+            </slot>
+          </div>
+        </main>
+      </SidebarInset>
+    </div>
+  </SidebarProvider>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
+import AppSidebar from './AppSidebar.vue'
+import AppHeader from './AppHeader.vue'
+
+// Show detail panel based on route or store state
+const route = useRoute()
+const showDetailPanel = computed(() => {
+  // Show detail panel for certain routes or when an item is selected
+  return route.meta?.showDetailPanel || false
+})
+</script>