From c032de56eb91124a91d509674ec5fdbd5158e2af Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Sat, 30 May 2026 13:03:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9F=A5=E8=AF=86=E5=BA=93=E5=88=86=E4=BA=AB-?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/knowledge.js                          |    6 +-
 src/store/modules/user.js                     |   10 -
 src/views/knowledge/index.vue                 |   71 +-
 .../message/components/CreateGroupDialog.vue  | 1296 ++++++++++-------
 4 files changed, 859 insertions(+), 524 deletions(-)

diff --git a/src/api/knowledge.js b/src/api/knowledge.js
index c1344ea..5b92883 100644
--- a/src/api/knowledge.js
+++ b/src/api/knowledge.js
@@ -44,7 +44,11 @@ export function postKnowledgeEdit(data) {
 export function postKnowledgeDelete(data) {
   return request({ url: '/knowledge/delete', method: 'post', data })
 }
-
+// 知识库文件-分享文件s
+export function postMessagePushToUser(data) {
+  return request({ url: '/messages/push/to/user', method: 'post', data })
+}
+// {"client_id":"utalk-client-688","message":{"at_users":[],"message_id":0,"payload":{"content":"{\"file_name\":\"1633500241136.mp4\",\"file_path\":\"personal-test/video/688/1780036088/1633500241136.mp4\",\"file_size\":\"17.92M\",\"file_time\":\"2026-05-29 14:28:11\",\"knowledge_id\":833,\"thumbnail_path\":\"personal-test/video/688/1780036088/1633500241136.png\"}","file_duration":0,"file_ico":"","file_name":"","file_path":"","file_size":0,"file_type":""},"scene":1,"source_id":688,"target_id":687,"timestamp":0,"type":"knowledge_share"},"target_id":687,"topic":"/user/¯"}
 // // 知识库-上传文件
 // export function knowledgeUpload(data) {
 //   return request({
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 2dab23f..606555a 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -59,7 +59,6 @@ const user = {
     Login({ commit }, userInfo) {
       return new Promise((resolve, reject) => {
         login(userInfo).then(res => {
-
           setToken(res.data.token)
           commit('SET_TOKEN', res.data.token)
           store.dispatch('lock/unlockScreen')
@@ -129,15 +128,6 @@ const user = {
               secretKey: netConfig.MINIO_SECRET_KEY,
               useSSL: netConfig.MINIO_SECURE === '1' || netConfig.MINIO_SECURE === true,
             })
-            // 补充存储桶配置映射（与 C++ 端一致）
-            store.commit('SET_MINIO_BUCKETS', {
-              AVATAR: netConfig.MINIO_BUCKET_AVATAR || 'remote-avatar-test',
-              FILE: netConfig.MINIO_BUCKET_FILE || 'remote-file-test',
-              KNOWLEDGE_PERSONAL: netConfig.MINIO_BUCKET_KNOWLEDGE_PERSONAL || 'personal-test',
-              KNOWLEDGE_PUBLIC: netConfig.MINIO_BUCKET_KNOWLEDGE_PUBLIC || 'public-test',
-              DOWNLOAD: netConfig.MINIO_BUCKET_DOWNLOAD || 'utalk-test',
-              KERNEL: netConfig.MINIO_BUCKET_KERNEL || 'remote-kernel-test'
-            })
           }
           resolve(res)
         }).catch(error => {
diff --git a/src/views/knowledge/index.vue b/src/views/knowledge/index.vue
index 07dc205..61d3d10 100644
--- a/src/views/knowledge/index.vue
+++ b/src/views/knowledge/index.vue
@@ -277,12 +277,9 @@
     <!-- 分享弹窗 - 选择联系人 -->
     <CreateGroupDialog
       :visible.sync="shareDialogVisible"
-      title="分享给"
-      :recent-contacts="recentContacts"
-      :recent-groups="recentGroups"
+      title="选择人员"
       :min-select-count="1"
-      confirm-text="分享"
-      @create-success="handleShareToContacts"
+      @confirm="handleShareToContacts"
     />
   </div>
 </template>
@@ -299,9 +296,8 @@ import {
   postKnowledgePlay,
   postKnowledgeEdit,
   postKnowledgeDelete,
+  postMessagePushToUser,
 } from "@/api/knowledge";
-
-import { listUser } from "@/api/system/user";
 import { mapGetters } from "vuex";
 import CreateGroupDialog from "@/views/message/components/CreateGroupDialog";
 import {
@@ -309,6 +305,7 @@ import {
   parseMinioFilePath,
   uploadFile,
 } from "@/utils/requestMinio";
+import { MessageType } from "@/utils/constants";
 
 export default {
   name: "Knowledge",
@@ -370,8 +367,6 @@ export default {
       // ================== 分享相关 ==================
       shareDialogVisible: false, // 分享弹窗
       shareItem: null, // 当前分享的文件
-      recentContacts: [], // 最近联系人
-      recentGroups: [], // 最近群组
     };
   },
   created() {
@@ -604,28 +599,56 @@ export default {
         .catch(() => {});
     },
 
-    getContactList() {
-      listUser({ page: 1, pageSize: 100 }).then((res) => {
-        this.recentContacts = res.rows.map((user) => ({
-          id: user.userId,
-          name: user.nickName || user.title,
-          avatar: user.avatar || "",
-        }));
-      });
-    },
-
     handleShare(row) {
       this.shareItem = row;
       this.shareDialogVisible = true;
     },
     handleShareToContacts(selectedMembers) {
       if (selectedMembers && selectedMembers.length > 0) {
-        const shareTarget = selectedMembers[0];
-        this.$modal.msgSuccess(`已分享给 ${shareTarget.name}`);
-        console.log("分享文件:", this.shareItem, "给:", shareTarget);
+        const { id, netConfig } = this.$store.state.user;
+        const currentUserId = id;
+        const minioEndpoint =
+          netConfig?.MINIO_ENDPOINT_HTTPS?.trim() || "http://47.92.6.51:9100/";
+        selectedMembers.forEach((shareTarget) => {
+          const payloadContent = {
+            file_name: this.shareItem?.title || "",
+            file_path: this.shareItem?.file_path || "",
+            file_size: this.shareItem?.file_size || "",
+            file_time: this.shareItem?.create_time || "",
+            knowledge_id: this.shareItem?.id || 0,
+            thumbnail_path: this.shareItem?.thumbnail_path || "",
+          };
+          const messageData = {
+            client_id: `utalk-client-${currentUserId}`,
+            message: {
+              at_users: [],
+              message_id: 0,
+              payload: {
+                content: JSON.stringify(payloadContent),
+                file_duration: 0,
+                file_ico: "",
+                file_name: this.shareItem?.title || "",
+                file_path: this.shareItem?.file_path || "",
+                file_size: this.shareItem?.file_size || "",
+                file_type: this.shareItem?.file_type || "",
+              },
+              scene: 1,
+              source_id: currentUserId,
+              target_id: shareTarget.id,
+              timestamp: 0,
+              type: MessageType.KNOWLEDGE_SHAREs,
+            },
+            target_id: shareTarget.id,
+            topic: "/user/",
+          };
+          postMessagePushToUser(messageData).then((res) => {
+            this.$modal.msgSuccess(`已分享给 ${shareTarget.name}`);
+          });
+        });
+
+        this.shareDialogVisible = false;
+        this.shareItem = null;
       }
-      this.shareDialogVisible = false;
-      this.shareItem = null;
     },
     // ====================== 上传核心逻辑 ======================
     // 打开类型选择
diff --git a/src/views/message/components/CreateGroupDialog.vue b/src/views/message/components/CreateGroupDialog.vue
index 2c84f41..5663b67 100644
--- a/src/views/message/components/CreateGroupDialog.vue
+++ b/src/views/message/components/CreateGroupDialog.vue
@@ -1,255 +1,561 @@
 <template>
-  <!-- 发起群聊弹窗 -->
-  <el-dialog
-    :title="title"
-    :visible.sync="visible"
-    width="38%"
-    append-to-body
-    @close="handleClose"
-  >
-    <div class="create-group-container">
-      <!-- 左侧：搜索和选择区域 -->
-      <div class="group-left-panel">
-        <!-- 搜索框 -->
-        <el-input
-          v-model="groupSearchKey"
-          placeholder="搜索"
-          prefix-icon="el-icon-search"
-          class="group-search-input"
-        />
-
-        <!-- 标签页 -->
-        <el-tabs v-model="activeGroupTab" class="group-tabs">
-          <!-- 最近联系人 -->
-          <el-tab-pane label="最近联系人" name="recent">
-            <div class="contact-list">
-              <div
-                v-for="contact in filteredRecentContacts"
-                :key="contact.id"
-                class="contact-item"
-                :class="{ selected: isContactSelected(contact) }"
-                @click="toggleContactSelect(contact)"
-              >
-                <el-checkbox
-                  v-model="contact.selected"
-                  @change.stop="toggleContactSelect(contact)"
-                />
-                <el-avatar :size="36" :src="contact.avatar" />
-                <span class="contact-name">{{ contact.name }}</span>
-              </div>
-            </div>
-          </el-tab-pane>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="visible"
+      width="38%"
+      append-to-body
+      :before-close="handleClose"
+    >
+      <el-row :gutter="20" class="body">
+        <!-- 左侧：联系人选择区域 -->
+        <el-col :span="12">
+          <!-- 搜索框 -->
+          <el-input
+            v-model="searchText"
+            placeholder="搜索联系人"
+            suffix-icon="el-icon-search"
+            clearable
+            @keyup.enter.native="handleSearch"
+            @clear="handleClearSearch"
+            style="margin-bottom: 10px"
+          />
 
-          <!-- 最近群组 -->
-          <el-tab-pane label="最近群组" name="groups">
-            <div class="contact-list">
-              <div v-for="group in filteredRecentGroups" :key="group.id">
-                <!-- 群组标题 -->
+          <!-- 标签页 -->
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <!-- 最近联系人 -->
+            <el-tab-pane label="最近联系人" name="recentContacts">
+              <div v-loading="loading" class="contact-list">
                 <div
-                  class="group-header"
-                  :class="{ expanded: group.expanded }"
-                  @click="toggleGroupExpand(group)"
+                  v-for="member in displayMembers"
+                  :key="member.id"
+                  :class="[
+                    'member-item',
+                    {
+                      active: isSelected(member.id),
+                      offline: !member.online,
+                    },
+                  ]"
+                  @click="toggleSelect(member)"
                 >
-                  <el-avatar :size="36" :src="group.avatar" />
-                  <span class="group-name">{{ group.name }}</span>
-                  <i class="el-icon-arrow-right expand-icon" />
+                  <el-checkbox
+                    v-model="member.selected"
+                    :disabled="isSelectDisabled && !member.selected"
+                    @change="toggleSelect(member)"
+                  >
+                    <div class="member-item-label">
+                      <el-avatar
+                        :src="member.avatar"
+                        icon="el-icon-user-solid"
+                      />
+                      <span class="member-name">{{ member.name }}</span>
+                      <span v-if="member.online" class="online-dot" />
+                    </div>
+                  </el-checkbox>
                 </div>
-                <!-- 群成员列表 -->
-                <div v-if="group.expanded" class="group-members">
-                  <!-- 全选 -->
+                <el-empty
+                  v-if="!loading && displayMembers.length === 0"
+                  description="暂无联系人"
+                />
+              </div>
+            </el-tab-pane>
+
+            <!-- 最近群组 -->
+            <el-tab-pane label="最近群组" name="recentGroups">
+              <div v-loading="loading" class="contact-list">
+                <div v-for="group in recentGroups" :key="group.id">
+                  <!-- 群组标题 -->
                   <div
-                    class="member-item"
-                    :class="{ selected: isGroupAllSelected(group) }"
-                    @click.stop="toggleGroupAllSelect(group)"
+                    class="group-header"
+                    :class="{ expanded: group.expanded }"
+                    @click="toggleGroupExpand(group)"
                   >
-                    <el-checkbox
-                      v-model="group.allSelected"
-                      @change.stop="toggleGroupAllSelect(group)"
-                    />
-                    <span class="member-name">全选</span>
+                    <el-avatar :size="32" :src="group.avatar" />
+                    <span class="group-name">{{ group.name }}</span>
+                    <i class="el-icon-arrow-right expand-icon" />
                   </div>
-                  <!-- 成员列表 -->
-                  <div
-                    v-for="member in group.members"
-                    :key="member.id"
-                    class="member-item"
-                    :class="{ selected: isMemberSelected(member) }"
-                    @click.stop="toggleMemberSelect(group, member)"
-                  >
-                    <el-checkbox
-                      v-model="member.selected"
-                      @change.stop="toggleMemberSelect(group, member)"
-                    />
-                    <el-avatar :size="36" :src="member.avatar" />
-                    <span class="member-name">{{ member.name }}</span>
+                  <!-- 群成员列表 -->
+                  <div v-if="group.expanded">
+                    <!-- 全选 -->
+                    <div
+                      class="member-item"
+                      :class="{ selected: group.allSelected }"
+                      @click="toggleGroupAllSelect(group)"
+                    >
+                      <el-checkbox
+                        v-model="group.allSelected"
+                        @change="toggleGroupAllSelect(group)"
+                      />
+                      <span class="member-name">全选</span>
+                    </div>
+                    <!-- 成员列表 -->
+                    <div
+                      v-for="member in group.members"
+                      :key="member.id"
+                      :class="[
+                        'member-item',
+                        {
+                          active: isSelected(member.id),
+                          offline: !member.online,
+                        },
+                      ]"
+                      @click="toggleSelect(member)"
+                    >
+                      <el-checkbox
+                        v-model="member.selected"
+                        :disabled="isSelectDisabled && !member.selected"
+                        @change="toggleSelect(member)"
+                      >
+                        <div class="member-item-label">
+                          <el-avatar :size="32" :src="member.avatar" />
+                          <span class="member-name">{{ member.name }}</span>
+                        </div>
+                      </el-checkbox>
+                    </div>
                   </div>
                 </div>
+                <el-empty
+                  v-if="!loading && recentGroups.length === 0"
+                  description="暂无群组"
+                />
               </div>
+            </el-tab-pane>
+
+            <!-- 组织架构 -->
+            <el-tab-pane label="组织架构" name="organization">
+              <div v-loading="loading" class="contact-list">
+                <el-tree
+                  ref="orgTree"
+                  :data="treeData"
+                  :props="{ label: 'name', children: 'children' }"
+                  :highlight-current="true"
+                  node-key="id"
+                  :expand-on-click-node="false"
+                  @node-click="handleOrgNodeClick"
+                >
+                  <template #default="{ node, data }">
+                    <div class="custom-tree-node">
+                      <!-- 组织节点 -->
+                      <template v-if="data.type === 'org'">
+                        <i class="el-icon-office-building org-icon" />
+                        <span class="org-node-name">{{ data.name }}</span>
+                      </template>
+                      <!-- 全选节点 -->
+                      <template v-else-if="data.type === 'all'">
+                        <el-checkbox
+                          :indeterminate="data.indeterminate"
+                          v-model="data.checkAll"
+                          @change="handleOrgCheckAllChange(data)"
+                        >
+                          全选
+                        </el-checkbox>
+                      </template>
+                      <!-- 用户节点 -->
+                      <div v-else-if="data.type === 'user'" class="userline">
+                        <el-checkbox
+                          :value="isSelected(data.id)"
+                          @change="toggleSelect(data)"
+                          :disabled="isSelectDisabled && !isSelected(data.id)"
+                        >
+                          <div class="member-item-label">
+                            <el-avatar
+                              :size="32"
+                              :src="
+                                $store.state.user.netConfig
+                                  .MINIO_ENDPOINT_HTTPS + data.avatar
+                              "
+                              icon="el-icon-user-solid"
+                            />
+                            <span class="member-name">{{ data.name }}</span>
+                            <span v-if="data.online" class="online-dot" />
+                          </div>
+                        </el-checkbox>
+                      </div>
+                      <!-- 其他情况 -->
+                      <template v-else>
+                        <span>{{ data.name }}</span>
+                      </template>
+                    </div>
+                  </template>
+                </el-tree>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+
+        <!-- 右侧：已选人员 -->
+        <el-col
+          :span="12"
+          style="height: 100%; display: flex; flex-direction: column"
+        >
+          <div class="selected-header">
+            已选人员({{ selectedMembers.length }}
+            <template v-if="maxSelectCount > 0">/{{ maxSelectCount }}</template
+            >)
+            <span
+              v-if="selectedMembers.length > 0"
+              class="clear-btn"
+              @click="clearAllSelected"
+            >
+              <i class="el-icon-close" />
+            </span>
+          </div>
+          <div class="selected-list">
+            <div
+              v-for="member in selectedMembers"
+              :key="member.id"
+              class="selected-item"
+            >
+              <el-avatar :size="40" :src="member.avatar" />
+              <span class="selected-name">{{ member.name }}</span>
+              <span class="remove-btn" @click="removeSelected(member)">
+                <i class="el-icon-close" />
+              </span>
             </div>
-          </el-tab-pane>
-
-          <!-- 组织架构 -->
-          <el-tab-pane label="组织架构" name="org">
-            <div class="org-tree">
-              <el-tree
-                :data="orgTreeData"
-                :props="{ label: 'name', children: 'children' }"
-                :expand-on-click-node="false"
-                @node-click="handleOrgNodeClick"
-              >
-                <span class="custom-tree-node" slot-scope="{ node, data }">
-                  <el-checkbox
-                    v-model="data.selected"
-                    @change="toggleOrgSelect(data)"
-                  />
-                  <span>{{ node.label }}</span>
-                </span>
-              </el-tree>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-
-      <!-- 右侧：已选人员 -->
-      <div class="group-right-panel">
-        <div class="selected-header">
-          已选人员({{ selectedMembers.length }})
-          <span
-            v-if="selectedMembers.length > 0"
-            class="clear-btn"
-            @click="clearAllSelected"
-          >
-            <i class="el-icon-close" />
-          </span>
-        </div>
-        <div class="selected-list">
+            <el-empty
+              v-if="selectedMembers.length === 0"
+              description="暂无选中人员"
+              class="empty-tip"
+            />
+          </div>
           <div
-            v-for="member in selectedMembers"
-            :key="member.id"
-            class="selected-item"
+            v-if="
+              maxSelectCount > 0 && selectedMembers.length >= maxSelectCount
+            "
+            class="max-tip"
           >
-            <el-avatar :size="40" :src="member.avatar" />
-            <span class="selected-name">{{ member.name }}</span>
-            <span class="remove-btn" @click="removeSelected(member)">
-              <i class="el-icon-close" />
-            </span>
+            已达到最大选择数量({{ maxSelectCount }})
           </div>
-          <el-empty
-            v-if="selectedMembers.length === 0"
-            description="暂无选中人员"
-            class="empty-tip"
-          />
-        </div>
-      </div>
-    </div>
-    <span slot="footer">
-      <el-button @click="handleClose">取消</el-button>
-      <el-button
-        type="primary"
-        :loading="creatingGroup"
-        @click="confirmCreateGroup"
-      >
-        {{ confirmText }}
-      </el-button>
-    </span>
-  </el-dialog>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button
+          type="primary"
+          :loading="confirmLoading"
+          :disabled="selectedMembers.length < minSelectCount"
+          @click="confirmCreateGroup"
+        >
+          {{ confirmText }}
+        </el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import { ContactsScene } from "@/utils/constants";
+import {
+  getMessagesLatestContacts,
+  getGroupsList,
+  getGroupsListUser,
+  searchUsers,
+} from "@/api/contacts/index.js";
 
 export default {
   name: "CreateGroupDialog",
   props: {
-    // 弹窗标题
     title: {
       type: String,
       default: "发起群聊",
     },
-    // 控制弹窗显示
     visible: {
       type: Boolean,
       default: false,
     },
-    // 最近联系人
-    recentContacts: {
-      type: Array,
-      default: () => [],
-    },
-    // 最近群组
-    recentGroups: {
-      type: Array,
-      default: () => [],
-    },
-    // 最小选择数量
     minSelectCount: {
       type: Number,
       default: 2,
     },
-    // 按钮文字
+    maxSelectCount: {
+      type: Number,
+      default: 0,
+    },
     confirmText: {
       type: String,
       default: "创建",
     },
+    confirmCallback: {
+      type: Function,
+      default: null,
+    },
   },
   data() {
     return {
-      creatingGroup: false,
-      groupSearchKey: "",
-      activeGroupTab: "recent",
+      activeName: "recentContacts",
+      searchText: "",
+      loading: false,
+      confirmLoading: false,
       selectedMembers: [],
-      orgTreeData: this.getOrgTreeData(),
+      memberList: [],
+      recentGroups: [],
+      treeData: [],
     };
   },
   computed: {
-    // 过滤后的最近联系人
-    filteredRecentContacts() {
-      if (!this.groupSearchKey.trim()) return this.recentContacts;
-      const key = this.groupSearchKey.toLowerCase();
-      return this.recentContacts.filter((c) =>
-        c.name.toLowerCase().includes(key)
-      );
-    },
-    // 过滤后的最近群组
-    filteredRecentGroups() {
-      if (!this.groupSearchKey.trim()) return this.recentGroups;
-      const key = this.groupSearchKey.toLowerCase();
-      return this.recentGroups.filter((g) =>
-        g.name.toLowerCase().includes(key)
-      );
+    isSelectDisabled() {
+      if (this.maxSelectCount <= 0) return false;
+      return this.selectedMembers.length >= this.maxSelectCount;
+    },
+    displayMembers() {
+      const online = this.memberList.filter((m) => m.online);
+      const offline = this.memberList.filter((m) => !m.online);
+      return [...online, ...offline];
+    },
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.loadData();
+      }
     },
   },
   methods: {
-    // 关闭弹窗
-    handleClose() {
-      this.clearAllSelected();
-      this.$emit("update:visible", false);
+    async loadData() {
+      await Promise.all([
+        this.fetchRecentContacts(),
+        this.fetchRecentGroups(),
+        this.fetchOrgTree(),
+      ]);
+    },
+
+    // 获取最近联系人
+    async fetchRecentContacts() {
+      this.loading = true;
+      try {
+        const res = await getMessagesLatestContacts({
+          scene: 1,
+          page: 1,
+          size: 65535,
+        });
+        const list = res.data?.list || [];
+        this.memberList = list.map((item) => ({
+          id: item.id,
+          name: item.name,
+          role: item.role,
+          phone: item.phone,
+          status: item.status,
+          email: item.email,
+          group: item.group,
+          full_group: item.full_group,
+          avatar: item.avatar,
+          online: item.online === 1 || item.online === true,
+          selected: false,
+        }));
+      } catch (e) {
+        console.error("获取最近联系人失败", e);
+        this.memberList = [];
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 获取最近群组
+    async fetchRecentGroups() {
+      try {
+        const res = await getMessagesLatestContacts({
+          scene: 4,
+          page: 1,
+          size: 65535,
+        });
+        const list = res.data?.list || [];
+        this.recentGroups = list.map((item) => ({
+          id: item.id,
+          name: item.name,
+          avatar: item.avatar,
+          expanded: false,
+          allSelected: false,
+          members: [],
+        }));
+      } catch (e) {
+        console.error("获取最近群组失败", e);
+        this.recentGroups = [];
+      }
+    },
+
+    // 获取组织架构树
+    async fetchOrgTree() {
+      try {
+        const res = await getGroupsList();
+        const list = res.data?.list || [];
+        this.treeData = this.buildOrgTree(list);
+      } catch (e) {
+        console.error("获取组织架构失败", e);
+        this.treeData = [];
+      }
     },
 
-    // 切换群组展开状态
-    toggleGroupExpand(group) {
+    // 构建组织架构树
+    buildOrgTree(list) {
+      if (!list || list.length === 0) return [];
+      return list.map((item) => ({
+        id: item.id,
+        name: item.name,
+        type: "org",
+        isLoaded: false,
+        hasChildren: item.child && item.child.length > 0,
+        children:
+          item.child && item.child.length > 0
+            ? this.buildOrgTree(item.child)
+            : [],
+      }));
+    },
+
+    // 加载组织下的用户
+    async loadOrgUsers(node) {
+      if (node.isLoaded || node.type === "user" || node.type === "all") return;
+      if (node.hasChildren && node.children && node.children.length > 0) {
+        node.isLoaded = true;
+        return;
+      }
+      try {
+        const res = await getGroupsListUser({ group_id: node.id });
+        const list = res.data?.list || [];
+        const users = list.map((item) => ({
+          id: item.id,
+          name: item.name,
+          avatar: item.avatar,
+          online: item.online === 1 || item.online === true,
+          type: "user",
+          selected: this.isSelected(item.id),
+        }));
+        if (users.length > 0) {
+          const allSelected = users.every((u) => u.selected);
+          const selectedCount = users.filter((u) => u.selected).length;
+          users.unshift({
+            id: `all_${node.id}`,
+            name: "全选",
+            type: "all",
+            checkAll: allSelected,
+            indeterminate: selectedCount > 0 && selectedCount < users.length,
+          });
+        }
+        node.children = users;
+        node.isLoaded = true;
+      } catch (e) {
+        console.error(`获取组织 ${node.name} 下的用户失败`, e);
+        node.children = [];
+        node.isLoaded = true;
+      }
+    },
+
+    // 搜索联系人
+    async handleSearch() {
+      const text = this.searchText.trim();
+      if (!text) {
+        await this.fetchRecentContacts();
+        return;
+      }
+      this.loading = true;
+      try {
+        const res = await searchUsers({
+          search_key: text,
+          user_ids: [],
+          page: 1,
+          size: 10000,
+        });
+        const list = res.data?.list || [];
+        this.memberList = list.map((item) => ({
+          id: item.id,
+          name: item.name,
+          role: item.role,
+          phone: item.phone,
+          status: item.status,
+          email: item.email,
+          group: item.group,
+          full_group: item.full_group,
+          avatar: item.avatar,
+          online: item.online === 1 || item.online === true,
+          selected: false,
+        }));
+      } catch (e) {
+        console.error("搜索联系人失败", e);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 清除搜索
+    handleClearSearch() {
+      this.searchText = "";
+      this.fetchRecentContacts();
+    },
+
+    // 点击标签页
+    handleClick(tab) {
+      this.activeName = tab.name;
+      if (tab.name === "recentGroups") {
+        this.loadGroupMembers();
+      }
+    },
+
+    // 加载群组成员
+    async loadGroupMembers() {
+      for (const group of this.recentGroups) {
+        if (!group.members || group.members.length === 0) {
+          try {
+            const res = await getGroupsListUser({ group_id: group.id });
+            const list = res.data?.list || [];
+            group.members = list.map((item) => ({
+              id: item.id,
+              name: item.name,
+              avatar: item.avatar,
+              online: item.online === 1 || item.online === true,
+              selected: false,
+            }));
+          } catch (e) {
+            console.error(`获取群组 ${group.name} 成员失败`, e);
+            group.members = [];
+          }
+        }
+      }
+    },
+
+    // 切换群组展开
+    async toggleGroupExpand(group) {
       group.expanded = !group.expanded;
       if (group.expanded) {
-        this.syncGroupMemberSelection(group);
+        if (!group.members || group.members.length === 0) {
+          try {
+            const res = await getGroupsListUser({ group_id: group.id });
+            const list = res.data?.list || [];
+            group.members = list.map((item) => ({
+              id: item.id,
+              name: item.name,
+              avatar: item.avatar,
+              online: item.online === 1 || item.online === true,
+              selected: this.isSelected(item.id),
+            }));
+          } catch (e) {
+            console.error(`获取群组 ${group.name} 成员失败`, e);
+            group.members = [];
+          }
+        }
+        group.allSelected = group.members.every((m) => m.selected);
       }
     },
 
-    // 同步群组成员的选中状态
-    syncGroupMemberSelection(group) {
-      if (!group.members) return;
-      group.members.forEach((member) => {
-        member.selected = this.selectedMembers.some((m) => m.id === member.id);
-      });
-      group.allSelected = group.members.every((m) => m.selected);
+    // 点击组织节点
+    async handleOrgNodeClick(data) {
+      if (data.type === "org") {
+        this.$refs.orgTree.setCurrentKey(data.id);
+        // 加载用户数据（只在首次展开时加载）
+        if (!data.isLoaded) {
+          await this.loadOrgUsers(data);
+        }
+      }
     },
 
-    // 判断成员是否被选中
-    isMemberSelected(member) {
-      return this.selectedMembers.some((m) => m.id === member.id);
+    // 判断是否已选中
+    isSelected(userId) {
+      return this.selectedMembers.some((m) => m.id === userId);
     },
 
-    // 切换成员选择
-    toggleMemberSelect(group, member) {
+    // 切换选择状态
+    toggleSelect(member) {
+      if (this.isSelectDisabled && !member.selected) {
+        this.$message.warning(`最多只能选择${this.maxSelectCount}个成员`);
+        return;
+      }
       const index = this.selectedMembers.findIndex((m) => m.id === member.id);
       if (index >= 0) {
         this.selectedMembers.splice(index, 1);
@@ -262,16 +568,45 @@ export default {
         });
         member.selected = true;
       }
-      group.allSelected = group.members.every((m) => m.selected);
+      this.syncSelection(member);
     },
 
-    // 判断群组是否全选
-    isGroupAllSelected(group) {
-      return group.allSelected;
+    // 同步选择状态
+    syncSelection(member) {
+      // 同步最近联系人
+      this.memberList.forEach((m) => {
+        if (m.id === member.id) m.selected = member.selected;
+      });
+      // 同步最近群组
+      this.recentGroups.forEach((group) => {
+        if (group.members) {
+          const groupMember = group.members.find((m) => m.id === member.id);
+          if (groupMember) {
+            groupMember.selected = member.selected;
+            group.allSelected = group.members.every((m) => m.selected);
+          }
+        }
+      });
+      // 同步组织架构
+      this.syncOrgTreeSelection(this.treeData, member);
+    },
+
+    // 同步组织架构选择状态
+    syncOrgTreeSelection(nodes, member) {
+      nodes.forEach((node) => {
+        if (node.id === member.id && node.type === "user") {
+          node.selected = member.selected;
+          this.updateParentAllSelectStatus(node);
+        }
+        if (node.children) {
+          this.syncOrgTreeSelection(node.children, member);
+        }
+      });
     },
 
     // 切换群组全选
     toggleGroupAllSelect(group) {
+      if (!group.members || group.members.length === 0) return;
       if (group.allSelected) {
         group.members.forEach((member) => {
           member.selected = false;
@@ -284,9 +619,17 @@ export default {
         });
         group.allSelected = false;
       } else {
+        const selectedCount = group.members.filter((m) => !m.selected).length;
+        if (
+          this.maxSelectCount > 0 &&
+          this.selectedMembers.length + selectedCount > this.maxSelectCount
+        ) {
+          this.$message.warning(`最多只能选择${this.maxSelectCount}个成员`);
+          return;
+        }
         group.members.forEach((member) => {
           member.selected = true;
-          if (!this.selectedMembers.some((m) => m.id === member.id)) {
+          if (!this.isSelected(member.id)) {
             this.selectedMembers.push({
               id: member.id,
               name: member.name,
@@ -296,154 +639,106 @@ export default {
         });
         group.allSelected = true;
       }
+      this.syncGroupSelection(group);
     },
 
-    // 判断联系人是否被选中
-    isContactSelected(contact) {
-      return this.selectedMembers.some((m) => m.id === contact.id);
-    },
-
-    // 切换联系人选择
-    toggleContactSelect(contact) {
-      const index = this.selectedMembers.findIndex((m) => m.id === contact.id);
-      if (index >= 0) {
-        this.selectedMembers.splice(index, 1);
-        contact.selected = false;
-      } else {
-        this.selectedMembers.push({
-          id: contact.id,
-          name: contact.name,
-          avatar: contact.avatar,
-        });
-        contact.selected = true;
-      }
-
-      this.recentGroups.forEach((group) => {
-        if (group.members) {
-          const groupMember = group.members.find((m) => m.id === contact.id);
-          if (groupMember) {
-            groupMember.selected = contact.selected;
-            group.allSelected = group.members.every((m) => m.selected);
-          }
-        }
+    // 同步群组选择到其他列表
+    syncGroupSelection(group) {
+      group.members.forEach((member) => {
+        this.syncSelection(member);
       });
     },
 
-    // 获取组织架构树数据
-    getOrgTreeData() {
-      return [
-        {
-          id: "sd",
-          name: "山东省",
-          children: [
-            { id: "qd", name: "青岛市" },
-            { id: "wf", name: "潍坊市" },
-            {
-              id: "jn",
-              name: "济宁市",
-              children: [
-                {
-                  id: "hz",
-                  name: "菏泽市",
-                  children: [
-                    { id: "quanxuan", name: "全选" },
-                    { id: "chenwenhai", name: "陈文海1", type: "user" },
-                    { id: "chenwenhai1", name: "陈文海2", type: "user" },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-        { id: "sc", name: "四川省" },
-      ];
-    },
-
-    // 切换组织节点选择
-    toggleOrgSelect(data) {
-      if (data.type === "user") {
-        const index = this.selectedMembers.findIndex((m) => m.id === data.id);
-        if (index >= 0) {
-          this.selectedMembers.splice(index, 1);
-          data.selected = false;
-        } else {
-          this.selectedMembers.push({
-            id: data.id,
-            name: data.name,
-            avatar: "",
-          });
-          data.selected = true;
+    // 组织架构全选
+    handleOrgCheckAllChange(allNode) {
+      const parentNode = this.findParentNode(this.treeData, allNode.id);
+      if (!parentNode || !parentNode.children) return;
+      const users = parentNode.children.filter((c) => c.type === "user");
+      if (allNode.checkAll) {
+        const unselectedCount = users.filter(
+          (u) => !this.isSelected(u.id)
+        ).length;
+        if (
+          this.maxSelectCount > 0 &&
+          this.selectedMembers.length + unselectedCount > this.maxSelectCount
+        ) {
+          this.$message.warning(`最多只能选择${this.maxSelectCount}个成员`);
+          allNode.checkAll = false;
+          allNode.indeterminate = false;
+          return;
         }
-      } else {
-        this.toggleOrgNodeRecursive(data, data.selected);
-      }
-    },
-
-    // 递归切换组织节点选择
-    toggleOrgNodeRecursive(node, selected) {
-      if (node.children) {
-        node.children.forEach((child) => {
-          child.selected = selected;
-          this.toggleOrgNodeRecursive(child, selected);
-        });
-      }
-      if (node.type === "user") {
-        if (selected) {
-          if (!this.selectedMembers.some((m) => m.id === node.id)) {
+        users.forEach((user) => {
+          user.selected = true;
+          if (!this.isSelected(user.id)) {
             this.selectedMembers.push({
-              id: node.id,
-              name: node.name,
-              avatar: "",
+              id: user.id,
+              name: user.name,
+              avatar: user.avatar,
             });
           }
-        } else {
-          const index = this.selectedMembers.findIndex((m) => m.id === node.id);
+        });
+        allNode.indeterminate = false;
+      } else {
+        users.forEach((user) => {
+          user.selected = false;
+          const index = this.selectedMembers.findIndex((m) => m.id === user.id);
           if (index >= 0) {
             this.selectedMembers.splice(index, 1);
           }
+        });
+        allNode.indeterminate = false;
+      }
+      users.forEach((user) => this.syncSelection(user));
+    },
+
+    // 查找父节点
+    findParentNode(nodes, childId, parent = null) {
+      for (const node of nodes) {
+        if (node.id === childId) return parent;
+        if (node.children) {
+          const found = this.findParentNode(node.children, childId, node);
+          if (found) return found;
         }
       }
+      return null;
     },
 
-    // 点击组织节点
-    handleOrgNodeClick(data) {},
+    // 更新父节点全选状态
+    updateParentAllSelectStatus(userNode) {
+      const parentNode = this.findParentNode(this.treeData, userNode.id);
+      if (!parentNode || !parentNode.children) return;
+      const allNode = parentNode.children.find((c) => c.type === "all");
+      const users = parentNode.children.filter((c) => c.type === "user");
+      if (allNode) {
+        const selectedCount = users.filter((u) => u.selected).length;
+        allNode.checkAll = users.length > 0 && users.every((u) => u.selected);
+        allNode.indeterminate =
+          selectedCount > 0 && selectedCount < users.length;
+      }
+    },
 
-    // 移除选中成员
+    // 移除已选人员
     removeSelected(member) {
       const index = this.selectedMembers.findIndex((m) => m.id === member.id);
       if (index >= 0) {
         this.selectedMembers.splice(index, 1);
-        this.recentContacts.forEach((c) => {
-          if (c.id === member.id) c.selected = false;
-        });
-        this.recentGroups.forEach((g) => {
-          if (g.id === member.id) g.selected = false;
-        });
-        this.recentGroups.forEach((group) => {
-          if (group.members) {
-            const groupMember = group.members.find((m) => m.id === member.id);
-            if (groupMember) {
-              groupMember.selected = false;
-              group.allSelected = group.members.every((m) => m.selected);
-            }
-          }
-        });
+        member.selected = false;
+        this.syncSelection({ id: member.id, selected: false });
       }
     },
 
-    // 清除所有选中
+    // 清空所有选择
     clearAllSelected() {
       this.selectedMembers = [];
-      this.recentContacts.forEach((c) => (c.selected = false));
+      this.memberList.forEach((m) => (m.selected = false));
       this.recentGroups.forEach((g) => {
-        g.selected = false;
         g.allSelected = false;
         if (g.members) g.members.forEach((m) => (m.selected = false));
       });
-      this.clearOrgTreeSelected(this.orgTreeData);
+      this.clearOrgTreeSelected(this.treeData);
     },
 
-    // 递归清除组织树选中状态
+    // 清空组织架构选择
     clearOrgTreeSelected(nodes) {
       nodes.forEach((node) => {
         node.selected = false;
@@ -451,21 +746,37 @@ export default {
       });
     },
 
+    // 关闭弹窗
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          this.clearAllSelected();
+          this.searchText = "";
+          done();
+        })
+        .catch((_) => {});
+    },
+
     // 确认创建群聊
     async confirmCreateGroup() {
       if (this.selectedMembers.length < this.minSelectCount) {
         this.$message.warning(`至少选择${this.minSelectCount}个成员`);
         return;
       }
-      this.creatingGroup = true;
+      this.confirmLoading = true;
       try {
-        // 向父组件提交选中成员
+        if (typeof this.confirmCallback === "function") {
+          await this.confirmCallback(this.selectedMembers);
+        }
+        this.$emit("confirm", this.selectedMembers);
         this.$emit("create-success", this.selectedMembers);
-        this.handleClose();
+        this.clearAllSelected();
+        this.searchText = "";
+        this.$emit("update:visible", false);
       } catch (e) {
-        this.$message.error("创建失败");
+        this.$message.error("操作失败");
       } finally {
-        this.creatingGroup = false;
+        this.confirmLoading = false;
       }
     },
   },
@@ -473,193 +784,200 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.create-group-container {
-  display: flex;
-  height: 400px;
-}
-.group-left-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid #ebeef5;
-  padding-right: 10px;
-}
-.group-search-input {
-  margin-bottom: 10px;
-}
-.group-tabs {
-  flex: 1;
-  overflow: hidden;
-}
-.group-tabs .el-tabs__content {
-  height: calc(100% - 40px);
-  overflow-y: auto;
-}
-.contact-list {
-  padding: 5px;
-  height: 100%;
-  overflow-y: auto;
-}
-.contact-item {
-  display: flex;
-  align-items: center;
-  padding: 8px 10px;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.2s;
-  &:hover {
-    background: #f5f7fa;
+.body {
+  height: 450px;
+  .contact-list {
+    height: 400px;
+    overflow-y: auto;
+
+    .member-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      cursor: pointer;
+      border-radius: 4px;
+      transition: background 0.2s;
+
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      &.active {
+        background: #e5f1fb;
+      }
+
+      &.offline {
+        .member-name {
+          color: #909399;
+        }
+      }
+      .member-item-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        .member-name {
+          font-size: 14px;
+          color: #303133;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .online-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #67c23a;
+        }
+      }
+    }
+  }
+
+  .group-header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background 0.2s;
+
+    &:hover {
+      background: #f5f7fa;
+    }
+
+    &.expanded {
+      background: #e8f4fd;
+    }
+
+    .group-name {
+      flex: 1;
+      margin-left: 8px;
+      font-size: 14px;
+      color: #303133;
+    }
+
+    .expand-icon {
+      color: #c0c4cc;
+      transition: transform 0.2s;
+    }
+
+    &.expanded .expand-icon {
+      transform: rotate(90deg);
+    }
   }
-  &.selected {
-    background: #e8f4fd;
+
+  .custom-tree-node {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 5px;
   }
-  .el-checkbox {
-    margin-right: 10px;
+
+  .org-icon {
+    font-size: 16px;
+    color: #409eff;
   }
-  .contact-name {
-    margin-left: 8px;
+
+  .org-node-name {
     font-size: 14px;
     color: #303133;
+    font-weight: 500;
   }
-}
-.org-tree {
-  padding: 5px;
-  height: 100%;
-  overflow-y: auto;
-}
-.custom-tree-node {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.group-header {
-  display: flex;
-  align-items: center;
-  padding: 8px 10px;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.2s;
-  &:hover {
-    background: #f5f7fa;
-  }
-  &.expanded {
-    background: #e8f4fd;
-  }
-  .group-name {
-    flex: 1;
-    margin-left: 8px;
+
+  .selected-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 1px solid #ebeef5;
     font-size: 14px;
+    font-weight: 500;
     color: #303133;
+
+    .clear-btn {
+      color: #909399;
+      cursor: pointer;
+      padding: 4px;
+
+      &:hover {
+        color: #606266;
+      }
+    }
   }
-  .expand-icon {
-    color: #c0c4cc;
-    transition: transform 0.2s;
-  }
-  &.expanded .expand-icon {
-    transform: rotate(90deg);
-  }
-}
-.group-members {
-  padding-left: 20px;
-  border-left: 2px solid #ebeef5;
-  margin-left: 10px;
-}
-.member-item {
-  display: flex;
-  align-items: center;
-  padding: 6px 10px;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: background 0.2s;
-  &:hover {
-    background: #f5f7fa;
-  }
-  &.selected {
-    background: #e8f4fd;
-  }
-  .el-checkbox {
-    margin-right: 10px;
-  }
-  .member-name {
-    margin-left: 8px;
-    font-size: 13px;
-    color: #303133;
+
+  .selected-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
   }
-}
-.group-right-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding-left: 10px;
-}
-.selected-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #ebeef5;
-  font-size: 14px;
-  font-weight: 500;
-  color: #303133;
-  .clear-btn {
-    color: #909399;
-    cursor: pointer;
-    padding: 4px;
-    &:hover {
-      color: #606266;
+
+  .selected-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: calc((100% - 30px) / 3);
+    position: relative;
+
+    .selected-name {
+      margin-top: 6px;
+      font-size: 12px;
+      color: #303133;
+      text-align: center;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .remove-btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 18px;
+      height: 18px;
+      background: #e74c3c;
+      border-radius: 50%;
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+
+      &:hover {
+        background: #c0392b;
+      }
     }
   }
-}
-.selected-list {
-  overflow-y: auto;
-  padding: 10px 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-}
-.selected-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: calc((100% - 45px) / 4);
-  position: relative;
-  .selected-name {
-    margin-top: 6px;
-    font-size: 12px;
-    color: #303133;
+
+  .max-tip {
     text-align: center;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    color: #e6a23c;
+    font-size: 12px;
+    padding: 8px;
+    background: #fdf6ec;
+    border-radius: 4px;
   }
-  .remove-btn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 18px;
-    height: 18px;
-    background: #e74c3c;
-    border-radius: 50%;
-    color: #fff;
-    cursor: pointer;
+
+  .empty-tip {
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
-    &:hover {
-      background: #c0392b;
-    }
   }
-}
-.empty-tip {
-  text-align: center;
-  color: #909399;
-  font-size: 14px;
-  padding: 40px 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  .userline {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background 0.2s;
+    position: relative;
+  }
 }
 </style>
\ No newline at end of file