# /designfast:generate-design-doc Command

## Description
从现有需求文档生成综合UI/UX设计文档，包括用户角色、线框图和组件规范。

## Syntax
```
/designfast:generate-design-doc --from=requirements.md [options]
```

## Parameters

### Required
- `--from=<path>`: 需求文档路径（支持.md文件）

### Optional
- `--project-name=<name>`: 项目名称（如果未提供，从文件中提取）
- `--design-style=<style>`: 设计风格（modern, classic, minimal, corporate）
- `--target-devices=<devices>`: 目标设备（mobile, tablet, desktop，逗号分隔）
- `--output=<path>`: 输出文件路径（默认：workspace/designs/{project-id}/）

## Workflow

### Stage 1: Input Validation
1. 检查需求文档是否存在
2. 验证文档格式（Markdown）
3. 确保内容至少10个字符

### Stage 2: Project Initialization
1. 调用design-director代理
2. 创建项目结构
3. 生成项目ID和元数据

```powershell
# 示例PowerShell实现
$projectData = & "$PSScriptRoot\..\scripts\project-manager.ps1" `
    -Action create `
    -ProjectName $ProjectName `
    -Description $Description `
    -TargetPlatform $TargetPlatform `
    -WcagLevel $WcagLevel
```

### Stage 3: Requirements Analysis
1. 调用requirements-analyzer代理
2. 解析需求文档
3. 提取结构化需求

```powershell
# 读取需求文档
$requirementsText = Get-Content $FromPath -Raw

# 解析需求
$requirements = & "$PSScriptRoot\..\scripts\requirements-parser.ps1" `
    -Action parse `
    -ProjectId $projectData.id `
    -UserInput $requirementsText
```

### Stage 4: Design Document Generation
1. 使用Handlebars模板
2. 填充项目和需求数据
3. 生成HTML设计文档

```powershell
# 准备模板数据
$templateData = @{
    projectName = $projectData.name
    description = $projectData.description
    createdAt = $projectData.createdAt
    updatedAt = $projectData.updatedAt
    targetPlatform = $projectData.targetPlatform
    designSystem = $projectData.designSystem
    accessibility = $projectData.accessibility
    performance = $projectData.performance
    requirements = $requirements.requirements
    year = (Get-Date).Year
}

# 编译模板（需要Node.js + Handlebars）
$templatePath = "$PSScriptRoot\..\templates\documents\design-document.hbs"
$outputPath = "workspace\designs\$($projectData.id)\design-document.html"

# 使用Node.js编译Handlebars模板
$dataJson = $templateData | ConvertTo-Json -Depth 10 -Compress
node -e "
const Handlebars = require('handlebars');
const fs = require('fs');

const template = Handlebars.compile(fs.readFileSync('$templatePath', 'utf8'));
const result = template($dataJson);

fs.writeFileSync('$outputPath', result, 'utf8');
console.log('✓ 设计文档已生成');
"
```

### Stage 5: Validation
1. 验证HTML结构
2. 检查必要章节
3. 确保所有需求都包含

### Stage 6: Output
1. 保存设计文档HTML
2. 保存项目JSON
3. 保存需求JSON和MD

## Success Criteria

✅ 设计文档包含所有必要章节：
- 项目概述
- 需求分析
- 用户角色（如果可提取）
- 设计系统
- 可访问性规范
- 性能目标

✅ 所有需求都有：
- 清晰的标题
- 详细描述
- 验收标准
- 优先级标记

✅ 符合Constitutional要求：
- WCAG AA合规性需求包含
- 移动优先需求包含
- 文件基础存储

## Example Usage

### Basic Usage
```bash
/designfast:generate-design-doc --from=./my-requirements.md
```

### With Options
```bash
/designfast:generate-design-doc \
  --from=./requirements/user-stories.md \
  --project-name="电商平台" \
  --design-style=modern \
  --target-devices=mobile,tablet,desktop \
  --output=./output/
```

