@quicktvui/web-cli 1.0.2 → 1.0.4
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.
- package/package.json +2 -2
- package/templates/web-renderer.html +45 -39
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@quicktvui/web-cli",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "CLI tool for QuickTVUI web development - zero configuration",
|
|
5
5
|
"author": "QuickTVUI Team",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"shelljs": "^0.10.0",
|
|
26
26
|
"signale": "^1.4.0",
|
|
27
27
|
"webpack-merge": "^6.0.0",
|
|
28
|
-
"@quicktvui/web-renderer": "^1.0.
|
|
28
|
+
"@quicktvui/web-renderer": "^1.0.25",
|
|
29
29
|
"scope-loader": "^1.0.3",
|
|
30
30
|
"chokidar": "^3.5.3",
|
|
31
31
|
"rimraf": "^5.0.0"
|
|
@@ -45,16 +45,31 @@
|
|
|
45
45
|
overflow: hidden;
|
|
46
46
|
background-color: #1a1a1a;
|
|
47
47
|
}
|
|
48
|
+
/* 主容器 - 包含所有内容，统一缩放 */
|
|
49
|
+
#main-container {
|
|
50
|
+
width: 1920px;
|
|
51
|
+
height: 1080px;
|
|
52
|
+
position: absolute;
|
|
53
|
+
top: 0;
|
|
54
|
+
left: 0;
|
|
55
|
+
background-color: #26292F;
|
|
56
|
+
visibility: hidden;
|
|
57
|
+
}
|
|
48
58
|
#app {
|
|
49
59
|
width: 1920px !important;
|
|
50
60
|
height: 1080px !important;
|
|
51
|
-
transform-origin: top left;
|
|
52
61
|
background-color: #26292F;
|
|
53
|
-
visibility: hidden;
|
|
54
62
|
}
|
|
55
|
-
/*
|
|
63
|
+
/* Force all direct children of #app to be 1920x1080 */
|
|
64
|
+
#app > * {
|
|
65
|
+
width: 1920px !important;
|
|
66
|
+
height: 1080px !important;
|
|
67
|
+
position: relative !important;
|
|
68
|
+
overflow: hidden !important;
|
|
69
|
+
}
|
|
70
|
+
/* 返回按钮样式 - 相对于 main-container */
|
|
56
71
|
#web-back-btn {
|
|
57
|
-
position:
|
|
72
|
+
position: absolute;
|
|
58
73
|
z-index: 99999;
|
|
59
74
|
width: 48px;
|
|
60
75
|
height: 48px;
|
|
@@ -67,6 +82,8 @@
|
|
|
67
82
|
justify-content: center;
|
|
68
83
|
transition: all 0.2s ease;
|
|
69
84
|
backdrop-filter: blur(10px);
|
|
85
|
+
left: 20px;
|
|
86
|
+
top: 20px;
|
|
70
87
|
}
|
|
71
88
|
#web-back-btn:hover {
|
|
72
89
|
background: rgba(255, 255, 255, 0.2);
|
|
@@ -85,13 +102,6 @@
|
|
|
85
102
|
stroke-linecap: round;
|
|
86
103
|
stroke-linejoin: round;
|
|
87
104
|
}
|
|
88
|
-
/* Force all direct children of #app to be 1920x1080 */
|
|
89
|
-
#app > * {
|
|
90
|
-
width: 1920px !important;
|
|
91
|
-
height: 1080px !important;
|
|
92
|
-
position: relative !important;
|
|
93
|
-
overflow: hidden !important;
|
|
94
|
-
}
|
|
95
105
|
/* TV Focus styles */
|
|
96
106
|
[focusable="true"], [data-focusable="true"] {
|
|
97
107
|
cursor: pointer;
|
|
@@ -117,35 +127,27 @@
|
|
|
117
127
|
document.addEventListener('DOMContentLoaded', fixAppDimensions);
|
|
118
128
|
window.addEventListener('load', fixAppDimensions);
|
|
119
129
|
|
|
120
|
-
// Scale the
|
|
130
|
+
// Scale the main-container to fit the viewport
|
|
121
131
|
function scaleApp() {
|
|
122
|
-
var
|
|
123
|
-
if (
|
|
124
|
-
|
|
125
|
-
|
|
132
|
+
var container = document.getElementById('main-container');
|
|
133
|
+
if (container) {
|
|
134
|
+
container.style.setProperty('width', TV_WIDTH + 'px');
|
|
135
|
+
container.style.setProperty('height', TV_HEIGHT + 'px');
|
|
126
136
|
|
|
127
137
|
var scaleX = _originalInnerWidth / TV_WIDTH;
|
|
128
138
|
var scaleY = _originalInnerHeight / TV_HEIGHT;
|
|
129
139
|
var scale = Math.min(scaleX, scaleY);
|
|
130
|
-
|
|
140
|
+
container.style.transformOrigin = 'top left';
|
|
141
|
+
container.style.transform = 'scale(' + scale + ')';
|
|
131
142
|
var offsetX = (_originalInnerWidth - TV_WIDTH * scale) / 2;
|
|
132
143
|
var offsetY = (_originalInnerHeight - TV_HEIGHT * scale) / 2;
|
|
133
|
-
|
|
134
|
-
|
|
144
|
+
container.style.left = '0';
|
|
145
|
+
container.style.top = '0';
|
|
146
|
+
container.style.marginLeft = offsetX + 'px';
|
|
147
|
+
container.style.marginTop = offsetY + 'px';
|
|
135
148
|
|
|
136
|
-
// Show the
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
// 更新返回按钮位置，相对于 #app 左上角
|
|
140
|
-
var btn = document.getElementById('web-back-btn');
|
|
141
|
-
if (btn) {
|
|
142
|
-
var btnSize = 48 * scale;
|
|
143
|
-
var btnMargin = 20 * scale;
|
|
144
|
-
btn.style.width = btnSize + 'px';
|
|
145
|
-
btn.style.height = btnSize + 'px';
|
|
146
|
-
btn.style.left = (offsetX + btnMargin) + 'px';
|
|
147
|
-
btn.style.top = (offsetY + btnMargin) + 'px';
|
|
148
|
-
}
|
|
149
|
+
// Show the container after positioning
|
|
150
|
+
container.style.visibility = 'visible';
|
|
149
151
|
}
|
|
150
152
|
}
|
|
151
153
|
|
|
@@ -160,13 +162,17 @@
|
|
|
160
162
|
</script>
|
|
161
163
|
</head>
|
|
162
164
|
<body>
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
<
|
|
167
|
-
<
|
|
168
|
-
|
|
169
|
-
|
|
165
|
+
<!-- 主容器 - 所有内容都在这里，统一缩放 -->
|
|
166
|
+
<div id="main-container">
|
|
167
|
+
<!-- 返回按钮 -->
|
|
168
|
+
<button id="web-back-btn" title="返回">
|
|
169
|
+
<svg viewBox="0 0 24 24">
|
|
170
|
+
<polyline points="15 18 9 12 15 6"></polyline>
|
|
171
|
+
</svg>
|
|
172
|
+
</button>
|
|
173
|
+
<!-- 应用容器 -->
|
|
174
|
+
<div id="app"></div>
|
|
175
|
+
</div>
|
|
170
176
|
<script>
|
|
171
177
|
// 返回按钮点击事件
|
|
172
178
|
document.getElementById('web-back-btn').addEventListener('click', function() {
|