+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 启用
+ 禁用
+
+
+
+
+
+
+
+
+
+ 保存
+ 取消
+
+
+
+
+
+
+
+```
+
+## 🎨 样式规范
+
+### SCSS 变量定义
+```scss
+// src/assets/styles/variables.scss
+
+// 主题色
+$primary-color: #409EFF;
+$success-color: #67C23A;
+$warning-color: #E6A23C;
+$danger-color: #F56C6C;
+$info-color: #909399;
+
+// 背景色
+$bg-color: #f0f2f5;
+$white: #ffffff;
+
+// 文字颜色
+$text-primary: #303133;
+$text-regular: #606266;
+$text-secondary: #909399;
+$text-placeholder: #c0c4cc;
+
+// 边框颜色
+$border-color: #dcdfe6;
+$border-color-light: #e4e7ed;
+$border-color-lighter: #ebeef5;
+
+// 字体
+$font-size-base: 14px;
+$font-size-small: 12px;
+$font-size-large: 16px;
+```
+
+### 通用样式
+```scss
+// src/assets/styles/common.scss
+
+// 通用页面容器
+.app-container {
+ padding: 20px;
+}
+
+// 卡片样式
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+// 表格操作按钮
+.table-action-btn {
+ margin: 0 5px;
+}
+
+// 表单样式
+.form-container {
+ max-width: 600px;
+ margin: 0 auto;
+}
+```
+
+## 🔐 权限控制
+
+### 权限指令
+```javascript
+// src/directive/permission.js
+import Vue from 'vue'
+
+// v-permission 指令
+Vue.directive('permission', {
+ inserted: function(el, binding) {
+ const { value } = binding
+ const permissions = Vue.prototype.$store.getters.permissions
+
+ if (value && value instanceof Array) {
+ const hasPermission = value.some(permission => {
+ return permissions.includes(permission)
+ })
+
+ if (!hasPermission) {
+ el.parentNode && el.parentNode.removeChild(el)
+ }
+ } else {
+ throw new Error('v-permission value must be array')
+ }
+ }
+})
+```
+
+### 使用示例
+```vue
+