67 lines
2.2 KiB
Vue
67 lines
2.2 KiB
Vue
<template>
|
|
<div class="groups-management h-full bg-gray-50 dark:bg-gray-900">
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">群聊管理</h1>
|
|
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
|
|
<i class="fas fa-plus mr-2"></i>
|
|
创建群聊
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 群聊列表 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
<div
|
|
v-for="group in mockGroups"
|
|
:key="group.id"
|
|
class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-200"
|
|
>
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-lg mr-3">
|
|
{{ group.name.charAt(0) }}
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-800 dark:text-gray-200">{{ group.name }}</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{{ group.memberCount }} 人</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">{{ group.description }}</p>
|
|
<div class="flex gap-2">
|
|
<button class="flex-1 px-3 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors">
|
|
进入群聊
|
|
</button>
|
|
<button class="px-3 py-2 bg-gray-500 text-white rounded-lg text-sm hover:bg-gray-600 transition-colors">
|
|
设置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const mockGroups = ref([
|
|
{
|
|
id: 1,
|
|
name: '技术交流群',
|
|
memberCount: 128,
|
|
description: '分享技术心得，讨论前沿技术'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '项目讨论组',
|
|
memberCount: 45,
|
|
description: '项目进度讨论和问题解决'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '休闲聊天室',
|
|
memberCount: 89,
|
|
description: '轻松愉快的日常交流'
|
|
}
|
|
]);
|
|
</script>
|