classroom-instruments/src/views/setting/index.tsx

import { defineComponent, ref, watch } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane } from 'naive-ui';
import PersonInfo from './components/personInfo';
import SchoolInfo from './components/schoolInfo/index';
import { useUserStore } from '/src/store/modules/users';
import { useRoute } from 'vue-router';
export default defineComponent({
  name: 'base-setting',
  setup(props, { emit, attrs }) {
    const activeTab = ref('person' as any);
    const user = useUserStore();
    const route = useRoute();
    if (route.query.activeTab) {
      activeTab.value = route.query.activeTab;
    }
    watch(
      () => route.query.activeTab,
      val => {
        activeTab.value = val;
      }
    );
    return () => (
      <div class={styles.listWrap}>
        <NTabs
          class={styles.customTabs}
          v-model:value={activeTab.value}
          size="large"
          animated
          pane-wrapper-style="margin: 0 -4px"
          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
          <NTabPane name="person" tab="个人信息">
            <PersonInfo></PersonInfo>
          </NTabPane>
          {user.info.isSuperAdmin && (
            <NTabPane name="school" tab="学校设置">
              <SchoolInfo />
            </NTabPane>
          )}
        </NTabs>
      </div>
    );
  }
});