feat: 优化成员权限和发布按钮状态

src/services/devopsApi.ts

@@ -34,6 +34,7 @@ import type {
   ProjectGiteaRepositoryDiagnostic,
   ProjectJenkinsDiagnosticsSummary,
   ProjectJenkinsJobDiagnostic,
+  ProjectPermissionLevel,
   ProjectRefs,
   ReleaseRun,
   ReleaseStatus,
@@ -75,6 +76,8 @@ interface BackendProject {
   repositoryUrl: string
   defaultBranch: string
   status: 'active' | 'archived'
+  permissionLevel?: ProjectPermissionLevel
+  permissionLevelName?: string
   environments: Array<{
     name: EnvironmentName
     displayName: string
@@ -818,6 +821,9 @@ function toProjectConfigs(backendProjects: BackendProject[]): ProjectConfig[] {
       serviceType: serviceTypeLabel(project.key),
       defaultBranch: project.defaultBranch,
       tagPolicy: tagPolicyLabel(project.environments),
+      permissionLevel: project.permissionLevel === 'build' ? 'build' : 'read',
+      permissionLevelName:
+        project.permissionLevel === 'build' ? '构建权限' : '只读权限',
       giteaStatus: 'warning',
       giteaMessage: '尚未执行 Gitea 诊断',
       giteaWebhookStatus: 'warning',

src/stores/platform.ts

@@ -14,6 +14,7 @@ import type {
   ProjectConfig,
   ProjectGiteaDiagnosticsSummary,
   ProjectJenkinsDiagnosticsSummary,
+  ProjectPermissionLevel,
   ProjectRefs,
   JenkinsSyncSummary,
   NotificationOutboxMessage,
@@ -52,6 +53,21 @@ export const usePlatformStore = defineStore('platform', () => {
     runs.value.filter((run) => run.status === 'queued' || run.status === 'running'),
   )
 
+  function projectPermissionLevel(projectKey?: string): ProjectPermissionLevel {
+    const session = useSessionStore()
+
+    if (session.role === 'super_admin') {
+      return 'build'
+    }
+
+    const project = projects.value.find((item) => item.key === projectKey)
+    return project?.permissionLevel === 'build' ? 'build' : 'read'
+  }
+
+  function canBuildProject(projectKey?: string): boolean {
+    return Boolean(projectKey) && projectPermissionLevel(projectKey) === 'build'
+  }
+
   async function loadAll() {
     const session = useSessionStore()
     const includeAdminData = session.role === 'super_admin'
@@ -336,6 +352,8 @@ export const usePlatformStore = defineStore('platform', () => {
     projectRefs,
     failedRuns,
     runningRuns,
+    projectPermissionLevel,
+    canBuildProject,
     loadAll,
     createDeployRun,
     cancelDeployRun,

src/types/devops.ts

@@ -35,7 +35,7 @@ export type AuthRole = 'super_admin' | 'member'
 
 export type AuthStatus = 'active' | 'disabled'
 
-export type ProjectPermissionLevel = 'none' | 'read' | 'build'
+export type ProjectPermissionLevel = 'read' | 'build'
 
 export type PlatformMessageState = 'pending' | 'handled'
 
@@ -214,6 +214,8 @@ export interface ProjectConfig {
   serviceType: string
   defaultBranch: string
   tagPolicy: string
+  permissionLevel?: ProjectPermissionLevel
+  permissionLevelName?: string
   giteaStatus: HealthState
   giteaMessage?: string
   giteaWebUrl?: string

src/views/MembersView.vue

@@ -3,6 +3,7 @@
  * 成员权限页对接后端成员、项目权限和平台消息接口，不在前端模拟账号数据。
  */
 import {
+  ArrowRight,
   Check,
   Delete,
   Lock,
@@ -19,10 +20,16 @@ import type {
   CreateMemberPayload,
   MemberSummary,
   PlatformMessageSummary,
+  ProjectConfig,
   ProjectPermissionLevel,
 } from '../types/devops'
 
 type PermissionMap = Record<string, ProjectPermissionLevel>
+type PermissionProjectGroup = {
+  key: string
+  label: string
+  children: ProjectConfig[]
+}
 
 const route = useRoute()
 const platform = usePlatformStore()
@@ -38,9 +45,9 @@ const createForm = reactive({
   permissions: {} as PermissionMap,
 })
 const editPermissions = reactive<PermissionMap>({})
+const expandedPermissionGroupKeys = ref<string[]>([])
 
 const permissionOptions: Array<{ label: string; value: ProjectPermissionLevel }> = [
-  { label: '无权限', value: 'none' },
   { label: '只读', value: 'read' },
   { label: '构建', value: 'build' },
 ]
@@ -64,6 +71,24 @@ const pendingMessages = computed(() =>
   messages.value.filter((message) => message.status === 'pending'),
 )
 
+const permissionProjectTree = computed<PermissionProjectGroup[]>(() => {
+  const groupByOwner = new Map<string, ProjectConfig[]>()
+
+  for (const project of platform.projects) {
+    const projects = groupByOwner.get(project.owner) ?? []
+    projects.push(project)
+    groupByOwner.set(project.owner, projects)
+  }
+
+  return Array.from(groupByOwner.entries())
+    .map(([owner, projects]) => ({
+      key: owner,
+      label: projectGroupLabel(owner),
+      children: projects.sort((left, right) => left.name.localeCompare(right.name)),
+    }))
+    .sort((left, right) => left.label.localeCompare(right.label))
+})
+
 onMounted(async () => {
   if (typeof route.query.account === 'string') {
     accountKeyword.value = route.query.account
@@ -108,12 +133,14 @@ function openCreateDialog() {
   createForm.account = ''
   createForm.displayName = ''
   resetPermissionMap(createForm.permissions)
+  resetPermissionGroupExpansion()
   dialogVisible.value = true
 }
 
 function openPermissionDialog(member: MemberSummary) {
   editingMember.value = member
   resetPermissionMap(editPermissions, member)
+  resetPermissionGroupExpansion()
   dialogVisible.value = true
 }
 
@@ -238,7 +265,7 @@ function resetPermissionMap(target: PermissionMap, member?: MemberSummary) {
   )
 
   for (const project of platform.projects) {
-    target[project.key] = permissionByProject.get(project.key) ?? 'none'
+    target[project.key] = permissionByProject.get(project.key) ?? 'read'
   }
 }
 
@@ -253,6 +280,74 @@ function canMutate(member: MemberSummary) {
   return member.role !== 'super_admin'
 }
 
+function setAllProjectBuildPermissions() {
+  setAllProjectPermissions(currentPermissionMap(), 'build')
+}
+
+function setAllProjectReadPermissions() {
+  setAllProjectPermissions(currentPermissionMap(), 'read')
+}
+
+function setAllProjectPermissions(target: PermissionMap, level: ProjectPermissionLevel) {
+  for (const project of platform.projects) {
+    target[project.key] = level
+  }
+}
+
+function currentPermissionMap(): PermissionMap {
+  return editingMember.value ? editPermissions : createForm.permissions
+}
+
+function resetPermissionGroupExpansion() {
+  expandedPermissionGroupKeys.value = permissionProjectTree.value.map((group) => group.key)
+}
+
+function togglePermissionGroup(groupKey: string) {
+  if (expandedPermissionGroupKeys.value.includes(groupKey)) {
+    expandedPermissionGroupKeys.value = expandedPermissionGroupKeys.value.filter(
+      (key) => key !== groupKey,
+    )
+    return
+  }
+
+  expandedPermissionGroupKeys.value = [...expandedPermissionGroupKeys.value, groupKey]
+}
+
+function isPermissionGroupExpanded(groupKey: string) {
+  return expandedPermissionGroupKeys.value.includes(groupKey)
+}
+
+function groupBuildCount(group: PermissionProjectGroup) {
+  const permissionMap = currentPermissionMap()
+  return group.children.filter((project) => permissionMap[project.key] === 'build').length
+}
+
+function groupPermissionSummary(group: PermissionProjectGroup) {
+  const buildCount = groupBuildCount(group)
+
+  if (buildCount === 0) {
+    return '全部只读'
+  }
+
+  if (buildCount === group.children.length) {
+    return '全部构建'
+  }
+
+  return `${buildCount} 个构建`
+}
+
+function projectGroupLabel(owner: string) {
+  if (owner === 'devops-platform') {
+    return '运维平台'
+  }
+
+  if (owner === 'my-project') {
+    return '业务项目'
+  }
+
+  return owner
+}
+
 function formatDateTime(value?: string) {
   if (!value) {
     return '-'
@@ -369,7 +464,7 @@ function formatDateTime(value?: string) {
                 <ElTag
                   v-for="permission in row.projectPermissions"
                   :key="permission.projectKey"
-                  :type="permission.level === 'build' ? 'success' : permission.level === 'read' ? 'info' : 'warning'"
+                  :type="permission.level === 'build' ? 'success' : 'info'"
                   effect="plain"
                 >
                   {{ permission.projectName }}：{{ permission.levelName }}
@@ -436,52 +531,103 @@ function formatDateTime(value?: string) {
     <ElDialog
       v-model="dialogVisible"
       :title="editingMember ? '调整项目权限' : '新增成员'"
-      width="680px"
+      class="member-permission-dialog"
+      width="560px"
       destroy-on-close
     >
       <ElForm label-position="top">
-        <template v-if="!editingMember">
+        <div v-if="!editingMember" class="member-form-grid">
           <ElFormItem label="账号">
             <ElInput v-model="createForm.account" autocomplete="off" />
           </ElFormItem>
           <ElFormItem label="名称">
             <ElInput v-model="createForm.displayName" autocomplete="off" />
           </ElFormItem>
-        </template>
+        </div>
         <div class="permission-editor">
-          <div
+          <div class="permission-editor-toolbar">
-            v-for="project in platform.projects"
+            <div>
-            :key="project.key"
+              <strong>项目权限</strong>
-            class="permission-editor-row"
+              <span>默认只读，按需开启构建。</span>
-          >
+            </div>
-            <span>
+            <div class="permission-editor-actions">
-              <strong>{{ project.name }}</strong>
+              <ElButton size="small" plain @click="setAllProjectBuildPermissions">
-              <small class="mono">{{ project.key }}</small>
+                全部开启
-            </span>
+              </ElButton>
-            <ElSelect
+              <ElButton size="small" plain @click="setAllProjectReadPermissions">
-              v-if="editingMember"
+                全部关闭
-              v-model="editPermissions[project.key]"
+              </ElButton>
-              class="permission-select"
+            </div>
+          </div>
+          <div class="permission-tree">
+            <div
+              v-for="group in permissionProjectTree"
+              :key="group.key"
+              class="permission-tree-group"
             >
-              <ElOption
+              <button
-                v-for="option in permissionOptions"
+                type="button"
-                :key="option.value"
+                class="permission-tree-group-title"
-                :label="option.label"
+                @click="togglePermissionGroup(group.key)"
-                :value="option.value"
+              >
-              />
+                <span>
-            </ElSelect>
+                  <ElIcon
-            <ElSelect
+                    class="permission-tree-arrow"
-              v-else
+                    :class="{ expanded: isPermissionGroupExpanded(group.key) }"
-              v-model="createForm.permissions[project.key]"
+                  >
-              class="permission-select"
+                    <ArrowRight />
-            >
+                  </ElIcon>
-              <ElOption
+                  <strong>{{ group.label }}</strong>
-                v-for="option in permissionOptions"
+                  <small>{{ group.children.length }} 个项目</small>
-                :key="option.value"
+                </span>
-                :label="option.label"
+                <span class="permission-tree-summary">
-                :value="option.value"
+                  {{ groupPermissionSummary(group) }}
-              />
+                </span>
-            </ElSelect>
+              </button>
+              <div
+                v-show="isPermissionGroupExpanded(group.key)"
+                class="permission-project-list"
+              >
+                <div
+                  v-for="project in group.children"
+                  :key="project.key"
+                  class="permission-editor-row"
+                >
+                  <span class="tree-project-cell">
+                    <strong>{{ project.name }}</strong>
+                    <small class="mono">{{ project.key }}</small>
+                  </span>
+                  <ElRadioGroup
+                    v-if="editingMember"
+                    v-model="editPermissions[project.key]"
+                    class="permission-radio-group"
+                    size="small"
+                  >
+                    <ElRadio
+                      v-for="option in permissionOptions"
+                      :key="option.value"
+                      :value="option.value"
+                    >
+                      {{ option.label }}
+                    </ElRadio>
+                  </ElRadioGroup>
+                  <ElRadioGroup
+                    v-else
+                    v-model="createForm.permissions[project.key]"
+                    class="permission-radio-group"
+                    size="small"
+                  >
+                    <ElRadio
+                      v-for="option in permissionOptions"
+                      :key="option.value"
+                      :value="option.value"
+                    >
+                      {{ option.label }}
+                    </ElRadio>
+                  </ElRadioGroup>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </ElForm>
@@ -569,20 +715,127 @@ function formatDateTime(value?: string) {
   gap: 6px;
 }
 
+:deep(.member-permission-dialog .el-dialog__body) {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+:deep(.member-permission-dialog .el-dialog__footer) {
+  padding-top: 10px;
+}
+
+.member-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
 .permission-editor {
   display: grid;
   gap: 10px;
 }
 
+.permission-editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 0 10px;
+  border-bottom: 1px solid #e5eaf3;
+  color: #4b5565;
+  font-size: 13px;
+}
+
+.permission-editor-toolbar > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.permission-editor-toolbar strong {
+  color: #172033;
+  font-size: 14px;
+}
+
+.permission-editor-actions {
+  flex-shrink: 0;
+}
+
+.permission-tree {
+  overflow: auto;
+  max-height: 320px;
+  border: 1px solid #e5eaf3;
+  border-radius: 6px;
+  background: #fff;
+}
+
+.permission-tree-group {
+  border-bottom: 1px solid #eef2f7;
+}
+
+.permission-tree-group:last-child {
+  border-bottom: 0;
+}
+
+.permission-tree-group-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  background: #f8fafc;
+  color: #172033;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.permission-tree-group-title > span {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 8px;
+}
+
+.permission-tree-group-title small {
+  color: #7b8798;
+  font-size: 12px;
+}
+
+.permission-tree-arrow {
+  flex-shrink: 0;
+  color: #6b7280;
+  transition: transform 0.15s ease;
+}
+
+.permission-tree-arrow.expanded {
+  transform: rotate(90deg);
+}
+
+.permission-tree-summary {
+  flex-shrink: 0;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.permission-project-list {
+  display: grid;
+}
+
 .permission-editor-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
-  padding: 12px;
+  min-height: 36px;
-  border: 1px solid #edf1f7;
+  padding: 6px 10px 6px 34px;
-  border-radius: 8px;
+  border-top: 1px solid #f1f4f8;
-  background: #fbfcff;
+}
+
+.tree-project-cell {
+  display: block;
+  min-width: 0;
 }
 
 .permission-editor-row strong,
@@ -591,25 +844,52 @@ function formatDateTime(value?: string) {
 }
 
 .permission-editor-row small {
-  margin-top: 4px;
+  margin-top: 2px;
   color: #7b8798;
   font-size: 12px;
 }
 
-.permission-select {
+.permission-radio-group {
-  width: 160px;
+  flex-shrink: 0;
+}
+
+.permission-radio-group :deep(.el-radio) {
+  margin-right: 14px;
+}
+
+.permission-radio-group :deep(.el-radio:last-child) {
+  margin-right: 0;
+}
+
+.permission-radio-group :deep(.el-radio__label) {
+  padding-left: 5px;
+  letter-spacing: 0;
 }
 
 @media (max-width: 760px) {
+  .member-form-grid {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
   .member-search,
-  .permission-select {
+  .permission-radio-group {
     width: 100%;
   }
 
+  .permission-editor-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
   .message-row,
   .permission-editor-row {
     align-items: stretch;
     flex-direction: column;
   }
+
+  .permission-editor-row {
+    padding-left: 14px;
+  }
 }
 </style>

src/views/ReleaseCenterView.vue

@@ -31,6 +31,14 @@ const selectedProject = computed(() => {
   return platform.projects.find((project) => project.key === form.projectKey)
 })
 
+const selectedProjectPermissionName = computed(() => {
+  return platform.projectPermissionLevel(form.projectKey) === 'build'
+    ? '构建权限'
+    : '只读权限'
+})
+
+const canBuildSelectedProject = computed(() => platform.canBuildProject(form.projectKey))
+
 const currentRefs = computed(() => platform.projectRefs[form.projectKey])
 
 const environmentOptions = computed(() => {
@@ -129,7 +137,7 @@ const selectedPullRequestMeta = computed(() => {
 })
 
 const canTrigger = computed(() => {
-  if (!form.projectKey || !form.environment || !form.ref) {
+  if (!canBuildSelectedProject.value || !form.projectKey || !form.environment || !form.ref) {
     return false
   }
 
@@ -141,12 +149,23 @@ const shownRun = computed(() => {
 })
 
 const canSyncJenkins = computed(() => {
-  return shownRun.value?.status === 'queued' || shownRun.value?.status === 'running'
+  return (
+    platform.canBuildProject(shownRun.value?.projectKey) &&
+    (shownRun.value?.status === 'queued' || shownRun.value?.status === 'running')
+  )
 })
 
-const canCancelShownRun = computed(() => shownRun.value?.status === 'queued' || shownRun.value?.status === 'running')
+const canCancelShownRun = computed(
+  () =>
+    platform.canBuildProject(shownRun.value?.projectKey) &&
+    (shownRun.value?.status === 'queued' || shownRun.value?.status === 'running'),
+)
 
-const canRetryShownRun = computed(() => shownRun.value?.status === 'failed' || shownRun.value?.status === 'canceled')
+const canRetryShownRun = computed(
+  () =>
+    platform.canBuildProject(shownRun.value?.projectKey) &&
+    (shownRun.value?.status === 'failed' || shownRun.value?.status === 'canceled'),
+)
 
 async function triggerRelease() {
   submitting.value = true
@@ -364,6 +383,9 @@ watch(refOptions, (options) => {
                     :value="project.key"
                   />
                 </ElSelect>
+                <div v-if="selectedProject" class="field-hint">
+                  当前权限：{{ selectedProjectPermissionName }}
+                </div>
               </ElFormItem>
               <ElFormItem label="环境">
                 <ElSegmented
@@ -441,6 +463,9 @@ watch(refOptions, (options) => {
               <ElButton :icon="CircleClose" :disabled="!canRetryShownRun || submitting" @click="retryRelease">
                 重试
               </ElButton>
+              <span v-if="form.projectKey && !canBuildSelectedProject" class="permission-action-hint">
+                当前账号只有只读权限，发布操作已禁用
+              </span>
             </div>
           </ElForm>
         </div>
@@ -498,10 +523,16 @@ watch(refOptions, (options) => {
 .action-row {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 10px;
   margin-top: 16px;
 }
 
+.permission-action-hint {
+  color: #8a5a00;
+  font-size: 12px;
+}
+
 .commit-preview {
   display: grid;
   gap: 4px;

src/views/RunsView.vue

@@ -11,9 +11,11 @@ import RunExecutionDetails from '../components/RunExecutionDetails.vue'
 import StatusPill from '../components/StatusPill.vue'
 import { isDevopsApiError } from '../services/http'
 import { usePlatformStore } from '../stores/platform'
+import { useSessionStore } from '../stores/session'
 import type { ReleaseRun } from '../types/devops'
 
 const platform = usePlatformStore()
+const session = useSessionStore()
 const route = useRoute()
 const selectedRunId = ref(platform.runs[0]?.id || '')
 const syncingAll = ref(false)
@@ -30,7 +32,9 @@ const canRetrySelectedRun = computed(() => {
   return canRetryRun(selectedRun.value)
 })
 
-const canSyncAnyRun = computed(() => platform.runs.some((run) => canSyncRun(run)))
+const canSyncAnyRun = computed(
+  () => session.role === 'super_admin' && platform.runs.some((run) => canSyncRun(run)),
+)
 
 watch(
   () => [route.query.runId, platform.runs.map((run) => run.id).join('|')],
@@ -51,13 +55,17 @@ watch(
 
 function canSyncRun(run?: ReleaseRun): boolean {
   return (
+    platform.canBuildProject(run?.projectKey) &&
     Boolean(run?.jenkinsQueueId || run?.jenkinsBuildNumber) &&
     (run?.status === 'queued' || run?.status === 'running')
   )
 }
 
 function canRetryRun(run?: ReleaseRun): boolean {
-  return run?.status === 'failed' || run?.status === 'canceled'
+  return (
+    platform.canBuildProject(run?.projectKey) &&
+    (run?.status === 'failed' || run?.status === 'canceled')
+  )
 }
 
 async function syncSelectedRun() {
@@ -197,6 +205,12 @@ async function handleRunActionError(error: unknown, fallbackMessage: string) {
           >
             重试
           </ElButton>
+          <span
+            v-if="selectedRun && !platform.canBuildProject(selectedRun.projectKey)"
+            class="permission-action-hint"
+          >
+            只读权限，操作已禁用
+          </span>
           <StatusPill :state="selectedRun.status" />
         </div>
       </div>
@@ -216,3 +230,10 @@ async function handleRunActionError(error: unknown, fallbackMessage: string) {
     </section>
   </div>
 </template>
+
+<style scoped>
+.permission-action-hint {
+  color: #8a5a00;
+  font-size: 12px;
+}
+</style>