实验页:编辑区和运行区之间的竖条上的小箭头换成竖排文字"收起运行区""展开运行区",竖条加宽到 22px

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed 2026-10-27 16:41:46 +08:00
1 parent e177753ad6
commit a2f03ee57f
1 file changed
+9 -6
+9 -6
View File
@@ -676,7 +676,7 @@ function run() {
</section> </section>
<button class="run-toggle" :title="runCollapsed ? '展开运行区' : '收起运行区(左边的代码和设计器占满宽度,运行时自动展开)'" @click="toggleRunArea()"> <button class="run-toggle" :title="runCollapsed ? '展开运行区' : '收起运行区(左边的代码和设计器占满宽度,运行时自动展开)'" @click="toggleRunArea()">
{{ runCollapsed ? '◂' : '▸' }} {{ runCollapsed ? '展开运行区' : '收起运行区' }}
</button> </button>
<RunArea v-show="!runCollapsed" :session="session" @diagnostic="showDiagnostic" /> <RunArea v-show="!runCollapsed" :session="session" @diagnostic="showDiagnostic" />
</main> </main>
@@ -763,22 +763,25 @@ function run() {
.workspace { .workspace {
flex: 1; flex: 1;
display: grid; display: grid;
grid-template-columns: minmax(0, 3fr) 14px minmax(360px, 2fr); grid-template-columns: minmax(0, 3fr) 22px minmax(360px, 2fr);
min-height: 0; min-height: 0;
} }
.workspace.run-collapsed { .workspace.run-collapsed {
grid-template-columns: minmax(0, 1fr) 14px; grid-template-columns: minmax(0, 1fr) 22px;
} }
/* 编辑区和运行区之间的竖条:点一下收起、展开运行区 */ /* 编辑区和运行区之间的竖条:点一下收起、展开运行区(写着"收起运行区""展开运行区",比只有箭头好找) */
.run-toggle { .run-toggle {
padding: 0; padding: 0;
border: none; border: none;
border-right: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb;
background: #f3f4f6; background: #f3f4f6;
color: #6b7280; color: #4b5563;
font-size: 10px; font-size: 12px;
/* 竖排文字,整根竖条都能点 */
writing-mode: vertical-rl;
letter-spacing: 2px;
cursor: pointer; cursor: pointer;
} }