From 912c3531c5d7a3ab30e15d39bed98ca9b20131ab Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Mon, 13 Mar 2023 20:49:33 +0800
Subject: [PATCH] feat(projects): new layout,tab and add update theme settings

---
 README.md                                     |  2 +-
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 16 ++++
 src/components/common/dark-mode-container.vue |  2 +-
 src/constants/system.ts                       | 16 ++++
 src/layouts/basic-layout/index.vue            | 16 ++--
 src/layouts/common/global-content/index.vue   | 31 ++++---
 .../tab-detail/components/context-menu.vue    | 20 ++++-
 .../components/tab-detail/index.vue           | 32 ++++----
 .../components/dark-mode/index.vue            | 20 ++---
 .../layout-mode/components/index.ts           |  3 +-
 .../layout-mode/components/layout-card.vue    | 81 +++++++++++++++++++
 .../components/layout-mode/index.vue          | 43 ++++++++--
 .../components/page-func/index.vue            | 13 +--
 src/plugins/assets.ts                         |  1 +
 src/router/helpers/scroll.ts                  | 14 ++--
 src/router/modules/about.ts                   |  1 +
 src/settings/theme.json                       | 11 +++
 src/settings/theme.ts                         |  3 +
 src/store/modules/app/index.ts                | 32 ++++++++
 src/store/modules/theme/index.ts              |  4 +
 src/store/subscribe/app.ts                    | 38 ++++++++-
 src/typings/system.d.ts                       |  4 +
 src/typings/union-key.d.ts                    |  7 ++
 .../analysis/components/top-chart/index.vue   | 36 ++++-----
 .../components/shortcuts-card.vue             |  2 +-
 .../components/technology-card.vue            |  2 +-
 .../components/workbench-main/index.vue       |  4 +-
 src/views/plugin/video/index.vue              |  5 +-
 uno.config.ts                                 | 19 +++--
 30 files changed, 386 insertions(+), 93 deletions(-)
 create mode 100644 src/layouts/common/setting-drawer/components/layout-mode/components/layout-card.vue

diff --git a/README.md b/README.md
index d4fc87f3a..adef78306 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 	<h1>Soybean Admin</h1>
 </div>
 
-![](https://img.shields.io/github/stars/honghuangdc/soybean-admin) [![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE)
+[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) ![](https://img.shields.io/github/stars/honghuangdc/soybean-admin) ![](https://img.shields.io/github/forks/honghuangdc/soybean-admin)
 
 ## 简介
 
diff --git a/package.json b/package.json
index 74f1bdd6f..291d0264c 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@better-scroll/core": "^2.5.0",
     "@soybeanjs/vue-admin-layout": "^1.1.1",
     "@soybeanjs/vue-admin-tab": "^1.0.5",
+    "@soybeanjs/vue-materials": "^0.1.8",
     "@vueuse/core": "^9.13.0",
     "axios": "0.27.2",
     "clipboard": "^2.0.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c94bda731..94be760a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,7 @@ specifiers:
   '@soybeanjs/vite-plugin-vue-page-route': ^0.0.5
   '@soybeanjs/vue-admin-layout': ^1.1.1
   '@soybeanjs/vue-admin-tab': ^1.0.5
+  '@soybeanjs/vue-materials': ^0.1.8
   '@types/bmapgl': ^0.0.5
   '@types/crypto-js': ^4.1.1
   '@types/node': 18.15.0
@@ -78,6 +79,7 @@ dependencies:
   '@better-scroll/core': 2.5.0
   '@soybeanjs/vue-admin-layout': 1.1.1_vue@3.2.47
   '@soybeanjs/vue-admin-tab': 1.0.5_vue@3.2.47
+  '@soybeanjs/vue-materials': 0.1.8_vue@3.2.47
   '@vueuse/core': 9.13.0_vue@3.2.47
   axios: 0.27.2
   clipboard: 2.0.11
@@ -2507,6 +2509,20 @@ packages:
       vue-demi: 0.12.5_vue@3.2.47
     dev: false
 
+  /@soybeanjs/vue-materials/0.1.8_vue@3.2.47:
+    resolution: {integrity: sha512-YVy+IiGruGoAqSx/z+3JkoJ8OwpmDb9ZQLmIHBLeBT7MzAW36y4MXm8/9AJTYrM/DFk3o9key18aSs3kp9nV4g==}
+    peerDependencies:
+      '@vue/composition-api': ^1.7.0
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      colord: 2.9.3
+      vue: 3.2.47
+      vue-demi: 0.13.11_vue@3.2.47
+    dev: false
+
   /@surma/rollup-plugin-off-main-thread/2.2.3:
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
     dependencies:
diff --git a/src/components/common/dark-mode-container.vue b/src/components/common/dark-mode-container.vue
index 65995b9a2..f2be2d143 100644
--- a/src/components/common/dark-mode-container.vue
+++ b/src/components/common/dark-mode-container.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="dark:bg-[#18181c] dark:text-white dark:text-opacity-82 transition-all duration-300 ease-in-out"
+    class="dark:bg-[#18181c] dark:text-white dark:text-opacity-82 transition-all"
     :class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
   >
     <slot></slot>
diff --git a/src/constants/system.ts b/src/constants/system.ts
index 7c043fd58..f06c689e7 100644
--- a/src/constants/system.ts
+++ b/src/constants/system.ts
@@ -24,6 +24,22 @@ export const themeLayoutModeOptions: Common.OptionWithKey<UnionKey.ThemeLayoutMo
   }
 ];
 
