feat(projects): add tab dropdown, FullScreen

.vscode/settings.json

@@ -9,6 +9,7 @@
     "EDITMSG",
     "espree",
     "execa",
+    "gridicons",
     "heroicons",
     "hexcode",
     "iconify",

package.json

@@ -40,14 +40,7 @@
   },
   "devDependencies": {
     "@elegant-router/vue": "0.3.0-beta.6",
-    "@iconify-json/heroicons": "1.1.13",
-    "@iconify-json/ic": "1.1.14",
-    "@iconify-json/icon-park-outline": "1.1.12",
-    "@iconify-json/line-md": "1.1.33",
-    "@iconify-json/logos": "1.1.37",
-    "@iconify-json/material-symbols": "1.1.61",
-    "@iconify-json/ph": "1.1.6",
-    "@iconify-json/tabler": "1.1.96",
+    "@iconify/json": "2.2.138",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
     "@types/lodash-es": "4.17.11",

packages/materials/src/libs/admin-layout/index.vue

@@ -28,21 +28,20 @@
       <!-- Tab -->
       <template v-if="showTab">
         <div
-          v-show="!fullContent"
           :class="[
             style['layout-tab'],
             'flex-shrink-0',
             commonClass,
             tabClass,
-            { 'top-0!': !showHeader },
+            { 'top-0!': fullContent || !showHeader },
             leftGapClass,
             { 'absolute left-0 w-full': fixedHeaderAndTab }
           ]"
         >
           <slot name="tab"></slot>
         </div>
         <div
-          v-show="!fullContent && fixedHeaderAndTab"
+          v-show="fullContent || fixedHeaderAndTab"
           :class="[style['layout-tab-placement'], 'flex-shrink-0 overflow-hidden']"
         ></div>
       </template>

packages/materials/src/libs/page-tab/index.vue

@@ -6,7 +6,7 @@
     <slot></slot>
     <template #suffix>
       <slot name="suffix">
-        <IconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
+        <SvgIconClose v-if="closable" :class="[style['icon_close']]" @click="handleClose" />
       </slot>
     </template>
   </component>
@@ -18,7 +18,7 @@ import type { Component } from 'vue';
 import { createTabCssVars, ACTIVE_COLOR } from './shared';
 import ChromeTab from './chrome-tab.vue';
 import ButtonTab from './button-tab.vue';
-import IconClose from './icon-close.vue';
+import SvgIconClose from './icon-close.vue';
 import style from './index.module.css';
 import type { PageTabProps, PageTabMode } from '../../types';
 

src/components/common/app-loading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getRgbOfColor } from '@sa/utils';
-import { sessionStg } from '@/utils/storage';
 import { $t } from '@/locales';
+import { sessionStg } from '@/utils/storage';
 
 const loadingClasses = [
   'left-0 top-0',

src/components/common/color-schema-switch.vue

@@ -35,4 +35,4 @@ const icon = computed(() => icons[props.colorSchema]);
   </AButton>
 </template>
 
-<style></style>
+<style scoped></style>

src/components/common/dark-mode-container.vue

@@ -3,7 +3,7 @@ defineOptions({ name: 'DarkModeContainer' });
 </script>
 
 <template>
-  <div class="bg-container text-base_text transition-all-300">
+  <div class="bg-container text-base_text transition-300">
     <slot></slot>
   </div>
 </template>

src/components/common/full-screen.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'FullScreen'
+});
+
+interface Props {
+  full?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <AButton type="text" class="h-full text-icon">
+    <icon-gridicons-fullscreen-exit v-if="full" />
+    <icon-gridicons-fullscreen v-else />
+  </AButton>
+</template>
+
+<style scoped></style>

src/components/common/hover-container.vue

@@ -3,7 +3,7 @@ defineOptions({ name: 'HoverContainer' });
 </script>
 
 <template>
-  <div class="bg-container text-base_text transition-all-300">
+  <div class="bg-container text-base_text transition-300">
     <slot></slot>
   </div>
 </template>

src/components/common/system-logo.vue

@@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
 </script>
 
 <template>
-  <IconLocalLogo />
+  <icon-local-logo />
 </template>
 
 <style scoped></style>

src/layouts/base-layout/index.vue

@@ -15,7 +15,7 @@ const app = useAppStore();
 </script>
 
 <template>
-  <AdminLayout :sider-collapse="app.siderCollapse">
+  <AdminLayout :sider-collapse="app.siderCollapse" :full-content="app.fullContent">
     <template #header>
       <GlobalHeader />
     </template>

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

@@ -1,25 +1,32 @@
 <script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
+
 defineOptions({
   name: 'GlobalContent'
 });
 
 interface Props {
-  /** 显示padding */
+  /**
+   * show padding for content
+   */
   showPadding?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   showPadding: true
 });
+
+const app = useAppStore();
 </script>
 
 <template>
   <RouterView v-slot="{ Component, route }">
     <component
       :is="Component"
+      v-if="app.reloadFlag"
       :key="route.path"
       :class="{ 'p-16px': showPadding }"
-      class="flex-grow bg-layout transition-all-300"
+      class="flex-grow bg-layout transition-300"
     />
   </RouterView>
 </template>

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 // import GlobalLogo from '../../components/global-logo.vue';
 import UserAvatar from './components/user-avatar.vue';
 
 const app = useAppStore();
 const themeStore = useThemeStore();
+const { isFullscreen, toggle } = useFullscreen();
 
 defineOptions({
   name: 'GlobalHeader'
@@ -18,6 +20,7 @@ defineOptions({
       <MenuToggler :collapsed="app.siderCollapse" @click="app.toggleSiderCollapse" />
     </div>
     <div class="flex justify-end h-full">
+      <FullScreen :full="isFullscreen" @click="toggle" />
       <LangSwitch :lang="app.locale" :lang-options="app.localeOptions" @change-lang="app.changeLocale" />
       <ColorSchemaSwitch
         :color-schema="themeStore.colorScheme"

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

@@ -61,12 +61,11 @@ function handleClickMenu(menuInfo: MenuInfo) {
 
 <style scoped>
 .menu-wrapper :deep(.ant-menu) {
-  border-inline: none;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --at-apply: border-inline-none transition-300;
 }
 
 .menu-wrapper :deep(.ant-menu-light) {
-  background-color: rgb(var(--container-bg-color));
+  --at-apply: bg-container;
 }
 
 .menu-wrapper :deep(.ant-menu-inline-collapsed > .ant-menu-item) {