dydx-naive-ui-for-vue 1.0.4 → 1.0.6

package/README.md

@@ -1,71 +1,80 @@
-# Dydx Naive UI
+# DYDX Native UI for Vue
 
-基于 Naive UI 封装的高级业务组件库，提供配置化表单、高级表格、弹窗表单等常用业务组件，旨在提升中后台开发效率。
+基于 [Naive UI](https://www.naiveui.com/) 的 Vue 3 二次封装组件库，旨在提供更高效、易用的业务组件，简化开发流程。
 
-## 特性
+## ✨ 特性
 
-- 🚀 **配置化表单**：通过 JSON 配置生成复杂表单，支持响应式布局。
-- 📊 **高级表格**：集成列设置、自定义操作列、分页等功能的表格组件。
-- 🪟 **弹窗表单**：一键调用的弹窗/抽屉表单组件。
-- 🎨 **主题定制**：支持 CSS 变量定制，完美适配 Naive UI 主题。
-- 📝 **TypeScript**：完全使用 TypeScript 编写，提供完整的类型推断。
+- 🚀 **开箱即用**：封装了常用的业务组件，减少重复代码
+- 📝 **Schema 驱动**：支持通过 JSON 配置生成表单和表格
+- 🎨 **高度定制**：保留了 Naive UI 的灵活性，支持属性透传和插槽扩展
+- � **响应式设计**：内置响应式布局支持
+- 📘 **TypeScript**：全量 TypeScript 编写，提供完整的类型提示
 
-## 安装
+## 📦 包含组件
 
-```bash
-pnpm add dydx-naive-ui-for-vue
-# 或者
-npm install dydx-naive-ui-for-vue
-# 或者
-yarn add dydx-naive-ui-for-vue
-```
+| 组件名 | 描述 | 文档 |
+|---|---|---|
+| **NaiveForm** | Schema 驱动的高级表单，支持动态分组、联动等 | [查看文档](./src/components/NaiveForm/README.md) |
+| **NaiveTable** | 功能强大的数据表格，支持列设置、拖拽、分页等 | [查看文档](./src/components/NaiveTable/README.md) |
+| **FormModal** | 基于表单的弹窗/抽屉组件，简化增删改查交互 | [查看文档](./src/components/FormModal/README.md) |
+| **NaiveUpload** | 增强版上传组件，支持自定义上传、自动校验等 | [查看文档](./src/components/NaiveUpload/README.md) |
+| **IconSelect** | 图标选择器，支持虚拟滚动和搜索 | [查看文档](./src/components/IconSelect/README.md) |
+| **VerificationCode** | 验证码输入 + 倒计时按钮组合 | [查看文档](./src/components/VerificationCode/README.md) |
 
-## 快速上手
+## 🧩 组合式函数 (Composables)
 
-### 引入样式
+项目提供了一系列 Vue Composable 函数，用于处理通用逻辑。
 
-在你的入口文件（如 `main.ts`）中引入样式：
+| 函数名 | 描述 | 文档 |
+|---|---|---|
+| **useResponsive** | 全局响应式设备检测与配置管理 | [查看文档](./src/composables/README.md) |
 
-```ts
-import 'dydx-naive-ui-for-vue/style.css';
-```
+## 🛠️ 安装指南
 
-### 全局注册
+### 环境要求
 
-```ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import DydxNaiveUI from 'dydx-naive-ui-for-vue';
+- Node.js >= 16
+- Vue >= 3.3
+- Naive UI >= 2.34
 
-const app = createApp(App);
-app.use(DydxNaiveUI);
-app.mount('#app');
-```
+### 安装依赖
+
+```bash
+# 使用 pnpm (推荐)
+pnpm install
 
-### 按需引入
+# 或者使用 npm
+npm install
 
-```vue
-<script setup lang="ts">
-import { DydxNaiveForm, DydxNaiveTable } from 'dydx-naive-ui-for-vue';
-</script>
-</script>
+# 或者使用 yarn
+yarn install
 ```
 
-### 自动引入 (Auto Import)
+### 🔌 自动按需引入 (Resolver)
 
-如果你使用 `unplugin-vue-components`，可以使用内置的解析器：
+本库提供了用于 `unplugin-vue-components` 的 Resolver，支持自动按需引入组件。
 
-```ts
-// vite.config.ts
+1. **安装插件**：
+
+```bash
+pnpm add -D unplugin-vue-components unplugin-auto-import
+```
+
+2. **配置 `vite.config.ts`**：
+
+```typescript
+import { defineConfig } from 'vite'
 import Components from 'unplugin-vue-components/vite'
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
-import { DydxNaiveUIResolver } from 'dydx-naive-ui-for-vue/resolver'
+import { DydxNaiveUIResolver } from 'dydx-naive-ui-for-vue'
 
 export default defineConfig({
   plugins: [
     Components({
       resolvers: [
-        NaiveUiResolver(),
+        // 自动引入 Naive UI 组件
+        // NaiveUiResolver(),
+        
+        // 自动引入 DYDX Native UI 组件
         DydxNaiveUIResolver()
       ]
     })
@@ -73,26 +82,107 @@ export default defineConfig({
 })
 ```
 
-## 组件文档
+配置完成后，你可以直接在模板中使用组件（如 `<dydx-naive-form />`），无需手动 import。
+
+## 🚀 快速开始
+
+### 引入组件
+
+在你的 Vue 项目中引入并注册组件：
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import DydxNativeUI from 'dydx-naive-ui-for-vue'
+import 'dydx-naive-ui-for-vue/dist/style.css'
+
+const app = createApp(App)
+app.use(DydxNativeUI)
+app.mount('#app')
+```
+
+或者按需引入：
+
+```typescript
+import { DydxNaiveForm, DydxNaiveTable } from 'dydx-naive-ui-for-vue'
+```
+
+## 📂 项目结构
+
+```
+dydx-native-ui-for-vue/
+├── src/
+│   ├── components/        # 组件源码
+│   │   ├── FormModal/     # 表单弹窗组件
+│   │   ├── IconSelect/    # 图标选择器
+│   │   ├── NaiveForm/     # Schema 表单
+│   │   ├── NaiveTable/    # 高级表格
+│   │   ├── NaiveUpload/   # 上传组件
+│   │   └── VerificationCode/ # 验证码组件
+│   ├── composables/       # 组合式函数
+│   ├── utils/             # 工具函数
+│   └── index.ts           # 入口文件
+├── dist/                  # 打包产物
+├── package.json           # 项目配置
+└── README.md              # 项目说明
+```
+
+## 💻 开发指南
+
+### 启动开发环境
+
+```bash
+pnpm dev
+```
+
+### 代码检查与格式化
+
+```bash
+# 运行 ESLint 和 TypeScript 检查
+pnpm check
+
+# 自动修复 Lint 错误
+pnpm lint
 
-- [NaiveForm 配置化表单](./src/components/NaiveForm/README.md)
-- [NaiveTable 高级表格](./src/components/NaiveTable/README.md)
-- [FormModal 表单弹窗](./src/components/FormModal/README.md)
-- [NaiveUpload 上传组件](./src/components/NaiveUpload/README.md)
-- [IconSelect 图标选择](./src/components/IconSelect/README.md)
+# 格式化代码
+pnpm format
+```
 
-## 主题定制
+## 🏗️ 构建与部署
 
-本组件库使用 CSS 变量进行样式控制，你可以通过覆盖这些变量来定制主题。
+### 构建库文件
 
-```css
-:root {
-  /* 表格工具栏按钮阴影 */
-  --dydx-table-shadow: 0 1px 3px rgb(0 0 0 / 8%), 0 1px 2px rgb(0 0 0 / 6%);
-  --dydx-table-shadow-hover: 0 2px 6px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 8%);
-}
+```bash
+pnpm build
 ```
 
-## License
+构建产物将输出到 `dist` 目录，包含 ES Module 和 UMD 格式的文件，以及类型定义文件。
+
+### 发布
+
+```bash
+pnpm release
+```
+
+## 🤝 贡献指南
+
+1. Fork 本仓库
+2. 创建新的特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 提交 Pull Request
+
+## 📄 许可证
+
+本项目采用 MIT 许可证。
+
+## ❓ 常见问题 (FAQ)
+
+**Q: 是否兼容 Naive UI 的所有主题？**
+A: 是的，所有组件均基于 Naive UI 构建，会自动继承全局的主题配置。
+
+**Q: 如何自定义组件样式？**
+A: 大多数组件都透传了 Naive UI 的属性，你可以使用 Naive UI 提供的样式覆盖机制，或者通过 CSS 深度选择器 (`:deep()`) 进行定制。
 
-MIT
+**Q: TypeScript 类型提示不显示怎么办？**
+A: 请确保你的项目已经正确配置了 `tsconfig.json`，并且安装了最新版本的 VS Code 和 Volar 插件。