UX-2（操作级权限控制）

frontend/src/components/FaqList.vue

@@ -16,16 +16,19 @@
     <el-table-column label="操作" width="180">
       <template #default="scope">
         <el-button type="text" size="small" @click="view(scope.row)">查看</el-button>
-        <el-button v-if="canEdit" type="text" size="small" @click="edit(scope.row)">编辑</el-button>
-        <el-button
-          v-if="canEdit"
-          type="text"
-          size="small"
-          @click="toggle(scope.row)"
-          :style="{ color: scope.row.is_active ? '#f56c6c' : '#67c23a' }"
-        >
-          {{ scope.row.is_active ? "停用" : "启用" }}
-        </el-button>
+        <PermissionAction v-if="canEdit" action="faq.edit">
+          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
+        </PermissionAction>
+        <PermissionAction v-if="canEdit" action="faq.edit">
+          <el-button
+            type="text"
+            size="small"
+            @click="toggle(scope.row)"
+            :style="{ color: scope.row.is_active ? '#f56c6c' : '#67c23a' }"
+          >
+            {{ scope.row.is_active ? "停用" : "启用" }}
+          </el-button>
+        </PermissionAction>
       </template>
     </el-table-column>
   </el-table>
@@ -37,6 +40,7 @@ import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { updateFaqItem } from "../api/faqs";
 import type { FaqItem, FaqCategory } from "../api/faqs";
+import PermissionAction from "./PermissionAction.vue";
 
 const props = defineProps<{
   items: FaqItem[];