smartsearch/vue/src/layout/header/index.vue

<template>
  <Layout.Header :style="headerStyle" class="layout-header">
    <Space :size="30">
      <img style="height: 52px;" src="~@/assets/images/logo-login.png" alt=""/>
      <span style="font-size: 30px;margin-left:-10px;">华北油田智能检索</span>
    </Space>
    <Space :size="20">
      <!--      <Search />-->
      <Tooltip title="修改密码" placement="bottom" v-if="isDev">
        <LockOutlined @click="updatePassword()"/>
        <UpdatePassword ref="updatePasswordRef"></UpdatePassword>
      </Tooltip>
      <FullScreen/>
      <Tooltip title="退出系统" placement="bottom" v-if="isDev">
        <PoweroffOutlined @click.prevent="doLogout"/>
      </Tooltip>
      <LocalePicker/>

      <!--
      <Dropdown placement="bottomRight">
        <Avatar :src="userInfo.headImg" :alt="userInfo.name">{{ userInfo.name }}</Avatar>
        <template #overlay>
          <Menu>
            <Menu.Item @click="$router.push({ name: 'account-about' })">
              {{ $t('routes.account.about') }}
            </Menu.Item>
            <Menu.Item @click="$router.push({ name: 'account-settings' })">
              {{ $t('routes.account.settings') }}
            </Menu.Item>
            <Menu.Divider />
            <Menu.Item>
              <div @click.prevent="doLogout">
                <poweroff-outlined /> {{ $t('layout.header.dropdownItemLoginOut') }}
              </div>
            </Menu.Item>
          </Menu>
        </template>
      </Dropdown> -->
      <!--      <ProjectSetting />-->
    </Space>
  </Layout.Header>
</template>

<script lang="tsx" setup>
import {computed, nextTick, type CSSProperties, ref, onMounted} from 'vue';
import {useRouter, useRoute} from 'vue-router';
import {
  QuestionCircleOutlined,
  PoweroffOutlined,
  LockOutlined,
  ExportOutlined,
} from '@ant-design/icons-vue';
import {
  message,
  Modal,
  Dropdown,
  Menu,
  Space,
  Avatar,
  Tooltip,
  type MenuTheme,
} from 'ant-design-vue';
import {Search, FullScreen, ProjectSetting} from './components/';
import {useUserStore} from '@/store/modules/user';
import {useKeepAliveStore} from '@/store/modules/keepAlive';
/*import {useLockscreenStore} from '@/store/modules/lockscreen';*/
import {LOGIN_NAME} from '@/router/constant';
import {useThemeStore} from '@/store/modules/projectConfig';
import UpdatePassword from'@/views/system/users/updatePassword.vue';
import {getConfig} from "@/utils/config";

defineProps({
  collapsed: {
    type: Boolean,
  },
  theme: {
    type: String as PropType<MenuTheme>,
  },
});
const emit = defineEmits(['update:collapsed']);
const userStore = useUserStore();
const themeStore = useThemeStore();
/*const lockscreenStore = useLockscreenStore();*/
const keepAliveStore = useKeepAliveStore();

const router = useRouter();
const route = useRoute();
const userInfo = computed(() => userStore.userInfo);
const headerStyle = computed<CSSProperties>(() => {
  const {navTheme, layout} = themeStore;
  const isDark = navTheme === 'dark' && layout === 'topmenu';
  return {
    backgroundColor: navTheme === 'realDark' || isDark ? '' : 'rgba(255, 255, 255, 0.85)',
    color: isDark ? 'rgba(255, 255, 255, 0.85)' : '',
  };
});

const updatePasswordRef = ref();

const isDev = ref(false);

// 退出登录
const doLogout = () => {
  Modal.confirm({
    title: '您确定要退出登录吗？',
    icon: <QuestionCircleOutlined/>,
    centered: true,
    onOk: async () => {
      // 如果不是rootadmin，则退出登录
      await userStore.logout();

      keepAliveStore.clear();
      // 移除标签页
      localStorage.clear();
      message.success('成功退出登录');
      await nextTick();
      router.replace({
        name: LOGIN_NAME,
        query: {
          /*redirect: route.fullPath,*/
        },
      });
    },
  });
};

const updatePassword = () => {
  updatePasswordRef.value.show(userInfo.value.userId,userInfo.value.userName,userInfo.value.loginId);
};

onMounted(() => {
  getConfig().then((res: any) => {
    isDev.value = res.isDev;
  }, () => {
    isDev.value = true;
  })
})

</script>

<style lang="less" scoped>
.layout-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  height: @header-height;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  background-color: #1890ff !important;
  color: white;

  * {
    cursor: pointer;
  }
}
</style>