lanhu-layer-tree 1.0.0

package/src/formatter.ts

@@ -0,0 +1,251 @@
+import { Layer, TreeFormatOptions } from './types';
+import { convertToEnginePos } from './utils';
+import {
+  resolveLayerAssetsUnity,
+  resolveLayerAssetsCocos,
+  getAssetInfoForLayer,
+  AssetInfo
+} from './resolver';
+
+/**
+ * 翻转同级节点的顺序（保持父子关系不变）
+ * 游戏引擎中节点展示逻辑跟 PS 中是相反的，位于树下方的在展示时靠前
+ */
+function reverseSiblingOrder(layers: Layer[]): Layer[] {
+  if (!layers || layers.length === 0) return [];
+
+  // 分组：按父路径分组同级节点
+  const siblingsMap: Record<string, Layer[]> = {};
+  layers.forEach(layer => {
+    const path = layer.path;
+    const parentPath = path.includes('/') ? path.split('/').slice(0, -1).join('/') : '';
+    if (!siblingsMap[parentPath]) {
+      siblingsMap[parentPath] = [];
+    }
+    siblingsMap[parentPath].push(layer);
+  });
+
+  // 翻转每组同级节点
+  Object.keys(siblingsMap).forEach(parentPath => {
+    siblingsMap[parentPath].reverse();
+  });
+
+  // 重新构建列表（深度优先遍历）
+  const result: Layer[] = [];
+  const visited = new Set<string>();
+
+  function dfs(parentPath: string) {
+    if (!siblingsMap[parentPath]) return;
+    siblingsMap[parentPath].forEach(layer => {
+      const path = layer.path;
+      if (visited.has(path)) return;
+      visited.add(path);
+      result.push(layer);
+      dfs(path);
+    });
+  }
+
+  dfs('');
+  return result;
+}
+
+const GROUP_TYPES = new Set(['group', 'layerGroup', 'artboard', 'layerSection']);
+
+/**
+ * 将图层列表格式化为树形结构
+ */
+export function formatLayersTree(
+  layers: Layer[],
+  designName: string = 'Root',
+  canvasWidth: number = 0,
+  canvasHeight: number = 0,
+  options: TreeFormatOptions = {}
+): string {
+  if (!layers || layers.length === 0) return '';
+
+  // 解析资源 UUID（如果指定了引擎和资源目录）
+  let uuidMap: Record<string, AssetInfo> = {};
+  if (options.engine && options.assetsDir) {
+    console.log(`\n🔍 开始解析 ${options.engine.toUpperCase()} 资源 UUID...`);
+    if (options.engine === 'unity') {
+      uuidMap = resolveLayerAssetsUnity(layers, options.assetsDir);
+    } else if (options.engine === 'cocos') {
+      uuidMap = resolveLayerAssetsCocos(layers, options.assetsDir);
+    }
+    console.log(`✅ 解析完成，共找到 ${Object.keys(uuidMap).length} 个资源\n`);
+  }
+
+  const lines: string[] = [];
+  let textLayerIndex = 1;
+
+  // 过滤掉不需要导出的图层
+  const filteredLayers = layers.filter(layer => {
+    const name = layer.name.trim();
+    return !name.startsWith('参考图') && !name.startsWith('fe');
+  });
+
+  // 翻转同级节点顺序
+  const reversedLayers = reverseSiblingOrder(filteredLayers);
+
+  // 添加树根
+  lines.push(designName);
+
+  // 父节点栈：[(depth, abs_x, abs_y, width, height), ...]
+  const parentStack: Array<[number, number, number, number, number]> = [];
+
+  reversedLayers.forEach((layer, idx) => {
+    const depth = layer.depth;
+    let name = layer.name;
+
+    // 过滤掉名称中的"拷贝"及其后面的数字部分
+    name = name.replace(/\s*拷贝\s*\d*/g, '').trim();
+
+    // 提取九宫格参数（如 " s9-3-3" → [3,3]）
+    let s9Params: [number, number] | null = null;
+    const s9Match = name.match(/\s+s9-(\d+)-(\d+)/);
+    if (s9Match) {
+      s9Params = [parseInt(s9Match[1]), parseInt(s9Match[2])];
+    }
+
+    // 过滤掉九宫格标记
+    name = name.replace(/\s+s9-\d+-\d+/g, '').trim();
+
+    const ltype = layer.type;
+    const width = layer.width;
+    const height = layer.height;
+    const absX = layer.x;
+    const absY = layer.y;
+
+    // 维护父节点栈
+    while (parentStack.length > 0 && parentStack[parentStack.length - 1][0] >= depth) {
+      parentStack.pop();
+    }
+
+    // 计算相对于父节点的坐标
+    let relX: number, relY: number;
+    let parentW: number, parentH: number;
+
+    if (parentStack.length > 0) {
+      const [, parentAbsX, parentAbsY, pW, pH] = parentStack[parentStack.length - 1];
+      relX = absX - parentAbsX;
+      relY = absY - parentAbsY;
+      parentW = pW;
+      parentH = pH;
+    } else {
+      parentW = canvasWidth;
+      parentH = canvasHeight;
+      relX = absX;
+      relY = absY;
+    }
+
+    // 坐标系转换
+    let x: number, y: number;
+    if (options.engine && canvasWidth && canvasHeight) {
+      [x, y] = convertToEnginePos(relX, relY, width, height, parentW, parentH);
+    } else {
+      x = relX;
+      y = relY;
+    }
+
+    // 将当前节点加入父节点栈
+    parentStack.push([depth, absX, absY, width, height]);
+
+    // 查找资源 UUID（仅对非文本、非组图层）
+    let assetInfo: AssetInfo | null = null;
+    if (ltype !== 'textLayer' && !GROUP_TYPES.has(ltype)) {
+      assetInfo = getAssetInfoForLayer(layer.name, uuidMap);
+    }
+
+    // 构建图层描述
+    let desc: string;
+
+    if (ltype === 'textLayer') {
+      // 文本图层
+      const textStyle = layer.text_style || {};
+      const styleParts: string[] = [];
+      if (textStyle.fill_color) styleParts.push(textStyle.fill_color);
+      if (textStyle.font_size) styleParts.push(String(Math.round(textStyle.font_size)));
+      if (textStyle.font_name) styleParts.push(textStyle.font_name);
+      if (textStyle.stroke_color) styleParts.push(textStyle.stroke_color);
+      if (textStyle.stroke_width) styleParts.push(String(Math.round(textStyle.stroke_width)));
+
+      desc = `txt T${textLayerIndex} ${name} pos[${x},${y}] size[${width},${height}]`;
+      if (styleParts.length > 0) {
+        desc += ` style[${styleParts.join(',')}]`;
+      }
+      textLayerIndex++;
+    } else if (GROUP_TYPES.has(ltype)) {
+      // 组图层
+      desc = `gp ${name} pos[${x},${y}] size[${width},${height}]`;
+    } else {
+      // 普通图层
+      desc = `sp ${name}`;
+      if (assetInfo?.guid) {
+        desc += ` uuid[${assetInfo.guid}]`;
+      } else if (assetInfo?.uuid) {
+        desc += ` uuid[${assetInfo.uuid}]`;
+      }
+      if (assetInfo?.sliced) {
+        // 优先使用图层名称中的 s9 参数
+        if (s9Params) {
+          desc += ` s9[${s9Params[0]},${s9Params[1]}]`;
+        } else if (assetInfo.border) {
+          // border 格式: [left, bottom, right, top]
+          const [left, bottom] = assetInfo.border;
+          desc += ` s9[${left},${bottom}]`;
+        }
+      }
+      desc += ` pos[${x},${y}] size[${width},${height}]`;
+    }
+
+    // 检查是否是最后一个子节点
+    let isLastChild = true;
+    for (let nextIdx = idx + 1; nextIdx < reversedLayers.length; nextIdx++) {
+      const nextDepth = reversedLayers[nextIdx].depth;
+      if (nextDepth <= depth) {
+        if (nextDepth === depth) {
+          isLastChild = false;
+        }
+        break;
+      }
+    }
+
+    // 构建前缀
+    const prefixParts: string[] = [];
+
+    for (let d = 0; d <= depth; d++) {
+      if (d === depth) {
+        prefixParts.push(isLastChild ? '└── ' : '├── ');
+      } else {
+        // 找到深度为 d 的最近祖先节点
+        let ancestorIdx: number | null = null;
+        for (let prevIdx = idx - 1; prevIdx >= 0; prevIdx--) {
+          if (reversedLayers[prevIdx].depth === d) {
+            ancestorIdx = prevIdx;
+            break;
+          }
+        }
+
+        // 检查该祖先节点是否还有后续同级兄弟
+        let hasSibling = false;
+        if (ancestorIdx !== null) {
+          for (let checkIdx = ancestorIdx + 1; checkIdx < reversedLayers.length; checkIdx++) {
+            const checkDepth = reversedLayers[checkIdx].depth;
+            if (checkDepth <= d) {
+              if (checkDepth === d) {
+                hasSibling = true;
+              }
+              break;
+            }
+          }
+        }
+
+        prefixParts.push(hasSibling ? '│   ' : '    ');
+      }
+    }
+
+    lines.push(prefixParts.join('') + desc);
+  });
+
+  return lines.join('\n');
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { LanhuClient } from './client';
+export { formatLayersTree } from './formatter';
+export { parseUrl, normalizeColor, convertToEnginePos } from './utils';
+export * from './types';

package/src/merger.ts

@@ -0,0 +1,154 @@
+/**
+ * 多 URL 图层合并 - 相似度计算 + 合并
+ */
+
+import { Layer } from './types';
+
+/**
+ * 标准化路径：移除 #ID 后缀
+ * 用于支持同名图层匹配
+ */
+function normalizePath(path: string): string {
+  return path
+    .split('/')
+    .map(part => (part.includes('#') ? part.split('#')[0] : part))
+    .join('/');
+}
+
+/**
+ * 计算两个图层列表的相似度（0-100）
+ *
+ * 计算依据：
+ *  1. 路径匹配（去除 #ID 后缀的标准化路径）
+ *  2. 类型一致性（权重 40%）
+ *  3. 名称相似度（权重 30%，完全相等或字符重合度）
+ *  4. 尺寸接近度（权重 30%）
+ */
+export function calculateLayerSimilarity(layers1: Layer[], layers2: Layer[]): number {
+  if (!layers1 || !layers2 || layers1.length === 0 || layers2.length === 0) {
+    return 0;
+  }
+
+  const map1 = new Map<string, Layer[]>();
+  for (const layer of layers1) {
+    const key = normalizePath(layer.path || '');
+    if (!map1.has(key)) map1.set(key, []);
+    map1.get(key)!.push(layer);
+  }
+
+  const map2 = new Map<string, Layer[]>();
+  for (const layer of layers2) {
+    const key = normalizePath(layer.path || '');
+    if (!map2.has(key)) map2.set(key, []);
+    map2.get(key)!.push(layer);
+  }
+
+  let matchedCount = 0;
+  let totalScore = 0;
+
+  for (const [normPath, list1] of map1) {
+    const list2 = map2.get(normPath);
+    if (!list2) continue;
+
+    for (const layer1 of list1) {
+      let bestScore = 0;
+      for (const layer2 of list2) {
+        let score = 0;
+
+        // 类型匹配（权重 40%）
+        if ((layer1.type || '') === (layer2.type || '')) {
+          score += 0.4;
+        }
+
+        // 名称匹配（权重 30%）
+        const name1 = layer1.name || '';
+        const name2 = layer2.name || '';
+        if (name1 && name1 === name2) {
+          score += 0.3;
+        } else if (name1 && name2) {
+          let common = 0;
+          for (const c of name1) {
+            if (name2.includes(c)) common++;
+          }
+          score += 0.3 * (common / Math.max(name1.length, name2.length));
+        }
+
+        // 尺寸接近度（权重 30%）
+        const w1 = layer1.width || 0;
+        const h1 = layer1.height || 0;
+        const w2 = layer2.width || 0;
+        const h2 = layer2.height || 0;
+        if (w1 > 0 && h1 > 0 && w2 > 0 && h2 > 0) {
+          const wRatio = Math.min(w1, w2) / Math.max(w1, w2);
+          const hRatio = Math.min(h1, h2) / Math.max(h1, h2);
+          score += 0.3 * ((wRatio + hRatio) / 2);
+        }
+
+        if (score > bestScore) bestScore = score;
+      }
+
+      if (bestScore > 0.5) {
+        matchedCount++;
+        totalScore += bestScore;
+      }
+    }
+  }
+
+  const totalLayers = Math.max(layers1.length, layers2.length);
+  if (totalLayers === 0) return 0;
+
+  const matchRate = matchedCount / totalLayers;
+  const avgQuality = matchedCount > 0 ? totalScore / matchedCount : 0;
+
+  return Math.round(matchRate * avgQuality * 100 * 100) / 100;
+}
+
+/**
+ * 合并多个图层列表
+ *
+ * 策略：
+ *  1. 以第一个图层列表为基准
+ *  2. 后续列表中已存在路径的图层跳过（保留第一个版本）
+ *  3. 后续列表中独有的图层附加，并在名称后追加 (from <设计名>) 标记来源
+ */
+export function mergeLayers(
+  layersList: Layer[][],
+  designNames: string[]
+): { layers: Layer[]; name: string } {
+  if (!layersList || layersList.length === 0) {
+    return { layers: [], name: '' };
+  }
+
+  if (layersList.length === 1) {
+    return {
+      layers: layersList[0],
+      name: designNames[0] || 'Root'
+    };
+  }
+
+  const baseLayers = layersList[0];
+  const merged: Layer[] = [...baseLayers];
+
+  const baseMap = new Set<string>();
+  for (const layer of baseLayers) {
+    baseMap.add(normalizePath(layer.path || ''));
+  }
+
+  for (let idx = 1; idx < layersList.length; idx++) {
+    const layers = layersList[idx];
+    const sourceName = designNames[idx] || `Source${idx + 1}`;
+    for (const layer of layers) {
+      const key = normalizePath(layer.path || '');
+      if (baseMap.has(key)) continue;
+      const newLayer: Layer = {
+        ...layer,
+        name: `${layer.name || ''} (from ${sourceName})`
+      };
+      merged.push(newLayer);
+      baseMap.add(key);
+    }
+  }
+
+  const mergedName = designNames.length > 0 ? designNames.join(' + ') : 'Merged';
+  return { layers: merged, name: mergedName };
+}

package/src/resolver.ts

@@ -0,0 +1,195 @@
+/**
+ * 资源 UUID 解析：Unity/Cocos
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { Layer } from './types';
+import {
+  findLocalAsset,
+  readUnityMeta,
+  readCocosSpriteUuid,
+  makeCocosMeta,
+  UnityMetaInfo
+} from './assets';
+
+export interface AssetInfo {
+  uuid?: string;
+  guid?: string;
+  sliced: boolean;
+  border?: [number, number, number, number] | null;
+}
+
+const SKIP_LAYER_TYPES = new Set([
+  'textLayer',
+  'group',
+  'layerGroup',
+  'artboard',
+  'layerSection'
+]);
+
+const CHINESE_REGEX = /[一-鿿]/;
+
+/**
+ * 从图层名称提取资源文件名
+ * 规则：
+ *   - 去除 "Img_" / "Img" 前缀
+ *   - 去除 "拷贝" 及后续数字
+ *   - 去除九宫格标记 " s9-x-y"
+ *   - 中文命名 / "background" 跳过
+ */
+function extractResourceFilename(name: string): string | null {
+  let resourceName = name;
+  if (resourceName.startsWith('Img_')) {
+    resourceName = resourceName.slice(4);
+  } else if (resourceName.startsWith('Img')) {
+    resourceName = resourceName.slice(3);
+  }
+
+  resourceName = resourceName.replace(/\s*拷贝\s*\d*/g, '').trim();
+  resourceName = resourceName.replace(/\s+s9-\d+-\d+/g, '').trim();
+
+  if (!resourceName) return null;
+  if (CHINESE_REGEX.test(resourceName)) return null;
+  if (resourceName.toLowerCase() === 'background') return null;
+
+  return `${resourceName}.png`;
+}
+
+/**
+ * 收集图层中所有需要解析的资源文件名
+ */
+function collectImageRefs(layers: Layer[]): Set<string> {
+  const refs = new Set<string>();
+  for (const layer of layers) {
+    const name = layer.name || '';
+    const ltype = layer.type || '';
+
+    if (SKIP_LAYER_TYPES.has(ltype)) continue;
+    if (name.startsWith('参考图') || name.startsWith('fe')) continue;
+
+    const filename = extractResourceFilename(name);
+    if (filename) refs.add(filename);
+  }
+  return refs;
+}
+
+/**
+ * 批量解析图层中的图片资源 GUID（Unity）
+ */
+export function resolveLayerAssetsUnity(
+  layers: Layer[],
+  assetsDir: string
+): Record<string, AssetInfo> {
+  if (!assetsDir || !fs.existsSync(assetsDir)) return {};
+
+  const imageRefs = collectImageRefs(layers);
+  const uuidMap: Record<string, AssetInfo> = {};
+  const missingFiles: string[] = [];
+
+  for (const filename of imageRefs) {
+    const local = findLocalAsset(filename, assetsDir);
+    if (!local) {
+      missingFiles.push(filename);
+      continue;
+    }
+
+    const metaPath = `${local}.meta`;
+    if (fs.existsSync(metaPath)) {
+      const info = readUnityMeta(metaPath);
+      if (info) {
+        uuidMap[filename] = {
+          guid: info.guid,
+          sliced: info.sliced,
+          border: info.border
+        };
+        const slicedTag = info.sliced ? '九宫格' : '普通';
+        console.log(`  [复用] ${filename}  guid=${info.guid.slice(0, 8)}...  ${slicedTag}`);
+      }
+    }
+  }
+
+  if (missingFiles.length > 0) {
+    console.error(`\n❌ 错误：以下 ${missingFiles.length} 个资源在本地未找到：`);
+    for (const f of missingFiles.sort()) {
+      console.error(`  - ${f}`);
+    }
+    console.error(`\n请确保资源文件存在于目录：${assetsDir}`);
+    throw new Error(`缺失 ${missingFiles.length} 个资源文件`);
+  }
+
+  return uuidMap;
+}
+
+/**
+ * 批量解析图层中的图片资源 UUID（Cocos）
+ *
+ * 仅处理本地已存在的资源：
+ *  - 有 .meta 文件 → 读取 UUID
+ *  - 无 .meta 文件 → 生成 .meta 并分配新 UUID
+ */
+export function resolveLayerAssetsCocos(
+  layers: Layer[],
+  assetsDir: string
+): Record<string, AssetInfo> {
+  if (!assetsDir || !fs.existsSync(assetsDir)) return {};
+
+  const imageRefs = collectImageRefs(layers);
+  const uuidMap: Record<string, AssetInfo> = {};
+  const missingFiles: string[] = [];
+
+  for (const filename of imageRefs) {
+    const local = findLocalAsset(filename, assetsDir);
+    if (!local) {
+      missingFiles.push(filename);
+      continue;
+    }
+
+    const metaPath = `${local}.meta`;
+
+    // 已有 .meta 文件
+    if (fs.existsSync(metaPath)) {
+      const uid = readCocosSpriteUuid(metaPath);
+      if (uid) {
+        uuidMap[filename] = { uuid: uid, sliced: false };
+        console.log(`  [复用] ${filename}  uuid=${uid.slice(0, 8)}...`);
+        continue;
+      }
+    }
+
+    // 无 .meta 文件 → 生成新的 .meta
+    try {
+      const meta = makeCocosMeta(local);
+      fs.writeFileSync(metaPath, JSON.stringify(meta, null, 2), 'utf-8');
+      const subKeys = Object.keys(meta.subMetas);
+      const uid = meta.subMetas[subKeys[0]].uuid;
+      uuidMap[filename] = { uuid: uid, sliced: false };
+      console.log(`  [生成meta] ${filename}  uuid=${uid.slice(0, 8)}...`);
+    } catch (e) {
+      console.warn(`  [警告] 无法为 ${filename} 生成 meta:`, e);
+    }
+  }
+
+  if (missingFiles.length > 0) {
+    console.error(`\n❌ 错误：以下 ${missingFiles.length} 个资源在本地未找到：`);
+    for (const f of missingFiles.sort()) {
+      console.error(`  - ${f}`);
+    }
+    console.error(`\n请确保资源文件存在于目录：${assetsDir}`);
+    throw new Error(`缺失 ${missingFiles.length} 个资源文件`);
+  }
+
+  return uuidMap;
+}
+
+/**
+ * 根据图层名称取出对应的资源信息
+ */
+export function getAssetInfoForLayer(
+  layerName: string,
+  uuidMap: Record<string, AssetInfo>
+): AssetInfo | null {
+  const filename = extractResourceFilename(layerName);
+  if (!filename) return null;
+  return uuidMap[filename] || null;
+}

package/src/types.ts

@@ -0,0 +1,94 @@
+/**
+ * 蓝湖 API 类型定义
+ */
+
+export interface LanhuConfig {
+  cookie?: string;
+  baseUrl?: string;
+  timeout?: number;
+}
+
+export interface ParsedUrl {
+  team_id: string;
+  project_id: string;
+  doc_id?: string;
+}
+
+export interface Design {
+  index: number;
+  id: string;
+  name: string;
+  width: number;
+  height: number;
+  url: string;
+  update_time: string;
+}
+
+export interface DesignsResponse {
+  status: string;
+  message?: string;
+  project_name?: string;
+  total_designs?: number;
+  designs?: Design[];
+}
+
+export interface Layer {
+  name: string;
+  type: string;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  path: string;
+  depth: number;
+  smart_object?: string;
+  text?: string;
+  text_style?: TextStyle;
+  opacity?: number;
+}
+
+export interface TextStyle {
+  fill_color?: string;
+  font_size?: number;
+  font_name?: string;
+  stroke_color?: string;
+  stroke_width?: number;
+  shadow_color?: string;
+}
+
+export interface LayersResponse {
+  design_id: string;
+  design_name: string;
+  version: string;
+  canvas_size: {
+    width: number;
+    height: number;
+  };
+  total_layers: number;
+  layers: Layer[];
+}
+
+export interface Slice {
+  name: string;
+  download_url: string;
+  size: string;
+  format: string;
+  layer_path: string;
+}
+
+export interface SlicesResponse {
+  design_id: string;
+  design_name: string;
+  version: string;
+  canvas_size: {
+    width: number;
+    height: number;
+  };
+  total_slices: number;
+  slices: Slice[];
+}
+
+export interface TreeFormatOptions {
+  engine?: 'unity' | 'cocos';
+  assetsDir?: string;
+}