476 lines
16 KiB
Vue
476 lines
16 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>
|
|
<span class="iconfont icon-i18n"></span>
|
|
 
|
|
<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('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"
|
|
active-text="ON"
|
|
inactive-text="OFF"
|
|
/>
|
|
</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>
|
|
|
|
|
|
<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 value="width" border>{{ t('display-signal-info-scope.width') }}</el-checkbox-button>
|
|
<el-checkbox-button value="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 class="option-group">
|
|
<div style="width: 100px;">
|
|
<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]"
|
|
:predefine="predefinedColors"
|
|
:teleported="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title" style="width: 100px;">{{ t('setting.appearance.pivot-color') }}</span>
|
|
<div class="option-group">
|
|
<div style="width: 100px;">
|
|
<el-select
|
|
v-model="pivotColor.currentOptionIndex"
|
|
collapse-tags
|
|
collapse-tags-tooltip
|
|
placeholder="Select"
|
|
>
|
|
<el-option v-for="option in pivotColor.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="pivotColor.colors[pivotColor.currentOptionIndex]"
|
|
:predefine="predefinedColors"
|
|
:teleported="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<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"
|
|
active-text="ON"
|
|
inactive-text="OFF"
|
|
/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('search-display-parent-only') }}</span>
|
|
<el-switch
|
|
v-model="globalSetting.displayParentOnly"
|
|
active-text="ON"
|
|
inactive-text="OFF"
|
|
/>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="setting-option">
|
|
<span class="option-title">{{ t('search-scope') }}</span>
|
|
<div style="width: 150px;">
|
|
<el-select
|
|
v-model="globalSetting.searchScope"
|
|
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, ref } 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';
|
|
import { UserPivotColor } from '../pivot/pivot-view';
|
|
import { MovingPivot, SystemPivot } from '../pivot/cursor';
|
|
|
|
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 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() {}
|
|
});
|
|
|
|
const pivotColor = reactive({
|
|
options: [
|
|
{
|
|
value: 0,
|
|
label: t('setting.appearance.moving-pivot')
|
|
},
|
|
{
|
|
value: 1,
|
|
label: t('setting.appearance.user-pivot')
|
|
},
|
|
{
|
|
value: 2,
|
|
label: t('setting.appearance.system-pivot')
|
|
}
|
|
],
|
|
currentOptionIndex: 0,
|
|
colors: [
|
|
MovingPivot.color,
|
|
UserPivotColor.value,
|
|
SystemPivot.color
|
|
]
|
|
});
|
|
|
|
|
|
|
|
// 更新默认波形颜色
|
|
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 });
|
|
|
|
// 更新信标颜色
|
|
watch(() => pivotColor.colors, () => {
|
|
const colorString = pivotColor.colors[pivotColor.currentOptionIndex];
|
|
switch (pivotColor.currentOptionIndex) {
|
|
case 0:
|
|
MovingPivot.color = colorString;
|
|
break;
|
|
case 1:
|
|
UserPivotColor.value = colorString;
|
|
break;
|
|
case 2:
|
|
SystemPivot.color = colorString;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}, { deep: 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: 'العربية'
|
|
}
|
|
]
|
|
});
|
|
|
|
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: 3px;
|
|
padding: 8px 12px;
|
|
height: 40px;
|
|
width: 360px !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> |