Skip to content

B
basic-vue-admin
提交 55e9d9fc 作者: Vben
操作

perf: optimize components and add comments

上级 84d9300e
正在显示 包含 451 行增加 和 440 行删除
package.json
......@@ -35,7 +35,7 @@
"@iconify/iconify": "^2.0.1",
"@logicflow/core": "^0.4.11",
"@logicflow/extension": "^0.4.12",
"@vueuse/core": "^4.11.2",
"@vueuse/core": "^5.0.1",
"@zxcvbn-ts/core": "^0.3.0",
"ant-design-vue": "2.1.2",
"axios": "^0.21.1",
......@@ -63,7 +63,7 @@
"devDependencies": {
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
"@iconify/json": "^1.1.353",
"@iconify/json": "^1.1.354",
"@purge-icons/generated": "^0.7.0",
"@types/codemirror": "^5.60.0",
"@types/crypto-js": "^4.0.1",
......@@ -71,13 +71,13 @@
"@types/inquirer": "^7.3.1",
"@types/lodash-es": "^4.17.4",
"@types/mockjs": "^1.0.3",
"@types/node": "^15.12.1",
"@types/node": "^15.12.2",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.4.0",
"@types/qs": "^6.9.6",
"@types/sortablejs": "^1.10.6",
"@typescript-eslint/eslint-plugin": "^4.26.0",
"@typescript-eslint/parser": "^4.26.0",
"@typescript-eslint/eslint-plugin": "^4.26.1",
"@typescript-eslint/parser": "^4.26.1",
"@vitejs/plugin-legacy": "^1.4.1",
"@vitejs/plugin-vue": "^1.2.3",
"@vitejs/plugin-vue-jsx": "^1.1.5",
......@@ -92,7 +92,7 @@
"eslint-define-config": "^1.0.8",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.10.0",
"esno": "^0.7.0",
"esno": "^0.7.1",
"fs-extra": "^10.0.0",
"http-server": "^0.12.3",
"husky": "^6.0.0",
......@@ -121,14 +121,14 @@
"vite-plugin-style-import": "^0.10.1",
"vite-plugin-svg-icons": "^0.7.0",
"vite-plugin-theme": "^0.8.1",
"vite-plugin-windicss": "^1.0.1",
"vite-plugin-windicss": "^1.0.2",
"vue-eslint-parser": "^7.6.0",
"vue-tsc": "^0.1.7"
},
"resolutions": {
"//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
"bin-wrapper": "npm:bin-wrapper-china",
"rollup": "^2.51.0"
"rollup": "^2.51.1"
},
"repository": {
"type": "git",
......
src/components/Application/index.ts
import AppLogo from './src/AppLogo.vue';
import AppProvider from './src/AppProvider.vue';
import AppSearch from './src/search/AppSearch.vue';
import AppLocalePicker from './src/AppLocalePicker.vue';
import AppDarkModeToggle from './src/AppDarkModeToggle.vue';
import { withInstall } from '/@/utils';
import appLogo from './src/AppLogo.vue';
import appProvider from './src/AppProvider.vue';
import appSearch from './src/search/AppSearch.vue';
import appLocalePicker from './src/AppLocalePicker.vue';
import appDarkModeToggle from './src/AppDarkModeToggle.vue';
export { useAppProviderContext } from './src/useAppContext';
export { AppLogo, AppProvider, AppSearch, AppLocalePicker, AppDarkModeToggle };
export const AppLogo = withInstall(appLogo);
export const AppProvider = withInstall(appProvider);
export const AppSearch = withInstall(appSearch);
export const AppLocalePicker = withInstall(appLocalePicker);
export const AppDarkModeToggle = withInstall(appDarkModeToggle);
src/components/Application/src/AppDarkModeToggle.vue
<template>
<div
v-if="getShowDarkModeToggle"
:class="[
prefixCls,
{
[`${prefixCls}--dark`]: isDark,
},
]"
@click="toggleDarkMode"
>
<div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
<div :class="`${prefixCls}-inner`"> </div>
<SvgIcon size="14" name="sun" />
<SvgIcon size="14" name="moon" />
......@@ -16,25 +7,29 @@
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { SvgIcon } from '/@/components/Icon';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
import { updateDarkTheme } from '/@/logics/theme/dark';
import { ThemeEnum } from '/@/enums/appEnum';
export default defineComponent({
name: 'DarkModeToggle',
components: { SvgIcon },
setup() {
const { prefixCls } = useDesign('dark-mode-toggle');
const { prefixCls } = useDesign('dark-switch');
const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
const getClass = computed(() => [
prefixCls,
{
[`${prefixCls}--dark`]: isDark,
},
]);
function toggleDarkMode() {
const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
setDarkMode(darkMode);
......@@ -44,6 +39,7 @@
}
return {
getClass,
isDark,
prefixCls,
toggleDarkMode,
......@@ -53,7 +49,7 @@
});
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-dark-mode-toggle';
@prefix-cls: ~'@{namespace}-dark-switch';
html[data-theme='dark'] {
.@{prefix-cls} {
......
src/components/Application/src/AppLocalePicker.vue
......@@ -13,39 +13,44 @@
>
<span class="cursor-pointer flex items-center">
<Icon icon="ion:language" />
<span v-if="showText" class="ml-1">{{ getLangText }}</span>
<span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
</span>
</Dropdown>
</template>
<script lang="ts">
import type { LocaleType } from '/#/config';
import type { DropMenu } from '/@/components/Dropdown';
import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
import { Dropdown } from '/@/components/Dropdown';
import Icon from '/@/components/Icon';
import { Icon } from '/@/components/Icon';
import { useLocale } from '/@/locales/useLocale';
import { localeList } from '/@/settings/localeSetting';
import { propTypes } from '/@/utils/propTypes';
const props = {
/**
* Whether to display text
*/
showText: { type: Boolean, default: true },
/**
* Whether to refresh the interface when changing
*/
reload: { type: Boolean },
};
export default defineComponent({
name: 'AppLocalPicker',
components: { Dropdown, Icon },
props: {
// Whether to display text
showText: propTypes.bool.def(true),
// Whether to refresh the interface when changing
reload: propTypes.bool,
},
props,
setup(props) {
const selectedKeys = ref<string[]>([]);
const { changeLocale, getLocale } = useLocale();
const getLangText = computed(() => {
const getLocaleText = computed(() => {
const key = selectedKeys.value[0];
if (!key) return '';
if (!key) {
return '';
}
return localeList.find((item) => item.event === key)?.text;
});
......@@ -60,11 +65,13 @@
}
function handleMenuEvent(menu: DropMenu) {
if (unref(getLocale) === menu.event) return;
if (unref(getLocale) === menu.event) {
return;
}
toggleLocale(menu.event as string);
}
return { localeList, handleMenuEvent, selectedKeys, getLangText };
return { localeList, handleMenuEvent, selectedKeys, getLocaleText };
},
});
</script>
......
src/components/Application/src/AppLogo.vue
......@@ -3,63 +3,69 @@
* @Description: logo component
-->
<template>
<div
class="anticon"
:class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
@click="handleGoHome"
>
<div class="anticon" :class="getAppLogoClass" @click="goHome">
<img src="../../../assets/images/logo.png" />
<div
class="ml-2 truncate md:opacity-100"
:class="[
`${prefixCls}__title`,
{
'xs:opacity-0': !alwaysShowTitle,
},
]"
v-show="showTitle"
>
<div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
{{ title }}
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent, computed, unref } from 'vue';
import { useGlobSetting } from '/@/hooks/setting';
import { useGo } from '/@/hooks/web/usePage';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { PageEnum } from '/@/enums/pageEnum';
import { propTypes } from '/@/utils/propTypes';
const props = {
/**
* The theme of the current parent component
*/
theme: { type: String, validator: (v) => ['light', 'dark'].includes(v) },
/**
* Whether to show title
*/
showTitle: { type: Boolean, default: true },
/**
* The title is also displayed when the menu is collapsed
*/
alwaysShowTitle: { type: Boolean },
};
export default defineComponent({
name: 'AppLogo',
props: {
/**
* The theme of the current parent component
*/
theme: propTypes.oneOf(['light', 'dark']),
// Whether to show title
showTitle: propTypes.bool.def(true),
alwaysShowTitle: propTypes.bool.def(false),
},
setup() {
props: props,
setup(props) {
const { prefixCls } = useDesign('app-logo');
const { getCollapsedShowTitle } = useMenuSetting();
const { title } = useGlobSetting();
const go = useGo();
function handleGoHome(): void {
const getAppLogoClass = computed(() => [
prefixCls,
props.theme,
{ 'collapsed-show-title': unref(getCollapsedShowTitle) },
]);
const getTitleClass = computed(() => [
`${prefixCls}__title`,
{
'xs:opacity-0': !props.alwaysShowTitle,
},
]);
function goHome() {
go(PageEnum.BASE_HOME);
}
return {
handleGoHome,
getAppLogoClass,
getTitleClass,
getCollapsedShowTitle,
goHome,
title,
prefixCls,
getCollapsedShowTitle,
};
},
});
......
src/components/Application/src/AppProvider.vue
<script lang="ts">
import { defineComponent, toRefs, ref, unref } from 'vue';
import { createAppProviderContext } from './useAppContext';
import { prefixCls } from '/@/settings/designSetting';
import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
import { propTypes } from '/@/utils/propTypes';
import { prefixCls } from '/@/settings/designSetting';
import { useAppStore } from '/@/store/modules/app';
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
const props = {
/**
* class style prefix
*/
prefixCls: { type: String, default: prefixCls },
};
export default defineComponent({
name: 'AppProvider',
inheritAttrs: false,
props: {
prefixCls: propTypes.string.def(prefixCls),
},
props,
setup(props, { slots }) {
const isMobile = ref(false);
const isSetState = ref(false);
const appStore = useAppStore();
// Monitor screen breakpoint information changes
createBreakpointListen(({ screenMap, sizeEnum, width }) => {
const lgWidth = screenMap.get(sizeEnum.LG);
if (lgWidth) {
......@@ -30,8 +33,13 @@
});
const { prefixCls } = toRefs(props);
// Inject variables into the global
createAppProviderContext({ prefixCls, isMobile });
/**
* Used to maintain the state before the window changes
*/
function handleRestoreState() {
if (unref(isMobile)) {
if (!unref(isSetState)) {
......
src/components/Application/src/search/AppSearch.vue
......@@ -4,11 +4,11 @@
import { SearchOutlined } from '@ant-design/icons-vue';
import AppSearchModal from './AppSearchModal.vue';
import { useI18n } from '/@/hooks/web/useI18n';
export default defineComponent({
name: 'AppSearch',
setup() {
const showModal = ref(false);
const { t } = useI18n();
function changeModal(show: boolean) {
......
src/components/Application/src/search/AppSearchFooter.vue
<template>
<div :class="`${prefixCls}`">
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="ant-design:enter-outlined" />
<AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
<span>{{ t('component.app.toSearch') }}</span>
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-up-outline" />
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-down-outline" />
<AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
<AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-down-outline" />
<span>{{ t('component.app.toNavigate') }}</span>
<AppSearchKeyItem :class="`${prefixCls}__item`" icon="mdi:keyboard-esc" />
<AppSearchKeyItem :class="`${prefixCls}-item`" icon="mdi:keyboard-esc" />
<span>{{ t('common.closeText') }}</span>
</div>
</template>
......@@ -21,10 +21,7 @@
setup() {
const { prefixCls } = useDesign('app-search-footer');
const { t } = useI18n();
return {
prefixCls,
t,
};
return { prefixCls, t };
},
});
</script>
......@@ -44,7 +41,7 @@
align-items: center;
flex-shrink: 0;
&__item {
&-item {
display: flex;
width: 20px;
height: 18px;
......
src/components/Application/src/search/AppSearchKeyItem.vue
......@@ -8,8 +8,6 @@
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Icon },
props: {
icon: String,
},
props: { icon: String },
});
</script>
src/components/Application/src/search/AppSearchModal.vue
......@@ -12,7 +12,6 @@
@change="handleSearch"
>
<template #prefix>
<!-- <Icon icon="ion:search"/> -->
<SearchOutlined />
</template>
</Input>
......@@ -59,21 +58,20 @@
</template>
<script lang="ts">
import { defineComponent, computed, unref, ref, watch, nextTick } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { Input } from 'ant-design-vue';
import AppSearchFooter from './AppSearchFooter.vue';
import Icon from '/@/components/Icon';
import clickOutside from '/@/directives/clickOutside';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRefs } from '/@/hooks/core/useRefs';
import { useMenuSearch } from './useMenuSearch';
import { useI18n } from '/@/hooks/web/useI18n';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { propTypes } from '/@/utils/propTypes';
const props = {
visible: { type: Boolean },
};
export default defineComponent({
name: 'AppSearchModal',
......@@ -81,17 +79,16 @@
directives: {
clickOutside,
},
props: {
visible: propTypes.bool,
},
props,
emits: ['close'],
setup(props, { emit }) {
const scrollWrap = ref<ElRef>(null);
const { prefixCls } = useDesign('app-search-modal');
const inputRef = ref<Nullable<HTMLElement>>(null);
const { t } = useI18n();
const { prefixCls } = useDesign('app-search-modal');
const [refs, setRefs] = useRefs();
const { getIsMobile } = useAppInject();
const inputRef = ref<Nullable<HTMLElement>>(null);
const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
useMenuSearch(refs, scrollWrap, emit);
......@@ -109,8 +106,8 @@
watch(
() => props.visible,
(v: boolean) => {
v &&
(visible: boolean) => {
visible &&
nextTick(() => {
unref(inputRef)?.focus();
});
......
src/components/Application/src/search/useMenuSearch.ts
import type { Menu } from '/@/router/types';
import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
import { getMenus } from '/@/router/menus';
import { cloneDeep } from 'lodash-es';
import { filter, forEach } from '/@/utils/helper/treeHelper';
import { useGo } from '/@/hooks/web/usePage';
import { useScrollTo } from '/@/hooks/event/useScrollTo';
import { onKeyStroke, useDebounceFn } from '@vueuse/core';
......@@ -67,7 +63,6 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
function handlerSearchResult(filterMenu: Menu[], reg: RegExp, parent?: Menu) {
const ret: SearchResult[] = [];
filterMenu.forEach((item) => {
const { name, path, icon, children } = item;
if (reg.test(name) && !children?.length) {
......@@ -84,11 +79,13 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
return ret;
}
// Activate when the mouse moves to a certain line
function handleMouseenter(e: any) {
const index = e.target.dataset.index;
activeIndex.value = Number(index);
}
// Arrow key up
function handleUp() {
if (!searchResult.value.length) return;
activeIndex.value--;
......@@ -98,6 +95,7 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
handleScroll();
}
// Arrow key down
function handleDown() {
if (!searchResult.value.length) return;
activeIndex.value++;
......@@ -107,15 +105,23 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
handleScroll();
}
// When the keyboard up and down keys move to an invisible place
// the scroll bar needs to scroll automatically
function handleScroll() {
const refList = unref(refs);
if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) return;
if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) {
return;
}
const index = unref(activeIndex);
const currentRef = refList[index];
if (!currentRef) return;
if (!currentRef) {
return;
}
const wrapEl = unref(scrollWrap);
if (!wrapEl) return;
if (!wrapEl) {
return;
}
const scrollHeight = currentRef.offsetTop + currentRef.offsetHeight;
const wrapHeight = wrapEl.offsetHeight;
const { start } = useScrollTo({
......@@ -126,8 +132,11 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
start();
}
// enter keyboard event
async function handleEnter() {
if (!searchResult.value.length) return;
if (!searchResult.value.length) {
return;
}
const result = unref(searchResult);
const index = unref(activeIndex);
if (result.length === 0 || index < 0) {
......@@ -139,14 +148,18 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
go(to.path);
}
// close search modal
function handleClose() {
searchResult.value = [];
emit('close');
}
// enter search
onKeyStroke('Enter', handleEnter);
// Monitor keyboard arrow keys
onKeyStroke('ArrowUp', handleUp);
onKeyStroke('ArrowDown', handleDown);
// esc close
onKeyStroke('Escape', handleClose);
return { handleSearch, searchResult, keyword, activeIndex, handleMouseenter, handleEnter };
......
src/components/Application/src/useAppContext.ts
......@@ -3,7 +3,6 @@ import { createContext, useContext } from '/@/hooks/core/useContext';
export interface AppProviderContextProps {
prefixCls: Ref<string>;
isMobile: Ref<boolean>;
}
......
src/components/Authority/index.ts
import Authority from './src/Authority.vue';
import { withInstall } from '/@/utils';
import authority from './src/Authority.vue';
export { Authority };
export const Authority = withInstall(authority);
src/components/Authority/src/Authority.vue
......@@ -4,11 +4,8 @@
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { RoleEnum } from '/@/enums/roleEnum';
import { usePermission } from '/@/hooks/web/usePermission';
import { getSlot } from '/@/utils/helper/tsxHelper';
export default defineComponent({
......
src/components/Basic/index.ts
import BasicArrow from './src/BasicArrow.vue';
import BasicTitle from './src/BasicTitle.vue';
import BasicHelp from './src/BasicHelp.vue';
import { withInstall } from '/@/utils';
import basicArrow from './src/BasicArrow.vue';
import basicTitle from './src/BasicTitle.vue';
import basicHelp from './src/BasicHelp.vue';
export { BasicArrow, BasicTitle, BasicHelp };
export const BasicArrow = withInstall(basicArrow);
export const BasicTitle = withInstall(basicTitle);
export const BasicHelp = withInstall(basicHelp);
src/components/Basic/src/BasicArrow.vue
......@@ -9,41 +9,50 @@
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { Icon } from '/@/components/Icon';
import { useDesign } from '/@/hooks/web/useDesign';
import { propTypes } from '/@/utils/propTypes';
import { Icon } from '/@/components/Icon';
const props = {
/**
* Arrow expand state
*/
expand: { type: Boolean },
/**
* Arrow up by default
*/
up: { type: Boolean },
/**
* Arrow down by default
*/
down: { type: Boolean },
/**
* Cancel padding/margin for inline
*/
inset: { type: Boolean },
};
export default defineComponent({
name: 'BasicArrow',
components: { Icon },
props: {
expand: propTypes.bool,
top: propTypes.bool,
bottom: propTypes.bool,
inset: propTypes.bool,
},
props,
setup(props) {
const { prefixCls } = useDesign('basic-arrow');
// get component class
const getClass = computed(() => {
const { expand, top, bottom, inset } = props;
const { expand, up, down, inset } = props;
return [
prefixCls,
{
[`${prefixCls}--active`]: expand,
top,
up,
inset,
bottom,
down,
},
];
});
return {
getClass,
};
return { getClass };
},
});
</script>
......@@ -65,19 +74,19 @@
line-height: 0px;
}
&.top {
&.up {
transform: rotate(-90deg);
}
&.bottom {
&.down {
transform: rotate(90deg);
}
&.top.@{prefix-cls}--active {
&.up.@{prefix-cls}--active {
transform: rotate(90deg);
}
&.bottom.@{prefix-cls}--active {
&.down.@{prefix-cls}--active {
transform: rotate(-90deg);
}
}
......
src/components/Basic/src/BasicHelp.vue
<script lang="tsx">
import type { CSSProperties, PropType } from 'vue';
import { defineComponent, computed, unref } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { InfoCircleOutlined } from '@ant-design/icons-vue';
import { getPopupContainer } from '/@/utils';
import { isString, isArray } from '/@/utils/is';
import { getSlot } from '/@/utils/helper/tsxHelper';
import { propTypes } from '/@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
const props = {
/**
* Help text max-width
* @default: 600px
*/
maxWidth: { type: String, default: '600px' },
/**
* Whether to display the serial number
* @default: false
*/
showIndex: { type: Boolean },
/**
* Help text font color
* @default: #ffffff
*/
color: { type: String, default: '#ffffff' },
/**
* Help text font size
* @default: 14px
*/
fontSize: { type: String, default: '14px' },
/**
* Help text list
*/
placement: { type: String, default: 'right' },
/**
* Help text list
*/
text: { type: [Array, String] as PropType<string[] | string> },
};
export default defineComponent({
name: 'BasicHelp',
components: { Tooltip },
props: {
// max-width
maxWidth: propTypes.string.def('600px'),
// Whether to display the serial number
showIndex: propTypes.bool,
// color
color: propTypes.string.def('#ffffff'),
fontSize: propTypes.string.def('14px'),
placement: propTypes.string.def('right'),
absolute: propTypes.bool,
// Text list
text: {
type: [Array, String] as PropType<string[] | string>,
},
// 定位
position: {
type: [Object] as PropType<any>,
default: () => ({
position: 'absolute',
left: 0,
bottom: 0,
}),
},
},
props,
setup(props, { slots }) {
const { prefixCls } = useDesign('basic-help');
const getOverlayStyle = computed(
(): CSSProperties => {
return {
maxWidth: props.maxWidth,
};
}
);
const getWrapStyle = computed(
(): CSSProperties => {
return {
color: props.color,
fontSize: props.fontSize,
};
}
const getTooltipStyle = computed(
(): CSSProperties => ({ color: props.color, fontSize: props.fontSize })
);
const getMainStyleRef = computed(() => {
return props.absolute ? props.position : {};
});
const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));
const renderTitle = () => {
const list = props.text;
function renderTitle() {
const textList = props.text;
if (isString(list)) {
return <p>{list}</p>;
if (isString(textList)) {
return <p>{textList}</p>;
}
if (isArray(list)) {
return list.map((item, index) => {
if (isArray(textList)) {
return textList.map((text, index) => {
return (
<p key={item}>
<p key={text}>
<>
{props.showIndex ? `${index + 1}. ` : ''}
{item}
{text}
</>
</p>
);
});
}
return null;
};
}
return () => {
return (
<Tooltip
title={<div style={unref(getWrapStyle)}>{renderTitle()}</div>}
overlayClassName={`${prefixCls}__wrap`}
title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
autoAdjustOverflow={true}
overlayStyle={unref(getOverlayStyle)}
placement={props.placement as 'left'}
placement={props.placement as 'right'}
getPopupContainer={() => getPopupContainer()}
>
<span class={prefixCls} style={unref(getMainStyleRef)}>
{getSlot(slots) || <InfoCircleOutlined />}
</span>
<span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
</Tooltip>
);
};
......
src/components/Basic/src/BasicTitle.vue
<template>
<span :class="getClass">
<slot></slot>
<BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
<BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
</span>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent, computed } from 'vue';
import BasicHelp from './BasicHelp.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { propTypes } from '/@/utils/propTypes';
const props = {
/**
* Help text list or string
* @default: ''
*/
helpMessage: {
type: [String, Array] as PropType<string | string[]>,
default: '',
},
/**
* Whether the color block on the left side of the title
* @default: false
*/
span: { type: Boolean },
/**
* Whether to default the text, that is, not bold
* @default: false
*/
normal: { type: Boolean },
};
export default defineComponent({
name: 'BasicTitle',
components: { BasicHelp },
props: {
helpMessage: {
type: [String, Array] as PropType<string | string[]>,
default: '',
},
span: propTypes.bool,
normal: propTypes.bool.def(false),
},
props,
setup(props, { slots }) {
const { prefixCls } = useDesign('basic-title');
......@@ -33,6 +43,7 @@
{ [`${prefixCls}-show-span`]: props.span && slots.default },
{ [`${prefixCls}-normal`]: props.normal },
]);
return { prefixCls, getClass };
},
});
......@@ -67,7 +78,7 @@
content: '';
}
&__help {
&-help {
margin-left: 10px;
}
}
......
src/components/Button/index.ts
import Button from './src/BasicButton.vue';
import PopConfirmButton from './src/PopConfirmButton.vue';
import { withInstall } from '/@/utils';
import button from './src/BasicButton.vue';
import popConfirmButton from './src/PopConfirmButton.vue';
export { Button, PopConfirmButton };
export const Button = withInstall(button);
export const PopConfirmButton = withInstall(popConfirmButton);
src/components/Button/src/BasicButton.vue
......@@ -13,11 +13,21 @@
import { Icon } from '/@/components/Icon';
const props = {
color: { type: String, validate: (v) => ['error', 'warning', 'success', ''].includes(v) },
color: { type: String, validator: (v) => ['error', 'warning', 'success', ''].includes(v) },
loading: { type: Boolean },
disabled: { type: Boolean },
/**
* Text before icon.
*/
preIcon: { type: String },
/**
* Text after icon.
*/
postIcon: { type: String },
/**
* preIcon and postIcon icon size.
* @default: 14
*/
iconSize: { type: Number, default: 14 },
onClick: { type: Function as PropType<(...args) => any>, default: null },
};
......
src/components/Button/src/PopConfirmButton.vue
<script lang="ts">
import { defineComponent, h, unref, computed } from 'vue';
import { Popconfirm } from 'ant-design-vue';
import BasicButton from './BasicButton.vue';
import { Popconfirm } from 'ant-design-vue';
import { extendSlots } from '/@/utils/helper/tsxHelper';
import { omit } from 'lodash-es';
import { useAttrs } from '/@/hooks/core/useAttrs';
......
src/components/ClickOutSide/index.ts
import ClickOutSide from './src/ClickOutSide.vue';
import { withInstall } from '/@/utils';
import clickOutSide from './src/ClickOutSide.vue';
export { ClickOutSide };
export const ClickOutSide = withInstall(clickOutSide);
src/components/CodeEditor/index.ts
import { install } from '/@/utils/install';
import { withInstall } from '/@/utils';
import codeEditor from './src/CodeEditor.vue';
import jsonPreview from './src/json-preview/JsonPreview.vue';
export const CodeEditor = install(codeEditor);
export const JsonPreview = install(jsonPreview);
export const CodeEditor = withInstall(codeEditor);
export const JsonPreview = withInstall(jsonPreview);
src/components/CodeEditor/src/CodeEditor.vue
<template>
<div class="h-full">
<CodeMirrorEditor :value="getValue" @change="handleValueChange" :mode="mode" :readonly="readonly" />
<CodeMirrorEditor
:value="getValue"
@change="handleValueChange"
:mode="mode"
:readonly="readonly"
/>
</div>
</template>
<script lang="ts">
......@@ -13,43 +18,34 @@
html: 'htmlmixed',
js: 'javascript',
};
const props = {
value: { type: [Object, String] as PropType<Record<string, any> | string> },
mode: { type: String, default: MODE.JSON },
readonly: { type: Boolean },
};
export default defineComponent({
name: 'CodeEditor',
components: { CodeMirrorEditor },
props: {
value: {
type: [Object, String],
},
mode: {
type: String,
default: MODE.JSON,
},
readonly: {
type: Boolean,
default: false,
},
},
props,
emits: ['change'],
setup(props, { emit }) {
const getValue = computed(() => {
const { value, mode } = props;
if (mode === MODE.JSON) {
return isString(value)
? JSON.stringify(JSON.parse(value), null, 2)
: JSON.stringify(value, null, 2);
if (mode !== MODE.JSON) {
return value as string;
}
return value;
return isString(value)
? JSON.stringify(JSON.parse(value), null, 2)
: JSON.stringify(value, null, 2);
});
function handleValueChange(v) {
emit('change', v);
}
return {
handleValueChange,
getValue,
};
return { handleValueChange, getValue };
},
});
</script>
src/components/CodeEditor/src/codemirror/CodeMirror.vue
......@@ -15,31 +15,25 @@
} from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { useAppStore } from '/@/store/modules/app';
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
import CodeMirror from 'codemirror';
// css
import './codemirror.css';
import 'codemirror/theme/idea.css';
import 'codemirror/theme/material-palenight.css';
// modes
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
const props = {
mode: { type: String, default: 'application/json' },
value: { type: String, default: '' },
readonly: { type: Boolean, default: false },
};
export default defineComponent({
props: {
mode: {
type: String,
default: 'application/json',
},
value: {
type: String,
default: '',
},
readonly: {
type: Boolean,
default: false,
},
},
props,
emits: ['change'],
setup(props, { emit }) {
const el = ref();
......@@ -50,11 +44,11 @@
watch(
() => props.value,
async (v) => {
async (value) => {
await nextTick();
const oldValue = editor?.getValue();
if (v !== oldValue) {
editor?.setValue(v ? v : '');
if (value !== oldValue) {
editor?.setValue(value ? value : '');
}
},
{ flush: 'post' }
......@@ -113,13 +107,13 @@
onMounted(async () => {
await nextTick();
init();
window.addEventListener('resize', debounceRefresh);
useWindowSizeFn(debounceRefresh);
});
onUnmounted(() => {
window.removeEventListener('resize', debounceRefresh);
editor = null;
});
return { el };
},
});
......
src/components/CodeEditor/src/codemirror/codemirror.css
......@@ -12,20 +12,21 @@
--qualifier: #ff6032;
--important: var(--string);
position: relative;
height: auto;
height: 100%;
overflow: hidden;
font-family: var(--font-code);
background: white;
direction: ltr;
}
/* PADDING */
.CodeMirror-lines {
min-height: 1px; /* prevents collapsing before first draw */
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
cursor: text;
}
.CodeMirror-scrollbar-filler,
......@@ -36,6 +37,11 @@
/* GUTTER */
.CodeMirror-gutters {
position: absolute;
top: 0;
left: 0;
z-index: 3;
min-height: 100%;
white-space: nowrap;
background-color: transparent;
border-right: 1px solid #ddd;
......@@ -96,7 +102,9 @@
/* CURSOR */
.CodeMirror-cursor {
position: absolute;
width: 0;
pointer-events: none;
border-right: none;
border-left: 1px solid black;
}
......@@ -132,37 +140,19 @@
animation: blink 1.06s steps(1) infinite;
}
@-moz-keyframes blink {
0% {
}
50% {
background-color: transparent;
}
100% {
}
}
@-webkit-keyframes blink {
0% {
}
50% {
background-color: transparent;
}
100% {
}
}
@keyframes blink {
0% {
}
50% {
background-color: transparent;
}
100% {
}
}
.cm-tab {
......@@ -316,12 +306,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
position: relative;
overflow: hidden;
background: white;
}
.CodeMirror-scroll {
position: relative;
height: 100%;
......@@ -378,14 +362,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
left: 0;
}
.CodeMirror-gutters {
position: absolute;
top: 0;
left: 0;
z-index: 3;
min-height: 100%;
}
.CodeMirror-gutter {
display: inline-block;
height: 100%;
......@@ -422,14 +398,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
background-color: transparent;
}
.CodeMirror-lines {
min-height: 1px; /* prevents collapsing before first draw */
cursor: text;
}
.CodeMirror pre {
position: relative;
z-index: 2;
padding: 0 4px; /* Horizontal padding of content */
margin: 0;
overflow: visible;
font-family: inherit;
......@@ -497,11 +469,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
visibility: hidden;
}
.CodeMirror-cursor {
position: absolute;
pointer-events: none;
}
.CodeMirror-measure pre {
position: static;
}
......
src/components/CodeEditor/src/json-preview/JsonPreview.vue
......@@ -8,11 +8,7 @@
import { defineComponent } from 'vue';
export default defineComponent({
name: 'JsonPreview',
components: {
VueJsonPretty,
},
props: {
data: Object,
},
components: { VueJsonPretty },
props: { data: Object },
});
</script>
src/components/Container/index.ts
import CollapseContainer from './src/collapse/CollapseContainer.vue';
import ScrollContainer from './src/ScrollContainer.vue';
import LazyContainer from './src/LazyContainer.vue';
import { withInstall } from '/@/utils';
import collapseContainer from './src/collapse/CollapseContainer.vue';
import scrollContainer from './src/ScrollContainer.vue';
import lazyContainer from './src/LazyContainer.vue';
export { CollapseContainer, ScrollContainer, LazyContainer };
export * from './src/types';
export const CollapseContainer = withInstall(collapseContainer);
export const ScrollContainer = withInstall(scrollContainer);
export const LazyContainer = withInstall(lazyContainer);
export * from './src/typing';
src/components/Container/src/LazyContainer.vue
......@@ -18,13 +18,10 @@
</template>
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
import { Skeleton } from 'ant-design-vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
import { propTypes } from '/@/utils/propTypes';
interface State {
isInit: boolean;
......@@ -32,36 +29,47 @@
intersectionObserverInstance: IntersectionObserver | null;
}
const props = {
/**
* Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
*/
timeout: { type: Number },
/**
* The viewport where the component is located.
* If the component is scrolling in the page container, the viewport is the container
*/
viewport: {
type: (typeof window !== 'undefined' ? window.HTMLElement : Object) as PropType<HTMLElement>,
default: () => null,
},
/**
* Preload threshold, css unit
*/
threshold: { type: String, default: '0px' },
/**
* The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
*/
direction: {
type: String,
default: 'vertical',
validator: (v) => ['vertical', 'horizontal'].includes(v),
},
/**
* The label name of the outer container that wraps the component
*/
tag: { type: String, default: 'div' },
maxWaitingTime: { type: Number, default: 80 },
/**
* transition name
*/
transitionName: { type: String, default: 'lazy-container' },
};
export default defineComponent({
name: 'LazyContainer',
components: { Skeleton },
inheritAttrs: false,
props: {
// Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
timeout: propTypes.number,
// The viewport where the component is located. If the component is scrolling in the page container, the viewport is the container
viewport: {
type: (typeof window !== 'undefined'
? window.HTMLElement
: Object) as PropType<HTMLElement>,
default: () => null,
},
// Preload threshold, css unit
threshold: propTypes.string.def('0px'),
// The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
direction: propTypes.oneOf(['vertical', 'horizontal']).def('vertical'),
// The label name of the outer container that wraps the component
tag: propTypes.string.def('div'),
maxWaitingTime: propTypes.number.def(80),
// transition name
transitionName: propTypes.string.def('lazy-container'),
},
props,
emits: ['init'],
setup(props, { emit }) {
const elRef = ref();
......
src/components/Container/src/ScrollContainer.vue
......@@ -7,7 +7,6 @@
<script lang="ts">
import { defineComponent, ref, unref, nextTick } from 'vue';
import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
import { useScrollTo } from '/@/hooks/event/useScrollTo';
export default defineComponent({
......@@ -16,12 +15,14 @@
setup() {
const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
/**
* Scroll to the specified position
*/
function scrollTo(to: number, duration = 500) {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) {
return;
}
nextTick(() => {
const wrap = unref(scrollbar.wrap);
if (!wrap) {
......@@ -44,12 +45,14 @@
return scrollbar.wrap;
}
/**
* Scroll to the bottom
*/
function scrollBottom() {
const scrollbar = unref(scrollbarRef);
if (!scrollbar) {
return;
}
nextTick(() => {
const wrap = unref(scrollbar.wrap);
if (!wrap) {
......
src/components/Container/src/collapse/CollapseContainer.vue
<template>
<div :class="prefixCls">
<CollapseHeader
v-bind="getBindValues"
:prefixCls="prefixCls"
:show="show"
@expand="handleExpand"
>
<CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
<template #title>
<slot name="title"></slot>
</template>
......@@ -16,13 +11,12 @@
<div class="p-2">
<CollapseTransition :enable="canExpan">
<Skeleton v-if="loading" :active="active" />
<Skeleton v-if="loading" :active="loading" />
<div :class="`${prefixCls}__body`" v-else v-show="show">
<slot></slot>
</div>
</CollapseTransition>
</div>
<div :class="`${prefixCls}__footer`" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
......@@ -30,20 +24,41 @@
</template>
<script lang="ts">
import type { PropType } from 'vue';
import { defineComponent, ref, computed } from 'vue';
import { defineComponent, ref } from 'vue';
// component
import { Skeleton } from 'ant-design-vue';
import { CollapseTransition } from '/@/components/Transition';
import CollapseHeader from './CollapseHeader.vue';
import { triggerWindowResize } from '/@/utils/event';
// hook
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { propTypes } from '/@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
const props = {
title: { type: String, default: '' },
loading: { type: Boolean },
/**
* Can it be expanded
*/
canExpan: { type: Boolean, default: true },
/**
* Warm reminder on the right side of the title
*/
helpMessage: {
type: [Array, String] as PropType<string[] | string>,
default: '',
},
/**
* 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: { type: Boolean },
/**
* Delayed loading time
*/
lazyTime: { type: Number, default: 0 },
};
export default defineComponent({
name: 'CollapseContainer',
components: {
......@@ -51,23 +66,7 @@
CollapseHeader,
CollapseTransition,
},
props: {
title: propTypes.string.def(''),
// Can it be expanded
canExpan: propTypes.bool.def(true),
// Warm reminder on the right side of the title
helpMessage: {
type: [Array, String] as PropType<string[] | string>,
default: '',
},
// 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.def(false),
active: propTypes.bool.def(true),
// Delayed loading time
lazyTime: propTypes.number.def(0),
},
props,
setup(props) {
const show = ref(true);
......@@ -84,15 +83,10 @@
}
}
const getBindValues = computed((): any => {
return props;
});
return {
show,
handleExpand,
prefixCls,
getBindValues,
};
},
});
......
src/components/Container/src/collapse/CollapseHeader.vue
......@@ -8,28 +8,31 @@
<slot name="title"></slot>
</template>
</BasicTitle>
<div :class="`${prefixCls}__action`">
<slot name="action"></slot>
<BasicArrow v-if="canExpan" top :expand="show" @click="$emit('expand')" />
<BasicArrow v-if="canExpan" up :expand="show" @click="$emit('expand')" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicArrow, BasicTitle } from '/@/components/Basic';
import { propTypes } from '/@/utils/propTypes';
const props = {
prefixCls: { type: String },
helpMessage: {
type: [Array, String] as PropType<string[] | string>,
default: '',
},
title: { type: String },
show: { type: Boolean },
canExpan: { type: Boolean },
};
export default defineComponent({
components: { BasicArrow, BasicTitle },
inheritAttrs: false,
props: {
prefixCls: propTypes.string,
helpMessage: propTypes.string,
title: propTypes.string,
show: propTypes.bool,
canExpan: propTypes.bool,
},
props,
emits: ['expand'],
});
</script>
src/components/FlowChart/index.ts
import { install } from '/@/utils/install';
import { withInstall } from '/@/utils';
import flowChart from './src/FlowChart.vue';
export const FlowChart = install(flowChart);
export const FlowChart = withInstall(flowChart);
src/components/Form/src/components/FormAction.vue
......@@ -31,7 +31,7 @@
v-if="showAdvancedButton && !hideAdvanceBtn"
>
{{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
<BasicArrow class="ml-1" :expand="!isAdvanced" top />
<BasicArrow class="ml-1" :expand="!isAdvanced" up />
</Button>
<slot name="advanceAfter"></slot>
</FormItem>
......@@ -99,16 +99,14 @@
return actionColOpt;
});
const getResetBtnOptions = computed(
(): ButtonOptions => {
return Object.assign(
{
text: t('common.resetText'),
},
props.resetButtonOptions
);
}
);
const getResetBtnOptions = computed((): ButtonOptions => {
return Object.assign(
{
text: t('common.resetText'),
},
props.resetButtonOptions
);
});
const getSubmitBtnOptions = computed(() => {
return Object.assign(
......
src/utils/index.ts
import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
import type { App, Plugin } from 'vue';
import { unref } from 'vue';
import { isObject } from '/@/utils/is';
......@@ -76,3 +78,14 @@ export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormal
: undefined) as RouteRecordNormalized[],
};
}
export const withInstall = <T>(component: T, alias?: string) => {
const comp = component as any;
comp.install = (app: App) => {
app.component(comp.name || comp.displayName, component);
if (alias) {
app.config.globalProperties[alias] = component;
}
};
return component as T & Plugin;
};
src/utils/install.ts deleted 100644 → 0
import { App, Plugin } from 'vue';
export const install = <T>(component: T, alias?: string) => {
const C = component as any;
C.install = (app: App) => {
app.component(C.name, component);
if (alias) {
app.config.globalProperties[alias] = component;
}
};
return component as T & Plugin;
};
src/views/sys/login/Login.vue
......@@ -35,8 +35,7 @@
class="
my-auto
mx-auto
xl:ml-20
xl:bg-transparent
xl:ml-20 xl:bg-transparent
px-5
py-8
sm:px-8
......
types/module.d.ts
declare module '*.vue' {
import { defineComponent } from 'vue';
const Component: ReturnType<typeof defineComponent>;
import { DefineComponent } from 'vue';
const Component: DefineComponent<{}, {}, any>;
export default Component;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论