style(frontend): 优化 Components 代码风格和结构

- 统一移除语句末尾分号，规范代码格式
- 优化组件类型定义和 props 声明
- 改进组件文档和示例代码
- 提升代码可读性和一致性

frontend/src/components/layout/AppLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="min-h-screen bg-gray-50 dark:bg-dark-950">
     <!-- Background Decoration -->
-    <div class="fixed inset-0 bg-mesh-gradient pointer-events-none"></div>
+    <div class="pointer-events-none fixed inset-0 bg-mesh-gradient"></div>
 
     <!-- Sidebar -->
     <AppSidebar />
@@ -9,9 +9,7 @@
     <!-- Main Content Area -->
     <div
       class="relative min-h-screen transition-all duration-300"
-      :class="[
-        sidebarCollapsed ? 'lg:ml-[72px]' : 'lg:ml-64',
-      ]"
+      :class="[sidebarCollapsed ? 'lg:ml-[72px]' : 'lg:ml-64']"
     >
       <!-- Header -->
       <AppHeader />
@@ -25,12 +23,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useAppStore } from '@/stores';
-import AppSidebar from './AppSidebar.vue';
-import AppHeader from './AppHeader.vue';
+import { computed } from 'vue'
+import { useAppStore } from '@/stores'
+import AppSidebar from './AppSidebar.vue'
+import AppHeader from './AppHeader.vue'
 
-const appStore = useAppStore();
-const sidebarCollapsed = computed(() => appStore.sidebarCollapsed);
+const appStore = useAppStore()
+const sidebarCollapsed = computed(() => appStore.sidebarCollapsed)
 </script>
-