Skip to content

B
basic-vue-admin
提交 37f6660c 作者: Vben
操作

perf: code optimization

上级 2f99892d
正在显示 包含 86 行增加 和 109 行删除
build/config/themeConfig.ts
......@@ -2,6 +2,8 @@ import { generate } from '@ant-design/colors';
export const primaryColor = '#0960bd';
export const borderColorBase = '#d9d9d9';
export const themeMode = 'light';
export type ThemeMode = 'dark' | 'light';
......@@ -97,7 +99,7 @@ export function generateModifyVars() {
'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color
'font-size-base': '14px', // Main font size
'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow
'border-color-base': '#d9d9d9', // Border color,
'border-color-base': borderColorBase, // Border color,
'border-radius-base': '2px', // Component/float fillet
'link-color': primary, // Link color
};
......
package.json
......@@ -34,7 +34,7 @@
"@iconify/iconify": "^2.0.0-rc.6",
"@vueuse/core": "^4.6.2",
"@zxcvbn-ts/core": "^0.3.0",
"ant-design-vue": "2.1.1",
"ant-design-vue": "^2.1.2",
"apexcharts": "^3.26.0",
"axios": "^0.21.1",
"crypto-js": "^4.0.0",
......@@ -47,7 +47,7 @@
"qrcode": "^1.4.4",
"sortablejs": "^1.13.0",
"vditor": "^3.8.4",
"vue": "^3.0.9",
"vue": "3.0.7",
"vue-i18n": "^9.0.0",
"vue-router": "^4.0.5",
"vue-types": "^3.0.2",
......@@ -75,7 +75,7 @@
"@vitejs/plugin-legacy": "^1.3.2",
"@vitejs/plugin-vue": "^1.2.0",
"@vitejs/plugin-vue-jsx": "^1.1.2",
"@vue/compiler-sfc": "^3.0.9",
"@vue/compiler-sfc": "3.0.7",
"autoprefixer": "^10.2.5",
"body-parser": "^1.19.0",
"commitizen": "^4.2.3",
......@@ -112,11 +112,11 @@
"vite-plugin-imagemin": "^0.2.9",
"vite-plugin-mock": "^2.4.0",
"vite-plugin-purge-icons": "^0.7.0",
"vite-plugin-pwa": "^0.6.3",
"vite-plugin-style-import": "^0.9.0",
"vite-plugin-pwa": "^0.6.4",
"vite-plugin-style-import": "^0.9.1",
"vite-plugin-svg-icons": "^0.4.0",
"vite-plugin-theme": "^0.5.0",
"vite-plugin-windicss": "0.10.2",
"vite-plugin-windicss": "0.10.4",
"vue-eslint-parser": "^7.6.0"
},
"resolutions": {
......
src/components/Basic/src/BasicTitle.vue
<template>
<span :class="[prefixCls, { 'show-span': span && $slots.default }]">
<span :class="getClass">
<slot></slot>
<BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
</span>
......@@ -7,7 +7,7 @@
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { defineComponent, computed } from 'vue';
import BasicHelp from './BasicHelp.vue';
import { useDesign } from '/@/hooks/web/useDesign';
......@@ -23,10 +23,17 @@
default: '',
},
span: propTypes.bool,
normal: propTypes.bool.def(false),
},
setup() {
setup(props, { slots }) {
const { prefixCls } = useDesign('basic-title');
return { prefixCls };
const getClass = computed(() => [
prefixCls,
{ [`${prefixCls}-show-span`]: props.span && slots.default },
{ [`${prefixCls}-normal`]: props.normal },
]);
return { prefixCls, getClass };
},
});
</script>
......@@ -38,13 +45,18 @@
display: flex;
padding-left: 7px;
font-size: 16px;
font-weight: 700;
font-weight: 500;
line-height: 24px;
color: @text-color-base;
cursor: pointer;
user-select: none;
&.show-span::before {
&-normal {
font-size: 14px;
font-weight: normal;
}
&-show-span::before {
position: absolute;
top: 4px;
left: 0;
......
src/components/ClickOutSide/src/index.vue
......@@ -5,7 +5,6 @@
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { onClickOutside } from '@vueuse/core';
export default defineComponent({
name: 'ClickOutSide',
......
src/components/Container/src/LazyContainer.vue
<template>
<transition-group
:class="prefixCls"
class="h-full w-full"
v-bind="$attrs"
ref="elRef"
:name="transitionName"
......@@ -25,7 +25,6 @@
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
import { propTypes } from '/@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
interface State {
isInit: boolean;
......@@ -72,8 +71,6 @@
intersectionObserverInstance: null,
});
const { prefixCls } = useDesign('lazy-container');
onMounted(() => {
immediateInit();
initIntersectionObserver();
......@@ -133,17 +130,8 @@
}
return {
elRef,
prefixCls,
...toRefs(state),
};
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-lazy-container';
.@{prefix-cls} {
width: 100%;
height: 100%;
}
</style>
src/components/Container/src/ScrollContainer.vue
......@@ -12,18 +12,21 @@
export default defineComponent({
name: 'ScrollContainer',
// inheritAttrs: false,
components: { Scrollbar },
setup() {
const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
function scrollTo(to: number, duration = 500) {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) return;
if (!scrollbar) {
return;
}
nextTick(() => {
const wrap = unref(scrollbar.wrap);
if (!wrap) return;
if (!wrap) {
return;
}
const { start } = useScrollTo({
el: wrap,
to,
......@@ -35,17 +38,23 @@
function getScrollWrap() {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) return null;
if (!scrollbar) {
return null;
}
return scrollbar.wrap;
}
function scrollBottom() {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) return;
if (!scrollbar) {
return;
}
nextTick(() => {
const wrap = unref(scrollbar.wrap);
if (!wrap) return;
if (!wrap) {
return;
}
const scrollHeight = wrap.scrollHeight as number;
const { start } = useScrollTo({
el: wrap,
......
src/components/Container/src/collapse/CollapseContainer.vue
<template>
<div :class="['p-2', prefixCls]">
<div :class="prefixCls">
<CollapseHeader
v-bind="getBindValues"
:prefixCls="prefixCls"
:show="show"
@expand="handleExpand"
:class="show ? 'mb-3' : ''"
>
<template #title>
<slot name="title"></slot>
</template>
</CollapseHeader>
<div class="p-2">
<CollapseTransition :enable="canExpan">
<Skeleton v-if="loading" />
<Skeleton v-if="loading" :active="active" />
<div :class="`${prefixCls}__body`" v-else v-show="show">
<LazyContainer :timeout="lazyTime" v-if="lazy">
<slot></slot>
<template #skeleton>
<slot name="lazySkeleton"></slot>
</template>
</LazyContainer>
<slot v-else></slot>
</div>
</CollapseTransition>
</div>
</div>
</template>
<script lang="ts">
import type { PropType } from 'vue';
......@@ -33,9 +28,8 @@
// component
import { Skeleton } from 'ant-design-vue';
import { CollapseTransition } from '/@/components/Transition/index';
import { CollapseTransition } from '/@/components/Transition';
import CollapseHeader from './CollapseHeader.vue';
import LazyContainer from '../LazyContainer.vue';
import { triggerWindowResize } from '/@/utils/event';
// hook
......@@ -47,7 +41,6 @@
name: 'CollapseContainer',
components: {
Skeleton,
LazyContainer,
CollapseHeader,
CollapseTransition,
},
......@@ -63,9 +56,8 @@
// Whether to trigger window.resize when expanding and contracting,
// Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
triggerWindowResize: propTypes.bool,
loading: propTypes.bool,
// Delayed loading
lazy: propTypes.bool,
loading: propTypes.bool.def(false),
active: propTypes.bool.def(true),
// Delayed loading time
lazyTime: propTypes.number.def(0),
},
......@@ -109,9 +101,9 @@
&__header {
display: flex;
height: 32px;
// margin-bottom: 10px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid @border-color-light;
}
&__action {
......
src/components/Container/src/collapse/CollapseHeader.vue
<template>
<div :class="[`${prefixCls}__header`, $attrs.class]">
<BasicTitle :helpMessage="helpMessage">
<div :class="[`${prefixCls}__header px-2 py-5`, $attrs.class]">
<BasicTitle :helpMessage="helpMessage" normal>
<template v-if="title">
{{ title }}
</template>
......
src/components/Scrollbar/src/index.vue
......@@ -111,9 +111,9 @@
onBeforeUnmount(() => {
if (props.native) return;
if (!props.noresize) {
removeResizeListener(unref(resize), update);
removeResizeListener(unref(wrap), update);
removeEventListener('resize', update);
// removeResizeListener(unref(resize), update);
// removeResizeListener(unref(wrap), update);
// removeEventListener('resize', update);
}
});
......
src/components/SimpleMenu/src/components/SubMenuItem.vue
......@@ -9,11 +9,11 @@
:class="`${prefixCls}-submenu-title-icon`"
/>
</div>
<MenuCollapseTransition>
<CollapseTransition>
<ul :class="prefixCls" v-show="opened">
<slot></slot>
</ul>
</MenuCollapseTransition>
</CollapseTransition>
</template>
<Popover
......@@ -72,7 +72,7 @@
import { propTypes } from '/@/utils/propTypes';
import { useMenuItem } from './useMenu';
import { useSimpleRootMenuContext } from './useSimpleMenuContext';
import MenuCollapseTransition from './MenuCollapseTransition.vue';
import { CollapseTransition } from '/@/components/Transition';
import Icon from '/@/components/Icon';
import { Popover } from 'ant-design-vue';
import { isBoolean, isObject } from '/@/utils/is';
......@@ -83,7 +83,7 @@
name: 'SubMenu',
components: {
Icon,
MenuCollapseTransition,
CollapseTransition,
Popover,
},
props: {
......
src/components/SimpleMenu/src/components/menu.less
......@@ -101,10 +101,10 @@
list-style: none;
outline: none;
.collapse-transition {
transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
@transition-time padding-bottom ease-in-out;
}
// .collapse-transition {
// transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out,
// @transition-time padding-bottom ease-in-out;
// }
&-light {
background: #fff;
......
src/components/Table/src/BasicTable.vue
......@@ -185,8 +185,10 @@
} = useTableForm(getProps, slots, fetch);
const getBindValues = computed(() => {
const dataSource = toRaw(unref(getDataSourceRef));
let propsData: Recordable = {
size: 'middle',
// ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
...attrs,
customRow,
expandIcon: expandIcon(),
......@@ -199,7 +201,7 @@
rowKey: unref(getRowKey),
columns: toRaw(unref(getViewColumns)),
pagination: toRaw(unref(getPaginationInfo)),
dataSource: toRaw(unref(getDataSourceRef)),
dataSource,
footer: unref(getFooterProps),
...unref(getExpandOption),
};
......@@ -208,7 +210,6 @@
}
propsData = omit(propsData, 'class');
return propsData;
});
......
src/components/Transition/index.ts
import { createSimpleTransition, createJavascriptTransition } from './src/CreateTransition';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import ExpandTransitionGenerator from './src/ExpandTransition';
export { default as CollapseTransition } from './src/CollapseTransition';
// export { default as CollapseTransition } from './src/CollapseTransition';
export { default as CollapseTransition } from './src/CollapseTransition.vue';
export const FadeTransition = createSimpleTransition('fade-transition');
export const ScaleTransition = createSimpleTransition('scale-transition');
......@@ -18,15 +16,12 @@ export const SlideXReverseTransition = createSimpleTransition('slide-x-reverse-t
export const ScrollXReverseTransition = createSimpleTransition('scroll-x-reverse-transition');
export const ScaleRotateTransition = createSimpleTransition('scale-rotate-transition');
// Javascript transitions
// export const ExpandTransition = createJavascriptTransition(
// 'expand-transition',
// ExpandTransitionGenerator()
// );
export const ExpandXTransition = createJavascriptTransition(
'expand-x-transition',
ExpandTransitionGenerator('', true)
);
export const ExpandTransition = createAsyncComponent(() => import('./src/ExpandTransition.vue'));
export const ExpandTransition = createJavascriptTransition(
'expand-transition',
ExpandTransitionGenerator('')
);
src/components/Transition/src/CollapseTransition.tsx deleted 100644 → 0
// collapse 展开折叠
import { defineComponent } from 'vue';
import { getSlot } from '/@/utils/helper/tsxHelper';
// import { createJavascriptTransition } from './CreateTransition';
import ExpandTransition from './ExpandTransition.vue';
// export const ExpandTransition = createJavascriptTransition(
// 'expand-transition',
// ExpandTransitionGenerator()
// );
export default defineComponent({
name: 'CollapseTransition',
setup(_, { slots }) {
return () => <ExpandTransition>{() => getSlot(slots)}</ExpandTransition>;
},
});
src/components/Transition/src/ExpandTransition.vue → src/components/Transition/src/CollapseTransition.vue
<template>
<transition v-on="on">
<transition mode="out-in" v-on="on">
<slot></slot>
</transition>
</template>
<script lang="ts">
import { addClass, removeClass } from '/@/utils/domUtils';
import { defineComponent } from 'vue';
import { addClass, removeClass } from '/@/utils/domUtils';
export default defineComponent({
name: 'CollapseTransition',
setup() {
return {
on: {
beforeEnter(el: any) {
beforeEnter(el) {
addClass(el, 'collapse-transition');
if (!el.dataset) el.dataset = {};
......@@ -23,7 +24,7 @@
el.style.paddingBottom = 0;
},
enter(el: any) {
enter(el) {
el.dataset.oldOverflow = el.style.overflow;
if (el.scrollHeight !== 0) {
el.style.height = el.scrollHeight + 'px';
......@@ -38,14 +39,13 @@
el.style.overflow = 'hidden';
},
afterEnter(el: any) {
// for safari: remove class then reset height is necessary
afterEnter(el) {
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
},
beforeLeave(el: any) {
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.dataset.oldPaddingTop = el.style.paddingTop;
el.dataset.oldPaddingBottom = el.style.paddingBottom;
......@@ -55,19 +55,16 @@
el.style.overflow = 'hidden';
},
leave(el: any) {
leave(el) {
if (el.scrollHeight !== 0) {
// for safari: add class after set height, or it will jump to zero height suddenly, weired
addClass(el, 'collapse-transition');
// in vue3.0.4, transitionProperty is set 'none' to avoid 'v-leave-from' issue
el.style.transitionProperty = 'height';
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
afterLeave(el: any) {
afterLeave(el) {
removeClass(el, 'collapse-transition');
el.style.height = '';
el.style.overflow = el.dataset.oldOverflow;
......@@ -79,9 +76,3 @@
},
});
</script>
<style lang="less" scoped>
.collapse-transition {
transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out,
0.2s padding-bottom ease-in-out;
}
</style>
src/design/transition/index.less
......@@ -4,3 +4,7 @@
@import './slide.less';
@import './scroll.less';
@import './zoom.less';
.collapse-transition {
transition: 0.2s height ease-in-out, 0.2s padding-top ease-in-out, 0.2s padding-bottom ease-in-out;
}
src/views/demo/comp/transition/index.vue
......@@ -32,7 +32,7 @@
ScaleRotateTransition,
ExpandXTransition,
ExpandTransition,
} from '/@/components/Transition/index';
} from '/@/components/Transition';
const transitionList = [
'Fade',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论