cykj/shanxia2.0
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(web-admin): restyle mp product category list as unified tree.

Browse Source 
Match scheme A indent-expand demo with sanqiang tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
wuzilongandCursor committed 2026-10-18 16:35:07 +08:00
1 parent 3c154d69ee
commit 44febe06f0
1 file changed
+59 -17
Download Patch File Download Diff File Expand all files Collapse all files
web-admin/src/views/m/crm/product/categories.vue
+59 -17
View File
@@ -465,42 +465,65 @@
position: relative;
}
.mp-cat-header-add {
.mp-cat-header-tools {
position: absolute;
top: calc(8px + env(safe-area-inset-top, 0px));
right: 16px;
right: 12px;
z-index: 60;
display: flex;
gap: 8px;
align-items: center;
}
.mp-cat-header-btn {
height: 32px;
padding: 0 12px;
font-size: 13px;
padding: 0 10px;
font-size: 12px;
font-weight: 600;
color: #fff;
cursor: pointer;
background: rgb(255 255 255 / 15%);
border: 1px solid rgb(255 255 255 / 75%);
border-radius: 8px;
white-space: nowrap;
}
.mp-cat-header-add:active {
.mp-cat-header-btn:active {
opacity: 0.8;
}
.mp-cat-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 10px 24px;
.mp-cat-tree {
margin: 12px 10px 24px;
overflow: hidden;
background: #fff;
border: 1px solid #dcebe4;
border-radius: 16px;
}
.mp-cat-row {
display: flex;
gap: 6px;
align-items: center;
min-height: 52px;
padding: 8px 10px 8px 0;
min-height: 54px;
padding: 10px 10px 10px 0;
background: #fff;
border: 1px solid #dcebe4;
border-radius: 12px;
border-bottom: 1px solid #edf5f1;
}
.mp-cat-row:last-child {
border-bottom: none;
}
.mp-cat-row.is-l2 {
background: #fbfdff;
}
.mp-cat-row.is-l3 {
background: #fafcfb;
}
.mp-cat-row:active {
background: #f7fbf9;
}
.mp-cat-row__toggle {
@@ -515,6 +538,11 @@
cursor: pointer;
background: transparent;
border: none;
transition: transform 0.15s ease;
}
.mp-cat-row__toggle.is-open {
transform: rotate(90deg);
}
.mp-cat-row__toggle.is-leaf {
@@ -536,9 +564,16 @@
}
.mp-cat-row__meta {
margin-top: 4px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-top: 3px;
font-size: 11px;
color: #6b7b74;
}
.mp-cat-row__add,
.mp-cat-row__more {
flex-shrink: 0;
width: 36px;
@@ -552,11 +587,18 @@
border-radius: 8px;
}
.mp-cat-row__add {
width: 32px;
height: 32px;
font-size: 16px;
font-weight: 700;
}
.status-tag {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 2px 8px;
min-height: 20px;
padding: 1px 7px;
font-size: 11px;
font-weight: 600;
border: 1px solid transparent;