yike-ui-mcp 1.0.0 → 1.0.2

package/README.md

@@ -11,7 +11,7 @@
   "mcpServers": {
     "yike-ui-mcp": {
       "command": "npx",
-      "args": ["-y", "yike-ui-mcp@1.0.0"]
+      "args": ["-y", "yike-ui-mcp"]
     }
   }
 }

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "yike-ui-mcp",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "益客lanhu mcp",
   "type": "module",
   "main": "src/index.js",
-  "files": ["src/index.js"],
+  "files": ["src"],
   "bin": {
     "yike-ui-mcp": "src/index.js"
   },

package/src/compact-layers.js

@@ -0,0 +1,197 @@
+const NOISE_KEYS = new Set([
+  'boundVariables',
+  'transform',
+  'combinedFrame',
+  'realFrame',
+  'clipped',
+  'hasExportDDSImage',
+  'hasExportImage',
+  'isMask',
+  'origin',
+  'paths',
+  'style',
+  'layers',
+  'text',
+  'image',
+  'frame',
+  'isEnabled',
+]);
+
+const round = (value) => Math.round(value * 100) / 100;
+
+const isNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+
+function colorToString(color) {
+  if (!color) return undefined;
+  if (typeof color === 'string') return color;
+  if (color.value) return color.value;
+  if ([color.r, color.g, color.b].every(isNumber)) {
+    const toByte = (channel) => Math.round(channel * 255);
+    return `rgba(${toByte(color.r)},${toByte(color.g)},${toByte(color.b)},${color.a ?? 1})`;
+  }
+  return undefined;
+}
+
+const isDefaultValue = (key, value) =>
+  (key === 'opacity' && value === 1) ||
+  (key === 'blendMode' && value === 0) ||
+  (key === 'visible' && value === true) ||
+  (key === 'rotation' && value === 0);
+
+function prune(value) {
+  if (Array.isArray(value)) {
+    const items = value.map(prune).filter((item) => item !== undefined && item !== null);
+    return items.length ? items : undefined;
+  }
+  if (value && typeof value === 'object') {
+    if ([value.r, value.g, value.b].every(isNumber)) return colorToString(value);
+    const result = {};
+    for (const [key, raw] of Object.entries(value)) {
+      if (NOISE_KEYS.has(key)) continue;
+      if (isDefaultValue(key, raw)) continue;
+      const pruned = prune(raw);
+      if (pruned === undefined || pruned === null) continue;
+      if (typeof pruned === 'object' && Object.keys(pruned).length === 0) continue;
+      result[key] = pruned;
+    }
+    return Object.keys(result).length ? result : undefined;
+  }
+  return value;
+}
+
+function frameToArray(frame) {
+  if (!frame) return undefined;
+  const values = [frame.left, frame.top, frame.width, frame.height];
+  return values.every(isNumber) ? values.map(round) : undefined;
+}
+
+function radiusOf(layer) {
+  const radius = layer.radius;
+  if (!radius) return undefined;
+  const corners = [radius.topLeft, radius.topRight, radius.bottomRight, radius.bottomLeft].map((value) => (isNumber(value) ? round(value) : 0));
+  if (corners.every((value) => value === 0)) return undefined;
+  return corners.every((value) => value === corners[0]) ? corners[0] : corners;
+}
+
+function paintsOf(paints, fallbackKey) {
+  if (!Array.isArray(paints)) return undefined;
+  const enabled = paints.filter((paint) => paint && paint.isEnabled !== false);
+  if (!enabled.length) return undefined;
+  const simplified = enabled.map((paint) => {
+    if (paint.type === 'color') {
+      const color = colorToString(paint.color);
+      const opacity = isNumber(paint.opacity) && paint.opacity !== 1 ? round(paint.opacity) : undefined;
+      if (!color) return prune(paint);
+      return opacity === undefined ? color : { color, opacity };
+    }
+    const rest = prune(paint);
+    if (!rest) return paint.type;
+    return rest;
+  }).filter((item) => item !== undefined);
+  if (!simplified.length) return undefined;
+  if (simplified.length === 1) return simplified[0];
+  return { [fallbackKey]: simplified };
+}
+
+function textOf(layer) {
+  const text = layer.text;
+  if (!text) return undefined;
+  const styles = Array.isArray(text.styles) && text.styles.length ? text.styles : [text.style];
+  const main = styles[0] ?? {};
+  const font = main.font ?? {};
+  const result = { value: text.value ?? main.content };
+
+  if (font.name || font.postScriptName) result.font = font.name ?? font.postScriptName;
+  if (isNumber(font.size)) result.size = round(font.size);
+  if (isNumber(font.fontWeight)) result.weight = font.fontWeight;
+  if (font.bold) result.bold = true;
+  if (font.italic) result.italic = true;
+  if (font.align) result.align = font.align;
+  if (isNumber(font.lineHeight?.value)) result.lineHeight = round(font.lineHeight.value);
+  if (isNumber(font.letterSpacing?.value) && font.letterSpacing.value !== 0) result.letterSpacing = round(font.letterSpacing.value);
+
+  const color = colorToString(main.color);
+  if (color) result.color = color;
+
+  if (styles.length > 1) {
+    result.styles = styles.map((style) => {
+      const segment = { from: style.from, to: style.to };
+      if (style.content) segment.text = style.content;
+      const segmentColor = colorToString(style.color);
+      if (segmentColor) segment.color = segmentColor;
+      const segmentFont = style.font ?? {};
+      if (isNumber(segmentFont.size)) segment.size = round(segmentFont.size);
+      if (segmentFont.fontWeight) segment.weight = segmentFont.fontWeight;
+      if (segmentFont.name) segment.font = segmentFont.name;
+      return segment;
+    });
+  }
+
+  return result;
+}
+
+function imageOf(layer) {
+  const image = layer.image;
+  if (!image) return undefined;
+  const result = {};
+  const png = image.imageUrl ?? image.url;
+  const svg = image.svgUrl;
+  if (png) result.png = png;
+  if (svg) result.svg = svg;
+  return Object.keys(result).length ? result : undefined;
+}
+
+function compactLayer(layer) {
+  const node = {};
+  if (layer.id) node.id = layer.id;
+  if (layer.name) node.name = layer.name;
+  if (layer.type) node.type = layer.type;
+  if (layer.componentName) node.component = layer.componentName;
+
+  const frame = frameToArray(layer.realFrame ?? layer.frame);
+  if (frame) node.frame = frame;
+
+  const shape = layer.paths?.[0]?.type;
+  if (shape) node.shape = shape;
+
+  if (layer.visible === false) node.visible = false;
+  if (isNumber(layer.opacity) && layer.opacity !== 1) node.opacity = round(layer.opacity);
+  if (isNumber(layer.rotation) && layer.rotation !== 0) node.rotation = round(layer.rotation);
+
+  const radius = radiusOf(layer);
+  if (radius !== undefined) node.radius = radius;
+
+  const style = layer.style ?? {};
+  const fill = paintsOf(style.fills, 'fills');
+  if (fill !== undefined) node.fill = fill;
+
+  const border = paintsOf(style.borders, 'borders');
+  if (border !== undefined) node.border = border;
+
+  const shadow = paintsOf(style.shadows, 'shadows');
+  if (shadow !== undefined) node.shadow = shadow;
+
+  const blur = paintsOf(style.blurs, 'blurs');
+  if (blur !== undefined) node.blur = blur;
+
+  const text = textOf(layer);
+  if (text) node.text = text;
+
+  const image = imageOf(layer);
+  if (image) node.image = image;
+
+  if (Array.isArray(layer.layers) && layer.layers.length) {
+    node.children = layer.layers.map(compactLayer);
+  }
+
+  return node;
+}
+
+export function compactLayers(layers) {
+  return Array.isArray(layers) ? layers.map(compactLayer) : [];
+}
+
+export function compactAssets(assets) {
+  if (!assets) return undefined;
+  return prune(assets) ?? assets;
+}

