diff --git a/README.md b/README.md index f65f25c..174a737 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,7 @@ History[`${your history type}`].push() | type | 主题类型 | 'classic' \| 'genuine' | 'classic' | | dynamic | 开启动态布局 | boolean | true | | tagsView | 开启页面顶部标签页视图 | boolean | false | +| tagsViewExtra | tagsView 的扩展区域 | ReactNode | - | | routes | 路由配置项 | Route[] | - | | historyType | 路由跳转类型 | 'hashHistory' \| 'browserHistory' | 'browserHistory' | | header | genuine 类型下的顶部功能栏 | ReactNode \| null | 不传时默认为主题自带 header | diff --git a/examples/theme/index.jsx b/examples/theme/index.jsx index 972a0fe..28fb01a 100644 --- a/examples/theme/index.jsx +++ b/examples/theme/index.jsx @@ -77,6 +77,7 @@ class App extends Component { // type="classic" historyType="hashHistory" // tagsView + // tagsViewExtra={
extra content
} apperance={{ color: 'light' }} // apperance={{ contentBackground: '#fff', contentPadding: 0 }} // accordion={false} diff --git a/src/components/Layout/ClassicLayout.jsx b/src/components/Layout/ClassicLayout.jsx index 2cb4060..7d89a36 100644 --- a/src/components/Layout/ClassicLayout.jsx +++ b/src/components/Layout/ClassicLayout.jsx @@ -36,6 +36,7 @@ const ClassicLayout = ({ onMenuClick, theme, tagsView, + tagsViewExtra, defaultToggle, basename, historyType @@ -86,6 +87,7 @@ const ClassicLayout = ({ toolbar={toolbar} menu={menu} tagsView={tagsView} + tagsViewExtra={tagsViewExtra} history={history} onMenuClick={onMenuClick} type={type} @@ -124,6 +126,7 @@ const ClassicLayout = ({ location={location} history={history} menu={menu} + extra={tagsViewExtra} onMenuClick={onMenuClick} onTagClose={handleTagClose} /> diff --git a/src/components/Layout/GenuineLayout.jsx b/src/components/Layout/GenuineLayout.jsx index 04ba0e4..b9f5524 100644 --- a/src/components/Layout/GenuineLayout.jsx +++ b/src/components/Layout/GenuineLayout.jsx @@ -37,6 +37,7 @@ const GenuineLayout = ({ onMenuClick, theme, tagsView, + tagsViewExtra, defaultToggle, basename, historyType @@ -119,6 +120,7 @@ const GenuineLayout = ({ location={location} history={history} menu={menu} + extra={tagsViewExtra} onMenuClick={onMenuClick} onTagClose={handleTagClose} /> diff --git a/src/components/Tag/index.jsx b/src/components/Tag/index.jsx index 0ae683c..045148f 100644 --- a/src/components/Tag/index.jsx +++ b/src/components/Tag/index.jsx @@ -5,7 +5,8 @@ import { findMenu } from '../../util/common.js' import './style/index.js' const prefix = 'theme-nav-bar' -const Tag = ({ menu, history, location, onMenuClick, onTagClose }) => { +const prefixContent = prefix + '__content' +const Tag = ({ menu, history, location, onMenuClick, onTagClose, extra }) => { const [historyPaths, setHistoryPaths] = useState({}) const [activePath, setActivePath] = useState('') const mergeRouter = useRef() @@ -85,50 +86,50 @@ const Tag = ({ menu, history, location, onMenuClick, onTagClose }) => { return (
- {historyPathsKeys.map((key, index) => { - const { path, name } = historyPaths[key] - const prePath = historyPathsKeys[index - 1] - const nextPath = historyPathsKeys[index + 1] - const isActive = key === activePath - return ( - { - history.push(key) - onMenuClick && onMenuClick(historyPaths[key]) - }} - > - {name} - {isTabAlone ? null : ( - { - e.stopPropagation() - deleteItem(key, prePath, nextPath, isActive) - }} - > - + {historyPathsKeys.map((key, index) => { + const { path, name } = historyPaths[key] + const prePath = historyPathsKeys[index - 1] + const nextPath = historyPathsKeys[index + 1] + const isActive = key === activePath + return ( + { + history.push(key) + onMenuClick && onMenuClick(historyPaths[key]) + }} + > + {name} + {isTabAlone ? null : ( + { + e.stopPropagation() + deleteItem(key, prePath, nextPath, isActive) + }} > - - - - )} - - ) - })} + + + + + )} + + ) + })} +
+
{extra}
) } diff --git a/src/components/Tag/style/index.scss b/src/components/Tag/style/index.scss index fe4d11d..312229d 100644 --- a/src/components/Tag/style/index.scss +++ b/src/components/Tag/style/index.scss @@ -4,6 +4,14 @@ height: 42px; display: flex; align-items: center; + overflow-x: hidden; +} + +.theme-nav-bar__content { + height: 42px; + display: flex; + align-items: center; + flex: 1; overflow-x: auto; // 自定义 scrollbar 样式，避免 window bar 过宽下难以点击 tag 操作 @@ -42,11 +50,11 @@ margin-left: 6px; flex-shrink: 0; - &:hover:not(.theme-nav-bar_tag--active) { + &:hover:not(.theme-nav-bar__content_tag--active) { color: use-color-mode('primary'); border-color: use-color-mode('primary'); - .theme-nav-bar_icon { + .theme-nav-bar__content_icon { path { fill: use-color-mode('primary'); } @@ -58,7 +66,7 @@ background-color: use-color-mode('primary', 600); border-color: transparent; - .theme-nav-bar_icon { + .theme-nav-bar__content_icon { path { fill: rgb(250, 240, 240); } diff --git a/src/theme/index.jsx b/src/theme/index.jsx index 6a944fa..01b6bca 100644 --- a/src/theme/index.jsx +++ b/src/theme/index.jsx @@ -41,6 +41,7 @@ const Layout = ({ defaultToggle, onMenuClick, tagsView, + tagsViewExtra, theme }) => { // 获取是否存在keepAlive的路由 @@ -110,6 +111,7 @@ const Layout = ({ defaultToggle={defaultToggle} theme={theme} tagsView={tagsView} + tagsViewExtra={tagsViewExtra} basename={basename} historyType={historyType} {...props}