dbsd_kczx/src/views/site/index.vue

<template>
  <div id="siteMain">
    <!-- <a-card>
      <div>
        <h1>首页</h1>
      </div>
      <div>{{ list }} - {{ stateCount }}</div>
      <div>
        {{ state }}
        <a-button type="primary" @click="() => state.count++">点击+1</a-button>
      </div>
      <div>
        {{ i }}
        <a-button type="primary" @click="changeClick">点击+1</a-button>
      </div>
      <div>
        <RouterLink to="/site/index2">跳转到子页</RouterLink>
      </div>
      <br/>
      <div>
        <RouterLink to="/dashboard/analysis">跳转到首页</RouterLink>
      </div>
    </a-card>
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
    <a-layout>
      <a-layout-header>
        <span class="topTitle">管理系统</span>
        <span class="topRight">
          <a-dropdown>
            <span class="ant-dropdown-link topRightMenu" @click.prevent>
              {{ userStore?.getUserInfo?.realname }}
              <DownOutlined />
            </span>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <!-- <a href="javascript:;">后台管理</a> -->
                  <RouterLink to="/dashboard/analysis">后台管理</RouterLink>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="userStore?.confirmLoginOut();">安全退出</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </span>
      </a-layout-header>
      <a-layout-content>
        内容流区域
      </a-layout-content>
      <a-layout-footer>
        <span class="footerLeft">TEL：0431-85099971</span>
        <span class="footerRight">Copyright 东北师范大学教务处 2023</span>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, onMounted } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { useUserStore } from '/@/store/modules/user';

  //用户相关
  const userStore = useUserStore();

  console.log(`🚀 -----------------------------------------------🚀`);
  console.log(`🚀 ~ file: index.vue:66 ~ userStore:`, userStore);
  console.log(`🚀 -----------------------------------------------🚀`);


  // reactive
  let list = reactive({ list: [] });
  //针对基础类型
  const state = ref({ count: 0 });
  let i = ref(1);

  //计算属性
  const stateCount = computed(() => {
    return state.value.count;
  });

  onMounted(() => {
    console.log('页面加载完了！');
  });

  //方法
  function changeClick() {
    i.value++;
    // list.list.push({ key: i.value });
  }
</script>
<style lang="less">
#siteMain {
  //最大宽度
  max-width: 1100px;
  //居中
  margin: 0 auto;
  .topTitle {
    font-size: 1.5rem;
  }
  .topRight {
    float: right;
    .topRightMenu {
      font-size: 1.1rem;
    }
  }
  .footerRight {
    float: right;
  }

  .ant-layout-header {
    color: #fff;
    background: #1ab394;
  }
  .ant-layout-footer {
    line-height: 1.5;
  }
  .ant-layout-sider {
    color: #fff;
    line-height: 120px;
    background: #3ba0e9;
  }
  .ant-layout-content {
    min-height: 120px;
    color: #000;
    line-height: 120px;
    background: #FFF
  }
}s
/**暗黑模式特殊配色*/
[data-theme='dark'] #siteMain {
  .ant-layout-header, .ant-layout-footer {
    background: #6aa0c7;
  }
  .ant-layout-content {
    background: #107bcb;
  }
  .ant-layout-sider {
    background: #3499ec;
  }
}
</style>