resource-admin/src/views/music-library/music-sheet/index.tsx

import { NTabPane, NTabs } from 'naive-ui'
import { defineComponent, reactive } from 'vue'
import MusicList from './component/music-list'
import { useRoute } from 'vue-router'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
import MusicSheetCategoriesList from '@views/music-library/music-sheet/component/music-sheet-categories-list'

export default defineComponent({
  name: 'music-sheet',
  setup() {
    const state = reactive({
      tabName: 'MusicList' as 'MusicList' | 'TagList' | 'CategroryList',
      searchId: null,
      musicCategoryId: null
    })
    const route = useRoute()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
      }
    })
    const setTabName = (val: any) => {
      console.log('setTabName', val)
      state.tabName = val.tabName
      state.searchId = val.id
    }
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }
    return () => {
      return (
        <div class="system-menu-container">
          <div class={['section-container']} style="padding-top: 0">
            <NTabs
              type="line"
              size="large"
              v-model:value={state.tabName}
              onUpdate:value={(val: any) => setTabs(val)}
            >
              <NTabPane name="MusicList" tab="曲目列表" v-auth="musicSheet/page1751238894313013249">
                <MusicList searchId={state.searchId} musicCategoryId={state.musicCategoryId} />
              </NTabPane>
              <NTabPane
                name="CategroryList"
                tab="曲目分类"
                v-auth="musicSheetCategories/queryTree1751238805699952641"
              >
                <MusicSheetCategoriesList
                  onSetTabName={setTabName}
                  onJump={(param: any) => {
                    state.tabName = param.tabName
                    state.musicCategoryId = param.musicCategoryId
                  }}
                />
                {/*<TagList />*/}
              </NTabPane>
            </NTabs>
          </div>
        </div>
      )
    }
  }
})