Skip to content

Project Structure โ€‹

โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ api                     # API related code
โ”‚   โ”‚   โ”œโ”€โ”€ articleApi.ts       # Article-related API definitions (e.g., get article list, publish article, etc.)
โ”‚   โ”‚   โ”œโ”€โ”€ menuApi.ts          # Menu-related API definitions (e.g., get dynamic menu data)
โ”‚   โ”‚   โ”œโ”€โ”€ modules             # API modularization directory, storing API definitions for specific domains (e.g., users, orders, etc.)
โ”‚   โ”‚   โ””โ”€โ”€ usersApi.ts         # User-related API definitions (e.g., login, registration, user information)
โ”‚   โ”œโ”€โ”€ App.vue                 # Vue root component, defining the global structure and entry point of the application
โ”‚   โ”œโ”€โ”€ assets                  # Static resources directory
โ”‚   โ”‚   โ”œโ”€โ”€ fonts               # Font files (e.g., custom fonts or icon fonts)
โ”‚   โ”‚   โ”œโ”€โ”€ icons               # Icon files (may include PNG, SVG, and other icon formats)
โ”‚   โ”‚   โ”œโ”€โ”€ img                 # Image resources (e.g., background images, logos, etc.)
โ”‚   โ”‚   โ”œโ”€โ”€ styles              # Global CSS/SCSS style files (e.g., variables, themes, common styles)
โ”‚   โ”‚   โ””โ”€โ”€ svg                 # SVG icon resources (typically used for vector icons)
โ”‚   โ”œโ”€โ”€ components              # Components directory
โ”‚   โ”‚   โ”œโ”€โ”€ core                # System components (system component library)
โ”‚   โ”‚   โ””โ”€โ”€ custom              # Custom components (developer component library)
โ”‚   โ”œโ”€โ”€ composables             # Vue 3 Composable functions, encapsulating reusable logic
โ”‚   โ”‚   โ”œโ”€โ”€ useAuth.ts          # Authentication-related logic (e.g., login status, permission checks)
โ”‚   โ”‚   โ”œโ”€โ”€ useCeremony.ts      # Logic related to specific ceremonies/activities (e.g., holiday events)
โ”‚   โ”‚   โ”œโ”€โ”€ useChart.ts         # Chart-related logic (e.g., ECharts or Chart.js configuration)
โ”‚   โ”‚   โ”œโ”€โ”€ useCheckedColumns.ts # Table column selection logic (e.g., dynamically show/hide columns)
โ”‚   โ”‚   โ”œโ”€โ”€ useCommon.ts        # Common Composable functions (e.g., utility method collections)
โ”‚   โ”‚   โ”œโ”€โ”€ useSystemInfo.ts    # System information-related logic (e.g., version number, environment configuration)
โ”‚   โ”‚   โ””โ”€โ”€ useTheme.ts         # Theme switching logic (e.g., dark mode, theme color switching)
โ”‚   โ”œโ”€โ”€ config                  # Project configuration directory
โ”‚   โ”‚   โ”œโ”€โ”€ assets              # Static resource configuration (e.g., image paths, CDN addresses)
โ”‚   โ”‚   โ”œโ”€โ”€ festival.ts         # Holiday/activity-related configuration (e.g., holiday themes, schedules)
โ”‚   โ”‚   โ””โ”€โ”€ index.ts            # Global configuration file (e.g., system name, API base URL)
โ”‚   โ”œโ”€โ”€ directives              # Vue custom directives
โ”‚   โ”‚   โ”œโ”€โ”€ highlight.ts        # Highlight directive (e.g., text or element highlighting effects)
โ”‚   โ”‚   โ”œโ”€โ”€ index.ts            # Directive entry file, exporting all directives
โ”‚   โ”‚   โ”œโ”€โ”€ permission.ts       # Permission directive (e.g., controlling element display based on user permissions)
โ”‚   โ”‚   โ””โ”€โ”€ ripple.ts           # Ripple effect directive (typically used for button click effects)
โ”‚   โ”œโ”€โ”€ enums                   # Enum definitions
โ”‚   โ”‚   โ”œโ”€โ”€ appEnum.ts          # Application-level enums (e.g., theme types, language types)
โ”‚   โ”‚   โ””โ”€โ”€ formEnum.ts         # Form-related enums (e.g., form states, validation rules)
โ”‚   โ”œโ”€โ”€ env.d.ts                # TypeScript environment declaration file (e.g., Vite environment variable types)
โ”‚   โ”œโ”€โ”€ locales                 # Internationalization (i18n) resources
โ”‚   โ”‚   โ”œโ”€โ”€ index.ts            # Internationalization entry file, configuring the i18n plugin
โ”‚   โ”‚   โ””โ”€โ”€ langs               # Multi-language files (e.g., en.json, zh.json)
โ”‚   โ”œโ”€โ”€ main.ts                 # Project main entry file, initializing Vue application, router, state management, etc.
โ”‚   โ”œโ”€โ”€ mock                    # Mock data directory, used for development or testing environments
โ”‚   โ”‚   โ”œโ”€โ”€ json                # JSON format Mock data (e.g., simulated API responses)
โ”‚   โ”‚   โ”œโ”€โ”€ temp                # Temporary Mock data or test cases
โ”‚   โ”‚   โ””โ”€โ”€ upgrade             # Update log-related Mock data
โ”‚   โ”œโ”€โ”€ router                  # Vue Router related code
โ”‚   โ”‚   โ”œโ”€โ”€ guards              # Route guards (e.g., authentication, permission control)
โ”‚   โ”‚   โ”œโ”€โ”€ index.ts            # Router main entry, initializing the router
โ”‚   โ”‚   โ”œโ”€โ”€ routes              # Route definitions (e.g., static routes, dynamic routes)
โ”‚   โ”‚   โ”œโ”€โ”€ routesAlias.ts      # Route alias definitions (e.g., path constants or redirect mappings)
โ”‚   โ”‚   โ””โ”€โ”€ utils               # Router utility functions (e.g., dynamic route registration, menu conversion)
โ”‚   โ”œโ”€โ”€ store                   # Pinia state management
โ”‚   โ”‚   โ”œโ”€โ”€ index.ts            # Pinia store entry, initializing the store
โ”‚   โ”‚   โ””โ”€โ”€ modules             # Modular state management (e.g., user, settings)
โ”‚   โ”œโ”€โ”€ types                   # TypeScript type definitions
โ”‚   โ”‚   โ”œโ”€โ”€ api                 # API-related types (e.g., request/response interfaces)
โ”‚   โ”‚   โ”œโ”€โ”€ auto-imports.d.ts   # Auto-imported type declarations (e.g., generated by Vite plugins)
โ”‚   โ”‚   โ”œโ”€โ”€ common              # Common type definitions (e.g., utility types, interfaces)
โ”‚   โ”‚   โ”œโ”€โ”€ component           # Component-related types (e.g., Props, Emits)
โ”‚   โ”‚   โ”œโ”€โ”€ components.d.ts     # Global component type declarations (auto-generated by Vite)
โ”‚   โ”‚   โ”œโ”€โ”€ config              # Configuration-related types (e.g., system configuration, environment variables)
โ”‚   โ”‚   โ”œโ”€โ”€ index.ts            # Type definition entry, exporting all types
โ”‚   โ”‚   โ”œโ”€โ”€ router              # Router-related types (e.g., RouteRecordRaw extensions)
โ”‚   โ”‚   โ””โ”€โ”€ store               # State management-related types (e.g., Pinia store definitions)
โ”‚   โ”œโ”€โ”€ utils                   # Utility function directory
โ”‚   โ”‚   โ”œโ”€โ”€ browser             # Browser-related utilities (e.g., detecting browser type, DOM operations)
โ”‚   โ”‚   โ”œโ”€โ”€ constants           # Constant definitions (e.g., API status codes, configuration values)
โ”‚   โ”‚   โ”œโ”€โ”€ dataprocess         # Data processing utilities (e.g., formatting, filtering, conversion)
โ”‚   โ”‚   โ”œโ”€โ”€ http                # HTTP request utilities (e.g., Axios encapsulation)
โ”‚   โ”‚   โ”œโ”€โ”€ index.ts            # Utility function entry, exporting all utilities
โ”‚   โ”‚   โ”œโ”€โ”€ navigation          # Navigation-related utilities (e.g., route jumping, page switching)
โ”‚   โ”‚   โ”œโ”€โ”€ storage             # Storage-related utilities (e.g., localStorage, sessionStorage)
โ”‚   โ”‚   โ”œโ”€โ”€ sys                 # System-related utilities (e.g., getting device information, system configuration)
โ”‚   โ”‚   โ”œโ”€โ”€ theme               # Theme-related utilities (e.g., dynamically switching CSS variables)
โ”‚   โ”‚   โ”œโ”€โ”€ ui                  # UI-related utilities (e.g., popup, notification encapsulation)
โ”‚   โ”‚   โ””โ”€โ”€ validation          # Form validation utilities (e.g., regular expressions, validation rules)
โ”‚   โ””โ”€โ”€ views                   # Page component directory
โ”‚       โ”œโ”€โ”€ article             # Article-related pages (e.g., article list, details)
โ”‚       โ”œโ”€โ”€ auth                # Authentication-related pages (e.g., login, registration, forgot password)
โ”‚       โ”œโ”€โ”€ change              # Update log pages (e.g., version records, change notes)
โ”‚       โ”œโ”€โ”€ dashboard           # Dashboard pages (e.g., data overview, statistical charts)
โ”‚       โ”œโ”€โ”€ exception           # Exception pages (e.g., 404, 500 error pages)
โ”‚       โ”œโ”€โ”€ index               # Layout pages (e.g., Layout component, including header, sidebar)
โ”‚       โ”œโ”€โ”€ outside             # External pages (e.g., iframe embedded external content)
โ”‚       โ”œโ”€โ”€ result              # Result pages (e.g., operation success, failure prompts)
โ”‚       โ”œโ”€โ”€ safeguard           # Security-related pages (e.g., permission management, security settings)
โ”‚       โ”œโ”€โ”€ system              # System management pages (e.g., user management, role management)
โ”‚       โ”œโ”€โ”€ template            # Template pages (reusable page templates)
โ”‚       โ””โ”€โ”€ widgets             # Widget pages (e.g., independent functional modules, micro-pages)
โ”œโ”€โ”€ tsconfig.json               # TypeScript configuration file, defining compilation options
โ””โ”€โ”€ vite.config.ts              # Vite configuration file, defining build, development server, plugins, etc.

Released under the MIT License