fix: 补充图库未选中布局背景
为未选中的网格或瀑布流按钮增加浅灰底色,保留选中绿色状态,并补充切换状态测试。
This commit is contained in:
@@ -584,7 +584,8 @@ async function showStaleForms() {
|
||||
<span class="filter-result-count">{{ filtered.length }} 个形态</span>
|
||||
<div class="gallery-layout-switch" role="group" aria-label="图库显示方式">
|
||||
<NButton
|
||||
class="icon-button"
|
||||
class="icon-button layout-option-button"
|
||||
:class="{ 'layout-option-active': layout === 'grid' }"
|
||||
size="small"
|
||||
:type="layout === 'grid' ? 'primary' : 'default'"
|
||||
:aria-pressed="layout === 'grid'"
|
||||
@@ -595,7 +596,8 @@ async function showStaleForms() {
|
||||
<template #icon><LayoutGrid :size="16" /></template>
|
||||
</NButton>
|
||||
<NButton
|
||||
class="icon-button"
|
||||
class="icon-button layout-option-button"
|
||||
:class="{ 'layout-option-active': layout === 'masonry' }"
|
||||
size="small"
|
||||
:type="layout === 'masonry' ? 'primary' : 'default'"
|
||||
:aria-pressed="layout === 'masonry'"
|
||||
@@ -898,6 +900,10 @@ async function showStaleForms() {
|
||||
.gallery-layout-switch {
|
||||
@apply flex items-center gap-1;
|
||||
}
|
||||
/* 未选中的排版按钮保留浅灰底,和筛选容器区分,同时不覆盖选中项的绿色状态。 */
|
||||
.gallery-layout-switch .layout-option-button:not(.layout-option-active) {
|
||||
background: var(--app-control-hover);
|
||||
}
|
||||
@container (max-width: 1200px) {
|
||||
.form-image-toolbar.has-impact-picker,
|
||||
.form-image-toolbar.has-impact-picker.has-impact-actions {
|
||||
|
||||
Reference in New Issue
Block a user