1
1
<template >
2
- <a-layout >
3
- <a-layout-content >
4
- <Workspace />
5
- <Search />
6
- <Toolbox />
7
- <Zoombox />
8
- </a-layout-content >
9
- <a-layout-sider ref =" layoutSider" :resize-directions =" ['left']" @moving =" handleMoving" @moving-end =" handleMoving" >
10
- <Codespace />
11
- </a-layout-sider >
12
- </a-layout >
13
- <Navigator />
14
- <Trashcan />
15
- <Screenshot />
16
- <Dialog />
17
- </template >
18
-
19
- <script setup>
20
- import ' ./assets/categories'
21
- import ' ./blocks/boxy'
22
- import ' ./blocks/patch'
23
- import ' ./theme/codemao.theme'
24
- import ' ./theme/codemao.renderer'
25
- import ' ./generators/lua'
26
-
27
- import { Message , Modal , Notification } from ' @arco-design/web-vue'
28
- import Blockly from ' blockly'
29
- import cookie from ' cookiejs'
30
- import { onMounted , ref , watch } from ' vue'
31
-
32
- import tools from ' ./assets/tools'
33
- import { useStore } from ' ./store/store'
34
- import Codespace from ' ./components/Codespace.vue'
35
- import Dialog from ' ./components/Dialog.vue'
36
- import Navigator from ' ./components/Navigator.vue'
37
- import Screenshot from ' ./components/Screenshot.vue'
38
- import Search from ' ./components/Search.vue'
39
- import Toolbox from ' ./components/Toolbox.vue'
40
- import Trashcan from ' ./components/Trashcan.vue'
41
- import Workspace from ' ./components/Workspace.vue'
42
- import Zoombox from ' ./components/Zoombox.vue'
43
-
44
- let usedLayoutSider = void 0
45
- const layoutSider = ref ()
46
- const store = useStore ()
47
-
48
- function handleMoving () {
49
- for (let i = 0 ; i < 5 ; i++ ) {
50
- setTimeout (() => {
51
- Blockly .svgResize (store .workspaceSvg )
52
- }, 100 * i)
2
+ <a-layout >
3
+ <a-layout-content >
4
+ <Workspace />
5
+ <Search />
6
+ <Toolbox />
7
+ <Zoombox />
8
+ </a-layout-content >
9
+ <a-layout-sider ref =" layoutSider" :resize-directions =" ['left']" @moving =" handleMoving" @moving-end =" handleMoving" >
10
+ <Codespace />
11
+ </a-layout-sider >
12
+ </a-layout >
13
+ <Navigator />
14
+ <Trashcan />
15
+ <Screenshot />
16
+ <Dialog />
17
+ </template >
18
+
19
+ <script setup>
20
+ import ' ./assets/categories'
21
+ import ' ./blocks/boxy'
22
+ import ' ./blocks/patch'
23
+ import ' ./theme/codemao.theme'
24
+ import ' ./theme/codemao.renderer'
25
+ import ' ./generators/lua'
26
+
27
+ import { Message , Modal , Notification } from ' @arco-design/web-vue'
28
+ import Blockly from ' blockly'
29
+ import cookie from ' cookiejs'
30
+ import { onMounted , ref , watch } from ' vue'
31
+
32
+ import tools from ' ./assets/tools'
33
+ import Codespace from ' ./components/Codespace.vue'
34
+ import Dialog from ' ./components/Dialog.vue'
35
+ import Navigator from ' ./components/Navigator.vue'
36
+ import Screenshot from ' ./components/Screenshot.vue'
37
+ import Search from ' ./components/Search.vue'
38
+ import Toolbox from ' ./components/Toolbox.vue'
39
+ import Trashcan from ' ./components/Trashcan.vue'
40
+ import Workspace from ' ./components/Workspace.vue'
41
+ import Zoombox from ' ./components/Zoombox.vue'
42
+ import { useStore } from ' ./store/store'
43
+
44
+ let usedLayoutSider = void 0
45
+ const layoutSider = ref ()
46
+ const store = useStore ()
47
+
48
+ function handleMoving () {
49
+ for (let i = 0 ; i < 5 ; i++ ) {
50
+ setTimeout (() => {
51
+ Blockly .svgResize (store .workspaceSvg )
52
+ }, 100 * i)
53
+ }
54
+ }
55
+
56
+ function setLayoutSider (isOpen = false ) {
57
+ layoutSider .value .$el .style .display = isOpen ? ' block' : ' none'
58
+ handleMoving ()
59
+ }
60
+
61
+ onMounted (() => {
62
+ if (! localStorage .getItem (' now' )) {
63
+ try {
64
+ Blockly .serialization .workspaces .load (
65
+ JSON .parse (localStorage .getItem (' now' )),
66
+ store .workspaceSvg
67
+ )
68
+ } catch (e) {
69
+ if (localStorage .getItem (' now' ) != ' {}' ) {
70
+ localStorage .setItem (new Date ().getTime (), localStorage .getItem (' now' ))
71
+ Notification .error (' 加载本地缓存工程失败,数据已自动备份' )
72
+ }
53
73
}
54
74
}
55
-
56
- function setLayoutSider (isOpen = false ) {
57
- layoutSider .value .$el .style .display = isOpen ? ' block' : ' none'
58
- handleMoving ()
75
+ const tool = new tools ()
76
+ if (! tool .ifStorage ) {
77
+ Notification .error (' 当前环境不支持HTML5 web 存储(Storage)服务,项目的本地缓存功能将会受限' )
59
78
}
60
-
61
- onMounted (() => {
62
- const tool = new tools ()
63
- if (! tool .ifStorage ) {
64
- Notification .error (' 当前环境不支持HTML5 web 存储(Storage)服务,项目的本地缓存功能将会受限' )
79
+ window .addEventListener (' beforeunload' , (e ) => {
80
+ if (
81
+ JSON .stringify (Blockly .serialization .workspaces .save (store .workspaceSvg )) !=
82
+ localStorage .getItem (' now' )
83
+ ) {
84
+ const message = ' 离开页面后未保存的更改将丢失,确定继续?'
85
+ e .returnValue = message
86
+ return message
65
87
}
66
- window .addEventListener (' beforeunload' , (e ) => {
67
- if (
68
- JSON .stringify (Blockly .serialization .workspaces .save (store .workspaceSvg )) !=
69
- sessionStorage .setItem (' now' )
70
- ) {
71
- const message = ' 离开页面后未保存的更改将丢失,确定继续?'
72
- e .returnValue = message
73
- return message
74
- }
75
- })
76
- watch (
77
- store .$state ,
78
- (state ) => {
79
- if (state .hasLayoutSider !== usedLayoutSider) {
80
- setLayoutSider (state .hasLayoutSider )
81
- usedLayoutSider = state .hasLayoutSider
82
- }
83
- },
84
- { deep: true }
85
- )
86
- handleMoving ()
87
- setLayoutSider ()
88
88
})
89
- </script >
90
-
91
- <style >
92
- html ,
93
- body ,
94
- #app {
95
- width : 100% ;
96
- height : 100% ;
97
- margin : 0 ;
98
- padding : 0 ;
99
-
100
- background : var (--color-bg-1 );
101
- border : 0 ;
102
- }
103
-
104
- ::selection {
105
- background : #1ba2e333 ;
106
- }
107
-
108
- body ::-webkit-scrollbar {
109
- display : none ;
110
- }
111
- </style >
112
-
89
+ watch (
90
+ store .$state ,
91
+ (state ) => {
92
+ if (state .hasLayoutSider !== usedLayoutSider) {
93
+ setLayoutSider (state .hasLayoutSider )
94
+ usedLayoutSider = state .hasLayoutSider
95
+ }
96
+ },
97
+ { deep: true }
98
+ )
99
+ handleMoving ()
100
+ setLayoutSider ()
101
+ })
102
+ </script >
103
+
104
+ <style >
105
+ html ,
106
+ body ,
107
+ #app {
108
+ width : 100% ;
109
+ height : 100% ;
110
+ margin : 0 ;
111
+ padding : 0 ;
112
+
113
+ background : var (--color-bg-1 );
114
+ border : 0 ;
115
+ }
116
+
117
+ ::selection {
118
+ background : #1ba2e333 ;
119
+ }
120
+
121
+ body ::-webkit-scrollbar {
122
+ display : none ;
123
+ }
124
+ </style >
0 commit comments