feat: 完成核心页面开发

src/views/group/Create.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="page">
+    <h1>创建小组</h1>
+    <p>功能开发中...</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/group/Detail.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="page">
+    <h1>小组详情</h1>
+    <p>功能开发中...</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

src/views/group/List.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="group-list-page">
+    <div class="page-header">
+      <h1>小组管理</h1>
+      <el-button type="primary" @click="router.push('/groups/create')">
+        <el-icon><Plus /></el-icon>
+        创建小组
+      </el-button>
+    </div>
+
+    <el-tabs v-model="activeTab" class="group-tabs">
+      <el-tab-pane label="全部" name="all" />
+      <el-tab-pane label="我创建的" name="created" />
+      <el-tab-pane label="我加入的" name="joined" />
+    </el-tabs>
+
+    <div v-loading="loading" class="group-grid">
+      <GroupCard
+        v-for="group in filteredGroups"
+        :key="group.id"
+        :group="group"
+        @click="router.push(`/groups/${group.id}`)"
+      />
+    </div>
+
+    <el-empty v-if="!loading && !filteredGroups.length" description="暂无小组" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Plus } from '@element-plus/icons-vue'
+import GroupCard from '@/components/business/GroupCard/GroupCard.vue'
+import { groupApi } from '@/api/group'
+import type { GroupInfo } from '@/types/group'
+
+const router = useRouter()
+const loading = ref(false)
+const activeTab = ref('all')
+const groups = ref<GroupInfo[]>([])
+
+const filteredGroups = computed(() => {
+  if (activeTab.value === 'all') {
+    return groups.value
+  } else if (activeTab.value === 'created') {
+    return groups.value.filter(g => g.myRole === 'owner')
+  } else {
+    return groups.value.filter(g => g.myRole && g.myRole !== 'owner')
+  }
+})
+
+onMounted(async () => {
+  await loadGroups()
+})
+
+async function loadGroups() {
+  loading.value = true
+  try {
+    groups.value = await groupApi.getMyGroups()
+  } catch (error) {
+    console.error('加载小组失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.group-list-page {
+  @apply space-y-6;
+}
+
+.page-header {
+  @apply flex items-center justify-between;
+}
+
+.group-tabs {
+  @apply bg-white rounded-xl p-4;
+}
+
+.group-grid {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
+}
+</style>