cd-personselector 1.0.1 → 1.0.2

package/src/PersonSelector.vue

@@ -8,76 +8,43 @@
     @confirm="handleConfirm"
     @close="handleClose"
   >
-    <div class="person-selector">
-      <!-- 头部说明 -->
-      <div v-if="tips" class="selector-tips">
+    <div class="cd-ps-container">
+      <div v-if="tips" class="cd-ps-tips">
         <t-icon name="info-circle" />
         <span>{{ tips }}</span>
       </div>
-      <!-- 搜索区域 -->
-      <div v-if="showSearch" class="search-area">
-        <div v-if="organizations.length > 0" class="org-select">
-          <t-select
-            v-model="selectedOrgId"
-            placeholder="选择组织"
-            style="width: 200px"
-            @change="handleOrgChange"
-          >
-            <t-option
-              v-for="org in organizations"
-              :key="org.id"
-              :value="org.id"
-              :label="org.displayName || org.name"
-            />
+      <div v-if="showSearch" class="cd-ps-search">
+        <div v-if="organizations.length > 0" class="cd-ps-org-select">
+          <t-select v-model="selectedOrgId" placeholder="选择组织" style="width: 200px" @change="handleOrgChange">
+            <t-option v-for="org in organizations" :key="org.id" :value="org.id" :label="org.displayName || org.name" />
           </t-select>
         </div>
-        <div class="search-input">
-          <t-input
-            v-model="searchKeyword"
-            placeholder="搜索"
-            clearable
-            @input="handleSearchInput"
-            @clear="clearSearch"
-          >
-            <template #prefix-icon>
-              <t-icon name="search" />
-            </template>
+        <div class="cd-ps-search-input">
+          <t-input v-model="searchKeyword" placeholder="搜索" clearable @input="handleSearchInput" @clear="clearSearch">
+            <template #prefix-icon><t-icon name="search" /></template>
           </t-input>
         </div>
       </div>
-      <!-- 主内容区域 -->
-      <div class="content-area">
-        <!-- 左侧：Tab + 树形结构 / 搜索结果 -->
-        <div class="left-panel tree-panel">
-          <!-- 搜索结果模式 -->
-          <div v-if="isSearchMode" class="search-results">
-            <div class="search-results-header">
+      <div class="cd-ps-content">
+        <div class="cd-ps-left">
+          <div v-if="isSearchMode" class="cd-ps-search-results">
+            <div class="cd-ps-search-header">
               <span>搜索结果</span>
               <t-button size="small" variant="text" @click="clearSearch">返回</t-button>
             </div>
-            <div v-if="searchLoading" class="search-loading">
-              <t-loading />
-              <span>搜索中...</span>
+            <div v-if="searchLoading" class="cd-ps-loading">
+              <t-loading /><span>搜索中...</span>
             </div>
-            <div v-else-if="searchResults.length === 0" class="empty-search">
-              <t-icon name="search" size="48px" style="color: #ddd;" />
-              <p>未找到匹配的人员</p>
+            <div v-else-if="searchResults.length === 0" class="cd-ps-empty">
+              <t-icon name="search" size="48px" style="color: #ddd;" /><p>未找到匹配的人员</p>
             </div>
-            <div v-else class="search-result-list">
-              <div
-                v-for="user in searchResults"
-                :key="user.id"
-                class="search-result-item"
-                :class="{ 'is-selected': selectedIds.includes(user.id) }"
-                @click="toggleSearchResultSelect(user)"
-              >
+            <div v-else class="cd-ps-result-list">
+              <div v-for="user in searchResults" :key="user.id" class="cd-ps-result-item" :class="{ 'cd-ps-selected': selectedIds.includes(user.id) }" @click="toggleSearchResultSelect(user)">
                 <t-checkbox :checked="selectedIds.includes(user.id)" @click.stop />
-                <div class="user-avatar">
-                  <t-icon name="user" />
-                </div>
-                <div class="user-details">
-                  <div class="user-name">{{ user.displayName || user.name }}</div>
-                  <div class="user-meta">
+                <div class="cd-ps-avatar"><t-icon name="user" /></div>
+                <div class="cd-ps-info">
+                  <div class="cd-ps-name">{{ user.displayName || user.name }}</div>
+                  <div class="cd-ps-meta">
                     <span v-if="user.position">{{ user.position }}</span>
                     <span v-if="user.department">{{ user.department }}</span>
                     <span v-if="user.phone">{{ user.phone }}</span>
