perf: add `New Custom Decoder` entrance to decoder dropdown list

This commit is contained in:
Lykin 2024-02-22 10:42:08 +08:00
parent cb9a9ebb8a
commit 64ae79f565
7 changed files with 59 additions and 7 deletions

View File

@ -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"

View File

@ -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>

View File

@ -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,

View File

@ -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" />

View File

@ -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",

View File

@ -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": "自动刷新",

View File

@ -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() {