Skip to content

Commit cfc9718

Browse files
chengyu2333chengyu2333
committed
python播放器
1 parent f8c96c2 commit cfc9718

19 files changed

+348
-1486
lines changed

‎build/webpack.base.conf.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ function resolve (dir) {
1313
module.exports = {
1414
context: path.resolve(__dirname, '../'),
1515
entry: {
16-
app: './src/main.js'
16+
app: './src/main.js',
17+
appPlayer: './src/player.js'
1718
},
1819
output: {
1920
path: config.build.assetsRoot,

‎build/webpack.dev.conf.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,14 @@ const devWebpackConfig = merge(baseWebpackConfig, {
5555
new HtmlWebpackPlugin({
5656
filename: 'index.html',
5757
template: 'index.html',
58-
inject: true
58+
inject: true,
59+
chunks:['app']
60+
}),
61+
new HtmlWebpackPlugin({
62+
filename: 'player.html',
63+
template: 'player.html',
64+
inject: true,
65+
chunks:['appPlayer']
5966
}),
6067
// copy custom static assets
6168
new CopyWebpackPlugin([

‎build/webpack.prod.conf.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,17 @@ const webpackConfig = merge(baseWebpackConfig, {
7474
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
7575
chunksSortMode: 'dependency'
7676
}),
77+
new HtmlWebpackPlugin({
78+
filename: config.build.player,
79+
template: 'player.html',
80+
inject: true,
81+
minify: {
82+
removeComments: true,
83+
collapseWhitespace: true,
84+
removeAttributeQuotes: true
85+
},
86+
chunksSortMode: 'dependency'
87+
}),
7788
// keep module.id stable when vendor modules does not change
7889
new webpack.HashedModuleIdsPlugin(),
7990
// enable scope hoisting

‎config/index.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ module.exports = {
99

1010
// Paths
1111
assetsSubDirectory: 'static',
12-
assetsPublicPath: './',
12+
assetsPublicPath: '/',
1313
proxyTable: {},
1414

1515
// Various Dev Server settings
1616
host: 'localhost', // can be overwritten by process.env.HOST
17-
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
17+
port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
1818
autoOpenBrowser: false,
1919
errorOverlay: true,
2020
notifyOnErrors: true,
@@ -39,6 +39,7 @@ module.exports = {
3939
build: {
4040
// Template for index.html
4141
index: path.resolve(__dirname, '../dist/index.html'),
42+
player: path.resolve(__dirname, '../dist/player.html'),
4243

4344
// Paths
4445
assetsRoot: path.resolve(__dirname, '../dist'),

‎index.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1.0">
66
<title>teaching-python</title>
7+
<script>
8+
window.submitCode = function(code){
9+
console.log(code);
10+
}
11+
</script>
712
</head>
813
<body>
914
<div id="app"></div>

‎player.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
6+
<title>teaching-python-mobile</title>
7+
<script>
8+
</script>
9+
</head>
10+
<body>
11+
<div id="player"></div>
12+
<!-- built files will be auto injected -->
13+
</body>
14+
</html>

‎src/App.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
<template>
22
<div id="app">
3-
<PythonEditor/>
3+
<PythonEditor />
44
</div>
55
</template>
66

77
<script>
8-
import PythonEditor from './components/PythonEditor'
8+
import PythonEditor from "./components/PythonEditor";
99
1010
export default {
11-
name: 'App',
11+
name: "App",
1212
data() {
13-
return {
14-
}
13+
return {};
1514
},
1615
components: {
1716
PythonEditor,
18-
}
19-
}
17+
},
18+
};
2019
</script>
2120

2221
<style>

‎src/AppPlayer.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div id="player">
3+
<PythonPlayer />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import PythonPlayer from "./components/PythonPlayer";
9+
10+
export default {
11+
name: "AppPlayer",
12+
data() {
13+
return {};
14+
},
15+
components: {
16+
PythonPlayer,
17+
},
18+
};
19+
</script>
20+
21+
<style>
22+
</style>

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

‎src/components/JCodeEditor.vue

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import "codemirror/lib/codemirror.css";
4646
// 引入主题后还需要在 options 中指定主题才会生效 darcula gruvbox-dark hopscotch monokai
4747
// import "codemirror/theme/panda-syntax.css";
4848
49-
import "codemirror/theme/idea.css"
49+
import "codemirror/theme/monokai.css"
5050
//提示css
5151
import "codemirror/addon/hint/show-hint.css";
5252
@@ -82,6 +82,11 @@ export default {
8282
type: String,
8383
default: "",
8484
},
85+
//是否只读，nocursor禁止获取焦点
86+
readOnly:{
87+
type: [Boolean, String],
88+
default: false
89+
},
8590
// 外部传入的语法类型
8691
language: {
8792
type: String,
@@ -139,11 +144,12 @@ export default {
139144
// 默认配置
140145
matchBrackets: true,
141146
options: {
147+
readOnly: this.readOnly,
142148
// 缩进格式
143149
tabSize: 2,
144150
// 主题，对应主题库 JS 需要提前引入
145151
// theme: "panda-syntax",
146-
theme: "idea",
152+
theme: "monokai",
147153
line: true,
148154
extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
149155
hintOptions: {
@@ -264,23 +270,25 @@ export default {
264270
// coder 配置
265271
coderOptions() {
266272
return {
273+
readOnly: this.options.readOnly,
267274
tabSize: this.options.tabSize,
268275
theme: this.options.theme,
269276
lineNumbers: this.lineNumbers,
270277
line: true,
278+
extraKeys: this.options.extraKeys,
271279
hintOptions: this.options.hintOptions,
272280
};
273281
},
274282
isAutoHeight() {
275283
let { autoHeight } = this;
276-
if (
277-
typeof autoHeight === "string" &&
278-
autoHeight.toLowerCase().trim() === "!ie"
279-
) {
280-
// autoHeight = !(isIE() || isIE11())
281-
} else {
282-
autoHeight = true;
283-
}
284+
// if (
285+
// typeof autoHeight === "string" &&
286+
// autoHeight.toLowerCase().trim() === "!ie"
287+
// ) {
288+
// autoHeight = !(isIE() || isIE11())
289+
// } else {
290+
// autoHeight = true;
291+
// }
284292
return autoHeight;
285293
},
286294
fullScreenParentProps() {
@@ -347,7 +355,8 @@ export default {
347355
});
348356
349357
//自动提示
350-
this.coder.on("keypress", () => {
358+
this.coder.on("keyHandled", (e) => {
359+
console.log(e);
351360
this.coder.showHint();
352361
});
353362
},
@@ -478,8 +487,8 @@ export default {
478487
position: fixed;
479488
top: 10px;
480489
left: 10px;
481-
width: calc(100% - 20px);
482-
height: calc(100% - 20px);
490+
width: calc(100% - 0px);
491+
height: calc(100% - 0px);
483492
padding: 10px;
484493
background-color: #f5f5f5;
485494
@@ -501,8 +510,8 @@ export default {
501510
502511
&.auto-height {
503512
.full-screen-child {
504-
min-height: 120px;
505-
max-height: 320px;
513+
min-height: 200px;
514+
max-height: 100%;
506515
height: unset;
507516
overflow: hidden;
508517
}

‎src/components/PythonEditor.vue

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,39 @@
11
<template>
22
<div>
3-
<a-row :gutter="24">
4-
<a-col :span="16">
5-
<!-- 代码编辑区域 -->
6-
<a-form-item>
7-
<JCodeEditor
8-
language="python"
9-
v-model="code"
10-
:fullScreen="true"
11-
placeholder="请输入代码"
12-
ref="codeEditor"
13-
/>
14-
</a-form-item>
15-
</a-col>
16-
<a-col :span="8">
17-
<div>
18-
<input type="file" id="fileinput" style="display: none" />
19-
<a-button type="primary" @click="runit">运行</a-button>
20-
<a-button type="primary" @click="clear">清空</a-button>
21-
<a-button type="primary" @click="openFile">打开代码</a-button>
22-
<a-button type="primary" @click="saveFile">下载代码</a-button>
23-
<a-button type="primary" @click="submitCode">上传</a-button>
24-
</div>
25-
<pre id="output">{{ out }}</pre>
26-
<div id="mycanvas"></div>
27-
</a-col>
28-
</a-row>
3+
<a-layout>
4+
<a-layout-header>
5+
欢迎使用Python在线编辑器
6+
</a-layout-header>
7+
<a-layout>
8+
<a-layout-content>
9+
<a-form-item>
10+
<JCodeEditor
11+
language="python"
12+
v-model="code"
13+
:fullScreen="true"
14+
placeholder="请输入代码"
15+
ref="codeEditor"
16+
/>
17+
</a-form-item>
18+
</a-layout-content>
19+
<a-layout-sider :collapsible="false" :width="500" :theme="'light'">
20+
<!-- 控制按钮 -->
21+
<div class="control">
22+
<input type="file" id="fileinput" style="display: none" />
23+
<a-button type="primary" @click="runit">运行</a-button>
24+
<a-button type="primary" @click="clear">清空</a-button>
25+
<a-button type="primary" @click="openFile">打开</a-button>
26+
<a-button type="primary" @click="saveFile">下载</a-button>
27+
<a-button type="primary" @click="submitCode">提交</a-button>
28+
</div>
29+
<!-- 画布 -->
30+
<div id="mycanvas"></div>
31+
<!-- 代码输出 -->
32+
<pre id="output">{{ out }}</pre>
33+
</a-layout-sider>
34+
</a-layout>
35+
<!-- <a-layout-footer></a-layout-footer> -->
36+
</a-layout>
2937
</div>
3038
</template>
3139

@@ -102,13 +110,14 @@ export default {
102110
});
103111
saveAs(n);
104112
},
105-
submitCode(){
106-
113+
submitCode() {
114+
if (window.submitCode) {
115+
window.submitCode(this.code);
116+
}
107117
},
108118
setCode(code) {
109119
this.code = code;
110120
this.$refs.codeEditor.setCodeContent(code);
111-
console.log(this.code);
112121
},
113122
clear() {
114123
document.getElementById("output").innerHTML = "";
@@ -139,21 +148,37 @@ export default {
139148
};
140149
</script>
141150

142-
<style>
151+
<style lang="less">
143152
.CodeMirror {
144153
/* Set height, width, borders, and global font properties here */
145154
font-family: monospace;
146-
height: calc(100vh) !important;
155+
height: calc(100vh - 64px) !important;
147156
color: black;
148157
direction: ltr;
149158
}
150159
#output {
151160
border: 1px solid black;
152-
height: 30vh;
161+
height: 40vh;
162+
width: 100%;
163+
padding: 10px;
164+
margin: 10px 0;
153165
}
154166
155167
#mycanvas {
156168
border: 1px solid black;
157-
height: 30vh;
169+
height: 40vh;
170+
width: 100%;
171+
}
172+
.control {
173+
margin: 10px;
174+
button{
175+
margin: 10px 0;
176+
}
177+
}
178+
.ant-layout-header{
179+
background: #dfefff;
180+
}
181+
.ant-layout-sider{
182+
padding: 10px;
158183
}
159184
</style>

0 commit comments

Comments
 (0)