Improve plugin setting

locales/ja-JP.yml

@@ -548,7 +548,6 @@ author: "作者"
 leaveConfirm: "未保存の変更があります。破棄しますか？"
 manage: "管理"
 plugins: "プラグイン"
-pluginInstallWarn: "信頼できないプラグインはインストールしないでください。"
 deck: "デッキ"
 undeck: "デッキ解除"
 useBlurEffectForModal: "モーダルにぼかし効果を使用"
@@ -702,6 +701,11 @@ inUse: "使用中"
 editCode: "コードを編集"
 apply: "適用"
 
+_plugin:
+  install: "プラグインのインストール"
+  installWarn: "信頼できないプラグインはインストールしないでください。"
+  manage: "プラグインの管理"
+
 _registry:
   scope: "スコープ"
   key: "キー"

src/client/pages/settings/index.vue

@@ -18,7 +18,7 @@
 			<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><Fa :icon="faPalette"/></template>{{ $ts.theme }}</FormLink>
 			<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><Fa :icon="faListUl"/></template>{{ $ts.sidebar }}</FormLink>
 			<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><Fa :icon="faMusic"/></template>{{ $ts.sounds }}</FormLink>
-			<FormLink :active="page === 'plugins'" replace to="/settings/plugins"><template #icon><Fa :icon="faPlug"/></template>{{ $ts.plugins }}</FormLink>
+			<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><Fa :icon="faPlug"/></template>{{ $ts.plugins }}</FormLink>
 		</FormGroup>
 		<FormGroup>
 			<template #label>{{ $ts.otherSettings }}</template>
@@ -105,7 +105,9 @@ export default defineComponent({
 				case 'sidebar': return defineAsyncComponent(() => import('./sidebar.vue'));
 				case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
 				case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
-				case 'plugins': return defineAsyncComponent(() => import('./plugins.vue'));
+				case 'plugin': return defineAsyncComponent(() => import('./plugin.vue'));
+				case 'plugin/install': return defineAsyncComponent(() => import('./plugin.install.vue'));
+				case 'plugin/manage': return defineAsyncComponent(() => import('./plugin.manage.vue'));
 				case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
 				case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
 				case 'update': return defineAsyncComponent(() => import('./update.vue'));

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

@@ -0,0 +1,146 @@
+<template>
+<FormBase>
+	<MkInfo warn>{{ $ts.pluginInstallWarn }}</MkInfo>
+
+	<FormGroup>
+		<FormTextarea v-model:value="code" tall>
+			<span>{{ $ts.code }}</span>
+		</FormTextarea>
+	</FormGroup>
+
+	<FormButton @click="install" :disabled="code == null" primary inline><Fa :icon="faCheck"/> {{ $ts.install }}</FormButton>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
+import { AiScript, parse } from '@syuilo/aiscript';
+import { serialize } from '@syuilo/aiscript/built/serializer';
+import { v4 as uuid } from 'uuid';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormLink from '@/components/form/link.vue';
+import FormButton from '@/components/form/button.vue';
+import MkInfo from '@/components/ui/info.vue';
+import * as os from '@/os';
+import { ColdDeviceStorage } from '@/store';
+
+export default defineComponent({
+	components: {
+		FormTextarea,
+		FormSelect,
+		FormRadios,
+		FormBase,
+		FormGroup,
+		FormLink,
+		FormButton,
+		MkInfo,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			INFO: {
+				title: this.$ts._plugin.install,
+				icon: faDownload
+			},
+			code: null,
+			faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
+	methods: {
+		installPlugin({ id, meta, ast, token }) {
+			ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
+				...meta,
+				id,
+				active: true,
+				configData: {},
+				token: token,
+				ast: ast
+			}));
+		},
+
+		async install() {
+			let ast;
+			try {
+				ast = parse(this.code);
+			} catch (e) {
+				os.dialog({
+					type: 'error',
+					text: 'Syntax error :('
+				});
+				return;
+			}
+			const meta = AiScript.collectMetadata(ast);
+			if (meta == null) {
+				os.dialog({
+					type: 'error',
+					text: 'No metadata found :('
+				});
+				return;
+			}
+			const data = meta.get(null);
+			if (data == null) {
+				os.dialog({
+					type: 'error',
+					text: 'No metadata found :('
+				});
+				return;
+			}
+			const { name, version, author, description, permissions, config } = data;
+			if (name == null || version == null || author == null) {
+				os.dialog({
+					type: 'error',
+					text: 'Required property not found :('
+				});
+				return;
+			}
+
+			const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
+				os.popup(import('@/components/token-generate-window.vue'), {
+					title: this.$ts.tokenRequested,
+					information: this.$ts.pluginTokenRequestedDescription,
+					initialName: name,
+					initialPermissions: permissions
+				}, {
+					done: async result => {
+						const { name, permissions } = result;
+						const { token } = await os.api('miauth/gen-token', {
+							session: null,
+							name: name,
+							permission: permissions,
+						});
+
+						res(token);
+					}
+				}, 'closed');
+			});
+
+			this.installPlugin({
+				id: uuid(),
+				meta: {
+					name, version, author, description, permissions, config
+				},
+				token,
+				ast: serialize(ast)
+			});
+
+			os.success();
+
+			this.$nextTick(() => {
+				location.reload();
+			});
+		},
+	}
+});
+</script>

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

