docviewer

项目说明

从网上clone的网站，每个网站以一个项目的形式存放到根目录中，如 mdn, chrome-dev, nodejs, babel ...

• 每个项目需要在后端配置，不配置则属于 根项目

wget

术语

• main url

  • 主页面的 url, 即浏览器中地址栏显示的 url

• edit url

  • 编辑的页面的url. iframe 的 url

• 缩放

  • 没有特别说明，则是指以下两种

    • page zoom/pinch zoom

      • pc

    • scale

      • pc/mobile

• mirror

  • 镜像，本网站

标记

• ~!

  • 不测试

    • 子主题 1

• oo[

  • 已经过时的用例，暂时保留

• !!

  • 重点测试

• ~~

  • TODO

• //.

  • 技术注释

list dir

head

• 递归深度

  • 默认3
  • 不传用后台配置的
  • 传了用前端的

• 搜索

  • 文件不命中则隐藏
  • 文件夹不命中也显示，命中则高亮

• 回车搜索

• 重置

  • 清空输入并搜索一次

• 刷新时从 url 加载递归深度和搜索关键词

• 横竖排

  • 切换后改变文件的排列方式

    • 记住选择，刷新后保持

body

• 文件（夹）图标

• favicon 设置

  • 根项目
  • 子项目

• 文件夹

  • 面包屑导航

    • 每个文件夹的每一部分都可以单独点击进入（除了root)

  • 两种索引

    • 文件夹下有 index.html 或者同级有文件夹同名的 html

• 文件

  • 点击阅读

文件阅读

history 前后导航

• 浏览器的前后导航功能正常

• 长按导航键显示导航历史列表

  • 每一项是对应页面的title

页面加载

• 尝试添加 .html/.htm 后缀

• 如果404，则显示 try origin, 意义同 导航条的 origin

  • 根项目
  • 子项目

• 304 http 缓存

  • 如果页面、资源没有改动过（基于修改时间），则返回 304

    • 新表签中打开修改，保存

  • 可以通过配置 http_304: false 关闭，默认 true

    • ~!

导航条

• 导航条浮动

  • ctrl shift alt + 0, 快捷键重置位置到原点（其他配置不重置）

  • 动态固定（左上角相对于屏幕的位置固定）（dynamic fixed: scale(pinch zoom)，layout 大于 viewport 时）

    • 常规

      • 水平、垂直滚动，位置固定
      • 刷新后位置保持上次拖动后的位置
      • 拖动后再进行以上测试，相同
      • 缩放后再进行以上测试，相同

    • 拖动后重新计算相对位置

    • DPR 改变后再测试

    • 删除 localStorage 数据

      • application>localstorage
      • 刷新，显示在 0,0
      • 打开新页面，显示在 0,0

