提交 00fca0fe 作者: Vben

chore: prettier code

上级 34a80542
export { createContextMenu, destroyContextMenu } from './src/createContextMenu'; export { createContextMenu, destroyContextMenu } from './src/createContextMenu';
export * from './src/types'; export * from './src/typing';
import './index.less'; <script lang="tsx">
import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
import type { ContextMenuItem, ItemContentProps } from './types'; import type { FunctionalComponent, CSSProperties } from 'vue';
import type { FunctionalComponent, CSSProperties } from 'vue'; import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
import Icon from '/@/components/Icon';
import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue'; import { Menu, Divider } from 'ant-design-vue';
import Icon from '/@/components/Icon'; const prefixCls = 'context-menu';
import { Menu, Divider } from 'ant-design-vue';
const props = {
import { contextMenuProps } from './props'; width: { type: Number, default: 156 },
customEvent: { type: Object as PropType<Event>, default: null },
const prefixCls = 'context-menu'; styles: { type: Object as PropType<CSSProperties> },
showIcon: { type: Boolean, default: true },
const ItemContent: FunctionalComponent<ItemContentProps> = (props) => { axis: {
const { item } = props; // The position of the right mouse button click
return ( type: Object as PropType<Axis>,
<span default() {
style="display: inline-block; width: 100%; " return { x: 0, y: 0 };
class="px-4" },
onClick={props.handler.bind(null, item)} },
> items: {
{props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />} // The most important list, if not, will not be displayed
<span>{item.label}</span> type: Array as PropType<ContextMenuItem[]>,
</span> default() {
); return [];
}; },
},
export default defineComponent({ };
name: 'ContextMenu',
props: contextMenuProps, const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
setup(props) { const { item } = props;
const wrapRef = ref<ElRef>(null); return (
const showRef = ref(false); <span
style="display: inline-block; width: 100%; "
const getStyle = computed((): CSSProperties => { class="px-4"
const { axis, items, styles, width } = props; onClick={props.handler.bind(null, item)}
const { x, y } = axis || { x: 0, y: 0 }; >
const menuHeight = (items || []).length * 40; {props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
const menuWidth = width; <span>{item.label}</span>
const body = document.body; </span>
);
const left = body.clientWidth < x + menuWidth ? x - menuWidth : x; };
const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
return { export default defineComponent({
...styles, name: 'ContextMenu',
width: `${width}px`, props,
left: `${left + 1}px`, setup(props) {
top: `${top + 1}px`, const wrapRef = ref<ElRef>(null);
}; const showRef = ref(false);
});
const getStyle = computed((): CSSProperties => {
onMounted(() => { const { axis, items, styles, width } = props;
nextTick(() => (showRef.value = true)); const { x, y } = axis || { x: 0, y: 0 };
}); const menuHeight = (items || []).length * 40;
const menuWidth = width;
onUnmounted(() => { const body = document.body;
const el = unref(wrapRef);
el && document.body.removeChild(el); const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
}); const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
return {
...styles,
width: `${width}px`,
left: `${left + 1}px`,
top: `${top + 1}px`,
};
});
function handleAction(item: ContextMenuItem, e: MouseEvent) { onMounted(() => {
const { handler, disabled } = item; nextTick(() => (showRef.value = true));
if (disabled) return; });
showRef.value = false;
e?.stopPropagation(); onUnmounted(() => {
e?.preventDefault(); unref(wrapRef) && document.body.removeChild(el);
handler?.(); });
}
function renderMenuItem(items: ContextMenuItem[]) { function handleAction(item: ContextMenuItem, e: MouseEvent) {
return items.map((item) => { const { handler, disabled } = item;
const { disabled, label, children, divider = false } = item; if (disabled) {
return;
}
showRef.value = false;
e?.stopPropagation();
e?.preventDefault();
handler?.();
}
function renderMenuItem(items: ContextMenuItem[]) {
return items.map((item) => {
const { disabled, label, children, divider = false } = item;
const contentProps = {
item,
handler: handleAction,
showIcon: props.showIcon,
};
if (!children || children.length === 0) {
return (
<>
<Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
<ItemContent {...contentProps} />
</Menu.Item>
{divider ? <Divider key={`d-${label}`} /> : null}
</>
);
}
if (!unref(showRef)) return null;
const DividerComp = divider ? <Divider key={`d-${label}`} /> : null;
if (!children || children.length === 0) {
return ( return (
<> <Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
<Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}> {{
<ItemContent showIcon={props.showIcon} item={item} handler={handleAction} /> title: () => <ItemContent {...contentProps} />,
</Menu.Item> default: () => renderMenuItem(children),
{DividerComp} }}
</> </Menu.SubMenu>
); );
} });
}
return () => {
const { items } = props;
if (!unref(showRef)) return null; if (!unref(showRef)) return null;
return ( return (
<Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}> <Menu
{{ inlineIndent={12}
title: () => ( mode="vertical"
<ItemContent showIcon={props.showIcon} item={item} handler={handleAction} /> class={prefixCls}
), ref={wrapRef}
default: () => renderMenuItem(children), style={unref(getStyle)}
}} >
</Menu.SubMenu> {renderMenuItem(items)}
</Menu>
); );
}); };
},
});
</script>
<style lang="less">
@default-height: 42px !important;
@small-height: 36px !important;
@large-height: 36px !important;
.item-style() {
li {
display: inline-block;
width: 100%;
height: @default-height;
margin: 0 !important;
line-height: @default-height;
span {
line-height: @default-height;
}
> div {
margin: 0 !important;
}
&:not(.ant-menu-item-disabled):hover {
color: @text-color-base;
background-color: @item-hover-bg;
}
}
}
.context-menu {
position: fixed;
top: 0;
left: 0;
z-index: 200;
display: block;
width: 156px;
margin: 0;
list-style: none;
background-color: @component-background;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.25rem;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
0 1px 5px 0 rgba(0, 0, 0, 0.06);
background-clip: padding-box;
user-select: none;
.item-style();
.ant-divider {
margin: 0 0;
}
&__popup {
.ant-divider {
margin: 0 0;
}
.item-style();
}
.ant-menu-submenu-title,
.ant-menu-item {
padding: 0 !important;
} }
return () => { }
const { items } = props; </style>
if (!unref(showRef)) return null;
return (
<Menu
inlineIndent={12}
mode="vertical"
class={prefixCls}
ref={wrapRef}
style={unref(getStyle)}
>
{renderMenuItem(items)}
</Menu>
);
};
},
});
import contextMenuVue from './ContextMenu'; import contextMenuVue from './ContextMenu.vue';
import { isClient } from '/@/utils/is'; import { isClient } from '/@/utils/is';
import { CreateContextOptions, ContextMenuProps } from './types'; import { CreateContextOptions, ContextMenuProps } from './typing';
import { createVNode, render } from 'vue'; import { createVNode, render } from 'vue';
const menuManager: { const menuManager: {
...@@ -16,7 +16,9 @@ export const createContextMenu = function (options: CreateContextOptions) { ...@@ -16,7 +16,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
event && event?.preventDefault(); event && event?.preventDefault();
if (!isClient) return; if (!isClient) {
return;
}
return new Promise((resolve) => { return new Promise((resolve) => {
const body = document.body; const body = document.body;
...@@ -54,9 +56,9 @@ export const createContextMenu = function (options: CreateContextOptions) { ...@@ -54,9 +56,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
body.removeEventListener('scroll', handleClick); body.removeEventListener('scroll', handleClick);
}; };
menuManager.resolve = function (...arg: any) { menuManager.resolve = function (arg) {
remove(); remove();
resolve(arg[0]); resolve(arg);
}; };
remove(); remove();
body.appendChild(container); body.appendChild(container);
......
@default-height: 42px !important;
@small-height: 36px !important;
@large-height: 36px !important;
.item-style() {
li {
display: inline-block;
width: 100%;
height: @default-height;
margin: 0 !important;
line-height: @default-height;
span {
line-height: @default-height;
}
> div {
margin: 0 !important;
}
&:not(.ant-menu-item-disabled):hover {
color: @text-color-base;
background-color: @item-hover-bg;
}
}
}
.context-menu {
position: fixed;
top: 0;
left: 0;
z-index: 200;
display: block;
width: 156px;
margin: 0;
list-style: none;
background-color: @component-background;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.25rem;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
0 1px 5px 0 rgba(0, 0, 0, 0.06);
background-clip: padding-box;
user-select: none;
.item-style();
.ant-divider {
margin: 0 0;
}
&__popup {
.ant-divider {
margin: 0 0;
}
.item-style();
}
.ant-menu-submenu-title,
.ant-menu-item {
padding: 0 !important;
}
}
import type { PropType } from 'vue';
import type { Axis, ContextMenuItem } from './types';
import { propTypes } from '/@/utils/propTypes';
export const contextMenuProps = {
width: propTypes.number.def(156),
customEvent: {
type: Object as PropType<Event>,
default: null,
},
styles: propTypes.style,
showIcon: propTypes.bool.def(true),
axis: {
// The position of the right mouse button click
type: Object as PropType<Axis>,
default() {
return { x: 0, y: 0 };
},
},
items: {
// The most important list, if not, will not be displayed
type: Array as PropType<ContextMenuItem[]>,
default() {
return [];
},
},
};
...@@ -81,46 +81,40 @@ ...@@ -81,46 +81,40 @@
instance && emit('register', drawerInstance, instance.uid); instance && emit('register', drawerInstance, instance.uid);
const getMergeProps = computed( const getMergeProps = computed((): DrawerProps => {
(): DrawerProps => { return deepMerge(toRaw(props), unref(propsRef));
return deepMerge(toRaw(props), unref(propsRef)); });
}
);
const getProps = computed( const getProps = computed((): DrawerProps => {
(): DrawerProps => { const opt = {
const opt = { placement: 'right',
placement: 'right', ...unref(attrs),
...unref(attrs), ...unref(getMergeProps),
...unref(getMergeProps), visible: unref(visibleRef),
visible: unref(visibleRef), };
}; opt.title = undefined;
opt.title = undefined; const { isDetail, width, wrapClassName, getContainer } = opt;
const { isDetail, width, wrapClassName, getContainer } = opt; if (isDetail) {
if (isDetail) { if (!width) {
if (!width) { opt.width = '100%';
opt.width = '100%';
}
const detailCls = `${prefixCls}__detail`;
opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
if (!getContainer) {
// TODO type error?
opt.getContainer = `.${prefixVar}-layout-content` as any;
}
} }
return opt as DrawerProps; const detailCls = `${prefixCls}__detail`;
} opt.wrapClassName = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls;
);
const getBindValues = computed( if (!getContainer) {
(): DrawerProps => { // TODO type error?
return { opt.getContainer = `.${prefixVar}-layout-content` as any;
...attrs, }
...unref(getProps),
};
} }
); return opt as DrawerProps;
});
const getBindValues = computed((): DrawerProps => {
return {
...attrs,
...unref(getProps),
};
});
// Custom implementation of the bottom button, // Custom implementation of the bottom button,
const getFooterHeight = computed(() => { const getFooterHeight = computed(() => {
...@@ -133,15 +127,13 @@ ...@@ -133,15 +127,13 @@
return `0px`; return `0px`;
}); });
const getScrollContentStyle = computed( const getScrollContentStyle = computed((): CSSProperties => {
(): CSSProperties => { const footerHeight = unref(getFooterHeight);
const footerHeight = unref(getFooterHeight); return {
return { position: 'relative',
position: 'relative', height: `calc(100% - ${footerHeight})`,
height: `calc(100% - ${footerHeight})`, };
}; });
}
);
const getLoading = computed(() => { const getLoading = computed(() => {
return !!unref(getProps)?.loading; return !!unref(getProps)?.loading;
......
...@@ -43,15 +43,13 @@ ...@@ -43,15 +43,13 @@
setup(props, { emit }) { setup(props, { emit }) {
const { prefixCls } = useDesign('basic-drawer-footer'); const { prefixCls } = useDesign('basic-drawer-footer');
const getStyle = computed( const getStyle = computed((): CSSProperties => {
(): CSSProperties => { const heightStr = `${props.height}`;
const heightStr = `${props.height}`; return {
return { height: heightStr,
height: heightStr, lineHeight: heightStr,
lineHeight: heightStr, };
}; });
}
);
function handleOk() { function handleOk() {
emit('ok'); emit('ok');
......
...@@ -174,9 +174,7 @@ ...@@ -174,9 +174,7 @@
return Promise.resolve(); return Promise.resolve();
} }
const getRequired = isFunction(required) const getRequired = isFunction(required) ? required(unref(getValues)) : required;
? required(unref(getValues))
: required;
if ((!rules || rules.length === 0) && getRequired) { if ((!rules || rules.length === 0) && getRequired) {
rules = [{ required: getRequired, validator }]; rules = [{ required: getRequired, validator }];
......
...@@ -36,17 +36,15 @@ ...@@ -36,17 +36,15 @@
const { prefixCls } = useDesign('svg-icon'); const { prefixCls } = useDesign('svg-icon');
const symbolId = computed(() => `#${props.prefix}-${props.name}`); const symbolId = computed(() => `#${props.prefix}-${props.name}`);
const getStyle = computed( const getStyle = computed((): CSSProperties => {
(): CSSProperties => { const { size } = props;
const { size } = props; let s = `${size}`;
let s = `${size}`; s = `${s.replace('px', '')}px`;
s = `${s.replace('px', '')}px`; return {
return { width: s,
width: s, height: s,
height: s, };
}; });
}
);
return { symbolId, prefixCls, getStyle }; return { symbolId, prefixCls, getStyle };
}, },
}); });
......
...@@ -107,14 +107,12 @@ ...@@ -107,14 +107,12 @@
} }
// Custom title component: get title // Custom title component: get title
const getMergeProps = computed( const getMergeProps = computed((): ModalProps => {
(): ModalProps => { return {
return { ...props,
...props, ...(unref(propsRef) as any),
...(unref(propsRef) as any), };
}; });
}
);
const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({ const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
modalWrapperRef, modalWrapperRef,
...@@ -123,31 +121,27 @@ ...@@ -123,31 +121,27 @@
}); });
// modal component does not need title and origin buttons // modal component does not need title and origin buttons
const getProps = computed( const getProps = computed((): ModalProps => {
(): ModalProps => { const opt = {
const opt = { ...unref(getMergeProps),
...unref(getMergeProps), visible: unref(visibleRef),
visible: unref(visibleRef), okButtonProps: undefined,
okButtonProps: undefined, cancelButtonProps: undefined,
cancelButtonProps: undefined, title: undefined,
title: undefined, };
}; return {
return { ...opt,
...opt, wrapClassName: unref(getWrapClassName),
wrapClassName: unref(getWrapClassName), };
}; });
}
);
const getBindValue = computed( const getBindValue = computed((): Recordable => {
(): Recordable => { const attr = { ...attrs, ...unref(getProps) };
const attr = { ...attrs, ...unref(getProps) }; if (unref(fullScreenRef)) {
if (unref(fullScreenRef)) { return omit(attr, 'height');
return omit(attr, 'height');
}
return attr;
} }
); return attr;
});
const getWrapperHeight = computed(() => { const getWrapperHeight = computed(() => {
if (unref(fullScreenRef)) return undefined; if (unref(fullScreenRef)) return undefined;
......
...@@ -39,9 +39,8 @@ ...@@ -39,9 +39,8 @@
const active = ref(false); const active = ref(false);
const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } = useMenuItem( const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } =
instance useMenuItem(instance);
);
const { prefixCls } = useDesign('menu'); const { prefixCls } = useDesign('menu');
......
...@@ -109,9 +109,8 @@ ...@@ -109,9 +109,8 @@
isChild: false, isChild: false,
}); });
const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } = useMenuItem( const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } =
instance useMenuItem(instance);
);
const { prefixCls } = useDesign('menu'); const { prefixCls } = useDesign('menu');
...@@ -148,13 +147,11 @@ ...@@ -148,13 +147,11 @@
const getCollapse = computed(() => rootProps.collapse); const getCollapse = computed(() => rootProps.collapse);
const getTheme = computed(() => rootProps.theme); const getTheme = computed(() => rootProps.theme);
const getOverlayStyle = computed( const getOverlayStyle = computed((): CSSProperties => {
(): CSSProperties => { return {
return { minWidth: '200px',
minWidth: '200px', };
}; });
}
);
const getIsOpend = computed(() => { const getIsOpend = computed(() => {
const name = props.name; const name = props.name;
......
...@@ -14,26 +14,24 @@ export function useMenuItem(instance: ComponentInternalInstance | null) { ...@@ -14,26 +14,24 @@ export function useMenuItem(instance: ComponentInternalInstance | null) {
return findParentMenu(['SubMenu']); return findParentMenu(['SubMenu']);
}); });
const getItemStyle = computed( const getItemStyle = computed((): CSSProperties => {
(): CSSProperties => { let parent = instance?.parent;
let parent = instance?.parent; if (!parent) return {};
if (!parent) return {}; const indentSize = (unref(getParentRootMenu)?.props.indentSize as number) ?? 20;
const indentSize = (unref(getParentRootMenu)?.props.indentSize as number) ?? 20; let padding = indentSize;
let padding = indentSize;
if (unref(getParentRootMenu)?.props.collapse) { if (unref(getParentRootMenu)?.props.collapse) {
padding = indentSize; padding = indentSize;
} else { } else {
while (parent && parent.type.name !== 'Menu') { while (parent && parent.type.name !== 'Menu') {
if (parent.type.name === 'SubMenu') { if (parent.type.name === 'SubMenu') {
padding += indentSize; padding += indentSize;
}
parent = parent.parent;
} }
parent = parent.parent;
} }
return { paddingLeft: padding + 'px' };
} }
); return { paddingLeft: padding + 'px' };
});
function findParentMenu(name: string[]) { function findParentMenu(name: string[]) {
let parent = instance?.parent; let parent = instance?.parent;
......
...@@ -31,12 +31,14 @@ function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): Docu ...@@ -31,12 +31,14 @@ function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): Docu
excludes = binding.arg; excludes = binding.arg;
} else { } else {
// due to current implementation on binding type is wrong the type casting is necessary here // due to current implementation on binding type is wrong the type casting is necessary here
excludes.push((binding.arg as unknown) as HTMLElement); excludes.push(binding.arg as unknown as HTMLElement);
} }
return function (mouseup, mousedown) { return function (mouseup, mousedown) {
const popperRef = (binding.instance as ComponentPublicInstance<{ const popperRef = (
popperRef: Nullable<HTMLElement>; binding.instance as ComponentPublicInstance<{
}>).popperRef; popperRef: Nullable<HTMLElement>;
}>
).popperRef;
const mouseUpTarget = mouseup.target as Node; const mouseUpTarget = mouseup.target as Node;
const mouseDownTarget = mousedown.target as Node; const mouseDownTarget = mousedown.target as Node;
const isBound = !binding || !binding.instance; const isBound = !binding || !binding.instance;
......
...@@ -21,9 +21,7 @@ function getKey(namespace: string | undefined, key: string) { ...@@ -21,9 +21,7 @@ function getKey(namespace: string | undefined, key: string) {
return `${namespace}.${key}`; return `${namespace}.${key}`;
} }
export function useI18n( export function useI18n(namespace?: string): {
namespace?: string
): {
t: I18nGlobalTranslation; t: I18nGlobalTranslation;
} { } {
const normalFn = { const normalFn = {
......
...@@ -60,7 +60,7 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions { ...@@ -60,7 +60,7 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions {
icon: getIcon(iconType), icon: getIcon(iconType),
...options, ...options,
}; };
return (Modal.confirm(opt) as unknown) as ConfirmOptions; return Modal.confirm(opt) as unknown as ConfirmOptions;
} }
const getBaseOptions = () => { const getBaseOptions = () => {
......
...@@ -71,10 +71,10 @@ ...@@ -71,10 +71,10 @@
const breadcrumbList = filterItem(matched); const breadcrumbList = filterItem(matched);
if (currentRoute.value.meta?.currentActiveMenu) { if (currentRoute.value.meta?.currentActiveMenu) {
breadcrumbList.push(({ breadcrumbList.push({
...currentRoute.value, ...currentRoute.value,
name: currentRoute.value.meta?.title || currentRoute.value.name, name: currentRoute.value.meta?.title || currentRoute.value.name,
} as unknown) as RouteLocationMatched); } as unknown as RouteLocationMatched);
} }
routes.value = breadcrumbList; routes.value = breadcrumbList;
}); });
......
...@@ -76,13 +76,11 @@ ...@@ -76,13 +76,11 @@
); );
}); });
const getWrapperStyle = computed( const getWrapperStyle = computed((): CSSProperties => {
(): CSSProperties => { return {
return { height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`,
height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`, };
}; });
}
);
const getLogoClass = computed(() => { const getLogoClass = computed(() => {
return [ return [
......
...@@ -58,12 +58,8 @@ export default defineComponent({ ...@@ -58,12 +58,8 @@ export default defineComponent({
getThemeColor, getThemeColor,
} = useRootSetting(); } = useRootSetting();
const { const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } =
getOpenPageLoading, useTransitionSetting();
getBasicTransition,
getEnableTransition,
getOpenNProgress,
} = useTransitionSetting();
const { const {
getIsHorizontal, getIsHorizontal,
......
...@@ -89,19 +89,17 @@ ...@@ -89,19 +89,17 @@
]; ];
}); });
const getHiddenDomStyle = computed( const getHiddenDomStyle = computed((): CSSProperties => {
(): CSSProperties => { const width = `${unref(getRealWidth)}px`;
const width = `${unref(getRealWidth)}px`; return {
return { width: width,
width: width, overflow: 'hidden',
overflow: 'hidden', flex: `0 0 ${width}`,
flex: `0 0 ${width}`, maxWidth: width,
maxWidth: width, minWidth: width,
minWidth: width, transition: 'all 0.2s',
transition: 'all 0.2s', };
}; });
}
);
return { return {
prefixCls, prefixCls,
......
...@@ -147,14 +147,12 @@ ...@@ -147,14 +147,12 @@
useDragLine(sideRef, dragBarRef, true); useDragLine(sideRef, dragBarRef, true);
const getMenuStyle = computed( const getMenuStyle = computed((): CSSProperties => {
(): CSSProperties => { return {
return { width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0, left: `${unref(getMixSideWidth)}px`,
left: `${unref(getMixSideWidth)}px`, };
}; });
}
);
const getIsFixed = computed(() => { const getIsFixed = computed(() => {
/* eslint-disable-next-line */ /* eslint-disable-next-line */
...@@ -171,20 +169,16 @@ ...@@ -171,20 +169,16 @@
return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH; return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
}); });
const getDomStyle = computed( const getDomStyle = computed((): CSSProperties => {
(): CSSProperties => { const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0; const width = `${unref(getMixSideWidth) + fixedWidth}px`;
const width = `${unref(getMixSideWidth) + fixedWidth}px`; return getWrapCommonStyle(width);
return getWrapCommonStyle(width); });
}
);
const getWrapStyle = computed( const getWrapStyle = computed((): CSSProperties => {
(): CSSProperties => { const width = `${unref(getMixSideWidth)}px`;
const width = `${unref(getMixSideWidth)}px`; return getWrapCommonStyle(width);
return getWrapCommonStyle(width); });
}
);
const getMenuEvents = computed(() => { const getMenuEvents = computed(() => {
return !unref(getMixSideFixed) return !unref(getMixSideFixed)
......
...@@ -106,8 +106,7 @@ ...@@ -106,8 +106,7 @@
.getRoutes() .getRoutes()
.find((item) => item.path === currentActiveMenu); .find((item) => item.path === currentActiveMenu);
findParentRoute && findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
tabStore.addTab((findParentRoute as unknown) as RouteLocationNormalized);
} else { } else {
tabStore.addTab(unref(route)); tabStore.addTab(unref(route));
} }
......
...@@ -30,14 +30,14 @@ export function initAffixTabs(): string[] { ...@@ -30,14 +30,14 @@ export function initAffixTabs(): string[] {
* @description: Set fixed tabs * @description: Set fixed tabs
*/ */
function addAffixTabs(): void { function addAffixTabs(): void {
const affixTabs = filterAffixTabs((router.getRoutes() as unknown) as RouteLocationNormalized[]); const affixTabs = filterAffixTabs(router.getRoutes() as unknown as RouteLocationNormalized[]);
affixList.value = affixTabs; affixList.value = affixTabs;
for (const tab of affixTabs) { for (const tab of affixTabs) {
tabStore.addTab(({ tabStore.addTab({
meta: tab.meta, meta: tab.meta,
name: tab.name, name: tab.name,
path: tab.path, path: tab.path,
} as unknown) as RouteLocationNormalized); } as unknown as RouteLocationNormalized);
} }
} }
......
...@@ -20,11 +20,9 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp ...@@ -20,11 +20,9 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
const { currentRoute } = useRouter(); const { currentRoute } = useRouter();
const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs(); const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs();
const getTargetTab = computed( const getTargetTab = computed((): RouteLocationNormalized => {
(): RouteLocationNormalized => { return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute);
return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute); });
}
);
/** /**
* @description: drop-down list * @description: drop-down list
......
...@@ -16,8 +16,7 @@ export function useFrameKeepAlive() { ...@@ -16,8 +16,7 @@ export function useFrameKeepAlive() {
const { getShowMultipleTab } = useMultipleTabSetting(); const { getShowMultipleTab } = useMultipleTabSetting();
const tabStore = useMultipleTabStore(); const tabStore = useMultipleTabStore();
const getFramePages = computed(() => { const getFramePages = computed(() => {
const ret = const ret = getAllFramePages(toRaw(router.getRoutes()) as unknown as AppRouteRecordRaw[]) || [];
getAllFramePages((toRaw(router.getRoutes()) as unknown) as AppRouteRecordRaw[]) || [];
return ret; return ret;
}); });
......
...@@ -60,7 +60,7 @@ export function createPermissionGuard(router: Router) { ...@@ -60,7 +60,7 @@ export function createPermissionGuard(router: Router) {
const routes = await permissionStore.buildRoutesAction(); const routes = await permissionStore.buildRoutesAction();
routes.forEach((route) => { routes.forEach((route) => {
router.addRoute((route as unknown) as RouteRecordRaw); router.addRoute(route as unknown as RouteRecordRaw);
}); });
const redirectPath = (from.query.redirect || to.path) as string; const redirectPath = (from.query.redirect || to.path) as string;
......
...@@ -80,7 +80,7 @@ export class Memory<T = any, V = any> { ...@@ -80,7 +80,7 @@ export class Memory<T = any, V = any> {
resetCache(cache: { [K in keyof T]: Cache }) { resetCache(cache: { [K in keyof T]: Cache }) {
Object.keys(cache).forEach((key) => { Object.keys(cache).forEach((key) => {
const k = (key as any) as keyof T; const k = key as any as keyof T;
const item = cache[k]; const item = cache[k];
if (item && item.time) { if (item && item.time) {
const now = new Date().getTime(); const now = new Date().getTime();
......
...@@ -17,10 +17,10 @@ export function getStorageShortName() { ...@@ -17,10 +17,10 @@ export function getStorageShortName() {
export function getAppEnvConfig() { export function getAppEnvConfig() {
const ENV_NAME = getConfigFileName(import.meta.env); const ENV_NAME = getConfigFileName(import.meta.env);
const ENV = ((import.meta.env.DEV const ENV = (import.meta.env.DEV
? // Get the global configuration (the configuration will be extracted independently when packaging) ? // Get the global configuration (the configuration will be extracted independently when packaging)
((import.meta.env as unknown) as GlobEnvConfig) (import.meta.env as unknown as GlobEnvConfig)
: window[ENV_NAME as any]) as unknown) as GlobEnvConfig; : window[ENV_NAME as any]) as unknown as GlobEnvConfig;
const { const {
VITE_GLOB_APP_TITLE, VITE_GLOB_APP_TITLE,
......
...@@ -89,6 +89,7 @@ export const isServer = typeof window === 'undefined'; ...@@ -89,6 +89,7 @@ export const isServer = typeof window === 'undefined';
export const isClient = !isServer; export const isClient = !isServer;
export function isUrl(path: string): boolean { export function isUrl(path: string): boolean {
const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/; const reg =
/(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
return reg.test(path); return reg.test(path);
} }
...@@ -181,16 +181,14 @@ ...@@ -181,16 +181,14 @@
export default defineComponent({ export default defineComponent({
components: { BasicForm, CollapseContainer, PageWrapper }, components: { BasicForm, CollapseContainer, PageWrapper },
setup() { setup() {
const [ const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }] =
register, useForm({
{ setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }, labelWidth: 120,
] = useForm({ schemas,
labelWidth: 120, actionColOptions: {
schemas, span: 24,
actionColOptions: { },
span: 24, });
},
});
const [register1] = useForm({ const [register1] = useForm({
labelWidth: 120, labelWidth: 120,
schemas: schemas1, schemas: schemas1,
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
const treeData = ref<TreeItem[]>([]); const treeData = ref<TreeItem[]>([]);
async function fetch() { async function fetch() {
treeData.value = ((await getDeptList()) as unknown) as TreeItem[]; treeData.value = (await getDeptList()) as unknown as TreeItem[];
} }
function handleSelect(keys: string, e) { function handleSelect(keys: string, e) {
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
...data.record, ...data.record,
}); });
} }
treeData.value = ((await getMenuList()) as any) as TreeItem[]; treeData.value = (await getMenuList()) as any as TreeItem[];
}); });
const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色')); const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
......
...@@ -64,11 +64,9 @@ ...@@ -64,11 +64,9 @@
return Number(routeStatus) || status; return Number(routeStatus) || status;
}); });
const getMapValue = computed( const getMapValue = computed((): MapValue => {
(): MapValue => { return unref(statusMapRef).get(unref(getStatus)) as MapValue;
return unref(statusMapRef).get(unref(getStatus)) as MapValue; });
}
);
const backLoginI18n = t('sys.exception.backLogin'); const backLoginI18n = t('sys.exception.backLogin');
const backHomeI18n = t('sys.exception.backHome'); const backHomeI18n = t('sys.exception.backHome');
......
...@@ -32,13 +32,11 @@ ...@@ -32,13 +32,11 @@
const { prefixCls } = useDesign('iframe-page'); const { prefixCls } = useDesign('iframe-page');
useWindowSizeFn(calcHeight, 150, { immediate: true }); useWindowSizeFn(calcHeight, 150, { immediate: true });
const getWrapStyle = computed( const getWrapStyle = computed((): CSSProperties => {
(): CSSProperties => { return {
return { height: `${unref(heightRef)}px`,
height: `${unref(heightRef)}px`, };
}; });
}
);
function calcHeight() { function calcHeight() {
const iframe = unref(frameRef); const iframe = unref(frameRef);
......
...@@ -28,7 +28,7 @@ module.exports = { ...@@ -28,7 +28,7 @@ module.exports = {
'font-family-no-missing-generic-family-keyword': null, 'font-family-no-missing-generic-family-keyword': null,
'declaration-colon-space-after': 'always-single-line', 'declaration-colon-space-after': 'always-single-line',
'declaration-colon-space-before': 'never', 'declaration-colon-space-before': 'never',
'declaration-block-trailing-semicolon': 'always', // 'declaration-block-trailing-semicolon': 'always',
'rule-empty-line-before': [ 'rule-empty-line-before': [
'always', 'always',
{ {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论