<!--
 * @FileDescription: 状态管理
 * @Date: 2023-10-08
 * @LastEditTime: 2023-10-08
-->
<script setup lang="ts">
import { ref } from 'vue';

import Tab1Page from './tabs/Tab1Page.vue';
import Tab2Page from './tabs/Tab2Page.vue';
import Tab3Page from './tabs/Tab3Page.vue';

const tab = ref('tab1');
</script>
<template>
    <div class="fit overflow-hidden column no-wrap">
        <div>
            <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="left"
                narrow-indicator>
                <q-tab name="tab1" label="Tab1" />
                <q-tab name="tab2" label="Tab2" />
                <q-tab name="tab3" label="Tab3" />
            </q-tabs>
            <q-separator />
        </div>
        <div class="flex-1 overflow-auto">
            <q-tab-panels v-model="tab" animated keep-alive>
                <q-tab-panel name="tab1">
                    <Tab1Page />
                </q-tab-panel>

                <q-tab-panel name="tab2">
                    <Tab2Page />
                </q-tab-panel>

                <q-tab-panel name="tab3">
                    <Tab3Page />
                </q-tab-panel>
            </q-tab-panels>
        </div>
    </div>
</template>

<style lang="scss" scoped></style>
