CyberMind-FR
ccfb58124c
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>
143 lines
4.2 KiB
Markdown
143 lines
4.2 KiB
Markdown
# Exemples de Code SecuBox
|
|
|
|
[English](README.md) | Francais | [中文](README.zh.md)
|
|
|
|
Ce repertoire contient des exemples de code pratiques pour le developpement et l'integration des modules SecuBox.
|
|
|
|
## Exemples Disponibles
|
|
|
|
### help-button-integration.js
|
|
Exemples complets pour l'integration de boutons d'aide/documentation dans les modules SecuBox.
|
|
|
|
**Contenu :**
|
|
- Module utilitaire d'aide partage
|
|
- Exemples d'integration de modules
|
|
- Multiples modeles d'interface utilisateur (en-tete, flottant, actions rapides)
|
|
- Aide contextuelle
|
|
- Exemples de style CSS
|
|
|
|
**Cas d'utilisation :**
|
|
- Ajout de boutons d'aide aux tableaux de bord des modules
|
|
- Liens vers la documentation du site web
|
|
- Creation d'une experience utilisateur d'aide coherente entre les modules
|
|
|
|
## Documentation Associee
|
|
|
|
- **Plan d'Integration :** `../DOCS/HELP_INTEGRATION_PLAN.md`
|
|
- **Guide de Deploiement :** `../DOCS/WEBSITE_DEPLOYMENT_GUIDE.md`
|
|
- **Reference de Developpement LuCI :** `../DOCS/LUCI_DEVELOPMENT_REFERENCE.md`
|
|
|
|
## Comment Utiliser les Exemples
|
|
|
|
1. **Examiner le code d'exemple** pour comprendre le modele
|
|
2. **Copier les sections pertinentes** dans votre module
|
|
3. **Personnaliser** les noms de modules, URLs et styles
|
|
4. **Tester** sur le routeur de developpement
|
|
5. **Deployer** a l'aide des scripts de deploiement
|
|
|
|
## Workflow d'Integration
|
|
|
|
```bash
|
|
# 1. Deployer le site web sur le routeur
|
|
./secubox-tools/deploy-website.sh root@192.168.8.191
|
|
|
|
# 2. Ajouter le code du bouton d'aide a votre module
|
|
# (voir help-button-integration.js)
|
|
|
|
# 3. Compiler et deployer le module
|
|
./secubox-tools/local-build.sh build luci-app-your-module
|
|
./secubox-tools/deploy-network-modes.sh root@192.168.8.191
|
|
|
|
# 4. Tester dans le navigateur
|
|
open http://192.168.8.191/cgi-bin/luci/admin/secubox/your-module
|
|
```
|
|
|
|
## Modeles Courants
|
|
|
|
### Modele 1 : Bouton d'Aide en En-tete
|
|
```javascript
|
|
'require secubox/help as Help';
|
|
|
|
E('div', { 'class': 'header' }, [
|
|
E('h2', {}, 'Module Title'),
|
|
Help.createHelpButton('module-name', 'header')
|
|
])
|
|
```
|
|
|
|
### Modele 2 : Bouton d'Aide Flottant
|
|
```javascript
|
|
E('a', {
|
|
'class': 'sb-help-floating',
|
|
'href': '/luci-static/secubox/demo-module.html',
|
|
'target': '_blank'
|
|
}, [E('span', {}, '❓')])
|
|
```
|
|
|
|
### Modele 3 : Action Rapide
|
|
```javascript
|
|
buttons.push(
|
|
E('button', {
|
|
'class': 'action-btn',
|
|
'click': function() {
|
|
window.open('/luci-static/secubox/demo-module.html', '_blank');
|
|
}
|
|
}, ['📖 Help'])
|
|
)
|
|
```
|
|
|
|
## Exemples Specifiques aux Modules
|
|
|
|
Chaque module peut avoir differents emplacements de boutons d'aide :
|
|
|
|
| Module | Position Recommandee | Fichier d'Exemple |
|
|
|--------|---------------------|--------------|
|
|
| SecuBox Dashboard | Actions Rapides | help-button-integration.js (Ex 3) |
|
|
| System Hub | Badge En-tete | help-button-integration.js (Ex 4) |
|
|
| Network Modes | Bouton En-tete | help-button-integration.js (Ex 2) |
|
|
| Autres Modules | Bouton Flottant | help-button-integration.js (Ex 5) |
|
|
|
|
## Liste de Verification des Tests
|
|
|
|
- [ ] Le bouton d'aide est visible
|
|
- [ ] Le clic ouvre la bonne page de documentation
|
|
- [ ] Le style correspond au theme du module
|
|
- [ ] Fonctionne en mode sombre/clair
|
|
- [ ] Responsive sur mobile
|
|
- [ ] Pas d'erreurs dans la console
|
|
- [ ] Accessible via le clavier
|
|
|
|
## Contribuer des Exemples
|
|
|
|
Pour ajouter de nouveaux exemples :
|
|
|
|
1. Creer un fichier JavaScript descriptif
|
|
2. Inclure des commentaires clairs
|
|
3. Montrer un code complet et fonctionnel
|
|
4. Mettre a jour ce README
|
|
5. Tester sur un routeur reel
|
|
|
|
## Support
|
|
|
|
Pour les questions sur les exemples :
|
|
- Consulter la documentation associee dans `DOCS/`
|
|
- Verifier le code source des modules dans `luci-app-*/`
|
|
- Tester d'abord sur le routeur de developpement
|
|
|
|
## Reference Rapide
|
|
|
|
**URL de Base du Site Web :** `/luci-static/secubox/`
|
|
|
|
**Pages d'Aide des Modules :**
|
|
- 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`
|
|
- (Voir help-button-integration.js pour la liste complete)
|
|
|
|
**Methodes de l'Utilitaire d'Aide :**
|
|
- `Help.createHelpButton(module, position, options)`
|
|
- `Help.getHelpUrl(module)`
|
|
- `Help.openHelpModal(module)`
|