⬆︎
×
TOC
Hyplus目录

Hyplus构件需求定义文档备份

本站自研插件功能清单。

1 Ultimate Buttons

本站特色,右下角Hyplus按钮群,由一系列Hyplus按钮(HyButton)及弹出框组成,集成Hyplus目录(HyTOC)、Hyplus设置(HyConf)、Hyplus导航(HyNav)、Better Messages及时聊天等实用功能。

  1. 基础按钮功能
    • 固定于网页右下角的按钮群,包含6个功能按钮(滚动置顶、按钮切换、设置、目录、聊天、导航),支持鼠标悬停缩放动画,禁用用户选择。
    • 滚动置顶按钮:点击平滑滚动至页面顶部(⬆︎)。
    • 按钮切换按钮:点击隐藏/显示其他功能按钮(状态记忆:×显示按钮群,···隐藏),支持本地化存储记录显示状态。
  2. 弹出框交互
    • 聊天按钮:点击打开集成Better Message插件的弹出框,点击外部区域关闭。
    • 导航按钮:点击打开导航弹出框(纯HTML+CSS,高速响应),支持快捷键Alt + S(或Option + S)快速唤起,外部点击关闭。
    • 目录按钮:点击显示目录弹出框(智能捕捉当前文章锚点),无目录时显示“当前没有可用的目录”提示,外部点击关闭。
    • 设置按钮:点击打开设置弹出框,包含若干配置:
      • 始终隐藏侧边栏(本地存储记忆状态);
      • 隐藏页眉页脚(本地存储记忆状态);
      • 临时隐藏按钮群(仅本次会话生效)。
  3. 配置与适配
    • 响应式设计:窗口宽度过窄时自动隐藏侧边栏,支持手动切换侧边栏显示状态(通过设置复选框)。
    • 按钮样式:圆形固定定位,背景色随悬停动态变化(主按钮为蓝色系,切换按钮为红色),统一尺寸和阴影效果。
  4. 辅助功能
    • 键盘快捷键:Alt + S快速打开导航框,适配不同系统(包括最新版Mac,阻止其输出特殊字符ß)。
    • 外部点击关闭:所有弹出框支持点击页面非弹出区域自动关闭,除按钮本身及弹出框内容区域。
    • 状态记忆:侧边栏、页眉页脚隐藏状态通过本地存储持久化,刷新页面后保留配置。

2 HyLightbox

本站特色,多功能图片灯箱,顺带解决图片加载问题。

  1. 基础灯箱功能:点击图片打开灯箱,居中显示原图,支持ESC键/关闭按钮/灯箱外点击关闭。
  2. 缩放控制:
    • 支持“+”“-”按钮/快捷键、双指缩放(移动端)动态调整缩放比例(0.01%~100000%,极致缩放),显示当前缩放百分比。
    • 双击/快捷键“0”复位原始尺寸,双击时以点击位置为中心缩放。
  3. 图片交互:
    • 鼠标/单指拖动移动图片,支持箭头键微调位置。
    • 拖动时显示 “抓手” 光标,支持过渡动画优化体验。
  4. 辅助功能:
    • 帮助按钮显示快捷键说明(缩放、复位、退出、模式切换等)。
    • 绘图模式:支持在图片上用红笔批注,快捷键“2”开启绘图模式,“1”切换回鼠标模式。
  5. 适配与样式:
    • 响应式设计:图片最大显示为视口的90%宽高,背景为半透明黑色蒙层。
    • 按钮悬停效果、移动端触摸事件优化,禁用页面缩放避免冲突。

3 HyProgBar

“进度条”(仅用于衔接页面跳转,不监测实际执行进度)

  1. 界面元素
    • 进度条容器:固定在页面顶部,宽度为页面宽度,高度3px,背景半透明,允许点击穿透,初始显示。
    • 进度条:位于容器内,初始宽度为0,背景蓝色,宽度变化有过渡动画。
    • 加载遮罩层:覆盖整个页面,背景半透明白色,允许点击穿透,初始显示。
  2. 加载模拟:页面开始加载时,通过定时器模拟进度,进度从0开始,在初始加载完成前最多到90%。
  3. 进度更新
    • DOMContentLoaded事件触发时,进度更新到70%。
    • 过滤不需要等待加载的脚本(如时钟更新脚本、定时器脚本等),若此时无待加载脚本,立即完成加载。
  4. 加载完成处理
    • load事件触发后,等待至少150ms,进度更新到100%。
    • 完成加载后,进度条和遮罩层先淡出,再移除,同时清除定时器。

发表评论