feat: add image-select modal (#49)

This commit is contained in:
JayBridge
2025-04-24 23:18:15 +08:00
parent 1b43bac6a0
commit 6db44f5ea0
3 changed files with 212 additions and 14 deletions

View File

@@ -2036,8 +2036,9 @@ button.infio-chat-input-model-select {
white-space: pre-wrap;
word-break: break-word;
user-select: text;
display: -webkit-box;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
@@ -2148,3 +2149,76 @@ button.infio-chat-input-model-select {
color: var(--text-muted);
font-size: var(--font-ui-smaller);
}
.infio-image-selector {
padding: var(--size-4-4);
min-width: 500px;
max-width: 800px;
}
.infio-image-selector-header {
display: flex;
gap: var(--size-2-2);
margin-bottom: var(--size-4-4);
}
.infio-image-search {
flex: 1;
padding: var(--size-2-2);
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
background-color: var(--background-primary);
color: var(--text-normal);
}
.infio-upload-button {
padding: var(--size-2-2) var(--size-4-4);
background-color: var(--interactive-accent);
color: var(--text-on-accent);
border-radius: var(--radius-s);
cursor: pointer;
font-size: var(--font-ui-small);
display: inline-flex;
align-items: center;
gap: var(--size-2-2);
}
.infio-image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--size-4-4);
max-height: 400px;
overflow-y: auto;
padding: var(--size-2-2);
}
.infio-image-item {
border: 1px solid var(--background-modifier-border);
border-radius: var(--radius-s);
padding: var(--size-2-2);
cursor: pointer;
transition: all 0.2s ease;
background-color: var(--background-primary);
}
.infio-image-item:hover {
background-color: var(--background-modifier-hover);
}
.infio-image-item img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: var(--radius-xs);
}
.infio-image-name {
margin-top: var(--size-2-2);
font-size: var(--font-ui-smaller);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-normal);
}