Skip to content

Commit 5616fa7

Browse files
Linho1219Linho1219
committed
Sober 布局初始化
1 parent b27e1bf commit 5616fa7

File tree

6 files changed

+137
-108
lines changed

6 files changed

+137
-108
lines changed

‎package-lock.json‎

Lines changed: 7 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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"json5": "^2.2.3",
1717
"lodash-es": "^4.17.21",
1818
"prettier": "^3.4.2",
19+
"sober": "^1.1.0",
1920
"utf8": "^3.0.0",
2021
"vue": "^3.5.13",
2122
"vue-draggable-plus": "^0.6.0",

‎src/App.vue‎

Lines changed: 68 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,69 @@
11
<template>
2-
<Navbar />
3-
<div id="content" :class="{ onresize: onResize }">
4-
<div id="editor" :style="{ width: sideRatio + 'vw' }">
5-
<div class="editor-inner">
6-
<VueDraggable
7-
v-model="graphData"
8-
:animation="150"
9-
handle=".datablock-drag"
10-
>
11-
<DataBlock
12-
v-for="(dataItem, i) in graphData"
13-
v-model="graphData[i]"
14-
@delete="graphData.splice(i, 1)"
15-
:key="dataItem.key"
16-
@require-full-update="fullUpdate"
17-
/>
18-
</VueDraggable>
19-
<div class="plot-data add-data">
20-
<div
21-
@click="
22-
graphData.push({
23-
key: Math.random(),
24-
fnType: 'linear',
25-
graphType: 'polyline',
26-
})
27-
"
28-
class="add-data-opt add"
29-
>
30-
+ {{ t("buttons.add") }}
31-
</div>
32-
<div @click="handleImport()" class="add-data-opt import">
33-
↓ {{ t("buttons.import") }}
2+
<s-page theme="auto" id="soberpage">
3+
<s-drawer>
4+
<Navbar @toggle-drawer="innerDrawer?.toggle()" />
5+
<s-drawer
6+
theme="auto"
7+
id="content"
8+
:class="{ onresize: onResize }"
9+
ref="innerDrawer"
10+
>
11+
<div slot="start" id="editor" :style="{ width: sideRatio + 'vw' }">
12+
<div class="editor-inner">
13+
<VueDraggable
14+
v-model="graphData"
15+
:animation="150"
16+
handle=".datablock-drag"
17+
>
18+
<DataBlock
19+
v-for="(dataItem, i) in graphData"
20+
v-model="graphData[i]"
21+
@delete="graphData.splice(i, 1)"
22+
:key="dataItem.key"
23+
@require-full-update="fullUpdate"
24+
/>
25+
</VueDraggable>
26+
<div class="plot-data add-data">
27+
<div
28+
@click="
29+
graphData.push({
30+
key: Math.random(),
31+
fnType: 'linear',
32+
graphType: 'polyline',
33+
})
34+
"
35+
class="add-data-opt add"
36+
>
37+
+ {{ t("buttons.add") }}
38+
</div>
39+
<div @click="handleImport()" class="add-data-opt import">
40+
↓ {{ t("buttons.import") }}
41+
</div>
42+
</div>
3443
</div>
44+
<CodeDisplay :dataArr="toOriginalDatum(graphData)" />
45+
</div>
46+
<div id="divider" @mousedown="handleDrag"></div>
47+
<div id="graph" ref="shellRef">
48+
<Graph
49+
:data="toOriginalDatum(graphData)"
50+
:width="graphWidth"
51+
:height="graphHeight"
52+
:key="key"
53+
@requireFullUpdate="fullUpdate"
54+
@requirePostUpdate="key++"
55+
v-model="fullUpdateState"
56+
/>
3557
</div>
36-
</div>
37-
<CodeDisplay :dataArr="toOriginalDatum(graphData)" />
38-
</div>
39-
<div id="divider" @mousedown="handleDrag"></div>
40-
<div id="graph" ref="shellRef">
41-
<Graph
42-
:data="toOriginalDatum(graphData)"
43-
:width="graphWidth"
44-
:height="graphHeight"
45-
:key="key"
46-
@requireFullUpdate="fullUpdate"
47-
@requirePostUpdate="key++"
48-
v-model="fullUpdateState"
49-
/>
50-
</div>
51-
</div>
58+
</s-drawer>
59+
</s-drawer>
60+
</s-page>
5261
</template>
5362

5463
<script setup lang="ts">
55-
import { useI18n } from 'vue-i18n'
56-
const { t } = useI18n()
64+
import "sober";
65+
import { useI18n } from "vue-i18n";
66+
const { t } = useI18n();
5767
5868
import Navbar from "./components/nav.vue";
5969
import Graph from "./components/graph.vue";
@@ -71,6 +81,8 @@ const graphData = ref<InternalDatum[]>([
7181
{ fnType: "linear", graphType: "polyline", fn: "x^2", key: 1 },
7282
]);
7383
84+
const innerDrawer = ref<HTMLElementTagNameMap["s-drawer"]>();
85+
7486
const graphWidth = ref(0),
7587
graphHeight = ref(0);
7688
const key = ref(0);
@@ -129,33 +141,22 @@ function handleImport() {
129141
</script>
130142

131143
<style>
132-
#app {
133-
position: fixed;
144+
html,
145+
body {
134146
margin: 0;
135147
padding: 0;
148+
overflow: hidden;
149+
}
150+
#soberpage {
151+
position: absolute;
136152
top: 0;
137153
bottom: 0;
138154
left: 0;
139155
right: 0;
140-
height: 100vh;
141-
display: flex;
142-
flex-wrap: nowrap;
143-
flex-direction: column;
144156
}
145157
#content {
146-
width: 100vw;
147158
flex-grow: 1;
148159
display: flex;
149-
max-height: calc(100vh - 50px);
150-
}
151-
#navbar {
152-
height: 50px;
153-
width: 100vw;
154-
box-sizing: border-box;
155-
background: var(--c-bk1);
156-
border-bottom: var(--c-border) 1px solid;
157-
position: relative;
158-
flex-shrink: 0;
159160
}
160161
#editor {
161162
border-right: var(--c-border) 1px solid;

