@chlp-tech/rpa-ui 0.0.10 → 0.0.11-beta.1

package/dist/account-select/index.d.ts

@@ -1,39 +1,9 @@
-import React, { FC } from "react";
-interface AccountSelectListProps {
-    accounts: {
-        key: string;
-        icon: string | React.ReactNode;
-        disabledIcon: string | React.ReactNode;
-        list: AccountSelectProps['list'];
-        placeholder: string;
-        isValid: 'img' | 'video' | 'insVideo' | undefined;
-        multiple?: boolean;
-        disabled?: boolean;
-    }[];
-    onChange?: (selected: {
-        [key: string]: string[];
-    }) => void;
-    value?: {
-        [key: string]: string[];
-    };
+import React from "react";
+import { IAccountListProps, IAccountSelectProps } from "./type";
+declare namespace AccountSelectComponent {
+    interface StaticComponents {
+        Group: React.FC<IAccountListProps>;
+    }
 }
-interface AccountSelectProps {
-    keys: string;
-    placeholder: string;
-    icon: string | React.ReactNode;
-    disabledIcon: string | React.ReactNode;
-    list: {
-        label: string;
-        desc: string;
-        isValid: boolean;
-        value: string;
-        isPersonTk: boolean;
-    }[];
-    isValid: 'img' | 'video' | 'insImg' | 'insVideo' | undefined;
-    multiple: boolean;
-    disabled?: boolean;
-    onSelectionChange: (keys: string[], accountKey: string) => void;
-    selectedValues?: string[];
-}
-declare const AccountSelectList: FC<AccountSelectListProps>;
-export default AccountSelectList;
+declare const AccountSelect: React.FC<IAccountSelectProps> & AccountSelectComponent.StaticComponents;
+export default AccountSelect;

package/dist/account-select/index.js

@@ -1,4 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -14,208 +15,224 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useState, useMemo, useEffect } from "react";
-import { Dropdown, Row, Col, Popover, message } from "antd";
-import styles from "./index.module.less";
+import React, { useEffect } from "react";
 import DownIcon from "./imgs/down.svg";
 import UpIcon from "./imgs/up.svg";
