smartai2dian0/src/views/common/Header.vue

<template>
  <div class="header">
    <div class="header-left">
      <img class="header-logo-img" :key="logo_key" src="/logo.png" alt="SmartAI Logo" />

      <span>{{ platform_name }}</span>
    </div>

    <div class="header-center">
      <a-space>
        <div v-for="item in nav_list" :key="item.to">
          <NavItem :label="$t(item.label)" :to="item.to" :icon="item.icon" />
        </div>

        <PermissionDropdown
          :dropdown_list="dropdown_list"
          :label="$t('header.权限管理')"
          :permission_icon="permission_icon"
        />

        <!-- <NavItem label="临时: RagFlow Chat" to="/ragchat" icon_name="header-zhinengti" /> -->
      </a-space>
    </div>

    <div class="header-right">
      <a-space>
        <!-- <BtnSearch class="header-right-item" /> -->

        <BtnLanguage class="header-right-item" />

        <BtnTheme class="header-right-item" />

        <BtnFullScreen class="header-right-item" @click="handleFullScreen" />

        <!-- <BtnSettings class="header-right-item" @click="handleNameChange" /> -->

        <BtnCurrentUser />
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { setI18nLanguage } from '../../i18n';
import { getCurrentTheme, setThemeDark, setThemeLight } from '../../base/theme';
import { requestScreenFull, toggleScreenFull } from '../../3rd-libs/screenfull';

import { useCurrentUserStore } from '../../base/store/use-current-user';
import { localST_RoutesList } from '../../base/storage';

import { usePlatformInformation } from '../../base/store/use-platform-information';

import NavItem from './NavItem.vue';

import PermissionDropdown from './PermissionDropdown.vue';

import BtnSearch from './header-btns/BtnSearch.vue';
import BtnLanguage from './header-btns/BtnLanguage.vue';
import BtnTheme from './header-btns/BtnTheme.vue';
import BtnFullScreen from './header-btns/BtnFullScreen.vue';
import BtnSettings from './header-btns/BtnSettings.vue';
import BtnCurrentUser from './header-btns/BtnCurrentUser.vue';

const platformInformation = usePlatformInformation();

const nav_list = ref([]);
const dropdown_list = ref([]);
const permission_icon = ref('IconLock');
const platform_name = computed(() => platformInformation.platform_name);
const logo_key = computed(() => platformInformation.logo_key);
/**
 * 请求网页全屏
 */
const handleFullScreen = () => {
  toggleScreenFull();
};

const handleNameChange = () => {
  // const nm = Math.random() * 99989 + '';
  // currentUser.updateName(nm);
};
const formatMenuItems = (list) => {
  if (Array.isArray(list)) {
    return list
      .map((item) => {
        // 过滤掉meta.title为'权限管理'
        if (item.meta.title === '权限管理') {
          return null;
        }

        if (item.resourceType.id && item.resourceType.id == '0') {
          // 只处理菜单项
          return {
            label: `header.${item.meta.title}`,
            to: item.path,
            icon: item.meta.icon || 'IconRobot' // 假设icon_name是根据name字段来命名的
          };
        }
      })
      .filter((item) => {
        return item !== null && item !== undefined;
      }); // 过滤掉null值
  } else {
    return [];
  }
};
const formatPermissionItems = (permissionList) => {
  return permissionList.children
    .map((item) => {
      return {
        label: item.meta.title,
        path: item.path,
        icon: item.meta.icon || 'IconRobot' //
      };
    })
    .filter((item) => item !== null); // 过滤掉null值
};
onMounted(() => {
  // 延迟渲染菜单，防止菜单渲染时还没获取到权限信息
  const routesList = JSON.parse(localST_RoutesList.getItem());
  if (routesList && Array.isArray(routesList)) {
    const navs = formatMenuItems(routesList);

    nav_list.value = navs;
    const permissionList = routesList.find((item) => item.meta.title === '权限管理');
    dropdown_list.value = permissionList ? formatPermissionItems(permissionList) : [];
    permission_icon.value = permissionList ? permissionList.meta.icon : 'IconLock';
  }
});
</script>

<style lang="css" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 60px;
  background-color: var(--color-bg-1);
}

.header-left {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--color-text-1);
  font-size: 18px;
  font-weight: bold;
}

.header-logo-img {
  width: 36px;
  margin-right: 5px;
}

.header-center {
  flex-grow: 1;

  padding-left: 15px;
  padding-right: 15px;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
}

.header-right-item {
  color: var(--color-text-2);
  width: 30px;
  height: 30px;
  border-radius: 20px;
  border: solid 1px var(--color-border-2);

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;
}
</style>