feat(projects): 1.0 beta

src/layouts/modules/global-menu/base-menu.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import type { MenuProps, MentionOption } from 'naive-ui';
+import { SimpleScrollbar } from '@sa/materials';
+import type { RouteKey } from '@elegant-router/types';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'BaseMenu'
+});
+
+interface Props {
+  darkTheme?: boolean;
+  mode?: MenuProps['mode'];
+  menus: App.Global.Menu[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'vertical'
+});
+
+const route = useRoute();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKey } = useRouterPush();
+
+const naiveMenus = computed(() => props.menus as unknown as MentionOption[]);
+
+const isHorizontal = computed(() => props.mode === 'horizontal');
+
+const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);
+
+const menuHeightStyle = computed(() =>
+  isHorizontal.value ? { '--n-item-height': `${themeStore.header.height}px` } : {}
+);
+
+const selectedKey = computed(() => {
+  const { hideInMenu, activeMenu } = route.meta;
+  const name = route.name as string;
+
+  const routeName = (hideInMenu ? activeMenu : name) || name;
+
+  return routeName;
+});
+
+const expandedKeys = ref<string[]>([]);
+
+function updateExpandedKeys() {
+  if (isHorizontal.value || siderCollapse.value || !selectedKey.value) {
+    expandedKeys.value = [];
+    return;
+  }
+  expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
+}
+
+function handleClickMenu(key: RouteKey) {
+  routerPushByKey(key);
+}
+
+watch(
+  () => route.name,
+  () => {
+    updateExpandedKeys();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <NMenu
+      v-model:expanded-keys="expandedKeys"
+      :mode="mode"
+      :value="selectedKey"
+      :collapsed="siderCollapse"
+      :collapsed-width="themeStore.sider.collapsedWidth"
+      :collapsed-icon-size="22"
+      :options="naiveMenus"
+      :inverted="darkTheme"
+      :inline-indent="18"
+      class="transition-300"
+      :style="menuHeightStyle"
+      @update:value="handleClickMenu"
+    />
+  </SimpleScrollbar>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/first-level-menu.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { createReusableTemplate } from '@vueuse/core';
+import { SimpleScrollbar } from '@sa/materials';
+import { transformColorWithOpacity } from '@sa/utils';
+import { useAppStore } from '@/store/modules/app';
+import { useRouteStore } from '@/store/modules/route';
+import { useThemeStore } from '@/store/modules/theme';
+
+defineOptions({
+  name: 'FirstLevelMenu'
+});
+
+interface Props {
+  activeMenuKey?: string;
+  inverted?: boolean;
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'select', menu: App.Global.Menu): boolean;
+}
+
+const emit = defineEmits<Emits>();
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+
+interface MixMenuItemProps {
+  /**
+   *  menu item label
+   */
+  label: App.Global.Menu['label'];
+  /**
+   *  menu item icon
+   */
+  icon: App.Global.Menu['icon'];
+  /**
+   * active menu item
+   */
+  active: boolean;
+  /**
+   * mini size
+   */
+  isMini: boolean;
+}
+const [DefineMixMenuItem, MixMenuItem] = createReusableTemplate<MixMenuItemProps>();
+
+const selectedBgColor = computed(() => {
+  const { darkMode, themeColor } = themeStore;
+
+  const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
+  const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
+
+  return darkMode ? dark : light;
+});
+
+function handleClickMixMenu(menu: App.Global.Menu) {
+  emit('select', menu);
+}
+</script>
+
+<template>
+  <!-- define component: MixMenuItem -->
+  <DefineMixMenuItem v-slot="{ label, icon, active, isMini }">
+    <div
+      class="flex-vertical-center mx-4px mb-6px py-8px px-4px rounded-8px bg-transparent transition-300 cursor-pointer hover:bg-[rgb(0,0,0,0.08)]"
+      :class="{
+        'text-primary selected-mix-menu': active,
+        'text-white:65 hover:text-white': inverted,
+        '!text-white !bg-primary': active && inverted
+      }"
+    >
+      <component :is="icon" :class="[isMini ? 'text-icon-small' : 'text-icon-large']" />
+      <p
+        class="w-full text-center ellipsis-text text-12px transition-height-300"
+        :class="[isMini ? 'h-0 pt-0' : 'h-24px pt-4px']"
+      >
+        {{ label }}
+      </p>
+    </div>
+  </DefineMixMenuItem>
+
+  <!-- template -->
+  <div class="flex-1-hidden flex-vertical-stretch h-full">
+    <slot></slot>
+    <SimpleScrollbar>
+      <MixMenuItem
+        v-for="menu in routeStore.menus"
+        :key="menu.key"
+        :label="menu.label"
+        :icon="menu.icon"
+        :active="menu.key === activeMenuKey"
+        :is-mini="appStore.siderCollapse"
+        @click="handleClickMixMenu(menu)"
+      />
+    </SimpleScrollbar>
+    <MenuToggler
+      arrow-icon
+      :collapsed="appStore.siderCollapse"
+      :class="{ 'text-white:88 !hover:text-white': inverted }"
+      @click="appStore.toggleSiderCollapse"
+    />
+  </div>
+</template>
+
+<style scoped>
+.selected-mix-menu {
+  background-color: v-bind(selectedBgColor);
+}
+</style>

