@para-ui/core 3.0.55 → 3.0.56

package/Table/util.d.ts

@@ -0,0 +1,34 @@
+import { HeadLocalStorageItem, ReqProps } from "./interface";
+/**
+ * 发送请求
+ * @param obj {ReqProps} 请求信息
+ */
+export declare const requestFunc: (obj: ReqProps) => Promise<import("@paraview/lib").ParaResponse> | undefined;
+/**
+ * 处理get请求地址
+ * @param obj {ReqProps} 请求信息
+ * @return string get请求地址参数
+ */
+export declare const handGetReqParams: (obj: ReqProps) => string;
+/**
+ * 提取字符串里面的数字
+ * */
+export declare const getStringInNumber: (str: string | number) => number;
+/**
+ * 获取选择列localStorage
+ * @param key {string} 键值
+ * @param num {number} 过期天数
+ * */
+export declare const getLocalStorageSelectHead: (key: string, num: number) => HeadLocalStorageItem;
+/**
+ * 设置选择列localStorage
+ * @param key {string} 键值
+ * @param val {HeadLocalStorageItem} 保存值
+ * */
+export declare const setLocalStorageSelectHead: (key: string, val: HeadLocalStorageItem) => void;
+/**
+ * 查找元素
+ * @param el 当前元素
+ * @param selector 查找元素class
+ */
+export declare const closest: (el: any, selector: any) => any;

package/Tabs/index.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @author Hanz
+ * @date 2022/5/30 上午9:59
+ * @description tabs
+ */
+import React, { FC, ReactNode } from 'react';
+import { TabPane, TabsProps as RcTabsProps, TabPaneProps } from 'rc-tabs';
+import { PopConfirmProps } from '../PopConfirm';
+import { HelpProps } from '../Help';
+import './index.scss';
+export type TabsType = 'line' | 'card' | 'editable-card' | 'track' | 'card-container';
+export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
+export type { TabPaneProps };
+export interface TabProps {
+    /** tab text */
+    label?: ReactNode;
+    /** tab panel */
+    content?: ReactNode;
+    /** tab key */
+    value?: any;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 可关闭标签 */
+    closable?: boolean;
+    /** 显示帮助提示 Help */
+    showHelp?: boolean;
+    /** help props */
+    helpProps?: HelpProps;
+    [name: string]: any;
+}
+export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
+    /** tabs 类型 */
+    type?: TabsType;
+    /** 模式:线性、卡片*/
+    mode?: TabsType;
+    /** 大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 隐藏添加图标 */
+    hideAdd?: boolean;
+    /** 标签居中展示 */
+    centered?: boolean;
+    /** 添加图标 */
+    addIcon?: ReactNode;
+    /** 编辑标签 */
+    editable?: boolean;
+    /** 显示添加图标 */
+    showAdd?: boolean;
+    /**显示 popconfirm，editable 为true 有效*/
+    showPopConfirm?: boolean;
+    /** popConfirm props*/
+    popConfirmProps?: PopConfirmProps;
+    /** 数据列表*/
+    data?: TabProps[];
+    /** 选中的 value*/
+    value?: any;
+    /** 新增按钮回调 showAdd 为 true 时有效*/
+    onAdd?: (e?: React.MouseEvent) => void;
+    /** 切换标签页的回调 */
+    onChange?: (activeKey: any, item?: TabProps) => void;
+    /** 新增和删除页签的回调 */
+    onEdit?: (item: TabProps, e?: React.MouseEvent | React.KeyboardEvent | string, action?: 'add' | 'remove') => void;
+    [name: string]: any;
+}
+export declare const Tabs: FC<TabsProps>;
+type mergedTabs = typeof Tabs & {
+    TabPane: typeof TabPane;
+};
+declare const _default: mergedTabs;
+export default _default;

package/Tabs/index.js

