github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 10:33:50 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor: layouts use setup (#3312)

Browse Source 
* refactor: layouts use setup

* refactor: dashboard use setup

* fix: breadcrumbs types

* fix: noticeList type check error

* fix: noticeList type check error

* chore(Breadcrumb): revert setup change

---------

Co-authored-by: invalid w <wangjuesix@gmail.com>
This commit is contained in:
xingyu 2023-11-23 12:14:06 +08:00 committed by GitHub
parent 617b01338c
commit 0cfaa40bd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 1121 additions and 1517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Application/src/search/AppSearchModal.vue
View File

@ -62,7 +62,6 @@
import { SearchOutlined } from '@ant-design/icons-vue';
import AppSearchFooter from './AppSearchFooter.vue';
import Icon from '@/components/Icon/Icon.vue';
// @ts-ignore
import vClickOutside from '@/directives/clickOutside';
import { useDesign } from '@/hooks/web/useDesign';
import { useRefs } from '@vben/hooks';

33
src/layouts/default/content/index.vue
View File

@ -3,31 +3,20 @@
<PageLayout />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import PageLayout from '/@/layouts/page/index.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
<script lang="ts" setup>
import PageLayout from '@/layouts/page/index.vue';
import { useDesign } from '@/hooks/web/useDesign';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
import { useContentViewHeight } from './useContentViewHeight';
export default defineComponent({
name: 'LayoutContent',
components: { PageLayout },
setup() {
const { prefixCls } = useDesign('layout-content');
const { getOpenPageLoading } = useTransitionSetting();
const { getLayoutContentMode, getPageLoading } = useRootSetting();
defineOptions({ name: 'LayoutContent' });
useContentViewHeight();
return {
prefixCls,
getOpenPageLoading,
getLayoutContentMode,
getPageLoading,
};
},
});
const { prefixCls } = useDesign('layout-content');
const { getOpenPageLoading } = useTransitionSetting();
const { getLayoutContentMode, getPageLoading } = useRootSetting();
useContentViewHeight();
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-content';

2
src/layouts/default/content/useContentContext.ts
View File

@ -1,5 +1,5 @@
import type { InjectionKey, ComputedRef } from 'vue';
import { createContext, useContext } from '/@/hooks/core/useContext';
import { createContext, useContext } from '@/hooks/core/useContext';
export interface ContentContextProps {
contentHeight: ComputedRef<number>;

2
src/layouts/default/content/useContentViewHeight.ts
View File

@ -1,5 +1,5 @@
import { ref, computed, unref } from 'vue';
import { createPageContext } from '/@/hooks/component/usePageContext';
import { createPageContext } from '@/hooks/component/usePageContext';
import { useWindowSizeFn } from '@vben/hooks';
const headerHeightRef = ref(0);

104
src/layouts/default/feature/index.vue
View File

@ -1,63 +1,3 @@
<script lang="ts">
import { defineComponent, computed, unref } from 'vue';
import { BackTop } from 'ant-design-vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { useUserStoreWithOut } from '/@/store/modules/user';
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
export default defineComponent({
name: 'LayoutFeatures',
components: {
BackTop,
LayoutLockPage: createAsyncComponent(() => import('/@/views/sys/lock/index.vue')),
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
SessionTimeoutLogin,
},
setup() {
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
useRootSetting();
const userStore = useUserStoreWithOut();
const { prefixCls } = useDesign('setting-drawer-feature');
const { getShowHeader } = useHeaderSetting();
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
const getIsFixedSettingDrawer = computed(() => {
if (!unref(getShowSettingButton)) {
return false;
}
const settingButtonPosition = unref(getSettingButtonPosition);
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
return !unref(getShowHeader) || unref(getFullContent);
}
return settingButtonPosition === SettingButtonPositionEnum.FIXED;
});
const { getShowMultipleTab } = useMultipleTabSetting();
return {
getTarget: () => document.body,
getUseOpenBackTop,
getIsFixedSettingDrawer,
prefixCls,
getIsSessionTimeout,
getShowMultipleTab,
getFullContent,
};
},
});
</script>
<template>
<LayoutLockPage />
<BackTop v-if="getUseOpenBackTop" :target="getTarget" />
@ -67,7 +7,51 @@
/>
<SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { BackTop } from 'ant-design-vue';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { useUserStoreWithOut } from '@/store/modules/user';
import { SettingButtonPositionEnum } from '@/enums/appEnum';
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
import SessionTimeoutLogin from '@/views/sys/login/SessionTimeoutLogin.vue';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
defineOptions({ name: 'LayoutFeatures' });
const LayoutLockPage = createAsyncComponent(() => import('@/views/sys/lock/index.vue'));
const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'));
const getTarget = () => document.body;
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
useRootSetting();
const userStore = useUserStoreWithOut();
const { prefixCls } = useDesign('setting-drawer-feature');
const { getShowHeader } = useHeaderSetting();
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
const getIsFixedSettingDrawer = computed(() => {
if (!unref(getShowSettingButton)) {
return false;
}
const settingButtonPosition = unref(getSettingButtonPosition);
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
return !unref(getShowHeader) || unref(getFullContent);
}
return settingButtonPosition === SettingButtonPositionEnum.FIXED;
});
const { getShowMultipleTab } = useMultipleTabSetting();
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-feature';

64
src/layouts/default/footer/index.vue
View File

@ -1,5 +1,5 @@
<template>
<Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
<Layout.Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef">
<div :class="`${prefixCls}__links`">
<a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a>
@ -8,57 +8,41 @@
<a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a>
</div>
<div>Copyright &copy;2020 Vben Admin</div>
</Footer>
</Layout.Footer>
</template>
<script lang="ts">
import { computed, defineComponent, unref, ref } from 'vue';
<script lang="ts" setup>
import { computed, unref, ref } from 'vue';
import { Layout } from 'ant-design-vue';
import { GithubFilled } from '@ant-design/icons-vue';
import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting';
import { openWindow } from '/@/utils';
import { DOC_URL, GITHUB_URL, SITE_URL } from '@/settings/siteSetting';
import { openWindow } from '@/utils';
import { useI18n } from '/@/hooks/web/useI18n';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useI18n } from '@/hooks/web/useI18n';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useRouter } from 'vue-router';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { useLayoutHeight } from '../content/useContentViewHeight';
export default defineComponent({
name: 'LayoutFooter',
components: { Footer: Layout.Footer, GithubFilled },
setup() {
const { t } = useI18n();
const { getShowFooter } = useRootSetting();
const { currentRoute } = useRouter();
const { prefixCls } = useDesign('layout-footer');
defineOptions({ name: 'LayoutFooter' });
const footerRef = ref<ComponentRef>(null);
const { setFooterHeight } = useLayoutHeight();
const { t } = useI18n();
const { getShowFooter } = useRootSetting();
const { currentRoute } = useRouter();
const { prefixCls } = useDesign('layout-footer');
const getShowLayoutFooter = computed(() => {
if (unref(getShowFooter)) {
const footerEl = unref(footerRef)?.$el;
setFooterHeight(footerEl?.offsetHeight || 0);
} else {
setFooterHeight(0);
}
return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
});
const footerRef = ref<ComponentRef>(null);
const { setFooterHeight } = useLayoutHeight();
return {
getShowLayoutFooter,
prefixCls,
t,
DOC_URL,
GITHUB_URL,
SITE_URL,
openWindow,
footerRef,
};
},
const getShowLayoutFooter = computed(() => {
if (unref(getShowFooter)) {
const footerEl = unref(footerRef)?.$el;
setFooterHeight(footerEl?.offsetHeight || 0);
} else {
setFooterHeight(0);
}
return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter;
});
</script>
<style lang="less" scoped>

150
src/layouts/default/header/MultipleHeader.vue
View File

@ -9,111 +9,91 @@
<MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
</div>
</template>
<script lang="ts">
import { defineComponent, unref, computed, CSSProperties } from 'vue';
<script lang="ts" setup>
import { unref, computed, CSSProperties } from 'vue';
import LayoutHeader from './index.vue';
import MultipleTabs from '../tabs/index.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useFullContent } from '/@/hooks/web/useFullContent';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useFullContent } from '@/hooks/web/useFullContent';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { useAppInject } from '@/hooks/web/useAppInject';
import { useDesign } from '@/hooks/web/useDesign';
import { useLayoutHeight } from '../content/useContentViewHeight';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
const HEADER_HEIGHT = 48;
const TABS_HEIGHT = 32;
export default defineComponent({
name: 'LayoutMultipleHeader',
components: { LayoutHeader, MultipleTabs },
setup() {
const { setHeaderHeight } = useLayoutHeight();
const tabStore = useMultipleTabStore();
const { prefixCls } = useDesign('layout-multiple-header');
const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
const { getIsMobile } = useAppInject();
const {
getFixed,
getShowInsetHeaderRef,
getShowFullHeaderRef,
getHeaderTheme,
getShowHeader,
} = useHeaderSetting();
defineOptions({ name: 'LayoutMultipleHeader' });
const { getFullContent } = useFullContent();
const { setHeaderHeight } = useLayoutHeight();
const tabStore = useMultipleTabStore();
const { prefixCls } = useDesign('layout-multiple-header');
const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
const { getIsMobile } = useAppInject();
const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } =
useHeaderSetting();
const getShowTabs = computed(() => {
return unref(getShowMultipleTab) && !unref(getFullContent);
});
const { getFullContent } = useFullContent();
const getIsShowPlaceholderDom = computed(() => {
return unref(getFixed) || unref(getShowFullHeaderRef);
});
const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
const getWrapStyle = computed((): CSSProperties => {
const style: CSSProperties = {};
if (unref(getFixed)) {
style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
}
if (unref(getShowFullHeaderRef)) {
style.top = `${HEADER_HEIGHT}px`;
}
return style;
});
const getShowTabs = computed(() => {
return unref(getShowMultipleTab) && !unref(getFullContent);
});
const getIsFixed = computed(() => {
return unref(getFixed) || unref(getShowFullHeaderRef);
});
const getIsShowPlaceholderDom = computed(() => {
return unref(getFixed) || unref(getShowFullHeaderRef);
});
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
const getWrapStyle = computed((): CSSProperties => {
const style: CSSProperties = {};
if (unref(getFixed)) {
style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
}
if (unref(getShowFullHeaderRef)) {
style.top = `${HEADER_HEIGHT}px`;
}
return style;
});
const getPlaceholderDomStyle = computed((): CSSProperties => {
let height = 0;
if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
if (
(unref(getShowFullHeaderRef) || !unref(getSplit)) &&
unref(getShowHeader) &&
!unref(getFullContent)
) {
height += HEADER_HEIGHT;
}
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
height += TABS_HEIGHT;
}
setHeaderHeight(height);
}
return {
height: `${height}px`,
};
});
const getIsFixed = computed(() => {
return unref(getFixed) || unref(getShowFullHeaderRef);
});
const getClass = computed(() => {
return [
prefixCls,
`${prefixCls}--${unref(getHeaderTheme)}`,
{ [`${prefixCls}--fixed`]: unref(getIsFixed) },
];
});
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
return {
getClass,
prefixCls,
getPlaceholderDomStyle,
getIsFixed,
getWrapStyle,
getIsShowPlaceholderDom,
getShowTabs,
getShowInsetHeaderRef,
tabStore,
};
},
const getPlaceholderDomStyle = computed((): CSSProperties => {
let height = 0;
if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
if (
(unref(getShowFullHeaderRef) || !unref(getSplit)) &&
unref(getShowHeader) &&
!unref(getFullContent)
) {
height += HEADER_HEIGHT;
}
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
height += TABS_HEIGHT;
}
setHeaderHeight(height);
}
return {
height: `${height}px`,
};
});
const getClass = computed(() => {
return [
prefixCls,
`${prefixCls}--${unref(getHeaderTheme)}`,
{ [`${prefixCls}--fixed`]: unref(getIsFixed) },
];
});
</script>
<style lang="less" scoped>

