​DVHA：重新定义 Vue 中后台开发的无头框架

🏢 应用层（多租户）
├── 🎯 主管理端
└── 🔧 其他管理端

⚡ @duxweb/dvha-core 核心层
├── 🧭 路由管理
├── 💾 状态管理
├── 🔐 用户认证
├── 📊 数据处理
├── ⚙️ 配置中心
├── 🧩 通用组件
└── 📺 UI Hook

🎨 UI 框架层（随意搭配）
├── Element Plus
├── Ant Design Vue
├── Naive UI
└── 其他 UI 框架

// DVHA：业务逻辑完全独立
import { useAuth, useList } from '@duxweb/dvha-core'

// UI框架可以是任何东西，甚至可以随时更换

// 后天换成 Ant Design，还是一行不改
import { Table } from 'ant-design-vue'

// 今天用 Element Plus
import { ElTable } from 'element-plus'

// 明天换成 Naive UI，业务逻辑代码一行不改
import { NDataTable } from 'naive-ui'

const businessLogic = {
  data: useList('users'),
  auth: useAuth(),
  permissions: usePermission()
}

import { Button } from '@arco-design/web-vue' // Arco Design

// DVHA 核心层：只提供业务逻辑
import { useAuth, useList, usePermission } from '@duxweb/dvha-core'
// UI 层：你可以选择任何 Vue UI 框架
import { Button } from 'ant-design-vue' // Ant Design Vue
import { ElButton } from 'element-plus' // Element Plus
import { NButton } from 'naive-ui' // Naive UI
import { VBtn } from 'vuetify' // Vuetify
// 或者任何其他 Vue UI 框架，甚至自己写的组件

// 业务逻辑代码完全不变，只是 UI 组件不同
const { data, loading } = useList('users') // 核心逻辑保持一致

const config: IConfig = {
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin', // 主后台
      title: '管理后台',
      routePrefix: '/admin',
    },
    {
      name: 'merchant', // 商户后台
      title: '商户中心',
      routePrefix: '/merchant',
    },
    {
      name: 'agent', // 代理商后台
      title: '代理商平台',
      routePrefix: '/agent',
    }
  ]
}

// 简单配置即可拥有完整认证系统
authProvider: simpleAuthProvider({
  apiPath: {
    login: '/api/login',
    check: '/api/user/info',
    logout: '/api/logout'
  },
  routePath: {
    login: '/login',
    index: '/dashboard'
  }
})

// 一行代码搞定列表数据
const { data, loading, refresh } = useList('users')

// 一行代码搞定表单提交
const { submit, loading: submitting } = useCreate('users', {
  onSuccess: () => message.success('创建成功')
})

// 配置多语言
const i18nConfig = {
  locale: 'zh-CN',
  messages: {
    'zh-CN': { welcome: '欢迎' },
    'en-US': { welcome: 'Welcome' }
  }
}

interface User {
  id: number
  name: string
  email: string
}

// 完整的类型推导和提示
const { data } = useList<User>('users')
// data 的类型自动推导为 User[]

npm install @duxweb/dvha-core

import { createDux, simpleAuthProvider, simpleDataProvider } from '@duxweb/dvha-core'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

const config = {
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin',
      title: 'DVHA 管理系统',
      routePrefix: '/admin',
      components: {
        authLayout: () => import('./layouts/AuthLayout.vue'),
        notFound: () => import('./pages/404.vue'),
      },
      menus: [
        {
          name: 'dashboard',
          path: 'dashboard',
          icon: 'i-tabler:dashboard',
          label: '仪表板',
          component: () => import('./pages/Dashboard.vue'),
        },
        {
          name: 'users',
          path: 'users',
          icon: 'i-tabler:users',
          label: '用户管理',
          component: () => import('./pages/Users.vue'),
        }
      ]
    }
  ],
  dataProvider: simpleDataProvider({
    apiUrl: 'https://api.example.com'
  }),
  authProvider: simpleAuthProvider(),
}

app.use(createDux(config))
app.mount('#app')

<script setup lang="ts">
import { useList } from '@duxweb/dvha-core'

interface User {
  id: number
  name: string
  email: string
}

const { data, loading, refresh } = useList<User>('users')
</script>

<template>
  <div>
    <div v-if="loading">
      加载中...
    </div>
    <div v-else>
      <div v-for="user in data" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </div>
    </div>
  </div>
</template>

import { createDux } from '@duxweb/dvha-core'
import { ElButton, ElTable } from 'element-plus' // 直接使用任何 UI 框架

// 完全自由的组合，无需额外插件

import { elementUIPlugin } from '@duxweb/dvha-elementui'
import { naiveUIPlugin } from '@duxweb/dvha-naiveui'

app.use(naiveUIPlugin) // 提供一些便捷封装
app.use(elementUIPlugin) // 简化常用组件的调用

const dataProviderConfig = {
  default: simpleDataProvider({ apiUrl: 'https://api.example.com' }),
  analytics: simpleDataProvider({ apiUrl: 'https://analytics.example.com' }),
  payment: simpleDataProvider({ apiUrl: 'https://payment.example.com' })
}

// 多年来我们在中后台开发中遇到的核心问题
const duxExperience = {
  userManagement: '复杂的用户权限体系设计',
  multiTenant: '多租户架构的最佳实践',
  dataFlow: '大数据量下的性能优化',
  uiConsistency: 'UI框架升级带来的维护成本',
  teamCollaboration: '前后端分离的协作模式'
}

const dvhaPhilosophy = {
  separation: '彻底分离业务逻辑与UI表现',
  reusability: '让每一行业务代码都能复用',
  flexibility: '适应而不是限制开发者的选择',
  sustainability: '构建可持续发展的技术架构'
}