# 用户侧 vs 管理侧差异化设计

> DDS-Section: Frontend DDS - 4. 用户侧 vs 管理侧差异化设计
> DDS-Lines: L220-L331

## 页面对照表

| 特性 | 管理员端 (ProjectDetail.vue) | 用户端 (UserProjectDetail.vue) |
|:---|:---|:---|
| **默认模式** | 查看模式 | 根据工单状态决定 |
| **查看权限** | 所有模块 | ACL 授权模块 |
| **授权信息 Tab** | ✅ 可见 | ❌ 不可见 |
| **版本历史 Tab** | ✅ 可见 | ❌ 不可见 |
| **主机管理 Tab** | ✅ 可见 | ❌ 不可见 |
| **基本信息** | 可编辑 | 只读（由管理员填写） |
| **编辑操作** | 直接保存（上帝模式） | 草稿 → 提交审核（工单流程） |
| **审批操作** | ✅ 通过/打回按钮 | ❌ 无 |
| **保存按钮** | 「保存修改」 | 「保存草稿」 |
| **提交按钮** | 无 | 「提交审核」 |

## Tab 导航差异

### 管理员端 Tabs
```html
<v-tabs v-model="activeTab">
  <v-tab value="basic">基本信息</v-tab>
  <v-tab value="business">部署业务</v-tab>
  <v-tab value="environment">部署环境</v-tab>
  <v-tab value="hosts">主机管理</v-tab>
  <v-tab value="middlewares">中间件</v-tab>
  <v-tab value="authorization" v-if="isSuperAdmin">授权信息</v-tab>
  <v-tab value="version-history" v-if="isSuperAdmin">版本历史</v-tab>
</v-tabs>
```

### 用户端 Tabs
```html
<v-tabs v-model="activeTab">
  <v-tab value="basic">基本信息</v-tab>
  <v-tab value="business">部署业务</v-tab>
  <v-tab value="environment">部署环境</v-tab>
  <v-tab value="middlewares">中间件</v-tab>
</v-tabs>
```

## 组件复用策略

```mermaid
graph TB
    subgraph 共用组件
        A[BasicInfoForm]
        B[DeploymentBusinessForm]
        C[DeploymentEnvironmentForm]
        D[MiddlewareCardsGrid]
        E[BasicInfoReadonly]
        F[BusinessInfoReadonly]
        G[EnvironmentInfoReadonly]
        H[MiddlewareInfoReadonly]
    end

    subgraph 管理端专用
        I[AuthorizationManagement]
        J[VersionHistory]
        K[HostsManagement]
        L[SaveConfirmDialog]
    end

    subgraph 用户端专用
        M[ProjectBasicInfoCard]
    end

    Admin[ProjectDetail.vue] --> A
    Admin --> B
    Admin --> C
    Admin --> D
    Admin --> E
    Admin --> F
    Admin --> G
    Admin --> H
    Admin --> I
    Admin --> J
    Admin --> K
    Admin --> L

    User[UserProjectDetail.vue] --> B
    User --> C
    User --> D
    User --> M
```

## 权限控制逻辑

### 管理员端 - 编辑权限判断

```typescript
const canEdit = computed(() => {
  if (!masterData.value) return false
  const status = masterData.value.lifecycle_status

  // 超级管理员在已发布、变更中状态可以编辑
  if (isSuperAdmin.value) {
    return status === 'released' || status === 'modifying'
  }
  return false
})
```

### 用户端 - 编辑权限判断

```typescript
const canEdit = computed(() => {
  if (!workflowInfo.value) return true  // 没有工单信息时默认可编辑
  const status = workflowInfo.value.status

  // 已分配、处理中、已打回状态可编辑
  return ['assigned', 'in_progress', 'returned', 'draft_saved'].includes(status)
})
```

## 操作按钮差异

### 管理员端 Header 按钮

```html
<template v-if="!isEditMode">
  <v-btn 
    v-if="showWorkflowButton" 
    color="info" 
    variant="tonal"
    @click="navigateToWorkflow"
  >
    {{ workflowButtonText }}
  </v-btn>
  
  <v-btn 
    v-if="canApprove" 
    color="success" 
    @click="handleApprove"
  >
    通过
  </v-btn>
  
  <v-btn 
    v-if="canApprove" 
    color="error" 
    variant="outlined"
    @click="handleReject"
  >
    打回
  </v-btn>
  
  <v-btn 
    v-if="canEdit" 
    color="primary" 
    @click="enterEditMode"
  >
    编辑
  </v-btn>
</template>

<template v-else>
  <v-btn variant="outlined" @click="handleCancel">取消</v-btn>
  <v-btn color="primary" @click="handleSave">保存修改</v-btn>
</template>
```

### 用户端 Header 按钮

```html
<template v-if="canEdit">
  <v-btn variant="outlined" @click="handleSaveDraft">
    保存草稿
  </v-btn>
  <v-btn color="primary" @click="handleSubmit">
    提交审核
  </v-btn>
</template>
<template v-else>
  <v-chip color="warning">
    工单状态: {{ workflowStatusText }}
  </v-chip>
</template>
```
