💥 破坏性更新 咱不推荐更新

layouts/full/header/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useDark, useToggle, useFullscreen } from '@vueuse/core'
+import {useAppStore} from "~/stores/admin/app";
+
+const appStore = useAppStore()
+const isDark = useDark()
+const toggleDark = () => {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
+
+const { isFullscreen, toggle } = useFullscreen()
+
+function handleLinkClick(link:string) {
+  window.open(link)
+}
+</script>
+
+<template>
+  <CommonAppCard class="flex items-center px-12" border-b="1px solid light_border dark:dark_border">
+    <MenuCollapse />
+
+    <BreadCrumb />
+
+    <div class="ml-auto flex flex-shrink-0 items-center px-12 text-18" >
+      <n-popover trigger="hover">
+        <template #trigger>
+          <div class="mr-16 f-c-c cursor-pointer rounded-4 p-6 text-22 transition-all-300 auto-bg-hover" @click="toggleDark">
+            <!-- 根据 isDark 条件动态切换图标 -->
+            <IconMoon v-if="isDark" />
+            <IconSun v-else />
+          </div>
+        </template>
+        <!-- 根据 isDark 条件动态切换提示文本 -->
+        <span>{{ isDark ? '夜间模式' : '日间模式' }}</span>
+      </n-popover>
+
+
+      <n-popover trigger="hover">
+        <template #trigger>
+          <div class="mr-16 f-c-c cursor-pointer rounded-4 p-6 text-22 transition-all-300 auto-bg-hover" @click="toggle">
+            <IconMinimize v-if="isFullscreen" />
+            <IconMaximize v-else />
+          </div>
+        </template>
+        <span>{{ isFullscreen ? '退出全屏' : '全屏模式' }}</span>
+      </n-popover>
+
+      <UserAvatar />
+    </div>
+  </CommonAppCard>
+</template>
+
+<style scoped>
+
+</style>

layouts/full/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import AppTab from '@/layouts/components/tab/index'
+import SideBar from './sidebar/index.vue'
+import AppHeader from './header/index.vue'
+import {useAppStore} from "~/stores/admin/app";
+
+const appStore = useAppStore()
+</script>
+
+<template>
+  <div class="wh-full flex">
+    <aside
+        class="flex-col flex-shrink-0 transition-width-300"
+        :class="appStore.collapsed ? 'w-64' : 'w-220'"
+        border-r="1px solid light_border dark:dark_border"
+    >
+      <SideBar />
+    </aside>
+
+    <article class="w-0 flex-col flex-1">
+      <AppHeader class="h-60 flex-shrink-0" />
+      <div class="p-12" border-b="1px solid light_border dark:dark_border">
+        <AppTab class="flex-shrink-0" />
+      </div>
+      <slot />
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.collapsed {
+  width: 64px;
+}
+</style>

layouts/full/sidebar/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <SideLogo border-b="1px solid light_border dark:dark_border" />
+  <SideMenu class="cus-scroll-y mt-4 h-0 flex-1" />
+</template>
+
+<style scoped>
+
+</style>