tntd 1.4.17 → 2.0.0-beta

package/dist/es/business-components/tntd-layout/AppList.js

@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from 'react';
+import styled, { withTheme } from 'styled-components';
+import { Dropdown, Menu, Input, Select, TreeSelect } from 'antd';
+import { get } from 'lodash';
+import Icon from '../tntd-icon';
+import { getCurrentAppStore, setCurrentAppStore } from './storage';
+import { traverseTree } from '../utils';
+const { Option } = Select;
+const MenuList = styled(Menu) `
+  border-radius: 0;
+  min-width: 250px;
+  max-height: 350px;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
+  .ant-dropdown-menu-item {
+    padding: 0 20px;
+    height: 44px;
+    line-height: 44px;
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+    &.app-search-warp {
+      padding: 0;
+      &:hover {
+        background: none;
+      }
+      .ant-input-affix-wrapper {
+        height: 100%;
+      }
+      .ant-input {
+        border: none;
+        border-bottom: 1px dashed #dcdcdc;
+        box-shadow: none;
+        padding: 0 20px;
+      }
+    }
+    i {
+      margin-right: 0 !important;
+      margin-left: 6px !important;
+    }
+  }
+  .isInIframe & {
+    margin-left: 20px;
+  }
+`;
+// 新版UI
+const AppsSelect = styled(Select) `
+  min-width: 160px;
+  height: 28px;
+  line-height: 28;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  .ant-select-selection,
+  .ant-select-selection__rendered {
+    line-height: 28px;
+    height: 28px;
+  }
+
+  .ant-select-selection {
+    .hasHeaderTabs & {
+      border-radius: 14px;
+      font-size: 12px;
+      // 去掉默认黑色
+      // background: #191D29;
+      // border: 1px solid rgba(186,189,197,0.60);
+      // color: rgba(255,255,255,.8);
+      // 统一为浅色调
+      background: #fff !important;
+      border-color: #c9d2dd !important;
+      color: #8b919e !important;
+    }
+    // 统一色调
+    // .tnt-themeS1.hasHeaderTabs & {
+    //     /* background: #141825; */
+    //     /* color: rgba(255,255,255,.85); */
+    //     background: #fff;
+    //     border-color: #c9d2dd;
+    //     color: #8b919e;
+    // }
+
+    // .tnt-themeS3.hasHeaderTabs &{
+    //     background: ${(props) => `${props.theme.blueBgColor} !important`}; //#1D4295
+    //     color: rgba(255,255,255,0.8);
+    //     border-color: rgba(255,255,255,0.5);
+    // }
+  }
+
+  .ant-select-arrow {
+    .hasHeaderTabs & {
+      color: #b2becd;
+    }
+    .tnt-themeS1 & {
+      /* color: rgba(255,255,255,.85); */
+    }
+  }
+
+  .tnt-themeS1 & {
+    border-radius: 2px;
+  }
+
+  .isInIframe & {
+    margin-left: 20px;
+  }
+`;
+const AppTreeSelect = styled(TreeSelect) `
+  min-width: 160px;
+  height: 28px;
+  line-height: 28;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+const SwitchAppMenu = styled.a `
+  display: block;
+  color: #666;
+  line-height: ${(props) => `${props.theme.headerHeight}px`};
+  font-size: ${(props) => `${props.theme.size === 'large' ? 16 : 14}px`};
+
+  .tnt-themeS1 & {
+    color: rgba(255, 255, 255, 0.85);
+  }
+  &:hover {
+    color: #666;
+  }
+  i {
+    margin-left: 12px;
+  }
+`;
+export default withTheme((props) => {
+    const { selectedKey, items = [], onChange } = props;
+    const getInitialSelectedApp = () => {
+        const currentAppStore = getCurrentAppStore();
+        const findAppByKey = (selectedKey) => {
+            let findApp;
+            traverseTree(items, (item) => {
+                if (item.key === selectedKey) {
+                    findApp = item;
+                    return false;
+                }
+            });
+            return findApp;
+        };
+        const currentApp = findAppByKey(selectedKey || get(currentAppStore, 'key'));
+        return currentApp || items[0];
+    };
+    const changeApp = (app) => {
+        setSelectedApp(app);
+        setCurrentAppStore(app);
+        onChange && onChange(app);
+    };
+    const [searchValue, setSearchValue] = useState();
+    const [selectedApp, setSelectedApp] = useState(getInitialSelectedApp());
+    const Menus = (React.createElement(MenuList, { selectedKeys: [get(selectedApp, 'key')] },
+        React.createElement(Menu.Item, { className: "app-search-warp", key: "search", disabled: true },
+            React.createElement(Input, { allowClear: true, placeholder: "\u8F93\u5165\u5173\u952E\u8BCD\u641C\u7D22", value: searchValue, onChange: (evt) => {
+                    setSearchValue(evt.target.value);
+                } })),
+        items
+            .filter(({ key, name } = {}) => {
+            const regExp = new RegExp(searchValue, 'i');
+            if (searchValue) {
+                return regExp.test(key) || regExp.test(name);
+            }
+            return true;
+        })
+            .map((item) => (React.createElement(Menu.Item, { key: item.key, onClick: changeApp.bind(this, item) }, item.name)))));
+    useEffect(() => {
+        const newApp = getInitialSelectedApp();
+        if ((newApp === null || newApp === void 0 ? void 0 : newApp.key) !== (selectedApp === null || selectedApp === void 0 ? void 0 : selectedApp.key)) {
+            changeApp(newApp);
+        }
+    }, [items, selectedKey]);
+    if (!props.theme.compatible) {
+        if (items === null || items === void 0 ? void 0 : items.some((item) => { var _a; return (_a = item.children) === null || _a === void 0 ? void 0 : _a.length; })) {
+            return (React.createElement(AppTreeSelect, { placeholder: "\u8BF7\u9009\u62E9", showSearch: true, treeNodeFilterProp: "title", treeDefaultExpandAll: true, dropdownClassName: "tnt-layout-header-app-tree-select", dropdownStyle: { maxHeight: 560 }, value: get(selectedApp, 'key'), treeData: traverseTree(items, (item) => {
+                    item.title = item.name;
+                    item.value = item.key;
+                    item.selectable = !item.children;
+                    item.disabled = !!item.children;
+                }), onChange: (appKey) => {
+                    let findItem;
+                    traverseTree(items, (node) => {
+                        if (node.key === appKey) {
+                            findItem = node;
+                            return false;
+                        }
+                    });
+                    changeApp(findItem);
+                }, style: { minWidth: 160, height: 28, lineHeight: 28 } }));
+        }
+        return (React.createElement(AppsSelect, { placeholder: "\u8BF7\u9009\u62E9", showSearch: true, optionFilterProp: "children", value: get(selectedApp, 'key'), onChange: (appKey) => {
+                changeApp(items.find(({ key }) => key === appKey));
+            }, style: { minWidth: 160, height: 28, lineHeight: 28 } }, items.map(({ key, name }) => (React.createElement(Option, { key: key, value: key }, name)))));
+    }
+    return (React.createElement(Dropdown, { overlay: Menus, trigger: ['click'] },
+        React.createElement(SwitchAppMenu, null,
+            React.createElement("span", null, get(selectedApp, 'name', '请选择')),
+            React.createElement(Icon, { type: "caret-down" }))));
+});
+//# sourceMappingURL=AppList.js.map

package/dist/es/business-components/tntd-layout/AppList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppList.js","sourceRoot":"","sources":["../../../../src/business-components/tntd-layout/AppList.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react'\nimport styled, { withTheme } from 'styled-components'\nimport { Dropdown, Menu, Input, Select, TreeSelect } from 'antd'\nimport { get } from 'lodash'\nimport Icon from '../tntd-icon'\nimport { getCurrentAppStore, setCurrentAppStore } from './storage'\nimport { traverseTree } from '../utils'\n\nconst { Option } = Select\nconst MenuList = styled(Menu)`\n  border-radius: 0;\n  min-width: 250px;\n  max-height: 350px;\n  overflow-y: auto;\n  border: 1px solid #ccc;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;\n  .ant-dropdown-menu-item {\n    padding: 0 20px;\n    height: 44px;\n    line-height: 44px;\n    &:hover {\n      background: rgba(0, 0, 0, 0.1);\n    }\n    &.app-search-warp {\n      padding: 0;\n      &:hover {\n        background: none;\n      }\n      .ant-input-affix-wrapper {\n        height: 100%;\n      }\n      .ant-input {\n        border: none;\n        border-bottom: 1px dashed #dcdcdc;\n        box-shadow: none;\n        padding: 0 20px;\n      }\n    }\n    i {\n      margin-right: 0 !important;\n      margin-left: 6px !important;\n    }\n  }\n  .isInIframe & {\n    margin-left: 20px;\n  }\n`\n\n// 新版UI\nconst AppsSelect = styled(Select)`\n  min-width: 160px;\n  height: 28px;\n  line-height: 28;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n  .ant-select-selection,\n  .ant-select-selection__rendered {\n    line-height: 28px;\n    height: 28px;\n  }\n\n  .ant-select-selection {\n    .hasHeaderTabs & {\n      border-radius: 14px;\n      font-size: 12px;\n      // 去掉默认黑色\n      // background: #191D29;\n      // border: 1px solid rgba(186,189,197,0.60);\n      // color: rgba(255,255,255,.8);\n      // 统一为浅色调\n      background: #fff !important;\n      border-color: #c9d2dd !important;\n      color: #8b919e !important;\n    }\n    // 统一色调\n    // .tnt-themeS1.hasHeaderTabs & {\n    //     /* background: #141825; */\n    //     /* color: rgba(255,255,255,.85); */\n    //     background: #fff;\n    //     border-color: #c9d2dd;\n    //     color: #8b919e;\n    // }\n\n    // .tnt-themeS3.hasHeaderTabs &{\n    //     background: ${(props) => `${props.theme.blueBgColor} !important`}; //#1D4295\n    //     color: rgba(255,255,255,0.8);\n    //     border-color: rgba(255,255,255,0.5);\n    // }\n  }\n\n  .ant-select-arrow {\n    .hasHeaderTabs & {\n      color: #b2becd;\n    }\n    .tnt-themeS1 & {\n      /* color: rgba(255,255,255,.85); */\n    }\n  }\n\n  .tnt-themeS1 & {\n    border-radius: 2px;\n  }\n\n  .isInIframe & {\n    margin-left: 20px;\n  }\n`\n\nconst AppTreeSelect = styled(TreeSelect)`\n  min-width: 160px;\n  height: 28px;\n  line-height: 28;\n  position: relative;\n  top: 50%;\n  transform: translateY(-50%);\n`\n\nconst SwitchAppMenu = styled.a`\n  display: block;\n  color: #666;\n  line-height: ${(props) => `${props.theme.headerHeight}px`};\n  font-size: ${(props) => `${props.theme.size === 'large' ? 16 : 14}px`};\n\n  .tnt-themeS1 & {\n    color: rgba(255, 255, 255, 0.85);\n  }\n  &:hover {\n    color: #666;\n  }\n  i {\n    margin-left: 12px;\n  }\n`\n\nexport default withTheme((props) => {\n  const { selectedKey, items = [], onChange } = props\n  const getInitialSelectedApp = () => {\n    const currentAppStore = getCurrentAppStore()\n    const findAppByKey = (selectedKey) => {\n      let findApp\n\n      traverseTree(items, (item) => {\n        if (item.key === selectedKey) {\n          findApp = item\n          return false\n        }\n      })\n\n      return findApp\n    }\n    const currentApp = findAppByKey(selectedKey || get(currentAppStore, 'key'))\n\n    return currentApp || items[0]\n  }\n  const changeApp = (app) => {\n    setSelectedApp(app)\n    setCurrentAppStore(app)\n    onChange && onChange(app)\n  }\n\n  const [searchValue, setSearchValue] = useState()\n  const [selectedApp, setSelectedApp] = useState(getInitialSelectedApp())\n  const Menus = (\n    <MenuList selectedKeys={[get(selectedApp, 'key')]}>\n      <Menu.Item className=\"app-search-warp\" key=\"search\" disabled>\n        <Input\n          allowClear\n          placeholder=\"输入关键词搜索\"\n          value={searchValue}\n          onChange={(evt) => {\n            setSearchValue(evt.target.value)\n          }}\n        />\n      </Menu.Item>\n      {items\n        .filter(({ key, name } = {}) => {\n          const regExp = new RegExp(searchValue, 'i')\n          if (searchValue) {\n            return regExp.test(key) || regExp.test(name)\n          }\n          return true\n        })\n        .map((item) => (\n          <Menu.Item key={item.key} onClick={changeApp.bind(this, item)}>\n            {item.name}\n          </Menu.Item>\n        ))}\n    </MenuList>\n  )\n\n  useEffect(() => {\n    const newApp = getInitialSelectedApp()\n\n    if (newApp?.key !== selectedApp?.key) {\n      changeApp(newApp)\n    }\n  }, [items, selectedKey])\n\n  if (!props.theme.compatible) {\n    if (items?.some((item) => item.children?.length)) {\n      return (\n        <AppTreeSelect\n          placeholder=\"请选择\"\n          showSearch\n          treeNodeFilterProp=\"title\"\n          treeDefaultExpandAll\n          dropdownClassName=\"tnt-layout-header-app-tree-select\"\n          dropdownStyle={{ maxHeight: 560 }}\n          value={get(selectedApp, 'key')}\n          treeData={traverseTree(items, (item) => {\n            item.title = item.name\n            item.value = item.key\n            item.selectable = !item.children\n            item.disabled = !!item.children\n          })}\n          onChange={(appKey) => {\n            let findItem\n\n            traverseTree(items, (node) => {\n              if (node.key === appKey) {\n                findItem = node\n                return false\n              }\n            })\n            changeApp(findItem)\n          }}\n          style={{ minWidth: 160, height: 28, lineHeight: 28 }}\n        />\n      )\n    }\n\n    return (\n      <AppsSelect\n        placeholder=\"请选择\"\n        showSearch\n        optionFilterProp=\"children\"\n        value={get(selectedApp, 'key')}\n        onChange={(appKey) => {\n          changeApp(items.find(({ key }) => key === appKey))\n        }}\n        style={{ minWidth: 160, height: 28, lineHeight: 28 }}\n      >\n        {items.map(({ key, name }) => (\n          <Option key={key} value={key}>\n            {name}\n          </Option>\n        ))}\n      </AppsSelect>\n    )\n  }\n\n  return (\n    <Dropdown overlay={Menus} trigger={['click']}>\n      <SwitchAppMenu>\n        <span>{get(selectedApp, 'name', '请选择')}</span>\n        <Icon type=\"caret-down\" />\n      </SwitchAppMenu>\n    </Dropdown>\n  )\n})\n"]}

