admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-07-30 04:44:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(canvas): 重构画布助手面板组件结构

Browse Source 
- 移除 Segmented 组件并替换为自定义模式切换按钮
- 替换 ModelPicker 为 ComposerModelPill 组件
- 添加下拉菜单实现模型选择功能
- 优化 CSS 样式类和响应式布局
- 更新图标引入和工具栏组件结构
- 简化提示词库按钮样式配置
This commit is contained in:
HouYunFei
2026-05-23 15:08:13 +08:00
parent e319481976
commit ca4e87bddf
4 changed files with 204 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/globals.css
+132 -8
View File
@@ -319,6 +319,138 @@
line-height: 1 !important;
}
.canvas-composer-tools {
container-type: inline-size;
}
.canvas-composer-icon.ant-btn,
.canvas-composer-model-pill {
flex: 0 0 32px;
width: 32px;
}
.canvas-composer-mode-button {
width: 32px;
}
.canvas-composer-model-text,
.canvas-composer-model-arrow,
.canvas-composer-mode-button span,
.canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
display: none;
}
.canvas-composer-model-pill {
align-items: center;
border: 0;
border-radius: 999px;
cursor: pointer;
display: flex;
gap: 7px;
height: 32px;
justify-content: center;
padding-inline: 8px;
transition: opacity 0.15s ease;
}
.canvas-composer-model-pill:hover {
opacity: 0.82;
}
@container (min-width: 400px) {
.canvas-composer-mode-button {
padding-inline: 8px;
width: auto;
}
.canvas-composer-mode-button span,
.canvas-composer-model-text,
.canvas-composer-model-arrow {
display: inline;
font-size: 12px;
line-height: 1;
}
.canvas-composer-model-pill {
flex-basis: 180px;
max-width: 180px;
width: 180px !important;
justify-content: flex-start;
}
.canvas-composer-icon.ant-btn {
flex: 0 1 auto;
max-width: 170px;
width: auto !important;
}
.canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
display: inline-flex;
min-width: 0;
}
}
@container (min-width: 560px) {
.canvas-composer-model-pill {
flex-basis: 240px;
max-width: 240px;
width: 240px !important;
}
.canvas-composer-icon.ant-btn {
flex: 0 1 auto;
max-width: 220px;
}
}
.canvas-model-dropdown .ant-dropdown-menu {
border: 1px solid rgba(120, 113, 108, 0.18);
border-radius: 12px;
box-shadow: 0 18px 42px rgba(28, 25, 23, 0.18);
min-width: 220px;
padding: 6px;
}
.canvas-model-dropdown .ant-dropdown-menu-item {
border-radius: 8px;
color: #292524;
font-size: 13px;
line-height: 1;
margin: 1px 0;
min-height: 32px;
padding: 7px 10px !important;
}
.canvas-model-dropdown .ant-dropdown-menu-item:hover {
background: rgba(28, 25, 23, 0.06) !important;
}
.canvas-model-dropdown .ant-dropdown-menu-item-selected,
.canvas-model-dropdown .ant-dropdown-menu-item-selected:hover {
background: rgba(28, 25, 23, 0.1) !important;
color: #1c1917 !important;
font-weight: 500;
}
.dark .canvas-model-dropdown .ant-dropdown-menu {
background: #1f1d1a;
border-color: rgba(214, 211, 209, 0.14);
}
.dark .canvas-model-dropdown .ant-dropdown-menu-item {
color: #f5f5f4;
}
.dark .canvas-model-dropdown .ant-dropdown-menu-item:hover {
background: rgba(245, 245, 244, 0.08) !important;
}
.dark .canvas-model-dropdown .ant-dropdown-menu-item-selected,
.dark .canvas-model-dropdown .ant-dropdown-menu-item-selected:hover {
background: rgba(245, 245, 244, 0.14) !important;
color: #fafaf9 !important;
}
.canvas-control-select.ant-select-focused .ant-select-selector,
.canvas-control-number.ant-input-number-focused {
border-color: #a8a29e !important;
@@ -334,14 +466,6 @@
border-color: #78716c !important;
}
.canvas-composer-mode.ant-segmented .ant-segmented-item-label {
align-items: center;
display: flex;
height: 30px;
justify-content: center;
padding-inline: 9px;
}
.canvas-image-settings-popover .ant-popover-inner {
border-radius: 18px;
box-shadow: 0 18px 54px rgba(28, 25, 23, 0.16);