feat: add swap component

docs/src/guide/in-depth/theme.md

@@ -239,9 +239,11 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
 
 ```css
 /*  */
-:root {
+.dark,
+.dark[data-theme='custom'],
+.dark[data-theme='default'] {
   /* Background color for <Card /> */
-  --card: 0 0% 30%;
+  --card: 222.34deg 10.43% 12.27%;
 }
 ```
 

internal/node-utils/src/spinner.ts

@@ -1,4 +1,4 @@
-import ora, { Ora } from 'ora';
+import ora, { type Ora } from 'ora';
 
 interface SpinnerOptions {
   failedText?: string;

packages/@core/base/design/src/design-tokens/dark/index.css

@@ -52,12 +52,12 @@
   --secondary-foreground: 0 0% 98%;
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
-  --accent: 240 3.7% 15.9%;
-  --accent-hover: 240 3.7% 20.9%;
+  --accent: 216 5% 19%;
+  --accent-hover: 216 5% 24%;
   --accent-foreground: 0 0% 98%;
 
   /* Darker color */
-  --heavy: 240 3.7% 20.9%;
+  --heavy: 216 5% 24%;
   --heavy-foreground: var(--accent-foreground);
 
   /* Default border color */

packages/@core/base/design/src/design-tokens/default/index.css

@@ -89,7 +89,7 @@
 
   /* menu */
   --sidebar: 0 0% 100%;
-  --sidebar-deep: 210 11.11% 96.47%;
+  --sidebar-deep: 0 0% 100%;
   --menu: var(--sidebar);
 
   accent-color: var(--primary);

packages/@core/ui-kit/layout-ui/src/components/layout-header.vue

@@ -84,7 +84,7 @@ function handleToggleMenu() {
     </div>
     <VbenIconButton
       v-if="showToggleBtn || isMobile"
-      class="my-0 ml-2 mr-1 rounded"
+      class="my-0 ml-2 mr-1 rounded-md"
       @click="handleToggleMenu"
     >
       <Menu class="size-4" />

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -24,9 +24,8 @@ interface Props {
   domVisible?: boolean;
   /**
    * 扩展区域宽度
-   * @default 180
    */
-  extraWidth?: number;
+  extraWidth: number;
   /**
    * 固定扩展区域
    * @default false
@@ -69,13 +68,12 @@ interface Props {
   /**
    * 主题
    */
-  theme?: string;
+  theme: string;
 
   /**
    * 宽度
-   * @default 180
    */
-  width?: number;
+  width: number;
   /**
    * zIndex
    * @default 0
@@ -87,16 +85,13 @@ const props = withDefaults(defineProps<Props>(), {
   collapseHeight: 42,
   collapseWidth: 48,
   domVisible: true,
-  extraWidth: 180,
   fixedExtra: false,
   isSidebarMixed: false,
   marginTop: 0,
   mixedWidth: 70,
   paddingTop: 0,
   show: true,
   showCollapseButton: true,
-  theme: 'dark',
-  width: 180,
   zIndex: 0,
 });
 
@@ -181,10 +176,8 @@ const extraContentStyle = computed((): CSSProperties => {
 });
 
 const collapseStyle = computed((): CSSProperties => {
-  const { collapseHeight } = props;
-
   return {
-    height: `${collapseHeight}px`,
+    height: `${props.collapseHeight}px`,
   };
 });
 

packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts

@@ -0,0 +1,41 @@
+import type { LayoutType } from '@vben-core/typings';
+
+import type { VbenLayoutProps } from '../vben-layout';
+
+import { computed } from 'vue';
+
+export function useLayout(props: VbenLayoutProps) {
+  const currentLayout = computed(() =>
+    props.isMobile ? 'sidebar-nav' : (props.layout as LayoutType),
+  );
+
+  /**
+   * 是否全屏显示content，不需要侧边、底部、顶部、tab区域
+   */
+  const isFullContent = computed(() => currentLayout.value === 'full-content');
+
+  /**
+   * 是否侧边混合模式
+   */
+  const isSidebarMixedNav = computed(
+    () => currentLayout.value === 'sidebar-mixed-nav',
+  );
+
+  /**
+   * 是否为头部导航模式
+   */
+  const isHeaderNav = computed(() => currentLayout.value === 'header-nav');
+
+  /**
+   * 是否为混合导航模式
+   */
+  const isMixedNav = computed(() => currentLayout.value === 'mixed-nav');
+
+  return {
+    currentLayout,
+    isFullContent,
+    isHeaderNav,
+    isMixedNav,
+    isSidebarMixedNav,
+  };
+}

packages/@core/ui-kit/layout-ui/src/vben-layout.ts

@@ -62,12 +62,6 @@ interface VbenLayoutProps {
    * @default 48
    */
   headerHeight?: number;
-  /**
-   * header高度增加高度
-   * 在顶部存在导航时，额外加高header高度
-   * @default 10
-   */
-  headerHeightOffset?: number;
   /**
    * 顶栏是否隐藏
    * @default false
@@ -133,11 +127,7 @@ interface VbenLayoutProps {
    * @default 80
    */
   sidebarMixedWidth?: number;
-  /**
-   * 侧边栏是否半深色
-   * @default false
-   */
-  sidebarSemiDark?: boolean;
+
   /**
    * 侧边栏
    * @default dark