feat: add group management - create, join, member panel with owner controls

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-17 17:53:58 +08:00
parent 00fdb02d80
commit 6895fd05be
5 changed files with 502 additions and 47 deletions
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useGroupStore } from '@/stores/group'
+import { getGroup, joinGroup } from '@/api/groups'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const groupStore = useGroupStore()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const groupId = ref('')
+const groupInfo = ref<any>(null)
+const loading = ref(false)
+const joining = ref(false)
+
+async function searchGroup() {
+  if (!groupId.value.trim()) {
+    ElMessage.warning('请输入群组 ID')
+    return
+  }
+  loading.value = true
+  try {
+    groupInfo.value = await getGroup(groupId.value.trim())
+  } catch (error) {
+    groupInfo.value = null
+    ElMessage.error('未找到该群组')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleJoin() {
+  if (!groupInfo.value) return
+  joining.value = true
+  try {
+    await joinGroup(groupInfo.value.id)
+    await groupStore.loadGroups()
+    visible.value = false
+    groupId.value = ''
+    groupInfo.value = null
+    ElMessage.success('已申请加入群组，等待群主审核')
+  } catch (error: any) {
+    ElMessage.error(error.message || '加入群组失败')
+  } finally {
+    joining.value = false
+  }
+}
+
+function reset() {
+  groupId.value = ''
+  groupInfo.value = null
+}
+</script>
+
+<template>
+  <el-dialog v-model="visible" title="加入群组" width="440px" @close="reset">
+    <div class="join-form">
+      <div class="form-field">
+        <label>群组 ID</label>
+        <div class="search-row">
+          <el-input v-model="groupId" placeholder="输入群主分享的群组 ID" />
+          <el-button type="primary" :loading="loading" @click="searchGroup">查找</el-button>
+        </div>
+      </div>
+
+      <div v-if="groupInfo" class="group-preview">
+        <div class="preview-header">
+          <h3 class="preview-name">{{ groupInfo.name }}</h3>
+          <span class="preview-members">{{ groupInfo.members?.length || 0 }} / {{ groupInfo.maxMembers }} 人</span>
+        </div>
+        <p v-if="groupInfo.description" class="preview-desc">{{ groupInfo.description }}</p>
+        <el-button type="primary" :loading="joining" @click="handleJoin" style="width:100%; margin-top: 12px;">
+          申请加入
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.join-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-field label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.search-row {
+  display: flex;
+  gap: 8px;
+}
+
+.search-row .el-input {
+  flex: 1;
+}
+
+.group-preview {
+  padding: 16px;
+  background: var(--gg-bg-card);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-md);
+}
+
+.preview-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-name {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.preview-members {
+  font-size: 13px;
+  color: var(--gg-text-secondary);
+}
+
+.preview-desc {
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: var(--gg-text-secondary);
+}
+</style>