feat(projects): theme store完成

src/layouts/BasicLayout/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <soybean-layout
+    :mode="mode"
+    :fixed-header-and-tab="theme.fixedHeaderAndTab"
+    :header-height="theme.header.height"
+    :tab-visible="theme.tab.visible"
+    :tab-height="theme.tab.height"
+    :sider-visible="siderVisible"
+    :sider-width="siderWidth"
+    :sider-collapsed-width="siderCollapsedWidth"
+    :sider-collapse="false"
+    :fixed-footer="theme.footer.fixed"
+  >
+    <template #header>
+      <global-header />
+    </template>
+    <template #tab>
+      <global-tab />
+    </template>
+    <template #sider>
+      <global-sider />
+    </template>
+    <global-content />
+    <template #footer>
+      <global-footer />
+    </template>
+  </soybean-layout>
+  <setting-drawer />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useAppStore, useThemeStore } from '@/store';
+import { SoybeanLayout } from '@/package';
+import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
+
+const app = useAppStore();
+const theme = useThemeStore();
+
+const siderVisible = computed(() => theme.layout.mode !== 'horizontal');
+
+type LayoutMode = 'vertical' | 'horizontal';
+const mode = computed(() => {
+  const vertical: LayoutMode = 'vertical';
+  const horizontal: LayoutMode = 'horizontal';
+  return theme.layout.mode.includes(vertical) ? vertical : horizontal;
+});
+
+const siderWidth = computed(() => {
+  const { width, mixWidth, mixChildMenuWidth } = theme.sider;
+  const isVerticalMix = theme.layout.mode === 'vertical-mix';
+  let w = isVerticalMix ? mixWidth : width;
+  if (isVerticalMix && app.mixSiderFixed) {
+    w += mixChildMenuWidth;
+  }
+  return w;
+});
+
+const siderCollapsedWidth = computed(() => {
+  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = theme.sider;
+  const isVerticalMix = theme.layout.mode === 'vertical-mix';
+  let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth;
+  if (isVerticalMix && app.mixSiderFixed) {
+    w += mixChildMenuWidth;
+  }
+  return w;
+});
+</script>
+<style scoped></style>

src/layouts/BlankLayout/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <global-content />
+</template>
+
+<script setup lang="ts">
+import { GlobalContent } from '../common';
+</script>
+<style scoped></style>

src/layouts/Layout/index.vue

@@ -1,81 +1,69 @@
 <template>
-  <soybean-layout :mode="mode" :fixed-header-and-tab="fixed" :fixed-footer="fixedFooter" :sider-collapse="collapse">
+  <soybean-layout
+    :mode="mode"
+    :fixed-header-and-tab="theme.fixedHeaderAndTab"
+    :header-height="theme.header.height"
+    :tab-visible="theme.tab.visible"
+    :tab-height="theme.tab.height"
+    :sider-visible="siderVisible"
+    :sider-width="siderWidth"
+    :sider-collapsed-width="siderCollapsedWidth"
+    :sider-collapse="false"
+    :fixed-footer="theme.footer.fixed"
+  >
     <template #header>
-      <div class="flex justify-end h-full bg-red-600">
-        <h3 class="text-white">Header</h3>
-      </div>
+      <global-header />
     </template>
     <template #tab>
-      <div class="h-full bg-green-600"></div>
+      <global-tab />
     </template>
     <template #sider>
-      <div class="w-full h-full bg-gray-200">
-        <n-space :vertical="true" align="center" class="pt-24px">
-          <n-button type="primary" @click="toggle">折叠</n-button>
-          <div>
-            <span class="pr-12px">固定头部和标签</span>
-            <n-switch v-model:value="fixed" />
-          </div>
-          <div>
-            <span class="pr-12px">固定底部</span>
-            <n-switch v-model:value="fixedFooter" />
-          </div>
-          <div>
-            <span class="pr-12px">vertical布局</span>
-            <n-radio-group v-model:value="mode">
-              <n-radio v-for="item in radios" :key="item.value" :value="item.value">
-                {{ item.label }}
-              </n-radio>
-            </n-radio-group>
-          </div>
-        </n-space>
-      </div>
+      <global-sider />
     </template>
     <global-content />
     <template #footer>
