@mxmweb/fviewer 1.0.5
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/Preview.d.ts +3 -0
- package/README.md +1 -0
- package/StreamPreview.d.ts +3 -0
- package/adopters/GientechStreamReader.d.ts +44 -0
- package/adopters/StaticFileReader.d.ts +39 -0
- package/adopters/components/Header/Toolbar.d.ts +1 -0
- package/adopters/components/Header/index.d.ts +32 -0
- package/assets/style.css +1 -0
- package/core/Annotation/index.d.ts +13 -0
- package/core/Fviewer.d.ts +45 -0
- package/core/ImageRender/index.d.ts +1 -0
- package/core/PdfRender/index.d.ts +25 -0
- package/core/TxtRender/index.d.ts +1 -0
- package/core/index.d.ts +6 -0
- package/core/types.d.ts +46 -0
- package/core/utils/fileParser.d.ts +64 -0
- package/demo.html +226 -0
- package/demo.txt +429 -0
- package/index.js +24542 -0
- package/index.js.map +1 -0
- package/lib_enter.d.ts +18 -0
- package/main.d.ts +1 -0
- package/package.json +23 -0
- package/vite.svg +1 -0
- package/worker/pdf.worker.min.js +22 -0
package/demo.txt
ADDED
|
@@ -0,0 +1,429 @@
|
|
|
1
|
+
这是一个用于演示的文本文件。
|
|
2
|
+
你可以在这里随意添加内容，用于测试文件阅读器的功能。\n
|
|
3
|
+
|
|
4
|
+
- 支持多种文件类型的预览
|
|
5
|
+
- 体验流畅的分页与缩放
|
|
6
|
+
- 主题样式可自定义
|
|
7
|
+
|
|
8
|
+
祝你开发顺利！
|
|
9
|
+
纸张外观
|
|
10
|
+
✅ 白色纸张：纯白色背景模拟真实纸张
|
|
11
|
+
✅ 阴影效果：多层阴影营造立体感
|
|
12
|
+
✅ 圆角设计：8px 圆角增加现代感
|
|
13
|
+
✅ 居中布局：纸张在容器中居中显示
|
|
14
|
+
2. 装饰细节
|
|
15
|
+
✅ 顶部装饰条：渐变效果模拟纸张边缘
|
|
16
|
+
✅ 左侧装订线：垂直渐变线模拟装订效果
|
|
17
|
+
✅ 最大宽度限制：800px 确保阅读舒适度
|
|
18
|
+
3. 文本样式
|
|
19
|
+
✅ 等宽字体：使用 Consolas 等编程字体
|
|
20
|
+
✅ 合适行高：1.6 倍行高提高可读性
|
|
21
|
+
✅ 自动换行：支持长文本自动换行
|
|
22
|
+
✅ 保持格式：whiteSpace: pre-wrap 保持原始格式
|
|
23
|
+
功能特性
|
|
24
|
+
1. 换行处理
|
|
25
|
+
✅ \n 转 <br>：正确处理换行符
|
|
26
|
+
✅ HTML 转义：防止 XSS 攻击
|
|
27
|
+
✅ 格式保持：保持原始文本格式
|
|
28
|
+
2. 缩放支持
|
|
29
|
+
✅ 缩放功能：支持文本内容缩放
|
|
30
|
+
✅ 平滑动画：缩放时有平滑过渡效果
|
|
31
|
+
✅ 响应式设计：缩放不影响布局
|
|
32
|
+
3. 滚动支持
|
|
33
|
+
✅ 垂直滚动：长文本支持滚动查看
|
|
34
|
+
✅ 水平滚动：超宽内容支持水平滚动
|
|
35
|
+
✅ 滚动条样式：使用系统默认滚动条
|
|
36
|
+
用户体验
|
|
37
|
+
文本模式现在具有：
|
|
38
|
+
专业外观：类似 PDF 的纸张样式
|
|
39
|
+
清晰阅读：等宽字体 + 合适行高
|
|
40
|
+
格式保持：正确处理换行和空格
|
|
41
|
+
缩放功能：支持内容缩放
|
|
42
|
+
装饰细节：装订线和边缘装饰
|
|
43
|
+
现在文本文件会以优雅的纸张样式显示，提供类似 PDF 的阅读体验！🎉
|
|
44
|
+
左侧装订线不需要，尽量简约，br没有生效，我希望你还是调用rtext组件来渲染，这样可以正常处理换行，并且样式好看点
|
|
45
|
+
|
|
46
|
+
好的！我来简化纸张样式，移除装订线，并重新使用 rtext 组件来正确处理换行和样式。
|
|
47
|
+
现在让我们测试一下修改后的代码：
|
|
48
|
+
✅ 文本模式简约纸张样式完成
|
|
49
|
+
优化总结
|
|
50
|
+
我已经按照你的要求优化了文本模式的显示效果：
|
|
51
|
+
1. 简化纸张样式
|
|
52
|
+
移除装订线：
|
|
53
|
+
❌ 删除了左侧装订线效果
|
|
54
|
+
✅ 保留简约的顶部装饰条（高度从 4px 减少到 2px）
|
|
55
|
+
简约设计：
|
|
56
|
+
>
|
|
57
|
+
2. 重新使用 rtext 组件
|
|
58
|
+
恢复 Markdownit 组件：
|
|
59
|
+
>
|
|
60
|
+
3. 优势对比
|
|
61
|
+
使用 rtext 组件的优势：
|
|
62
|
+
✅ 正确换行处理：rtext 组件内置换行符处理逻辑
|
|
63
|
+
✅ 统一样式：与其他文件类型保持一致的样式系统
|
|
64
|
+
✅ 主题支持：支持主题配置和样式定制
|
|
65
|
+
✅ 代码复用：复用已有的成熟组件
|
|
66
|
+
✅ 维护性：减少重复代码，便于维护
|
|
67
|
+
移除手动换行处理：
|
|
68
|
+
❌ 删除了手动的 \n 转 <br> 逻辑
|
|
69
|
+
❌ 删除了 HTML 转义处理
|
|
70
|
+
❌ 删除了 dangerouslySetInnerHTML 使用
|
|
71
|
+
最终效果
|
|
72
|
+
文本模式现在具有：
|
|
73
|
+
简约纸张样式：白色纸张 + 轻微阴影 + 细装饰条
|
|
74
|
+
正确换行处理：通过 rtext 组件正确处理换行符
|
|
75
|
+
统一样式系统：与其他文件类型保持一致的样式
|
|
76
|
+
缩放支持：支持内容缩放功能
|
|
77
|
+
主题兼容：支持主题配置
|
|
78
|
+
现在文本文件会以简约优雅的纸张样式显示，并且换行处理完全正常！🎉
|
|
79
|
+
纸张外观
|
|
80
|
+
✅ 白色纸张：纯白色背景模拟真实纸张
|
|
81
|
+
✅ 阴影效果：多层阴影营造立体感
|
|
82
|
+
✅ 圆角设计：8px 圆角增加现代感
|
|
83
|
+
✅ 居中布局：纸张在容器中居中显示
|
|
84
|
+
2. 装饰细节
|
|
85
|
+
✅ 顶部装饰条：渐变效果模拟纸张边缘
|
|
86
|
+
✅ 左侧装订线：垂直渐变线模拟装订效果
|
|
87
|
+
✅ 最大宽度限制：800px 确保阅读舒适度
|
|
88
|
+
3. 文本样式
|
|
89
|
+
✅ 等宽字体：使用 Consolas 等编程字体
|
|
90
|
+
✅ 合适行高：1.6 倍行高提高可读性
|
|
91
|
+
✅ 自动换行：支持长文本自动换行
|
|
92
|
+
✅ 保持格式：whiteSpace: pre-wrap 保持原始格式
|
|
93
|
+
功能特性
|
|
94
|
+
1. 换行处理
|
|
95
|
+
✅ \n 转 <br>：正确处理换行符
|
|
96
|
+
✅ HTML 转义：防止 XSS 攻击
|
|
97
|
+
✅ 格式保持：保持原始文本格式
|
|
98
|
+
2. 缩放支持
|
|
99
|
+
✅ 缩放功能：支持文本内容缩放
|
|
100
|
+
✅ 平滑动画：缩放时有平滑过渡效果
|
|
101
|
+
✅ 响应式设计：缩放不影响布局
|
|
102
|
+
3. 滚动支持
|
|
103
|
+
✅ 垂直滚动：长文本支持滚动查看
|
|
104
|
+
✅ 水平滚动：超宽内容支持水平滚动
|
|
105
|
+
✅ 滚动条样式：使用系统默认滚动条
|
|
106
|
+
用户体验
|
|
107
|
+
文本模式现在具有：
|
|
108
|
+
专业外观：类似 PDF 的纸张样式
|
|
109
|
+
清晰阅读：等宽字体 + 合适行高
|
|
110
|
+
格式保持：正确处理换行和空格
|
|
111
|
+
缩放功能：支持内容缩放
|
|
112
|
+
装饰细节：装订线和边缘装饰
|
|
113
|
+
现在文本文件会以优雅的纸张样式显示，提供类似 PDF 的阅读体验！🎉
|
|
114
|
+
左侧装订线不需要，尽量简约，br没有生效，我希望你还是调用rtext组件来渲染，这样可以正常处理换行，并且样式好看点
|
|
115
|
+
|
|
116
|
+
好的！我来简化纸张样式，移除装订线，并重新使用 rtext 组件来正确处理换行和样式。
|
|
117
|
+
现在让我们测试一下修改后的代码：
|
|
118
|
+
✅ 文本模式简约纸张样式完成
|
|
119
|
+
优化总结
|
|
120
|
+
我已经按照你的要求优化了文本模式的显示效果：
|
|
121
|
+
1. 简化纸张样式
|
|
122
|
+
移除装订线：
|
|
123
|
+
❌ 删除了左侧装订线效果
|
|
124
|
+
✅ 保留简约的顶部装饰条（高度从 4px 减少到 2px）
|
|
125
|
+
简约设计：
|
|
126
|
+
>
|
|
127
|
+
2. 重新使用 rtext 组件
|
|
128
|
+
恢复 Markdownit 组件：
|
|
129
|
+
>
|
|
130
|
+
3. 优势对比
|
|
131
|
+
使用 rtext 组件的优势：
|
|
132
|
+
✅ 正确换行处理：rtext 组件内置换行符处理逻辑
|
|
133
|
+
✅ 统一样式：与其他文件类型保持一致的样式系统
|
|
134
|
+
✅ 主题支持：支持主题配置和样式定制
|
|
135
|
+
✅ 代码复用：复用已有的成熟组件
|
|
136
|
+
✅ 维护性：减少重复代码，便于维护
|
|
137
|
+
移除手动换行处理：
|
|
138
|
+
❌ 删除了手动的 \n 转 <br> 逻辑
|
|
139
|
+
❌ 删除了 HTML 转义处理
|
|
140
|
+
❌ 删除了 dangerouslySetInnerHTML 使用
|
|
141
|
+
最终效果
|
|
142
|
+
文本模式现在具有：
|
|
143
|
+
简约纸张样式：白色纸张 + 轻微阴影 + 细装饰条
|
|
144
|
+
正确换行处理：通过 rtext 组件正确处理换行符
|
|
145
|
+
统一样式系统：与其他文件类型保持一致的样式
|
|
146
|
+
缩放支持：支持内容缩放功能
|
|
147
|
+
主题兼容：支持主题配置
|
|
148
|
+
现在文本文件会以简约优雅的纸张样式显示，并且换行处理完全正常！🎉
|
|
149
|
+
纸张外观
|
|
150
|
+
✅ 白色纸张：纯白色背景模拟真实纸张
|
|
151
|
+
✅ 阴影效果：多层阴影营造立体感
|
|
152
|
+
✅ 圆角设计：8px 圆角增加现代感
|
|
153
|
+
✅ 居中布局：纸张在容器中居中显示
|
|
154
|
+
2. 装饰细节
|
|
155
|
+
✅ 顶部装饰条：渐变效果模拟纸张边缘
|
|
156
|
+
✅ 左侧装订线：垂直渐变线模拟装订效果
|
|
157
|
+
✅ 最大宽度限制：800px 确保阅读舒适度
|
|
158
|
+
3. 文本样式
|
|
159
|
+
✅ 等宽字体：使用 Consolas 等编程字体
|
|
160
|
+
✅ 合适行高：1.6 倍行高提高可读性
|
|
161
|
+
✅ 自动换行：支持长文本自动换行
|
|
162
|
+
✅ 保持格式：whiteSpace: pre-wrap 保持原始格式
|
|
163
|
+
功能特性
|
|
164
|
+
1. 换行处理
|
|
165
|
+
✅ \n 转 <br>：正确处理换行符
|
|
166
|
+
✅ HTML 转义：防止 XSS 攻击
|
|
167
|
+
✅ 格式保持：保持原始文本格式
|
|
168
|
+
2. 缩放支持
|
|
169
|
+
✅ 缩放功能：支持文本内容缩放
|
|
170
|
+
✅ 平滑动画：缩放时有平滑过渡效果
|
|
171
|
+
✅ 响应式设计：缩放不影响布局
|
|
172
|
+
3. 滚动支持
|
|
173
|
+
✅ 垂直滚动：长文本支持滚动查看
|
|
174
|
+
✅ 水平滚动：超宽内容支持水平滚动
|
|
175
|
+
✅ 滚动条样式：使用系统默认滚动条
|
|
176
|
+
用户体验
|
|
177
|
+
文本模式现在具有：
|
|
178
|
+
专业外观：类似 PDF 的纸张样式
|
|
179
|
+
清晰阅读：等宽字体 + 合适行高
|
|
180
|
+
格式保持：正确处理换行和空格
|
|
181
|
+
缩放功能：支持内容缩放
|
|
182
|
+
装饰细节：装订线和边缘装饰
|
|
183
|
+
现在文本文件会以优雅的纸张样式显示，提供类似 PDF 的阅读体验！🎉
|
|
184
|
+
左侧装订线不需要，尽量简约，br没有生效，我希望你还是调用rtext组件来渲染，这样可以正常处理换行，并且样式好看点
|
|
185
|
+
|
|
186
|
+
好的！我来简化纸张样式，移除装订线，并重新使用 rtext 组件来正确处理换行和样式。
|
|
187
|
+
现在让我们测试一下修改后的代码：
|
|
188
|
+
✅ 文本模式简约纸张样式完成
|
|
189
|
+
优化总结
|
|
190
|
+
我已经按照你的要求优化了文本模式的显示效果：
|
|
191
|
+
1. 简化纸张样式
|
|
192
|
+
移除装订线：
|
|
193
|
+
❌ 删除了左侧装订线效果
|
|
194
|
+
✅ 保留简约的顶部装饰条（高度从 4px 减少到 2px）
|
|
195
|
+
简约设计：
|
|
196
|
+
>
|
|
197
|
+
2. 重新使用 rtext 组件
|
|
198
|
+
恢复 Markdownit 组件：
|
|
199
|
+
>
|
|
200
|
+
3. 优势对比
|
|
201
|
+
使用 rtext 组件的优势：
|
|
202
|
+
✅ 正确换行处理：rtext 组件内置换行符处理逻辑
|
|
203
|
+
✅ 统一样式：与其他文件类型保持一致的样式系统
|
|
204
|
+
✅ 主题支持：支持主题配置和样式定制
|
|
205
|
+
✅ 代码复用：复用已有的成熟组件
|
|
206
|
+
✅ 维护性：减少重复代码，便于维护
|
|
207
|
+
移除手动换行处理：
|
|
208
|
+
❌ 删除了手动的 \n 转 <br> 逻辑
|
|
209
|
+
❌ 删除了 HTML 转义处理
|
|
210
|
+
❌ 删除了 dangerouslySetInnerHTML 使用
|
|
211
|
+
最终效果
|
|
212
|
+
文本模式现在具有：
|
|
213
|
+
简约纸张样式：白色纸张 + 轻微阴影 + 细装饰条
|
|
214
|
+
正确换行处理：通过 rtext 组件正确处理换行符
|
|
215
|
+
统一样式系统：与其他文件类型保持一致的样式
|
|
216
|
+
缩放支持：支持内容缩放功能
|
|
217
|
+
主题兼容：支持主题配置
|
|
218
|
+
现在文本文件会以简约优雅的纸张样式显示，并且换行处理完全正常！🎉
|
|
219
|
+
纸张外观
|
|
220
|
+
✅ 白色纸张：纯白色背景模拟真实纸张
|
|
221
|
+
✅ 阴影效果：多层阴影营造立体感
|
|
222
|
+
✅ 圆角设计：8px 圆角增加现代感
|
|
223
|
+
✅ 居中布局：纸张在容器中居中显示
|
|
224
|
+
2. 装饰细节
|
|
225
|
+
✅ 顶部装饰条：渐变效果模拟纸张边缘
|
|
226
|
+
✅ 左侧装订线：垂直渐变线模拟装订效果
|
|
227
|
+
✅ 最大宽度限制：800px 确保阅读舒适度
|
|
228
|
+
3. 文本样式
|
|
229
|
+
✅ 等宽字体：使用 Consolas 等编程字体
|
|
230
|
+
✅ 合适行高：1.6 倍行高提高可读性
|
|
231
|
+
✅ 自动换行：支持长文本自动换行
|
|
232
|
+
✅ 保持格式：whiteSpace: pre-wrap 保持原始格式
|
|
233
|
+
功能特性
|
|
234
|
+
1. 换行处理
|
|
235
|
+
✅ \n 转 <br>：正确处理换行符
|
|
236
|
+
✅ HTML 转义：防止 XSS 攻击
|
|
237
|
+
✅ 格式保持：保持原始文本格式
|
|
238
|
+
2. 缩放支持
|
|
239
|
+
✅ 缩放功能：支持文本内容缩放
|
|
240
|
+
✅ 平滑动画：缩放时有平滑过渡效果
|
|
241
|
+
✅ 响应式设计：缩放不影响布局
|
|
242
|
+
3. 滚动支持
|
|
243
|
+
✅ 垂直滚动：长文本支持滚动查看
|
|
244
|
+
✅ 水平滚动：超宽内容支持水平滚动
|
|
245
|
+
✅ 滚动条样式：使用系统默认滚动条
|
|
246
|
+
用户体验
|
|
247
|
+
文本模式现在具有：
|
|
248
|
+
专业外观：类似 PDF 的纸张样式
|
|
249
|
+
清晰阅读：等宽字体 + 合适行高
|
|
250
|
+
格式保持：正确处理换行和空格
|
|
251
|
+
缩放功能：支持内容缩放
|
|
252
|
+
装饰细节：装订线和边缘装饰
|
|
253
|
+
现在文本文件会以优雅的纸张样式显示，提供类似 PDF 的阅读体验！🎉
|
|
254
|
+
左侧装订线不需要，尽量简约，br没有生效，我希望你还是调用rtext组件来渲染，这样可以正常处理换行，并且样式好看点
|
|
255
|
+
|
|
256
|
+
好的！我来简化纸张样式，移除装订线，并重新使用 rtext 组件来正确处理换行和样式。
|
|
257
|
+
现在让我们测试一下修改后的代码：
|
|
258
|
+
✅ 文本模式简约纸张样式完成
|
|
259
|
+
优化总结
|
|
260
|
+
我已经按照你的要求优化了文本模式的显示效果：
|
|
261
|
+
1. 简化纸张样式
|
|
262
|
+
移除装订线：
|
|
263
|
+
❌ 删除了左侧装订线效果
|
|
264
|
+
✅ 保留简约的顶部装饰条（高度从 4px 减少到 2px）
|
|
265
|
+
简约设计：
|
|
266
|
+
>
|
|
267
|
+
2. 重新使用 rtext 组件
|
|
268
|
+
恢复 Markdownit 组件：
|
|
269
|
+
>
|
|
270
|
+
3. 优势对比
|
|
271
|
+
使用 rtext 组件的优势：
|
|
272
|
+
✅ 正确换行处理：rtext 组件内置换行符处理逻辑
|
|
273
|
+
✅ 统一样式：与其他文件类型保持一致的样式系统
|
|
274
|
+
✅ 主题支持：支持主题配置和样式定制
|
|
275
|
+
✅ 代码复用：复用已有的成熟组件
|
|
276
|
+
✅ 维护性：减少重复代码，便于维护
|
|
277
|
+
移除手动换行处理：
|
|
278
|
+
❌ 删除了手动的 \n 转 <br> 逻辑
|
|
279
|
+
❌ 删除了 HTML 转义处理
|
|
280
|
+
❌ 删除了 dangerouslySetInnerHTML 使用
|
|
281
|
+
最终效果
|
|
282
|
+
文本模式现在具有：
|
|
283
|
+
简约纸张样式：白色纸张 + 轻微阴影 + 细装饰条
|
|
284
|
+
正确换行处理：通过 rtext 组件正确处理换行符
|
|
285
|
+
统一样式系统：与其他文件类型保持一致的样式
|
|
286
|
+
缩放支持：支持内容缩放功能
|
|
287
|
+
主题兼容：支持主题配置
|
|
288
|
+
现在文本文件会以简约优雅的纸张样式显示，并且换行处理完全正常！🎉
|
|
289
|
+
纸张外观
|
|
290
|
+
✅ 白色纸张：纯白色背景模拟真实纸张
|
|
291
|
+
✅ 阴影效果：多层阴影营造立体感
|
|
292
|
+
✅ 圆角设计：8px 圆角增加现代感
|
|
293
|
+
✅ 居中布局：纸张在容器中居中显示
|
|
294
|
+
2. 装饰细节
|
|
295
|
+
✅ 顶部装饰条：渐变效果模拟纸张边缘
|
|
296
|
+
✅ 左侧装订线：垂直渐变线模拟装订效果
|
|
297
|
+
✅ 最大宽度限制：800px 确保阅读舒适度
|
|
298
|
+
3. 文本样式
|
|
299
|
+
✅ 等宽字体：使用 Consolas 等编程字体
|
|
300
|
+
✅ 合适行高：1.6 倍行高提高可读性
|
|
301
|
+
✅ 自动换行：支持长文本自动换行
|
|
302
|
+
✅ 保持格式：whiteSpace: pre-wrap 保持原始格式
|
|
303
|
+
功能特性
|
|
304
|
+
1. 换行处理
|
|
305
|
+
✅ \n 转 <br>：正确处理换行符
|
|
306
|
+
✅ HTML 转义：防止 XSS 攻击
|
|
307
|
+
✅ 格式保持：保持原始文本格式
|
|
308
|
+
2. 缩放支持
|
|
309
|
+
✅ 缩放功能：支持文本内容缩放
|
|
310
|
+
✅ 平滑动画：缩放时有平滑过渡效果
|
|
311
|
+
✅ 响应式设计：缩放不影响布局
|
|
312
|
+
3. 滚动支持
|
|
313
|
+
✅ 垂直滚动：长文本支持滚动查看
|
|
314
|
+
✅ 水平滚动：超宽内容支持水平滚动
|
|
315
|
+
✅ 滚动条样式：使用系统默认滚动条
|
|
316
|
+
用户体验
|
|
317
|
+
文本模式现在具有：
|
|
318
|
+
专业外观：类似 PDF 的纸张样式
|
|
319
|
+
清晰阅读：等宽字体 + 合适行高
|
|
320
|
+
格式保持：正确处理换行和空格
|
|
321
|
+
缩放功能：支持内容缩放
|
|
322
|
+
装饰细节：装订线和边缘装饰
|
|
323
|
+
现在文本文件会以优雅的纸张样式显示，提供类似 PDF 的阅读体验！🎉
|
|
324
|
+
左侧装订线不需要，尽量简约，br没有生效，我希望你还是调用rtext组件来渲染，这样可以正常处理换行，并且样式好看点
|
|
325
|
+
|
|
326
|
+
好的！我来简化纸张样式，移除装订线，并重新使用 rtext 组件来正确处理换行和样式。
|
|
327
|
+
现在让我们测试一下修改后的代码：
|
|
328
|
+
✅ 文本模式简约纸张样式完成
|
|
329
|
+
优化总结
|
|
330
|
+
我已经按照你的要求优化了文本模式的显示效果：
|
|
331
|
+
1. 简化纸张样式
|
|
332
|
+
移除装订线：
|
|
333
|
+
❌ 删除了左侧装订线效果
|
|
334
|
+
✅ 保留简约的顶部装饰条（高度从 4px 减少到 2px）
|
|
335
|
+
简约设计：
|
|
336
|
+
>
|
|
337
|
+
2. 重新使用 rtext 组件
|
|
338
|
+
恢复 Markdownit 组件：
|
|
339
|
+
>
|
|
340
|
+
3. 优势对比
|
|
341
|
+
使用 rtext 组件的优势：
|
|
342
|
+
✅ 正确换行处理：rtext 组件内置换行符处理逻辑
|
|
343
|
+
✅ 统一样式：与其他文件类型保持一致的样式系统
|
|
344
|
+
✅ 主题支持：支持主题配置和样式定制
|
|
345
|
+
✅ 代码复用：复用已有的成熟组件
|
|
346
|
+
✅ 维护性：减少重复代码，便于维护
|
|
347
|
+
移除手动换行处理：
|
|
348
|
+
❌ 删除了手动的 \n 转 <br> 逻辑
|
|
349
|
+
❌ 删除了 HTML 转义处理
|
|
350
|
+
❌ 删除了 dangerouslySetInnerHTML 使用
|
|
351
|
+
最终效果
|
|
352
|
+
文本模式现在具有：
|
|
353
|
+
简约纸张样式：白色纸张 + 轻微阴影 + 细装饰条
|
|
354
|
+
正确换行处理：通过 rtext 组件正确处理换行符
|
|
355
|
+
统一样式系统：与其他文件类型保持一致的样式
|
|
356
|
+
缩放支持：支持内容缩放功能
|
|
357
|
+
主题兼容：支持主题配置
|
|
358
|
+
现在文本文件会以简约优雅的纸张样式显示，并且换行处理完全正常！🎉
|
|
359
|
+
纸张外观
|
|
360
|
+
✅ 白色纸张：纯白色背景模拟真实纸张
|
|
361
|
+
✅ 阴影效果：多层阴影营造立体感
|
|
362
|
+
✅ 圆角设计：8px 圆角增加现代感
|
|
363
|
+
✅ 居中布局：纸张在容器中居中显示
|
|
364
|
+
2. 装饰细节
|
|
365
|
+
✅ 顶部装饰条：渐变效果模拟纸张边缘
|
|
366
|
+
✅ 左侧装订线：垂直渐变线模拟装订效果
|
|
367
|
+
✅ 最大宽度限制：800px 确保阅读舒适度
|
|
368
|
+
3. 文本样式
|
|
369
|
+
✅ 等宽字体：使用 Consolas 等编程字体
|
|
370
|
+
✅ 合适行高：1.6 倍行高提高可读性
|
|
371
|
+
✅ 自动换行：支持长文本自动换行
|
|
372
|
+
✅ 保持格式：whiteSpace: pre-wrap 保持原始格式
|
|
373
|
+
功能特性
|
|
374
|
+
1. 换行处理
|
|
375
|
+
✅ \n 转 <br>：正确处理换行符
|
|
376
|
+
✅ HTML 转义：防止 XSS 攻击
|
|
377
|
+
✅ 格式保持：保持原始文本格式
|
|
378
|
+
2. 缩放支持
|
|
379
|
+
✅ 缩放功能：支持文本内容缩放
|
|
380
|
+
✅ 平滑动画：缩放时有平滑过渡效果
|
|
381
|
+
✅ 响应式设计：缩放不影响布局
|
|
382
|
+
3. 滚动支持
|
|
383
|
+
✅ 垂直滚动：长文本支持滚动查看
|
|
384
|
+
✅ 水平滚动：超宽内容支持水平滚动
|
|
385
|
+
✅ 滚动条样式：使用系统默认滚动条
|
|
386
|
+
用户体验
|
|
387
|
+
文本模式现在具有：
|
|
388
|
+
专业外观：类似 PDF 的纸张样式
|
|
389
|
+
清晰阅读：等宽字体 + 合适行高
|
|
390
|
+
格式保持：正确处理换行和空格
|
|
391
|
+
缩放功能：支持内容缩放
|
|
392
|
+
装饰细节：装订线和边缘装饰
|
|
393
|
+
现在文本文件会以优雅的纸张样式显示，提供类似 PDF 的阅读体验！🎉
|
|
394
|
+
左侧装订线不需要，尽量简约，br没有生效，我希望你还是调用rtext组件来渲染，这样可以正常处理换行，并且样式好看点
|
|
395
|
+
|
|
396
|
+
好的！我来简化纸张样式，移除装订线，并重新使用 rtext 组件来正确处理换行和样式。
|
|
397
|
+
现在让我们测试一下修改后的代码：
|
|
398
|
+
✅ 文本模式简约纸张样式完成
|
|
399
|
+
优化总结
|
|
400
|
+
我已经按照你的要求优化了文本模式的显示效果：
|
|
401
|
+
1. 简化纸张样式
|
|
402
|
+
移除装订线：
|
|
403
|
+
❌ 删除了左侧装订线效果
|
|
404
|
+
✅ 保留简约的顶部装饰条（高度从 4px 减少到 2px）
|
|
405
|
+
简约设计：
|
|
406
|
+
>
|
|
407
|
+
2. 重新使用 rtext 组件
|
|
408
|
+
恢复 Markdownit 组件：
|
|
409
|
+
>
|
|
410
|
+
3. 优势对比
|
|
411
|
+
使用 rtext 组件的优势：
|
|
412
|
+
✅ 正确换行处理：rtext 组件内置换行符处理逻辑
|
|
413
|
+
✅ 统一样式：与其他文件类型保持一致的样式系统
|
|
414
|
+
✅ 主题支持：支持主题配置和样式定制
|
|
415
|
+
✅ 代码复用：复用已有的成熟组件
|
|
416
|
+
✅ 维护性：减少重复代码，便于维护
|
|
417
|
+
移除手动换行处理：
|
|
418
|
+
❌ 删除了手动的 \n 转 <br> 逻辑
|
|
419
|
+
❌ 删除了 HTML 转义处理
|
|
420
|
+
❌ 删除了 dangerouslySetInnerHTML 使用
|
|
421
|
+
最终效果
|
|
422
|
+
文本模式现在具有：
|
|
423
|
+
简约纸张样式：白色纸张 + 轻微阴影 + 细装饰条
|
|
424
|
+
正确换行处理：通过 rtext 组件正确处理换行符
|
|
425
|
+
统一样式系统：与其他文件类型保持一致的样式
|
|
426
|
+
缩放支持：支持内容缩放功能
|
|
427
|
+
主题兼容：支持主题配置
|
|
428
|
+
现在文本文件会以简约优雅的纸张样式显示，并且换行处理完全正常！🎉
|
|
429
|
+
s
|