tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(canvas): 模型选择 - 支持彩色展示标签并优化目录与积分交互

Browse Source
This commit is contained in:
ddCat
2026-09-21 11:11:10 +08:00
parent ea6f02b42f
commit 4f9e79f67f
31 changed files with 410 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/styles/shared/model-picker.css
View File

@@ -119,9 +119,6 @@
transition: background-color 150ms ease, transform 120ms ease;
}
.creation-model-picker-menu .canvas-model-picker-option:hover {
transform: translateY(-1px);
}
.creation-model-picker-menu .canvas-model-picker-option > span:first-child {
gap: 12px;
@@ -359,17 +356,14 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expande
width: 100%;
}
.canvas-model-picker-option:hover {
background: color-mix(in srgb, var(--workspace-accent) 9%, transparent) !important;
}
.canvas-model-picker-option[aria-selected="true"] {
background: color-mix(in srgb, var(--workspace-accent) 6%, transparent) !important;
}
.canvas-model-picker-option:focus-visible {
background: color-mix(in srgb, var(--workspace-accent) 13%, transparent) !important;
outline: none;
outline: 2px solid var(--control-selected-border);
outline-offset: -2px;
}
.canvas-model-picker-option > span:first-child {
@@ -382,8 +376,8 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expande
}
.canvas-model-picker-popover .canvas-model-picker-option > span:first-child > span:nth-child(2) {
flex: 0 0 auto;
min-width: max-content;
flex: 1 1 auto;
min-width: 0;
overflow: visible;
}
@@ -552,7 +546,6 @@ html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-m
.creation-model-picker-heading strong { color: #e6e8eb; font-weight: 500; }
.creation-model-picker-menu .canvas-model-picker-group-label { padding: 6px 7px 5px; font-size: 10px; }
.creation-model-picker-menu .canvas-model-picker-option { min-height: 43px; border-radius: 6px; padding: 5px 7px; }
.creation-model-picker-menu .canvas-model-picker-option:hover { transform: none; }
.creation-model-picker-menu .canvas-model-picker-option > span:first-child { gap: 8px; }
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child { width: 26px; height: 26px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .07) !important; }
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:first-child { font-size: 11px; }
@@ -603,10 +596,19 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
text-align: left;
cursor: pointer;
}
.canvas-model-picker-brand:hover,
.canvas-model-picker-brand.is-active {
border-color: var(--workspace-border);
background: var(--workspace-surface-hover);
/* 覆盖菜单外壳的透明底色，选中状态不依赖 hover。 */
.canvas-model-picker-menu .canvas-model-picker-brand[aria-pressed="true"],
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand[aria-pressed="true"] {
border-color: var(--control-selected-border);
background: var(--control-selected-bg);
color: var(--control-selected-fg);
}
.canvas-model-picker-menu .canvas-model-picker-brand[aria-pressed="true"] .canvas-model-picker-brand-arrow {
color: var(--control-selected-fg);
}
.canvas-model-picker-brand:focus-visible {
outline: 2px solid var(--control-selected-border);
outline-offset: 2px;
}
.canvas-model-picker-brand-icon {
display: grid;
@@ -649,7 +651,7 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
width: min(360px, calc(100vw - 24px)) !important;
}
.canvas-model-picker-menu.is-model-list {
width: min(720px, calc(100vw - 24px)) !important;
width: min(800px, calc(100vw - 24px)) !important;
}
.canvas-model-picker-two-pane {
display: grid;
@@ -721,15 +723,6 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
color: color-mix(in srgb, currentColor 52%, transparent);
font-size: 10px;
}
/* 模型下拉：选中项与当前 hover/focus 项展示说明，其他项保持安静。 */
.canvas-model-picker-option {
transition: background-color 160ms ease !important;
}
.canvas-model-picker-option.is-previewed:not(:disabled) {
background: color-mix(in srgb, var(--workspace-accent) 8%, var(--workspace-surface-strong)) !important;
}
.canvas-model-picker-description {
height: 16px;
line-height: 16px;
@@ -743,6 +736,33 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
opacity: 1;
}
/* 积分独立于选中态，金黄色图标与紧凑标签保持常驻可读。 */
.model-picker-price {
--model-price-ink: #946900;
color: var(--model-price-ink);
font-weight: 650;
line-height: 1.3;
gap: 3px;
white-space: nowrap;
}
.dark .model-picker-price {
--model-price-ink: #e8c45a;
}
.model-picker-price-icon {
width: 11px;
height: 11px;
flex: 0 0 11px;
}
.canvas-model-picker-option .model-picker-price {
border: 1px solid color-mix(in srgb, var(--model-price-ink) 20%, transparent);
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--model-price-ink) 9%, transparent);
padding: 2px 5px;
}
@media (prefers-reduced-motion: reduce) {
.canvas-model-picker-option,
.canvas-model-picker-description { transition: none !important; }
@@ -782,7 +802,6 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-subheading { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 5px 8px; color: var(--user-ink); font-size: 12px; font-weight: 650; }
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-subheading small { color: var(--user-ink-soft); font-size: 10px; font-weight: 500; }
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand { display: flex; min-height: 58px; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 13px; padding: 8px 10px; background: transparent; color: var(--user-ink); text-align: left; transition: background-color 160ms ease, border-color 160ms ease; }
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand:hover { border-color: var(--user-border); background: var(--user-surface-hover); }
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; background: var(--user-surface-muted); color: var(--user-ink-muted); }
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brand-copy strong { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
@@ -823,7 +842,6 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
.creation-model-picker-surface .canvas-model-picker-subheading { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 5px 8px; color: var(--foreground); font-size: 12px; font-weight: 650; }
.creation-model-picker-surface .canvas-model-picker-subheading small { color: color-mix(in srgb, var(--foreground) 52%, transparent); font-size: 10px; font-weight: 500; }
.creation-model-picker-surface .canvas-model-picker-brand { display: flex; min-height: 58px; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 13px; padding: 8px 10px; background: transparent; color: var(--foreground); text-align: left; transition: background-color 160ms ease, border-color 160ms ease; }
.creation-model-picker-surface .canvas-model-picker-brand:hover { border-color: var(--workspace-border); background: var(--workspace-surface-hover); }
.creation-model-picker-surface .canvas-model-picker-brand-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; background: var(--workspace-surface-hover); color: var(--foreground); }
.creation-model-picker-surface .canvas-model-picker-brand-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.creation-model-picker-surface .canvas-model-picker-brand-copy strong { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
@@ -840,4 +858,4 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
.creation-model-picker-surface .canvas-model-picker-option > span:first-child > span:first-child svg { color: currentColor !important; opacity: 1 !important; }
.creation-model-picker-surface .canvas-model-picker-option:nth-child(3n) > span:first-child > span:first-child { color: #d57b16; }
.creation-model-picker-surface .canvas-model-picker-option:nth-child(4n) > span:first-child > span:first-child { color: #25845d; }
.creation-model-picker-surface .canvas-model-picker-option .text-amber-600 { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: color-mix(in srgb, #e28a17 12%, var(--workspace-surface-strong)); color: #c66d00 !important; padding: 5px 8px; font-size: 11px; font-weight: 700; }
.creation-model-picker-surface .canvas-model-picker-option .model-picker-price { font-size: var(--fs-tiny); }