digital-netlist-render/src/components/setting/index.vue

<template>
    <div class="setting-wrapper">
        <el-scrollbar height="98vh">
            <div class="setting-section">
                <h2>{{ t('general-setting') }}</h2>
                <div class="setting-option" style="width: 220px;">
                    <span>
                        <span class="iconfont icon-i18n"></span>
                        &ensp;
                        <span class="option-title">{{ t('language-setting') }}</span>
                    </span>
                    <div style="width: 100px;">
                        <el-select
                            name="language-setting"
                            class="language-setting"
                            v-model="locale"
                            @change="onlanguagechange"
                        >
                            <el-option
                                v-for="option in languageSetting.options"
                                :value="option.value"
                                :label="option.text"
                                :key="option.value">
                            </el-option>
                        </el-select>
                    </div>

                    <el-dialog
                        v-model="languageDialogShow"
                        class="language-dialog"
                        :title="t('tips')"
                        width="500"
                    >
                        <span>{{ t('setting.language.change-dialog', [currentLanguage]) }}</span>
                        <template #footer>
                        <div class="dialog-footer">
                            <el-button type="primary" @click="confirmLanguageDialog()">
                                {{ t('confirm') }}
                            </el-button>
                        </div>
                        </template>
                    </el-dialog>
                </div>
                <br>


                <div class="setting-option">
                        <span class="option-title">
                            {{ t('render-animation') }}
                        </span>
                    <el-switch
                        v-model="globalSetting.renderAnimation"
                        active-text="ON"
                        inactive-text="OFF"
                    />
                </div>

            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { globalSetting } from '@/hook/global';
import { reactive, defineComponent, watch, ref } from 'vue';
import { useI18n } from 'vue-i18n';

defineComponent({ name: "dide-setting" });
const { t, locale } = useI18n();
locale.value = globalSetting.language;

watch(
    () => locale.value,
    () => {
        globalSetting.language = locale.value;
        localStorage.setItem('setting', JSON.stringify(globalSetting));
    }
);

const currentLanguage = ref('简体中文');
const languageDialogShow = ref(false);

function confirmLanguageDialog() {
    languageDialogShow.value = false;
}

function onlanguagechange(code) {
    const option = languageSetting.options.find(item => item.value === code);
    currentLanguage.value = option.text;
    languageDialogShow.value = true;
}

const languageSetting = reactive({
    options: [
        {
            value: 'en',
            text: 'English'
        },
        {
            value: 'zh',
            text: '简体中文'
        },
        {
            value: 'zhTw',
            text: '繁體中文'
        },
        {
            value: 'ja',
            text: '日本語'
        },
        {
            value: 'ko',
            text: '한국어'
        },
        {   
            value: 'de',
            text: 'Deutsch'
        },
        {
            value: 'fr',
            text: 'Français'
        },
        {
            value: 'ru',
            text: 'Русский'
        },
        {
            value: 'ar',
            text: 'العربية'
        }
    ]
});


</script>

<style>
.setting-wrapper {
    width: fit-content;
    padding: 10px;
}

.setting-container {
    overflow-y: scroll;
    height: 99vh;
}

.setting-section {
    padding: 10px;
    margin: 10px;
    border-radius: .3em;
    min-height: 50px;
}

.setting-option {
    margin: 3px;
    padding: 8px 12px;
    height: 40px;
    width: 280px !important;
    border-radius: .5em;
    background-color: var(--background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
}

.option-group {
    display: flex;
    width: fit-content;
}

.option-title {
    font-size: 0.8rem;
    min-width: 80px;
    margin-right: 12px;
    user-select: none;
}

.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner,
.el-checkbox-button__inner {
    font-size: 0.8rem !important;
}

.el-slider__button {
    background-color: var(--background) !important;
}

.el-switch__core .el-switch__action {
    background-color: var(--background) !important;
}

.el-slider__stop {
    background-color: var(--vscode-foreground) !important;
}

.icon-help {
    cursor: pointer;
    transition: var(--animation-3s);
    -webkit-transition: var(--animation-3s);
}

.icon-help:hover {
    color: var(--main-color);
    transition: var(--animation-3s);
    -webkit-transition: var(--animation-3s);
}

.language-dialog {
    color: var(--vscode-foreground);
    background-color: var(--sidebar) !important;
}

.el-dialog__title {
    color: var(--vscode-foreground) !important;
}

</style>