hiui-group · zyprepare · Feb 10, 2023 · Nov 3, 2023
diff --git 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
@@ -77,6 +77,7 @@ class App extends Component {
           // type="classic"
           historyType="hashHistory"
           // tagsView
+          // tagsViewExtra={<div style={{ padding: '0 1em' }}>extra content</div>}
           apperance={{ color: 'light' }}
           // apperance={{ contentBackground: '#fff', contentPadding: 0 }}
           // accordion={false}

diff --git 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
@@ -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
@@ -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 (
     <div className={prefix}>
-      {historyPathsKeys.map((key, index) => {
-        const { path, name } = historyPaths[key]
-        const prePath = historyPathsKeys[index - 1]
-        const nextPath = historyPathsKeys[index + 1]
-        const isActive = key === activePath
-        return (
-          <span
-            className={classNames(`${prefix}_tag`, { [`${prefix}_tag--active`]: isActive })}
-            key={path + index}
-            onClick={() => {
-              history.push(key)
-              onMenuClick && onMenuClick(historyPaths[key])
-            }}
-          >
-            <span>{name}</span>
-            {isTabAlone ? null : (
-              <span
-                className={`${prefix}_icon`}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  deleteItem(key, prePath, nextPath, isActive)
-                }}
-              >
-                <svg
-                  t="1624244997818"
-                  className="icon"
-                  viewBox="0 0 1024 1024"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  p-id="8674"
-                  width="14"
-                  height="14"
+      <div className={prefixContent}>
+        {historyPathsKeys.map((key, index) => {
+          const { path, name } = historyPaths[key]
+          const prePath = historyPathsKeys[index - 1]
+          const nextPath = historyPathsKeys[index + 1]
+          const isActive = key === activePath
+          return (
+            <span
+              className={classNames(`${prefixContent}_tag`, { [`${prefixContent}_tag--active`]: isActive })}
+              key={path + index}
+              onClick={() => {
+                history.push(key)
+                onMenuClick && onMenuClick(historyPaths[key])
+              }}
+            >
+              <span>{name}</span>
+              {isTabAlone ? null : (
+                <span
+                  className={`${prefixContent}_icon`}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    deleteItem(key, prePath, nextPath, isActive)
+                  }}
                 >
-                  <path
-                    d="M834.44 234.814a8 8 0 0 1 0 11.314L568.568 512 834.44 777.872a8 8 0 0 1 0 11.314l-45.254 45.254a8 8 0 0 1-11.314 0L512 568.568 246.128 834.44a8 8 0 0 1-11.314 0L189.56 789.186a8 8 0 0 1 0-11.314L455.432 512 189.56 246.128a8 8 0 0 1 0-11.314l45.254-45.254a8 8 0 0 1 11.314 0L512 455.43 777.872 189.56a8 8 0 0 1 11.314 0l45.254 45.254z"
-                    p-id="8675"
-                    fill="#1F2733"
-                  ></path>
-                </svg>
-              </span>
-            )}
-          </span>
-        )
-      })}
+                  <svg
+                    className="icon"
+                    viewBox="0 0 1024 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="14"
+                    height="14"
+                  >
+                    <path
+                      d="M834.44 234.814a8 8 0 0 1 0 11.314L568.568 512 834.44 777.872a8 8 0 0 1 0 11.314l-45.254 45.254a8 8 0 0 1-11.314 0L512 568.568 246.128 834.44a8 8 0 0 1-11.314 0L189.56 789.186a8 8 0 0 1 0-11.314L455.432 512 189.56 246.128a8 8 0 0 1 0-11.314l45.254-45.254a8 8 0 0 1 11.314 0L512 455.43 777.872 189.56a8 8 0 0 1 11.314 0l45.254 45.254z"
+                      fill="#1F2733"
+                    ></path>
+                  </svg>
+                </span>
+              )}
+            </span>
+          )
+        })}
+      </div>
+      <div className={prefix + '__extra'}>{extra}</div>
     </div>
   )
 }

diff --git 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
@@ -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}