@@ -86,77 +53,51 @@
               </div>
             </div>
           </div>
-          <!-- 正常 Tab 模式 -->
           <t-tabs v-else v-model="activeTab" @change="handleTabChange">
-            <t-tab-panel
-              v-for="tab in tabs"
-              :key="tab.key"
-              :value="tab.key"
-              :label="tab.name"
-            >
-              <div class="tree-container">
+            <t-tab-panel v-for="tab in tabs" :key="tab.key" :value="tab.key" :label="tab.name">
+              <div class="cd-ps-tree">
                 <t-tree
                   :ref="(el: any) => setTreeRef(tab.key, el)"
                   v-if="internalTreeData[tab.key]?.length > 0"
                   :data="internalTreeData[tab.key]"
                   :keys="{ value: 'id', label: 'name', children: 'children' }"
-                  hover
-                  checkable
-                  :expand-all="false"
-                  :value="selectedIds"
-                  @change="handleTreeCheck"
+                  hover checkable :expand-all="false" :value="selectedIds" @change="handleTreeCheck"
                 >
                   <template #label="{ node }">
-                    <div class="tree-node-label" :class="{ 'is-user': node.data.isUser }">
+                    <div class="cd-ps-node" :class="{ 'cd-ps-node-user': node.data.isUser }">
                       <t-icon :name="node.data.isUser ? 'user' : (tab.icon || 'folder')" />
                       <span>{{ node.label }}</span>
-                      <span v-if="node.data.userCount && !node.data.isUser" class="user-count">({{ node.data.userCount }})</span>
-                      <t-button
-                        v-if="!node.data.isUser && !node.data.children?.length && !node.data.loaded"
-                        size="small"
-                        variant="text"
-                        class="load-users-btn"
-                        @click.stop="handleLoadUsers(node, tab.key)"
-                      >
-                        显示人员
-                      </t-button>
+                      <span v-if="node.data.userCount && !node.data.isUser" class="cd-ps-count">({{ node.data.userCount }})</span>
+                      <t-button v-if="!node.data.isUser && !node.data.children?.length && !node.data.loaded" size="small" variant="text" class="cd-ps-load-btn" @click.stop="handleLoadUsers(node, tab.key)">显示人员</t-button>
                     </div>
                   </template>
                 </t-tree>
-                <div v-else class="empty-tree">
-                  <t-icon :name="tab.icon || 'folder-open'" size="48px" style="color: #ddd;" />
-                  <p>暂无数据</p>
+                <div v-else class="cd-ps-empty">
+                  <t-icon :name="tab.icon || 'folder-open'" size="48px" style="color: #ddd;" /><p>暂无数据</p>
                 </div>
               </div>
             </t-tab-panel>
           </t-tabs>
         </div>
-        <!-- 右侧：已选择 -->
-        <div class="right-panel">
-          <div class="selected-header">
-            <span class="header-title">已选择</span>
-            <span class="header-count">{{ selectedItems.length }} 项</span>
+        <div class="cd-ps-right">
+          <div class="cd-ps-right-header">
+            <span class="cd-ps-title">已选择</span>
+            <span class="cd-ps-num">{{ selectedItems.length }} 项</span>
             <t-button v-if="selectedItems.length > 0" size="small" variant="text" @click="clearSelection">清空</t-button>
           </div>
-          <div class="selected-list-container">
-            <div v-if="selectedItems.length === 0" class="empty-selected">
-              <t-icon name="user-checked" size="64px" style="color: #ddd;" />
-              <p>暂无选择</p>
+          <div class="cd-ps-right-list">
+            <div v-if="selectedItems.length === 0" class="cd-ps-empty">
+              <t-icon name="user-checked" size="64px" style="color: #ddd;" /><p>暂无选择</p>
             </div>
-            <div v-else class="selected-user-list">
-              <div
-                v-for="item in selectedItems"
-                :key="item.id"
-                class="selected-user-item"
-                :class="{ 'selected-dept-item': !item.isUser }"
-              >
-                <div class="user-info">
-                  <div class="user-avatar" :class="{ 'dept-avatar': !item.isUser }">
+            <div v-else class="cd-ps-selected-list">
+              <div v-for="item in selectedItems" :key="item.id" class="cd-ps-selected-item" :class="{ 'cd-ps-dept-item': !item.isUser }">
+                <div class="cd-ps-item-info">
+                  <div class="cd-ps-avatar" :class="{ 'cd-ps-avatar-dept': !item.isUser }">
                     <t-icon :name="item.isUser ? 'user' : 'folder'" />
                   </div>
