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

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/components/group/CreateGroupDialog.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { useGroupStore } from '@/stores/group'
+import { createGroup } from '@/api/groups'
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const router = useRouter()
+const groupStore = useGroupStore()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const form = ref({
+  name: '',
+  description: '',
+  maxMembers: 20
+})
+const loading = ref(false)
+
+async function handleSubmit() {
+  if (!form.value.name.trim()) {
+    ElMessage.warning('请输入群组名称')
+    return
+  }
+  loading.value = true
+  try {
+    const group = await createGroup({
+      name: form.value.name.trim(),
+      description: form.value.description.trim(),
+      maxMembers: form.value.maxMembers
+    })
+    await groupStore.loadGroups()
+    visible.value = false
+    form.value = { name: '', description: '', maxMembers: 20 }
+    ElMessage.success('群组创建成功')
+    if (group?.id) {
+      router.push({ name: 'GroupView', params: { id: group.id } })
+    }
+  } catch (error: any) {
+    ElMessage.error(error.message || '创建群组失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <el-dialog v-model="visible" title="创建群组" width="440px">
+    <div class="create-form">
+      <div class="form-field">
+        <label>群组名称 <span class="required">*</span></label>
+        <el-input v-model="form.name" placeholder="给群组起个名字" maxlength="50" show-word-limit />
+      </div>
+      <div class="form-field">
+        <label>群组描述</label>
+        <el-input v-model="form.description" type="textarea" :rows="3" placeholder="简单介绍这个群组" maxlength="500" show-word-limit />
+      </div>
+      <div class="form-field">
+        <label>最大成员数</label>
+        <el-input-number v-model="form.maxMembers" :min="2" :max="100" />
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSubmit">创建</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.create-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;
+  color: var(--gg-text);
+}
+
+.required {
+  color: var(--gg-danger);
+}
+</style>

frontend/src/components/group/GroupMembersPanel.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useGroupStore } from '@/stores/group'
+import { useUserStore } from '@/stores/user'
+
+const groupStore = useGroupStore()
+const userStore = useUserStore()
+
+const group = computed(() => groupStore.currentGroup)
+const members = computed(() => groupStore.currentMembers)
+const isOwner = computed(() => group.value?.owner === userStore.userId)
+
+function copyGroupId() {
+  if (group.value?.id) {
+    navigator.clipboard.writeText(group.value.id)
+    ElMessage.success('群组 ID 已复制，分享给好友即可加入')
+  }
+}
+
+async function removeMember(userId: string, username: string) {
+  if (!isOwner.value) return
+  try {
+    await ElMessageBox.confirm(`确定要将 ${username} 移出群组吗？`, '确认', { type: 'warning' })
+    const group = groupStore.currentGroup
+    if (!group) return
+    // 直接更新群组的 members 列表
+    const { pb } = await import('@/api/pocketbase')
+    const newMembers = group.members.filter(id => id !== userId)
+    await pb.collection('groups').update(group.id, { members: newMembers })
+    await groupStore.setCurrentGroup(group.id)
+    ElMessage.success('已移除成员')
+  } catch {
+    // 用户取消
+  }
+}
+</script>
+
+<template>
+  <div v-if="group" class="members-panel">
+    <div class="panel-header">
+      <h3>群组信息</h3>
+    </div>
+
+    <!-- 分享群组 ID -->
+    <div class="share-section">
+      <label>群组 ID（分享给好友）</label>
+      <div class="share-row">
+        <code class="group-id">{{ group.id }}</code>
+        <button class="copy-btn" @click="copyGroupId">复制</button>
+      </div>
+    </div>
+
+    <div class="info-row">
+      <span class="info-label">成员</span>
+      <span class="info-value">{{ members.length }} / {{ group.maxMembers }}</span>
+    </div>
+
+    <div class="members-list">
+      <div v-for="member in members" :key="member.id" class="member-row">
+        <img :src="member.avatar || '/default-avatar.png'" class="member-avatar" alt="" />
+        <div class="member-info">
+          <span class="member-name">{{ member.username }}</span>
+          <span v-if="member.id === group.owner" class="owner-badge">群主</span>
+        </div>
+        <button
+          v-if="isOwner && member.id !== group.owner && member.id !== userStore.userId"
+          class="remove-btn"
+          @click="removeMember(member.id, member.username)"
+        >
+          移除
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.members-panel {
+  background: var(--gg-bg-card);
+  border: 1px solid var(--gg-border);
+  border-radius: var(--gg-radius-md);
+  padding: 20px;
+}
+
+.panel-header {
+  margin-bottom: 16px;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.share-section {
+  margin-bottom: 16px;
+}
+
+.share-section label {
+  display: block;
+  font-size: 12px;
+  color: var(--gg-text-secondary);
+  margin-bottom: 6px;
+}
+
+.share-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.group-id {
+  flex: 1;
+  padding: 6px 10px;
+  background: var(--gg-bg);
+  border: 1px solid var(--gg-border);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--gg-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.copy-btn {
+  padding: 6px 14px;
+  background: var(--gg-gradient);
+  border: none;
+  border-radius: 6px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.copy-btn:hover {
+  opacity: 0.9;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--gg-border);
+  margin-bottom: 12px;
+}
+
+.info-label {
+  font-size: 14px;
+  color: var(--gg-text-secondary);
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.members-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.member-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+.member-row:hover {
+  background: var(--gg-bg-hover);
+}
+
+.member-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.member-info {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.member-name {
+  font-size: 14px;
+}
+
+.owner-badge {
+  font-size: 11px;
+  padding: 1px 8px;
+  background: var(--gg-gradient);
+  color: white;
+  border-radius: 10px;
+}
+
+.remove-btn {
+  padding: 4px 10px;
+  background: none;
+  border: 1px solid var(--gg-danger);
+  border-radius: 4px;
+  color: var(--gg-danger);
+  font-size: 12px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.remove-btn:hover {
+  opacity: 1;
+}
+</style>

frontend/src/components/group/JoinGroupDialog.vue

@@ -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>

frontend/src/views/GroupView.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router'
 import { useGroupStore } from '@/stores/group'
 import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
 import IdleMembersList from '@/components/team/IdleMembersList.vue'
+import GroupMembersPanel from '@/components/group/GroupMembersPanel.vue'
 
 const route = useRoute()
 const groupStore = useGroupStore()
@@ -133,54 +134,9 @@ async function refreshMembers() {
         </section>
       </div>
 
-      <!-- 右列: 群组信息侧边栏 -->
+      <!-- 右列: 群组成员管理面板 -->
       <aside class="right-col">
-        <div class="info-card">
+        <GroupMembersPanel />
-          <h3 class="info-card-title">群组信息</h3>
-          <div class="info-list">
-            <div class="info-row">
-              <span class="info-label">群组名</span>
-              <span class="info-value">{{ group?.name || '-' }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">群主</span>
-              <span class="info-value highlight">{{ ownerName }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">成员数</span>
-              <span class="info-value">{{ members.length }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">最大容量</span>
-              <span class="info-value">{{ group?.maxMembers || '-' }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">创建时间</span>
-              <span class="info-value">{{ group?.created ? new Date(group.created).toLocaleDateString('zh-CN') : '-' }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 成员状态统计 -->
-        <div class="info-card">
-          <h3 class="info-card-title">成员状态</h3>
-          <div class="status-stats">
-            <div v-for="(list, status) in membersByStatus" :key="status" class="stat-item">
-              <span class="stat-dot" :style="{ background: statusColors[status] }" />
-              <span class="stat-label">{{ statusLabels[status] }}</span>
-              <span class="stat-count">{{ list.length }}</span>
-              <div class="stat-bar-bg">
-                <div
-                  class="stat-bar-fill"
-                  :style="{
-                    width: members.length ? (list.length / members.length * 100) + '%' : '0%',
-                    background: statusColors[status]
-                  }"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
       </aside>
     </div>
   </div>

frontend/src/views/Layout.vue

@@ -8,6 +8,8 @@ import { useNotificationStore } from '@/stores/notification'
 import StatusToggle from '@/components/team/StatusToggle.vue'
 import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
 import NotificationPanel from '@/components/common/NotificationPanel.vue'
+import CreateGroupDialog from '@/components/group/CreateGroupDialog.vue'
+import JoinGroupDialog from '@/components/group/JoinGroupDialog.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -17,6 +19,8 @@ const teamStore = useTeamStore()
 const notificationStore = useNotificationStore()
 
 const showScheduleModal = ref(false)
+const showCreateGroup = ref(false)
+const showJoinGroup = ref(false)
 
 onMounted(async () => {
   await userStore.initUser()
@@ -67,6 +71,10 @@ function goHome() {
       <div class="sidebar-groups">
         <div class="section-header">
           <span class="section-title">我的群组</span>
+          <div class="section-actions">
+            <button class="section-btn" @click="showCreateGroup = true" title="创建群组">+</button>
+            <button class="section-btn" @click="showJoinGroup = true" title="加入群组">&#x1F517;</button>
+          </div>
         </div>
         <div v-if="groupStore.groups.length === 0" class="empty-groups">
           暂无群组
@@ -129,6 +137,8 @@ function goHome() {
     <!-- 弹窗 -->
     <WorkScheduleModal v-model="showScheduleModal" />
     <NotificationPanel />
+    <CreateGroupDialog v-model="showCreateGroup" />
+    <JoinGroupDialog v-model="showJoinGroup" />
   </div>
 </template>
 
@@ -242,6 +252,27 @@ function goHome() {
   letter-spacing: 0.5px;
 }
 
+.section-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.section-btn {
+  background: none;
+  border: 1px solid var(--gg-border);
+  border-radius: 6px;
+  color: var(--gg-text-secondary);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 8px;
+  transition: all 0.2s;
+}
+
+.section-btn:hover {
+  border-color: var(--gg-primary);
+  color: var(--gg-primary);
+}
+
 .empty-groups {
   text-align: center;
   color: var(--gg-text-muted);