@@ -0,0 +1,205 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import React__default, { createElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import RcTabs, { TabPane } from 'rc-tabs';
+import More from '@para-ui/icons/More';
+import Plus from '@para-ui/icons/Plus';
+import CloseIcon from '@para-ui/icons/Close';
+import { PopConfirm } from '../PopConfirm/index.js';
+import Help from '../Help/index.js';
+import clsx from 'clsx';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
+import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/typeof-498dd2b1.js';
+import '../_verture/slicedToArray-76060636.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '@para-ui/icons/CheckCircleF';
+import '@para-ui/icons/WarningCircle';
+import '@para-ui/icons/CloseCircleF';
+import '@para-ui/icons/WarningCircleF';
+import '../Button/index.js';
+import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/Forbid';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Down';
+import '../_verture/index-77f9e0fb.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-87febeb9.js';
+import 'dayjs';
+import '@paraview/lib';
+import '@para-ui/core/GlobalContext';
+import '@para-ui/icons/Help';
+
+var en = {
+  confirmDelete: 'Are you sure delete?'
+};
+
+var zh = {
+  confirmDelete: '确定删除吗？'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:29\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:39\n* @description\n*/\n.paraui-v3-tabs-small > .component-tabs-nav .component-tabs-tab {\n  padding: 8px 0;\n  font-size: 14px;\n}\n\n.paraui-v3-tabs-large > .component-tabs-nav .component-tabs-tab {\n  padding: 16px 0;\n  font-size: 16px;\n}\n\n.paraui-v3-tabs-card.paraui-v3-tabs-small > .component-tabs-nav .component-tabs-tab {\n  padding: 6px 16px;\n}\n\n.paraui-v3-tabs-card.paraui-v3-tabs-large > .component-tabs-nav .component-tabs-tab {\n  padding: 7px 16px 6px;\n}\n\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:44\n* @description\n*/\n.paraui-v3-tabs.component-tabs-top, .paraui-v3-tabs.component-tabs-bottom {\n  flex-direction: column;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  margin: 0 0 16px 0;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  position: absolute;\n  right: 0;\n  left: 0;\n  border-bottom: 1px solid rgba(171, 176, 185, 0.2);\n  content: \"\";\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  height: 1px;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: width 0.3s, left 0.3s, right 0.3s;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  top: 0;\n  bottom: 0;\n  width: 30px;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  left: 0;\n  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before {\n  opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after {\n  opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav::before {\n  bottom: 0;\n}\n.paraui-v3-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar {\n  bottom: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  order: 1;\n  margin-top: 16px;\n  margin-bottom: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  top: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  top: 0;\n}\n.paraui-v3-tabs.component-tabs-bottom > .component-tabs-content-holder, .paraui-v3-tabs.component-tabs-bottom > div > .component-tabs-content-holder {\n  order: 0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav {\n  flex-direction: column;\n  min-width: 50px;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab {\n  padding: 0 12px;\n  text-align: center;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin: 8px 0 0 0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap {\n  flex-direction: column;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  left: 0;\n  height: 30px;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  top: 0;\n  box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  bottom: 0;\n  box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before {\n  opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after {\n  opacity: 1;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  width: 1px;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: height 0.3s, top 0.3s;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-operations {\n  flex: 1 0 auto;\n  flex-direction: column;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar {\n  right: 0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-content-holder, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-content-holder {\n  margin-left: -1px;\n  border-left: 1px solid #f0f0f0;\n}\n.paraui-v3-tabs.component-tabs-left > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v3-tabs.component-tabs-left > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-left: 24px;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-nav, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav {\n  order: 1;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  left: 0;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-content-holder, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-content-holder {\n  order: 0;\n  margin-right: -1px;\n  border-right: 1px solid #f0f0f0;\n}\n.paraui-v3-tabs.component-tabs-right > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v3-tabs.component-tabs-right > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-right: 24px;\n}\n\n.component-tabs-dropdown {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: 1050;\n  display: block;\n}\n.component-tabs-dropdown.component-tabs-dropdown-hidden {\n  display: none;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu {\n  max-height: 200px;\n  margin: 0;\n  padding: 4px 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  text-align: left;\n  list-style-type: none;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border-radius: 4px;\n  outline: none;\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item {\n  display: flex;\n  align-items: center;\n  min-width: 140px;\n  margin: 0;\n  padding: 7px 12px;\n  overflow: hidden;\n  color: rgb(46, 55, 67);\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 22px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v3-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v3-help svg {\n  color: inherit;\n  font-size: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v3-help:hover {\n  color: rgb(54, 102, 214);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item > span {\n  flex: 1;\n  white-space: nowrap;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove {\n  flex: none;\n  margin-left: 12px;\n  margin-top: 2px;\n  color: rgb(46, 55, 67);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove svg {\n  color: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item:hover {\n  background: #f5f5f5;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled,\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled:hover {\n  color: rgba(46, 55, 67, 0.4);\n  background: transparent;\n  cursor: not-allowed;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-enter.component-tabs-slide-up-enter-active,\n.component-tabs-slide-up-appear.component-tabs-slide-up-appear-active {\n  animation-name: componentTabsSlideUpIn;\n  animation-play-state: running;\n}\n\n.component-tabs-slide-up-leave.component-tabs-slide-up-leave-active {\n  animation-name: componentTabsSlideUpOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.component-tabs-slide-up-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n\n@keyframes componentTabsSlideUpIn {\n  0% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n  100% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n}\n@keyframes componentTabsSlideUpOut {\n  0% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n  100% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n}\n.paraui-v3-tabs {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  display: flex;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav {\n  position: relative;\n  display: flex;\n  flex: none;\n  align-items: center;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap {\n  position: relative;\n  display: flex;\n  flex: auto;\n  align-self: stretch;\n  overflow: hidden;\n  white-space: nowrap;\n  transform: translate(0);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  position: absolute;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  content: \"\";\n  pointer-events: none;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-list, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-list {\n  position: relative;\n  display: flex;\n  transition: transform 0.3s;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations {\n  display: flex;\n  align-self: stretch;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations-hidden, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations-hidden {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more {\n  position: relative;\n  padding: 8px 12px;\n  background: transparent;\n  border: 0;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more svg, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more::after, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more::after {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  transform: translateY(100%);\n  content: \"\";\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add {\n  min-width: 40px;\n  margin-left: 2px;\n  padding: 0 8px;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.7);\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add svg, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add svg {\n  color: inherit;\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:hover, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:active, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:active, .paraui-v3-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:focus, .paraui-v3-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:focus {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-extra-content {\n  flex: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-centered > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v3-tabs.paraui-v3-tabs-centered > div > .component-tabs-nav .component-tabs-nav-wrap {\n  justify-content: center;\n}\n.paraui-v3-tabs .component-tabs-ink-bar {\n  position: absolute;\n  background: rgb(54, 102, 214);\n  pointer-events: none;\n}\n.paraui-v3-tabs .component-tabs-tab {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  height: 40px;\n  padding: 0 12px;\n  font-size: 14px;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-v3-tabs .component-tabs-tab-btn:focus,\n.paraui-v3-tabs .component-tabs-tab-remove:focus,\n.paraui-v3-tabs .component-tabs-tab-btn:active,\n.paraui-v3-tabs .component-tabs-tab-remove:active {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-tab-btn {\n  outline: none;\n  transition: all 0.3s;\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v3-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v3-help svg {\n  margin-right: 0;\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v3-help:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-tab-remove {\n  display: inline-flex;\n  flex: none;\n  margin-right: -4px;\n  margin-left: 4px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.paraui-v3-tabs .component-tabs-tab-remove svg {\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab-remove span {\n  display: inline-flex;\n}\n.paraui-v3-tabs .component-tabs-tab-remove:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-tabs .component-tabs-tab:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-tabs .component-tabs-tab:hover .paraui-v3-help {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-tabs .component-tabs-tab:hover .component-tabs-tab-remove {\n  color: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(54, 102, 214);\n  font-weight: 400;\n  text-shadow: 0 0 0.25px currentcolor;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-active .component-tabs-tab-btn {\n  color: inherit;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-btn:focus,\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-remove:focus,\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-btn:active,\n.paraui-v3-tabs .component-tabs-tab.component-tabs-tab-disabled .component-tabs-tab-remove:active {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-tabs .component-tabs-tab .component-tabs-tab-remove svg {\n  margin: 0;\n}\n.paraui-v3-tabs .component-tabs-tab svg {\n  margin-right: 12px;\n}\n.paraui-v3-tabs .component-tabs-tab + .component-tabs-tab {\n  margin: 0;\n}\n.paraui-v3-tabs .component-tabs-content {\n  display: flex;\n  width: 100%;\n}\n.paraui-v3-tabs .component-tabs-content-holder {\n  flex: auto;\n  min-width: 0;\n  min-height: 0;\n}\n.paraui-v3-tabs .component-tabs-content-animated {\n  transition: margin 0.3s;\n}\n.paraui-v3-tabs .component-tabs-tabpane {\n  flex: none;\n  width: 100%;\n  outline: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-editable-line .component-tabs-nav .component-tabs-nav-add, .paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  min-width: initial;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  align-self: center;\n  margin-left: 12px;\n  padding: 0;\n  background-color: rgba(248, 249, 251, 0.8);\n  border-color: rgba(171, 176, 185, 0.2);\n  border-radius: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track {\n  display: inline-flex;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav {\n  height: 40px;\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  margin-right: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-tab {\n  height: 28px;\n  margin: 6px 4px;\n  padding: 0 8px;\n  border-radius: 4px;\n  transition: 0.3s;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(54, 102, 214);\n  text-shadow: none;\n  background-color: rgb(255, 255, 255);\n  font-weight: 400;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin: 6px 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-left .component-tabs-nav, .paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-right .component-tabs-nav {\n  height: auto;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-left .component-tabs-content-holder, .paraui-v3-tabs.paraui-v3-tabs-track.component-tabs-right .component-tabs-content-holder {\n  border-left: 0;\n  border-right: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-track .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab {\n  margin: 0;\n  padding: 0 12px;\n  background: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab:hover .component-tabs-tab-remove, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab:hover .component-tabs-tab-remove {\n  color: inherit;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove {\n  margin-left: 8px;\n  font-size: 14px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-tab-active {\n  color: rgb(54, 102, 214);\n  background: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card > .component-tabs-nav .component-tabs-ink-bar, .paraui-v3-tabs.paraui-v3-tabs-card > div > .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-left: 0;\n  border-left: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:first-child {\n  border-top-left-radius: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:nth-last-child(2) {\n  border-top-right-radius: 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab-active {\n  border-bottom-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab-active {\n  border-top-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-top: 0;\n  border-top: 0;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab-active {\n  border-right-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab-active, .paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab-active {\n  border-left-color: rgb(255, 255, 255);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-right .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card.component-tabs-left .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container > .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container > .component-tabs-nav .component-tabs-tab {\n  border: 0;\n  transition: 0.3s;\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container > .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  border-radius: 4px 4px 0 0;\n  background-color: rgb(248, 249, 251);\n}\n.paraui-v3-tabs.paraui-v3-tabs-card-container .component-tabs-content {\n  margin-top: -16px;\n  padding: 16px;\n  background-color: rgb(248, 249, 251);\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v3-tabs.paraui-v3-tabs-no-child:not(.paraui-v3-tabs-card-container) .component-tabs-nav {\n  margin: 0;\n}";
+styleInject(css_248z);
+
+//tabs
+var Tabs = function Tabs(props) {
+  var _clsx;
+  var type = props.type,
+    className = props.className,
+    size = props.size,
+    _onEdit = props.onEdit,
+    hideAdd = props.hideAdd,
+    centered = props.centered,
+    addIcon = props.addIcon,
+    _props$moreIcon = props.moreIcon,
+    moreIcon = _props$moreIcon === void 0 ? jsx(More, {}) : _props$moreIcon,
+    editable = props.editable,
+    mode = props.mode,
+    showAdd = props.showAdd,
+    showPopConfirm = props.showPopConfirm,
+    popConfirmProps = props.popConfirmProps,
+    data = props.data,
+    onChange = props.onChange,
+    onAdd = props.onAdd,
+    children = props.children,
+    value = props.value,
+    activeKey = props.activeKey,
+    restProps = __rest(props, ["type", "className", "size", "onEdit", "hideAdd", "centered", "addIcon", "moreIcon", "editable", "mode", "showAdd", "showPopConfirm", "popConfirmProps", "data", "onChange", "onAdd", "children", "value", "activeKey"]);
+  var intl = useFormatMessage('Tabs', localeJson);
+  var prefixCls = "".concat($prefixCls, "-tabs");
+  var inType = type !== null && type !== void 0 ? type : mode;
+  var inEditable;
+  //可编辑标签
+  if (inType === 'editable-card' || editable) {
+    inEditable = {
+      onEdit: function onEdit(editType, _ref) {
+        var key = _ref.key,
+          event = _ref.event;
+        var currItem = {};
+        if (editType === 'add') {
+          if (onAdd) onAdd(event);else _onEdit === null || _onEdit === void 0 ? void 0 : _onEdit(currItem, event, editType);
+        } else {
+          var tKey = key;
+          if (data) {
+            currItem = data.find(function (_) {
+              return String(_.value) === key;
+            }) || {};
+            if ((currItem === null || currItem === void 0 ? void 0 : currItem.value) !== undefined) tKey = currItem.value;
+          }
+          _onEdit === null || _onEdit === void 0 ? void 0 : _onEdit(currItem, tKey, editType);
+        }
+      },
+      removeIcon: jsx(CloseIcon, {}),
+      addIcon: addIcon || jsx(Plus, {}),
+      showAdd: hideAdd !== true && showAdd !== false
+    };
+  }
+  //onchange
+  var handleChange = function handleChange(newActiveKey) {
+    var tKey = newActiveKey;
+    var currItem = {};
+    if (data) {
+      currItem = data.find(function (_) {
+        return String(_.value) === newActiveKey;
+      }) || {};
+      if ((currItem === null || currItem === void 0 ? void 0 : currItem.value) !== undefined) tKey = currItem.value;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(tKey, currItem);
+  };
+  //渲染closeIcon
+  var renderCloseIcon = function renderCloseIcon(item) {
+    var closable = item.closable,
+      closeIcon = item.closeIcon;
+    if (closable === false) return null;
+    if (!showPopConfirm) {
+      return closeIcon || jsx(CloseIcon, {});
+    }
+    return jsx("span", Object.assign({
+      onClick: function onClick(ev) {
+        return ev.stopPropagation();
+      }
+    }, {
+      children: jsx(PopConfirm, Object.assign({
+        content: intl({
+          id: 'confirmDelete'
+        }),
+        placement: 'top'
+      }, popConfirmProps, {
+        onOk: function onOk() {
+          return _onEdit === null || _onEdit === void 0 ? void 0 : _onEdit(item, item.value, 'remove');
+        }
+      }, {
+        children: closeIcon || jsx(CloseIcon, {})
+      }))
+    }));
+  };
+  //渲染tab
+  var renderTab = function renderTab() {
+    if (!(data === null || data === void 0 ? void 0 : data.length)) return children;
+    return data.map(function (item) {
+      var _a;
+      var label = item.label,
+        content = item.content,
+        value = item.value,
+        showHelp = item.showHelp,
+        helpProps = item.helpProps,
+        restTabProps = __rest(item, ["label", "content", "value", "showHelp", "helpProps"]);
+      var labelNode = showHelp ? jsxs("span", Object.assign({
+        className: "".concat($rcPrefixCls, "-tabs-tab-help")
+      }, {
+        children: [jsx(Help, Object.assign({}, helpProps, {
+          title: (_a = helpProps === null || helpProps === void 0 ? void 0 : helpProps.title) !== null && _a !== void 0 ? _a : ''
+        })), label]
+      })) : label;
+      return /*#__PURE__*/createElement(TabPane, Object.assign({}, restTabProps, {
+        tab: labelNode,
+        key: value,
+        closeIcon: renderCloseIcon(item)
+      }), content);
+    });
+  };
+  //active key
+  var getActiveKey = function getActiveKey() {
+    var inActiveKey = activeKey !== null && activeKey !== void 0 ? activeKey : value;
+    if (inActiveKey !== undefined) return String(inActiveKey);
+    return undefined;
+  };
+  //是否有子节点
+  var hasChildNode = function hasChildNode() {
+    var hasChild;
+    if (data === null || data === void 0 ? void 0 : data.length) {
+      hasChild = data.some(function (_) {
+        return _.content;
+      });
+    } else {
+      hasChild = React__default.Children.toArray(children).some(function (_) {
+        return _.props.children;
+      });
+    }
+    return !hasChild;
+  };
+  return jsx(RcTabs, Object.assign({
+    activeKey: getActiveKey(),
+    moreTransitionName: "".concat($rcPrefixCls, "-tabs-slide-up")
+  }, restProps, {
+    className: clsx(prefixCls, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_clsx, "".concat(prefixCls, "-card"), ['card', 'editable-card'].includes(inType)), _defineProperty(_clsx, "".concat(prefixCls, "-editable-line"), (!inType || inType === 'line') && editable), _defineProperty(_clsx, "".concat(prefixCls, "-editable-card"), inType === 'editable-card'), _defineProperty(_clsx, "".concat(prefixCls, "-track"), inType === 'track'), _defineProperty(_clsx, "".concat(prefixCls, "-card-container ").concat(prefixCls, "-card"), inType === 'card-container'), _defineProperty(_clsx, "".concat(prefixCls, "-centered"), centered), _defineProperty(_clsx, "".concat(prefixCls, "-no-child"), hasChildNode()), _clsx), className),
+    editable: inEditable,
+    moreIcon: moreIcon,
+    prefixCls: "".concat($rcPrefixCls, "-tabs"),
+    onChange: handleChange
+  }, {
+    children: renderTab()
+  }));
+};
+Tabs.TabPane = TabPane;
+
+export { Tabs, Tabs as default };

package/Tabs/lang/en_US.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    confirmDelete: string;
+};
+export default _default;

package/Tabs/lang/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    zh: {
+        confirmDelete: string;
+    };
+    en: {
+        confirmDelete: string;
+    };
+};
+export default _default;

