src/views/Home/Index.vue

@@ -1,12 +1,96 @@
<template>
  <div>
    <h1>这里是应用首页</h1>
    <h1>IAILAB 平台主页</h1>
  </div>
  <el-skeleton :loading="loading" animated>
    <div id="app" v-for="(item, index) in appList" :key="`dynamics-${index}`">
      <div class="card" @click="gotoApp(item)">
        <img :src="item.icon" style="width: 100px; height: 100px" />
        <div>
          {{item.appName}}
        </div>
      </div>
    </div>
  </el-skeleton>

</template>
<script lang="ts" setup>

import * as AppApi from '@/api/system/app'
import {Apps} from "@/views/Home/types";
import {CACHE_KEY, useCache} from "@/hooks/web/useCache";
import * as authUtil from "@/utils/auth";


defineOptions({ name: 'Home' })

const { wsCache } = useCache()

const loading = ref(true)

let appList = reactive<Apps[]>([])

const getAppList = async () => {
  const data = await AppApi.getAppList()
  appList = Object.assign(appList, data)
}

const getAppMenuList = async (id) => {
  const data = await AppApi.getAppMenuList(id)
  let userInfo = wsCache.get(CACHE_KEY.USER)
  userInfo.menus = data
  wsCache.set(CACHE_KEY.USER, userInfo)
  wsCache.set(CACHE_KEY.ROLE_ROUTERS, data)
  window.location.href = '/plat/index'
}

const getAllApi = async () => {
  await Promise.all([
    getAppList()
  ])
  loading.value = false
}

getAllApi()

// 进入应用
const gotoApp = async (item) => {
  let id = item.id
  let type = item.type
  if(type === 0) {
    getAppMenuList(id)
  } else {
    const data = await AppApi.getAppMenuList(id)
    let userInfo = wsCache.get(CACHE_KEY.USER)
    userInfo.menus = data
    wsCache.set(CACHE_KEY.USER, userInfo)
    wsCache.set(CACHE_KEY.ROLE_ROUTERS, data)
    // await OAuth2Login(formData.value)
    // window.open(item.appDomain + '/login?appid=' + item.id + "&username=" + authUtil.getLoginForm().username, '_blank')
    window.open(item.appDomain + '/index', '_blank')
  }
}

</script>

<style lang="scss" scoped>
#app{
  width: 300px;
  height: 200px;
  display: inline-block;
  background: transparent;
}
.card{
  border: thin dashed gainsboro;
  width: 150px;
  height: 120px;
  padding: 30px;
  text-align: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bolder;
  color: blue;
  background: aliceblue;
  border-radius: 10px;
}
</style>