feat(projects): new layout,tab and add update theme settings

src/layouts/basic-layout/index.vue

@@ -1,18 +1,20 @@
 <template>
   <admin-layout
     :mode="mode"
-    :is-mobile="isMobile"
-    :fixed-header-and-tab="theme.fixedHeaderAndTab"
+    :scroll-mode="theme.scrollMode"
+    :scroll-el-id="app.scrollElId"
+    :full-content="app.contentFull"
+    :fixed-top="theme.fixedHeaderAndTab"
     :header-height="theme.header.height"
     :tab-visible="theme.tab.visible"
     :tab-height="theme.tab.height"
+    :content-class="app.disableMainXScroll ? 'overflow-x-hidden' : ''"
     :sider-visible="siderVisible"
+    :sider-collapse="app.siderCollapse"
     :sider-width="siderWidth"
     :sider-collapsed-width="siderCollapsedWidth"
-    :sider-collapse="app.siderCollapse"
-    :fixed-footer="theme.footer.fixed"
     :footer-visible="theme.footer.visible"
-    @update:sider-collapse="app.setSiderCollapse"
+    :fixed-footer="theme.footer.fixed"
   >
     <template #header>
       <global-header v-bind="headerProps" />
@@ -33,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import AdminLayout from '@soybeanjs/vue-admin-layout';
+import { AdminLayout } from '@soybeanjs/vue-materials';
 import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
 import {
@@ -51,7 +53,7 @@ defineOptions({ name: 'BasicLayout' });
 const app = useAppStore();
 const theme = useThemeStore();
 
-const { mode, isMobile, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
+const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
 </script>
 
 <style scoped></style>

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

@@ -1,16 +1,23 @@
 <template>
-  <div
-    :class="{ 'p-16px': showPadding }"
-    class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
-  >
-    <router-view v-slot="{ Component, route }">
-      <transition :name="theme.pageAnimateMode" mode="out-in" :appear="true">
-        <keep-alive :include="routeStore.cacheRoutes">
-          <component :is="Component" v-if="app.reloadFlag" :key="route.fullPath" />
-        </keep-alive>
-      </transition>
-    </router-view>
-  </div>
+  <router-view v-slot="{ Component, route }">
+    <transition
+      :name="theme.pageAnimateMode"
+      mode="out-in"
+      :appear="true"
+      @before-leave="app.setDisableMainXScroll(true)"
+      @after-enter="app.setDisableMainXScroll(false)"
+    >
+      <keep-alive :include="routeStore.cacheRoutes">
+        <component
+          :is="Component"
+          v-if="app.reloadFlag"
+          :key="route.fullPath"
+          :class="{ 'p-16px': showPadding }"
+          class="flex-grow bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
+        />
+      </keep-alive>
+    </transition>
+  </router-view>
 </template>
 
 <script setup lang="ts">

src/layouts/common/global-tab/components/tab-detail/components/context-menu.vue

@@ -59,12 +59,24 @@ function hide() {
   dropdownVisible.value = false;
 }
 
-type DropdownKey = 'reload-current' | 'close-current' | 'close-other' | 'close-left' | 'close-right' | 'close-all';
+type DropdownKey =
+  | 'full-content'
+  | 'reload-current'
+  | 'close-current'
+  | 'close-other'
+  | 'close-left'
+  | 'close-right'
+  | 'close-all';
 type Option = DropdownOption & {
   key: DropdownKey;
 };
 
 const options = computed<Option[]>(() => [
+  {
+    label: '内容全屏',
+    key: 'full-content',
+    icon: iconRender({ icon: 'gridicons-fullscreen' })
+  },
   {
     label: '重新加载',
     key: 'reload-current',
@@ -100,6 +112,12 @@ const options = computed<Option[]>(() => [
 ]);
 
 const actionMap = new Map<DropdownKey, () => void>([
+  [
+    'full-content',
+    () => {
+      app.setContentFull(true);
+    }
+  ],
   [
     'reload-current',
     () => {

src/layouts/common/global-tab/components/tab-detail/index.vue

@@ -1,25 +1,26 @@
 <template>
-  <div ref="tabRef" class="h-full" :class="[isChromeMode ? 'flex items-end' : 'flex-y-center']">
-    <component
-      :is="activeComponent"
-      v-for="(item, index) in tab.tabs"
+  <div ref="tabRef" class="flex h-full pr-18px" :class="[isChromeMode ? 'items-end' : 'items-center gap-12px']">
+    <AdminTab
+      v-for="item in tab.tabs"
       :key="item.fullPath"
-      :is-active="tab.activeTab === item.fullPath"
-      :primary-color="theme.themeColor"
-      :closable="!(item.name === tab.homeTab.name || item.meta.affix)"
+      :mode="theme.tab.mode"
       :dark-mode="theme.darkMode"
-      :class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
+      :active="tab.activeTab === item.fullPath"
+      :active-color="theme.themeColor"
+      :closable="!(item.name === tab.homeTab.name || item.meta.affix)"
       @click="tab.handleClickTab(item.fullPath)"
       @close="tab.removeTab(item.fullPath)"
       @contextmenu="handleContextMenu($event, item.fullPath, item.meta.affix)"
     >
-      <svg-icon
-        :icon="item.meta.icon"
-        :local-icon="item.meta.localIcon"
-        class="inline-block align-text-bottom mr-4px text-16px"
-      />
+      <template #prefix>
+        <svg-icon
+          :icon="item.meta.icon"
+          :local-icon="item.meta.localIcon"
+          class="inline-block align-text-bottom text-16px"
+        />
+      </template>
       {{ item.meta.title }}
-    </component>
+    </AdminTab>
   </div>
   <context-menu
     :visible="dropdown.visible"
@@ -33,7 +34,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, reactive, ref, watch } from 'vue';
-import { ButtonTab, ChromeTab } from '@soybeanjs/vue-admin-tab';
+import { AdminTab } from '@soybeanjs/vue-materials';
 import { useTabStore, useThemeStore } from '@/store';
 import { ContextMenu } from './components';
 
@@ -49,7 +50,6 @@ const theme = useThemeStore();
 const tab = useTabStore();
 
 const isChromeMode = computed(() => theme.tab.mode === 'chrome');
-const activeComponent = computed(() => (isChromeMode.value ? ChromeTab : ButtonTab));
 
 // 获取当前激活的tab的clientX
 const tabRef = ref<HTMLElement>();

src/layouts/common/setting-drawer/components/dark-mode/index.vue

@@ -4,23 +4,29 @@
     <setting-menu label="深色主题">
       <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
         <template #checked>
-          <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+          <icon-mdi-white-balance-sunny class="text-14px text-white" />
         </template>
         <template #unchecked>
-          <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+          <icon-mdi-moon-waning-crescent class="text-14px text-white" />
         </template>
       </n-switch>
     </setting-menu>
     <setting-menu label="跟随系统">
       <n-switch :value="theme.followSystemTheme" @update:value="theme.setFollowSystemTheme">
         <template #checked>
-          <icon-ic-baseline-do-not-disturb class="text-14px text-primary" />
+          <icon-ic-baseline-do-not-disturb class="text-14px text-white" />
         </template>
         <template #unchecked>
-          <icon-ic-round-hdr-auto class="text-14px text-primary" />
+          <icon-ic-round-hdr-auto class="text-14px text-white" />
         </template>
       </n-switch>
     </setting-menu>
+    <setting-menu label="侧边栏深色主题">
+      <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
+    </setting-menu>
+    <setting-menu label="头部深色主题">
+      <n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
+    </setting-menu>
   </n-space>
 </template>
 
@@ -32,8 +38,4 @@ defineOptions({ name: 'DarkMode' });
 
 const theme = useThemeStore();
 </script>
-<style scoped>
-:deep(.n-switch__rail) {
-  background-color: #000e1c !important;
-}
-</style>
+<style scoped></style>

src/layouts/common/setting-drawer/components/layout-mode/components/index.ts

@@ -1,3 +1,4 @@
 import LayoutCheckbox from './layout-checkbox.vue';
+import LayoutCard from './layout-card.vue';
 
-export { LayoutCheckbox };
+export { LayoutCheckbox, LayoutCard };

src/layouts/common/setting-drawer/components/layout-mode/components/layout-card.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="border-2px rounded-6px cursor-pointer hover:border-primary"
+    :class="[checked ? 'border-primary' : 'border-transparent']"
+  >
+    <n-tooltip :placement="activeConfig.placement" trigger="hover">
+      <template #trigger>
+        <div
+          class="layout-card__shadow gap-6px w-96px h-64px p-6px rd-4px"
+          :class="[mode.includes('vertical') ? 'flex' : 'flex-col']"
+        >
+          <slot></slot>
+        </div>
+      </template>
+      <span>{{ label }}</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PopoverPlacement } from 'naive-ui';
+
+defineOptions({ name: 'LayoutCard' });
+
+interface Props {
+  /** 布局模式 */
+  mode: UnionKey.ThemeLayoutMode;
+  /** 布局模式文本 */
+  label: string;
+  /** 选中状态 */
+  checked: boolean;
+}
+
+const props = defineProps<Props>();
+
+type LayoutConfig = Record<
+  UnionKey.ThemeLayoutMode,
+  {
+    placement: PopoverPlacement;
+    headerClass: string;
+    menuClass: string;
+    mainClass: string;
+  }
+>;
+
+const layoutConfig: LayoutConfig = {
+  vertical: {
+    placement: 'bottom-start',
+    headerClass: '',
+    menuClass: 'w-1/3 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  'vertical-mix': {
+    placement: 'bottom',
+    headerClass: '',
+    menuClass: 'w-1/4 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  horizontal: {
+    placement: 'bottom',
+    headerClass: '',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-full h-3/4'
+  },
+  'horizontal-mix': {
+    placement: 'bottom-end',
+    headerClass: '',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-2/3 h-3/4'
+  }
+};
+
+const activeConfig = computed(() => layoutConfig[props.mode]);
+</script>
+
+<style scoped>
+.layout-card__shadow {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>

src/layouts/common/setting-drawer/components/layout-mode/index.vue

@@ -1,24 +1,57 @@
 <template>
   <n-divider title-placement="center">布局模式</n-divider>
-  <n-space justify="space-between">
-    <layout-checkbox
+  <n-space justify="space-around" :wrap="true" :size="24" class="px-12px">
+    <layout-card
       v-for="item in theme.layout.modeList"
       :key="item.value"
       :mode="item.value"
       :label="item.label"
       :checked="item.value === theme.layout.mode"
       @click="theme.setLayoutMode(item.value)"
-    />
+    >
+      <template v-if="item.value === 'vertical'">
+        <div class="w-18px h-full bg-primary:50 rd-4px"></div>
+        <div class="flex-1 flex-col gap-6px">
+          <div class="h-16px bg-primary rd-4px"></div>
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+      <template v-if="item.value === 'vertical-mix'">
+        <div class="w-8px h-full bg-primary:50 rd-4px"></div>
+        <div class="w-16px h-full bg-primary:50 rd-4px"></div>
+        <div class="flex-1 flex-col gap-6px">
+          <div class="h-16px bg-primary rd-4px"></div>
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+      <template v-if="item.value === 'horizontal'">
+        <div class="h-16px bg-primary rd-4px"></div>
+        <div class="flex-1 flex gap-6px">
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+      <template v-if="item.value === 'horizontal-mix'">
+        <div class="h-16px bg-primary rd-4px"></div>
+        <div class="flex-1 flex gap-6px">
+          <div class="w-18px bg-primary:50 rd-4px"></div>
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+    </layout-card>
   </n-space>
 </template>
 
 <script setup lang="ts">
 import { useThemeStore } from '@/store';
-import { LayoutCheckbox } from './components';
+import { LayoutCard } from './components';
 
 defineOptions({ name: 'LayoutMode' });
 
 const theme = useThemeStore();
 </script>
 
-<style scoped></style>
+<style scoped>
+.layout-card__shadow {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>

src/layouts/common/setting-drawer/components/page-func/index.vue

@@ -1,11 +1,14 @@
 <template>
   <n-divider title-placement="center">界面功能</n-divider>
   <n-space vertical size="large">
-    <setting-menu label="侧边栏反转色">
-      <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
-    </setting-menu>
-    <setting-menu label="头部反转色">
-      <n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
+    <setting-menu label="滚动模式">
+      <n-select
+        class="w-120px"
+        size="small"
+        :value="theme.scrollMode"
+        :options="theme.scrollModeList"
+        @update:value="theme.setScrollMode"
+      />
     </setting-menu>
     <setting-menu label="固定头部和多页签">
       <n-switch :value="theme.fixedHeaderAndTab" @update:value="theme.setIsFixedHeaderAndTab" />