# Iris SFC - Vue 组件加载架构

## 概述

Iris SFC 现在提供**包含 Vue 元素的 HTML 超集**，支持：
- ✅ 标准 Vue SFC 编译
- ✅ 递归加载子组件
- ✅ 从 GitHub 下载开源组件源码
- ✅ 本地缓存机制
- ✅ 组件标签自动展开

## 架构

```
Vue SFC 文件
  ↓
VueComponentLoader::load_and_parse()
  ↓
1. 解析 template/script/style
2. 提取 import 语句
3. 递归加载子组件
   ├─ 优先从 ComponentRegistry 下载
   └─ 回退到本地文件
4. 展开组件标签
   - <ElButton /> → <div class="component-elbutton">...</div>
5. 返回 ParsedVueSFC
```

## API

### 简化 API

```rust
use iris_sfc;

// 方式 1: 简单编译（不加载子组件）
let compiled = iris_sfc::compile_vue(vue_source)?;

// 方式 2: 完整加载（包含子组件展开）
let parsed = iris_sfc::load_vue_component("src/App.vue")?;
```

### 高级 API

```rust
use iris_sfc::{VueComponentLoader, ComponentRegistry};

// 创建加载器（带注册表）
let cache_dir = std::path::PathBuf::from("~/.iris/component-cache");
let registry = ComponentRegistry::new(cache_dir)?;
registry.load_from_file("docs/vue-components-registry.json")?;

let mut loader = VueComponentLoader::new(base_path)
    .with_registry(registry);

// 加载并解析
let parsed = loader.load_and_parse("src/App.vue")?;

// 访问结果
println!("Component: {}", parsed.name);
println!("Template HTML: {}", parsed.template_html);
println!("Styles: {:?}", parsed.styles);
println!("Child components: {:?}", parsed.child_components.keys());
```

## 输出结构

```rust
pub struct ParsedVueSFC {
    pub name: String,                  // 组件名
    pub template_html: String,         // 展开后的 HTML
    pub script_content: String,        // Script 内容
    pub styles: Vec<String>,           // CSS 样式
    pub child_components: HashMap<String, ParsedVueSFC>, // 子组件
}
```

## 组件展开示例

**输入 App.vue：**
```vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <ElButton type="primary">Click</ElButton>
  </div>
</template>
```

**输出 ParsedVueSFC：**
```rust
ParsedVueSFC {
    name: "App",
    template_html: r#"
        <div>
            <h1>{{ title }}</h1>
            <div class="component-elbutton">
                <button class="el-button el-button--primary">
                    <span>Click</span>
                </button>
            </div>
        </div>
    "#,
    script_content: "...",
    styles: vec!["..."],
    child_components: {
        "ElButton": ParsedVueSFC { ... }
    }
}
```

## 组件注册表

### 从 GitHub 下载组件

注册表文件：`docs/vue-components-registry.json`

支持的组件库：
- Element Plus（ElButton, ElCard, ElDialog...）
- PrimeVue（Button, Card, DataTable...）
- Naive UI（NButton, NCard...）
- Vant（VanButton, VanCell...）
- Vuetify（VBtn, VCard...）

### 路径推断规则

```
ElButton → button → https://raw.githubusercontent.com/element-plus/...
NButton → Button → https://raw.githubusercontent.com/tusen-ai/...
```

## 与 iris-engine 集成

```rust
// 在 RuntimeOrchestrator 中
pub fn load_vue_app(&mut self, path: &Path) -> Result<(), String> {
    // 使用 iris-sfc 加载
    let parsed = iris_sfc::load_vue_component(path)?;
    
    // 提取样式
    for css in &parsed.styles {
        self.add_css_stylesheet("main", css);
    }
    
    // 执行 script
    let variables = self.execute_script_setup(&parsed.script_content)?;
    
    // 解析 template 为 DOM
    let dom = self.html_parser(&parsed.template_html)?;
    
    // 替换变量
    self.replace_variables_in_dom(&mut dom, &variables);
    
    // 转换为 VTree
    let vtree = VTree::from_dom_node(&dom);
    self.vtree = Some(vtree);
    
    Ok(())
}
```

## 缓存机制

组件源码缓存在 `~/.iris/component-cache/`：

```
~/.iris/component-cache/
├── ElButton.vue
├── ElCard.vue
├── DataTable.vue
└── ...
```

## 下一步

- [ ] 支持 TSX → Vue 转换（Naive UI, Vant）
- [ ] Props 传递机制
- [ ] 事件绑定处理
- [ ] 动态组件加载
- [ ] 版本锁定与更新检测
