init

2026-01-16 15:49:34 +08:00
commit 550d3e1f42
380 changed files with 62024 additions and 0 deletions
@@ -0,0 +1,185 @@
+# 权限按钮显示配置说明
+
+## 功能说明
+
+此配置用于控制操作按钮（如添加、编辑、删除）在没有权限时是否显示在页面上。
+
+## 配置项
+
+在 `.env` 文件中添加以下配置：
+
+```env
+# 是否显示无权限的操作按钮
+# false: 不显示（默认）- 用户没有权限时，按钮完全隐藏
+# true: 显示但禁用 - 用户没有权限时，按钮显示但处于禁用状态
+ADMIN_SHOW_BUTTONS_WITHOUT_PERMISSION=false
+```
+
+## 配置说明
+
+- **默认值**: `false`（不显示）
+- **类型**: 布尔值（`true` 或 `false`）
+- **作用范围**: 全局配置，影响所有页面的操作按钮
+
+### 配置效果
+
+#### `ADMIN_SHOW_BUTTONS_WITHOUT_PERMISSION=false`（默认）
+- 用户没有权限时，按钮**完全隐藏**
+- 页面更加简洁，用户看不到无法使用的功能
+
+#### `ADMIN_SHOW_BUTTONS_WITHOUT_PERMISSION=true`
+- 用户没有权限时，按钮**显示但禁用**
+- 用户可以知道有哪些功能，但无法使用
+- 适合需要让用户了解系统完整功能的场景
+
+## 使用方法
+
+### 在 Vue 组件中使用
+
+#### 方法一：使用 `getButtonState`（推荐，一个方法搞定）
+
+**方式一：同时控制显示和禁用（根据配置决定是否隐藏）**
+
+```vue
+<template>
+  <div>
+    <!-- 根据配置和权限决定是否显示按钮 -->
+    <el-button 
+      v-if="getButtonState('admin.store').show" 
+      :disabled="getButtonState('admin.store').disabled"
+      @click="handleAdd"
+    >
+      添加
+    </el-button>
+    
+    <el-button 
+      v-if="getButtonState('admin.update').show" 
+      :disabled="getButtonState('admin.update').disabled"
+      @click="handleEdit(row)"
+    >
+      编辑
+    </el-button>
+    
+    <el-button 
+      v-if="getButtonState('admin.destroy').show" 
+      :disabled="getButtonState('admin.destroy').disabled"
+      @click="handleDelete(row)"
+    >
+      删除
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+import { usePermission } from '@/composables/usePermission'
+
+const { getButtonState } = usePermission()
+</script>
+```
+
+**方式二：只控制禁用（按钮始终显示，无权限时禁用）**
+
+```vue
+<template>
+  <div>
+    <!-- 按钮始终显示，无权限时禁用 -->
+    <el-button 
+      :disabled="getButtonState('admin.store').disabled"
+      @click="handleAdd"
+    >
+      添加
+    </el-button>
+    
+    <el-button 
+      :disabled="getButtonState('admin.update').disabled"
+      @click="handleEdit(row)"
+    >
+      编辑
+    </el-button>
+    
+    <el-button 
+      :disabled="getButtonState('admin.destroy').disabled"
+      @click="handleDelete(row)"
+    >
+      删除
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+import { usePermission } from '@/composables/usePermission'
+
+const { getButtonState } = usePermission()
+</script>
+```
+
+#### 方法二：使用两个方法（兼容旧代码）
+
+```vue
+<template>
+  <div>
+    <el-button 
+      v-if="shouldShowButton('admin.store')" 
+      :disabled="isButtonDisabled('admin.store')"
+      @click="handleAdd"
+    >
+      添加
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+import { usePermission } from '@/composables/usePermission'
+
+const { shouldShowButton, isButtonDisabled } = usePermission()
+</script>
+```
+
+#### 方法三：直接使用 store
+
+```vue
+<template>
+  <div>
+    <el-button 
+      v-if="userStore.shouldShowButton('admin.store')" 
+      :disabled="!userStore.hasPermission('admin.store')"
+      @click="handleAdd"
+    >
+      添加
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
+</script>
+```
+
+## 权限标识说明
+
+权限标识格式通常为：`模块.操作`
+
+常见示例：
+- `admin.store` - 添加管理员
+- `admin.update` - 编辑管理员
+- `admin.destroy` - 删除管理员
+- `role.store` - 添加角色
+- `role.update` - 编辑角色
+- `permission.index` - 查看权限列表
+
+## 注意事项
+
+1. 配置修改后需要重启后端服务才能生效
+2. 前端会在用户登录时自动获取配置，无需刷新页面
+3. 如果用户有权限，按钮总是会显示（不受此配置影响）
+4. 此配置只影响按钮的显示/隐藏，不影响后端权限验证
+
+## 相关文件
+
+- 后端配置：`config/admin.go`
+- 后端 API：`app/http/controllers/admin/auth_controller.go`
+- 前端 Store：`html/src/store/user.js`
+- 前端工具：`html/src/composables/usePermission.js`
+