vue-chat-kit 0.3.9 → 0.3.11

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

@@ -0,0 +1,132 @@
+<template>
+  <Dialog
+    :model-value="visible"
+    @update:model-value="$emit('update:visible', $event)"
+    :title="currentSelectGroup?.name"
+    width="500px"
+  >
+    <div class="group-detail-content">
+      <div class="group-info-section">
+        <div class="group-info-item">
+          <span class="info-label">群ID</span>
+          <span class="info-value">{{ currentSelectGroup?.groupId }}</span>
+        </div>
+        <div class="group-info-item">
+          <span class="info-label">群主</span>
+          <span class="info-value">{{ groupOwnerUsername || currentSelectGroup?.owner }}</span>
+        </div>
+        <div class="group-info-item">
+          <span class="info-label">成员数</span>
+          <span class="info-value">{{ groupMemberList.length }}</span>
+        </div>
+      </div>
+      
+      <div class="group-actions-section" v-if="isGroupOwner">
+        <div class="section-header">
+          <span class="section-title">群管理</span>
+        </div>
+        <div class="group-actions-list">
+          <Button type="primary" size="small" @click="$emit('edit-info')">
+            <template #icon><Edit /></template>编辑群信息
+          </Button>
+          <Button type="danger" size="small" @click="$emit('delete')">
+            <template #icon><Delete /></template>解散群聊
+          </Button>
+        </div>
+      </div>
+      
+      <div class="group-members-section">
+        <div class="section-header">
+          <span class="section-title">群成员</span>
+          <Button size="small" @click="$emit('invite')">
+            <template #icon><Plus /></template>邀请成员
+          </Button>
+        </div>
+        <div class="group-members-list">
+          <Empty v-if="groupMemberList.length === 0" description="暂无成员" />
+          <div
+            v-else
+            v-for="member in groupMemberList"
+            :key="member.id || member.username"
+            class="group-member-item"
+          >
+            <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"
+            />
+            <div class="group-member-info">
+              <span class="group-member-name">{{ member.memberNick || member.username }}</span>
+              <span v-if="member.memberType === 0 || member.username === groupOwnerUsername || member.username === currentSelectGroup?.owner" class="group-member-badge">群主</span>
+            </div>
+            <div class="group-member-actions" v-if="isGroupOwner && member.username !== myUsername">
+              <Button size="small" link @click="$emit('edit-member-nick', member)">
+                改昵称
+              </Button>
+              <Button size="small" link type="danger" @click="$emit('remove-member', member.username)">
+                移除
+              </Button>
+              <Button size="small" link type="warning" @click="$emit('transfer-owner', member.username)">
+                转让
+              </Button>
+            </div>
+            <div class="group-member-actions" v-else-if="member.username === myUsername">
+              <Button size="small" link @click="$emit('edit-member-nick', member)">
+                改昵称
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <Button @click="$emit('update:visible', false)">关闭</Button>
+      <Button type="danger" @click="$emit('quit')">退出群聊</Button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Edit, Delete, Plus } from '../../ui/icons/index.js'
+import { Dialog, Empty, Button } from '../../ui/index.js'
+
+const props = defineProps({
+  visible: Boolean,
+  currentSelectGroup: Object,
+  groupMemberList: Array,
+  myUsername: String,
+  config: Object,
+  groupOwnerUsername: String
+})
+
+// 在组件内部直接计算是否群主
+const isGroupOwner = computed(() => {
+  console.log('[GroupDetailDialog] 检查群主身份:', {
+    myUsername: props.myUsername,
+    groupMemberCount: props.groupMemberList?.length
+  })
+  
+  if (!props.groupMemberList || props.groupMemberList.length === 0) {
+    console.log('[GroupDetailDialog] 无成员列表为空')
+    return false
+  }
+  
+  const currentUserInGroup = props.groupMemberList.find(
+    m => m.username === props.myUsername
+  )
+  
+  console.log('[GroupDetailDialog] 当前用户在群成员:', currentUserInGroup)
+  
+  const isOwner = currentUserInGroup?.memberType === 0
+  
+  console.log('[GroupDetailDialog] 是否群主:', isOwner)
+  return isOwner
+})
+
+defineEmits(['update:visible', 'edit-info', 'delete', 'invite', 'edit-member-nick', 'remove-member', 'transfer-owner', 'quit'])
+</script>
+
+<style scoped lang="scss">
+@use '../../../styles/components/group-detail-dialog';
+</style>

