refactor(admin): 折叠箭头与卡片列表改用库里的 Caret / SortableList
- 分组表格的折叠箭头换成 Caret,.group-caret 只保留按钮盒 - 首页卡片列表换成 SortableList,拖拽与排序计算交给组件;reorder 改为接收 key 顺序 - 删掉 .cards-side-item / .cards-side-title / .cards-side-count / .cards-drag-handle 等 9 条样式,App.css 再减 42 行
This commit is contained in:
+1
-78
@@ -1008,7 +1008,7 @@
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
/* 折叠箭头:与前台侧栏 Menu 的 caret 同一套画法(CSS 画的 6px 角标) */
|
||||
/* 折叠箭头:外观交给 @stash/ui 的 Caret,这里只管按钮盒与占位 */
|
||||
.group-caret {
|
||||
display: inline-flex;
|
||||
flex: none;
|
||||
@@ -1023,36 +1023,10 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.group-caret::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-left: 1px solid currentColor;
|
||||
border-bottom: 1px solid currentColor;
|
||||
opacity: 0.4;
|
||||
transform: rotate(315deg);
|
||||
transition:
|
||||
transform var(--su-duration-base) var(--su-ease-in-out),
|
||||
opacity var(--su-duration-base) var(--su-ease-in-out);
|
||||
}
|
||||
|
||||
.group-caret:hover::before {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.group-caret-open::before {
|
||||
opacity: 0.7;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.group-caret-empty {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.group-caret-empty::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 分组图标选择:搜索 + 图标网格 */
|
||||
.icon-picker {
|
||||
display: flex;
|
||||
@@ -1312,65 +1286,14 @@ a.entry-href:hover {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cards-side-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--su-space-1);
|
||||
}
|
||||
|
||||
.cards-side-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--su-space-2);
|
||||
padding: var(--su-space-2) var(--su-space-3);
|
||||
border: none;
|
||||
border-radius: var(--su-radius-sm);
|
||||
background: transparent;
|
||||
color: var(--su-text-main);
|
||||
font-size: var(--su-font-size-md);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cards-drag-handle {
|
||||
flex: none;
|
||||
color: var(--su-text-placeholder);
|
||||
font-size: var(--su-font-size-sm);
|
||||
line-height: 1;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.cards-side-item.is-dragging {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.cards-side-item.is-over {
|
||||
outline: 1px dashed var(--su-color-primary);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.cards-side-item:hover {
|
||||
background-color: var(--su-bg-card);
|
||||
}
|
||||
|
||||
.cards-side-item.is-active {
|
||||
background-color: var(--su-bg-card);
|
||||
color: var(--su-color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cards-side-title {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cards-side-count {
|
||||
color: var(--su-text-muted);
|
||||
font-size: var(--su-font-size-sm);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 拖动说明夹在「新建卡片」和卡片列表之间:上方靠按钮的外边距,下方留一点呼吸 */
|
||||
.cards-drag-hint {
|
||||
|
||||
Reference in New Issue
Block a user