package/src/index.js

@@ -2,8 +2,9 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { z } from 'zod';
+import { compactAssets, compactLayers } from './compact-layers.js';
 
-const server = new McpServer({ name: 'simple-mcp-server', version: '1.0.0' });
+const server = new McpServer({ name: 'yike-ui-server', version: '1.0.0' });
 
 server.registerTool(
   'greet',
@@ -13,14 +14,98 @@ server.registerTool(
   },
   async ({ name }) => ({
     content: [
-      { type: 'text', text: `你好，${name}！` }
+      { type: 'text', text: `你好啊~~，${name}！` }
     ]
   }),
 );
 
+server.registerTool(
+  'get_lanhu_ui',
+  {
+    description: '根据蓝湖设计稿网址获取 UI 信息（网址需包含 image_id、team_id、project_id）',
+    inputSchema: { url: z.string().min(1).describe('蓝湖设计稿网址') },
+  },
+  async ({ url }) => {
+    const error = (message) => ({ isError: true, content: [{ type: 'text', text: message }] });
+    const cookie = process.env.LANHU_COOKIE;
+    if (!cookie?.trim()) return error('缺少环境变量 LANHU_COOKIE');
+
+    let pageUrl;
+    try {
+      pageUrl = new URL(url);
+      if (pageUrl.protocol !== 'https:' || pageUrl.hostname !== 'lanhuapp.com') {
+        return error('请输入 https://lanhuapp.com 的蓝湖网址');
+      }
+    } catch {
+      return error('蓝湖网址无效');
+    }
+
+    const fragment = pageUrl.hash.slice(1);
+    const params = new URL(fragment || '/', pageUrl.origin).searchParams;
+    for (const key of ['image_id', 'tid', 'project_id']) {
+      if (!params.get(key)?.trim()) return error(`蓝湖网址缺少参数 ${key}`);
+    }
+
+    const apiUrl = new URL('/api/project/image', process.env.LANHU_API_BASE_URL || 'https://lanhuapp.com');
+    apiUrl.search = new URLSearchParams({
+      dds_status: '1',
+      image_id: params.get('image_id'),
+      team_id: params.get('tid'),
+      project_id: params.get('project_id'),
+      all_versions: '0',
+    }).toString();
+
+    try {
+      const response = await fetch(apiUrl, {
+        headers: {
+          accept: 'application/json, text/plain, */*',
+          cookie,
+          'real-path': '/item/project/detailDetach',
+          referer: 'https://lanhuapp.com/web/',
+          'request-from': 'web',
+        },
+        signal: AbortSignal.timeout(15000),
+      });
+      const body = await response.json();
+      if (!response.ok) return error(`蓝湖接口请求失败（HTTP ${response.status}）：${JSON.stringify(body).slice(0, 500)}`);
+      if (!body?.result?.versions?.length) return error(`当前链接没有图层信息！`);
+      const response1 = await fetch(body.result.versions[0].json_url, {
+        headers: {
+          accept: 'application/json, text/plain, */*',
+          cookie,
+          'real-path': '/item/project/detailDetach',
+          referer: 'https://lanhuapp.com/web/',
+          'request-from': 'web',
+        },
+        signal: AbortSignal.timeout(15000),
+      });
+      if (!response1.ok) return error(`图层获取失败！`);
+      const body1 = await response1.json();
+      let content = `
+        这是一段蓝湖设计稿信息，包含设计稿实现硬约束，设计稿信息，设计稿图层信息，切图信息，请参考这些信息结合当前项目情况生成前端代码。
+        ## 设计稿实现硬约束
+        - 实现设计稿时，默认忽略所有非业务性的顶部展示区域；除非本次任务明确要求保留。非业务性的顶部展示区域包括但不限于：系统状态栏、设备外壳、展示用头部、返回按钮、页面标题、右上角胶囊按钮、机型边框
+        - 最外层容器若有来自设计画布的固定高度，应去掉或者配置 min-h-screen 等，让内容撑开（除非固定高度属于设计意图，如固定头部、Banner 等）
+        ## 设计稿信息
+        - 名称：${body.result.name}
+        - 概览图：${body.result.url.replace("alipic", "assets")}
+        ## 切图信息
+        切图列表：${JSON.stringify(compactAssets(body1.assets))}
+        需要让用户选择切图下载到哪个文件夹下
+        ## 设计稿图层信息
+        字段说明：frame 为 [x, y, width, height]；fill/border/shadow 为颜色或样式；children 为子图层。
+        ${JSON.stringify(compactLayers(body1.artboard?.layers))}
+      `;
+      return { content: [{ type: 'text', text: content }] };
+    } catch (cause) {
+      return error(`蓝湖接口请求失败：${cause.message}`);
+    }
+  },
+);
+
 try {
   await server.connect(new StdioServerTransport());
 } catch (error) {
   console.error('MCP 服务启动失败：', error);
   process.exitCode = 1;
-}
+}