### Install Dependencies and Start Project

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/pro/getting-started.md

After initializing the project, run these commands to install dependencies and start the development server. This will launch a basic, runnable Pro backend project.

```bash
pnpm install
pnpm dev
```

--------------------------------

### Minimal DVHA Core Setup Example

Source: https://github.com/duxweb/dvha/blob/main/README.md

This example demonstrates the basic setup for DVHA Core, including defining manages, routes, menus, and configuring data and authentication providers. Ensure you have Vue and TypeScript set up.

```typescript
import type { IConfig } from '@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: IConfig = {
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin',
      title: 'DVHA 后台管理系统',
      routePrefix: '/admin',
      routes: [
        {
          name: 'admin.login',
          path: 'login',
          component: () => import('./pages/login.vue'),
          meta: { authorization: false },
        },
      ],
      menus: [
        {
          name: 'home',
          path: 'index',
          icon: 'i-tabler:home',
          label: '首页',
          component: () => import('./pages/home.vue'),
        },
      ],
    },
  ],
  dataProvider: simpleDataProvider({
    apiUrl: 'https://api.example.com',
  }),
  authProvider: simpleAuthProvider(),
}

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

--------------------------------

### Development Setup and Testing

Source: https://github.com/duxweb/dvha/blob/main/packages/template/README.md

Commands for installing dependencies, running local tests, and using npm for development.

```bash
# 安装依赖
bun install

# 本地测试
bun run bin/index.js init test-project

# 或者使用 npm
npm install
node bin/index.js init test-project
```

--------------------------------

### Global Installation and Usage

Source: https://github.com/duxweb/dvha/blob/main/packages/template/README.md

Install the template globally and then use the command directly to initialize a project.

```bash
# 安装到全局
npm install -g @duxweb/dvha-template

# 然后可以直接使用
duxweb-dvha init my-project
```

--------------------------------

### Basic Redirect Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/router/redirect.md

Use `useRouter` and `useManage` to push a new route with a management prefix. Ensure `@duxweb/dvha-core` is installed.

```typescript
import { useRouter } from 'vue-router'
import { useManage } from '@duxweb/dvha-core'

const router = useRouter()
const manage = useManage()

router.push(manage.getRoutePath('users'))
```

--------------------------------

### Get Manage Configuration with Examples

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/guide/config.md

Shows how to use `useManage` to get current manage settings, including feature flags like `register` and `forgotPassword`, and display the manage title.

```typescript
// 获取当前管理端配置
import { useManage } from '@duxweb/dvha-core'
const manage = useManage()

// 根据功能开关显示/隐藏按钮
const showRegister = manage.register // false
const showForgotPassword = manage.forgotPassword // true

// 显示管理端标题
console.log(manage.title) // '管理后台'
```

--------------------------------

### Get Theme Configuration with Examples

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/guide/config.md

Illustrates fetching theme configuration, specifically the logo, using the `useTheme` hook.

```typescript
// 获取主题配置
import { useTheme } from '@duxweb/dvha-core'
const theme = useTheme()

// 获取当前主题的 Logo
console.log(theme.logo) // '/images/logo.png'
```

--------------------------------

### Install Dependencies

Source: https://github.com/duxweb/dvha/blob/main/apps/cdn/README.md

Run this command in your terminal to install all necessary project dependencies.

```bash
npm install
```

--------------------------------

### Get Global Configuration with Examples

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/guide/config.md

Demonstrates how to fetch global configuration using `useConfig` and access specific properties like `title` and `extends.analytics.enabled`.

```typescript
// 获取全局配置
import { useConfig } from '@duxweb/dvha-core'
const config = useConfig()

// 在模板中显示应用标题
console.log(config.title) // '我的管理系统'

// 获取扩展配置
console.log(config.extends?.analytics?.enabled) // true
```

--------------------------------

### GET Request Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/system/useClient.md

An example of how to perform a GET request using the `request` function obtained from the `useClient` hook to fetch statistical data.

```APIDOC
## GET Request Example

### Description
This example demonstrates how to use the `request` function to perform a GET request to retrieve statistical data. It includes basic error handling.

### Method
GET

### Endpoint
`/api/statistics`

### Query Parameters
- **period** (string) - Required - The time period for the statistics (e.g., 'month').
- **category** (string) - Required - The category of statistics to retrieve (e.g., 'sales').

### Request Example

```js
import { useClient } from '@duxweb/dvha-core'

const { request } = useClient()

// GET Request
const fetchData = async () => {
  try {
    const response = await request({
      path: '/api/statistics',
      method: 'GET',
      query: {
        period: 'month',
        category: 'sales'
      }
    })

    console.log('Statistics data:', response.data)
    return response.data
  } catch (error) {
    console.error('Request failed:', error)
    throw error
  }
}
```

