vue-chat-kit 0.3.9 → 0.3.11

package/src/components/chat/GroupSidebar.vue

@@ -0,0 +1,284 @@
+<template>
+  <transition name="slide">
+    <div v-if="visible" class="group-sidebar">
+      <!-- 关闭按钮 -->
+      <div class="group-sidebar-header">
+        <span class="group-sidebar-title">群聊信息</span>
+        <span class="group-sidebar-close" @click="$emit('close')">
+          <Close />
+        </span>
+      </div>
+
+      <div class="group-sidebar-content">
+        <!-- 群成员头像展示区 -->
+        <div class="group-members-avatar-section">
+          <!-- 移除模式提示 -->
+          <div v-if="isRemoveMemberMode" class="group-remove-mode-hint">
+            <Warning />
+            <span>点击成员头像可移除成员</span>
+          </div>
+          <div class="group-members-grid">
+            <div
+              v-for="member in groupMemberList.slice(0, 10)"
+              :key="member.username"
+              :class="['group-member-avatar-item', { 'is-remove-mode': isRemoveMemberMode }]"
+              @click="isRemoveMemberMode ? $emit('remove-member', member.username) : $emit('edit-member-nick', member)"
+            >
+              <div class="group-member-avatar-wrapper">
+                <img
+                  :src="member.avatar ? `${config.api.baseUrl}${member.avatar}` : `https://api.dicebear.com/7.x/avataaars/svg?seed=${member.username}`"
+                  :alt="member.username"
+                  class="group-member-avatar-small"
+                />
+                <!-- 移除模式下的删除图标 -->
+                <div v-if="isRemoveMemberMode && member.username !== currentSelectGroup.owner" class="group-member-remove-badge">
+                  <Close />
+                </div>
+              </div>
+              <span class="group-member-nickname">{{ member.memberNick || member.username }}</span>
+            </div>
+            
+            <!-- 添加按钮 -->
+            <div
+              class="group-member-avatar-item"
+              @click="$emit('invite-member')"
+            >
+              <div class="group-member-action-icon">
+                <Plus />
+              </div>
+              <span class="group-member-nickname">添加</span>
+            </div>
+
+            <!-- 移除按钮 (仅群主可见) -->
+            <div
+              v-if="isGroupOwner"
+              class="group-member-avatar-item"
+              @click="$emit('toggle-remove-mode')"
+              :class="{ 'is-active': isRemoveMemberMode }"
+            >
+              <div class="group-member-action-icon">
+                <Minus />
+              </div>
+              <span class="group-member-nickname">{{ isRemoveMemberMode ? '完成' : '移出' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 分割线 -->
+        <div class="group-divider"></div>
+
+        <!-- 群设置项 -->
+        <div class="group-settings-section">
+          <!-- 群名称 -->
+          <div class="group-setting-item" v-if="isGroupOwner">
+            <span class="group-setting-label">群聊名称</span>
+            <div class="group-setting-value-wrapper">
+              <div v-if="editingFields.groupNickname" class="group-edit-wrapper">
+                <Input
+                  :model-value="tempEditValues.groupNickname"
+                  @update:model-value="$emit('update:tempEditValue', { field: 'groupNickname', value: $event })"
+                  placeholder="请输入群聊名称"
+                  @keyup.enter="$emit('save-field', 'groupNickname')"
+                  class="group-input-edit"
+                />
+                <div class="group-edit-buttons">
+                  <Button size="small" @click="$emit('cancel-edit', 'groupNickname')">取消</Button>
+                  <Button size="small" type="primary" @click="$emit('save-field', 'groupNickname')">保存</Button>
+                </div>
+              </div>
+              <div 
+                v-else
+                class="group-setting-value"
+                @click="$emit('start-edit', 'groupNickname')"
+              >
+                <span class="group-setting-value-text">{{ currentGroupInfo?.groupNickname || currentGroupInfo?.groupName || currentSelectGroup?.name || '' }}</span>
+                <span class="group-edit-icon"><Edit /></span>
+              </div>
+            </div>
+          </div>
+          <div class="group-setting-item" v-else>
+            <span class="group-setting-label">群聊名称</span>
+            <span class="group-setting-value-text">{{ currentGroupInfo?.groupNickname || currentGroupInfo?.groupName || currentSelectGroup?.name || '' }}</span>
+          </div>
+
+          <!-- 群公告 -->
+          <div class="group-setting-item" v-if="isGroupOwner">
+            <span class="group-setting-label">群公告</span>
+            <div class="group-setting-value-wrapper">
+              <div v-if="editingFields.notice" class="group-edit-wrapper">
+                <Input
+                  :model-value="tempEditValues.notice"
+                  @update:model-value="$emit('update:tempEditValue', { field: 'notice', value: $event })"
+                  type="textarea"
+                  :rows="3"
+                  placeholder="请输入群公告"
+                  @keyup.enter.ctrl="$emit('save-field', 'notice')"
+                  class="group-input-edit"
+                />
+                <div class="group-edit-buttons">
+                  <Button size="small" @click="$emit('cancel-edit', 'notice')">取消</Button>
+                  <Button size="small" type="primary" @click="$emit('save-field', 'notice')">保存</Button>
+                </div>
+              </div>
+              <div 
+                v-else
+                class="group-setting-value"
+                @click="$emit('start-edit', 'notice')"
+              >
+                <span class="group-setting-value-text">{{ currentGroupInfo?.notice || '暂无公告' }}</span>
+                <span class="group-edit-icon"><Edit /></span>
+              </div>
+            </div>
+          </div>
+          <div class="group-setting-item" v-else>
+            <span class="group-setting-label">群公告</span>
+            <span class="group-setting-value-text">{{ currentGroupInfo?.notice || '暂无公告' }}</span>
+          </div>
+
+          <!-- 备注 -->
+          <div class="group-setting-item" v-if="isGroupOwner">
+            <span class="group-setting-label">备注</span>
+            <div class="group-setting-value-wrapper">
+              <div v-if="editingFields.remark" class="group-edit-wrapper">
+                <Input
+                  :model-value="tempEditValues.remark"
+                  @update:model-value="$emit('update:tempEditValue', { field: 'remark', value: $event })"
+                  placeholder="请输入备注"
+                  @keyup.enter="$emit('save-field', 'remark')"
+                  class="group-input-edit"
+                />
+                <div class="group-edit-buttons">
+                  <Button size="small" @click="$emit('cancel-edit', 'remark')">取消</Button>
+                  <Button size="small" type="primary" @click="$emit('save-field', 'remark')">保存</Button>
+                </div>
+              </div>
+              <div 
+                v-else
+                class="group-setting-value"
+                @click="$emit('start-edit', 'remark')"
+              >
+                <span class="group-setting-value-text">{{ currentGroupInfo?.remark || '仅自己可见' }}</span>
+                <span class="group-edit-icon"><Edit /></span>
+              </div>
+            </div>
+          </div>
+          <div class="group-setting-item" v-else>
+            <span class="group-setting-label">备注</span>
+            <span class="group-setting-value-text">{{ currentGroupInfo?.remark || '群聊的备注仅自己可见' }}</span>
+          </div>
+
+          <!-- 我在本群的昵称 -->
+          <div class="group-setting-item" @click="$emit('edit-my-nick')">
+            <span class="group-setting-label">我在本群的昵称</span>
+            <div class="group-setting-value">
+              <span class="group-setting-value-text">{{ myNicknameInGroup || myUsername }}</span>
+              <Edit />
+            </div>
+          </div>
+
+          <div class="group-divider"></div>
+
+          <!-- 查找聊天内容 -->
+          <div class="group-setting-item">
+            <span class="group-setting-label">查找聊天内容</span>
+            <ArrowRight />
+          </div>
+
+          <!-- 消息免打扰 -->
+          <div class="group-setting-item">
+            <span class="group-setting-label">消息免打扰</span>
+            <Switch :model-value="muteGroup" @update:model-value="$emit('update:muteGroup', $event)" />
+          </div>
+
+          <div class="group-divider"></div>
+
+          <!-- 群主专属功能 -->
+          <template v-if="isGroupOwner">
+            <!-- 转让群主 -->
+            <div class="group-setting-item" @click="$emit('show-group-detail')">
+              <span class="group-setting-label">转让群主</span>
+              <ArrowRight />
+            </div>
+            
+            <div class="group-setting-item danger" @click="$emit('delete-group')">
+              <span class="group-setting-label">解散群聊</span>
+            </div>
+          </template>
+
+          <!-- 普通成员退出 -->
+          <template v-else>
+            <div class="group-setting-item danger" @click="$emit('quit-group')">
+              <span class="group-setting-label">删除并退出</span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Close, Plus, Minus, Edit, ArrowRight, Warning } from '../ui/icons/index.js'
+import { Input, Button, Switch } from '../ui/index.js'
+
+const props = defineProps({
+  visible: Boolean,
+  currentSelectGroup: Object,
+  groupMemberList: Array,
+  isRemoveMemberMode: Boolean,
+  config: Object,
+  myUsername: String,
+  editingFields: Object,
+  tempEditValues: Object,
+  currentGroupInfo: Object,
+  myNicknameInGroup: String,
+  muteGroup: Boolean,
+  groupOwnerUsername: String
+})
+
+// 在组件内部直接计算是否群主
+const isGroupOwner = computed(() => {
+  console.log('[GroupSidebar] 检查群主身份:', {
+    myUsername: props.myUsername,
+    groupMemberCount: props.groupMemberList?.length
+  })
+  
+  if (!props.groupMemberList || props.groupMemberList.length === 0) {
+    console.log('[GroupSidebar] 无成员列表为空')
+    return false
+  }
+  
+  const currentUserInGroup = props.groupMemberList.find(
+    m => m.username === props.myUsername
+  )
+  
+  console.log('[GroupSidebar] 当前用户在群成员:', currentUserInGroup)
+  
+  const isOwner = currentUserInGroup?.memberType === 0
+  
+  console.log('[GroupSidebar] 是否群主:', isOwner)
+  return isOwner
+})
+
+defineEmits([
+  'close', 
+  'remove-member', 
+  'edit-member-nick', 
+  'invite-member', 
+  'toggle-remove-mode',
+  'start-edit',
+  'cancel-edit',
+  'save-field',
+  'update:tempEditValue',
+  'edit-my-nick',
+  'update:muteGroup',
+  'show-group-detail',
+  'delete-group',
+  'quit-group'
+])
+</script>
+
+<style scoped lang="scss">
+@use '../../styles/components/group-sidebar';
+</style>

package/src/components/chat/MainArea.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="chat-main-area">
+    <!-- 好友信息展示区域 -->
+    <div v-if="currentSelectedFriend && !currentChat && !currentSelectGroup" class="friend-profile-area">
+      <img
+        :src="currentSelectedFriend.avatar"
+        :alt="currentSelectedFriend.name"
+        class="profile-avatar"
+      />
+      <div class="profile-name">{{ currentSelectedFriend.name }}</div>
+      <div class="profile-status">
+        <span
+          :class="[
+            'profile-status-dot',
+            currentSelectedFriend.online ? 'profile-status-online' : 'profile-status-offline'
+          ]"
+        ></span>
+        <span>{{ currentSelectedFriend.online ? '在线' : '离线' }}</span>
+      </div>
+      <el-button
+        type="primary"
+        size="large"
+        @click="$emit('start-chat')"
+        class="profile-start-chat-btn"
+      >
+        <el-icon><ChatDotRound /></el-icon>
+        <span>发消息</span>
+      </el-button>
+    </div>
+    
+    <!-- 群聊信息展示区域 -->
+    <div v-if="currentSelectedGroup && !currentSelectGroup" class="friend-profile-area">
+      <img
+        :src="currentSelectedGroup.avatar"
+        :alt="currentSelectedGroup.name"
+        class="profile-avatar"
+      />
+      <div class="profile-name">{{ currentSelectedGroup.name }}</div>
+      <div class="profile-status">
+        <span class="profile-status-dot profile-status-online"></span>
+        <span>{{ currentSelectedGroup.memberCount || 0 }} 人</span>
+      </div>
+      <el-button
+        type="primary"
+        size="large"
+        @click="$emit('start-group-chat')"
+        class="profile-start-chat-btn"
+      >
+        <el-icon><ChatDotRound /></el-icon>
+        <span>发消息</span>
+      </el-button>
+    </div>
+    
+    <!-- 聊天窗口（群聊或单聊） -->
+    <div v-if="currentChat || currentSelectGroup" class="chat-window-area">
+      <slot name="chat-window"></slot>
+    </div>
+
+    <!-- 空状态 -->
+    <div
+      v-else-if="!currentSelectedFriend && !currentSelectedGroup && !currentChat && !currentSelectGroup"
+      class="chat-empty-state"
+    >
+      <el-icon :size="64" class="empty-state-icon"><ChatLineRound /></el-icon>
+      <div class="empty-state-text">
+        {{ currentNavTab === 'apply' ? '在左侧选择好友申请' : '在左侧选择好友开始聊天' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+defineProps({
+  currentSelectedFriend: Object,
+  currentSelectedGroup: Object,
+  currentChat: Object,
+  currentSelectGroup: Object,
+  currentNavTab: String
+})
+
+defineEmits(['start-chat', 'start-group-chat'])
+</script>
+
+<style scoped lang="scss">
+@use '../../styles/components/main-area';
+</style>

package/src/components/chat/Sidebar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="chat-sidebar">
+    <div class="sidebar-avatar" @click="$emit('avatar-click')">
+      <img :src="myAvatar" alt="头像" class="sidebar-avatar-img" />
+    </div>
+    
+    <div
+      v-for="tab in navTabs"
+      :key="tab.id"
+      :class="[
+        'sidebar-nav-item',
+        currentNavTab === tab.id ? 'sidebar-nav-item-active' : 'sidebar-nav-item-inactive'
+      ]"
+      @click="$emit('update:currentNavTab', tab.id)"
+    >
+      <span class="sidebar-icon">
+        <component :is="tab.icon" />
+      </span>
+      <span v-if="tab.badge" class="sidebar-nav-badge">
+        {{ tab.badge > 99 ? '99+' : tab.badge }}
+      </span>
+    </div>
+    
+    <div class="sidebar-spacer"></div>
+    
+    <div
+      v-if="config.modules.settings"
+      class="sidebar-nav-item sidebar-nav-item-inactive"
+      @click="$emit('settings-click')"
+      title="设置"
+    >
+      <span class="sidebar-icon"><Setting /></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Setting } from '../ui/icons/index.js'
+
+defineProps({
+  myAvatar: String,
+  navTabs: Array,
+  currentNavTab: String,
+  config: Object
+})
+
+defineEmits(['avatar-click', 'settings-click', 'update:currentNavTab'])
+</script>
+
+<style scoped lang="scss">
+@use '../../styles/components/sidebar';
+</style>

