HIYL-localization-web/src/views/message/components/GroupSetting.vue

<template>
  <div>
    <el-dialog
      title="群设置"
      :visible.sync="visible"
      width="400px"
      append-to-body
    >
      <div class="group-setting">
        <!-- 群头像和名称 -->
        <div class="group-info">
          <el-avatar :size="60" :src="groupInfo.avatar" class="group-avatar">
            <img v-if="groupInfo.avatar" :src="groupInfo.avatar" />
            <span v-else class="avatar-text">{{
              (groupInfo.name || "群聊").slice(0, 2)
            }}</span>
          </el-avatar>
          <div class="group-detail">
            <div class="group-name">{{ groupInfo.name }}</div>
          </div>
          <el-button
            class="edit-btn"
            type="text"
            icon="el-icon-edit"
            @click="editGroupName"
          />
        </div>
        <div class="section">
          <div class="section-title">
            群成员 {{ (groupInfo.members && groupInfo.members.length) || 0 }}人
          </div>
          <div class="member-list">
            <div
              v-for="member in groupInfo.members"
              :key="member.id"
              class="member-item"
              @mouseenter="showDeleteBtn = member.id"
              @mouseleave="showDeleteBtn = null"
            >
              <div class="avatar-wrapper">
                <el-avatar :size="40" :src="member.avatar" />
                <span
                  v-if="showDeleteBtn === member.id && isAdmin"
                  class="delete-btn"
                  @click.stop="handleRemoveMember(member)"
                >
                  <i class="el-icon-minus" />
                </span>
              </div>
              <span class="member-name">{{ member.name }}</span>
              <span v-if="member.isAdmin" class="admin-tag">管理员</span>
            </div>
            <div class="member-item" @click="showAddMember">
              <el-icon
                class="el-icon-circle-plus-outline"
                style="font-size: 40px"
              />
              <span class="member-name">添加成员</span>
            </div>
          </div>
        </div>

        <!-- 群管理员 -->
        <div v-if="groupInfo.members.some((m) => m.isAdmin)" class="section">
          <div class="section-title">群管理员</div>
          <div class="member-list">
            <div
              v-for="member in groupInfo.members.filter((m) => m.isAdmin)"
              :key="member.id"
              class="member-item"
            >
              <el-avatar :size="40" :src="member.avatar" />
              <span class="member-name">{{ member.name }}</span>
            </div>
          </div>
        </div>
        <!-- 查找聊天记录 -->
        <div class="section">
          <div class="search-record-btn" @click="showSearchRecord">
            <i class="el-icon-search" />
            <span class="btn-text">查找聊天记录</span>
            <span class="btn-desc">图片、视频、文件等</span>
            <i class="el-icon-arrow-right" />
          </div>
        </div>
        <!-- 操作按钮 -->
        <div class="actions">
          <el-button type="danger" @click="handleQuitGroup" v-if="!isAdmin">
            退出群组
          </el-button>
          <template v-else>
            <el-button type="danger" @click="handleQuitGroup"
              >退出群组</el-button
            >
            <el-button type="danger" plain @click="handleDismissGroup">
              解散群组</el-button
            >
          </template>
        </div>
      </div>
    </el-dialog>

    <!-- 查找聊天记录弹窗 -->
    <SearchRecord
      :visible.sync="isSearchVisible"
      :chat="chat"
      @locate="handleLocateMessage"
    />
  </div>
</template>

<script>
import SearchRecord from "./SearchRecord.vue";