package/dist/es/business-components/tntd-layout/Application.js

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import cn from 'classnames';
+import { Popover } from 'antd';
+import { get } from 'lodash';
+import { systemMap as applicationsMap } from '@tntx/logo-icon';
+import Iconfont from './Iconfont';
+import { defaultLogo } from './images';
+const App = styled.li `
+  margin-left: 20px;
+  font-size: 20px;
+  cursor: pointer;
+  .tnt-icon {
+    color: #17233d99;
+    .tnt-themeS1 & {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+`;
+const AppList = styled.ul `
+  list-style: none;
+  width: 264px;
+  margin: 0;
+  padding: 0;
+`;
+const AppItem = styled.li `
+  position: relative;
+  width: 88px;
+  padding: 8px 0;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  &:hover,
+  &.active {
+    background: #eee;
+  }
+  &.active:after {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-width: 5px 10px 0 0;
+    border-color: #333;
+    border-style: solid;
+    z-index: 9;
+  }
+  img {
+    width: 44px;
+    height: 44px;
+    margin-bottom: 6px;
+  }
+  div {
+    line-height: 20px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+`;
+const AppContentWrapper = styled.div `
+  background-color: #fff;
+  border-radius: 4px;
+  z-index: 1;
+`;
+const AppContent = (props) => {
+    const { language, apps, onChange } = props;
+    const [appKey, setAppKey] = useState(props.appKey);
+    const changeApp = (appKey) => {
+        setAppKey(appKey);
+        onChange && onChange(appKey);
+    };
+    return (React.createElement(AppContentWrapper, null,
+        React.createElement(AppList, null, apps
+            .sort((a, b) => get(applicationsMap, `${a.appKey}.sort`, 1) -
+            get(applicationsMap, `${b.appKey}.sort`, 1))
+            .map(({ appKey: key }) => (React.createElement(AppItem, { key: key, className: cn({ active: appKey === key }), onClick: changeApp.bind(this, key) },
+            React.createElement("img", { src: get(applicationsMap, `${key}.logo`, defaultLogo), onError: (e) => {
+                    e.target.onerror = null;
+                    e.target.src = defaultLogo;
+                } }),
+            React.createElement("div", null, get(applicationsMap, `${key}.${{
+                cn: 'name',
+                en: 'enName',
+            }[language || 'cn']}`, key))))))));
+};
+export default (props) => (React.createElement(App, null,
+    React.createElement(Popover, { placement: "bottomRight", title: null, content: React.createElement(AppContent, Object.assign({}, props)), trigger: "click" },
+        React.createElement(Iconfont, { type: "application" }))));
+//# sourceMappingURL=Application.js.map

