ocr-web/src/layout/components/Header/index.vue

<script lang="ts">
import { useDialog, useMessage } from 'naive-ui'
import {
  defineComponent,
  inject,
  onMounted,
onUnmounted,
  reactive,
  ref,
  toRefs,
  unref,
  watch,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import QuillModal from './QuillModal.vue'
import RecycleModal from './RecycleModal.vue'
import SearchModal from './SearchModal.vue'
import ShortcutModal from './ShortcutModal.vue'
import UserSettings from './UserSettings.vue'
import { msgPolling } from '@/api/message/message'
import { getImgUrl } from '@/utils/urlUtils'
import { useUser } from '@/store/modules/user'
import { useTaskStore } from '@/store/modules/task'
import defaultAvatar from '@/assets/icons/avatar.svg'
import { useKeydown } from '@/hooks/event/useKeydown'

const taskStore = useTaskStore()
export default defineComponent({
  name: 'PageHeader',
  components: {
    UserSettings,
    QuillModal,
    ShortcutModal,
    RecycleModal,
    SearchModal,
  },
  props: {
    collapsed: {
      type: Boolean,
    },
    inverted: {
      type: Boolean,
    },
  },
  emits: ['update:collapsed'],
  setup() {
    const message = useMessage()
    const dialog = useDialog()

    const userStore = useUser()
    const useInfo = userStore.getUserInfo

    const name = ''

    const state = reactive({
      username: name ?? '',
      fullscreenIcon: 'FullscreenOutlined',
    })

    const router = useRouter()
    const route = useRoute()
    const routename = ref(route.meta.title)
    // 图标列表mm
    const iconList = ref([
      {
        icon: 'magnifying-1',
        handle: searchHandler,
      },
      {
        icon: 'shortcut-keys',
        handle: shortcutHandler,
      },
      {
        icon: 'suspicious-folder',
        handle: recycleHandler,
      },
      {
        icon: 'memo',
        handle: quillHandler,
      },
      {
        icon: 'nomessage',
        handle: goMessage,
      },
    ])

    watch(
      () => route.fullPath,
      () => {
        routename.value = route.meta.title
      },
    )

    const handleDragOver = (event, item) => {
      taskStore.setInFile(true)
    }

    const handleDragLeave = (event, item) => {
      taskStore.setInFile(false)
    }

    const dropdownSelect = (key) => {
      router.push({ name: key })
    }

    // 退出登录
    const doLogout = () => {
      dialog.info({
        title: '提示',
        content: '您确定要退出登录吗',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
          userStore.logout().then(() => {
            message.success('成功退出登录')
            router
              .replace({
                name: 'Login',
                query: {
                  // redirect: route.fullPath,
                },
              })
              .finally(() => location.reload())
          })
        },
        onNegativeClick: () => {},
      })
    }


const quillModalRef = ref(null)
    const shortcutModal = ref(null)
    const recycleModalRef = ref(null)
    const SearchModalRef = ref(null)

    function quillHandler() {
      const modal = unref(quillModalRef)! as any
      modal.showModal()
    }

    function shortcutHandler() {
      const modal = unref(shortcutModal)! as any
      modal.showModal()
    }

    function recycleHandler() {
      const modal = unref(recycleModalRef)! as any
      modal.showModal()
    }

    function searchHandler() {
      const modal = unref(SearchModalRef)! as any
      modal.showModal()
    }

    function goMessage() {
      router.push({ name: 'message-main' })
    }

    async function getMessage() {
      const res = await msgPolling()
      if (res.data)
        iconList.value[4].icon = 'hasmessage'
      else iconList.value[4].icon = 'nomessage'
    }
    setInterval(() => {
      getMessage()
    }, 5000)

    const mousetrap = inject('mousetrap') as any
    function handleKeydown(){
  
   const modal = unref(quillModalRef)! as any
      modal.closeModal()
       const modal1 = unref(shortcutModal)! as any
      modal1.closeModal()
    const modal3 = unref(SearchModalRef)! as any
  modal3.closeModal()
  const modal2 = unref(recycleModalRef)! as any
      modal2.closeModal()
  
    }
    onMounted(() => {
      getMessage()
      mousetrap.bind('n r', quillHandler)
      mousetrap.bind('n t', quillHandler)
      mousetrap.bind('n n', recycleHandler)
      mousetrap.bind('/', searchHandler)
        window.addEventListener('keydown', handleKeydown)
    })
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
})
    const defaultAvatarSrc = ref(defaultAvatar)

    return {
      ...toRefs(state),
      iconList,
      doLogout,
      dropdownSelect,
      routename,
      quillModalRef,
      shortcutModal,
      recycleModalRef,
      SearchModalRef,
      searchHandler,
      quillHandler,
      shortcutHandler,
      recycleHandler,
      useInfo,
      getImgUrl,
      getMessage,
      handleDragOver,
      handleDragLeave,
      defaultAvatarSrc,
    }
  },
})
</script>

