Skip to content

Commit d38ee30

Browse files
committed
优化表达式编辑器布局:1. 设置整体最小高度以改善显示;2. 调整变量区域在隐藏键盘时的布局;3. 优化滚动条样式和搜索框布局;4. 增强变量区域的响应能力。
1 parent 8a4d553 commit d38ee30

File tree

1 file changed

+67
-2
lines changed

1 file changed

+67
-2
lines changed

src/components/ExpressionEditor.vue

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1751,6 +1751,9 @@ onMounted(() => {
17511751
gap: 16px;
17521752
transition: all 0.3s ease;
17531753
1754+
// 设置整体最小高度
1755+
min-height: 300px;
1756+
17541757
&.hide-variables {
17551758
.variables-section {
17561759
display: none;
@@ -1761,16 +1764,78 @@ onMounted(() => {
17611764
.calculator {
17621765
display: none;
17631766
}
1764-
// 当隐藏键盘时,移除间隙
17651767
gap: 0;
1768+
1769+
.variables-section {
1770+
border-right: none;
1771+
// 在隐藏键盘时,让变量区域占满剩余空间
1772+
flex: 1;
1773+
}
17661774
}
17671775
17681776
&.horizontal-layout {
17691777
flex-direction: row;
17701778
1771-
// 在水平布局且隐藏键盘时,移除间隙
1779+
.variables-section {
1780+
border-right: 1px solid var(--editor-border);
1781+
padding-right: 16px;
1782+
min-width: 200px;
1783+
flex-shrink: 1;
1784+
1785+
// 在水平布局时设置最大高度
1786+
max-height: 600px;
1787+
}
1788+
17721789
&.hide-keyboard {
17731790
gap: 0;
1791+
.variables-section {
1792+
border-right: none;
1793+
padding-right: 0;
1794+
}
1795+
}
1796+
}
1797+
1798+
.variables-section {
1799+
display: flex;
1800+
flex-direction: column;
1801+
min-height: 200px;
1802+
1803+
// 优化变量区域的布局
1804+
.variables-search {
1805+
margin-bottom: 12px;
1806+
flex-shrink: 0; // 防止搜索框被压缩
1807+
}
1808+
1809+
.variables {
1810+
flex: 1;
1811+
overflow: auto;
1812+
1813+
// 变量少时不强制占满空间
1814+
&:only-child {
1815+
flex: 0 1 auto;
1816+
}
1817+
1818+
// 优化滚动条样式
1819+
&::-webkit-scrollbar {
1820+
width: 6px;
1821+
}
1822+
1823+
&::-webkit-scrollbar-thumb {
1824+
background-color: var(--el-border-color-lighter);
1825+
border-radius: 3px;
1826+
}
1827+
1828+
&::-webkit-scrollbar-track {
1829+
background-color: transparent;
1830+
}
1831+
1832+
button {
1833+
margin-bottom: 8px;
1834+
1835+
&:last-child {
1836+
margin-bottom: 0;
1837+
}
1838+
}
17741839
}
17751840
}
17761841
}

0 commit comments

Comments
 (0)