@mxmweb/fviewer 1.4.5 → 1.4.7
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/README.md +506 -258
- package/adopters/StaticFileReader.d.ts +1 -1
- package/core/index.d.ts +2 -2
- package/core/types.d.ts +1 -28
- package/examples/CoreReader/index.d.ts +1 -0
- package/examples/StaticFileReader/index.d.ts +1 -0
- package/index.js +1116 -14890
- package/index.js.map +1 -0
- package/lib_enter.d.ts +1 -2
- package/package.json +1 -9
- package/stats.html +4949 -0
- package/demo.html +0 -226
package/demo.html
DELETED
|
@@ -1,226 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="zh-CN">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>FViewer HTML 测试页面</title>
|
|
7
|
-
<style>
|
|
8
|
-
body {
|
|
9
|
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
10
|
-
line-height: 1.6;
|
|
11
|
-
margin: 0;
|
|
12
|
-
padding: 20px;
|
|
13
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
14
|
-
color: #333;
|
|
15
|
-
}
|
|
16
|
-
.container {
|
|
17
|
-
max-width: 800px;
|
|
18
|
-
margin: 0 auto;
|
|
19
|
-
background: white;
|
|
20
|
-
padding: 30px;
|
|
21
|
-
border-radius: 10px;
|
|
22
|
-
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
23
|
-
}
|
|
24
|
-
h1 {
|
|
25
|
-
color: #2c3e50;
|
|
26
|
-
text-align: center;
|
|
27
|
-
border-bottom: 3px solid #3498db;
|
|
28
|
-
padding-bottom: 10px;
|
|
29
|
-
}
|
|
30
|
-
h2 {
|
|
31
|
-
color: #34495e;
|
|
32
|
-
margin-top: 30px;
|
|
33
|
-
}
|
|
34
|
-
.highlight {
|
|
35
|
-
background-color: #f39c12;
|
|
36
|
-
color: white;
|
|
37
|
-
padding: 2px 6px;
|
|
38
|
-
border-radius: 3px;
|
|
39
|
-
}
|
|
40
|
-
.code-block {
|
|
41
|
-
background-color: #f8f9fa;
|
|
42
|
-
border: 1px solid #e9ecef;
|
|
43
|
-
border-radius: 5px;
|
|
44
|
-
padding: 15px;
|
|
45
|
-
font-family: 'Courier New', monospace;
|
|
46
|
-
overflow-x: auto;
|
|
47
|
-
}
|
|
48
|
-
table {
|
|
49
|
-
width: 100%;
|
|
50
|
-
border-collapse: collapse;
|
|
51
|
-
margin: 20px 0;
|
|
52
|
-
}
|
|
53
|
-
th, td {
|
|
54
|
-
border: 1px solid #ddd;
|
|
55
|
-
padding: 12px;
|
|
56
|
-
text-align: left;
|
|
57
|
-
}
|
|
58
|
-
th {
|
|
59
|
-
background-color: #3498db;
|
|
60
|
-
color: white;
|
|
61
|
-
}
|
|
62
|
-
tr:nth-child(even) {
|
|
63
|
-
background-color: #f2f2f2;
|
|
64
|
-
}
|
|
65
|
-
.button {
|
|
66
|
-
display: inline-block;
|
|
67
|
-
padding: 10px 20px;
|
|
68
|
-
background-color: #3498db;
|
|
69
|
-
color: white;
|
|
70
|
-
text-decoration: none;
|
|
71
|
-
border-radius: 5px;
|
|
72
|
-
margin: 5px;
|
|
73
|
-
transition: background-color 0.3s;
|
|
74
|
-
}
|
|
75
|
-
.button:hover {
|
|
76
|
-
background-color: #2980b9;
|
|
77
|
-
}
|
|
78
|
-
.alert {
|
|
79
|
-
padding: 15px;
|
|
80
|
-
margin: 20px 0;
|
|
81
|
-
border-radius: 5px;
|
|
82
|
-
}
|
|
83
|
-
.alert-success {
|
|
84
|
-
background-color: #d4edda;
|
|
85
|
-
border: 1px solid #c3e6cb;
|
|
86
|
-
color: #155724;
|
|
87
|
-
}
|
|
88
|
-
.alert-warning {
|
|
89
|
-
background-color: #fff3cd;
|
|
90
|
-
border: 1px solid #ffeaa7;
|
|
91
|
-
color: #856404;
|
|
92
|
-
}
|
|
93
|
-
.alert-error {
|
|
94
|
-
background-color: #f8d7da;
|
|
95
|
-
border: 1px solid #f5c6cb;
|
|
96
|
-
color: #721c24;
|
|
97
|
-
}
|
|
98
|
-
</style>
|
|
99
|
-
</head>
|
|
100
|
-
<body>
|
|
101
|
-
<div class="container">
|
|
102
|
-
<h1>🚀 FViewer HTML 渲染测试页面</h1>
|
|
103
|
-
|
|
104
|
-
<div class="alert alert-success">
|
|
105
|
-
<strong>✅ 成功！</strong> 这是一个用于测试 FViewer HTML 渲染功能的复杂页面。
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<h2>📋 功能特性</h2>
|
|
109
|
-
<p>这个 HTML 页面包含了多种元素来测试 <span class="highlight">FViewer</span> 的 HTML 渲染能力：</p>
|
|
110
|
-
|
|
111
|
-
<ul>
|
|
112
|
-
<li><strong>标题和段落</strong> - 测试基本文本渲染</li>
|
|
113
|
-
<li><strong>表格</strong> - 测试表格布局和样式</li>
|
|
114
|
-
<li><strong>代码块</strong> - 测试代码高亮显示</li>
|
|
115
|
-
<li><strong>按钮和链接</strong> - 测试交互元素</li>
|
|
116
|
-
<li><strong>警告框</strong> - 测试不同类型的提示信息</li>
|
|
117
|
-
<li><strong>CSS 样式</strong> - 测试样式渲染效果</li>
|
|
118
|
-
</ul>
|
|
119
|
-
|
|
120
|
-
<h2>📊 数据表格示例</h2>
|
|
121
|
-
<table>
|
|
122
|
-
<thead>
|
|
123
|
-
<tr>
|
|
124
|
-
<th>功能模块</th>
|
|
125
|
-
<th>状态</th>
|
|
126
|
-
<th>描述</th>
|
|
127
|
-
<th>优先级</th>
|
|
128
|
-
</tr>
|
|
129
|
-
</thead>
|
|
130
|
-
<tbody>
|
|
131
|
-
<tr>
|
|
132
|
-
<td>PDF 渲染</td>
|
|
133
|
-
<td>✅ 已完成</td>
|
|
134
|
-
<td>支持 PDF 文件查看和标注</td>
|
|
135
|
-
<td>高</td>
|
|
136
|
-
</tr>
|
|
137
|
-
<tr>
|
|
138
|
-
<td>Markdown 渲染</td>
|
|
139
|
-
<td>✅ 已完成</td>
|
|
140
|
-
<td>支持 Markdown 语法和代码高亮</td>
|
|
141
|
-
<td>高</td>
|
|
142
|
-
</tr>
|
|
143
|
-
<tr>
|
|
144
|
-
<td>HTML 渲染</td>
|
|
145
|
-
<td>🔄 测试中</td>
|
|
146
|
-
<td>支持 HTML 标签和样式渲染</td>
|
|
147
|
-
<td>中</td>
|
|
148
|
-
</tr>
|
|
149
|
-
<tr>
|
|
150
|
-
<td>文本渲染</td>
|
|
151
|
-
<td>✅ 已完成</td>
|
|
152
|
-
<td>支持纯文本文件显示</td>
|
|
153
|
-
<td>中</td>
|
|
154
|
-
</tr>
|
|
155
|
-
<tr>
|
|
156
|
-
<td>图片渲染</td>
|
|
157
|
-
<td>⏳ 计划中</td>
|
|
158
|
-
<td>支持常见图片格式显示</td>
|
|
159
|
-
<td>低</td>
|
|
160
|
-
</tr>
|
|
161
|
-
</tbody>
|
|
162
|
-
</table>
|
|
163
|
-
|
|
164
|
-
<h2>💻 代码示例</h2>
|
|
165
|
-
<p>以下是一些代码示例来测试代码块的渲染：</p>
|
|
166
|
-
|
|
167
|
-
<div class="code-block">
|
|
168
|
-
<!DOCTYPE html>
|
|
169
|
-
<html>
|
|
170
|
-
<head>
|
|
171
|
-
<title>示例页面</title>
|
|
172
|
-
</head>
|
|
173
|
-
<body>
|
|
174
|
-
<h1>Hello World!</h1>
|
|
175
|
-
<p>这是一个简单的 HTML 示例。</p>
|
|
176
|
-
</body>
|
|
177
|
-
</html>
|
|
178
|
-
</div>
|
|
179
|
-
|
|
180
|
-
<div class="code-block">
|
|
181
|
-
// JavaScript 示例
|
|
182
|
-
function greet(name) {
|
|
183
|
-
return `Hello, ${name}!`;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
const message = greet('FViewer');
|
|
187
|
-
console.log(message); // 输出: Hello, FViewer!
|
|
188
|
-
</div>
|
|
189
|
-
|
|
190
|
-
<h2>🔗 交互元素</h2>
|
|
191
|
-
<p>测试按钮和链接的渲染效果：</p>
|
|
192
|
-
|
|
193
|
-
<a href="#" class="button">主要按钮</a>
|
|
194
|
-
<a href="#" class="button" style="background-color: #27ae60;">成功按钮</a>
|
|
195
|
-
<a href="#" class="button" style="background-color: #e74c3c;">危险按钮</a>
|
|
196
|
-
<a href="#" class="button" style="background-color: #f39c12;">警告按钮</a>
|
|
197
|
-
|
|
198
|
-
<h2>⚠️ 警告信息</h2>
|
|
199
|
-
<div class="alert alert-warning">
|
|
200
|
-
<strong>⚠️ 注意！</strong> 这是一个警告信息，用于测试不同类型的提示框渲染。
|
|
201
|
-
</div>
|
|
202
|
-
|
|
203
|
-
<div class="alert alert-error">
|
|
204
|
-
<strong>❌ 错误！</strong> 这是一个错误信息，用于测试错误提示框的渲染效果。
|
|
205
|
-
</div>
|
|
206
|
-
|
|
207
|
-
<h2>🎨 样式测试</h2>
|
|
208
|
-
<p>测试各种文本样式：</p>
|
|
209
|
-
<ul>
|
|
210
|
-
<li><em>斜体文本</em> - 测试斜体效果</li>
|
|
211
|
-
<li><strong>粗体文本</strong> - 测试粗体效果</li>
|
|
212
|
-
<li><u>下划线文本</u> - 测试下划线效果</li>
|
|
213
|
-
<li><s>删除线文本</s> - 测试删除线效果</li>
|
|
214
|
-
<li><span style="color: #e74c3c;">红色文本</span> - 测试颜色样式</li>
|
|
215
|
-
<li><span style="font-size: 18px;">大号文本</span> - 测试字体大小</li>
|
|
216
|
-
</ul>
|
|
217
|
-
|
|
218
|
-
<h2>📝 总结</h2>
|
|
219
|
-
<p>这个 HTML 测试页面包含了丰富的元素和样式，可以有效测试 FViewer 的 HTML 渲染能力。如果这个页面能够正确显示，说明 FViewer 的 HTML 渲染功能工作正常。</p>
|
|
220
|
-
|
|
221
|
-
<div class="alert alert-success">
|
|
222
|
-
<strong>🎉 恭喜！</strong> 如果你能看到这个页面完整显示，说明 FViewer 的 HTML 渲染功能已经成功实现！
|
|
223
|
-
</div>
|
|
224
|
-
</div>
|
|
225
|
-
</body>
|
|
226
|
-
</html>
|