+export const themeScrollModeLabels: Record<UnionKey.ThemeScrollMode, string> = {
+  wrapper: '外层滚动',
+  content: '主体滚动'
+};
+
+export const themeScrollModeOptions: Common.OptionWithKey<UnionKey.ThemeScrollMode>[] = [
+  {
+    value: 'wrapper',
+    label: themeScrollModeLabels.wrapper
+  },
+  {
+    value: 'content',
+    label: themeScrollModeLabels.content
+  }
+];
+
 export const themeTabModeLabels: Record<UnionKey.ThemeTabMode, string> = {
   chrome: '谷歌风格',
   button: '按钮风格'
diff --git a/src/layouts/basic-layout/index.vue b/src/layouts/basic-layout/index.vue
index 4adb561aa..b921515f4 100644
--- a/src/layouts/basic-layout/index.vue
+++ b/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>
diff --git a/src/layouts/common/global-content/index.vue b/src/layouts/common/global-content/index.vue
index 4cf99c59a..a75b09a39 100644
--- a/src/layouts/common/global-content/index.vue
+++ b/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">
diff --git a/src/layouts/common/global-tab/components/tab-detail/components/context-menu.vue b/src/layouts/common/global-tab/components/tab-detail/components/context-menu.vue
index 709a095a3..cf291de72 100644
--- a/src/layouts/common/global-tab/components/tab-detail/components/context-menu.vue
+++ b/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',
     () => {
diff --git a/src/layouts/common/global-tab/components/tab-detail/index.vue b/src/layouts/common/global-tab/components/tab-detail/index.vue
index 0c7a0824f..50c200f51 100644
--- a/src/layouts/common/global-tab/components/tab-detail/index.vue
+++ b/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>();
diff --git a/src/layouts/common/setting-drawer/components/dark-mode/index.vue b/src/layouts/common/setting-drawer/components/dark-mode/index.vue
index 206e69039..5e21f08d4 100644
--- a/src/layouts/common/setting-drawer/components/dark-mode/index.vue
+++ b/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>
diff --git a/src/layouts/common/setting-drawer/components/layout-mode/components/index.ts b/src/layouts/common/setting-drawer/components/layout-mode/components/index.ts
index f724a53b6..d580731f9 100644
--- a/src/layouts/common/setting-drawer/components/layout-mode/components/index.ts
+++ b/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 };
diff --git a/src/layouts/common/setting-drawer/components/layout-mode/components/layout-card.vue b/src/layouts/common/setting-drawer/components/layout-mode/components/layout-card.vue
new file mode 100644
index 000000000..0f6a5a67d
--- /dev/null
+++ b/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>
diff --git a/src/layouts/common/setting-drawer/components/layout-mode/index.vue b/src/layouts/common/setting-drawer/components/layout-mode/index.vue
index d9132d917..b928de3a9 100644
--- a/src/layouts/common/setting-drawer/components/layout-mode/index.vue
+++ b/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>
diff --git a/src/layouts/common/setting-drawer/components/page-func/index.vue b/src/layouts/common/setting-drawer/components/page-func/index.vue
index 5bb5d68cb..b0cfe8e20 100644
--- a/src/layouts/common/setting-drawer/components/page-func/index.vue
+++ b/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" />
diff --git a/src/plugins/assets.ts b/src/plugins/assets.ts
index 8165ea4df..013ba6d06 100644
--- a/src/plugins/assets.ts
+++ b/src/plugins/assets.ts
@@ -1,4 +1,5 @@
 import 'uno.css';
+import '@soybeanjs/vue-materials/dist/style.css';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
diff --git a/src/router/helpers/scroll.ts b/src/router/helpers/scroll.ts
index f691ce373..648664e32 100644
--- a/src/router/helpers/scroll.ts
+++ b/src/router/helpers/scroll.ts
@@ -1,8 +1,9 @@
 import type { RouterScrollBehavior } from 'vue-router';
-import { useTabStore } from '@/store';
+import { useAppStore, useTabStore } from '@/store';
 
 export const scrollBehavior: RouterScrollBehavior = (to, from) => {
   return new Promise(resolve => {
+    const app = useAppStore();
     const tab = useTabStore();
 
     if (to.hash) {
@@ -20,17 +21,18 @@ export const scrollBehavior: RouterScrollBehavior = (to, from) => {
       left,
       top
     };
-    const { scrollLeft, scrollTop } = document.documentElement;
+    const { scrollEl, scrollLeft, scrollTop } = app.getScrollConfig();
 
     const isFromCached = Boolean(from.meta.keepAlive);
     if (isFromCached) {
       tab.recordTabScrollPosition(from.path, { left: scrollLeft, top: scrollTop });
     }
 
-    const duration = !scrollPosition.left && !scrollPosition.top ? 0 : 350;
-
     setTimeout(() => {
-      resolve(scrollPosition);
-    }, duration);
+      if (scrollEl) {
+        scrollEl.scrollLeft = scrollPosition.left;
+        scrollEl.scrollTop = scrollPosition.top;
+      }
+    }, 400);
   });
 };
