classroom-instruments/src/components/layout/layoutTop.tsx

import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import { NImage, NBadge, NPopover, NIcon } from 'naive-ui';
import schoolIcon from './images/schoolIcon.png';
import teacherIcon from './images/teacherIcon.png';
import messageIcon from './images/messageIcon.png';
import closeIcon from './images/closeIcon.png';
import clockIcon from './images/clockIcon.png';
import schoolDot from './images/schoolDot.png';
import personIcon from './images/personIcon.png';
import { useUserStore } from '@/store/modules/users';
import { useRouter } from 'vue-router';
import 'animate.css';
export default defineComponent({
  name: 'layoutTop',
  setup() {
    const router = useRouter();
    const showHeadFlag = ref(false);
    const users = useUserStore();
    return () => (
      <>
        <div class={styles.layoutTop}>
          <div class={styles.layoutLeft}>
            <NImage src={schoolIcon} class={styles.schoolIcon}></NImage>
            <p>武汉市武昌区教育局 | 武汉小学</p>
          </div>
          <div class={styles.layoutRight}>
            <NBadge
              value={8}
              max={99}
              class={styles.messageBadge}
              color={'#FF1036'}>
              <NImage
                class={[styles.messageIcon]}
                preview-disabled
                src={messageIcon}></NImage>
            </NBadge>
            <div class={styles.line}></div>
            <NPopover
              show-arrow={false}
              trigger="hover"
              onUpdate:show={val => {
                showHeadFlag.value = val;
              }}
              class={styles.popoverHeader}
              placement="bottom-end"
              raw={true}
              v-slots={{
                trigger: () => (
                  <div class={styles.mesgWrap}>
                    <NImage
                      preview-disabled
                      class={styles.teacherIcon}
                      src={teacherIcon}></NImage>
                    <NIcon
                      class={
                        showHeadFlag.value
                          ? styles.rotueLeft
                          : styles.rotueRight
                      }>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24">
                        <path
                          d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"
                          fill="currentColor"></path>
                      </svg>
                    </NIcon>
                  </div>
                )
              }}>
              <div class={styles.propWrap}>
                <div class={styles.teacherInfo}>
                  <NImage
                    class={styles.teacherIcon}
                    src={teacherIcon}
                    previewDisabled></NImage>
                  <p class={styles.teacherName}>张晚意</p>
                </div>
                <div class={styles.propWrapList}>
                  <div class={styles.propWrapItem}>
                    {' '}
                    <NImage
                      class={styles.smallIcon}
                      src={personIcon}
                      previewDisabled></NImage>
                    <p class={styles.smallTitle}>个人信息</p>
                  </div>
                  <div class={styles.propWrapItem}>
                    {' '}
                    <NImage
                      class={styles.smallIcon}
                      src={schoolDot}
                      previewDisabled></NImage>
                    <p class={styles.smallTitle}>学校信息</p>
                  </div>
                  <div class={styles.propWrapItem}>
                    {' '}
                    <NImage
                      class={styles.smallIcon}
                      src={clockIcon}
                      previewDisabled></NImage>
                    <p class={styles.smallTitle}>修改密码</p>
                  </div>
                </div>
                <div
                  class={styles.logoutInfo}
                  onClick={() => {
                    users.logout();
                    router.replace('/login');
                  }}>
                  <div class={styles.propWrapItem}>
                    <NImage
                      class={styles.smallIcon}
                      src={closeIcon}
                      previewDisabled></NImage>
                    <p class={styles.smallTitle}>退出登录</p>
                  </div>
                </div>
              </div>
            </NPopover>
          </div>
        </div>
      </>
    );
  }
});