Improve plugin setting

This commit is contained in:
syuilo 2021-02-06 21:05:00 +09:00
parent eb267e8a57
commit 3d73ce63ca
7 changed files with 315 additions and 215 deletions

View File

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

View File

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

View File

@ -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>

View File

@ -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: storeactionAiScriptAPI
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>

View File

@ -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>

View File

@ -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: storeactionAiScriptAPI
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>

View File

@ -39,7 +39,7 @@ export function install(plugin) {
function createPluginEnv(opts) { function createPluginEnv(opts) {
const config = new Map(); const config = new Map();
for (const [k, v] of Object.entries(opts.plugin.config || {})) { 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 { return {