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:
2026-11-01 22:07:32 +08:00
parent 4ae69b29fe
commit 6e773374bb
2 changed files with 24 additions and 148 deletions
+1 -78
View File
@@ -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 {