github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 18:40:22 +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 { SearchOutlined } from '@ant-design/icons-vue';
import AppSearchFooter from './AppSearchFooter.vue'; import AppSearchFooter from './AppSearchFooter.vue';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
// @ts-ignore
import vClickOutside from '@/directives/clickOutside'; import vClickOutside from '@/directives/clickOutside';
import { useDesign } from '@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useRefs } from '@vben/hooks'; import { useRefs } from '@vben/hooks';

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

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

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

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

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

@ -1,28 +1,35 @@
<script lang="ts"> <template>
import { defineComponent, computed, unref } from 'vue'; <LayoutLockPage />
<BackTop v-if="getUseOpenBackTop" :target="getTarget" />
<SettingDrawer
v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
:class="prefixCls"
/>
<SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { BackTop } from 'ant-design-vue'; import { BackTop } from 'ant-design-vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useUserStoreWithOut } from '/@/store/modules/user'; import { useUserStoreWithOut } from '@/store/modules/user';
import { SettingButtonPositionEnum } from '/@/enums/appEnum'; import { SettingButtonPositionEnum } from '@/enums/appEnum';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
import SessionTimeoutLogin from '/@/views/sys/login/SessionTimeoutLogin.vue'; import SessionTimeoutLogin from '@/views/sys/login/SessionTimeoutLogin.vue';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; 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;
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 } = const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
useRootSetting(); useRootSetting();
const userStore = useUserStoreWithOut(); const userStore = useUserStoreWithOut();
@ -44,30 +51,7 @@
}); });
const { getShowMultipleTab } = useMultipleTabSetting(); const { getShowMultipleTab } = useMultipleTabSetting();
return {
getTarget: () => document.body,
getUseOpenBackTop,
getIsFixedSettingDrawer,
prefixCls,
getIsSessionTimeout,
getShowMultipleTab,
getFullContent,
};
},
});
</script> </script>
<template>
<LayoutLockPage />
<BackTop v-if="getUseOpenBackTop" :target="getTarget" />
<SettingDrawer
v-if="getIsFixedSettingDrawer && (!getShowMultipleTab || getFullContent)"
:class="prefixCls"
/>
<SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-setting-drawer-feature'; @prefix-cls: ~'@{namespace}-setting-drawer-feature';

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

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

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

@ -9,41 +9,35 @@
<MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" /> <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, unref, computed, CSSProperties } from 'vue'; import { unref, computed, CSSProperties } from 'vue';
import LayoutHeader from './index.vue'; import LayoutHeader from './index.vue';
import MultipleTabs from '../tabs/index.vue'; import MultipleTabs from '../tabs/index.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useFullContent } from '/@/hooks/web/useFullContent'; import { useFullContent } from '@/hooks/web/useFullContent';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useLayoutHeight } from '../content/useContentViewHeight'; import { useLayoutHeight } from '../content/useContentViewHeight';
import { useMultipleTabStore } from '/@/store/modules/multipleTab'; import { useMultipleTabStore } from '@/store/modules/multipleTab';
const HEADER_HEIGHT = 48; const HEADER_HEIGHT = 48;
const TABS_HEIGHT = 32; const TABS_HEIGHT = 32;
export default defineComponent({
name: 'LayoutMultipleHeader', defineOptions({ name: 'LayoutMultipleHeader' });
components: { LayoutHeader, MultipleTabs },
setup() {
const { setHeaderHeight } = useLayoutHeight(); const { setHeaderHeight } = useLayoutHeight();
const tabStore = useMultipleTabStore(); const tabStore = useMultipleTabStore();
const { prefixCls } = useDesign('layout-multiple-header'); const { prefixCls } = useDesign('layout-multiple-header');
const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting(); const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
const { getIsMobile } = useAppInject(); const { getIsMobile } = useAppInject();
const { const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } =
getFixed, useHeaderSetting();
getShowInsetHeaderRef,
getShowFullHeaderRef,
getHeaderTheme,
getShowHeader,
} = useHeaderSetting();
const { getFullContent } = useFullContent(); const { getFullContent } = useFullContent();
@ -101,20 +95,6 @@
{ [`${prefixCls}--fixed`]: unref(getIsFixed) }, { [`${prefixCls}--fixed`]: unref(getIsFixed) },
]; ];
}); });
return {
getClass,
prefixCls,
getPlaceholderDomStyle,
getIsFixed,
getWrapStyle,
getIsShowPlaceholderDom,
getShowTabs,
getShowInsetHeaderRef,
tabStore,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-layout-multiple-header'; @prefix-cls: ~'@{namespace}-layout-multiple-header';

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

@ -6,7 +6,7 @@
<span v-if="!hasRedirect(routesMatched, route)"> <span v-if="!hasRedirect(routesMatched, route)">
{{ t(route.name || route.meta.title) }} {{ t(route.name || route.meta.title) }}
</span> </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) }} {{ t(route.name || route.meta.title) }}
</router-link> </router-link>
</template> </template>

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

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

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

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

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