@@ -0,0 +1,117 @@
+<template>
+<FormBase>
+	<FormGroup v-for="plugin in plugins" :key="plugin.id">
+		<template #label>{{ plugin.name }}</template>
+
+		<FormSwitch :value="plugin.active" @update:value="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch>
+		<div class="_formItem">
+			<div class="_formPanel" style="padding: 16px;">
+				<div class="_keyValue">
+					<div>{{ $ts.version }}:</div>
+					<div>{{ plugin.version }}</div>
+				</div>
+				<div class="_keyValue">
+					<div>{{ $ts.author }}:</div>
+					<div>{{ plugin.author }}</div>
+				</div>
+				<div class="_keyValue">
+					<div>{{ $ts.description }}:</div>
+					<div>{{ plugin.description }}</div>
+				</div>
+			</div>
+		</div>
+		<div class="_formItem">
+			<div class="_formPanel" style="padding: 16px;">
+				<MkButton @click="config(plugin)" inline v-if="plugin.config"><Fa :icon="faCog"/> {{ $ts.settings }}</MkButton>
+				<MkButton @click="uninstall(plugin)" inline danger><Fa :icon="faTrashAlt"/> {{ $ts.uninstall }}</MkButton>
+			</div>
+		</div>
+	</FormGroup>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons';
+import MkButton from '@/components/ui/button.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkSelect from '@/components/ui/select.vue';
+import MkInfo from '@/components/ui/info.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import * as os from '@/os';
+import { ColdDeviceStorage } from '@/store';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkTextarea,
+		MkSelect,
+		MkInfo,
+		FormSwitch,
+		FormBase,
+		FormGroup,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$ts._plugin.manage,
+				icon: faPlug
+			},
+			plugins: ColdDeviceStorage.get('plugins'),
+			faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
+	methods: {
+		uninstall(plugin) {
+			ColdDeviceStorage.set('plugins', this.plugins.filter(x => x.id !== plugin.id));
+			os.success();
+			this.$nextTick(() => {
+				location.reload();
+			});
+		},
+
+		// 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>
+
+<style lang="scss" scoped>
+
+</style>

src/client/pages/settings/plugin.vue

@@ -0,0 +1,42 @@
+<template>
+<FormBase>
+	<FormLink to="/settings/plugin/install"><template #icon><Fa :icon="faDownload"/></template>{{ $ts._plugin.install }}</FormLink>
+	<FormLink to="/settings/plugin/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $ts._plugin.manage }}</FormLink>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormLink from '@/components/form/link.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		FormBase,
+		FormLink,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$ts.plugins,
+				icon: faPlug
+			},
+			faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/client/pages/settings/plugins.vue

