feat: 添加可拖拽的路由停靠组件,支持动态标签管理
Some checks failed
CI 检查 / lint (pull_request) Has been cancelled
CI 检查 / typecheck (pull_request) Has been cancelled
CI 检查 / test (pull_request) Has been cancelled

This commit is contained in:
2026-07-21 10:13:47 +08:00
parent 5e1ba70e59
commit 29c55ebff1
5 changed files with 354 additions and 0 deletions

View File

@@ -59,6 +59,88 @@ canvas {
z-index: 100;
}
.route-dock {
position: sticky;
top: 64px;
z-index: 90;
min-width: 0;
height: 44px;
padding: 6px 12px;
overflow: hidden;
background: #f5f5f7;
border-bottom: 1px solid #e5e5e7;
}
.route-dock .ant-tabs {
height: 32px;
}
.route-dock .ant-tabs-nav {
height: 32px;
margin: 0;
}
.route-dock .ant-tabs-nav::before {
border-bottom: 0;
}
.route-dock .ant-tabs-tab {
min-width: 112px;
max-width: 220px;
height: 32px;
margin: 0 6px 0 0 !important;
padding: 0 10px 0 12px !important;
overflow: hidden;
background: rgba(255, 255, 255, 0.58) !important;
border: 1px solid transparent !important;
border-radius: 7px !important;
transition:
background-color 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease !important;
}
.route-dock .ant-tabs-tab:hover {
background: rgba(255, 255, 255, 0.9) !important;
border-color: #dedee2 !important;
}
.route-dock .ant-tabs-tab-active {
background: #fff !important;
border-color: #d8d8dc !important;
box-shadow:
inset 0 2px 0 #1677ff,
0 2px 7px rgba(29, 29, 31, 0.08);
}
.route-dock .ant-tabs-tab-btn {
min-width: 0;
overflow: hidden;
color: #4d4d4d;
text-overflow: ellipsis;
white-space: nowrap;
}
.route-dock .ant-tabs-tab-remove {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-left: 8px;
border-radius: 50%;
transition: background-color 140ms ease;
}
.route-dock .ant-tabs-tab-remove:hover {
background: #ededf0;
}
.route-dock .ant-tabs-content-holder {
display: none;
}
/* Shared responsive toolbar: add these classes to page filter/action rows. */
.responsive-toolbar {
display: flex;
@@ -135,6 +217,16 @@ canvas {
line-height: 56px;
}
.route-dock {
top: 56px;
height: 42px;
padding: 5px 8px;
}
.route-dock .ant-tabs-tab {
min-width: 104px;
}
.app-header .ant-btn {
width: 40px;
min-height: 40px;