Skip to content

Commit 2cc79e7

Browse files
LanwyWriteXULanwyWriteXU
committed
updated update
1 parent bdf2108 commit 2cc79e7

9 files changed

Lines changed: 638 additions & 4 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
"redux-throttle": "0.1.1",
9595
"scratch-audio": "github:AstraEditor/scratch-audio#develop",
9696
"scratch-blocks": "github:AstraEditor/scratch-blocks#develop-builds",
97-
"scratch-extension-editor": "github:AstraEditor/scratch-extension-editor#main",
97+
"scratch-monaco-editor": "file:../scratch-monaco-editor",
9898
"scratch-paint": "github:AstraEditor/scratch-paint#develop",
9999
"scratch-render": "github:AstraEditor/scratch-render#develop",
100100
"scratch-vm": "github:AstraEditor/scratch-vm#master",

‎src/components/gui/gui.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { openAeFeaturesModal } from '../../reducers/modals.js';
4848

4949
import ExtensionManager from '../extension-chooser/extension-chooser.jsx';
5050
import PreviewExt from '../../containers/ae-preview-ext.jsx';
51+
import MonacoEditorTabs from '../monaco-editor-tabs/monaco-editor-tabs.jsx';
5152

5253
import { STAGE_SIZE_MODES, FIXED_WIDTH, UNCONSTRAINED_NON_STAGE_WIDTH } from '../../lib/layout-constants';
5354
import { resolveStageSize } from '../../lib/screen-utils';
@@ -548,6 +549,19 @@ const GUIComponent = props => {
548549
id="gui.gui.soundsTab"
549550
/>
550551
</Tab>
552+
<Tab
553+
className={tabClassNames.tab}
554+
>
555+
<img
556+
draggable={false}
557+
src={codeIcon()}
558+
/>
559+
<FormattedMessage
560+
defaultMessage="Monaco Editor"
561+
description="Button to get to the Monaco editor panel"
562+
id="gui.gui.monacoEditorTab"
563+
/>
564+
</Tab>
551565
<div className='varM'>
552566
{/*这里是变量Tab*/}
553567
</div>
@@ -616,6 +630,9 @@ const GUIComponent = props => {
616630
<TabPanel className={tabClassNames.tabPanel}>
617631
{soundsTabVisible ? <SoundTab vm={vm} /> : null}
618632
</TabPanel>
633+
<TabPanel className={tabClassNames.tabPanel}>
634+
<MonacoEditorTabs vm={vm} />
635+
</TabPanel>
619636
</Tabs>
620637
{backpackVisible ? (
621638
<Backpack host={backpackHost} />

‎src/components/monaco-editor-tabs/monaco-editor-tabs.css‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
width: 100%;
5+
height: 100%;
6+
background-color: #1e1e1e;
7+
overflow: hidden;
8+
}
9+
10+
.tabBar {
11+
display: flex;
12+
align-items: center;
13+
background-color: #252526;
14+
border-bottom: 1px solid #3e3e42;
15+
overflow-x: auto;
16+
min-height: 35px;
17+
}
18+
19+
.tab {
20+
display: flex;
21+
align-items: center;
22+
padding: 8px 12px;
23+
cursor: pointer;
24+
border-right: 1px solid #3e3e42;
25+
background-color: #2d2d2d;
26+
min-width: 120px;
27+
max-width: 200px;
28+
transition: background-color 0.2s;
29+
}
30+
31+
.tab:hover {
32+
background-color: #3e3e42;
33+
}
34+
35+
.activeTab {
36+
background-color: #1e1e1e;
37+
border-bottom: 2px solid #007acc;
38+
}
39+
40+
.tabName {
41+
flex: 1;
42+
font-size: 13px;
43+
color: #cccccc;
44+
overflow: hidden;
45+
text-overflow: ellipsis;
46+
white-space: nowrap;
47+
margin-right: 8px;
48+
}
49+
50+
.unsaved {
51+
color: #007acc;
52+
margin-left: 4px;
53+
}
54+
55+
.closeButton {
56+
background: none;
57+
border: none;
58+
color: #858585;
59+
cursor: pointer;
60+
font-size: 12px;
61+
padding: 2px 4px;
62+
border-radius: 2px;
63+
flex-shrink: 0;
64+
transition: all 0.2s;
65+
}
66+
67+
.closeButton:hover {
68+
background-color: #3e3e42;
69+
color: #ffffff;
70+
}
71+
72+
.addTabButton {
73+
background: none;
74+
border: none;
75+
color: #858585;
76+
cursor: pointer;
77+
font-size: 18px;
78+
padding: 4px 8px;
79+
border-radius: 2px;
80+
flex-shrink: 0;
81+
transition: all 0.2s;
82+
margin-left: 4px;
83+
}
84+
85+
.addTabButton:hover {
86+
background-color: #3e3e42;
87+
color: #ffffff;
88+
}
89+
90+
.toolbar {
91+
display: flex;
92+
align-items: center;
93+
padding: 6px 12px;
94+
background-color: #333333;
95+
border-bottom: 1px solid #3e3e42;
96+
gap: 8px;
97+
}
98+
99+
.toolbarButton {
100+
display: flex;
101+
align-items: center;
102+
gap: 4px;
103+
padding: 4px 12px;
104+
background-color: #0e639c;
105+
border: none;
106+
border-radius: 3px;
107+
color: white;
108+
cursor: pointer;
109+
font-size: 13px;
110+
transition: background-color 0.2s;
111+
}
112+
113+
.toolbarButton:hover {
114+
background-color: #1177bb;
115+
}
116+
117+
.spacer {
118+
flex: 1;
119+
}
120+
121+
.editorArea {
122+
flex: 1;
123+
overflow: hidden;
124+
position: relative;
125+
}
126+
127+
.emptyState {
128+
display: flex;
129+
flex-direction: column;
130+
align-items: center;
131+
justify-content: center;
132+
width: 100%;
133+
height: 100%;
134+
color: #858585;
135+
background-color: #1e1e1e;
136+
}
137+
138+
.emptyIcon {
139+
font-size: 64px;
140+
margin-bottom: 16px;
141+
opacity: 0.5;
142+
}
143+
144+
.emptyTitle {
145+
font-size: 18px;
146+
font-weight: 600;
147+
margin-bottom: 8px;
148+
color: #cccccc;
149+
}
150+
151+
.emptyDescription {
152+
font-size: 14px;
153+
max-width: 400px;
154+
text-align: center;
155+
line-height: 1.5;
156+
}
157+
158+
/* 滚动条样式 */
159+
.tabBar::-webkit-scrollbar {
160+
height: 10px;
161+
}
162+
163+
.tabBar::-webkit-scrollbar-track {
164+
background: #1e1e1e;
165+
}
166+
167+
.tabBar::-webkit-scrollbar-thumb {
168+
background: #424242;
169+
border-radius: 5px;
170+
}
171+
172+
.tabBar::-webkit-scrollbar-thumb:hover {
173+
background: #4f4f4f;
174+
}

0 commit comments

Comments
 (0)