# 权限树组件 (PermissionTree)

## 概述

权限树组件是一个用于展示和选择菜单权限的弹窗式树形结构组件。它可以将以逗号分隔的权限ID字符串转换为可视化的树形结构，通过弹窗的方式提供更好的用户体验。

## 功能特性

- 🌳 **树形结构展示**: 将菜单权限以层级树形结构展示，优先显示备注(remark)字段
- 🏷️ **类型标签**: 显示菜单类型（目录、菜单、按钮、API接口）
- ✅ **多选支持**: 支持多选权限，父子关联选择
- 🔄 **双向绑定**: 支持 v-model 双向数据绑定
- 📱 **弹窗展示**: 通过弹窗方式展示，节省表单空间
- 🎛️ **操作便捷**: 提供全选、清空、展开/收起等快捷操作
- 📊 **实时统计**: 显示已选择权限数量

## 使用方法

### 基本用法

```vue
<template>
  <PermissionTree v-model="selectedPermissions" />
</template>

<script setup>
import { ref } from 'vue';
import PermissionTree from '@/components/permission-tree/index.vue';

const selectedPermissions = ref('1,2,3,4,5');
</script>
```

### 在表单中使用

```vue
<template>
  <VbenForm>
    <!-- 其他表单项 -->
    <FormItem component="PermissionTree" fieldName="popedom" label="权限设置" />
  </VbenForm>
</template>
```

## Props

| 参数        | 类型    | 默认值       | 说明                           |
| ----------- | ------- | ------------ | ------------------------------ |
| modelValue  | string  | ''           | 选中的权限ID字符串，以逗号分隔 |
| disabled    | boolean | false        | 是否禁用                       |
| placeholder | string  | '请选择权限' | 输入框占位符文本               |

## Events

| 事件名            | 说明               | 回调参数        |
| ----------------- | ------------------ | --------------- |
| update:modelValue | 选中权限变化时触发 | (value: string) |

## 数据格式

### 输入格式

权限ID以逗号分隔的字符串：

```
"1,2,3,4,5,6,7,8,9,10"
```

### 菜单类型

- `1`: 目录 (蓝色标签)
- `2`: 菜单 (绿色标签)
- `3`: 按钮 (橙色标签)
- `4`: API接口 (灰色标签)

## 样式定制

组件提供了基本的样式，可以通过CSS变量或深度选择器进行定制：

```css
.permission-tree {
  /* 自定义边框 */
  border: 1px solid #your-color;

  /* 自定义圆角 */
  border-radius: 8px;
}

.permission-tree :deep(.tree-node:hover) {
  /* 自定义悬停效果 */
  background-color: #your-hover-color;
}
```

## 注意事项

1. 组件会自动从后端获取菜单列表数据，首次点击时加载
2. 权限ID必须是有效的数字，无效ID会被自动过滤
3. 组件支持父子关联选择，选中父节点会自动选中所有子节点
4. 弹窗内树形结构最大高度限制为 384px (24rem)，超出会显示滚动条
5. 节点名称优先显示 `remark` 字段，如果为空则显示 `menu_name` 字段
6. 弹窗操作支持取消，只有点击确定才会保存选择结果

## 示例

完整的使用示例可以参考 `test-permission-tree.vue` 文件。
