76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { useHead } from '@unhead/vue'
|
|
import { ref, watch } from 'vue'
|
|
|
|
import ChatroomCard from '@/components/chatroom/ChatroomCard.vue'
|
|
import ChatroomCreatorModal from '@/components/chatroom/ChatroomCreatorModal.vue'
|
|
import { useNowUser } from '@/stores/now-user.ts'
|
|
import { api } from '@/tools/web.ts'
|
|
import type { ChatroomPublic } from '@/types/chatroom.ts'
|
|
import type { ReturnDto } from '@/types/response.ts'
|
|
|
|
useHead({
|
|
title: '聊天室列表',
|
|
})
|
|
|
|
const NOWUSER = useNowUser()
|
|
|
|
const crList = ref<ChatroomPublic[]>([])
|
|
|
|
const showModal = ref(false)
|
|
|
|
function load() {
|
|
api
|
|
.get('/chatroom/')
|
|
.then((res) => res.data as ReturnDto)
|
|
.then((data) => data.result as ChatroomPublic[])
|
|
.then((list) => {
|
|
crList.value = list
|
|
})
|
|
}
|
|
|
|
watch(
|
|
() => NOWUSER.is_login,
|
|
() => {
|
|
load()
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<n-card title="聊天室">
|
|
查看您创建的所有聊天室。
|
|
<template #footer>
|
|
<n-flex>
|
|
<n-button secondary type="primary" style="margin-left: auto" @click="showModal = true">
|
|
创建聊天室
|
|
</n-button>
|
|
</n-flex>
|
|
</template>
|
|
</n-card>
|
|
<div id="chatroom-card-list">
|
|
<chatroom-card
|
|
v-for="cr in crList"
|
|
v-bind:key="cr.id"
|
|
:id="cr.id"
|
|
:name="cr.name"
|
|
:description="cr.description"
|
|
:feature_image="cr.feature_image"
|
|
info-mode
|
|
/>
|
|
</div>
|
|
|
|
<chatroom-creator-modal v-model:show-modal="showModal" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
div#chatroom-card-list {
|
|
width: 800px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
</style>
|