mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 23:31:48 +09:00
Code

tweak ui

Browse Source
This commit is contained in:
syuilo 2022-01-04 17:52:44 +09:00
parent 6a5713f5e5
commit efa72e8d14
4 changed files with 89 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/pages/settings/index.vue
View File

@ -215,7 +215,6 @@ export default defineComponent({
case 'deck': return defineAsyncComponent(() => import('./deck.vue')); case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
case 'plugin': return defineAsyncComponent(() => import('./plugin.vue')); case 'plugin': return defineAsyncComponent(() => import('./plugin.vue'));
case 'plugin/install': return defineAsyncComponent(() => import('./plugin.install.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 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue')); case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));

32
packages/client/src/pages/settings/plugin.install.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<FormBase> <div class="_formRoot">
<FormInfo warn>{{ $ts._plugin.installWarn }}</FormInfo> <FormInfo warn class="_formBlock">{{ $ts._plugin.installWarn }}</FormInfo>
<FormGroup> <FormTextarea v-model="code" tall class="_formBlock">
<FormTextarea v-model="code" tall> <template #label>{{ $ts.code }}</template>
<span>{{ $ts.code }}</span> </FormTextarea>
</FormTextarea>
</FormGroup>
<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton> <div class="_formBlock">
</FormBase> <FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -18,13 +18,8 @@ import { AiScript, parse } from '@syuilo/aiscript';
import { serialize } from '@syuilo/aiscript/built/serializer'; import { serialize } from '@syuilo/aiscript/built/serializer';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormSelect from '@/components/form/select.vue'; import FormButton from '@/components/ui/button.vue';
import FormRadios from '@/components/form/radios.vue'; import FormInfo from '@/components/ui/info.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue';
import FormLink from '@/components/debobigego/link.vue';
import FormButton from '@/components/debobigego/button.vue';
import FormInfo from '@/components/debobigego/info.vue';
import * as os from '@/os'; import * as os from '@/os';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
import { unisonReload } from '@/scripts/unison-reload'; import { unisonReload } from '@/scripts/unison-reload';
@ -33,11 +28,6 @@ import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
FormTextarea, FormTextarea,
FormSelect,
FormRadios,
FormBase,
FormGroup,
FormLink,
FormButton, FormButton,
FormInfo, FormInfo,
}, },

116
packages/client/src/pages/settings/plugin.manage.vue
View File

@ -1,116 +0,0 @@
<template>
<FormBase>
<FormGroup v-for="plugin in plugins" :key="plugin.id">
<template #label><span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span></template>
<FormSwitch :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch>
<div class="_debobigegoItem">
<div class="_debobigegoPanel" style="padding: 16px;">
<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 class="_keyValue">
<div>{{ $ts.permission }}:</div>
<div>{{ plugin.permissions }}</div>
</div>
</div>
</div>
<div class="_debobigegoItem">
<div class="_debobigegoPanel" style="padding: 16px;">
<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>
</FormGroup>
</FormBase>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkSelect from '@/components/form/select.vue';
import FormSwitch from '@/components/form/switch.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormGroup from '@/components/debobigego/group.vue';
import * as os from '@/os';
import { ColdDeviceStorage } from '@/store';
import * as symbols from '@/symbols';
import { unisonReload } from '@/scripts/unison-reload';
export default defineComponent({
components: {
MkButton,
MkTextarea,
MkSelect,
FormSwitch,
FormBase,
FormGroup,
},
emits: ['info'],
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts._plugin.manage,
icon: 'fas fa-plug',
bg: 'var(--bg)',
},
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>
<style lang="scss" scoped>
</style>

86
packages/client/src/pages/settings/plugin.vue
View File

@ -1,23 +1,54 @@
<template> <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/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> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import FormBase from '@/components/debobigego/base.vue'; import FormLink from '@/components/form/link.vue';
import FormGroup from '@/components/debobigego/group.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormLink from '@/components/debobigego/link.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 * as os from '@/os';
import { ColdDeviceStorage } from '@/store'; import { ColdDeviceStorage } from '@/store';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
export default defineComponent({ export default defineComponent({
components: { components: {
FormBase,
FormLink, FormLink,
FormSwitch,
FormSection,
MkButton,
MkKeyValue,
}, },
emits: ['info'], emits: ['info'],
@ -29,13 +60,52 @@ export default defineComponent({
icon: 'fas fa-plug', icon: 'fas fa-plug',
bg: 'var(--bg)', bg: 'var(--bg)',
}, },
plugins: ColdDeviceStorage.get('plugins').length, plugins: ColdDeviceStorage.get('plugins'),
} }
}, },
mounted() { mounted() {
this.$emit('info', this[symbols.PAGE_INFO]); 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> </script>