Improve plugin setting
This commit is contained in:
syuilo
parent
eb267e8a57
commit
3d73ce63ca
7 changed files with 315 additions and 215 deletions
|
|
@ -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: "キー"
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
|
|
|
|||
146
src/client/pages/settings/plugin.install.vue
Normal file
146
src/client/pages/settings/plugin.install.vue
Normal 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>
|
||||
117
src/client/pages/settings/plugin.manage.vue
Normal file
117
src/client/pages/settings/plugin.manage.vue
Normal 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: この処理を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>
|
||||
42
src/client/pages/settings/plugin.vue
Normal file
42
src/client/pages/settings/plugin.vue
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue