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

package/dist/MediaAccountPreview/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface MediaAccountPreviewProps {
+    width?: number | string;
+    nickname?: string;
+    remark?: string;
+    language?: string;
+    country?: string;
+    ownerUsername?: string;
+}
+declare const MediaAccountPreview: React.FC<MediaAccountPreviewProps>;
+export default MediaAccountPreview;

package/dist/MediaAccountPreview/index.js

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import TextEllipsis from "../text-ellipsis";
+import styles from "./index.module.less";
+import { Tooltip } from 'antd';
+var MediaAccountPreview = function MediaAccountPreview(props) {
+  var _props$ownerUsername, _props$ownerUsername2, _props$ownerUsername3;
+  var languageCountry = useMemo(function () {
+    var list = [];
+    if (props.country) list.push(props.country);
+    if (props.language) list.push(props.language);
+    return list;
+  }, [props.language, props.country]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.box,
+    style: {
+      width: props.width
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.nameText
+  }, /*#__PURE__*/React.createElement(TextEllipsis, {
+    lines: 1,
+    showTooltip: false
+  }, props.nickname || '--')), /*#__PURE__*/React.createElement("div", {
+    className: styles.remarkText
+  }, /*#__PURE__*/React.createElement(TextEllipsis, {
+    lines: 1,
+    showTooltip: false
+  }, props.remark || '无备注')), /*#__PURE__*/React.createElement("div", {
+    className: styles.languageCountryText
+  }, /*#__PURE__*/React.createElement(TextEllipsis, {
+    lines: 1,
+    showTooltip: false
+  }, languageCountry.length > 0 ? languageCountry.join('/') : '')), props.ownerUsername && /*#__PURE__*/React.createElement(Tooltip, {
+    title: ((_props$ownerUsername = props.ownerUsername) === null || _props$ownerUsername === void 0 ? void 0 : _props$ownerUsername.length) > 4 ? props.ownerUsername : ''
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.userTag
+  }, props.ownerUsername && ((_props$ownerUsername2 = props.ownerUsername) === null || _props$ownerUsername2 === void 0 ? void 0 : _props$ownerUsername2.length) > 4 ? "".concat((_props$ownerUsername3 = props.ownerUsername) === null || _props$ownerUsername3 === void 0 ? void 0 : _props$ownerUsername3.slice(0, 4), "...") : props.ownerUsername || '--')));
+};
+export default MediaAccountPreview;

package/dist/MediaAccountPreview/index.module.less

@@ -0,0 +1,35 @@
+.box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+
+  .nameText {
+    font-size: 14px;
+    color: #142A51;
+    width: 30%;
+  }
+
+  .remarkText {
+    font-size: 12px;
+    color: #9EA7B5;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .languageCountryText {
+    font-size: 12px;
+    color: #9EA7B5;
+  }
+
+  .userTag {
+    padding: 4px 6px;
+    line-height: 1;
+    font-size: 12px;
+    color: #004FD3;
+    background: #E9F1FF;
+    border-radius: 4px;
+    border: 1px solid #004FD3;
+  }
+}

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

@@ -1,39 +1,7 @@
-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, IAccountListRef, IAccountSelectProps } from './type';
+interface AccountSelectComponent extends React.FC<IAccountSelectProps> {
+    Group: React.ForwardRefExoticComponent<IAccountListProps & React.RefAttributes<IAccountListRef>>;
 }
-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 _default: AccountSelectComponent;
+export default _default;

package/dist/account-select/index.js

@@ -1,221 +1,280 @@
 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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 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, { forwardRef, useEffect, useImperativeHandle } 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 "../text-ellipsis";
+import MediaAccountPreview from "../MediaAccountPreview";
+import { SearchOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+import styles from "./index.module.less";
 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];
+  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(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    previewPopOpen = _React$useState4[0],
+    setPreviewPopOpen = _React$useState4[1];
+  var _React$useState5 = React.useState(props.options || []),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    optionList = _React$useState6[0],
+    setOptionList = _React$useState6[1];
+  var _React$useState7 = React.useState(props.defaultSelectList || []),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    selectedKeys = _React$useState8[0],
+    setSelectedKeys = _React$useState8[1];
   useEffect(function () {
-    setSelectedKeys(props.selectedValues || []);
-  }, [props.selectedValues]);
-  var handleOpenChange = function handleOpenChange(nextOpen, info) {
-    if (!props.disabled && (info.source === 'trigger' || nextOpen)) {
-      setOpen(nextOpen);
-    }
+    setOptionList(props.options || []);
+  }, [props.options]);
+  useEffect(function () {
+    setSelectedKeys(props.defaultSelectList || []);
+  }, [props.defaultSelectList]);
+  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, _info$languageCnName, _info$languageCnName2, _info$languageCnName3;
+    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(Popover, {
+      open: previewPopOpen,
+      onOpenChange: function onOpenChange(open) {
+        return setPreviewPopOpen(open);
+      },
+      rootClassName: styles.accountPrePopBox,
+      content: /*#__PURE__*/React.createElement(MediaAccountPreview, {
+        width: 400,
+        nickname: info === null || info === void 0 ? void 0 : info.accountName,
+        language: info === null || info === void 0 ? void 0 : info.languageCnName,
+        remark: info === null || info === void 0 ? void 0 : info.remark,
+        country: info === null || info === void 0 ? void 0 : info.countryCnName,
+        ownerUsername: info === null || info === void 0 ? void 0 : info.ownerUserName
+      })
+    }, /*#__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(Tooltip, {
+      title: info !== null && info !== void 0 && info.languageCnName && (info === null || info === void 0 || (_info$languageCnName = info.languageCnName) === null || _info$languageCnName === void 0 ? void 0 : _info$languageCnName.length) > 4 ? info.languageCnName : ''
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.languageText
+    }, info !== null && info !== void 0 && info.languageCnName && (info === null || info === void 0 || (_info$languageCnName2 = info.languageCnName) === null || _info$languageCnName2 === void 0 ? void 0 : _info$languageCnName2.length) > 4 ? "".concat(info === null || info === void 0 || (_info$languageCnName3 = info.languageCnName) === null || _info$languageCnName3 === void 0 ? void 0 : _info$languageCnName3.slice(0, 4), "...") : (info === null || info === void 0 ? void 0 : info.languageCnName) || '--'))));
   };
-  var handleClearAll = function handleClearAll() {
-    setSelectedKeys([]);
-    setOpen(false);
-    props.onSelectionChange([], props.keys);
+  var renderAccountView = function renderAccountView() {
+    return /*#__PURE__*/React.createElement(Popover, {
+      open: !!props.disabledPopContent,
+      content: props.disabledPopContent ? /*#__PURE__*/React.createElement("div", {
+        className: styles.defaultDisablePopContent
+      }, props.disabledPopContent) : null
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.box, _defineProperty({}, styles.boxDisabled, props.disabled))
+    }, 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(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        if ((selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.length) > 0) {
+          handleClearAll === null || handleClearAll === void 0 || handleClearAll();
+        }
+      }
+    })));
   };
-  var list = props.list;
-  var isValid = useMemo(function () {
-    return list.every(function (item) {
-      return item.isValid;
+  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 onSearchChange = function onSearchChange(e) {
+    var _props$options2;
+    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.ownerUserName || '').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.countryCnName) {
+      list.push(item.countryCnName);
     }
-  }, [props.isValid]);
+    if (item.languageCnName) {
+      list.push(item.languageCnName);
+    }
+    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) {
+      setOpen(open);
+      if (open) {
+        setPreviewPopOpen(false);
+      }
     },
-    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 !props.disabled ? /*#__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'
+            color: '#9EA7B5'
+          }
+        }),
+        placeholder: "\u641C\u7D22\u6210\u5458\u6216\u8D26\u53F7\u540D",
+        onChange: onSearchChange
+      }), /*#__PURE__*/React.createElement("div", {
+        className: styles.scrollBox
+      }, optionList.map(function (item, index) {
+        var _item$ownerUserName, _item$ownerUserName2, _item$ownerUserName3;
+        var languageAndCountryList = getLanguageAndCountryList(item);
+        var tipsText = item.disabledState === 2 ? '账号Token失效，请重新授权该账号，恢复账号绑定状态' : item.disabledState === 1 ? '请勿选择语言不统一的账号' : null;
+        return /*#__PURE__*/React.createElement(Tooltip, {
+          title: tipsText,
+          key: index
+        }, /*#__PURE__*/React.createElement("div", {
+          key: item.id,
+          className: classNames(styles.rowBox, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.rowBoxClick, true), styles.rowBoxSelect, selectedKeys.includes(item.id)), styles.rowBoxDisable, item.disabledState === 2), styles.rowBoxDisableMatchLanguage, item.disabledState === 1)),
+          onClick: function onClick() {
+            if (!item.disabledState || item.disabledState < 1) {
+              onClickItem(item);
             }
-          }, "\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'
-    }
-  }, 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
+          }
+        }, /*#__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.ownerUserName && ((_item$ownerUserName = item.ownerUserName) === null || _item$ownerUserName === void 0 ? void 0 : _item$ownerUserName.length) > 4 ? item.ownerUserName : ''
+        }, /*#__PURE__*/React.createElement("div", {
+          className: styles.userBox
+        }, item.ownerUserName && ((_item$ownerUserName2 = item.ownerUserName) === null || _item$ownerUserName2 === void 0 ? void 0 : _item$ownerUserName2.length) > 4 ? "".concat((_item$ownerUserName3 = item.ownerUserName) === null || _item$ownerUserName3 === void 0 ? void 0 : _item$ownerUserName3.slice(0, 4), "...") : item.ownerUserName)))));
+      }), optionList.length <= 0 && /*#__PURE__*/React.createElement(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE,
+        description: "\u6682\u65E0\u6570\u636E"
+      }))) : null;
     }
-  }, 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];
-  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;
-    });
-  };
+var AccountSelectList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$accounts;
+  var _React$useState9 = React.useState({}),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    selectValues = _React$useState10[0],
+    setSelectValues = _React$useState10[1];
+  useImperativeHandle(ref, function () {
+    return {
+      resetSelectList: function resetSelectList() {
+        return setSelectValues({});
+      },
+      setNewsSelectAccount: function setNewsSelectAccount(selectValue) {
+        setSelectValues(selectValue);
+      }
+    };
+  });
   return /*#__PURE__*/React.createElement(Row, {
     gutter: [32, 32]
-  }, accounts === null || accounts === void 0 ? void 0 : accounts.map(function (account, index) {
+  }, (_props$accounts = props.accounts) === null || _props$accounts === void 0 ? void 0 : _props$accounts.map(function (account, index) {
     return /*#__PURE__*/React.createElement(Col, {
-      span: 8,
+      span: props.colSpan || 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 附加为 AccountSelect 的静态属性
+AccountSelect.Group = AccountSelectList;
+
+// 导出带有 Group 属性的 AccountSelect
+export default AccountSelect;