package/src/components/ui/Button.vue

@@ -0,0 +1,190 @@
+<template>
+  <button
+    :class="[
+      'vc-button',
+      `vc-button--${type}`,
+      `vc-button--${size}`,
+      {
+        'vc-button--disabled': disabled || loading,
+        'vc-button--loading': loading
+      }
+    ]"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="vc-button__loading-icon">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 10.84 21.78 9.73 21.37 8.72C21.12 8.14 21.41 7.44 21.99 7.19C22.57 6.94 23.27 7.23 23.52 7.81C24.15 9.26 24.5 10.86 24.5 12.5C24.5 19.07 19.07 24.5 12.5 24.5C5.93 24.5 0.5 19.07 0.5 12.5C0.5 5.93 5.93 0.5 12.5 0.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+    </span>
+    <span v-if="$slots.icon" class="vc-button__icon">
+      <slot name="icon"></slot>
+    </span>
+    <span v-if="$slots.default" class="vc-button__text">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['default', 'primary', 'success', 'warning', 'danger', 'link'].includes(val)
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['small', 'default', 'large'].includes(val)
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const handleClick = (e) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', e)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.vc-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vck-space-xs);
+  padding: var(--vck-space-sm) var(--vck-space);
+  font-size: 14px;
+  font-weight: 500;
+  border: 1px solid var(--vck-border);
+  border-radius: var(--vck-radius);
+  background-color: var(--vck-bg);
+  color: var(--vck-text-primary);
+  cursor: pointer;
+  transition: all var(--vck-transition-fast);
+  line-height: 1;
+  user-select: none;
+
+  &:hover:not(.vc-button--disabled) {
+    border-color: var(--vck-primary);
+    color: var(--vck-primary);
+  }
+
+  &:active:not(.vc-button--disabled) {
+    opacity: 0.8;
+  }
+
+  // Types
+  &--primary {
+    background-color: var(--vck-primary);
+    border-color: var(--vck-primary);
+    color: var(--vck-text-white);
+
+    &:hover:not(.vc-button--disabled) {
+      background-color: var(--vck-primary-hover);
+      border-color: var(--vck-primary-hover);
+      color: var(--vck-text-white);
+    }
+  }
+
+  &--success {
+    background-color: var(--vck-success);
+    border-color: var(--vck-success);
+    color: var(--vck-text-white);
+  }
+
+  &--warning {
+    background-color: var(--vck-warning);
+    border-color: var(--vck-warning);
+    color: var(--vck-text-white);
+  }
+
+  &--danger {
+    background-color: var(--vck-danger);
+    border-color: var(--vck-danger);
+    color: var(--vck-text-white);
+  }
+
+  &--link {
+    background-color: transparent;
+    border-color: transparent;
+    padding: var(--vck-space-xs);
+    color: var(--vck-primary);
+
+    &:hover:not(.vc-button--disabled) {
+      color: var(--vck-primary-hover);
+      background-color: transparent;
+    }
+
+    &.vc-button--danger {
+      color: var(--vck-danger);
+
+      &:hover:not(.vc-button--disabled) {
+        color: var(--vck-danger-hover);
+      }
+    }
+
+    &.vc-button--warning {
+      color: var(--vck-warning);
+
+      &:hover:not(.vc-button--disabled) {
+        color: var(--vck-warning-hover);
+      }
+    }
+  }
+
+  // Sizes
+  &--small {
+    padding: var(--vck-space-xs) var(--vck-space-sm);
+    font-size: 12px;
+  }
+
+  &--large {
+    padding: var(--vck-space) var(--vck-space-md);
+    font-size: 16px;
+  }
+
+  // Disabled
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // Loading
+  &--loading {
+    pointer-events: none;
+  }
+
+  &__loading-icon {
+    animation: spin 0.8s linear infinite;
+    display: inline-flex;
+    width: 14px;
+    height: 14px;
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  &__text {
+    display: inline-flex;
+  }
+}
+</style>

package/src/components/ui/Dialog.vue

