From 3d73ce63cade45f8dc45987aa9d500460c723ed2 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sat, 6 Feb 2021 21:05:00 +0900 Subject: [PATCH] Improve plugin setting --- locales/ja-JP.yml | 6 +- src/client/pages/settings/index.vue | 6 +- src/client/pages/settings/plugin.install.vue | 146 +++++++++++++ src/client/pages/settings/plugin.manage.vue | 117 ++++++++++ src/client/pages/settings/plugin.vue | 42 ++++ src/client/pages/settings/plugins.vue | 211 ------------------- src/client/plugin.ts | 2 +- 7 files changed, 315 insertions(+), 215 deletions(-) create mode 100644 src/client/pages/settings/plugin.install.vue create mode 100644 src/client/pages/settings/plugin.manage.vue create mode 100644 src/client/pages/settings/plugin.vue delete mode 100644 src/client/pages/settings/plugins.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index d816d76f34..2233fa27f1 100644 --- a/locales/ja-JP.yml +++ b/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: "キー" diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue index 78aee4bfc1..df53eb5133 100644 --- a/src/client/pages/settings/index.vue +++ b/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')); diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue new file mode 100644 index 0000000000..34c62619ad --- /dev/null +++ b/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> diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue new file mode 100644 index 0000000000..b6946e30d0 --- /dev/null +++ b/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> diff --git a/src/client/pages/settings/plugin.vue b/src/client/pages/settings/plugin.vue new file mode 100644 index 0000000000..5bc615b164 --- /dev/null +++ b/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> diff --git a/src/client/pages/settings/plugins.vue b/src/client/pages/settings/plugins.vue deleted file mode 100644 index 7f3734e347..0000000000 --- a/src/client/pages/settings/plugins.vue +++ /dev/null @@ -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> diff --git a/src/client/plugin.ts b/src/client/plugin.ts index 9d1ef87c1a..c56ee1eb25 100644 --- a/src/client/plugin.ts +++ b/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 {