feat: add BaseLayoutItem component to switch layout mode

flingyp · Jun 12, 2023 · 082d53b · 082d53b
1 parent 14a74fe
commit 082d53b
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 30 deletions.
diff --git a/src/layout/components/layout/BaseLayoutItem.vue b/src/layout/components/layout/BaseLayoutItem.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { LayoutMode } from '~/vadmire.config'
+
+interface BaseLayoutItemProps {
+  mode: LayoutMode
+}
+
+defineProps<BaseLayoutItemProps>()
+defineEmits(['updateLayoutMode'])
+
+const { layoutMode } = storeToRefs(useVAdmireConfigStore())
+</script>
+
+<template>
+  <div
+    class="
+      p-1 h-16 border rounded transition duration-500
+      hover:border-primaryHover dark:hover:border-primaryHover
+    "
+    :class="{
+      'border-primarySuppl dark:border-primarySuppl': mode === layoutMode,
+      'border-vBorderLight dark:border-vBorderDark': mode !== layoutMode
+    }"
+  >
+    <div
+      v-if="mode === 'SIDER_MENU'"
+      class="relative h-full cursor-pointer"
+      @click="$emit('updateLayoutMode', mode)"
+    >
+      <div class="absolute w-2.5 h-full left-0 bg-primary rounded-sm opacity-80" />
+      <div class="absolute w-5/6 right-0 h-2 bg-primary rounded-sm opacity-60" />
+      <div class="absolute w-5/6 h-[calc(100%-8px)] top-2.5 right-0 bg-primary rounded-sm opacity-30" />
+    </div>
+
+    <div
+      v-if="mode === 'TOP_MENU'"
+      class="relative h-full cursor-pointer"
+      @click="$emit('updateLayoutMode', mode)"
+    >
+      <div class="absolute w-full h-2 bg-primary rounded-sm opacity-60" />
+      <div class="absolute w-full h-[calc(100%-8px)] top-2.5 right-0 bg-primary rounded-sm opacity-30" />
+    </div>
+
+    <div
+      v-if="mode === 'SIDER_MIX_MENU'"
+      class="relative h-full cursor-pointer"
+      @click="$emit('updateLayoutMode', mode)"
+    >
+      <div class="absolute w-2.5 h-[calc(100%-8px)] top-2.5 left-0 bg-primary rounded-sm opacity-80" />
+      <div class="absolute w-full h-2 bg-primary rounded-sm opacity-60" />
+      <div class="absolute w-[calc(100%-12px)] h-[calc(100%-8px)] top-2.5 left-3 bg-primary rounded-sm opacity-30" />
+    </div>
+  </div>
+</template>
diff --git a/src/layout/components/setting/BaseLayoutMode.vue b/src/layout/components/setting/BaseLayoutMode.vue
@@ -1,40 +1,27 @@
-<script setup lang="ts">import { LayoutMode } from '~/vadmire.config'
+<script setup lang="ts">
+import { LayoutMode } from '~/vadmire.config'
+import BaseLayoutItem from '../layout/BaseLayoutItem.vue'
 
 const vadmireConfigStore = useVAdmireConfigStore()
 
-interface LayoutItem {
-  key: LayoutMode,
-  value: string
-}
-// layout list
-const systemLayoutOption: LayoutItem[] = [
-  {
-    key: 'SIDER_MENU',
-    value: '左侧菜单',
-  },
-  {
-    key: 'TOP_MENU',
-    value: '顶部菜单',
-  },
-  {
-    key: 'SIDER_MIX_MENU',
-    value: '顶部混合菜单',
-  },
-]
-const changeLayoutMode = (mode: LayoutMode) => {
+const updateLayoutMode = (mode: LayoutMode) => {
   vadmireConfigStore.layoutMode = mode
 }
 </script>
 
 <template>
-  <div class="w-full grid grid-cols-1 space-y-2">
-    <NButton
-      v-for="item in systemLayoutOption"
-      :key="item.key"
-      :type="vadmireConfigStore.layoutMode === item.key ? 'primary' : 'default'"
-      @click="changeLayoutMode(item.key)"
-    >
-      {{ item.value }}
-    </NButton>
+  <div class="w-full grid grid-cols-3 gap-x-2">
+    <BaseLayoutItem
+      mode="SIDER_MENU"
+      @update-layout-mode="updateLayoutMode"
+    />
+    <BaseLayoutItem
+      mode="TOP_MENU"
+      @update-layout-mode="updateLayoutMode"
+    />
+    <BaseLayoutItem
+      mode="SIDER_MIX_MENU"
+      @update-layout-mode="updateLayoutMode"
+    />
   </div>
 </template>