sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

client: refine ui

Browse Source
This commit is contained in:
syuilo
2021-11-28 20:07:37 +09:00
parent 335e4bd213
commit e8005c8d3a
48 changed files with 1744 additions and 1149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,12 @@
</MkSpacer>
</div>
<div class="main">
<component :is="component" :key="page" v-bind="pageProps"/>
<MkSpacer :content-max="600" :margin-min="20">
<div class="bkzroven">
<div v-if="childInfo" class="title">{{ childInfo.title }}</div>
<component :is="component" :key="page" v-bind="pageProps" @info="onInfo"/>
</div>
</MkSpacer>
</div>
</div>
</template>
@ -52,6 +57,7 @@ export default defineComponent({
const narrow = ref(false);
const view = ref(null);
const el = ref(null);
const childInfo = ref(null);
const menuDef = computed(() => [{
title: i18n.locale.basicSettings,
items: [{
@ -192,8 +198,6 @@ export default defineComponent({
case 'other': return defineAsyncComponent(() => import('./other.vue'));
case 'general': return defineAsyncComponent(() => import('./general.vue'));
case 'email': return defineAsyncComponent(() => import('./email.vue'));
case 'email/address': return defineAsyncComponent(() => import('./email-address.vue'));
case 'email/notification': return defineAsyncComponent(() => import('./email-notification.vue'));
case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
@ -259,6 +263,10 @@ export default defineComponent({
const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
const onInfo = (info) => {
childInfo.value = info;
};
return {
[symbols.PAGE_INFO]: INFO,
page,
@ -269,6 +277,8 @@ export default defineComponent({
pageProps,
component,
emailNotConfigured,
onInfo,
childInfo,
};
},
});
@ -285,7 +295,7 @@ export default defineComponent({
}
> .info {
margin: 0 16px;
margin: 16px 0;
}
> .accounts {
@ -299,6 +309,16 @@ export default defineComponent({
}
}
> .main {
.bkzroven {
> .title {
margin: 4px 0 20px 0;
font-size: 1.5em;
font-weight: bold;
}
}
}
&.wide {
display: flex;
max-width: 1000px;
@ -321,6 +341,12 @@ export default defineComponent({
flex: 1;
min-width: 0;
overflow: auto;
.bkzroven {
> .title {
margin: 6px 0 24px 0;
}
}
}
}
}