@hzab/group-user-selector 0.0.9 → 0.0.11-alpha.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# @hzab/group-user-selector@0.1.0
+
+feat: 新增 iconCustomFunc 自定义返回图片函数
+feat: 新增 LableSlot 插槽
+feat: 新增 ItemRender 列表 item 自定义渲染
+feat: 新增 SelectItemRender 选中 item 自定义渲染
+feat: 新增 modal 计算选中人数模式
+
+# @hzab/group-user-selector@0.0.10
+
+feat: 搜索情况下默认不展示下级
+
 # @hzab/group-user-selector@0.0.9
 
 feat: 增加一键清除 API

package/README.md

@@ -1,90 +1,97 @@
-# @hzab/group-user-selector
-
-组件模板
-
-- node@16.16.0
-
-- 注意：首次克隆先执行 npm run prepare 命令
-
-# 组件
-
-## 示例
-
-```jsx
-import Demo from "@hzab/group-user-selector";
-
-<Demo />;
-```
-
-## API
-
-### InfoPanel Attributes
-
-| 参数                | 类型    | 必填 | 默认值   | 说明                                |
-| ------------------- | ------- | ---- | -------- | ----------------------------------- |
-| value               | Object  | 否   | []       | 选中的人员数据                      |
-| model               | Object  | 否   | -        | 列表的请求 model （getListApi）     |
-| modelGetType        | string  | 否   | getList  | 列表的请求类型                      |
-| searchModel         | Object  | 否   | -        | 搜索列表的请求 model （getListApi） |
-| queryKey            | string  | 否   | parentId | 列表的请求 model 的入参 key         |
-| searchQueryKey      | string  | 否   | search   | 搜索列表的请求 model 的入参 key     |
-| labelKey            | string  | 否   | label    | labelKey                            |
-| valueKey            | string  | 否   | value    | valueKey                            |
-| imgKey              | string  | 否   | img      | imgKey 头像                         |
-| isUserKey           | string  | 否   | isUser   | 区分部门和人员                      |
-| hasPagination       | boolean | 否   | true     | 列表是否分页                        |
-| hasSearch           | boolean | 否   | true     | 是否有搜索                          |
-| hasSearchPagination | boolean | 否   | true     | 搜索列表是否分页                    |
-| searchPlaceholder   | string  | 否   | "搜索成员"| 搜索框的提示词                      |
-
-# 组件开发流程
-
-- 在 config/webpack.config.js 中按需修改 library 配置的文件名
-- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
-- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
-- npm run dev
-
-## 文件目录
-
-- example 本地开发测试代码
-- src 组件源码
-
-## 命令
-
-- Mac 执行该命令，设置 pre-commit 为可执行文件
-
-  - npm run mac-chmod
-  - chmod +x .husky && chmod +x .husky/pre-commit
-
-- 生成文档：npm run docs
-- 本地运行：npm run dev
-
-## 发布
-
-- npm 源和云效源都需要发布
-
-- 命令：npm publish --access public
-- 发布目录：
-  - src
-
-### nrm
-
-- 安装
-  npm install -g nrm
-- 增加源
-  nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
-- 切换源
-  nrm use aliyun
-  nrm use npm
-- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
-  npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
-
-## 配置
-
-### 配置文件
-
-- 本地配置文件：config/config.js
-
-### webpack 配置文件
-
-- config/webpack.config.js
+# @hzab/group-user-selector
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## 示例
+
+```jsx
+import Demo from "@hzab/group-user-selector";
+
+<Demo />;
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数                | 类型     | 必填 | 默认值      | 说明                                |
+| ------------------- | -------- | ---- | ----------- | ----------------------------------- |
+| value               | Object   | 否   | []          | 选中的人员数据                      |
+| model               | Object   | 否   | -           | 列表的请求 model （getListApi）     |
+| modelGetType        | string   | 否   | getList     | 列表的请求类型                      |
+| searchModel         | Object   | 否   | -           | 搜索列表的请求 model （getListApi） |
+| queryKey            | string   | 否   | parentId    | 列表的请求 model 的入参 key         |
+| searchQueryKey      | string   | 否   | search      | 搜索列表的请求 model 的入参 key     |
+| labelKey            | string   | 否   | label       | labelKey                            |
+| valueKey            | string   | 否   | value       | valueKey                            |
+| phoneKey            | string   | 否   | phoneNumber | phoneKey 电话                       |
+| totalKey            | string   | 否   | total       | totalKey 选中总数人                 |
+| imgKey              | string   | 否   | img         | imgKey 头像                         |
+| isUserKey           | string   | 否   | isUser      | 区分部门和人员                      |
+| hasPagination       | boolean  | 否   | true        | 列表是否分页                        |
+| hasSearch           | boolean  | 否   | true        | 是否有搜索                          |
+| hasSearchPagination | boolean  | 否   | true        | 搜索列表是否分页                    |
+| searchPlaceholder   | string   | 否   | "搜索成员"  | 搜索框的提示词                      |
+| modal               | string   | 否   | default     | default:选中总数 other:选中人数     |
+| iconCustomFunc      | function | 否   | -           | 图片的回调函数，入参 item，返回地址 |
+| LableSlot           | function | 否   | -           | label 插槽，入参 item，返回 DOM     |
+| ItemRender          | function | 否   | -           | 整行 item 自定义渲染                |
+| SelectItemRender    | function | 否   | -           | 选中后 item 自定义渲染              |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+
+## 发布
+
+- npm 源和云效源都需要发布
+
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+### nrm
+
+- 安装
+  npm install -g nrm
+- 增加源
+  nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+- 切换源
+  nrm use aliyun
+  nrm use npm
+- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
+  npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -1,52 +1,57 @@
-{
-  "name": "@hzab/group-user-selector",
-  "version": "0.0.9",
-  "description": "",
-  "main": "src",
-  "scripts": {
-    "dev": "webpack serve -c ./config/webpack.config.js --env local",
-    "build": "webpack -c ./config/webpack.config.js --env production",
-    "publish-patch": "npm version patch && npm publish --access public",
-    "publish-minor": "npm version minor && npm publish --access public",
-    "publish-major": "npm version major && npm publish --access public",
-    "prepare": "husky install",
-    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
-    "docs": "typedoc"
-  },
-  "files": [
-    "src",
-    "CHANGELOG.md"
-  ],
-  "keywords": [],
-  "author": "CaiYansong",
-  "license": "ISC",
-  "devDependencies": {
-    "@hzab/permissions": "^1.0.0",
-    "@hzab/webpack-config": "^1.0.0",
-    "@types/react": "^17.0.62",
-    "@types/react-dom": "^17.0.20",
-    "antd": "^4.14.0",
-    "axios": "^1.4.0",
-    "eslint": "^8.30.0",
-    "less": "^4.1.3",
-    "mobx": "^6.7.0",
-    "mobx-react": "^7.6.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.14.1",
-    "typedoc": "^0.24.8",
-    "typescript": "^4.9.4"
-  },
-  "directories": {
-    "src": "src"
-  },
-  "lint-staged": {
-    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
-      "prettier --write"
-    ]
-  },
-  "dependencies": {
-    "@hzab/data-model": "^1.7.0",
-    "lodash": "^4.17.21"
-  }
-}
+{
+  "name": "@hzab/group-user-selector",
+  "version": "0.0.11-alpha.0",
+  "description": "",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "version:alpha": "npm version prerelease --preid=alpha",
+    "publish:alpha": "npm publish --tag alpha",
+    "version:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish --tag beta",
+    "version:patch": "npm version patch",
+    "version:minior": "npm version minor",
+    "version:major": "npm version major",
+    "publish:stable": "npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "src",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "^1.0.0",
+    "@hzab/webpack-config": "^1.0.0",
+    "@types/react": "^17.0.62",
+    "@types/react-dom": "^17.0.20",
+    "antd": "^4.14.0",
+    "axios": "^1.4.0",
+    "eslint": "^8.30.0",
+    "less": "^4.1.3",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.14.1",
+    "typedoc": "^0.24.8",
+    "typescript": "^4.9.4"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@hzab/data-model": "^1.7.0",
+    "lodash": "^4.17.21"
+  }
+}

package/src/components/ItemRenter/index.jsx

@@ -1,46 +1,73 @@
-import {  forwardRef } from "react";
-import { Checkbox } from "antd";
-
-import defaultAvatar from "../../assets/imgs/defaultAvatar.png";
-import department from "../../assets/imgs/department.png";
-
-import "./index.less";
-
-function ItemRenter(props, ref) {
-  const {
-    labelKey = "label",
-    valueKey = "value",
-    isUserKey = "isUser",
-    imgKey = "img",
-    isCheck = false,
-    item,
-    handleClickItem,
-    handleCheckItem
-  } = props;
-
-
-  return (
-    <>
-      <div className="group-selection-list-item" key={item[valueKey]}>
-        <div className="avatar" onClick={() => handleCheckItem(item)}>
-          <Checkbox checked={isCheck} />
-          <img src={item[imgKey] ? item[imgKey] : item[isUserKey] ? defaultAvatar : department} />
-          <div className="label">{item[labelKey]}</div>
-        </div>
-        {item[isUserKey] ? null : <div
-          className={`next  ${isCheck ? "noNext" : ""}`}
-          onClick={() => {
-            if (isCheck) {
-              return;
-            }
-            handleClickItem(item);
-          }}
-        >
-          下级
-        </div>}
-      </div>
-      </>
-  );
-}
-
-export default forwardRef(ItemRenter);
+import { forwardRef } from "react";
+import { Checkbox, Avatar } from "antd";
+
+import defaultAvatar from "../../assets/imgs/defaultAvatar.png";
+import department from "../../assets/imgs/department.png";
+
+import "./index.less";
+
+function ItemRenter(props, ref) {
+  const {
+    labelKey = "label",
+    valueKey = "value",
+    isUserKey = "isUser",
+    imgKey = "img",
+    phoneKey = "phoneNumber",
+    isCheck = false,
+    item,
+    handleClickItem,
+    handleCheckItem,
+    noNextLevel = false,
+    iconFunc,
+    LableSlot,
+    ItemRender,
+  } = props;
+
+  return (
+    <>
+      {ItemRender ? (
+        <ItemRender
+          key={item[valueKey]}
+          item={item}
+          handleCheckItem={() => handleCheckItem(item)}
+          handleClickItem={() => {
+            if (isCheck) {
+              return;
+            }
+            handleClickItem(item);
+          }}
+        ></ItemRender>
+      ) : (
+        <div className="group-selection-list-item" key={item[valueKey]}>
+          <div className="avatar" onClick={() => handleCheckItem(item)}>
+            <Checkbox className="checkbox-item-box" checked={isCheck} />
+            <Avatar className="avatar-item" size={32} src={iconFunc(item)} />
+            {LableSlot ? (
+              <LableSlot item={item}></LableSlot>
+            ) : (
+              <div className="label">
+                <div>{item[labelKey]}</div>
+                <div className="label-phone">{item[phoneKey]}</div>
+              </div>
+            )}
+          </div>
+          {item[isUserKey] || noNextLevel ? null : (
+            <div
+              className={`next  ${isCheck ? "noNext" : ""}`}
+              onClick={() => {
+                if (isCheck) {
+                  return;
+                }
+                handleClickItem(item);
+              }}
+            >
+              下级
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default forwardRef(ItemRenter);

package/src/components/ItemRenter/index.less

@@ -1,33 +1,57 @@
-.group-selection-list-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-
-  .avatar {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    img {
-      width: 32px;
-      height: auto;
-      margin: 0 12px;
-    }
-
-    .label {
-      font-size: 16px;
-      color: #141414;
-    }
-  }
-
-  .next {
-    color: rgb(64, 62, 245);
-    cursor: pointer;
-    flex-shrink: 0;
-  }
-
-  .noNext {
-    opacity: 0.5;
-  }
-}
+.group-selection-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 6px;
+  margin-bottom: 16px;
+  .avatar {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .label {
+      font-size: 16px;
+      color: #333333;
+      .label-phone {
+        font-size: 12px;
+        color: #999999;
+        line-height: 1;
+      }
+    }
+
+    .avatar-item {
+      margin: 0 6px;
+    }
+  }
+
+  .next {
+    color: var(--ant-primary-color, rgb(64, 62, 245));
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  .noNext {
+    opacity: 0.5;
+  }
+
+  .checkbox-item-box {
+    .ant-checkbox-inner {
+      border-radius: 4px;
+    }
+    .ant-checkbox-checked:after {
+      border-radius: 4px;
+    }
+    // 选中状态：深蓝色底色
+    .ant-checkbox-checked {
+      .ant-checkbox-inner {
+        background-color: var(--ant-primary-color, rgb(64, 62, 245));
+        border-color: var(--ant-primary-color, rgb(64, 62, 245));
+      }
+    }
+  }
+
+  &:hover {
+    background: #f7f7f7;
+    border-radius: 8px;
+  }
+}

package/src/components/SearchRenter/index.jsx

@@ -1,108 +1,119 @@
-import { useEffect, useState, forwardRef } from "react";
-import { Input, message, Pagination } from "antd";
-
-import "./index.less";
-
-function SearchRenter(props, ref) {
-  const {
-    searchModel,
-    searchQueryKey = "search",
-    searchPlaceholder = "搜索成员",
-    hasSearchPagination = true,
-    hasSearch = true,
-    ItemRenter,
-    setLoading = () => {},
-  } = props;
-
-  const [search, setSearch] = useState("");
-  const [searchList, setSearchList] = useState([]);
-  const [total, setTotal] = useState(0);
-  const [pageData, setPageData] = useState(
-    hasSearchPagination
-      ? {
-          pageSize: 10,
-          pageNum: 1,
-        }
-      : {},
-  );
-
-  const handleSearch = (data) => {
-    setLoading && setLoading(true);
-    searchModel &&
-      searchModel
-        .getList({ ...data })
-        .then((res) => {
-          setSearchList(res?.list || res || []);
-          setTotal(res?.pagination?.total || res?.total || 0);
-        })
-        .catch((err) => {
-          message.error(err._message || "未知错误");
-        })
-        .finally(() => {
-          setLoading && setLoading(false);
-        });
-  };
-
-  const handleChangePage = (pageNum, pageSize) => {
-    const pages = {
-      pageNum: pageSize !== pageData?.pageSize ? 1 : pageNum,
-      pageSize,
-    };
-    setPageData({
-      ...pages,
-    });
-    handleSearch({
-      [searchQueryKey]: search,
-      ...pages,
-    });
-  };
-
-  const onSearch = (value) => {
-    setSearch(value);
-    if (!value) {
-      setPageData({
-        pageSize: 10,
-        pageNum: 1,
-      });
-      return;
-    }
-    const data = {
-      pageSize: pageData?.pageSize || 10,
-      pageNum: 1,
-    };
-    setPageData(data);
-    handleSearch({
-      [searchQueryKey]: value,
-      ...data,
-    });
-  };
-
-  return (
-    <>
-      {hasSearch ? <Input.Search onSearch={onSearch} enterButton placeholder={searchPlaceholder} allowClear /> : null}
-      {search ? (
-        <div className="group-selection-search-view">
-          <div className="group-selection-search-list">
-            {searchList.map((item, index) => {
-              return ItemRenter(item);
-            })}
-          </div>
-
-          {hasSearchPagination ? (
-            <div className="group-selection-search-pagination">
-              <Pagination
-                current={pageData?.pageNum}
-                total={total}
-                pageSize={pageData?.pageSize}
-                onChange={handleChangePage}
-                size="small"
-              />
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-    </>
-  );
-}
-
-export default forwardRef(SearchRenter);
+import { useEffect, useState, forwardRef } from "react";
+import { Input, message, Pagination } from "antd";
+
+import SearchIcon from "../../assets/imgs/searchIcon.png";
+import "./index.less";
+
+function SearchRenter(props, ref) {
+  const {
+    searchModel,
+    searchQueryKey = "search",
+    searchPlaceholder = "搜索成员",
+    hasSearchPagination = true,
+    hasSearch = true,
+    ItemRenter,
+    setLoading = () => {},
+  } = props;
+
+  const [search, setSearch] = useState("");
+  const [searchList, setSearchList] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [pageData, setPageData] = useState(
+    hasSearchPagination
+      ? {
+          pageSize: 10,
+          pageNum: 1,
+        }
+      : {},
+  );
+
+  const handleSearch = (data) => {
+    setLoading && setLoading(true);
+    searchModel &&
+      searchModel
+        .getList({ ...data })
+        .then((res) => {
+          setSearchList(res?.list || res || []);
+          setTotal(res?.pagination?.total || res?.total || 0);
+        })
+        .catch((err) => {
+          message.error(err._message || "未知错误");
+        })
+        .finally(() => {
+          setLoading && setLoading(false);
+        });
+  };
+
+  const handleChangePage = (pageNum, pageSize) => {
+    const pages = {
+      pageNum: pageSize !== pageData?.pageSize ? 1 : pageNum,
+      pageSize,
+    };
+    setPageData({
+      ...pages,
+    });
+    handleSearch({
+      [searchQueryKey]: search,
+      ...pages,
+    });
+  };
+
+  const onSearch = (value) => {
+    setSearch(value);
+    if (!value) {
+      setPageData({
+        pageSize: 10,
+        pageNum: 1,
+      });
+      return;
+    }
+    const data = {
+      pageSize: pageData?.pageSize || 10,
+      pageNum: 1,
+    };
+    setPageData(data);
+    handleSearch({
+      [searchQueryKey]: value,
+      ...data,
+    });
+  };
+
+  return (
+    <>
+      {hasSearch ? (
+        <Input.Search
+          className="group-selection-search-input"
+          prefix={<img className="group-selection-search-icon" src={SearchIcon}></img>}
+          onSearch={onSearch}
+          enterButton
+          placeholder={searchPlaceholder}
+          allowClear
+        />
+      ) : null}
+
+      {search ? (
+        <div className="group-selection-search-view">
+          <div className="group-selection-search-list">
+            {searchList.map((item, index) => {
+              return ItemRenter(item, true);
+            })}
+          </div>
+
+          {hasSearchPagination ? (
+            <div className="group-selection-search-pagination">
+              <Pagination
+                current={pageData?.pageNum}
+                total={total}
+                pageSize={pageData?.pageSize}
+                onChange={handleChangePage}
+                size="small"
+              />
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export default forwardRef(SearchRenter);

package/src/components/SearchRenter/index.less

@@ -1,36 +1,51 @@
-.group-selection-search-view {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  position: absolute;
-  top: 56px;
-  left: 24px;
-  width: calc(100% - 48px);
-  height: calc(100% - 80px);
-  overflow-y: hidden;
-  z-index: 10;
-  background-color: #fff;
-
-  .group-selection-search-list {
-  box-sizing: border-box;
-  flex: 1;
-    overflow-y: auto;
-    padding: 24px ;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .group-selection-search-pagination {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #fff;
-  }
-}
+.group-selection-search-view {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: absolute;
+  top: 56px;
+  left: 14px;
+  width: calc(100% - 28px);
+  height: calc(100% - 60px);
+  overflow-y: hidden;
+  z-index: 10;
+  background-color: #fff;
+
+  .group-selection-search-list {
+    box-sizing: border-box;
+    flex: 1;
+    overflow-y: auto;
+    padding: 14px;
+    margin-bottom: 40px;
+
+    // &::-webkit-scrollbar {
+    //   display: none;
+    // }
+  }
+
+  .group-selection-search-pagination {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+  }
+}
+.group-selection-search-icon {
+  width: 16px;
+  height: auto;
+  margin-right: 6px;
+}
+.group-selection-search-input {
+  .ant-input-affix-wrapper {
+    border-radius: 8px !important;
+  }
+
+  .ant-input-group-addon {
+    display: none;
+  }
+}

package/src/index.less

@@ -26,7 +26,7 @@
     position: relative;
     height: 100%;
     overflow: hidden;
-    padding: 24px;
+    padding: 14px;
     border-right: 1px solid #e8e8e8;
 
     // .group-selection-search-view {
@@ -75,15 +75,33 @@
 
     .group-selection-list-check {
       margin: 12px 0;
+
+      .group-selection-all-checkbox-box {
+        margin-right: 6px;
+
+        .ant-checkbox-inner {
+          border-radius: 4px;
+        }
+        .ant-checkbox-checked:after {
+          border-radius: 4px;
+        }
+        // 选中状态：深蓝色底色
+        .ant-checkbox-checked {
+          .ant-checkbox-inner {
+            background-color: var(--ant-primary-color, rgb(64, 62, 245));
+            border-color: var(--ant-primary-color, rgb(64, 62, 245));
+          }
+        }
+      }
     }
 
     .group-selection-list-view {
       flex: 1;
       overflow: auto;
 
-      &::-webkit-scrollbar {
-        display: none;
-      }
+      // &::-webkit-scrollbar {
+      //   display: none;
+      // }
     }
 
     // .group-selection-list-item {
@@ -124,43 +142,81 @@
   .group-selection-detail {
     position: relative;
     height: 100%;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 14px;
+    overflow: hidden;
+
+    // &::-webkit-scrollbar {
+    //   display: none;
+    // }
 
-    &::-webkit-scrollbar {
-      display: none;
+    .group-selection-detail-empty {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .ant-empty-image {
+        margin-bottom: 24px;
+      }
+      .ant-empty-description {
+        font-size: 14px;
+        color: #777777;
+      }
     }
+
     .group-selection-detail-title {
-      text-align: end;
-      color: var(--ant-primary-color);
-      cursor: pointer;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .group-selection-detail-close {
+        color: var(--ant-primary-color, rgb(64, 62, 245));
+        cursor: pointer;
+      }
+
+      .group-selection-detail-total {
+        font-weight: bold;
+        font-size: 14px;
+        color: #333333;
+      }
     }
 
     .group-selection-detail-list {
+      flex: 1;
       display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      padding: 24px;
+      flex-direction: column;
+      padding: 14px 0 24px 0;
+      overflow: auto;
 
       .group-selection-detail-item {
         flex-shrink: 0;
         display: flex;
         align-items: center;
-        padding: 4px 8px;
-        margin: 0 12px 12px 0;
-        color: #e8e8e8;
+        justify-content: space-between;
+        padding: 8px 6px;
+        margin-bottom: 14px;
         border-radius: 8px;
-        background-color: aliceblue;
-
-        img {
-          width: 32px;
-          height: auto;
-          margin-right: 12px;
-        }
-
-        .label {
-          font-size: 16px;
-          color: #141414;
-          margin-right: 12px;
+        .avatar-text-box {
+          display: flex;
+          align-items: center;
+
+          .label {
+            font-size: 16px;
+            color: #333333;
+            margin-right: 12px;
+            .label-phone {
+              font-size: 12px;
+              color: #999999;
+              line-height: 1;
+            }
+          }
+
+          .avatar-item {
+            margin-right: 7px;
+          }
         }
       }
     }

package/src/index.tsx

@@ -1,12 +1,13 @@
-import { useEffect, useState, useImperativeHandle, forwardRef, useReducer, useRef } from "react";
-import { Input, Breadcrumb, Checkbox, message, Spin, Pagination, ConfigProvider } from "antd";
+import { useEffect, useState, useImperativeHandle, forwardRef, useReducer, useRef, useMemo } from "react";
+import { Input, Breadcrumb, Checkbox, message, Spin, Pagination, ConfigProvider, Empty, Avatar } from "antd";
 import zhCN from "antd/es/locale/zh_CN";
-import { CloseCircleFilled, SearchOutlined } from "@ant-design/icons";
+import { CloseOutlined } from "@ant-design/icons";
 import "moment/locale/zh-cn";
 import _ from "lodash";
 
 import defaultAvatar from "./assets/imgs/defaultAvatar.png";
 import department from "./assets/imgs/department.png";
+import EmptyIcon from "./assets/imgs/emptyIcon.png";
 import SearchRenter from "./components/SearchRenter";
 import ItemRenter from "./components/ItemRenter";
 
@@ -20,10 +21,27 @@ function GroupSelection(props, ref) {
     labelKey = "label",
     valueKey = "value",
     isUserKey = "isUser",
+    /** 手机号字段 */
+    phoneKey = "phoneNumber",
+    /** 选中总数人字段 */
+    totalKey = "total",
+    /** default：选中总数，other：根据 totalKey计算人数 */
+    modal = "default",
     imgKey = "img",
     hasPagination = true,
     modelGetType = "getList",
     allowClear = false,
+    unit = "人",
+    /** icon自定义 */
+    iconCustomFunc,
+    /** label插槽 */
+    LableSlot,
+    /** 列表item自定义渲染 */
+    ItemRender,
+    /** 选中item自定义渲染 */
+    SelectItemRender,
+    /** 选中文案自定义 */
+    SelectTitleRender,
   } = props;
   const [breadcrumb, setBreadcrumb] = useState([
     {
@@ -79,6 +97,12 @@ function GroupSelection(props, ref) {
         });
   };
 
+  const totalSum = useMemo(() => {
+    return selectedList?.reduce((pre, cur) => {
+      return pre + (cur?.[totalKey] || 0);
+    }, 0);
+  }, [selectedList]);
+
   useEffect(() => {
     getTreeData();
   }, []);
@@ -149,16 +173,29 @@ function GroupSelection(props, ref) {
     return is;
   };
 
-  const Renter = (item) => {
+  const iconFunc = (item) => {
+    // 优先执行自定义函数，拿到结果
+    const customResult = iconCustomFunc?.(item);
+    // 自定义有返回值直接用，否则走默认逻辑
+    if (customResult) return customResult;
+    // 默认图片逻辑
+    return item[imgKey] ? item[imgKey] : item[isUserKey] ? defaultAvatar : department;
+  };
+
+  const Renter = (item, noNextLevel) => {
     const isCheck = handleCheck(item);
     return (
       <ItemRenter
         {...props}
         item={item}
+        iconFunc={iconFunc}
         isCheck={isCheck}
         handleCheckItem={handleCheckItem}
         handleCheckDelete={handleCheckDelete}
         handleClickItem={handleClickItem}
+        noNextLevel={noNextLevel}
+        LableSlot={LableSlot}
+        ItemRender={ItemRender}
       />
     );
   };
@@ -187,11 +224,16 @@ function GroupSelection(props, ref) {
             })}
           </Breadcrumb>
           <div className="group-selection-list-check">
-            <Checkbox onChange={handleCheckAll} checked={checkAll && !!selectList.length} /> 全选
+            <Checkbox
+              className="group-selection-all-checkbox-box"
+              onChange={handleCheckAll}
+              checked={checkAll && !!selectList.length}
+            />
+            全选
           </div>
           <div className="group-selection-list-view">
             {selectList.map((item, index) => {
-              return Renter(item);
+              return Renter(item, false);
             })}
           </div>
           {hasPagination ? (
@@ -208,18 +250,58 @@ function GroupSelection(props, ref) {
         </div>
         <div className="group-selection-detail">
           {allowClear ? (
-            <div className="group-selection-detail-title" onClick={handleAllowClear}>
-              清空
+            <div className="group-selection-detail-title">
+              <div className="group-selection-detail-total">
+                {SelectTitleRender ? (
+                  <SelectTitleRender value={modal === "default" ? selectedList?.length : totalSum}></SelectTitleRender>
+                ) : (
+                  `  已选：${modal === "default" ? selectedList?.length : totalSum}
+                ${unit}`
+                )}
+              </div>
+              <div className="group-selection-detail-close" onClick={handleAllowClear}>
+                清空
+              </div>
             </div>
           ) : null}
+          {!selectedList?.length && (
+            <div className="group-selection-detail-empty">
+              <Empty
+                description={"请选择部门或人员"}
+                image={EmptyIcon}
+                imageStyle={{
+                  width: "250px",
+                  height: "99px",
+                }}
+              ></Empty>
+            </div>
+          )}
 
           <div className="group-selection-detail-list">
             {selectedList.map((item, index) => {
-              return (
+              return SelectItemRender ? (
+                <SelectItemRender
+                  key={item[valueKey]}
+                  item={item}
+                  handleCheckDelete={() => handleCheckDelete(item)}
+                ></SelectItemRender>
+              ) : (
                 <div className="group-selection-detail-item" key={item[valueKey]}>
-                  <img src={item[imgKey] ? item[imgKey] : item[isUserKey] ? defaultAvatar : department} />
-                  <div className="label">{item[labelKey]}</div>
-                  <CloseCircleFilled style={{ cursor: "pointer" }} onClick={() => handleCheckDelete(item)} />
+                  <div className="avatar-text-box">
+                    <Avatar className="avatar-item" size={32} src={iconFunc(item)} />
+                    {LableSlot ? (
+                      <LableSlot item={item}></LableSlot>
+                    ) : (
+                      <div className="label">
+                        <div>{item[labelKey]}</div>
+                        <div className="label-phone">{item[phoneKey]}</div>
+                      </div>
+                    )}
+                  </div>
+                  <CloseOutlined
+                    style={{ cursor: "pointer", color: "#6a6a6a" }}
+                    onClick={() => handleCheckDelete(item)}
+                  />
                 </div>
               );
             })}