‎src/components/nav.vue‎

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,61 @@
11
<template>
2-
<div id="navbar">
3-
<span class="nav-title">
4-
function-plot-GUI <span class="version"> v0.2 · </span>
5-
<a
6-
class="link"
7-
href="https://github.com/Linho1219/function-plot-GUI"
8-
target="_blank"
9-
>Github</a
10-
>
11-
</span>
12-
<div class="grow"></div>
13-
<select v-model="locale" id="language">
14-
<option value="zh-CN">简体中文</option>
15-
<option value="en-US">English</option>
16-
</select>
17-
</div>
2+
<s-appbar id="navbar">
3+
<s-icon-button slot="navigation">
4+
<s-icon name="menu" @click="emit('toggleDrawer')"></s-icon>
5+
</s-icon-button>
6+
<div slot="headline">
7+
<span class="nav-title">
8+
function-plot-GUI <span class="version"> v0.2 · </span>
9+
<a
10+
class="link"
11+
href="https://github.com/Linho1219/function-plot-GUI"
12+
target="_blank"
13+
>Github</a
14+
>
15+
</span>
16+
</div>
17+
<s-picker
18+
slot="action"
19+
v-model.lazy="locale"
20+
id="language"
21+
:label="t('inputs.language')"
22+
>
23+
<s-icon-button slot="trigger">
24+
<s-icon>
25+
<svg viewBox="0 -960 960 960">
26+
<path
27+
d="m476-80 182-480h84L924-80h-84l-43-122H603L560-80h-84ZM160-200l-56-56 202-202q-35-35-63.5-80T190-640h84q20 39 40 68t48 58q33-33 68.5-92.5T484-720H40v-80h280v-80h80v80h280v80H564q-21 72-63 148t-83 116l96 98-30 82-122-125-202 201Zm468-72h144l-72-204-72 204Z"
28+
></path>
29+
</svg>
30+
</s-icon>
31+
</s-icon-button>
32+
<s-picker-item value="zh-CN" selected>简体中文</s-picker-item>
33+
<s-picker-item value="en-US">English</s-picker-item>
34+
</s-picker>
35+
</s-appbar>
1836
</template>
1937

2038
<script setup lang="ts">
39+
import "sober";
40+
import { ref, watchEffect } from "vue";
2141
import { useI18n } from "vue-i18n";
22-
const { locale } = useI18n();
42+
43+
const { locale, t } = useI18n();
44+
45+
const lang = ref("");
46+
47+
watchEffect(() => console.log(lang.value));
48+
49+
const emit = defineEmits(["toggleDrawer"]);
2350
</script>
2451

2552
<style>
53+
#navbar{
54+
box-shadow: #0005 0 0 15px;
55+
z-index:9;
56+
}
57+
58+
2659
.nav-title {
2760
font-size: 20px;
2861
font-weight: bold;
@@ -41,27 +74,4 @@ const { locale } = useI18n();
4174
opacity: 0.8;
4275
text-decoration: underline;
4376
}
44-
45-
#navbar {
46-
display: flex;
47-
justify-content: space-between;
48-
align-items: center;
49-
padding: 0 15px;
50-
}
51-
52-
.grow {
53-
flex-grow: 1;
54-
}
55-
56-
#language {
57-
border: var(--c-border) 1px solid;
58-
background: var(--c-bk3);
59-
border-radius: 5px;
60-
padding: 5px 8px;
61-
color: var(--text);
62-
font-size: 15px;
63-
}
64-
#language:focus {
65-
border-color: var(--c-accent);
66-
}
6777
</style>

‎src/i18n.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default createI18n({
2929
text: "文本",
3030
},
3131
inputs: {
32+
language: "语言",
3233
fn: "函数",
3334
range: "范围",
3435
color: "颜色",
@@ -71,6 +72,7 @@ export default createI18n({
7172
text: "Text",
7273
},
7374
inputs: {
75+
language: "Language",
7476
fn: "Function",
7577
range: "Range",
7678
color: "Color",

‎vite.config.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import vue from "@vitejs/plugin-vue";
33

44
// https://vite.dev/config/
55
export default defineConfig({
6-
plugins: [vue()],
6+
plugins: [
7+
vue({
8+
template: {
9+
compilerOptions: {
10+
isCustomElement: (tag) => tag.startsWith("s-"),
11+
},
12+
},
13+
}),
14+
],
715
build: { chunkSizeWarningLimit: 1024 },
816
});

0 commit comments

Comments
 (0)