Skip to content

Commit 631a394

Browse files
Linho1219Linho1219
committed
基本功能完整实现
1 parent 4c58549 commit 631a394

9 files changed

Lines changed: 272 additions & 62 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Vue + TS</title>
7+
<title>function-plot-GUI</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎package-lock.json‎

Lines changed: 54 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@
1010
"postinstall": "patch-package"
1111
},
1212
"dependencies": {
13+
"@prettier/sync": "^0.5.2",
1314
"function-plot": "^2.0.0-0",
15+
"json5": "^2.2.3",
1416
"lodash-es": "^4.17.21",
17+
"prettier": "^3.4.2",
1518
"vue": "^3.5.13"
1619
},
1720
"devDependencies": {

‎src/App.vue‎

Lines changed: 94 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,20 @@
22
<Navbar />
33
<div id="content">
44
<div id="editor">
5-
<DataBlock
6-
v-for="(_dataItem, i) in graphData"
7-
v-model="graphData[i]"
8-
@delete="graphData.splice(i, 1)"
9-
/>
10-
<div class="plot-data add-data" @click="graphData.push({})">+ 添加</div>
11-
{{ graphData }}<br />
5+
<div class="editor-inner">
6+
<DataBlock
7+
v-for="(_dataItem, i) in graphData"
8+
v-model="graphData[i]"
9+
@delete="graphData.splice(i, 1)"
10+
/>
11+
<div class="plot-data add-data" @click="graphData.push({})">+ 添加</div>
12+
</div>
13+
<div class="plot-data output">
14+
<span class="output-title">代码</span>
15+
<pre>{{ formatted }}</pre>
16+
</div>
1217
</div>
13-
<Graph :graphData="graphData" ref="graphRef" />
18+
<Graph :key="cnt" :graphData="graphData" ref="graphRef" />
1419
</div>
1520
</template>
1621

@@ -19,9 +24,35 @@ import Navbar from "./components/nav.vue";
1924
import Graph from "./components/graph.vue";
2025
import DataBlock from "./components/dataBlock.vue";
2126
import type { FunctionPlotDatum } from "function-plot";
22-
import { reactive, ref } from "vue";
27+
import { reactive, ref, watch } from "vue";
28+
import JSON5 from "json5";
29+
import prettier from "prettier/standalone";
30+
import prettierPluginBabel from "prettier/plugins/babel";
31+
import prettierPluginEstree from "prettier/plugins/estree";
32+
import prettierPluginPostcss from "prettier/plugins/postcss";
33+
2334
const graphRef = ref<InstanceType<typeof Graph>>();
2435
const graphData = reactive<FunctionPlotDatum[]>([{ fn: "x^2" }]);
36+
const cnt = ref(0);
37+
const formatted = ref("");
38+
watch(
39+
graphData,
40+
() => {
41+
cnt.value++;
42+
prettier
43+
.format(JSON5.stringify({ data: graphData }), {
44+
parser: "json5",
45+
printWidth: 40,
46+
plugins: [
47+
prettierPluginBabel,
48+
prettierPluginEstree,
49+
prettierPluginPostcss,
50+
],
51+
})
52+
.then((value) => (formatted.value = value));
53+
},
54+
{ immediate: true, deep: true }
55+
);
2556
</script>
2657

2758
<style>
@@ -33,6 +64,7 @@ const graphData = reactive<FunctionPlotDatum[]>([{ fn: "x^2" }]);
3364
bottom: 0;
3465
left: 0;
3566
right: 0;
67+
height: 100vh;
3668
display: flex;
3769
flex-wrap: nowrap;
3870
flex-direction: column;
@@ -41,19 +73,68 @@ const graphData = reactive<FunctionPlotDatum[]>([{ fn: "x^2" }]);
4173
width: 100vw;
4274
flex-grow: 1;
4375
display: flex;
76+
max-height: calc(100vh - 50px);
4477
}
4578
#navbar {
4679
height: 50px;
4780
width: 100vw;
48-
background: #fff3;
81+
background: var(--c-bk1);
82+
border-bottom: var(--c-border) 1px solid;
4983
position: relative;
84+
flex-shrink: 0;
5085
}
5186
#editor {
52-
width: 40vw;
53-
border-right: var(--c-hr) 1px solid;
87+
width: 33vw;
88+
border-right: var(--c-border) 1px solid;
89+
90+
position: relative;
91+
}
92+
.editor-inner {
93+
overflow: scroll;
94+
position: absolute;
95+
top: 0;
96+
left: 0;
97+
right: 0;
98+
bottom: 300px;
5499
}
55100
#graph {
56101
width: 60vw;
57102
position: relative;
58103
}
59-
</style>
104+
.add-data {
105+
padding-top: 10px;
106+
padding-bottom: 10px;
107+
margin-bottom: 50px;
108+
}
109+
.add-data:hover {
110+
background: var(--c-bk3);
111+
}
112+
.add-data:active {
113+
background: var(--c-bk1);
114+
}
115+
.plot-data.output {
116+
position: absolute;
117+
left: 0;
118+
right: 0;
119+
bottom: 0;
120+
border-top: var(--c-border) 1px solid;
121+
padding: 20px 15px;
122+
height: 260px;
123+
}
124+
.plot-data.output .output-title {
125+
font-size: 20px;
126+
font-weight: bold;
127+
display: block;
128+
margin-bottom: 10px;
129+
}
130+
.plot-data.output pre {
131+
position: absolute;
132+
top:60px;
133+
bottom:15px;
134+
left:15px;
135+
right:15px;
136+
margin: 0;
137+
overflow: scroll;
138+
user-select: all;
139+
}
140+
</style>

0 commit comments

Comments
 (0)