HumanBreak/src/ui/desc.vue

<template>
    <Colomn @close="exit" :width="80" :height="80" :left="30" :right="70"
        ><template #left
            ><div id="desc-list">
                <span
                    v-for="(data, k) in desc"
                    class="selectable desc-item"
                    :selected="selected === k"
                    @click="selected = k"
                    >{{ data.text }}</span
                >
            </div></template
        >
        <template #right><span v-html="content"></span></template
    ></Colomn>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import desc from '../data/desc.json';
import { has } from '../plugin/utils';
import Colomn from '../components/colomn.vue';

type DescKey = keyof typeof desc;

const selected = ref(Object.keys(desc)[0] as DescKey);

function exit() {
    core.plugin.descOpened.value = false;
}

const content = computed(() => {
    return desc[selected.value].desc
        .map((v, i, a) => {
            if (/^\d+\./.test(v)) return `${'&nbsp;'.repeat(12)}${v}`;
            else if (
                (has(a[i - 1]) && v !== '<br>' && a[i - 1] === '<br>') ||
                i === 0
            ) {
                return `${'&nbsp;'.repeat(8)}${v}`;
            } else return v;
        })
        .join('');
});
</script>

<style lang="less" scoped>
#desc-left {
    flex-basis: 30%;
}

#desc-list {
    display: flex;
    flex-direction: column;
}

.desc-item {
    padding: 1% 3% 1% 3%;
}
</style>