admin-sjzx/src/stores/config.ts

import { reactive } from 'vue'
import { defineStore } from 'pinia'
import { STORE_CONFIG } from '@/stores/constant/cacheKey'
import type { Layout } from '@/stores/interface'

export const useConfig = defineStore(
    'config',
    () => {
        const layout: Layout = reactive({
            /* 全局 */
            showDrawer: false,
            // 是否收缩布局(小屏终端)
            shrink: false,
            // 后台布局方式，可选值<Default|Classic|Streamline|Double>
            layoutMode: 'Classic',
            // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
            mainAnimation: 'slide-right',
            // 是否暗黑模式
            isDark: false,
            elementUiPrimary: ['#002B6A', '#002B6A'],
            tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
            tableHeaderColor: ['#111', '#fff'],
            tableCurrent: ['#F3F6F9', '#F3F6F9'],
            /* 侧边菜单 */
            // 侧边菜单背景色
            menuBackground: ['#002B6A', '#1d1e1f'],
            // 侧边菜单文字颜色
            menuColor: ['#FFFFFF', '#CFD3DC'],
            // 侧边菜单激活项背景色
            menuActiveBackground: ['#002255', '#1d1e1f'],
            // 侧边菜单激活项文字色
            menuActiveColor: ['#409eff', '#3375b9'],
            // 侧边菜单顶栏背景色
            menuTopBarBackground: ['#002B6A', '#1d1e1f'],
            // 侧边菜单宽度(展开时)，单位px
            menuWidth: 260,
            // 侧边菜单项默认图标
            menuDefaultIcon: 'fa fa-circle-o',
            // 是否水平折叠收起菜单
            menuCollapse: false,
            // 是否只保持一个子菜单的展开(手风琴)
            menuUniqueOpened: false,
            // 显示菜单栏顶栏(LOGO)
            menuShowTopBar: true,

            /* 顶栏 */
            // 顶栏文字色
            headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
            // // 顶栏激活项背景色
            headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'],
            // 顶栏激活项文字色
            headerBarTabActiveColor: ['#000000', '#409EFF'],
            // 顶栏背景色
            headerBarBackground: ['#002B6A', '#1d1e1f'],
            // 顶栏悬停时背景色
            headerBarHoverBackground: ['#f5f5f5', '#18222c']
        })

        const lang = reactive({
            // 默认语言，可选值<zh-cn|en>
            defaultLang: 'zh-cn',
            // 当在默认语言包找不到翻译时，继续在 fallbackLang 语言包内查找翻译
            fallbackLang: 'zh-cn',
            // 支持的语言列表
            langArray: [
                { name: 'zh-cn', value: '中文简体' },
                { name: 'en', value: 'English' }
            ]
        })

        function menuWidth() {
            if (layout.shrink) {
                return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
            }
            // 菜单是否折叠
            return layout.menuCollapse ? '64px' : layout.menuWidth + 'px'
        }

        function setLang(val: string) {
            lang.defaultLang = val
        }

        function onSetLayoutColor(data = layout.layoutMode) {
            // 切换布局时，如果是为默认配色方案，对菜单激活背景色重新赋值
            const tempValue = layout.isDark
                ? { idx: 1, color: '#1d1e1f', newColor: '#141414' }
                : { idx: 0, color: '#ffffff', newColor: '#f5f5f5' }
            if (
                data == 'Classic' &&
                layout.headerBarBackground[tempValue.idx] == tempValue.color &&
                layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.color
            ) {
                layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.newColor
            } else if (
                data == 'Default' &&
                layout.headerBarBackground[tempValue.idx] == tempValue.color &&
                layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.newColor
            ) {
                layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.color
            }
        }

        function setLayoutMode(data: string) {
            layout.layoutMode = data
            onSetLayoutColor(data)
        }

        const setLayout = (name: keyof Layout, value: any) => {
            layout[name] = value as never
        }

        const getColorVal = function (name: keyof Layout): string {
            const colors = layout[name] as string[]
            if (layout.isDark) {
                return colors[1]
            } else {
                return colors[0]
            }
        }

        return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
    },
    // () => {
    //    
    //     console.log('🚀 ~ subject:', subject)
    //     const layout: Layout = reactive({
    //         /* 全局 */
    //         showDrawer: false,
    //         // 是否收缩布局(小屏终端)
    //         shrink: false,
    //         // 后台布局方式，可选值<Default|Classic|Streamline|Double>
    //         layoutMode: 'Classic',
    //         // 后台主页面切换动画，可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
    //         mainAnimation: subject.mainAnimation,
    //         // 是否暗黑模式
    //         isDark: false,
    //         elementUiPrimary: JSON.parse(subject.elementUiPrimary),
    //         tableHeaderBackground: JSON.parse(subject.tableHeaderBackground),
    //         tableHeaderColor:JSON.parse(subject.tableHeaderColor),
    //         tableCurrent:  JSON.parse(subject.tableCurrent),
    //         /* 侧边菜单 */
    //         // 侧边菜单背景色
    //         menuBackground: JSON.parse(subject.menuBackground),
    //         // 侧边菜单文字颜色
    //         menuColor:JSON.parse(subject.menuColor),
    //         // 侧边菜单激活项背景色
    //         menuActiveBackground:JSON.parse(subject.menuActiveBackground),
    //         // 侧边菜单激活项文字色
    //         menuActiveColor:JSON.parse(subject.menuActiveColor),
    //         // 侧边菜单顶栏背景色
    //         menuTopBarBackground: JSON.parse(subject.menuTopBarBackground),
    //         // 侧边菜单宽度(展开时)，单位px
    //         menuWidth: 260,
    //         // 侧边菜单项默认图标
    //         menuDefaultIcon: 'fa fa-circle-o',
    //         // 是否水平折叠收起菜单
    //         menuCollapse: false,
    //         // 是否只保持一个子菜单的展开(手风琴)
    //         menuUniqueOpened: false,
    //         // 显示菜单栏顶栏(LOGO)
    //         menuShowTopBar: true,

    //         /* 顶栏 */
    //         // 顶栏文字色
    //         headerBarTabColor:JSON.parse(subject.headerBarTabColor),
    //         // // 顶栏激活项背景色
    //         headerBarTabActiveBackground: ['#ffffff', '#1d1e1f'],
    //         // 顶栏激活项文字色
    //         headerBarTabActiveColor: ['#000000', '#409EFF'],
    //         // 顶栏背景色
    //         headerBarBackground: JSON.parse(subject.headerBarBackground),
    //         // 顶栏悬停时背景色
    //         headerBarHoverBackground: ['#f5f5f5', '#18222c']
    //     })
    //     // console.log(123, window.localStorage.getItem('getTheme'))

    //     const lang = reactive({
    //         // 默认语言，可选值<zh-cn|en>
    //         defaultLang: 'zh-cn',
    //         // 当在默认语言包找不到翻译时，继续在 fallbackLang 语言包内查找翻译
    //         fallbackLang: 'zh-cn',
    //         // 支持的语言列表
    //         langArray: [
    //             { name: 'zh-cn', value: '中文简体' },
    //             { name: 'en', value: 'English' }
    //         ]
    //     })

    //     function menuWidth() {
    //         if (layout.shrink) {
    //             return layout.menuCollapse ? '0px' : layout.menuWidth + 'px'
    //         }
    //         // 菜单是否折叠
    //         return layout.menuCollapse ? '64px' : layout.menuWidth + 'px'
    //     }

    //     function setLang(val: string) {
    //         lang.defaultLang = val
    //     }

    //     function onSetLayoutColor(data = layout.layoutMode) {
    //         // 切换布局时，如果是为默认配色方案，对菜单激活背景色重新赋值
    //         const tempValue = layout.isDark
    //             ? { idx: 1, color: '#1d1e1f', newColor: '#141414' }
    //             : { idx: 0, color: '#ffffff', newColor: '#f5f5f5' }
    //         if (
    //             data == 'Classic' &&
    //             layout.headerBarBackground[tempValue.idx] == tempValue.color &&
    //             layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.color
    //         ) {
    //             layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.newColor
    //         } else if (
    //             data == 'Default' &&
    //             layout.headerBarBackground[tempValue.idx] == tempValue.color &&
    //             layout.headerBarTabActiveBackground[tempValue.idx] == tempValue.newColor
    //         ) {
    //             layout.headerBarTabActiveBackground[tempValue.idx] = tempValue.color
    //         }
    //     }

    //     function setLayoutMode(data: string) {
    //         layout.layoutMode = data
    //         onSetLayoutColor(data)
    //     }

    //     const setLayout = (name: keyof Layout, value: any) => {
    //         layout[name] = value as never
    //     }

    //     const getColorVal = function (name: keyof Layout): string {
    //         const colors = layout[name] as string[]
    //         if (layout.isDark) {
    //             return colors[1]
    //         } else {
    //             return colors[0]
    //         }
    //     }

    //     return { layout, lang, menuWidth, setLang, setLayoutMode, setLayout, getColorVal, onSetLayoutColor }
    // },
    {
        persist: {
            key: STORE_CONFIG
        }
    }
)