tools/label-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移动端适配

Browse Source
This commit is contained in:
iqudoo
2026-06-13 02:23:11 +08:00
parent f2689520bd
commit 6c314f9808
10 changed files with 1058 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/index.css
View File

@@ -368,6 +368,7 @@ body {
appearance: none;
box-sizing: border-box;
width: var(--color-input-size);
min-width: var(--color-input-size);
height: var(--color-input-size);
min-height: var(--color-input-size);
padding: 0;
@@ -407,6 +408,13 @@ body {
height: 100%;
}
/* mobile-field 行内与输入框同高（44px）；ps-field 使用默认 calc 与 ps-field 一致 */
.flex:has(.mobile-field) > .color-input {
--color-input-radius: 10px;
--color-input-border: #e2e8f0;
--color-input-size: 44px;
}
.ps-section-title {
font-size: 10px;
font-weight: 700;
@@ -730,39 +738,62 @@ body {
/* ── Mobile layout (< 768px) ── */
@media (max-width: 767px) {
/* Mobile export flow */
/* Mobile export flow — shares mobile-design-view shell */
.mobile-export-view {
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
background: #f1f5f9;
}
.mobile-export-header {
display: flex;
align-items: center;
padding-top: calc(12px + env(safe-area-inset-top, 0px));
padding-bottom: 12px;
}
.mobile-export-back {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
width: 36px;
height: 36px;
border: none;
border-radius: 10px;
border-radius: 8px;
background: transparent;
color: #e2e8f0;
color: #ccc;
cursor: pointer;
flex-shrink: 0;
}
.mobile-export-back:active {
background: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.08);
}
.mobile-export-preview-wrap {
background: #2a2a2a;
}
.mobile-export-preview-wrap .mobile-preview-toolbar {
padding: 6px 10px;
min-height: 36px;
}
.mobile-export-preview-wrap .mobile-preview-workspace {
background: #2a2a2a;
}
.mobile-export-preview-wrap .mobile-preview-status {
padding: 4px 10px;
font-size: 10px;
}
.mobile-export-props-nav {
width: 76px;
}
.mobile-export-props-nav-btn {
min-height: 68px;
font-size: 9px;
line-height: 1.25;
white-space: normal;
text-align: center;
}
.mobile-export-props-nav-btn span {
max-width: 100%;
}
.mobile-export-steps {
@@ -1116,13 +1147,7 @@ body {
margin: 0 0 8px;
}
.color-input {
--color-input-radius: 10px;
--color-input-border: #e2e8f0;
--color-input-size: 44px;
}
.color-input:focus {
.flex:has(.mobile-field) > .color-input:focus {
border-color: #818cf8;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
@@ -1191,13 +1216,32 @@ body {
font-size: 12px;
}
.mobile-header-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
transition: background 0.15s;
}
.mobile-header-menu-btn:active {
background: rgba(255, 255, 255, 0.22);
}
.mobile-template-actions {
width: 100%;
flex-wrap: nowrap;
gap: 10px;
}
.mobile-template-actions .mobile-primary-btn {
.mobile-template-actions .mobile-primary-btn,
.mobile-template-actions .mobile-secondary-btn {
flex: 1;
min-width: 0;
}
@@ -1206,15 +1250,162 @@ body {
transform: scale(0.97);
}
.mobile-design-block {
.mobile-design-view {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
background: #323232;
color: #e8e8e8;
}
.mobile-design-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
background: #292929;
border-bottom: 1px solid #1a1a1a;
flex-shrink: 0;
}
.mobile-design-header-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: transparent;
color: #ccc;
cursor: pointer;
}
.mobile-design-header-icon-btn:active:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
}
.mobile-design-header-icon-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.mobile-design-canvas-wrap {
flex: 1 1 42%;
min-height: 180px;
max-height: 52vh;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border-bottom: 1px solid #1a1a1a;
}
.mobile-design-canvas-shell {
flex: 1;
min-height: 0;
}
.mobile-design-props-wrap {
flex: 1 1 48%;
min-height: 220px;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: #292929;
}
.mobile-design-props {
display: flex;
flex: 1;
min-height: 0;
min-width: 0;
}
.mobile-design-props-nav {
display: flex;
flex-direction: column;
gap: 4px;
width: 64px;
flex-shrink: 0;
padding: 8px 6px;
background: #252525;
border-right: 1px solid #1a1a1a;
}
.mobile-design-props-nav-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
gap: 16px;
gap: 4px;
min-height: 56px;
padding: 6px 4px;
border: none;
border-radius: 10px;
background: transparent;
color: #888;
font-size: 10px;
font-weight: 600;
cursor: pointer;
}
.mobile-design-props-nav-btn.active {
background: #1e3a4f;
color: #31a8ff;
}
.mobile-design-props-panel {
flex: 1;
min-width: 0;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.mobile-design-props-panel::-webkit-scrollbar {
display: none;
}
.mobile-layers-panel .ps-layer-item .opacity-0 {
opacity: 1;
}
.mobile-design-toolstrip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
background: #292929;
border-top: 1px solid #1a1a1a;
flex-shrink: 0;
}
.mobile-design-toolstrip-tools {
display: flex;
align-items: center;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
min-width: 0;
flex: 1;
}
.mobile-design-toolstrip-tools::-webkit-scrollbar {
display: none;
}
.mobile-design-tool-btn {
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
flex-shrink: 0;
}
}