139 lines
4.1 KiB
Vue
139 lines
4.1 KiB
Vue
<template>
|
|
<div class="setting-wrapper">
|
|
<div class="setting-section">
|
|
<h2>{{ t('search-setting') }}</h2>
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('search-case-sensitivity') }}</span>
|
|
<el-switch v-model="globalSetting.caseSensitivity" size="large"/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('search-display-parent-only') }}</span>
|
|
<el-switch v-model="globalSetting.displayParentOnly" size="large"/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('search-scope') }}</span>
|
|
<el-checkbox-group v-model="globalSetting.searchScope" size="default">
|
|
<el-checkbox-button label="wire" border>wire </el-checkbox-button>
|
|
<el-checkbox-button label="reg" border>reg </el-checkbox-button>
|
|
<el-checkbox-button label="module" border>module</el-checkbox-button>
|
|
</el-checkbox-group>
|
|
</div>
|
|
|
|
</div>
|
|
<hr>
|
|
|
|
<div class="setting-section">
|
|
<h2>{{ t('general-setting') }}</h2>
|
|
<div class="setting-option" style="width: 300px;">
|
|
<span class="option-title">{{ t('language-setting') }}</span>
|
|
<el-select name="language-setting" class="language-setting" v-model="locale">
|
|
<el-option
|
|
v-for="option in languageSetting.options"
|
|
:value="option.value"
|
|
:label="option.text"
|
|
:key="option.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="setting-section">
|
|
<h2>{{ t('appearance-setting') }}</h2>
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('display-wave-height') }}</span>
|
|
<el-input-number v-model="globalSetting.displaySignalHeight" :min="1" :max="100" @change="safeModifySignalTrackHeight" size="large"/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('display-signal-info-scope') }}</span>
|
|
<el-checkbox-group v-model="globalSetting.displaySignalInfoScope" size="default">
|
|
<el-checkbox-button label="width" border>width </el-checkbox-button>
|
|
<el-checkbox-button label="parent" border>parent </el-checkbox-button>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { globalSetting } from '@/hook/global';
|
|
import { debounceWrapper } from '@/hook/utils';
|
|
|
|
export default {
|
|
name: 'dide-setting',
|
|
setup() {
|
|
const { t, locale } = useI18n();
|
|
|
|
const languageSetting = reactive({
|
|
options: [
|
|
{
|
|
value: 'en',
|
|
text: 'English'
|
|
},
|
|
{
|
|
value: 'zh',
|
|
text: '中文'
|
|
}
|
|
]
|
|
});
|
|
|
|
function modifySignalTrackHeight() {
|
|
document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');
|
|
}
|
|
|
|
const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200);
|
|
|
|
|
|
return {
|
|
t,
|
|
languageSetting,
|
|
globalSetting,
|
|
safeModifySignalTrackHeight,
|
|
locale
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.setting-wrapper {
|
|
width: 600px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.setting-section {
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border-radius: .3em;
|
|
min-height: 50px;
|
|
}
|
|
|
|
.setting-option {
|
|
margin: 5px;
|
|
padding: 10px 12px;
|
|
height: 40px;
|
|
width: fit-content;
|
|
border-radius: .5em;
|
|
background-color: var(--background);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.option-title {
|
|
min-width: 80px;
|
|
margin-right: 12px;
|
|
}
|
|
</style> |