pindo 5.1.0 → 5.1.2
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/web/run.rb +96 -87
- data/lib/pindo/module/webserver/brotli_file_handler.rb +57 -0
- data/lib/pindo/module/webserver/responsive_preview_handler.rb +828 -0
- data/lib/pindo/module/webserver/webgl_page_handler.rb +45 -0
- data/lib/pindo/module/webserver/webgl_server_helper.rb +18 -0
- data/lib/pindo/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: edde43d063ecc58b4cd99a2728817aabd63b30a0f43bfca4ac2655f1ed7aa603
|
|
4
|
+
data.tar.gz: e41e3030be169bf333d8d32c3da71965d641e1a2a9c4c0d70baab8f10b5ead2b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0ce8d7846eb86dc1def92d0b30971eec8ad15e828c2038ba1c63031675a9f3c06ce8633137add8db30ec23da7369bc54b95056dabd058b1d387f7d0e21e31e83
|
|
7
|
+
data.tar.gz: 4ab25dc12edcd9d722e011c5b4ea496350c84c7aacee68de3333d150525bfacc04f451ee437166e4bd970970edfb17c55992cdf3b072dff15173ca4054da93ed
|
|
@@ -4,7 +4,11 @@ require 'find'
|
|
|
4
4
|
require 'fileutils'
|
|
5
5
|
require 'pindo/base/executable'
|
|
6
6
|
require 'pindo/module/build/buildhelper'
|
|
7
|
+
require 'pindo/module/webserver/brotli_file_handler'
|
|
8
|
+
require 'pindo/module/webserver/webgl_page_handler'
|
|
9
|
+
require 'pindo/module/webserver/responsive_preview_handler'
|
|
7
10
|
require 'webrick' # 添加WebRick HTTP服务器
|
|
11
|
+
require 'socket'
|
|
8
12
|
|
|
9
13
|
module Pindo
|
|
10
14
|
class Command
|
|
@@ -62,87 +66,17 @@ module Pindo
|
|
|
62
66
|
end
|
|
63
67
|
end
|
|
64
68
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
def do_GET(req, res)
|
|
74
|
-
# 只处理.br结尾的文件
|
|
75
|
-
unless req.path.end_with?('.br')
|
|
76
|
-
res.status = 404
|
|
77
|
-
return
|
|
78
|
-
end
|
|
79
|
-
|
|
80
|
-
file_path = File.join(@root_dir, req.path[1..-1])
|
|
81
|
-
UI.debug("处理.br文件请求: #{req.path}", @debug)
|
|
82
|
-
|
|
83
|
-
if File.exist?(file_path)
|
|
84
|
-
# 确定原始文件类型
|
|
85
|
-
base_name = File.basename(req.path, ".br")
|
|
86
|
-
ext = File.extname(base_name)
|
|
87
|
-
|
|
88
|
-
content_type = case ext
|
|
89
|
-
when ".js" then "application/javascript"
|
|
90
|
-
when ".wasm" then "application/wasm"
|
|
91
|
-
when ".data" then "application/octet-stream"
|
|
92
|
-
when ".json" then "application/json"
|
|
93
|
-
else "application/octet-stream"
|
|
94
|
-
end
|
|
95
|
-
|
|
96
|
-
# 读取文件
|
|
97
|
-
file_content = File.binread(file_path)
|
|
98
|
-
|
|
99
|
-
# 设置响应
|
|
100
|
-
res.status = 200
|
|
101
|
-
res.header["Content-Encoding"] = "br"
|
|
102
|
-
res.content_type = content_type
|
|
103
|
-
res.body = file_content
|
|
104
|
-
else
|
|
105
|
-
UI.debug("未找到.br文件: #{file_path}", @debug)
|
|
106
|
-
res.status = 404
|
|
107
|
-
end
|
|
108
|
-
end
|
|
109
|
-
end
|
|
110
|
-
|
|
111
|
-
# 自定义前端页面处理器，处理Unity WebGL的特殊文件加载需求
|
|
112
|
-
class WebGLPageHandler < WEBrick::HTTPServlet::AbstractServlet
|
|
113
|
-
def initialize(server, root_dir, debug=false)
|
|
114
|
-
super(server)
|
|
115
|
-
@root_dir = root_dir
|
|
116
|
-
@debug = debug
|
|
117
|
-
end
|
|
118
|
-
|
|
119
|
-
def do_GET(req, res)
|
|
120
|
-
path = req.path
|
|
121
|
-
path = "/index.html" if path == "/"
|
|
122
|
-
|
|
123
|
-
file_path = File.join(@root_dir, path[1..-1])
|
|
124
|
-
|
|
125
|
-
if File.exist?(file_path)
|
|
126
|
-
# 确定内容类型
|
|
127
|
-
ext = File.extname(file_path)
|
|
128
|
-
content_type = case ext
|
|
129
|
-
when ".html" then "text/html"
|
|
130
|
-
when ".js" then "application/javascript"
|
|
131
|
-
when ".css" then "text/css"
|
|
132
|
-
when ".png" then "image/png"
|
|
133
|
-
when ".jpg", ".jpeg" then "image/jpeg"
|
|
134
|
-
when ".gif" then "image/gif"
|
|
135
|
-
when ".ico" then "image/x-icon"
|
|
136
|
-
else "application/octet-stream"
|
|
137
|
-
end
|
|
138
|
-
|
|
139
|
-
res.content_type = content_type
|
|
140
|
-
res.body = File.read(file_path)
|
|
141
|
-
res.status = 200
|
|
142
|
-
else
|
|
143
|
-
res.status = 404
|
|
69
|
+
|
|
70
|
+
# 获取本机局域网IP地址
|
|
71
|
+
def get_local_ip
|
|
72
|
+
ip = nil
|
|
73
|
+
Socket.ip_address_list.each do |addr_info|
|
|
74
|
+
if addr_info.ipv4? && !addr_info.ipv4_loopback?
|
|
75
|
+
ip = addr_info.ip_address
|
|
76
|
+
break
|
|
144
77
|
end
|
|
145
78
|
end
|
|
79
|
+
return ip || 'localhost'
|
|
146
80
|
end
|
|
147
81
|
|
|
148
82
|
# 启动HTTP服务器
|
|
@@ -170,11 +104,81 @@ module Pindo
|
|
|
170
104
|
:DocumentRoot => webgl_dir,
|
|
171
105
|
:Logger => WEBrick::Log.new(nil, WEBrick::Log::ERROR),
|
|
172
106
|
:AccessLog => @args_debug ? nil : [],
|
|
173
|
-
:DoNotReverseLookup => true
|
|
107
|
+
:DoNotReverseLookup => true,
|
|
108
|
+
:BindAddress => '0.0.0.0' # 绑定到所有网络接口，使其在局域网可访问
|
|
174
109
|
)
|
|
175
110
|
|
|
176
|
-
#
|
|
177
|
-
server.
|
|
111
|
+
# 挂载一个特殊的处理器专门处理原始的index.html
|
|
112
|
+
server.mount_proc("/rawindex.html") { |req, res|
|
|
113
|
+
index_path = File.join(webgl_dir, "index.html")
|
|
114
|
+
if File.exist?(index_path)
|
|
115
|
+
# 读取原始HTML内容
|
|
116
|
+
original_html = File.read(index_path)
|
|
117
|
+
|
|
118
|
+
# 添加base标签以修复相对路径问题
|
|
119
|
+
if !original_html.include?('<base href=')
|
|
120
|
+
# 在<head>标签后插入base标签
|
|
121
|
+
modified_html = original_html.gsub(/<head>/, '<head><base href="./">')
|
|
122
|
+
res.body = modified_html
|
|
123
|
+
else
|
|
124
|
+
res.body = original_html
|
|
125
|
+
end
|
|
126
|
+
|
|
127
|
+
res.content_type = "text/html"
|
|
128
|
+
res.status = 200
|
|
129
|
+
else
|
|
130
|
+
res.status = 404
|
|
131
|
+
res.body = "WebGL index.html not found"
|
|
132
|
+
end
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
# 设置根路径重定向处理器
|
|
136
|
+
server.mount_proc("/") { |req, res|
|
|
137
|
+
# 仅对根路径请求进行重定向
|
|
138
|
+
if req.path == "/" || req.path == "/index.html"
|
|
139
|
+
res.set_redirect(WEBrick::HTTPStatus::Found, "/responsive")
|
|
140
|
+
else
|
|
141
|
+
# 对于非根路径，使用普通的静态文件处理
|
|
142
|
+
path = req.path
|
|
143
|
+
file_path = File.join(webgl_dir, path[1..-1])
|
|
144
|
+
|
|
145
|
+
if File.exist?(file_path) && !File.directory?(file_path)
|
|
146
|
+
# 确定内容类型
|
|
147
|
+
ext = File.extname(file_path)
|
|
148
|
+
content_type = case ext
|
|
149
|
+
when ".html" then "text/html"
|
|
150
|
+
when ".js" then "application/javascript"
|
|
151
|
+
when ".css" then "text/css"
|
|
152
|
+
when ".png" then "image/png"
|
|
153
|
+
when ".jpg", ".jpeg" then "image/jpeg"
|
|
154
|
+
when ".gif" then "image/gif"
|
|
155
|
+
when ".ico" then "image/x-icon"
|
|
156
|
+
when ".wasm" then "application/wasm"
|
|
157
|
+
when ".data" then "application/octet-stream"
|
|
158
|
+
when ".json" then "application/json"
|
|
159
|
+
else "application/octet-stream"
|
|
160
|
+
end
|
|
161
|
+
|
|
162
|
+
# 设置Brotli压缩相关的响应头
|
|
163
|
+
if file_path.end_with?('.br')
|
|
164
|
+
res.header["Content-Encoding"] = "br"
|
|
165
|
+
file_content = File.binread(file_path)
|
|
166
|
+
else
|
|
167
|
+
file_content = File.read(file_path)
|
|
168
|
+
end
|
|
169
|
+
|
|
170
|
+
res.content_type = content_type
|
|
171
|
+
res.body = file_content
|
|
172
|
+
res.status = 200
|
|
173
|
+
else
|
|
174
|
+
res.status = 404
|
|
175
|
+
res.body = "File not found: #{path}"
|
|
176
|
+
end
|
|
177
|
+
end
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
# 挂载响应式预览页面处理器
|
|
181
|
+
server.mount("/responsive", Pindo::WebServer::ResponsivePreviewHandler, webgl_dir, port, @args_debug)
|
|
178
182
|
|
|
179
183
|
# 挂载Brotli处理器（后缀为.br的文件）
|
|
180
184
|
paths_with_br = []
|
|
@@ -187,7 +191,7 @@ module Pindo
|
|
|
187
191
|
|
|
188
192
|
# 挂载每个.br文件
|
|
189
193
|
paths_with_br.each do |br_path|
|
|
190
|
-
server.mount(br_path, BrotliFileHandler, webgl_dir, @args_debug)
|
|
194
|
+
server.mount(br_path, Pindo::WebServer::BrotliFileHandler, webgl_dir, @args_debug)
|
|
191
195
|
end
|
|
192
196
|
|
|
193
197
|
# 只在调试模式下显示详细信息
|
|
@@ -209,10 +213,15 @@ module Pindo
|
|
|
209
213
|
end
|
|
210
214
|
end
|
|
211
215
|
end
|
|
212
|
-
|
|
216
|
+
|
|
213
217
|
# 启动服务器并返回
|
|
218
|
+
local_ip = get_local_ip
|
|
214
219
|
UI.puts("启动WebGL HTTP服务器，端口: #{port}，目录: #{webgl_dir}")
|
|
215
|
-
|
|
220
|
+
|
|
221
|
+
UI.puts("本地访问地址: http://localhost:#{port}/")
|
|
222
|
+
UI.puts("局域网访问地址: http://#{local_ip}:#{port}/")
|
|
223
|
+
UI.puts("原始WebGL地址: http://localhost:#{port}/index.html")
|
|
224
|
+
|
|
216
225
|
return server
|
|
217
226
|
rescue Exception => e
|
|
218
227
|
UI.puts("启动HTTP服务器失败: #{e.message}")
|
|
@@ -243,8 +252,8 @@ module Pindo
|
|
|
243
252
|
server = start_http_server(webgl_res_dir, @args_port)
|
|
244
253
|
|
|
245
254
|
if server
|
|
246
|
-
# 打开浏览器展示WebGL内容
|
|
247
|
-
system("open http://localhost:#{@args_port}/
|
|
255
|
+
# 打开浏览器展示WebGL内容 - 使用根路径，会自动重定向到响应式预览
|
|
256
|
+
system("open http://localhost:#{@args_port}/")
|
|
248
257
|
|
|
249
258
|
# 捕获Ctrl+C信号来优雅地关闭服务器
|
|
250
259
|
trap('INT') { server.shutdown }
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
require 'highline/import'
|
|
2
|
+
require 'xcodeproj'
|
|
3
|
+
require 'find'
|
|
4
|
+
require 'fileutils'
|
|
5
|
+
require 'pindo/base/executable'
|
|
6
|
+
require 'webrick' # 添加WebRick HTTP服务器
|
|
7
|
+
require 'socket'
|
|
8
|
+
|
|
9
|
+
module Pindo
|
|
10
|
+
module WebServer
|
|
11
|
+
|
|
12
|
+
# 处理.br扩展名请求的servlet
|
|
13
|
+
class BrotliFileHandler < WEBrick::HTTPServlet::AbstractServlet
|
|
14
|
+
def initialize(server, root_dir, debug=false)
|
|
15
|
+
super(server)
|
|
16
|
+
@root_dir = root_dir
|
|
17
|
+
@debug = debug
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
def do_GET(req, res)
|
|
21
|
+
# 只处理.br结尾的文件
|
|
22
|
+
unless req.path.end_with?('.br')
|
|
23
|
+
res.status = 404
|
|
24
|
+
return
|
|
25
|
+
end
|
|
26
|
+
|
|
27
|
+
file_path = File.join(@root_dir, req.path[1..-1])
|
|
28
|
+
|
|
29
|
+
if File.exist?(file_path)
|
|
30
|
+
# 确定原始文件类型
|
|
31
|
+
base_name = File.basename(req.path, ".br")
|
|
32
|
+
ext = File.extname(base_name)
|
|
33
|
+
|
|
34
|
+
content_type = case ext
|
|
35
|
+
when ".js" then "application/javascript"
|
|
36
|
+
when ".wasm" then "application/wasm"
|
|
37
|
+
when ".data" then "application/octet-stream"
|
|
38
|
+
when ".json" then "application/json"
|
|
39
|
+
else "application/octet-stream"
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
# 读取文件
|
|
43
|
+
file_content = File.binread(file_path)
|
|
44
|
+
|
|
45
|
+
# 设置响应
|
|
46
|
+
res.status = 200
|
|
47
|
+
res.header["Content-Encoding"] = "br"
|
|
48
|
+
res.content_type = content_type
|
|
49
|
+
res.body = file_content
|
|
50
|
+
else
|
|
51
|
+
res.status = 404
|
|
52
|
+
end
|
|
53
|
+
end
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
end
|
|
57
|
+
end
|
|
@@ -0,0 +1,828 @@
|
|
|
1
|
+
require 'webrick'
|
|
2
|
+
require 'json'
|
|
3
|
+
|
|
4
|
+
module Pindo
|
|
5
|
+
module WebServer
|
|
6
|
+
|
|
7
|
+
# 响应式预览页面处理器
|
|
8
|
+
class ResponsivePreviewHandler < WEBrick::HTTPServlet::AbstractServlet
|
|
9
|
+
def initialize(server, root_dir, port, debug=false)
|
|
10
|
+
super(server)
|
|
11
|
+
@root_dir = root_dir
|
|
12
|
+
@port = port
|
|
13
|
+
@debug = debug
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
def do_GET(req, res)
|
|
17
|
+
# 预定义设备尺寸
|
|
18
|
+
devices = {
|
|
19
|
+
'iPhone 16 Pro Max' => { width: 430, height: 932 },
|
|
20
|
+
'iPhone 16' => { width: 393, height: 852 },
|
|
21
|
+
'iPhone X' => { width: 375, height: 812 },
|
|
22
|
+
'iPhone 8 Plus' => { width: 414, height: 736 },
|
|
23
|
+
'iPhone 8' => { width: 375, height: 667 },
|
|
24
|
+
'iPhone 5s' => { width: 320, height: 568 },
|
|
25
|
+
'iPad Mini' => { width: 768, height: 1024 },
|
|
26
|
+
'iPad Pro 11"' => { width: 834, height: 1194 },
|
|
27
|
+
'iPad Pro 12.9"' => { width: 1024, height: 1366 },
|
|
28
|
+
'Galaxy Note 8' => { width: 360, height: 740 },
|
|
29
|
+
'Galaxy S5' => { width: 360, height: 640 },
|
|
30
|
+
'Nexus 5' => { width: 360, height: 640 },
|
|
31
|
+
'Lumia 920' => { width: 384, height: 640 },
|
|
32
|
+
'MacBook Pro' => { width: 1440, height: 900 },
|
|
33
|
+
'标准桌面' => { width: 1280, height: 720 },
|
|
34
|
+
'宽屏桌面' => { width: 1920, height: 1080 }
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
html = <<-HTML
|
|
38
|
+
<!DOCTYPE html>
|
|
39
|
+
<html lang="zh-CN">
|
|
40
|
+
<head>
|
|
41
|
+
<meta charset="UTF-8">
|
|
42
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
43
|
+
<title>WebGL预览</title>
|
|
44
|
+
<style>
|
|
45
|
+
:root {
|
|
46
|
+
--bg-color: #f9f9fb;
|
|
47
|
+
--primary-color: #6166f1;
|
|
48
|
+
--secondary-color: #f5f5f7;
|
|
49
|
+
--text-color: #333;
|
|
50
|
+
--border-color: #e0e0e5;
|
|
51
|
+
--header-height: 60px;
|
|
52
|
+
--device-frame-color: #e2e2e7;
|
|
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
|
|
824
|
+
end
|
|
825
|
+
end
|
|
826
|
+
|
|
827
|
+
end
|
|
828
|
+
end
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
require 'webrick'
|
|
2
|
+
|
|
3
|
+
module Pindo
|
|
4
|
+
module WebServer
|
|
5
|
+
# 自定义前端页面处理器，处理Unity WebGL的特殊文件加载需求
|
|
6
|
+
|
|
7
|
+
# 自定义前端页面处理器，处理Unity WebGL的特殊文件加载需求
|
|
8
|
+
class WebGLPageHandler < WEBrick::HTTPServlet::AbstractServlet
|
|
9
|
+
def initialize(server, root_dir, debug=false)
|
|
10
|
+
super(server)
|
|
11
|
+
@root_dir = root_dir
|
|
12
|
+
@debug = debug
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
def do_GET(req, res)
|
|
16
|
+
path = req.path
|
|
17
|
+
path = "/index.html" if path == "/"
|
|
18
|
+
|
|
19
|
+
file_path = File.join(@root_dir, path[1..-1])
|
|
20
|
+
|
|
21
|
+
if File.exist?(file_path)
|
|
22
|
+
# 确定内容类型
|
|
23
|
+
ext = File.extname(file_path)
|
|
24
|
+
content_type = case ext
|
|
25
|
+
when ".html" then "text/html"
|
|
26
|
+
when ".js" then "application/javascript"
|
|
27
|
+
when ".css" then "text/css"
|
|
28
|
+
when ".png" then "image/png"
|
|
29
|
+
when ".jpg", ".jpeg" then "image/jpeg"
|
|
30
|
+
when ".gif" then "image/gif"
|
|
31
|
+
when ".ico" then "image/x-icon"
|
|
32
|
+
else "application/octet-stream"
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
res.content_type = content_type
|
|
36
|
+
res.body = File.read(file_path)
|
|
37
|
+
res.status = 200
|
|
38
|
+
else
|
|
39
|
+
res.status = 404
|
|
40
|
+
end
|
|
41
|
+
end
|
|
42
|
+
end
|
|
43
|
+
|
|
44
|
+
end
|
|
45
|
+
end
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
require 'webrick'
|
|
2
|
+
require 'socket'
|
|
3
|
+
require 'find'
|
|
4
|
+
require_relative 'responsive_preview_handler'
|
|
5
|
+
require_relative 'brotli_file_handler'
|
|
6
|
+
require_relative 'webgl_page_handler'
|
|
7
|
+
|
|
8
|
+
module Pindo
|
|
9
|
+
module WebServer
|
|
10
|
+
# WebGL服务器辅助类
|
|
11
|
+
# 用于配置和启动WebGL预览服务器
|
|
12
|
+
class WebGlServerHelper
|
|
13
|
+
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
end
|
|
18
|
+
end
|
data/lib/pindo/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: pindo
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 5.1.
|
|
4
|
+
version: 5.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- wade
|
|
8
8
|
bindir: bin
|
|
9
9
|
cert_chain: []
|
|
10
|
-
date: 2025-04-
|
|
10
|
+
date: 2025-04-18 00:00:00.000000000 Z
|
|
11
11
|
dependencies:
|
|
12
12
|
- !ruby/object:Gem::Dependency
|
|
13
13
|
name: claide
|
|
@@ -414,6 +414,10 @@ files:
|
|
|
414
414
|
- lib/pindo/module/cert/provisioninghelper.rb
|
|
415
415
|
- lib/pindo/module/cert/xcodecerthelper.rb
|
|
416
416
|
- lib/pindo/module/pgyer/pgyerhelper.rb
|
|
417
|
+
- lib/pindo/module/webserver/brotli_file_handler.rb
|
|
418
|
+
- lib/pindo/module/webserver/responsive_preview_handler.rb
|
|
419
|
+
- lib/pindo/module/webserver/webgl_page_handler.rb
|
|
420
|
+
- lib/pindo/module/webserver/webgl_server_helper.rb
|
|
417
421
|
- lib/pindo/module/xcode/xcodeappconfig.rb
|
|
418
422
|
- lib/pindo/module/xcode/xcodebuildconfig.rb
|
|
419
423
|
- lib/pindo/module/xcode/xcodebuildhelper.rb
|