@ -6,19 +6,16 @@
</span> </span>
</Tooltip> </Tooltip>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, computed, unref } from 'vue'; import { computed, unref } from 'vue';
import { Tooltip } from 'ant-design-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 { useFullscreen } from '@vueuse/core';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'; import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue';
export default defineComponent({ defineOptions({ name: 'FullScreen' });
name: 'FullScreen',
components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip },
setup() {
const { t } = useI18n(); const { t } = useI18n();
const { toggle, isFullscreen } = useFullscreen(); const { toggle, isFullscreen } = useFullscreen();
// 重新检查全屏状态 // 重新检查全屏状态
@ -34,12 +31,4 @@
? t('layout.header.tooltipExitFull') ? t('layout.header.tooltipExitFull')
: t('layout.header.tooltipEntryFull'); : t('layout.header.tooltipEntryFull');
}); });
return {
getTitle,
isFullscreen,
toggle,
};
},
});
</script> </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'; import FullScreen from './FullScreen.vue';
export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), { export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), {

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

@ -24,22 +24,19 @@
</div> </div>
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, computed } from 'vue'; import { computed } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { BasicModal, useModalInner } from '/@/components/Modal/index'; import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index'; import { BasicForm, useForm } from '@/components/Form';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { useLockStore } from '/@/store/modules/lock'; import { useLockStore } from '@/store/modules/lock';
import headerImg from '/@/assets/images/header.jpg'; import headerImg from '@/assets/images/header.jpg';
export default defineComponent({ defineOptions({ name: 'LockModal' });
name: 'LockModal',
components: { BasicModal, BasicForm },
setup() {
const { t } = useI18n(); const { t } = useI18n();
const { prefixCls } = useDesign('header-lock-modal'); const { prefixCls } = useDesign('header-lock-modal');
const userStore = useUserStore(); const userStore = useUserStore();
@ -82,18 +79,6 @@
const { avatar } = userStore.getUserInfo; const { avatar } = userStore.getUserInfo;
return avatar || headerImg; return avatar || headerImg;
}); });
return {
t,
prefixCls,
getRealName,
register,
registerForm,
handleLock,
avatar,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-header-lock-modal'; @prefix-cls: ~'@{namespace}-header-lock-modal';

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

@ -1,43 +1,38 @@
<template> <template>
<a-list :class="prefixCls" bordered :pagination="getPagination"> <List :class="prefixCls" bordered :pagination="getPagination">
<template v-for="item in getData" :key="item.id"> <template v-for="item in getData" :key="item.id">
<a-list-item class="list-item"> <List.Item class="list-item">
<a-list-item-meta> <List.Item.Meta>
<template #title> <template #title>
<div class="title"> <div class="title">
<a-typography-paragraph <Typography.Paragraph
@click="handleTitleClick(item)" @click="handleTitleClick(item)"
style="width: 100%; margin-bottom: 0 !important"
:style="{ cursor: isTitleClickable ? 'pointer' : '' }"
:delete="!!item.titleDelete" :delete="!!item.titleDelete"
:ellipsis=" :ellipsis="
$props.titleRows && $props.titleRows > 0 titleRows && titleRows > 0 ? { rows: titleRows, tooltip: !!item.title } : false
? { rows: $props.titleRows, tooltip: !!item.title }
: false
" "
:content="item.title" :content="item.title"
/> />
<div class="extra" v-if="item.extra"> <div class="extra" v-if="item.extra">
<a-tag class="tag" :color="item.color"> <Tag class="tag" :color="item.color">
{{ item.extra }} {{ item.extra }}
</a-tag> </Tag>
</div> </div>
</div> </div>
</template> </template>
<template #avatar> <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> <span v-else> {{ item.avatar }}</span>
</template> </template>
<template #description> <template #description>
<div> <div>
<div class="description" v-if="item.description"> <div class="description" v-if="item.description">
<a-typography-paragraph <Typography.Paragraph
style="width: 100%; margin-bottom: 0 !important"
:ellipsis=" :ellipsis="
$props.descRows && $props.descRows > 0 descRows && descRows > 0
? { rows: $props.descRows, tooltip: !!item.description } ? { rows: descRows, tooltip: !!item.description }
: false : false
" "
:content="item.description" :content="item.description"
@ -48,37 +43,19 @@
</div> </div>
</div> </div>
</template> </template>
</a-list-item-meta> </List.Item.Meta>
</a-list-item> </List.Item>
</template> </template>
</a-list> </List>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent, PropType, ref, watch, unref } from 'vue'; import { computed, PropType, ref, watch, unref } from 'vue';
import { ListItem } from './data'; 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 { List, Avatar, Tag, Typography } from 'ant-design-vue';
import { isNumber } from '/@/utils/is'; import { isNumber } from '@/utils/is';
// types const props = defineProps({
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,
},
props: {
list: { list: {
type: Array as PropType<ListItem[]>, type: Array as PropType<ListItem[]>,
default: () => [], default: () => [],
@ -102,9 +79,10 @@
onTitleClick: { onTitleClick: {
type: Function as PropType<(Recordable) => void>, type: Function as PropType<(Recordable) => void>,
}, },
}, });
emits: ['update:currentPage'],
setup(props, { emit }) { const emit = defineEmits(['update:currentPage']);
const { prefixCls } = useDesign('header-notify-list'); const { prefixCls } = useDesign('header-notify-list');
const current = ref(props.currentPage || 1); const current = ref(props.currentPage || 1);
const getData = computed(() => { const getData = computed(() => {
@ -119,7 +97,6 @@
current.value = v; current.value = v;
}, },
); );
const isTitleClickable = computed(() => !!props.onTitleClick);
const getPagination = computed(() => { const getPagination = computed(() => {
const { list, pageSize } = props; const { list, pageSize } = props;
@ -145,10 +122,6 @@
function handleTitleClick(item: ListItem) { function handleTitleClick(item: ListItem) {
props.onTitleClick && props.onTitleClick(item); props.onTitleClick && props.onTitleClick(item);
} }
return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-header-notify-list'; @prefix-cls: ~'@{namespace}-header-notify-list';

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

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

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

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

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

@ -17,7 +17,7 @@
icon="ion:document-text-outline" icon="ion:document-text-outline"
v-if="getShowDoc" v-if="getShowDoc"
/> />
<MenuDivider v-if="getShowDoc" /> <Menu.Divider v-if="getShowDoc" />
<MenuItem <MenuItem
v-if="getShowApi" v-if="getShowApi"
key="api" key="api"
@ -41,43 +41,33 @@
<LockAction @register="register" /> <LockAction @register="register" />
<ChangeApi @register="registerApi" /> <ChangeApi @register="registerApi" />
</template> </template>
<script lang="ts"> <script lang="ts" setup>
// components
import { Dropdown, Menu } from 'ant-design-vue'; import { Dropdown, Menu } from 'ant-design-vue';
import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'; import type { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { computed } from 'vue';
import { defineComponent, computed } from 'vue'; import { DOC_URL } from '@/settings/siteSetting';
import { useUserStore } from '@/store/modules/user';
import { DOC_URL } from '/@/settings/siteSetting'; import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useI18n } from '@/hooks/web/useI18n';
import { useUserStore } from '/@/store/modules/user'; import { useDesign } from '@/hooks/web/useDesign';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useModal } from '@/components/Modal';
import { useI18n } from '/@/hooks/web/useI18n'; import headerImg from '@/assets/images/header.jpg';
import { useDesign } from '/@/hooks/web/useDesign'; import { propTypes } from '@/utils/propTypes';
import { useModal } from '/@/components/Modal'; import { openWindow } from '@/utils';
import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
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'; type MenuEvent = 'logout' | 'doc' | 'lock' | 'api';
export default defineComponent({ const MenuItem = createAsyncComponent(() => import('./DropMenuItem.vue'));
name: 'UserDropdown', const LockAction = createAsyncComponent(() => import('../lock/LockModal.vue'));
components: { const ChangeApi = createAsyncComponent(() => import('../ChangeApi/index.vue'));
Dropdown,
Menu, defineOptions({ name: 'UserDropdown' });
MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
MenuDivider: Menu.Divider, defineProps({
LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
ChangeApi: createAsyncComponent(() => import('../ChangeApi/index.vue')),
},
props: {
theme: propTypes.oneOf(['dark', 'light']), theme: propTypes.oneOf(['dark', 'light']),
}, });
setup() {
const { prefixCls } = useDesign('header-user-dropdown'); const { prefixCls } = useDesign('header-user-dropdown');
const { t } = useI18n(); const { t } = useI18n();
const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting(); const { getShowDoc, getUseLockPage, getShowApi } = useHeaderSetting();
@ -125,20 +115,6 @@
break; break;
} }
} }
return {
prefixCls,
t,
getUserInfo,
handleMenuClick,
getShowDoc,
getShowApi,
register,
registerApi,
getUseLockPage,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-header-user-dropdown'; @prefix-cls: ~'@{namespace}-header-user-dropdown';

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

@ -13,37 +13,30 @@
</Layout> </Layout>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, computed, unref } from 'vue'; import { computed, unref } from 'vue';
import { Layout } from 'ant-design-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 LayoutHeader from './header/index.vue';
import LayoutContent from './content/index.vue'; import LayoutContent from './content/index.vue';
import LayoutSideBar from './sider/index.vue'; import LayoutSideBar from './sider/index.vue';
import LayoutMultipleHeader from './header/MultipleHeader.vue'; import LayoutMultipleHeader from './header/MultipleHeader.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useLockPage } from '/@/hooks/web/useLockPage'; 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';
const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'));
const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'));
defineOptions({ name: 'DefaultLayout' });
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 { prefixCls } = useDesign('default-layout');
const { getIsMobile } = useAppInject(); const { getIsMobile } = useAppInject();
const { getShowFullHeaderRef } = useHeaderSetting(); const { getShowFullHeaderRef } = useHeaderSetting();
@ -65,18 +58,6 @@
return cls; return cls;
}); });
return {
getShowFullHeaderRef,
getShowSidebar,
prefixCls,
getIsMobile,
getIsMixSidebar,
layoutClass,
lockEvents,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-default-layout'; @prefix-cls: ~'@{namespace}-default-layout';

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

@ -2,23 +2,23 @@
import type { PropType, CSSProperties } from 'vue'; import type { PropType, CSSProperties } from 'vue';
import { computed, defineComponent, unref, toRef } from 'vue'; import { computed, defineComponent, unref, toRef } from 'vue';
import { BasicMenu } from '/@/components/Menu'; import { BasicMenu } from '@/components/Menu';
import { SimpleMenu } from '/@/components/SimpleMenu'; import { SimpleMenu } from '@/components/SimpleMenu';
import { AppLogo } from '/@/components/Application'; import { AppLogo } from '@/components/Application';
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { ScrollContainer } from '/@/components/Container'; import { ScrollContainer } from '@/components/Container';
import { useGo } from '/@/hooks/web/usePage'; import { useGo } from '@/hooks/web/usePage';
import { useSplitMenu } from './useLayoutMenu'; import { useSplitMenu } from './useLayoutMenu';
import { openWindow } from '/@/utils'; import { openWindow } from '@/utils';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '@/utils/propTypes';
import { isHttpUrl } from '/@/utils/is'; import { isHttpUrl } from '@/utils/is';
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; import { useRootSetting } from '@/hooks/setting/useRootSetting';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
export default defineComponent({ export default defineComponent({
name: 'LayoutMenu', 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 type { Ref } from 'vue';
import { watch, unref, ref, computed } from 'vue'; import { watch, unref, ref, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { MenuSplitTyeEnum } from '/@/enums/menuEnum'; import { MenuSplitTyeEnum } from '@/enums/menuEnum';
import { useThrottleFn } from '@vueuse/core'; import { useThrottleFn } from '@vueuse/core';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '/@/router/menus'; import { getChildrenMenus, getCurrentParentPath, getMenus, getShallowMenus } from '@/router/menus';
import { usePermissionStore } from '/@/store/modules/permission'; import { usePermissionStore } from '@/store/modules/permission';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '@/hooks/web/useAppInject';
export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) { export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
// Menu array // Menu array

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

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

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

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

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

@ -11,18 +11,17 @@
/> />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, PropType, computed } from 'vue'; import { PropType, computed } from 'vue';
import { Select, type SelectProps } from 'ant-design-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 { baseHandler } from '../handler';
import { HandlerEnum } from '../enum'; import { HandlerEnum } from '../enum';
export default defineComponent({ defineOptions({ name: 'SelectItem' });
name: 'SelectItem',
components: { Select }, const props = defineProps({
props: {
event: { event: {
type: Number as PropType<HandlerEnum>, type: Number as PropType<HandlerEnum>,
}, },
@ -42,8 +41,8 @@
type: Array as PropType<LabelValueOptions>, type: Array as PropType<LabelValueOptions>,
default: () => [], default: () => [],
}, },
}, });
setup(props) {
const { prefixCls } = useDesign('setting-select-item'); const { prefixCls } = useDesign('setting-select-item');
const getBindValue = computed(() => { const getBindValue = computed(() => {
return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {}; return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
@ -52,14 +51,6 @@
const handleChange: SelectProps['onChange'] = (val) => { const handleChange: SelectProps['onChange'] = (val) => {
props.event && baseHandler(props.event, val); props.event && baseHandler(props.event, val);
}; };
return {
prefixCls,
handleChange,
getBindValue,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-select-item'; @prefix-cls: ~'@{namespace}-setting-select-item';

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

@ -16,29 +16,27 @@
</a-button> </a-button>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, unref } from 'vue'; import { unref } from 'vue';
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue'; import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { useAppStore } from '/@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
import { usePermissionStore } from '/@/store/modules/permission'; import { usePermissionStore } from '@/store/modules/permission';
import { useMultipleTabStore } from '/@/store/modules/multipleTab'; import { useMultipleTabStore } from '@/store/modules/multipleTab';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { copyText } from '/@/utils/copyTextToClipboard'; import { copyText } from '@/utils/copyTextToClipboard';
import { updateColorWeak } from '/@/logics/theme/updateColorWeak'; import { updateColorWeak } from '@/logics/theme/updateColorWeak';
import { updateGrayMode } from '/@/logics/theme/updateGrayMode'; import { updateGrayMode } from '@/logics/theme/updateGrayMode';
import defaultSetting from '/@/settings/projectSetting'; import defaultSetting from '@/settings/projectSetting';
import { updateSidebarBgColor } from '/@/logics/theme/updateBackground'; import { updateSidebarBgColor } from '@/logics/theme/updateBackground';
defineOptions({ name: 'SettingFooter' });
export default defineComponent({
name: 'SettingFooter',
components: { CopyOutlined, RedoOutlined },
setup() {
const permissionStore = usePermissionStore(); const permissionStore = usePermissionStore();
const { prefixCls } = useDesign('setting-footer'); const { prefixCls } = useDesign('setting-footer');
const { t } = useI18n(); const { t } = useI18n();
@ -76,15 +74,6 @@
userStore.resetState(); userStore.resetState();
location.reload(); location.reload();
} }
return {
prefixCls,
t,
handleCopy,
handleResetSetting,
handleClearAndRedo,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-footer'; @prefix-cls: ~'@{namespace}-setting-footer';

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

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

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

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

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

@ -18,20 +18,19 @@
</template> </template>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, PropType } from 'vue'; import type { PropType } from 'vue';
import { Tooltip } from 'ant-design-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({ defineOptions({ name: 'MenuTypePicker' });
name: 'MenuTypePicker',
components: { Tooltip }, defineProps({
props: {
menuTypeList: { menuTypeList: {
type: Array as PropType<typeof menuTypeList>, type: Array as PropType<typeof menuTypeListEnum>,
default: () => [], default: () => [],
}, },
handler: { handler: {
@ -42,15 +41,9 @@
type: String, type: String,
default: '', default: '',
}, },
},
setup() {
const { prefixCls } = useDesign('setting-menu-type-picker');
return {
prefixCls,
};
},
}); });
const { prefixCls } = useDesign('setting-menu-type-picker');
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-setting-menu-type-picker'; @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 TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
export const ThemeColorPicker = createAsyncComponent(() => import('./ThemeColorPicker.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 { import {
MenuModeEnum, MenuModeEnum,
MenuTypeEnum, MenuTypeEnum,
TopMenuAlignEnum, TopMenuAlignEnum,
TriggerEnum, TriggerEnum,
MixSidebarTriggerEnum, MixSidebarTriggerEnum,
} from '/@/enums/menuEnum'; } from '@/enums/menuEnum';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
const { t } = useI18n(); const { t } = useI18n();
@ -121,7 +121,7 @@ export const routerTransitionOptions = [
}; };
}); });
export const menuTypeList = [ export const menuTypeListEnum = [
{ {
title: t('layout.setting.menuTypeSidebar'), title: t('layout.setting.menuTypeSidebar'),
mode: MenuModeEnum.INLINE, mode: MenuModeEnum.INLINE,

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

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

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

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

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

@ -1,18 +1,18 @@
<template> <template>
<div :class="getClass" :style="getDragBarStyle"></div> <div :class="getClass" :style="getDragBarStyle"></div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, computed, unref } from 'vue'; import { computed, unref } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
export default defineComponent({ defineOptions({ name: 'DargBar' });
name: 'DargBar',
props: { const props = defineProps({
mobile: Boolean, mobile: Boolean,
}, });
setup(props) {
const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting(); const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
const { prefixCls } = useDesign('darg-bar'); const { prefixCls } = useDesign('darg-bar');
@ -31,14 +31,6 @@
}, },
]; ];
}); });
return {
prefixCls,
getDragBarStyle,
getClass,
};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@prefix-cls: ~'@{namespace}-darg-bar'; @prefix-cls: ~'@{namespace}-darg-bar';

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

@ -83,45 +83,35 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import type { Menu } from '/@/router/types'; import type { Menu } from '@/router/types';
import type { CSSProperties } from 'vue'; 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 type { RouteLocationNormalized } from 'vue-router';
import { ScrollContainer } from '/@/components/Container'; import { ScrollContainer } from '@/components/Container';
import { SimpleMenu } from '/@/components/SimpleMenu'; import { SimpleMenu } from '@/components/SimpleMenu';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { AppLogo } from '/@/components/Application'; import { AppLogo } from '@/components/Application';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { usePermissionStore } from '/@/store/modules/permission'; import { usePermissionStore } from '@/store/modules/permission';
import { useDragLine } from './useLayoutSider'; import { useDragLine } from './useLayoutSider';
import { useGlobSetting } from '/@/hooks/setting'; import { useGlobSetting } from '@/hooks/setting';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
import { useGo } from '/@/hooks/web/usePage'; import { useGo } from '@/hooks/web/usePage';
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum'; import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '@/enums/appEnum';
import clickOutside from '/@/directives/clickOutside'; import vClickOutside from '@/directives/clickOutside';
import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus'; import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '@/router/menus';
import { listenerRouteChange } from '/@/logics/mitt/routeChange'; import { listenerRouteChange } from '@/logics/mitt/routeChange';
import LayoutTrigger from '../trigger/index.vue'; import LayoutTrigger from '../trigger/index.vue';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';
const SimpleMenuTag = createAsyncComponent(
() => import('@/components/SimpleMenu/src/SimpleMenuTag.vue'),
);
defineOptions({ name: 'LayoutMixSider' });
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[]>([]); let menuModules = ref<Menu[]>([]);
const activePath = ref(''); const activePath = ref('');
const childrenMenus = ref<Menu[]>([]); const childrenMenus = ref<Menu[]>([]);
@ -323,33 +313,6 @@
openMenu.value = false; 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,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-layout-mix-sider'; @prefix-cls: ~'@{namespace}-layout-mix-sider';

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

@ -14,21 +14,17 @@
<Sider v-else /> <Sider v-else />
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue';
import Sider from './LayoutSider.vue'; import Sider from './LayoutSider.vue';
import MixSider from './MixSider.vue'; import MixSider from './MixSider.vue';
import { Drawer } from 'ant-design-vue'; import { Drawer } from 'ant-design-vue';
import { useAppInject } from '/@/hooks/web/useAppInject'; import { useAppInject } from '@/hooks/web/useAppInject';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
defineOptions({ name: 'SiderWrapper' });
export default defineComponent({
name: 'SiderWrapper',
components: { Sider, Drawer, MixSider },
setup() {
const { prefixCls } = useDesign('layout-sider-wrapper'); const { prefixCls } = useDesign('layout-sider-wrapper');
const { getIsMobile } = useAppInject(); const { getIsMobile } = useAppInject();
const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting(); const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting();
@ -38,10 +34,6 @@
collapsed: true, collapsed: true,
}); });
} }
return { prefixCls, getIsMobile, getCollapsed, handleClose, getMenuWidth, getIsMixSidebar };
},
});
</script> </script>
<style lang="less"> <style lang="less">
@prefix-cls: ~'@{namespace}-layout-sider-wrapper'; @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 { 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 { useDebounceFn } from '@vueuse/core';
import { useAppStore } from '/@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
/** /**
* Handle related operations of menu events * Handle related operations of menu events

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

@ -3,19 +3,17 @@
<Icon :icon="getIcon" /> <Icon :icon="getIcon" />
</span> </span>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, unref, computed } from 'vue'; import { unref, computed } from 'vue';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { triggerWindowResize } from '/@/utils/event'; import { triggerWindowResize } from '@/utils/event';
defineOptions({ name: 'FoldButton' });
export default defineComponent({
name: 'FoldButton',
components: { Icon },
setup() {
const { prefixCls } = useDesign('multiple-tabs-content'); const { prefixCls } = useDesign('multiple-tabs-content');
const { getShowMenu, setMenuSetting } = useMenuSetting(); const { getShowMenu, setMenuSetting } = useMenuSetting();
const { getShowHeader, setHeaderSetting } = useHeaderSetting(); const { getShowHeader, setHeaderSetting } = useHeaderSetting();
@ -35,8 +33,4 @@
setHeaderSetting({ show: isUnFold }); setHeaderSetting({ show: isUnFold });
triggerWindowResize(); triggerWindowResize();
} }
return { prefixCls, getIcon, handleFold };
},
});
</script> </script>

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

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

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

@ -14,31 +14,30 @@
</span> </span>
</Dropdown> </Dropdown>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import type { RouteLocationNormalized } from 'vue-router'; import type { RouteLocationNormalized } from 'vue-router';
import { defineComponent, computed, unref } from 'vue'; import { computed, unref } from 'vue';
import { Dropdown } from '/@/components/Dropdown/index'; import { Dropdown } from '@/components/Dropdown';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { TabContentProps } from '../types'; import { TabContentProps } from '../types';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '@/hooks/web/useI18n';
import { useTabDropdown } from '../useTabDropdown'; import { useTabDropdown } from '../useTabDropdown';
export default defineComponent({ defineOptions({ name: 'TabContent' });
name: 'TabContent',
components: { Dropdown, Icon }, const props = defineProps({
props: {
tabItem: { tabItem: {
type: Object as PropType<RouteLocationNormalized>, type: Object as PropType<RouteLocationNormalized>,
default: null, default: null,
}, },
isExtra: Boolean, isExtra: Boolean,
}, });
setup(props) {
const { prefixCls } = useDesign('multiple-tabs-content'); const { prefixCls } = useDesign('multiple-tabs-content');
const { t } = useI18n(); const { t } = useI18n();
@ -61,16 +60,4 @@
function handleContext(e) { function handleContext(e) {
props.tabItem && handleContextMenu(props.tabItem)(e); props.tabItem && handleContextMenu(props.tabItem)(e);
} }
return {
prefixCls,
getDropMenuList,
handleMenuEvent,
handleContext,
getTrigger,
getIsTabs,
getTitle,
};
},
});
</script> </script>

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

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

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

@ -11,11 +11,11 @@
@edit="(e) => handleEdit(`${e}`)" @edit="(e) => handleEdit(`${e}`)"
> >
<template v-for="item in getTabsState" :key="item.query ? item.fullPath : item.path"> <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> <template #tab>
<TabContent :tabItem="item" /> <TabContent :tabItem="item" />
</template> </template>
</TabPane> </Tabs.TabPane>
</template> </template>
<template #rightExtra v-if="getShowRedo || getShowQuick"> <template #rightExtra v-if="getShowRedo || getShowQuick">
@ -27,48 +27,39 @@
</Tabs> </Tabs>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import type { RouteLocationNormalized, RouteMeta } from 'vue-router'; 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 { Tabs } from 'ant-design-vue';
import TabContent from './components/TabContent.vue'; import TabContent from './components/TabContent.vue';
import FoldButton from './components/FoldButton.vue'; import FoldButton from './components/FoldButton.vue';
import TabRedo from './components/TabRedo.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 { useMultipleTabStore } from '@/store/modules/multipleTab';
import { useUserStore } from '/@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { initAffixTabs, useTabsDrag } from './useMultipleTabs'; import { initAffixTabs, useTabsDrag } from './useMultipleTabs';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '@/hooks/web/useDesign';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { REDIRECT_NAME } from '/@/router/constant'; import { REDIRECT_NAME } from '@/router/constant';
import { listenerRouteChange } from '/@/logics/mitt/routeChange'; import { listenerRouteChange } from '@/logics/mitt/routeChange';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useMouse } from '@vueuse/core'; import { useMouse } from '@vueuse/core';
import { multipleTabHeight } from '/@/settings/designSetting'; import { multipleTabHeight } from '@/settings/designSetting';
import SettingButton from './components/SettingButton.vue'; import SettingButton from './components/SettingButton.vue';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
defineOptions({ name: 'MultipleTabs' });
export default defineComponent({
name: 'MultipleTabs',
components: {
TabRedo,
FoldButton,
Tabs,
TabPane: Tabs.TabPane,
TabContent,
SettingButton,
},
setup() {
const affixTextList = initAffixTabs(); const affixTextList = initAffixTabs();
const activeKeyRef = ref(''); const activeKeyRef = ref('');
@ -118,9 +109,7 @@
} }
if (isHide) { if (isHide) {
const findParentRoute = router const findParentRoute = router.getRoutes().find((item) => item.path === currentActiveMenu);
.getRoutes()
.find((item) => item.path === currentActiveMenu);
findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized); findParentRoute && tabStore.addTab(findParentRoute as unknown as RouteLocationNormalized);
} else { } else {
@ -142,20 +131,6 @@
tabStore.closeTabByKey(targetKey, router); tabStore.closeTabByKey(targetKey, router);
} }
return {
getWrapClass,
handleEdit,
handleChange,
activeKeyRef,
getTabsState,
getShowQuick,
getShowRedo,
getShowFold,
getIsUnFold,
getShowHeader,
};
},
});
</script> </script>
<style lang="less"> <style lang="less">
@import url('./index.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'; import type { RouteLocationNormalized } from 'vue-router';
export enum TabContentEnum { export enum TabContentEnum {

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

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

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

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

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

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

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

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

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

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

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

@ -9,21 +9,15 @@
</template> </template>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent, unref, computed } from 'vue'; import { unref, computed } from 'vue';
import FramePage from '/@/views/sys/iframe/index.vue'; import FramePage from '@/views/sys/iframe/index.vue';
import { useFrameKeepAlive } from './useFrameKeepAlive'; import { useFrameKeepAlive } from './useFrameKeepAlive';
export default defineComponent({ defineOptions({ name: 'FrameLayout' });
name: 'FrameLayout',
components: { FramePage },
setup() {
const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive(); const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
const showFrame = computed(() => unref(getFramePages).length > 0); const showFrame = computed(() => unref(getFramePages).length > 0);
return { getFramePages, hasRenderFrame, showIframe, showFrame };
},
});
</script> </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 { computed, toRaw, unref } from 'vue';
import { useMultipleTabStore } from '/@/store/modules/multipleTab'; import { useMultipleTabStore } from '@/store/modules/multipleTab';
import { uniqBy } from 'lodash-es'; import { uniqBy } from 'lodash-es';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';

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

@ -24,23 +24,21 @@
<FrameLayout v-if="getCanEmbedIFramePage" /> <FrameLayout v-if="getCanEmbedIFramePage" />
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { computed, defineComponent, unref } from 'vue'; 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 { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting'; import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { getTransitionName } from './transition'; import { getTransitionName } from './transition';
import { useMultipleTabStore } from '/@/store/modules/multipleTab'; import { useMultipleTabStore } from '@/store/modules/multipleTab';
defineOptions({ name: 'PageLayout' });
export default defineComponent({
name: 'PageLayout',
components: { FrameLayout },
setup() {
const { getShowMultipleTab } = useMultipleTabSetting(); const { getShowMultipleTab } = useMultipleTabSetting();
const tabStore = useMultipleTabStore(); const tabStore = useMultipleTabStore();
@ -56,15 +54,4 @@
} }
return tabStore.getCachedTabList; return tabStore.getCachedTabList;
}); });
return {
getTransitionName,
openCache,
getEnableTransition,
getBasicTransition,
getCaches,
getCanEmbedIFramePage,
};
},
});
</script> </script>

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

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

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

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

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

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