+import { Col, Empty, Input, Popover, Row, Tooltip } from "antd";
+import { TextEllipsis } from "../index";
+import { SearchOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+
 var AccountSelect = function AccountSelect(props) {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  var _useState3 = useState(props.selectedValues || []),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedKeys = _useState4[0],
-    setSelectedKeys = _useState4[1];
-  useEffect(function () {
-    setSelectedKeys(props.selectedValues || []);
-  }, [props.selectedValues]);
-  var handleOpenChange = function handleOpenChange(nextOpen, info) {
-    if (!props.disabled && (info.source === 'trigger' || nextOpen)) {
-      setOpen(nextOpen);
-    }
+  var _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请选择账号' : _props$placeholder,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var _React$useState3 = React.useState(props.options || []),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    optionList = _React$useState4[0],
+    setOptionList = _React$useState4[1];
+  var _React$useState5 = React.useState(props.defaultSelectList || []),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    selectedKeys = _React$useState6[0],
+    setSelectedKeys = _React$useState6[1];
+  var handleClearAll = function handleClearAll() {
+    var _props$onChange;
+    setSelectedKeys([]);
+    setOpen(false);
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, []);
   };
-  var handleChange = function handleChange(value) {
-    var _props$list;
-    if ((_props$list = props.list) !== null && _props$list !== void 0 && (_props$list = _props$list.find(function (item) {
-      return item.value === value.key;
-    })) !== null && _props$list !== void 0 && _props$list.isPersonTk) {
-      message.error('旧版TK账号无法发布，请前往社媒管理重新绑定账号');
-      return;
+  var renderSelectInfo = function renderSelectInfo() {
+    var _props$options;
+    if (selectedKeys.length <= 0) {
+      return null;
     }
-    if (!props.disabled) {
-      setSelectedKeys(function (prevState) {
-        var newSelectedKeys;
-        if (prevState.includes(value.key)) {
-          newSelectedKeys = prevState.filter(function (item) {
-            return item !== value.key;
-          });
-        } else {
-          newSelectedKeys = props.multiple ? [].concat(_toConsumableArray(prevState), [value.key]) : [value.key];
-        }
-        props.onSelectionChange(newSelectedKeys, props.keys);
-        return newSelectedKeys;
-      });
+    if (props.multiple) {
+      return /*#__PURE__*/React.createElement("div", null, "\u5DF2\u9009\u62E9$", selectedKeys.length, "\u4E2A");
     }
+    var info = (_props$options = props.options) === null || _props$options === void 0 || (_props$options = _props$options.filter(function (item) {
+      return item.id === selectedKeys[0];
+    })) === null || _props$options === void 0 ? void 0 : _props$options[0];
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.selectInfoBox
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.accountName
+    }, /*#__PURE__*/React.createElement(TextEllipsis, {
+      lines: 1,
+      showTooltip: false
+    }, info === null || info === void 0 ? void 0 : info.accountName)), /*#__PURE__*/React.createElement("div", {
+      className: styles.languageText
+    }, /*#__PURE__*/React.createElement(TextEllipsis, {
+      lines: 1,
+      showTooltip: false
+    }, (info === null || info === void 0 ? void 0 : info.remark) || '--')));
   };
-  var handleClearAll = function handleClearAll() {
-    setSelectedKeys([]);
-    setOpen(false);
-    props.onSelectionChange([], props.keys);
+  var renderAccountView = function renderAccountView() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.box
+    }, props.disabled && typeof props.disabledIcon === "string" || !props.disabled && typeof props.icon === 'string' ? /*#__PURE__*/React.createElement("img", {
+      width: 48,
+      height: 48,
+      alt: "",
+      src: props.disabled ? props.disabledIcon : props.icon
+    }) : /*#__PURE__*/React.createElement("div", null, props.disabled ? props.disabledIcon : props.icon), /*#__PURE__*/React.createElement("div", {
+      className: styles.centerContentBox
+    }, selectedKeys.length <= 0 && /*#__PURE__*/React.createElement("div", {
+      className: styles.placeHolderText
+    }, placeholder), selectedKeys.length > 0 && (props.renderSelectStatus ? props.renderSelectStatus(selectedKeys) : renderSelectInfo())), /*#__PURE__*/React.createElement("img", {
+      src: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length) > 0 ? UpIcon : DownIcon,
+      alt: "",
+      onClick: function onClick() {
+        if ((selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length) > 0) {
+          handleClearAll === null || handleClearAll === void 0 || handleClearAll();
+        }
+      }
+    }));
+  };
+  var onClickItem = function onClickItem(item) {
+    // const newList = [];
+    if (multiple) {
+      var _props$onChange2;
+      var newList = _toConsumableArray(selectedKeys);
+      if (newList.includes(item.id)) {
+        newList.unshift(item.id);
+      } else {
+        newList.push(item.id);
+      }
+      setSelectedKeys(newList);
+      (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, newList);
+    } else {
+      var _props$onChange3;
+      var _newList = [item.id];
+      setSelectedKeys(_newList);
+      (_props$onChange3 = props.onChange) === null || _props$onChange3 === void 0 || _props$onChange3.call(props, _newList);
+      setOpen(false);
+    }
   };
