# lan-hu-app

> 蓝湖应用开发技能，用于构建和管理蓝湖相关的应用功能

- Author: langliu
- Repository: langliu/skills
- Version: 20260125000153
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/langliu/skills
- Web: https://mule.run/skillshub/@@langliu/skills~lan-hu-app:20260125000153

---

---
name: lan-hu-app
description: 蓝湖应用开发技能，用于构建和管理蓝湖相关的应用功能
license: MIT
compatibility: opencode
metadata:
  audience: developers
  workflow: development
---

## What I do

我可以帮助你：

- 自动化登录蓝湖账号
- 导出蓝湖设计稿、标注和切图资源
- 提取蓝湖页面的 CSS/HTML 样式代码
- 管理蓝湖项目和设计资源
- 将设计资源集成到开发工作流

技术栈：

- pnpm / Bun + TypeScript
- Playwright 浏览器自动化
- 与 Python MCP Server 功能兼容

## When to use me

当你需要：

1. **保存蓝湖配置** - 首次使用时保存账号密码到配置文件
2. **登录蓝湖** - 使用保存的配置或手动提供账号密码登录
3. **导出设计资源** - 从蓝湖导出设计图、CSS 样式、切图等
4. **提取样式代码** - 快速获取页面的 CSS/HTML 代码标注
5. **自动化设计工作流** - 将设计资源自动同步到项目中
6. **批量处理设计文件** - 批量导出多个页面或项目

## Examples

### 1. 保存蓝湖账号配置

**方式一：通过 OpenCode Agent 保存**

在 OpenCode 中告诉我你的账号密码，我会自动保存到配置文件：

```txt
请保存我的蓝湖配置：
账号：your@email.com
密码：yourpassword
```

Agent 会将配置保存到 `.opencode/skills/lan-hu-app/config/credentials.json`

**方式二：手动编辑配置文件**

直接编辑配置文件：

```bash
# 编辑配置文件
nano .opencode/skills/lan-hu-app/config/credentials.json
```

```json
{
  "lanhu": {
    "email": "your@email.com",
    "password": "yourpassword"
  },
  "outputDir": "./lanhu-export"
}
```

保存后设置文件权限：

```bash
chmod 600 .opencode/skills/lan-hu-app/config/credentials.json
```

### 2. 登录蓝湖账号

```bash
# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts

# 首次使用需要安装依赖 (推荐使用 pnpm)
pnpm install # 如果没有 pnpm，请使用 bun install

# 安装 Playwright 浏览器（仅首次）
pnpm dlx playwright install chromium # 如果没有 pnpm，请使用 bunx playwright install chromium

# 登录蓝湖（会打开浏览器窗口）
pnpm run login your@email.com yourpassword # 如果没有 pnpm，请使用 bun run login.ts ...

# 或使用无头模式（后台运行）
pnpm run login your@email.com yourpassword true
```

登录成功后，状态会保存到 `.opencode/skills/lan-hu-app/config/auth-state.json` 文件中，后续操作将自动使用此状态，无需重复登录。

### 3. 导出蓝湖设计稿页面

你可以直接导出蓝湖设计稿，包括设计图、CSS/HTML 代码和切图资源。

导出的文件结构如下：

- `design.png`: 高清设计图
- `index.html`: 结构代码
- `index.css`: 样式代码
- `common.css`: 基础公共样式（自动拷贝）
- `images/`: 切图资源
- `meta.json`: 导出元数据

**通过命令行导出：**

```bash
# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts

# 导出指定页面
pnpm run export "https://lanhuapp.com/web/#/item/board?pid=xxx&image_id=yyy"

# 强制更新已存在的资源
pnpm run export "URL" --force

# 指定输出目录
pnpm run export "URL" ./my-assets
```

**通过 OpenCode Agent 导出：**

在对话框中提供页面链接，我会自动帮你下载资源：

```
请帮我导出这个蓝湖页面：https://lanhuapp.com/web/#/item/board?pid=...
```

### 4. 提取页面样式代码

如果你只需要获取页面的 CSS 或 HTML 代码而不需要下载图片，可以使用提取样式功能。

**通过命令行提取：**

```bash
# 进入脚本目录
cd .opencode/skills/lan-hu-app/scripts

# 提取并打印样式 (JSON 格式输出)
pnpm run get-styles "URL"
```

**通过 OpenCode Agent 提取：**

```
请帮我提取这个蓝湖页面的样式代码：https://lanhuapp.com/...
```

### 5. 在代码中调用

```typescript
import { login } from './.opencode/skills/lan-hu-app/scripts/login.ts'
import { LanhuExporter } from './.opencode/skills/lan-hu-app/scripts/export.ts'

// 使用配置登录
const result = await login({ email, password })

// 导出页面
const exporter = new LanhuExporter()
await exporter.export({ pageUrl: "..." })
```

## Technical Details

### 文件结构

```
.opencode/skills/lan-hu-app/
├── SKILL.md                      # 技能说明文档
├── config/                       # 配置目录
│   ├── credentials.json         # 账号密码配置
│   ├── auth-state.json          # 浏览器登录状态
│   ├── credentials.json.template # 配置模板
│   └── README.md                # 配置说明
└── scripts/                     # 自动化脚本
    ├── login.ts                 # 登录脚本
    ├── save-config.ts           # 保存配置脚本
    ├── export.ts                # 页面导出脚本
    ├── get-styles.ts            # 样式提取脚本
    ├── package.json             # 依赖配置
    └── README.md                # 脚本使用说明
```

### 浏览器状态数据

- **状态文件**: `.opencode/skills/lan-hu-app/config/auth-state.json`
- **包含内容**: Cookies、LocalStorage、Session 等登录凭证
- **安全性**: 数据存储在本地配置目录中，已添加到 `.gitignore`

### 常见问题

**Q: 配置文件安全吗？**
A: 配置文件和状态文件已设置权限为 600（仅所有者可读写），并已添加到 `.gitignore`，不会被提交到版本控制。

**Q: 登录凭证保存在哪里？**
A: 保存在 `.opencode/skills/lan-hu-app/config/` 目录下：
- `credentials.json`: 账号密码
- `auth-state.json`: 浏览器登录状态

**Q: 如何退出登录？**
A: 删除 `.opencode/skills/lan-hu-app/config/auth-state.json` 文件即可清除登录状态。