diff --git a/src/router/modules/about.ts b/src/router/modules/about.ts
index a8101afeb..015416aa7 100644
--- a/src/router/modules/about.ts
+++ b/src/router/modules/about.ts
@@ -5,6 +5,7 @@ const about1: AuthRoute.Route = {
   meta: {
     title: '关于',
     requiresAuth: true,
+    keepAlive: true,
     singleLayout: 'basic',
     permissions: ['super', 'admin', 'user'],
     icon: 'fluent:book-information-24-regular',
diff --git a/src/settings/theme.json b/src/settings/theme.json
index a0299b55c..65a81792d 100644
--- a/src/settings/theme.json
+++ b/src/settings/theme.json
@@ -23,6 +23,17 @@
       }
     ]
   },
+  "scrollMode": "content",
+  "scrollModeList": [
+    {
+      "value": "wrapper",
+      "label": "外层滚动"
+    },
+    {
+      "value": "content",
+      "label": "主体滚动"
+    }
+  ],
   "themeColor": "#1890ff",
   "themeColorList": [
     "#1890ff",
diff --git a/src/settings/theme.ts b/src/settings/theme.ts
index 1e675d743..ff1c5c07e 100644
--- a/src/settings/theme.ts
+++ b/src/settings/theme.ts
@@ -1,5 +1,6 @@
 import {
   themeLayoutModeOptions,
+  themeScrollModeOptions,
   themeTabModeOptions,
   themeHorizontalMenuPositionOptions,
   themeAnimateModeOptions
@@ -41,6 +42,8 @@ const defaultThemeSetting: Theme.Setting = {
     mode: 'vertical',
     modeList: themeLayoutModeOptions
   },
+  scrollMode: 'content',
+  scrollModeList: themeScrollModeOptions,
   themeColor: themeColorList[0],
   themeColorList,
   otherColor: {
diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts
index cb92e485b..1c8568dd3 100644
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,7 +1,14 @@
 import { nextTick } from 'vue';
 import { defineStore } from 'pinia';
+import { SCROLL_EL_ID } from '@soybeanjs/vue-materials';
 
 interface AppState {
+  /** 滚动元素的id */
+  scrollElId: string;
+  /** 主体内容全屏 */
+  contentFull: boolean;
+  /** 禁用主体内容的水平方向的滚动 */
+  disableMainXScroll: boolean;
   /** 重载页面(控制页面的显示) */
   reloadFlag: boolean;
   /** 项目配置的抽屉可见状态 */
@@ -14,12 +21,29 @@ interface AppState {
 
 export const useAppStore = defineStore('app-store', {
   state: (): AppState => ({
+    scrollElId: SCROLL_EL_ID,
+    contentFull: false,
+    disableMainXScroll: false,
     reloadFlag: true,
     settingDrawerVisible: false,
     siderCollapse: false,
     mixSiderFixed: false
   }),
   actions: {
+    /**
+     * 获取滚动配置
+     */
+    getScrollConfig() {
+      const scrollEl = document.querySelector(`#${this.scrollElId}`);
+
+      const { scrollLeft = 0, scrollTop = 0 } = scrollEl || {};
+
+      return {
+        scrollEl,
+        scrollLeft,
+        scrollTop
+      };
+    },
     /**
      * 重载页面
      * @param duration - 重载的延迟时间(ms)
@@ -65,6 +89,14 @@ export const useAppStore = defineStore('app-store', {
     /** 设置 vertical-mix模式下 侧边栏的固定状态 */
     toggleMixSiderFixed() {
       this.mixSiderFixed = !this.mixSiderFixed;
+    },
+    /** 设置主体是否禁用滚动 */
+    setDisableMainXScroll(disable: boolean) {
+      this.disableMainXScroll = disable;
+    },
+    /** 设置主体内容全屏 */
+    setContentFull(full: boolean) {
+      this.contentFull = full;
     }
   }
 });
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 6a7bec083..b61a4c7ac 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -61,6 +61,10 @@ export const useThemeStore = defineStore('theme-store', {
     setLayoutMode(mode: UnionKey.ThemeLayoutMode) {
       this.layout.mode = mode;
     },
+    /** 设置滚动模式 */
+    setScrollMode(mode: UnionKey.ThemeScrollMode) {
+      this.scrollMode = mode;
+    },
     /** 设置侧边栏反转色 */
     setSiderInverted(isInverted: boolean) {
       this.sider.inverted = isInverted;
diff --git a/src/store/subscribe/app.ts b/src/store/subscribe/app.ts
index 11083e7da..42980bc03 100644
--- a/src/store/subscribe/app.ts
+++ b/src/store/subscribe/app.ts
@@ -1,4 +1,40 @@
+import { effectScope, onScopeDispose, watch } from 'vue';
+import { useFullscreen } from '@vueuse/core';
+import { useAppStore } from '../modules';
+
 /** 订阅app store */
 export default function subscribeAppStore() {
-  //
+  const { isFullscreen, toggle } = useFullscreen();
+
+  const app = useAppStore();
+
+  const scope = effectScope();
+
+  function update() {
+    if (app.contentFull && !isFullscreen.value) {
+      toggle();
+    }
+    if (!app.contentFull && isFullscreen.value) {
+      toggle();
+    }
+  }
+
+  scope.run(() => {
+    watch(
+      () => app.contentFull,
+      () => {
+        update();
+      }
+    );
+
+    watch(isFullscreen, newValue => {
+      if (!newValue) {
+        app.setContentFull(false);
+      }
+    });
+  });
+
+  onScopeDispose(() => {
+    scope.stop();
+  });
 }
diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts
index 77470a570..527c48da9 100644
--- a/src/typings/system.d.ts
+++ b/src/typings/system.d.ts
@@ -92,6 +92,10 @@ declare namespace Theme {
     followSystemTheme: boolean;
     /** 布局样式 */
     layout: Layout;
+    /** 滚动模式 */
+    scrollMode: UnionKey.ThemeScrollMode;
+    /** 滚动模式列表 */
+    scrollModeList: Common.OptionWithKey<UnionKey.ThemeScrollMode>[];
     /** 主题颜色 */
     themeColor: string;
     /** 主题颜色列表 */
diff --git a/src/typings/union-key.d.ts b/src/typings/union-key.d.ts
index ca82c415f..444ac1ddc 100644
--- a/src/typings/union-key.d.ts
+++ b/src/typings/union-key.d.ts
@@ -28,6 +28,13 @@ declare namespace UnionKey {
    */
   type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';
 
+  /**
+   * 内容溢出时的出现滚动条的方式
+   * - wrapper 布局组件最外层的元素出现滚动条
+   * - content 主体内容组件出现滚动条
+   */
+  type ThemeScrollMode = 'wrapper' | 'content';
+
   /**
    * 多页签风格
    * - chrome: 谷歌风格
diff --git a/src/views/dashboard/analysis/components/top-chart/index.vue b/src/views/dashboard/analysis/components/top-chart/index.vue
index 727e990d5..e72b1d4b3 100644
--- a/src/views/dashboard/analysis/components/top-chart/index.vue
+++ b/src/views/dashboard/analysis/components/top-chart/index.vue
@@ -1,27 +1,27 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
-    <n-grid-item span="0:24 640:24 1024:16">
+    <n-grid-item span="0:24 640:24 1024:6">
       <n-card :bordered="false" class="rounded-16px shadow-sm">
-        <div class="flex w-full h-360px">
-          <div class="w-200px h-full py-12px">
-            <h3 class="text-16px text-custom font-bold">Dashboard</h3>
-            <p class="text-[#aaa]">Overview Of Lasted Month</p>
-            <h3 class="pt-36px text-24px font-bold">
-              <count-to prefix="$" :start-value="0" :end-value="7754" />
-            </h3>
-            <p class="text-[#aaa]">Current Month Earnings</p>
-            <h3 class="pt-36px text-24px font-bold">
-              <count-to :start-value="0" :end-value="1234" />
-            </h3>
-            <p class="text-[#aaa]">Current Month Sales</p>
-            <n-button class="mt-24px" type="primary">Last Month Summary</n-button>
-          </div>
-          <div class="flex-1-hidden h-full">
-            <div ref="lineRef" class="wh-full"></div>
-          </div>
+        <div class="w-full h-360px py-12px">
+          <h3 class="text-16px font-bold">Dashboard</h3>
+          <p class="text-[#aaa]">Overview Of Lasted Month</p>
+          <h3 class="pt-32px text-24px font-bold">
+            <count-to prefix="$" :start-value="0" :end-value="7754" />
+          </h3>
+          <p class="text-[#aaa]">Current Month Earnings</p>
+          <h3 class="pt-32px text-24px font-bold">
+            <count-to :start-value="0" :end-value="1234" />
+          </h3>
+          <p class="text-[#aaa]">Current Month Sales</p>
+          <n-button class="mt-24px whitespace-pre-wrap" type="primary">Last Month Summary</n-button>
         </div>
       </n-card>
     </n-grid-item>
+    <n-grid-item span="0:24 640:24 1024:10">
+      <n-card :bordered="false" class="rounded-16px shadow-sm">
+        <div ref="lineRef" class="w-full h-360px"></div>
+      </n-card>
+    </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:8">
       <n-card :bordered="false" class="rounded-16px shadow-sm">
         <div ref="pieRef" class="w-full h-360px"></div>
diff --git a/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue b/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue
index 3789b7a6f..ca847da5e 100644
--- a/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue
+++ b/src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex-col-center p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
+    class="flex-col-center h-120px p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
   >
     <svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
     <p class="py-8px text-16px">{{ label }}</p>
diff --git a/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue b/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue
index d73676277..362fccc59 100644
--- a/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue
+++ b/src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-4px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
+    class="h-120px p-4px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
     @click="handleOpenSite"
   >
     <header class="flex-y-center">
diff --git a/src/views/dashboard/workbench/components/workbench-main/index.vue b/src/views/dashboard/workbench/components/workbench-main/index.vue
index 281d7cd01..3b449b26f 100644
--- a/src/views/dashboard/workbench/components/workbench-main/index.vue
+++ b/src/views/dashboard/workbench/components/workbench-main/index.vue
@@ -37,7 +37,9 @@
           </n-grid>
         </n-card>
         <n-card title="创意" :bordered="false" size="small" class="shadow-sm rounded-16px">
-          <icon-local-banner class="text-400px text-primary" />
+          <div class="flex-center h-380px">
+            <icon-local-banner class="text-400px sm:text-320px text-primary" />
+          </div>
         </n-card>
       </n-space>
     </n-grid-item>
diff --git a/src/views/plugin/video/index.vue b/src/views/plugin/video/index.vue
index a5a1f8d04..1975ef352 100644
--- a/src/views/plugin/video/index.vue
+++ b/src/views/plugin/video/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-full">
     <n-card title="视频播放器插件" class="h-full shadow-sm rounded-16px">
-      <div ref="domRef"></div>
+      <div ref="domRef" class=""></div>
     </n-card>
   </div>
 </template>
@@ -19,7 +19,8 @@ function renderXgPlayer() {
   player.value = new Player({
     el: domRef.value,
     url,
-    playbackRate: [0.5, 0.75, 1, 1.5, 2]
+    playbackRate: [0.5, 0.75, 1, 1.5, 2],
+    fluid: true
   });
 }
 function destroyXgPlayer() {
diff --git a/uno.config.ts b/uno.config.ts
index fb791f568..c94d052da 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -47,23 +47,32 @@ export default defineConfig({
       primary: 'rgb(var(--primary-color))',
       primary_hover: 'rgb(var(--primary-color-hover))',
       primary_pressed: 'rgb(var(--primary-color-pressed))',
-      primary_active: 'rgb(var(--primary-color-active))',
+      primary_active: 'rgba(var(--primary-color-active),0.1)',
+      primary_1: 'rgb(var(--primary-color1))',
+      primary_2: 'rgb(var(--primary-color2))',
+      primary_3: 'rgb(var(--primary-color3))',
+      primary_4: 'rgb(var(--primary-color4))',
+      primary_5: 'rgb(var(--primary-color5))',
+      primary_6: 'rgb(var(--primary-color6))',
+      primary_7: 'rgb(var(--primary-color7))',
+      primary_8: 'rgb(var(--primary-color8))',
+      primary_9: 'rgb(var(--primary-color9))',
       info: 'rgb(var(--info-color))',
       info_hover: 'rgb(var(--info-color-hover))',
       info_pressed: 'rgb(var(--info-color-pressed))',
-      info_active: 'rgb(var(--info-color-active))',
+      info_active: 'rgb(var(--info-color-active),0.1)',
       success: 'rgb(var(--success-color))',
       success_hover: 'rgb(var(--success-color-hover))',
       success_pressed: 'rgb(var(--success-color-pressed))',
-      success_active: 'rgb(var(--success-color-active))',
+      success_active: 'rgb(var(--success-color-active),0.1)',
       warning: 'rgb(var(--warning-color))',
       warning_hover: 'rgb(var(--warning-color-hover))',
       warning_pressed: 'rgb(var(--warning-color-pressed))',
-      warning_active: 'rgb(var(--warning-color-active))',
+      warning_active: 'rgb(var(--warning-color-active),0.1)',
       error: 'rgb(var(--error-color))',
       error_hover: 'rgb(var(--error-color-hover))',
       error_pressed: 'rgb(var(--error-color-pressed))',
-      error_active: 'rgb(var(--error-color-active))',
+      error_active: 'rgb(var(--error-color-active),0.1)',
       dark: '#18181c'
     }
   }