github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/App.vue (about)

     1  <script setup lang="ts">
     2  import {computed} from 'vue'
     3  import { useAppStore } from '@/store/modules/app'
     4  import { ConfigGlobal } from '@/components/ConfigGlobal'
     5  import { isDark } from '@/utils/is'
     6  import { useDesign } from '@/hooks/web/useDesign'
     7  import { useCache } from '@/hooks/web/useCache'
     8  import {ReloadPrompt} from '@/components/ReloadPrompt'
     9  import stream from "@/api/stream";
    10  import pushService from "@/api/pushService";
    11  
    12  const { getPrefixCls } = useDesign()
    13  
    14  const prefixCls = getPrefixCls('app')
    15  
    16  const appStore = useAppStore()
    17  
    18  const currentSize = computed(() => appStore.getCurrentSize)
    19  
    20  const greyMode = computed(() => appStore.getGreyMode)
    21  
    22  const { wsCache } = useCache()
    23  
    24  const accessToken = wsCache.get("accessToken") as string || '';
    25  if (accessToken) {
    26    // ws
    27    stream.connect(import.meta.env.VITE_API_BASEPATH as string || window.location.origin, accessToken);
    28    // push
    29    pushService.start()
    30  }
    31  
    32  // 根据浏览器当前主题设置系统主题色
    33  const setDefaultTheme = () => {
    34    if (wsCache.get('isDark') !== null) {
    35      appStore.setIsDark(wsCache.get('isDark'))
    36      return
    37    }
    38    const isDarkTheme = isDark()
    39    appStore.setIsDark(isDarkTheme)
    40  }
    41  
    42  const consoleBanner = () => {
    43    var i, url;
    44    if (window.console && 'undefined' !== typeof console.log) {
    45      url = 'https://github.com/e154/smart-home';
    46      i = `Software package for automation - ${url}`;
    47      console.log('%c Smart home %c Copyright © 2014-%s', 'font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:62px;color:#303E4D;-webkit-text-fill-color:#303E4D;-webkit-text-stroke: 1px #303E4D;', 'font-size:12px;color:#a9a9a9;', (new Date()).getFullYear());
    48      return console.log('%c ' + i, 'color:#333;');
    49    }
    50  }
    51  
    52  setDefaultTheme()
    53  consoleBanner()
    54  </script>
    55  
    56  <template>
    57    <ReloadPrompt />
    58    <ConfigGlobal :size="currentSize">
    59      <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
    60    </ConfigGlobal>
    61  </template>
    62  
    63  <style lang="less">
    64  @prefix-cls: ~'@{namespace}-app';
    65  
    66  .size {
    67    width: 100%;
    68    height: 100%;
    69  }
    70  
    71  html,
    72  body {
    73    padding: 0 !important;
    74    margin: 0;
    75    overflow: hidden;
    76    .size;
    77  
    78    #app {
    79      .size;
    80    }
    81  }
    82  
    83  .@{prefix-cls}-grey-mode {
    84    filter: grayscale(100%);
    85  }
    86  </style>