DVHA Framework

DVHA is a Vue 3-based frontend framework specifically designed for mid-to-back-office (B-side) systems. Unlike traditional frameworks that rely heavily on local code compilation and static page definitions, DVHA focuses on a "lightweight" development experience by providing a skeleton for common administrative tasks.

Core Capabilities

DVHA provides built-in support for:

• Routing & Menus: Handles complex routing and menu structures.
• Authentication & Permissions: Unified logic for login and access control.
• Multi-Admin Support: Native capability to manage multiple administrative portals (e.g., /admin, /merchant, /user, /agent) without splitting logic manually later.
• Dynamic Rendering: Supports JSON Schema-driven forms and remote/dynamic pages.

Ideal Use Cases

You should choose DVHA if your project requires:

• Multiple Admin Portals: Projects with different roles (Merchant, Agent, Admin) needing separate menus, themes, or permissions.
• Dynamic Extensions: Scenarios where pages, menus, or forms are delivered via server-side APIs or JSON Schema.
• Reduced Compilation Overhead: When you want to avoid frequent re-compilation/re-bundling for minor configuration changes (e.g., changing a menu item or a remote page).
• UI Flexibility: When you want to choose your own UI library (e.g., Naive UI, Element Plus) rather than being locked into a framework-specific component set.

DVHA is a flexible Vue-based framework designed specifically for mid-to-back-office (admin) development. Unlike traditional heavy frameworks, DVHA focuses on reducing compilation overhead and increasing flexibility through several core capabilities:

• Reduced Compilation: Supports remote pages, asynchronous menus, and JSON Schema dynamic rendering, allowing much of the logic to be driven by configuration rather than local code changes.
• Built-in Multi-Management Support: Native support for multiple management portals (e.g., /admin, /merchant, /user) within a single project, each with its own route prefix, menus, login methods, API prefixes, and themes.
• Headless UI Approach: Does not force a specific UI library. You can compose your own UI using Naive UI, Element Plus, custom business components, or the DVHA Pro component package.
• Core Capabilities: Provides built-in support for authentication, permissions, routing, menus, lists, forms, and details.

DVHA is a lightweight Vue-based framework designed for mid-to-large scale back-office (admin) systems. Its primary goal is to reduce compilation overhead and increase flexibility through the following features:

• Reduced Compilation: Supports remote pages, asynchronous menus, and JSON Schema to allow updates without constant rebuilding.
• Multi-Terminal Support: Built-in capability to manage multiple independent back-office terminals (e.g., admin, merchant, user) within a single project.
• UI Library Agnostic: Does not force a specific UI library; you can freely combine Naive UI, Element Plus, or your own business components.
• Back-office Ready: Provides reusable logic for common high-frequency tasks like login, permissions, menus, routing, lists, and forms.
• Dynamic Extensibility: Highly configurable and suitable for long-term maintenance and gradual expansion into complex systems.

The useExtendList hook is an advanced version of useList. It builds upon basic list functionality by adding high-level management features suitable for administrative interfaces, including:

• Selection Management: Row selection, select all, and deselect all.
• Batch Export: Support for exporting all data or only selected data (CSV format).
• Batch Import: Support for CSV file imports with progress feedback.
• Batch Operations: Encapsulated batch API calls.
• Automatic Refresh: Built-in countdown for automatic data refreshing.
• Smart Pagination: Dynamic calculation of pagination size options.
• Status Management: Comprehensive tracking of loading, selection, exporting, importing, and batching states.

import { useExtendList } from '@duxweb/dvha-core'

const {
  list,
  isLoading,
  checkeds,
  onExport,
  onImport,
  toggleChecked
} = useExtendList({
  path: 'users'
})

The IConfig interface defines the global configuration for your entire project. It acts as the default setting for all management consoles (manages) within the application.

Key configuration areas include:

• Basic Info: title, description, copyright, and lang.
• Multi-Management: defaultManage (the entry point) and manages (the list of available consoles).
• Core Capabilities: dataProvider (API requests), authProvider (authentication), and i18nProvider (internationalization).
• UI/UX: components (layouts), routes (additional routes), and theme (branding).
• Advanced: remote (remote page packages) and jsonSchema (schema component mapping).
• Custom Data: extends for arbitrary business parameters.

import type { IConfig } from '@duxweb/dvha-core'
import { createDux, i18nProvider, simpleAuthProvider, simpleDataProvider } from '@duxweb/dvha-core'

const dataProvider = simpleDataProvider({
  apiUrl: 'https://api.example.com'
})

const config: IConfig = {
  title: '我的管理系统',
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin',
      title: '管理后台',
      routePrefix: '/admin',
      apiBasePath: '/admin',
    }
  ],
  dataProvider,
  authProvider: simpleAuthProvider(),
  i18nProvider: i18nProvider({
    locale: 'zh-CN',
    fallbackLocale: 'en-US',
    messages: {
      'zh-CN': { welcome: '欢迎' },
      'en-US': { welcome: 'Welcome' }
    }
  }),
}

DVHA supports multi-management side (multi-manage) architectures through two primary isolation strategies: Role-Based Access Control (RBAC) and Manage-Based Access Control.

Role-Based Access Control (RBAC)

Define distinct role hierarchies for different management sides (e.g., admin, merchant, user). Permissions can be applied to menu configurations using a permissions array in the meta object.

Manage-Based Access Control

Restrict access to entire management sides by checking if a user has the required management context. This is typically implemented via middleware or within data providers to ensure users cannot access unauthorized management APIs.

// RBAC: Define role hierarchies
const rolePermissions = {
  admin: {
    'super_admin': ['*'],
    'system_admin': ['user.read', 'user.write']
  },
  merchant: {
    'shop_owner': ['product.*', 'order.*']
  }
};

// RBAC: Apply to menu configuration
const adminMenus = [
  {
    name: 'users',
    meta: { permissions: ['user.read'] }
  }
];

// Manage-Based: Permission check middleware
const checkManagePermission = (manage, user) => {
  const userManages = user.manages || []
  if (!userManages.includes(manage.config.name)) {
    throw new Error(`User has no permission to access ${manage.config.name} management side`)
  }
  return true
}