@aloudata/aloudata-design 2.8.7 → 2.9.1

package/dist/App/index.js

@@ -6,6 +6,7 @@ import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/c
 import { App, ConfigProvider } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
+import { ToastContainer } from 'react-toastify';
 var AldApp = function AldApp(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -15,7 +16,12 @@ var AldApp = function AldApp(_ref) {
     transformers: [legacyLogicalPropertiesTransformer]
   }, /*#__PURE__*/React.createElement(App, _extends({
     className: classNames('ald-app', className)
-  }, restProps), /*#__PURE__*/React.createElement(ConfigProvider, {
+  }, restProps), /*#__PURE__*/React.createElement(ToastContainer, {
+    containerId: 'message-container',
+    limit: 1
+  }), /*#__PURE__*/React.createElement(ToastContainer, {
+    containerId: 'notification-container'
+  }), /*#__PURE__*/React.createElement(ConfigProvider, {
     theme: {
       token: {
         fontSize: 13

package/dist/Badge/index.js

@@ -1,7 +1,11 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["count", "status", "size", "className", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
 import React from 'react';
 export default function Badge(props) {
@@ -11,7 +15,8 @@ export default function Badge(props) {
     status = _props$status === void 0 ? 'default' : _props$status,
     size = props.size,
     className = props.className,
-    onClick = props.onClick;
+    onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
   var status2ColorMap = {
     success: {
       color: '#15803D',
@@ -34,12 +39,12 @@ export default function Badge(props) {
       backgroundColor: '#FEF08A'
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: classNames('ald-badge', (_classNames = {}, _defineProperty(_classNames, 'ald-badge-large', size === 'large'), _defineProperty(_classNames, 'ald-badge-clickable', typeof onClick === 'function'), _classNames), className),
     style: {
       color: status2ColorMap[status].color,
       backgroundColor: status2ColorMap[status].backgroundColor
     },
     onClick: onClick
-  }, count);
+  }), count);
 }

package/dist/Icon/components/DangerFill.d.ts

@@ -0,0 +1,11 @@
+import type { SVGProps } from 'react';
+import * as React from 'react';
+interface SVGRProps {
+    size?: number | string;
+    title?: string;
+    titleId?: string;
+    desc?: string;
+    descId?: string;
+}
+declare const Memo: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>>;
+export default Memo;

package/dist/Icon/components/DangerFill.js

@@ -0,0 +1,35 @@
+var _excluded = ["title", "titleId", "desc", "descId"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import { forwardRef, memo } from 'react';
+var DangerFill = function DangerFill(_ref, ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    desc = _ref.desc,
+    descId = _ref.descId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.width || props.size || 16,
+    height: props.height || props.size || 16,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ref: ref,
+    "aria-labelledby": titleId,
+    "aria-describedby": descId
+  }, props), desc ? /*#__PURE__*/React.createElement("desc", {
+    id: descId
+  }, desc) : null, title ? /*#__PURE__*/React.createElement("title", {
+    id: titleId
+  }, title) : null, /*#__PURE__*/React.createElement("path", {
+    fill: props.color || 'currentColor',
+    fillRule: "evenodd",
+    d: "M8.03 2.75a.75.75 0 0 0-.53.22l-4.53 5a.75.75 0 0 0-.22.53v7c0 .199.079.39.22.53l4.53 5c.14.141.331.22.53.22h7.94a.75.75 0 0 0 .53-.22l4.53-5a.75.75 0 0 0 .22-.53v-7a.75.75 0 0 0-.22-.53l-4.53-5a.75.75 0 0 0-.53-.22H8.03Zm3.97 10a.75.75 0 0 1-.75-.75V8a.75.75 0 0 1 1.5 0v4a.75.75 0 0 1-.75.75Zm-.995 3.248c0-.548.445-.993.993-.993h.014c.548 0 .993.445.993.993v.014a.993.993 0 0 1-.993.993h-.014a.993.993 0 0 1-.993-.993v-.014Z",
+    clipRule: "evenodd"
+  }));
+};
+var ForwardRef = /*#__PURE__*/forwardRef(DangerFill);
+var Memo = /*#__PURE__*/memo(ForwardRef);
+export default Memo;

package/dist/Icon/index.d.ts

@@ -21,6 +21,7 @@ export { default as CloseCircleLightLine } from './components/CloseCircleLightLi
 export { default as CloseLLine } from './components/CloseLLine';
 export { default as CloseLightLine } from './components/CloseLightLine';
 export { default as CloseMLine } from './components/CloseMLine';
+export { default as DangerFill } from './components/DangerFill';
 export { default as DragLine } from './components/DragLine';
 export { default as Ellipsis } from './components/Ellipsis';
 export { default as EyeOffLine } from './components/EyeOffLine';

package/dist/Icon/index.js

@@ -21,6 +21,7 @@ export { default as CloseCircleLightLine } from "./components/CloseCircleLightLi
 export { default as CloseLLine } from "./components/CloseLLine";
 export { default as CloseLightLine } from "./components/CloseLightLine";
 export { default as CloseMLine } from "./components/CloseMLine";
+export { default as DangerFill } from "./components/DangerFill";
 export { default as DragLine } from "./components/DragLine";
 export { default as Ellipsis } from "./components/Ellipsis";
 export { default as EyeOffLine } from "./components/EyeOffLine";

package/dist/Icon/svg/danger-fill.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M8.03033 2.75C7.83142 2.75 7.64065 2.82902 7.5 2.96967L2.96967 7.96967C2.82902 8.11032 2.75 8.30109 2.75 8.5V15.5C2.75 15.6989 2.82902 15.8897 2.96967 16.0303L7.5 21.0303C7.64065 21.171 7.83142 21.25 8.03033 21.25H15.9697C16.1686 21.25 16.3593 21.171 16.5 21.0303L21.0303 16.0303C21.171 15.8897 21.25 15.6989 21.25 15.5V8.5C21.25 8.30109 21.171 8.11032 21.0303 7.96967L16.5 2.96967C16.3593 2.82902 16.1686 2.75 15.9697 2.75H8.03033ZM12 12.75C11.5858 12.75 11.25 12.4142 11.25 12V8C11.25 7.58579 11.5858 7.25 12 7.25C12.4142 7.25 12.75 7.58579 12.75 8V12C12.75 12.4142 12.4142 12.75 12 12.75ZM11.005 15.9984C11.005 15.4498 11.4498 15.005 11.9984 15.005H12.0116C12.5603 15.005 13.005 15.4498 13.005 15.9984V16.0116C13.005 16.5603 12.5603 17.005 12.0116 17.005H11.9984C11.4498 17.005 11.005 16.5603 11.005 16.0116V15.9984Z"
+    fill="black" />
+</svg>

package/dist/MemberPicker/components/MemberSelection.js

@@ -14,6 +14,7 @@ import ScrollArea from "../../ScrollArea";
 import Spin from "../../Spin";
 import { isUser } from "../utils/getUsersWithUserId";
 import MultipleOption from "./MultipleOption";
+import { userDisplayNameIsRepeated } from "./Panel";
 import SingleOption from "./SingleOption";
 export default function MemberSelection(props) {
   var className = props.className,
@@ -83,6 +84,7 @@ export default function MemberSelection(props) {
       user: user,
       disabled: disabled,
       selected: isSelected,
+      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }
@@ -90,6 +92,7 @@ export default function MemberSelection(props) {
       key: user.userId,
       user: user,
       selected: isSelected,
+      showUserId: userDisplayNameIsRepeated(userList, user.nickname),
       onChange: function onChange(selected, user) {
         if (isUser(user)) _onChange(selected, user);
       }

package/dist/MemberPicker/components/MultipleOption.d.ts

@@ -9,6 +9,7 @@ interface IMultipleOptionProps {
     className?: string;
     onNextLevel?: (userGroup: IUserGroup) => void;
     hasNextLevel?: boolean;
+    showUserId?: boolean;
 }
 export default function MultipleList(params: IMultipleOptionProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/MultipleOption.js

@@ -5,6 +5,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import classnames from 'classnames';
 import React from 'react';
 import Checkbox from "../../Checkbox";
+import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { getAccount, getId, getPhoto } from "../utils";
 import { isUserGroup } from "../utils/getUsersWithUserId";
@@ -17,7 +18,9 @@ export default function MultipleList(params) {
     className = params.className,
     onNextLevel = params.onNextLevel,
     _params$hasNextLevel = params.hasNextLevel,
-    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel;
+    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel,
+    _params$showUserId = params.showUserId,
+    showUserId = _params$showUserId === void 0 ? false : _params$showUserId;
   var onClick = function onClick() {
     if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected, user);
@@ -31,13 +34,17 @@ export default function MultipleList(params) {
     className: 'ald-member-picker-checkbox',
     checked: selected,
     disabled: disabled
-  }), /*#__PURE__*/React.createElement(NickLabel, {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-content'
+  }, /*#__PURE__*/React.createElement(NickLabel, {
     type: user.type,
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
     account: getAccount(user)
-  })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
+  }), showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-id'
+  }, user.userId))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
     disabled: disabled,

package/dist/MemberPicker/components/Panel.d.ts

@@ -14,5 +14,6 @@ interface IPanelProps {
     className?: string;
     lockedIds: Array<TUserValue | TUserGroupValue>;
 }
+export declare const userDisplayNameIsRepeated: (userList: TUser, displayName?: string) => boolean;
 export default function Panel(props: IPanelProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/Panel.js

@@ -13,6 +13,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import classNames from 'classnames';
+import { EUserType } from "../../ConfigProvider/getUserList";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Tabs from "../../Tabs";
 import { EMemberPicker } from "../interface";
@@ -22,6 +23,11 @@ import MemberSelection from "./MemberSelection";
 import SelectedMemberTags from "./SelectedMemberTags";
 import SelectorFooter from "./SelectorFooter";
 import UserGroupSelection from "./UserGroupSelection";
+export var userDisplayNameIsRepeated = function userDisplayNameIsRepeated(userList, displayName) {
+  return userList.filter(function (user) {
+    return user.type === EUserType.USER && user.nickname === displayName;
+  }).length > 1;
+};
 export default function Panel(props) {
   var _classNames;
   var type = props.type,
@@ -140,7 +146,8 @@ export default function Panel(props) {
     selectedUsers: selectedUsers,
     width: (panelWidth - 3) / 2,
     onRemove: onRemove,
-    lockedIds: lockedIds
+    lockedIds: lockedIds,
+    userList: dataList
   }), /*#__PURE__*/React.createElement(SelectorFooter, {
     className: 'ald-member-picker-selector-footer',
     onCancel: props.onCancel,

package/dist/MemberPicker/components/PanelWrapper.d.ts

@@ -10,6 +10,7 @@ interface IProps {
     className?: string;
     onCancel?: () => void;
     lockedIds?: Array<TUserValue | TUserGroupValue>;
+    showUserId?: boolean;
 }
 export declare const PanelWrapper: ({ type, value, multiple, dropdownWidth, onChange, onCancel, className, lockedIds, }: IProps) => React.JSX.Element;
 export default PanelWrapper;

package/dist/MemberPicker/components/PanelWrapper.js

@@ -72,6 +72,7 @@ export var PanelWrapper = function PanelWrapper(_ref) {
       cacheTime: 1000 * 60 * 2,
       // 2分钟内不重复请求
       onSuccess: function onSuccess(result) {
+        console.log('%c [ result ]-73', 'font-size:13px; background:#c324a4; color:#ff68e8;', 1433223, result);
         setSearchUserList(result);
       },
       onError: function onError(error) {

package/dist/MemberPicker/components/SelectedMemberTags.d.ts

@@ -7,6 +7,7 @@ interface ISelectedMemberTagsProps {
     onRemove?: (user: IUser | IUserGroup) => void;
     width: number;
     lockedIds: Array<TUserValue | TUserGroupValue>;
+    userList: TUser;
 }
 export default function SelectedMemberTags(props: ISelectedMemberTagsProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/SelectedMemberTags.js

@@ -5,12 +5,14 @@ import { CloseMLine } from "../../Icon";
 import ScrollArea from "../../ScrollArea";
 import { getAccount, getId, getPhoto } from "../utils";
 import NickLabel from "./NickLabel";
+import { userDisplayNameIsRepeated } from "./Panel";
 export default function SelectedMemberTags(props) {
   var className = props.className,
     selectedUsers = props.selectedUsers,
     width = props.width,
     _props$lockedIds = props.lockedIds,
-    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds;
+    lockedIds = _props$lockedIds === void 0 ? [] : _props$lockedIds,
+    userList = props.userList;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(className, 'ald-member-picker-selected-member-tags-wrap')
   }, /*#__PURE__*/React.createElement("div", {
@@ -27,6 +29,7 @@ export default function SelectedMemberTags(props) {
     }
   }, selectedUsers.map(function (user) {
     var hasLocked = false;
+    var isDisplayNameRepeat = false;
     if (user && user.hasOwnProperty('groupId')) {
       var index = _.findIndex(lockedIds, {
         groupId: user.groupId,
@@ -38,6 +41,7 @@ export default function SelectedMemberTags(props) {
         userId: user.userId,
         type: user.type
       });
+      isDisplayNameRepeat = userDisplayNameIsRepeated(userList, user.nickname);
       hasLocked = _index !== -1;
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -51,7 +55,9 @@ export default function SelectedMemberTags(props) {
       name: user.name,
       photo: getPhoto(user),
       account: getAccount(user)
-    })), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
+    }), isDisplayNameRepeat && user.type === 'USER' && /*#__PURE__*/React.createElement("div", {
+      className: "ald-member-picker-option-id"
+    }, user.userId)), !hasLocked && /*#__PURE__*/React.createElement(CloseMLine, {
       size: 20,
       className: 'ald-member-picker-close',
       color: "#98A2B3",

package/dist/MemberPicker/components/SingleOption.d.ts

@@ -9,6 +9,7 @@ interface IMultipleOptionProps {
     className?: string;
     onNextLevel?: (userGroup: IUserGroup) => void;
     hasNextLevel?: boolean;
+    showUserId?: boolean;
 }
 export default function SingleOption(params: IMultipleOptionProps): React.JSX.Element;
 export {};

package/dist/MemberPicker/components/SingleOption.js

@@ -4,6 +4,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import classnames from 'classnames';
 import React from 'react';
+import { EUserType } from "../../ConfigProvider/getUserList";
 import TextLink from "../../TextLink/index";
 import { getAccount, getId, getPhoto } from "../utils";
 import { isUserGroup } from "../utils/getUsersWithUserId";
@@ -16,7 +17,8 @@ export default function SingleOption(params) {
     className = params.className,
     onNextLevel = params.onNextLevel,
     _params$hasNextLevel = params.hasNextLevel,
-    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel;
+    hasNextLevel = _params$hasNextLevel === void 0 ? true : _params$hasNextLevel,
+    showUserId = params.showUserId;
   var onClick = function onClick() {
     if (disabled) return;
     onChange === null || onChange === void 0 ? void 0 : onChange(!selected, user);
@@ -26,13 +28,17 @@ export default function SingleOption(params) {
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: 'ald-member-picker-label'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-content'
   }, /*#__PURE__*/React.createElement(NickLabel, {
     type: user.type,
     id: getId(user),
     name: user.name,
     photo: getPhoto(user),
     account: getAccount(user)
-  })), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
+  }), showUserId && user.type === EUserType.USER && /*#__PURE__*/React.createElement("div", {
+    className: 'ald-member-picker-option-id'
+  }, user.userId))), isUserGroup(user) && hasNextLevel && /*#__PURE__*/React.createElement(TextLink, {
     className: "ald-member-picker-btn",
     size: "small",
     disabled: disabled,

package/dist/MemberPicker/interface.d.ts

@@ -3,7 +3,7 @@ import { ISelectProps } from '../Select';
 import { RequiredProperties } from '../_utils/type';
 export type TUserValue = RequiredProperties<IUser, 'type' | 'userId'>;
 export type TUserGroupValue = RequiredProperties<IUserGroup, 'type' | 'groupId'>;
-export type TMemberPickerValue = TUserValue | TUserGroupValue | Array<TUserValue | TUserGroupValue>;
+export type TMemberPickerValue = TUserGroupValue | Array<TUserValue | TUserGroupValue>;
 export declare enum EMemberPicker {
     GROUP = "GROUP",
     USER = "USER",

package/dist/MemberPicker/style/index.less

@@ -101,6 +101,7 @@
     gap: 8px;
 
     .ald-member-picker-selected-member-tag {
+      max-width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -115,6 +116,7 @@
       line-height: 20px; /* 142.857% */
 
       .ald-member-picker-close {
+        flex: 0 0 20px;
         border-left: 1px solid
           var(--alias-colors-border-accent-gray-subtler-default, #e5e7eb);
         cursor: pointer;
@@ -148,9 +150,22 @@
   justify-content: space-between;
 
   .ald-member-picker-label {
+    width: 100%;
     flex: 1;
     display: flex;
     gap: 4px;
+
+    .ald-member-picker-option-content {
+      min-width: 0;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .ald-member-picker-nick-label {
+        flex-grow: 1;
+      }
+    }
   }
 
   &:hover {
@@ -170,6 +185,7 @@
   }
 
   .ald-member-picker-checkbox {
+    flex: 0 0 20px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -188,6 +204,16 @@
   }
 }
 
+.ald-member-picker-option-id {
+  max-width: 50%;
+  white-space: nowrap; /* 防止内容换行，保持内容长度 */
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: var(--alias-colors-text-subtle, #4b5563);
+  font-size: 12px;
+  line-height: 16px; /* 133.333% */
+}
+
 .ald-member-picker-trigger {
   display: flex;
   align-items: center;
@@ -237,6 +263,8 @@
   padding: 2px 6px;
   display: flex;
   align-items: center;
+  gap: 6px;
+  min-width: 0;
 }
 
 .ald-member-picker-nick-label {