gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
707142c6bb
secubox-openwrt/EXAMPLES/README.zh.md
CyberMind-FR ccfb58124c docs: Add trilingual documentation (French and Chinese translations) 
Add complete French (fr) and Chinese (zh) translations for all documentation:

- Root files: README, CHANGELOG, SECURITY, BETA-RELEASE
- docs/: All 16 core documentation files
- DOCS/: All 19 deep-dive documents including embedded/ and archive/
- package/secubox/: All 123+ package READMEs
- Misc: secubox-tools/, scripts/, EXAMPLES/, config-backups/, streamlit-apps/

Total: 346 translation files created

Each file includes language switcher links for easy navigation between
English, French, and Chinese versions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-03-20 10:00:18 +01:00

3.6 KiB
Raw Blame History

SecuBox 代码示例

English | Francais | 中文

本目录包含 SecuBox 模块开发和集成的实用代码示例。

可用示例

help-button-integration.js

将帮助/文档按钮集成到 SecuBox 模块的完整示例。

包含内容：

  • 共享帮助工具模块
  • 模块集成示例
  • 多种 UI 模式（页眉、浮动、快速操作）
  • 上下文相关帮助
  • CSS 样式示例

使用场景：

  • 向模块仪表板添加帮助按钮
  • 链接到网站文档
  • 在各模块间创建一致的帮助用户体验

相关文档

  • 集成计划： ../DOCS/HELP_INTEGRATION_PLAN.md
  • 部署指南： ../DOCS/WEBSITE_DEPLOYMENT_GUIDE.md
  • LuCI 开发参考： ../DOCS/LUCI_DEVELOPMENT_REFERENCE.md

如何使用示例

  1. 查看示例代码以理解模式
  2. 复制相关部分到您的模块
  3. 自定义模块名称、URL 和样式
  4. 测试在开发路由器上
  5. 部署使用部署脚本

集成工作流程

# 1. 部署网站到路由器
./secubox-tools/deploy-website.sh root@192.168.8.191

# 2. 将帮助按钮代码添加到您的模块
# （参见 help-button-integration.js）

# 3. 构建并部署模块
./secubox-tools/local-build.sh build luci-app-your-module
./secubox-tools/deploy-network-modes.sh root@192.168.8.191

# 4. 在浏览器中测试
open http://192.168.8.191/cgi-bin/luci/admin/secubox/your-module

常用模式

模式 1：页眉帮助按钮

'require secubox/help as Help';

E('div', { 'class': 'header' }, [
    E('h2', {}, 'Module Title'),
    Help.createHelpButton('module-name', 'header')
])

模式 2：浮动帮助按钮

E('a', {
    'class': 'sb-help-floating',
    'href': '/luci-static/secubox/demo-module.html',
    'target': '_blank'
}, [E('span', {}, '❓')])

模式 3：快速操作

buttons.push(
    E('button', {
        'class': 'action-btn',
        'click': function() {
            window.open('/luci-static/secubox/demo-module.html', '_blank');
        }
    }, ['📖 Help'])
)

模块特定示例

每个模块可以有不同的帮助按钮位置：

模块 推荐位置 示例文件
SecuBox Dashboard 快速操作 help-button-integration.js (示例 3)
System Hub 页眉徽章 help-button-integration.js (示例 4)
Network Modes 页眉按钮 help-button-integration.js (示例 2)
其他模块 浮动按钮 help-button-integration.js (示例 5)

测试清单

  • 帮助按钮可见
  • 点击打开正确的文档页面
  • 样式匹配模块主题
  • 深色/浅色模式下正常工作
  • 移动端响应式
  • 无控制台错误
  • 可通过键盘访问

贡献示例

添加新示例：

  1. 创建描述性的 JavaScript 文件
  2. 包含清晰的注释
  3. 展示完整、可运行的代码
  4. 更新此 README
  5. 在实际路由器上测试

支持

关于示例的问题：

  • 查看 DOCS/ 中的相关文档
  • 检查 luci-app-*/ 中的模块源代码
  • 首先在开发路由器上测试

快速参考

网站基础 URL： /luci-static/secubox/

模块帮助页面：

  • secubox → index.html#modules
  • system-hub → demo-secubox-hub.html
  • network-modes → demo-network-modes.html
  • client-guardian → demo-client-guardian.html
  • bandwidth-manager → demo-bandwidth.html
  • traffic-shaper → demo-traffic-shaper.html
  • （完整列表请参见 help-button-integration.js）

帮助工具方法：

  • Help.createHelpButton(module, position, options)
  • Help.getHelpUrl(module)
  • Help.openHelpModal(module)