perf: add `New Custom Decoder` entrance to decoder dropdown list
This commit is contained in:
parent
cb9a9ebb8a
commit
64ae79f565
|
@ -1,8 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, h, ref } from 'vue'
|
import { computed, h, ref } from 'vue'
|
||||||
import { get, isEmpty } from 'lodash'
|
import { get, isEmpty, some } from 'lodash'
|
||||||
import { NIcon, NText } from 'naive-ui'
|
import { NIcon, NText } from 'naive-ui'
|
||||||
import { useRender } from '@/utils/render.js'
|
import { useRender } from '@/utils/render.js'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
value: {
|
value: {
|
||||||
|
@ -13,6 +14,10 @@ const props = defineProps({
|
||||||
type: Array,
|
type: Array,
|
||||||
value: () => [],
|
value: () => [],
|
||||||
},
|
},
|
||||||
|
menuOption: {
|
||||||
|
type: Array,
|
||||||
|
value: () => [],
|
||||||
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
@ -21,7 +26,8 @@ const props = defineProps({
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['update:value'])
|
const emit = defineEmits(['update:value', 'menu'])
|
||||||
|
const i18n = useI18n()
|
||||||
const render = useRender()
|
const render = useRender()
|
||||||
|
|
||||||
const renderHeader = () => {
|
const renderHeader = () => {
|
||||||
|
@ -65,11 +71,28 @@ const dropdownOption = computed(() => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!isEmpty(props.menuOption)) {
|
||||||
|
options.push({
|
||||||
|
key: 'header-divider',
|
||||||
|
type: 'divider',
|
||||||
|
})
|
||||||
|
for (const { key, label } of props.menuOption) {
|
||||||
|
options.push({
|
||||||
|
key,
|
||||||
|
label: i18n.t(label),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
return options
|
return options
|
||||||
})
|
})
|
||||||
|
|
||||||
const onDropdownSelect = (key) => {
|
const onDropdownSelect = (key) => {
|
||||||
|
if (some(props.menuOption, { key })) {
|
||||||
|
emit('menu', key)
|
||||||
|
} else {
|
||||||
emit('update:value', key)
|
emit('update:value', key)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const buttonText = computed(() => {
|
const buttonText = computed(() => {
|
||||||
|
@ -88,7 +111,6 @@ const onDropdownShow = (show) => {
|
||||||
:options="dropdownOption"
|
:options="dropdownOption"
|
||||||
:render-label="({ label }) => render.renderLabel(label, { class: 'type-selector-item' })"
|
:render-label="({ label }) => render.renderLabel(label, { class: 'type-selector-item' })"
|
||||||
:show-arrow="true"
|
:show-arrow="true"
|
||||||
:title="props.tooltip"
|
|
||||||
:value="props.value"
|
:value="props.value"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
@select="onDropdownSelect"
|
@select="onDropdownSelect"
|
||||||
|
|
|
@ -6,6 +6,7 @@ import DropdownSelector from '@/components/common/DropdownSelector.vue'
|
||||||
import { includes, isEmpty, map, pull, some, values } from 'lodash'
|
import { includes, isEmpty, map, pull, some, values } from 'lodash'
|
||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import usePreferencesStore from 'stores/preferences.js'
|
import usePreferencesStore from 'stores/preferences.js'
|
||||||
|
import useDialogStore from 'stores/dialog.js'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
decode: {
|
decode: {
|
||||||
|
@ -20,6 +21,7 @@ const props = defineProps({
|
||||||
})
|
})
|
||||||
|
|
||||||
const prefStore = usePreferencesStore()
|
const prefStore = usePreferencesStore()
|
||||||
|
const dialogStore = useDialogStore()
|
||||||
|
|
||||||
const formatTypeOption = computed(() => {
|
const formatTypeOption = computed(() => {
|
||||||
return map(formatTypes, (t) => t)
|
return map(formatTypes, (t) => t)
|
||||||
|
@ -46,6 +48,15 @@ const decodeTypeOption = computed(() => {
|
||||||
return [buildinTypes, customTypes]
|
return [buildinTypes, customTypes]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const decodeMenuOption = computed(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
key: 'new_rdm_decoder',
|
||||||
|
label: 'interface.custom_decoder',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['formatChanged', 'update:decode', 'update:format'])
|
const emit = defineEmits(['formatChanged', 'update:decode', 'update:format'])
|
||||||
const onFormatChanged = (selDecode, selFormat) => {
|
const onFormatChanged = (selDecode, selFormat) => {
|
||||||
const [buildin, external] = decodeTypeOption.value
|
const [buildin, external] = decodeTypeOption.value
|
||||||
|
@ -64,6 +75,14 @@ const onFormatChanged = (selDecode, selFormat) => {
|
||||||
emit('update:format', selFormat)
|
emit('update:format', selFormat)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onDecodeMenu = (key) => {
|
||||||
|
switch (key) {
|
||||||
|
case 'new_rdm_decoder':
|
||||||
|
dialogStore.openPreferencesDialog('decoder')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -81,9 +100,11 @@ const onFormatChanged = (selDecode, selFormat) => {
|
||||||
:default="decodeTypes.NONE"
|
:default="decodeTypes.NONE"
|
||||||
:disabled="props.disabled"
|
:disabled="props.disabled"
|
||||||
:icon="Conversion"
|
:icon="Conversion"
|
||||||
|
:menu-option="decodeMenuOption"
|
||||||
:options="decodeTypeOption"
|
:options="decodeTypeOption"
|
||||||
:tooltip="$t('interface.decode_with')"
|
:tooltip="$t('interface.decode_with')"
|
||||||
:value="props.decode"
|
:value="props.decode"
|
||||||
|
@menu="onDecodeMenu"
|
||||||
@update:value="(d) => onFormatChanged(d, '')" />
|
@update:value="(d) => onFormatChanged(d, '')" />
|
||||||
</n-space>
|
</n-space>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -25,7 +25,7 @@ const loading = ref(false)
|
||||||
const initPreferences = async () => {
|
const initPreferences = async () => {
|
||||||
try {
|
try {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
tab.value = 'general'
|
tab.value = dialogStore.preferencesTag || 'general'
|
||||||
await prefStore.loadPreferences()
|
await prefStore.loadPreferences()
|
||||||
prevPreferences.value = {
|
prevPreferences.value = {
|
||||||
general: prefStore.general,
|
general: prefStore.general,
|
||||||
|
|
|
@ -169,20 +169,23 @@ const exThemeVars = computed(() => {
|
||||||
v-if="prefStore.currentLanguage === 'zh'"
|
v-if="prefStore.currentLanguage === 'zh'"
|
||||||
:icon="QRCode"
|
:icon="QRCode"
|
||||||
:size="iconSize"
|
:size="iconSize"
|
||||||
|
:tooltip-delay="100"
|
||||||
class="nav-menu-button"
|
class="nav-menu-button"
|
||||||
t-tooltip="ribbon.wechat_official"
|
t-tooltip="ribbon.wechat_official"
|
||||||
@click="openWechatOfficial" />
|
@click="openWechatOfficial" />
|
||||||
<icon-button
|
<icon-button
|
||||||
v-else
|
v-else
|
||||||
:icon="Twitter"
|
|
||||||
:border="false"
|
:border="false"
|
||||||
|
:icon="Twitter"
|
||||||
:size="iconSize"
|
:size="iconSize"
|
||||||
|
:tooltip-delay="100"
|
||||||
class="nav-menu-button"
|
class="nav-menu-button"
|
||||||
t-tooltip="ribbon.follow_x"
|
t-tooltip="ribbon.follow_x"
|
||||||
@click="openX" />
|
@click="openX" />
|
||||||
<icon-button
|
<icon-button
|
||||||
:icon="Github"
|
:icon="Github"
|
||||||
:size="iconSize"
|
:size="iconSize"
|
||||||
|
:tooltip-delay="100"
|
||||||
class="nav-menu-button"
|
class="nav-menu-button"
|
||||||
t-tooltip="ribbon.github"
|
t-tooltip="ribbon.github"
|
||||||
@click="openGithub" />
|
@click="openGithub" />
|
||||||
|
|
|
@ -127,6 +127,7 @@
|
||||||
"memory_usage": "Memory Usage",
|
"memory_usage": "Memory Usage",
|
||||||
"view_as": "View As",
|
"view_as": "View As",
|
||||||
"decode_with": "Decode / Decompression",
|
"decode_with": "Decode / Decompression",
|
||||||
|
"custom_decoder": "New Custom Decoder",
|
||||||
"reload": "Reload",
|
"reload": "Reload",
|
||||||
"reload_disable": "Reload will enable after full loaded",
|
"reload_disable": "Reload will enable after full loaded",
|
||||||
"auto_refresh": "Auto Refresh",
|
"auto_refresh": "Auto Refresh",
|
||||||
|
|
|
@ -127,6 +127,7 @@
|
||||||
"memory_usage": "内存占用",
|
"memory_usage": "内存占用",
|
||||||
"view_as": "查看方式",
|
"view_as": "查看方式",
|
||||||
"decode_with": "解码/解压方式",
|
"decode_with": "解码/解压方式",
|
||||||
|
"custom_decoder": "添加自定义解码",
|
||||||
"reload": "重新载入",
|
"reload": "重新载入",
|
||||||
"reload_disable": "全量加载后可重新载入",
|
"reload_disable": "全量加载后可重新载入",
|
||||||
"auto_refresh": "自动刷新",
|
"auto_refresh": "自动刷新",
|
||||||
|
|
|
@ -102,6 +102,8 @@ const useDialogStore = defineStore('dialog', {
|
||||||
},
|
},
|
||||||
|
|
||||||
preferencesDialogVisible: false,
|
preferencesDialogVisible: false,
|
||||||
|
preferencesTag: '',
|
||||||
|
|
||||||
aboutDialogVisible: false,
|
aboutDialogVisible: false,
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
|
@ -346,11 +348,13 @@ const useDialogStore = defineStore('dialog', {
|
||||||
this.decodeDialogVisible = false
|
this.decodeDialogVisible = false
|
||||||
},
|
},
|
||||||
|
|
||||||
openPreferencesDialog() {
|
openPreferencesDialog(tag = '') {
|
||||||
this.preferencesDialogVisible = true
|
this.preferencesDialogVisible = true
|
||||||
|
this.preferencesTag = tag
|
||||||
},
|
},
|
||||||
closePreferencesDialog() {
|
closePreferencesDialog() {
|
||||||
this.preferencesDialogVisible = false
|
this.preferencesDialogVisible = false
|
||||||
|
this.preferencesTag = ''
|
||||||
},
|
},
|
||||||
|
|
||||||
openAboutDialog() {
|
openAboutDialog() {
|
||||||
|
|
Loading…
Reference in New Issue