完善原型 mock 与交互细节
This commit is contained in:
iye
+285
-1
@@ -758,7 +758,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--r-md);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,.08);
|
||||
box-shadow: var(--shadow-floating);
|
||||
padding: 4px;
|
||||
z-index: 50;
|
||||
display: none;
|
||||
@@ -781,6 +781,271 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
.chip-menu .mi.selected .mi-check { opacity: 1; }
|
||||
.chip-menu .mi-sep { height: 1px; background: var(--border-faint); margin: 4px 6px; }
|
||||
|
||||
/* ─── Dropdown unification · 下拉框 / 菜单视觉收口 ─── */
|
||||
select.select,
|
||||
select.v-select,
|
||||
select.nm-select,
|
||||
select.duration-select,
|
||||
.filter-bar select {
|
||||
appearance: none !important;
|
||||
height: 36px !important;
|
||||
padding: 0 32px 0 14px !important;
|
||||
background-color: var(--surface) !important;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'><path d='M4 6l4 4 4-4' stroke='%237a7a7a' stroke-width='1.4'/></svg>") !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: right 12px center !important;
|
||||
border: 1px solid var(--black-alpha-12) !important;
|
||||
border-radius: var(--r-md) !important;
|
||||
color: var(--accent-black) !important;
|
||||
font-family: inherit !important;
|
||||
font-size: 13.5px !important;
|
||||
transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base) !important;
|
||||
}
|
||||
select.select:hover,
|
||||
select.v-select:hover,
|
||||
select.nm-select:hover,
|
||||
select.duration-select:hover,
|
||||
.filter-bar select:hover {
|
||||
border-color: var(--black-alpha-24) !important;
|
||||
}
|
||||
select.select:focus,
|
||||
select.v-select:focus,
|
||||
select.nm-select:focus,
|
||||
select.duration-select:focus,
|
||||
.filter-bar select:focus {
|
||||
border-color: var(--heat-40) !important;
|
||||
box-shadow: inset 0 0 0 1px var(--heat-40) !important;
|
||||
}
|
||||
|
||||
.pd-toolbar .filter,
|
||||
.pp-toolbar .pp-chip,
|
||||
.mp-main-h .tb-chip,
|
||||
.pc-main-h .tb-chip {
|
||||
height: 36px !important;
|
||||
padding: 0 14px !important;
|
||||
gap: 6px !important;
|
||||
background: var(--surface) !important;
|
||||
border: 1px solid var(--border-faint) !important;
|
||||
border-radius: var(--r-md) !important;
|
||||
color: var(--black-alpha-56) !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
transition: background var(--t-base), border-color var(--t-base), color var(--t-base) !important;
|
||||
}
|
||||
.pd-toolbar .filter:hover,
|
||||
.pp-toolbar .pp-chip:hover,
|
||||
.mp-main-h .tb-chip:hover,
|
||||
.pc-main-h .tb-chip:hover {
|
||||
background: var(--black-alpha-4) !important;
|
||||
border-color: var(--black-alpha-24) !important;
|
||||
color: var(--accent-black) !important;
|
||||
}
|
||||
.pd-toolbar .filter.open,
|
||||
.pd-toolbar .filter.filtered,
|
||||
.pp-toolbar .pp-chip.active,
|
||||
.mp-main-h .tb-chip.active,
|
||||
.pc-main-h .tb-chip.active {
|
||||
background: var(--heat-12) !important;
|
||||
border-color: var(--heat-40) !important;
|
||||
color: var(--heat) !important;
|
||||
}
|
||||
|
||||
:where(.chip-menu, .filter-pop, .pp-menu, .tb-menu, .io-param-menu, .move-menu, .cell-more-menu, .msg-more-menu, .batch-more-menu) {
|
||||
background: var(--surface) !important;
|
||||
border: 1px solid var(--border-faint) !important;
|
||||
border-radius: var(--r-md) !important;
|
||||
box-shadow: var(--shadow-floating) !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
:where(
|
||||
.chip-menu .mi,
|
||||
.filter-pop button,
|
||||
.pp-menu .mi,
|
||||
.tb-menu-item,
|
||||
.io-param-menu .mi,
|
||||
.move-menu .mv-item,
|
||||
.cell-more-menu button,
|
||||
.msg-more-menu button,
|
||||
.batch-more-menu button
|
||||
) {
|
||||
min-height: 32px !important;
|
||||
padding: 0 10px !important;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
border-radius: var(--r-sm) !important;
|
||||
color: var(--accent-black) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
font-family: inherit !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 400 !important;
|
||||
text-align: left !important;
|
||||
cursor: pointer !important;
|
||||
transition: background var(--t-base), color var(--t-base) !important;
|
||||
}
|
||||
:where(
|
||||
.chip-menu .mi,
|
||||
.filter-pop button,
|
||||
.pp-menu .mi,
|
||||
.tb-menu-item,
|
||||
.io-param-menu .mi,
|
||||
.move-menu .mv-item,
|
||||
.cell-more-menu button,
|
||||
.msg-more-menu button,
|
||||
.batch-more-menu button
|
||||
):hover {
|
||||
background: var(--black-alpha-4) !important;
|
||||
color: var(--accent-black) !important;
|
||||
}
|
||||
:where(
|
||||
.chip-menu .mi.selected,
|
||||
.filter-pop button.selected,
|
||||
.pp-menu .mi.selected,
|
||||
.tb-menu-item.active,
|
||||
.io-param-menu .mi.selected
|
||||
) {
|
||||
background: var(--heat-12) !important;
|
||||
color: var(--heat) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
:where(.cell-more-menu button.danger:hover, .msg-more-menu button.danger:hover, .batch-more-menu button.danger:hover) {
|
||||
background: var(--crimson-bg) !important;
|
||||
color: var(--accent-crimson) !important;
|
||||
}
|
||||
:where(.tb-menu-empty) {
|
||||
color: var(--black-alpha-48) !important;
|
||||
font-family: var(--font-mono) !important;
|
||||
font-size: 11.5px !important;
|
||||
letter-spacing: .02em !important;
|
||||
}
|
||||
|
||||
.rs-select {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
min-width: 126px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rs-select.rs-select-fill { width: 100%; }
|
||||
.rs-select.rs-select-filter { min-width: 126px; }
|
||||
.rs-select > select[data-rs-select-bound="1"] {
|
||||
position: absolute !important;
|
||||
inset: 0 auto auto 0 !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.rs-select-btn {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 12px 0 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--black-alpha-12);
|
||||
border-radius: var(--r-md);
|
||||
color: var(--accent-black);
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
cursor: pointer;
|
||||
transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base);
|
||||
}
|
||||
.rs-select-btn:hover {
|
||||
background: var(--black-alpha-4);
|
||||
border-color: var(--black-alpha-24);
|
||||
}
|
||||
.rs-select.open .rs-select-btn,
|
||||
.rs-select-btn:focus-visible {
|
||||
border-color: var(--heat-40);
|
||||
box-shadow: inset 0 0 0 1px var(--heat-40);
|
||||
}
|
||||
.rs-select-btn[disabled] {
|
||||
background: var(--black-alpha-5);
|
||||
color: var(--black-alpha-32);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rs-select-label {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rs-select-btn svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: var(--black-alpha-56);
|
||||
flex-shrink: 0;
|
||||
transition: transform var(--t-base), color var(--t-base);
|
||||
}
|
||||
.rs-select.open .rs-select-btn svg {
|
||||
transform: rotate(180deg);
|
||||
color: var(--heat);
|
||||
}
|
||||
.rs-select-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
max-width: min(260px, calc(100vw - 24px));
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
z-index: 1600;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--r-md);
|
||||
box-shadow: var(--shadow-floating);
|
||||
padding: 4px;
|
||||
}
|
||||
.rs-select-menu.align-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.rs-select.open .rs-select-menu { display: block; }
|
||||
.rs-select-option {
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: var(--r-sm);
|
||||
color: var(--accent-black);
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background var(--t-base), color var(--t-base);
|
||||
}
|
||||
.rs-select-option:hover,
|
||||
.rs-select-option.is-active {
|
||||
background: var(--black-alpha-4);
|
||||
}
|
||||
.rs-select-option.selected {
|
||||
background: var(--heat-12);
|
||||
color: var(--heat);
|
||||
font-weight: 500;
|
||||
}
|
||||
.rs-select-option[disabled] {
|
||||
color: var(--black-alpha-32);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rs-select-option .mi-check {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
color: var(--heat);
|
||||
opacity: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.rs-select-option.selected .mi-check { opacity: 1; }
|
||||
|
||||
/* ─── Clear-filters btn · 共享组件 ─── */
|
||||
.clear-filters {
|
||||
height: 36px; padding: 0 12px;
|
||||
@@ -1272,6 +1537,25 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
|
||||
color: var(--black-alpha-56);
|
||||
font-weight: 500;
|
||||
}
|
||||
.placeholder.has-mock-media {
|
||||
background-color: var(--background-lighter);
|
||||
background-image: var(--mock-media-url);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0;
|
||||
}
|
||||
.placeholder.has-mock-media .ph-frame {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.placeholder.has-mock-media.mock-label .ph-frame {
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
bottom: 8px;
|
||||
max-width: calc(100% - 16px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ─── Toast ─── */
|
||||
.toast {
|
||||
|
||||
Reference in New Issue
Block a user