package/src/components/chat/dialogs/AddFriendDialog.vue

@@ -0,0 +1,62 @@
+<template>
+  <Dialog
+    :model-value="visible"
+    @update:model-value="$emit('update:visible', $event)"
+    title="添加好友"
+    width="500px"
+  >
+    <div class="add-friend-search-wrapper">
+      <Input
+        :model-value="searchText"
+        @update:model-value="$emit('update:searchText', $event)"
+        placeholder="搜索用户"
+        class="add-friend-search-input"
+      >
+        <template #prefix>
+          <Search />
+        </template>
+      </Input>
+    </div>
+    <div class="add-friend-users-list">
+      <Empty v-if="loading" description="加载中..." />
+      <Empty
+        v-else-if="users.length === 0"
+        description="暂无用户"
+      />
+      <div
+        v-else
+        v-for="user in users"
+        :key="user.username"
+        class="add-friend-user-item"
+      >
+        <div class="add-friend-user-info">
+          <img
+            :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${user.username}`"
+            :alt="user.username"
+            class="add-friend-user-avatar"
+          />
+          <div class="add-friend-user-name">{{ user.username }}</div>
+        </div>
+        <Button type="primary" size="small" @click="$emit('add', user)">添加</Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import { Search } from '../../ui/icons/index.js'
+import { Dialog, Input, Empty, Button } from '../../ui/index.js'
+
+defineProps({
+  visible: Boolean,
+  searchText: String,
+  loading: Boolean,
+  users: Array
+})
+
+defineEmits(['update:visible', 'update:searchText', 'add'])
+</script>
+
+<style scoped lang="scss">
+@use '../../../styles/components/add-friend-dialog';
+</style>

package/src/components/chat/dialogs/CreateGroupDialog.vue

@@ -0,0 +1,86 @@
+<template>
+  <Dialog
+    :model-value="visible"
+    @update:model-value="$emit('update:visible', $event)"
+    title="创建群聊"
+    width="600px"
+  >
+    <div class="create-group-form">
+      <div class="form-item">
+        <label class="form-label">群名称</label>
+        <Input
+          :model-value="groupName"
+          @update:model-value="$emit('update:groupName', $event)"
+          placeholder="请输入群名称"
+          maxlength="50"
+        />
+      </div>
+      <div class="form-item">
+        <label class="form-label">群备注</label>
+        <Input
+          :model-value="groupRemark"
+          @update:model-value="$emit('update:groupRemark', $event)"
+          type="textarea"
+          placeholder="请输入群备注（可选）"
+          :rows="3"
+          maxlength="200"
+        />
+      </div>
+      <div class="form-item">
+        <label class="form-label">选择成员</label>
+        <div class="member-selection">
+          <Empty v-if="friendList.length === 0" description="暂无好友可以添加" />
+          <div
+            v-else
+            class="member-list"
+          >
+            <div
+              v-for="friend in friendList"
+              :key="friend.id"
+              :class="[
+                'member-item',
+                isSelected(friend) ? 'member-selected' : ''
+              ]"
+              @click="$emit('toggle-member', friend)"
+            >
+              <img
+                :src="friend.avatar"
+                :alt="friend.name"
+                class="member-avatar"
+              />
+              <span class="member-name">{{ friend.name }}</span>
+              <CircleCheck v-if="isSelected(friend)" class="member-check" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <Button @click="$emit('update:visible', false)">取消</Button>
+      <Button type="primary" @click="$emit('create')" :disabled="!groupName.trim()">创建</Button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { CircleCheck } from '../../ui/icons/index.js'
+import { Dialog, Input, Empty, Button } from '../../ui/index.js'
+
+const props = defineProps({
+  visible: Boolean,
+  groupName: String,
+  groupRemark: String,
+  friendList: Array,
+  selectedMembers: Array
+})
+
+defineEmits(['update:visible', 'update:groupName', 'update:groupRemark', 'toggle-member', 'create'])
+
+const isSelected = (friend) => {
+  return props.selectedMembers.some(m => m.id === friend.id)
+}
+</script>
+
+<style scoped lang="scss">
+@use '../../../styles/components/create-group-dialog';
+</style>