<template>
  <div class="layout-header">
    <!-- 左侧菜单 -->
    <div class="layout-header-left">
      <!-- 菜单收起 -->
      <div
        class="ml-1 layout-header-trigger layout-header-trigger-min"
        style="padding-left: 13px"
        @click="() => $emit('update:collapsed', !collapsed)"
      >
        <SvgIcon name="homepage" size="16" />
      </div>
      <div>当前位置：{{ routename }}</div>
    </div>
    <div class="layout-header-right">
      <div
        v-for="item in iconList"
        :key="item.icon"
        class="layout-header-trigger layout-header-trigger-min"
        @dragover.prevent="
          (e) => {
            handleDragOver(e, item);
          }
        "
        @dragleave.prevent="
          (e) => {
            handleDragLeave(e, item);
          }
        "
      >
        <div class="back" @click="item.handle">
          <SvgIcon :name="item.icon" size="18" />
        </div>
      </div>
      <!-- 个人中心 -->
      <div style="margin-left: 16px;" class="layout-header-trigger layout-header-trigger-min">
        <!-- <n-avatar :src="getImgUrl(useInfo.usericon)" round /> -->
        <n-avatar
          style="width: 36px; height: 36px"
          :src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatarSrc"
          round
        />
      </div>
      <!-- 设置 -->
      <UserSettings @logout="doLogout" />
    </div>
  </div>
  <RecycleModal ref="recycleModalRef" />
  <QuillModal ref="quillModalRef" />
  <ShortcutModal ref="shortcutModal" />
  <SearchModal ref="SearchModalRef" />
</template>

<style lang="less" scoped>
.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  height: 62px;
  transition: all 0.2s ease-in-out;
  width: 100%;
  z-index: 11;

  &-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #666666;

    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 64px;
      line-height: 64px;
      overflow: hidden;
      white-space: nowrap;
      padding-left: 10px;

      img {
        width: auto;
        height: 34px;
        margin-right: 10px;
      }

      .title {
        margin-bottom: 0;
      }
    }
  }

  &-right {
    display: flex;
    align-items: center;
    margin-right: 24px;

    .back {
      width: 28px;
      height: 28px;
      background: #ffffff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar {
      display: flex;
      align-items: center;
      height: 64px;
    }

    > * {
      cursor: pointer;
    }
  }

  &-trigger {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    &:hover {
      background: hsla(0, 0%, 100%, 0.08);
    }

    .anticon {
      font-size: 16px;
      color: #515a6e;
    }
  }

  &-trigger-min {
    width: auto;
    padding: 0 5px;
  }
}

.layout-header-light {
  background: #fff;
  color: #515a6e;

  .n-icon {
    color: #515a6e;
  }

  .layout-header-left {
    ::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
      color: #515a6e;
    }
  }
}

.user-dropdown {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>