Preview - 修改MDX CSS的神器，支持CSSJS实时预览...
本帖最后由 last_idol 于 2020-4-9 13:26 编辑现在修改词典CSSJS，通常有两种方式:
[*]用Goldendict加载词典，直接在GD的网页上边修改边预览效果。
[*]从词典里先提取一部份词条的页面，再在Chrome浏览器里修改。
这两种方式，都有些问题，在GD里修改少量还行，改动多了就很不直观，尤其是JS这种要反复加载的，而且Goldendict的浏览器内核是老版本的webkit，自带的开发工具不支持高清屏也不支持手机预览。第二种方式通常是高手在用了，但需要在多个词条页面检查显示效果的时候，也很麻烦，也不支持读取MDD里文件。
Preview是一款面向MDX词典前端的开发工具，很好的解决了上述问题，支持加载MDD资源文件，同时监听对应的CSSJS文件，用文本编辑器修改保存CSS后，会实时更新浏览器里的页面，不再需要手动刷新浏览器，并且支持词头查询，允许跳转任意词头，预览对比检查CSS。
欢迎大家尝试，提错或者新的需求。
简单说明：
[*]支持词头查询(2ms)，支持拼写提示，在网页上使用ALT+F打开输入框，ESCAPE取消。
[*]支持页面词条链接跳转，支持MDD图片音频加载。
[*]监听词典同目录下JSCSS文件，修改文件，实时同步预览显示效果(200ms)。
[*]加载词典后生成的索引没有写文件，所以内存占用大概10万词头5M的样子。
[*]支持多客户端同步显示搜索结果，允许在PC上修改CSS，手机上同步刷新，方便调试。
[*]推荐使用文本编辑器，比如SublimeText，NotePad++或者VSCode打开CSS文件修改。
[*]不支持IE浏览器。
问题汇总：
[*]如果启动exe程序失败或者超时，检查3030端口占用。
[*]不支持程序多开，共用的是同一个后台。
[*]暂不支持32位系统，等功能稳定下来会发版。
[*]已通过WIN10 Defender，360杀毒和火绒手动查杀无毒。
[*]后续发版会先通过VIRSCAN.ORG在线查毒。
检查端口占用的命令：
netstat -ano|findstr "3030"
// TCP 127.0.0.1:3030 0.0.0.0:0 LISTENING 1848
taskkill -PID 1848 -F
// SUCCESS: The process with PID 1848 has been terminated.
更新日志：
- 2020-04-09
[*]增加随机读取词头功能，除第一次加载词典会显示启动信息页面，每次刷新页面都会加载新的词头。感谢@huala的反馈！
[*]增加词头跳转功能，支持@@@LINK跳转，有些词典超过一半词头都是跳转。感谢@atauzki的反馈！
[*]修复部份PNG读取失败问题，测试了16万+文件，特别是阿彌陀佛的图片词典，现在所有图片都能正常读取。感谢@nonwill的帮助!
[*]已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[报告链接]
- 2020-04-04
[*]现在搜索框会始终置顶，除非使用ESCAPE主动取消。感谢@喬治兄@huala的反馈!
[*]修复部份PNG读取失败导致的程序崩溃问题，目前只在纯PNG的图片版词典中发现有此问题，还没找到原因，发现GD和readmdict.py也无法处理，而MDict能正常读取此类文件。（已找到原因，下版本会解决）
[*]已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[报告链接]
- 2020-04-02
[*]现在会禁止浏览器从缓存中读取本地文件，已经缓存的需要先清空一次。感谢@Word@huala@eplono的反馈!
[*]压缩索引，现在每10万词头占用从10M -> 5M内存，索引时间从70ms -> 85ms。考虑提供选项继续压缩到1.5M内存，索引时间会提高到380ms。
[*]已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[报告链接]
- 2020-04-01
[*]修复当文件名包含中文时CSS无法实时刷新的问题。感谢@Word的反馈!
[*]修复MAC 10.15版本缺少依赖库的问题。感谢@huala的反馈!
[*]已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[报告链接]
- 2020-03-31
[*]修复当文件名包含空格时CSS无法实时刷新的问题。感谢@Word的反馈!
[*]已通过VIRSCAN.ORG在线查毒，全部49个引擎未发现危险,文件安全。[报告链接]
- 2020-03-30
[*]现在读取词典内外的JSCSS等文件时会忽略大小写。感谢@Word的反馈!
[*]修复当URL路径包含空格时会读取不到文件的问题。感谢@Word的反馈!
- 2020-03-30
[*]解决WIN7 DPI>125%时界面错位问题。感谢@喬治兄的反馈!
- 2020-03-29
[*]支持多客户端同步搜索结果，支持在PC查词或修改CSS，在手机端同步显示结果。
[*]发布WIN和MAC双版本。
- 2020-03-28
[*]诞生
下载地址：
Preview-0.1.8-x86_64-pc-windows-msvc.zipPreview-0.1.8-x86_64-apple-darwin.zip
部份截图：
https://i.loli.net/2020/03/29/OIZpNRnwFg5fV72.png
https://i.loli.net/2020/03/29/X9Y4WmF2bJiMyDd.png
https://i.loli.net/2020/03/29/xSTPQUHvolw8Fq7.png
https://i.loli.net/2020/03/29/dF93nXeBAawYZHW.png
https://i.loli.net/2020/03/29/pgKeJvsILW7D5jz.png
last_idol 兄:
不錯的想法應會蠻實用的
但下載有困難
只能下 part1
可否提供其他下載管道
Thanks a lot 本帖最后由 喬治兄 于 2020-4-2 02:22 编辑
last_idol 兄:
小弟用了後深感蠻強大若再強化一些功能則應用無窮, 另外列舉些許看法
不知仁兄是否可以考慮增加其功能
1. 此軟件可調用 mdx 於 ie, chrom ....瀏覽器
Alt+F....輸入詞彙可查詢, 但因其內容若要再查則需再按Alt+F....輸入詞彙
此可否設計個雙擊就可跳至要查詢的單字畫面, 或設計個按右鍵查詢那個 highlight 的單字
且在生成另一網頁...此則可所查詢過的單詞都有個頁面隨時可在 review 一下
此非常適於上網查單字用 mdx 檔
2. 目前需按Alt+F....才會跳出查詢框...按Alt+F----> 也是多餘的
其實可以一直保留此查詢框在瀏覽器畫面上...想查什隨時輸入
3. 設計個 history txt...也就是讓查詢過的單詞都紀錄於此文檔
此文檔也可於 Mdict 匯入複習用
4. 其實可以考慮其 PC Mdict 目前的功能....其轉換至 ie, chrom....瀏覽器 版本
5. 可以再針對目前顯示再規劃一下
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_frameborder
<frameset cols="10%,90%">
<frame src="frame_a.htm" frameborder="0">
<frame src="frame_b.htm" frameborder="0">
</frameset>
</html>
或用 flex 功能也可
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_flex
https://www.pdawiki.com/forum/thread-39082-1-1.html
如同網頁版的 pc mdict {:4_105:}
可一直保留此查詢框
https://i.loli.net/2020/04/02/kfmh3eTcUORLiXp.png
此可考慮雙擊, 或按右鍵再查詢...查詢結果再生成另一頁面
https://i.loli.net/2020/04/02/wH4je9fUgZTKXDW.png
本帖最后由 Word 于 2020-3-30 11:28 编辑
这个小工具很不错！修改样式更方便了
在对 Preview v0.1.1 的测试中，遇到了很多词典样式修改无效的问题，反馈如下
一、MDX 词库中指定了引用的 CSS 文件的名称，目前 Preview 读取 CSS 文件时，对名称的要求与词典不同
1. Preview 要求 CSS 文件的名称（包括大小写）必须与指定名称严格相同，但词典的读取方式却是宽松的，导致名称相同但大小写不同的 CSS 文件无法正确读取，因此建议读取 CSS 文件时支持名称不区分大小写
2. Preview 目前似乎不支持读取带有空格的 CSS 文件名称，导致原始 CSS 也无法正确读取，其他特殊字符尚未测试
二、在 CSS 文件能够被正确读取和刷新的情况下，使用 Preview 首次打开一个 MDX 词库后，似乎并未刷新外部 CSS 文件，无论该 CSS 文件在之前是否修改过，导致必须在打开词库后，至少再修改一次 CSS 文件才能显示出实际样式效果。因此建议首次打开词库后进行一次 CSS 文件的刷新，以反应出实际样式效果
对 JS 文件的读取尚未测试，可能也存在以上相似的问题
{:11_379:}好东西，分先给你 本帖最后由 喬治兄 于 2020-3-30 01:48 编辑
last_idol 兄:
謝謝分享, 剛試...效果相當好
只是 preview 本身畫面打開後一直調不出 Browse.... 完整按鈕的視窗
拉動視窗無效, 但點擊 Browse.... 那一小塊不完整區域是可以執行的
不知是否和電腦的解析度是否有關係....
Thanks again
https://i.loli.net/2020/03/30/kXMO5Fi1HZYwybQ.png
本帖最后由 last_idol 于 2020-3-30 10:15 编辑
喬治兄 发表于 2020-3-30 01:38
last_idol 兄:
謝謝分享, 剛試...效果相當好
只是 preview 本身畫面打開後一直調不出 Browse.... 完整按鈕 ...
程序界面是自绘的。错位的话就是DPI的问题，不知道你的是哪个系统。
WIN7测试了下只有DPI默认100%是正常的界面，125%，150%会出现这种情况。
WIN8有兼容模式了，允许对程序单独设置DPI，不会有问题。
WIN10所有DPI都能正常显示。
0.1.2版 已解决，完美兼容WIN7。
谢谢分享，下载试试看 本帖最后由 喬治兄 于 2020-3-30 09:18 编辑
last_idol 发表于 2020-3-30 07:25
程序界面是自绘的。错位的话就是DPI的问题，不知道你的是哪个系统。
WIN7测试了下只有DPI默认100%是正常 ...
ast_idol 兄:
是繁體 WIN7 1920 x 1280
分別調整了幾個不同的解析度
狀況一樣
{:4_102:}
Thanks a lot
小工具很棒哈，对于我这种小白自己边百度边修改排版也方便，很赞 本帖最后由 last_idol 于 2020-3-30 10:15 编辑
喬治兄 发表于 2020-3-30 08:34
ast_idol 兄:
是繁體 WIN7 1920 x 1280
分別調整了幾個不同的解析度
0.1.2版 已解决，完美兼容WIN7。 last_idol 发表于 2020-3-30 10:09
看到个简单的解决方案，应该能解决，晚点我会再发一版。
感謝 last_idol 兄再度傷腦筋來完善 " MDX词典前端开发工具 "
Thanks again
{:4_105:} Word 发表于 2020-3-30 11:14
这个小工具很不错！修改样式更方便了
在对 Preview v0.1.1 的测试中，遇到了很多词典样式修改无效的问题， ...
v0.1.3版空格和大小写问题都解决了。第二个问题从软件的角度来说，每个CSS请求返回的都是最新的CSS文件。如果显示的不是最新的样式，可能是浏览器缓存的原因，需要手动关掉。
感谢反馈！
chrome developer tools->network->disable cache
Preview 首次打开 MDX 词库却没有刷新对应的 CSS 文件里的样式的问题，已经确认是浏览器缓存导致的，Chrome 浏览器的开发者工具里面那个 Disable Cache 只在开发者工具窗口打开时才有效，所以无法固定使用。只要清空浏览器缓存数据，就一切正常了
经测试 Preview v0.1.3，大部分文件名称导致的问题都解决了，名称带有空格的 CSS 文件也能正确读取了，但似乎在监听和实时同步预览名称里带有空格的 CSS 文件时，还存在无法即时刷新的问题，需要 Alt＋F 重新查询才能刷新。而刷新名称不带空格的 CSS 文件是正常的 last_idol 发表于 2020-3-30 10:09
0.1.2版 已解决，完美兼容WIN7。
ast_idol 兄:
辛苦了....謝謝您
看到時已是 0.1.3 版, 速度驚人....
無法執行.....被 win7 的 Defender 給擋下且自動刪除
{:4_106:} 本帖最后由 last_idol 于 2020-3-30 20:52 编辑
喬治兄 发表于 2020-3-30 19:59
ast_idol 兄:
辛苦了....謝謝您
看到時已是 0.1.3 版, 速度驚人....
专门用WIN10的Defender，360杀毒以及火绒扫描了下，没有任何提示。
0.1.2版只增加了读取设置WIN7 DPI的功能，调用了两个函数，GDI32.DLL的GetDeviceCaps和USER32的SetProcessDPIAware。
https://docs.microsoft.com/en-us ... ingdi-getdevicecaps
https://docs.microsoft.com/en-us ... -setprocessdpiaware
如果担心的话可以用回0.1.1版，把系统DPI改回默认的100%也可以正常使用，不会有界面错位。
用WIN7的Defender更新最新版，专门扫了下这个文件也没有提示。如果后续反馈报毒多的话，会考虑删掉这功能。
https://i.loli.net/2020/03/30/aGyU21jzBq5Dldb.png
last_idol 发表于 2020-3-30 20:37
专门用WIN10的Defender，360杀毒以及火绒扫描了下，没有任何提示。
0.1.2版只增加了读取设置WIN7 DPI的功 ...
last_idol 兄:
不會擔心, 而是已把 win7 defender 關掉 也是打不開 後會自動 triger defender 後就自動把 0.1.3 版刪除
0.1.1版，把系统DPI改回默认的100%........不知在哪設定?
{:4_102:} 本帖最后由 last_idol 于 2020-3-30 21:07 编辑
喬治兄 发表于 2020-3-30 20:58
last_idol 兄:
不會擔心, 而是已把 win7 defender 關掉 也是打不開 後會自動 triger defender 後就自動把 ...
Control Panel\Appearance and Personalization\Display
设置成100%，也可以考虑把Preview.exe加入Defender的白名单里，毕竟后面还会加很多功能。
本帖最后由 喬治兄 于 2020-3-30 21:47 编辑
last_idol 发表于 2020-3-30 21:05
Control Panel\Appearance and Personalization\Display
设置成100%，也可以考虑把Preview.exe加入Defende ...
last_idol 兄:
好的, 謝謝您再度指點迷津, 辛苦你了
Thanks again
{:4_104:}
您說的沒錯, 是我的 win7 defender 太久都沒更新過
更新完win7 defender 後連圖標也正常.....再也沒有之前的問題
Perfect......讚呀....
謝謝啦
{:4_105:}
挺好的，辛苦了
推荐在GitHub上发布 Word 发表于 2020-3-30 18:39
Preview 首次打开 MDX 词库却没有刷新对应的 CSS 文件里的样式的问题，已经确认是浏览器缓存导致的，Chrome ...
带空格文件实时同步刷新的问题解决了，感谢反馈。{:4_113:} macOS 10.15，打不开app，无法使用 从没见过这么强大的前端软件！ last_idol 发表于 2020-3-31 00:47
带空格文件实时同步刷新的问题解决了，感谢反馈。
名称带空格的 CSS 文件的刷新问题，经测试已经在 0.1.4 版中解决啦！不错
今天再次测试了几十部词典，又双叒发现问题啦，名称带有中文字符（我测试的是名称为纯中文字符）的 CSS 文件，在 0.1.4 版中无法正确读取样式，还是文件名上的问题哈哈哈 本帖最后由 喬治兄 于 2020-3-31 09:51 编辑
last_idol 兄:
經測試圖片辭典也是一樣完美無瑕
另有一問題已私傳仁兄
那一個辭典無法顯圖.....或許仁兄能解
謝謝啦
https://i.loli.net/2020/03/31/GMIWaZJ5O3vzbRo.png
huala 发表于 2020-3-31 08:29
macOS 10.15，打不开app，无法使用
有报错或者别的信息吗？只有10.13和10.14的系统。