resource-admin/src/views/message/message-config/index.tsx

import {NTabPane, NTabs} from 'naive-ui'
import {defineComponent, nextTick, onMounted, reactive, ref} from 'vue'
import {useRoute} from 'vue-router'
import {getTabsCache, setTabsCaches} from '@/hooks/use-async'
import SmsConfig from "@views/message/message-config/sms/sms-config";
import PushConfig from "@views/message/message-config/push/push-config";
import WechatConfig from "@views/message/message-config/wechat/wechat-config";
import EmailConfig from "@views/message/message-config/email/email-config";

export default defineComponent({
  name: 'message-config-index',
  setup() {
    const state = reactive({
      tabName: 'SMS' as 'SMS' | 'PUSH' | 'EMAIL' | 'WECHAT',
    })
    const tabsInstRef = ref()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
        nextTick(() => tabsInstRef.value?.syncBarPosition())
      }
    })
    const route = useRoute()
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }

    onMounted(async () => {
      nextTick(() => tabsInstRef.value?.syncBarPosition())
    })

    return () => {
      return (
          <div class="system-menu-container">
            <div class={['section-container']} style="padding-top: 0">
              <NTabs
                  ref={tabsInstRef}
                  type="line"
                  size="large"
                  v-model:value={state.tabName}
                  onUpdate:value={(val: any) => setTabs(val)}
              >
                <NTabPane name='SMS' tab='短信'><SmsConfig/></NTabPane>
                <NTabPane name='PUSH' tab="推送"><PushConfig/></NTabPane>
                <NTabPane name='WECHAT' tab="公众号"><WechatConfig/></NTabPane>
                <NTabPane name='EMAIL' tab="邮件"><EmailConfig/></NTabPane>
              </NTabs>
            </div>
          </div>
      )
    }
  }
})