@@ -1,211 +0,0 @@
-<template>
-<section class="_section">
-	<div class="_title"><Fa :icon="faPlug"/> {{ $ts.plugins }}</div>
-	<div class="_content">
-		<details>
-			<summary><Fa :icon="faDownload"/> {{ $ts.install }}</summary>
-			<MkInfo warn>{{ $ts.pluginInstallWarn }}</MkInfo>
-			<MkTextarea v-model:value="script" tall>
-				<span>{{ $ts.script }}</span>
-			</MkTextarea>
-			<MkButton @click="install()" primary><Fa :icon="faSave"/> {{ $ts.install }}</MkButton>
-		</details>
-	</div>
-	<div class="_content">
-		<details>
-			<summary><Fa :icon="faFolderOpen"/> {{ $ts.manage }}</summary>
-			<MkSelect v-model:value="selectedPluginId">
-				<option v-for="x in plugins" :value="x.id" :key="x.id">{{ x.name }}</option>
-			</MkSelect>
-			<template v-if="selectedPlugin">
-				<div style="margin: -8px 0 8px 0;">
-					<MkSwitch :value="selectedPlugin.active" @update:value="changeActive(selectedPlugin, $event)">{{ $ts.makeActive }}</MkSwitch>
-				</div>
-				<div class="_keyValue">
-					<div>{{ $ts.version }}:</div>
-					<div>{{ selectedPlugin.version }}</div>
-				</div>
-				<div class="_keyValue">
-					<div>{{ $ts.author }}:</div>
-					<div>{{ selectedPlugin.author }}</div>
-				</div>
-				<div class="_keyValue">
-					<div>{{ $ts.description }}:</div>
-					<div>{{ selectedPlugin.description }}</div>
-				</div>
-				<div style="margin-top: 8px;">
-					<MkButton @click="config()" inline v-if="selectedPlugin.config"><Fa :icon="faCog"/> {{ $ts.settings }}</MkButton>
-					<MkButton @click="uninstall()" inline><Fa :icon="faTrashAlt"/> {{ $ts.uninstall }}</MkButton>
-				</div>
-			</template>
-		</details>
-	</div>
-</section>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { AiScript, parse } from '@syuilo/aiscript';
-import { serialize } from '@syuilo/aiscript/built/serializer';
-import { v4 as uuid } from 'uuid';
-import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkTextarea from '@/components/ui/textarea.vue';
-import MkSelect from '@/components/ui/select.vue';
-import MkInfo from '@/components/ui/info.vue';
-import MkSwitch from '@/components/ui/switch.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkTextarea,
-		MkSelect,
-		MkInfo,
-		MkSwitch,
-	},
-	
-	data() {
-		return {
-			script: '',
-			plugins: ColdDeviceStorage.get('plugins'),
-			selectedPluginId: null,
-			faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog
-		}
-	},
-
-	computed: {
-		selectedPlugin() {
-			if (this.selectedPluginId == null) return null;
-			return this.plugins.find(x => x.id === this.selectedPluginId);
-		},
-	},
-
-	methods: {
-		installPlugin({ id, meta, ast, token }) {
-			ColdDeviceStorage.set('plugins', this.plugins.concat({
-				...meta,
-				id,
-				active: true,
-				configData: {},
-				token: token,
-				ast: ast
-			}));
-		},
-
-		async install() {
-			let ast;
-			try {
-				ast = parse(this.script);
-			} catch (e) {
-				os.dialog({
-					type: 'error',
-					text: 'Syntax error :('
-				});
-				return;
-			}
-			const meta = AiScript.collectMetadata(ast);
-			if (meta == null) {
-				os.dialog({
-					type: 'error',
-					text: 'No metadata found :('
-				});
-				return;
-			}
-			const data = meta.get(null);
-			if (data == null) {
-				os.dialog({
-					type: 'error',
-					text: 'No metadata found :('
-				});
-				return;
-			}
-			const { name, version, author, description, permissions, config } = data;
-			if (name == null || version == null || author == null) {
-				os.dialog({
-					type: 'error',
-					text: 'Required property not found :('
-				});
-				return;
-			}
-
-			const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-				os.popup(import('@/components/token-generate-window.vue'), {
-					title: this.$ts.tokenRequested,
-					information: this.$ts.pluginTokenRequestedDescription,
-					initialName: name,
-					initialPermissions: permissions
-				}, {
-					done: async result => {
-						const { name, permissions } = result;
-						const { token } = await os.api('miauth/gen-token', {
-							session: null,
-							name: name,
-							permission: permissions,
-						});
-
-						res(token);
-					}
-				}, 'closed');
-			});
-
-			this.installPlugin({
-				id: uuid(),
-				meta: {
-					name, version, author, description, permissions, config
-				},
-				token,
-				ast: serialize(ast)
-			});
-
-			os.success();
-
-			this.$nextTick(() => {
-				location.reload();
-			});
-		},
-
-		uninstall() {
-			ColdDeviceStorage.set('plugins', this.plugins.filter(x => x.id !== this.selectedPluginId));
-			os.success();
-			this.$nextTick(() => {
-				location.reload();
-			});
-		},
-
-		// TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
-		async config() {
-			const config = this.selectedPlugin.config;
-			for (const key in this.selectedPlugin.configData) {
-				config[key].default = this.selectedPlugin.configData[key];
-			}
-
-			const { canceled, result } = await os.form(this.selectedPlugin.name, config);
-			if (canceled) return;
-
-			const plugins = ColdDeviceStorage.get('plugins');
-			plugins.find(p => p.id === this.selectedPluginId).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>
-
-<style lang="scss" scoped>
-
-</style>

src/client/plugin.ts

@@ -39,7 +39,7 @@ export function install(plugin) {
 function createPluginEnv(opts) {
 	const config = new Map();
 	for (const [k, v] of Object.entries(opts.plugin.config || {})) {
-		config.set(k, jsToVal(opts.plugin.configData[k] || v.default));
+		config.set(k, jsToVal(opts.plugin.configData.hasOwnProperty(k) ? opts.plugin.configData[k] : v.default));
 	}
 
 	return {