From 675155170b93db3dbf608b97db297f3ecd4eb111 Mon Sep 17 00:00:00 2001 From: zhouyun1 Date: Fri, 10 Feb 2023 14:30:28 +0800 Subject: [PATCH] feat: #132 --- README.md | 1 + examples/theme/index.jsx | 1 + package-lock.json | 2 +- package.json | 2 +- src/components/Layout/ClassicLayout.jsx | 3 + src/components/Layout/GenuineLayout.jsx | 2 + src/components/Tag/index.jsx | 89 +++++++++++++------------ src/components/Tag/style/index.scss | 14 +++- src/theme/index.jsx | 2 + 9 files changed, 67 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 2ffc5ed..ed3cf79 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 63080a3..5842fef 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/package-lock.json b/package-lock.json index a4103aa..621520c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/classic-theme", - "version": "4.0.4", + "version": "4.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 71a310f..58af4c7 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hi-ui/classic-theme", - "version": "4.0.5", + "version": "4.1.0", "description": "Classic theme for HIUI", "main": "./es/index.js", "scripts": { diff --git a/src/components/Layout/ClassicLayout.jsx b/src/components/Layout/ClassicLayout.jsx index e946f75..67cd45d 100644 --- a/src/components/Layout/ClassicLayout.jsx +++ b/src/components/Layout/ClassicLayout.jsx @@ -36,6 +36,7 @@ const ClassicLayout = ({ onMenuClick, theme, tagsView, + tagsViewExtra, defaultToggle }) => { const containerRef = useRef(null) @@ -82,6 +83,7 @@ const ClassicLayout = ({ toolbar={toolbar} menu={menu} tagsView={tagsView} + tagsViewExtra={tagsViewExtra} history={history} onMenuClick={onMenuClick} type={type} @@ -120,6 +122,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 971fa24..44eefac 100644 --- a/src/components/Layout/GenuineLayout.jsx +++ b/src/components/Layout/GenuineLayout.jsx @@ -37,6 +37,7 @@ const GenuineLayout = ({ onMenuClick, theme, tagsView, + tagsViewExtra, defaultToggle }) => { const { activeMenuId, currentMenu, selectedMenus, onSelectMenu, defaultPath } = useMenuCalculator( @@ -115,6 +116,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 5aedab8..c326759 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} {...props} /> )}