vsoft-ui 1.0.1 → 1.0.3

package/README.md

@@ -1,126 +1,214 @@
-# VS UI
-
-一个基于 Element Plus 的 Vue 3 组件库。
-
-## 特性
-
-- 🎨 基于 Element Plus，API 保持一致
-- ⚡️ Vue 3 Composition API
-- 📦 TypeScript 支持
-- 🎯 按需引入
-- 📱 响应式设计
-- 🔐 **全局权限管理系统** - 所有组件支持权限控制
-
-## 安装
-
-```bash
-# 使用 pnpm（推荐）
-pnpm add vsoft-ui
-
-# 使用 npm
-npm install vsoft-ui
-
-# 使用 yarn
-yarn add vsoft-ui
-```
-
-## 快速开始
-
-### 安装
-
-```bash
-# 使用 pnpm（推荐）
-pnpm add vsoft-ui
-
-# 使用 npm
-npm install vsoft-ui
-
-# 使用 yarn
-yarn add vsoft-ui
-```
-
-### 完整引入
-
-```javascript
-import { createApp } from 'vue'
-import App from './App.vue'
-import VsUI from 'vsoft-ui'
-import 'vsoft-ui/style.css'
-
-const app = createApp(App)
-
-// 初始化权限（可选）
-app.use(VsUI, {
-  permissions: ['user:view', 'user:edit', 'user:delete']
-})
-
-app.mount('#app')
-```
-
-### 按需引入
-
-```vue
-<template>
-  <vs-button type="primary">按钮</vs-button>
-</template>
-
-<script setup>
-import { VsButton } from 'vsoft-ui'
-</script>
-```
-
-> 📖 更多使用示例请查看 [USAGE.md](./USAGE.md)
-
-## 开发
-
-```bash
-# 安装依赖
-pnpm install
-
-# 启动开发服务器
-pnpm dev
-
-# 构建组件库
-pnpm build
-
-# 启动文档开发服务器
-pnpm dev:docs
-
-# 构建文档
-pnpm build:docs
-```
-
-## 项目结构
-
-```
-vs-ui/
-├── src/                    # 组件库源码
-│   ├── components/         # 组件目录
-│   ├── install.ts         # 安装函数
-│   └── index.ts           # 入口文件
-├── docs/                   # VitePress 文档
-│   ├── .vitepress/        # VitePress 配置
-│   ├── guide/             # 指南文档
-│   └── components/        # 组件文档
-├── dist/                   # 构建输出目录
-├── vite.config.ts         # Vite 配置
-├── tsconfig.json          # TypeScript 配置
-└── package.json           # 项目配置
-```
-
-## 组件列表
-
-- Button 按钮
-- Card 卡片
-- Table 表格（支持后端控制列显示/隐藏、排序和权限控制）
-
-更多组件正在开发中...
-
-## 浏览器支持
-
-现代浏览器和 IE11+（需要 polyfills）
-
-## 许可证
-
-MIT
-
+# 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/dist/components/button/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Button } from './src/Button.vue';
+export { Button };
+export default Button;

package/dist/components/button/src/Button.vue.d.ts

@@ -0,0 +1,24 @@
+interface Props {
+    permission?: string | string[];
+    permissionMode?: 'any' | 'all';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    permission: string | string[];
+    permissionMode: "any" | "all";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/input/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Input } from './src/Input.vue';
+export { Input };
+export default Input;

package/dist/components/input/src/Input.vue.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    permission?: string | string[];
+    permissionMode?: 'any' | 'all';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        prepend?(_: {}): any;
+        append?(_: {}): any;
+        prefix?(_: {}): any;
+        suffix?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    permission: string | string[];
+    permissionMode: "any" | "all";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/directives/permission.d.ts

@@ -0,0 +1,11 @@
+import { App } from 'vue';
+declare global {
+    interface HTMLElement {
+        _permissionOriginalParent?: Node | null;
+        _permissionNextSibling?: Node | null;
+    }
+}
+/**
+ * 安装权限指令
+ */
+export declare function setupPermissionDirective(app: App): void;

package/dist/hooks/usePermission.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+export interface UsePermissionOptions {
+    mode?: 'any' | 'all';
+}
+export declare function usePermission(): {
+    permissions: Ref<string[], string[]>;
+    hasPermission: (requiredPermissions: string | string[]) => boolean;
+    hasAnyPermission: (requiredPermissions: string | string[]) => boolean;
+    hasAllPermissions: (requiredPermissions: string | string[]) => boolean;
+    createPermissionComputed: (requiredPermissions: Ref<string | string[]> | string | string[], options?: UsePermissionOptions) => import('vue').ComputedRef<boolean>;
+    setPermissions: (permissions: string[]) => void;
+};

package/dist/index.d.ts

@@ -1,16 +1,10 @@
-import { install } from './install';
-
-export * from './components';
-export { install };
-export type { InstallOptions } from './install';
-export { usePermission, PermissionService, createPermissionService } from './permission';
-declare const _default: {
-    install: typeof install;
-    version: string;
+import { App } from 'vue';
+import { default as Button } from './components/button';
+import { default as Input } from './components/input';
+import { permission } from './utils/permission';
+import { usePermission } from './hooks/usePermission';
+declare const VSoftUI: {
+    install(app: App): void;
 };
-export default _default;
-declare module 'vue' {
-    interface GlobalComponents {
-        [key: string]: any;
-    }
-}
+export { Button, Input, permission, usePermission, VSoftUI };
+export default VSoftUI;

package/dist/utils/permission.d.ts

@@ -0,0 +1,33 @@
+declare class Permission {
+    private permissions;
+    /**
+     * 设置用户权限
+     * @param permissions 权限数组
+     */
+    setPermissions(permissions: string[]): void;
+    /**
+     * 获取当前用户权限
+     * @returns 权限数组
+     */
+    getPermissions(): string[];
+    /**
+     * 检查是否拥有任一权限
+     * @param requiredPermissions 需要的权限
+     * @returns 是否拥有权限
+     */
+    hasAny(requiredPermissions: string | string[]): boolean;
+    /**
+     * 检查是否拥有所有权限
+     * @param requiredPermissions 需要的权限
+     * @returns 是否拥有权限
+     */
+    hasAll(requiredPermissions: string | string[]): boolean;
+    /**
+     * 检查是否拥有指定权限
+     * @param requiredPermissions 需要的权限
+     * @returns 是否拥有权限
+     */
+    hasPermission(requiredPermissions: string | string[]): boolean;
+}
+export declare const permission: Permission;
+export {};