package/dist/es/business-components/tntd-layout/Application.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Application.js","sourceRoot":"","sources":["../../../../src/business-components/tntd-layout/Application.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAC9D,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEtC,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;CAUpB,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAKxB,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxB,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3B,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IAClD,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,EAAE;QAC3B,SAAS,CAAC,MAAM,CAAC,CAAA;QACjB,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,iBAAiB;QAChB,oBAAC,OAAO,QACL,IAAI;aACF,IAAI,CACH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACP,GAAG,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,MAAM,OAAO,EAAE,CAAC,CAAC;YAC3C,GAAG,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,MAAM,OAAO,EAAE,CAAC,CAAC,CAC9C;aACA,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CACxB,oBAAC,OAAO,IACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,GAAG,EAAE,CAAC,EACzC,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC;YAElC,6BACE,GAAG,EAAE,GAAG,CAAC,eAAe,EAAE,GAAG,GAAG,OAAO,EAAE,WAAW,CAAC,EACrD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;oBACvB,CAAC,CAAC,MAAM,CAAC,GAAG,GAAG,WAAW,CAAA;gBAC5B,CAAC,GACD;YACF,iCACG,GAAG,CACF,eAAe,EACf,GAAG,GAAG,IACJ;gBACE,EAAE,EAAE,MAAM;gBACV,EAAE,EAAE,QAAQ;aACb,CAAC,QAAQ,IAAI,IAAI,CACpB,EAAE,EACF,GAAG,CACJ,CACG,CACE,CACX,CAAC,CACI,CACQ,CACrB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,CAAC,KAAK,EAAE,EAAE,CAAC,CACxB,oBAAC,GAAG;IACF,oBAAC,OAAO,IACN,SAAS,EAAC,aAAa,EACvB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,oBAAC,UAAU,oBAAK,KAAK,EAAI,EAClC,OAAO,EAAC,OAAO;QAEf,oBAAC,QAAQ,IAAC,IAAI,EAAC,aAAa,GAAG,CACvB,CACN,CACP,CAAA","sourcesContent":["import React, { useState } from 'react'\nimport styled from 'styled-components'\nimport cn from 'classnames'\nimport { Popover } from 'antd'\nimport { get } from 'lodash'\nimport { systemMap as applicationsMap } from '@tntx/logo-icon'\nimport Iconfont from './Iconfont'\nimport { defaultLogo } from './images'\n\nconst App = styled.li`\n  margin-left: 20px;\n  font-size: 20px;\n  cursor: pointer;\n  .tnt-icon {\n    color: #17233d99;\n    .tnt-themeS1 & {\n      color: rgba(255, 255, 255, 0.85);\n    }\n  }\n`\n\nconst AppList = styled.ul`\n  list-style: none;\n  width: 264px;\n  margin: 0;\n  padding: 0;\n`\n\nconst AppItem = styled.li`\n  position: relative;\n  width: 88px;\n  padding: 8px 0;\n  cursor: pointer;\n  display: inline-block;\n  text-align: center;\n  &:hover,\n  &.active {\n    background: #eee;\n  }\n  &.active:after {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-width: 5px 10px 0 0;\n    border-color: #333;\n    border-style: solid;\n    z-index: 9;\n  }\n  img {\n    width: 44px;\n    height: 44px;\n    margin-bottom: 6px;\n  }\n  div {\n    line-height: 20px;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n`\n\nconst AppContentWrapper = styled.div`\n  background-color: #fff;\n  border-radius: 4px;\n  z-index: 1;\n`\n\nconst AppContent = (props) => {\n  const { language, apps, onChange } = props\n  const [appKey, setAppKey] = useState(props.appKey)\n  const changeApp = (appKey) => {\n    setAppKey(appKey)\n    onChange && onChange(appKey)\n  }\n\n  return (\n    <AppContentWrapper>\n      <AppList>\n        {apps\n          .sort(\n            (a, b) =>\n              get(applicationsMap, `${a.appKey}.sort`, 1) -\n              get(applicationsMap, `${b.appKey}.sort`, 1)\n          )\n          .map(({ appKey: key }) => (\n            <AppItem\n              key={key}\n              className={cn({ active: appKey === key })}\n              onClick={changeApp.bind(this, key)}\n            >\n              <img\n                src={get(applicationsMap, `${key}.logo`, defaultLogo)}\n                onError={(e) => {\n                  e.target.onerror = null\n                  e.target.src = defaultLogo\n                }}\n              />\n              <div>\n                {get(\n                  applicationsMap,\n                  `${key}.${\n                    {\n                      cn: 'name',\n                      en: 'enName',\n                    }[language || 'cn']\n                  }`,\n                  key\n                )}\n              </div>\n            </AppItem>\n          ))}\n      </AppList>\n    </AppContentWrapper>\n  )\n}\n\nexport default (props) => (\n  <App>\n    <Popover\n      placement=\"bottomRight\"\n      title={null}\n      content={<AppContent {...props} />}\n      trigger=\"click\"\n    >\n      <Iconfont type=\"application\" />\n    </Popover>\n  </App>\n)\n"]}

