Skip to content

Commit 36c9b3e

Browse files
1bananachicken1bananachicken
committed
fix: 优化边栏布局
1 parent 18499b5 commit 36c9b3e

2 files changed

Lines changed: 66 additions & 71 deletions

File tree

‎src/App.vue‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1480,60 +1480,62 @@ onUnmounted(() => {
14801480
{{ sidebarCollapsed ? '›' : '‹' }}
14811481
</button>
14821482
<div class="sidebar-content">
1483-
<div class="sidebar-heading">
1484-
<div><p class="eyebrow">MARKER CATEGORIES</p><h2>标记分类</h2></div>
1485-
<div class="filter-actions">
1486-
<button type="button" class="text-button" @click="selectAllCategories">全选</button>
1487-
<button type="button" class="text-button" @click="clearCategories">清空</button>
1483+
<div class="sidebar-categories">
1484+
<div class="sidebar-heading">
1485+
<div><p class="eyebrow">MARKER CATEGORIES</p><h2>标记分类</h2></div>
1486+
<div class="filter-actions">
1487+
<button type="button" class="text-button" @click="selectAllCategories">全选</button>
1488+
<button type="button" class="text-button" @click="clearCategories">清空</button>
1489+
</div>
14881490
</div>
1489-
</div>
1490-
<div class="category-list">
1491-
<template v-for="group in groupedCategories" :key="group.label">
1492-
<div class="category-group-block" :class="{ 'category-group-block--collapsed': isCategoryGroupCollapsed(group.label) }">
1493-
<button
1494-
v-if="collapsibleGroupLabels.has(group.label)"
1495-
class="category-group-toggle"
1496-
type="button"
1497-
@click="toggleCategoryGroup(group.label)"
1498-
>
1499-
<span class="category-group-heading">
1500-
<span class="category-group-title">{{ group.label }}</span>
1501-
</span>
1502-
<span class="category-group-meta">
1503-
<button
1504-
class="category-select-all category-select-all--inline"
1505-
:class="{
1506-
'category-select-all--active': isGroupFullySelected(group),
1507-
'category-select-all--partial': isGroupPartiallySelected(group),
1508-
}"
1509-
type="button"
1510-
:aria-checked="isGroupFullySelected(group) ? 'true' : isGroupPartiallySelected(group) ? 'mixed' : 'false'"
1511-
role="checkbox"
1512-
@click.stop="toggleCategoryGroupSelection(group)"
1513-
>
1514-
<span>全选</span>
1515-
<span class="category-select-all__box" aria-hidden="true">
1516-
<i v-if="isGroupFullySelected(group)" class="category-select-all__check" />
1517-
<i v-else-if="isGroupPartiallySelected(group)" class="category-select-all__dash" />
1518-
</span>
1519-
</button>
1520-
<small>{{ group.categories.length }}</small>
1521-
<i>{{ isCategoryGroupCollapsed(group.label) ? '▸' : '▾' }}</i>
1522-
</span>
1523-
</button>
1524-
<p v-else class="category-group">{{ group.label }}</p>
1525-
<div v-show="!isCategoryGroupCollapsed(group.label)" class="category-group-items">
1526-
<button v-for="category in group.categories" :key="category.id" class="category-button"
1527-
:class="{ 'category-button--muted': !activeCategories.has(category.id) }" type="button" @click="toggleCategory(category.id)">
1528-
<span class="category-icon" :style="{ '--category-color': category.color }">
1529-
<img v-if="category.iconUrl" :src="publicAssetUrl(category.iconUrl)" alt="" />
1530-
<template v-else>{{ category.icon }}</template>
1491+
<div class="category-list">
1492+
<template v-for="group in groupedCategories" :key="group.label">
1493+
<div class="category-group-block" :class="{ 'category-group-block--collapsed': isCategoryGroupCollapsed(group.label) }">
1494+
<button
1495+
v-if="collapsibleGroupLabels.has(group.label)"
1496+
class="category-group-toggle"
1497+
type="button"
1498+
@click="toggleCategoryGroup(group.label)"
1499+
>
1500+
<span class="category-group-heading">
1501+
<span class="category-group-title">{{ group.label }}</span>
1502+
</span>
1503+
<span class="category-group-meta">
1504+
<button
1505+
class="category-select-all category-select-all--inline"
1506+
:class="{
1507+
'category-select-all--active': isGroupFullySelected(group),
1508+
'category-select-all--partial': isGroupPartiallySelected(group),
1509+
}"
1510+
type="button"
1511+
:aria-checked="isGroupFullySelected(group) ? 'true' : isGroupPartiallySelected(group) ? 'mixed' : 'false'"
1512+
role="checkbox"
1513+
@click.stop="toggleCategoryGroupSelection(group)"
1514+
>
1515+
<span>全选</span>
1516+
<span class="category-select-all__box" aria-hidden="true">
1517+
<i v-if="isGroupFullySelected(group)" class="category-select-all__check" />
1518+
<i v-else-if="isGroupPartiallySelected(group)" class="category-select-all__dash" />
1519+
</span>
1520+
</button>
1521+
<small>{{ group.categories.length }}</small>
1522+
<i>{{ isCategoryGroupCollapsed(group.label) ? '▸' : '▾' }}</i>
15311523
</span>
1532-
<span>{{ category.label }}</span><small>{{ visibleCounts[category.id] }}</small>
15331524
</button>
1525+
<p v-else class="category-group">{{ group.label }}</p>
1526+
<div v-show="!isCategoryGroupCollapsed(group.label)" class="category-group-items">
1527+
<button v-for="category in group.categories" :key="category.id" class="category-button"
1528+
:class="{ 'category-button--muted': !activeCategories.has(category.id) }" type="button" @click="toggleCategory(category.id)">
1529+
<span class="category-icon" :style="{ '--category-color': category.color }">
1530+
<img v-if="category.iconUrl" :src="publicAssetUrl(category.iconUrl)" alt="" />
1531+
<template v-else>{{ category.icon }}</template>
1532+
</span>
1533+
<span>{{ category.label }}</span><small>{{ visibleCounts[category.id] }}</small>
1534+
</button>
1535+
</div>
15341536
</div>
1535-
</div>
1536-
</template>
1537+
</template>
1538+
</div>
15371539
</div>
15381540
<div class="sidebar-footer">
15391541
<div class="sidebar-expander">

