jyutping depends on chinese-addons

Author: eagleoflqj

src/InfoIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'MaterialSymbolsInfo',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22" /></svg>
+</template>

src/MustInstall.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { NIcon, NTooltip } from 'naive-ui'
+import { t } from './i18n'
+import InfoIcon from './InfoIcon.vue'
+
+defineProps<{
+  plugin?: string
+}>()
+</script>
+
+<template>
+  <div style="display: flex; align-items: center; gap: 8px">
+    <slot />
+    <NTooltip v-if="plugin" trigger="click">
+      <template #trigger>
+        <NIcon size="16px">
+          <InfoIcon />
+        </NIcon>
+      </template>
+      {{ t('Must install {plugin}', { plugin }) }}
+    </NTooltip>
+  </div>
+</template>

src/PluginManager.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { UploadFileInfo } from 'naive-ui'
-import { NA, NFlex, NList, NListItem, NUpload, NUploadDragger, useMessage } from 'naive-ui'
+import { NA, NFlex, NList, NListItem, NText, NUpload, NUploadDragger, useMessage } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { t } from './i18n'
+import MustInstall from './MustInstall.vue'
 
 defineProps<{
   disabled: boolean
@@ -14,7 +15,7 @@ function getInstalledPlugins() {
   return window.fcitx.getInstalledPlugins().sort()
 }
 
-const allPlugins = ['anthy', 'chewing', 'chinese-addons', 'hallelujah', 'hangul', 'lua', 'm17n', 'mozc', 'rime', 'sayura', 'skk', 'thai', 'unikey']
+const allPlugins = ['anthy', 'chewing', 'chinese-addons', 'hallelujah', 'hangul', 'jyutping', 'lua', 'm17n', 'mozc', 'rime', 'sayura', 'skk', 'thai', 'unikey']
 const installedPlugins = ref<string[]>(getInstalledPlugins())
 const availablePlugins = computed(() => allPlugins.filter(plugin => !installedPlugins.value.includes(plugin)))
 
@@ -54,17 +55,26 @@ async function onUpload(files: UploadFileInfo[]) {
           {{ t('Installed') }}
         </template>
         <NListItem v-for="plugin in installedPlugins" :key="plugin">
-          {{ plugin }}
+          <MustInstall v-if="plugin === 'jyutping' && !installedPlugins.includes('chinese-addons')" plugin="chinese-addons">
+            <NText delete>
+              {{ plugin }}
+            </NText>
+          </MustInstall>
+          <template v-else>
+            {{ plugin }}
+          </template>
         </NListItem>
       </NList>
       <NList style="min-width: 100px">
         <template #header>
           {{ t('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>
+          <MustInstall :plugin="plugin === 'jyutping' ? 'chinese-addons' : undefined">
+            <NA :href="`https://github.com/fcitx-contrib/fcitx5-plugins/releases/download/js/${plugin}.zip`">
+              {{ plugin }}
+            </NA>
+          </MustInstall>
         </NListItem>
       </NList>
     </NFlex>

src/locales/zh-CN.json

@@ -10,6 +10,7 @@
   "Input Method": "输入法",
   "Installed": "已安装",
   "Installed {plugin}": "已安装 {plugin}",
+  "Must install {plugin}": "必须安装 {plugin}",
   "Only show current language": "只显示当前语言",
   "OK": "确定",
   "Plugin Manager": "插件管理器",