feat: 添加可拖拽的路由停靠组件,支持动态标签管理
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user