IM switch

src/components/MyContent.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
+// import { ref, onMounted } from 'vue'
 import { NInput, NSpace } from 'naive-ui'
+import StatusArea from './StatusArea.vue'
+
+// const input = ref<InstanceType<typeof NInput>>()
+
+// onMounted(() => {
+//   input.value.focus()
+// })
 </script>
 
 <template>
   <NSpace class="my-column" vertical>
+    <StatusArea />
+
     <NInput
       type="textarea"
       clearable

src/components/StatusArea.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NSelect, NSpace } from 'naive-ui'
+import { inputMethod, inputMethods, loading } from '../fcitx'
+
+const options = computed(() => {
+  return inputMethods.value.map(({ displayName, name }) => ({
+    label: displayName,
+    value: name,
+  }))
+})
+</script>
+
+<template>
+  <NSpace>
+    <NSelect
+      v-model:value="inputMethod"
+      style="width: 220px"
+      :loading="loading"
+      :options="options"
+    />
+  </NSpace>
+</template>

src/fcitx.ts

@@ -0,0 +1,29 @@
+import { ref, watch } from 'vue'
+import { fcitxReady } from 'fcitx5-js'
+
+export const loading = ref(true)
+
+export const inputMethod = ref('')
+
+watch(inputMethod, (value: string) => {
+  window.fcitx.setCurrentInputMethod(value)
+})
+
+export const inputMethods = ref<{
+  name: string
+  displayName: string
+}[]>([])
+
+function statusAreaCallback() {
+  inputMethods.value = window.fcitx.getInputMethods()
+  inputMethod.value = window.fcitx.currentInputMethod()
+}
+
+fcitxReady.then(() => {
+  window.fcitx.setStatusAreaCallback(statusAreaCallback)
+  window.fcitx.enable()
+  window.fcitx.setInputMethods(['keyboard-us', 'pinyin'])
+  document.querySelector('textarea')?.focus()
+  window.fcitx.updateStatusArea()
+  loading.value = false
+})

src/main.ts

@@ -1,11 +1,5 @@
 import { createApp } from 'vue'
-import { fcitxReady } from 'fcitx5-js'
 import App from './App.vue'
 import './main.css'
 
-fcitxReady.then(() => {
-  window.fcitx.enable()
-  window.fcitx.setInputMethods(['pinyin'])
-})
-
 createApp(App).mount('#app')