# DHdesign

DHdesign 是数字海南内部 Vue 3 组件库，分为移动端和 PC 端两个包。

## 安装

- 移动端：`@szhn/dh-design-mobile`
- PC 端：`@szhn/dh-design-pc`
- Vue2 移动端老项目：`@szhn/dh-design-mobile-vue2`
- Vue2 PC 老项目：`@szhn/dh-design-pc-vue2`
- 两个包都会通过依赖带入 `@szhn/theme-tokens`

## 使用规则

- 业务代码从 DHdesign 包导入组件，不要直接从 Vant 或 Element Plus 导入。
- 移动端组件基于 Vant 4，模板标签继续使用 `van-` 前缀，例如 `van-button`。
- PC 端标准组件基于 Element Plus 2，模板标签继续使用 `el-` 前缀，例如 `el-button`。
- Vue2 兼容包只用于老项目，分别基于 Vant 2 和 Element UI。
- PC 端 Pro 组件是 DHdesign 自定义业务组件，模板标签使用 `dh-` 前缀，例如 `dh-pro-search`、`dh-pro-table`、`dh-pro-page`。
- 除非 DHdesign 文档特别说明，标准组件的 Props、Events、Slots 基本沿用对应的 Vant 或 Element Plus 组件。

## 主题

- 移动端使用 `applyDhDesignTheme` 设置主题。
- PC 端使用 `applyDhDesignPcTheme` 设置主题。
- Vue2 移动端使用 `applyDhDesignMobileVue2Theme`，Vue2 PC 使用 `applyDhDesignPcVue2Theme`。
- 不要在业务项目里直接修改大量 `--van-*` 或 `--el-*` 变量来替代全局主题配置。

## 常用示例

```ts
import { Button } from '@szhn/dh-design-mobile'
import '@szhn/dh-design-mobile/style.css'
```

```vue
<van-button type="primary">提交</van-button>
```

```ts
import { Button, ProSearch, ProTable } from '@szhn/dh-design-pc'
import '@szhn/dh-design-pc/style.css'
```

```vue
<el-button type="primary">提交</el-button>
<dh-pro-search :columns="columns" />
<dh-pro-table :columns="columns" :data="data" />
```

## 文档入口

- 快速开始：`/guide/quickstart`
- 主题管理：`/guide/theme`
- AI 使用说明：`/guide/ai-usage`
- 移动端组件：`/mobile/button`
- PC 端组件：`/pc/button`
- PC Pro Search：`/pc/pro-search`
- PC Pro Table：`/pc/pro-table`
- PC Pro Page：`/pc/pro-page`