|
|
@ -1,19 +1,17 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import type { FunctionalComponent, SVGAttributes } from 'vue' |
|
|
|
import type { FunctionalComponent, SVGAttributes } from 'vue' |
|
|
|
import { useI18n } from 'vue-i18n' |
|
|
|
|
|
|
|
import AuditTab from './AuditTab.vue' |
|
|
|
import AuditTab from './AuditTab.vue' |
|
|
|
import AppStore from './AppStore.vue' |
|
|
|
import AppStore from './AppStore.vue' |
|
|
|
import Metadata from './Metadata.vue' |
|
|
|
import Metadata from './Metadata.vue' |
|
|
|
import UIAcl from './UIAcl.vue' |
|
|
|
import UIAcl from './UIAcl.vue' |
|
|
|
import Misc from './Misc.vue' |
|
|
|
import Misc from './Misc.vue' |
|
|
|
|
|
|
|
import { useI18n, useUIPermission, useVModel, watch } from '#imports' |
|
|
|
import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue' |
|
|
|
import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue' |
|
|
|
import UserManagement from '~/components/tabs/auth/UserManagement.vue' |
|
|
|
import UserManagement from '~/components/tabs/auth/UserManagement.vue' |
|
|
|
import StoreFrontOutline from '~icons/mdi/storefront-outline' |
|
|
|
import StoreFrontOutline from '~icons/mdi/storefront-outline' |
|
|
|
import TeamFillIcon from '~icons/ri/team-fill' |
|
|
|
import TeamFillIcon from '~icons/ri/team-fill' |
|
|
|
import MultipleTableIcon from '~icons/mdi/table-multiple' |
|
|
|
import MultipleTableIcon from '~icons/mdi/table-multiple' |
|
|
|
import NootbookOutline from '~icons/mdi/notebook-outline' |
|
|
|
import NootbookOutline from '~icons/mdi/notebook-outline' |
|
|
|
import { useUIPermission, useVModel, watch } from '#imports' |
|
|
|
|
|
|
|
import MdiCloseIcon from '~icons/mdi/close' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface Props { |
|
|
|
interface Props { |
|
|
|
modelValue: boolean |
|
|
|
modelValue: boolean |
|
|
@ -140,22 +138,27 @@ watch( |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex flex-row justify-between w-full items-center mb-1"> |
|
|
|
<div class="flex flex-row justify-between w-full items-center mb-1"> |
|
|
|
<a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title> |
|
|
|
<a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title> |
|
|
|
|
|
|
|
|
|
|
|
<a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false"> |
|
|
|
<a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false"> |
|
|
|
<template #icon> |
|
|
|
<template #icon> |
|
|
|
<MdiCloseIcon class="cursor-pointer mt-1 nc-modal-close" /> |
|
|
|
<MdiClose class="cursor-pointer mt-1 nc-modal-close" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-button> |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<a-layout class="mt-3 modal-body flex"> |
|
|
|
<a-layout class="mt-3 h-[75vh] overflow-y-auto flex"> |
|
|
|
<!-- Side tabs --> |
|
|
|
<!-- Side tabs --> |
|
|
|
<a-layout-sider theme="light"> |
|
|
|
<a-layout-sider> |
|
|
|
<a-menu v-model:selected-keys="selectedTabKeys" class="h-full" mode="inline" :open-keys="[]"> |
|
|
|
<a-menu v-model:selected-keys="selectedTabKeys" class="tabs-menu h-full" :open-keys="[]"> |
|
|
|
<a-menu-item v-for="(tab, key) of tabsInfo" :key="key"> |
|
|
|
<a-menu-item |
|
|
|
<div class="flex flex-row items-center space-x-2"> |
|
|
|
v-for="(tab, key) of tabsInfo" |
|
|
|
<component :is="tab.icon" class="flex" /> |
|
|
|
:key="key" |
|
|
|
|
|
|
|
class="group active:(!ring-0) hover:(!bg-primary !bg-opacity-25)" |
|
|
|
<div class="flex select-none"> |
|
|
|
> |
|
|
|
|
|
|
|
<div class="flex items-center space-x-2"> |
|
|
|
|
|
|
|
<component :is="tab.icon" class="group-hover:text-accent" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="select-none"> |
|
|
|
{{ tab.title }} |
|
|
|
{{ tab.title }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -166,7 +169,7 @@ watch( |
|
|
|
<!-- Sub Tabs --> |
|
|
|
<!-- Sub Tabs --> |
|
|
|
<a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500"> |
|
|
|
<a-layout-content class="h-auto px-4 scrollbar-thumb-gray-500"> |
|
|
|
<a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal"> |
|
|
|
<a-menu v-model:selectedKeys="selectedSubTabKeys" :open-keys="[]" mode="horizontal"> |
|
|
|
<a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="select-none"> |
|
|
|
<a-menu-item v-for="(tab, key) of selectedTab.subTabs" :key="key" class="active:(!ring-0) select-none"> |
|
|
|
{{ tab.title }} |
|
|
|
{{ tab.title }} |
|
|
|
</a-menu-item> |
|
|
|
</a-menu-item> |
|
|
|
</a-menu> |
|
|
|
</a-menu> |
|
|
@ -177,9 +180,10 @@ watch( |
|
|
|
</a-modal> |
|
|
|
</a-modal> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.modal-body { |
|
|
|
.tabs-menu { |
|
|
|
@apply h-[75vh]; |
|
|
|
:deep(.ant-menu-item-selected) { |
|
|
|
@apply overflow-y-auto; |
|
|
|
@apply border-r-3 border-primary bg-primary !bg-opacity-25; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|