tweak ui

packages/client/src/pages/settings/plugin.vue

@@ -1,23 +1,54 @@
 <template>
-<FormBase>
+<div class="_formRoot">
 	<FormLink to="/settings/plugin/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._plugin.install }}</FormLink>
-	<FormLink to="/settings/plugin/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._plugin.manage }}<template #suffix>{{ plugins }}</template></FormLink>
-</FormBase>
+
+	<FormSection>
+		<template #label>{{ $ts.manage }}</template>
+		<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel" style="padding: 20px;">
+			<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
+
+			<FormSwitch class="_formBlock" :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch>
+
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ $ts.author }}</template>
+				<template #value>{{ plugin.author }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ $ts.description }}</template>
+				<template #value>{{ plugin.description }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ $ts.permission }}</template>
+				<template #value>{{ plugin.permission }}</template>
+			</MkKeyValue>
+
+			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton>
+				<MkButton inline danger @click="uninstall(plugin)"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton>
+			</div>
+		</div>
+	</FormSection>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormLink from '@/components/debobigego/link.vue';
+import FormLink from '@/components/form/link.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkKeyValue from '@/components/key-value.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormLink,
+		FormSwitch,
+		FormSection,
+		MkButton,
+		MkKeyValue,
 	},
 
 	emits: ['info'],
@@ -29,13 +60,52 @@ export default defineComponent({
 				icon: 'fas fa-plug',
 				bg: 'var(--bg)',
 			},
-			plugins: ColdDeviceStorage.get('plugins').length,
+			plugins: ColdDeviceStorage.get('plugins'),
 		}
 	},
 
 	mounted() {
 		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
+
+	methods: {
+		uninstall(plugin) {
+			ColdDeviceStorage.set('plugins', this.plugins.filter(x => x.id !== plugin.id));
+			os.success();
+			this.$nextTick(() => {
+				unisonReload();
+			});
+		},
+
+		// TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
+		async config(plugin) {
+			const config = plugin.config;
+			for (const key in plugin.configData) {
+				config[key].default = plugin.configData[key];
+			}
+
+			const { canceled, result } = await os.form(plugin.name, config);
+			if (canceled) return;
+
+			const plugins = ColdDeviceStorage.get('plugins');
+			plugins.find(p => p.id === plugin.id).configData = result;
+			ColdDeviceStorage.set('plugins', plugins);
+
+			this.$nextTick(() => {
+				location.reload();
+			});
+		},
+
+		changeActive(plugin, active) {
+			const plugins = ColdDeviceStorage.get('plugins');
+			plugins.find(p => p.id === plugin.id).active = active;
+			ColdDeviceStorage.set('plugins', plugins);
+
+			this.$nextTick(() => {
+				location.reload();
+			});
+		}
+	},
 });
 </script>