lanhu-layer-tree

蓝湖设计图图层树提取工具 - 从蓝湖获取设计图列表、图层信息、切图资源等。

特性

✅ 完整功能

• 获取项目设计图列表
• 提取图层信息（含文本样式、smartObject、描边、阴影等完整属性）
• 树形结构输出（支持 Unity/Cocos 坐标系转换）
• 资源 UUID/GUID 自动解析（Unity .meta / Cocos .meta）
• 切图列表获取和批量下载
• 设计图截图下载

✅ 多 URL 合并

• 支持逗号分隔多个 URL
• 自动计算图层相似度（< 80% 终止）
• 智能合并图层并标注来源

✅ Cookie 自动管理

• 从 Chrome 自动读取蓝湖 cookie（跨平台支持 macOS/Windows/Linux）
• 认证失败自动刷新重试
• 支持手动刷新命令

安装

全局安装（推荐）

npm install -g lanhu-layer-tree

本地开发

git clone <repo>
cd lanhu-layer-tree
npm install
npm run build
npm link

配置

Cookie 缓存机制

工具采用智能缓存策略，避免每次都访问 Chrome Keychain：

1. 首次使用：从 Chrome 读取 cookie → 自动创建/更新 .env 文件
2. 后续使用：直接从 .env 读取，无需访问 Chrome
3. 认证失败：自动刷新一次并更新 .env

方式 1：自动从 Chrome 读取（推荐）

确保 Chrome 已登录 lanhuapp.com，首次运行时会自动读取并保存：

# 首次使用或 cookie 过期时，手动刷新
lanhu refresh-cookie

# 或指定 .env 文件路径
lanhu refresh-cookie /path/to/.env

首次运行后会自动创建 .env 文件，后续无需再访问 Chrome Keychain。

方式 2：手动配置 .env

在项目根目录创建 .env 文件：

SESSION=your_session_cookie
USER_TOKEN=your_user_token
TID=your_default_team_id

如何获取 cookie：

1. Chrome 登录 lanhuapp.com
2. 打开开发者工具（F12）→ Application → Cookies → https://lanhuapp.com
3. 复制 session 和 user_token 的值

使用

1. 列出项目设计图

# 基本用法
lanhu list "https://lanhuapp.com/web/#/item/project/product?pid=xxx&tid=xxx"

# 保存到文件
lanhu list "https://lanhuapp.com/web/#/item/project/product?pid=xxx&tid=xxx" -o designs.json

2. 获取图层信息

基本用法

# 从完整 URL 获取（自动提取 image_id）
lanhu layers "https://lanhuapp.com/web/#/item/project/detailDetach?tid=xxx&pid=xxx&image_id=xxx"

# 手动指定设计图 ID
lanhu layers "https://lanhuapp.com/web/#/item/project/product?pid=xxx" design_id_123

树形结构输出

# 树形格式
lanhu layers "https://lanhuapp.com/...&image_id=xxx" --tree

# 保存到文件
lanhu layers "https://lanhuapp.com/...&image_id=xxx" --tree -o layers.txt

引擎坐标系转换

# Unity 坐标系（中心原点，Y 向上，锚点 0.5）
lanhu layers "https://lanhuapp.com/...&image_id=xxx" --tree --engine unity

# Cocos 坐标系
lanhu layers "https://lanhuapp.com/...&image_id=xxx" --tree --engine cocos

资源 UUID 解析

# Unity 项目（解析 .meta 中的 guid 和 spriteBorder）
lanhu layers "https://lanhuapp.com/...&image_id=xxx" \
  --tree \
  --engine unity \
  --assets-dir /path/to/unity/Assets

# Cocos 项目（读取或生成 .meta 中的 uuid）
lanhu layers "https://lanhuapp.com/...&image_id=xxx" \
  --tree \
  --engine cocos \
  --assets-dir /path/to/cocos/assets

输出示例：

