|
| 1 | +<script setup lang="ts"> |
| 2 | +import type { UploadFileInfo } from 'naive-ui' |
| 3 | +import { NA, NFlex, NList, NListItem, NUpload, NUploadDragger, useMessage } from 'naive-ui' |
| 4 | +import { computed, ref } from 'vue' |
| 5 | +
|
| 6 | +const message = useMessage() |
| 7 | +
|
| 8 | +function getInstalledPlugins() { |
| 9 | + return window.fcitx.getInstalledPlugins().sort() |
| 10 | +} |
| 11 | +
|
| 12 | +const allPlugins = ['anthy', 'chewing', 'chinese-addons', 'hallelujah', 'hangul', 'lua', 'rime', 'sayura', 'thai', 'unikey'] |
| 13 | +const installedPlugins = ref<string[]>(getInstalledPlugins()) |
| 14 | +const availablePlugins = computed(() => allPlugins.filter(plugin => !installedPlugins.value.includes(plugin))) |
| 15 | +
|
| 16 | +const fileList = ref<UploadFileInfo[]>([]) |
| 17 | +
|
| 18 | +async function onUpload(files: UploadFileInfo[]) { |
| 19 | + // Must clear the fileList synchronously first as uploading multiple files will trigger multiple times. |
| 20 | + fileList.value = [] |
| 21 | + for (const file of files) { |
| 22 | + let name: string |
| 23 | + const buffer = await file.file!.arrayBuffer() |
| 24 | + try { |
| 25 | + name = window.fcitx.installPlugin(buffer) |
| 26 | + } |
| 27 | + catch (e: any) { |
| 28 | + message.error(e.message) |
| 29 | + continue |
| 30 | + } |
| 31 | + window.fcitx.updateStatusArea() |
| 32 | + installedPlugins.value = getInstalledPlugins() |
| 33 | + message.success(`Installed ${name}`) |
| 34 | + } |
| 35 | +} |
| 36 | +</script> |
| 37 | + |
| 38 | +<template> |
| 39 | + <NFlex size="large"> |
| 40 | + <NUpload v-model:file-list="fileList" style="width: auto" multiple accept=".zip" @update:file-list="onUpload"> |
| 41 | + <NUploadDragger style="height: 200px"> |
| 42 | + Download and drag zip to this area |
| 43 | + </NUploadDragger> |
| 44 | + </NUpload> |
| 45 | + <NFlex> |
| 46 | + <NList style="min-width: 100px"> |
| 47 | + <template #header> |
| 48 | + Installed |
| 49 | + </template> |
| 50 | + <NListItem v-for="plugin in installedPlugins" :key="plugin"> |
| 51 | + {{ plugin }} |
| 52 | + </NListItem> |
| 53 | + </NList> |
| 54 | + <NList style="min-width: 100px"> |
| 55 | + <template #header> |
| 56 | + Available |
| 57 | + </template> |
| 58 | + <NListItem v-for="plugin in availablePlugins" :key="plugin"> |
| 59 | + <NA :href="`https://github.com/fcitx-contrib/fcitx5-plugins/releases/download/js/${plugin}.zip`"> |
| 60 | + {{ plugin }} |
| 61 | + </NA> |
| 62 | + </NListItem> |
| 63 | + </NList> |
| 64 | + </NFlex> |
| 65 | + </NFlex> |
| 66 | +</template> |
0 commit comments