mirror of
https://github.com/vbenjs/gf-vben-admin.git
synced 2025-01-23 11:50:20 +08:00
chore: prettier code
This commit is contained in:
parent
34a80542de
commit
00fca0fe6c
@ -1,3 +1,3 @@
|
||||
export { createContextMenu, destroyContextMenu } from './src/createContextMenu';
|
||||
|
||||
export * from './src/types';
|
||||
export * from './src/typing';
|
||||
|
@ -1,117 +0,0 @@
|
||||
import './index.less';
|
||||
|
||||
import type { ContextMenuItem, ItemContentProps } from './types';
|
||||
import type { FunctionalComponent, CSSProperties } from 'vue';
|
||||
|
||||
import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
|
||||
|
||||
import Icon from '/@/components/Icon';
|
||||
import { Menu, Divider } from 'ant-design-vue';
|
||||
|
||||
import { contextMenuProps } from './props';
|
||||
|
||||
const prefixCls = 'context-menu';
|
||||
|
||||
const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
|
||||
const { item } = props;
|
||||
return (
|
||||
<span
|
||||
style="display: inline-block; width: 100%; "
|
||||
class="px-4"
|
||||
onClick={props.handler.bind(null, item)}
|
||||
>
|
||||
{props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
|
||||
<span>{item.label}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ContextMenu',
|
||||
props: contextMenuProps,
|
||||
setup(props) {
|
||||
const wrapRef = ref<ElRef>(null);
|
||||
const showRef = ref(false);
|
||||
|
||||
const getStyle = computed((): CSSProperties => {
|
||||
const { axis, items, styles, width } = props;
|
||||
const { x, y } = axis || { x: 0, y: 0 };
|
||||
const menuHeight = (items || []).length * 40;
|
||||
const menuWidth = width;
|
||||
const body = document.body;
|
||||
|
||||
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`,
|
||||
};
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => (showRef.value = true));
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
const el = unref(wrapRef);
|
||||
el && document.body.removeChild(el);
|
||||
});
|
||||
|
||||
function handleAction(item: ContextMenuItem, e: MouseEvent) {
|
||||
const { handler, disabled } = 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 DividerComp = divider ? <Divider key={`d-${label}`} /> : null;
|
||||
if (!children || children.length === 0) {
|
||||
return (
|
||||
<>
|
||||
<Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
|
||||
<ItemContent showIcon={props.showIcon} item={item} handler={handleAction} />
|
||||
</Menu.Item>
|
||||
{DividerComp}
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (!unref(showRef)) return null;
|
||||
|
||||
return (
|
||||
<Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
|
||||
{{
|
||||
title: () => (
|
||||
<ItemContent showIcon={props.showIcon} item={item} handler={handleAction} />
|
||||
),
|
||||
default: () => renderMenuItem(children),
|
||||
}}
|
||||
</Menu.SubMenu>
|
||||
);
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
const { items } = props;
|
||||
if (!unref(showRef)) return null;
|
||||
return (
|
||||
<Menu
|
||||
inlineIndent={12}
|
||||
mode="vertical"
|
||||
class={prefixCls}
|
||||
ref={wrapRef}
|
||||
style={unref(getStyle)}
|
||||
>
|
||||
{renderMenuItem(items)}
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
},
|
||||
});
|
204
src/components/ContextMenu/src/ContextMenu.vue
Normal file
204
src/components/ContextMenu/src/ContextMenu.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<script lang="tsx">
|
||||
import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
|
||||
import type { FunctionalComponent, CSSProperties } from 'vue';
|
||||
import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
|
||||
import Icon from '/@/components/Icon';
|
||||
import { Menu, Divider } from 'ant-design-vue';
|
||||
|
||||
const prefixCls = 'context-menu';
|
||||
|
||||
const props = {
|
||||
width: { type: Number, default: 156 },
|
||||
customEvent: { type: Object as PropType<Event>, default: null },
|
||||
styles: { type: Object as PropType<CSSProperties> },
|
||||
showIcon: { type: Boolean, default: 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 [];
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const ItemContent: FunctionalComponent<ItemContentProps> = (props) => {
|
||||
const { item } = props;
|
||||
return (
|
||||
<span
|
||||
style="display: inline-block; width: 100%; "
|
||||
class="px-4"
|
||||
onClick={props.handler.bind(null, item)}
|
||||
>
|
||||
{props.showIcon && item.icon && <Icon class="mr-2" icon={item.icon} />}
|
||||
<span>{item.label}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ContextMenu',
|
||||
props,
|
||||
setup(props) {
|
||||
const wrapRef = ref<ElRef>(null);
|
||||
const showRef = ref(false);
|
||||
|
||||
const getStyle = computed((): CSSProperties => {
|
||||
const { axis, items, styles, width } = props;
|
||||
const { x, y } = axis || { x: 0, y: 0 };
|
||||
const menuHeight = (items || []).length * 40;
|
||||
const menuWidth = width;
|
||||
const body = document.body;
|
||||
|
||||
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`,
|
||||
};
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => (showRef.value = true));
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
unref(wrapRef) && document.body.removeChild(el);
|
||||
});
|
||||
|
||||
function handleAction(item: ContextMenuItem, e: MouseEvent) {
|
||||
const { handler, disabled } = 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;
|
||||
|
||||
return (
|
||||
<Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
|
||||
{{
|
||||
title: () => <ItemContent {...contentProps} />,
|
||||
default: () => renderMenuItem(children),
|
||||
}}
|
||||
</Menu.SubMenu>
|
||||
);
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
const { items } = props;
|
||||
if (!unref(showRef)) return null;
|
||||
return (
|
||||
<Menu
|
||||
inlineIndent={12}
|
||||
mode="vertical"
|
||||
class={prefixCls}
|
||||
ref={wrapRef}
|
||||
style={unref(getStyle)}
|
||||
>
|
||||
{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;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,6 +1,6 @@
|
||||
import contextMenuVue from './ContextMenu';
|
||||
import contextMenuVue from './ContextMenu.vue';
|
||||
import { isClient } from '/@/utils/is';
|
||||
import { CreateContextOptions, ContextMenuProps } from './types';
|
||||
import { CreateContextOptions, ContextMenuProps } from './typing';
|
||||
import { createVNode, render } from 'vue';
|
||||
|
||||
const menuManager: {
|
||||
@ -16,7 +16,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
|
||||
|
||||
event && event?.preventDefault();
|
||||
|
||||
if (!isClient) return;
|
||||
if (!isClient) {
|
||||
return;
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
const body = document.body;
|
||||
|
||||
@ -54,9 +56,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
|
||||
body.removeEventListener('scroll', handleClick);
|
||||
};
|
||||
|
||||
menuManager.resolve = function (...arg: any) {
|
||||
menuManager.resolve = function (arg) {
|
||||
remove();
|
||||
resolve(arg[0]);
|
||||
resolve(arg);
|
||||
};
|
||||
remove();
|
||||
body.appendChild(container);
|
||||
|
@ -1,65 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
@ -1,26 +0,0 @@
|
||||
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,14 +81,11 @@
|
||||
|
||||
instance && emit('register', drawerInstance, instance.uid);
|
||||
|
||||
const getMergeProps = computed(
|
||||
(): DrawerProps => {
|
||||
const getMergeProps = computed((): DrawerProps => {
|
||||
return deepMerge(toRaw(props), unref(propsRef));
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getProps = computed(
|
||||
(): DrawerProps => {
|
||||
const getProps = computed((): DrawerProps => {
|
||||
const opt = {
|
||||
placement: 'right',
|
||||
...unref(attrs),
|
||||
@ -110,17 +107,14 @@
|
||||
}
|
||||
}
|
||||
return opt as DrawerProps;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getBindValues = computed(
|
||||
(): DrawerProps => {
|
||||
const getBindValues = computed((): DrawerProps => {
|
||||
return {
|
||||
...attrs,
|
||||
...unref(getProps),
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Custom implementation of the bottom button,
|
||||
const getFooterHeight = computed(() => {
|
||||
@ -133,15 +127,13 @@
|
||||
return `0px`;
|
||||
});
|
||||
|
||||
const getScrollContentStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getScrollContentStyle = computed((): CSSProperties => {
|
||||
const footerHeight = unref(getFooterHeight);
|
||||
return {
|
||||
position: 'relative',
|
||||
height: `calc(100% - ${footerHeight})`,
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getLoading = computed(() => {
|
||||
return !!unref(getProps)?.loading;
|
||||
|
@ -43,15 +43,13 @@
|
||||
setup(props, { emit }) {
|
||||
const { prefixCls } = useDesign('basic-drawer-footer');
|
||||
|
||||
const getStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getStyle = computed((): CSSProperties => {
|
||||
const heightStr = `${props.height}`;
|
||||
return {
|
||||
height: heightStr,
|
||||
lineHeight: heightStr,
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
function handleOk() {
|
||||
emit('ok');
|
||||
|
@ -174,9 +174,7 @@
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const getRequired = isFunction(required)
|
||||
? required(unref(getValues))
|
||||
: required;
|
||||
const getRequired = isFunction(required) ? required(unref(getValues)) : required;
|
||||
|
||||
if ((!rules || rules.length === 0) && getRequired) {
|
||||
rules = [{ required: getRequired, validator }];
|
||||
|
@ -36,8 +36,7 @@
|
||||
const { prefixCls } = useDesign('svg-icon');
|
||||
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
|
||||
|
||||
const getStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getStyle = computed((): CSSProperties => {
|
||||
const { size } = props;
|
||||
let s = `${size}`;
|
||||
s = `${s.replace('px', '')}px`;
|
||||
@ -45,8 +44,7 @@
|
||||
width: s,
|
||||
height: s,
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
return { symbolId, prefixCls, getStyle };
|
||||
},
|
||||
});
|
||||
|
@ -107,14 +107,12 @@
|
||||
}
|
||||
|
||||
// Custom title component: get title
|
||||
const getMergeProps = computed(
|
||||
(): ModalProps => {
|
||||
const getMergeProps = computed((): ModalProps => {
|
||||
return {
|
||||
...props,
|
||||
...(unref(propsRef) as any),
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
|
||||
modalWrapperRef,
|
||||
@ -123,8 +121,7 @@
|
||||
});
|
||||
|
||||
// modal component does not need title and origin buttons
|
||||
const getProps = computed(
|
||||
(): ModalProps => {
|
||||
const getProps = computed((): ModalProps => {
|
||||
const opt = {
|
||||
...unref(getMergeProps),
|
||||
visible: unref(visibleRef),
|
||||
@ -136,18 +133,15 @@
|
||||
...opt,
|
||||
wrapClassName: unref(getWrapClassName),
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getBindValue = computed(
|
||||
(): Recordable => {
|
||||
const getBindValue = computed((): Recordable => {
|
||||
const attr = { ...attrs, ...unref(getProps) };
|
||||
if (unref(fullScreenRef)) {
|
||||
return omit(attr, 'height');
|
||||
}
|
||||
return attr;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getWrapperHeight = computed(() => {
|
||||
if (unref(fullScreenRef)) return undefined;
|
||||
|
@ -39,9 +39,8 @@
|
||||
|
||||
const active = ref(false);
|
||||
|
||||
const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } = useMenuItem(
|
||||
instance
|
||||
);
|
||||
const { getItemStyle, getParentList, getParentMenu, getParentRootMenu } =
|
||||
useMenuItem(instance);
|
||||
|
||||
const { prefixCls } = useDesign('menu');
|
||||
|
||||
|
@ -109,9 +109,8 @@
|
||||
isChild: false,
|
||||
});
|
||||
|
||||
const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } = useMenuItem(
|
||||
instance
|
||||
);
|
||||
const { getParentSubMenu, getItemStyle, getParentMenu, getParentList } =
|
||||
useMenuItem(instance);
|
||||
|
||||
const { prefixCls } = useDesign('menu');
|
||||
|
||||
@ -148,13 +147,11 @@
|
||||
const getCollapse = computed(() => rootProps.collapse);
|
||||
const getTheme = computed(() => rootProps.theme);
|
||||
|
||||
const getOverlayStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getOverlayStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
minWidth: '200px',
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getIsOpend = computed(() => {
|
||||
const name = props.name;
|
||||
|
@ -14,8 +14,7 @@ export function useMenuItem(instance: ComponentInternalInstance | null) {
|
||||
return findParentMenu(['SubMenu']);
|
||||
});
|
||||
|
||||
const getItemStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getItemStyle = computed((): CSSProperties => {
|
||||
let parent = instance?.parent;
|
||||
if (!parent) return {};
|
||||
const indentSize = (unref(getParentRootMenu)?.props.indentSize as number) ?? 20;
|
||||
@ -32,8 +31,7 @@ export function useMenuItem(instance: ComponentInternalInstance | null) {
|
||||
}
|
||||
}
|
||||
return { paddingLeft: padding + 'px' };
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
function findParentMenu(name: string[]) {
|
||||
let parent = instance?.parent;
|
||||
|
@ -31,12 +31,14 @@ function createDocumentHandler(el: HTMLElement, binding: DirectiveBinding): Docu
|
||||
excludes = binding.arg;
|
||||
} else {
|
||||
// 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) {
|
||||
const popperRef = (binding.instance as ComponentPublicInstance<{
|
||||
const popperRef = (
|
||||
binding.instance as ComponentPublicInstance<{
|
||||
popperRef: Nullable<HTMLElement>;
|
||||
}>).popperRef;
|
||||
}>
|
||||
).popperRef;
|
||||
const mouseUpTarget = mouseup.target as Node;
|
||||
const mouseDownTarget = mousedown.target as Node;
|
||||
const isBound = !binding || !binding.instance;
|
||||
|
@ -21,9 +21,7 @@ function getKey(namespace: string | undefined, key: string) {
|
||||
return `${namespace}.${key}`;
|
||||
}
|
||||
|
||||
export function useI18n(
|
||||
namespace?: string
|
||||
): {
|
||||
export function useI18n(namespace?: string): {
|
||||
t: I18nGlobalTranslation;
|
||||
} {
|
||||
const normalFn = {
|
||||
|
@ -60,7 +60,7 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions {
|
||||
icon: getIcon(iconType),
|
||||
...options,
|
||||
};
|
||||
return (Modal.confirm(opt) as unknown) as ConfirmOptions;
|
||||
return Modal.confirm(opt) as unknown as ConfirmOptions;
|
||||
}
|
||||
|
||||
const getBaseOptions = () => {
|
||||
|
@ -71,10 +71,10 @@
|
||||
const breadcrumbList = filterItem(matched);
|
||||
|
||||
if (currentRoute.value.meta?.currentActiveMenu) {
|
||||
breadcrumbList.push(({
|
||||
breadcrumbList.push({
|
||||
...currentRoute.value,
|
||||
name: currentRoute.value.meta?.title || currentRoute.value.name,
|
||||
} as unknown) as RouteLocationMatched);
|
||||
} as unknown as RouteLocationMatched);
|
||||
}
|
||||
routes.value = breadcrumbList;
|
||||
});
|
||||
|
@ -76,13 +76,11 @@
|
||||
);
|
||||
});
|
||||
|
||||
const getWrapperStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getWrapperStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
height: `calc(100% - ${unref(getIsShowLogo) ? '48px' : '0px'})`,
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getLogoClass = computed(() => {
|
||||
return [
|
||||
|
@ -58,12 +58,8 @@ export default defineComponent({
|
||||
getThemeColor,
|
||||
} = useRootSetting();
|
||||
|
||||
const {
|
||||
getOpenPageLoading,
|
||||
getBasicTransition,
|
||||
getEnableTransition,
|
||||
getOpenNProgress,
|
||||
} = useTransitionSetting();
|
||||
const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } =
|
||||
useTransitionSetting();
|
||||
|
||||
const {
|
||||
getIsHorizontal,
|
||||
|
@ -89,8 +89,7 @@
|
||||
];
|
||||
});
|
||||
|
||||
const getHiddenDomStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getHiddenDomStyle = computed((): CSSProperties => {
|
||||
const width = `${unref(getRealWidth)}px`;
|
||||
return {
|
||||
width: width,
|
||||
@ -100,8 +99,7 @@
|
||||
minWidth: width,
|
||||
transition: 'all 0.2s',
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
|
@ -147,14 +147,12 @@
|
||||
|
||||
useDragLine(sideRef, dragBarRef, true);
|
||||
|
||||
const getMenuStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getMenuStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
|
||||
left: `${unref(getMixSideWidth)}px`,
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getIsFixed = computed(() => {
|
||||
/* eslint-disable-next-line */
|
||||
@ -171,20 +169,16 @@
|
||||
return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
|
||||
});
|
||||
|
||||
const getDomStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getDomStyle = computed((): CSSProperties => {
|
||||
const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
|
||||
const width = `${unref(getMixSideWidth) + fixedWidth}px`;
|
||||
return getWrapCommonStyle(width);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getWrapStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getWrapStyle = computed((): CSSProperties => {
|
||||
const width = `${unref(getMixSideWidth)}px`;
|
||||
return getWrapCommonStyle(width);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getMenuEvents = computed(() => {
|
||||
return !unref(getMixSideFixed)
|
||||
|
@ -106,8 +106,7 @@
|
||||
.getRoutes()
|
||||
.find((item) => item.path === currentActiveMenu);
|
||||
|
||||
findParentRoute &&
|
||||
tabStore.addTab((findParentRoute as unknown) as RouteLocationNormalized);
|
||||
findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
|
||||
} else {
|
||||
tabStore.addTab(unref(route));
|
||||
}
|
||||
|
@ -30,14 +30,14 @@ export function initAffixTabs(): string[] {
|
||||
* @description: Set fixed tabs
|
||||
*/
|
||||
function addAffixTabs(): void {
|
||||
const affixTabs = filterAffixTabs((router.getRoutes() as unknown) as RouteLocationNormalized[]);
|
||||
const affixTabs = filterAffixTabs(router.getRoutes() as unknown as RouteLocationNormalized[]);
|
||||
affixList.value = affixTabs;
|
||||
for (const tab of affixTabs) {
|
||||
tabStore.addTab(({
|
||||
tabStore.addTab({
|
||||
meta: tab.meta,
|
||||
name: tab.name,
|
||||
path: tab.path,
|
||||
} as unknown) as RouteLocationNormalized);
|
||||
} as unknown as RouteLocationNormalized);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -20,11 +20,9 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
|
||||
const { currentRoute } = useRouter();
|
||||
const { refreshPage, closeAll, close, closeLeft, closeOther, closeRight } = useTabs();
|
||||
|
||||
const getTargetTab = computed(
|
||||
(): RouteLocationNormalized => {
|
||||
const getTargetTab = computed((): RouteLocationNormalized => {
|
||||
return unref(getIsTabs) ? tabContentProps.tabItem : unref(currentRoute);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* @description: drop-down list
|
||||
|
@ -16,8 +16,7 @@ export function useFrameKeepAlive() {
|
||||
const { getShowMultipleTab } = useMultipleTabSetting();
|
||||
const tabStore = useMultipleTabStore();
|
||||
const getFramePages = computed(() => {
|
||||
const ret =
|
||||
getAllFramePages((toRaw(router.getRoutes()) as unknown) as AppRouteRecordRaw[]) || [];
|
||||
const ret = getAllFramePages(toRaw(router.getRoutes()) as unknown as AppRouteRecordRaw[]) || [];
|
||||
return ret;
|
||||
});
|
||||
|
||||
|
@ -60,7 +60,7 @@ export function createPermissionGuard(router: Router) {
|
||||
const routes = await permissionStore.buildRoutesAction();
|
||||
|
||||
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;
|
||||
|
2
src/utils/cache/memory.ts
vendored
2
src/utils/cache/memory.ts
vendored
@ -80,7 +80,7 @@ export class Memory<T = any, V = any> {
|
||||
|
||||
resetCache(cache: { [K in keyof T]: Cache }) {
|
||||
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];
|
||||
if (item && item.time) {
|
||||
const now = new Date().getTime();
|
||||
|
@ -17,10 +17,10 @@ export function getStorageShortName() {
|
||||
export function getAppEnvConfig() {
|
||||
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)
|
||||
((import.meta.env as unknown) as GlobEnvConfig)
|
||||
: window[ENV_NAME as any]) as unknown) as GlobEnvConfig;
|
||||
(import.meta.env as unknown as GlobEnvConfig)
|
||||
: window[ENV_NAME as any]) as unknown as GlobEnvConfig;
|
||||
|
||||
const {
|
||||
VITE_GLOB_APP_TITLE,
|
||||
|
@ -89,6 +89,7 @@ export const isServer = typeof window === 'undefined';
|
||||
export const isClient = !isServer;
|
||||
|
||||
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);
|
||||
}
|
||||
|
@ -181,10 +181,8 @@
|
||||
export default defineComponent({
|
||||
components: { BasicForm, CollapseContainer, PageWrapper },
|
||||
setup() {
|
||||
const [
|
||||
register,
|
||||
{ setProps, updateSchema, appendSchemaByField, removeSchemaByFiled },
|
||||
] = useForm({
|
||||
const [register, { setProps, updateSchema, appendSchemaByField, removeSchemaByFiled }] =
|
||||
useForm({
|
||||
labelWidth: 120,
|
||||
schemas,
|
||||
actionColOptions: {
|
||||
|
@ -26,7 +26,7 @@
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = ((await getDeptList()) as unknown) as TreeItem[];
|
||||
treeData.value = (await getDeptList()) as unknown as TreeItem[];
|
||||
}
|
||||
|
||||
function handleSelect(keys: string, e) {
|
||||
|
@ -54,7 +54,7 @@
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
treeData.value = ((await getMenuList()) as any) as TreeItem[];
|
||||
treeData.value = (await getMenuList()) as any as TreeItem[];
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
|
||||
|
@ -64,11 +64,9 @@
|
||||
return Number(routeStatus) || status;
|
||||
});
|
||||
|
||||
const getMapValue = computed(
|
||||
(): MapValue => {
|
||||
const getMapValue = computed((): MapValue => {
|
||||
return unref(statusMapRef).get(unref(getStatus)) as MapValue;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const backLoginI18n = t('sys.exception.backLogin');
|
||||
const backHomeI18n = t('sys.exception.backHome');
|
||||
|
@ -32,13 +32,11 @@
|
||||
const { prefixCls } = useDesign('iframe-page');
|
||||
useWindowSizeFn(calcHeight, 150, { immediate: true });
|
||||
|
||||
const getWrapStyle = computed(
|
||||
(): CSSProperties => {
|
||||
const getWrapStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
height: `${unref(heightRef)}px`,
|
||||
};
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
function calcHeight() {
|
||||
const iframe = unref(frameRef);
|
||||
|
@ -28,7 +28,7 @@ module.exports = {
|
||||
'font-family-no-missing-generic-family-keyword': null,
|
||||
'declaration-colon-space-after': 'always-single-line',
|
||||
'declaration-colon-space-before': 'never',
|
||||
'declaration-block-trailing-semicolon': 'always',
|
||||
// 'declaration-block-trailing-semicolon': 'always',
|
||||
'rule-empty-line-before': [
|
||||
'always',
|
||||
{
|
||||
|
Loading…
Reference in New Issue
Block a user