### Response
#### Success Response (200)
- **data** (any) - The statistical data returned from the server.
```

--------------------------------

### Basic Single Manage Configuration Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/guide/config.md

Provides a comprehensive example of setting up a single manage configuration, including title, default manage, feature flags, components, menus, extended configurations, data providers, and i18n.

```typescript
import { i18nProvider } from '@duxweb/dvha-core'
import enUS from './locales/en-US.json'
import zhCN from './locales/zh-CN.json'

// 创建数据提供者
const dataProvider = simpleDataProvider({
  apiUrl: 'https://api.example.com'
})

const config: IConfig = {
  title: '企业管理系统',
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin',
      title: '管理后台',
      routePrefix: '/admin',

      // 功能开关 - 供组件调用
      forgotPassword: true,
      updatePassword: true,

      components: {
        authLayout: () => import('./layouts/AdminLayout.vue'),
        notFound: () => import('./pages/404.vue'),
      },
      menus: [
        {
          name: 'dashboard',
          label: '仪表板',
          path: 'index',
          icon: 'i-tabler:dashboard',
          component: () => import('./pages/Dashboard.vue'),
        },
        {
          name: 'users',
          label: '用户管理',
          path: 'users',
          icon: 'i-tabler:users',
          component: () => import('./pages/Users.vue'),
        },
      ]
    }
  ],

  // 扩展配置 - 供组件调用
  extends: {
    analytics: {
      enabled: true,
      trackingId: 'GA-XXXXXXXX',
    },
  },

  dataProvider,
  authProvider: simpleAuthProvider(),

  // 全局国际化配置
  i18nProvider: i18nProvider({
    locale: 'zh-CN',
    fallbackLocale: 'en-US',
    messages: {
      'zh-CN': zhCN,
      'en-US': enUS
    }
  }),
}
```

--------------------------------

### Start Development Server

Source: https://github.com/duxweb/dvha/blob/main/apps/cdn/README.md

Use this command to launch the local development server for testing and development.

```bash
npm run dev
```

--------------------------------

### Basic Upload Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useUpload.md

A practical example demonstrating how to use the useUpload hook for basic file uploads with manual control.

```javascript
import { useUpload } from '@duxweb/dvha-core'

const { uploadFiles, open, trigger, isUploading, progress } = useUpload({
  path: 'upload',
  maxFileSize: 5 * 1024 * 1024, // 5MB
  maxFileCount: 3,
  multiple: true,
  autoUpload: false, // Manual upload control
  onSuccess: (data) => {
    console.log('File upload successful:', data)
  },
  onError: (error) => {
    console.error('Upload failed:', error.message)
  }
})

// Function to select files
function selectFiles() {
  open()
}

// Function to start the upload
function startUpload() {
  if (uploadFiles.value.length === 0) {
    alert('Please select files first')
    return
  }
  trigger()
}

// Watch for progress updates
watchEffect(() => {
  const progress = overallProgress.value
  console.log(`Progress: ${progress.totalPercent}% (${progress.index}/${progress.totalFiles})`)
})
```

--------------------------------

### Install DVHA Core Package

Source: https://github.com/duxweb/dvha/blob/main/README.md

Use npm, yarn, or pnpm to install the `@duxweb/dvha-core` package.

```bash
# npm
npm install @duxweb/dvha-core

# yarn
yarn add @duxweb/dvha-core

# pnpm
pnpm add @duxweb/dvha-core
```

--------------------------------

### Complete Application Example with useJson

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useJson.md

This example demonstrates a complete application built with the useJson hook. It includes state management, business logic, event handlers, and dynamic schema generation for the UI. Ensure all necessary Naive UI components and Vue reactivity functions are imported.

```vue
<script setup lang="ts">
import { useJsonSchema } from '@duxweb/dvha-core'
import {
  NAlert,
  NButton,
  NCard,
  NCheckbox,
  NInput,
  NSelect,
  NSpace,
  NSwitch,
  NTag
} from 'naive-ui'
import { computed, reactive } from 'vue'

// 应用状态
const appState = reactive({
  user: {
    name: '张三',
    role: 'admin',
    permissions: ['read', 'write', 'delete']
  },
  settings: {
    theme: 'light',
    notifications: true,
    language: 'zh-CN'
  },
  data: {
    products: [
      { id: 1, name: '产品A', price: 100, status: 'active' },
      { id: 2, name: '产品B', price: 200, status: 'inactive' }
    ],
    categories: ['电子产品', '服装', '图书']
  }
})

// 业务逻辑
const business = {
  hasPermission: permission => appState.user.permissions.includes(permission),
  formatPrice: price => `¥${price.toFixed(2)}`,
  getStatusColor: status => status === 'active' ? 'success' : 'error',
  getStatusText: status => status === 'active' ? '启用' : '禁用'
}

