rustfs-console/components/sidebar.vue

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { RouterLink } from "vue-router";
import { useSidebarStore } from "~/store/sidebar";
import type { SiteConfig } from "~/types/config";

const { t } = useI18n();
const appConfig = useAppConfig();
const siteConfig = useNuxtApp().$siteConfig as unknown as SiteConfig;
const route = useRoute();
const sidebarStore = useSidebarStore();
const isCollapsed = computed(() => sidebarStore.isCollapsed);

const toggleSidebar = () => {
  sidebarStore.toggleSidebar();
};

const options = computed(() => {
  return appConfig.navs.map(
    (nav: {
      label: string;
      to?: string;
      type?: string;
      icon?: string;
      target?: string;
      children?: {
        label: string;
        to: string;
        icon?: string;
      }[];
    }) => {
      let item: {
        key: string;
        type?: string;
        label: () => string | VNode;
        icon?: () => VNode;
        children?: any[];
      } = {
        key: nav.label,
        label: () =>
          nav.to
            ? nav.target
              ? h(
                  "a",
                  {
                    href: nav.to,
                    target: "_blank",
                  },
                  { default: () => t(nav.label) }
                )
              : h(RouterLink, { to: nav.to }, { default: () => t(nav.label) })
            : t(nav.label),
        icon: nav.icon ? iconRender(nav.icon) : undefined,
        type: nav.type,
      };

      if (nav["children"]) {
        item.children = nav["children"].map((child) => {
          return {
            key: child.label,
            type: "item",
            label: () => h(RouterLink, { to: child.to }, { default: () => t(child.label) }),
            icon: child.icon ? iconRender(child.icon) : undefined,
          };
        });
      }

      return item;
    }
  );
});
</script>
<template>
  <n-layout-sider
    bordered
    class="min-h-full"
    collapse-mode="width"
    :collapsed-width="64"
    :width="240"
    :native-scrollbar="false"
    :collapsed="isCollapsed"
    v-if="route.path.startsWith('/auth') === false">
    <div class="flex flex-col h-screen overflow-hidden gap-2 relative">
      <div
        class="border-b dark:border-neutral-800 flex flex-wrap h-16 items-center p-4"
        :class="isCollapsed ? 'justify-center' : 'justify-between'">
        <div>
          <n-avatar v-if="isCollapsed" class="text-center text-2xl leading-none">
            {{ appConfig.name.substring(0, 1) }}
          </n-avatar>
          <h2 v-else class="text-center text-2xl flex">
            <img src="~/assets/logo.svg" class="max-w-28" alt="" />
            <span
              v-if="siteConfig.license.name && siteConfig.license.expired != 0"
              class="flex items-center justify-center text-[9px] leading-[9px] ml-1 p-1 bg-orange-600 text-white rounded rounded-bl-none">
              {{ t("PRO") }}
            </span>
            <span
              v-else
              class="flex items-center justify-center text-[9px] leading-[9px] ml-1 p-1 bg-green-600 text-white rounded rounded-bl-none">
              {{ t("OSS") }}
            </span>

            <span class="sr-only">{{ appConfig.name }}</span>
          </h2>
        </div>
        <div v-if="!isCollapsed" class="px-4 flex items-center -mr-4">
          <Icon name="ri:menu-fold-fill" class="cursor-pointer text-xl" @click="toggleSidebar" :title="t('Collapse')" />
        </div>
      </div>

      <div class="overflow-y-auto flex-1">
        <n-menu
          :indent="26"
          :root-indent="12"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="options"
          default-expand-all
          class="flex-1" />
      </div>

      <div v-if="isCollapsed" class="w-full flex items-center justify-center py-4">
        <Icon name="ri:menu-unfold-fill" class="cursor-pointer text-xl" @click="toggleSidebar" :title="t('Expand')" />
      </div>

      <div v-if="!isCollapsed" class="flex flex-col p-4 text-gray-500">
        <div class="flex items-center gap-2">
          <Icon name="ri-server-line" />
          <span>{{ t("Version") }}: {{ siteConfig.release.version }}</span>
        </div>
        <div class="flex items-center gap-2">
          <Icon name="ri-calendar-line" />
          <span>{{ t("Build Date") }}：{{ siteConfig.release.date }}</span>
        </div>
        <div class="flex items-center gap-2">
          <Icon name="ri-verified-badge-line" />
          <span>{{ t("License") }}：{{ siteConfig.license.name }}</span>
        </div>
      </div>

      <div class="border-t dark:border-neutral-800 p-2" :class="{ 'flex justify-between items-center': !isCollapsed }">
        <!-- 语言切换组件 -->
        <div class="px-2 py-2">
          <div v-if="isCollapsed" class="flex justify-center">
            <n-tooltip placement="right" trigger="hover">
              <template #trigger>
                <div @click="toggleSidebar" class="cursor-pointer">
                  <Icon :name="isCollapsed ? 'ri:translate-2' : 'ri:translate'" class="text-xl" />
                </div>
              </template>
              {{ t("Language") }}
            </n-tooltip>
          </div>
          <language-switcher v-else />
        </div>

        <!-- 主题切换组件 -->
        <div class="px-2 py-2">
          <div v-if="isCollapsed" class="flex justify-center">
            <n-tooltip placement="right" trigger="hover">
              <template #trigger>
                <div @click="toggleSidebar" class="cursor-pointer">
                  <Icon name="ri:contrast-2-line" class="text-xl" />
                </div>
              </template>
              {{ t("Theme") }}
            </n-tooltip>
          </div>
          <theme-switcher v-else />
        </div>
      </div>

      <div class="sticky bottom-0 left-0 right-0">
        <UserDropdown :isCollapsed="isCollapsed" />
      </div>
    </div>
  </n-layout-sider>
</template>