mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-11-04 15:53:43 +08:00
feat(projects): new layout,tab and add update theme settings
This commit is contained in:
Soybean
@@ -3,7 +3,7 @@
|
||||
<h1>Soybean Admin</h1>
|
||||
</div>
|
||||
|
||||
 [](./LICENSE)
|
||||
[](./LICENSE)  
|
||||
|
||||
## 简介
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
16
pnpm-lock.yaml
generated
16
pnpm-lock.yaml
generated
@@ -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:
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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: '按钮风格'
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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',
|
||||
() => {
|
||||
|
||||
@@ -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>();
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import LayoutCheckbox from './layout-checkbox.vue';
|
||||
import LayoutCard from './layout-card.vue';
|
||||
|
||||
export { LayoutCheckbox };
|
||||
export { LayoutCheckbox, LayoutCard };
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -23,6 +23,17 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"scrollMode": "content",
|
||||
"scrollModeList": [
|
||||
{
|
||||
"value": "wrapper",
|
||||
"label": "外层滚动"
|
||||
},
|
||||
{
|
||||
"value": "content",
|
||||
"label": "主体滚动"
|
||||
}
|
||||
],
|
||||
"themeColor": "#1890ff",
|
||||
"themeColorList": [
|
||||
"#1890ff",
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
4
src/typings/system.d.ts
vendored
4
src/typings/system.d.ts
vendored
@@ -92,6 +92,10 @@ declare namespace Theme {
|
||||
followSystemTheme: boolean;
|
||||
/** 布局样式 */
|
||||
layout: Layout;
|
||||
/** 滚动模式 */
|
||||
scrollMode: UnionKey.ThemeScrollMode;
|
||||
/** 滚动模式列表 */
|
||||
scrollModeList: Common.OptionWithKey<UnionKey.ThemeScrollMode>[];
|
||||
/** 主题颜色 */
|
||||
themeColor: string;
|
||||
/** 主题颜色列表 */
|
||||
|
||||
7
src/typings/union-key.d.ts
vendored
7
src/typings/union-key.d.ts
vendored
@@ -28,6 +28,13 @@ declare namespace UnionKey {
|
||||
*/
|
||||
type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';
|
||||
|
||||
/**
|
||||
* 内容溢出时的出现滚动条的方式
|
||||
* - wrapper 布局组件最外层的元素出现滚动条
|
||||
* - content 主体内容组件出现滚动条
|
||||
*/
|
||||
type ThemeScrollMode = 'wrapper' | 'content';
|
||||
|
||||
/**
|
||||
* 多页签风格
|
||||
* - chrome: 谷歌风格
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user