316 lines
11 KiB
Vue
316 lines
11 KiB
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 class="option-title">{{ t('language-setting') }}</span>
|
|
<div style="width: 100px;">
|
|
<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>
|
|
<br>
|
|
<!-- <div class="setting-option">
|
|
<span class="option-title">
|
|
{{ t('prerender') }}
|
|
<help-icon placement="left"
|
|
:content="t('prerender-description')"
|
|
></help-icon>
|
|
</span>
|
|
<el-switch v-model="globalSetting.prerender" size="default"/>
|
|
</div>
|
|
|
|
<br> -->
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">
|
|
{{ t('render-animation') }}
|
|
</span>
|
|
<el-switch v-model="globalSetting.renderAnimation" size="default"/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option" style="width: 380px;">
|
|
<span class="option-title" style="width: 300px;">
|
|
{{ t('horizontal-scaling-ratio') }}
|
|
<help-icon placement="left"
|
|
:content="t('horizontal-scaling-ratio-description')"
|
|
></help-icon>
|
|
</span>
|
|
<el-slider v-model="globalSetting.HorizontalScalingRatio" show-stops :min="1" :max="5"/>
|
|
</div>
|
|
<br>
|
|
<div class="setting-option" style="width: 380px;">
|
|
<span class="option-title" style="width: 300px;">
|
|
{{ t('horizontal-roll-ratio') }}
|
|
<help-icon placement="left"
|
|
:content="t('horizontal-roll-ratio-description')"
|
|
></help-icon>
|
|
</span>
|
|
<el-slider v-model="globalSetting.HorizontalRollRatio" show-stops :min="1" :max="5"/>
|
|
</div>
|
|
<br>
|
|
<div class="setting-option" style="width: 380px;">
|
|
<span class="option-title" style="width: 300px;">
|
|
{{ t('vertical-roll-ratio') }}
|
|
<help-icon placement="left"
|
|
:content="t('vertical-roll-ratio-description')"
|
|
></help-icon>
|
|
</span>
|
|
<el-slider v-model="globalSetting.VerticalRollRario" show-stops :min="1" :max="5"/>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="setting-section">
|
|
<h2>{{ t('appearance-setting') }}</h2>
|
|
<div class="setting-option">
|
|
<span class="option-title" style="width: 150px;">{{ t('display-wave-height') }}</span>
|
|
<el-input-number v-model="globalSetting.displaySignalHeight" :min="1" :max="100" @change="safeModifySignalTrackHeight" size="default"/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title" style="width: 150px;">{{ t('display-signal-info-scope') }}</span>
|
|
<el-checkbox-group v-model="globalSetting.displaySignalInfoScope" size="default">
|
|
<el-checkbox-button label="width" border>{{ t('display-signal-info-scope.width') }}</el-checkbox-button>
|
|
<el-checkbox-button label="parent" border>{{ t('display-signal-info-scope.parent') }}</el-checkbox-button>
|
|
</el-checkbox-group>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title" style="width: 100px;">{{ t('wavecolor') }}</span>
|
|
<div style="width: 120px">
|
|
<el-select
|
|
v-model="wavecolor.currentOptionIndex"
|
|
collapse-tags
|
|
collapse-tags-tooltip
|
|
placeholder="Select"
|
|
>
|
|
<el-option v-for="option in wavecolor.options" :key="option.value"
|
|
:label="option.label" :value="option.value" />
|
|
</el-select>
|
|
</div>
|
|
<div style="height: 20px; width: 20px;"></div>
|
|
<el-color-picker
|
|
v-model="wavecolor.colors[wavecolor.currentOptionIndex]"
|
|
show-alpha
|
|
:predefine="predefinedColors"
|
|
size="large"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<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="default"/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('search-display-parent-only') }}</span>
|
|
<el-switch v-model="globalSetting.displayParentOnly" size="default"/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('search-scope') }}</span>
|
|
<div style="width: 150px;">
|
|
<el-select
|
|
v-model="globalSetting.searchScope"
|
|
size="large"
|
|
multiple
|
|
collapse-tags
|
|
collapse-tags-tooltip
|
|
placeholder="Select"
|
|
>
|
|
<el-option v-for="name in scopes" :key="name"
|
|
:label="name" :value="name" />
|
|
<el-option v-for="name in variables" :key="name"
|
|
:label="name" :value="name" />
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, defineComponent, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { globalSetting, globalLookup } from '@/hook/global';
|
|
import { debounceWrapper, scopes, variables, predefinedColors, webglColor2rgba, rgba2WebglColor } from '@/hook/utils';
|
|
import { gl_Colors } from '@/hook/wave-view/render-utils';
|
|
|
|
import HelpIcon from '../help-icon.vue';
|
|
|
|
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 wavecolor = reactive({
|
|
options: [
|
|
{
|
|
value: 0,
|
|
label: t('wavecolor.normal-bit')
|
|
},
|
|
{
|
|
value: 1,
|
|
label: t('wavecolor.normal-vec')
|
|
},
|
|
{
|
|
value: 2,
|
|
label: t('wavecolor.high-impedance')
|
|
},
|
|
{
|
|
value: 3,
|
|
label: t('wavecolor.unknown')
|
|
}
|
|
],
|
|
glColorMap: [2, 5, 4, 1],
|
|
currentOptionIndex: 0,
|
|
colors: [
|
|
webglColor2rgba(...gl_Colors.slice(2 * 4, 2 * 4 + 4)),
|
|
webglColor2rgba(...gl_Colors.slice(5 * 4, 5 * 4 + 4)),
|
|
webglColor2rgba(...gl_Colors.slice(4 * 4, 4 * 4 + 4)),
|
|
webglColor2rgba(...gl_Colors.slice(1 * 4, 1 * 4 + 4)),
|
|
],
|
|
reset() {}
|
|
});
|
|
|
|
watch(() => wavecolor.currentOptionIndex, () => {
|
|
console.log(wavecolor.currentOptionIndex);
|
|
});
|
|
|
|
// 更新默认波形颜色
|
|
watch(() => wavecolor.colors, () => {
|
|
const colorString = wavecolor.colors[wavecolor.currentOptionIndex];
|
|
const rgba = rgba2WebglColor(colorString);
|
|
if (rgba !== undefined) {
|
|
const currentOption = wavecolor.options[wavecolor.currentOptionIndex];
|
|
const waveRender = globalLookup.getWaveRender();
|
|
const glColorIndex = wavecolor.glColorMap[currentOption.value];
|
|
const colorUpdaters = [{ index: glColorIndex, rgba }];
|
|
if (glColorIndex === 2) {
|
|
// 默认情况下， value = 0 和 value = 1 保持一致
|
|
colorUpdaters.push({ index: 3, rgba });
|
|
}
|
|
waveRender.updateGLColor(colorUpdaters, { updateMask: true });
|
|
}
|
|
}, { deep: true });
|
|
|
|
|
|
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 waveRender = globalLookup.getWaveRender();
|
|
waveRender.render();
|
|
}
|
|
|
|
const safeModifySignalTrackHeight = debounceWrapper(modifySignalTrackHeight, 200);
|
|
</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: 5px;
|
|
padding: 8px 12px;
|
|
height: 40px;
|
|
width: fit-content;
|
|
border-radius: .5em;
|
|
background-color: var(--background);
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.option-title {
|
|
min-width: 80px;
|
|
margin-right: 12px;
|
|
user-select: none;
|
|
}
|
|
|
|
.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(--sidebar-item-text) !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);
|
|
}
|
|
</style> |