package/dist/es/business-components/tntd-layout/Avatar.js

@@ -0,0 +1,106 @@
+import React, { 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;
+  font-size: 0;
+  img {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    cursor: pointer;
+    .large-size & {
+      width: 32px;
+      height: 32px;
+    }
+  }
+`;
+const GlobalStyle = createGlobalStyle `
+    .tnt-layout-personal-popover {
+        .ant-popover-inner-content {
+            padding: 0;
+        }
+    }
+`;
+const UserInfoWrapper = styled.div `
+  min-width: 235px;
+  z-index: 1;
+  background-color: #fff;
+  border-radius: 4px;
+
+  .isInIframe & {
+    display: none;
+  }
+
+  .user-info-body {
+    padding: 30px 20px 20px 24px;
+    line-height: 16px;
+    .user-info-body-username {
+      margin-top: 0px;
+      font-size: 16px;
+      color: #333;
+      font-weight: normal;
+      margin-bottom: 10px;
+      line-height: 16px;
+    }
+    .user-info-body-account {
+      margin-top: 0px;
+      color: #666;
+      margin-bottom: 14px;
+      line-height: 16px;
+    }
+    a {
+      margin-right: 16px;
+    }
+  }
+  .user-info-footer {
+    border-top: 1px solid #ccc;
+    background-color: #f5f5f5;
+    padding: 8px 20px;
+    text-align: right;
+    .user-info-footer-signout:hover {
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      border-color: #d9d9d9;
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+`;
+const UserInfoContent = (props) => {
+    const { userInfo, onLogout, onChangePassword = () => true, onPersonalSetting = () => true, } = props;
+    const { getText } = useContext(ActionsContext);
+    return (React.createElement(UserInfoWrapper, { className: "user-info-setting-wrap" },
+        React.createElement("div", { className: "user-info-body" },
+            React.createElement("p", { className: "user-info-body-username" }, userInfo.userName || '暂无昵称'),
+            React.createElement("p", { className: "user-info-body-account" }, userInfo.account),
+            React.createElement("a", { onClick: onPersonalSetting, href: "/bridge/userCenter?currentTab=1" }, getText('personalSettings')),
+            React.createElement("a", { onClick: onChangePassword, href: "/bridge/userCenter?currentTab=2" }, getText('changePwd'))),
+        React.createElement("div", { className: "user-info-footer" },
+            React.createElement(Button, { className: "user-info-footer-signout", onClick: () => {
+                    if (onLogout) {
+                        onLogout();
+                        deleteAllCookiesFactory(window)();
+                    }
+                    else {
+                        deleteAllCookiesFactory(window)();
+                        window.location.href = `/user/login?callbackUrl=${window.encodeURI(location.href)}`;
+                    }
+                } },
+                React.createElement("a", null, getText('signOut'))))));
+};
+export default (props) => {
+    var _a;
+    const { userInfo = {} } = props;
+    const { avatar } = userInfo;
+    return (React.createElement(Avatar, null,
+        React.createElement(Popover, { popupClassName: "tnt-layout-personal-popover", placement: "bottomRight", title: null, content: React.createElement(UserInfoContent, Object.assign({}, props)), trigger: "click" }, avatar ? (React.createElement("img", { src: avatar.indexOf('base64') > 0 ? avatar : get(images[avatar], 'default', images[avatar]), onError: (e) => {
+                var _a;
+                e.target.onerror = null;
+                e.target.src = ((_a = images.empty) === null || _a === void 0 ? void 0 : _a.default) || images.empty;
+            } })) : (React.createElement("img", { src: ((_a = images.empty) === null || _a === void 0 ? void 0 : _a.default) || images.empty }))),
+        React.createElement(GlobalStyle, null)));
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/es/business-components/tntd-layout/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/business-components/tntd-layout/Avatar.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react'\nimport styled, { createGlobalStyle } from 'styled-components'\nimport { Popover, Button } from 'antd'\nimport deleteAllCookiesFactory from 'delete-all-cookies'\nimport { get } from 'lodash'\nimport images from './images'\nimport ActionsContext from './ActionsContext'\n\nconst Avatar = styled.li`\n  margin-right: 0;\n  font-size: 0;\n  img {\n    width: 26px;\n    height: 26px;\n    border-radius: 50%;\n    cursor: pointer;\n    .large-size & {\n      width: 32px;\n      height: 32px;\n    }\n  }\n`\n\nconst GlobalStyle = createGlobalStyle`\n    .tnt-layout-personal-popover {\n        .ant-popover-inner-content {\n            padding: 0;\n        }\n    }\n`\n\nconst UserInfoWrapper = styled.div`\n  min-width: 235px;\n  z-index: 1;\n  background-color: #fff;\n  border-radius: 4px;\n\n  .isInIframe & {\n    display: none;\n  }\n\n  .user-info-body {\n    padding: 30px 20px 20px 24px;\n    line-height: 16px;\n    .user-info-body-username {\n      margin-top: 0px;\n      font-size: 16px;\n      color: #333;\n      font-weight: normal;\n      margin-bottom: 10px;\n      line-height: 16px;\n    }\n    .user-info-body-account {\n      margin-top: 0px;\n      color: #666;\n      margin-bottom: 14px;\n      line-height: 16px;\n    }\n    a {\n      margin-right: 16px;\n    }\n  }\n  .user-info-footer {\n    border-top: 1px solid #ccc;\n    background-color: #f5f5f5;\n    padding: 8px 20px;\n    text-align: right;\n    .user-info-footer-signout:hover {\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      border-color: #d9d9d9;\n      color: rgba(0, 0, 0, 0.65);\n    }\n  }\n`\n\nconst UserInfoContent = (props) => {\n  const {\n    userInfo,\n    onLogout,\n    onChangePassword = () => true,\n    onPersonalSetting = () => true,\n  } = props\n  const { getText } = useContext(ActionsContext)\n\n  return (\n    <UserInfoWrapper className=\"user-info-setting-wrap\">\n      <div className=\"user-info-body\">\n        <p className=\"user-info-body-username\">{userInfo.userName || '暂无昵称'}</p>\n        <p className=\"user-info-body-account\">{userInfo.account}</p>\n        <a onClick={onPersonalSetting} href=\"/bridge/userCenter?currentTab=1\">\n          {getText('personalSettings')}\n        </a>\n        <a onClick={onChangePassword} href=\"/bridge/userCenter?currentTab=2\">\n          {getText('changePwd')}\n        </a>\n      </div>\n      <div className=\"user-info-footer\">\n        <Button\n          className=\"user-info-footer-signout\"\n          onClick={() => {\n            if (onLogout) {\n              onLogout()\n              deleteAllCookiesFactory(window)()\n            } else {\n              deleteAllCookiesFactory(window)()\n              window.location.href = `/user/login?callbackUrl=${window.encodeURI(location.href)}`\n            }\n          }}\n        >\n          <a>{getText('signOut')}</a>\n        </Button>\n      </div>\n    </UserInfoWrapper>\n  )\n}\n\nexport default (props) => {\n  const { userInfo = {} } = props\n  const { avatar } = userInfo\n\n  return (\n    <Avatar>\n      <Popover\n        popupClassName=\"tnt-layout-personal-popover\"\n        placement=\"bottomRight\"\n        title={null}\n        content={<UserInfoContent {...props} />}\n        trigger=\"click\"\n      >\n        {avatar ? (\n          <img\n            src={\n              avatar.indexOf('base64') > 0 ? avatar : get(images[avatar], 'default', images[avatar])\n            }\n            onError={(e) => {\n              e.target.onerror = null\n              e.target.src = images.empty?.default || images.empty\n            }}\n          />\n        ) : (\n          <img src={images.empty?.default || images.empty} />\n        )}\n      </Popover>\n      <GlobalStyle />\n    </Avatar>\n  )\n}\n"]}

package/dist/es/business-components/tntd-layout/CompatibleLanguage.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import cn from 'classnames';
+import { Popover } from 'antd';
+import { get } from 'lodash';
+import Icon from '../tntd-icon';
+import images from './images';
+import { setThemeStore, getThemeStore, setLanguageStore, getLanguageStore } from './storage';
+const languages = [
+    { value: 'cn', name: '中文' },
+    { value: 'en', name: ' EN ' },
+];
+const languagesMap = languages.reduce((acc, cur) => {
+    acc[cur.value] = cur;
+    return acc;
+}, {});
+const LanguageSwitch = styled.div `
+  margin-bottom: 10px;
+
+  & > div {
+    padding: 10px 13px 10px 17px;
+    border-radius: 20px 0 0 20px;
+    border-right: none;
+    display: inline-block;
+    color: #fff;
+    width: 49%;
+    text-align: center;
+    font-size: 14px;
+    letter-spacing: 0 !important;
+    color: #666;
+    border: 1px solid #e5e5e5;
+    vertical-align: middle;
+    display: inline-block;
+    letter-spacing: -4px;
+    cursor: pointer;
+    &:first-child {
+      padding: 10px 13px 10px 17px;
+      border-radius: 20px 0 0 20px;
+      border-right: none;
+    }
+    &:last-child {
+      padding: 10px 17px 10px 13px;
+      border-radius: 0 20px 20px 0;
+      border-left: none;
+    }
+    &.active {
+      background-color: #4b93e5;
+      border-color: #4b93e5;
+      color: #fff;
+    }
+  }
+`;
+const Theme = styled.li `
+  margin-left: 20px;
+  font-size: 20px;
+  .tnt-themeS1 & {
+    color: rgba(255, 255, 255, 0.85);
+  }
+  .isInIframe & {
+    display: none;
+  }
+  .tnt-icon {
+    font-size: 30px;
+    vertical-align: middle;
+    opacity: 0.75;
+    color: #2b5696;
+    .tnt-themeS1 & {
+      /* color: #fff; */
+    }
+  }
+`;
+const ThemeSwitch = styled.div `
+  margin-bottom: 20px;
+  & > div {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    img {
+      width: 48px;
+    }
+    &:first-child {
+      margin-right: 10px;
+    }
+    &:last-child {
+      margin-left: 10px;
+    }
+    & > i,
+    & > .tnt-icon,
+    & > .anticon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #1890ff;
+    }
+  }
+`;
+const ThemeContentWrapper = styled.div `
+  z-index: 1;
+  background-color: #fff;
+  border-radius: 4px;
+  min-width: 203px;
+  padding: 8px 4px 8px 8px;
+  .line {
+    background: #f0f0f0;
+    height: 1px;
+    margin: 20px 0;
+    width: calc(100% + 44px);
+    transform: translateX(-22px);
+  }
+`;
+const themes = [
+    { value: 'themeS1', img: images.themeSymbol1 },
+    { value: 'themeS2', img: images.themeSymbol2 },
+];
+const ThemeContent = (props) => {
+    const { config, onLanguageChange, onThemeChange } = props;
+    const { language: languageVisible = true, theme: themeVisible = true } = config || {};
+    const getTheme = () => {
+        let theme = getThemeStore() || props.theme || 'themeS2';
+        return themes.some(({ value }) => value === theme) ? theme : 'themeS2';
+    };
+    const [theme, setTheme] = useState(getTheme());
+    const changeTheme = (theme) => {
+        setTheme(theme);
+        setThemeStore(theme);
+        onThemeChange(theme);
+    };
+    const getLanguage = () => {
+        let lang = getLanguageStore() || props.language;
+        if (!languagesMap[lang]) {
+            lang = get(languages, '0.value');
+        }
+        return lang;
+    };
+    const [language = 'cn', setLanguage] = useState(getLanguage());
+    const changeLanguage = (language) => {
+        setLanguage(language);
+        setLanguageStore(language);
+        onLanguageChange(language);
+    };
+    return (React.createElement(ThemeContentWrapper, null,
+        themeVisible && (React.createElement(ThemeSwitch, null, themes.map(({ value, img }) => (React.createElement("div", { key: value, onClick: changeTheme.bind(this, value) },
+            React.createElement("img", { src: img }),
+            theme === value && React.createElement(Icon, { type: "check1" })))))),
+        themeVisible && languageVisible && React.createElement("div", { className: "line" }),
+        languageVisible && (React.createElement(LanguageSwitch, null, languages.map(({ value, name }) => (React.createElement("div", { className: cn({ active: value === language }), key: value, onClick: changeLanguage.bind(this, value) }, name)))))));
+};
+export default (props) => {
+    const { config } = props;
+    if ((config === null || config === void 0 ? void 0 : config.language) === false && (config === null || config === void 0 ? void 0 : config.theme) === false) {
+        return null;
+    }
+    return (React.createElement(Theme, null,
+        React.createElement(Popover, { placement: "bottomRight", title: null, content: React.createElement(ThemeContent, Object.assign({}, props)), trigger: "click" },
+            React.createElement(Icon, { type: "daxiaoxie" }))));
+};
+//# sourceMappingURL=CompatibleLanguage.js.map

package/dist/es/business-components/tntd-layout/CompatibleLanguage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompatibleLanguage.js","sourceRoot":"","sources":["../../../../src/business-components/tntd-layout/CompatibleLanguage.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport styled from 'styled-components'\nimport cn from 'classnames'\nimport { Popover } from 'antd'\nimport { get } from 'lodash'\nimport Icon from '../tntd-icon'\nimport images from './images'\nimport { setThemeStore, getThemeStore, setLanguageStore, getLanguageStore } from './storage'\n\nconst languages = [\n  { value: 'cn', name: '中文' },\n  { value: 'en', name: ' EN ' },\n]\nconst languagesMap = languages.reduce((acc, cur) => {\n  acc[cur.value] = cur\n  return acc\n}, {})\n\nconst LanguageSwitch = styled.div`\n  margin-bottom: 10px;\n\n  & > div {\n    padding: 10px 13px 10px 17px;\n    border-radius: 20px 0 0 20px;\n    border-right: none;\n    display: inline-block;\n    color: #fff;\n    width: 49%;\n    text-align: center;\n    font-size: 14px;\n    letter-spacing: 0 !important;\n    color: #666;\n    border: 1px solid #e5e5e5;\n    vertical-align: middle;\n    display: inline-block;\n    letter-spacing: -4px;\n    cursor: pointer;\n    &:first-child {\n      padding: 10px 13px 10px 17px;\n      border-radius: 20px 0 0 20px;\n      border-right: none;\n    }\n    &:last-child {\n      padding: 10px 17px 10px 13px;\n      border-radius: 0 20px 20px 0;\n      border-left: none;\n    }\n    &.active {\n      background-color: #4b93e5;\n      border-color: #4b93e5;\n      color: #fff;\n    }\n  }\n`\n\nconst Theme = styled.li`\n  margin-left: 20px;\n  font-size: 20px;\n  .tnt-themeS1 & {\n    color: rgba(255, 255, 255, 0.85);\n  }\n  .isInIframe & {\n    display: none;\n  }\n  .tnt-icon {\n    font-size: 30px;\n    vertical-align: middle;\n    opacity: 0.75;\n    color: #2b5696;\n    .tnt-themeS1 & {\n      /* color: #fff; */\n    }\n  }\n`\n\nconst ThemeSwitch = styled.div`\n  margin-bottom: 20px;\n  & > div {\n    position: relative;\n    display: inline-block;\n    cursor: pointer;\n    img {\n      width: 48px;\n    }\n    &:first-child {\n      margin-right: 10px;\n    }\n    &:last-child {\n      margin-left: 10px;\n    }\n    & > i,\n    & > .tnt-icon,\n    & > .anticon {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      color: #1890ff;\n    }\n  }\n`\n\nconst ThemeContentWrapper = styled.div`\n  z-index: 1;\n  background-color: #fff;\n  border-radius: 4px;\n  min-width: 203px;\n  padding: 8px 4px 8px 8px;\n  .line {\n    background: #f0f0f0;\n    height: 1px;\n    margin: 20px 0;\n    width: calc(100% + 44px);\n    transform: translateX(-22px);\n  }\n`\n\nconst themes = [\n  { value: 'themeS1', img: images.themeSymbol1 },\n  { value: 'themeS2', img: images.themeSymbol2 },\n]\n\nconst ThemeContent = (props) => {\n  const { config, onLanguageChange, onThemeChange } = props\n  const { language: languageVisible = true, theme: themeVisible = true } = config || {}\n  const getTheme = () => {\n    let theme = getThemeStore() || props.theme || 'themeS2'\n\n    return themes.some(({ value }) => value === theme) ? theme : 'themeS2'\n  }\n  const [theme, setTheme] = useState(getTheme())\n  const changeTheme = (theme) => {\n    setTheme(theme)\n    setThemeStore(theme)\n    onThemeChange(theme)\n  }\n  const getLanguage = () => {\n    let lang = getLanguageStore() || props.language\n\n    if (!languagesMap[lang]) {\n      lang = get(languages, '0.value')\n    }\n\n    return lang\n  }\n  const [language = 'cn', setLanguage] = useState(getLanguage())\n  const changeLanguage = (language) => {\n    setLanguage(language)\n    setLanguageStore(language)\n    onLanguageChange(language)\n  }\n\n  return (\n    <ThemeContentWrapper>\n      {themeVisible && (\n        <ThemeSwitch>\n          {themes.map(({ value, img }) => (\n            <div key={value} onClick={changeTheme.bind(this, value)}>\n              <img src={img} />\n              {theme === value && <Icon type=\"check1\" />}\n            </div>\n          ))}\n        </ThemeSwitch>\n      )}\n      {themeVisible && languageVisible && <div className=\"line\"></div>}\n      {languageVisible && (\n        <LanguageSwitch>\n          {languages.map(({ value, name }) => (\n            <div\n              className={cn({ active: value === language })}\n              key={value}\n              onClick={changeLanguage.bind(this, value)}\n            >\n              {name}\n            </div>\n          ))}\n        </LanguageSwitch>\n      )}\n    </ThemeContentWrapper>\n  )\n}\n\nexport default (props) => {\n  const { config } = props\n\n  if (config?.language === false && config?.theme === false) {\n    return null\n  }\n\n  return (\n    <Theme>\n      <Popover\n        placement=\"bottomRight\"\n        title={null}\n        content={<ThemeContent {...props} />}\n        trigger=\"click\"\n      >\n        <Icon type=\"daxiaoxie\" />\n      </Popover>\n    </Theme>\n  )\n}\n"]}