<template>
<div class="app-container">
<!-- 添加或修改群组信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="群组名称" prop="name">
<el-input v-model="form.name" placeholder="请输入群组名称" />
</el-form-item>
<el-form-item label="创建者id" prop="creatorId">
<el-input v-model="form.creatorId" placeholder="请输入创建者id" />
</el-form-item>
<el-form-item label="群组图标" prop="avatar">
<el-input v-model="form.avatar" placeholder="请输入群组图标" />
</el-form-item>
<el-form-item label="群组公告" prop="announcement">
<el-input v-model="form.announcement" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="聊天室" prop="room">
<el-input v-model="form.room" placeholder="请输入聊天室" />
</el-form-item>
<el-form-item label="创建时间" prop="createdAt">
<el-date-picker clearable v-model="form.createdAt" type="date" value-format="yyyy-MM-dd"
placeholder="请选择创建时间">
</el-date-picker>
</el-form-item>
<el-form-item label="修改时间" prop="updatedAt">
<el-date-picker clearable v-model="form.updatedAt" type="date" value-format="yyyy-MM-dd"
placeholder="请选择修改时间">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listIm_groupc, getIm_groupc, delIm_groupc, addIm_groupc, updateIm_groupc } from "@/im/sys/api/im_groupc"
export default {
name: "Im_groupc",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 群组信息表格数据
im_groupcList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
creatorId: null,
avatar: null,
announcement: null,
room: null,
createdAt: null,
updatedAt: null
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: "群组名称不能为空", trigger: "blur" }
],
creatorId: [
{ required: true, message: "创建者id不能为空", trigger: "blur" }
],
createdAt: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
}
},
created() {
this.getList()
},
methods: {
/** 查询群组信息列表 */
getList() {
this.loading = true
listIm_groupc(this.queryParams).then(response => {
this.im_groupcList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
creatorId: null,
avatar: null,
announcement: null,
room: null,
createdAt: null,
updatedAt: null
}
this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm")
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = "添加群组信息"
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getIm_groupc(id).then(response => {
this.form = response.data
this.open = true
this.title = "修改群组信息"
})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateIm_groupc(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
addIm_groupc(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除群组信息编号为"' + ids + '"的数据项?').then(function () {
return delIm_groupc(ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => { })
},
/** 导出按钮操作 */
handleExport() {
this.download('mod/im_groupc/export', {
...this.queryParams
}, `im_groupc_${new Date().getTime()}.xlsx`)
}
}
}
</script>
以上为若依前端代码,是新建群组的方法,以下是新建成员的方法,如何将两个文件整合成一个文件,请按此格式进行修改,给出修改后的完整代码<template>
<div class="app-container">
<!-- 添加或修改群组成员对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="群组id" prop="groupId">
<el-input v-model="form.groupId" placeholder="请输入群组id" />
</el-form-item>
<el-form-item label="用户id" prop="userId">
<el-input v-model="form.userId" placeholder="请输入用户id" />
</el-form-item>
<el-form-item label="用户姓名" prop="nickname">
<el-input v-model="form.nickname" placeholder="请输入用户姓名" />
</el-form-item>
<el-form-item label="创建时间" prop="createdAt">
<el-date-picker clearable
v-model="form.createdAt"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择创建时间">
</el-date-picker>
</el-form-item>
<el-form-item label="更新时间" prop="updatedAt">
<el-date-picker clearable
v-model="form.updatedAt"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择更新时间">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listIm_groups, getIm_groups, delIm_groups, addIm_groups, updateIm_groups } from "@/im/sys/api/im_groups"
export default {
name: "Im_groups",
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 群组成员表格数据
im_groupsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
groupId: null,
userId: null,
nickname: null,
createdAt: null,
updatedAt: null
},
// 表单参数
form: {},
// 表单校验
rules: {
groupId: [
{ required: true, message: "群组id不能为空", trigger: "blur" }
],
userId: [
{ required: true, message: "用户id不能为空", trigger: "blur" }
],
nickname: [
{ required: true, message: "用户姓名不能为空", trigger: "blur" }
],
createdAt: [
{ required: true, message: "创建时间不能为空", trigger: "blur" }
],
}
}
},
created() {
this.getList()
},
methods: {
/** 查询群组成员列表 */
getList() {
this.loading = true
listIm_groups(this.queryParams).then(response => {
this.im_groupsList = response.rows
this.total = response.total
this.loading = false
})
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
id: null,
groupId: null,
userId: null,
nickname: null,
createdAt: null,
updatedAt: null
}
this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm")
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = "添加群组成员"
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getIm_groups(id).then(response => {
this.form = response.data
this.open = true
this.title = "修改群组成员"
})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateIm_groups(this.form).then(response => {
this.$modal.msgSuccess("修改成功")
this.open = false
this.getList()
})
} else {
addIm_groups(this.form).then(response => {
this.$modal.msgSuccess("新增成功")
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除群组成员编号为"' + ids + '"的数据项?').then(function() {
return delIm_groups(ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功")
}).catch(() => {})
},
/** 导出按钮操作 */
handleExport() {
this.download('mod/im_groups/export', {
...this.queryParams
}, `im_groups_${new Date().getTime()}.xlsx`)
}
}
}
</script>以下整合思路供参考,此为若依前端代码<template>
<div class="app-container">
<el-row :gutter="20">
<!-- 群组列表 -->
<el-col :span="6">
<el-card class="group-list-card">
<div slot="header" class="clearfix">
<span>微信群组</span>
<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-plus"
@click="handleAddGroup">
创建群组
</el-button>
</div>
<!-- 群组搜索 -->
<el-form :model="groupQueryParams" ref="groupQueryForm" size="mini">
<el-form-item>
<el-input v-model="groupQueryParams.name" placeholder="搜索群组名称" prefix-icon="el-icon-search"
clearable @keyup.enter.native="handleGroupQuery" />
</el-form-item>
</el-form>
<!-- 群组列表 -->
<div class="group-list">
<div v-for="group in im_groupcList" :key="group.id"
:class="['group-item', { 'active': selectedGroup && selectedGroup.id === group.id }]"
@click="handleGroupSelect(group)">
<div class="group-avatar">
<img v-if="group.avatar" :src="group.avatar" alt="群组头像">
<div v-else class="group-avatar-default">{{ group.name.charAt(0) }}</div>
</div>
<div class="group-info">
<div class="group-name">{{ group.name }}</div>
<div class="group-members">{{ group.memberCount }} 成员</div>
</div>
<div class="group-actions">
<el-dropdown trigger="click" @command="(command) => handleGroupAction(command, group)">
<span class="el-dropdown-link">
<i class="el-icon-more"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="edit"><i class="el-icon-edit"></i>
编辑群组</el-dropdown-item>
<el-dropdown-item command="addMember"><i class="el-icon-user"></i>
添加成员</el-dropdown-item>
<el-dropdown-item command="delete" divided><i class="el-icon-delete"></i>
删除群组</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
<pagination v-show="groupTotal > 0" :total="groupTotal" :page.sync="groupQueryParams.pageNum"
:limit.sync="groupQueryParams.pageSize" @pagination="getGroupList" small />
</el-card>
</el-col>
<!-- 成员管理 -->
<el-col :span="18">
<el-card v-if="selectedGroup" class="member-management-card">
<div slot="header" class="clearfix">
<span>群组成员 - {{ selectedGroup.name }}</span>
<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-plus"
@click="handleAddMember">
添加成员
</el-button>
</div>
<!-- 成员搜索 -->
<el-form :model="memberQueryParams" ref="memberQueryForm" :inline="true" size="mini">
<el-form-item>
<el-input v-model="memberQueryParams.nickname" placeholder="搜索成员名称"
prefix-icon="el-icon-search" clearable @keyup.enter.native="handleMemberQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleMemberQuery">搜索</el-button>
<el-button @click="resetMemberQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 成员列表 -->
<el-table v-loading="memberLoading" :data="im_groupsList"
@selection-change="handleMemberSelectionChange" style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="用户ID" align="center" prop="userId" width="80" />
<el-table-column label="用户姓名" align="center" prop="nickname" />
<el-table-column label="角色" align="center" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.userId === selectedGroup.creatorId" type="danger" size="small">
群主
</el-tag>
<el-tag v-else type="info" size="small">成员</el-tag>
</template>
</el-table-column>
<el-table-column label="加入时间" align="center" prop="createdAt" width="120">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-delete"
@click="handleDeleteMember(scope.row)"
:disabled="scope.row.userId === currentUserId || scope.row.userId === selectedGroup.creatorId">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="memberTotal > 0" :total="memberTotal" :page.sync="memberQueryParams.pageNum"
:limit.sync="memberQueryParams.pageSize" @pagination="getMemberList" />
</el-card>
<!-- 空状态 -->
<el-card v-else class="empty-card">
<div class="empty-content">
<i class="el-icon-chat-dot-round" style="font-size: 48px; color: #909399;"></i>
<p>请选择一个群组以管理成员</p>
</div>
</el-card>
</el-col>
</el-row>
<!-- 添加或修改群组信息对话框 -->
<el-dialog :title="groupTitle" :visible.sync="groupOpen" width="500px" append-to-body>
<el-form ref="groupForm" :model="groupForm" :rules="groupRules" label-width="80px">
<el-form-item label="群组名称" prop="name">
<el-input v-model="groupForm.name" placeholder="请输入群组名称" />
</el-form-item>
<el-form-item label="群组图标" prop="avatar">
<el-upload class="avatar-uploader" action="#" :show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="groupForm.avatar" :src="groupForm.avatar" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="群组公告" prop="announcement">
<el-input v-model="groupForm.announcement" type="textarea" placeholder="请输入群组公告" rows="4" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelGroup">取 消</el-button>
<el-button type="primary" @click="submitGroupForm">确 定</el-button>
</div>
</el-dialog>
<!-- 添加群组成员对话框 -->
<el-dialog title="添加群组成员" :visible.sync="memberAddOpen" width="600px" append-to-body>
<el-form :model="memberAddForm" ref="memberAddForm" label-width="80px">
<el-form-item label="选择用户">
<el-select v-model="memberAddForm.selectedUsers" multiple filterable remote reserve-keyword
placeholder="请输入用户名或昵称搜索" :remote-method="searchUsers" :loading="userSearchLoading"
style="width: 100%">
<el-option v-for="user in userList" :key="user.userId" :label="user.nickName || user.userName"
:value="user.userId">
<span style="float: left">{{ user.nickName || user.userName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ user.userId }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="已选用户" v-if="memberAddForm.selectedUsers.length > 0">
<div class="selected-users">
<el-tag v-for="userId in memberAddForm.selectedUsers" :key="userId" closable
@close="removeSelectedUser(userId)" style="margin: 4px">
{{ getUserName(userId) }}
</el-tag>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="memberAddOpen = false">取 消</el-button>
<el-button type="primary" @click="submitAddMember">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listIm_groupc, getIm_groupc, delIm_groupc, addIm_groupc, updateIm_groupc } from "@/im/sys/api/im_groupc"
import { listIm_groups, getIm_groups, delIm_groups, addIm_groups, updateIm_groups } from "@/im/sys/api/im_groups"
import { getUserProfile, listUser } from "@/api/system/user"
import { parseTime } from "@/utils/ruoyi"
export default {
name: "WechatGroupManagement",
data() {
return {
// 当前用户信息
currentUserId: null,
currentUser: {},
// 群组信息相关数据
groupLoading: true,
groupIds: [],
im_groupcList: [],
selectedGroup: null,
groupTitle: "",
groupOpen: false,
groupTotal: 0,
groupQueryParams: {
pageNum: 1,
pageSize: 10,
name: undefined,
creatorId: undefined
},
groupForm: {
id: null,
name: "",
creatorId: null,
avatar: "",
announcement: "",
room: ""
},
groupRules: {
name: [
{ required: true, message: "群组名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: "群组名称长度在 2 到 20 个字符", trigger: "blur" }
]
},
// 群组成员相关数据
memberLoading: true,
memberIds: [],
im_groupsList: [],
memberTotal: 0,
memberQueryParams: {
pageNum: 1,
pageSize: 10,
groupId: null,
nickname: undefined
},
memberAddOpen: false,
memberAddForm: {
selectedUsers: []
},
// 用户搜索相关
userSearchLoading: false,
userList: []
}
},
created() {
this.getCurrentUser()
this.getGroupList()
},
methods: {
parseTime,
// 获取当前用户信息
getCurrentUser() {
getUserProfile().then(response => {
this.currentUser = response.data
this.currentUserId = response.data.userId
this.groupForm.creatorId = this.currentUserId
this.groupQueryParams.creatorId = this.currentUserId
})
},
// ========== 群组信息相关方法 ==========
/** 查询群组信息列表 */
getGroupList() {
this.groupLoading = true
listIm_groupc(this.groupQueryParams).then(response => {
this.im_groupcList = response.rows.map(group => {
return {
...group,
memberCount: group.memberCount || 0
}
})
this.groupTotal = response.total
this.groupLoading = false
// 如果没有选中群组,默认选中第一个
if (!this.selectedGroup && this.im_groupcList.length > 0) {
this.handleGroupSelect(this.im_groupcList[0])
}
}).catch(() => {
this.groupLoading = false
})
},
// 选择群组
handleGroupSelect(group) {
this.selectedGroup = group
this.memberQueryParams.groupId = group.id
this.getMemberList()
},
// 群组操作
handleGroupAction(command, group) {
switch (command) {
case 'edit':
this.handleUpdateGroup(group)
break
case 'addMember':
this.handleGroupSelect(group)
this.handleAddMember()
break
case 'delete':
this.handleDeleteGroup(group)
break
}
},
// 取消按钮
cancelGroup() {
this.groupOpen = false
this.resetGroup()
},
// 表单重置
resetGroup() {
this.groupForm = {
id: null,
name: "",
creatorId: this.currentUserId,
avatar: "",
announcement: "",
room: ""
}
this.resetForm("groupForm")
},
/** 搜索按钮操作 */
handleGroupQuery() {
this.groupQueryParams.pageNum = 1
this.getGroupList()
},
/** 新增按钮操作 */
handleAddGroup() {
this.resetGroup()
this.groupOpen = true
this.groupTitle = "创建群组"
},
/** 修改按钮操作 */
handleUpdateGroup(row) {
this.resetGroup()
const id = row.id
getIm_groupc(id).then(response => {
this.groupForm = response.data
this.groupOpen = true
this.groupTitle = "修改群组信息"
})
},
/** 提交按钮 */
submitGroupForm() {
this.$refs["groupForm"].validate(valid => {
if (valid) {
if (this.groupForm.id != null) {
updateIm_groupc(this.groupForm).then(response => {
this.$modal.msgSuccess("修改成功")
this.groupOpen = false
this.getGroupList()
})
} else {
addIm_groupc(this.groupForm).then(response => {
this.$modal.msgSuccess("创建成功")
this.groupOpen = false
this.getGroupList()
// 创建群组后自动加入当前用户
this.addCreatorToGroup(response.data.id)
})
}
}
})
},
// 将创建者添加到群组
addCreatorToGroup(groupId) {
const memberData = {
groupId: groupId,
userId: this.currentUserId,
nickname: this.currentUser.nickName || this.currentUser.userName
}
addIm_groups(memberData).then(() => {
console.log("群主已加入群组")
})
},
/** 删除按钮操作 */
handleDeleteGroup(row) {
const ids = row.id
this.$modal.confirm('是否确认删除群组"' + row.name + '"?此操作将同时删除所有群成员。').then(() => {
return delIm_groupc(ids)
}).then(() => {
this.getGroupList()
this.$modal.msgSuccess("删除成功")
// 如果删除的是当前选中的群组,清空选中状态
if (this.selectedGroup && this.selectedGroup.id === row.id) {
this.selectedGroup = null
this.im_groupsList = []
}
}).catch(() => { })
},
// ========== 群组成员相关方法 ==========
/** 查询群组成员列表 */
getMemberList() {
if (!this.selectedGroup) return
this.memberLoading = true
listIm_groups(this.memberQueryParams).then(response => {
this.im_groupsList = response.rows
this.memberTotal = response.total
this.memberLoading = false
}).catch(() => {
this.memberLoading = false
})
},
/** 搜索按钮操作 */
handleMemberQuery() {
this.memberQueryParams.pageNum = 1
this.getMemberList()
},
/** 重置按钮操作 */
resetMemberQuery() {
this.memberQueryParams.nickname = undefined
this.handleMemberQuery()
},
// 多选框选中数据
handleMemberSelectionChange(selection) {
this.memberIds = selection.map(item => item.id)
},
// 搜索用户
searchUsers(query) {
if (query !== '') {
this.userSearchLoading = true
listUser({
userName: query,
nickName: query,
pageSize: 10
}).then(response => {
this.userList = response.rows
this.userSearchLoading = false
}).catch(() => {
this.userSearchLoading = false
})
} else {
this.userList = []
}
},
// 获取用户名称
getUserName(userId) {
const user = this.userList.find(u => u.userId === userId)
return user ? (user.nickName || user.userName) : `用户${userId}`
},
// 移除已选用户
removeSelectedUser(userId) {
this.memberAddForm.selectedUsers = this.memberAddForm.selectedUsers.filter(id => id !== userId)
},
// 添加成员按钮
handleAddMember() {
if (!this.selectedGroup) {
this.$message.warning('请先选择群组')
return
}
this.memberAddForm.selectedUsers = []
this.userList = []
this.memberAddOpen = true
},
// 提交添加成员
submitAddMember() {
if (!this.memberAddForm.selectedUsers.length) {
this.$message.warning('请选择要添加的用户')
return
}
const members = this.memberAddForm.selectedUsers.map(userId => {
const user = this.userList.find(u => u.userId === userId)
return {
groupId: this.selectedGroup.id,
userId: userId,
nickname: user ? (user.nickName || user.userName) : '用户'
}
})
batchAddIm_groups(members).then(() => {
this.$modal.msgSuccess("添加成功")
this.memberAddOpen = false
this.getMemberList()
// 更新群组成员数量
this.getGroupList()
})
},
/** 删除成员按钮操作 */
handleDeleteMember(row) {
if (row.userId === this.currentUserId) {
this.$message.warning('不能移除自己')
return
}
if (row.userId === this.selectedGroup.creatorId) {
this.$message.warning('不能移除群主')
return
}
this.$modal.confirm('是否确认将用户 "' + row.nickname + '" 移出群组?').then(() => {
return delIm_groups(row.id)
}).then(() => {
this.getMemberList()
this.$modal.msgSuccess("移除成功")
// 更新群组成员数量
this.getGroupList()
}).catch(() => { })
}
}
}
</script>
<style scoped>
.app-container {
padding: 20px;
}
.group-list-card,
.member-management-card,
.empty-card {
margin-bottom: 20px;
min-height: 600px;
}
.empty-content {
text-align: center;
padding: 60px 0;
color: #909399;
}
.group-list {
max-height: 480px;
overflow-y: auto;
}
.group-item {
display: flex;
align-items: center;
padding: 12px;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: background-color 0.3s;
}
.group-item:hover {
background-color: #f5f7fa;
}
.group-item.active {
background-color: #ecf5ff;
border-left: 3px solid #409EFF;
}
.group-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
}
.group-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.group-avatar-default {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #409EFF;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.group-info {
flex: 1;
min-width: 0;
}
.group-name {
font-weight: 500;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.group-members {
font-size: 12px;
color: #909399;
}
.group-actions {
flex-shrink: 0;
}
.el-dropdown-link {
cursor: pointer;
color: #909399;
padding: 4px;
}
.el-dropdown-link:hover {
color: #409EFF;
}
.avatar-uploader ::v-deep .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
display: block;
}
.selected-users {
max-height: 120px;
overflow-y: auto;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 8px;
}
</style>