gtsoft-snail-job-admin/src/views/function/tab/index.vue

72 lines
2.5 KiB
Vue
Raw Normal View History

2024-03-08 17:59:45 +08:00
<script setup lang="ts">
import { ref } from 'vue';
import { useRouterPush } from '@/hooks/common/router';
import { $t } from '@/locales';
import { useTabStore } from '@/store/modules/tab';
const tabStore = useTabStore();
const { routerPushByKey } = useRouterPush();
const tabLabel = ref('');
function changeTabLabel() {
tabStore.setTabLabel(tabLabel.value);
}
function resetTabLabel() {
tabStore.resetTabLabel();
}
</script>
<template>
2024-03-21 10:57:53 +08:00
<NSpace vertical :size="16">
<NCard
:title="$t('page.function.tab.tabOperate.title')"
:bordered="false"
size="small"
segmented
class="card-wrapper"
>
<NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.addTab') }}</NDivider>
<NButton @click="routerPushByKey('about')">{{ $t('page.function.tab.tabOperate.addTabDesc') }}</NButton>
<NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.closeTab') }}</NDivider>
<NSpace>
<NButton @click="tabStore.removeActiveTab">
2024-03-08 17:59:45 +08:00
{{ $t('page.function.tab.tabOperate.closeCurrentTab') }}
2024-03-21 10:57:53 +08:00
</NButton>
<NButton @click="tabStore.removeTabByRouteName('about')">
2024-03-08 17:59:45 +08:00
{{ $t('page.function.tab.tabOperate.closeAboutTab') }}
2024-03-21 10:57:53 +08:00
</NButton>
</NSpace>
<NDivider title-placement="left">{{ $t('page.function.tab.tabOperate.addMultiTab') }}</NDivider>
<NSpace>
<NButton @click="routerPushByKey('function_multi-tab')">
2024-03-08 17:59:45 +08:00
{{ $t('page.function.tab.tabOperate.addMultiTabDesc1') }}
2024-03-21 10:57:53 +08:00
</NButton>
<NButton @click="routerPushByKey('function_multi-tab', { query: { a: '1' } })">
2024-03-08 17:59:45 +08:00
{{ $t('page.function.tab.tabOperate.addMultiTabDesc2') }}
2024-03-21 10:57:53 +08:00
</NButton>
</NSpace>
</NCard>
<NCard
:title="$t('page.function.tab.tabTitle.title')"
:bordered="false"
size="small"
segmented
class="card-wrapper"
>
<NDivider title-placement="left">{{ $t('page.function.tab.tabTitle.changeTitle') }}</NDivider>
<NInputGroup class="max-w-240px">
<NInput v-model:value="tabLabel" />
<NButton type="primary" @click="changeTabLabel">{{ $t('page.function.tab.tabTitle.change') }}</NButton>
</NInputGroup>
<NDivider title-placement="left">{{ $t('page.function.tab.tabTitle.resetTitle') }}</NDivider>
<NButton type="error" ghost class="w-80px" @click="resetTabLabel">
{{ $t('page.function.tab.tabTitle.reset') }}
</NButton>
</NCard>
</NSpace>
2024-03-08 17:59:45 +08:00
</template>
<style scoped></style>