dz-app/components/mx-paper/mx-paper.vue

<template>
    <view class="page-content h-screen !bg-white">
        <mx-nav-bar :title="paperName" :left-click-block="paperQuitBlock"/>
        <slot name="top"/>
        <mx-tabs-swiper ref="swiper" v-model="index" :tabs="questions" :tab-options="tabOptions" border
                        :delay="false" :tabs-height="60" template="question">
            <template #tab="scope">
                <mx-paper-tab-item v-bind="scope"/>
            </template>
            <template #question="question">
                <mx-question :question="question"/>
            </template>
        </mx-tabs-swiper>
        <slot name="bottom">
            <mx-question-score-subjective v-if="showScoreSubjective"/>
            <mx-question-statistic/>
            <mx-question-navigator/>
            <mx-paper-completion v-if="!readonly" :continue-name="continueName"/>
        </slot>
        <mx-paper-navigator-popup ref="navigator"/>
        <uv-safe-bottom/>
    </view>
</template>

<script setup>
import {ref, watch, computed} from 'vue'
import {useInjectPaperService} from "@/components/mx-paper/usePaperInjection";
import MxPaperTabItem from "@/components/mx-paper/components/mx-paper-tab-item.vue";
import {useInjectQuestionService} from "@/components/mx-question/useQuestionInjection";
import MxPaperCompletion from "@/components/mx-paper/components/mx-paper-completion.vue";
import MxQuestionScoreSubjective from "@/components/mx-question/components/mx-question-score-subjective.vue";
import MxQuestionNavigator from "@/components/mx-question/components/mx-question-navigator.vue";
import MxQuestionStatistic from "@/components/mx-question/components/mx-question-statistic.vue";
import MxPaperNavigatorPopup from "@/components/mx-paper/components/mx-paper-navigator-popup.vue";
import {useProvidePaperNavigatorRef} from "@/components/mx-paper/components/usePaperNavigatorRefInjection";
import {createPropDefine} from "@/utils";
import {useInjectPaperNavigationService} from "@/components/mx-paper/usePaperNavigationServiceInjection";

const props = defineProps({
    // 底部按钮
    readonly: createPropDefine(false, Boolean),
    continueName: createPropDefine('')
})

const {
    paperName,
    allowScore,
    questions,
    index,
    current,
    isObjective
} = useInjectPaperService()
const {} = useInjectQuestionService()
const swiper = ref(null)
const navigator = ref(null)
const isCurrentSubjective = computed(() => !isObjective(current.value))
const showScoreSubjective = computed(() => allowScore.value && isCurrentSubjective.value)
useProvidePaperNavigatorRef(navigator)
const {uncompletedCheckForQuit} = useInjectPaperNavigationService()

const tabOptions = {
    scrollable: true,
    keyName: 'seq',
    lineHeight: 0.5,
    lineWidth: 40,
    lineColor: 'white'
}

const paperQuitBlock = async () => {
    await uncompletedCheckForQuit(navigator.value)
}
</script>

<style scoped lang="scss">
::v-deep(.uv-tabs) {
    .uv-tabs__wrapper__nav {
        /* 不能设置__nav的间隔相关属性，会导致uv-tabs内部无法准确计算位置 */
        /* 重写__item的样式是没有关系的 */
        &__item {
            padding: 8px 4px;
            box-sizing: border-box;

            &:first-child {
                padding-left: 8px;
            }

            &:nth-last-child(2) {
                padding-right: 8px;
            }
        }

        &__line {
            box-shadow: 0px -2px 5px rgba(0, 0, 255, 0.6);
        }
    }
}
</style>