github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/store/modules/app.ts (about)

     1  import { defineStore } from 'pinia'
     2  import { store } from '../index'
     3  import { setCssVar, humpToUnderline } from '@/utils'
     4  import { ElMessage } from 'element-plus'
     5  import { ElementPlusSize } from '@/types/elementPlus'
     6  import { useCache } from '@/hooks/web/useCache'
     7  import { LayoutType } from '@/types/layout'
     8  import { ThemeTypes } from '@/types/theme'
     9  import {ApiCurrentUser} from "@/api/stub";
    10  import stream from "@/api/stream";
    11  import pushService from "@/api/pushService";
    12  
    13  const { wsCache } = useCache()
    14  
    15  interface AppState {
    16    token: string;
    17    user: ApiCurrentUser;
    18    avatar: string;
    19    breadcrumb: boolean
    20    breadcrumbIcon: boolean
    21    collapse: boolean
    22    uniqueOpened: boolean
    23    hamburger: boolean
    24    screenfull: boolean
    25    size: boolean
    26    locale: boolean
    27    tagsView: boolean
    28    tagsViewIcon: boolean
    29    logo: boolean
    30    fixedHeader: boolean
    31    greyMode: boolean
    32    systemTheme: boolean
    33    dynamicRouter: boolean
    34    pageLoading: boolean
    35    layout: LayoutType
    36    title: string
    37    isDark: boolean
    38    currentSize: ElementPlusSize
    39    sizeMap: ElementPlusSize[]
    40    mobile: boolean
    41    footer: boolean
    42    theme: ThemeTypes
    43    fixedMenu: boolean
    44    terminal: boolean
    45    maxZIndex: number
    46    serverId: string
    47    lastColors: string[]
    48    onlineStatus: 'online' | 'offline'
    49    standalone: boolean
    50    activeWindow: string
    51  }
    52  
    53  export const useAppStore = defineStore('app', {
    54    state: (): AppState => {
    55      const mqStandAlone = '(display-mode: standalone)'
    56      const standalone = navigator.standalone || window.matchMedia(mqStandAlone).matches
    57      return {
    58        token: wsCache.get("accessToken") as string || '',
    59        user: wsCache.get("currentUser") as ApiCurrentUser,
    60        avatar: "",
    61        sizeMap: ['default', 'large', 'small'],
    62        mobile: false, // 是否是移动端
    63        title: import.meta.env.VITE_APP_TITLE, // 标题
    64        pageLoading: false, // 路由跳转loading
    65  
    66        breadcrumb: wsCache.get('breadcrumb') || true, // 面包屑
    67        breadcrumbIcon: wsCache.get('breadcrumbIcon') || true, // 面包屑图标
    68        collapse: wsCache.get('collapse') || true, // 折叠菜单
    69        uniqueOpened: false, // 是否只保持一个子菜单的展开
    70        hamburger: true, // 折叠图标
    71        screenfull: true, // 全屏图标
    72        size: true, // 尺寸图标
    73        locale: true, // 多语言图标
    74        tagsView: wsCache.get('tagsView') || true, // 标签页
    75        tagsViewIcon: wsCache.get('tagsViewIcon') || false, // 是否显示标签图标
    76        logo: false, // logo
    77        fixedHeader: false, // 固定toolheader
    78        footer: false, // 显示页脚
    79        greyMode: wsCache.get('greyMode') || false, // 是否开始灰色模式，用于特殊悼念日
    80        systemTheme: wsCache.get('systemTheme') || true,
    81        dynamicRouter: wsCache.get('dynamicRouter') || false, // 是否动态路由
    82        fixedMenu: wsCache.get('fixedMenu') || true, // 是否固定菜单
    83        terminal: wsCache.get('terminal') || false,
    84        maxZIndex: 10,
    85        serverId: wsCache.get('serverId') || '',
    86        layout: wsCache.get('layout') || 'classic', // layout布局
    87        isDark: wsCache.get('isDark') || false, // 是否是暗黑模式
    88        currentSize: wsCache.get('currentSize') || 'small', // 组件尺寸
    89        lastColors: wsCache.get('lastColors') || [],
    90        onlineStatus: 'offline',
    91        standalone: standalone,
    92        activeWindow: '',
    93        theme: wsCache.get('theme') || {
    94          // 主题色
    95          elColorPrimary: '#409eff',
    96          // 左侧菜单边框颜色
    97          leftMenuBorderColor: 'inherit',
    98          // 左侧菜单背景颜色
    99          leftMenuBgColor: '#001529',
   100          // 左侧菜单浅色背景颜色
   101          leftMenuBgLightColor: '#0f2438',
   102          // 左侧菜单选中背景颜色
   103          leftMenuBgActiveColor: 'var(--el-color-primary)',
   104          // 左侧菜单收起选中背景颜色
   105          leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
   106          // 左侧菜单字体颜色
   107          leftMenuTextColor: '#bfcbd9',
   108          // 左侧菜单选中字体颜色
   109          leftMenuTextActiveColor: '#fff',
   110          // logo字体颜色
   111          logoTitleTextColor: '#fff',
   112          // logo边框颜色
   113          logoBorderColor: 'inherit',
   114          // 头部背景颜色
   115          topHeaderBgColor: '#fff',
   116          // 头部字体颜色
   117          topHeaderTextColor: 'inherit',
   118          // 头部悬停颜色
   119          topHeaderHoverColor: '#f6f6f6',
   120          // 头部边框颜色
   121          topToolBorderColor: '#eee'
   122        }
   123      }
   124    },
   125    getters: {
   126      getUser() {
   127        return this.user;
   128      },
   129      getToken() {
   130        return this.token;
   131      },
   132      getAvatar() {
   133        return wsCache.get("avatar") || this.avatar;
   134      },
   135      getBreadcrumb(): boolean {
   136        return this.breadcrumb
   137      },
   138      getBreadcrumbIcon(): boolean {
   139        return this.breadcrumbIcon
   140      },
   141      getCollapse(): boolean {
   142        return this.collapse
   143      },
   144      getUniqueOpened(): boolean {
   145        return this.uniqueOpened
   146      },
   147      getHamburger(): boolean {
   148        return this.hamburger
   149      },
   150      getScreenfull(): boolean {
   151        return this.screenfull
   152      },
   153      getSize(): boolean {
   154        return this.size
   155      },
   156      getLocale(): boolean {
   157        return this.locale
   158      },
   159      getTagsView(): boolean {
   160        return this.tagsView
   161      },
   162      getTagsViewIcon(): boolean {
   163        return this.tagsViewIcon
   164      },
   165      getLogo(): boolean {
   166        return this.logo
   167      },
   168      getFixedHeader(): boolean {
   169        return this.fixedHeader
   170      },
   171      getGreyMode(): boolean {
   172        return this.greyMode
   173      },
   174      getSystemTheme(): boolean {
   175        return this.systemTheme
   176      },
   177      getDynamicRouter(): boolean {
   178        return this.dynamicRouter
   179      },
   180      getFixedMenu(): boolean {
   181        return this.fixedMenu
   182      },
   183      getTerminal(): boolean {
   184        return this.terminal
   185      },
   186      getPageLoading(): boolean {
   187        return this.pageLoading
   188      },
   189      getLayout(): LayoutType {
   190        return this.layout
   191      },
   192      getTitle(): string {
   193        return this.title
   194      },
   195      getIsDark(): boolean {
   196        return this.isDark
   197      },
   198      getCurrentSize(): ElementPlusSize {
   199        return this.currentSize
   200      },
   201      getSizeMap(): ElementPlusSize[] {
   202        return this.sizeMap
   203      },
   204      getMobile(): boolean {
   205        return this.mobile
   206      },
   207      getTheme(): ThemeTypes {
   208        return this.theme
   209      },
   210      getFooter(): boolean {
   211        return this.footer
   212      },
   213      getServerId(): string {
   214        return this.serverId
   215      },
   216      getIsGate(): boolean {
   217        return window?.app_settings?.run_mode == 'gate'
   218      },
   219      getLastColors(): string[] {
   220        return this.lastColors
   221      },
   222      getOnlineStatus(): 'online' | 'offline' {
   223        return this.onlineStatus
   224      },
   225      getStandalone(): boolean {
   226        return this.standalone
   227      },
   228      getActiveWindow(): string {
   229        return this.activeWindow
   230      },
   231    },
   232    actions: {
   233      SetUser(user: ApiCurrentUser) {
   234        wsCache.set("currentUser", user)
   235        this.user = user;
   236      },
   237      SetAvatar(avatar: string) {
   238        wsCache.set("avatar", avatar)
   239        this.avatar = avatar;
   240      },
   241      SetToken(token: string) {
   242        wsCache.set("accessToken", token)
   243        this.token = token;
   244  
   245        pushService.shutdown()
   246        stream.disconnect()
   247  
   248        if (token) {
   249          // ws
   250          stream.connect(import.meta.env.VITE_API_BASEPATH as string || window.location.origin, token);
   251          // push
   252          pushService.start()
   253        }
   254      },
   255      RemoveToken() {
   256        stream.disconnect();
   257        pushService.shutdown();
   258        wsCache.delete('accessToken')
   259        wsCache.delete('currentUser')
   260        wsCache.delete('avatar')
   261        this.user = null;
   262        this.token = null;
   263      },
   264      setBreadcrumb(breadcrumb: boolean) {
   265        wsCache.set('breadcrumb', breadcrumb)
   266        this.breadcrumb = breadcrumb
   267      },
   268      setBreadcrumbIcon(breadcrumbIcon: boolean) {
   269        wsCache.set('breadcrumbIcon', breadcrumbIcon)
   270        this.breadcrumbIcon = breadcrumbIcon
   271      },
   272      setCollapse(collapse: boolean) {
   273        wsCache.set('collapse', collapse)
   274        this.collapse = collapse
   275      },
   276      setUniqueOpened(uniqueOpened: boolean) {
   277        this.uniqueOpened = uniqueOpened
   278      },
   279      setHamburger(hamburger: boolean) {
   280        this.hamburger = hamburger
   281      },
   282      setScreenfull(screenfull: boolean) {
   283        this.screenfull = screenfull
   284      },
   285      setSize(size: boolean) {
   286        this.size = size
   287      },
   288      setLocale(locale: boolean) {
   289        this.locale = locale
   290      },
   291      setTagsView(tagsView: boolean) {
   292        wsCache.set('tagsView', tagsView)
   293        this.tagsView = tagsView
   294      },
   295      setTagsViewIcon(tagsViewIcon: boolean) {
   296        wsCache.set('tagsViewIcon', tagsViewIcon)
   297        this.tagsViewIcon = tagsViewIcon
   298      },
   299      setLogo(logo: boolean) {
   300        this.logo = logo
   301      },
   302      setFixedHeader(fixedHeader: boolean) {
   303        this.fixedHeader = fixedHeader
   304      },
   305      setGreyMode(greyMode: boolean) {
   306        wsCache.set('greyMode', greyMode)
   307        this.greyMode = greyMode
   308      },
   309      setSystemTheme(systemTheme: boolean) {
   310        wsCache.set('systemTheme', systemTheme)
   311        this.systemTheme = systemTheme
   312      },
   313      setDynamicRouter(dynamicRouter: boolean) {
   314        wsCache.set('dynamicRouter', dynamicRouter)
   315        this.dynamicRouter = dynamicRouter
   316      },
   317      setFixedMenu(fixedMenu: boolean) {
   318        wsCache.set('fixedMenu', fixedMenu)
   319        this.fixedMenu = fixedMenu
   320      },
   321      setTerminal(terminal: boolean) {
   322        wsCache.set('terminal', terminal)
   323        this.terminal = terminal
   324      },
   325      setPageLoading(pageLoading: boolean) {
   326        this.pageLoading = pageLoading
   327      },
   328      setLayout(layout: LayoutType) {
   329        if (this.mobile && layout !== 'classic') {
   330          ElMessage.warning('移动端模式下不支持切换其他布局')
   331          return
   332        }
   333        this.layout = layout
   334        wsCache.set('layout', this.layout)
   335      },
   336      setTitle(title: string) {
   337        this.title = title
   338      },
   339      setIsDark(isDark: boolean) {
   340        this.isDark = isDark
   341        if (this.isDark) {
   342          document.documentElement.classList.add('dark')
   343          document.documentElement.classList.remove('light')
   344        } else {
   345          document.documentElement.classList.add('light')
   346          document.documentElement.classList.remove('dark')
   347        }
   348        wsCache.set('isDark', this.isDark)
   349      },
   350      setCurrentSize(currentSize: ElementPlusSize) {
   351        this.currentSize = currentSize
   352        wsCache.set('currentSize', this.currentSize)
   353      },
   354      setMobile(mobile: boolean) {
   355        this.mobile = mobile
   356      },
   357      setTheme(theme: ThemeTypes) {
   358        this.theme = Object.assign(this.theme, theme)
   359        wsCache.set('theme', this.theme)
   360      },
   361      setCssVarTheme() {
   362        for (const key in this.theme) {
   363          setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
   364        }
   365      },
   366      setFooter(footer: boolean) {
   367        this.footer = footer
   368      },
   369      setServerId(id: string) {
   370        this.serverId = id
   371        wsCache.set('serverId', this.serverId)
   372      },
   373      getMaxZIndex(): number {
   374        return ++this.maxZIndex
   375      },
   376      setLastColors(list: string[]) {
   377        this.lastColors = list
   378        wsCache.set('lastColors', this.lastColors)
   379      },
   380      setOnlineStatus(status: string) {
   381        this.onlineStatus = status
   382      },
   383      setActiveWindow(name: string) {
   384        this.activeWindow = name
   385      }
   386    }
   387  })
   388  
   389  export const useAppStoreWithOut = () => {
   390    return useAppStore(store)
   391  }