Sistema de Carpetas | vasak-desktop
Guía detallada sobre la estructura de carpetas del proyecto.
Estructura Raíz
Frontend Vue.js"] Root --> SrcTauri["📁 src-tauri/
Backend Rust"] Root --> IndexHTML["📄 index.html"] Root --> PackageJSON["📄 package.json"] Root --> TSConfig["📄 tsconfig.json"] Root --> ViteConfig["📄 vite.config.ts"] Root --> License["📄 LICENSE"] Root --> Readme["📄 README.md"] Root --> GitIgnore["📄 .gitignore"] style Root fill:#667eea,stroke:#764ba2,color:#fff style Src fill:#f093fb,stroke:#f5576c,color:#fff style SrcTauri fill:#4facfe,stroke:#00f2fe,color:#fff style IndexHTML fill:#fa709a,stroke:#fee140,color:#fff style PackageJSON fill:#30cfd0,stroke:#330867,color:#fff style TSConfig fill:#a8edea,stroke:#fed6e3,color:#333 style ViteConfig fill:#ffecd2,stroke:#fcb69f,color:#333 style License fill:#ff9a9e,stroke:#fecfef,color:#333 style Readme fill:#fbc2eb,stroke:#a6c1ee,color:#333 style GitIgnore fill:#fdcbf1,stroke:#e6dee9,color:#333
Frontend (src/)
Raíz de Frontend
Componente raíz"] SrcRoot --> MainTs["📄 main.ts
Punto de entrada"] SrcRoot --> StyleCss["📄 style.css
Estilos globales"] SrcRoot --> ViteEnv["📄 vite-env.d.ts
Tipos Vite"] SrcRoot --> AssetsDir["📁 assets/
Recursos estáticos"] SrcRoot --> ComponentsDir["📁 components/
Componentes reutilizables"] SrcRoot --> InterfacesDir["📁 interfaces/
Interfaces TS"] SrcRoot --> LayoutsDir["📁 layouts/
Layouts/Plantillas"] SrcRoot --> RoutesDir["📁 routes/
Enrutamiento"] SrcRoot --> ToolsDir["📁 tools/
Controladores"] SrcRoot --> TypesDir["📁 types/
Tipos TS"] SrcRoot --> ViewsDir["📁 views/
Vistas/Páginas"] style SrcRoot fill:#667eea,stroke:#764ba2,color:#fff style AppVue fill:#f093fb,stroke:#f5576c,color:#fff style MainTs fill:#f093fb,stroke:#f5576c,color:#fff style StyleCss fill:#f093fb,stroke:#f5576c,color:#fff style ViteEnv fill:#f093fb,stroke:#f5576c,color:#fff style AssetsDir fill:#4facfe,stroke:#00f2fe,color:#fff style ComponentsDir fill:#4facfe,stroke:#00f2fe,color:#fff style InterfacesDir fill:#4facfe,stroke:#00f2fe,color:#fff style LayoutsDir fill:#4facfe,stroke:#00f2fe,color:#fff style RoutesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ToolsDir fill:#4facfe,stroke:#00f2fe,color:#fff style TypesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ViewsDir fill:#4facfe,stroke:#00f2fe,color:#fff
src/assets/
Recursos estáticos (imágenes, vectores):
Imágenes rasterizadas"] Assets --> Vectors["📁 vectors/
Gráficos vectoriales"] Img --> Logo["🖼️ logo.png"] Img --> BgJpg["🖼️ background.jpg"] Img --> ImgMore["📄 ..."] Vectors --> Icons["📁 icons/"] Vectors --> Illustrations["📁 illustrations/"] Vectors --> VecMore["📄 ..."] style Assets fill:#667eea,stroke:#764ba2,color:#fff style Img fill:#4facfe,stroke:#00f2fe,color:#fff style Vectors fill:#4facfe,stroke:#00f2fe,color:#fff style Logo fill:#43e97b,stroke:#38f9d7,color:#fff style BgJpg fill:#43e97b,stroke:#38f9d7,color:#fff style ImgMore fill:#43e97b,stroke:#38f9d7,color:#fff style Icons fill:#43e97b,stroke:#38f9d7,color:#fff style Illustrations fill:#43e97b,stroke:#38f9d7,color:#fff style VecMore fill:#43e97b,stroke:#38f9d7,color:#fff
Uso:
|
|
src/components/
Componentes Vue reutilizables:
Búsqueda en menú"] Components --> Areas["📁 areas/
Áreas grandes"] Components --> Buttons["📁 buttons/
Botones"] Components --> Cards["📁 cards/
Tarjetas"] Components --> Controls["📁 controls/
Controles interactivos"] Components --> Icon["📁 icon/
Iconos"] Components --> Widgets["📁 widgets/
Widgets reutilizables"] Areas --> Audio["🔊 audio/"] Areas --> Bluetooth["📱 bluetooth/"] Areas --> Network["🌐 network/"] Areas --> Panel["📊 panel/"] Areas --> ControlCenter["⚙️ control-center/"] Areas --> Menu["🎯 menu/"] Areas --> Configuration["⚙️ configuration/"] Buttons --> BtnMenu["🔘 AppMenuButton.vue"] Buttons --> BtnCategory["🔘 CategoryMenuPill.vue"] Buttons --> BtnSidebar["🔘 ConfigSidebarButton.vue"] Buttons --> BtnSession["🔘 SessionButton.vue"] Buttons --> BtnBattery["🔌 TrayIconBattery.vue"] Cards --> CardMenu["🎴 AppMenuCard.vue"] Cards --> CardBT["🎴 BluetoothDeviceCard.vue"] Cards --> CardWeather["🎴 CurrentWeatherCard.vue"] Cards --> CardWiFi["🎴 NetworkWiFiCard.vue"] Controls --> CtrlAudio["🎚️ AudioDeviceSelector.vue"] Controls --> CtrlBT["🎚️ BluetoothControl.vue"] Controls --> CtrlBrightness["🎚️ BrightnessControl.vue"] Controls --> CtrlNetwork["🎚️ NetworkControl.vue"] Widgets --> ClockWidget["⏰ DesktopClockWidget.vue"] Widgets --> MusicWidget["🎵 MusicWidget.vue"] Widgets --> WeatherWidget["🌤️ WeatherWidget.vue"] style Components fill:#667eea,stroke:#764ba2,color:#fff style SearchMenu fill:#f093fb,stroke:#f5576c,color:#fff style Areas fill:#4facfe,stroke:#00f2fe,color:#fff style Buttons fill:#4facfe,stroke:#00f2fe,color:#fff style Cards fill:#4facfe,stroke:#00f2fe,color:#fff style Controls fill:#4facfe,stroke:#00f2fe,color:#fff style Icon fill:#4facfe,stroke:#00f2fe,color:#fff style Widgets fill:#4facfe,stroke:#00f2fe,color:#fff
Estructura de un Componente:
|
|
src/interfaces/
Definiciones de interfaces TypeScript:
Interface Battery"] Interfaces --> Notifications["📄 notifications.ts
Interface Notification"] Interfaces --> Tray["📄 tray.ts
Interface Tray"] style Interfaces fill:#667eea,stroke:#764ba2,color:#fff style Battery fill:#43e97b,stroke:#38f9d7,color:#fff style Notifications fill:#43e97b,stroke:#38f9d7,color:#fff style Tray fill:#43e97b,stroke:#38f9d7,color:#fff
Ejemplo:
|
|
src/layouts/
Layouts/Plantillas de página:
Layout para configuración"] style Layouts fill:#667eea,stroke:#764ba2,color:#fff style ConfigLayout fill:#f093fb,stroke:#f5576c,color:#fff
Uso: Envuelve vistas para mantener estructura consistente
src/routes/
Configuración de enrutamiento Vue Router:
Configuración de rutas"] style Routes fill:#667eea,stroke:#764ba2,color:#fff style IndexTs fill:#4facfe,stroke:#00f2fe,color:#fff
Ejemplo:
|
|
src/tools/
Controladores y servicios (Business Logic):
Lógica de batería"] Tools --> BluetoothCtrl["📄 bluetooth.controller.ts
Lógica de Bluetooth"] Tools --> NetworkCtrl["📄 network.controller.ts
Lógica de red"] Tools --> TrayCtrl["📄 tray.controller.ts
Lógica de bandeja"] style Tools fill:#667eea,stroke:#764ba2,color:#fff style BatteryCtrl fill:#feca57,stroke:#ff9a56,color:#fff style BluetoothCtrl fill:#feca57,stroke:#ff9a56,color:#fff style NetworkCtrl fill:#feca57,stroke:#ff9a56,color:#fff style TrayCtrl fill:#feca57,stroke:#ff9a56,color:#fff
Responsabilidad:
- Llamar comandos del backend
- Procesar datos
- Manejar lógica compleja
src/types/
Definiciones de tipos TypeScript:
Tipos de librerías externas"] style Types fill:#667eea,stroke:#764ba2,color:#fff style LibVasakTypes fill:#fa709a,stroke:#f5576c,color:#fff
Uso: Extiende tipos de librerías o define tipos globales
src/views/
Vistas/Páginas principales:
Centro de control"] Views --> Desktop["📄 DesktopView.vue
Escritorio"] Views --> Menu["📄 MenuView.vue
Menú de apps"] Views --> Panel["📄 PanelView.vue
Panel"] Views --> Applets["📁 applets/
Mini-aplicaciones"] Views --> Apps["📁 apps/
Aplicaciones"] Applets --> AudioApplet["📄 AudioAppletView.vue
Applet de audio"] Applets --> BluetoothApplet["📄 BluetoothAppletView.vue
Applet de Bluetooth"] Applets --> NetworkApplet["📄 NetworkAppletView.vue
Applet de red"] Apps --> Settings["📄 SettingsApp.vue
Aplicación de Settings"] Apps --> FileManager["📄 FileManagerView.vue
Gestor de archivos"] style Views fill:#667eea,stroke:#764ba2,color:#fff style ControlCenter fill:#f093fb,stroke:#f5576c,color:#fff style Desktop fill:#f093fb,stroke:#f5576c,color:#fff style Menu fill:#f093fb,stroke:#f5576c,color:#fff style Panel fill:#f093fb,stroke:#f5576c,color:#fff style Applets fill:#4facfe,stroke:#00f2fe,color:#fff style Apps fill:#4facfe,stroke:#00f2fe,color:#fff style AudioApplet fill:#43e97b,stroke:#38f9d7,color:#fff style BluetoothApplet fill:#43e97b,stroke:#38f9d7,color:#fff style NetworkApplet fill:#43e97b,stroke:#38f9d7,color:#fff style Settings fill:#43e97b,stroke:#38f9d7,color:#fff style FileManager fill:#43e97b,stroke:#38f9d7,color:#fff
Backend (src-tauri/)
Estructura Tauri
Código fuente Rust"] TauriRoot --> Target["📁 target/
Compilación"] TauriRoot --> Tests["📁 tests/"] Src --> LibRs["📄 lib.rs
Módulos principales"] Src --> MainRs["📄 main.rs
Punto de entrada"] Src --> ErrorRs["📄 error.rs"] Src --> StructsRs["📄 structs.rs"] Src --> Commands["📁 commands/
Manejadores IPC"] Src --> WindowMgr["📁 window_manager/"] Src --> Audio["📁 audio.rs"] Src --> DBus["📁 dbus_service.rs"] Src --> Tray["📁 tray/"] Src --> Utils["📁 utils/"] Icons --> Icon128["🖼️ 128x128.png"] Icons --> Icon256["🖼️ 256x256.png"] Commands --> ModRs["📄 mod.rs"] Commands --> AudioCmd["📄 audio_commands.rs"] Commands --> BTCmd["📄 bluetooth_commands.rs"] WindowMgr --> WinCtrl["📄 window_controller.rs"] WindowMgr --> MonitorH["📄 monitor_handler.rs"] Tray --> TrayMod["📄 mod.rs"] Tray --> TrayIcon["📄 tray_icon.rs"] style TauriRoot fill:#667eea,stroke:#764ba2,color:#fff style CargoToml fill:#f093fb,stroke:#f5576c,color:#fff style CargoLock fill:#f093fb,stroke:#f5576c,color:#fff style BuildRs fill:#f093fb,stroke:#f5576c,color:#fff style TauriConf fill:#f093fb,stroke:#f5576c,color:#fff style Src fill:#4facfe,stroke:#00f2fe,color:#fff style Commands fill:#4facfe,stroke:#00f2fe,color:#fff style WindowMgr fill:#4facfe,stroke:#00f2fe,color:#fff style Tray fill:#4facfe,stroke:#00f2fe,color:#fff style Utils fill:#4facfe,stroke:#00f2fe,color:#fff
src-tauri/src/lib.rs
Define módulos principales:
|
|
src-tauri/src/main.rs
Punto de entrada simple:
|
|
src-tauri/src/commands/
Manejadores de comandos IPC:
|
|
src-tauri/src/window_manager/
Gestión de ventanas y monitores:
|
|
Módulos de Integración del Sistema
|
|
src-tauri/tauri.conf.json
Configuración de Tauri:
|
|
Configuración (/.)
package.json
Define scripts y dependencias del frontend:
|
|
Scripts disponibles:
bun run dev- Desarrollobun run build- Compilaciónbun run preview- Vista previa de buildbun run tauri- CLI de Tauri
tsconfig.json
Configuración de TypeScript:
|
|
vite.config.ts
Configuración de Vite:
|
|
Archivo .env
Variables de entorno (si existe):
|
|
Directorios Generados (No Commitear)
node_modules/
Dependencias del frontend (generadas por bun install):
|
|
Ignorado en: .gitignore
src-tauri/target/
Artefactos de compilación Rust:
|
|
Ignorado en: .gitignore
dist/
Build del frontend:
|
|
Generado por: npm run build
Patrones de Nombres
Componentes Vue
- PascalCase:
UserCard.vue,AudioControl.vue - Archivo debe coincidir con nombre del componente
Archivos Rust
- snake_case:
audio_commands.rs,window_controller.rs - Módulos coinciden con nombres de archivo
Rutas de Importación
|
|
Mejores Prácticas de Estructura
✅ Haz:
- Mantén componentes pequeños y enfocados
- Agrupa relacionados en carpetas
- Usa convenciones de nombres claras
- Documenta módulos complejos
❌ No hagas:
- Mezcles responsabilidades en un archivo
- Crees “carpetas misc” sin propósito
- Ignores la estructura establecida
- Crees mucha profundidad de carpetas