### PowerShell Implementation
```powershell
# generate-design-doc.ps1
param(
    [Parameter(Mandatory=$true)]
    [string]$From,
    
    [string]$ProjectName,
    [string]$DesignStyle = "modern",
    [string]$TargetDevices = "mobile,tablet,desktop",
    [string]$Output
)

# 验证输入
if (-not (Test-Path $From)) {
    Write-Error "需求文档不存在: $From"
    exit 1
}

# 读取需求
$requirementsText = Get-Content $From -Raw

if ($requirementsText.Length -lt 10) {
    Write-Error "需求文档内容过短"
    exit 1
}

# 创建项目
Write-Host "1. 创建设计项目..." -ForegroundColor Cyan
$project = & "$PSScriptRoot\..\scripts\project-manager.ps1" `
    -Action create `
    -ProjectName $ProjectName `
    -Description "从 $From 生成" `
    -TargetPlatform "web"

$projectId = $project.id

# 解析需求
Write-Host "2. 解析需求..." -ForegroundColor Cyan
$requirements = & "$PSScriptRoot\..\scripts\requirements-parser.ps1" `
    -Action parse `
    -ProjectId $projectId `
    -UserInput $requirementsText

# 生成设计文档
Write-Host "3. 生成设计文档..." -ForegroundColor Cyan

$templateData = @{
    projectName = $project.name
    description = $project.description
    createdAt = $project.createdAt
    updatedAt = $project.updatedAt
    targetPlatform = $project.targetPlatform
    designSystem = $project.designSystem
    accessibility = $project.accessibility
    performance = $project.performance
    requirements = $requirements.requirements
    year = (Get-Date).Year
}

# 调用Handlebars编译器生成最终设计文档
# 使用设计文档模板进行编译
$outputPath = if ($Output) { $Output } else { "workspace\designs\$projectId\design-document.html" }
$outputDir = Split-Path $outputPath -Parent

if (-not (Test-Path $outputDir)) {
    New-Item -ItemType Directory -Path $outputDir -Force | Out-Null
}

# 通过Handlebars模板生成HTML输出
# 渲染模板并保存到输出位置
$html = @"
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$($project.name) - 设计文档</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
    <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg p-8">
        <h1 class="text-4xl font-bold mb-4">$($project.name)</h1>
        <p class="text-gray-600 mb-8">$($project.description)</p>
        
        <section class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">项目信息</h2>
            <ul class="list-disc list-inside">
                <li>项目ID: $projectId</li>
                <li>目标平台: $($project.targetPlatform)</li>
                <li>创建时间: $($project.createdAt)</li>
            </ul>
        </section>
        
        <section class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">需求列表</h2>
            <!-- 需求内容 -->
        </section>
        
        <footer class="text-sm text-gray-500 mt-8 pt-4 border-t">
            <p>由 DesignFast 生成</p>
        </footer>
    </div>
</body>
</html>
"@

$html | Set-Content -Path $outputPath -Encoding UTF8

Write-Host "`n✓ 设计文档生成完成!" -ForegroundColor Green
Write-Host "  项目ID: $projectId" -ForegroundColor Gray
Write-Host "  文档路径: $outputPath" -ForegroundColor Gray
Write-Host "  需求数量: $($requirements.requirements.Count)" -ForegroundColor Gray
```

## Performance Requirements
- 文档生成：< 5秒
- 文件写入：< 1秒
- 总时间：< 10秒

## Error Handling

### Error: Requirements file not found
```
错误: 需求文档不存在
建议: 检查文件路径是否正确
```

### Error: Invalid requirements format
```
错误: 需求文档格式无效
建议: 确保使用Markdown格式
```

### Error: Requirements too short
```
错误: 需求内容过短（< 10字符）
建议: 提供更详细的需求描述
```

## Constitutional Compliance

✅ **Agent-First**: 调用design-director和requirements-analyzer代理
✅ **File-Based**: 所有输出保存为文件（HTML, JSON, MD）
✅ **Accessibility**: 自动添加WCAG AA需求
✅ **Mobile-First**: 自动添加响应式需求
✅ **Quality Gates**: 验证文档完整性
✅ **Performance**: < 10秒生成时间