110 lines
2.8 KiB
Vue
110 lines
2.8 KiB
Vue
<template>
|
|
<div class="bcekxzvu _gap _panel">
|
|
<div class="target">
|
|
<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
|
|
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
|
|
<div class="names">
|
|
<MkUserName class="name" :user="report.targetUser"/>
|
|
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
|
|
</div>
|
|
</MkA>
|
|
<MkKeyValue class="_formBlock">
|
|
<template #key>{{ i18n.ts.registeredDate }}</template>
|
|
<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
|
|
</MkKeyValue>
|
|
</div>
|
|
<div class="detail">
|
|
<div>
|
|
<Mfm :text="report.comment"/>
|
|
</div>
|
|
<hr/>
|
|
<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
|
|
<div v-if="report.assignee">
|
|
{{ i18n.ts.moderator }}:
|
|
<MkAcct :user="report.assignee"/>
|
|
</div>
|
|
<div><MkTime :time="report.createdAt"/></div>
|
|
<div class="action">
|
|
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
|
|
{{ i18n.ts.forwardReport }}
|
|
<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
|
|
</MkSwitch>
|
|
<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import MkButton from '@/components/MkButton.vue';
|
|
import MkSwitch from '@/components/form/switch.vue';
|
|
import MkKeyValue from '@/components/MkKeyValue.vue';
|
|
import { acct, userPage } from '@/filters/user';
|
|
import * as os from '@/os';
|
|
import { i18n } from '@/i18n';
|
|
|
|
const props = defineProps<{
|
|
report: any;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(ev: 'resolved', reportId: string): void;
|
|
}>();
|
|
|
|
let forward = $ref(props.report.forwarded);
|
|
|
|
function resolve() {
|
|
os.apiWithDialog('admin/resolve-abuse-user-report', {
|
|
forward: forward,
|
|
reportId: props.report.id,
|
|
}).then(() => {
|
|
emit('resolved', props.report.id);
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bcekxzvu {
|
|
display: flex;
|
|
|
|
> .target {
|
|
width: 35%;
|
|
box-sizing: border-box;
|
|
text-align: left;
|
|
padding: 24px;
|
|
border-right: solid 1px var(--divider);
|
|
|
|
> .info {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
padding: 14px;
|
|
border-radius: 8px;
|
|
--c: rgb(255 196 0 / 15%);
|
|
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
|
background-size: 16px 16px;
|
|
|
|
> .avatar {
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
|
|
> .names {
|
|
margin-left: 0.3em;
|
|
padding: 0 8px;
|
|
flex: 1;
|
|
|
|
> .name {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .detail {
|
|
flex: 1;
|
|
padding: 24px;
|
|
}
|
|
}
|
|
</style>
|