refactor(client): refactor settings/apps to use Composition API (#8570)
This commit is contained in:
parent
80355fb08e
commit
6226e8d902
1 changed files with 25 additions and 33 deletions
|
@ -4,7 +4,7 @@
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<div class="_fullinfo">
|
<div class="_fullinfo">
|
||||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||||
<div>{{ $ts.nothing }}</div>
|
<div>{{ i18n.ts.nothing }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot="{items}">
|
<template v-slot="{items}">
|
||||||
|
@ -14,18 +14,18 @@
|
||||||
<div class="name">{{ token.name }}</div>
|
<div class="name">{{ token.name }}</div>
|
||||||
<div class="description">{{ token.description }}</div>
|
<div class="description">{{ token.description }}</div>
|
||||||
<div class="_keyValue">
|
<div class="_keyValue">
|
||||||
<div>{{ $ts.installedDate }}:</div>
|
<div>{{ i18n.ts.installedDate }}:</div>
|
||||||
<div><MkTime :time="token.createdAt"/></div>
|
<div><MkTime :time="token.createdAt"/></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="_keyValue">
|
<div class="_keyValue">
|
||||||
<div>{{ $ts.lastUsedDate }}:</div>
|
<div>{{ i18n.ts.lastUsedDate }}:</div>
|
||||||
<div><MkTime :time="token.lastUsedAt"/></div>
|
<div><MkTime :time="token.lastUsedAt"/></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
|
<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<details>
|
<details>
|
||||||
<summary>{{ $ts.details }}</summary>
|
<summary>{{ i18n.ts.details }}</summary>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
|
<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -37,42 +37,34 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { defineExpose, ref } from 'vue';
|
||||||
import FormPagination from '@/components/ui/pagination.vue';
|
import FormPagination from '@/components/ui/pagination.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import * as symbols from '@/symbols';
|
import * as symbols from '@/symbols';
|
||||||
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
export default defineComponent({
|
const list = ref<any>(null);
|
||||||
components: {
|
|
||||||
FormPagination,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['info'],
|
const pagination = {
|
||||||
|
endpoint: 'i/apps' as const,
|
||||||
|
limit: 100,
|
||||||
|
params: {
|
||||||
|
sort: '+lastUsedAt'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
data() {
|
function revoke(token) {
|
||||||
return {
|
os.api('i/revoke-token', { tokenId: token.id }).then(() => {
|
||||||
[symbols.PAGE_INFO]: {
|
list.value.reload();
|
||||||
title: this.$ts.installedApps,
|
});
|
||||||
icon: 'fas fa-plug',
|
}
|
||||||
bg: 'var(--bg)',
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
endpoint: 'i/apps' as const,
|
|
||||||
limit: 100,
|
|
||||||
params: {
|
|
||||||
sort: '+lastUsedAt'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
defineExpose({
|
||||||
revoke(token) {
|
[symbols.PAGE_INFO]: {
|
||||||
os.api('i/revoke-token', { tokenId: token.id }).then(() => {
|
title: i18n.ts.installedApps,
|
||||||
this.$refs.list.reload();
|
icon: 'fas fa-plug',
|
||||||
});
|
bg: 'var(--bg)',
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue