Compose Web：VS Code 插件驱动的全栈脚手架系统

interface Atom {
  id: string
  type: 'ui' | 'api' | 'data'
  name: string
  description: string
 
  // 技术栈适配
  adapters: {
    [frontend: string]: {
      template: string
      dependencies: string[]
    }
  }
 
  // 使用约束
  constraints: {
    requires?: string[]
    conflicts?: string[]
  }
}
 
// 示例：按钮 Atom
const ButtonAtom: Atom = {
  id: 'atom-button',
  type: 'ui',
  name: 'Button',
  description: '通用按钮',
 
  adapters: {
    'vue': {
      template: `<button class="btn {{variant}}" @click="onClick">{{label}}</button>`,
      dependencies: []
    },
    'react': {
      template: `<button className="btn {{variant}}" onClick={onClick}>{label}</button>`,
      dependencies: []
    },
    'svelte': {
      template: `<button class="btn {{variant}}" on:click={onClick}>{label}</button>`,
      dependencies: []
    }
  },
 
  constraints: {}
}

interface Component {
  id: string
  name: string
  description: string
 
  // 组成的 Atom
  atoms: AtomReference[]
 
  // 组合逻辑
  composition: {
    layout: LayoutTemplate
    wiring: WiringScript
  }
 
  // 支持的技术栈
  supportedStacks: string[]
}
 
// 示例：登录表单 Component
const LoginFormComponent: Component = {
  id: 'comp-login-form',
  name: 'LoginForm',
  description: '用户登录表单',
 
  atoms: [
    { ref: 'atom-input', props: { type: 'text', label: '用户名' } },
    { ref: 'atom-input', props: { type: 'password', label: '密码' } },
    { ref: 'atom-button', props: { label: '登录', variant: 'primary' } },
    { ref: 'atom-button', props: { label: '注册', variant: 'secondary' } }
  ],
 
  composition: {
    layout: 'vertical-form',
    wiring: 'connect-form-submit'
  },
 
  supportedStacks: ['vue', 'react', 'svelte']
}

interface Composite {
  id: string
  name: string
  description: string
 
  // 组成的 Component
  components: ComponentReference[]
 
  // 页面结构
  structure: {
    routes: RouteDefinition[]
    layout: LayoutDefinition
  }
}
 
// 示例：用户管理后台 Composite
const UserManagementComposite: Composite = {
  id: 'comp-user-management',
  name: 'UserManagement',
  description: '用户管理后台',
 
  components: [
    { ref: 'comp-data-table', slot: 'main' },
    { ref: 'comp-search-bar', slot: 'header' },
    { ref: 'comp-user-form', slot: 'modal' },
    { ref: 'comp-pagination', slot: 'footer' }
  ],
 
  structure: {
    routes: [
      { path: '/users', component: 'UserList' },
      { path: '/users/:id', component: 'UserDetail' }
    ],
    layout: 'admin-layout'
  }
}

// Extension Host → Webview
interface ExtensionToWebview {
  type: 'response' | 'progress' | 'diff' | 'error'
  payload: any
}
 
// Webview → Extension Host
interface WebviewToExtension {
  type: 'input' | 'confirm' | 'cancel' | 'config'
  payload: any
}
 
// 通信示例
webview.postMessage({
  type: 'diff',
  payload: {
    files: [
      { path: 'src/pages/UserManagement.vue', diff: '...' },
      { path: 'src/api/user.ts', diff: '...' }
    ]
  }
})

interface ContextReader {
  // 快速扫描：秒级，用于定位插入点
  quickScan(project: Project): Promise<QuickContext>
 
  // 深度分析：分钟级，用于理解项目结构
  deepAnalyze(project: Project): Promise<DeepContext>
}
 
// QuickContext：仅包含结构信息
interface QuickContext {
  structure: {
    directories: string[]
    entryPoints: string[]
    configFiles: string[]
  }
  patterns: string[]  // 识别的设计模式
}
 
// DeepContext：包含完整理解
interface DeepContext {
  ...QuickContext
  components: ComponentAnalysis[]
  apis: ApiAnalysis[]
  dependencies: DependencyGraph
}

function determineContextMode(request: UserRequest): 'quick' | 'deep' {
  // 简单添加：quick
  if (request.type === 'add-component' && request.target) {
    return 'quick'
  }
 
  // 架构变更：deep
  if (request.type === 'add-feature' || request.type === 'refactor') {
    return 'deep'
  }
 
  // 默认：quick
  return 'quick'
}

interface StackAdapter {
  frontend: FrontendAdapter
  backend: BackendAdapter
  database: DatabaseAdapter
}
 
class VueExpressPostgresAdapter implements StackAdapter {
  frontend = {
    name: 'vue',
    transformAtom: (atom: Atom) => string,
    transformComponent: (comp: Component) => string
  }
 
  backend = {
    name: 'express',
    transformApi: (api: ApiDefinition) => string,
    generateRoute: (route: RouteDefinition) => string
  }
 
  database = {
    name: 'postgresql',
    transformSchema: (schema: SchemaDefinition) => string,
    generateMigration: (migration: MigrationDefinition) => string
  }
}

interface GenerationStrategy {
  level: 'normal' | 'conservative' | 'minimal'
 
  // normal: 完整功能
  generateFull(request: UserRequest): Promise<GeneratedCode>
 
  // conservative: 安全模式
  generateSafe(request: UserRequest): Promise<GeneratedCode>
 
  // minimal: 最小化
  generateMinimal(request: UserRequest): Promise<GeneratedCode>
}
 
async function generateWithFallback(
  request: UserRequest,
  strategy: GenerationStrategy
): Promise<GeneratedCode> {
  try {
    // 尝试完整生成
    const code = await strategy.generateFull(request)
    const validation = await validate(code)
 
    if (validation.passed) return code
 
    // 降级到安全模式
    strategy.level = 'conservative'
    const safeCode = await strategy.generateSafe(request)
    const safeValidation = await validate(safeCode)
 
    if (safeValidation.passed) return safeCode
 
    // 降级到最小化
    strategy.level = 'minimal'
    return strategy.generateMinimal(request)
 
  } catch (error) {
    // 异常时直接降级
    strategy.level = 'conservative'
    return strategy.generateSafe(request)
  }
}

async function validate(code: GeneratedCode): Promise<ValidationResult> {
  const results: ValidationResult[] = []
 
  // 1. Lint 检查
  results.push(await runLint(code))
 
  // 2. 类型检查
  results.push(await runTypeCheck(code))
 
  // 3. 单元测试（如果有）
  if (code.tests) {
    results.push(await runTests(code.tests))
  }
 
  // 4. 运行时检查（可选）
  if (code.hasRuntimeCheck) {
    results.push(await runRuntimeCheck(code))
  }
 
  return {
    passed: results.every(r => r.passed),
    errors: results.flatMap(r => r.errors)
  }
}

function sortFilesByDependency(
  files: FileModification[]
): FileModification[] {
  // 构建依赖图
  const graph = new Map<string, Set<string>>()
 
  for (const file of files) {
    const deps = analyzeDependencies(file)
    graph.set(file.path, deps)
  }
 
  // 拓扑排序
  const sorted: string[] = []
  const visited = new Set<string>()
  const visiting = new Set<string>()
 
  function visit(path: string) {
    if (visited.has(path)) return
    if (visiting.has(path)) {
      throw new Error('Circular dependency detected')
    }
 
    visiting.add(path)
 
    const deps = graph.get(path) || new Set()
    for (const dep of deps) {
      visit(dep)
    }
 
    visiting.delete(path)
    visited.add(path)
    sorted.push(path)
  }
 
  for (const file of files) {
    visit(file.path)
  }
 
  return sorted.map(path => files.find(f => f.path === path)!)
}