feat(projects): 1.0 beta

src/layouts/modules/global-header/components/theme-button.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'ThemeButton'
+});
+
+const appStore = useAppStore();
+</script>
+
+<template>
+  <ButtonIcon
+    icon="majesticons:color-swatch-line"
+    :tooltip-content="$t('icon.themeConfig')"
+    @click="appStore.openThemeDrawer"
+  />
+</template>
+
+<style scoped></style>

src/layouts/modules/global-header/components/user-avatar.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { VNode } from 'vue';
+import { useSvgIconRender } from '@sa/hooks';
+import { useAuthStore } from '@/store/modules/auth';
+import { useRouterPush } from '@/hooks/common/router';
+import { $t } from '@/locales';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+
+defineOptions({
+  name: 'UserAvatar'
+});
+
+const authStore = useAuthStore();
+const { routerPushByKey, toLogin } = useRouterPush();
+const { SvgIconVNode } = useSvgIconRender(SvgIcon);
+
+function loginOrRegister() {
+  toLogin();
+}
+
+type DropdownKey = 'user-center' | 'logout';
+
+type DropdownOption =
+  | {
+      key: DropdownKey;
+      label: string;
+      icon?: () => VNode;
+    }
+  | {
+      type: 'divider';
+      key: string;
+    };
+
+const options = computed(() => {
+  const opts: DropdownOption[] = [
+    {
+      label: $t('common.userCenter'),
+      key: 'user-center',
+      icon: SvgIconVNode({ icon: 'ph:user-circle', fontSize: 18 })
+    },
+    {
+      type: 'divider',
+      key: 'divider'
+    },
+    {
+      label: $t('common.logout'),
+      key: 'logout',
+      icon: SvgIconVNode({ icon: 'ph:sign-out', fontSize: 18 })
+    }
+  ];
+
+  return opts;
+});
+
+function logout() {
+  window.$dialog?.info({
+    title: $t('common.tip'),
+    content: $t('common.logoutConfirm'),
+    positiveText: $t('common.confirm'),
+    negativeText: $t('common.cancel'),
+    onPositiveClick: () => {
+      authStore.resetStore();
+    }
+  });
+}
+
+function handleDropdown(key: DropdownKey) {
+  if (key === 'logout') {
+    logout();
+  } else {
+    routerPushByKey(key);
+  }
+}
+</script>
+
+<template>
+  <NButton v-if="!authStore.isLogin" quaternary @click="loginOrRegister">
+    {{ $t('page.login.common.loginOrRegister') }}
+  </NButton>
+  <NDropdown v-else placement="bottom" trigger="click" :options="options" @select="handleDropdown">
+    <div>
+      <ButtonIcon>
+        <SvgIcon icon="ph:user-circle" class="text-icon-large" />
+        <span class="text-16px font-medium">{{ authStore.userInfo.userName }}</span>
+      </ButtonIcon>
+    </div>
+  </NDropdown>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-header/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useFullscreen } from '@vueuse/core';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import HorizontalMenu from '../global-menu/base-menu.vue';
+import GlobalLogo from '../global-logo/index.vue';
+import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
+import ThemeButton from './components/theme-button.vue';
+import UserAvatar from './components/user-avatar.vue';
+import { useMixMenuContext } from '../../hooks/use-mix-menu';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { isFullscreen, toggle } = useFullscreen();
+const { menus } = useMixMenuContext();
+
+defineOptions({
+  name: 'GlobalHeader'
+});
+
+interface Props {
+  /**
+   * whether to show the logo
+   */
+  showLogo?: App.Global.HeaderProps['showLogo'];
+  /**
+   * whether to show the menu toggler
+   */
+  showMenuToggler?: App.Global.HeaderProps['showMenuToggler'];
+  /**
+   * whether to show the menu
+   */
+  showMenu?: App.Global.HeaderProps['showMenu'];
+}
+
+defineProps<Props>();
+
+const headerMenus = computed(() => {
+  if (themeStore.layout.mode === 'horizontal') {
+    return routeStore.menus;
+  }
+
+  if (themeStore.layout.mode === 'horizontal-mix') {
+    return menus.value;
+  }
+
+  return [];
+});
+</script>
+
+<template>
+  <DarkModeContainer class="flex-y-center h-full shadow-header">
+    <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
+    <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
+    <div v-else class="flex-1-hidden flex-y-center h-full">
+      <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
+      <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
+    </div>
+    <div class="flex-y-center justify-end h-full">
+      <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
+      <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
+      <ThemeSchemaSwitch
+        :theme-schema="themeStore.themeScheme"
+        :is-dark="themeStore.darkMode"
+        @switch="themeStore.toggleThemeScheme"
+      />
+      <ThemeButton />
+      <UserAvatar />
+    </div>
+  </DarkModeContainer>
+</template>
+
+<style scoped></style>