chore: initial commit

src/layouts/base-layout/base-layout-header.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const collapsed = defineModel<boolean>('collapsed');
+const buttonRef = useTemplateRef('buttonRef');
+const appStore = useAppStore();
+function toggleCollapsed() {
+  // https://github.com/tusen-ai/naive-ui/issues/3688
+  // hover style 鼠标移出就会消失 如果是点击 button 会聚焦需要失去焦点才会恢复
+  buttonRef.value?.$el.blur();
+  collapsed.value = !collapsed.value;
+}
+
+const themeLabels: Record<AppThemeMode, string> = {
+  light: '浅色',
+  dark: '深色',
+  system: '跟随系统',
+};
+</script>
+
+<template>
+  <div class="h-full flex items-center justify-between px-12px shadow-header dark:shadow-gray-700">
+    <NTooltip :disabled="appStore.isMobile" placement="bottom-start">
+      {{ collapsed ? '展开菜单' : '收起菜单' }}
+      <template #trigger>
+        <NButton ref="buttonRef" quaternary @click="toggleCollapsed">
+          <icon-line-md:menu-fold-right v-if="collapsed" w-4.5 h-4.5 />
+          <icon-line-md:menu-fold-left v-else w-4.5 h-4.5 />
+        </NButton>
+      </template>
+    </NTooltip>
+
+    <NTooltip :disabled="appStore.isMobile" placement="bottom-end">
+      {{ themeLabels[appStore.themeMode] }}
+      <template #trigger>
+        <NButton quaternary @click="appStore.cycleTheme">
+          <icon-line-md:sunny-filled-loop-to-moon-filled-loop-transition
+            v-if="appStore.themeMode === 'light'"
+            w-4.5
+            h-4.5
+          />
+          <icon-line-md:moon-filled-to-sunny-filled-loop-transition
+            v-else-if="appStore.themeMode === 'dark'"
+            w-4.5
+            h-4.5
+          />
+          <icon-line-md:computer v-else w-4.5 h-4.5 />
+        </NButton>
+      </template>
+    </NTooltip>
+  </div>
+</template>

src/layouts/base-layout/base-layout.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { AdminLayout } from '@sa/materials';
+import BaseLayoutHeader from './base-layout-header.vue';
+
+const siderCollapse = ref(false);
+const appStore = useAppStore();
+</script>
+
+<template>
+  <AdminLayout :is-mobile="appStore.isMobile" v-model:sider-collapse="siderCollapse">
+    <template #header>
+      <BaseLayoutHeader v-model:collapsed="siderCollapse" />
+    </template>
+    <template #tab>
+      <div class="bg-green-100 dark:bg-green-900 text-green-900 dark:text-green-100 p-4">
+        2#GlobalTab
+      </div>
+    </template>
+    <template #sider>
+      <div
+        class="bg-purple-100 dark:bg-purple-900 text-purple-900 dark:text-purple-100 p-4 h-full overflow-hidden"
+      >
+        3#GlobalSider
+      </div>
+    </template>
+    <div class="bg-yellow-100 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100 p-4">
+      4#GlobalMenu
+    </div>
+    <!-- <div>GlobalContent</div> -->
+    <RouterView />
+    <!-- <div>ThemeDrawer</div> -->
+    <template #footer>
+      <div class="bg-red-100 dark:bg-red-900 text-red-900 dark:text-red-100 h-full">
+        5#GlobalFooter
+      </div>
+    </template>
+  </AdminLayout>
+</template>
+
+<style lang="scss">
+#__SCROLL_EL_ID__ {
+  @include scrollbar;
+}
+</style>