@douyinfe/semi-ui 2.1.4-alpha.0 → 2.2.0-beta.0

package/lib/es/upload/index.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
+import React, { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
 import PropTypes from 'prop-types';
-import UploadFoundation, { UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/es/upload/foundation';
+import UploadFoundation, { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/es/upload/foundation';
 import FileCard from './fileCard';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
@@ -54,7 +54,10 @@ export interface UploadProps {
     prompt?: ReactNode;
     promptPosition?: PromptPositionType;
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
+    showPicInfo?: boolean;
     showReplace?: boolean;
     showRetry?: boolean;
     showUploadList?: boolean;
@@ -121,14 +124,17 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
+        renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
         showClear: PropTypes.Requireable<boolean>;
+        showPicInfo: PropTypes.Requireable<boolean>;
         showReplace: PropTypes.Requireable<boolean>;
         showRetry: PropTypes.Requireable<boolean>;
         showUploadList: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
+        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;
@@ -136,7 +142,16 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
     static defaultProps: Partial<UploadProps>;
     static FileCard: typeof FileCard;
     constructor(props: UploadProps);
-    static getDerivedStateFromProps(props: UploadProps): Partial<UploadState> | null;
+    /**
+     * Notes:
+     *   The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
+     *   `The types of the parameters "props" and "nextProps" are incompatible.
+           The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
+     *   which seems to be a bug, remove props type declare here
+     */
+    static getDerivedStateFromProps(props: any): {
+        fileList: any;
+    };
     get adapter(): UploadAdapter<UploadProps, UploadState>;
     foundation: UploadFoundation;
     inputRef: RefObject<HTMLInputElement>;
@@ -148,13 +163,28 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
     onReplaceChange: (e: ChangeEvent<HTMLInputElement>) => void;
     clear: () => void;
     remove: (fileItem: FileItem) => void;
+    /**
+     * ref method
+     * insert files at index
+     * @param files Array<CustomFile>
+     * @param index number
+     * @returns
+     */
+    insert: (files: Array<CustomFile>, index: number) => void;
+    /**
+     * ref method
+     * manual upload by user
+     */
     upload: () => void;
     renderFile: (file: FileItem, index: number, locale: Locale['Upload']) => ReactNode;
     renderFileList: () => ReactNode;
+    renderFileListPic: () => JSX.Element;
+    renderFileListDefault: () => JSX.Element;
     onDrop: (e: DragEvent<HTMLDivElement>) => void;
     onDragOver: (e: DragEvent<HTMLDivElement>) => void;
     onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
     onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
+    renderAddContent: () => React.ReactNode;
     renderDragArea: () => ReactNode;
     render(): ReactNode;
 }

package/lib/es/upload/index.js

@@ -72,6 +72,23 @@ class Upload extends BaseComponent {
     this.remove = fileItem => {
       this.foundation.handleRemove(fileItem);
     };
+    /**
+     * ref method
+     * insert files at index
+     * @param files Array<CustomFile>
+     * @param index number
+     * @returns
+     */
+
+
+    this.insert = (files, index) => {
+      return this.foundation.insertFileToList(files, index);
+    };
+    /**
+     * ref method
+     * manual upload by user
+     */
+
 
     this.upload = () => {
       const {
@@ -87,14 +104,18 @@ class Upload extends BaseComponent {
         name,
         status,
         validateMessage,
-        _sizeInvalid
+        _sizeInvalid,
+        uid
       } = file;
       const {
         previewFile,
         listType,
         itemStyle,
         showRetry,
+        showPicInfo,
+        renderPicInfo,
         renderFileItem,
+        renderThumbnail,
         disabled,
         onPreviewClick,
         showReplace
@@ -115,10 +136,14 @@ class Upload extends BaseComponent {
         listType,
         onRemove,
         onRetry,
-        key: _concatInstanceProperty(_context = "".concat(name)).call(_context, index),
+        index,
+        key: uid || _concatInstanceProperty(_context = "".concat(name)).call(_context, index),
         showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
+        showPicInfo,
+        renderPicInfo,
+        renderThumbnail,
         showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
@@ -140,27 +165,69 @@ class Upload extends BaseComponent {
     };
 
     this.renderFileList = () => {
+      const {
+        listType
+      } = this.props;
+
+      if (listType === strings.FILE_LIST_PIC) {
+        return this.renderFileListPic();
+      }
+
+      if (listType === strings.FILE_LIST_DEFAULT) {
+        return this.renderFileListDefault();
+      }
+
+      return null;
+    };
+
+    this.renderFileListPic = () => {
       const {
         showUploadList,
-        listType,
         limit,
         disabled,
-        children
+        children,
+        draggable
       } = this.props;
       const {
-        fileList: stateFileList
+        fileList: stateFileList,
+        dragAreaStatus
       } = this.state;
       const fileList = this.props.fileList || stateFileList;
-      const isPicType = listType === strings.FILE_LIST_PIC;
-      const showAddTriggerInList = isPicType && (limit ? limit > fileList.length : true);
+      const showAddTriggerInList = limit ? limit > fileList.length : true;
+      const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
       const uploadAddCls = cls("".concat(prefixCls, "-add"), {
-        ["".concat(prefixCls, "-picture-add")]: isPicType,
+        ["".concat(prefixCls, "-picture-add")]: true,
         ["".concat(prefixCls, "-picture-add-disabled")]: disabled
       });
-      const addContent = /*#__PURE__*/React.createElement("div", {
+      const fileListCls = cls("".concat(prefixCls, "-file-list"), {
+        ["".concat(prefixCls, "-picture-file-list")]: true
+      });
+      const dragAreaCls = cls({
+        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === strings.DRAG_AREA_LEGAL,
+        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === strings.DRAG_AREA_ILLEGAL
+      });
+      const mainCls = "".concat(prefixCls, "-file-list-main");
+      const addContentProps = {
         className: uploadAddCls,
         onClick: this.onClick
-      }, children);
+      };
+      const containerProps = {
+        className: fileListCls
+      };
+      const draggableProps = {
+        onDrop: this.onDrop,
+        onDragOver: this.onDragOver,
+        onDragLeave: this.onDragLeave,
+        onDragEnter: this.onDragEnter
+      };
+
+      if (draggable) {
+        _Object$assign(addContentProps, draggableProps, {
+          className: cls(uploadAddCls, dragAreaCls)
+        });
+      }
+
+      const addContent = /*#__PURE__*/React.createElement("div", _Object$assign({}, addContentProps), children);
 
       if (!showUploadList || !fileList.length) {
         if (showAddTriggerInList) {
@@ -170,18 +237,39 @@ class Upload extends BaseComponent {
         return null;
       }
 
-      const fileListCls = cls("".concat(prefixCls, "-file-list"), {
-        ["".concat(prefixCls, "-picture-file-list")]: isPicType
-      });
+      return /*#__PURE__*/React.createElement(LocaleConsumer, {
+        componentName: "Upload"
+      }, locale => /*#__PURE__*/React.createElement("div", _Object$assign({}, containerProps), /*#__PURE__*/React.createElement("div", {
+        className: mainCls
+      }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+    };
+
+    this.renderFileListDefault = () => {
+      const {
+        showUploadList,
+        limit,
+        disabled
+      } = this.props;
+      const {
+        fileList: stateFileList
+      } = this.state;
+      const fileList = this.props.fileList || stateFileList;
+      const fileListCls = cls("".concat(prefixCls, "-file-list"));
       const titleCls = "".concat(prefixCls, "-file-list-title");
       const mainCls = "".concat(prefixCls, "-file-list-main");
-      const showTitle = limit !== 1 && fileList.length && listType !== strings.FILE_LIST_PIC;
+      const showTitle = limit !== 1 && fileList.length;
       const showClear = this.props.showClear && !disabled;
+      const containerProps = {
+        className: fileListCls
+      };
+
+      if (!showUploadList || !fileList.length) {
+        return null;
+      }
+
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Upload"
-      }, locale => /*#__PURE__*/React.createElement("div", {
-        className: fileListCls
-      }, showTitle ? /*#__PURE__*/React.createElement("div", {
+      }, locale => /*#__PURE__*/React.createElement("div", _Object$assign({}, containerProps), showTitle ? /*#__PURE__*/React.createElement("div", {
         className: titleCls
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(titleCls, "-choosen")
@@ -190,7 +278,7 @@ class Upload extends BaseComponent {
         className: "".concat(titleCls, "-clear")
       }, locale.clear) : null) : null, /*#__PURE__*/React.createElement("div", {
         className: mainCls
-      }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)))));
     };
 
     this.onDrop = e => {
@@ -210,6 +298,28 @@ class Upload extends BaseComponent {
       this.foundation.handleDragEnter(e);
     };
 
+    this.renderAddContent = () => {
+      const {
+        draggable,
+        children,
+        listType
+      } = this.props;
+      const uploadAddCls = cls("".concat(prefixCls, "-add"));
+
+      if (listType === strings.FILE_LIST_PIC) {
+        return null;
+      }
+
+      if (draggable) {
+        return this.renderDragArea();
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: uploadAddCls,
+        onClick: this.onClick
+      }, children);
+    };
+
     this.renderDragArea = () => {
       const {
         dragAreaStatus
@@ -267,6 +377,14 @@ class Upload extends BaseComponent {
     this.inputRef = /*#__PURE__*/React.createRef();
     this.replaceInputRef = /*#__PURE__*/React.createRef();
   }
+  /**
+   * Notes:
+   *   The input parameter and return value here do not declare the type, otherwise tsc may report an error in form/fields.tsx when wrap after withField
+   *   `The types of the parameters "props" and "nextProps" are incompatible.
+         The attribute "action" is missing in the type "Readonly<any>", but it is required in the type "UploadProps".`
+   *   which seems to be a bug, remove props type declare here
+   */
+
 
   static getDerivedStateFromProps(props) {
     const {
@@ -388,7 +506,6 @@ class Upload extends BaseComponent {
       ["".concat(prefixCls, "-warning")]: validateStatus === 'warning',
       ["".concat(prefixCls, "-success")]: validateStatus === 'success'
     }, className);
-    const uploadAddCls = cls("".concat(prefixCls, "-add"));
     const inputCls = cls("".concat(prefixCls, "-hidden-input"));
     const inputReplaceCls = cls("".concat(prefixCls, "-hidden-input-replace"));
     const promptCls = cls("".concat(prefixCls, "-prompt"));
@@ -397,10 +514,6 @@ class Upload extends BaseComponent {
       directory: 'directory',
       webkitdirectory: 'webkitdirectory'
     } : {};
-    const addContent = listType !== strings.FILE_LIST_PIC ? /*#__PURE__*/React.createElement("div", {
-      className: uploadAddCls,
-      onClick: this.onClick
-    }, children) : null;
     return /*#__PURE__*/React.createElement("div", {
       className: uploadCls,
       style: style,
@@ -426,7 +539,7 @@ class Upload extends BaseComponent {
       tabIndex: -1,
       className: inputReplaceCls,
       ref: this.replaceInputRef
-    }), draggable ? this.renderDragArea() : addContent, prompt ? /*#__PURE__*/React.createElement("div", {
+    }), this.renderAddContent(), prompt ? /*#__PURE__*/React.createElement("div", {
       className: promptCls
     }, prompt) : null, validateMessage ? /*#__PURE__*/React.createElement("div", {
       className: validateMsgCls
@@ -481,7 +594,10 @@ Upload.propTypes = {
   prompt: PropTypes.node,
   promptPosition: PropTypes.oneOf(strings.PROMPT_POSITION),
   renderFileItem: PropTypes.func,
+  renderPicInfo: PropTypes.func,
+  renderThumbnail: PropTypes.func,
   showClear: PropTypes.bool,
+  showPicInfo: PropTypes.bool,
   showReplace: PropTypes.bool,
   showRetry: PropTypes.bool,
   showUploadList: PropTypes.bool,
@@ -515,6 +631,7 @@ Upload.defaultProps = {
   onSuccess: _noop,
   promptPosition: 'right',
   showClear: true,
+  showPicInfo: false,
   showReplace: false,
   showRetry: true,
   showUploadList: true,

package/lib/es/upload/interface.d.ts

@@ -42,12 +42,15 @@ export interface FileItem extends BaseFileItem {
     validateMessage?: ReactNode;
 }
 export interface RenderFileItemProps extends FileItem {
+    index?: number;
     previewFile?: (fileItem: RenderFileItemProps) => ReactNode;
     listType: UploadListType;
     onRemove: (props: RenderFileItemProps, e: MouseEvent) => void;
     onRetry: (props: RenderFileItemProps, e: MouseEvent) => void;
     onReplace: (props: RenderFileItemProps, e: MouseEvent) => void;
     key: string;
+    showPicInfo?: boolean;
+    renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     showRetry: boolean;
     showReplace: boolean;
     style?: CSSProperties;

package/locale/source/es.ts

@@ -0,0 +1,160 @@
+import { es } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+/**
+ * [i18n-Spanish(es)]
+ *
+ */
+
+const locale: Locale = {
+    code: 'es',
+    dateFnsLocale: es,
+    Pagination: {
+        item: 'objeto',
+        pageSize: ' objetos / página',
+        page: ' páginas',
+        total: '',
+        jumpTo: 'Ir a',
+    },
+    Modal: {
+        confirm: 'Aceptar',
+        cancel: 'Cancelar',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Seleccionar hora',
+            timeRange: 'Seleccionar rango de tiempo',
+        },
+        begin: 'Hora inicial',
+        end: 'Hora final',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: 'AM',
+        PM: 'PM',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Seleccionar fecha',
+            dateTime: 'Seleccionar hora y fecha',
+            dateRange: ['Fecha inicial', 'Fecha final'],
+            dateTimeRange: ['Fecha inicial', 'Fecha final'],
+        },
+        footer: {
+            confirm: 'Aceptar',
+            cancel: 'Cancelar',
+        },
+        selectDate: 'Seleccionar fecha',
+        selectTime: 'Seleccionar hora',
+        year: 'año',
+        month: 'mes',
+        day: 'día',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'Ene',
+            2: 'Feb',
+            3: 'Mar',
+            4: 'Abr',
+            5: 'May',
+            6: 'Jun',
+            7: 'Jul',
+            8: 'Ago',
+            9: 'Sep',
+            10: 'Oct',
+            11: 'Nov',
+            12: 'Dic',
+        },
+        fullMonths: {
+            1: 'Enero',
+            2: 'Febrero',
+            3: 'Marzo',
+            4: 'Abril',
+            5: 'Mayo',
+            6: 'Junio',
+            7: 'Julio',
+            8: 'Agosto',
+            9: 'Septiembre',
+            10: 'Octubre',
+            11: 'Noviembre',
+            12: 'Diciembre',
+        },
+        weeks: {
+            Mon: 'Lun',
+            Tue: 'Mar',
+            Wed: 'Mie',
+            Thu: 'Jue',
+            Fri: 'Vie',
+            Sat: 'Sab',
+            Sun: 'Dom',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Popconfirm: {
+        confirm: 'Aceptar',
+        cancel: 'Cancelar',
+    },
+    Navigation: {
+        collapseText: 'Contraer barra lateral',
+        expandText: 'Expandir barra lateral',
+    },
+    Table: {
+        emptyText: 'Sin resultados',
+        pageText: 'Mostrando del ${currentStart} al ${currentEnd} de ${total}',
+    },
+    Select: {
+        emptyText: 'Sin resultados',
+        createText: 'Crear',
+    },
+    Tree: {
+        emptyText: 'Sin resultados',
+        searchPlaceholder: 'Búsqueda',
+    },
+    Cascader: {
+        emptyText: 'Sin resultados',
+    },
+    List: {
+        emptyText: 'Sin resultados',
+    },
+    Calendar: {
+        allDay: 'Todo el día',
+        AM: '${time} AM',
+        PM: '${time} PM',
+        datestring: '',
+        remaining: '${remained} mas',
+    },
+    Upload: {
+        mainText: 'Clic aquí para cargar archivo o arrastre aquí el archivo',
+        illegalTips: 'Este tipo de archivo no es compatible',
+        legalTips: 'Suelte y comience a cargar',
+        retry: 'Reintentar',
+        replace: 'Reemplazar archivo',
+        clear: 'Limpiar',
+        selectedFiles: 'Archivos seleccionados',
+        illegalSize: 'Tamaño de archivo inválido',
+        fail: 'Error al cargar',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Búsqueda',
+    },
+    Typography: {
+        copy: 'Copiar',
+        copied: 'Copiado',
+        expand: 'Expandir',
+        collapse: 'Contraer',
+    },
+    Transfer: {
+        emptyLeft: 'Sin datos',
+        emptySearch: 'Sin resultados de búsqueda',
+        emptyRight: 'Sin contenido, verifique desde la izquierda',
+        placeholder: 'Búsqueda',
+        clear: 'Limpiar',
+        selectAll: 'Seleccionar todo',
+        clearSelectAll: 'Deseleccionar todo',
+        total: 'Total ${total} objetos',
+        selected: '${total} objetos seleccionados',
+    },
+};
+
+export default locale;

package/modal/Modal.tsx

@@ -11,9 +11,9 @@ import PropTypes from 'prop-types';
 import { noop } from 'lodash';
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import BaseComponent from '../_base/baseComponent';
-import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from '../modal/confirm';
+import confirm, { withConfirm, withError, withInfo, withSuccess, withWarning } from './confirm';
 import { Locale } from '../locale/interface';
-import useModal from '../modal/useModal';
+import useModal from './useModal';
 import { ButtonProps } from '../button/Button';
 
 export const destroyFns: any[] = [];
@@ -47,8 +47,8 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         closable: PropTypes.bool,
         centered: PropTypes.bool,
         visible: PropTypes.bool,
-        width: PropTypes.number,
-        height: PropTypes.number,
+        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         confirmLoading: PropTypes.bool,
         cancelLoading: PropTypes.bool,
         okText: PropTypes.string,
@@ -264,9 +264,9 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         if (!visible && !hidden) {
             this.foundation.toggleHidden(true, () => this.foundation.afterClose());
         } else if (visible && this.state.hidden) {
-            this.foundation.toggleHidden(false)
+            this.foundation.toggleHidden(false);
         }
-    }
+    };
 
     renderFooter = (): ReactNode => {
         const {

package/navigation/__test__/navigation.test.js

@@ -36,7 +36,7 @@ describe(`Navigation`, () => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,
@@ -71,7 +71,7 @@ describe(`Navigation`, () => {
                 onSelect={data => console.log('trigger onSelect: ', data)}
                 onClick={data => console.log('trigger onClick: ', data)}
             >
-                <Nav.Header logo={'bytedance_logo'} text={'直播运营后台'} />
+                <Nav.Header logo={'bytedance_logo'} text={'Semi 运营后台'} />
                 <Nav.Item itemKey={'union'} text={'公会中心'} icon={'star'} />
                 <Nav.Sub itemKey={'user'} text="用户管理" icon="user">
                     <Nav.Item itemKey={'golder'} text={'金主管理'} />
@@ -135,7 +135,7 @@ describe(`Navigation`, () => {
                 items={items}
                 header={{
                     logo: 'bytedance_logo',
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{ collapseButton: true }}
             />
@@ -201,7 +201,7 @@ describe(`Navigation`, () => {
                 onClick={onClick}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwzthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/AutoOpen/index.js

@@ -55,7 +55,7 @@ const Demo = (props = {}) => {
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/WithChildren/index.js

@@ -106,7 +106,7 @@ const Demo = (props = {}) => {
                 onOpenChange={onOpenChange}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
-                    text: '直播运营后台',
+                    text: 'Semi 运营后台',
                 }}
                 footer={{
                     collapseButton: true,

package/navigation/_story/navigation.stories.js

@@ -272,7 +272,7 @@ class HorizontalDemo extends React.Component {
             logo: (
               <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />
             ),
-            text: '直播运营后台',
+            text: 'Semi 运营后台',
           }}
           footer={{
             collapseButton: true,