@@ -0,0 +1,194 @@
+<template>
+  <Teleport to="body">
+    <transition name="vc-dialog-fade">
+      <div v-if="visible" class="vc-dialog__wrapper" @click.self="handleMaskClick">
+        <transition name="vc-dialog-zoom">
+          <div v-if="visible" class="vc-dialog" :style="dialogStyle">
+            <div v-if="showClose || $slots.header" class="vc-dialog__header">
+              <span v-if="$slots.header" class="vc-dialog__title">
+                <slot name="header">{{ title }}</slot>
+              </span>
+              <span v-else-if="title" class="vc-dialog__title">
+                {{ title }}
+              </span>
+              <button
+                v-if="showClose"
+                type="button"
+                class="vc-dialog__headerbtn"
+                @click="handleClose"
+              >
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="vc-dialog__close">
+                  <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </button>
+            </div>
+            <div class="vc-dialog__body">
+              <slot></slot>
+            </div>
+            <div v-if="$slots.footer" class="vc-dialog__footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: '50%'
+  },
+  top: {
+    type: [String, Number],
+    default: '15vh'
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickModal: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'close'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const dialogStyle = computed(() => ({
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+  marginTop: typeof props.top === 'number' ? `${props.top}px` : props.top
+}))
+
+const handleClose = () => {
+  visible.value = false
+  emit('close')
+}
+
+const handleMaskClick = () => {
+  if (props.closeOnClickModal) {
+    handleClose()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.vc-dialog__wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  margin: 0;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.vc-dialog {
+  position: relative;
+  margin: 0 auto;
+  background-color: var(--vck-bg);
+  border-radius: var(--vck-radius-md);
+  box-shadow: var(--vck-shadow);
+  overflow: hidden;
+  backface-visibility: hidden;
+
+  &__header {
+    padding: var(--vck-space-md) var(--vck-space-lg);
+    border-bottom: 1px solid var(--vck-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--vck-text-primary);
+    line-height: 1;
+  }
+
+  &__headerbtn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--vck-text-muted);
+    transition: color var(--vck-transition-fast);
+
+    &:hover {
+      color: var(--vck-text-primary);
+    }
+  }
+
+  &__close {
+    width: 16px;
+    height: 16px;
+  }
+
+  &__body {
+    padding: var(--vck-space-lg);
+    color: var(--vck-text-primary);
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  &__footer {
+    padding: var(--vck-space-sm) var(--vck-space-lg) var(--vck-space-lg);
+    border-top: 1px solid var(--vck-border);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--vck-space-sm);
+  }
+}
+
+// Transitions
+.vc-dialog-fade-enter-active,
+.vc-dialog-fade-leave-active {
+  transition: opacity var(--vck-transition-fast);
+}
+
+.vc-dialog-fade-enter-from,
+.vc-dialog-fade-leave-to {
+  opacity: 0;
+}
+
+.vc-dialog-zoom-enter-active,
+.vc-dialog-zoom-leave-active {
+  transition: transform var(--vck-transition-fast), opacity var(--vck-transition-fast);
+}
+
+.vc-dialog-zoom-enter-from,
+.vc-dialog-zoom-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+</style>

package/src/components/ui/Empty.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="vc-empty">
+    <div v-if="$slots.image" class="vc-empty__image">
+      <slot name="image"></slot>
+    </div>
+    <div v-else class="vc-empty__image">
+      <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="10" y="10" width="100" height="80" rx="8" fill="var(--vck-bg-panel)" stroke="var(--vck-border)"/>
+        <path d="M30 40H90M30 55H70" stroke="var(--vck-text-muted)" stroke-width="2" stroke-linecap="round"/>
+      </svg>
+    </div>
+    <div v-if="$slots.default" class="vc-empty__description">
+      <slot>{{ description }}</slot>
+    </div>
+    <div v-else-if="description" class="vc-empty__description">
+      {{ description }}
+    </div>
+    <div v-if="$slots.bottom" class="vc-empty__bottom">
+      <slot name="bottom"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  description: {
+    type: String,
+    default: '暂无数据'
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.vc-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--vck-space-lg);
+  text-align: center;
+
+  &__image {
+    width: 120px;
+    height: 80px;
+    margin-bottom: var(--vck-space-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__description {
+    font-size: 14px;
+    color: var(--vck-text-muted);
+    line-height: 1.5;
+  }
+
+  &__bottom {
+    margin-top: var(--vck-space-md);
+  }
+}
+</style>