# Vue 模块 | Vue Module

## 概述

Vue 模块提供 Vue.js 后端支持和 HTML 生成功能，可用于快速创建基于 Vue.js 的响应式页面。

## 特性

- **Vue CDN 配置**: 支持 unpkg、cdnjs、jsdelivr 和本地 Vue 文件
- **Vue 代码检测**: 自动检测 HTML 中的 Vue 代码模式
- **自动导入**: 当检测到 Vue 代码时自动添加 Vue CDN 导入
- **HTML 页面生成**: 生成带有 Vue 集成的完整 HTML 页面
- **预制系统信息页面**: 展示系统信息、性能监控和模块列表
- **变量替换**: 支持模板变量替换

---

## 平台支持

- ✅ Windows
- ✅ Linux
- ✅ macOS

---

## 本地文件支持

Vue 模块支持使用本地 Vue.js 文件，无需依赖 CDN 即可离线工作。

```c
// 设置本地 Vue.js 文件路径
void nl_vue_set_local_path(const char* path);

// 从文件加载 Vue.js 内容到内存
int nl_vue_load_from_file(const char* filepath);

// 检查是否已加载本地 Vue.js
int nl_vue_has_local_content(void);

// 获取本地 Vue.js 内容
const char* nl_vue_get_local_content(void);

// 获取本地 Vue.js 文件路径
const char* nl_vue_get_local_path(void);

// 清除本地 Vue.js 内容
void nl_vue_clear_local_content(void);
```

### 本地模式使用示例

```c
#include <stdio.h>
#include <stdlib.h>
#include "netleaf_vue.h"

int main() {
    nl_vue_init();
    
    // 方式1: 直接从文件加载
    if (nl_vue_load_from_file("./vue.global.js") == 0) {
        printf("Vue.js 已加载，大小: %zu bytes\n", 
               strlen(nl_vue_get_local_content()));
    }
    
    // 生成带内嵌 Vue.js 的页面
    char* page = nl_vue_generate_page_inline("<div>{{ message }}</div>", 
                                             "离线页面", "./vue.global.js");
    if (page) {
        printf("%s\n", page);
        free(page);
    }
    
    // 生成系统信息页面（内嵌Vue）
    char* sysinfo = nl_vue_generate_sysinfo_inline("系统信息", "./vue.global.js");
    if (sysinfo) {
        printf("%s\n", sysinfo);
        free(sysinfo);
    }
    
    nl_vue_shutdown();
    return 0;
}
```

---

## 预制页面

Vue 模块提供了一个预制页面，展示 NetLeaf 的所有内容和功能：

### 系统信息页面 (`nl_vue_generate_sysinfo`)

展示 NetLeaf 完整信息的动态 Vue 页面：

- **系统信息**：平台、架构、CPU核心数、内存
- **性能监控**：CPU使用率、内存使用率、运行时间（实时更新）
- **模块列表**：所有 NetLeaf 模块及版本信息
- **功能支持**：各功能的支持状态和平台兼容性

```c
// 生成系统信息页面（CDN模式）
char* page = nl_vue_generate_sysinfo("NetLeaf 系统信息");

// 生成系统信息页面（离线模式，使用本地Vue.js）
char* page = nl_vue_generate_sysinfo_inline("NetLeaf 系统信息", "./vue.global.js");
```

页面特性：
- Vue 3 响应式动态更新
- 实时性能数据（每秒更新）
- 美观的卡片式布局
- 颜色编码的进度条
- 完整的模块和功能表格

---

## API 参考

### 初始化与清理

```c
// 初始化 Vue 模块
int nl_vue_init(void);

// 关闭 Vue 模块
void nl_vue_shutdown(void);

// 检查 Vue 模块是否可用
int nl_vue_is_available(void);

// 获取 Vue 模块版本
const char* nl_vue_version(void);
```

### CDN 配置

```c
// 设置默认 Vue 版本
void nl_vue_set_default_version(const char* version);

// 获取默认 Vue 版本
const char* nl_vue_get_default_version(void);

// 设置默认 CDN 类型
void nl_vue_set_default_cdn(nl_vue_cdn_type_t cdn_type);

// 获取默认 CDN 类型
nl_vue_cdn_type_t nl_vue_get_default_cdn(void);
```

### CDN 类型

| 类型 | 描述 |
|------|------|
| `NL_VUE_CDN_UNPKG` | unpkg CDN (默认) |
| `NL_VUE_CDN_CDNJS` | cdnjs CDN |
| `NL_VUE_CDN_JSDELIVR` | jsdelivr CDN |
| `NL_VUE_CDN_LOCAL` | 本地文件 |

### 页面生成

```c
// 生成完整 HTML 页面
char* nl_vue_generate_page(const char* vue_code, const char* title, 
                           nl_vue_cdn_type_t cdn_type, const char* version);

// 生成带变量的 HTML 页面
char* nl_vue_generate_page_with_vars(const char* vue_code, const char* title,
                                     const char** vars, const char** values, int count,
                                     nl_vue_cdn_type_t cdn_type, const char* version);
```

### 预制页面

```c
// 生成完整 HTML 页面
char* nl_vue_generate_page(const char* vue_code, const char* title, 
                           nl_vue_cdn_type_t cdn_type, const char* version);

// 生成带变量的 HTML 页面
char* nl_vue_generate_page_with_vars(const char* vue_code, const char* title,
                                     const char** vars, const char** values, int count,
                                     nl_vue_cdn_type_t cdn_type, const char* version);
```

### 预制系统信息页面

```c
// 生成系统信息页面（CDN模式）
char* nl_vue_generate_sysinfo(const char* title);

// 生成系统信息页面（离线模式，使用本地Vue.js）
char* nl_vue_generate_sysinfo_inline(const char* title, const char* vue_filepath);
```

---

## 使用示例

```c
#include <stdio.h>
#include <stdlib.h>
#include "netleaf_vue.h"

int main() {
    // 初始化模块
    nl_vue_init();
    
    // 设置默认配置（可选）
    nl_vue_set_default_version("3.4.0");
    nl_vue_set_default_cdn(NL_VUE_CDN_UNPKG);
    
    // 生成系统信息页面
    char* sysinfo = nl_vue_generate_sysinfo("NetLeaf 系统信息");
    if (sysinfo) {
        printf("%s\n", sysinfo);
        free(sysinfo);
    }

    // 生成内嵌Vue.js的系统信息页面（离线模式）
    char* sysinfo_inline = nl_vue_generate_sysinfo_inline("NetLeaf 系统信息", "./vue.global.js");
    if (sysinfo_inline) {
        printf("%s\n", sysinfo_inline);
        free(sysinfo_inline);
    }
    
    // 清理
    nl_vue_shutdown();
    return 0;
}
```

---

## 构建选项

```bash
# 默认启用
BUILD_VUE=ON

# 禁用
BUILD_VUE=OFF
```

---

## 文件结构

```
src/vue/
├── CMakeLists.txt      # CMake 配置
└── netleaf_vue.c       # Vue 模块实现

include/
└── netleaf_vue.h       # 头文件
```

---

## 依赖

Vue 模块不依赖其他模块，可独立使用。