package/Tabs/lang/zh_CN.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    confirmDelete: string;
+};
+export default _default;

package/Tag/TagGroup.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @author Hanz
+ * @date 2022/1/12 下午1:16
+ * @description tag group
+ */
+import React, { FunctionComponent } from "react";
+import { TagProps } from "./index";
+import './index.scss';
+interface TagItem extends Omit<TagProps, 'visible' | 'size' | 'bordered'> {
+    /**
+     * label
+     */
+    label: string;
+    /**
+     * value
+     */
+    value: string;
+}
+type Item = string | number;
+export interface TagGroupProps {
+    /**
+     * cls
+     */
+    className?: string;
+    /**
+     * 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 大小
+     */
+    size?: 'small' | 'large';
+    /**
+     * 显示边框
+     */
+    bordered?: boolean;
+    /**
+     * input 默认值
+     */
+    defaultInputValue?: string;
+    /**
+     * 动态添加
+     */
+    increased?: boolean;
+    /**
+     * 动态添加按钮 increased 为true 有效
+     */
+    increasedTag?: {
+        /** 图标 */
+        icon?: React.ReactNode;
+        /** 文字 */
+        text?: string;
+    };
+    /**
+     * 组数据源
+     */
+    data?: TagItem[] | Item[];
+    /**
+     * onchange
+     * @param tagData
+     * @param value
+     */
+    onChange?: (tagData: TagItem[], value: string[]) => void;
+}
+declare const TagGroup: FunctionComponent<TagGroupProps>;
+export default TagGroup;

package/Tag/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @author Hanz
+ * @date 2022/1/11 上午10:15
+ * @description tag
+ */
+import React, { PropsWithChildren } from 'react';
+import TagGroup, { TagGroupProps } from './TagGroup';
+import './index.scss';
+type PresetColorTypes = 'blue' | 'green' | 'yellow' | 'red';
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** 颜色 */
+    color?: string | PresetColorTypes;
+    /** 可关闭 */
+    closable?: boolean;
+    /** 关闭图标 */
+    closeIcon?: React.ReactNode;
+    /** 是否显示 */
+    visible?: boolean;
+    /** onclose */
+    onClose?: (event: React.MouseEvent) => void;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** cls */
+    className?: string;
+    /** 显示边框 */
+    bordered?: boolean;
+    /** 大小 */
+    size?: 'small' | 'large';
+}
+export type TagPropsWithChild = PropsWithChildren<TagProps>;
+export type { TagGroupProps };
+export { TagGroup };
+export declare const Tag: React.FC<TagPropsWithChild>;
+export default Tag;