cadmin/web/src/views/entrance/index.vue

<template>
  <div class="view-entrance">
    <div class="view-entrance-top">
      <div></div>
      <div class="view-entrance-top-right">
        <!--角色权限管理-->
        <div
          v-show="showRolePermission"
          class="view-entrance-top-trigger view-entrance-trigger-min"
          @click="showRoleModal = true"
        >
          <n-tooltip placement="bottom-end">
            <template #trigger>
              <n-icon size="25" style="font-weight: bold">
                <SafetyCertificateOutlined />
              </n-icon>
            </template>
            <span>角色权限管理</span>
          </n-tooltip>
        </div>
        <!--用户管理-->
        <div
          v-show="showRolePermission"
          class="view-entrance-top-trigger view-entrance-trigger-min"
          @click="showUserModal = true"
        >
          <n-tooltip placement="bottom-end">
            <template #trigger>
              <n-icon size="25" style="font-weight: bold">
                <PeopleSettings20Regular />
              </n-icon>
            </template>
            <span>用户管理</span>
          </n-tooltip>
        </div>
        <!-- 个人中心 -->
        <div class="view-entrance-top-trigger view-entrance-trigger-min">
          <n-dropdown trigger="hover" @select="avatarSelect" :options="avatarOptions">
            <div class="avatar">
              <n-avatar round>
                {{ user_name }}
                <template #icon>
                  <UserOutlined />
                </template>
              </n-avatar>
            </div>
          </n-dropdown>
        </div>
      </div>
    </div>
    <div class="view-entrance-content">
      <n-grid cols="1 s:2 m:3 l:6 xl:6 2xl:6" responsive="screen" :x-gap="12" :y-gap="8">
        <n-grid-item v-for="(server, index) in servers" :key="index">
          <n-card @click="openNewPage(server.path, server.id)" hoverable :title="server.name">
            <template #cover>
              <img src="" />
            </template>
          </n-card>
        </n-grid-item>
      </n-grid>
    </div>
  </div>

  <n-modal class="view-dialog" v-model:show="showRoleModal">
    <Role />
  </n-modal>
  <n-modal class="view-dialog" v-model:show="showUserModal">
    <User />
  </n-modal>
</template>

<script lang="ts">
  import { UserOutlined } from '@vicons/antd';
  import { PeopleSettings20Regular } from '@vicons/fluent';
  import { useUserStore } from '@/store/modules/user';
  import { useRouter } from 'vue-router';
  import { useDialog, useMessage } from 'naive-ui';
  import { ACCESS_TOKEN, TABS_ROUTES } from '@/store/mutation-types';
  import { storage } from '@/utils/Storage';
  import { GetServiceList, SelectSystem } from '@/api/service/service';
  import { ref } from 'vue';
  import Role from '../permission/role/role.vue';
  import User from '../permission/user/user.vue';
  import { CheckRolePermission } from '@/api/system/role';
  import { SafetyCertificateOutlined } from '@vicons/antd';
  import { getBaseLoginUrl } from '@/utils/env';
  interface server {
    id: number;
    name: string;
    path: string;
  }

  export default {
    components: {
      UserOutlined,
      PeopleSettings20Regular,
      SafetyCertificateOutlined,
      Role,
      User,
    },
    setup() {
      const userStore = useUserStore();
      const router = useRouter();
      const dialog = useDialog();
      const message = useMessage();
      // 退出登录
      const doLogout = () => {
        dialog.info({
          title: '提示',
          content: '您确定要退出登录吗',
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: () => {
            userStore.logout().then(() => {
              message.success('成功退出登录');
              // 移除标签页
              localStorage.removeItem(TABS_ROUTES);
              window.open(getBaseLoginUrl(), '_self');
              // router
              //   .replace({
              //     name: 'Login',
              //     query: {
              //       redirect: route.fullPath,
              //     },
              //   })
              //   .finally(() => location.reload());
            });
          },
          onNegativeClick: () => {},
        });
      };
      //头像下拉菜单
      const avatarSelect = (key) => {
        switch (key) {
          case 1:
            router.push({ name: 'Setting' });
            break;
          case 2:
            doLogout();
            break;
        }
      };

      const avatarOptions = [
        // {
        //   label: '个人设置',
        //   key: 1,
        // },
        {
          label: '退出登录',
          key: 2,
        },
      ];
      return {
        user_name:
          userStore.getUserInfo.user_name == undefined ? 'user' : userStore.getUserInfo.user_name,
        avatarSelect,
        avatarOptions,
        message,
        router,
        showRoleModal: ref(false),
        showUserModal: ref(false),
      };
    },
    data() {
      return {
        servers: ref<server[]>([]),
        showRolePermission: false,
      };
    },
    mounted() {
      this.getSystemList();
      this.getAdminRole();
    },
    methods: {
      async getAdminRole() {
        this.showRolePermission = await CheckRolePermission();
        console.log('this.showRolePermission:' + this.showRolePermission);
      },
      async getSystemList() {
        this.servers = await GetServiceList();
      },
      openNewPage(url: string) {
        // await SelectSystem({
        //   ...{ system_id: system_id },
        // })
        //   .then((res) => {
        //     console.log('_res:' + JSON.stringify(res));
        // const ex = 7 * 24 * 60 * 60 * 1000;
        // storage.set(ACCESS_TOKEN, res.token, ex);
        const path = url.replace('{access-token}', storage.get(ACCESS_TOKEN));
        window.open(path, '_self');
        // })
        // .catch((e: Error) => {
        //   this.message.error(e.message ?? '操作失败');
        // });
      },

      // openSetting() {
      //   this.showModal = true;
      //   // this.router.push('/roleList');
      // },
    },
  };
</script>

<style scoped lang="less">
  .view-entrance {
    display: flex;
    flex-direction: column;
    height: 100vh;

    &-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      height: @header-height;
      box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
      transition: all 0.2s ease-in-out;
      width: 100%;
      z-index: 11;

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

        > * {
          cursor: pointer;
        }
      }

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

    &-content {
      display: flex;
      padding: 0;
      transition: all 0.2s ease-in-out;
      align-items: center;
      width: 100%;
      .n-card {
        margin: 20px;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
  }

  .view-dialog {
    width: 90%;
    background: #ffffff;
  }

  @media (min-width: 768px) {
    .view-entrance {
      background-image: url('../../assets/images/login.svg');
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100%;
    }
  }
</style>