unAccessible
,
@@ -116,9 +138,9 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
{children}
{!props.location?.pathname?.includes('/login')}
- )
+ );
},
...initialState?.settings,
- logo: {
+ // translate了 多少个
+ const tarnsNumber = Math.floor(tarnslateX / tabWidth);
+ // 隐藏了多少
+ const isBeyondDistance = tarnslateX - tarnsNumber * tabWidth;
+ if (tabIndex - tarnsNumber <= 0) {
+ dispatch({
+ type: 'CHANGESTATE',
+ payload: { active: tabIndex, tarnslateX: tarnslateX - isBeyondDistance },
+ });
+ history.push({ ...value });
+ return;
+ }
+ // 是否在可视区域内
+ if (tabIndex - tarnsNumber + 1 === showTabs) {
+ // 需要移动的距离计算
+ const x = (tabIndex + 1) * (tabWidth as number) - (tabsWidth - 100);
+ dispatch({ type: 'CHANGESTATE', payload: { active: tabIndex, tarnslateX: x } });
+ history.push({ ...value });
+ return;
+ }
+ dispatch({ type: 'CHANGESTATE', payload: { active: tabIndex } });
+ history.push({ ...value });
+ }}
+ >
+ {value.title}
+ {closable && (
+ ) : (
+
+ );
+};
export default SortableElement(SortableTab);
diff --git a/src/components/KeepAliveTabs/index.tsx b/src/components/KeepAliveTabs/index.tsx
index a7edb99..388cd9e 100644
--- a/src/components/KeepAliveTabs/index.tsx
+++ b/src/components/KeepAliveTabs/index.tsx
@@ -1,242 +1,250 @@
/*
- * @Author: wangYe
- * @Date: 2020-11-05 17:09:40
+ * @Author: wangYe
+ * @Date: 2020-11-05 17:09:40
* @Last Modified by: WhiteShader
* @Last Modified time: 2022-02-21 11:12:12
*/
+import { DownOutlined, MoreOutlined } from '@ant-design/icons';
+import { Divider, Dropdown, Menu } from 'antd';
import { useEffect, useRef } from 'react';
import { SortableContainer } from 'react-sortable-hoc';
-import { Dropdown, Menu, Divider } from 'antd';
-import { DownOutlined, MoreOutlined } from '@ant-design/icons';
-import { useModel, history, useAliveController } from 'umi'
-import SortableTab from './components/SortableTab'
+import { history, useAliveController, useModel } from 'umi';
+import SortableTab from './components/SortableTab';
import styles from './index.less';
-
const SortableList = SortableContainer(() => {
- const tabsRef = useRef {
- // translate了 多少个
- const tarnsNumber = Math.floor(tarnslateX / tabWidth)
- // 隐藏了多少
- const isBeyondDistance = tarnslateX - tarnsNumber * tabWidth;
- if (tabIndex - tarnsNumber <= 0) {
- dispatch({ type: 'CHANGESTATE', payload: { active: tabIndex, tarnslateX: tarnslateX - isBeyondDistance } })
- history.push({ ...value })
- return;
- }
- // 是否在可视区域内
- if ((tabIndex - tarnsNumber + 1) === showTabs) {
- // 需要移动的距离计算
- const x = (tabIndex + 1) * (tabWidth as number) - (tabsWidth - 100)
- dispatch({ type: 'CHANGESTATE', payload: { active: tabIndex, tarnslateX: x } })
- history.push({ ...value })
- return;
- }
- dispatch({ type: 'CHANGESTATE', payload: { active: tabIndex } })
- history.push({ ...value })
-
- }}>
- {value.title}
- {
- closable && (
-
- );
-}
+ )}
+ {
- e.stopPropagation()
- const currentName = value.keepAliveName
- // 如果关闭激活中的 KeepAlive Tab，需要先离开当前路由
- // 触发 KeepAlive unactivated 后再进行 drop
- const localTablist = JSON.parse(JSON.stringify(tabList))
- localTablist.splice(tabIndex, 1)
- let activeIndex: number = 0;
- if (tabIndex < active) {
- // 我在前面
- activeIndex = active - 1;
- dropScope(currentName)
- } else if (tabIndex === active) {
- // 点击后面当前窗口
- if (active > 0) {
- activeIndex = active - 1
- const timer = setTimeout(() => {
- clearTimeout(timer)
- history.push(tabList[activeIndex])
- }, 10)
-
- } else {
- activeIndex = 0
- const timer = setTimeout(() => {
- clearTimeout(timer)
- history.push(localTablist[activeIndex])
- }, 10)
- }
- const unlisten = history.listen(() => {
- unlisten()
- const dropTimer = setTimeout(() => {
- clearTimeout(dropTimer)
- dropScope(currentName)
- }, 10)
- })
- } else {
- activeIndex = active
- dropScope(currentName)
- }
- dispatch({ type: "CHANGESTATE", payload: { tabList: localTablist, active: activeIndex, tarnslateX: 0 } })
- }}>
-
- )
+ className={styles.closeIcon}
+ onClick={(e) => {
+ e.stopPropagation();
+ const currentName = value.keepAliveName;
+ // 如果关闭激活中的 KeepAlive Tab，需要先离开当前路由
+ // 触发 KeepAlive unactivated 后再进行 drop
+ const localTablist = JSON.parse(JSON.stringify(tabList));
+ localTablist.splice(tabIndex, 1);
+ let activeIndex: number = 0;
+ if (tabIndex < active) {
+ // 我在前面
+ activeIndex = active - 1;
+ dropScope(currentName);
+ } else if (tabIndex === active) {
+ // 点击后面当前窗口
+ if (active > 0) {
+ activeIndex = active - 1;
+ const timer = setTimeout(() => {
+ clearTimeout(timer);
+ history.push(tabList[activeIndex]);
+ }, 10);
+ } else {
+ activeIndex = 0;
+ const timer = setTimeout(() => {
+ clearTimeout(timer);
+ history.push(localTablist[activeIndex]);
+ }, 10);
+ }
+ const unlisten = history.listen(() => {
+ unlisten();
+ const dropTimer = setTimeout(() => {
+ clearTimeout(dropTimer);
+ dropScope(currentName);
+ }, 10);
+ });
+ } else {
+ activeIndex = active;
+ dropScope(currentName);
}
-
+ dispatch({
+ type: 'CHANGESTATE',
+ payload: { tabList: localTablist, active: activeIndex, tarnslateX: 0 },
+ });
+ }}
+ >
+
- {/* ();
+ const { tabList, tarnslateX } = useModel('system');
+ return (
+
*/}
-
- );
+ const tabsRef = useRef
- {
- tabList.map((value, index: number) => (
-
-
+ {/* ("@@initialState");
- const { collapsed } = initialState;
- const { tabList, dispatch, active, showTabs, tabsWidth, tabWidth, tarnslateX } = useModel("system");
- const { dropScope, clear } = useAliveController();
+ const { initialState } = useModel('@@initialState');
+ const { collapsed } = initialState;
+ const { tabList, dispatch, active, showTabs, tabsWidth, tabWidth, tarnslateX } =
+ useModel('system');
+ const { dropScope, clear } = useAliveController();
- const onSortEnd = ({ oldIndex, newIndex }: { oldIndex: number, newIndex: number }) => {
- const dataSource = JSON.parse(JSON.stringify(tabList))
- const activeItem = dataSource[active as number]
- dataSource.splice(newIndex, 0, dataSource.splice(oldIndex, 1)[0]);
- const movedActiveIndex = dataSource.findIndex((item: string) => item === activeItem)
- dispatch({ type: "CHANGESTATE", payload: { tabList: dataSource, active: movedActiveIndex } })
- }
+ const onSortEnd = ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {
+ const dataSource = JSON.parse(JSON.stringify(tabList));
+ const activeItem = dataSource[active as number];
+ dataSource.splice(newIndex, 0, dataSource.splice(oldIndex, 1)[0]);
+ const movedActiveIndex = dataSource.findIndex((item: string) => item === activeItem);
+ dispatch({ type: 'CHANGESTATE', payload: { tabList: dataSource, active: movedActiveIndex } });
+ };
+ // 当前的索引值active showTabs一排能展示多少个
+ // 计算应该在菜单展示的菜单有哪些
- // 当前的索引值active showTabs一排能展示多少个
- // 计算应该在菜单展示的菜单有哪些
+ const arr: any[] = [];
+ if (tabList.length > showTabs) {
+ // 前面隐藏的元素
+ const beforeTab = Math.floor(tarnslateX / tabWidth);
+ // 后面隐藏的元素
+ const afterTab = Math.floor(tarnslateX / tabWidth) + showTabs;
+ tabList.forEach((item, index) => {
+ if (index < beforeTab) {
+ arr.push(item);
+ }
+ if (index >= afterTab) {
+ arr.push(item);
+ }
+ });
+ }
- const arr: any[] = []
- if (tabList.length > showTabs) {
- // 前面隐藏的元素
- const beforeTab = Math.floor(tarnslateX / tabWidth);
- // 后面隐藏的元素
- const afterTab = Math.floor(tarnslateX / tabWidth) + showTabs
- tabList.forEach((item, index) => {
- if (index < beforeTab) {
- arr.push(item)
- }
- if (index >= afterTab) {
- arr.push(item)
- }
- })
- }
-
-
- const menuMore = (
-
+ );
- const timer = setTimeout(() => {
- const width = document.getElementById("contentContainer") ? document.getElementById("contentContainer")!.getBoundingClientRect()!.width : 0;
- dispatch({ type: "CHANGESTATE", payload: { tabsWidth: width } })
- }, 100);
- return () => {
- clearTimeout(timer)
- }
- }, [collapsed])
+ useEffect(() => {
+ window.onresize = () => {
+ const width = document.getElementById('contentContainer')
+ ? document.getElementById('contentContainer')!.getBoundingClientRect()!.width
+ : 0;
+ dispatch({ type: 'CHANGESTATE', payload: { tabsWidth: width, tarnslateX: 0 } });
+ };
+ const timer = setTimeout(() => {
+ const width = document.getElementById('contentContainer')
+ ? document.getElementById('contentContainer')!.getBoundingClientRect()!.width
+ : 0;
+ dispatch({ type: 'CHANGESTATE', payload: { tabsWidth: width } });
+ }, 100);
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [collapsed]);
- useEffect(() => {
- const timer = setTimeout(() => {
- // 需要重新计算拿到当前tab的宽度
- const itemWidth = document.getElementsByClassName("link-tab")[0] ? document.getElementsByClassName("link-tab")[0]!.getBoundingClientRect().width : 120;
- //计算一排能展示多少个tab 需要减去操作占用的空间100
- const isShowTabs = Math.ceil((tabsWidth as number - 100) / itemWidth);
- if (itemWidth > 0 && tabWidth > 0) {
- dispatch({ type: "CHANGESTATE", payload: { showTabs: isShowTabs, tabWidth: itemWidth } })
- }
- }, 100);
- return () => {
- clearTimeout(timer)
- }
- }, [tabsWidth])
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ // 需要重新计算拿到当前tab的宽度
+ const itemWidth = document.getElementsByClassName('link-tab')[0]
+ ? document.getElementsByClassName('link-tab')[0]!.getBoundingClientRect().width
+ : 120;
+ //计算一排能展示多少个tab 需要减去操作占用的空间100
+ const isShowTabs = Math.ceil(((tabsWidth as number) - 100) / itemWidth);
+ if (itemWidth > 0 && tabWidth > 0) {
+ dispatch({ type: 'CHANGESTATE', payload: { showTabs: isShowTabs, tabWidth: itemWidth } });
+ }
+ }, 100);
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [tabsWidth]);
-
-
- return (
- //
*/}
+
+ );
});
const KeepAliveTabs = () => {
- const { initialState } = useModel
+ {tabList.map((value, index: number) => (
+
+
-
- {tabList.length > 0 &&
- );
-}
+ return (
+ // = showTabs && styles.boxShadow}`}>
- {
- tabList.length > showTabs && (
- <>
-
- e.preventDefault()}>
-
-
- e.preventDefault()}>
- 操作
- )
- }
-
-
-
-
+ Salpa
-
-
-
-
-
+ {tabList.length > 0 &&
+ );
+};
export default KeepAliveTabs;
diff --git a/src/global.less b/src/global.less
index f1df8ad..f59b1a5 100644
--- a/src/global.less
+++ b/src/global.less
@@ -56,29 +56,28 @@ ol {
}
}
+// .ant-layout{
+// background: #fff;
+// }
+// .ant-layout-header{
+// //display: none;
+// }
-.ant-layout{
- background: #fff;
-}
-.ant-layout-header{
- //display: none;
-}
-
-#contentContainer{
- //display: none;
-}
-.ant-pro-right-content{
- display: none;
-}
-.ant-modal-mask{
- background-color: rgba(255, 0, 0, 0);
-}
-.chiner-modal{
- background-color: rgba(255, 0, 0, 0);
-}
-.ant-pro-top-nav-header-logo{
- display: none;
-}
-.ant-pro-top-nav-header-main-left{
- min-width: 0px;
-}
+// #contentContainer{
+// //display: none;
+// }
+// .ant-pro-right-content{
+// display: none;
+// }
+// .ant-modal-mask{
+// background-color: rgba(255, 0, 0, 0);
+// }
+// .chiner-modal{
+// background-color: rgba(255, 0, 0, 0);
+// }
+// .ant-pro-top-nav-header-logo{
+// display: none;
+// }
+// .ant-pro-top-nav-header-main-left{
+// min-width: 0px;
+// }
diff --git a/src/pages/document.ejs b/src/pages/document.ejs
index 9a812bc..5a6430c 100644
--- a/src/pages/document.ejs
+++ b/src/pages/document.ejs
@@ -1,235 +1,227 @@
-
-
-
-
-
-
-
- = showTabs && styles.boxShadow}`}>
+ {tabList.length > showTabs && (
+ <>
+
+ e.preventDefault()}>
+
+
+ e.preventDefault()}>
+ 操作
+ )}
+
+
-
-
-
+
+
Salpa
-
-
-
-
-
-
- 
- Salpa
+ ">
+
-
+
- Salpa
+ ">
+ Salpa
+
+
+
+
+
+ Salpa
+
+ Salpa
+