refactor: 统一主体与镜头目录并优化筛选工具栏布局
This commit is contained in:
GouJ
+214
-72
@@ -261,6 +261,11 @@ body {
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
.production-workspace,
|
||||
.identity-workspace,
|
||||
.storyboard-workspace {
|
||||
grid-template-columns: clamp(240px, 22%, 280px) minmax(0, 1fr);
|
||||
}
|
||||
.production-shot-list {
|
||||
max-height: none;
|
||||
overflow: hidden;
|
||||
@@ -271,15 +276,6 @@ body {
|
||||
min-height: 0;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
.identity-workspace > aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.identity-workspace {
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
}
|
||||
.identity-workspace > div {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
@@ -301,6 +297,193 @@ body {
|
||||
height: 100%;
|
||||
max-height: none;
|
||||
}
|
||||
/* 目录统一为固定标题／筛选区和独立滚动列表；不再依赖按钮的默认行高与内边距。 */
|
||||
.directory-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: var(--app-subtle);
|
||||
}
|
||||
.directory-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
gap: 8px;
|
||||
padding: 18px 16px 14px;
|
||||
font-size: 11px;
|
||||
color: var(--app-muted);
|
||||
}
|
||||
.directory-heading h3 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--app-ink);
|
||||
}
|
||||
.directory-heading h3 span {
|
||||
margin-left: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: var(--app-muted);
|
||||
}
|
||||
.directory-filters {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 0 12px 12px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--app-border);
|
||||
}
|
||||
.directory-filters > * {
|
||||
min-width: 0;
|
||||
}
|
||||
.directory-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
.directory-list-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px 10px 16px;
|
||||
}
|
||||
.directory-group-heading {
|
||||
flex-shrink: 0;
|
||||
padding: 14px 6px 2px;
|
||||
font:
|
||||
11px/1.6 ui-monospace,
|
||||
monospace;
|
||||
color: var(--app-muted);
|
||||
}
|
||||
.directory-group-heading:first-child {
|
||||
padding-top: 2px;
|
||||
}
|
||||
.n-button.directory-item {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 88px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 5px;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
.n-button.directory-item .n-button__content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.directory-item-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
}
|
||||
.directory-item-eyebrow {
|
||||
font:
|
||||
11px/1.5 ui-monospace,
|
||||
monospace;
|
||||
color: var(--app-muted);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.directory-item-title {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
font-weight: 500;
|
||||
color: var(--app-ink);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.directory-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 8px;
|
||||
color: var(--app-muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.7;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.directory-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 1px 5px;
|
||||
border: 1px solid var(--app-border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.directory-status svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.n-button.directory-item.selected {
|
||||
background: var(--app-surface);
|
||||
box-shadow: inset 3px 0 var(--app-ink);
|
||||
}
|
||||
.n-button.directory-item:focus-visible {
|
||||
outline: 2px solid var(--app-ink);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
/* Tabs 的默认整行宽度限制在左侧网格内，导出按钮始终处于同一行右端。 */
|
||||
.result-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.result-toolbar > .n-tabs {
|
||||
min-width: 0;
|
||||
}
|
||||
.result-toolbar > .n-button {
|
||||
justify-self: end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.result-toolbar .n-tabs-tab__label {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
}
|
||||
/* 筛选按内容区的实际宽度换行，避免侧栏展开后下拉框把其他控件挤到下一行。 */
|
||||
.form-image-filter-region {
|
||||
container-type: inline-size;
|
||||
margin-block: 16px;
|
||||
}
|
||||
.form-image-filters {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 360px) 152px minmax(260px, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
.form-image-filters > * {
|
||||
min-width: 0;
|
||||
}
|
||||
.filter-toggles {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.filter-toggles .n-checkbox__label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.filter-result-count {
|
||||
justify-self: end;
|
||||
color: var(--app-muted);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@container (max-width: 900px) {
|
||||
.form-image-filters {
|
||||
grid-template-columns: minmax(0, 1fr) 152px;
|
||||
}
|
||||
}
|
||||
@container (max-width: 460px) {
|
||||
.form-image-filters {
|
||||
grid-template-columns: minmax(0, 1fr) 120px;
|
||||
column-gap: 10px;
|
||||
}
|
||||
}
|
||||
.content-with-history {
|
||||
height: clamp(360px, 66dvh, 850px);
|
||||
min-height: 0;
|
||||
@@ -483,28 +666,9 @@ body {
|
||||
.shot-list {
|
||||
padding: 0;
|
||||
}
|
||||
.production-shot-list-content {
|
||||
padding-block: 8px;
|
||||
}
|
||||
.shot-list-content {
|
||||
padding: 0 8px 20px;
|
||||
}
|
||||
.history-content {
|
||||
padding: 23px 21px;
|
||||
}
|
||||
.production-shot-list-content,
|
||||
.shot-list-content,
|
||||
.identity-subject-list-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.n-button.production-shot-link,
|
||||
.n-button.shot-link,
|
||||
.n-button.identity-subject-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.image-history.n-scrollbar,
|
||||
.table-scroll.n-scrollbar {
|
||||
height: auto;
|
||||
@@ -608,21 +772,11 @@ body {
|
||||
.n-button:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
.n-button.shot-link,
|
||||
.n-button.production-shot-link,
|
||||
.n-button.identity-subject-item,
|
||||
.n-button.casting-item,
|
||||
.n-button.image-history-item {
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
.n-button.shot-link .n-button__content {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
.n-button.production-shot-link .n-button__content,
|
||||
.n-button.identity-subject-item .n-button__content,
|
||||
.n-button.image-history-item .n-button__content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -633,11 +787,6 @@ body {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.n-button.shot-link .n-button__border,
|
||||
.n-button.production-shot-link .n-button__border,
|
||||
.n-button.identity-subject-item .n-button__border {
|
||||
display: none;
|
||||
}
|
||||
.search-field {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
@@ -724,46 +873,39 @@ body {
|
||||
.workspace-heading .production-controls {
|
||||
grid-template-columns: minmax(100px, 1fr) 80px;
|
||||
}
|
||||
.production-workspace {
|
||||
.production-workspace,
|
||||
.storyboard-workspace {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 110px minmax(0, 1fr);
|
||||
grid-template-rows: 184px minmax(0, 1fr);
|
||||
}
|
||||
.production-shot-list {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 110px;
|
||||
.directory-panel {
|
||||
height: 100%;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--app-border);
|
||||
}
|
||||
.production-shot-list-content {
|
||||
.directory-heading {
|
||||
padding: 12px 14px 8px;
|
||||
}
|
||||
.directory-list-content {
|
||||
flex-direction: row;
|
||||
width: max-content;
|
||||
align-items: stretch;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.n-button.production-shot-link {
|
||||
width: 180px;
|
||||
min-height: 98px;
|
||||
.n-button.directory-item {
|
||||
width: 228px;
|
||||
min-height: 104px;
|
||||
}
|
||||
.directory-group-heading {
|
||||
display: none;
|
||||
}
|
||||
.identity-workspace {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: 180px minmax(0, 1fr);
|
||||
grid-template-rows: 250px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.identity-workspace > aside {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
gap: 6px 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
.identity-workspace > aside > * {
|
||||
margin-top: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.identity-workspace > aside > h3,
|
||||
.identity-workspace > aside > .identity-subject-list,
|
||||
.identity-workspace > aside > .n-button {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.storyboard-workspace {
|
||||
grid-template-columns: 120px minmax(0, 1fr);
|
||||
.directory-filters {
|
||||
grid-template-columns: minmax(0, 1fr) 120px;
|
||||
}
|
||||
.storyboard-controls {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
|
||||
Reference in New Issue
Block a user