pindo 5.1.2 → 5.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/lib/pindo/command/android/autobuild.rb +13 -0
- data/lib/pindo/command/unity/autobuild.rb +200 -0
- data/lib/pindo/command/unity/web.rb +152 -0
- data/lib/pindo/command/unity.rb +1 -1
- data/lib/pindo/command/web/run.rb +15 -168
- data/lib/pindo/module/android/build_helper.rb +325 -0
- data/lib/pindo/module/webserver/preview/preview.css +433 -0
- data/lib/pindo/module/webserver/preview/preview.html +73 -0
- data/lib/pindo/module/webserver/preview/preview.js +595 -0
- data/lib/pindo/module/webserver/responsive_preview_handler.rb +92 -816
- data/lib/pindo/module/webserver/webgl_server_helper.rb +175 -3
- data/lib/pindo/version.rb +1 -1
- metadata +7 -2
|
@@ -1,828 +1,104 @@
|
|
|
1
1
|
require 'webrick'
|
|
2
2
|
require 'json'
|
|
3
|
+
require 'fileutils'
|
|
3
4
|
|
|
4
5
|
module Pindo
|
|
5
6
|
module WebServer
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
# 响应式预览页面处理器
|
|
9
|
+
class ResponsivePreviewHandler < WEBrick::HTTPServlet::AbstractServlet
|
|
10
|
+
def initialize(server, root_dir, port, debug=false)
|
|
11
|
+
super(server)
|
|
12
|
+
@root_dir = root_dir
|
|
13
|
+
@preview_source_dir = File.join(File.dirname(__FILE__), 'preview') # 预览文件源目录
|
|
14
|
+
@port = port
|
|
15
|
+
@debug = debug
|
|
16
|
+
|
|
17
|
+
# 更详细的调试输出
|
|
18
|
+
puts "预览处理器初始化: WebGL目录=#{@root_dir}, 预览目录=#{@preview_source_dir}" if @debug
|
|
19
|
+
|
|
20
|
+
# 检查预览源目录是否存在
|
|
21
|
+
if File.directory?(@preview_source_dir)
|
|
22
|
+
puts "预览源目录存在: #{@preview_source_dir}" if @debug
|
|
23
|
+
puts "源目录中的文件: #{Dir.glob(File.join(@preview_source_dir, '*')).join(', ')}" if @debug
|
|
24
|
+
else
|
|
25
|
+
puts "错误: 预览源目录不存在: #{@preview_source_dir}" if @debug
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
# 挂载自定义处理器来处理预览文件
|
|
29
|
+
mount_preview_files_handler(server)
|
|
30
|
+
end
|
|
31
|
+
|
|
32
|
+
def do_GET(req, res)
|
|
33
|
+
# 重定向到预览页面，使用特殊的预览处理器路径前缀
|
|
34
|
+
res.set_redirect(WEBrick::HTTPStatus::Found, "/preview_page/preview.html")
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
private
|
|
38
|
+
|
|
39
|
+
# 挂载自定义处理器来处理预览文件
|
|
40
|
+
def mount_preview_files_handler(server)
|
|
41
|
+
# 创建一个处理器来处理/preview_page/路径下的请求，直接从源目录提供文件
|
|
42
|
+
server.mount_proc("/preview_page") do |req, res|
|
|
43
|
+
# 从请求路径中去除"/preview_page"前缀
|
|
44
|
+
request_path = req.path.sub("/preview_page", "")
|
|
45
|
+
request_path = "/preview.html" if request_path == "" || request_path == "/"
|
|
15
46
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
* {
|
|
56
|
-
margin: 0;
|
|
57
|
-
padding: 0;
|
|
58
|
-
box-sizing: border-box;
|
|
59
|
-
-webkit-overflow-scrolling: touch;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
body {
|
|
63
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
64
|
-
background-color: var(--bg-color);
|
|
65
|
-
color: var(--text-color);
|
|
66
|
-
line-height: 1.5;
|
|
67
|
-
height: 100vh;
|
|
68
|
-
display: flex;
|
|
69
|
-
flex-direction: column;
|
|
70
|
-
overflow: hidden;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.header {
|
|
74
|
-
height: var(--header-height);
|
|
75
|
-
background-color: white;
|
|
76
|
-
border-bottom: 1px solid var(--border-color);
|
|
77
|
-
display: flex;
|
|
78
|
-
align-items: center;
|
|
79
|
-
justify-content: space-between;
|
|
80
|
-
padding: 0 20px;
|
|
81
|
-
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
82
|
-
z-index: 10;
|
|
83
|
-
position: fixed;
|
|
84
|
-
top: 0;
|
|
85
|
-
left: 0;
|
|
86
|
-
right: 0;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.header-title {
|
|
90
|
-
font-size: 18px;
|
|
91
|
-
font-weight: 600;
|
|
92
|
-
color: var(--text-color);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.header-controls {
|
|
96
|
-
display: flex;
|
|
97
|
-
align-items: center;
|
|
98
|
-
gap: 16px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.control-group {
|
|
102
|
-
display: flex;
|
|
103
|
-
align-items: center;
|
|
104
|
-
gap: 12px;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.device-select {
|
|
108
|
-
position: relative;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.device-select-button {
|
|
112
|
-
display: flex;
|
|
113
|
-
align-items: center;
|
|
114
|
-
background: white;
|
|
115
|
-
border: 1px solid var(--border-color);
|
|
116
|
-
border-radius: 5px;
|
|
117
|
-
padding: 6px 12px;
|
|
118
|
-
font-size: 14px;
|
|
119
|
-
cursor: pointer;
|
|
120
|
-
min-width: 160px;
|
|
121
|
-
justify-content: space-between;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.device-select-dropdown {
|
|
125
|
-
position: absolute;
|
|
126
|
-
top: 100%;
|
|
127
|
-
left: 0;
|
|
128
|
-
width: 240px;
|
|
129
|
-
max-height: 350px;
|
|
130
|
-
overflow-y: auto;
|
|
131
|
-
background: white;
|
|
132
|
-
border: 1px solid var(--border-color);
|
|
133
|
-
border-radius: 5px;
|
|
134
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
135
|
-
z-index: 100;
|
|
136
|
-
display: none;
|
|
137
|
-
margin-top: 5px;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.device-select-dropdown.active {
|
|
141
|
-
display: block;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
.device-option {
|
|
145
|
-
padding: 8px 12px;
|
|
146
|
-
cursor: pointer;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.device-option:hover {
|
|
150
|
-
background-color: var(--secondary-color);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.dimensions-display {
|
|
154
|
-
font-size: 14px;
|
|
155
|
-
color: #666;
|
|
156
|
-
border: 1px solid var(--border-color);
|
|
157
|
-
padding: 6px 12px;
|
|
158
|
-
border-radius: 5px;
|
|
159
|
-
background: white;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.action-button {
|
|
163
|
-
display: flex;
|
|
164
|
-
align-items: center;
|
|
165
|
-
justify-content: center;
|
|
166
|
-
padding: 0 12px;
|
|
167
|
-
height: 36px;
|
|
168
|
-
border-radius: 5px;
|
|
169
|
-
border: 1px solid var(--border-color);
|
|
170
|
-
background: white;
|
|
171
|
-
cursor: pointer;
|
|
172
|
-
transition: all 0.2s;
|
|
173
|
-
font-size: 14px;
|
|
174
|
-
white-space: nowrap;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
.action-button:hover {
|
|
178
|
-
background: var(--secondary-color);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.action-button svg {
|
|
182
|
-
width: 16px;
|
|
183
|
-
height: 16px;
|
|
184
|
-
fill: #555;
|
|
185
|
-
margin-right: 6px;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
.action-button:hover svg {
|
|
189
|
-
fill: var(--primary-color);
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.main-content {
|
|
193
|
-
position: fixed;
|
|
194
|
-
top: var(--header-height);
|
|
195
|
-
left: 0;
|
|
196
|
-
right: 0;
|
|
197
|
-
bottom: 0;
|
|
198
|
-
display: flex;
|
|
199
|
-
justify-content: center;
|
|
200
|
-
align-items: flex-start;
|
|
201
|
-
overflow: auto;
|
|
202
|
-
padding: 0;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.device-container {
|
|
206
|
-
position: relative;
|
|
207
|
-
transition: all 0.3s ease;
|
|
208
|
-
transform-origin: top center;
|
|
209
|
-
margin-top: 0;
|
|
210
|
-
padding: 0;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
/* 横屏容器样式 */
|
|
214
|
-
.device-container.landscape-container {
|
|
215
|
-
padding: 0;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.device-frame {
|
|
219
|
-
position: relative;
|
|
220
|
-
margin: 0 auto;
|
|
221
|
-
border: 12px solid var(--device-frame-color);
|
|
222
|
-
border-radius: 36px;
|
|
223
|
-
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
|
224
|
-
overflow: hidden;
|
|
225
|
-
transition: all 0.3s ease;
|
|
226
|
-
background: #000;
|
|
227
|
-
transform-origin: center center;
|
|
228
|
-
touch-action: none;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.device-frame.landscape {
|
|
232
|
-
transform: rotate(90deg);
|
|
233
|
-
transform-origin: center center;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.device-frame:before {
|
|
237
|
-
content: '';
|
|
238
|
-
position: absolute;
|
|
239
|
-
top: 0;
|
|
240
|
-
left: 50%;
|
|
241
|
-
transform: translateX(-50%);
|
|
242
|
-
width: 150px;
|
|
243
|
-
height: 24px;
|
|
244
|
-
background: var(--device-frame-color);
|
|
245
|
-
border-bottom-left-radius: 16px;
|
|
246
|
-
border-bottom-right-radius: 16px;
|
|
247
|
-
z-index: 10;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.iframe-container {
|
|
251
|
-
width: 100%;
|
|
252
|
-
height: 100%;
|
|
253
|
-
overflow: hidden;
|
|
254
|
-
background: white;
|
|
255
|
-
position: relative;
|
|
256
|
-
touch-action: none;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
.iframe-container iframe {
|
|
260
|
-
border: none;
|
|
261
|
-
width: 100%;
|
|
262
|
-
height: 100%;
|
|
263
|
-
display: block;
|
|
264
|
-
position: absolute;
|
|
265
|
-
top: 0;
|
|
266
|
-
left: 0;
|
|
267
|
-
margin: 0;
|
|
268
|
-
padding: 0;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
.loading {
|
|
272
|
-
position: absolute;
|
|
273
|
-
top: 0;
|
|
274
|
-
left: 0;
|
|
275
|
-
width: 100%;
|
|
276
|
-
height: 100%;
|
|
277
|
-
display: flex;
|
|
278
|
-
align-items: center;
|
|
279
|
-
justify-content: center;
|
|
280
|
-
background: rgba(255,255,255,0.8);
|
|
281
|
-
z-index: 20;
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
.spinner {
|
|
285
|
-
width: 40px;
|
|
286
|
-
height: 40px;
|
|
287
|
-
border: 4px solid rgba(0,0,0,0.1);
|
|
288
|
-
border-radius: 50%;
|
|
289
|
-
border-top: 4px solid var(--primary-color);
|
|
290
|
-
animation: spin 1s linear infinite;
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
@keyframes spin {
|
|
294
|
-
0% { transform: rotate(0deg); }
|
|
295
|
-
100% { transform: rotate(360deg); }
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.custom-dimensions {
|
|
299
|
-
position: absolute;
|
|
300
|
-
top: calc(100% + 5px);
|
|
301
|
-
left: 0;
|
|
302
|
-
background: white;
|
|
303
|
-
border: 1px solid var(--border-color);
|
|
304
|
-
border-radius: 5px;
|
|
305
|
-
padding: 15px;
|
|
306
|
-
width: 280px;
|
|
307
|
-
display: none;
|
|
308
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
309
|
-
z-index: 100;
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
.custom-dimensions.active {
|
|
313
|
-
display: block;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
.dimension-inputs {
|
|
317
|
-
display: flex;
|
|
318
|
-
gap: 10px;
|
|
319
|
-
margin-bottom: 10px;
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
.dimension-input-group {
|
|
323
|
-
flex: 1;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
.dimension-input-group label {
|
|
327
|
-
display: block;
|
|
328
|
-
font-size: 12px;
|
|
329
|
-
margin-bottom: 5px;
|
|
330
|
-
color: #666;
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
.dimension-input-group input {
|
|
334
|
-
width: 100%;
|
|
335
|
-
padding: 6px 8px;
|
|
336
|
-
border: 1px solid var(--border-color);
|
|
337
|
-
border-radius: 4px;
|
|
338
|
-
font-size: 14px;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
.apply-button {
|
|
342
|
-
width: 100%;
|
|
343
|
-
padding: 8px;
|
|
344
|
-
background: var(--primary-color);
|
|
345
|
-
color: white;
|
|
346
|
-
border: none;
|
|
347
|
-
border-radius: 4px;
|
|
348
|
-
cursor: pointer;
|
|
349
|
-
font-size: 14px;
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.apply-button:hover {
|
|
353
|
-
background: #4c51d3;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
.caret-icon {
|
|
357
|
-
border: solid #666;
|
|
358
|
-
border-width: 0 2px 2px 0;
|
|
359
|
-
display: inline-block;
|
|
360
|
-
padding: 2px;
|
|
361
|
-
margin-left: 6px;
|
|
362
|
-
transform: rotate(45deg);
|
|
363
|
-
transition: transform 0.2s;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
.caret-icon.up {
|
|
367
|
-
transform: rotate(-135deg);
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
@media (max-width: 768px) {
|
|
371
|
-
.header {
|
|
372
|
-
flex-direction: column;
|
|
373
|
-
height: auto;
|
|
374
|
-
padding: 10px;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
.header-controls {
|
|
378
|
-
width: 100%;
|
|
379
|
-
flex-wrap: wrap;
|
|
380
|
-
justify-content: center;
|
|
381
|
-
margin-top: 10px;
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
.device-select-dropdown {
|
|
385
|
-
width: 100%;
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
.device-container.landscape-container {
|
|
389
|
-
padding: 0;
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
.main-content {
|
|
393
|
-
top: auto;
|
|
394
|
-
padding: 0;
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
/* 确保横屏模式在较小屏幕上也有足够的空间 */
|
|
399
|
-
@media (max-height: 600px) {
|
|
400
|
-
.device-container.landscape-container {
|
|
401
|
-
padding: 0;
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
</style>
|
|
405
|
-
</head>
|
|
406
|
-
<body>
|
|
407
|
-
<div class="header">
|
|
408
|
-
<div class="header-title">WebGL预览</div>
|
|
409
|
-
<div class="header-controls">
|
|
410
|
-
<div class="control-group">
|
|
411
|
-
<div class="device-select">
|
|
412
|
-
<div class="device-select-button" id="device-select-button">
|
|
413
|
-
<span id="current-device-name">iPhone 8 Plus</span>
|
|
414
|
-
<span class="caret-icon"></span>
|
|
415
|
-
</div>
|
|
416
|
-
<div class="device-select-dropdown" id="device-select-dropdown">
|
|
417
|
-
#{devices.map { |name, dims| "<div class='device-option' data-device='#{name}' data-width='#{dims[:width]}' data-height='#{dims[:height]}'>#{name} (#{dims[:width]}×#{dims[:height]})</div>" }.join}
|
|
418
|
-
<div class="device-option" data-device="custom">自定义尺寸...</div>
|
|
419
|
-
</div>
|
|
420
|
-
<div class="custom-dimensions" id="custom-dimensions">
|
|
421
|
-
<div class="dimension-inputs">
|
|
422
|
-
<div class="dimension-input-group">
|
|
423
|
-
<label for="width-input">宽度 (px)</label>
|
|
424
|
-
<input type="number" id="width-input" value="375" min="200" max="2560">
|
|
425
|
-
</div>
|
|
426
|
-
<div class="dimension-input-group">
|
|
427
|
-
<label for="height-input">高度 (px)</label>
|
|
428
|
-
<input type="number" id="height-input" value="667" min="200" max="2560">
|
|
429
|
-
</div>
|
|
430
|
-
</div>
|
|
431
|
-
<button class="apply-button" id="apply-dimensions">应用尺寸</button>
|
|
432
|
-
</div>
|
|
433
|
-
</div>
|
|
434
|
-
<div class="dimensions-display" id="dimensions-display">375 × 667</div>
|
|
435
|
-
</div>
|
|
436
|
-
<div class="control-group">
|
|
437
|
-
<button class="action-button" id="rotate-button" title="旋转屏幕">
|
|
438
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
439
|
-
<path d="M7.34 6.41L.86 12.9l6.49 6.48 6.49-6.48-6.5-6.49zM3.69 12.9l3.66-3.66L11 12.9l-3.66 3.66-3.65-3.66zm15.67-6.26C17.61 4.88 15.3 4 13 4V.76L8.76 5 13 9.24V6c1.79 0 3.58.68 4.95 2.05 2.73 2.73 2.73 7.17 0 9.9C16.58 19.32 14.79 20 13 20c-.97 0-1.94-.21-2.84-.61l-1.49 1.49C10.02 21.62 11.51 22 13 22c2.3 0 4.61-.88 6.36-2.64 3.52-3.51 3.52-9.21 0-12.72z"/>
|
|
440
|
-
</svg>
|
|
441
|
-
旋转屏幕
|
|
442
|
-
</button>
|
|
443
|
-
<button class="action-button" id="fullscreen-button" title="全屏预览">
|
|
444
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
445
|
-
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
|
446
|
-
</svg>
|
|
447
|
-
全屏预览
|
|
448
|
-
</button>
|
|
449
|
-
</div>
|
|
450
|
-
</div>
|
|
451
|
-
</div>
|
|
452
|
-
|
|
453
|
-
<div class="main-content">
|
|
454
|
-
<div class="device-container" id="device-container">
|
|
455
|
-
<div id="loading" class="loading">
|
|
456
|
-
<div class="spinner"></div>
|
|
457
|
-
</div>
|
|
458
|
-
<div class="device-frame" id="device-frame">
|
|
459
|
-
<div class="iframe-container">
|
|
460
|
-
<iframe id="preview-frame" src="./rawindex.html"></iframe>
|
|
461
|
-
</div>
|
|
462
|
-
</div>
|
|
463
|
-
</div>
|
|
464
|
-
</div>
|
|
465
|
-
|
|
466
|
-
<script>
|
|
467
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
468
|
-
// 根据设备尺寸和窗口尺寸动态决定是否允许滚动
|
|
469
|
-
function updateScrollBehavior() {
|
|
470
|
-
const deviceFrame = document.getElementById('device-frame');
|
|
471
|
-
const mainContent = document.querySelector('.main-content');
|
|
472
|
-
|
|
473
|
-
// 获取设备框架的尺寸和位置
|
|
474
|
-
const deviceRect = deviceFrame.getBoundingClientRect();
|
|
475
|
-
const windowHeight = window.innerHeight;
|
|
476
|
-
const headerHeight = document.querySelector('.header').offsetHeight;
|
|
477
|
-
const availableHeight = windowHeight - headerHeight;
|
|
478
|
-
|
|
479
|
-
// 判断设备是否完全显示在窗口中
|
|
480
|
-
const isDeviceFullyVisible = deviceRect.height <= availableHeight;
|
|
481
|
-
|
|
482
|
-
console.log('设备是否完全可见: ' + isDeviceFullyVisible);
|
|
483
|
-
console.log('设备高度: ' + deviceRect.height + ', 可用高度: ' + availableHeight);
|
|
484
|
-
|
|
485
|
-
return isDeviceFullyVisible;
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
// 智能滚动处理函数
|
|
489
|
-
function handleScroll(e) {
|
|
490
|
-
// 如果是设备下拉菜单或自定义尺寸面板内的滚动，始终允许
|
|
491
|
-
if (e.target.closest('.custom-dimensions') || e.target.closest('.device-select-dropdown')) {
|
|
492
|
-
return;
|
|
493
|
-
}
|
|
494
|
-
|
|
495
|
-
// 检查设备是否完全可见
|
|
496
|
-
if (updateScrollBehavior()) {
|
|
497
|
-
// 设备完全可见，禁止滚动
|
|
498
|
-
e.preventDefault();
|
|
499
|
-
}
|
|
500
|
-
// 设备不完全可见，允许滚动，不做处理
|
|
501
|
-
}
|
|
502
|
-
|
|
503
|
-
// 设置滚动事件监听
|
|
504
|
-
document.addEventListener('touchmove', handleScroll, { passive: false });
|
|
505
|
-
document.addEventListener('wheel', handleScroll, { passive: false });
|
|
506
|
-
|
|
507
|
-
// 设备配置
|
|
508
|
-
const devices = #{devices.to_json};
|
|
509
|
-
|
|
510
|
-
// 获取DOM元素
|
|
511
|
-
const deviceSelectButton = document.getElementById('device-select-button');
|
|
512
|
-
const deviceSelectDropdown = document.getElementById('device-select-dropdown');
|
|
513
|
-
const deviceOptions = document.querySelectorAll('.device-option');
|
|
514
|
-
const customDimensions = document.getElementById('custom-dimensions');
|
|
515
|
-
const widthInput = document.getElementById('width-input');
|
|
516
|
-
const heightInput = document.getElementById('height-input');
|
|
517
|
-
const applyDimensionsButton = document.getElementById('apply-dimensions');
|
|
518
|
-
const rotateButton = document.getElementById('rotate-button');
|
|
519
|
-
const fullscreenButton = document.getElementById('fullscreen-button');
|
|
520
|
-
const deviceFrame = document.getElementById('device-frame');
|
|
521
|
-
const previewFrame = document.getElementById('preview-frame');
|
|
522
|
-
const dimensionsDisplay = document.getElementById('dimensions-display');
|
|
523
|
-
const loading = document.getElementById('loading');
|
|
524
|
-
const currentDeviceName = document.getElementById('current-device-name');
|
|
525
|
-
const deviceContainer = document.getElementById('device-container');
|
|
526
|
-
|
|
527
|
-
let isLandscape = false;
|
|
528
|
-
let currentDevice = 'iPhone 8 Plus';
|
|
529
|
-
let isInitialLoad = true;
|
|
530
|
-
|
|
531
|
-
// 初始化设备
|
|
532
|
-
initDevice('iPhone 8 Plus');
|
|
533
|
-
|
|
534
|
-
// iframe加载事件
|
|
535
|
-
previewFrame.onload = function() {
|
|
536
|
-
// 隐藏加载动画
|
|
537
|
-
loading.style.display = 'none';
|
|
538
|
-
|
|
539
|
-
// 重置滚动位置
|
|
540
|
-
if (window.scrollY > 0) {
|
|
541
|
-
window.scrollTo(0, 0);
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
// 尝试访问iframe内容
|
|
545
|
-
try {
|
|
546
|
-
const iframeDocument = previewFrame.contentDocument || (previewFrame.contentWindow && previewFrame.contentWindow.document);
|
|
547
|
-
if (iframeDocument) {
|
|
548
|
-
const iframeBody = iframeDocument.body;
|
|
549
|
-
if (iframeBody) {
|
|
550
|
-
// 设置CSS，优化展示并禁止滚动
|
|
551
|
-
iframeBody.style.overflow = 'hidden';
|
|
552
|
-
iframeBody.style.width = '100%';
|
|
553
|
-
iframeBody.style.height = '100%';
|
|
554
|
-
iframeBody.style.margin = '0';
|
|
555
|
-
iframeBody.style.padding = '0';
|
|
556
|
-
|
|
557
|
-
// 添加滚动锁定
|
|
558
|
-
iframeDocument.documentElement.style.overflow = 'hidden';
|
|
559
|
-
iframeDocument.documentElement.style.position = 'fixed';
|
|
560
|
-
iframeDocument.documentElement.style.width = '100%';
|
|
561
|
-
iframeDocument.documentElement.style.height = '100%';
|
|
562
|
-
|
|
563
|
-
// 禁止触摸滚动
|
|
564
|
-
iframeDocument.addEventListener('touchmove', function(e) {
|
|
565
|
-
e.preventDefault();
|
|
566
|
-
}, { passive: false });
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
// 尝试修复iframe中相对路径的问题
|
|
570
|
-
const basePath = './';
|
|
571
|
-
const baseElement = iframeDocument.createElement('base');
|
|
572
|
-
baseElement.href = basePath;
|
|
573
|
-
|
|
574
|
-
// 将base元素添加到head开始位置
|
|
575
|
-
const head = iframeDocument.head || iframeDocument.getElementsByTagName('head')[0];
|
|
576
|
-
if (head && !head.querySelector('base')) {
|
|
577
|
-
head.insertBefore(baseElement, head.firstChild);
|
|
578
|
-
}
|
|
579
|
-
}
|
|
580
|
-
} catch (e) {
|
|
581
|
-
// 可能由于同源策略限制，忽略错误
|
|
582
|
-
console.log("无法访问iframe内容:", e);
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
// 更新滚动行为
|
|
586
|
-
setTimeout(updateScrollBehavior, 300);
|
|
587
|
-
};
|
|
588
|
-
|
|
589
|
-
// iframe错误处理，避免无限加载
|
|
590
|
-
previewFrame.onerror = function() {
|
|
591
|
-
loading.style.display = 'none';
|
|
592
|
-
};
|
|
593
|
-
|
|
594
|
-
// 显示加载动画
|
|
595
|
-
function showLoading() {
|
|
596
|
-
loading.style.display = 'flex';
|
|
597
|
-
|
|
598
|
-
// 设置超时，如果5秒后还在加载，则强制隐藏加载动画
|
|
599
|
-
setTimeout(() => {
|
|
600
|
-
loading.style.display = 'none';
|
|
601
|
-
}, 5000);
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
// 设备选择下拉菜单
|
|
605
|
-
deviceSelectButton.addEventListener('click', function(e) {
|
|
606
|
-
e.stopPropagation();
|
|
607
|
-
deviceSelectDropdown.classList.toggle('active');
|
|
608
|
-
deviceSelectButton.querySelector('.caret-icon').classList.toggle('up');
|
|
609
|
-
customDimensions.classList.remove('active');
|
|
610
|
-
});
|
|
611
|
-
|
|
612
|
-
// 点击页面其他区域关闭下拉菜单
|
|
613
|
-
document.addEventListener('click', function() {
|
|
614
|
-
deviceSelectDropdown.classList.remove('active');
|
|
615
|
-
customDimensions.classList.remove('active');
|
|
616
|
-
deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
|
|
617
|
-
});
|
|
618
|
-
|
|
619
|
-
// 设备选项点击事件
|
|
620
|
-
deviceOptions.forEach(option => {
|
|
621
|
-
option.addEventListener('click', function(e) {
|
|
622
|
-
e.stopPropagation(); // 阻止事件冒泡
|
|
623
|
-
const deviceName = this.dataset.device;
|
|
624
|
-
|
|
625
|
-
if (deviceName === 'custom') {
|
|
626
|
-
// 显示自定义尺寸弹窗
|
|
627
|
-
customDimensions.classList.add('active');
|
|
628
|
-
deviceSelectDropdown.classList.remove('active');
|
|
629
|
-
deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
|
|
630
|
-
|
|
631
|
-
// 将当前的宽高填入输入框
|
|
632
|
-
const currentWidth = parseInt(deviceFrame.style.width) || 375;
|
|
633
|
-
const currentHeight = parseInt(deviceFrame.style.height) || 667;
|
|
634
|
-
widthInput.value = isLandscape ? currentHeight : currentWidth;
|
|
635
|
-
heightInput.value = isLandscape ? currentWidth : currentHeight;
|
|
636
|
-
} else {
|
|
637
|
-
initDevice(deviceName);
|
|
638
|
-
deviceSelectDropdown.classList.remove('active');
|
|
639
|
-
deviceSelectButton.querySelector('.caret-icon').classList.remove('up');
|
|
640
|
-
currentDevice = deviceName;
|
|
641
|
-
currentDeviceName.textContent = deviceName;
|
|
642
|
-
}
|
|
643
|
-
});
|
|
644
|
-
});
|
|
645
|
-
|
|
646
|
-
// 防止自定义尺寸弹窗被点击外部区域关闭
|
|
647
|
-
customDimensions.addEventListener('click', function(e) {
|
|
648
|
-
e.stopPropagation();
|
|
649
|
-
});
|
|
650
|
-
|
|
651
|
-
// 应用自定义尺寸
|
|
652
|
-
applyDimensionsButton.addEventListener('click', function() {
|
|
653
|
-
// 获取用户输入的宽高值，并确保它们是有效的正整数
|
|
654
|
-
let width = parseInt(widthInput.value);
|
|
655
|
-
let height = parseInt(heightInput.value);
|
|
656
|
-
|
|
657
|
-
// 设置最小尺寸限制
|
|
658
|
-
width = (width && width >= 200) ? width : 375;
|
|
659
|
-
height = (height && height >= 200) ? height : 667;
|
|
660
|
-
|
|
661
|
-
// 更新输入框的值，确保显示有效数值
|
|
662
|
-
widthInput.value = width;
|
|
663
|
-
heightInput.value = height;
|
|
664
|
-
|
|
665
|
-
// 显示加载动画
|
|
666
|
-
showLoading();
|
|
667
|
-
|
|
668
|
-
// 重置滚动位置
|
|
669
|
-
document.querySelector('.main-content').scrollTop = 0;
|
|
670
|
-
|
|
671
|
-
// 更新设备名为"自定义尺寸"
|
|
672
|
-
currentDevice = 'custom';
|
|
673
|
-
currentDeviceName.textContent = '自定义尺寸';
|
|
674
|
-
|
|
675
|
-
// 更新尺寸显示
|
|
676
|
-
dimensionsDisplay.textContent = width + ' × ' + height;
|
|
677
|
-
|
|
678
|
-
// 应用新尺寸到设备框架
|
|
679
|
-
setTimeout(() => {
|
|
680
|
-
applyDimensions(width, height);
|
|
681
|
-
|
|
682
|
-
// 关闭自定义尺寸面板
|
|
683
|
-
customDimensions.classList.remove('active');
|
|
684
|
-
|
|
685
|
-
// 强制刷新iframe，与切换设备的行为一致
|
|
686
|
-
const baseUrl = './rawindex.html';
|
|
687
|
-
const currentTime = new Date().getTime();
|
|
688
|
-
const freshUrl = baseUrl + '?t=' + currentTime;
|
|
689
|
-
previewFrame.src = freshUrl;
|
|
690
|
-
}, 100);
|
|
691
|
-
});
|
|
692
|
-
|
|
693
|
-
// 旋转按钮点击事件
|
|
694
|
-
rotateButton.addEventListener('click', function() {
|
|
695
|
-
isLandscape = !isLandscape;
|
|
696
|
-
|
|
697
|
-
// 获取当前设备尺寸
|
|
698
|
-
const currentWidth = parseInt(deviceFrame.style.width) || 375;
|
|
699
|
-
const currentHeight = parseInt(deviceFrame.style.height) || 667;
|
|
700
|
-
|
|
701
|
-
// 显示加载动画
|
|
702
|
-
showLoading();
|
|
703
|
-
|
|
704
|
-
// 重置滚动位置
|
|
705
|
-
const mainContent = document.querySelector('.main-content');
|
|
706
|
-
mainContent.scrollTop = 0;
|
|
707
|
-
|
|
708
|
-
if (isLandscape) {
|
|
709
|
-
// 添加横屏类
|
|
710
|
-
deviceFrame.classList.add('landscape');
|
|
711
|
-
// 为容器添加横屏样式类
|
|
712
|
-
deviceContainer.classList.add('landscape-container');
|
|
713
|
-
} else {
|
|
714
|
-
// 移除横屏类
|
|
715
|
-
deviceFrame.classList.remove('landscape');
|
|
716
|
-
// 移除容器的横屏样式类
|
|
717
|
-
deviceContainer.classList.remove('landscape-container');
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
-
// 更新尺寸显示为旋转后的尺寸
|
|
721
|
-
dimensionsDisplay.textContent = currentHeight + ' × ' + currentWidth;
|
|
722
|
-
|
|
723
|
-
// 延迟应用尺寸，确保动画效果流畅
|
|
724
|
-
setTimeout(() => {
|
|
725
|
-
// 交换宽高应用到设备
|
|
726
|
-
applyDimensions(currentHeight, currentWidth);
|
|
727
|
-
|
|
728
|
-
// 强制刷新iframe，提高响应速度
|
|
729
|
-
const baseUrl = './rawindex.html';
|
|
730
|
-
const currentTime = new Date().getTime();
|
|
731
|
-
const freshUrl = baseUrl + '?t=' + currentTime;
|
|
732
|
-
previewFrame.src = freshUrl;
|
|
733
|
-
}, 300);
|
|
734
|
-
});
|
|
735
|
-
|
|
736
|
-
// 全屏按钮点击事件
|
|
737
|
-
fullscreenButton.addEventListener('click', function() {
|
|
738
|
-
if (previewFrame.requestFullscreen) {
|
|
739
|
-
previewFrame.requestFullscreen();
|
|
740
|
-
} else if (previewFrame.mozRequestFullScreen) {
|
|
741
|
-
previewFrame.mozRequestFullScreen();
|
|
742
|
-
} else if (previewFrame.webkitRequestFullscreen) {
|
|
743
|
-
previewFrame.webkitRequestFullscreen();
|
|
744
|
-
} else if (previewFrame.msRequestFullscreen) {
|
|
745
|
-
previewFrame.msRequestFullscreen();
|
|
746
|
-
}
|
|
747
|
-
});
|
|
748
|
-
|
|
749
|
-
// 初始化设备
|
|
750
|
-
function initDevice(deviceName) {
|
|
751
|
-
if (devices[deviceName]) {
|
|
752
|
-
// 显示加载动画
|
|
753
|
-
showLoading();
|
|
754
|
-
|
|
755
|
-
if (isInitialLoad) {
|
|
756
|
-
isInitialLoad = false;
|
|
757
|
-
}
|
|
758
|
-
|
|
759
|
-
// 重置容器样式
|
|
760
|
-
deviceContainer.classList.remove('landscape-container');
|
|
761
|
-
|
|
762
|
-
// 如果之前是横屏状态，切换回竖屏
|
|
763
|
-
if (isLandscape) {
|
|
764
|
-
isLandscape = false;
|
|
765
|
-
deviceFrame.classList.remove('landscape');
|
|
766
|
-
}
|
|
767
|
-
|
|
768
|
-
const { width, height } = devices[deviceName];
|
|
769
|
-
applyDimensions(width, height);
|
|
770
|
-
currentDeviceName.textContent = deviceName;
|
|
771
|
-
|
|
772
|
-
// 强制刷新iframe
|
|
773
|
-
const baseUrl = './rawindex.html';
|
|
774
|
-
const currentTime = new Date().getTime();
|
|
775
|
-
const freshUrl = baseUrl + '?t=' + currentTime;
|
|
776
|
-
previewFrame.src = freshUrl;
|
|
777
|
-
}
|
|
778
|
-
}
|
|
779
|
-
|
|
780
|
-
// 应用尺寸到设备框架
|
|
781
|
-
function applyDimensions(width, height) {
|
|
782
|
-
deviceFrame.style.width = width + 'px';
|
|
783
|
-
deviceFrame.style.height = height + 'px';
|
|
784
|
-
|
|
785
|
-
// 更新滚动行为
|
|
786
|
-
setTimeout(updateScrollBehavior, 100);
|
|
787
|
-
}
|
|
788
|
-
|
|
789
|
-
// 监听窗口尺寸改变
|
|
790
|
-
window.addEventListener('resize', function() {
|
|
791
|
-
// 更新滚动行为
|
|
792
|
-
updateScrollBehavior();
|
|
793
|
-
});
|
|
794
|
-
});
|
|
795
|
-
</script>
|
|
796
|
-
<style>
|
|
797
|
-
/* 美化滚动条 */
|
|
798
|
-
::-webkit-scrollbar {
|
|
799
|
-
width: 8px;
|
|
800
|
-
height: 8px;
|
|
801
|
-
}
|
|
802
|
-
|
|
803
|
-
::-webkit-scrollbar-track {
|
|
804
|
-
background: #f1f1f1;
|
|
805
|
-
border-radius: 4px;
|
|
806
|
-
}
|
|
807
|
-
|
|
808
|
-
::-webkit-scrollbar-thumb {
|
|
809
|
-
background: #ccc;
|
|
810
|
-
border-radius: 4px;
|
|
811
|
-
}
|
|
812
|
-
|
|
813
|
-
::-webkit-scrollbar-thumb:hover {
|
|
814
|
-
background: #aaa;
|
|
815
|
-
}
|
|
816
|
-
</style>
|
|
817
|
-
</body>
|
|
818
|
-
</html>
|
|
819
|
-
HTML
|
|
820
|
-
|
|
821
|
-
res.status = 200
|
|
822
|
-
res.content_type = 'text/html'
|
|
823
|
-
res.body = html
|
|
47
|
+
# 输出请求路径信息
|
|
48
|
+
puts "收到预览页面请求: #{req.path}, 处理为: #{request_path}" if @debug
|
|
49
|
+
|
|
50
|
+
# 构建实际文件路径（直接从源目录）
|
|
51
|
+
file_path = File.join(@preview_source_dir, request_path[1..-1])
|
|
52
|
+
puts "查找文件: #{file_path}" if @debug
|
|
53
|
+
puts "文件存在: #{File.exist?(file_path)}" if @debug
|
|
54
|
+
|
|
55
|
+
if File.exist?(file_path) && !File.directory?(file_path)
|
|
56
|
+
# 确定内容类型
|
|
57
|
+
ext = File.extname(file_path)
|
|
58
|
+
content_type = case ext
|
|
59
|
+
when ".html" then "text/html"
|
|
60
|
+
when ".js" then "application/javascript"
|
|
61
|
+
when ".css" then "text/css"
|
|
62
|
+
when ".png" then "image/png"
|
|
63
|
+
when ".jpg", ".jpeg" then "image/jpeg"
|
|
64
|
+
when ".gif" then "image/gif"
|
|
65
|
+
when ".ico" then "image/x-icon"
|
|
66
|
+
else "application/octet-stream"
|
|
67
|
+
end
|
|
68
|
+
|
|
69
|
+
# 读取文件内容
|
|
70
|
+
if [".png", ".jpg", ".jpeg", ".gif", ".ico"].include?(ext)
|
|
71
|
+
file_content = File.binread(file_path)
|
|
72
|
+
else
|
|
73
|
+
file_content = File.read(file_path)
|
|
74
|
+
|
|
75
|
+
# 对HTML和JS文件进行路径修正
|
|
76
|
+
if ext == ".html"
|
|
77
|
+
# 修改HTML中的相对路径引用
|
|
78
|
+
file_content = file_content.gsub('href="./preview.css"', 'href="/preview_page/preview.css"')
|
|
79
|
+
file_content = file_content.gsub('src="./preview.js"', 'src="/preview_page/preview.js"')
|
|
80
|
+
file_content = file_content.gsub('src="./rawindex.html"', 'src="/rawindex.html"')
|
|
81
|
+
elsif ext == ".js"
|
|
82
|
+
# 修改JS中的WebGL路径
|
|
83
|
+
file_content = file_content.gsub("const webglDirPath = './';", "const webglDirPath = '/';")
|
|
84
|
+
end
|
|
824
85
|
end
|
|
86
|
+
|
|
87
|
+
res.content_type = content_type
|
|
88
|
+
res.body = file_content
|
|
89
|
+
res.status = 200
|
|
90
|
+
|
|
91
|
+
puts "提供文件: #{file_path}, 内容类型: #{content_type}, 大小: #{file_content.length}字节" if @debug
|
|
92
|
+
else
|
|
93
|
+
res.status = 404
|
|
94
|
+
res.body = "Preview file not found: #{request_path}"
|
|
95
|
+
puts "找不到预览文件: #{file_path}" if @debug
|
|
96
|
+
end
|
|
825
97
|
end
|
|
98
|
+
|
|
99
|
+
puts "已挂载预览文件处理器: /preview_page/*，直接从源目录提供文件: #{@preview_source_dir}" if @debug
|
|
100
|
+
end
|
|
101
|
+
end
|
|
826
102
|
|
|
827
103
|
end
|
|
828
104
|
end
|