Root
├── sp Background uuid[a1b2c3d4] pos[0,0] size[750,1334]
├── gp Container pos[0,100] size[700,500]
│   ├── sp Img_Button uuid[e5f6g7h8] s9[10,10] pos[-200,50] size[200,80]
│   └── txt T1 Title pos[0,150] size[300,40] style[#333333,28,PingFang SC]
└── sp Img_Icon uuid[i9j0k1l2] pos[100,-200] size[64,64]

多 URL 合并

# 逗号分隔多个 URL
lanhu layers "url1,url2,url3" --tree -o merged.txt

# 从文件读取 URL
echo "https://lanhuapp.com/...&image_id=xxx" > urls.txt
lanhu layers @urls.txt --tree

合并规则：

• 自动计算相似度（路径 + 类型 + 名称 + 尺寸）
• 相似度 < 80% 时终止并提示
• 以第一个为基准，独有图层标注 (from <设计名>)

3. 获取切图列表

# 查看切图列表（JSON）
lanhu slices "https://lanhuapp.com/...&image_id=xxx"

# 保存列表到文件
lanhu slices "https://lanhuapp.com/...&image_id=xxx" -o slices.json

# 批量下载切图
lanhu slices "https://lanhuapp.com/...&image_id=xxx" -d ./output

4. 下载设计图截图

# 下载到当前目录
lanhu download "https://lanhuapp.com/...&image_id=xxx"

# 指定输出目录
lanhu download "https://lanhuapp.com/...&image_id=xxx" -d ./screenshots

# 指定文件名
lanhu download "https://lanhuapp.com/...&image_id=xxx" design_id_123 "MyDesign"

5. 刷新 Cookie

# 从 Chrome 刷新 cookie 到当前目录 .env
lanhu refresh-cookie

# 指定 .env 文件路径
lanhu refresh-cookie /path/to/.env

图层命名规范

工具会自动处理以下命名规则：

资源图层

• Img_ButtonNormal → 提取资源名 ButtonNormal.png
• ImgIcon → 提取资源名 Icon.png
• Img_Button 拷贝 2 → 自动去除 "拷贝" 后缀
• Img_Panel s9-10-10 → 九宫格参数 s9[10,10]
• common_btn_zhuanniu - 智能对象组 → 输出为 common_btn_zhuanniu（去除中文后缀）
• common_btn - 智能对象组 s9-3-3 → 输出为 common_btn s9[3,3]（保留九宫格参数）

过滤规则

• 参考图xxx → 不导出
• fexxx → 不导出
• sp 类型且以中文开头（如 按钮图标、图层 3）→ 不导出（完全过滤）
• sp 类型以英文开头（如 common_btn - 智能对象组）→ 导出但去除中文后缀
• background → 不解析 UUID（但会导出）

输出格式

文本图层：

txt T1 Title pos[x,y] size[w,h] style[#333333,28,PingFang SC,#FF0000,2]
                                      ↑颜色  ↑字号 ↑字体      ↑描边色 ↑描边宽度

组图层：

gp Container pos[x,y] size[w,h]

普通图层：

sp ButtonNormal uuid[a1b2c3d4] s9[10,10] pos[x,y] size[w,h]
                ↑资源UUID/GUID  ↑九宫格   ↑位置    ↑尺寸

API 使用

也可以作为 Node.js 库使用：

import { LanhuClient, formatLayersTree } from 'lanhu-layer-tree';

const client = new LanhuClient({
  cookie: 'your_cookie_here' // 可选，默认从环境变量读取
});

// 获取设计图列表
const designs = await client.getDesigns(url);

// 获取图层信息
const layers = await client.getDesignLayers(url, designId);

// 格式化为树形结构
const tree = formatLayersTree(
  layers.layers,
  layers.design_name,
  layers.canvas_size.width,
  layers.canvas_size.height,
  { 
    engine: 'unity',
    assetsDir: '/path/to/Assets'
  }
);

console.log(tree);

常见问题

Q: 提示 "未找到蓝湖 cookie"

A: 两种解决方案：

1. 确保 Chrome 已登录 lanhuapp.com，运行 lanhu refresh-cookie
2. 手动配置 .env 文件（参考配置章节）

Q: 提示 "chrome-cookies-secure 未安装"

A: 运行 npm install chrome-cookies-secure

Q: macOS 提示 Keychain 权限

A: 首次使用时 macOS 会弹窗请求访问 Keychain，点击"始终允许"

Q: 资源 UUID 解析失败

A: 检查：

1. --assets-dir 路径是否正确
2. 资源文件是否存在（文件名需与图层名匹配）
3. Unity 项目需要 .meta 文件存在

Q: 多 URL 合并提示相似度过低

A: 确保所有设计图具有相似的图层结构（路径、类型、名称）

开发

# 安装依赖
npm install

# 编译
npm run build

# 开发模式（监听文件变化）
npm run dev

# 本地测试
npm link
lanhu --help

License

MIT