-                  <div class="user-details">
-                    <div class="user-name">{{ item.displayName || item.name }}</div>
-                    <div class="user-meta">
+                  <div class="cd-ps-info">
+                    <div class="cd-ps-name">{{ item.displayName || item.name }}</div>
+                    <div class="cd-ps-meta">
                       <span v-if="item.isUser && item.position">{{ item.position }}</span>
                       <span v-if="item.isUser && item.department">{{ item.department }}</span>
                       <span v-if="!item.isUser">{{ item.typeName || '部门' }}</span>
@@ -164,15 +105,8 @@
                     </div>
                   </div>
                 </div>
-                <t-button
-                  size="small"
-                  variant="text"
-                  shape="circle"
-                  @click="handleRemoveItem(item.id)"
-                >
-                  <template #icon>
-                    <t-icon name="close" />
-                  </template>
+                <t-button size="small" variant="text" shape="circle" @click="handleRemoveItem(item.id)">
+                  <template #icon><t-icon name="close" /></template>
                 </t-button>
               </div>
             </div>
@@ -184,7 +118,6 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue';
-// 类型定义
 interface User {
   id: number | string;
   name: string;
@@ -210,14 +143,12 @@ interface Organization {
   name: string;
   displayName?: string;
 }
-// Tab 配置接口
 interface TabConfig {
   key: string;
   name: string;
   icon?: string;
   tree: TreeNode[];
 }
-// Props
 interface Props {
   visible: boolean;
   tabs?: TabConfig[];
@@ -236,7 +167,6 @@ const props = withDefaults(defineProps<Props>(), {
   tips: '',
   showSearch: true,
 });
-// Emits
 const emit = defineEmits<{
   'update:visible': [value: boolean];
   'update:modelValue': [value: (number | string)[]];
@@ -244,43 +174,31 @@ const emit = defineEmits<{
   'load-users': [params: { tabKey: string; nodeId: number | string; node: any; callback: (users: User[]) => void }];
   'search': [params: { keyword: string; orgId?: number | string; callback: (users: User[]) => void }];
 }>();
-// 内部状态
 const dialogVisible = ref(props.visible);
 const activeTab = ref(props.tabs?.[0]?.key || '');
 const selectedOrgId = ref<number | string | null>(null);
 const searchKeyword = ref('');
 const selectedIds = ref<(number | string)[]>([]);
 const treeRefs = ref<Record<string, any>>({});
-// 搜索相关状态
 const isSearchMode = ref(false);
 const searchLoading = ref(false);
 const searchResults = ref<User[]>([]);
-// 暴露给模板使用
 const tabs = computed(() => props.tabs || []);
 const organizations = computed(() => props.organizations || []);
 const tips = computed(() => props.tips || '');
 const showSearch = computed(() => props.showSearch);
 const dialogWidth = computed(() => props.dialogWidth);
-// 内部树数据（用于动态添加用户节点）
 const internalTreeData = ref<Record<string, TreeNode[]>>({});
-// 初始化内部树数据
-watch(
-  () => props.tabs,
-  (newTabs) => {
-    if (newTabs && newTabs.length > 0) {
-      const newData: Record<string, TreeNode[]> = {};
-      newTabs.forEach((tab) => {
-        newData[tab.key] = JSON.parse(JSON.stringify(tab.tree));
-      });
-      internalTreeData.value = newData;
-      if (!activeTab.value || !newTabs.find(t => t.key === activeTab.value)) {
-        activeTab.value = newTabs[0].key;
-      }
+watch(() => props.tabs, (newTabs) => {
+  if (newTabs && newTabs.length > 0) {
+    const newData: Record<string, TreeNode[]> = {};
+    newTabs.forEach((tab) => { newData[tab.key] = JSON.parse(JSON.stringify(tab.tree)); });
+    internalTreeData.value = newData;
+    if (!activeTab.value || !newTabs.find(t => t.key === activeTab.value)) {
+      activeTab.value = newTabs[0].key;
     }
-  },
-  { immediate: true, deep: true }
-);
-// 监听外部 visible 变化
+  }
+}, { immediate: true, deep: true });
 watch(() => props.visible, (newVal) => {
   dialogVisible.value = newVal;
   if (newVal) {
@@ -290,190 +208,99 @@ watch(() => props.visible, (newVal) => {
     }
   }
 });
-// 监听内部 dialogVisible 变化
-watch(dialogVisible, (newVal) => {
-  emit('update:visible', newVal);
-});
-// 设置树组件 ref
-function setTreeRef(key: string, el: any) {
-  if (el) {
-    treeRefs.value[key] = el;
-  }
-}
-// 递归查找节点
+watch(dialogVisible, (newVal) => { emit('update:visible', newVal); });
+function setTreeRef(key: string, el: any) { if (el) treeRefs.value[key] = el; }
 function findNodeById(tree: TreeNode[], id: number | string): TreeNode | null {
   for (const node of tree) {
     if (node.id === id) return node;
-    if (node.children) {
-      const found = findNodeById(node.children, id);
-      if (found) return found;
-    }
+    if (node.children) { const found = findNodeById(node.children, id); if (found) return found; }
   }
   return null;
 }
-// 已选择的项目
 const selectedItems = computed(() => {
   const items: any[] = [];
   selectedIds.value.forEach(id => {
-    // 先在搜索结果中查找
     const searchUser = searchResults.value.find(u => u.id === id);
-    if (searchUser) {
-      items.push({ ...searchUser, typeName: '搜索结果' });
-      return;
-    }
-    // 在所有 tab 的树中查找
+    if (searchUser) { items.push({ ...searchUser, typeName: '搜索结果' }); return; }
     for (const tab of props.tabs) {
       const treeData = internalTreeData.value[tab.key] || [];
       const node = findNodeById(treeData, id);
-      if (node) {
-        items.push({
-          ...node,
-          typeName: tab.name
-        });
-        break;
-      }
+      if (node) { items.push({ ...node, typeName: tab.name }); break; }
     }
   });
   return items;
 });
-// Tab 切换处理
-const handleTabChange = () => {
-  searchKeyword.value = '';
-};
-// 组织变化处理
-const handleOrgChange = () => {
-  // 可以触发重新加载数据
-};
-// 防抖定时器
+const handleTabChange = () => { searchKeyword.value = ''; };
+const handleOrgChange = () => {};
 let searchTimer: ReturnType<typeof setTimeout> | null = null;
-// 搜索输入处理（带防抖）
 const handleSearchInput = () => {
-  if (searchTimer) {
-    clearTimeout(searchTimer);
-  }
-  if (!searchKeyword.value.trim()) {
-    clearSearch();
-    return;
-  }
-  // 立即显示搜索模式和loading
+  if (searchTimer) clearTimeout(searchTimer);
+  if (!searchKeyword.value.trim()) { clearSearch(); return; }
   isSearchMode.value = true;
   searchLoading.value = true;
-  // 300ms 防抖
-  searchTimer = setTimeout(() => {
-    doSearch();
-  }, 300);
+  searchTimer = setTimeout(() => doSearch(), 300);
 };
-// 执行搜索
 const doSearch = () => {
   searchResults.value = [];
   const callback = (users: User[]) => {
     searchResults.value = users.map(u => ({ ...u, isUser: true }));
     searchLoading.value = false;
   };
-  emit('search', { 
-    keyword: searchKeyword.value, 
-    orgId: selectedOrgId.value || undefined,
-    callback
-  });
+  emit('search', { keyword: searchKeyword.value, orgId: selectedOrgId.value || undefined, callback });
 };
-// 清除搜索，返回 tab 模式
 const clearSearch = () => {
-  if (searchTimer) {
-    clearTimeout(searchTimer);
-    searchTimer = null;
-  }
+  if (searchTimer) { clearTimeout(searchTimer); searchTimer = null; }
   isSearchMode.value = false;
   searchKeyword.value = '';
   searchResults.value = [];
   searchLoading.value = false;
 };
-// 切换搜索结果中的选中状态
 const toggleSearchResultSelect = (user: User) => {
   const idx = selectedIds.value.indexOf(user.id);
-  if (idx > -1) {
-    selectedIds.value.splice(idx, 1);
-  } else {
-    selectedIds.value.push(user.id);
-  }
+  if (idx > -1) selectedIds.value.splice(idx, 1);
+  else selectedIds.value.push(user.id);
 };
-// 获取当前 tab 树中所有节点的 id
 function getAllNodeIds(tree: TreeNode[]): (number | string)[] {
   const ids: (number | string)[] = [];
   const traverse = (nodes: TreeNode[]) => {
-    for (const node of nodes) {
-      ids.push(node.id);
-      if (node.children) {
-        traverse(node.children);
-      }
-    }
+    for (const node of nodes) { ids.push(node.id); if (node.children) traverse(node.children); }
   };
   traverse(tree);
   return ids;
 }
-// 处理树节点 checkbox 变化
 const handleTreeCheck = (checkedIds: (number | string)[]) => {
-  // 获取当前 tab 的所有节点 id
   const currentTreeData = internalTreeData.value[activeTab.value] || [];
   const currentTreeNodeIds = getAllNodeIds(currentTreeData);
-  // 保留不属于当前 tab 的选中项
   const otherSelectedIds = selectedIds.value.filter(id => !currentTreeNodeIds.includes(id));
-  // 合并：其他 tab 的选中项 + 当前 tab 的选中项
   selectedIds.value = [...otherSelectedIds, ...checkedIds];
 };
-// 点击"显示人员"按钮
 async function handleLoadUsers(node: any, tabKey: string) {
   const nodeId = node.value;
   const treeRef = treeRefs.value[tabKey];
-  // 回调函数，父组件调用此函数传入用户数据
   const callback = async (users: User[]) => {
     if (users.length > 0) {
       const userNodes = users.map((user) => {
         const { id, name, ...rest } = user;
-        return {
-          ...rest,
-          id,
-          name: user.displayName || name,
-          isUser: true,
-        };
+        return { ...rest, id, name: user.displayName || name, isUser: true };
       });
-      // 添加到树中
       if (treeRef) {
         treeRef.appendTo(nodeId, userNodes);
         node.data.loaded = true;
         await nextTick();
-        // 使用 treeRef 的 setItem 方法展开节点
-        try {
-          treeRef.setItem(nodeId, { expanded: true });
-        } catch (e) {
-          console.log('展开节点失败', e);
-        }
+        try { treeRef.setItem(nodeId, { expanded: true }); } catch { /* ignore */ }
       }
-    } else {
-      node.data.loaded = true;
-    }
+    } else { node.data.loaded = true; }
   };
-  // 触发事件，让父组件加载数据
   emit('load-users', { tabKey, nodeId, node, callback });
 }
-// 移除选中项
-const handleRemoveItem = (id: number | string) => {
-  selectedIds.value = selectedIds.value.filter(i => i !== id);
-};
-// 清空选择
-const clearSelection = () => {
-  selectedIds.value = [];
-};
-// 确认
+const handleRemoveItem = (id: number | string) => { selectedIds.value = selectedIds.value.filter(i => i !== id); };
+const clearSelection = () => { selectedIds.value = []; };
 const handleConfirm = () => {
   emit('update:modelValue', selectedIds.value);
   emit('confirm', selectedItems.value);
   dialogVisible.value = false;
 };
-// 关闭
-const handleClose = () => {
-  dialogVisible.value = false;
-};
-// 暴露方法给父组件
+const handleClose = () => { dialogVisible.value = false; };
 defineExpose({
   clearSelection,
   appendUsers: (tabKey: string, nodeId: number | string, users: User[]) => {
@@ -481,12 +308,7 @@ defineExpose({
     if (treeRef && users.length > 0) {
       const userNodes = users.map((user) => {
         const { id, name, ...rest } = user;
-        return {
-          ...rest,
-          id,
-          name: user.displayName || name,
-          isUser: true,
-        };
+        return { ...rest, id, name: user.displayName || name, isUser: true };
       });
       treeRef.appendTo(nodeId, userNodes);
     }
@@ -494,326 +316,55 @@ defineExpose({
 });
 </script>
 <style scoped>
-.person-selector {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 500px;
-}
-.selector-tips {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background-color: #e8f4ff;
-  border-radius: 4px;
-  font-size: 13px;
-  color: #0052d9;
-}
-.search-area {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-.search-area .org-select {
-  flex-shrink: 0;
-}
-.search-area .search-input {
-  flex: 1;
-}
-.content-area {
-  display: flex;
-  gap: 0;
-  height: 450px;
-  border: 1px solid #dfe1e6;
-  border-radius: 4px;
-  overflow: hidden;
-}
-.tree-panel {
-  width: 480px;
-  flex-shrink: 0;
-  border-right: 1px solid #dfe1e6;
-  display: flex;
-  flex-direction: column;
-  background-color: #fafafa;
-}
-.tree-panel :deep(.t-tabs__nav-container) {
-  padding: 0 8px;
-  background-color: #fff;
-}
-.tree-panel :deep(.t-tabs__content) {
-  flex: 1;
-  overflow: hidden;
-}
-.tree-container {
-  height: 100%;
-  overflow-y: auto;
-  padding: 8px;
-}
-.tree-container::-webkit-scrollbar {
-  width: 6px;
-}
-.tree-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-.tree-container::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-.tree-node-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  width: 100%;
-}
-:deep(.t-tree__label) {
-  flex: 1;
-}
-:deep(.t-checkbox__label) {
-  width: 100%;
-}
-.tree-node-label.is-user {
-  font-size: 13px;
-  color: #666;
-}
-.tree-node-label .user-count {
-  color: #999;
-  font-size: 12px;
-}
-.tree-node-label .load-users-btn {
-  margin-left: auto;
-  color: #0052d9;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-.empty-tree {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  color: #999;
-}
-.empty-tree p {
-  margin-top: 16px;
-  font-size: 14px;
-}
-/* 搜索结果样式 */
-.search-results {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.search-results-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  background: #fff;
-  border-bottom: 1px solid #dfe1e6;
-  font-weight: 500;
-}
-.search-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  gap: 12px;
-  color: #999;
-}
-.empty-search {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  color: #999;
-}
-.empty-search p {
-  margin-top: 16px;
-  font-size: 14px;
-}
-.search-result-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-.search-result-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  background: #fff;
-  border-radius: 4px;
-  border: 1px solid #e5e7eb;
-  margin-bottom: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-.search-result-item:hover {
-  border-color: #0052d9;
-  background: #f0f5ff;
-}
-.search-result-item.is-selected {
-  border-color: #0052d9;
-  background: #e8f4ff;
-}
-.search-result-item .user-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  flex-shrink: 0;
-}
-.search-result-item .user-details {
-  flex: 1;
-  min-width: 0;
-}
-.search-result-item .user-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 4px;
-}
-.search-result-item .user-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  font-size: 12px;
-  color: #999;
-}
-.search-result-item .user-meta span::before {
-  content: '•';
-  margin-right: 4px;
-}
-.search-result-item .user-meta span:first-child::before {
-  display: none;
-}
-.right-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: #fafafa;
-}
-.selected-header {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid #dfe1e6;
-  background-color: #fff;
-}
-.selected-header .header-title {
-  font-weight: 500;
-  font-size: 14px;
-  color: #333;
-}
-.selected-header .header-count {
-  font-size: 13px;
-  color: #0052d9;
-  font-weight: 600;
-  margin-left: 8px;
-  flex: 1;
-}
-.selected-list-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px;
-}
-.selected-list-container::-webkit-scrollbar {
-  width: 6px;
-}
-.selected-list-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-.selected-list-container::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-.empty-selected {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  color: #999;
-}
-.empty-selected p {
-  margin-top: 16px;
-  font-size: 14px;
-}
-.selected-user-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.selected-user-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  background: #fff;
-  border-radius: 4px;
-  border: 1px solid #e5e7eb;
-  transition: all 0.2s;
-}
-.selected-user-item:hover {
-  border-color: #0052d9;
-  box-shadow: 0 2px 4px rgba(0, 82, 217, 0.1);
-}
-.selected-user-item .user-info {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.user-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background:  #667eea;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 16px;
-  flex-shrink: 0;
-}
-.dept-avatar {
-  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
-}
-.selected-dept-item {
-  border-color: #f5af19;
-}
-.selected-user-item .user-details {
-  flex: 1;
-  min-width: 0;
-}
-.selected-user-item .user-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 4px;
-}
-.selected-user-item .user-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  font-size: 11px;
-  color: #999;
-}
-.selected-user-item .user-meta span::before {
-  content: '•';
-  margin-right: 4px;
-}
-.selected-user-item .user-meta span:first-child::before {
-  display: none;
-}
+.cd-ps-container { display: flex; flex-direction: column; gap: 16px; min-height: 500px; }
+.cd-ps-tips { display: flex; align-items: center; gap: 8px; padding: 12px; background-color: #e8f4ff; border-radius: 4px; font-size: 13px; color: #0052d9; }
+.cd-ps-search { display: flex; gap: 12px; align-items: center; }
+.cd-ps-org-select { flex-shrink: 0; }
+.cd-ps-search-input { flex: 1; }
+.cd-ps-content { display: flex; gap: 0; height: 450px; border: 1px solid #dfe1e6; border-radius: 4px; overflow: hidden; }
+.cd-ps-left { width: 480px; flex-shrink: 0; border-right: 1px solid #dfe1e6; display: flex; flex-direction: column; background-color: #fafafa; }
+.cd-ps-left :deep(.t-tabs__nav-container) { padding: 0 8px; background-color: #fff; }
+.cd-ps-left :deep(.t-tabs__content) { flex: 1; overflow: hidden; }
+.cd-ps-tree { height: 100%; overflow-y: auto; padding: 8px; }
+.cd-ps-tree::-webkit-scrollbar { width: 6px; }
+.cd-ps-tree::-webkit-scrollbar-track { background: #f1f1f1; }
+.cd-ps-tree::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
+.cd-ps-node { display: flex; align-items: center; gap: 6px; font-size: 14px; width: 100%; }
+:deep(.t-tree__label) { flex: 1; }
+:deep(.t-checkbox__label) { width: 100%; }
+.cd-ps-node-user { font-size: 13px; color: #666; }
+.cd-ps-count { color: #999; font-size: 12px; }
+.cd-ps-load-btn { margin-left: auto; color: #0052d9; font-size: 12px; flex-shrink: 0; }
+.cd-ps-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: #999; }
+.cd-ps-empty p { margin-top: 16px; font-size: 14px; }
+.cd-ps-search-results { display: flex; flex-direction: column; height: 100%; }
+.cd-ps-search-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid #dfe1e6; font-weight: 500; }
+.cd-ps-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; gap: 12px; color: #999; }
+.cd-ps-result-list { flex: 1; overflow-y: auto; padding: 8px; }
+.cd-ps-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-radius: 4px; border: 1px solid #e5e7eb; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
+.cd-ps-result-item:hover { border-color: #0052d9; background: #f0f5ff; }
+.cd-ps-result-item.cd-ps-selected { border-color: #0052d9; background: #e8f4ff; }
+.cd-ps-avatar { width: 32px; height: 32px; border-radius: 50%; background: #667eea; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
+.cd-ps-result-item .cd-ps-avatar { width: 36px; height: 36px; }
+.cd-ps-avatar-dept { background: linear-gradient(135deg, #f5af19 0%, #f12711 100%); }
+.cd-ps-info { flex: 1; min-width: 0; }
+.cd-ps-name { font-size: 13px; font-weight: 500; color: #333; margin-bottom: 4px; }
+.cd-ps-result-item .cd-ps-name { font-size: 14px; }
+.cd-ps-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #999; }
+.cd-ps-result-item .cd-ps-meta { font-size: 12px; }
+.cd-ps-meta span::before { content: '•'; margin-right: 4px; }
+.cd-ps-meta span:first-child::before { display: none; }
+.cd-ps-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; background-color: #fafafa; }
+.cd-ps-right-header { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #dfe1e6; background-color: #fff; }
+.cd-ps-title { font-weight: 500; font-size: 14px; color: #333; }
+.cd-ps-num { font-size: 13px; color: #0052d9; font-weight: 600; margin-left: 8px; flex: 1; }
+.cd-ps-right-list { flex: 1; overflow-y: auto; padding: 8px; }
+.cd-ps-right-list::-webkit-scrollbar { width: 6px; }
+.cd-ps-right-list::-webkit-scrollbar-track { background: #f1f1f1; }
+.cd-ps-right-list::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
+.cd-ps-selected-list { display: flex; flex-direction: column; gap: 8px; }
+.cd-ps-selected-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: #fff; border-radius: 4px; border: 1px solid #e5e7eb; transition: all 0.2s; }
+.cd-ps-selected-item:hover { border-color: #0052d9; box-shadow: 0 2px 4px rgba(0, 82, 217, 0.1); }
+.cd-ps-dept-item { border-color: #f5af19; }
+.cd-ps-item-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
 </style>