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

frontend/src/components/common/DropdownSelector.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { computed, h, ref } from 'vue'
-import { get, isEmpty } from 'lodash'
+import { get, isEmpty, some } from 'lodash'
 import { NIcon, NText } from 'naive-ui'
 import { useRender } from '@/utils/render.js'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
     value: {
@@ -13,6 +14,10 @@ const props = defineProps({
         type: Array,
         value: () => [],
     },
+    menuOption: {
+        type: Array,
+        value: () => [],
+    },
     tooltip: {
         type: String,
     },
@@ -21,7 +26,8 @@ const props = defineProps({
     disabled: Boolean,
 })
 
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:value', 'menu'])
+const i18n = useI18n()
 const render = useRender()
 
 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
 })
 
 const onDropdownSelect = (key) => {
+    if (some(props.menuOption, { key })) {
+        emit('menu', key)
+    } else {
         emit('update:value', key)
+    }
 }
 
 const buttonText = computed(() => {
@@ -88,7 +111,6 @@ const onDropdownShow = (show) => {
         :options="dropdownOption"
         :render-label="({ label }) => render.renderLabel(label, { class: 'type-selector-item' })"
         :show-arrow="true"
-        :title="props.tooltip"
         :value="props.value"
         trigger="click"
         @select="onDropdownSelect"

frontend/src/components/content_value/FormatSelector.vue

@@ -6,6 +6,7 @@ import DropdownSelector from '@/components/common/DropdownSelector.vue'
 import { includes, isEmpty, map, pull, some, values } from 'lodash'
 import { computed } from 'vue'
 import usePreferencesStore from 'stores/preferences.js'
+import useDialogStore from 'stores/dialog.js'
 
 const props = defineProps({
     decode: {
@@ -20,6 +21,7 @@ const props = defineProps({
 })
 
 const prefStore = usePreferencesStore()
+const dialogStore = useDialogStore()
 
 const formatTypeOption = computed(() => {
     return map(formatTypes, (t) => t)
@@ -46,6 +48,15 @@ const decodeTypeOption = computed(() => {
     return [buildinTypes, customTypes]
 })
 
+const decodeMenuOption = computed(() => {
+    return [
+        {
+            key: 'new_rdm_decoder',
+            label: 'interface.custom_decoder',
+        },
+    ]
+})
+
 const emit = defineEmits(['formatChanged', 'update:decode', 'update:format'])
 const onFormatChanged = (selDecode, selFormat) => {
     const [buildin, external] = decodeTypeOption.value
@@ -64,6 +75,14 @@ const onFormatChanged = (selDecode, selFormat) => {
         emit('update:format', selFormat)
     }
 }
+
+const onDecodeMenu = (key) => {
+    switch (key) {
+        case 'new_rdm_decoder':
+            dialogStore.openPreferencesDialog('decoder')
+            break
+    }
+}
 </script>
 
 <template>
@@ -81,9 +100,11 @@ const onFormatChanged = (selDecode, selFormat) => {
             :default="decodeTypes.NONE"
             :disabled="props.disabled"
             :icon="Conversion"
+            :menu-option="decodeMenuOption"
             :options="decodeTypeOption"
             :tooltip="$t('interface.decode_with')"
             :value="props.decode"
+            @menu="onDecodeMenu"
             @update:value="(d) => onFormatChanged(d, '')" />
     </n-space>
 </template>

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -25,7 +25,7 @@ const loading = ref(false)
 const initPreferences = async () => {
     try {
         loading.value = true
-        tab.value = 'general'
+        tab.value = dialogStore.preferencesTag || 'general'
         await prefStore.loadPreferences()
         prevPreferences.value = {
             general: prefStore.general,

frontend/src/components/sidebar/Ribbon.vue

@@ -169,20 +169,23 @@ const exThemeVars = computed(() => {
                 v-if="prefStore.currentLanguage === 'zh'"
                 :icon="QRCode"
                 :size="iconSize"
+                :tooltip-delay="100"
                 class="nav-menu-button"
                 t-tooltip="ribbon.wechat_official"
                 @click="openWechatOfficial" />
             <icon-button
                 v-else
-                :icon="Twitter"
                 :border="false"
+                :icon="Twitter"
                 :size="iconSize"
+                :tooltip-delay="100"
                 class="nav-menu-button"
                 t-tooltip="ribbon.follow_x"
                 @click="openX" />
             <icon-button
                 :icon="Github"
                 :size="iconSize"
+                :tooltip-delay="100"
                 class="nav-menu-button"
                 t-tooltip="ribbon.github"
                 @click="openGithub" />

frontend/src/langs/en-us.json

@@ -127,6 +127,7 @@
     "memory_usage": "Memory Usage",
     "view_as": "View As",
     "decode_with": "Decode / Decompression",
+    "custom_decoder": "New Custom Decoder",
     "reload": "Reload",
     "reload_disable": "Reload will enable after full loaded",
     "auto_refresh": "Auto Refresh",

frontend/src/langs/zh-cn.json

@@ -127,6 +127,7 @@
     "memory_usage": "内存占用",
     "view_as": "查看方式",
     "decode_with": "解码/解压方式",
+    "custom_decoder": "添加自定义解码",
     "reload": "重新载入",
     "reload_disable": "全量加载后可重新载入",
     "auto_refresh": "自动刷新",

frontend/src/stores/dialog.js

@@ -102,6 +102,8 @@ const useDialogStore = defineStore('dialog', {
         },
 
         preferencesDialogVisible: false,
+        preferencesTag: '',
+
         aboutDialogVisible: false,
     }),
     actions: {
@@ -346,11 +348,13 @@ const useDialogStore = defineStore('dialog', {
             this.decodeDialogVisible = false
         },
 
-        openPreferencesDialog() {
+        openPreferencesDialog(tag = '') {
             this.preferencesDialogVisible = true
+            this.preferencesTag = tag
         },
         closePreferencesDialog() {
             this.preferencesDialogVisible = false
+            this.preferencesTag = ''
         },
 
         openAboutDialog() {