-  var list = props.list;
-  var isValid = useMemo(function () {
-    return list.every(function (item) {
-      return item.isValid;
+  var onSearchChange = function onSearchChange(e) {
+    var _props$options2;
+    console.log(e.target.value);
+    var searchValue = (e.target.value || '').toString().toLowerCase();
+    var list = (_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.filter(function (item) {
+      var accountName = (item.accountName || '').toString().toLowerCase();
+      var ownerName = (item.ownerName || '').toString().toLowerCase();
+      return accountName.includes(searchValue) || ownerName.includes(searchValue);
     });
-  }, [list]);
-  var content = useMemo(function () {
-    switch (props.isValid) {
-      case 'img':
-        return ['大小不超过8M', '尺寸需大于4:5，小于1.91:1'];
-      case 'insImg':
-        return ['Instagram 视频宽不能超过 1920像素'];
-      case 'insVideo':
-        return ['视频宽高需小于1080*1920'];
-      case 'video':
-        return ['视频宽和高需大于360px，小于4096px', '视频帧率需要大于23fps，小于60fps'];
-      default:
-        return [];
+    setOptionList(list || []);
+  };
+  var getLanguageAndCountryList = function getLanguageAndCountryList(item) {
+    var list = [];
+    if (item.country) {
+      list.push(item.country);
+    }
+    if (item.language) {
+      list.push(item.language);
     }
-  }, [props.isValid]);
+    return list;
+  };
   return /*#__PURE__*/React.createElement(Popover, {
-    content: /*#__PURE__*/React.createElement("div", {
-      className: styles['popover_title']
-    }, content.map(function (item, index) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: index,
-        className: styles['popover_item']
-      }, item);
-    })),
-    open: !!content.length
-  }, /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ['click'],
-    onOpenChange: handleOpenChange,
-    open: open,
-    disabled: props.disabled,
-    overlayStyle: {
-      width: 296,
-      boxShadow: "0px 9px 28px 8px rgba(0,0,0,0.05), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 3px 6px -4px rgba(0,0,0,0.12)",
-      borderRadius: 8
+    classNames: {
+      root: styles.popBox
+    },
+    onOpenChange: function onOpenChange(open) {
+      return setOpen(open);
     },
-    menu: {
-      selectedKeys: selectedKeys,
-      onClick: handleChange,
-      items: props.isValid ? [] : list.map(function (item) {
-        return {
-          key: item.value,
+    arrow: false,
+    placement: "bottomLeft",
+    open: open,
+    content: function content() {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
+        style: {
+          height: '36px',
+          color: '#142A51'
+        },
+        prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
           style: {
-            background: !item.isValid ? '#FEECEC' : selectedKeys.includes(item.value) ? '#E9F1FF' : '#FFFFFF'
-          },
-          label: /*#__PURE__*/React.createElement("div", {
-            style: {
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center'
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: styles['wrap_title'],
-            style: {
-              maxWidth: 110,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap'
-            }
-          }, item.label), item !== null && item !== void 0 && item.isPersonTk ? /*#__PURE__*/React.createElement("div", {
-            style: {
-              padding: '2px 8px',
-              background: 'rgba(254, 236, 236, 1)',
-              color: '#FA4441',
-              border: '1px solid rgba(250, 68, 65, 1)',
-              borderRadius: 4,
-              whiteSpace: 'nowrap'
-            }
-          }, "\u65E7\u7248\u8D26\u53F7") : null, /*#__PURE__*/React.createElement("div", {
-            className: styles['wrap_right_desc'],
-            style: {
-              width: 77,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap'
-            }
-          }, item.desc)),
-          disabled: !item.isValid
-        };
-      })
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles['wrap'], " ").concat(props.disabled ? styles['wrap_disabled'] : ''),
-    style: {
-      border: !isValid ? '2px solid #FA4441' : selectedKeys.length > 0 ? '2px solid #004FD3' : '1px solid #D4DBE7'
+            color: '#9EA7B5'
+          }
+        }),
+        placeholder: "\u641C\u7D22\u6210\u5458\u6216\u8D26\u53F7\u540D",
+        onChange: onSearchChange
+      }), /*#__PURE__*/React.createElement("div", {
+        className: styles.scrollBox
+      }, optionList.map(function (item) {
+        var _item$ownerName, _item$ownerName2, _item$ownerName3;
+        var languageAndCountryList = getLanguageAndCountryList(item);
+        return /*#__PURE__*/React.createElement("div", {
+          key: item.id,
+          className: classNames(styles.rowBox, _defineProperty(_defineProperty(_defineProperty({}, styles.rowBoxClick, true), styles.rowBoxSelect, selectedKeys.includes(item.id)), styles.rowBoxDisable, item.disabled)),
+          onClick: function onClick() {
+            return onClickItem(item);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: styles.name
+        }, /*#__PURE__*/React.createElement(TextEllipsis, {
+          lines: 1,
+          showTooltip: false
+        }, item.accountName || '--')), /*#__PURE__*/React.createElement("div", {
+          className: styles.remark
+        }, /*#__PURE__*/React.createElement(TextEllipsis, {
+          lines: 1,
+          showTooltip: false
+        }, item.remark || '无描述')), /*#__PURE__*/React.createElement("div", {
+          className: styles.countryAndLanguage
+        }, /*#__PURE__*/React.createElement(TextEllipsis, {
+          lines: 1,
+          showTooltip: false
+        }, languageAndCountryList.join('/'))), /*#__PURE__*/React.createElement("div", {
+          className: styles.userWrap
+        }, /*#__PURE__*/React.createElement(Tooltip, {
+          title: item.ownerName && ((_item$ownerName = item.ownerName) === null || _item$ownerName === void 0 ? void 0 : _item$ownerName.length) > 4 ? item.ownerName : ''
+        }, /*#__PURE__*/React.createElement("div", {
+          className: styles.userBox
+        }, item.ownerName && ((_item$ownerName2 = item.ownerName) === null || _item$ownerName2 === void 0 ? void 0 : _item$ownerName2.length) > 4 ? "".concat((_item$ownerName3 = item.ownerName) === null || _item$ownerName3 === void 0 ? void 0 : _item$ownerName3.slice(0, 4), "...") : item.ownerName))));
+      }), optionList.length <= 0 && /*#__PURE__*/React.createElement(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE,
+        description: "\u6682\u65E0\u6570\u636E"
+      })));
     }