2
src/layouts/default/header/components/Breadcrumb.vue
View File

@ -6,7 +6,7 @@
<span v-if="!hasRedirect(routesMatched, route)">
{{ t(route.name || route.meta.title) }}
</span>
<router-link v-else to="" @click="handleClick(route, paths, $event)">
<router-link v-else to="" @click="handleClick(route, paths, $event as Event)">
{{ t(route.name || route.meta.title) }}
</router-link>
</template>

9
src/layouts/default/header/components/ChangeApi/index.vue
View File

@ -19,11 +19,11 @@
</template>
<script lang="ts" setup>
import { Radio } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { BasicModal, useModalInner } from '/@/components/Modal/index';
import { BasicForm, useForm } from '/@/components/Form/index';
import { useI18n } from '@/hooks/web/useI18n';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { ref } from 'vue';
import { useAppStore } from '/@/store/modules/app';
import { useAppStore } from '@/store/modules/app';
import type { ApiAddress } from '/#/store';
const appStore = useAppStore();
@ -79,4 +79,3 @@
}
};
</script>
<style lang="less"></style>

41
src/layouts/default/header/components/ErrorAction.vue
View File

@ -10,38 +10,27 @@
</Badge>
</Tooltip>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import { Tooltip, Badge } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useErrorLogStore } from '/@/store/modules/errorLog';
import { PageEnum } from '/@/enums/pageEnum';
import { useI18n } from '@/hooks/web/useI18n';
import { useErrorLogStore } from '@/store/modules/errorLog';
import { PageEnum } from '@/enums/pageEnum';
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'ErrorAction',
components: { Icon, Tooltip, Badge },
defineOptions({ name: 'ErrorAction' });
setup() {
const { t } = useI18n();
const { push } = useRouter();
const errorLogStore = useErrorLogStore();
const { t } = useI18n();
const { push } = useRouter();
const errorLogStore = useErrorLogStore();
const getCount = computed(() => errorLogStore.getErrorLogListCount);
const getCount = computed(() => errorLogStore.getErrorLogListCount);
function handleToErrorList() {
push(PageEnum.ERROR_LOG_PAGE).then(() => {
errorLogStore.setErrorLogListCount(0);
});
}
return {
t,
getCount,
handleToErrorList,
};
},
});
function handleToErrorList() {
push(PageEnum.ERROR_LOG_PAGE).then(() => {
errorLogStore.setErrorLogListCount(0);
});
}
</script>

45
src/layouts/default/header/components/FullScreen.vue
View File

