tweak ui
This commit is contained in:
parent
41ed9a1a72
commit
408142647c
6 changed files with 8 additions and 402 deletions
|
@ -1,28 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<FormBase>
|
<div class="_formRoot">
|
||||||
<FormInfo warn>{{ $ts._accountDelete.mayTakeTime }}</FormInfo>
|
<FormInfo warn class="_formBlock">{{ $ts._accountDelete.mayTakeTime }}</FormInfo>
|
||||||
<FormInfo>{{ $ts._accountDelete.sendEmail }}</FormInfo>
|
<FormInfo class="_formBlock">{{ $ts._accountDelete.sendEmail }}</FormInfo>
|
||||||
<FormButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ $ts._accountDelete.requestAccountDelete }}</FormButton>
|
<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ $ts._accountDelete.requestAccountDelete }}</FormButton>
|
||||||
<FormButton v-else disabled>{{ $ts._accountDelete.inProgress }}</FormButton>
|
<FormButton v-else disabled>{{ $ts._accountDelete.inProgress }}</FormButton>
|
||||||
</FormBase>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import FormInfo from '@/components/debobigego/info.vue';
|
import FormInfo from '@/components/ui/info.vue';
|
||||||
import FormBase from '@/components/debobigego/base.vue';
|
import FormButton from '@/components/ui/button.vue';
|
||||||
import FormGroup from '@/components/debobigego/group.vue';
|
|
||||||
import FormButton from '@/components/debobigego/button.vue';
|
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { debug } from '@/config';
|
|
||||||
import { signout } from '@/account';
|
import { signout } from '@/account';
|
||||||
import * as symbols from '@/symbols';
|
import * as symbols from '@/symbols';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
FormBase,
|
|
||||||
FormButton,
|
FormButton,
|
||||||
FormGroup,
|
|
||||||
FormInfo,
|
FormInfo,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -35,7 +30,6 @@ export default defineComponent({
|
||||||
icon: 'fas fa-exclamation-triangle',
|
icon: 'fas fa-exclamation-triangle',
|
||||||
bg: 'var(--bg)',
|
bg: 'var(--bg)',
|
||||||
},
|
},
|
||||||
debug,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -218,32 +218,14 @@ export default defineComponent({
|
||||||
case 'plugin/manage': return defineAsyncComponent(() => import('./plugin.manage.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 'registry': return defineAsyncComponent(() => import('./registry.vue'));
|
|
||||||
case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
|
case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
|
||||||
}
|
}
|
||||||
if (page.value.startsWith('registry/keys/system/')) {
|
|
||||||
return defineAsyncComponent(() => import('./registry.keys.vue'));
|
|
||||||
}
|
|
||||||
if (page.value.startsWith('registry/value/system/')) {
|
|
||||||
return defineAsyncComponent(() => import('./registry.value.vue'));
|
|
||||||
}
|
|
||||||
return null;
|
return null;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(component, () => {
|
watch(component, () => {
|
||||||
pageProps.value = {};
|
pageProps.value = {};
|
||||||
|
|
||||||
if (page.value) {
|
|
||||||
if (page.value.startsWith('registry/keys/system/')) {
|
|
||||||
pageProps.value.scope = page.value.replace('registry/keys/system/', '').split('/');
|
|
||||||
}
|
|
||||||
if (page.value.startsWith('registry/value/system/')) {
|
|
||||||
const path = page.value.replace('registry/value/system/', '').split('/');
|
|
||||||
pageProps.value.xKey = path.pop();
|
|
||||||
pageProps.value.scope = path;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
scroll(el.value, { top: 0 });
|
scroll(el.value, { top: 0 });
|
||||||
});
|
});
|
||||||
|
|
|
@ -8,21 +8,6 @@
|
||||||
|
|
||||||
<FormLink to="/settings/account-info" class="_formBlock">{{ $ts.accountInfo }}</FormLink>
|
<FormLink to="/settings/account-info" class="_formBlock">{{ $ts.accountInfo }}</FormLink>
|
||||||
|
|
||||||
<FormSection>
|
|
||||||
<template #label>{{ $ts.developer }}</template>
|
|
||||||
<FormSwitch v-model="debug" @update:modelValue="changeDebug" class="_formBlock">
|
|
||||||
DEBUG MODE
|
|
||||||
</FormSwitch>
|
|
||||||
<template v-if="debug">
|
|
||||||
<FormButton @click="taskmanager">Task Manager</FormButton>
|
|
||||||
</template>
|
|
||||||
</FormSection>
|
|
||||||
|
|
||||||
<FormLink to="/settings/registry" class="_formBlock"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.registry }}</FormLink>
|
|
||||||
|
|
||||||
<FormLink to="/bios" behavior="browser" class="_formBlock"><template #icon><i class="fas fa-door-open"></i></template>BIOS</FormLink>
|
|
||||||
<FormLink to="/cli" behavior="browser" class="_formBlock"><template #icon><i class="fas fa-door-open"></i></template>CLI</FormLink>
|
|
||||||
|
|
||||||
<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="fas fa-exclamation-triangle"></i></template>{{ $ts.closeAccount }}</FormLink>
|
<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="fas fa-exclamation-triangle"></i></template>{{ $ts.closeAccount }}</FormLink>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -30,10 +15,8 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
import FormSwitch from '@/components/form/switch.vue';
|
||||||
import FormSelect from '@/components/form/select.vue';
|
|
||||||
import FormSection from '@/components/form/section.vue';
|
import FormSection from '@/components/form/section.vue';
|
||||||
import FormLink from '@/components/debobigego/link.vue';
|
import FormLink from '@/components/form/link.vue';
|
||||||
import FormButton from '@/components/debobigego/button.vue';
|
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { debug } from '@/config';
|
import { debug } from '@/config';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
|
@ -42,10 +25,8 @@ import * as symbols from '@/symbols';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
FormSelect,
|
|
||||||
FormSection,
|
FormSection,
|
||||||
FormSwitch,
|
FormSwitch,
|
||||||
FormButton,
|
|
||||||
FormLink,
|
FormLink,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -1,114 +0,0 @@
|
||||||
<template>
|
|
||||||
<FormBase>
|
|
||||||
<FormGroup>
|
|
||||||
<FormKeyValueView>
|
|
||||||
<template #key>{{ $ts._registry.domain }}</template>
|
|
||||||
<template #value>{{ $ts.system }}</template>
|
|
||||||
</FormKeyValueView>
|
|
||||||
<FormKeyValueView>
|
|
||||||
<template #key>{{ $ts._registry.scope }}</template>
|
|
||||||
<template #value>{{ scope.join('/') }}</template>
|
|
||||||
</FormKeyValueView>
|
|
||||||
</FormGroup>
|
|
||||||
|
|
||||||
<FormGroup v-if="keys">
|
|
||||||
<template #label>{{ $ts._registry.keys }}</template>
|
|
||||||
<FormLink v-for="key in keys" :to="`/settings/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
|
|
||||||
</FormGroup>
|
|
||||||
|
|
||||||
<FormButton primary @click="createKey">{{ $ts._registry.createKey }}</FormButton>
|
|
||||||
</FormBase>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
|
||||||
import * as JSON5 from 'json5';
|
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
|
||||||
import FormSelect from '@/components/form/select.vue';
|
|
||||||
import FormLink from '@/components/debobigego/link.vue';
|
|
||||||
import FormBase from '@/components/debobigego/base.vue';
|
|
||||||
import FormGroup from '@/components/debobigego/group.vue';
|
|
||||||
import FormButton from '@/components/debobigego/button.vue';
|
|
||||||
import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
|
|
||||||
import * as os from '@/os';
|
|
||||||
import * as symbols from '@/symbols';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
FormBase,
|
|
||||||
FormSelect,
|
|
||||||
FormSwitch,
|
|
||||||
FormButton,
|
|
||||||
FormLink,
|
|
||||||
FormGroup,
|
|
||||||
FormKeyValueView,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
scope: {
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
[symbols.PAGE_INFO]: {
|
|
||||||
title: this.$ts.registry,
|
|
||||||
icon: 'fas fa-cogs',
|
|
||||||
bg: 'var(--bg)',
|
|
||||||
},
|
|
||||||
keys: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
scope() {
|
|
||||||
this.fetch();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.$emit('info', this[symbols.PAGE_INFO]);
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
fetch() {
|
|
||||||
os.api('i/registry/keys-with-type', {
|
|
||||||
scope: this.scope
|
|
||||||
}).then(keys => {
|
|
||||||
this.keys = Object.entries(keys).sort((a, b) => a[0].localeCompare(b[0]));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async createKey() {
|
|
||||||
const { canceled, result } = await os.form(this.$ts._registry.createKey, {
|
|
||||||
key: {
|
|
||||||
type: 'string',
|
|
||||||
label: this.$ts._registry.key,
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: 'string',
|
|
||||||
multiline: true,
|
|
||||||
label: this.$ts.value,
|
|
||||||
},
|
|
||||||
scope: {
|
|
||||||
type: 'string',
|
|
||||||
label: this.$ts._registry.scope,
|
|
||||||
default: this.scope.join('/')
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (canceled) return;
|
|
||||||
os.apiWithDialog('i/registry/set', {
|
|
||||||
scope: result.scope.split('/'),
|
|
||||||
key: result.key,
|
|
||||||
value: JSON5.parse(result.value),
|
|
||||||
}).then(() => {
|
|
||||||
this.fetch();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
|
@ -1,147 +0,0 @@
|
||||||
<template>
|
|
||||||
<FormBase>
|
|
||||||
<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>
|
|
||||||
|
|
||||||
<template v-if="value">
|
|
||||||
<FormGroup>
|
|
||||||
<FormKeyValueView>
|
|
||||||
<template #key>{{ $ts._registry.domain }}</template>
|
|
||||||
<template #value>{{ $ts.system }}</template>
|
|
||||||
</FormKeyValueView>
|
|
||||||
<FormKeyValueView>
|
|
||||||
<template #key>{{ $ts._registry.scope }}</template>
|
|
||||||
<template #value>{{ scope.join('/') }}</template>
|
|
||||||
</FormKeyValueView>
|
|
||||||
<FormKeyValueView>
|
|
||||||
<template #key>{{ $ts._registry.key }}</template>
|
|
||||||
<template #value>{{ xKey }}</template>
|
|
||||||
</FormKeyValueView>
|
|
||||||
</FormGroup>
|
|
||||||
|
|
||||||
<FormGroup>
|
|
||||||
<FormTextarea v-model="valueForEditor" tall class="_monospace" style="tab-size: 2;">
|
|
||||||
<span>{{ $ts.value }} (JSON)</span>
|
|
||||||
</FormTextarea>
|
|
||||||
<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
|
|
||||||
</FormGroup>
|
|
||||||
|
|
||||||
<FormKeyValueView>
|
|
||||||
<template #key>{{ $ts.updatedAt }}</template>
|
|
||||||
<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
|
|
||||||
</FormKeyValueView>
|
|
||||||
|
|
||||||
<FormButton danger @click="del"><i class="fas fa-trash"></i> {{ $ts.delete }}</FormButton>
|
|
||||||
</template>
|
|
||||||
</FormBase>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
|
||||||
import * as JSON5 from 'json5';
|
|
||||||
import FormInfo from '@/components/debobigego/info.vue';
|
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
|
||||||
import FormSelect from '@/components/form/select.vue';
|
|
||||||
import FormTextarea from '@/components/form/textarea.vue';
|
|
||||||
import FormBase from '@/components/debobigego/base.vue';
|
|
||||||
import FormGroup from '@/components/debobigego/group.vue';
|
|
||||||
import FormButton from '@/components/debobigego/button.vue';
|
|
||||||
import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
|
|
||||||
import * as os from '@/os';
|
|
||||||
import * as symbols from '@/symbols';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
FormInfo,
|
|
||||||
FormBase,
|
|
||||||
FormSelect,
|
|
||||||
FormSwitch,
|
|
||||||
FormButton,
|
|
||||||
FormTextarea,
|
|
||||||
FormGroup,
|
|
||||||
FormKeyValueView,
|
|
||||||
},
|
|
||||||
|
|
||||||
props: {
|
|
||||||
scope: {
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
xKey: {
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
[symbols.PAGE_INFO]: {
|
|
||||||
title: this.$ts.registry,
|
|
||||||
icon: 'fas fa-cogs',
|
|
||||||
bg: 'var(--bg)',
|
|
||||||
},
|
|
||||||
value: null,
|
|
||||||
valueForEditor: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
key() {
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.$emit('info', this[symbols.PAGE_INFO]);
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
fetch() {
|
|
||||||
os.api('i/registry/get-detail', {
|
|
||||||
scope: this.scope,
|
|
||||||
key: this.xKey
|
|
||||||
}).then(value => {
|
|
||||||
this.value = value;
|
|
||||||
this.valueForEditor = JSON5.stringify(this.value.value, null, '\t');
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
save() {
|
|
||||||
try {
|
|
||||||
JSON5.parse(this.valueForEditor);
|
|
||||||
} catch (e) {
|
|
||||||
os.alert({
|
|
||||||
type: 'error',
|
|
||||||
text: this.$ts.invalidValue
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
os.confirm({
|
|
||||||
type: 'warning',
|
|
||||||
text: this.$ts.saveConfirm,
|
|
||||||
}).then(({ canceled }) => {
|
|
||||||
if (canceled) return;
|
|
||||||
os.apiWithDialog('i/registry/set', {
|
|
||||||
scope: this.scope,
|
|
||||||
key: this.xKey,
|
|
||||||
value: JSON5.parse(this.valueForEditor)
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
del() {
|
|
||||||
os.confirm({
|
|
||||||
type: 'warning',
|
|
||||||
text: this.$ts.deleteConfirm,
|
|
||||||
}).then(({ canceled }) => {
|
|
||||||
if (canceled) return;
|
|
||||||
os.apiWithDialog('i/registry/remove', {
|
|
||||||
scope: this.scope,
|
|
||||||
key: this.xKey
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
|
@ -1,90 +0,0 @@
|
||||||
<template>
|
|
||||||
<FormBase>
|
|
||||||
<FormGroup v-if="scopes">
|
|
||||||
<template #label>{{ $ts.system }}</template>
|
|
||||||
<FormLink v-for="scope in scopes" :to="`/settings/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
|
|
||||||
</FormGroup>
|
|
||||||
<FormButton primary @click="createKey">{{ $ts._registry.createKey }}</FormButton>
|
|
||||||
</FormBase>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
|
||||||
import * as JSON5 from 'json5';
|
|
||||||
import FormSwitch from '@/components/form/switch.vue';
|
|
||||||
import FormSelect from '@/components/form/select.vue';
|
|
||||||
import FormLink from '@/components/debobigego/link.vue';
|
|
||||||
import FormBase from '@/components/debobigego/base.vue';
|
|
||||||
import FormGroup from '@/components/debobigego/group.vue';
|
|
||||||
import FormButton from '@/components/debobigego/button.vue';
|
|
||||||
import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
|
|
||||||
import * as os from '@/os';
|
|
||||||
import * as symbols from '@/symbols';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
FormBase,
|
|
||||||
FormSelect,
|
|
||||||
FormSwitch,
|
|
||||||
FormButton,
|
|
||||||
FormLink,
|
|
||||||
FormGroup,
|
|
||||||
FormKeyValueView,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
[symbols.PAGE_INFO]: {
|
|
||||||
title: this.$ts.registry,
|
|
||||||
icon: 'fas fa-cogs',
|
|
||||||
bg: 'var(--bg)',
|
|
||||||
},
|
|
||||||
scopes: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.fetch();
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.$emit('info', this[symbols.PAGE_INFO]);
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
fetch() {
|
|
||||||
os.api('i/registry/scopes').then(scopes => {
|
|
||||||
this.scopes = scopes.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async createKey() {
|
|
||||||
const { canceled, result } = await os.form(this.$ts._registry.createKey, {
|
|
||||||
key: {
|
|
||||||
type: 'string',
|
|
||||||
label: this.$ts._registry.key,
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: 'string',
|
|
||||||
multiline: true,
|
|
||||||
label: this.$ts.value,
|
|
||||||
},
|
|
||||||
scope: {
|
|
||||||
type: 'string',
|
|
||||||
label: this.$ts._registry.scope,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (canceled) return;
|
|
||||||
os.apiWithDialog('i/registry/set', {
|
|
||||||
scope: result.scope.split('/'),
|
|
||||||
key: result.key,
|
|
||||||
value: JSON5.parse(result.value),
|
|
||||||
}).then(() => {
|
|
||||||
this.fetch();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
Loading…
Reference in a new issue