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

feat(workbench): 优化电商出品工作台

Browse Source
This commit is contained in:
ddcat666
2026-10-13 22:45:58 +08:00
parent f6b60a3855
commit 17e9f5ed4e
6 changed files with 1050 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,7 +52,7 @@
padding: 0 !important;
backdrop-filter: blur(28px) saturate(140%);
-webkit-backdrop-filter: blur(28px) saturate(140%);
animation: creation-popover-enter var(--motion-dur-fast-calc) var(--motion-ease-out) both;
animation: none;
}
.dark .creation-model-picker-surface {
@@ -114,7 +114,7 @@
min-height: 52px;
border-radius: 9px;
padding: 7px 9px;
transition: background-color 150ms ease, transform 120ms ease;
transition: none;
}
@@ -155,7 +155,7 @@
font-weight: 600;
white-space: nowrap;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
transition: transform 150ms var(--motion-ease-out), border-color 150ms ease, background-color 150ms ease;
transition: none;
}
html:not(.dark) .creation-model-picker.canvas-composer-model-picker {
@@ -169,7 +169,6 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker {
.creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
border-color: rgba(255, 255, 255, .25);
background: #292d34;
transform: translateY(-1px);
}
html:not(.dark) .creation-model-picker.canvas-composer-model-picker:hover,
@@ -197,10 +196,10 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expande
font-weight: 600;
white-space: nowrap;
box-shadow: none;
transition: border-color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out);
transition: none;
}
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { border-color: rgba(255, 255, 255, .12); background: #272b32; transform: translateY(-1px); }
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { border-color: rgba(255, 255, 255, .12); background: #272b32; }
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(196px, 26vw); justify-content: flex-start; }
.creation-chat-composer .creation-model-picker .canvas-model-picker-trigger-icon { width: 19px; height: 19px; border-radius: 5px; }
@@ -252,10 +251,10 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expande
line-height: 1;
max-width: 100%;
min-width: 0;
outline: none !important;
outline: none;
padding: 0 9px;
text-align: left;
transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
transition: none;
}
.canvas-composer-model-picker:hover {
@@ -267,7 +266,11 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expande
.canvas-composer-model-picker[aria-expanded="true"] {
background: color-mix(in srgb, var(--workspace-surface-strong) 84%, var(--workspace-accent) 16%);
box-shadow: none !important;
outline: none !important;
}
.canvas-composer-model-picker:focus-visible {
outline: 2px solid var(--control-focus-ring);
outline-offset: 2px;
}
.canvas-model-picker-label {
@@ -289,7 +292,7 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expande
color: color-mix(in srgb, var(--foreground) 52%, transparent);
flex: 0 0 14px;
height: 14px;
transition: transform var(--motion-instant) ease-out;
transition: none;
width: 14px;
}
@@ -345,7 +348,7 @@ html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expande
overflow: hidden;
padding: 6px 7px;
text-align: left;
transition: background-color var(--motion-instant) ease-out;
transition: none;
width: 100%;
}
@@ -495,7 +498,7 @@ html:not(.dark) .canvas-composer-model-picker[aria-expanded="true"] {
font-size: 11px;
font-weight: 500;
box-shadow: none;
transition: color var(--motion-state) ease, background-color var(--motion-state) ease, transform var(--motion-state) var(--motion-ease-out);
transition: none;
}
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
@@ -885,13 +888,12 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
border-radius: 999px !important;
background: var(--user-surface-muted) !important;
color: var(--user-ink-muted) !important;
transition: background var(--user-motion), color var(--user-motion), transform var(--user-motion), box-shadow var(--user-motion) !important;
transition: none !important;
}
.app-user-workspace .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
.app-user-workspace .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
background: var(--user-surface-hover) !important;
color: var(--user-ink) !important;
transform: translateY(-1px);
box-shadow: 0 8px 18px color-mix(in srgb, var(--user-ink) 8%, transparent);
}
.app-user-workspace .creation-launchpad .creation-model-picker.canvas-composer-model-picker {
@@ -911,7 +913,7 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
.app-user-workspace .creation-model-picker-menu .canvas-model-picker-brands { display: grid; gap: 5px; }
.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 { 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: none; }
.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; }
@@ -943,7 +945,7 @@ html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.ca
.creation-model-picker-surface .canvas-model-picker-brands { display: grid; gap: 5px; }
.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 { 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: none; }
.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; }