tntd 1.3.50 → 1.3.54

package/components/Layout/Avatar.js

@@ -1,8 +1,10 @@
+import { useContext } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { Popover, Button } from 'antd';
 import deleteAllCookiesFactory from 'delete-all-cookies';
 import { get } from 'lodash';
 import images from './images';
+import ActionsContext from './ActionsContext';
 
 const Avatar = styled.li`
     margin-right: 0;
@@ -73,6 +75,7 @@ const UserInfoWrapper = styled.div`
 
 const UserInfoContent = props => {
     const { userInfo, onLogout, onChangePassword = () => true, onPersonalSetting = () => true } = props;
+    const { getText } = useContext(ActionsContext);
 
     return (
         <UserInfoWrapper className="user-info-setting-wrap">
@@ -83,8 +86,8 @@ const UserInfoContent = props => {
                 <p className="user-info-body-account">
                     {userInfo.account}
                 </p>
-                <a onClick={onPersonalSetting} href="/bridge/userCenter?currentTab=1">个人设置</a>
-                <a onClick={onChangePassword} href="/bridge/userCenter?currentTab=2">修改密码</a>
+                <a onClick={onPersonalSetting} href="/bridge/userCenter?currentTab=1">{getText('personalSettings')}</a>
+                <a onClick={onChangePassword} href="/bridge/userCenter?currentTab=2">{getText('changePwd')}</a>
             </div>
             <div className="user-info-footer">
                 <Button
@@ -99,7 +102,7 @@ const UserInfoContent = props => {
                         }
                     }}
                 >
-                    <a>退出</a>
+                    <a>{getText('signOut')}</a>
                 </Button>
             </div>
         </UserInfoWrapper>

package/components/Layout/GlobalNavigation/NavigationPopup.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { debounce } from 'lodash';
 import { traverseTree, hasLevel3 } from '../utils';
 import Icon from '../Iconfont';
+import { getText } from '../../locale';
 
 const SearchArea = styled.div`
     position: relative;
@@ -143,6 +144,7 @@ const SearchList = ({ items, onSelectMenu, theme }) => (
 export default ({ theme, menus = [], close, actions, popupRef, containerRef }) => {
     const [active, setActive] = useState(false);
     const [searchValue, setSearchValue] = useState();
+    const language = actions?.getLanguage();
     const isLevel3 = hasLevel3(menus);
     const [activeTopMenu, setActiveTopMenu] = useState(isLevel3 ? menus?.[0] : null);
     const selectedMenuKey = actions.getSelectedMenuKey();
@@ -274,7 +276,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
             <SearchArea theme={theme} className={cn({ active })}>
                 <Icon type="search" />
                 <input
-                    placeholder="菜单搜索"
+                    placeholder={actions?.getText('menuSearch')}
                     value={searchValue}
                     onChange={onSearchChange}
                     onFocus={() => setActive(true)}
@@ -300,7 +302,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
                                     className={cn({ active: menu.code === activeTopMenu?.code})}
                                     onClick={() => onSelectAppTab(menu)}
                                 >
-                                    {menu?.groupName}
+                                    {menu?.[language === 'cn' ? 'groupName' : 'enName']}
                                 </li>
                             ))
                         }
@@ -314,7 +316,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
                             {
                                 groups?.map(group => (
                                     <GroupMenuItem theme={theme}>
-                                        <h5>{group.groupName}</h5>
+                                        <h5>{group?.[language === 'cn' ? 'groupName' : 'enName']}</h5>
                                         <MenuList>
                                             {
                                                 (group.children || []).map(menu => (
@@ -328,7 +330,7 @@ export default ({ theme, menus = [], close, actions, popupRef, containerRef }) =
                                                             href={menu.path}
                                                             onClick={evt => evt.preventDefault()}
                                                         >
-                                                            {menu.menuName}
+                                                            {menu?.[language === 'cn' ? 'menuName' : 'enName']}
                                                         </a>
                                                     </MenuItem>
                                                 ))

package/components/Layout/GlobalNavigation/index.js

@@ -63,6 +63,7 @@ const GlobalStyle = createGlobalStyle`
 export default withTheme(
     props => {
         const actions = useContext(ActionsContext);
+        const { getText } = actions;
         const { headerRef, menus } = props;
         const [visible, setVisible] = useState(false);
         const popupRef = useRef();
@@ -108,7 +109,7 @@ export default withTheme(
                 className={cn({ active: visible })}
             >
                 <Icon type="unordered-list" />
-                <span>全局导航</span>
+                <span>{getText('globalNavigation')}</span>
                 <GlobalStyle hasLevel3={hasLevel3(menus)}/>
             </Navigation>
         );

package/components/Layout/HeaderActions.js

@@ -82,6 +82,7 @@ export default withTheme(
             AvatarCustom,
             ...rest
         } = props;
+
         return (
             <Actions {...rest}>
                 {extraActions}

package/components/Layout/README.md

@@ -262,7 +262,8 @@ ReactDOM.render(
         enName="Private Cloud"
         config={{
             globalNavigation: true,
-            theme:true
+            theme:true,
+            language: true
         }}
         appList={[
             { key: 'movie', name: '电影图谱', children: [{ key: 'movie1', name: 'subitem' }] },

package/components/Layout/createActions.js

@@ -1,9 +1,11 @@
 import EventEmitter from 'eventemitter3';
+import { getText } from '../locale';
 
-export default () => {
+export default (params) => {
     const eventEmitter = new EventEmitter();
     const data = {
-        selectedMenuKey: null
+        language: params?.language || 'cn',
+        selectedMenuKey: null,
     };
 
     return {
@@ -16,6 +18,12 @@ export default () => {
         },
         getSelectedMenuKey: () => data.selectedMenuKey,
 
+        getLanguage: () => data.language,
+
+        setLanguage: language => data.language = language,
+
+        getText: (key, language = data.language) => getText(key, language),
+
         on: (eventName, callback) => {
             eventEmitter.on(eventName, callback);
         },

package/components/Layout/index.js

@@ -9,6 +9,7 @@ import AuthContext from '../AuthContext';
 import { safeParseJSON, findMenuInfoByPath } from './utils';
 import ActionsContext from './ActionsContext';
 import createActions from './createActions';
+import { getLanguageStore } from './storage';
 
 export const HeaderActionItem = props => (
     <li {...props}>
@@ -42,6 +43,11 @@ const TNTLayout = ({ type, config, ...props }) => {
     const extendMap = typeof props.extendMap === 'string' ? safeParseJSON(props.extendMap, {}) : props.extendMap;
     const { displayType = 'default', menuAlignMode, globalNavigation = false, language = ['cn'], themeSwitch = true } = extendMap || {};
     const userInfo = props.userInfo || {};
+    const actionsContextValue = createActions({ language: getLanguageStore() || userInfo.lang || 'cn' });
+    const onLanguageChange = language => {
+        actionsContextValue.setLanguage(language);
+        props?.onLanguageChange(language);
+    };
 
     // layout上的指定的属性优先级会高于extendMap中的属性
     type = type || displayType;
@@ -55,7 +61,7 @@ const TNTLayout = ({ type, config, ...props }) => {
     return (
         <ThemeProvider theme={theme}>
             <AuthContext.Provider value={getCheckAuth(props.menus)}>
-                <ActionsContext.Provider value={createActions()}>
+                <ActionsContext.Provider value={actionsContextValue}>
                     {
                         type === 'paas' &&
                         <PaasLayout
@@ -65,6 +71,7 @@ const TNTLayout = ({ type, config, ...props }) => {
                             extraHeaderActions={extraHeaderActions}
                             isInIframe={isInIframe}
                             userInfo={userInfo}
+                            onLanguageChange={onLanguageChange}
                         />
                     }
                     {
@@ -76,6 +83,7 @@ const TNTLayout = ({ type, config, ...props }) => {
                             extraHeaderActions={extraHeaderActions}
                             isInIframe={isInIframe}
                             userInfo={userInfo}
+                            onLanguageChange={onLanguageChange}
                         />
                     }
                     {
@@ -87,6 +95,7 @@ const TNTLayout = ({ type, config, ...props }) => {
                             extraHeaderActions={extraHeaderActions}
                             isInIframe={isInIframe}
                             userInfo={userInfo}
+                            onLanguageChange={onLanguageChange}
                         />
                     }
                 </ActionsContext.Provider>

package/components/Layout/utils.js

@@ -79,8 +79,8 @@ export const isNewTabMenu = menu => {
     return target === '_blank' || (/^http/i.test(path) && /blankType=newTarget/.test(path));
 };
 
-export const openInNewTab = menu => {
-    window.open(menu?.path, '_blank');
+export const openInNewTab = path => {
+    window.open(path, '_blank');
 };
 
 export const traverseTree = (treeData, callback, pnode, pnodes = []) => {

package/components/Page/Box.js

@@ -4,7 +4,7 @@ import { addUnitForValue } from './utils';
 
 const Box = ({
     inLayout,
-    clsPrefix,
+    clsPrefix = 'tnt-page',
     children,
     noPadding = false,
     headerHeight,
@@ -46,8 +46,8 @@ const Box = ({
             bordered={bordered}
             bodyStyle={{
                 ...bodyStyle,
-                overflow: 'auto',
-                height: inLayout ? 'auto' : cardBodyHeight
+                // overflow: 'auto',
+                height: inLayout ? `calc(100% - ${headerHeight})` : cardBodyHeight
             }}
             size={size}
             headStyle={headStyle}

package/components/Page/README.md

@@ -67,8 +67,8 @@ const Demo = (props) => {
       <h3>第三种场景， 无标题栏</h3>
 
       <Page height="400px">
-        <Box title='分组列表' extra={<Button type="primary" size="small">添加</Button>}>第一列</Box>
-        <Box mode="white" title='菜单列表' extra={<Button type="primary" size="small">添加</Button>}>第二列</Box>
+        <Box title='分组列表' extra={<Button type="primary" size='small'>添加</Button>}>第一列</Box>
+        <Box mode="white" title='菜单列表' extra={<Button type="primary" size='small'>添加</Button>}>第二列</Box>
         <Box title="系统列表">第三列</Box>
         <Box title="功能注册">第四列</Box>
       </Page>
@@ -86,7 +86,13 @@ const Demo = (props) => {
             // extra={right}
             inLayout
         >
-            <Box title="系统列表" width={320}>第三列</Box>
+            <Box 
+                title="系统列表" 
+                width={320}
+                mode='white'
+            >
+                第三列
+            </Box>
             <Box title="功能注册">
                 第四列<br/>
                 第四列<br/>
@@ -114,7 +120,14 @@ const Demo = (props) => {
                 第四列<br/>
                 第四列<br/>
                 第四列<br/>
-                第四列<br/>
+                第四列end
+            </Box>
+             <Box 
+                title="系统列表" 
+                width={200}
+                mode='white'
+            >
+                第三列
             </Box>
         </Page>
       </Layout>
@@ -154,7 +167,6 @@ ReactDOM.render(<Demo />, document.getElementById('root'))
 
 
 
-
 #### Page.Box
 
 描述：Page.Box包裹了antd库中的Card组件，Box属性都会透传到Card组件。

package/components/Page/index.js

@@ -62,9 +62,9 @@ const PageLayout = ({
     console.log(boxCount);
 
     whiteCols = childrenToArray?.filter(({ props }) => props?.mode === 'white')?.length;
-    const total = childrenToArray?.length;
+    const total = childrenToArray?.length + 5;
     let startIndex = total - whiteCols - 1;
-    let endIndex = total - 1;
+    let endIndex = total - 2;
     const headerStyle = {
         height: computedHeaderHeight,
         padding: `${size === 'small' ? 20 : 24}px`,
@@ -140,7 +140,7 @@ const PageLayout = ({
                     const style = {
                         flex: computeWidth(width),
                         // 设置cols层级关系
-                        zIndex: mode === 'gray' ? startIndex-- : endIndex--
+                        zIndex: mode === 'gray' ? endIndex-- : startIndex++
                     };
 
                     const className = cn(`${clsPrefix}-box ${clsPrefix}-box-${mode}`);

package/components/Page/index.less

@@ -1,26 +1,46 @@
+.large-size > .ant-layout-content {
+    .tnt-page.in-layout {
+        height: calc(100vh - 60px);
+    }
+}
 .tnt-page {
     position: relative;
     width: 100%;
     height: 100%;
     overflow-y: hidden;
 
+    &.in-layout {
+        box-shadow: none;
+        height: calc(100vh - 50px);
+        .tnt-page-box,
+        .tnt-page-box > .ant-card {
+            height: 100%;
+        }
+        .tnt-page-content .tnt-page-box .ant-card .ant-card-body {
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    }
+
     &-box-white {
         z-index: 1;
         background: #f3f5f6;
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 12px 2px rgba(170, 182, 206, 0.2);
-        .inLayout & {
-            background: #fbfcfe;
-            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 2px rgba(170, 182, 206, 0.2);
+
+        .in-layout & {
+            background: #fafbfc;
         }
     }
 
+
     &-box-gray {
         background: #e8ebed;
         box-shadow: 0 10px 12px 2px rgba(0, 0, 0, 0.1);
 
-        .inLayout & {
+        .in-layout & {
             background: #f8f9fa;
-            box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
+            // box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
         }
     }
 
@@ -36,7 +56,7 @@
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1),
                     0 10px 6px 0 rgba(170, 182, 206, 0.2);
 
-        .inLayout & {
+        .in-layout & {
             background: #ffffff;
             box-shadow: none;
         }
@@ -76,9 +96,13 @@
         .ant-card-head {
             border-bottom: 1px solid #e0e0e0;
             margin-bottom: 0;
-            height: 60px;
+            // height: 60px;
             .small & {
                 height: 40px;
+                line-height: 40px;
+            }
+            .ant-card-head-title {
+                font-weight: normal;
             }
         }
         .ant-card-body {

package/components/QueryForm/index.js

@@ -6,10 +6,10 @@ import useForm from './useForm';
 import createActions from './createActions';
 import Icon from '../Icon';
 import Field from './Field';
+import { getText, getLanguage } from '../locale';
 import './index.less';
 
 const clsPrefix = 'tnt-queryform';
-const isInput = type => ['input', 'string', 'search'].includes(type);
 
 class QueryForm extends React.PureComponent {
     constructor(props) {
@@ -50,7 +50,7 @@ class QueryForm extends React.PureComponent {
                         <Badge count={drawerFieldsValueCount}>
                             <Button onClick={this.onShowDrawer}>
                                 <Icon type="filter" />
-                                更多过滤
+                                {this.getText('moreFiltering')}
                             </Button>
                         </Badge>
                     )
@@ -58,14 +58,14 @@ class QueryForm extends React.PureComponent {
                 {
                     showSearch && (
                         <Button type="primary" onClick={this.onSearch}>
-                            搜索
+                            {this.getText('search')}
                         </Button>
                     )
                 }
                 {
                     showReset && (
                         <Button onClick={this.onReset}>
-                            重置
+                            {this.getText('reset')}
                         </Button>
                     )
                 }
@@ -76,7 +76,7 @@ class QueryForm extends React.PureComponent {
                             type="link"
                             onClick={this.onToggleExpand}
                         >
-                            {expanded ? '收起' : '展开'}
+                            {this.getText(expanded ? 'collapse' : 'expand')}
                         </Button>
                     )
                 }
@@ -117,7 +117,7 @@ class QueryForm extends React.PureComponent {
                     {
                         showFieldCount && (
                             <Drawer
-                                title="更多过滤"
+                                title={this.getText('moreFiltering')}
                                 visible={drawerVisible}
                                 onClose={() => this.setState({ drawerVisible: false })}
                                 width={300}
@@ -143,10 +143,10 @@ class QueryForm extends React.PureComponent {
                                     )
                                 }
                                 <Button type="primary" onClick={this.onSearch}>
-                                    搜索
+                                    {this.getText('search')}
                                 </Button>
                                 <Button onClick={this.onReset}>
-                                    重置
+                                    {this.getText('reset')}
                                 </Button>
                             </Drawer>
                         )
@@ -163,6 +163,10 @@ class QueryForm extends React.PureComponent {
         );
     }
 
+    getText(key) {
+        return getText(key, this.props.language || getLanguage());
+    }
+
     isFieldsWidthOverflow() {
         const { current } = this.fieldsRef;
 

package/components/QueryListScene/List.js

@@ -8,6 +8,7 @@ import cn from 'classnames';
 import { get, pickBy, isEmpty, debounce, throttle } from 'lodash';
 import { Spin } from 'antd';
 import Table from '../Table';
+import { getText, getLanguage } from '../locale';
 
 export default class QueryList extends React.PureComponent {
     constructor(props) {
@@ -57,7 +58,7 @@ export default class QueryList extends React.PureComponent {
             // size: 'small',
             showQuickJumper: true,
             showSizeChanger: true,
-            showTotal: total => `共${total}条记录`,
+            showTotal: total => getText('totalRecords', getLanguage(), total),
             ...(pagination || {})
         };
         const expandProps = {

package/components/locale.js

@@ -0,0 +1,60 @@
+
+export const zh_CN = {
+    globalNavigation: '全局导航',
+    menuSearch: '菜单搜索',
+
+    // QueryForm
+    search: '搜索',
+    reset: '重置',
+    moreFiltering: '更多过滤',
+    expand: '展开',
+    collapse: '收起',
+
+    // QueryListScene
+    totalRecords: '共%s条记录',
+
+    // user popover
+    personalSettings: '个人设置',
+    changePwd: '修改密码',
+    signOut: '退出'
+};
+
+export const en_US = {
+    globalNavigation: 'Global Navigation',
+    menuSearch: 'Menu Search',
+
+
+    // QueryForm
+    search: 'Search',
+    reset: 'Reset',
+    moreFiltering: 'More filtering',
+    expand: 'Expand',
+    collapse: 'Collapse',
+
+    // QueryListScene
+    totalRecords: 'Total of %s records',
+
+    // user popover
+    personalSettings: 'Personal settings',
+    changePwd: 'Change password',
+    signOut: 'Sign out'
+};
+
+export const getText = (key, language = 'cn', ...params) => {
+    const text = ({
+        cn: zh_CN,
+        en: en_US
+    }[language] || zh_CN)?.[key];
+
+    if (params?.length) {
+        return params.reduce((acc, cur) => {
+            return acc.replace(/%s/, cur);
+        }, text);
+    }
+
+    return text;
+};
+
+export const getLanguage = () => localStorage.getItem('lang') || 'cn';
+
+export default { en_US, zh_CN };

package/lib/BlockHeader/README.md

@@ -0,0 +1,83 @@
+## BlockHeader组件
+### 代码演示
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import {Button, Table} from "antd";
+import BlockHeader from './index';
+
+const Demo = props => {
+
+    return (
+        <div>
+            <BlockHeader 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='large'
+                extra={<Button>这是extra信息</Button>}
+            />
+            <br/>
+            <BlockHeader 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+            />
+            <br/>
+            <BlockHeader 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='small'
+            />
+            <br/>
+            <BlockHeader 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='large'
+                number={1}
+            />
+            <br/>
+            <BlockHeader 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                number={2}
+            />
+            <br/>
+            <BlockHeader 
+                title='这是标题'
+                subTitle='这是描述，相当于副标题'
+                tooltip='test'
+                placement="right"
+                size='small'
+                number={3}
+            />
+            <br/>
+        </div>
+    );
+};
+
+
+ReactDOM.render(
+    <Demo />,
+    document.getElementById('root')
+);
+```
+### API
+#### Handle
+| 属性名称         | 属性说明                    | 类型            | 默认值         | 是否必须 |
+| :----------     | :------------------------- | :------        | :----------   | :------- |
+| title           | 标题                        | String         | -             | 否       |
+| subTitle        | 副标题                      | String         | -             | 否       |
+| number          | 标题前是数字                 | Number         | -             | 否       |
+| size            | 大小，large、default、small  | String         | default       | 否       |
+| extra           | 右边区域内容                 | React node     | -             | 否        |
+

package/lib/BlockHeader/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var _default = function _default(props) {
+  var _ref = props || {},
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '暂无标题' : _ref$title,
+      subTitle = _ref.subTitle,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      extra = _ref.extra,
+      number = _ref.number,
+      rest = _objectWithoutProperties(_ref, ["title", "subTitle", "size", "extra", "number"]);
+
+  return React.createElement("div", {
+    className: (0, _classnames["default"])('tntd-block-header', size, {
+      'has-number': number
+    })
+  }, React.createElement("div", {
+    className: "tntd-block-header-title"
+  }, number && React.createElement("i", {
+    "class": "count"
+  }, number <= 9 ? "0".concat(number) : number), React.createElement("h3", null, title), React.createElement("span", null, subTitle)), extra && React.createElement("div", {
+    className: "tntd-block-header-extra"
+  }, extra));
+};
+
+exports["default"] = _default;