mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-10-22 02:03:10 +00:00
94 lines
2.0 KiB
Vue
94 lines
2.0 KiB
Vue
<template>
|
|
<v-navigation-drawer
|
|
v-if="drawer"
|
|
v-model="drawer"
|
|
location="right"
|
|
temporary
|
|
width="400"
|
|
>
|
|
<v-toolbar color="primary">
|
|
<v-toolbar-title>消息记录</v-toolbar-title>
|
|
</v-toolbar>
|
|
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="msg in messages"
|
|
:key="msg.id"
|
|
rounded
|
|
>
|
|
<template #prepend>
|
|
<v-icon
|
|
:icon="icons[msg.type]"
|
|
:color="colors[msg.type]"
|
|
size="20"
|
|
/>
|
|
</template>
|
|
|
|
<v-list-item-title>{{ msg.title }}</v-list-item-title>
|
|
<v-list-item-subtitle v-if="msg.content">
|
|
{{
|
|
msg.content
|
|
}}
|
|
</v-list-item-subtitle>
|
|
<span class="text-caption text-grey">
|
|
{{ new Date(msg.timestamp).toLocaleTimeString() }}
|
|
</span>
|
|
</v-list-item>
|
|
|
|
<v-list-item v-if="!messages.length">
|
|
<template #prepend>
|
|
<v-icon
|
|
icon="mdi-inbox"
|
|
color="grey"
|
|
/>
|
|
</template>
|
|
<v-list-item-title class="text-grey">
|
|
暂无消息
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent, ref } from "vue";
|
|
import messageService from "@/utils/message";
|
|
|
|
export default defineComponent({
|
|
name: "MessageLog",
|
|
setup() {
|
|
const drawer = ref(false);
|
|
const messages = ref([]);
|
|
|
|
const icons = {
|
|
success: "mdi-check-circle",
|
|
error: "mdi-alert-circle",
|
|
warning: "mdi-alert",
|
|
info: "mdi-information",
|
|
};
|
|
|
|
const colors = {
|
|
success: "success",
|
|
error: "error",
|
|
warning: "warning",
|
|
info: "primary",
|
|
};
|
|
|
|
messageService.onLog((msgs) => {
|
|
if (msgs) {
|
|
messages.value = msgs;
|
|
}
|
|
});
|
|
|
|
return {
|
|
drawer,
|
|
messages,
|
|
icons,
|
|
colors,
|
|
deleteMessage: (id) => messageService.deleteMessage(id),
|
|
clearMessages: () => messageService.clearMessages(),
|
|
};
|
|
},
|
|
});
|
|
</script>
|