github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-02-02 18:08:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: performance optimization

Browse Source
This commit is contained in:
vben 2020-10-15 21:12:38 +08:00
parent 8f4d51a7cf
commit 70fba7ecac
15 changed files with 126 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.en-US.md
View File

@ -30,6 +30,7 @@
- [Code contribution](#code-contribution)
- [Finished features](#finished-features)
- [Developing features](#developing-features)
- [Browser support](#browser-support)
## Introduction
@ -238,3 +239,13 @@ yarn clean:lib # Delete node_modules, supported window
- [ ] System performance optimization
If you have more components/functions/suggestions/bugs/, welcome to submit pr or issue.
## Browser support
It is recommended to use the `Chrome` browser for local development. Development in the Firefox browser is relatively slow.
Support modern browsers, Not currently supported ie11，Follow-up consideration support ie11
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| :-: | :-: | :-: | :-: |
| Not currently supported | last 2 versions | last 2 versions | last 2 versions |

11
README.md
View File

@ -30,6 +30,7 @@
- [代码贡献](#代码贡献)
- [已完成功能](#已完成功能)
- [正在开发的功能](#正在开发的功能)
- [浏览器支持](#浏览器支持)
- [加入我们](#加入我们)
## 介绍
@ -241,6 +242,16 @@ yarn clean:lib # 删除node_modules，兼容window系统
更多组件/功能/建议/bug/欢迎提交 pr 或者 issue
## 浏览器支持
本地开发推荐使用`Chrome`浏览器,在火狐浏览器进行开发相对卡顿。
支持现代浏览器, IE 暂不支持，后续考虑支持 ie11
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| :-: | :-: | :-: | :-: |
| not support | last 2 versions | last 2 versions | last 2 versions |
## 加入我们
`Vue-Vben-Aadmin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群(项目刚起步，人数较少，有兴趣的可以加群一起讨论)，使用问题欢迎在群内提问。

10
src/App.vue
View File

@ -15,6 +15,8 @@
import { useConfigProvider, useInitAppConfigStore, useListenerNetWork } from './useApp';
import { useLockPage } from '/@/hooks/web/useLockPage';
import { useSetting } from '/@/hooks/core/useSetting';
moment.locale('zh-cn');
export default defineComponent({
name: 'App',
@ -23,8 +25,14 @@
useInitAppConfigStore();
useListenerNetWork();
createBreakpointListen();
const { projectSetting } = useSetting();
const { transformCellText } = useConfigProvider();
const { on: lockOn } = useLockPage();
let lockOn = {};
if (projectSetting.lockTime) {
const { on } = useLockPage();
lockOn = on;
}
return {
transformCellText,
zhCN,

98
src/components/Drawer/src/BasicDrawer.tsx
View File

@ -6,12 +6,12 @@ import {
watchEffect,
watch,
unref,
getCurrentInstance,
// getCurrentInstance,
nextTick,
toRaw,
} from 'vue';
import { BasicTitle } from '/@/components/Basic';
import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index';
// import { ScrollContainer, ScrollContainerOptions } from '/@/components/Container/index';
import { FullLoading } from '/@/components/Loading/index';
import { getSlot } from '/@/utils/helper/tsxHelper';
@ -35,16 +35,16 @@ export default defineComponent({
setup(props, { slots, emit, attrs }) {
// const { currentRoute } = useRouter();
const scrollRef = ref<any>(null);
/**
* @description: 获取配置ScrollContainer
*/
const getScrollOptions = computed(
(): ScrollContainerOptions => {
return {
...(props.scrollOptions as any),
};
}
);
// /**
// * @description: 获取配置ScrollContainer
// */
// const getScrollOptions = computed(
// (): ScrollContainerOptions => {
// return {
// ...(props.scrollOptions as any),
// };
// }
// );
const visibleRef = ref(false);
const propsRef = ref<Partial<DrawerProps> | null>(null);
@ -95,33 +95,27 @@ export default defineComponent({
}
);
// watch(
// () => currentRoute.value.path,
// () => {
// if (unref(visibleRef)) {
// visibleRef.value = false;
// }
// function scrollBottom() {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollBottom();
// }
// );
function scrollBottom() {
const scroll = unref(scrollRef);
if (scroll) {
scroll.scrollBottom();
}
}
function scrollTo(to: number) {
const scroll = unref(scrollRef);
if (scroll) {
scroll.scrollTo(to);
}
}
function getScrollWrap() {
const scroll = unref(scrollRef);
if (scroll) {
return scroll.getScrollWrap();
}
return null;
}
// }
// function scrollTo(to: number) {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollTo(to);
// }
// }
// function getScrollWrap() {
// const scroll = unref(scrollRef);
// if (scroll) {
// return scroll.getScrollWrap();
// }
// return null;
// }
// 取消事件
async function onClose(e: any) {
const { closeFunc } = unref(getProps);
@ -225,12 +219,12 @@ export default defineComponent({
);
}
const currentInstance = getCurrentInstance() as any;
if (getCurrentInstance()) {
currentInstance.scrollBottom = scrollBottom;
currentInstance.scrollTo = scrollTo;
currentInstance.getScrollWrap = getScrollWrap;
}
// const currentInstance = getCurrentInstance() as any;
// if (getCurrentInstance()) {
// currentInstance.scrollBottom = scrollBottom;
// currentInstance.scrollTo = scrollTo;
// currentInstance.getScrollWrap = getScrollWrap;
// }
const drawerInstance: DrawerInstance = {
setDrawerProps: setDrawerProps,
};
@ -259,7 +253,7 @@ export default defineComponent({
class={[!unref(getProps).loading ? 'hidden' : '']}
tip="加载中..."
/>
<ScrollContainer
{/* <ScrollContainer
ref={scrollRef}
{...{ ...attrs, ...unref(getScrollOptions) }}
style={{
@ -267,7 +261,19 @@ export default defineComponent({
}}
>
{() => getSlot(slots, 'default')}
</ScrollContainer>
</ScrollContainer> */}
<div
ref={scrollRef}
{...attrs}
style={{
height: `calc(100% - ${footerHeight}px)`,
overflow: 'auto',
padding: '16px',
paddingBottom: '30px',
}}
>
{getSlot(slots, 'default')}
</div>
{renderFooter()}
</>
),

2
src/components/Loading/FullLoading.vue
View File

@ -42,7 +42,7 @@
width: 100%;
height: 100%;
// background: rgba(255, 255, 255, 0.3);
background: rgba(241, 241, 246, 0.8);
background: rgba(241, 241, 246, 0.7);
justify-content: center;
align-items: center;
}

19
src/components/Menu/src/index.less
View File

@ -162,9 +162,9 @@
// 层级样式
&.ant-menu-dark {
.ant-menu-item {
transition: unset;
}
// .ant-menu-item {
// transition: unset;
// }
.ant-menu-item.ant-menu-item-selected.basic-menu-menu-item__level1,
.ant-menu-submenu-selected.basic-menu-menu-item__level1 {
@ -206,9 +206,18 @@
}
.ant-menu-submenu-title {
height: @app-menu-item-height;
// margin: 0;
line-height: @app-menu-item-height;
// line-height: @app-menu-item-height;
display: flex;
height: @app-menu-item-height;
align-items: center;
}
&.ant-menu-inline-collapsed {
.ant-menu-item-selected {
background: unset !important;
box-shadow: none;
}
}
}

15
src/design/transition/fade.less
View File

@ -8,21 +8,20 @@
opacity: 0;
}
// side-fade
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: opacity 0.3s, transform 0.35s;
/* fade-transform */
.slide-fade-leave-active,
.slide-fade-enter-active {
transition: all 0.3s;
}
.slide-enter-from,
.slide-fade-enter {
.slide-fade-enter-from {
opacity: 0;
transform: translateX(-30%);
transform: translateX(-30px);
}
.slide-fade-leave-to {
opacity: 0;
transform: translateX(30%);
transform: translateX(30px);
}
// ///////////////////////////////////////////////

2
src/design/transition/zoom.less
View File

@ -13,7 +13,7 @@
// zoom-fade
.zoom-fade-enter-active,
.zoom-fade-leave-active {
transition: transform 0.1s, opacity 0.15s ease-out;
transition: transform 0.15s, opacity 0.2s ease-out;
}
.zoom-fade-enter-from {

2
src/hooks/event/useEvent.ts
View File

@ -45,8 +45,6 @@ export function useEvent({
if (v) {
!unref(isAddRef) && addEventListener(v);
cleanUp(() => {
// @ts-ignore
window.a = v;
autoRemove && removeEventListener(v);
});
}

1
src/hooks/event/useWindowSize.ts
View File

@ -21,6 +21,7 @@ export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOp
tryOnMounted(() => {
window.addEventListener('resize', handler);
});
tryOnUnmounted(() => {
window.removeEventListener('resize', handler);
cancel();

7
src/hooks/web/useECharts.ts
View File

@ -14,6 +14,7 @@ export function useECharts(
) {
const chartInstanceRef = ref<Nullable<ECharts>>(null);
let resizeFn: Fn = resize;
let removeResizeFn: Fn = () => {};
const [debounceResize] = useDebounce(resize, 200);
resizeFn = debounceResize;
@ -25,11 +26,12 @@ export function useECharts(
return;
}
chartInstanceRef.value = echarts.init(el, theme);
useEvent({
const { removeEvent } = useEvent({
el: window,
name: 'resize',
listener: resizeFn,
});
removeResizeFn = removeEvent;
const { widthRef, screenEnum } = useBreakpoint();
if (unref(widthRef) <= screenEnum.MD) {
useTimeout(() => {
@ -37,6 +39,9 @@ export function useECharts(
}, 30);
}
}
tryOnUnmounted(() => {
removeResizeFn();
});
function setOptions(options: any, clear = true) {
nextTick(() => {

6
src/hooks/web/useFullScreen.ts
View File

@ -15,11 +15,7 @@ type FSEPropName =
| 'msFullscreenElement'
| 'mozFullScreenElement'
| 'fullscreenElement';
type ONFSCPropName =
| 'onfullscreenchange'
| 'onwebkitfullscreenchange'
| 'onmozfullscreenchange'
| 'MSFullscreenChange';
type ONFSCPropName = 'onfullscreenchange' | 'onwebkitfullscreenchange' | 'MSFullscreenChange';
export function useFullscreen(
target: Ref<Nullable<HTMLElement>> = ref(document.documentElement),

1
src/hooks/web/useLockPage.ts
View File

@ -3,6 +3,7 @@ import { useThrottle } from '/@/hooks/core/useThrottle';
import { appStore } from '/@/store/modules/app';
import { userStore } from '/@/store/modules/user';
export function useLockPage() {
let timeId: ReturnType<typeof setTimeout>;

6
src/layouts/default/multitabs/index.less
View File

@ -34,6 +34,12 @@
color: inherit;
}
> div {
display: flex;
justify-content: center;
align-items: center;
}
svg {
fill: @text-color-base;
}

9
src/main.ts
View File

@ -1,14 +1,15 @@
import { createApp } from 'vue';
import { setupAntd } from '/@/setup/ant-design-vue';
import router, { setupRouter } from '/@/router';
import { setupStore } from '/@/store';
import App from './App.vue';
import { registerGlobComp } from '/@/components/registerGlobComp';
import { setupAntd } from '/@/setup/ant-design-vue';
import { setupDirectives } from '/@/setup/directives/index';
import { registerGlobComp } from '/@/components/registerGlobComp';
import { isDevMode, isProdMode, isUseMock } from '/@/utils/env';
import { setupProdMockServer } from '../mock/_createProductionServer';
import App from './App.vue';
import '/@/design/index.less';
const app = createApp(App);