vsoft-ui 1.0.2 → 1.0.3

package/README.md

@@ -0,0 +1,214 @@
+# VSoft UI
+
+基于 Element Plus 的 Vue3 组件库，支持全局权限控制
+
+[![npm version](https://img.shields.io/npm/v/vsoft-ui.svg)](https://www.npmjs.com/package/vsoft-ui)
+[![license](https://img.shields.io/npm/l/vsoft-ui.svg)](https://github.com/your-username/vsoft-ui/blob/main/LICENSE)
+[![vue](https://img.shields.io/badge/Vue-3.3+-brightgreen.svg)](https://vuejs.org/)
+[![element-plus](https://img.shields.io/badge/Element%20Plus-2.13+-blue.svg)](https://element-plus.org/)
+
+## 简介
+
+VSoft UI 是一个基于 Vue 3 和 Element Plus 的二次封装组件库，专注于提供简单高效的权限控制解决方案。通过组件级、指令级和 Hook 级三种权限控制方式，帮助开发者快速构建具有权限管理功能的应用。
+
+## 主要特性
+
+- 📦 基于 Element Plus，提供一致的设计语言
+- 🔒 内置权限控制功能，支持三种权限控制方式
+- 🚀 零学习成本，基于 Vue 3 Composition API
+- 📝 完整的 TypeScript 支持
+- 🛠️ 丰富的示例和详细文档
+
+## 快速开始
+
+### 安装
+
+```bash
+# 使用 pnpm（推荐）
+pnpm add vsoft-ui
+
+# 或使用 npm
+npm install vsoft-ui
+
+# 或使用 yarn
+yarn add vsoft-ui
+```
+
+### 引入
+
+```typescript
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import VSoftUI from 'vsoft-ui'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(VSoftUI)
+app.mount('#app')
+```
+
+### 设置权限
+
+在应用启动时设置用户权限：
+
+```typescript
+// main.ts
+import { permission } from 'vsoft-ui'
+
+// 设置用户权限
+permission.setPermissions(['button:add', 'button:edit', 'input:query'])
+```
+
+## 组件使用
+
+### 按钮组件
+
+```vue
+<template>
+  <!-- 基本用法 -->
+  <v-button type="primary">主要按钮</v-button>
+  
+  <!-- 权限控制 -->
+  <v-button type="success" permission="button:add">添加按钮</v-button>
+  <v-button type="warning" permission="['button:edit', 'button:update']">编辑按钮</v-button>
+  <v-button type="danger" permission="['button:delete', 'button:manage']" permission-mode="all">删除按钮</v-button>
+</template>
+```
+
+### 输入框组件
+
+```vue
+<template>
+  <!-- 基本用法 -->
+  <v-input v-model="value" placeholder="请输入内容" />
+  
+  <!-- 权限控制 -->
+  <v-input v-model="value" permission="input:query" placeholder="查询输入框" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+```
+
+## 权限控制
+
+VSoft UI 提供三种权限控制方式：
+
+### 1. 组件级权限控制
+
+所有 VSoft UI 组件都支持 `permission` 和 `permission-mode` 属性：
+
+```vue
+<template>
+  <!-- 基本权限控制 -->
+  <v-button permission="button:add">添加按钮</v-button>
+  
+  <!-- 多权限控制（任一权限） -->
+  <v-button permission="['button:edit', 'button:update']">编辑按钮</v-button>
+  
+  <!-- 多权限控制（所有权限） -->
+  <v-button permission="['button:delete', 'button:manage']" permission-mode="all">删除按钮</v-button>
+</template>
+```
+
+### 2. 指令级权限控制
+
+使用 `v-permission` 指令对任何元素进行权限控制：
+
+```vue
+<template>
+  <!-- 基本权限控制 -->
+  <el-button v-permission="'button:delete'" type="danger">删除按钮</el-button>
+  
+  <!-- 使用 any 修饰符 -->
+  <el-button v-permission:any="['button:edit', 'button:update']" type="warning">编辑按钮</el-button>
+  
+  <!-- 使用 all 修饰符 -->
+  <el-button v-permission:all="['button:manage', 'button:admin']" type="primary">管理按钮</el-button>
+</template>
+```
+
+### 3. Hook 级权限控制
+
+使用 `usePermission` Hook 进行更灵活的权限判断：
+
+```vue
+<template>
+  <el-button v-if="canAdd" type="primary" @click="handleAdd">添加按钮</el-button>
+  <el-button v-if="canEdit" type="success" @click="handleEdit">编辑按钮</el-button>
+</template>
+
+<script setup lang="ts">
+import { usePermission } from 'vsoft-ui'
+
+const { hasPermission } = usePermission()
+
+const canAdd = hasPermission('button:add')
+const canEdit = hasPermission('button:edit')
+
+const handleAdd = () => { /* ... */ }
+const handleEdit = () => { /* ... */ }
+</script>
+```
+
+## 开发
+
+### 运行示例
+
+```bash
+pnpm dev
+```
+
+### 构建
+
+```bash
+pnpm build
+```
+
+### 文档
+
+```bash
+# 启动文档开发服务器
+pnpm dev:docs
+
+# 构建文档
+pnpm build:docs
+```
+
+## 文档
+
+- [完整文档](https://your-username.github.io/vsoft-ui/)
+- [权限控制指南](/permission/usage)
+- [组件文档](/components)
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 许可证
+
+[MIT](LICENSE)
+
+## 更新日志
+
+### v1.0.2
+
+- 修复组件构建问题
+- 优化权限控制逻辑
+- 完善文档内容
+
+### v1.0.1
+
+- 修复组件级权限控制问题
+- 优化组件传参机制
+
+### v1.0.0
+
+- 初始版本发布
+- 实现 Button 和 Input 组件
+- 添加三种权限控制方式

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vsoft-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "基于Element Plus的二次封装组件库，支持全局按钮级权限控制",
   "type": "module",
   "main": "dist/vsoft-ui.umd.js",