it-tools/src/layouts/base.layout.vue

<script lang="ts" setup>
import { NIcon, useThemeVars } from 'naive-ui';

import { RouterLink } from 'vue-router';
import { Heart, Home2, Menu2 } from '@vicons/tabler';

import { storeToRefs } from 'pinia';
import HeroGradient from '../assets/hero-gradient.svg?component';
import MenuLayout from '../components/MenuLayout.vue';
import NavbarButtons from '../components/NavbarButtons.vue';
import CLink from '@/ui/c-link/c-link.vue';
import CTooltip from '@/ui/c-tooltip/c-tooltip.vue';
import CButton from '@/ui/c-button/c-button.vue';
import CommandPalette from '@/modules/command-palette/command-palette.vue';
import LocaleSelector from '@/modules/i18n/components/locale-selector.vue';
import { useStyleStore } from '@/stores/style.store';
import { config } from '@/config';
import type { ToolCategory } from '@/tools/tools.types';
import { useToolStore } from '@/tools/tools.store';
import { useTracker } from '@/modules/tracker/tracker.services';
import CollapsibleToolMenu from '@/components/CollapsibleToolMenu.vue';

const themeVars = useThemeVars();
const styleStore = useStyleStore();
const version = config.app.version;
const commitSha = config.app.lastCommitSha.slice(0, 7);

const { tracker } = useTracker();
const { t } = useI18n();

const toolStore = useToolStore();
const { favoriteTools, toolsByCategory } = storeToRefs(toolStore);

const tools = computed<ToolCategory[]>(() => [
  ...(favoriteTools.value.length > 0 ? [{ name: t('tools.categories.favorite-tools'), components: favoriteTools.value }] : []),
  ...toolsByCategory.value,
]);
</script>

<template>
  <MenuLayout class="menu-layout" :class="{ isSmallScreen: styleStore.isSmallScreen }">
    <template #sider>
      <RouterLink to="/" class="hero-wrapper">
        <h2 class='text-center logo'>极客日志</h2>
<!--        <div class="text-wrapper">-->
<!--          <div class="title">-->
<!--            IT - TOOLS-->
<!--          </div>-->
<!--          <div class="divider" />-->
<!--          <div class="subtitle">-->
<!--            {{ $t('home.subtitle') }}-->
<!--          </div>-->
<!--        </div>-->
      </RouterLink>

      <div class="sider-content">
        <div v-if="styleStore.isSmallScreen" flex flex-col items-center>
          <LocaleSelector w="90%" />

          <div flex justify-center>
            <NavbarButtons />
          </div>
        </div>

        <CollapsibleToolMenu :tools-by-category="tools" />

        <div class="footer">
          <div>
            IT-Tools

            <CLink target="_blank" rel="noopener" :href="`https://github.com/zeeklog/it-tools/tree/v${version}`">
              v{{ version }}
            </CLink>

            <template v-if="commitSha && commitSha.length > 0">
              -
              <CLink
                target="_blank"
                rel="noopener"
                type="primary"
                :href="`https://github.com/zeeklog/it-tools/tree/${commitSha}`"
              >
                {{ commitSha }}
              </CLink>
            </template>
          </div>
          <div>
            © {{ new Date().getFullYear() }}
            <CLink target="_blank" rel="noopener" href="https://github.com/zeeklog">
              Ne0inHK
            </CLink>
          </div>
        </div>
      </div>
    </template>

    <template #content>
      <div flex items-center justify-center gap-2>
<!--        <CButton-->
<!--          circle-->
<!--          variant="text"-->
<!--          :aria-label="$t('home.toggleMenu')"-->
<!--          @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"-->
<!--        >-->
<!--          <NIcon size="25" :component="Menu2" />-->
<!--        </CButton>-->

        <CTooltip :tooltip="$t('home.home')" position="bottom">
          <CButton to="/" circle variant="text" :aria-label="$t('home.home')">
            <NIcon size="25" :component="Home2" />
          </CButton>
        </CTooltip>

        <CTooltip :tooltip="$t('home.uiLib')" position="bottom">
          <CButton v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
            <icon-mdi:brush-variant text-20px />
          </CButton>
        </CTooltip>

        <CommandPalette />

        <LocaleSelector v-if="!styleStore.isSmallScreen" />

        <div>
          <NavbarButtons v-if="!styleStore.isSmallScreen" />
        </div>

<!--        <CTooltip position="bottom" :tooltip="$t('home.support')">-->
<!--          <CButton-->
<!--            round-->
<!--            href="https://www.buymeacoffee.com/cthmsst"-->
<!--            rel="noopener"-->
<!--            target="_blank"-->
<!--            class="support-button"-->
<!--            :bordered="false"-->
<!--            @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"-->
<!--          >-->
<!--            {{ $t('home.buyMeACoffee') }}-->
<!--            <NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />-->
<!--          </CButton>-->
<!--        </CTooltip>-->
      </div>
      <slot />
    </template>
  </MenuLayout>
</template>

<style lang="less" scoped>
.logo {
  text-decoration: unset;
  color: #000000;
}
// ::v-deep(.n-layout-scroll-container) {
//     @percent: 4%;
//     @position: 25px;
//     @size: 50px;
//     @color: #eeeeee25;
//     background-image: radial-gradient(@color @percent, transparent @percent),
//         radial-gradient(@color @percent, transparent @percent);
//     background-position: 0 0, @position @position;
//     background-size: @size @size;
// }

.support-button {
  background: rgb(37, 99, 108);
  background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
  color: #fff !important;
  transition: padding ease 0.2s !important;

  &:hover {
    color: #fff;
    padding-left: 30px;
    padding-right: 30px;
  }
}

.footer {
  text-align: center;
  color: #838587;
  margin-top: 20px;
  padding: 20px 0;
}

.sider-content {
  //padding-top: 3em;
  padding-bottom: 200px;
}

.hero-wrapper {
  //position: absolute;
  display: block;
  //left: 0;
  width: 100%;
  z-index: 10;
  overflow: hidden;

  .gradient {
    margin-top: -65px;
  }

  .text-wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    top: 16px;
    color: #fff;

    .title {
      font-size: 25px;
      font-weight: 600;
    }

    .divider {
      width: 50px;
      height: 2px;
      border-radius: 4px;
      background-color: v-bind('themeVars.primaryColor');
      margin: 0 auto 5px;
    }

    .subtitle {
      font-size: 16px;
    }
  }
}
</style>