1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>test</title>
7    <style>
8        #visual_area {
9            background-color: #808000;
10            width: 100;
11            height: 100;
12            position: absolute;
13            left: 0px;
14        }
15        /*右侧属性面板样式*/
16        #attribute_area {
17            background-color: var(--vscode-editor-background, #000000);
18            position: absolute;
19            width: 420px;
20            height: 100%;
21            right: 0px;
22            opacity: 0.9;
23        }
24
25        /*右侧属性面板标题栏样式*/
26        .div_title {
27            background-color: var(--vscode-editor-background, #313131);
28            color: var(--vscode-editor-foreground, #ffffff);
29            width: 420px;
30            height: 48px;
31            margin-top: 4px;
32            font-family: "Microsoft YaHei";
33            display: flex;
34        }
35
36        .att_title {
37            color: var(--vscode-editor-foreground, #ffffff);;
38            font-family: "Microsoft YaHei";
39            text-align: center;
40            margin-left: 16px;
41            line-height: 48px;
42            display: block;
43            white-space: nowrap;
44            overflow: hidden;
45            text-overflow: ellipsis;
46        }
47
48        .att_line {
49            width: 420px;
50            height: 4px;
51            margin-top: 0px;
52            background-color: #000000;
53        }
54
55        .input_text_readonly_top {
56            color: var(--vscode-editor-foreground, #ffffff);
57            display: inline-block;
58            font-family: "Microsoft YaHei";
59            text-align: center;
60            font-size: 14px;
61            margin-top: 24px;
62            margin-left: 12px;
63            opacity: 0.6;
64        }
65
66        .input_text_readonly {
67            color: var(--vscode-editor-foreground, #ffffff);
68            display: inline-block;
69            font-family: "Microsoft YaHei";
70            text-align: center;
71            font-size: 14px;
72            margin-top: 16px;
73            margin-left: 12px;
74            opacity: 0.6;
75        }
76
77        .input_text {
78            background-color: var(--vscode-editor-background, #000000);
79            color: var(--vscode-editor-foreground, #ffffff);
80            width: 372px;
81            height: 32px;
82            font-size: 14px;
83            margin-left: 12px;
84            font-family: "Microsoft YaHei";
85            border-radius: 8px;
86            border: 1px solid #555555;
87            opacity: 0.9;
88            margin-top: 8px;
89            padding-left: 5px;
90            padding-right: 5px;
91        }
92
93        .input_text:hover {
94            outline: none;
95            width: 372px;
96            height: 32px;
97            border-color: var(--vscode-focusBorder, #272727);
98        }
99
100        .input_text:disabled {
101            color: var(--vscode-disabledForeground, #d4d4d4);
102        }
103
104        .button_click {
105            background-color: #272727;
106            color: #ffffff;
107            width: 384px;
108            height: 32px;
109            font-size: 14px;
110            font-family: "Microsoft YaHei";
111            border-radius: 8px;
112            border-color: #272727;
113            border: none;
114            margin-left: 12px;
115            display: block;
116            border: 1px solid #555555;
117            outline: none;
118        }
119
120        .button_click:hover {
121            width: 384px;
122            height: 32px;
123            outline: none;
124            border-color: #ffffff;
125        }
126
127        .label_button_click {
128            background-color: var(--vscode-button-background, #000000);
129            color: var(--vscode-button-foreground, #ffffff);
130            width: 384px;
131            height: 36px;
132            margin-top: 8px;
133            margin-left: 12px;
134            font-size: 14px;
135            font-family: "Microsoft YaHei";
136            border-radius: 8px;
137            border-color: #272727;
138            border: none;
139            display: block;
140            margin-top: 8px;
141            border: 1px solid #555555;
142            padding-left: 5px;
143            padding-right: 5px;
144            outline: none;
145        }
146
147        .label_button_click:hover {
148            outline: none;
149            width: 384px;
150            height: 36px;
151			background-color: var(--vscode-button-hoverBackground, #D3D3D3);
152            color: var(--vscode-button-foreground, #ffffff);
153            border-color: #ffffff;
154        }
155
156        .button_click_delete {
157            background-color: var(--vscode-menu-background, #272727);
158            color: var(--vscode-menu-foreground, #ffffff);
159            width: 384px;
160            height: 32px;
161            margin-left: 12px;
162            font-family: "Microsoft YaHei";
163            font-size: 14px;
164            border-radius: 8px;
165            border-color: var(--vscode-menu-border, #272727);
166            display: block;
167            border: 1px solid var(--vscode-menu-border, #272727);
168            outline: none;
169        }
170
171        .button_click_delete:hover {
172            outline: none;
173            width: 384px;
174            height: 32px;
175            border-color: var(--vscode-menu-border, #272727);
176        }
177
178        .text_area {
179            background-color: var(--vscode-editor-background, #000000);
180            color: var(--vscode-editor-foreground, #ffffff);
181            margin-left: 12px;
182            width: 372px;
183            height: 180px;
184            margin-top: 8px;
185            resize: vertical;
186        }
187
188        #canvas_textarea {
189            border: 1px solid groove;
190            position: absolute;
191            margin-left: 16px;
192            width: 258px;
193            height: 32px;
194            border-style: none;
195            outline: none;
196            background-color: rgba(255,255,255,0.1);
197            border-radius: 17px;
198            display: none;
199            color: #ffffff;
200            padding-left: 32px;
201            caret-color: #ffffff;
202            font-size: 14px;
203            resize: none;
204            line-height: 30px;
205        }
206
207        .canvas_bg {
208            background-color: var(--vscode-editor-background, #272727);
209            color: var(--vscode-editor-foreground, #ffffff);
210            margin-left: 0px;
211            width: 0px;
212            height: 0px;
213            margin-top: 0x;
214        }
215
216        .canvas_line {
217            color: var(--vscode-charts-lines, #000000);
218        }
219
220        .ul-select {
221            position: relative;
222        }
223
224        .ul-select span {
225            position: absolute;
226            top: 15px;
227            left: 365px;
228            color: #ffffff;
229            pointer-events: none;
230        }
231
232        .ul-select ul {
233            position: absolute;
234            top: 45px;
235            left: 12px;
236            padding: 0;
237            z-index: 5;
238            width: 381px;
239            display: none;
240            list-style: none;
241            border: 1px solid #555555;
242            font-size: 0px;
243        }
244
245        .ul-select li a {
246            display: inline-block;
247            width: 100%;
248            height: 22px;
249            padding-top: 3px;
250            color: var(--vscode-menu-foreground, #ffffff);
251            text-indent: 5px;
252            background: var(--vscode-menu-background, #000000);
253            font-family: "Microsoft YaHei";
254            font-size: 14px;
255            text-decoration: none;
256        }
257
258        .ul-select li a:hover {
259            color: var(--vscode-menu-selectionForeground, #ffffff);
260            background: var(--vscode-menu-selectionBackground, #2979f1);
261        }
262
263        .validator_label {
264            color: #ff0000;
265            font-family: "Microsoft YaHei";
266            text-align: center;
267            font-size: 14px;
268            margin-top: 2px;
269            margin-left: 12px;
270        }
271
272    </style>
273    <script>
274        function selectBlur(inputObj) {
275            var t = inputObj;
276            setTimeout(() => {t.nextSibling.style.display = 'none';},150);
277        }
278
279        function selectFocus(inputObj) {
280            inputObj.nextSibling.style.display = 'block';
281        }
282
283        function liClick(liObj, searchId) {
284            liObj.parentNode.previousSibling.value = liObj.innerText;
285            document.attrCallback.Event('select', searchId);
286        }
287    </script>
288</head>
289
290<body style="margin:0">
291    <canvas id="visual_area"></canvas>
292    <div id="attribute_area"></div>
293    <input type="hidden" id="canvas_bg" value="value" class="canvas_bg">
294    <input type="hidden" id="canvas_line" value="value" class="canvas_line">
295    <textarea id="canvas_textarea"></textarea>
296    <script src="./dist/main.js"></script>
297    <!-- <script src="./src/index.js" type="module"></script> -->
298    <!-- <script src="./src/index.js"></script> -->
299</body>
300
301</html>