plugin manager

.gitignore

@@ -1,4 +1,6 @@
+.DS_Store
 node_modules
 pnpm-lock.yaml
 dist
 *.tgz
+*.zip

src/App.vue

@@ -3,6 +3,7 @@ import {
   darkTheme,
   NConfigProvider,
   NH1,
+  NMessageProvider,
   NModalProvider,
   useOsTheme,
 } from 'naive-ui'
@@ -26,7 +27,9 @@ const osThemeRef = useOsTheme()
           <NH1>{{ appName }}</NH1>
         </div>
         <NModalProvider>
-          <MyContent />
+          <NMessageProvider>
+            <MyContent />
+          </NMessageProvider>
         </NModalProvider>
       </template>
       <template #footer>

src/components/PlugIcon.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+export default {
+  name: 'MaterialSymbolsPowerPlugOutlineRounded',
+}
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.5 19h1v-1.85l3.5-3.5V9H8v4.65l3.5 3.5zm-2 1v-2l-2.925-2.925q-.275-.275-.425-.637T6 13.675V9q0-.825.588-1.412T8 7h1L8 8V4q0-.425.288-.712T9 3t.713.288T10 4v3h4V4q0-.425.288-.712T15 3t.713.288T16 4v4l-1-1h1q.825 0 1.413.588T18 9v4.675q0 .4-.15.763t-.425.637L14.5 18v2q0 .425-.288.713T13.5 21h-3q-.425 0-.712-.288T9.5 20m2.5-6" /></svg>
+</template>

src/components/PluginButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { NButton, NIcon } from 'naive-ui'
+import PlugIcon from './PlugIcon.vue'
+</script>
+
+<template>
+  <NButton
+    secondary
+  >
+    <template #icon>
+      <NIcon>
+        <PlugIcon />
+      </NIcon>
+    </template>
+  </NButton>
+</template>

src/components/StatusArea.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { AdvancedConfig, GearButton, GlobalConfig, InputMethodConfig, ThemeConfig } from 'fcitx5-config-vue'
+import { AdvancedConfig, GearButton, GlobalConfig, InputMethodConfig, PluginManager, ThemeConfig } from 'fcitx5-config-vue'
 import { NModal, NSelect, NSpace, NTooltip } from 'naive-ui'
 import { computed, ref } from 'vue'
 import { inputMethod, inputMethods, loading } from '../fcitx'
 import AdvancedButton from './AdvancedButton.vue'
 import GlobalButton from './GlobalButton.vue'
 import MenuButton from './MenuButton.vue'
+import PluginButton from './PluginButton.vue'
 import ThemeButton from './ThemeButton.vue'
 
 const options = computed(() => {
@@ -16,12 +17,13 @@ const options = computed(() => {
 })
 
 const showModal = ref(false)
-const modalType = ref<'im' | 'global' | 'theme' | 'advanced'>('im')
+const modalType = ref<'im' | 'global' | 'theme' | 'plugin' | 'advanced'>('im')
 
 const titleMap = {
   im: 'Input Method',
   global: 'Global Config',
   theme: 'Theme Editor',
+  plugin: 'Plugin Manager',
   advanced: 'Advanced',
 }
 </script>
@@ -53,6 +55,12 @@ const titleMap = {
       </template>
       {{ titleMap.theme }}
     </NTooltip>
+    <NTooltip>
+      <template #trigger>
+        <PluginButton @click="modalType = 'plugin'; showModal = true" />
+      </template>
+      {{ titleMap.plugin }}
+    </NTooltip>
     <NTooltip>
       <template #trigger>
         <AdvancedButton @click="modalType = 'advanced'; showModal = true" />
@@ -61,6 +69,7 @@ const titleMap = {
     </NTooltip>
     <NModal
       v-model:show="showModal"
+      :style="modalType === 'plugin' ? 'width: auto' : 'max-width: 1024px'"
       preset="card"
       :title="titleMap[modalType]"
     >
@@ -78,6 +87,10 @@ const titleMap = {
         v-else-if="modalType === 'theme'"
         @close="showModal = false"
       />
+      <PluginManager
+        v-else-if="modalType === 'plugin'"
+        @close="showModal = false"
+      />
       <AdvancedConfig
         v-else
         @close="showModal = false"