-      <div class="h-full bg-blue-400">
-        <h3>footer</h3>
-      </div>
+      <global-footer />
     </template>
   </soybean-layout>
   <setting-drawer />
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { NSpace, NButton, NSwitch, NRadioGroup, NRadio } from 'naive-ui';
-import { useElementSize } from '@vueuse/core';
-import { useBoolean } from '@/hooks';
+import { computed } from 'vue';
+import { useAppStore, useThemeStore } from '@/store';
 import { SoybeanLayout } from '@/package';
-import { SettingDrawer, GlobalContent } from '../common';
+import { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter } from '../common';
+
+const app = useAppStore();
+const theme = useThemeStore();
+
+const siderVisible = computed(() => theme.layout.mode !== 'horizontal');
 
 type LayoutMode = 'vertical' | 'horizontal';
+const mode = computed(() => {
+  const vertical: LayoutMode = 'vertical';
+  const horizontal: LayoutMode = 'horizontal';
+  return theme.layout.mode.includes(vertical) ? vertical : horizontal;
+});
 
-interface ModeRadio {
-  value: LayoutMode;
-  label: string;
-}
-
-const { width } = useElementSize(document.documentElement);
-const { bool: collapse, toggle } = useBoolean();
-
-const minWidthOfLayout = 1200;
-
-const fixed = ref(true);
-const fixedFooter = ref(true);
-const mode = ref<LayoutMode>('vertical');
-
-const radios: ModeRadio[] = [
-  { value: 'vertical', label: 'vertical' },
-  { value: 'horizontal', label: 'horizontal' }
-];
-
-watch(width, newValue => {
-  if (newValue < minWidthOfLayout) {
-    document.documentElement.style.overflowX = 'auto';
-  } else {
-    document.documentElement.style.overflowX = 'hidden';
+const siderWidth = computed(() => {
+  const { width, mixWidth, mixChildMenuWidth } = theme.sider;
+  const isVerticalMix = theme.layout.mode === 'vertical-mix';
+  let w = isVerticalMix ? mixWidth : width;
+  if (isVerticalMix && app.mixSiderFixed) {
+    w += mixChildMenuWidth;
   }
+  return w;
+});
+
+const siderCollapsedWidth = computed(() => {
+  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = theme.sider;
+  const isVerticalMix = theme.layout.mode === 'vertical-mix';
+  let w = isVerticalMix ? mixCollapsedWidth : collapsedWidth;
+  if (isVerticalMix && app.mixSiderFixed) {
+    w += mixChildMenuWidth;
+  }
+  return w;
 });
 </script>
 <style scoped></style>

src/layouts/common/GlobalFooter/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <dark-mode-container class="flex-center h-full">
+    <span>Copyright ©2021 Soybean Admin</span>
+  </dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped></style>

src/layouts/common/GlobalHeader/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <dark-mode-container class="global-header flex-y-center h-full"></dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped>
+.global-header {
+  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
+}
+</style>

src/layouts/common/GlobalSider/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <dark-mode-container class="global-sider flex-y-center h-full"></dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped>
+.global-sider {
+  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+}
+</style>

src/layouts/common/GlobalTab/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <dark-mode-container class="global-tab flex-y-center h-full"></dark-mode-container>
+</template>
+
+<script setup lang="ts">
+import { DarkModeContainer } from '@/components';
+</script>
+<style scoped>
+.global-tab {
+  box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
+}
+</style>

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -1,10 +1,12 @@
 <template>
   <n-button
-    class="fixed top-240px right-14px z-10000"
-    :class="{ '!right-330px': app.settingDrawerVisible }"
+    type="primary"
+    :class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
+    class="fixed top-240px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
     @click="toggleSettingdrawerVisible"
   >
-    点击
+    <icon-ant-design:close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
+    <icon-ant-design:setting-outlined v-else class="text-24px" />
   </n-button>
 </template>
 

src/layouts/common/index.ts

@@ -1,4 +1,8 @@
 import SettingDrawer from './SettingDrawer/index.vue';
+import GlobalHeader from './GlobalHeader/index.vue';
+import GlobalTab from './GlobalTab/index.vue';
+import GlobalSider from './GlobalSider/index.vue';
 import GlobalContent from './GlobalContent/index.vue';
+import GlobalFooter from './GlobalFooter/index.vue';
 
-export { SettingDrawer, GlobalContent };
+export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter };

src/layouts/index.ts

@@ -1,3 +1,5 @@
 import Layout from './Layout/index.vue';
+import BasicLayout from './BasicLayout/index.vue';
+import BlankLayout from './BlankLayout/index.vue';
 
-export { Layout };
+export { Layout, BasicLayout, BlankLayout };