💄 完善布局组件

package.json

@@ -14,6 +14,12 @@
   },
   "dependencies": {
     "@unocss/reset": "^0.60.3",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.34.0",
+    "@vue-flow/minimap": "^1.4.1",
+    "@vue-flow/node-resizer": "^1.3.6",
+    "@vue-flow/node-toolbar": "^1.1.0",
     "@vueuse/core": "^10.9.0",
     "colord": "^2.9.3",
     "dayjs": "^1.11.11",

src/components/card/YCard.vue

@@ -48,14 +48,11 @@ function handleFullscreen() {
     </template>
 
     <template
-      v-for="(_, key) in slots"
+      v-for="(_, key) in omit(slots, ['header-extra', 'footer'])"
       :key="key"
       #[key]
     >
-      <slot
-        v-if="!['header-extra', 'footeer'].includes(key)"
-        :name="key"
-      />
+      <slot :name="key" />
     </template>
 
     <template #footer>

src/layouts/blank.vue

@@ -0,0 +1,3 @@
+<template>
+  <YRouterView />
+</template>

src/layouts/components/header/CollapseButton.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import HeaderButton from '../header/HeaderButton.vue'
+
+const { setting } = useThemeSetting()
+const collapsed = computed(() => setting.value.sider.collapsed)
+
+function toggle() {
+  setting.value.sider.collapsed = !collapsed.value
+}
+</script>
+
+<template>
+  <HeaderButton @click="toggle">
+    <template #trigger>
+      <div :class="collapsed ? 'i-icon-park-outline-expand-left' : 'i-icon-park-outline-expand-right'" />
+    </template>
+    {{ collapsed ? '展开' : '折叠' }}菜单
+  </HeaderButton>
+</template>

src/layouts/components/header/FullscreenButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import HeaderButton from '../header/HeaderButton.vue'
+
+const { isFullscreen, toggle } = useFullscreen()
+</script>
+
+<template>
+  <HeaderButton @click="toggle">
+    <template #trigger>
+      <div :class="isFullscreen ? 'i-icon-park-outline-off-screen' : 'i-icon-park-outline-full-screen'" />
+    </template>
+    全屏切换
+  </HeaderButton>
+</template>

src/layouts/components/header/HeaderButton.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const emits = defineEmits<{
+  click: []
+}>()
+
+const { setting } = useThemeSetting()
+const mode = useColorMode()
+const isDark = computed(() => mode.value === 'dark')
+
+function handleClick() {
+  emits('click')
+}
+</script>
+
+<template>
+  <NTooltip>
+    <template #trigger>
+      <div
+        :class="{
+          'hover:bg-#ffffff1f': !isDark && setting?.header.inverted,
+        }"
+        class="h-32px w-32px flex-center cursor-pointer rounded-8px bg-#2e33380d transition-300 dark:bg-#ffffff14 hover:bg-#2e333817 dark:hover:bg-#ffffff1f"
+        @click="handleClick"
+      >
+        <slot name="trigger" />
+      </div>
+    </template>
+    <slot />
+  </NTooltip>
+</template>

src/layouts/components/LayoutSetting.vue → src/layouts/components/header/LayoutSetting.vue

@@ -10,13 +10,13 @@ defineProps<{
 const show = defineModel<boolean>('show')
 
 const message = useMessage()
-const mode = useColorMode()
-const isDark = computed(() => mode.value === 'dark')
+const { store } = useColorMode()
+const isDark = computed(() => store.value === 'dark')
 const { setting } = useThemeSetting()
 const { copy } = useClipboard()
 
 async function handleUpdateValue(val: 'light' | 'dark' | 'auto') {
-  mode.value = val
+  store.value = val
   setting.value.themeMode = val
 }
 
@@ -46,7 +46,7 @@ function handleCopySetting() {
         主题模式
       </NDivider>
       <NTabs
-        :value="setting.themeMode"
+        :value="store"
         type="segment"
         class="mb-12px"
         @update:value="handleUpdateValue"
@@ -118,6 +118,9 @@ function handleCopySetting() {
             class="w-140px"
           />
         </NFormItem>
+        <NFormItem label="折叠侧边栏">
+          <NSwitch v-model:value="setting.sider.collapsed" />
+        </NFormItem>
         <NFormItem
           v-if="!isDark"
           label="深色侧边栏"
@@ -151,35 +154,35 @@ function handleCopySetting() {
       </NDivider>
       <NFormItem label="主色">
         <NColorPicker
-          v-model:value="setting.themeColor.primaryColor"
+          v-model:value="setting.lightThemeColor.primaryColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="信息色">
         <NColorPicker
-          v-model:value="setting.themeColor.infoColor"
+          v-model:value="setting.lightThemeColor.infoColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="成功色">
         <NColorPicker
-          v-model:value="setting.themeColor.successColor"
+          v-model:value="setting.lightThemeColor.successColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="警告色">
         <NColorPicker
-          v-model:value="setting.themeColor.warningColor"
+          v-model:value="setting.lightThemeColor.warningColor"
           :show-alpha="false"
           class="w-90px"
         />
       </NFormItem>
       <NFormItem label="错误色">
         <NColorPicker
-          v-model:value="setting.themeColor.errorColor"
+          v-model:value="setting.lightThemeColor.errorColor"
           :show-alpha="false"
           class="w-90px"
         />

src/layouts/components/header/ThemeModeButton.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import HeaderButton from './HeaderButton.vue'
+
+const mode = useColorMode()
+const isDark = computed(() => mode.value === 'dark')
+function toggle() {
+  mode.value = isDark.value ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <HeaderButton @click="toggle">
+    <template #trigger>
+      <div :class="isDark ? 'i-icon-park-outline-moon' : 'i-icon-park-outline-sun-one'" />
+    </template>
+    主题切换
+  </HeaderButton>
+</template>

src/layouts/components/header/ThemeSettingButton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import HeaderButton from './HeaderButton.vue'
+import LayoutSetting from './LayoutSetting.vue'
+
+const [show, toggleShow] = useToggle(false)
+</script>
+
+<template>
+  <HeaderButton @click="toggleShow(true)">
+    <template #trigger>
+      <div class="i-icon-park-outline-platte" />
+    </template>
+    主题配置
+  </HeaderButton>
+
+  <LayoutSetting v-model:show="show" />
+</template>