<script setup lang="ts">
import { ref } from 'vue';

import { EasyFlowPanelModal } from '@easyflow/common-ui';

import SysApiKeyList from '#/views/config/apikey/SysApiKeyList.vue';
import SysApiKeyResourcePermissionList from '#/views/config/apikey/SysApiKeyResourcePermissionList.vue';

const dialogVisible = ref(false);
</script>
<template>
  <div class="sys-apikey-container">
    <SysApiKeyList />
    <EasyFlowPanelModal
      v-model:open="dialogVisible"
      :centered="true"
      title=""
      width="xl"
      :show-footer="false"
    >
      <SysApiKeyResourcePermissionList />
    </EasyFlowPanelModal>
  </div>
</template>

<style scoped>
.sys-apikey-container {
  width: 100%;
  height: 100%;
}
</style>