@ -6,40 +6,29 @@
</span>
</Tooltip>
</template>
<script lang="ts">
import { defineComponent, computed, unref } from 'vue';
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
import { useFullscreen } from '@vueuse/core';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
export default defineComponent({
name: 'FullScreen',
components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip },
defineOptions({ name: 'FullScreen' });
setup() {
const { t } = useI18n();
const { toggle, isFullscreen } = useFullscreen();
// 重新检查全屏状态
isFullscreen.value = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
const { t } = useI18n();
const { toggle, isFullscreen } = useFullscreen();
// 重新检查全屏状态
isFullscreen.value = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
const getTitle = computed(() => {
return unref(isFullscreen)
? t('layout.header.tooltipExitFull')
: t('layout.header.tooltipEntryFull');
});
return {
getTitle,
isFullscreen,
toggle,
};
},
const getTitle = computed(() => {
return unref(isFullscreen)
? t('layout.header.tooltipExitFull')
: t('layout.header.tooltipEntryFull');
});
</script>

2
src/layouts/default/header/components/index.ts
View File

@ -1,4 +1,4 @@
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
import FullScreen from './FullScreen.vue';
export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), {

103
src/layouts/default/header/components/lock/LockModal.vue
View File

@ -24,75 +24,60 @@
</div>
</BasicModal>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '/@/components/Modal/index';
import { BasicForm, useForm } from '/@/components/Form/index';
<script lang="ts" setup>
import { computed } from 'vue';
import { useI18n } from '@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { useUserStore } from '/@/store/modules/user';
import { useLockStore } from '/@/store/modules/lock';
import headerImg from '/@/assets/images/header.jpg';
import { useUserStore } from '@/store/modules/user';
import { useLockStore } from '@/store/modules/lock';
import headerImg from '@/assets/images/header.jpg';
export default defineComponent({
name: 'LockModal',
components: { BasicModal, BasicForm },
defineOptions({ name: 'LockModal' });
setup() {
const { t } = useI18n();
const { prefixCls } = useDesign('header-lock-modal');
const userStore = useUserStore();
const lockStore = useLockStore();
const { t } = useI18n();
const { prefixCls } = useDesign('header-lock-modal');
const userStore = useUserStore();
const lockStore = useLockStore();
const getRealName = computed(() => userStore.getUserInfo?.realName);
const [register, { closeModal }] = useModalInner();
const getRealName = computed(() => userStore.getUserInfo?.realName);
const [register, { closeModal }] = useModalInner();
const [registerForm, { validate, resetFields }] = useForm({
showActionButtonGroup: false,
schemas: [
{
field: 'password',
label: t('layout.header.lockScreenPassword'),
colProps: {
span: 24,
},
component: 'InputPassword',
required: true,
},
],
});
const [registerForm, { validate, resetFields }] = useForm({
showActionButtonGroup: false,
schemas: [
{
field: 'password',
label: t('layout.header.lockScreenPassword'),
colProps: {
span: 24,
},
component: 'InputPassword',
required: true,
},
],
});
const handleLock = async () => {
const { password = '' } = await validate<{
password: string;
}>();
const handleLock = async () => {
const { password = '' } = await validate<{
password: string;
}>();
closeModal();
closeModal();
lockStore.setLockInfo({
isLock: true,
pwd: password,
});
lockStore.setLockInfo({
isLock: true,
pwd: password,
});
await resetFields();
};
await resetFields();
};
const avatar = computed(() => {
const { avatar } = userStore.getUserInfo;
return avatar || headerImg;
});
return {
t,
prefixCls,
getRealName,
register,
registerForm,
handleLock,
avatar,
};
},
const avatar = computed(() => {
const { avatar } = userStore.getUserInfo;
return avatar || headerImg;
});
</script>
<style lang="less">

189
src/layouts/default/header/components/notify/NoticeList.vue
View File

@ -1,43 +1,38 @@
<template>
<a-list :class="prefixCls" bordered :pagination="getPagination">
<List :class="prefixCls" bordered :pagination="getPagination">
<template v-for="item in getData" :key="item.id">
<a-list-item class="list-item">
<a-list-item-meta>
<List.Item class="list-item">
<List.Item.Meta>
<template #title>
<div class="title">
<a-typography-paragraph
<Typography.Paragraph
@click="handleTitleClick(item)"
style="width: 100%; margin-bottom: 0 !important"
:style="{ cursor: isTitleClickable ? 'pointer' : '' }"
:delete="!!item.titleDelete"
:ellipsis="
$props.titleRows && $props.titleRows > 0
? { rows: $props.titleRows, tooltip: !!item.title }
: false
titleRows && titleRows > 0 ? { rows: titleRows, tooltip: !!item.title } : false
"
:content="item.title"
/>
<div class="extra" v-if="item.extra">
<a-tag class="tag" :color="item.color">
<Tag class="tag" :color="item.color">
{{ item.extra }}
</a-tag>
</Tag>
</div>
</div>
</template>
<template #avatar>
<a-avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
<Avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
<span v-else> {{ item.avatar }}</span>
</template>
<template #description>
<div>
<div class="description" v-if="item.description">
<a-typography-paragraph
style="width: 100%; margin-bottom: 0 !important"
<Typography.Paragraph
:ellipsis="
$props.descRows && $props.descRows > 0
? { rows: $props.descRows, tooltip: !!item.description }
descRows && descRows > 0
? { rows: descRows, tooltip: !!item.description }
: false
"
:content="item.description"
@ -48,107 +43,85 @@
</div>
</div>
</template>
</a-list-item-meta>
</a-list-item>
</List.Item.Meta>
</List.Item>
</template>
</a-list>
</List>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
<script lang="ts" setup>
import { computed, PropType, ref, watch, unref } from 'vue';
import { ListItem } from './data';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { List, Avatar, Tag, Typography } from 'ant-design-vue';
import { isNumber } from '/@/utils/is';
import { isNumber } from '@/utils/is';
// types
import type { StyleValue } from '/@/utils/types';
import type { FunctionalComponent } from 'vue';
import type { ParagraphProps } from 'ant-design-vue/es/typography/Paragraph';
export default defineComponent({
components: {
[Avatar.name]: Avatar,
[List.name]: List,
[List.Item.name]: List.Item,
AListItemMeta: List.Item.Meta,
ATypographyParagraph: Typography.Paragraph as FunctionalComponent<
ParagraphProps & {
style?: StyleValue;
}
>,
[Tag.name]: Tag,
const props = defineProps({
list: {
type: Array as PropType<ListItem[]>,
default: () => [],
},
props: {
list: {
type: Array as PropType<ListItem[]>,
default: () => [],
},
pageSize: {
type: [Boolean, Number] as PropType<Boolean | Number>,
default: 5,
},
currentPage: {
type: Number,
default: 1,
},
titleRows: {
type: Number,
default: 1,
},
descRows: {
type: Number,
default: 2,
},
onTitleClick: {
type: Function as PropType<(Recordable) => void>,
},
pageSize: {
type: [Boolean, Number] as PropType<Boolean | Number>,
default: 5,
},
emits: ['update:currentPage'],
setup(props, { emit }) {
const { prefixCls } = useDesign('header-notify-list');
const current = ref(props.currentPage || 1);
const getData = computed(() => {
const { pageSize, list } = props;
if (pageSize === false) return [];
let size = isNumber(pageSize) ? pageSize : 5;
return list.slice(size * (unref(current) - 1), size * unref(current));
});
watch(
() => props.currentPage,
(v) => {
current.value = v;
},
);
const isTitleClickable = computed(() => !!props.onTitleClick);
const getPagination = computed(() => {
const { list, pageSize } = props;
// compatible line 104
// if typeof pageSize is boolean, Number(true) && 5 = 5, Number(false) && 5 = 0
const size = isNumber(pageSize) ? pageSize : Number(pageSize) && 5;
if (size > 0 && list && list.length > size) {
return {
total: list.length,
pageSize: size,
current: unref(current),
onChange(page) {
current.value = page;
emit('update:currentPage', page);
},
};
} else {
return false;
}
});
function handleTitleClick(item: ListItem) {
props.onTitleClick && props.onTitleClick(item);
}
return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
currentPage: {
type: Number,
default: 1,
},
titleRows: {
type: Number,
default: 1,
},
descRows: {
type: Number,
default: 2,
},
onTitleClick: {
type: Function as PropType<(Recordable) => void>,
},
});
const emit = defineEmits(['update:currentPage']);
const { prefixCls } = useDesign('header-notify-list');
const current = ref(props.currentPage || 1);
const getData = computed(() => {
const { pageSize, list } = props;
if (pageSize === false) return [];
let size = isNumber(pageSize) ? pageSize : 5;
return list.slice(size * (unref(current) - 1), size * unref(current));
});
watch(
() => props.currentPage,
(v) => {
current.value = v;
},
);
const getPagination = computed(() => {
const { list, pageSize } = props;
// compatible line 104
// if typeof pageSize is boolean, Number(true) && 5 = 5, Number(false) && 5 = 0
const size = isNumber(pageSize) ? pageSize : Number(pageSize) && 5;
if (size > 0 && list && list.length > size) {
return {
total: list.length,
pageSize: size,
current: unref(current),
onChange(page) {
current.value = page;
emit('update:currentPage', page);
},
};
} else {
return false;
}
});
function handleTitleClick(item: ListItem) {
props.onTitleClick && props.onTitleClick(item);
}
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-header-notify-list';

56
src/layouts/default/header/components/notify/index.vue
View File

@ -7,7 +7,7 @@
<template #content>
<Tabs>
<template v-for="item in listData" :key="item.key">
<TabPane>
<Tabs.TabPane>
<template #tab>
{{ item.name }}
<span v-if="item.list.length !== 0">({{ item.list.length }})</span>
@ -15,52 +15,40 @@
<!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
<NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
<NoticeList :list="item.list" v-else />
</TabPane>
</Tabs.TabPane>
</template>
</Tabs>
</template>
</Popover>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Popover, Tabs, Badge } from 'ant-design-vue';
import { BellOutlined } from '@ant-design/icons-vue';
import { tabListData, ListItem } from './data';
import NoticeList from './NoticeList.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useMessage } from '/@/hooks/web/useMessage';
import { useDesign } from '@/hooks/web/useDesign';
import { useMessage } from '@/hooks/web/useMessage';
export default defineComponent({
components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
setup() {
const { prefixCls } = useDesign('header-notify');
const { createMessage } = useMessage();
const listData = ref(tabListData);
const { prefixCls } = useDesign('header-notify');
const { createMessage } = useMessage();
const listData = ref(tabListData);
const numberStyle = {};
const count = computed(() => {
let count = 0;
for (let i = 0; i < tabListData.length; i++) {
count += tabListData[i].list.length;
}
return count;
});
function onNoticeClick(record: ListItem) {
createMessage.success('你点击了通知，ID=' + record.id);
// 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
record.titleDelete = !record.titleDelete;
}
return {
prefixCls,
listData,
count,
onNoticeClick,
numberStyle: {},
};
},
const count = computed(() => {
let count = 0;
for (let i = 0; i < tabListData.length; i++) {
count += tabListData[i].list.length;
}
return count;
});
function onNoticeClick(record: ListItem) {
createMessage.success('你点击了通知，ID=' + record.id);
// 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
record.titleDelete = !record.titleDelete;
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-notify';

34
src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
View File

@ -1,32 +1,26 @@
<template>
<MenuItem :key="itemKey">
<Menu.Item :key="itemKey">
<span class="flex items-center">
<Icon :icon="icon" class="mr-1" />
<span>{{ text }}</span>
</span>
</MenuItem>
</Menu.Item>
</template>
<script lang="ts">
<script lang="ts" setup>
import { Menu } from 'ant-design-vue';
import { computed, defineComponent, getCurrentInstance } from 'vue';
import { computed, getCurrentInstance } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { propTypes } from '@/utils/propTypes';
import { propTypes } from '/@/utils/propTypes';
defineOptions({ name: 'DropdownMenuItem' });
export default defineComponent({
name: 'DropdownMenuItem',
components: { MenuItem: Menu.Item, Icon },
props: {
// eslint-disable-next-line
key: propTypes.string,
text: propTypes.string,
icon: propTypes.string,
},
setup(props) {
const instance = getCurrentInstance();
const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
return { itemKey };
},
const props = defineProps({
// eslint-disable-next-line
key: propTypes.string,
text: propTypes.string,
icon: propTypes.string,
});
const instance = getCurrentInstance();
const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
</script>

158
src/layouts/default/header/components/user-dropdown/index.vue
View File

@ -17,7 +17,7 @@
icon="ion:document-text-outline"
v-if="getShowDoc"
/>
<MenuDivider v-if="getShowDoc" />
<Menu.Divider v-if="getShowDoc" />
<MenuItem
v-if="getShowApi"
key="api"
@ -41,104 +41,80 @@
<LockAction @register="register" />
<ChangeApi @register="registerApi" />
</template>
<script lang="ts">
// components
<script lang="ts" setup>
import { Dropdown, Menu } from 'ant-design-vue';
import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { defineComponent, computed } from 'vue';
import { DOC_URL } from '/@/settings/siteSetting';
import { useUserStore } from '/@/store/modules/user';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { useModal } from '/@/components/Modal';
import headerImg from '/@/assets/images/header.jpg';
import { propTypes } from '/@/utils/propTypes';
import { openWindow } from '/@/utils';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { computed } from 'vue';
import { DOC_URL } from '@/settings/siteSetting';
import { useUserStore } from '@/store/modules/user';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useI18n } from '@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { useModal } from '@/components/Modal';
import headerImg from '@/assets/images/header.jpg';
import { propTypes } from '@/utils/propTypes';
import { openWindow } from '@/utils';
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
type MenuEvent = 'logout' | 'doc' | 'lock' | 'api';
export default defineComponent({
name: 'UserDropdown',
components: {
Dropdown,
Menu,
MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
MenuDivider: Menu.Divider,
LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
ChangeApi: createAsyncComponent(() => import('../ChangeApi/index.vue')),
},
props: {
theme: propTypes.oneOf(['dark', 'light']),
},
setup() {
const { prefixCls } = useDesign('header-user-dropdown');
const { t } = useI18n();
const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting();
const userStore = useUserStore();
const MenuItem = createAsyncComponent(() => import('./DropMenuItem.vue'));
const LockAction = createAsyncComponent(() => import('../lock/LockModal.vue'));
const ChangeApi = createAsyncComponent(() => import('../ChangeApi/index.vue'));
const getUserInfo = computed(() => {
const { realName = '', avatar, desc } = userStore.getUserInfo || {};
return { realName, avatar: avatar || headerImg, desc };
});
defineOptions({ name: 'UserDropdown' });
const [register, { openModal }] = useModal();
const [registerApi, { openModal: openApiModal }] = useModal();
function handleLock() {
openModal(true);
}
function handleApi() {
openApiModal(true, {});
}
// login out
function handleLoginOut() {
userStore.confirmLoginOut();
}
// open doc
function openDoc() {
openWindow(DOC_URL);
}
function handleMenuClick(e: MenuInfo) {
switch (e.key as MenuEvent) {
case 'logout':
handleLoginOut();
break;
case 'doc':
openDoc();
break;
case 'lock':
handleLock();
break;
case 'api':
handleApi();
break;
}
}
return {
prefixCls,
t,
getUserInfo,
handleMenuClick,
getShowDoc,
getShowApi,
register,
registerApi,
getUseLockPage,
};
},
defineProps({
theme: propTypes.oneOf(['dark', 'light']),
});
const { prefixCls } = useDesign('header-user-dropdown');
const { t } = useI18n();
const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting();
const userStore = useUserStore();
const getUserInfo = computed(() => {
const { realName = '', avatar, desc } = userStore.getUserInfo || {};
return { realName, avatar: avatar || headerImg, desc };
});
const [register, { openModal }] = useModal();
const [registerApi, { openModal: openApiModal }] = useModal();
function handleLock() {
openModal(true);
}
function handleApi() {
openApiModal(true, {});
}
// login out
function handleLoginOut() {
userStore.confirmLoginOut();
}
// open doc
function openDoc() {
openWindow(DOC_URL);
}
function handleMenuClick(e: MenuInfo) {
switch (e.key as MenuEvent) {
case 'logout':
handleLoginOut();
break;
case 'doc':
openDoc();
break;
case 'lock':
handleLock();
break;
case 'api':
handleApi();
break;
}
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-user-dropdown';

77
src/layouts/default/index.vue
View File

@ -13,69 +13,50 @@
</Layout>
</template>
<script lang="ts">
import { defineComponent, computed, unref } from 'vue';
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { Layout } from 'ant-design-vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
import LayoutHeader from './header/index.vue';
import LayoutContent from './content/index.vue';
import LayoutSideBar from './sider/index.vue';
import LayoutMultipleHeader from './header/MultipleHeader.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { useLockPage } from '/@/hooks/web/useLockPage';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { useLockPage } from '@/hooks/web/useLockPage';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useAppInject } from '@/hooks/web/useAppInject';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
export default defineComponent({
name: 'DefaultLayout',
components: {
LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
LayoutHeader,
LayoutContent,
LayoutSideBar,
LayoutMultipleHeader,
Layout,
},
setup() {
const { prefixCls } = useDesign('default-layout');
const { getIsMobile } = useAppInject();
const { getShowFullHeaderRef } = useHeaderSetting();
const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
const { getAutoCollapse } = useMultipleTabSetting();
const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'));
const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'));
// Create a lock screen monitor
const lockEvents = useLockPage();
defineOptions({ name: 'DefaultLayout' });
const layoutClass = computed(() => {
let cls: string[] = ['ant-layout'];
if (unref(getIsMixSidebar) || unref(getShowMenu)) {
cls.push('ant-layout-has-sider');
}
const { prefixCls } = useDesign('default-layout');
const { getIsMobile } = useAppInject();
const { getShowFullHeaderRef } = useHeaderSetting();
const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();
const { getAutoCollapse } = useMultipleTabSetting();
if (!unref(getShowMenu) && unref(getAutoCollapse)) {
cls.push('ant-layout-auto-collapse-tabs');
}
// Create a lock screen monitor
const lockEvents = useLockPage();
return cls;
});
const layoutClass = computed(() => {
let cls: string[] = ['ant-layout'];
if (unref(getIsMixSidebar) || unref(getShowMenu)) {
cls.push('ant-layout-has-sider');
}
return {
getShowFullHeaderRef,
getShowSidebar,
prefixCls,
getIsMobile,
getIsMixSidebar,
layoutClass,
lockEvents,
};
},
if (!unref(getShowMenu) && unref(getAutoCollapse)) {
cls.push('ant-layout-auto-collapse-tabs');
}
return cls;
});
</script>
<style lang="less">

26
src/layouts/default/menu/index.vue
View File

@ -2,23 +2,23 @@
import type { PropType, CSSProperties } from 'vue';
import { computed, defineComponent, unref, toRef } from 'vue';
import { BasicMenu } from '/@/components/Menu';
import { SimpleMenu } from '/@/components/SimpleMenu';
import { AppLogo } from '/@/components/Application';
import { BasicMenu } from '@/components/Menu';
import { SimpleMenu } from '@/components/SimpleMenu';
import { AppLogo } from '@/components/Application';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { ScrollContainer } from '/@/components/Container';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { ScrollContainer } from '@/components/Container';
import { useGo } from '/@/hooks/web/usePage';
import { useGo } from '@/hooks/web/usePage';
import { useSplitMenu } from './useLayoutMenu';
import { openWindow } from '/@/utils';
import { propTypes } from '/@/utils/propTypes';
import { isHttpUrl } from '/@/utils/is';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
import { openWindow } from '@/utils';
import { propTypes } from '@/utils/propTypes';
import { isHttpUrl } from '@/utils/is';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useAppInject } from '@/hooks/web/useAppInject';
import { useDesign } from '@/hooks/web/useDesign';
export default defineComponent({
name: 'LayoutMenu',

12
src/layouts/default/menu/useLayoutMenu.ts
View File

@ -1,13 +1,13 @@
import type { Menu } from '/@/router/types';
import type { Menu } from '@/router/types';
import type { Ref } from 'vue';
import { watch, unref, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { MenuSplitTyeEnum } from '/@/enums/menuEnum';
import { MenuSplitTyeEnum } from '@/enums/menuEnum';
import { useThrottleFn } from '@vueuse/core';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus';
import { usePermissionStore } from '/@/store/modules/permission';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '@/router/menus';
import { usePermissionStore } from '@/store/modules/permission';
import { useAppInject } from '@/hooks/web/useAppInject';
export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
// Menu array

28
src/layouts/default/setting/SettingDrawer.tsx
View File

@ -1,5 +1,5 @@
import { defineComponent, computed, unref } from 'vue';
import { BasicDrawer } from '/@/components/Drawer/index';
import { BasicDrawer } from '@/components/Drawer';
import { Divider } from 'ant-design-vue';
import {
TypePicker,
@ -10,16 +10,16 @@ import {
InputNumberItem,
} from './components';
import { AppDarkModeToggle } from '/@/components/Application';
import { AppDarkModeToggle } from '@/components/Application';
import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
import { MenuTypeEnum, TriggerEnum } from '@/enums/menuEnum';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
import { useI18n } from '@/hooks/web/useI18n';
import { baseHandler } from './handler';
@ -29,7 +29,7 @@ import {
topMenuAlignOptions,
getMenuTriggerOptions,
routerTransitionOptions,
menuTypeList,
menuTypeListEnum,
mixSidebarTriggerOptions,
} from './enum';
@ -37,8 +37,8 @@ import {
// HEADER_PRESET_BG_COLOR_LIST,
// SIDE_BAR_BG_COLOR_LIST,
// APP_PRESET_COLOR_LIST,
// } from '/@/settings/designSetting';
import { SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
// } from '@/settings/designSetting';
import { SIDE_BAR_BG_COLOR_LIST } from '@/settings/designSetting';
const { t } = useI18n();
@ -101,8 +101,8 @@ export default defineComponent({
return (
<>
<TypePicker
menuTypeList={menuTypeList}
handler={(item: (typeof menuTypeList)[0]) => {
menuTypeList={menuTypeListEnum}
handler={(item: (typeof menuTypeListEnum)[0]) => {
baseHandler(HandlerEnum.CHANGE_LAYOUT, {
mode: item.mode,
type: item.type,

39
src/layouts/default/setting/components/InputNumberItem.vue
View File

@ -9,37 +9,30 @@
/>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
<script lang="ts" setup>
import { PropType } from 'vue';
import { InputNumber } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { baseHandler } from '../handler';
import { HandlerEnum } from '../enum';
export default defineComponent({
name: 'InputNumberItem',
components: { InputNumber },
props: {
event: {
type: Number as PropType<HandlerEnum>,
},
title: {
type: String,
},
},
setup(props) {
const { prefixCls } = useDesign('setting-input-number-item');
defineOptions({ name: 'InputNumberItem' });
function handleChange(e) {
props.event && baseHandler(props.event, e);
}
return {
prefixCls,
handleChange,
};
const props = defineProps({
event: {
type: Number as PropType<HandlerEnum>,
},
title: {
type: String,
},
});
const { prefixCls } = useDesign('setting-input-number-item');
function handleChange(e) {
props.event && baseHandler(props.event, e);
}
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-input-number-item';

73
src/layouts/default/setting/components/SelectItem.vue
View File

@ -11,55 +11,46 @@
/>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
<script lang="ts" setup>
import { PropType, computed } from 'vue';
import { Select, type SelectProps } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { baseHandler } from '../handler';
import { HandlerEnum } from '../enum';
export default defineComponent({
name: 'SelectItem',
components: { Select },
props: {
event: {
type: Number as PropType<HandlerEnum>,
},
disabled: {
type: Boolean,
},
title: {
type: String,
},
def: {
type: [String, Number] as PropType<string | number>,
},
initValue: {
type: [String, Number] as PropType<string | number>,
},
options: {
type: Array as PropType<LabelValueOptions>,
default: () => [],
},
defineOptions({ name: 'SelectItem' });
const props = defineProps({
event: {
type: Number as PropType<HandlerEnum>,
},
setup(props) {
const { prefixCls } = useDesign('setting-select-item');
const getBindValue = computed(() => {
return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
});
const handleChange: SelectProps['onChange'] = (val) => {
props.event && baseHandler(props.event, val);
};
return {
prefixCls,
handleChange,
getBindValue,
};
disabled: {
type: Boolean,
},
title: {
type: String,
},
def: {
type: [String, Number] as PropType<string | number>,
},
initValue: {
type: [String, Number] as PropType<string | number>,
},
options: {
type: Array as PropType<LabelValueOptions>,
default: () => [],
},
});
const { prefixCls } = useDesign('setting-select-item');
const getBindValue = computed(() => {
return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
});
const handleChange: SelectProps['onChange'] = (val) => {
props.event && baseHandler(props.event, val);
};
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-select-item';

111
src/layouts/default/setting/components/SettingFooter.vue
View File

@ -16,75 +16,64 @@
</a-button>
</div>
</template>
<script lang="ts">
import { defineComponent, unref } from 'vue';
<script lang="ts" setup>
import { unref } from 'vue';
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { useAppStore } from '/@/store/modules/app';
import { usePermissionStore } from '/@/store/modules/permission';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useUserStore } from '/@/store/modules/user';
import { useAppStore } from '@/store/modules/app';
import { usePermissionStore } from '@/store/modules/permission';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
import { useUserStore } from '@/store/modules/user';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { copyText } from '/@/utils/copyTextToClipboard';
import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
import defaultSetting from '/@/settings/projectSetting';
import { updateSidebarBgColor } from '/@/logics/theme/updateBackground';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useMessage } from '@/hooks/web/useMessage';
import { copyText } from '@/utils/copyTextToClipboard';
import { updateColorWeak } from '@/logics/theme/updateColorWeak';
import { updateGrayMode } from '@/logics/theme/updateGrayMode';
import defaultSetting from '@/settings/projectSetting';
import { updateSidebarBgColor } from '@/logics/theme/updateBackground';
export default defineComponent({
name: 'SettingFooter',
components: { CopyOutlined, RedoOutlined },
setup() {
const permissionStore = usePermissionStore();
const { prefixCls } = useDesign('setting-footer');
const { t } = useI18n();
const { createSuccessModal, createMessage } = useMessage();
const tabStore = useMultipleTabStore();
const userStore = useUserStore();
const appStore = useAppStore();
defineOptions({ name: 'SettingFooter' });
function handleCopy() {
copyText(JSON.stringify(unref(appStore.getProjectConfig), null, 2), null);
const permissionStore = usePermissionStore();
const { prefixCls } = useDesign('setting-footer');
const { t } = useI18n();
const { createSuccessModal, createMessage } = useMessage();
const tabStore = useMultipleTabStore();
const userStore = useUserStore();
const appStore = useAppStore();
createSuccessModal({
title: t('layout.setting.operatingTitle'),
content: t('layout.setting.operatingContent'),
});
}
function handleResetSetting() {
try {
appStore.setProjectConfig(defaultSetting);
const { colorWeak, grayMode } = defaultSetting;
updateSidebarBgColor();
updateColorWeak(colorWeak);
updateGrayMode(grayMode);
createMessage.success(t('layout.setting.resetSuccess'));
} catch (error: any) {
createMessage.error(error);
}
}
function handleCopy() {
copyText(JSON.stringify(unref(appStore.getProjectConfig), null, 2), null);
function handleClearAndRedo() {
localStorage.clear();
appStore.resetAllState();
permissionStore.resetState();
tabStore.resetState();
userStore.resetState();
location.reload();
}
return {
prefixCls,
t,
handleCopy,
handleResetSetting,
handleClearAndRedo,
};
},
});
createSuccessModal({
title: t('layout.setting.operatingTitle'),
content: t('layout.setting.operatingContent'),
});
}
function handleResetSetting() {
try {
appStore.setProjectConfig(defaultSetting);
const { colorWeak, grayMode } = defaultSetting;
updateSidebarBgColor();
updateColorWeak(colorWeak);
updateGrayMode(grayMode);
createMessage.success(t('layout.setting.resetSuccess'));
} catch (error: any) {
createMessage.error(error);
}
}
function handleClearAndRedo() {
localStorage.clear();
appStore.resetAllState();
permissionStore.resetState();
tabStore.resetState();
userStore.resetState();
location.reload();
}
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-footer';

66
src/layouts/default/setting/components/SwitchItem.vue
View File

@ -10,52 +10,42 @@
/>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
<script lang="ts" setup>
import { PropType, computed } from 'vue';
import { Switch, type SwitchProps } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { baseHandler } from '../handler';
import { HandlerEnum } from '../enum';
export default defineComponent({
name: 'SwitchItem',
components: { Switch },
props: {
event: {
type: Number as PropType<HandlerEnum>,
},
disabled: {
type: Boolean,
},
title: {
type: String,
},
def: {
type: Boolean,
},
defineOptions({ name: 'SwitchItem' });
const props = defineProps({
event: {
type: Number as PropType<HandlerEnum>,
},
setup(props) {
const { prefixCls } = useDesign('setting-switch-item');
const { t } = useI18n();
const getBindValue = computed(() => {
return props.def ? { checked: props.def } : {};
});
const handleChange: SwitchProps['onChange'] = (val) => {
props.event && baseHandler(props.event, val);
};
return {
prefixCls,
t,
handleChange,
getBindValue,
};
disabled: {
type: Boolean,
},
title: {
type: String,
},
def: {
type: Boolean,
},
});
const { prefixCls } = useDesign('setting-switch-item');
const { t } = useI18n();
const getBindValue = computed(() => {
return props.def ? { checked: props.def } : {};
});
const handleChange: SwitchProps['onChange'] = (val) => {
props.event && baseHandler(props.event, val);
};
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-switch-item';

47
src/layouts/default/setting/components/ThemeColorPicker.vue
View File

@ -16,42 +16,35 @@
</template>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
<script lang="ts" setup>
import type { PropType } from 'vue';
import { CheckOutlined } from '@ant-design/icons-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { baseHandler } from '../handler';
import { HandlerEnum } from '../enum';
export default defineComponent({
name: 'ThemeColorPicker',
components: { CheckOutlined },
props: {
colorList: {
type: Array as PropType<string[]>,
default: () => [],
},
event: {
type: Number as PropType<HandlerEnum>,
},
def: {
type: String,
},
},
setup(props) {
const { prefixCls } = useDesign('setting-theme-picker');
defineOptions({ name: 'ThemeColorPicker' });
function handleClick(color: string) {
props.event && baseHandler(props.event, color);
}
return {
prefixCls,
handleClick,
};
const props = defineProps({
colorList: {
type: Array as PropType<string[]>,
default: () => [],
},
event: {
type: Number as PropType<HandlerEnum>,
},
def: {
type: String,
},
});
const { prefixCls } = useDesign('setting-theme-picker');
function handleClick(color: string) {
props.event && baseHandler(props.event, color);
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-setting-theme-picker';

45
src/layouts/default/setting/components/TypePicker.vue
View File

@ -18,39 +18,32 @@
</template>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
<script lang="ts" setup>
import type { PropType } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
import { menuTypeList } from '../enum';
import { menuTypeListEnum } from '../enum';
export default defineComponent({
name: 'MenuTypePicker',
components: { Tooltip },
props: {
menuTypeList: {
type: Array as PropType<typeof menuTypeList>,
default: () => [],
},
handler: {
type: Function,
default: () => ({}),
},
def: {
type: String,
default: '',
},
defineOptions({ name: 'MenuTypePicker' });
defineProps({
menuTypeList: {
type: Array as PropType<typeof menuTypeListEnum>,
default: () => [],
},
setup() {
const { prefixCls } = useDesign('setting-menu-type-picker');
return {
prefixCls,
};
handler: {
type: Function,
default: () => ({}),
},
def: {
type: String,
default: '',
},
});
const { prefixCls } = useDesign('setting-menu-type-picker');
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-menu-type-picker';

2
src/layouts/default/setting/components/index.ts
View File

@ -1,4 +1,4 @@
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
export const ThemeColorPicker = createAsyncComponent(() => import('./ThemeColorPicker.vue'));

8
src/layouts/default/setting/enum.ts
View File

@ -1,13 +1,13 @@
import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
import { ContentEnum, RouterTransitionEnum } from '@/enums/appEnum';
import {
MenuModeEnum,
MenuTypeEnum,
TopMenuAlignEnum,
TriggerEnum,
MixSidebarTriggerEnum,
} from '/@/enums/menuEnum';
} from '@/enums/menuEnum';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n();
@ -121,7 +121,7 @@ export const routerTransitionOptions = [
};
});
export const menuTypeList = [
export const menuTypeListEnum = [
{
title: t('layout.setting.menuTypeSidebar'),
mode: MenuModeEnum.INLINE,

12
src/layouts/default/setting/handler.ts
View File

@ -1,12 +1,12 @@
import { HandlerEnum } from './enum';
import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
import { updateHeaderBgColor, updateSidebarBgColor } from '@/logics/theme/updateBackground';
import { updateColorWeak } from '@/logics/theme/updateColorWeak';
import { updateGrayMode } from '@/logics/theme/updateGrayMode';
import { useAppStore } from '/@/store/modules/app';
import { useAppStore } from '@/store/modules/app';
import { ProjectConfig } from '/#/config';
import { updateDarkTheme } from '/@/logics/theme/dark';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { updateDarkTheme } from '@/logics/theme/dark';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
export function baseHandler(event: HandlerEnum, value: any) {
const appStore = useAppStore();

18
src/layouts/default/setting/index.vue
View File

@ -4,23 +4,13 @@
<SettingDrawer @register="register" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import SettingDrawer from './SettingDrawer';
import Icon from '@/components/Icon/Icon.vue';
import { useDrawer } from '/@/components/Drawer';
import { useDrawer } from '@/components/Drawer';
export default defineComponent({
name: 'SettingButton',
components: { SettingDrawer, Icon },
setup() {
const [register, { openDrawer }] = useDrawer();
defineOptions({ name: 'SettingButton' });
return {
register,
openDrawer,
};
},
});
const [register, { openDrawer }] = useDrawer();
</script>

56
src/layouts/default/sider/DragBar.vue
View File

@ -1,43 +1,35 @@
<template>
<div :class="getClass" :style="getDragBarStyle"></div>
</template>
<script lang="ts">
import { defineComponent, computed, unref } from 'vue';
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
export default defineComponent({
name: 'DargBar',
props: {
mobile: Boolean,
},
setup(props) {
const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
defineOptions({ name: 'DargBar' });
const { prefixCls } = useDesign('darg-bar');
const getDragBarStyle = computed(() => {
if (unref(getCollapsed)) {
return { left: `${unref(getMiniWidthNumber)}px` };
}
return {};
});
const props = defineProps({
mobile: Boolean,
});
const getClass = computed(() => {
return [
prefixCls,
{
[`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
},
];
});
const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
return {
prefixCls,
getDragBarStyle,
getClass,
};
},
const { prefixCls } = useDesign('darg-bar');
const getDragBarStyle = computed(() => {
if (unref(getCollapsed)) {
return { left: `${unref(getMiniWidthNumber)}px` };
}
return {};
});
const getClass = computed(() => {
return [
prefixCls,
{
[`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
},
];
});
</script>
<style lang="less" scoped>

471
src/layouts/default/sider/MixSider.vue
View File

@ -83,273 +83,236 @@
</div>
</div>
</template>
<script lang="ts">
import type { Menu } from '/@/router/types';
<script lang="ts" setup>
import type { Menu } from '@/router/types';
import type { CSSProperties } from 'vue';
import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
import { computed, onMounted, ref, unref, watch } from 'vue';
import type { RouteLocationNormalized } from 'vue-router';
import { ScrollContainer } from '/@/components/Container';
import { SimpleMenu } from '/@/components/SimpleMenu';
import { ScrollContainer } from '@/components/Container';
import { SimpleMenu } from '@/components/SimpleMenu';
import Icon from '@/components/Icon/Icon.vue';
import { AppLogo } from '/@/components/Application';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { usePermissionStore } from '/@/store/modules/permission';
import { AppLogo } from '@/components/Application';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { usePermissionStore } from '@/store/modules/permission';
import { useDragLine } from './useLayoutSider';
import { useGlobSetting } from '/@/hooks/setting';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGo } from '/@/hooks/web/usePage';
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
import clickOutside from '/@/directives/clickOutside';
import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus';
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
import { useGlobSetting } from '@/hooks/setting';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useGo } from '@/hooks/web/usePage';
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '@/enums/appEnum';
import vClickOutside from '@/directives/clickOutside';
import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '@/router/menus';
import { listenerRouteChange } from '@/logics/mitt/routeChange';
import LayoutTrigger from '../trigger/index.vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
export default defineComponent({
name: 'LayoutMixSider',
components: {
ScrollContainer,
AppLogo,
SimpleMenu,
Icon,
LayoutTrigger,
SimpleMenuTag: createAsyncComponent(
() => import('/@/components/SimpleMenu/src/SimpleMenuTag.vue'),
),
},
directives: {
clickOutside,
},
setup() {
let menuModules = ref<Menu[]>([]);
const activePath = ref('');
const childrenMenus = ref<Menu[]>([]);
const openMenu = ref(false);
const dragBarRef = ref(null);
const sideRef = ref(null);
const currentRoute = ref<RouteLocationNormalized | null>(null);
const SimpleMenuTag = createAsyncComponent(
() => import('@/components/SimpleMenu/src/SimpleMenuTag.vue'),
);
const { prefixCls } = useDesign('layout-mix-sider');
const go = useGo();
const { t } = useI18n();
const {
getMenuWidth,
getCanDrag,
getCloseMixSidebarOnChange,
getMenuTheme,
getMixSideTrigger,
getRealWidth,
getMixSideFixed,
mixSideHasChildren,
setMenuSetting,
getIsMixSidebar,
getCollapsed,
} = useMenuSetting();
defineOptions({ name: 'LayoutMixSider' });
const { title } = useGlobSetting();
const permissionStore = usePermissionStore();
let menuModules = ref<Menu[]>([]);
const activePath = ref('');
const childrenMenus = ref<Menu[]>([]);
const openMenu = ref(false);
const dragBarRef = ref(null);
const sideRef = ref(null);
const currentRoute = ref<RouteLocationNormalized | null>(null);
useDragLine(sideRef, dragBarRef, true);
const { prefixCls } = useDesign('layout-mix-sider');
const go = useGo();
const { t } = useI18n();
const {
getMenuWidth,
getCanDrag,
getCloseMixSidebarOnChange,
getMenuTheme,
getMixSideTrigger,
getRealWidth,
getMixSideFixed,
mixSideHasChildren,
setMenuSetting,
getIsMixSidebar,
getCollapsed,
} = useMenuSetting();
const getMenuStyle = computed((): CSSProperties => {
return {
width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
left: `${unref(getMixSideWidth)}px`,
};
});
const { title } = useGlobSetting();
const permissionStore = usePermissionStore();
const getIsFixed = computed(() => {
/* eslint-disable-next-line */
mixSideHasChildren.value = unref(childrenMenus).length > 0;
const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
if (isFixed) {
/* eslint-disable-next-line */
openMenu.value = true;
}
return isFixed;
});
useDragLine(sideRef, dragBarRef, true);
const getMixSideWidth = computed(() => {
return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
});
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 width = `${unref(getMixSideWidth)}px`;
return getWrapCommonStyle(width);
});
const getMenuEvents = computed(() => {
return !unref(getMixSideFixed)
? {
onMouseleave: () => {
setActive(true);
closeMenu();
},
}
: {};
});
const getShowDragBar = computed(() => unref(getCanDrag));
onMounted(async () => {
menuModules.value = await getShallowMenus();
});
// Menu changes
watch(
[() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
async () => {
menuModules.value = await getShallowMenus();
},
{
immediate: true,
},
);
listenerRouteChange((route) => {
currentRoute.value = route;
setActive(true);
if (unref(getCloseMixSidebarOnChange)) {
closeMenu();
}
});
function getWrapCommonStyle(width: string): CSSProperties {
return {
width,
maxWidth: width,
minWidth: width,
flex: `0 0 ${width}`,
};
}
// Process module menu click
async function handleModuleClick(path: string, hover = false) {
const children = await getChildrenMenus(path);
if (unref(activePath) === path) {
if (!hover) {
if (!unref(openMenu)) {
openMenu.value = true;
} else {
closeMenu();
}
} else {
if (!unref(openMenu)) {
openMenu.value = true;
}
}
if (!unref(openMenu)) {
setActive();
}
} else {
openMenu.value = true;
activePath.value = path;
}
if (!children || children.length === 0) {
if (!hover) go(path);
childrenMenus.value = [];
closeMenu();
return;
}
childrenMenus.value = children;
}
// Set the currently active menu and submenu
async function setActive(setChildren = false) {
const path = currentRoute.value?.path;
if (!path) return;
activePath.value = await getCurrentParentPath(path);
// hanldeModuleClick(parentPath);
if (unref(getIsMixSidebar)) {
const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
const p = activeMenu?.path;
if (p) {
const children = await getChildrenMenus(p);
if (setChildren) {
childrenMenus.value = children;
if (unref(getMixSideFixed)) {
openMenu.value = children.length > 0;
}
}
if (children.length === 0) {
childrenMenus.value = [];
}
}
}
}
function handleMenuClick(path: string) {
go(path);
}
function handleClickOutside() {
setActive(true);
closeMenu();
}
function getItemEvents(item: Menu) {
if (unref(getMixSideTrigger) === 'hover') {
return {
onMouseenter: () => handleModuleClick(item.path, true),
onClick: async () => {
const children = await getChildrenMenus(item.path);
if (item.path && (!children || children.length === 0)) go(item.path);
},
};
}
return {
onClick: () => handleModuleClick(item.path),
};
}
function handleFixedMenu() {
setMenuSetting({
mixSideFixed: !unref(getIsFixed),
});
}
// Close menu
function closeMenu() {
if (!unref(getIsFixed)) {
openMenu.value = false;
}
}
return {
t,
prefixCls,
menuModules,
handleModuleClick: handleModuleClick,
activePath,
childrenMenus: childrenMenus,
getShowDragBar,
handleMenuClick,
getMenuStyle,
handleClickOutside,
sideRef,
dragBarRef,
title,
openMenu,
getMenuTheme,
getItemEvents,
getMenuEvents,
getDomStyle,
handleFixedMenu,
getMixSideFixed,
getWrapStyle,
getCollapsed,
};
},
const getMenuStyle = computed((): CSSProperties => {
return {
width: unref(openMenu) ? `${unref(getMenuWidth)}px` : 0,
left: `${unref(getMixSideWidth)}px`,
};
});
const getIsFixed = computed(() => {
/* eslint-disable-next-line */
mixSideHasChildren.value = unref(childrenMenus).length > 0;
const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
if (isFixed) {
/* eslint-disable-next-line */
openMenu.value = true;
}
return isFixed;
});
const getMixSideWidth = computed(() => {
return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
});
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 width = `${unref(getMixSideWidth)}px`;
return getWrapCommonStyle(width);
});
const getMenuEvents = computed(() => {
return !unref(getMixSideFixed)
? {
onMouseleave: () => {
setActive(true);
closeMenu();
},
}
: {};
});
const getShowDragBar = computed(() => unref(getCanDrag));
onMounted(async () => {
menuModules.value = await getShallowMenus();
});
// Menu changes
watch(
[() => permissionStore.getLastBuildMenuTime, () => permissionStore.getBackMenuList],
async () => {
menuModules.value = await getShallowMenus();
},
{
immediate: true,
},
);
listenerRouteChange((route) => {
currentRoute.value = route;
setActive(true);
if (unref(getCloseMixSidebarOnChange)) {
closeMenu();
}
});
function getWrapCommonStyle(width: string): CSSProperties {
return {
width,
maxWidth: width,
minWidth: width,
flex: `0 0 ${width}`,
};
}
// Process module menu click
async function handleModuleClick(path: string, hover = false) {
const children = await getChildrenMenus(path);
if (unref(activePath) === path) {
if (!hover) {
if (!unref(openMenu)) {
openMenu.value = true;
} else {
closeMenu();
}
} else {
if (!unref(openMenu)) {
openMenu.value = true;
}
}
if (!unref(openMenu)) {
setActive();
}
} else {
openMenu.value = true;
activePath.value = path;
}
if (!children || children.length === 0) {
if (!hover) go(path);
childrenMenus.value = [];
closeMenu();
return;
}
childrenMenus.value = children;
}
// Set the currently active menu and submenu
async function setActive(setChildren = false) {
const path = currentRoute.value?.path;
if (!path) return;
activePath.value = await getCurrentParentPath(path);
// hanldeModuleClick(parentPath);
if (unref(getIsMixSidebar)) {
const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
const p = activeMenu?.path;
if (p) {
const children = await getChildrenMenus(p);
if (setChildren) {
childrenMenus.value = children;
if (unref(getMixSideFixed)) {
openMenu.value = children.length > 0;
}
}
if (children.length === 0) {
childrenMenus.value = [];
}
}
}
}
function handleMenuClick(path: string) {
go(path);
}
function handleClickOutside() {
setActive(true);
closeMenu();
}
function getItemEvents(item: Menu) {
if (unref(getMixSideTrigger) === 'hover') {
return {
onMouseenter: () => handleModuleClick(item.path, true),
onClick: async () => {
const children = await getChildrenMenus(item.path);
if (item.path && (!children || children.length === 0)) go(item.path);
},
};
}
return {
onClick: () => handleModuleClick(item.path),
};
}
function handleFixedMenu() {
setMenuSetting({
mixSideFixed: !unref(getIsFixed),
});
}
// Close menu
function closeMenu() {
if (!unref(getIsFixed)) {
openMenu.value = false;
}
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-mix-sider';

34
src/layouts/default/sider/index.vue
View File

@ -14,34 +14,26 @@
<Sider v-else />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import Sider from './LayoutSider.vue';
import MixSider from './MixSider.vue';
import { Drawer } from 'ant-design-vue';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { useAppInject } from '@/hooks/web/useAppInject';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDesign } from '@/hooks/web/useDesign';
export default defineComponent({
name: 'SiderWrapper',
components: { Sider, Drawer, MixSider },
setup() {
const { prefixCls } = useDesign('layout-sider-wrapper');
const { getIsMobile } = useAppInject();
const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
defineOptions({ name: 'SiderWrapper' });
function handleClose() {
setMenuSetting({
collapsed: true,
});
}
const { prefixCls } = useDesign('layout-sider-wrapper');
const { getIsMobile } = useAppInject();
const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
},
});
function handleClose() {
setMenuSetting({
collapsed: true,
});
}
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-sider-wrapper';

6
src/layouts/default/sider/useLayoutSider.ts
View File

@ -2,11 +2,11 @@ import type { Ref } from 'vue';
import { computed, unref, onMounted, nextTick } from 'vue';
import { TriggerEnum } from '/@/enums/menuEnum';
import { TriggerEnum } from '@/enums/menuEnum';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDebounceFn } from '@vueuse/core';
import { useAppStore } from '/@/store/modules/app';
import { useAppStore } from '@/store/modules/app';
/**
* Handle related operations of menu events

52
src/layouts/default/tabs/components/FoldButton.vue
View File

@ -3,40 +3,34 @@
<Icon :icon="getIcon" />
</span>
</template>
<script lang="ts">
import { defineComponent, unref, computed } from 'vue';
<script lang="ts" setup>
import { unref, computed } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { triggerWindowResize } from '/@/utils/event';
import { useDesign } from '@/hooks/web/useDesign';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { triggerWindowResize } from '@/utils/event';
export default defineComponent({
name: 'FoldButton',
components: { Icon },
setup() {
const { prefixCls } = useDesign('multiple-tabs-content');
const { getShowMenu, setMenuSetting } = useMenuSetting();
const { getShowHeader, setHeaderSetting } = useHeaderSetting();
defineOptions({ name: 'FoldButton' });
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
const { prefixCls } = useDesign('multiple-tabs-content');
const { getShowMenu, setMenuSetting } = useMenuSetting();
const { getShowHeader, setHeaderSetting } = useHeaderSetting();
const getIcon = computed(() =>
unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full',
);
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
function handleFold() {
const isUnFold = unref(getIsUnFold);
setMenuSetting({
show: isUnFold,
hidden: !isUnFold,
});
setHeaderSetting({ show: isUnFold });
triggerWindowResize();
}
const getIcon = computed(() =>
unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full',
);
return { prefixCls, getIcon, handleFold };
},
});
function handleFold() {
const isUnFold = unref(getIsUnFold);
setMenuSetting({
show: isUnFold,
hidden: !isUnFold,
});
setHeaderSetting({ show: isUnFold });
triggerWindowResize();
}
</script>

25
src/layouts/default/tabs/components/SettingButton.vue
View File

@ -4,27 +4,16 @@
<SettingDrawer @register="register" />
</span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import SettingDrawer from '/@/layouts/default/setting/SettingDrawer';
<script lang="ts" setup>
import SettingDrawer from '@/layouts/default/setting/SettingDrawer';
import Icon from '@/components/Icon/Icon.vue';
import { useDrawer } from '/@/components/Drawer';
import { useDrawer } from '@/components/Drawer';
import { useDesign } from '/@/hooks/web/useDesign';
import { useDesign } from '@/hooks/web/useDesign';
export default defineComponent({
name: 'SettingButton',
components: { SettingDrawer, Icon },
setup() {
const [register, { openDrawer }] = useDrawer();
const { prefixCls } = useDesign('multiple-tabs-content');
defineOptions({ name: 'SettingButton' });
return {
register,
openDrawer,
prefixCls,
};
},
});
const [register, { openDrawer }] = useDrawer();
const { prefixCls } = useDesign('multiple-tabs-content');
</script>

83
src/layouts/default/tabs/components/TabContent.vue
View File

@ -14,63 +14,50 @@
</span>
</Dropdown>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { PropType } from 'vue';
import type { RouteLocationNormalized } from 'vue-router';
import { defineComponent, computed, unref } from 'vue';
import { Dropdown } from '/@/components/Dropdown/index';
import { computed, unref } from 'vue';
import { Dropdown } from '@/components/Dropdown';
import Icon from '@/components/Icon/Icon.vue';
import { TabContentProps } from '../types';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { useTabDropdown } from '../useTabDropdown';
export default defineComponent({
name: 'TabContent',
components: { Dropdown, Icon },
props: {
tabItem: {
type: Object as PropType<RouteLocationNormalized>,
default: null,
},
isExtra: Boolean,
},
setup(props) {
const { prefixCls } = useDesign('multiple-tabs-content');
const { t } = useI18n();
const getTitle = computed(() => {
const { tabItem: { meta } = {} } = props;
return meta && t(meta.title as string);
});
const getIsTabs = computed(() => !props.isExtra);
const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] =>
unref(getIsTabs) ? ['contextmenu'] : ['click'],
);
const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(
props as TabContentProps,
getIsTabs,
);
function handleContext(e) {
props.tabItem && handleContextMenu(props.tabItem)(e);
}
return {
prefixCls,
getDropMenuList,
handleMenuEvent,
handleContext,
getTrigger,
getIsTabs,
getTitle,
};
defineOptions({ name: 'TabContent' });
const props = defineProps({
tabItem: {
type: Object as PropType<RouteLocationNormalized>,
default: null,
},
isExtra: Boolean,
});
const { prefixCls } = useDesign('multiple-tabs-content');
const { t } = useI18n();
const getTitle = computed(() => {
const { tabItem: { meta } = {} } = props;
return meta && t(meta.title as string);
});
const getIsTabs = computed(() => !props.isExtra);
const getTrigger = computed((): ('contextmenu' | 'click' | 'hover')[] =>
unref(getIsTabs) ? ['contextmenu'] : ['click'],
);
const { getDropMenuList, handleMenuEvent, handleContextMenu } = useTabDropdown(
props as TabContentProps,
getIsTabs,
);
function handleContext(e) {
props.tabItem && handleContextMenu(props.tabItem)(e);
}
</script>

38
src/layouts/default/tabs/components/TabRedo.vue
View File

@ -3,33 +3,27 @@
<RedoOutlined :spin="loading" />
</span>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import { RedoOutlined } from '@ant-design/icons-vue';
import { useDesign } from '/@/hooks/web/useDesign';
import { useTabs } from '/@/hooks/web/useTabs';
import { useDesign } from '@/hooks/web/useDesign';
import { useTabs } from '@/hooks/web/useTabs';
export default defineComponent({
name: 'TabRedo',
components: { RedoOutlined },
defineOptions({ name: 'TabRedo' });
setup() {
const loading = ref(false);
const loading = ref(false);
const { prefixCls } = useDesign('multiple-tabs-content');
const { refreshPage } = useTabs();
const { prefixCls } = useDesign('multiple-tabs-content');
const { refreshPage } = useTabs();
async function handleRedo() {
loading.value = true;
await refreshPage();
setTimeout(() => {
loading.value = false;
// Animation execution time
}, 1200);
}
return { prefixCls, handleRedo, loading };
},
});
async function handleRedo() {
loading.value = true;
await refreshPage();
setTimeout(() => {
loading.value = false;
// Animation execution time
}, 1200);
}
</script>
<style lang="less" scoped>
span.anticon-redo {

189
src/layouts/default/tabs/index.vue
View File

@ -11,11 +11,11 @@
@edit="(e) => handleEdit(`${e}`)"
>
<template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path">
<TabPane :closable="!(item && item.meta && item.meta.affix)">
<Tabs.TabPane :closable="!(item && item.meta && item.meta.affix)">
<template #tab>
<TabContent :tabItem="item" />
</template>
</TabPane>
</Tabs.TabPane>
</template>
<template #rightExtra v-if="getShowRedo || getShowQuick">
@ -27,135 +27,110 @@
</Tabs>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { RouteLocationNormalized, RouteMeta } from 'vue-router';
import { defineComponent, computed, unref, ref } from 'vue';
import { computed, unref, ref } from 'vue';
import { Tabs } from 'ant-design-vue';
import TabContent from './components/TabContent.vue';
import FoldButton from './components/FoldButton.vue';
import TabRedo from './components/TabRedo.vue';
import { useGo } from '/@/hooks/web/usePage';
import { useGo } from '@/hooks/web/usePage';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useUserStore } from '/@/store/modules/user';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
import { useUserStore } from '@/store/modules/user';
import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
import { useDesign } from '/@/hooks/web/useDesign';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { REDIRECT_NAME } from '/@/router/constant';
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
import { REDIRECT_NAME } from '@/router/constant';
import { listenerRouteChange } from '@/logics/mitt/routeChange';
import { useRouter } from 'vue-router';
import { useMouse } from '@vueuse/core';
import { multipleTabHeight } from '/@/settings/designSetting';
import { multipleTabHeight } from '@/settings/designSetting';
import SettingButton from './components/SettingButton.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
export default defineComponent({
name: 'MultipleTabs',
components: {
TabRedo,
FoldButton,
Tabs,
TabPane: Tabs.TabPane,
TabContent,
SettingButton,
},
setup() {
const affixTextList = initAffixTabs();
const activeKeyRef = ref('');
defineOptions({ name: 'MultipleTabs' });
useTabsDrag(affixTextList);
const tabStore = useMultipleTabStore();
const userStore = useUserStore();
const router = useRouter();
const affixTextList = initAffixTabs();
const activeKeyRef = ref('');
const { prefixCls } = useDesign('multiple-tabs');
const go = useGo();
const { getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
useTabsDrag(affixTextList);
const tabStore = useMultipleTabStore();
const userStore = useUserStore();
const router = useRouter();
const getTabsState = computed(() => {
return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
});
const { prefixCls } = useDesign('multiple-tabs');
const go = useGo();
const { getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
const unClose = computed(() => unref(getTabsState).length === 1);
const { y: mouseY } = useMouse();
const { getShowMenu } = useMenuSetting();
const { getShowHeader } = useHeaderSetting();
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
const getWrapClass = computed(() => {
return [
prefixCls,
{
[`${prefixCls}--hide-close`]: unref(unClose),
[`${prefixCls}--hover`]: unref(mouseY) < multipleTabHeight,
},
];
});
listenerRouteChange((route) => {
const { name } = route;
if (name === REDIRECT_NAME || !route || !userStore.getToken) {
return;
}
const { path, fullPath, meta = {} } = route;
const { currentActiveMenu, hideTab } = meta as RouteMeta;
const isHide = !hideTab ? null : currentActiveMenu;
const p = isHide || fullPath || path;
if (activeKeyRef.value !== p) {
activeKeyRef.value = p as string;
}
if (isHide) {
const findParentRoute = router
.getRoutes()
.find((item) => item.path === currentActiveMenu);
findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
} else {
tabStore.addTab(unref(route));
}
});
function handleChange(activeKey: any) {
activeKeyRef.value = activeKey;
go(activeKey, false);
}
// Close the current tab
function handleEdit(targetKey: string) {
// Added operation to hide, currently only use delete operation
if (unref(unClose)) {
return;
}
tabStore.closeTabByKey(targetKey, router);
}
return {
getWrapClass,
handleEdit,
handleChange,
activeKeyRef,
getTabsState,
getShowQuick,
getShowRedo,
getShowFold,
getIsUnFold,
getShowHeader,
};
},
const getTabsState = computed(() => {
return tabStore.getTabList.filter((item) => !item.meta?.hideTab);
});
const unClose = computed(() => unref(getTabsState).length === 1);
const { y: mouseY } = useMouse();
const { getShowMenu } = useMenuSetting();
const { getShowHeader } = useHeaderSetting();
const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
const getWrapClass = computed(() => {
return [
prefixCls,
{
[`${prefixCls}--hide-close`]: unref(unClose),
[`${prefixCls}--hover`]: unref(mouseY) < multipleTabHeight,
},
];
});
listenerRouteChange((route) => {
const { name } = route;
if (name === REDIRECT_NAME || !route || !userStore.getToken) {
return;
}
const { path, fullPath, meta = {} } = route;
const { currentActiveMenu, hideTab } = meta as RouteMeta;
const isHide = !hideTab ? null : currentActiveMenu;
const p = isHide || fullPath || path;
if (activeKeyRef.value !== p) {
activeKeyRef.value = p as string;
}
if (isHide) {
const findParentRoute = router.getRoutes().find((item) => item.path === currentActiveMenu);
findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
} else {
tabStore.addTab(unref(route));
}
});
function handleChange(activeKey: any) {
activeKeyRef.value = activeKey;
go(activeKey, false);
}
// Close the current tab
function handleEdit(targetKey: string) {
// Added operation to hide, currently only use delete operation
if (unref(unClose)) {
return;
}
tabStore.closeTabByKey(targetKey, router);
}
</script>
<style lang="less">
@import url('./index.less');

2
src/layouts/default/tabs/types.ts
View File

@ -1,4 +1,4 @@
import type { DropMenu } from '/@/components/Dropdown/index';
import type { DropMenu } from '@/components/Dropdown';
import type { RouteLocationNormalized } from 'vue-router';
export enum TabContentEnum {

12
src/layouts/default/tabs/useMultipleTabs.ts
View File

@ -1,12 +1,12 @@
import { toRaw, ref, nextTick } from 'vue';
import type { RouteLocationNormalized } from 'vue-router';
import { useDesign } from '/@/hooks/web/useDesign';
import { useSortable } from '/@/hooks/web/useSortable';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { isNil } from '/@/utils/is';
import projectSetting from '/@/settings/projectSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { useSortable } from '@/hooks/web/useSortable';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
import { isNil } from '@/utils/is';
import projectSetting from '@/settings/projectSetting';
import { useRouter } from 'vue-router';
import { useI18n } from '/@/hooks/web/useI18n';
import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n();

8
src/layouts/default/tabs/useTabDropdown.ts
View File

@ -1,13 +1,13 @@
import type { TabContentProps } from './types';
import type { DropMenu } from '/@/components/Dropdown';
import type { DropMenu } from '@/components/Dropdown';
import type { ComputedRef } from 'vue';
import { computed, unref, reactive } from 'vue';
import { MenuEventEnum } from './types';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
import { RouteLocationNormalized, useRouter } from 'vue-router';
import { useTabs } from '/@/hooks/web/useTabs';
import { useI18n } from '/@/hooks/web/useI18n';
import { useTabs } from '@/hooks/web/useTabs';
import { useI18n } from '@/hooks/web/useI18n';
export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: ComputedRef<boolean>) {
const state = reactive({

6
src/layouts/default/trigger/HeaderTrigger.vue
View File

@ -5,9 +5,9 @@
</template>
<script lang="ts" setup>
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign';
import { propTypes } from '/@/utils/propTypes';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { propTypes } from '@/utils/propTypes';
defineProps({
theme: propTypes.oneOf(['light', 'dark']),

2
src/layouts/default/trigger/SiderTrigger.vue
View File

@ -6,7 +6,7 @@
</template>
<script lang="ts" setup>
import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
const { getCollapsed, toggleCollapsed } = useMenuSetting();
</script>

2
src/layouts/default/trigger/index.vue
View File

@ -4,7 +4,7 @@
</template>
<script lang="ts" setup>
import { propTypes } from '/@/utils/propTypes';
import { propTypes } from '@/utils/propTypes';
import HeaderTrigger from './HeaderTrigger.vue';
import SiderTrigger from './SiderTrigger.vue';

18
src/layouts/iframe/index.vue
View File

@ -9,21 +9,15 @@
</template>
</div>
</template>
<script lang="ts">
import { defineComponent, unref, computed } from 'vue';
import FramePage from '/@/views/sys/iframe/index.vue';
<script lang="ts" setup>
import { unref, computed } from 'vue';
import FramePage from '@/views/sys/iframe/index.vue';
import { useFrameKeepAlive } from './useFrameKeepAlive';
export default defineComponent({
name: 'FrameLayout',
components: { FramePage },
setup() {
const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
defineOptions({ name: 'FrameLayout' });
const showFrame = computed(() => unref(getFramePages).length > 0);
const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
return { getFramePages, hasRenderFrame, showIframe, showFrame };
},
});
const showFrame = computed(() => unref(getFramePages).length > 0);
</script>

6
src/layouts/iframe/useFrameKeepAlive.ts
View File

@ -1,12 +1,12 @@
import type { AppRouteRecordRaw } from '/@/router/types';
import type { AppRouteRecordRaw } from '@/router/types';
import { computed, toRaw, unref } from 'vue';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
import { uniqBy } from 'lodash-es';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { useRouter } from 'vue-router';

49
src/layouts/page/index.vue
View File

@ -24,47 +24,34 @@
<FrameLayout v-if="getCanEmbedIFramePage" />
</template>
<script lang="ts">
import { computed, defineComponent, unref } from 'vue';
<script lang="ts" setup>
import { computed, unref } from 'vue';
import FrameLayout from '/@/layouts/iframe/index.vue';
import FrameLayout from '@/layouts/iframe/index.vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { getTransitionName } from './transition';
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
import { useMultipleTabStore } from '@/store/modules/multipleTab';
export default defineComponent({
name: 'PageLayout',
components: { FrameLayout },
setup() {
const { getShowMultipleTab } = useMultipleTabSetting();
const tabStore = useMultipleTabStore();
defineOptions({ name: 'PageLayout' });
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
const { getShowMultipleTab } = useMultipleTabSetting();
const tabStore = useMultipleTabStore();
const { getBasicTransition, getEnableTransition } = useTransitionSetting();
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
const { getBasicTransition, getEnableTransition } = useTransitionSetting();
const getCaches = computed((): string[] => {
if (!unref(getOpenKeepAlive)) {
return [];
}
return tabStore.getCachedTabList;
});
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
return {
getTransitionName,
openCache,
getEnableTransition,
getBasicTransition,
getCaches,
getCanEmbedIFramePage,
};
},
const getCaches = computed((): string[] => {
if (!unref(getOpenKeepAlive)) {
return [];
}
return tabStore.getCachedTabList;
});
</script>

4
src/views/dashboard/analysis/components/VisitAnalysis.vue
View File

@ -1,12 +1,10 @@
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { basicProps } from './props';
</script>
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { basicProps } from './props';
defineProps({
...basicProps,

4
src/views/dashboard/analysis/components/VisitAnalysisBar.vue
View File

@ -1,12 +1,10 @@
<template>
<div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { basicProps } from './props';
</script>
<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { basicProps } from './props';
defineProps({
...basicProps,

12
src/views/dashboard/workbench/components/ProjectCard.vue
View File

@ -4,7 +4,7 @@
<a-button type="link" size="small">更多</a-button>
</template>
<CardGrid v-for="item in items" :key="item.title" class="!md:w-1/3 !w-full">
<CardGrid v-for="item in groupItems" :key="item.title" class="!md:w-1/3 !w-full">
<span class="flex">
<Icon :icon="item.icon" :color="item.color" size="30" />
<span class="text-lg ml-4">{{ item.title }}</span>
@ -17,16 +17,8 @@
</CardGrid>
</Card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { Card, CardGrid } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { groupItems } from './data';
export default defineComponent({
components: { Card, CardGrid, Icon },
setup() {
return { items: groupItems };
},
});
</script>