• 头部

  • title

    • 拖动

      • bugs

        • 先拖动再拖动空白

          • http://v.uninote.com.cn/video_play.html?video_url=https://admin.bb.uninote.com.cn/oss?path=video/upload/202411/c7eb7b674edbefb7b7ba9ee9147123fc.mp4

            • fixed

        • 先拖动空白

          • http://v.uninote.com.cn/video_play.html?video_url=https://admin.bb.uninote.com.cn/oss?path=video/upload/202411/de4c38d226b8f7ff12de6bae04e5a2ce.mp4

            • fixed

        • 长按出菜单后

          • http://v.uninote.com.cn/video_play.html?video_url=https://admin.bb.uninote.com.cn/oss?path=video/upload/202411/a3f58fecda3dd06e3113f00a4703b6f8.mp4

            • fixed

      • 范围限定

        • 不论如何拖动，保证屏幕在缩小到最小后可以看到并拖动到其他位置
        • 已知问题：在拖动到边缘后进行放大。由于和动态固定这个功能有一些冲突，导致位置会过于的靠边。不是很好操作。但是将屏幕缩小到最小后，能够再次正常拖动。

      • 折叠、展开时都可以拖动

    • 显示文档title

    • 没有拖动时，点击切换折叠展开

      • alt + c

    • mobile: 不影响大纲滚动条的功能

  • 按钮栏

    • 居中对齐

    • parent

    • root

    • origin

      • 需要配置 origin

        • 去掉 .html/.htm 后缀

          • 根项目
          • 子项目

    • edit

      • 跳转编辑页面，编辑当前文件

    • DPR

      • 仅移动端显示

        • pc 阅读、编辑页面正常显示

        • 阅读、编辑页面可以分别配置

          • 阅读、编辑切换，加载使用自己的值

            • 刷新保持

          • mdn2, 阅读 80%，编辑 40%，可以查看侧边栏

            • !!

      • 模拟DPR概念。和 scale 是两个概念，scale 不影响布局，DPR 改变布局宽度，但不改变 scale 值，还需要手动 scale；~!

        • scale & page zoom

        • initial-scale: 0.8, minimum-scale: 0.5, DPR: 0.5, width: 400px

          • 布局宽度 1000，最小可 scale 到 0.4, 但只能 scale 到 0.5, 有水平滚动

        • 80% 的意思就是在基准布局宽度（由viewport决定）基础上缩小到80%，即宽度变为 125%

          • 效果同浏览器的 page zoom，改变 DPR(window.devicePixelRatio) 值

      • 用途 ~!

        • 主要用于字体较大的站点的缩小

          • 设置了 meta viewport 的站点一般字体较大

          • 在编辑页面，设置一个较小值，如40（保证iframe宽度>770px），可以查看 mdn 的左边栏

            • 因为设置宽度无法改变主窗口的media查询，但可以改变iframe的

          • fh 代替 set body width

        • 放大：用于放大后不用水平滚动

          • 没有设置 meta viewport 的站点，布局宽度默认为 980px，会导致阅读时如果放大到适合的大小，需要来回水平滚动
          • 但无法阻止水平滚动

      • 得到焦点时全选

        • shift alt f

        • 仅能输入数字

        • 失去焦点时触发计算

          • 或者回车，mobile下虚拟键盘的回车也支持

      • cases

        • ~!

          • 阅读页面

            • initial-scale: 0.8/unset, minimum-scale: 0.5/unset（*-scale 由各个子项目决定）

              • DPR 分别尝试 50/70/120/unset，以上组合后再测试

                • unset

                  • 恢复基准布局宽度

                    • 布局效果同不做任何操作

                • iframe 宽度始终和body等保持一直（与工具条基本对齐）

          • 编辑页面

            • 固定值：initial-scale 0.8, minimum-scale 0.1

              • DPR 分别尝试 40/70/120/unset

                • 用例、iframe宽度规则同阅读页面

        • test pages

          • /vs/DPR/*.html

            • ~!

    • 基本都有对应的快捷键

      • ~!

  • path

    • 水平滚动

      • 自动滚动到最右边

    • hover 显示滚动条，更细的滚动条

      • 不需要滚动时没有预留滚动条的空间

        • ~!

      • chrome的更细

      • ff标准的thin

• 大纲

  • 宽度小于 800px 跳转后自动折叠面板

  • //. 不可拖动，因为可能有滚动条

  • 宽高超出范围可滚动

    • 垂直、水平滚动，头部都固定、不会滚动
    • 每个标题(heading)都占据一行，不换行，通过滚动条能查看完整标题

  • H1-H6, 有缩进

  • 点击跳转对应位置，并加入导航历史，

    • 前进、后退相应跳转

  • 高度最高为 80vh

  • xss

    • ~!

  • target id 生成（如果没有） ~!

    • TODO: 列出各种情况
    • 生成的 id 会导致错误的 modified 判断

  • hover背景高亮

    • 宽度至少为100%
    • 超宽的宽度为文本的宽度，并且整体 cursor pointer, 可点击

  • edit points

    • 所有 edit points 正确的插入到 outlines 中

      • 提取标记为红色、蓝色内容
      • https://test.d.uninote.com.cn/temp.html

    • xss

      • ~!

    • 自动换行

    • 黑色字体

    • 段落间间距更大

      • 能明显看出段落分隔

    • 没有缩进

    • 可以隐藏，并记录选择

• config（配置面板）

  • reset

    • 初始化并刷新页面

      • 还可以通过 url 添加 ?reset=1 实现

        • 刷新后 reset=1 参数移除

          • 此参数不会进入浏览器导航历史记录

  • debug

    • 开启调试模式

      • ~!

  • 面板宽度

    • 导航条面板宽度

• 用户记录（有操作后马上记录），刷新后恢复

  • 面板位置

  • 面板输入框（checkbox、文本框等）

  • 折叠、展开状态

  • EPs

  • DPR

  • 刷新不应有明显的晃动

    • 折叠时不应先渲染展开，再渲染折叠状态

  • 删除localstorage docviewer 字段，再刷新同reset

  • 编辑页

    • 简单编辑模式

body

• 链接跳转

  • 三种路径

    • 相对路径

      • path/to/dest.html

    • 半绝对路径

      • /path/to/dest.html

        • 根项目

          • 正常跳转

        • 子项目

          • 正确添加项目名，正常跳转

          • 后台屏蔽项目配置，则不能正确跳转

            • 注意清缓存

              • ~!

    • 全绝对路径

      • https://some.xx/path/to/dest.html

        • to mirror

          • 如果配置了 origin, 并且链接为此 origin 下链接，并且 to_mirror 配置为true(默认)，并且文件存在，则转为镜像路径

            • 根项目

            • 子项目

              • https://test.d.uninote.com.cn/vs/index.html

          • //. 配置demo： '/mdn' => [ 'favicon' => '/images/test_favicon.ico', 'origin' => 'https://developer.mozilla.org/', 'to_mirror' => true, ],

  • 所有情况都会尝试添加 .html/.htm 后缀

  • hash anchor 定位

    • #xxx 形式

      • 当前页定位

      • xxx包含特殊字符，需要解码，如 yii: '%24action-detail'

        • https://test.d.uninote.com.cn/yii/doc/api/2.0/yii-baseyii#%24aliases-detail

    • 其他带 path 的三种形式

      • 指向当前页面

        • 当前页定位
        • 后端会处理为纯 hash 形式

      • 指向其他页面

        • 跳转到其他页面再定位

    • 每次点击，同样会加入导航历史，可以来回前后导航

• 资源加载（图片、js、css等）

  • 同链接跳转，也需要区分三种路径 ~！

    • 半绝对路径如果是子项目

      • 资源 url 不会追加项目名，但能够正常加载

        • 因为很难覆盖所有的情况，比如：background: url(xxx)

  • 所有的资源加载正确（network 面板）

    • https://test.d.uninote.com.cn/vs/index.html

文件编辑

编辑工具条

• edit url 与 load 按钮

  • 自动更新为当前的编辑路径

    • 初始、刷新时从 url 加载 path 参数
    • 点击页面链接跳转后
    • 浏览器前后导航后

  • 手动输入后点击 load

    • main url path 参数更新

    • 当前编辑地址加入导航历史

    • 点击回退回到上一个编辑的页面

      • 可多次反复前后导航

• 阅读模式切换

  • 快捷键：alt e

• 阅读页面切换

  • alt v

• 编辑功能

  • 颜色

    • 红色 alt z
    • 蓝色 alt x
    • 黑色 alt b

  • 加粗、斜体

    • ctrl b/ctrl i

  • 插入、更新 anchor

  • redo-undo

    • ctrl z/ctrl y

  • save

    • ctrl s

  • 系统自带的快捷键，如 ctrl + z/y/b

• status bar

  • 错误提示，如保存失败等

    • 填写错误的path

  • 加载时显示 loading，完成后 ready

• 必要时禁用按钮

  • 只读时

    • 有修改时，切换为只读，此时 save 按钮可用

      • 保存成功后禁用

        • 刷新等无修改提示

    • 无修改时， save 不可用，快捷键一样不可用

编辑框（iframe）

• 阅读模式

  • 文件阅读的所有功能可用

    • 额外功能

      • 点击的是外链时，则结束编辑，main frame 跳转到外链。

        • 仍然遵循保存提示的逻辑
        • 返回，编辑，再次点击，效果相同

      • history 前后导航

        • 第一次进入时，产生一条历史记录，每次刷新后记录无变化

      • bug: hash anchor 跳转 tool bar 被顶出去的问题

        • fixed

      • bug: chrome 子项目是不能跳转的

        • 因为 chrome 项目有代码先将路径处理为了全绝对路径

          • fixed

      • bug: w3 toc 是 <a name=xxx> 形式

        • ~!

      • 子项目的资源文件能够正常加载

        • 3种路径都要测试

          • bug: 子项目的图片，右键-新窗口打开，无法正确加载

            • fixed

          • https://test.d.uninote.com.cn/uueditor.html?path=%2Fvs%2Findex.html

      • mdn, 过时等图标

        • prj_http_301 = true (默认false)

          • ~!

        • https://test.d.uninote.com.cn/uueditor.html?path=%2Fmdn2%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects.html

      • 图片可以正常查看

        • https://test.d.uninote.com.cn/uueditor.html?path=%2Fvs%2Fprj%2Ftest.html
        • https://d.uninote.com.cn/uueditor.html?path=%2Fmdn2%2Fen-US%2Fdocs%2FWeb%2FAPI%2FHTML_DOM_API.html

• 编辑模式

  • 点击 阅读模式 切换

    • 再次点击切换回 阅读模式

  • 文件阅读的所有功能可用，导航条的edit按钮隐藏

  • 阅读模式的额外功能相同

  • 切换导航后重置为阅读模式，避免错误的编辑检测

    • 并且状态改为 disabled

      • 要等待 selector 获取后才可用

        • 禁用时快捷键一样不可用

  • 编辑时可以点击跳转

    • 三种url + hash

  • in page a, edit, save, go to page b, back, 不能从缓存中获取，需要刷新 !!

    • in b, go to page a, 这种情况不用刷新，走了网络请求的 ~!

      • 再连续返回两次到 a

        • 目前没有区分这种情况，还是要刷新

    • TODO: 目前是修改了，再次返回就是刷新，应该改为保存了返回才刷新

    • 点击任意 hash anchor 跳转，编辑，back

      • 不应该触发保存提示

      • save，跳转其他页面，back

        • 重新加载

  • mobile

    • 简单编辑模式

      • 移除焦点，防止键盘弹出
      • 编辑后取消选择 因为此时回退手势无法取消(chrome bug?)

• 保存提示

  • 有编辑才提示，没有编辑不提示

    • 编辑后保存了也不提示

    • selector 配置部分保存，则仅检测对应部分

      • ~! chrome: 移动鼠标就会导致内容改变

      • chome: 如果全部保存，会导致再次加载时两边的导航栏丢失。

        • fixed
        • https://test.d.uninote.com.cn/chrome/docs/devtools/overview.html

      • php: 如果全部保存，因为有 top 按钮，下滑就会 modified

        • https://test.d.uninote.com.cn/php2/manual/en/language.basic-syntax.instruction-separation.php.html

    • 开始编辑后才记录：在切换为编辑模式并且未修改时记录 originSrc

      • https://test.d.uninote.com.cn/yii/doc/api/2.0/yii-baseyii.html

      • 切为编辑模式后，浏览到底部，无修改，不提示

      • 修改后刷新，提示

        • 取消

          • 保存

            • 刷新不提示

              • 确认修改保存了

  • 触发的情况分类

    • 点击页面链接

    • 前后导航

    • 刷新

    • 导航条的view按钮

    • 其他未知情况

      • ~!

  • 提示方式

    • 系统对话框（onbeforeunload)

      • 出现条件 oo[

        • 点击页面链接、前后导航，跳转后离开编辑页面
        • 其他所有触发分类

      • 取消

        • 留在当前页面

      • 确定

        • 离开，不保存

    • 自定义对话框oo[

      • 出现条件

        • 点击页面链接、前后导航，跳转后还是当前页面

          • TODO: 当前页面的定义

      • 选择

        • 确定

          • 保存

            • 成功

              • 加载新的待编辑页面

                • 阅读模式不改变
                • 重置为未编辑状态，再次跳转无任何提示

              • edit url & main url path 参数更新

              • 所有情况都会尝试添加 .html/.htm 后缀

            • 失败

              • status bar 显示失败原因

              • 效果同取消

              • 保存前移动文件

                • path error

                  • 还是处于已编辑状态，后续操作的提示相同

        • 取消

          • title & edit url & main url path 参数无变化

            • chrome bug: 编辑》回退》取消》title不会更新为设置的。firefox在确认前不会修改title

          • 还是处于已编辑状态，后续操作的提示相同

          • 注意，取消后前进的历史记录将全部丢失，目前无法解决；后退的历史记录不影响

        • 再次前后导航，目前会重复显示，暂不处理

    • cases oo[

      • chrome, 任意页面，编辑

        • 返回，系统对话框提示，离开

          • 前进，再次进入，此时页面还是之前的状态(bfcache)

            • 再次离开依然提示

        • firefox 是磁盘缓存，因此没有保存状态

      • chrome, 返回》esc取消》再返回》直接进入到系统的离开提示》选择确定，直接跳过所有的当前页面历下的历史

      • a edit > change to read only > to b, 提示保存，确定> back to a, 正常返回，修改被保存了，再跳转无提示

• 保存

  • <!DOCTYPE html>

    • 有无不改变

      • TODO: bug

        • ~!

  • 以edit url作为保存路径

  • 项目

    • 子项目

      • 相对路径不变

      • 半绝对路径移除项目路径

      • 全绝对路径

        • to mirror 的链接保存

    • 根项目

      • 同子项目

  • 导航条等插入的内容不保存

    • ~!

  • 尝试添加 .html/.htm 后缀

  • 反复修改、保存、加载

  • selector 配置部分保存

    • 没有配置完整保存
    • 找不到对应节点完整保存
    • 新老文档同时找到了部分保存

  • html entity

    • https://test.d.uninote.com.cn/vs/index.html

    • 读取时中文正确解码

    • &<> 等字符

      • 读取时中文正确解码
      • save时正确编码

一样要区分是否子项目，以子项目测试为主

file list（文件列表）

要测试 root 以及 非 root 项目

文件加入 list 的操作

• fav

  • 操作界面

    • file list
    • 阅读页面
    • 编辑页面

  • do fav

    • first one, create file-list dir & prj list file

    • do/undo fav

      • undo 后不会从 list 中删除

    • fav不影响修改时间

    • 存在则修改，不存在则新增

    • url中不带 .html 能够正常 do/undo

• edit

  • first one, create file-list dir & prj list file

    • ~!

  • 每次编辑后更新修改时间

  • edit不影响是否fav

  • 存在则修改，不存在则新增

• 直接通过 git 命令导入

  • git diff --name-only <base> HEAD

    • mtime/fav 可以忽略，默认值都为 0

      • ~!

展示

• 按加入顺序展示

• 顶部展示项目名

• 列表部分展示修改时间和文件名

  • 点击进入阅读

    • 收藏

      • 返回列表，变为收藏

    • 取消收藏

      • 返回列表，变化取消收藏

    • 进入编辑

      • 返回列表，修改时间变化

    • 点击 list

      • 进入对应项目的列表

    • 返回，筛选状态、筛选结果保持

      • 滚动条位置也保持

        • 编辑页面也一样

          • !!

    • main 跳转其他页面 ~!

      • 返回

        • 阅读页面

          • 状态恢复

        • 编辑页面

          • 支持 bfcache

            • 恢复

              • google 支持

          • 不支持

            • 未恢复

              • firefox 不支持

  • 没有修改时间为1970

  • 文件名前面收藏图标

    • 点击切换收藏

筛选

• 收藏

• 修改

  • 过滤掉时间时间为0（1970年）的

• 同时选中，则显示全部的

  • 包括没有修改，取消了收藏的

XMind: ZEN - Trial Version