-  }, typeof props.icon === 'string' && typeof props.disabledIcon === 'string' ? /*#__PURE__*/React.createElement("img", {
-    width: 48,
-    height: 48,
-    src: list.length && !props.disabled ? props.icon : props.disabledIcon,
-    alt: ""
-  }) : /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: 48,
-      height: 48
-    }
-  }, list.length && !props.disabled ? props.icon : props.disabledIcon), /*#__PURE__*/React.createElement("div", {
-    className: styles['wrap_desc'],
-    style: {
-      color: selectedKeys.length > 0 ? '#142A51' : '#9EA7B5',
-      fontWeight: selectedKeys.length > 0 ? 500 : 400
-    }
-  }, list.length < 1 ? "\u6682\u65E0\u7ED1\u5B9A".concat(props.placeholder) : selectedKeys.length > 0 ? "\u5DF2\u9009\u62E9".concat(selectedKeys.length, "\u4E2A").concat(props.placeholder) : "\u8BF7\u9009\u62E9".concat(props.placeholder)), selectedKeys.length > 0 ? /*#__PURE__*/React.createElement("img", {
-    src: UpIcon,
-    alt: "",
-    onClick: handleClearAll
-  }) : /*#__PURE__*/React.createElement("img", {
-    src: DownIcon,
-    alt: ""
-  }))));
+  }, renderAccountView());
 };
-var AccountSelectList = function AccountSelectList(_ref) {
-  var accounts = _ref.accounts,
-    onChange = _ref.onChange,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? {} : _ref$value;
-  var _useState5 = useState(value),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedAccounts = _useState6[0],
-    setSelectedAccounts = _useState6[1];
+var AccountSelectList = function AccountSelectList(props) {
+  var _React$useState7 = React.useState([]),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    accounts = _React$useState8[0],
+    setAccounts = _React$useState8[1];
+  var _React$useState9 = React.useState({}),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    selectValues = _React$useState10[0],
+    setSelectValues = _React$useState10[1];
   useEffect(function () {
-    setSelectedAccounts(value);
-  }, [value]);
-  var handleSelectionChange = function handleSelectionChange(keys, accountKey) {
-    setSelectedAccounts(function (prevState) {
-      var newState = _objectSpread(_objectSpread({}, prevState), {}, _defineProperty({}, accountKey, keys));
-      onChange === null || onChange === void 0 || onChange(newState);
-      return newState;
-    });
-  };
+    setAccounts(props.accounts.map(function (item, index) {
+      return _objectSpread({
+        key: index
+      }, item);
+    }));
+  }, [props.accounts]);
   return /*#__PURE__*/React.createElement(Row, {
     gutter: [32, 32]
   }, accounts === null || accounts === void 0 ? void 0 : accounts.map(function (account, index) {
     return /*#__PURE__*/React.createElement(Col, {
       span: 8,
       key: index
-    }, /*#__PURE__*/React.createElement(AccountSelect, {
-      keys: account.key,
-      list: account.list,
-      placeholder: account.placeholder,
-      icon: account.icon,
-      disabledIcon: account.disabledIcon,
-      isValid: account.isValid,
-      multiple: account.multiple || false,
-      disabled: account.disabled || false,
-      onSelectionChange: handleSelectionChange,
-      selectedValues: selectedAccounts[account.key]
-    }));
+    }, /*#__PURE__*/React.createElement(AccountSelect, _extends({}, account, {
+      onChange: function onChange(values) {
+        var _props$onChange4;
+        var tValues = _objectSpread({}, selectValues);
+        tValues[account.key] = values;
+        setSelectValues(tValues);
+        (_props$onChange4 = props.onChange) === null || _props$onChange4 === void 0 || _props$onChange4.call(props, tValues);
+      }
+    })));
   }));
 };
