KeyOption

src/BasicConfig.vue

@@ -5,6 +5,7 @@ import type { Config } from 'fcitx5-js'
 import IntegerOption from './option/IntegerOption.vue'
 import BooleanOption from './option/BooleanOption.vue'
 import EnumOption from './option/EnumOption.vue'
+import KeyOption from './option/KeyOption.vue'
 import GroupOption from './option/GroupOption.vue'
 import UnknownOption from './option/UnknownOption.vue'
 import { isMobile } from './util'
@@ -26,6 +27,8 @@ function toComponent(child: { Type: string, Children: any[] | null }) {
       return BooleanOption
     case 'Enum':
       return EnumOption
+    case 'Key':
+      return KeyOption
     default: {
       if (child.Children) {
         return GroupOption

src/option/KeyOption.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { NButton } from 'naive-ui'
+
+const props = defineProps<{
+  value: string
+  onUpdate: (value: string) => void
+}>()
+
+const recording = ref(false)
+const pressed = ref(false)
+const label = computed(() => recording.value && !pressed.value ? '●' : props.value || '●REC')
+
+function keydown(e: KeyboardEvent) {
+  pressed.value = true
+  props.onUpdate(window.fcitx.jsKeyToFcitxString(e))
+}
+
+function click() {
+  recording.value = true
+  pressed.value = false
+}
+
+function blur() {
+  recording.value = false
+}
+</script>
+
+<template>
+  <NButton
+    @keydown.stop.prevent="keydown"
+    @click="click"
+    @blur="blur"
+  >
+    {{ label }}
+  </NButton>
+</template>