export default {
  name: "GroupSetting",

  components: {
    SearchRecord,
  },

  props: {
    visible: Boolean,
    chat: Object,
  },

  data() {
    return {
      isSearchVisible: false,
      groupInfo: {
        name: "",
        avatar: "",
        members: [],
      },
      isAdmin: false,
      showDeleteBtn: null,
    };
  },

  watch: {
    visible(val) {
      if (val && this.chat) {
        this.loadGroupInfo();
      }
    },
  },

  methods: {
    loadGroupInfo() {
      // Mock数据
      const mockGroups = {
        group1: {
          name: "基层医生、会诊专家、郭君",
          avatar: "",
          members: [
            { id: "user1", name: "会诊专家", avatar: "", isAdmin: true },
            { id: "user2", name: "基层医生", avatar: "", isAdmin: true },
            { id: "user3", name: "郭君", avatar: "", isAdmin: false },
          ],
        },
        group2: {
          name: "会诊专家、基层医生",
          avatar: "",
          members: [
            { id: "user1", name: "会诊专家", avatar: "", isAdmin: true },
            { id: "user2", name: "基层医生", avatar: "", isAdmin: false },
          ],
        },
      };

      this.groupInfo = mockGroups[this.chat.id] || {
        name: this.chat.name,
        avatar: this.chat.avatar,
        members: [],
      };

      // 判断当前用户是否是管理员（假设当前用户是第一个成员）
      this.isAdmin = this.groupInfo.members[0].isAdmin || false;
    },

    editGroupName() {
      this.$prompt("请输入新的群名称", "修改群名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: this.groupInfo.name,
      })
        .then(({ value }) => {
          this.groupInfo.name = value;
          this.$message.success("群名称修改成功");
        })
        .catch(() => {
          this.$message.info("已取消修改");
        });
    },

    showSearchRecord() {
      this.isSearchVisible = true;
    },

    handleLocateMessage(result) {
      this.$message.info(`定位到消息: ${result.text}`);
    },

    showAddMember() {
      this.$message.info("添加成员功能");
    },

    handleRemoveMember(member) {
      this.$confirm(`确定要移除 "${member.name}" 吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.groupInfo.members = this.groupInfo.members.filter(
            (m) => m.id !== member.id
          );
          this.$message.success("移除成功");
        })
        .catch(() => {
          this.$message.info("已取消移除");
        });
    },

    handleQuitGroup() {
      this.$confirm("确定要退出该群组吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("退出成功");
          this.$emit("quit-group", this.chat);
          this.$emit("update:visible", false);
        })
        .catch(() => {
          this.$message.info("已取消退出");
        });
    },

    handleDismissGroup() {
      this.$confirm("确定要解散该群组吗？此操作不可撤销！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.$message.success("解散成功");
          this.$emit("dismiss-group", this.chat);
          this.$emit("update:visible", false);
        })
        .catch(() => {
          this.$message.info("已取消解散");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.group-setting {
  padding: 20px 0;
}

.group-info {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 20px;

  .group-avatar {
    margin-right: 15px;
  }

  .avatar-text {
    font-size: 24px;
    color: #409eff;
  }

  .group-detail {
    flex: 1;

    .group-name {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 4px;
    }

    .group-member-count {
      font-size: 12px;
      color: #909399;
    }
  }

  .edit-btn {
    font-size: 16px;
  }
}

.section {
  margin-bottom: 20px;

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
  }

  .member-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .member-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc((100% - 30px) / 3);

    .avatar-wrapper {
      position: relative;

      .delete-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 20px;
        height: 20px;
        background: #f56c6c;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s;

        i {
          font-size: 12px;
          color: #fff;
        }
      }

      &:hover .delete-btn {
        opacity: 1;
      }
    }

    .member-name {
      margin-top: 6px;
      font-size: 12px;
      color: #606266;
      text-align: center;
    }

    .admin-tag {
      font-size: 10px;
      color: #409eff;
      background: #ecf5ff;
      padding: 2px 6px;
      border-radius: 4px;
      margin-top: 4px;
    }
  }

  .add-member-btn {
    margin-top: 10px;
    color: #409eff;
  }

  .search-record-btn {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      background: #f5f7fa;
    }

    i:first-child {
      font-size: 18px;
      color: #409eff;
      margin-right: 12px;
    }

    .btn-text {
      flex: 1;
      font-size: 15px;
      color: #303133;
    }

    .btn-desc {
      font-size: 13px;
      color: #909399;
      margin-right: 8px;
    }

    i:last-child {
      font-size: 14px;
      color: #c0c4cc;
    }
  }
}

.actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;

  .el-button {
    width: 120px;
  }
}
</style>