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

     1  <script lang="tsx">
     2  import {defineComponent, computed, ref} from 'vue'
     3  import { Collapse } from '@/components/Collapse'
     4  import { LocaleDropdown } from '@/components/LocaleDropdown'
     5  import { SizeDropdown } from '@/components/SizeDropdown'
     6  import { UserInfo } from '@/components/UserInfo'
     7  import { Screenfull } from '@/components/Screenfull'
     8  import { GateToggle } from '@/components/Gate'
     9  import { InstallPWA } from '@/components/InstallPWA'
    10  import { NetworkStatus } from '@/components/NetworkStatus'
    11  import { TerminalToggle } from '@/components/Terminal'
    12  import { Breadcrumb } from '@/components/Breadcrumb'
    13  import { useAppStore } from '@/store/modules/app'
    14  import { useDesign } from '@/hooks/web/useDesign'
    15  
    16  const { getPrefixCls, variables } = useDesign()
    17  const prefixCls = getPrefixCls('tool-header')
    18  const appStore = useAppStore()
    19  
    20  const breadcrumb = computed(() => appStore.getBreadcrumb)
    21  const hamburger = computed(() => appStore.getHamburger)
    22  const screenfull = computed(() => appStore.getScreenfull)
    23  const serverId = computed(() => appStore.getServerId)
    24  const size = computed(() => appStore.getSize)
    25  const layout = computed(() => appStore.getLayout)
    26  const locale = computed(() => appStore.getLocale)
    27  // const standalone = computed(() => appStore.getStandalone)
    28  
    29  // const showInstallMenu = ref();
    30  // window.addEventListener("beforeinstallprompt", (e) => {
    31  //   e.preventDefault();
    32  //   showInstallMenu.value = true;
    33  // });
    34  //
    35  // const appInstalled = ref();
    36  // window.addEventListener("appinstalled", () => {
    37  //   appInstalled.value = true
    38  // });
    39  
    40  export default defineComponent({
    41    name: 'ToolHeader',
    42    setup() {
    43      return () => (
    44        <div
    45          id={`${variables.namespace}-tool-header`}
    46          class={[
    47            prefixCls,
    48            'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
    49            'dark:bg-[var(--el-bg-color)]'
    50          ]}
    51        >
    52          {layout.value !== 'top' ? (
    53            <div class="h-full flex items-center">
    54              {hamburger.value && layout.value !== 'cutMenu' ? (
    55                <Collapse class="hover-trigger" color="var(--top-header-text-color)"></Collapse>
    56              ) : undefined}
    57              {breadcrumb.value ? <Breadcrumb class="<md:hidden"></Breadcrumb> : undefined}
    58            </div>
    59          ) : undefined}
    60          <div class="h-full flex items-center">
    61              <TerminalToggle class="hover-trigger" color="var(--top-header-text-color)"></TerminalToggle>
    62            {serverId.value ? (
    63              <GateToggle class="hover-trigger" color="var(--top-header-text-color)"></GateToggle>
    64            ) : undefined}
    65            {screenfull.value ? (
    66              <Screenfull class="hover-trigger" color="var(--top-header-text-color)"></Screenfull>
    67            ) : undefined}
    68            <NetworkStatus class="hover-trigger" color="var(--top-header-text-color)"></NetworkStatus>
    69            {size.value ? (
    70              <SizeDropdown class="hover-trigger" color="var(--top-header-text-color)"></SizeDropdown>
    71            ) : undefined}
    72            {locale.value ? (
    73              <LocaleDropdown
    74                class="hover-trigger"
    75                color="var(--top-header-text-color)"
    76              ></LocaleDropdown>
    77            ) : undefined}
    78            <UserInfo class="hover-trigger"></UserInfo>
    79          </div>
    80        </div>
    81      )
    82    }
    83  })
    84  </script>
    85  
    86  <!--  {!standalone.value && showInstallMenu.value && !appInstalled.value ? (
    87              <InstallPWA class="hover-trigger" color="var(--top-header-text-color)"></InstallPWA>
    88            ) : undefined}-->
    89  
    90  <style lang="less" scoped>
    91  @prefix-cls: ~'@{namespace}-tool-header';
    92  
    93  .@{prefix-cls} {
    94    transition: left var(--transition-time-02);
    95  }
    96  </style>