You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<script setup lang='ts'>
|
|
import { computed, ref } from 'vue'
|
|
import { NModal, NTabPane, NTabs } from 'naive-ui'
|
|
import General from './General.vue'
|
|
import About from './About.vue'
|
|
import { SvgIcon } from '@/components/common'
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<Emit>()
|
|
|
|
interface Props {
|
|
visible: boolean
|
|
}
|
|
|
|
interface Emit {
|
|
(e: 'update:visible', visible: boolean): void
|
|
}
|
|
|
|
const active = ref('General')
|
|
|
|
const show = computed({
|
|
get() {
|
|
return props.visible
|
|
},
|
|
set(visible: boolean) {
|
|
emit('update:visible', visible)
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NModal v-model:show="show" :auto-focus="false" preset="card" style="width: 95%; max-width: 640px">
|
|
<div>
|
|
<NTabs v-model:value="active" type="line" animated>
|
|
<NTabPane name="General" tab="General">
|
|
<template #tab>
|
|
<SvgIcon class="text-lg" icon="ri:file-user-line" />
|
|
<span class="ml-2">{{ $t('setting.general') }}</span>
|
|
</template>
|
|
<div class="min-h-[100px]">
|
|
<General />
|
|
</div>
|
|
</NTabPane>
|
|
<NTabPane name="Config" tab="Config">
|
|
<template #tab>
|
|
<SvgIcon class="text-lg" icon="ri:list-settings-line" />
|
|
<span class="ml-2">{{ $t('setting.config') }}</span>
|
|
</template>
|
|
<About />
|
|
</NTabPane>
|
|
</NTabs>
|
|
</div>
|
|
</NModal>
|
|
</template>
|