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

frontend/src/views/FinanceDetail.vue

@@ -7,7 +7,9 @@
           <el-tag :type="statusTag(item?.status)">{{ item?.status }}</el-tag>
         </div>
         <div class="header-actions" v-if="item">
-          <el-button v-if="canEditDraft" size="small" @click="showEdit = true">编辑</el-button>
+          <PermissionAction action="finance.create">
+            <el-button v-if="canEditDraft" size="small" @click="showEdit = true">编辑</el-button>
+          </PermissionAction>
           <FinanceStatusActions :item="item" @success="loadItem" />
         </div>
       </div>
@@ -36,9 +38,11 @@ import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import FinanceStatusActions from "../components/FinanceStatusActions.vue";
 import FinanceForm from "../components/FinanceForm.vue";
+import PermissionAction from "../components/PermissionAction.vue";
 import { fetchFinanceItem } from "../api/finance";
 import { useStudyStore } from "../store/study";
 import { useAuthStore } from "../store/auth";
+import { usePermission } from "../utils/permission";
 
 const study = useStudyStore();
 const auth = useAuthStore();
@@ -47,10 +51,8 @@ const route = useRoute();
 const item = ref<any>(null);
 const loading = ref(false);
 const showEdit = ref(false);
-const canEditDraft = computed(() => {
-  const role = auth.user?.role;
-  return item.value?.status === "DRAFT" && (role === "ADMIN" || role === "PM" || role === "CRA");
-});
+const { can } = usePermission();
+const canEditDraft = computed(() => item.value?.status === "DRAFT" && can("finance.create"));
 
 const loadItem = async () => {
   if (!study.currentStudy) return;