SWREI/switched
0
0
Fork 0
Code

🎨

Browse Source
This commit is contained in:
syuilo 2024-10-04 17:29:10 +09:00
parent 2639e92e18
commit 708ffaef5c
1 changed files with 33 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/frontend/src/pages/settings/apps.vue
View File

@ -14,30 +14,39 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<template #default="{items}"> <template #default="{items}">
<div class="_gaps"> <div class="_gaps">
<div v-for="token in items" :key="token.id" class="_panel" :class="$style.app"> <MkFolder v-for="token in items" :key="token.id" :defaultOpen="true">
<template #icon>
<img v-if="token.iconUrl" :class="$style.appIcon" :src="token.iconUrl" alt=""/> <img v-if="token.iconUrl" :class="$style.appIcon" :src="token.iconUrl" alt=""/>
<div :class="$style.appBody"> <i v-else class="ti ti-plug"/>
<div :class="$style.appName">{{ token.name }}</div> </template>
<div>{{ token.description }}</div> <template #label>{{ token.name }}</template>
<template #caption>{{ token.description }}</template>
<template #suffix><MkTime :time="token.lastUsedAt"/></template>
<template #footer>
<MkButton danger @click="revoke(token)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</template>
<div class="_gaps_s">
<div v-if="token.description">{{ token.description }}</div>
<div>
<MkKeyValue oneline> <MkKeyValue oneline>
<template #key>{{ i18n.ts.installedDate }}</template> <template #key>{{ i18n.ts.installedDate }}</template>
<template #value><MkTime :time="token.createdAt"/></template> <template #value><MkTime :time="token.createdAt" :mode="'detail'"/></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue oneline> <MkKeyValue oneline>
<template #key>{{ i18n.ts.lastUsedDate }}</template> <template #key>{{ i18n.ts.lastUsedDate }}</template>
<template #value><MkTime :time="token.lastUsedAt"/></template> <template #value><MkTime :time="token.lastUsedAt" :mode="'detail'"/></template>
</MkKeyValue> </MkKeyValue>
<details> </div>
<summary>{{ i18n.ts.details }}</summary> <MkFolder>
<template #label>{{ i18n.ts.permission }}</template>
<template #suffix>{{ Object.keys(token.permission).length === 0 ? i18n.ts.none : Object.keys(token.permission).length }}</template>
<ul> <ul>
<li v-for="p in token.permission" :key="p">{{ i18n.ts._permissions[p] }}</li> <li v-for="p in token.permission" :key="p">{{ i18n.ts._permissions[p] }}</li>
</ul> </ul>
</details> </MkFolder>
<div>
<MkButton inline danger @click="revoke(token)"><i class="ti ti-trash"></i></MkButton>
</div>
</div>
</div> </div>
</MkFolder>
</div> </div>
</template> </template>
</FormPagination> </FormPagination>
@ -52,6 +61,7 @@ import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkKeyValue from '@/components/MkKeyValue.vue'; import MkKeyValue from '@/components/MkKeyValue.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import { infoImageUrl } from '@/instance.js'; import { infoImageUrl } from '@/instance.js';
const list = ref<InstanceType<typeof FormPagination>>(); const list = ref<InstanceType<typeof FormPagination>>();
@ -82,26 +92,9 @@ definePageMetadata(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.app {
display: flex;
padding: 16px;
}
.appIcon { .appIcon {
display: block; width: 20px;
flex-shrink: 0; height: 20px;
margin: 0 12px 0 0; border-radius: 4px;
width: 50px;
height: 50px;
border-radius: 8px;
}
.appBody {
width: calc(100% - 62px);
position: relative;
}
.appName {
font-weight: bold;
} }
</style> </style>