classroom-instruments/src/views/prepare-lessons/components/lesson-main/index.tsx

import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { NTabPane, NTabs } from 'naive-ui';
import Courseware from './courseware';
import Train from './train';
import { usePrepareStore } from '/src/store/modules/prepareLessons';

export default defineComponent({
  name: 'lesson-main',
  setup() {
    const prepareStore = usePrepareStore();
    return () => (
      <div class={styles['lesson-main']}>
        <NTabs
          animated
          defaultValue="courseware"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}
          onUpdate: value={(val: string) => {
            prepareStore.setTabType(val);
          }}>
          <NTabPane name="courseware" tab="课件" >
            <Courseware />
          </NTabPane>
          <NTabPane name="train" tab="训练" v-slots={{ tab: () => <span id='lessons-4'>训练</span> }} {...{ id: 'lessons-4' }}>
            <Train />
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});