@ithinkdt/core/src/theme/service.js

iThinkDT Core

import { markRaw } from 'vue'
import { defineStore } from 'pinia'
import { promiseTimeout, usePreferredColorScheme } from '@vueuse/core'
import { Route } from '../auth'
import { getRouteKey } from './page-tab/get-route-key'

const preferredColor = usePreferredColorScheme()
export function _isDark(mode) {
    return mode === 'dark' || (mode === 'auto' && preferredColor.value === 'dark')
}

export function initThemeInfo({ persistExcludesKeys = [], version = 1, Error, router, ...theme }) {
    return defineStore(`core:theme`, {
        state: () => ({
            multiTab: true,
            mode: theme.showAppearence ? 'auto' : 'light',
            menuPlacement: 'sidebar',
            collpaseBtnPlacement: 'sidebar',
            logoPlacement: 'sidebar',
            isFixedSidebar: true,
            topbarDark: false,
            sidebarDark: false,
            showI18n: true,
            showMessage: true,
            showChangePwd: true,
            showFullscreen: true,
            showAppearence: true,
            hasSidebar: true,
            hasTopbar: true,
            hasBreadcrumb: true,
            hasFooter: true,
            floatFooter: false,
            footer: undefined,
            fullTab: false,
            msgInterval: 10_000,
            ...theme,
            Error: markRaw(Error),
            pages: [],
            transition: Promise.resolve(),
        }),
        getters: {
            isDark(state) {
                return _isDark(state.mode)
            },
            currentPageIndex(state) {
                const route = router.currentRoute.value.matched?.find((it) => it.components || it.component)
                const tabKey = getRouteKey(route?.meta.tabKey || route?.meta.keepAlive, {
                    name: route?.name,
                    path: router.currentRoute.value.path,
                    fullPath: router.currentRoute.value.fullPath,
                })
                return state.pages.findIndex((tab) => tabKey === tab.key)
            },
            currentPage(state) {
                const index = this.currentPageIndex
                return index === -1 ? undefined : state.pages[index]
            },
        },
        actions: {
            closePage(tab) {
                return this.closePageByIndex(this.pages.findIndex((tab2) => tab2.key === tab?.key))
            },
            async closePageByIndex(index) {
                const tab = this.pages[index]
                if (tab.hooks?.length) {
                    for (const hook of tab.hooks) {
                        const ret = hook()
                        if (ret instanceof Promise) {
                            if (this.currentPage !== tab) router.push(tab.path)
                            try {
                                const $ret = await ret
                                if ($ret === false || $ret instanceof window.Error) {
                                    return
                                }
                            } catch {
                                return
                            }
                        }
                    }
                }
                if (this.currentPage === tab) {
                    const m = this.pages[index - 1] || this.pages[index + 1]
                    await router.push(m?.path ?? { name: Route.INDEX })
                }
                if (this.pages.length > 1) {
                    this.pages.splice(index, 1)
                }
                this.pages = [...this.pages]
            },
            async closePages(tabs) {
                for (const tab of tabs) {
                    await this.closePage(tab)
                }
            },
            async closeAllPages() {
                await router.push({ name: Route.INDEX })
                this.closePages(this.pages.filter((tab) => tab !== this.currentPage))
            },
            async reloadPage() {
                if (!this.currentPage || this.currentPage?.reloading) return
                this.currentPage.reloading = true
                await promiseTimeout(220)
                this.currentPage.reloading = false
            },
        },
        persist: {
            storage: 'local',
            userIsolate: true,
            version,
            saveOnlyChanged: true,
            excludes: [
                ...persistExcludesKeys,
                'vars',
                'multiTab',
                'pages',
                'Error',
                'fullTab',
                'transition',
                'hasSidebar',
                'hasTopbar',
                'hasBreadcrumb',
                'hasFooter',
                'floatFooter',
            ],
        },
    })
}