plugin manager

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 node_modules
 dist
 pnpm-lock.yaml

src/PluginManager.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { UploadFileInfo } from 'naive-ui'
+import { NA, NFlex, NList, NListItem, NUpload, NUploadDragger, useMessage } from 'naive-ui'
+import { computed, ref } from 'vue'
+
+const message = useMessage()
+
+function getInstalledPlugins() {
+  return window.fcitx.getInstalledPlugins().sort()
+}
+
+const allPlugins = ['anthy', 'chewing', 'chinese-addons', 'hallelujah', 'hangul', 'lua', 'rime', 'sayura', 'thai', 'unikey']
+const installedPlugins = ref<string[]>(getInstalledPlugins())
+const availablePlugins = computed(() => allPlugins.filter(plugin => !installedPlugins.value.includes(plugin)))
+
+const fileList = ref<UploadFileInfo[]>([])
+
+async function onUpload(files: UploadFileInfo[]) {
+  // Must clear the fileList synchronously first as uploading multiple files will trigger multiple times.
+  fileList.value = []
+  for (const file of files) {
+    let name: string
+    const buffer = await file.file!.arrayBuffer()
+    try {
+      name = window.fcitx.installPlugin(buffer)
+    }
+    catch (e: any) {
+      message.error(e.message)
+      continue
+    }
+    window.fcitx.updateStatusArea()
+    installedPlugins.value = getInstalledPlugins()
+    message.success(`Installed ${name}`)
+  }
+}
+</script>
+
+<template>
+  <NFlex size="large">
+    <NUpload v-model:file-list="fileList" style="width: auto" multiple accept=".zip" @update:file-list="onUpload">
+      <NUploadDragger style="height: 200px">
+        Download and drag zip to this area
+      </NUploadDragger>
+    </NUpload>
+    <NFlex>
+      <NList style="min-width: 100px">
+        <template #header>
+          Installed
+        </template>
+        <NListItem v-for="plugin in installedPlugins" :key="plugin">
+          {{ plugin }}
+        </NListItem>
+      </NList>
+      <NList style="min-width: 100px">
+        <template #header>
+          Available
+        </template>
+        <NListItem v-for="plugin in availablePlugins" :key="plugin">
+          <NA :href="`https://github.com/fcitx-contrib/fcitx5-plugins/releases/download/js/${plugin}.zip`">
+            {{ plugin }}
+          </NA>
+        </NListItem>
+      </NList>
+    </NFlex>
+  </NFlex>
+</template>

src/index.ts

@@ -2,4 +2,5 @@ export { default as AdvancedConfig } from './AdvancedConfig.vue'
 export { default as GearButton } from './GearButton.vue'
 export { default as GlobalConfig } from './GlobalConfig.vue'
 export { default as InputMethodConfig } from './InputMethodConfig.vue'
+export { default as PluginManager } from './PluginManager.vue'
 export { default as ThemeConfig } from './ThemeConfig.vue'