feat: 实现全局响应式布局,适配不同设备、不同屏幕、不同分辨率

- 统一断点体系:560px(手机)、900px(平板)、1180px(小桌面)
- Shell导航:900px底部导航条、560px紧凑布局、顶栏触控优化
- 电商页面:三栏布局在平板/手机下改为单栏堆叠+横向标签切换
- 工作台:启动页编辑器全宽、消息气泡适配窄屏、建议标签换行
- 画布页面:工具栏横向滚动、节点缩小、手机全屏操作
- 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点
- 新增32条@media规则,媒体查询从107条增至139条
This commit is contained in:
2026-06-02 17:45:57 +08:00
parent bedee3ba8d
commit ecade14bd0
17 changed files with 769 additions and 0 deletions
+93
View File
@@ -709,3 +709,96 @@
right: -9999px;
height: 1px;
}
/* ═══════════════════════════════════════════════════════
Responsive: Canvas
Breakpoints: 900px / 560px
═══════════════════════════════════════════════════════ */
/* ── 900px: Tablet — compact toolbar ── */
@media (max-width: 900px) {
.studio-canvas-page {
flex-direction: column;
}
.studio-canvas-toolbar {
flex: 0 0 auto;
flex-direction: row;
width: 100%;
padding: 8px 12px;
gap: 6px;
overflow-x: auto;
border-right: none;
border-bottom: 1px solid var(--border-weak);
-webkit-overflow-scrolling: touch;
}
.studio-canvas-toolbar__group {
flex-direction: row;
flex-shrink: 0;
gap: 4px;
}
.studio-canvas-toolbar button {
min-width: 36px;
height: 36px;
font-size: 14px;
}
.studio-canvas-main {
flex: 1;
min-height: 0;
}
.studio-canvas-node {
min-width: 140px;
min-height: 60px;
}
}
/* ── 560px: Phone — fullscreen canvas ── */
@media (max-width: 560px) {
.studio-canvas-page {
flex-direction: column;
}
.studio-canvas-toolbar {
flex: 0 0 auto;
padding: 6px 8px;
gap: 4px;
border-bottom: 1px solid var(--border-weak);
}
.studio-canvas-toolbar button {
min-width: 30px;
height: 30px;
padding: 0 6px;
font-size: 12px;
border-radius: 8px;
}
.studio-canvas-main {
flex: 1;
min-height: 0;
}
.studio-canvas-node {
min-width: 110px;
min-height: 48px;
border-radius: 10px;
padding: 8px;
}
.studio-canvas-project-bar {
right: 8px;
left: 8px;
bottom: 80px;
gap: 4px;
border-radius: 10px;
padding: 8px 10px;
}
.studio-canvas-project-bar__name-form {
font-size: 12px;
}
}