src/layouts/modules/global-menu/horizontal-mix-menu.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import FirstLevelMenu from './first-level-menu.vue';
+import { useMixMenuContext } from '../../hooks/use-mix-menu';
+import { useRouterPush } from '@/hooks/common/router';
+
+defineOptions({
+  name: 'HorizontalMixMenu'
+});
+
+const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { routerPushByKey } = useRouterPush();
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (!menu.children?.length) {
+    routerPushByKey(menu.routeKey);
+  }
+}
+</script>
+
+<template>
+  <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" @select="handleSelectMixMenu">
+    <slot></slot>
+  </FirstLevelMenu>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-menu/vertical-mix-menu.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useBoolean } from '@sa/hooks';
+import { useAppStore } from '@/store/modules/app';
+import { useRouteStore } from '@/store/modules/route';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import FirstLevelMenu from './first-level-menu.vue';
+import BaseMenu from './base-menu.vue';
+import { useMixMenu } from '../../hooks/use-mix-menu';
+
+defineOptions({
+  name: 'VerticalMixMenu'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKey } = useRouterPush();
+const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
+const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenu();
+
+const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const menus = computed(() => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []);
+
+const showDrawer = computed(() => (drawerVisible.value && menus.value.length) || appStore.mixSiderFixed);
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (menu.children?.length) {
+    setDrawerVisible(true);
+  } else {
+    routerPushByKey(menu.routeKey);
+  }
+}
+
+function handleResetActiveMenu() {
+  getActiveFirstLevelMenuKey();
+  setDrawerVisible(false);
+}
+</script>
+
+<template>
+  <div class="flex h-full" @mouseleave="handleResetActiveMenu">
+    <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
+      <slot></slot>
+    </FirstLevelMenu>
+    <div
+      class="relative h-full transition-width-300"
+      :style="{ width: appStore.mixSiderFixed ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+    >
+      <DarkModeContainer
+        class="absolute-lt flex-vertical-stretch h-full nowrap-hidden transition-all-300 shadow-sm"
+        :inverted="siderInverted"
+        :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+      >
+        <header class="flex-y-center justify-between" :style="{ height: themeStore.header.height + 'px' }">
+          <h2 class="text-primary pl-8px text-16px font-bold">{{ $t('system.title') }}</h2>
+          <PinToggler
+            :pin="appStore.mixSiderFixed"
+            :class="{ 'text-white:88 !hover:text-white': siderInverted }"
+            @click="appStore.toggleMixSiderFixed"
+          />
+        </header>
+        <BaseMenu :dark-theme="siderInverted" :menus="menus" />
+      </DarkModeContainer>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>