‎src/styles.css‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -630,14 +630,10 @@ kbd {
630630
}
631631

632632
.category-list {
633-
display: grid;
634-
grid-template-columns: 1fr;
635-
grid-auto-rows: max-content;
636-
align-content: start;
637-
align-items: start;
633+
display: flex;
634+
flex-direction: column;
638635
gap: 0;
639636
margin: 16px 0;
640-
max-height: 268px;
641637
overflow-y: auto;
642638
padding-right: 4px;
643639
}
@@ -665,7 +661,7 @@ kbd {
665661
display: grid;
666662
gap: 8px;
667663
margin-top: 7px;
668-
align-self: start;
664+
flex: 0 0 auto;
669665
}
670666

671667
.category-group-block--collapsed {
@@ -1668,23 +1664,28 @@ kbd {
16681664

16691665
/* Keep interface chrome monochrome; marker accents remain category-specific. */
16701666
.sidebar-content {
1667+
display: grid;
1668+
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
16711669
min-height: 0;
16721670
overflow: hidden;
16731671
}
16741672

1673+
.sidebar-categories {
1674+
display: flex;
1675+
min-height: 0;
1676+
flex-direction: column;
1677+
overflow: hidden;
1678+
}
1679+
16751680
.category-list {
16761681
min-height: 0;
1677-
height: min(360px, 46%);
1678-
max-height: min(360px, 46%);
1679-
flex: 0 0 min(360px, 46%);
1680-
margin: 16px 0 12px;
1682+
flex: 1 1 auto;
1683+
margin: 16px 0 6px;
16811684
overflow-y: auto;
16821685
}
16831686

16841687
.sidebar-footer {
16851688
min-height: 0;
1686-
flex: 1 1 auto;
1687-
max-height: none;
16881689
margin-top: 0;
16891690
overflow-y: auto;
16901691
padding-right: 4px;
@@ -1748,14 +1749,6 @@ kbd {
17481749
}
17491750

17501751
@media (max-height: 760px) {
1751-
.category-list {
1752-
flex-basis: 220px;
1753-
}
1754-
1755-
.sidebar-footer {
1756-
max-height: 30%;
1757-
}
1758-
17591752
.switch-row,
17601753
.sidebar-expander__toggle,
17611754
.navigation-endpoint-row {

0 commit comments

Comments
 (0)