vsoft-ui 1.0.3 → 1.0.5

package/README.md

@@ -1,214 +1,199 @@
 # VSoft UI
 
-基于 Element Plus 的 Vue3 组件库，支持全局权限控制
+基于 Element Plus 的二次封装组件库，包含全局权限控制功能。
 
-[![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 install vsoft-ui element-plus @element-plus/icons-vue
+```
+
+## 使用
 
-# 或使用 npm
-npm install vsoft-ui
+### 1. 引入样式
 
-# 或使用 yarn
-yarn add vsoft-ui
+```js
+// 引入 Element Plus 样式
+import 'element-plus/dist/index.css'
 ```
 
-### 引入
+### 2. 注册组件库
 
-```typescript
+```js
+// main.ts
 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'
+import VSoftUI from 'vsoft-ui'
 
 const app = createApp(App)
-app.use(ElementPlus)
+
+// 安装组件库
 app.use(VSoftUI)
+
 app.mount('#app')
 ```
 
-### 设置权限
-
-在应用启动时设置用户权限：
+### 3. 权限控制配置
 
-```typescript
-// main.ts
-import { permission } from 'vsoft-ui'
+```js
+// 在适当的位置设置权限
+import { usePermission } from 'vsoft-ui'
 
-// 设置用户权限
-permission.setPermissions(['button:add', 'button:edit', 'input:query'])
+const { setPermissions } = usePermission()
+setPermissions(['user:view', 'user:edit', 'button:click'])
 ```
 
 ## 组件使用
 
-### 按钮组件
-
-```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>
-```
-
-### 输入框组件
+所有组件均以 `V` 开头，保持与 Element Plus API 一致：
 
 ```vue
 <template>
-  <!-- 基本用法 -->
-  <v-input v-model="value" placeholder="请输入内容" />
+  <!-- 权限控制指令 -->
+  <v-button v-permission="'user:view'" type="primary">查看</v-button>
+  <v-button v-permission="'user:edit'" type="success">编辑</v-button>
   
-  <!-- 权限控制 -->
-  <v-input v-model="value" permission="input:query" placeholder="查询输入框" />
+  <!-- 普通组件 -->
+  <v-form>
+    <v-form-item label="用户名" prop="username">
+      <v-input v-model="form.username" placeholder="请输入用户名"></v-input>
+    </v-form-item>
+  </v-form>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
+<script setup>
+import { ref, reactive } from 'vue'
 
-const value = ref('')
+const form = reactive({
+  username: ''
+})
 </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>
-```
+<!-- 单个权限 -->
+<v-button v-permission="'user:view'">查看</v-button>
 
-### 2. 指令级权限控制
+<!-- any 模式 - 满足任一权限 -->
+<v-button v-permission:any="['user:view', 'user:edit']">编辑</v-button>
 
-使用 `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>
+<!-- all 模式 - 满足所有权限 -->
+<v-button v-permission:all="['user:view', 'user:admin']">管理</v-button>
 ```
 
-### 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>
+  <v-button @click="checkPermission">检查权限</v-button>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { usePermission } from 'vsoft-ui'
 
-const { hasPermission } = usePermission()
-
-const canAdd = hasPermission('button:add')
-const canEdit = hasPermission('button:edit')
+const { hasPermission, hasAllPermissions } = usePermission()
 
-const handleAdd = () => { /* ... */ }
-const handleEdit = () => { /* ... */ }
+const checkPermission = () => {
+  const canView = hasPermission('user:view')
+  const canAdmin = hasAllPermissions(['user:view', 'user:admin'])
+  console.log(canView, canAdmin)
+}
 </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)
+## 组件列表
+
+- VAffix
+- VAlert
+- VAside
+- VAvatar
+- VBacktop
+- VBadge
+- VBreadcrumb
+- VBreadcrumbItem
+- VButton
+- VCalendar
+- VCard
+- VCarousel
+- VCarouselItem
+- VCascader
+- VCheckbox
+- VCheckboxButton
+- VCollapse
+- VCollapseItem
+- VColorPicker
+- VConfigProvider
+- VContainer
+- VDatePicker
+- VDialog
+- VDivider
+- VDrawer
+- VDropdown
+- VDropdownItem
+- VDropdownMenu
+- VEmpty
+- VFooter
+- VForm
+- VFormItem
+- VHeader
+- VIcon
+- VImage
+- VInput
+- VInputNumber
+- VLink
+- VMain
+- VMenu
+- VMenuGroup
+- VMenuItem
+- VOption
+- VOptionGroup
+- VPagination
+- VPopconfirm
+- VPopper
+- VProgress
+- VRadio
+- VRadioButton
+- VRate
+- VScrollbar
+- VSelect
+- VSelectV2
+- VSlider
+- VSpace
+- VStep
+- VSteps
+- VSubMenu
+- VSwitch
+- VTable
+- VTableColumn
+- VTabPane
+- VTabs
+- VTag
+- VTimeline
+- VTimelineItem
+- VTimePicker
+- VTooltip
+- VTransfer
+- VTree
+- VTreeNode
+- VUpload
+- VUploadDragger
+
+## 注意事项
+
+1. 本组件库基于 Element Plus，使用前请确保已安装 Element Plus 和 @element-plus/icons-vue
+2. 请手动引入 Element Plus 样式：`import 'element-plus/dist/index.css'`
+3. 组件库已自动安装 Element Plus，无需再次单独安装
+4. 所有组件均保持与 Element Plus API 一致，使用方式相同
 
 ## 更新日志
 
-### v1.0.2
+- 1.0.0: 初始版本，包含权限控制和基础组件
+- 1.0.4: 优化打包配置，修复样式问题
 
-- 修复组件构建问题
-- 优化权限控制逻辑
-- 完善文档内容
-
-### v1.0.1
-
-- 修复组件级权限控制问题
-- 优化组件传参机制
-
-### v1.0.0
+## 许可证
 
-- 初始版本发布
-- 实现 Button 和 Input 组件
-- 添加三种权限控制方式
+MIT