-export default AccountSelectList;
+AccountSelect.Group = AccountSelectList;
+export default AccountSelect;

package/dist/account-select/index.module.less

@@ -1,58 +1,133 @@
-.wrap {
-  padding: 2px 17px 2px 2px;
-  border-radius: 25px;
+.box {
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
+
+  padding: 2px 17px 2px 2px;
+  border-radius: 999px;
   cursor: pointer;
 
-  &_desc {
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 400;
+  border: 1px solid #D4DBE7;
+
+  .placeHolderText {
     font-size: 14px;
     color: #9EA7B5;
   }
 
-  &active_desc {
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 500;
-    font-size: 14px;
-    color: #142A51;
+  .centerContentBox {
+    flex: 1;
+    overflow: hidden;
+    margin: 0 12px;
+
+    .selectInfoBox {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .accountName {
+        color: #142A51;
+        font-size: 14px;
+        max-width: 66%;
+        flex: 2;
+      }
+
+      .languageText {
+        font-size: 12px;
+        color: #9EA7B5;
+        flex: 1;
+        max-width: 33%;
+      }
+    }
   }
+}
 
-  &_title {
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 400;
-    font-size: 14px;
-    color: #142A51;
+.popBox {
+  width: 481px;
+  background: #FFFFFF;
+  box-shadow: 0 9px 28px 8px rgba(0,0,0,0.05), 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12);
+  border-radius: 8px;
+
+  :global {
+    .ant-popover-inner {
+      padding: 4px;
+    }
   }
 
-  &_right_desc {
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 400;
-    font-size: 12px;
-    color: #9EA7B5;
+  .scrollBox {
+    display: flex;
+    flex-direction: column;
+    max-height: 50vh;
+    overflow: auto;
+    margin-top: 4px;
+    gap: 2px;
   }
-}
 
-.wrap_no_active {
-  background: #F5F7FA;
-  border-radius: 25px;
-  border: 1px solid #D4DBE7;
-  padding: 2px 17px 2px 2px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-}
+  .rowBox {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px 12px;
+    gap: 12px;
+
+    &:hover {
+      background-color: #F5F7FA;
+      border-radius: 4px;
+    }
 
+    .name {
+      font-size: 14px;
+      color: #142A51;
+      width: 130px;
+    }
 
-.popover_title {
-  font-family: PingFangSC, PingFang SC;
-  font-weight: 400;
-  font-size: 14px;
-  color: #FA4441;
-  line-height: 20px;
-  text-align: left;
-  font-style: normal;
+    .remark {
+      font-size: 12px;
+      color: #9EA7B5;
+      flex: 1;
+    }
+
+    .countryAndLanguage {
+      font-size: 12px;
+      color: #9EA7B5;
+      width: 80px;
+    }
+
+    .userWrap {
+      width: 80px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+    .userBox {
+      width: max-content;
+      background: #E9F1FF;
+      border-radius: 4px;
+      border: 1px solid #004FD3;
+      padding: 4px 8px;
+
+      font-size: 12px;
+      color: #004FD3;
+    }
+  }
+
+  .rowBoxClick {
+    cursor: pointer;
+  }
+
+  .rowBoxSelect {
+    background-color: #e6f3ff;
+    border-radius: 4px;
+    &:hover {
+      background-color: #e6f3ff;
+    }
+  }
+
+  .rowBoxDisable {
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: #fff;
+    }
+  }
 }
+

package/dist/account-select/type.d.ts

@@ -0,0 +1,80 @@
+import React, { ReactElement } from "react";
+export interface IAccountSelectProps {
+    /**
+     * 普通状态下的icon
+     */
+    icon?: string | React.ReactElement;
+    /**
+     * 禁用状态下的icon
+     */
+    disabledIcon?: string | React.ReactElement;
+    /**
+     * 默认选中的条数
+     */
+    defaultSelectList?: (number | string)[];
+    /**
+     * 没有选择文件的时候默认提示文案
+     */
+    placeholder?: string | React.ReactElement;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否多选
+     */
+    multiple?: boolean;
+    /**
+     * 选项发生变化触发
+     * @param values
+     */
+    onChange?: (values: (string | number)[]) => void;
+    /**
+     * 下拉选项列表
+     */
+    options?: IAccountOptionModel[];
+    /**
+     * 自定义渲染选择之后的视图
+     * @param values
+     */
+    renderSelectStatus: (values: (string | number)[]) => ReactElement;
+}
+export interface IAccountOptionModel {
+    /**
+     * 选项唯一值
+     */
+    id: string | number;
+    /**
+     * 账号名
+     */
+    accountName?: string;
+    /**
+     * 备注
+     */
+    remark?: string;
+    /**
+     * 国家
+     */
+    country?: string;
+    /**
+     * 语言
+     */
+    language?: string;
+    /**
+     * 所属人员
+     */
+    ownerName?: string;
+    /**
+     * 不可操作
+     */
+    disabled?: boolean;
+}
+export interface IAccountListProps {
+    accounts: IAccountSelectProps[];
+    onChange?: (selected: {
+        [key: string]: string[];
+    }) => void;
+    value?: {
+        [key: string]: string[];
+    };
+}

package/dist/account-select/type.js

@@ -0,0 +1 @@
+export {};

package/dist/release-video-card/index.js

@@ -194,7 +194,7 @@ var ReleaseVideoCard = function ReleaseVideoCard(props) {
       marginRight: 12,
       cursor: 'pointer'
     }
-  }, [0, 1].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$editComponent = props.editComponent) !== null && _props$editComponent !== void 0 ? _props$editComponent : /*#__PURE__*/React.createElement("span", null, "\u7F16\u8F91")) : [2, 3].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$detailComponen = props.detailComponent) !== null && _props$detailComponen !== void 0 ? _props$detailComponen : /*#__PURE__*/React.createElement("span", null, "\u8BE6\u60C5")) : null), /*#__PURE__*/React.createElement(Dropdown, {
+  }, [0, 1].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$editComponent = props.editComponent) !== null && _props$editComponent !== void 0 ? _props$editComponent : /*#__PURE__*/React.createElement("span", null, "\u7F16\u8F91")) : [2, 3].includes(props.status) ? /*#__PURE__*/React.createElement(React.Fragment, null, (_props$detailComponen = props.detailComponent) !== null && _props$detailComponen !== void 0 ? _props$detailComponen : /*#__PURE__*/React.createElement("span", null, "\u8BE6\u60C5")) : null), [0, 1].includes(props.status) ? /*#__PURE__*/React.createElement(Dropdown, {
     trigger: ['click'],
     menu: {
       items: [{
@@ -212,7 +212,7 @@ var ReleaseVideoCard = function ReleaseVideoCard(props) {
   }, /*#__PURE__*/React.createElement(Image, {
     src: More,
     preview: false
-  }))))), props.isNew && /*#__PURE__*/React.createElement("div", {
+  }))) : null)), props.isNew && /*#__PURE__*/React.createElement("div", {
     className: styles['new-position']
   }, /*#__PURE__*/React.createElement(Image, {
     src: New,

package/dist/text-ellipsis/index.js

@@ -27,7 +27,7 @@ var TextEllipsis = function TextEllipsis(_ref) {
         var parentElement = parentRef.current;
         var parentWidth = parentElement.clientWidth;
         var textWidth = textElement.scrollWidth;
-        setIsTruncated(textWidth > parentWidth);
+        setIsTruncated(textWidth >= parentWidth);
       }
     };
     checkTruncation();
@@ -41,17 +41,21 @@ var TextEllipsis = function TextEllipsis(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles['text-ellipsis'],
     ref: parentRef,
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: textRef,
     style: {
       display: '-webkit-box',
+      width: 'max-content',
+      maxWidth: '100%',
       WebkitBoxOrient: 'vertical',
       WebkitLineClamp: lines,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      width: '100%',
       wordBreak: 'break-all'
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: textRef
   }, children)));
 };
 export default TextEllipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chlp-tech/rpa-ui",
-  "version": "0.0.10",
+  "version": "0.0.11-beta.1",
   "description": "rpa-ui",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,7 +36,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.18.0",
-    "antd": ">=4.18.0",
+    "antd": ">=5.25.0",
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@webav/av-cliper": "^1.0.11",
+    "classnames": "^2.5.1",
     "dayjs": "^1.11.13",
     "js-md5": "^0.8.3",
     "styled-components": "^6.1.12"