feat: add internal skg infinite canvas

web/canvas-app/src/components/AppHeader.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- App Header | 应用头部 -->
+  <header class="flex items-center justify-between px-4 md:px-8 py-4 border-b border-[var(--border-color)]">
+    <!-- Left slot | 左侧插槽 -->
+    <div class="flex items-center gap-2">
+      <slot name="left">
+        <!-- Default: empty or logo -->
+      </slot>
+    </div>
+    
+    <!-- Right section | 右侧区域 -->
+    <div class="flex items-center gap-4">
+      <!-- Center slot | 中间插槽 -->
+      <slot name="center"></slot>
+      
+      <!-- Theme toggle | 主题切换 -->
+      <button 
+        @click="toggleTheme"
+        class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
+      >
+        <n-icon :size="20">
+          <SunnyOutline v-if="isDark" />
+          <MoonOutline v-else />
+        </n-icon>
+      </button>
+      
+      <!-- Right slot | 右侧插槽 -->
+      <slot name="right"></slot>
+    </div>
+  </header>
+</template>
+
+<script setup>
+/**
+ * App Header component | 应用头部组件
+ * Reusable header with slots for customization
+ */
+import { NIcon } from 'naive-ui'
+import { 
+  SunnyOutline, 
+  MoonOutline
+} from '@vicons/ionicons5'
+import { isDark, toggleTheme } from '../stores/theme'
+</script>