# 生命周期状态与工单关联展示

> DDS-Section: Frontend DDS - 5-6. 项目生命周期状态展示 + 工单关联与跳转机制
> DDS-Lines: L334-L582

## 状态标签设计

项目详情页 Header 区域展示三类状态标签：

```html
<div class="d-flex align-center gap-2">
  <h1 class="text-h4 font-weight-bold">{{ masterData.project_name }}</h1>
  
  <!-- 1. 连接状态 -->
  <v-chip :color="getStatusColor(masterData.status)" size="small" variant="tonal">
    {{ PROJECT_STATUS[masterData.status] }}
  </v-chip>
  
  <!-- 2. 生命周期状态 -->
  <v-chip :color="getLifecycleStatusColor(masterData.lifecycle_status)" 
          size="small" variant="tonal">
    <v-icon start size="small">{{ getLifecycleStatusIcon(masterData.lifecycle_status) }}</v-icon>
    {{ LIFECYCLE_STATUS[masterData.lifecycle_status] }}
  </v-chip>
  
  <!-- 3. 认证状态 -->
  <v-chip :color="masterData.project_certification === 'official' ? 'success' : 'warning'"
          size="small" variant="tonal">
    {{ PROJECT_CERTIFICATION[masterData.project_certification] }}
  </v-chip>
  
  <!-- 4. 编辑模式指示器 -->
  <v-chip v-if="isEditMode" color="info" variant="tonal">
    <v-icon start size="small">mdi-pencil</v-icon>
    编辑模式
  </v-chip>
</div>
```

## 生命周期状态配置

```typescript
// 生命周期状态枚举
export const LIFECYCLE_STATUS = {
  init: '初始化',
  drafting: '填写中',
  reviewing: '审核中',
  released: '已发布',
  modifying: '变更中',
  archived: '已归档'
}

// 状态颜色映射
export const LIFECYCLE_STATUS_COLORS: Record<string, string> = {
  init: 'grey',
  drafting: 'info',
  reviewing: 'warning',
  released: 'success',
  modifying: 'primary',
  archived: 'grey-darken-1'
}

// 状态图标
const getLifecycleStatusIcon = (status: string): string => {
  const icons: Record<string, string> = {
    init: 'mdi-clock-outline',
    drafting: 'mdi-pencil',
    reviewing: 'mdi-eye',
    released: 'mdi-check-circle',
    modifying: 'mdi-sync',
    archived: 'mdi-archive'
  }
  return icons[status] || 'mdi-help-circle'
}
```

## 生命周期提示横幅 (Alert Banner)

根据当前生命周期状态，在 Header 下方显示上下文提示：

```typescript
interface LifecycleAlert {
  type: 'info' | 'warning' | 'success' | 'error'
  message: string
  action?: {
    text: string
    handler: () => void
  }
}

const lifecycleStatusAlert = computed((): LifecycleAlert | null => {
  if (!masterData.value) return null
  const status = masterData.value.lifecycle_status

  switch (status) {
    case 'init':
      return {
        type: 'info',
        message: '项目已创建，等待指定填写人录入详细信息'
      }
    case 'drafting':
      return {
        type: 'info',
        message: `项目详情正在由 ${masterData.value.detail_filler_name || '填写人'} 填写中`,
        action: masterData.value.workflow_id ? {
          text: '查看工单',
          handler: () => router.push(`/admin/workflows/${masterData.value?.workflow_id}`)
        } : undefined
      }
    case 'reviewing':
      return {
        type: 'warning',
        message: '项目详情已提交，等待审核',
        action: masterData.value.workflow_id ? {
          text: '查看工单',
          handler: () => router.push(`/admin/workflows/${masterData.value?.workflow_id}`)
        } : undefined
      }
    case 'modifying':
      return {
        type: 'info',
        message: '项目存在活跃的变更工单，主线数据不受影响',
        action: masterData.value.workflow_id ? {
          text: '查看工单',
          handler: () => router.push(`/admin/workflows/${masterData.value?.workflow_id}`)
        } : undefined
      }
    case 'archived':
      return {
        type: 'warning',
        message: '项目已归档，仅保留历史数据'
      }
    default:
      return null
  }
})
```

## 工单关联与跳转机制

### 工单与项目的关系

| 工单类型 | 生命周期状态 | 数量关系 | 说明 |
|:---|:---|:---|:---|
| 填写工单 (project_detail) | INIT → DRAFTING | 1:1 | 项目创建时只能有一个 |
| 修改工单 (project_modify) | RELEASED → MODIFYING | 1:N | 已发布项目可有多个 |

### 工单按钮显示逻辑

```typescript
// 是否显示工单按钮
const showWorkflowButton = computed(() => {
  if (!masterData.value?.workflow_id) return false
  const status = masterData.value.lifecycle_status
  // 在填写中、审核中、变更中状态显示工单按钮
  return ['drafting', 'reviewing', 'modifying'].includes(status)
})

// 工单按钮文本
const workflowButtonText = computed(() => {
  if (!masterData.value) return '查看工单'
  const status = masterData.value.lifecycle_status
  switch (status) {
    case 'drafting':
      return '查看填写工单'
    case 'reviewing':
      return '查看审核工单'
    case 'modifying':
      return '查看修改工单'
    default:
      return '查看工单'
  }
})
```

### 多工单场景处理

当项目处于 `MODIFYING` 状态时，可能同时存在多个修改工单：

```html
<v-menu v-if="multipleWorkflows">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props" color="info" variant="tonal" prepend-icon="mdi-sitemap">
      查看工单 ({{ workflowCount }})
      <v-icon end>mdi-chevron-down</v-icon>
    </v-btn>
  </template>
  <v-list>
    <v-list-item 
      v-for="wf in relatedWorkflows" 
      :key="wf.workflow_id"
      @click="navigateToWorkflow(wf.workflow_id)"
    >
      <v-list-item-title>{{ wf.workflow_id }}</v-list-item-title>
      <v-list-item-subtitle>
        {{ wf.creator_name }} | {{ formatDate(wf.created_at) }}
      </v-list-item-subtitle>
    </v-list-item>
  </v-list>
</v-menu>
```

### 从工单页面跳转回项目详情

```typescript
// 工单详情页
const navigateToProject = () => {
  if (workflowDetail.value?.business_context?.project_id) {
    router.push(`/admin/projects/${workflowDetail.value.business_context.project_id}`)
  }
}
```
