1654 lines
49 KiB
Vue
1654 lines
49 KiB
Vue
|
<template>
|
|||
|
|
<div class="chat-home">
|
|||
|
|
<!-- Header -->
|
|||
|
|
<v-app-bar color="toolbar" dark elevation="0">
|
|||
|
|
<v-app-bar-title class="d-flex align-center">
|
|||
|
|
<v-icon start class="mr-2">mdi-chat</v-icon>
|
|||
|
|
گفتوگو
|
|||
|
|
</v-app-bar-title>
|
|||
|
|
<v-spacer></v-spacer>
|
|||
|
|
|
|||
|
|
<!-- Actions -->
|
|||
|
|
<div class="d-flex align-center">
|
|||
|
|
<v-btn icon @click="showCreateChannel = true">
|
|||
|
|
<v-icon>mdi-plus</v-icon>
|
|||
|
|
</v-btn>
|
|||
|
|
<v-btn icon @click="showChannelDrawer = !showChannelDrawer">
|
|||
|
|
<v-icon>mdi-menu</v-icon>
|
|||
|
|
</v-btn>
|
|||
|
|
</div>
|
|||
|
|
</v-app-bar>
|
|||
|
|
|
|||
|
|
<!-- Main Content -->
|
|||
|
|
<div class="chat-container">
|
|||
|
|
<!-- Channel Drawer -->
|
|||
|
|
<v-navigation-drawer
|
|||
|
|
v-model="showChannelDrawer"
|
|||
|
|
:temporary="true"
|
|||
|
|
width="320"
|
|||
|
|
class="channel-drawer"
|
|||
|
|
>
|
|||
|
|
<v-card flat class="h-100">
|
|||
|
|
<!-- Drawer Header -->
|
|||
|
|
<div class="drawer-header pa-4">
|
|||
|
|
<h3 class="text-h6 mb-3">گفتوگوها</h3>
|
|||
|
|
<v-text-field
|
|||
|
|
v-model="channelSearch"
|
|||
|
|
placeholder="جستجو در کانالها..."
|
|||
|
|
prepend-inner-icon="mdi-magnify"
|
|||
|
|
variant="outlined"
|
|||
|
|
density="compact"
|
|||
|
|
hide-details
|
|||
|
|
@input="searchChannels"
|
|||
|
|
></v-text-field>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Channel Lists -->
|
|||
|
|
<v-card-text class="pa-0">
|
|||
|
|
<!-- My Channels -->
|
|||
|
|
<div class="channel-section">
|
|||
|
|
<div class="section-header pa-4">
|
|||
|
|
<v-icon start class="mr-2">mdi-account-group</v-icon>
|
|||
|
|
<span class="text-subtitle-2">کانالهای من</span>
|
|||
|
|
<v-chip size="small" color="primary" variant="elevated" class="ml-auto count-chip">
|
|||
|
|
{{ userChannels.length }}
|
|||
|
|
</v-chip>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<v-list class="pa-0">
|
|||
|
|
<v-list-item
|
|||
|
|
v-for="channel in filteredChannels"
|
|||
|
|
:key="channel.id"
|
|||
|
|
@click="selectChannel(channel)"
|
|||
|
|
:active="currentChannel?.id === channel.id"
|
|||
|
|
class="channel-item"
|
|||
|
|
rounded="lg"
|
|||
|
|
:class="{ 'channel-active': currentChannel?.id === channel.id }"
|
|||
|
|
>
|
|||
|
|
<template v-slot:prepend>
|
|||
|
|
<v-avatar size="40" :color="channel.isPublic ? 'green' : 'orange'" class="mr-3">
|
|||
|
|
<v-icon :color="channel.isPublic ? 'white' : 'white'">
|
|||
|
|
{{ channel.isPublic ? 'mdi-earth' : 'mdi-lock' }}
|
|||
|
|
</v-icon>
|
|||
|
|
</v-avatar>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<v-list-item-title class="font-weight-medium">
|
|||
|
|
{{ channel.name }}
|
|||
|
|
</v-list-item-title>
|
|||
|
|
|
|||
|
|
<v-list-item-subtitle class="text-caption">
|
|||
|
|
{{ channel.messageCount }} پیام
|
|||
|
|
</v-list-item-subtitle>
|
|||
|
|
|
|||
|
|
<template v-slot:append>
|
|||
|
|
<v-chip
|
|||
|
|
v-if="channel.unreadCount && channel.unreadCount > 0"
|
|||
|
|
size="small"
|
|||
|
|
color="error"
|
|||
|
|
variant="elevated"
|
|||
|
|
class="ml-2 unread-chip"
|
|||
|
|
>
|
|||
|
|
{{ channel.unreadCount }}
|
|||
|
|
</v-chip>
|
|||
|
|
</template>
|
|||
|
|
</v-list-item>
|
|||
|
|
</v-list>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Public Channels -->
|
|||
|
|
<v-divider class="my-4"></v-divider>
|
|||
|
|
|
|||
|
|
<div class="channel-section">
|
|||
|
|
<div class="section-header pa-4">
|
|||
|
|
<v-icon start class="mr-2">mdi-earth</v-icon>
|
|||
|
|
<span class="text-subtitle-2">{{ channelSearch ? 'کانالهای عمومی' : 'کانالهای محبوب' }}</span>
|
|||
|
|
<v-chip size="small" color="blue" variant="elevated" class="ml-auto count-chip">
|
|||
|
|
{{ publicChannels.length }}
|
|||
|
|
</v-chip>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<v-list class="pa-0">
|
|||
|
|
<v-list-item
|
|||
|
|
v-for="channel in publicChannels"
|
|||
|
|
:key="channel.id"
|
|||
|
|
class="channel-item"
|
|||
|
|
rounded="lg"
|
|||
|
|
@click="selectChannel(channel)"
|
|||
|
|
:active="currentChannel?.id === channel.id"
|
|||
|
|
:class="{ 'channel-active': currentChannel?.id === channel.id }"
|
|||
|
|
>
|
|||
|
|
<template v-slot:prepend>
|
|||
|
|
<v-avatar size="40" color="blue" class="mr-3">
|
|||
|
|
<v-icon color="white">mdi-earth</v-icon>
|
|||
|
|
</v-avatar>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<v-list-item-title class="font-weight-medium">
|
|||
|
|
{{ channel.name }}
|
|||
|
|
</v-list-item-title>
|
|||
|
|
|
|||
|
|
<v-list-item-subtitle class="text-caption">
|
|||
|
|
{{ channel.messageCount }} پیام
|
|||
|
|
</v-list-item-subtitle>
|
|||
|
|
|
|||
|
|
<template v-slot:append>
|
|||
|
|
<v-btn
|
|||
|
|
v-if="!isChannelJoined(channel.id)"
|
|||
|
|
size="small"
|
|||
|
|
color="primary"
|
|||
|
|
variant="elevated"
|
|||
|
|
class="join-btn"
|
|||
|
|
@click.stop="joinChannel(channel)"
|
|||
|
|
>
|
|||
|
|
پیوستن
|
|||
|
|
</v-btn>
|
|||
|
|
<v-chip
|
|||
|
|
v-else
|
|||
|
|
size="small"
|
|||
|
|
color="success"
|
|||
|
|
variant="elevated"
|
|||
|
|
class="member-chip"
|
|||
|
|
>
|
|||
|
|
عضو
|
|||
|
|
</v-chip>
|
|||
|
|
</template>
|
|||
|
|
</v-list-item>
|
|||
|
|
</v-list>
|
|||
|
|
</div>
|
|||
|
|
</v-card-text>
|
|||
|
|
</v-card>
|
|||
|
|
</v-navigation-drawer>
|
|||
|
|
|
|||
|
|
<!-- Chat Area -->
|
|||
|
|
<div class="chat-area">
|
|||
|
|
<!-- Empty State -->
|
|||
|
|
<div v-if="!currentChannel" class="empty-state">
|
|||
|
|
<div class="empty-content">
|
|||
|
|
<v-icon size="120" color="grey-lighten-1">mdi-chat-outline</v-icon>
|
|||
|
|
<h1 class="text-h4 text-grey-lighten-1 mt-6 mb-4">خوش آمدید!</h1>
|
|||
|
|
<p class="text-body-1 text-grey-lighten-1 mb-8 text-center">
|
|||
|
|
برای شروع گفتوگو، یک کانال انتخاب کنید یا کانال جدیدی ایجاد کنید
|
|||
|
|
</p>
|
|||
|
|
<div class="action-buttons">
|
|||
|
|
<v-btn
|
|||
|
|
color="primary"
|
|||
|
|
size="large"
|
|||
|
|
class="mr-4"
|
|||
|
|
@click="showChannelDrawer = true"
|
|||
|
|
>
|
|||
|
|
<v-icon start>mdi-format-list-bulleted</v-icon>
|
|||
|
|
انتخاب کانال
|
|||
|
|
</v-btn>
|
|||
|
|
<v-btn
|
|||
|
|
color="secondary"
|
|||
|
|
size="large"
|
|||
|
|
variant="outlined"
|
|||
|
|
@click="showCreateChannel = true"
|
|||
|
|
>
|
|||
|
|
<v-icon start>mdi-plus</v-icon>
|
|||
|
|
ایجاد کانال
|
|||
|
|
</v-btn>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Chat Content -->
|
|||
|
|
<div v-else class="chat-content">
|
|||
|
|
<!-- Channel Header -->
|
|||
|
|
<div class="channel-header">
|
|||
|
|
<div class="d-flex align-center">
|
|||
|
|
<v-avatar size="48" :color="currentChannel.isPublic ? 'green' : 'orange'" class="mr-4">
|
|||
|
|
<v-icon :color="currentChannel.isPublic ? 'white' : 'white'" size="24">
|
|||
|
|
{{ currentChannel.isPublic ? 'mdi-earth' : 'mdi-lock' }}
|
|||
|
|
</v-icon>
|
|||
|
|
</v-avatar>
|
|||
|
|
<div>
|
|||
|
|
<h2 class="text-h5 mb-1">{{ currentChannel.name }}</h2>
|
|||
|
|
<div class="d-flex align-center">
|
|||
|
|
<v-icon size="16" class="mr-1">mdi-account-group</v-icon>
|
|||
|
|
<span class="text-caption">{{ currentChannel.memberCount || 0 }} عضو</span>
|
|||
|
|
<v-divider vertical class="mx-3"></v-divider>
|
|||
|
|
<span class="text-caption">{{ currentChannel.messageCount }} پیام</span>
|
|||
|
|
<v-divider vertical class="mx-3"></v-divider>
|
|||
|
|
<v-chip
|
|||
|
|
v-if="currentChannel.isPublic"
|
|||
|
|
size="small"
|
|||
|
|
:color="canSendMessage ? 'success' : 'warning'"
|
|||
|
|
variant="tonal"
|
|||
|
|
>
|
|||
|
|
{{ canSendMessage ? 'عضو' : 'مشاهدهکننده' }}
|
|||
|
|
</v-chip>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="channel-actions">
|
|||
|
|
<v-menu>
|
|||
|
|
<template v-slot:activator="{ props }">
|
|||
|
|
<v-btn icon size="small" v-bind="props">
|
|||
|
|
<v-icon>mdi-dots-vertical</v-icon>
|
|||
|
|
</v-btn>
|
|||
|
|
</template>
|
|||
|
|
<v-list>
|
|||
|
|
<v-list-item @click="showChannelInfo = !showChannelInfo">
|
|||
|
|
<v-list-item-title>اطلاعات کانال</v-list-item-title>
|
|||
|
|
</v-list-item>
|
|||
|
|
<v-list-item
|
|||
|
|
v-if="canSendMessage"
|
|||
|
|
@click="leaveChannel"
|
|||
|
|
>
|
|||
|
|
<v-list-item-title>ترک کانال</v-list-item-title>
|
|||
|
|
</v-list-item>
|
|||
|
|
<v-list-item
|
|||
|
|
v-else-if="currentChannel.isPublic"
|
|||
|
|
@click="joinChannel(currentChannel)"
|
|||
|
|
>
|
|||
|
|
<v-list-item-title>پیوستن به کانال</v-list-item-title>
|
|||
|
|
</v-list-item>
|
|||
|
|
</v-list>
|
|||
|
|
</v-menu>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Channel Info -->
|
|||
|
|
<v-expand-transition>
|
|||
|
|
<div v-if="showChannelInfo" class="channel-info">
|
|||
|
|
<v-card variant="outlined" class="ma-4">
|
|||
|
|
<v-card-text>
|
|||
|
|
<div class="d-flex align-center mb-3">
|
|||
|
|
<v-icon start class="mr-2">mdi-information</v-icon>
|
|||
|
|
<h3 class="text-h6">اطلاعات کانال</h3>
|
|||
|
|
</div>
|
|||
|
|
<p class="text-body-2 mb-4">{{ getChannelInfo?.description || 'توضیحی برای این کانال وجود ندارد.' }}</p>
|
|||
|
|
<div class="channel-stats">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<v-icon size="20" class="mr-2">mdi-account-group</v-icon>
|
|||
|
|
<span>{{ getChannelInfo?.memberCount || 0 }} عضو</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<v-icon size="20" class="mr-2">mdi-message</v-icon>
|
|||
|
|
<span>{{ getChannelInfo?.messageCount || 0 }} پیام</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<v-icon size="20" class="mr-2">mdi-calendar</v-icon>
|
|||
|
|
<span>{{ getChannelInfo?.createdAt ? formatDate(getChannelInfo.createdAt) : '-' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="channel-actions mt-4">
|
|||
|
|
<v-btn
|
|||
|
|
v-if="canSendMessage"
|
|||
|
|
color="primary"
|
|||
|
|
variant="outlined"
|
|||
|
|
size="small"
|
|||
|
|
@click="showMemberDialog = true"
|
|||
|
|
>
|
|||
|
|
<v-icon start>mdi-account-group</v-icon>
|
|||
|
|
مشاهده اعضا
|
|||
|
|
</v-btn>
|
|||
|
|
<v-btn
|
|||
|
|
v-if="currentChannel.isAdmin"
|
|||
|
|
color="secondary"
|
|||
|
|
variant="outlined"
|
|||
|
|
size="small"
|
|||
|
|
class="mr-2"
|
|||
|
|
@click="showAddMemberDialog = true"
|
|||
|
|
>
|
|||
|
|
<v-icon start>mdi-account-plus</v-icon>
|
|||
|
|
اضافه کردن عضو
|
|||
|
|
</v-btn>
|
|||
|
|
<v-btn
|
|||
|
|
v-if="currentChannel.isPublic && !canSendMessage"
|
|||
|
|
color="primary"
|
|||
|
|
size="small"
|
|||
|
|
@click="joinChannel(currentChannel)"
|
|||
|
|
>
|
|||
|
|
<v-icon start>mdi-account-plus</v-icon>
|
|||
|
|
پیوستن به کانال
|
|||
|
|
</v-btn>
|
|||
|
|
</div>
|
|||
|
|
</v-card-text>
|
|||
|
|
</v-card>
|
|||
|
|
</div>
|
|||
|
|
</v-expand-transition>
|
|||
|
|
|
|||
|
|
<!-- Messages -->
|
|||
|
|
<div class="messages-container" ref="messagesContainer">
|
|||
|
|
<div v-if="loading" class="loading-state">
|
|||
|
|
<v-progress-circular indeterminate color="primary" size="50"></v-progress-circular>
|
|||
|
|
<p class="text-body-1 mt-4">در حال بارگذاری پیامها...</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else-if="messages.length === 0" class="empty-messages">
|
|||
|
|
<v-icon size="80" color="grey-lighten-1">mdi-chat-outline</v-icon>
|
|||
|
|
<h3 class="text-h6 text-grey-lighten-1 mt-4 mb-2">هنوز پیامی ارسال نشده است</h3>
|
|||
|
|
<p class="text-grey-lighten-1">اولین پیام را ارسال کنید!</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else class="messages-list">
|
|||
|
|
<div
|
|||
|
|
v-for="message in messages"
|
|||
|
|
:key="message.id"
|
|||
|
|
class="message-item"
|
|||
|
|
:class="{ 'message-own': message.sender.id === currentUser?.id }"
|
|||
|
|
>
|
|||
|
|
<div class="message-avatar">
|
|||
|
|
<v-avatar size="40" color="primary">
|
|||
|
|
<span class="text-white">{{ message.sender.fullName.charAt(0) }}</span>
|
|||
|
|
</v-avatar>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="message-content">
|
|||
|
|
<div class="message-header">
|
|||
|
|
<span class="message-sender">{{ message.sender.fullName }}</span>
|
|||
|
|
<span class="message-time">{{ formatTime(message.sentAt) }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Quoted Message -->
|
|||
|
|
<div v-if="message.quotedMessage" class="quoted-message">
|
|||
|
|
<div class="quoted-content">
|
|||
|
|
<span class="quoted-sender">{{ message.quotedMessage.sender }}</span>
|
|||
|
|
<span class="quoted-text">{{ message.quotedMessage.content }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="message-bubble">
|
|||
|
|
<div v-if="message.messageType === 'emoji'" class="emoji-message">
|
|||
|
|
{{ message.content }}
|
|||
|
|
</div>
|
|||
|
|
<div v-else class="text-message">
|
|||
|
|
{{ message.content }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Reactions -->
|
|||
|
|
<div v-if="message.reactions && Object.keys(message.reactions).length > 0" class="message-reactions">
|
|||
|
|
<v-chip
|
|||
|
|
v-for="(users, emoji) in message.reactions"
|
|||
|
|
:key="emoji"
|
|||
|
|
size="small"
|
|||
|
|
variant="outlined"
|
|||
|
|
class="mr-1"
|
|||
|
|
>
|
|||
|
|
{{ emoji }} {{ users.length }}
|
|||
|
|
</v-chip>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Message Input -->
|
|||
|
|
<div class="message-input-container">
|
|||
|
|
<!-- Show join button if user is not a member -->
|
|||
|
|
<div v-if="currentChannel && !canSendMessage" class="join-prompt">
|
|||
|
|
<v-alert
|
|||
|
|
type="info"
|
|||
|
|
variant="tonal"
|
|||
|
|
class="mb-4"
|
|||
|
|
>
|
|||
|
|
<div class="d-flex align-center">
|
|||
|
|
<v-icon start class="mr-2">mdi-information</v-icon>
|
|||
|
|
<span>برای ارسال پیام باید عضو این کانال باشید</span>
|
|||
|
|
</div>
|
|||
|
|
</v-alert>
|
|||
|
|
<v-btn
|
|||
|
|
color="primary"
|
|||
|
|
size="large"
|
|||
|
|
block
|
|||
|
|
@click="joinChannel(currentChannel)"
|
|||
|
|
>
|
|||
|
|
<v-icon start>mdi-account-plus</v-icon>
|
|||
|
|
پیوستن به کانال
|
|||
|
|
</v-btn>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Show message input if user is a member -->
|
|||
|
|
<div v-else-if="currentChannel && canSendMessage" class="input-wrapper">
|
|||
|
|
<v-text-field
|
|||
|
|
v-model="messageText"
|
|||
|
|
placeholder="پیام خود را بنویسید..."
|
|||
|
|
variant="outlined"
|
|||
|
|
density="compact"
|
|||
|
|
hide-details
|
|||
|
|
@keyup.enter="sendMessage"
|
|||
|
|
:disabled="loading"
|
|||
|
|
class="message-input"
|
|||
|
|
>
|
|||
|
|
<template v-slot:prepend>
|
|||
|
|
<v-btn icon size="small" @click="showEmojiPicker = !showEmojiPicker">
|
|||
|
|
<v-icon>mdi-emoticon</v-icon>
|
|||
|
|
</v-btn>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template v-slot:append>
|
|||
|
|
<v-btn
|
|||
|
|
icon
|
|||
|
|
color="primary"
|
|||
|
|
@click="sendMessage"
|
|||
|
|
:disabled="!messageText.trim() || loading"
|
|||
|
|
>
|
|||
|
|
<v-icon>mdi-send</v-icon>
|
|||
|
|
</v-btn>
|
|||
|
|
</template>
|
|||
|
|
</v-text-field>
|
|||
|
|
|
|||
|
|
<!-- Emoji Picker -->
|
|||
|
|
<v-expand-transition>
|
|||
|
|
<div v-if="showEmojiPicker" class="emoji-picker">
|
|||
|
|
<div class="emoji-grid">
|
|||
|
|
<v-btn
|
|||
|
|
v-for="emoji in commonEmojis"
|
|||
|
|
:key="emoji"
|
|||
|
|
variant="text"
|
|||
|
|
size="small"
|
|||
|
|
@click="insertEmoji(emoji)"
|
|||
|
|
>
|
|||
|
|
{{ emoji }}
|
|||
|
|
</v-btn>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</v-expand-transition>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Create Channel Dialog -->
|
|||
|
|
<v-dialog v-model="showCreateChannel" max-width="500px">
|
|||
|
|
<v-card>
|
|||
|
|
<v-card-title class="d-flex align-center">
|
|||
|
|
<v-icon start class="mr-2">mdi-plus-circle</v-icon>
|
|||
|
|
ایجاد کانال جدید
|
|||
|
|
</v-card-title>
|
|||
|
|
<v-card-text>
|
|||
|
|
<v-form ref="createChannelForm">
|
|||
|
|
<v-text-field
|
|||
|
|
v-model="newChannel.name"
|
|||
|
|
label="نام کانال"
|
|||
|
|
required
|
|||
|
|
:rules="[v => !!v || 'نام کانال الزامی است']"
|
|||
|
|
></v-text-field>
|
|||
|
|
<v-textarea
|
|||
|
|
v-model="newChannel.description"
|
|||
|
|
label="توضیحات"
|
|||
|
|
rows="3"
|
|||
|
|
placeholder="توضیح کوتاهی درباره کانال بنویسید..."
|
|||
|
|
></v-textarea>
|
|||
|
|
<v-switch
|
|||
|
|
v-model="newChannel.isPublic"
|
|||
|
|
label="کانال عمومی"
|
|||
|
|
color="primary"
|
|||
|
|
inset
|
|||
|
|
></v-switch>
|
|||
|
|
<div class="text-caption text-grey-darken-1 mt-2">
|
|||
|
|
کانالهای عمومی برای همه قابل مشاهده و پیوستن هستند
|
|||
|
|
</div>
|
|||
|
|
</v-form>
|
|||
|
|
</v-card-text>
|
|||
|
|
<v-card-actions>
|
|||
|
|
<v-btn color="primary" @click="createChannel" :loading="creatingChannel">
|
|||
|
|
ایجاد
|
|||
|
|
</v-btn>
|
|||
|
|
<v-btn @click="showCreateChannel = false">لغو</v-btn>
|
|||
|
|
</v-card-actions>
|
|||
|
|
</v-card>
|
|||
|
|
</v-dialog>
|
|||
|
|
|
|||
|
|
<!-- Member Management Dialog -->
|
|||
|
|
<v-dialog v-model="showMemberDialog" max-width="600px">
|
|||
|
|
<v-card>
|
|||
|
|
<v-card-title class="d-flex align-center">
|
|||
|
|
<v-icon start class="mr-2">mdi-account-group</v-icon>
|
|||
|
|
مدیریت اعضای کانال
|
|||
|
|
<v-spacer></v-spacer>
|
|||
|
|
<v-btn
|
|||
|
|
v-if="currentChannel?.isAdmin"
|
|||
|
|
color="primary"
|
|||
|
|
size="small"
|
|||
|
|
@click="showAddMemberDialog = true"
|
|||
|
|
>
|
|||
|
|
<v-icon start>mdi-plus</v-icon>
|
|||
|
|
اضافه کردن عضو
|
|||
|
|
</v-btn>
|
|||
|
|
</v-card-title>
|
|||
|
|
<v-card-text>
|
|||
|
|
<div v-if="loadingMembers" class="text-center pa-4">
|
|||
|
|
<v-progress-circular indeterminate color="primary"></v-progress-circular>
|
|||
|
|
<p class="mt-2">در حال بارگذاری اعضا...</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else>
|
|||
|
|
<div class="d-flex align-center mb-4">
|
|||
|
|
<v-icon class="mr-2">mdi-account-group</v-icon>
|
|||
|
|
<span class="text-subtitle-1">{{ channelMembers.length }} عضو</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<v-list>
|
|||
|
|
<v-list-item
|
|||
|
|
v-for="member in channelMembers"
|
|||
|
|
:key="member.id"
|
|||
|
|
class="member-item"
|
|||
|
|
>
|
|||
|
|
<template v-slot:prepend>
|
|||
|
|
<v-avatar size="40" color="primary" class="mr-3">
|
|||
|
|
<span class="text-white">{{ member.fullName.charAt(0) }}</span>
|
|||
|
|
</v-avatar>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<v-list-item-title class="font-weight-medium">
|
|||
|
|
{{ member.fullName }}
|
|||
|
|
<v-chip
|
|||
|
|
v-if="member.isAdmin"
|
|||
|
|
size="small"
|
|||
|
|
color="orange"
|
|||
|
|
class="ml-2"
|
|||
|
|
>
|
|||
|
|
مدیر
|
|||
|
|
</v-chip>
|
|||
|
|
</v-list-item-title>
|
|||
|
|
|
|||
|
|
<v-list-item-subtitle class="text-caption">
|
|||
|
|
{{ member.email }}
|
|||
|
|
</v-list-item-subtitle>
|
|||
|
|
|
|||
|
|
<template v-slot:append>
|
|||
|
|
<v-btn
|
|||
|
|
v-if="currentChannel?.isAdmin && !member.isAdmin"
|
|||
|
|
icon
|
|||
|
|
size="small"
|
|||
|
|
color="error"
|
|||
|
|
@click="removeMemberFromChannel(member.id)"
|
|||
|
|
>
|
|||
|
|
<v-icon>mdi-delete</v-icon>
|
|||
|
|
</v-btn>
|
|||
|
|
</template>
|
|||
|
|
</v-list-item>
|
|||
|
|
</v-list>
|
|||
|
|
</div>
|
|||
|
|
</v-card-text>
|
|||
|
|
<v-card-actions>
|
|||
|
|
<v-btn @click="showMemberDialog = false">بستن</v-btn>
|
|||
|
|
</v-card-actions>
|
|||
|
|
</v-card>
|
|||
|
|
</v-dialog>
|
|||
|
|
|
|||
|
|
<!-- Add Member Dialog -->
|
|||
|
|
<v-dialog v-model="showAddMemberDialog" max-width="500px">
|
|||
|
|
<v-card>
|
|||
|
|
<v-card-title class="d-flex align-center">
|
|||
|
|
<v-icon start class="mr-2">mdi-account-plus</v-icon>
|
|||
|
|
اضافه کردن عضو جدید
|
|||
|
|
</v-card-title>
|
|||
|
|
<v-card-text>
|
|||
|
|
<v-text-field
|
|||
|
|
v-model="memberSearch"
|
|||
|
|
label="جستجوی کاربر"
|
|||
|
|
placeholder="نام یا ایمیل کاربر را وارد کنید..."
|
|||
|
|
prepend-inner-icon="mdi-magnify"
|
|||
|
|
variant="outlined"
|
|||
|
|
@input="searchUsersForMember"
|
|||
|
|
></v-text-field>
|
|||
|
|
|
|||
|
|
<div v-if="searchingUsers" class="text-center pa-4">
|
|||
|
|
<v-progress-circular indeterminate color="primary" size="20"></v-progress-circular>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else-if="searchResults.length > 0" class="mt-4">
|
|||
|
|
<v-list>
|
|||
|
|
<v-list-item
|
|||
|
|
v-for="user in searchResults"
|
|||
|
|
:key="user.id"
|
|||
|
|
@click="addMemberToChannel(user.id)"
|
|||
|
|
class="search-result-item"
|
|||
|
|
>
|
|||
|
|
<template v-slot:prepend>
|
|||
|
|
<v-avatar size="36" color="primary" class="mr-3">
|
|||
|
|
<span class="text-white">{{ user.fullName.charAt(0) }}</span>
|
|||
|
|
</v-avatar>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<v-list-item-title class="font-weight-medium">
|
|||
|
|
{{ user.fullName }}
|
|||
|
|
</v-list-item-title>
|
|||
|
|
|
|||
|
|
<v-list-item-subtitle class="text-caption">
|
|||
|
|
{{ user.email }}
|
|||
|
|
</v-list-item-subtitle>
|
|||
|
|
|
|||
|
|
<template v-slot:append>
|
|||
|
|
<v-btn
|
|||
|
|
icon
|
|||
|
|
size="small"
|
|||
|
|
color="primary"
|
|||
|
|
>
|
|||
|
|
<v-icon>mdi-plus</v-icon>
|
|||
|
|
</v-btn>
|
|||
|
|
</template>
|
|||
|
|
</v-list-item>
|
|||
|
|
</v-list>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-else-if="memberSearch && !searchingUsers" class="text-center pa-4">
|
|||
|
|
<p class="text-grey-lighten-1">کاربری یافت نشد</p>
|
|||
|
|
</div>
|
|||
|
|
</v-card-text>
|
|||
|
|
<v-card-actions>
|
|||
|
|
<v-btn @click="showAddMemberDialog = false">لغو</v-btn>
|
|||
|
|
</v-card-actions>
|
|||
|
|
</v-card>
|
|||
|
|
</v-dialog>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { defineComponent, ref, watch, nextTick, computed, onMounted, onUnmounted } from 'vue';
|
|||
|
|
import axios from 'axios';
|
|||
|
|
import { useChatStore } from '@/stores/chatStore';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "ChatHome",
|
|||
|
|
|
|||
|
|
setup() {
|
|||
|
|
// Chat store
|
|||
|
|
const chatStore = useChatStore();
|
|||
|
|
|
|||
|
|
// Reactive data
|
|||
|
|
const messageText = ref('');
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const messagesContainer = ref(null);
|
|||
|
|
|
|||
|
|
// Channel management
|
|||
|
|
const showChannelDrawer = ref(false);
|
|||
|
|
const showCreateChannel = ref(false);
|
|||
|
|
const showChannelInfo = ref(false);
|
|||
|
|
const userChannels = ref([]);
|
|||
|
|
const publicChannels = ref([]);
|
|||
|
|
const currentChannel = ref(null);
|
|||
|
|
const messages = ref([]);
|
|||
|
|
const creatingChannel = ref(false);
|
|||
|
|
const channelSearch = ref('');
|
|||
|
|
|
|||
|
|
// Emoji picker
|
|||
|
|
const showEmojiPicker = ref(false);
|
|||
|
|
const commonEmojis = ref([
|
|||
|
|
'😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
|
|||
|
|
'🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
|
|||
|
|
'😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
|
|||
|
|
'🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
|
|||
|
|
'😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
|
|||
|
|
'🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
|
|||
|
|
'🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😯', '😦', '😧',
|
|||
|
|
'😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢',
|
|||
|
|
'🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '💩', '👻', '💀',
|
|||
|
|
'☠️', '👽', '👾', '🤖', '😺', '😸', '😹', '😻', '😼', '😽',
|
|||
|
|
'🙀', '😿', '😾', '🙈', '🙉', '🙊', '💌', '💘', '💝', '💖',
|
|||
|
|
'💗', '💙', '💚', '❣️', '💕', '💞', '💓', '💗', '💖', '💘',
|
|||
|
|
'💝', '💟', '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍',
|
|||
|
|
'🤎', '💔', '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝',
|
|||
|
|
'💟', '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎'
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// Member management
|
|||
|
|
const showMemberDialog = ref(false);
|
|||
|
|
const showAddMemberDialog = ref(false);
|
|||
|
|
const channelMembers = ref([]);
|
|||
|
|
const loadingMembers = ref(false);
|
|||
|
|
const memberSearch = ref('');
|
|||
|
|
const searchResults = ref([]);
|
|||
|
|
const searchingUsers = ref(false);
|
|||
|
|
|
|||
|
|
// Auto refresh
|
|||
|
|
const autoRefreshInterval = ref(null);
|
|||
|
|
const refreshInterval = 3000; // 3 seconds
|
|||
|
|
|
|||
|
|
// Current user (mock for now)
|
|||
|
|
const currentUser = ref({
|
|||
|
|
id: 1,
|
|||
|
|
fullName: 'کاربر فعلی',
|
|||
|
|
email: 'user@example.com'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// New channel form
|
|||
|
|
const newChannel = ref({
|
|||
|
|
name: '',
|
|||
|
|
description: '',
|
|||
|
|
isPublic: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Computed properties
|
|||
|
|
const filteredChannels = computed(() => {
|
|||
|
|
if (!channelSearch.value) return userChannels.value;
|
|||
|
|
return userChannels.value.filter(channel =>
|
|||
|
|
channel.name.toLowerCase().includes(channelSearch.value.toLowerCase())
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const canSendMessage = computed(() => {
|
|||
|
|
if (!currentChannel.value) return false;
|
|||
|
|
// User can send message if they are a member of the channel
|
|||
|
|
return userChannels.value.some(channel => channel.id === currentChannel.value.id);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const isCurrentChannelMember = computed(() => {
|
|||
|
|
if (!currentChannel.value) return false;
|
|||
|
|
return userChannels.value.some(channel => channel.id === currentChannel.value.id);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const isChannelJoined = (channelId) => {
|
|||
|
|
return userChannels.value.some(channel => channel.id === channelId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getChannelInfo = computed(() => {
|
|||
|
|
if (!currentChannel.value) return null;
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
name: currentChannel.value.name || '',
|
|||
|
|
description: currentChannel.value.description || '',
|
|||
|
|
isPublic: currentChannel.value.isPublic || false,
|
|||
|
|
messageCount: currentChannel.value.messageCount || 0,
|
|||
|
|
memberCount: currentChannel.value.memberCount || 0,
|
|||
|
|
createdAt: currentChannel.value.createdAt || null,
|
|||
|
|
isAdmin: currentChannel.value.isAdmin || false
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Methods
|
|||
|
|
const loadUserChannels = async () => {
|
|||
|
|
try {
|
|||
|
|
loading.value = true;
|
|||
|
|
const response = await axios.get('/api/chat/channels');
|
|||
|
|
if (response.data.success) {
|
|||
|
|
userChannels.value = response.data.data;
|
|||
|
|
if (userChannels.value.length > 0) {
|
|||
|
|
selectChannel(userChannels.value[0]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error loading channels:', error);
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const updateUserChannels = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await axios.get('/api/chat/channels');
|
|||
|
|
if (response.data.success) {
|
|||
|
|
userChannels.value = response.data.data;
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error updating user channels:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadPublicChannels = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await axios.get('/api/chat/channels/search?q=');
|
|||
|
|
if (response.data.success) {
|
|||
|
|
// Filter out channels that user is already a member of
|
|||
|
|
publicChannels.value = response.data.data.filter(channel =>
|
|||
|
|
!userChannels.value.some(userChannel => userChannel.id === channel.id)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error loading public channels:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const searchChannels = async () => {
|
|||
|
|
if (channelSearch.value.trim()) {
|
|||
|
|
try {
|
|||
|
|
const response = await axios.get(`/api/chat/channels/search?q=${encodeURIComponent(channelSearch.value)}`);
|
|||
|
|
if (response.data.success) {
|
|||
|
|
publicChannels.value = response.data.data.filter(channel =>
|
|||
|
|
!userChannels.value.some(userChannel => userChannel.id === channel.id)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error searching channels:', error);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
loadPublicChannels();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const selectChannel = async (channel) => {
|
|||
|
|
currentChannel.value = channel;
|
|||
|
|
showChannelDrawer.value = false;
|
|||
|
|
await loadChannelMessages(channel.channelId);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const joinChannel = async (channel) => {
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post(`/api/chat/channels/${channel.channelId}/join`);
|
|||
|
|
if (response.data.success) {
|
|||
|
|
// Update user channels to get updated membership status
|
|||
|
|
await updateUserChannels();
|
|||
|
|
|
|||
|
|
// Immediately remove the joined channel from public channels list
|
|||
|
|
publicChannels.value = publicChannels.value.filter(c => c.id !== channel.id);
|
|||
|
|
|
|||
|
|
// If we're currently viewing this channel, update the current channel data
|
|||
|
|
if (currentChannel.value && currentChannel.value.id === channel.id) {
|
|||
|
|
// Find the updated channel data from userChannels
|
|||
|
|
const updatedChannel = userChannels.value.find(c => c.id === channel.id);
|
|||
|
|
if (updatedChannel) {
|
|||
|
|
currentChannel.value = updatedChannel;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Force reactivity update
|
|||
|
|
await nextTick();
|
|||
|
|
|
|||
|
|
// Show success message (optional)
|
|||
|
|
console.log('Successfully joined channel:', channel.name);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error joining channel:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const leaveChannel = async () => {
|
|||
|
|
if (!currentChannel.value) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post(`/api/chat/channels/${currentChannel.value.channelId}/leave`);
|
|||
|
|
if (response.data.success) {
|
|||
|
|
await loadUserChannels();
|
|||
|
|
await loadPublicChannels();
|
|||
|
|
currentChannel.value = null;
|
|||
|
|
messages.value = [];
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error leaving channel:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const loadChannelMessages = async (channelId, isAutoRefresh = false) => {
|
|||
|
|
try {
|
|||
|
|
if (!isAutoRefresh) {
|
|||
|
|
loading.value = true;
|
|||
|
|
}
|
|||
|
|
const response = await axios.get(`/api/chat/channels/${channelId}/messages`);
|
|||
|
|
if (response.data.success) {
|
|||
|
|
const newMessages = response.data.data.reverse(); // Show newest first
|
|||
|
|
|
|||
|
|
// For auto-refresh, only update if there are new messages
|
|||
|
|
if (isAutoRefresh) {
|
|||
|
|
const currentMessageIds = messages.value.map(m => m.id);
|
|||
|
|
const newMessageIds = newMessages.map(m => m.id);
|
|||
|
|
const hasNewMessages = newMessageIds.some(id => !currentMessageIds.includes(id));
|
|||
|
|
|
|||
|
|
if (hasNewMessages) {
|
|||
|
|
messages.value = newMessages;
|
|||
|
|
await nextTick();
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
messages.value = newMessages;
|
|||
|
|
await nextTick();
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error loading messages:', error);
|
|||
|
|
} finally {
|
|||
|
|
if (!isAutoRefresh) {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const sendMessage = async () => {
|
|||
|
|
if (!messageText.value.trim() || loading.value || !currentChannel.value) return;
|
|||
|
|
|
|||
|
|
// Check if user can send message
|
|||
|
|
if (!canSendMessage.value) {
|
|||
|
|
// Show a notification that user needs to join
|
|||
|
|
console.log('User needs to join channel to send messages');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loading.value = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post(`/api/chat/channels/${currentChannel.value.channelId}/messages`, {
|
|||
|
|
content: messageText.value,
|
|||
|
|
messageType: 'text'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.data.success) {
|
|||
|
|
const newMessage = response.data.data;
|
|||
|
|
messages.value.push(newMessage);
|
|||
|
|
messageText.value = '';
|
|||
|
|
|
|||
|
|
await nextTick();
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error sending message:', error);
|
|||
|
|
// Handle specific error for non-members
|
|||
|
|
if (error.response?.status === 403) {
|
|||
|
|
console.log('User is not a member of this channel');
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const createChannel = async () => {
|
|||
|
|
if (!newChannel.value.name.trim()) return;
|
|||
|
|
|
|||
|
|
creatingChannel.value = true;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await axios.post('/api/chat/channels', {
|
|||
|
|
name: newChannel.value.name,
|
|||
|
|
description: newChannel.value.description,
|
|||
|
|
isPublic: newChannel.value.isPublic
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.data.success) {
|
|||
|
|
const newChannelData = response.data.data;
|
|||
|
|
userChannels.value.push(newChannelData);
|
|||
|
|
selectChannel(newChannelData);
|
|||
|
|
showCreateChannel.value = false;
|
|||
|
|
newChannel.value = { name: '', description: '', isPublic: true };
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error creating channel:', error);
|
|||
|
|
} finally {
|
|||
|
|
creatingChannel.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const insertEmoji = (emoji) => {
|
|||
|
|
messageText.value += emoji;
|
|||
|
|
showEmojiPicker.value = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const scrollToBottom = () => {
|
|||
|
|
if (messagesContainer.value) {
|
|||
|
|
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const refreshChannels = async () => {
|
|||
|
|
await loadUserChannels();
|
|||
|
|
await loadPublicChannels();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Member management methods
|
|||
|
|
const loadChannelMembers = async () => {
|
|||
|
|
if (!currentChannel.value) return;
|
|||
|
|
|
|||
|
|
// Only load members if user is a member of the channel
|
|||
|
|
if (!canSendMessage.value) {
|
|||
|
|
channelMembers.value = [];
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
loadingMembers.value = true;
|
|||
|
|
try {
|
|||
|
|
const members = await chatStore.getChannelMembers(currentChannel.value.channelId);
|
|||
|
|
channelMembers.value = members;
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error loading channel members:', error);
|
|||
|
|
channelMembers.value = [];
|
|||
|
|
} finally {
|
|||
|
|
loadingMembers.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const searchUsersForMember = async () => {
|
|||
|
|
if (!memberSearch.value.trim()) {
|
|||
|
|
searchResults.value = [];
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
searchingUsers.value = true;
|
|||
|
|
try {
|
|||
|
|
const users = await chatStore.searchUsers(memberSearch.value);
|
|||
|
|
// Filter out users who are already members
|
|||
|
|
const memberIds = channelMembers.value.map(m => m.id);
|
|||
|
|
searchResults.value = users.filter(user => !memberIds.includes(user.id));
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error searching users:', error);
|
|||
|
|
searchResults.value = [];
|
|||
|
|
} finally {
|
|||
|
|
searchingUsers.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const addMemberToChannel = async (userId) => {
|
|||
|
|
if (!currentChannel.value) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const success = await chatStore.addMember(currentChannel.value.channelId, userId);
|
|||
|
|
if (success) {
|
|||
|
|
await loadChannelMembers();
|
|||
|
|
showAddMemberDialog.value = false;
|
|||
|
|
memberSearch.value = '';
|
|||
|
|
searchResults.value = [];
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error adding member:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeMemberFromChannel = async (userId) => {
|
|||
|
|
if (!currentChannel.value) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const success = await chatStore.removeMember(currentChannel.value.channelId, userId);
|
|||
|
|
if (success) {
|
|||
|
|
await loadChannelMembers();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error removing member:', error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Watch for channel changes to load members
|
|||
|
|
watch(currentChannel, async (newChannel) => {
|
|||
|
|
if (newChannel && canSendMessage.value) {
|
|||
|
|
await loadChannelMembers();
|
|||
|
|
} else {
|
|||
|
|
channelMembers.value = [];
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Auto refresh methods
|
|||
|
|
const startAutoRefresh = () => {
|
|||
|
|
if (autoRefreshInterval.value) {
|
|||
|
|
clearInterval(autoRefreshInterval.value);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
autoRefreshInterval.value = setInterval(async () => {
|
|||
|
|
if (currentChannel.value && !loading.value) {
|
|||
|
|
await loadChannelMessages(currentChannel.value.channelId, true);
|
|||
|
|
}
|
|||
|
|
}, refreshInterval);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const stopAutoRefresh = () => {
|
|||
|
|
if (autoRefreshInterval.value) {
|
|||
|
|
clearInterval(autoRefreshInterval.value);
|
|||
|
|
autoRefreshInterval.value = null;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Watch current channel for auto refresh
|
|||
|
|
watch(currentChannel, (newChannel) => {
|
|||
|
|
if (newChannel) {
|
|||
|
|
startAutoRefresh();
|
|||
|
|
} else {
|
|||
|
|
stopAutoRefresh();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const formatTime = (timeString) => {
|
|||
|
|
if (!timeString) return '-';
|
|||
|
|
|
|||
|
|
const date = new Date(timeString);
|
|||
|
|
|
|||
|
|
// Check if date is valid
|
|||
|
|
if (isNaN(date.getTime())) {
|
|||
|
|
return '-';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return new Intl.DateTimeFormat('fa-IR', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
}).format(date);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatDate = (dateString) => {
|
|||
|
|
if (!dateString) return '-';
|
|||
|
|
|
|||
|
|
const date = new Date(dateString);
|
|||
|
|
|
|||
|
|
// Check if date is valid
|
|||
|
|
if (isNaN(date.getTime())) {
|
|||
|
|
return '-';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return new Intl.DateTimeFormat('fa-IR', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: 'long',
|
|||
|
|
day: 'numeric'
|
|||
|
|
}).format(date);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Initialize
|
|||
|
|
onMounted(() => {
|
|||
|
|
loadUserChannels();
|
|||
|
|
loadPublicChannels();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Cleanup on unmount
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
stopAutoRefresh();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
messageText,
|
|||
|
|
loading,
|
|||
|
|
messagesContainer,
|
|||
|
|
showChannelDrawer,
|
|||
|
|
showCreateChannel,
|
|||
|
|
showChannelInfo,
|
|||
|
|
userChannels,
|
|||
|
|
publicChannels,
|
|||
|
|
currentChannel,
|
|||
|
|
messages,
|
|||
|
|
creatingChannel,
|
|||
|
|
showEmojiPicker,
|
|||
|
|
commonEmojis,
|
|||
|
|
currentUser,
|
|||
|
|
newChannel,
|
|||
|
|
channelSearch,
|
|||
|
|
filteredChannels,
|
|||
|
|
canSendMessage,
|
|||
|
|
isCurrentChannelMember,
|
|||
|
|
isChannelJoined,
|
|||
|
|
getChannelInfo,
|
|||
|
|
showMemberDialog,
|
|||
|
|
showAddMemberDialog,
|
|||
|
|
channelMembers,
|
|||
|
|
loadingMembers,
|
|||
|
|
memberSearch,
|
|||
|
|
searchResults,
|
|||
|
|
searchingUsers,
|
|||
|
|
sendMessage,
|
|||
|
|
createChannel,
|
|||
|
|
selectChannel,
|
|||
|
|
joinChannel,
|
|||
|
|
leaveChannel,
|
|||
|
|
searchChannels,
|
|||
|
|
insertEmoji,
|
|||
|
|
refreshChannels,
|
|||
|
|
loadChannelMembers,
|
|||
|
|
searchUsersForMember,
|
|||
|
|
addMemberToChannel,
|
|||
|
|
removeMemberFromChannel,
|
|||
|
|
updateUserChannels,
|
|||
|
|
formatTime,
|
|||
|
|
formatDate,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.chat-home {
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-drawer {
|
|||
|
|
border-right: 1px solid rgba(0, 0, 0, 0.12);
|
|||
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.drawer-header {
|
|||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|||
|
|
background-color: rgba(0, 0, 0, 0.01);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-section {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-item {
|
|||
|
|
margin: 4px 8px;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-item:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-active {
|
|||
|
|
background-color: rgba(25, 118, 210, 0.1) !important;
|
|||
|
|
border-left: 3px solid #1976d2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-area {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|||
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-info {
|
|||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
|||
|
|
background-color: rgba(0, 0, 0, 0.01);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-stats {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
color: rgba(0, 0, 0, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-container {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-state,
|
|||
|
|
.empty-messages {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-own {
|
|||
|
|
flex-direction: row-reverse;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-content {
|
|||
|
|
flex: 1;
|
|||
|
|
max-width: 70%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-sender {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-time {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: rgba(0, 0, 0, 0.6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quoted-message {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|||
|
|
border-left: 3px solid #1976d2;
|
|||
|
|
padding: 12px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quoted-sender {
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: #1976d2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.quoted-text {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
color: rgba(0, 0, 0, 0.7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-bubble {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
padding: 16px;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-own .message-bubble {
|
|||
|
|
background-color: #1976d2;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.emoji-message {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-message {
|
|||
|
|
line-height: 1.6;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-reactions {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-input-container {
|
|||
|
|
padding: 20px;
|
|||
|
|
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
|||
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-input {
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.emoji-picker {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: white;
|
|||
|
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 12px;
|
|||
|
|
max-height: 250px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
z-index: 1000;
|
|||
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.emoji-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(8, 1fr);
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-content {
|
|||
|
|
text-align: center;
|
|||
|
|
max-width: 500px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.join-prompt {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 20px;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
margin: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .join-prompt {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Custom scrollbar */
|
|||
|
|
.messages-container::-webkit-scrollbar,
|
|||
|
|
.channel-drawer::-webkit-scrollbar,
|
|||
|
|
.channel-menu-card::-webkit-scrollbar {
|
|||
|
|
width: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-container::-webkit-scrollbar-track,
|
|||
|
|
.channel-drawer::-webkit-scrollbar-track,
|
|||
|
|
.channel-menu-card::-webkit-scrollbar-track {
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-container::-webkit-scrollbar-thumb,
|
|||
|
|
.channel-drawer::-webkit-scrollbar-thumb,
|
|||
|
|
.channel-menu-card::-webkit-scrollbar-thumb {
|
|||
|
|
background: rgba(0, 0, 0, 0.2);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-container::-webkit-scrollbar-thumb:hover,
|
|||
|
|
.channel-drawer::-webkit-scrollbar-thumb:hover,
|
|||
|
|
.channel-menu-card::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: rgba(0, 0, 0, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Dark theme support */
|
|||
|
|
.v-theme--dark .channel-drawer {
|
|||
|
|
border-right-color: rgba(255, 255, 255, 0.12);
|
|||
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .drawer-header {
|
|||
|
|
border-bottom-color: rgba(255, 255, 255, 0.12);
|
|||
|
|
background-color: rgba(255, 255, 255, 0.01);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .section-header {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|||
|
|
border-bottom-color: rgba(255, 255, 255, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .channel-item:hover {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .message-input-container {
|
|||
|
|
border-top-color: rgba(255, 255, 255, 0.12);
|
|||
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .channel-header {
|
|||
|
|
border-bottom-color: rgba(255, 255, 255, 0.12);
|
|||
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .channel-info {
|
|||
|
|
border-bottom-color: rgba(255, 255, 255, 0.12);
|
|||
|
|
background-color: rgba(255, 255, 255, 0.01);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .message-bubble {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .quoted-message {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .message-input {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Mobile optimizations */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.chat-container {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-drawer {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: 1000;
|
|||
|
|
background: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-area {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-content {
|
|||
|
|
max-width: 85%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.emoji-picker {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 100px;
|
|||
|
|
left: 16px;
|
|||
|
|
right: 16px;
|
|||
|
|
max-height: 300px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-header {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-container {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-input-container {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-buttons {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.channel-stats {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Member management styles */
|
|||
|
|
.member-item {
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-item:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-result-item {
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-result-item:hover {
|
|||
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Join button and member chip styles */
|
|||
|
|
.join-btn {
|
|||
|
|
font-weight: 600;
|
|||
|
|
text-transform: none;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.join-btn:hover {
|
|||
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.member-chip {
|
|||
|
|
font-weight: 600;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.count-chip {
|
|||
|
|
font-weight: 600;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.unread-chip {
|
|||
|
|
font-weight: 600;
|
|||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .member-item:hover,
|
|||
|
|
.v-theme--dark .search-result-item:hover {
|
|||
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .join-btn {
|
|||
|
|
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .member-chip {
|
|||
|
|
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .count-chip {
|
|||
|
|
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-theme--dark .unread-chip {
|
|||
|
|
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|