refactor: Separate store
This commit is contained in:
@@ -9,7 +9,7 @@ import { RouterView } from 'vue-router';
|
||||
|
||||
import { useContentHeight } from '@vben/hooks';
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
import { storeToRefs, useCoreTabbarStore } from '@vben/stores';
|
||||
import { storeToRefs, useTabbarStore } from '@vben/stores';
|
||||
import { Spinner } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { IFrameRouterView } from '../../iframe';
|
||||
@@ -17,7 +17,7 @@ import { useContentSpinner } from './use-content-spinner';
|
||||
|
||||
defineOptions({ name: 'LayoutContent' });
|
||||
|
||||
const tabbarStore = useCoreTabbarStore();
|
||||
const tabbarStore = useTabbarStore();
|
||||
const { keepAlive } = usePreferences();
|
||||
const { spinning } = useContentSpinner();
|
||||
const { contentStyles } = useContentHeight();
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
import { useCoreAccessStore } from '@vben/stores';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
import { VbenFullScreen } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { GlobalSearch, LanguageToggle, ThemeToggle } from '../../widgets';
|
||||
@@ -20,7 +20,7 @@ withDefaults(defineProps<Props>(), {
|
||||
theme: 'light',
|
||||
});
|
||||
|
||||
const accessStore = useCoreAccessStore();
|
||||
const accessStore = useAccessStore();
|
||||
const { globalSearchShortcutKey } = usePreferences();
|
||||
</script>
|
||||
|
||||
|
@@ -8,7 +8,7 @@ import {
|
||||
updatePreferences,
|
||||
usePreferences,
|
||||
} from '@vben/preferences';
|
||||
import { useCoreAccessStore, useCoreLockStore } from '@vben/stores';
|
||||
import { useLockStore, useUserStore } from '@vben/stores';
|
||||
import { MenuRecordRaw } from '@vben/types';
|
||||
import { mapTree } from '@vben/utils';
|
||||
import { VbenAdminLayout } from '@vben-core/layout-ui';
|
||||
@@ -41,9 +41,9 @@ const {
|
||||
layout,
|
||||
sidebarCollapsed,
|
||||
} = usePreferences();
|
||||
const coreAccessStore = useCoreAccessStore();
|
||||
const userStore = useUserStore();
|
||||
const { updateWatermark } = useWatermark();
|
||||
const coreLockStore = useCoreLockStore();
|
||||
const lockStore = useLockStore();
|
||||
|
||||
const headerMenuTheme = computed(() => {
|
||||
return isDark.value ? 'dark' : 'light';
|
||||
@@ -138,7 +138,7 @@ watch(
|
||||
// await nextTick();
|
||||
|
||||
updateWatermark({
|
||||
content: `${preferences.app.name} 用户名: ${coreAccessStore.userInfo?.username}`,
|
||||
content: `${preferences.app.name} 用户名: ${userStore.userInfo?.username}`,
|
||||
// parent: contentRef.value,
|
||||
});
|
||||
}
|
||||
@@ -317,7 +317,7 @@ watch(
|
||||
/>
|
||||
|
||||
<Transition v-if="preferences.widget.lockScreen" name="slide-up">
|
||||
<slot v-if="coreLockStore.isLockScreen" name="lock-screen"></slot>
|
||||
<slot v-if="lockStore.isLockScreen" name="lock-screen"></slot>
|
||||
</Transition>
|
||||
</template>
|
||||
</VbenAdminLayout>
|
||||
|
@@ -4,13 +4,13 @@ import { computed, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { useCoreAccessStore } from '@vben/stores';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
import { findRootMenuByPath } from '@vben/utils';
|
||||
|
||||
import { useNavigation } from './use-navigation';
|
||||
|
||||
function useExtraMenu() {
|
||||
const accessStore = useCoreAccessStore();
|
||||
const accessStore = useAccessStore();
|
||||
const { navigation } = useNavigation();
|
||||
|
||||
const menus = computed(() => accessStore.accessMenus);
|
||||
|
@@ -4,14 +4,14 @@ import { computed, onBeforeMount, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
import { useCoreAccessStore } from '@vben/stores';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
import { findRootMenuByPath } from '@vben/utils';
|
||||
|
||||
import { useNavigation } from './use-navigation';
|
||||
|
||||
function useMixedMenu() {
|
||||
const { navigation } = useNavigation();
|
||||
const accessStore = useCoreAccessStore();
|
||||
const accessStore = useAccessStore();
|
||||
const route = useRoute();
|
||||
const splitSideMenus = ref<MenuRecordRaw[]>([]);
|
||||
const rootMenuPath = ref<string>('');
|
||||
|
@@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
|
||||
|
||||
import { useContentMaximize, useTabs } from '@vben/hooks';
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { useCoreTabbarStore } from '@vben/stores';
|
||||
import { useTabbarStore } from '@vben/stores';
|
||||
import {
|
||||
TabsToolMore,
|
||||
TabsToolRefresh,
|
||||
@@ -21,7 +21,7 @@ defineOptions({
|
||||
defineProps<{ showIcon?: boolean; theme?: string }>();
|
||||
|
||||
const route = useRoute();
|
||||
const coreTabbarStore = useCoreTabbarStore();
|
||||
const tabbarStore = useTabbarStore();
|
||||
const { toggleMaximize } = useContentMaximize();
|
||||
const { refreshTab, unpinTab } = useTabs();
|
||||
|
||||
@@ -34,7 +34,7 @@ const {
|
||||
} = useTabbar();
|
||||
|
||||
const menus = computed(() => {
|
||||
const tab = coreTabbarStore.getTabByPath(currentActive.value);
|
||||
const tab = tabbarStore.getTabByPath(currentActive.value);
|
||||
const menus = createContextMenus(tab);
|
||||
return menus.map((item) => {
|
||||
return {
|
||||
@@ -47,7 +47,7 @@ const menus = computed(() => {
|
||||
|
||||
// 刷新后如果不保持tab状态,关闭其他tab
|
||||
if (!preferences.tabbar.persist) {
|
||||
coreTabbarStore.closeOtherTabs(route);
|
||||
tabbarStore.closeOtherTabs(route);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -61,7 +61,7 @@ if (!preferences.tabbar.persist) {
|
||||
:style-type="preferences.tabbar.styleType"
|
||||
:tabs="currentTabs"
|
||||
@close="handleClose"
|
||||
@sort-tabs="coreTabbarStore.sortTabs"
|
||||
@sort-tabs="tabbarStore.sortTabs"
|
||||
@unpin="unpinTab"
|
||||
@update:active="handleClick"
|
||||
/>
|
||||
|
@@ -23,19 +23,14 @@ import {
|
||||
X,
|
||||
} from '@vben/icons';
|
||||
import { $t, useI18n } from '@vben/locales';
|
||||
import {
|
||||
storeToRefs,
|
||||
useCoreAccessStore,
|
||||
useCoreTabbarStore,
|
||||
} from '@vben/stores';
|
||||
import { useAccessStore, useTabbarStore } from '@vben/stores';
|
||||
import { filterTree } from '@vben/utils';
|
||||
|
||||
export function useTabbar() {
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const accessStore = useCoreAccessStore();
|
||||
const coreTabbarStore = useCoreTabbarStore();
|
||||
const { accessMenus } = storeToRefs(accessStore);
|
||||
const accessStore = useAccessStore();
|
||||
const tabbarStore = useTabbarStore();
|
||||
const { contentIsMaximize, toggleMaximize } = useContentMaximize();
|
||||
const {
|
||||
closeAllTabs,
|
||||
@@ -58,8 +53,8 @@ export function useTabbar() {
|
||||
const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
|
||||
watch(
|
||||
[
|
||||
() => coreTabbarStore.getTabs,
|
||||
() => coreTabbarStore.updateTime,
|
||||
() => tabbarStore.getTabs,
|
||||
() => tabbarStore.updateTime,
|
||||
() => locale.value,
|
||||
],
|
||||
([tabs]) => {
|
||||
@@ -74,7 +69,7 @@ export function useTabbar() {
|
||||
const affixTabs = filterTree(router.getRoutes(), (route) => {
|
||||
return !!route.meta?.affixTab;
|
||||
});
|
||||
coreTabbarStore.setAffixTabs(affixTabs);
|
||||
tabbarStore.setAffixTabs(affixTabs);
|
||||
};
|
||||
|
||||
// 点击tab,跳转路由
|
||||
@@ -98,7 +93,7 @@ export function useTabbar() {
|
||||
}
|
||||
|
||||
watch(
|
||||
() => accessMenus.value,
|
||||
() => accessStore.accessMenus,
|
||||
() => {
|
||||
initAffixTabs();
|
||||
},
|
||||
@@ -108,7 +103,7 @@ export function useTabbar() {
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
coreTabbarStore.addTab(route as RouteLocationNormalized);
|
||||
tabbarStore.addTab(route as RouteLocationNormalized);
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
@@ -5,13 +5,13 @@ import { computed, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
import { useCoreTabbarStore } from '@vben/stores';
|
||||
import { useTabbarStore } from '@vben/stores';
|
||||
import { Spinner } from '@vben-core/shadcn-ui';
|
||||
|
||||
defineOptions({ name: 'IFrameRouterView' });
|
||||
|
||||
const spinningList = ref<boolean[]>([]);
|
||||
const coreTabbarStore = useCoreTabbarStore();
|
||||
const tabbarStore = useTabbarStore();
|
||||
const route = useRoute();
|
||||
|
||||
const enableTabbar = computed(() => preferences.tabbar.enable);
|
||||
@@ -20,7 +20,7 @@ const iframeRoutes = computed(() => {
|
||||
if (!enableTabbar.value) {
|
||||
return route.meta.iframeSrc ? [route] : [];
|
||||
}
|
||||
return coreTabbarStore.getTabs.filter((tab) => !!tab.meta?.iframeSrc);
|
||||
return tabbarStore.getTabs.filter((tab) => !!tab.meta?.iframeSrc);
|
||||
});
|
||||
|
||||
const tabNames = computed(
|
||||
@@ -36,7 +36,7 @@ function routeShow(tabItem: RouteLocationNormalized) {
|
||||
function canRender(tabItem: RouteLocationNormalized) {
|
||||
const { meta, name } = tabItem;
|
||||
|
||||
if (!name || !coreTabbarStore.renderRouteView) {
|
||||
if (!name || !tabbarStore.renderRouteView) {
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ function canRender(tabItem: RouteLocationNormalized) {
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return coreTabbarStore.getTabs.some((tab) => tab.name === name);
|
||||
return tabbarStore.getTabs.some((tab) => tab.name === name);
|
||||
}
|
||||
|
||||
function hideLoading(index: number) {
|
||||
|
@@ -3,7 +3,7 @@ import { computed, reactive, ref, watchEffect } from 'vue';
|
||||
|
||||
import { LockKeyhole } from '@vben/icons';
|
||||
import { $t, useI18n } from '@vben/locales';
|
||||
import { storeToRefs, useCoreLockStore } from '@vben/stores';
|
||||
import { storeToRefs, useLockStore } from '@vben/stores';
|
||||
import {
|
||||
VbenAvatar,
|
||||
VbenButton,
|
||||
@@ -27,7 +27,7 @@ withDefaults(defineProps<Props>(), {
|
||||
defineEmits<{ toLogin: [] }>();
|
||||
|
||||
const { locale } = useI18n();
|
||||
const coreLockStore = useCoreLockStore();
|
||||
const lockStore = useLockStore();
|
||||
|
||||
const now = useNow();
|
||||
const meridiem = useDateFormat(now, 'A');
|
||||
@@ -37,7 +37,7 @@ const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
|
||||
|
||||
const showUnlockForm = ref(false);
|
||||
const validPass = ref(true);
|
||||
const { lockScreenPassword } = storeToRefs(coreLockStore);
|
||||
const { lockScreenPassword } = storeToRefs(lockStore);
|
||||
|
||||
const formState = reactive({
|
||||
password: '',
|
||||
@@ -77,7 +77,7 @@ function handleSubmit() {
|
||||
validPass.value = false;
|
||||
return;
|
||||
}
|
||||
coreLockStore.unlockScreen();
|
||||
lockStore.unlockScreen();
|
||||
}
|
||||
|
||||
function toggleUnlockForm() {
|
||||
|
@@ -7,7 +7,7 @@ import { computed, ref } from 'vue';
|
||||
import { LockKeyhole, LogOut, SwatchBook } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
import { preferences, usePreferences } from '@vben/preferences';
|
||||
import { useCoreLockStore } from '@vben/stores';
|
||||
import { useLockStore } from '@vben/stores';
|
||||
import { isWindowsOs } from '@vben/utils';
|
||||
import {
|
||||
Badge,
|
||||
@@ -80,7 +80,7 @@ const {
|
||||
globalLogoutShortcutKey,
|
||||
globalPreferencesShortcutKey,
|
||||
} = usePreferences();
|
||||
const coreLockStore = useCoreLockStore();
|
||||
const lockStore = useLockStore();
|
||||
const { handleOpenPreference } = useOpenPreferences();
|
||||
|
||||
const altView = computed(() => (isWindowsOs() ? 'Alt' : '⌥'));
|
||||
@@ -111,7 +111,7 @@ function handleSubmitLock({
|
||||
lockScreenPassword: string;
|
||||
}) {
|
||||
openLock.value = false;
|
||||
coreLockStore.lockScreen(lockScreenPassword);
|
||||
lockStore.lockScreen(lockScreenPassword);
|
||||
}
|
||||
function handleLogout() {
|
||||
// emit
|
||||
|
Reference in New Issue
Block a user