// 事件处理
const actions = {
  toggleTheme: () => {
    appState.settings.theme = appState.settings.theme === 'light' ? 'dark' : 'light'
  },
  editProduct: (product) => {
    console.log('编辑产品:', product)
  },
  deleteProduct: (product) => {
    const index = appState.data.products.findIndex(p => p.id === product.id)
    if (index > -1) {
      appState.data.products.splice(index, 1)
    }
  },
  addProduct: () => {
    const newProduct = {
      id: Date.now(),
      name: `产品${appState.data.products.length + 1}`,
      price: Math.floor(Math.random() * 500) + 50,
      status: 'active'
    }
    appState.data.products.push(newProduct)
  }
}

// 动态 Schema
const appSchema = computed(() => [
  {
    tag: 'div',
    attrs: {
      class: 'app-container'
    },
    children: [
      // 标题栏
      {
        tag: 'n-card',
        attrs: {
          title: `欢迎，${appState.user.name}`,
          class: 'header-card'
        },
        children: [
          {
            tag: 'n-space',
            attrs: {
              justify: 'space-between'
            },
            children: [
              {
                tag: 'div',
                children: [
                  {
                    tag: 'n-tag',
                    attrs: {
                      type: 'info'
                    },
                    children: `角色：${appState.user.role}`
                  }
                ]
              },
              {
                tag: 'n-space',
                children: [
                  {
                    tag: 'n-switch',
                    attrs: {
                      'v-model:value': [appState.settings, 'notifications']
                    }
                  },
                  {
                    tag: 'span',
                    children: '通知'
                  },
                  {
                    tag: 'n-button',
                    attrs: {
                      '@click': actions.toggleTheme
                    },
                    children: `切换到 ${appState.settings.theme === 'light' ? '暗色' : '亮色'} 主题`
                  }
                ]
              }
            ]
          }
        ]
      },

```

--------------------------------

### Minimal DVHA Pro Integration Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/pro/installation.md

A basic Vue.js application setup demonstrating the integration of DVHA Core and DVHA Pro. This includes registering core functionalities, Pro features, and essential layout components.

```typescript
import { createApp } from 'vue'
import { createDux, i18nProvider, simpleAuthProvider, simpleDataProvider } from '@duxweb/dvha-core'
import { createDuxPro, DuxApp, DuxAuthLayout, DuxLayout, DuxLoginPage, DuxPage404, DuxPage403, DuxPage500 } from '@duxweb/dvha-pro'

import '@duxweb/dvha-pro/style.css'

const app = createApp(DuxApp)

app.use(createDux({
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin',
      title: '管理后台',
      routePrefix: '/admin',
      components: {
        authLayout: DuxAuthLayout,
        noAuthLayout: DuxLayout,
        notFound: DuxPage404,
        notAuthorized: DuxPage403,
        error: DuxPage500,
      },
      routes: [
        {
          name: 'admin.login',
          path: 'login',
          component: DuxLoginPage,
          meta: { authorization: false },
        },
      ],
    },
  ],
  dataProvider: simpleDataProvider({ apiUrl: 'https://api.example.com' }),
  authProvider: simpleAuthProvider(),
  i18nProvider: i18nProvider({ locale: 'zh-CN', fallbackLocale: 'en-US' }),
}))

app.use(createDuxPro())
app.mount('#app')
```

--------------------------------

### Basic useInfiniteList Hook Usage

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/data/useInfiniteList.md

Demonstrates the basic setup for the useInfiniteList hook, initializing it with a required path to fetch posts.

```javascript
import { useInfiniteList } from '@duxweb/dvha-core'

const { 
  data,
  isLoading,
  hasNextPage,
  fetchNextPage
} = useInfiniteList({
  path: 'posts'
})
```

--------------------------------

### Main Configuration Setup

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/guide/custom-extension.md

Assemble the main configuration by importing remote, JSON schema, and project-specific extensions. Also define managed modules like the admin backend.

```typescript
import { jsonSchemaConfig } from './extensions/json-schema'
import { projectExtends } from './extensions/project'
import { remoteConfig } from './extensions/remote'

const config: IConfig = {
  remote: remoteConfig,
  jsonSchema: jsonSchemaConfig,
  extends: projectExtends,
  manages: [
    {
      name: 'admin',
      title: '管理后台',
    },
  ],
}
```

--------------------------------

### simpleAuthProvider Usage

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/providers/auth.md

Example of how to initialize and use the `simpleAuthProvider` with custom API and route paths.

```APIDOC
## simpleAuthProvider Initialization

### Description
Demonstrates the initialization of a `simpleAuthProvider` instance, configuring API endpoints for login and check, and route paths for login and the main index page.

### Usage
```typescript
import { simpleAuthProvider } from '@duxweb/dvha-core'

const authProvider = simpleAuthProvider({
  apiPath: {
    login: '/login',
    check: '/check',
  },
  routePath: {
    login: '/login',
    index: '/',
  },
  dataProviderName: 'default',
})
```

### Configuration
This `authProvider` instance can be included in the application's configuration or overridden in specific management interfaces.
```

--------------------------------

### POST Request Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/system/useClient.md

An example illustrating how to send data using a POST request with the `request` function from the `useClient` hook, suitable for form submissions.

```APIDOC
## POST Request Example

### Description
This example shows how to use the `request` function to send data via a POST request, commonly used for submitting forms. It includes setting custom headers.

### Method
POST

### Endpoint
`/api/forms/submit`

### Request Body
- **formData** (object) - Required - The data to be submitted in the request body.

### Headers
- **Content-Type** (string) - Required - Specifies the format of the request body, e.g., `application/json`.

### Request Example

```js
import { useClient } from '@duxweb/dvha-core'

const { request } = useClient()

// POST Request
const submitForm = async (formData) => {
  try {
    const response = await request({
      path: '/api/forms/submit',
      method: 'POST',
      payload: formData,
      headers: {
        'Content-Type': 'application/json'
      }
    })

    console.log('Submission result:', response.data)
    return response.data
  } catch (error) {
    console.error('Submission failed:', error)
    throw error
  }
}

// Usage example
const formData = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  message: 'This is a test message'
}

submitForm(formData)
```

### Response
#### Success Response (200)
- **data** (any) - The result of the form submission.
```

--------------------------------

### Install DVHA Core and UnoCSS Dependencies

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/guide/init.md

Navigate to your project directory and install the DVHA core package along with UnoCSS for styling and its related dependencies. Also, install Iconify for icon support and the Vue JSX plugin.

```bash
cd my-dvha-app

# Install DVHA core package
bun add @duxweb/dvha-core

# Install UnoCSS related dependencies
bun add -D unocss @unocss/reset @unocss/preset-icons

# Install icon package
bun add -D @iconify-json/tabler

# Install necessary dependencies
bun add -D @vitejs/plugin-vue-jsx

# Optional dependencies (install as needed)
# bun add @vueuse/core @vueuse/integrations axios lodash-es
```

```bash
cd my-dvha-app

# Install DVHA core package
npm install @duxweb/dvha-core

# Install UnoCSS related dependencies
npm install -D unocss @unocss/reset @unocss/preset-icons

# Install icon package
npm install -D @iconify-json/tabler

# Install necessary dependencies
npm install -D @vitejs/plugin-vue-jsx

# Optional dependencies (install as needed)
# npm install @vueuse/core @vueuse/integrations axios lodash-es
```

```bash
cd my-dvha-app

# Install DVHA core package
yarn add @duxweb/dvha-core

# Install UnoCSS related dependencies
yarn add -D unocss @unocss/reset @unocss/preset-icons

# Install icon package
yarn add -D @iconify-json/tabler

# Install necessary dependencies
yarn add -D @vitejs/plugin-vue-jsx

# Optional dependencies (install as needed)
# yarn add @vueuse/core @vueuse/integrations axios lodash-es
```

```bash
cd my-dvha-app

# Install DVHA core package
pnpm add @duxweb/dvha-core

# Install UnoCSS related dependencies
pnpm add -D unocss @unocss/reset @unocss/preset-icons

# Install icon package
pnpm add -D @iconify-json/tabler

# Install necessary dependencies
pnpm add -D @vitejs/plugin-vue-jsx

# Optional dependencies (install as needed)
# pnpm add @vueuse/core @vueuse/integrations axios lodash-es
```

--------------------------------

### Performing a GET Request with useClient

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/system/useClient.md

Demonstrates how to perform a GET request using the request function, passing query parameters for filtering or specifying data.

```javascript
import { useClient } from '@duxweb/dvha-core'

const { request } = useClient()

// GET 请求
const fetchData = async () => {
  try {
    const response = await request({
      path: '/api/statistics',
      method: 'GET',
      query: {
        period: 'month',
        category: 'sales'
      }
    })

    console.log('统计数据:', response.data)
    return response.data
  } catch (error) {
    console.error('请求失败:', error)
    throw error
  }
}
```

--------------------------------

### Edit Form Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useForm.md

This example demonstrates how to use useForm for editing existing resources. The hook automatically fetches and populates form data based on the provided ID.

```javascript
import { useForm } from '@duxweb/dvha-core'

const userId = ref(1)

const { form, isLoading, onSubmit, onReset } = useForm({
  path: 'users',
  id: userId.value,
  form: {
    name: '',
    email: '',
    role: 'user'
  },
  action: 'edit',
  onSuccess: (data) => {
    console.log('用户更新成功:', data)
  },
  onError: (error) => {
    console.error('更新失败:', error)
  }
})

// 表单会自动获取用户数据并填充
```

--------------------------------

### Multiple Data Providers Configuration Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/guide/config.md

Demonstrates how to configure multiple data providers for different resources in a microservices architecture or multi-source scenario, including default and specific providers for manages.

```typescript
// 创建不同的数据提供者
const userDataProvider = simpleDataProvider({
  apiUrl: 'https://user-api.example.com'
})

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

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

const config: IConfig = {
  title: '多服务管理系统',
  defaultManage: 'admin',

  // 全局多数据提供者配置
  dataProvider: {
    default: userDataProvider, // 默认数据提供者
    user: userDataProvider, // 用户服务
    order: orderDataProvider, // 订单服务
    product: productDataProvider, // 商品服务
  },

  manages: [
    {
      name: 'admin',
      title: '管理后台',
      routePrefix: '/admin',

      // 管理端可以覆盖特定的数据提供者
      dataProvider: {
        default: userDataProvider,
        analytics: simpleDataProvider({
          apiUrl: 'https://analytics-api.example.com'
        })
      }
    }
  ]
}
```

--------------------------------

### Basic useSelect Setup

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/data/useSelect.md

Initialize useSelect with a default value, API path, and option label/value fields. This is the most basic configuration for a select component.

```javascript
import { useSelect } from '@duxweb/dvha-core'
import { ref } from 'vue'

const selectedUser = ref()

const { options, loading, onSearch } = useSelect({
  defaultValue: selectedUser.value,
  path: '/api/users',
  optionLabel: 'name',
  optionValue: 'id'
})
```

--------------------------------

### Vue Component Example with useUpload

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useUpload.md

A complete Vue 3 component example demonstrating the use of the useUpload hook. It includes file selection, upload triggering, progress tracking, file management (remove, cancel, clear), and status display. Configuration options like max file size, count, accepted types, and multiple file selection are shown.

```vue
<script setup lang="ts">
import { useUpload } from '@duxweb/dvha-core'
import { computed } from 'vue'

const { 
  uploadFiles,
  dataFiles,
  isUploading,
  overallProgress,
  open,
  trigger,
  removeFiles,
  cancelFiles,
  clearFiles
} = useUpload({
  path: 'upload',
  maxFileSize: 10 * 1024 * 1024, // 10MB
  maxFileCount: 5,
  accept: 'image/*,application/pdf',
  multiple: true,
  autoUpload: false,

  onSuccess: (data) => {
    console.log('文件上传成功:', data)
  },
  onError: (error) => {
    console.error('上传失败:', error.message)
  },
  onProgress: (progress) => {
    console.log(`上传进度: ${progress.totalPercent}%`)
  },
  onComplete: (files) => {
    console.log('所有文件上传完成:', files.length)
  }
})

// 计算属性
const hasFiles = computed(() => uploadFiles.value.length > 0)
const uploadDisabled = computed(() => isUploading.value || !hasFiles.value)
const successCount = computed(() => dataFiles.value.length)

// 格式化文件大小
function formatFileSize(bytes) {
  if (bytes === 0)
    return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
}

// 获取状态文本
function getStatusText(status) {
  const statusMap = {
    pending: '等待上传',
    uploading: '上传中',
    success: '上传成功',
    error: '上传失败',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态样式
function getStatusClass(status) {
  return {
    'text-gray-500': status === 'pending',
    'text-blue-500': status === 'uploading',
    'text-green-500': status === 'success',
    'text-red-500': status === 'error',
    'text-yellow-500': status === 'cancelled'
  }
}
</script>

<template>
  <div class="upload-container">
    <!-- 操作按钮 -->
    <div class="upload-actions">
      <button class="btn btn-primary" @click="open">
        选择文件
      </button>
      <button
        :disabled="uploadDisabled"
        class="btn btn-success"
        @click="trigger"
      >
        {{ isUploading ? '上传中...' : '开始上传' }}
      </button>
      <button
        :disabled="!hasFiles"
        class="btn btn-danger"
        @click="clearFiles"
      >
        清空文件
      </button>
    </div>

    <!-- 整体进度 -->
    <div v-if="hasFiles" class="overall-progress">
      <div class="progress-info">
        <span>整体进度: {{ overallProgress.totalPercent }}%</span>
        <span>({{ overallProgress.index }}/{{ overallProgress.totalFiles }})</span>
      </div>
      <div class="progress-bar">
        <div
          class="progress-fill"
          :style="{ width: `${overallProgress.totalPercent}%` }"
        />
      </div>
    </div>

    <!-- 文件列表 -->
    <div v-if="hasFiles" class="file-list">
      <div
        v-for="file in uploadFiles"
        :key="file.id"
        class="file-item"
      >
        <div class="file-info">
          <div class="file-name">
            {{ file.filename }}
          </div>
          <div class="file-meta">
            <span>{{ formatFileSize(file.filesize || 0) }}</span>
            <span
              :class="getStatusClass(file.status)"
              class="file-status"
            >
              {{ getStatusText(file.status) }}
            </span>
          </div>
        </div>

        <!-- 文件进度条 -->
        <div v-if="file.progress" class="file-progress">
          <div class="progress-bar small">
            <div
              class="progress-fill"
              :style="{ width: `${file.progress.percent || 0}%` }"
            />
          </div>
          <span class="progress-text">
            {{ file.progress.percent || 0 }}%
            <span v-if="file.progress.speedText">
              ({{ file.progress.speedText }})
            </span>
          </span>
        </div>

        <!-- 错误信息 -->
        <div v-if="file.error" class="file-error">
          {{ file.error }}
        </div>

```

--------------------------------

### Create Form Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useForm.md

Use this snippet to create a new form for a specific resource. It handles form state, submission, and reset, with callbacks for success and error.

```javascript
import { useForm } from '@duxweb/dvha-core'
import { ref } from 'vue'

const { form, isLoading, onSubmit, onReset } = useForm({
  path: 'users',
  form: {
    name: '',
    email: '',
    role: 'user'
  },
  action: 'create',
  onSuccess: (data) => {
    console.log('用户创建成功:', data)
    // 可以进行页面跳转、显示成功提示等
  },
  onError: (error) => {
    console.error('创建失败:', error)
  }
})

function handleSubmit() {
  onSubmit()
}

function handleReset() {
  onReset()
}
```

--------------------------------

### Dux Configuration Example

Source: https://github.com/duxweb/dvha/blob/main/apps/cdn/README.md

This TypeScript snippet shows the basic configuration for the Dux framework, including API URL, default management settings, and component mappings.

```typescript
const config: IConfig = {
  apiUrl: 'your-api-url',
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin',
      title: '管理系统标题',
      routePrefix: '/admin',
      components: {
        authLayout: () => import('./pages/layout.vue'),
        notFound: () => import('./pages/404.vue'),
      },
      menus: [
        // 菜单配置
      ]
    }
  ],
  simpleDataProvider,
  simpleAuthProvider,
}
```

--------------------------------

### Multi-Provider Form Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useForm.md

Illustrates using the useForm hook with different data providers for distinct resources. Each useForm instance manages its own form state and submission logic.

```javascript
import { useForm } from '@duxweb/dvha-core'

// 使用默认数据提供者创建用户
const { form: userForm, onSubmit: submitUser } = useForm({
  path: 'users',
  action: 'create',
  form: { name: '', email: '' }
})

// 使用分析服务创建报告
const { form: reportForm, onSubmit: submitReport } = useForm({
  path: 'reports',
  action: 'create',
  providerName: 'analytics',
  form: { title: '', type: 'monthly' }
})

// 使用支付服务创建订单
const { form: orderForm, onSubmit: submitOrder } = useForm({
  path: 'orders',
  action: 'create',
  providerName: 'payment',
  form: { amount: 0, currency: 'CNY' }
})
```

--------------------------------

### useMenu Hook Usage

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/router/useMenu.md

Demonstrates how to import and use the useMenu hook for managing application menus. It shows examples for both single-level and double-level menu modes.

```APIDOC
## useMenu Hook

### Description
The `useMenu` hook is designed to manage the application's menu system, supporting both single-level and double-level menu structures.

### Method
`useMenu(options?: { doubleMenu?: boolean })`

### Parameters
#### Query Parameters
- **doubleMenu** (boolean) - Optional - Whether to enable double-level menu mode. Defaults to `false`.

### Return Values
- **data** (Ref<IMenu[]>): The complete menu tree data (only visible items).
- **originalData** (Ref<IMenu[]>): The original menu tree data (including hidden items).
- **getMenu** (Function): A function to retrieve menu data.
- **mainMenu** (Ref<IMenu[]>): Main menu data.
- **subMenu** (Ref<IMenu[]>): Sub-menu data.
- **isSubMenu** (Ref<boolean>): Whether the sub-menu is displayed.
- **crumbs** (Ref<IMenu[]>): Breadcrumb path.
- **active** (Ref<string>): The currently active menu item.
- **appActive** (Ref<string>): The currently active main menu item.
- **subActive** (Ref<string>): The currently active sub-menu item.

### Usage Example
```js
import { useMenu } from '@duxweb/dvha-core'

// Single-level menu mode
const { data, mainMenu, subMenu, crumbs, active } = useMenu()

// Double-level menu mode
const menuData = useMenu({ doubleMenu: true })
```

### Single-level Menu Example
```js
import { useMenu } from '@duxweb/dvha-core'

const {
  mainMenu,      // Main menu (excluding sub-levels)
  subMenu,       // Sub-menus of the current main menu
  active,        // Currently active menu
  appActive,     // Currently active main menu
  subActive      // Currently active sub-menu
} = useMenu()

console.log('Menu Status:', {
  CurrentMainMenu: appActive.value,
  CurrentSubMenu: subActive.value,
  CurrentActive: active.value
})
```
```

--------------------------------

### Single Admin Panel Menu Configuration

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/router/menu.md

Example of configuring menus for a single administration panel. This includes defining dashboard, user management, system settings, and external links.

```javascript
import { createDux } from '@duxweb/dvha-core'

const app = createDux({
  defaultManage: 'admin',
  manages: [
    {
      name: 'admin',
      title: '管理后台',

      menus: [
        // 仪表盘
        {
          name: 'dashboard',
          label: '仪表盘',
          path: 'dashboard',
          icon: 'dashboard',
          sort: 1,
          component: () => import('./pages/Dashboard.vue')
        },

        // 用户管理
        {
          name: 'users',
          label: '用户管理',
          icon: 'users',
          sort: 2
        },
        {
          name: 'users.list',
          label: '用户列表',
          path: 'users',
          parent: 'users',
          sort: 1,
          component: () => import('./pages/users/List.vue')
        },
        {
          name: 'users.detail',
          label: '用户详情',
          path: 'users/:id',
          parent: 'users',
          hidden: true,  // 隐藏在菜单中
          component: () => import('./pages/users/Detail.vue')
        },

        // 系统管理
        {
          name: 'system',
          label: '系统管理',
          icon: 'system',
          sort: 3
        },
        {
          name: 'system.settings',
          label: '系统设置',
          path: 'system/settings',
          parent: 'system',
          sort: 1,
          component: () => import('./pages/system/Settings.vue'),
          meta: {
            permissions: ['system.admin']
          }
        },

        // 外部链接
        {
          name: 'docs',
          label: '帮助文档',
          loader: 'iframe',
          path: 'https://docs.example.com',
          icon: 'help',
          sort: 4
        }
      ]
    }
  ]
})
```

--------------------------------

### Multiple Admin Panel Menu Configuration

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/router/menu.md

Example of configuring menus for multiple distinct management interfaces. This allows for separate navigation structures for different user roles or application sections.

```javascript
const app = createDux({
  defaultManage: 'admin',
  manages: [
    // 系统管理端
    {
      name: 'admin',
      title: '系统管理',
      menus: [
        {
          name: 'dashboard',
          label: '系统概览',
          path: 'dashboard',
          icon: 'dashboard',
          component: () => import('./admin/Dashboard.vue')
        },
        {
          name: 'users',
          label: '用户管理',
          path: 'users',
          icon: 'users',
          component: () => import('./admin/Users.vue')
        }
      ]
    },

    // 用户中心
    {
      name: 'user',
      title: '用户中心',
      menus: [
        {
          name: 'profile',
          label: '个人资料',
          path: 'profile',
          icon: 'profile',
          component: () => import('./user/Profile.vue')
        },
        {
          name: 'settings',
          label: '账户设置',
          path: 'settings',
          icon: 'settings',
          component: () => import('./user/Settings.vue')
        }
      ]
    }
  ]
})
```

--------------------------------

### Build Production Version

Source: https://github.com/duxweb/dvha/blob/main/apps/cdn/README.md

Execute this command to create a production-ready build of your application.

```bash
npm run build
```

--------------------------------

### Initialize Project with Specified Name

Source: https://github.com/duxweb/dvha/blob/main/packages/template/README.md

Specify a custom project name during initialization using bunx or npx.

```bash
bunx @duxweb/dvha-template init my-awesome-project
```

```bash
npx @duxweb/dvha-template init my-awesome-project
```

--------------------------------

### Basic File Upload Example with useUpload

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useUpload.md

Demonstrates how to use the useUpload hook for basic file uploads. Configure upload path, file size and count limits, and control upload behavior with autoUpload set to false. Includes functions for selecting files, triggering uploads, and handling success/error callbacks. Also shows how to monitor overall upload progress.

```javascript
import { useUpload } from '@duxweb/dvha-core'

const { uploadFiles, open, trigger, isUploading, progress } = useUpload({
  path: 'upload',
  maxFileSize: 5 * 1024 * 1024, // 5MB
  maxFileCount: 3,
  multiple: true,
  autoUpload: false, // 手动控制上传
  onSuccess: (data) => {
    console.log('文件上传成功:', data)
  },
  onError: (error) => {
    console.error('上传失败:', error.message)
  }
})

// 选择文件
function selectFiles() {
  open()
}

// 开始上传
function startUpload() {
  if (uploadFiles.value.length === 0) {
    alert('请先选择文件')
    return
  }
  trigger()
}

// 监听进度
watchEffect(() => {
  const progress = overallProgress.value
  console.log(`进度: ${progress.totalPercent}% (${progress.index}/${progress.totalFiles})`)
})
```

--------------------------------

### Install DVHA Pro Dependency

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/pro/installation.md

Install the DVHA Pro package using pnpm. This package includes dependencies for DVHA Core and DVHA NaiveUI.

```bash
pnpm add @duxweb/dvha-pro
```

--------------------------------

### Custom Floating Component Example

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/system/useOverlay.md

An example of a custom floating component that can be used with overlay functionalities. It includes customizable props for position, size, shape, animation, and mask behavior.

```vue
<!-- CustomFloating.vue -->
<script setup>
import { computed, onMounted, ref } from 'vue'

interface Props {
  position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
  size?: 'small' | 'medium' | 'large' | string
  shape?: 'rect' | 'circle' | 'rounded'
  animation?: 'fade' | 'slide' | 'zoom' | 'none'
  mask?: boolean
  maskClosable?: boolean
  closable?: boolean
  onClose?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  position: 'center',
  size: 'medium',
  shape: 'rect',
  animation: 'fade',
  mask: true,
  maskClosable: true,
  closable: true
})

const visible = ref(false)

const contentStyle = computed(() => {
  // 根据 props 动态生成样式
  const styles = {}

  // 位置样式
  switch (props.position) {
    case 'top':
      Object.assign(styles, { top: '20px', left: '50%', transform: 'translateX(-50%)' })
      break
    case 'bottom':
      Object.assign(styles, { bottom: '20px', left: '50%', transform: 'translateX(-50%)' })
      break
    // ... 其他位置
  }

  // 大小样式
  if (typeof props.size === 'string' && !['small', 'medium', 'large'].includes(props.size)) {
    styles.width = props.size
  }

  return styles
})

function handleClose() {
  visible.value = false
  props.onClose?.()
}

onMounted(() => {
  visible.value = true
})
</script>

<template>
  <Teleport to="body">
    <div v-if="visible" class="floating-container">
      <!-- 可以是任何样式：圆形、不规则形状、动画效果等 -->
      <div
        class="floating-content"
        :style="contentStyle"
        @click.stop
      >
        <slot />

        <!-- 自定义关闭按钮 -->
        <button
          v-if="closable"
          class="close-btn"
          :style="closeButtonStyle"
          @click="handleClose"
        >
          ×
        </button>
      </div>

      <!-- 可选的背景蒙层 -->
      <div
        v-if="mask"
        class="floating-mask"
        @click="maskClosable && handleClose()"
      />
    </div>
  </Teleport>
</template>

<style scoped>
.floating-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.floating-content {
  position: absolute;
  background: white;
  /* 样式完全可自定义 */
}

.floating-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* 动画效果可自定义 */
.floating-content {
  transition: all 0.3s ease;
}
</style>
```

--------------------------------

### Full Form Example with Vue Template

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useForm.md

A comprehensive example integrating the useForm hook within a Vue.js component, including template markup for input fields, select options, and submission buttons.

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

const props = defineProps({
  id: String | Number,
  action: String
})

const { form, isLoading, onSubmit, onReset } = useForm({
  path: 'users',
  id: props.id,
  form: {
    name: '',
    email: '',
    role: 'user',
    status: 'active'
  },
  action: props.action,
  onSuccess: (data) => {
    console.log('操作成功:', data)
    // 可以进行页面跳转、显示成功提示等
  },
  onError: (error) => {
    console.error('操作失败:', error)
    // 显示错误提示
  }
})
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <label>姓名</label>
      <input v-model="form.name" type="text" required>
    </div>

    <div>
      <label>邮箱</label>
      <input v-model="form.email" type="email" required>
    </div>

    <div>
      <label>角色</label>
      <select v-model="form.role">
        <option value="user">
          用户
        </option>
        <option value="admin">
          管理员
        </option>
      </select>
    </div>

    <div>
      <label>状态</label>
      <select v-model="form.status">
        <option value="active">
          激活
        </option>
        <option value="inactive">
          禁用
        </option>
      </select>
    </div>

    <div>
      <button type="submit" :disabled="isLoading">
        {{ isLoading ? '提交中...' : (action === 'create' ? '创建' : '更新') }}
      </button>
      <button type="button" :disabled="isLoading" @click="onReset">
        重置
      </button>
    </div>
  </form>
</template>
```

--------------------------------

### Basic Usage

Source: https://github.com/duxweb/dvha/blob/main/apps/docs/hooks/advanced/useUpload.md

Demonstrates the basic import and initialization of the useUpload hook.

```APIDOC
## Basic Usage

```js
import { useUpload } from '@duxweb/dvha-core'

const { uploadFiles, open, trigger, progress } = useUpload({
  path: 'upload',
  maxFileCount: 5,
  autoUpload: true
})
```
```