页面权限控制

框架提供 两种权限控制方式，适用于不同场景：

方式一：<Permission> 组件（区域级控制）

适用于控制一组元素或整个区块的显隐。

<Permission code="user_add">
  <el-button type="primary">新增用户</el-button>
</Permission>

<Permission code="user_edit" mode="hide">
  <el-input v-model="form.name" />
</Permission>

属性	可选值	说明
code	权限编码	必填，对应「页面元素管理」中的元素编码
mode	render（默认） hide	render：无权限则不渲染 hide：无权限则 display: none（保留 DOM 和数据）

---

方式二：v-permission 指令（元素级控制）

适用于单个元素的细粒度控制，支持更多交互模式。

<!-- 默认：无权限则移除 -->
<el-button v-permission="'user_delete'">删除</el-button>

<!-- 隐藏但保留数据 -->
<el-input v-permission="{ code: 'user_email', mode: 'hide' }" v-model="email" />

<!-- 只读模式 -->
<el-input 
  v-permission="{ code: 'user_name', mode: 'readonly' }"
  v-model="name"
/>

mode	行为
render	无权限则移除元素（默认）
hide	设置 display: none，保留 DOM 和数据绑定
readonly	添加 readonly/disabled，阻止输入

🔒 安全提示：

• 敏感字段（如身份证、密码）必须使用 render 模式，防止通过 DevTools 查看
• hide 模式下数据仍会提交，请在后端做最终校验

💡 一句话总结： 管区域用 <Permission>，管单元素用 v-permission