@mybricks/plugin-ai 0.0.1 → 0.0.2

package/src/agents/workspace-by-knowledges/utils/outline-info.ts

@@ -0,0 +1,521 @@
+import { ComponentsManager } from "./components-manager";
+
+export interface SlotInfo {
+  id: string;
+  title?: string;
+  layout?: any;
+  components?: OutlineNode[];
+}
+
+export interface OutlineNode {
+  id: string;
+  title: string;
+  def?: {
+    namespace?: string;
+  };
+  asRoot?: boolean;
+  data?: any;
+  style?: any;
+  slots?: SlotInfo[];
+  _hasCollapsedChildren?: boolean;
+}
+
+// 设计器给出的 OutlineNode
+export interface OriginOutlineNode extends OutlineNode {
+  components: OutlineNode[]
+  layout: {
+    width: string | number
+    height: string | number
+  }
+}
+
+
+export interface ComponentsResult {
+  id: string;
+  jsx: string;
+  namespaces: string[];
+}
+
+const ROOT_NAMESPACE = 'root';
+const ROOT_ID = '_root_';
+const ROOT_SLOT_ID = '_rootSlot_';
+
+export class OutlineInfoManager {
+
+  api: any;
+
+  constructor({ api }: { api: any }) {
+    this.api = api;
+  }
+
+  private getOutlineInfo(id: string, type: string): OriginOutlineNode {
+    if (type === "logicCom") {
+      return this.api?.logicCom?.api?.getOutlineInfo(id)
+    } else if (type === "uiCom") {
+      return this.api?.uiCom?.api?.getOutlineInfo(id)
+    } else {
+      return this.api?.page?.api?.getOutlineInfo(id)
+    }
+  }
+
+  getPageOutline(pageId: string) {
+    return this.normalizePageOutline(this.getOutlineInfo(pageId, 'page'), pageId);
+  }
+
+  getUiComOutline(componentId: string) {
+    return this.getOutlineInfo(componentId, 'uiCom');
+  }
+
+  getLogicComOutline(componentId: string) {
+    return this.getOutlineInfo(componentId, 'logicCom');
+  }
+
+  private getOriginOutlineRootCom = (originOutline: OriginOutlineNode) => {
+    return originOutline?.components?.[0]?.asRoot ? originOutline?.components?.[0] : null
+  }
+
+  getPageMetaInfo(pageId: string) {
+    const originOutlineJson =  this.getOutlineInfo(pageId, 'page')
+
+    const rootId = this.getOriginOutlineRootCom(originOutlineJson) ? this.getOriginOutlineRootCom(originOutlineJson)?.id : undefined;
+
+    return {
+      pageId,
+      rootId
+    }
+  }
+  
+
+  private normalizePageOutline(outline: OriginOutlineNode, pageId: string): OutlineNode {
+    if (outline?.id === pageId) {
+
+      let rootNode: OutlineNode = outline
+      let rootSlots: SlotInfo[] | undefined = [{
+        id: ROOT_SLOT_ID,
+        components: outline?.components,
+        layout: outline?.layout
+      }];
+      const whInfo: any = {
+        width: outline?.layout?.width,
+        height: outline?.layout?.height,
+      }
+
+      // 说明有asRoot组件，把asRoot的信息往上提取一层
+      const rootCom = this.getOriginOutlineRootCom(outline)
+      if (!!rootCom) {
+        rootNode = rootCom;
+        rootSlots = rootNode.slots
+      }
+
+      const normalized = {
+        ...rootNode,
+        style: {
+          ...(rootNode.style ?? {}),
+          ...whInfo, // 注意用的是页面的宽高
+        },
+        slots: rootSlots,
+        def: {
+          version: '1.0.0',
+          namespace: ROOT_NAMESPACE
+        },
+        asRoot: true
+      };
+
+      return {
+        id: pageId,
+        title: outline.title, // 注意用的是页面的title
+        slots: [{ id: ROOT_ID, components: [normalized] }]
+      };
+    }
+
+    return {
+      id: pageId,
+      title: outline.title,
+      slots: [{ id: ROOT_ID, components: [outline] }]
+    };
+  }
+
+  getComponentIdToTitleMap(pageId: string) {
+    const outline = this.getPageOutline(pageId);
+    const componentMap = new Map<string, string>();
+
+    componentMap.set(ROOT_ID, outline.title ?? '页面根节点');
+
+    function traverse(data: any) {
+      if (!data) return;
+
+      if (Array.isArray(data)) {
+        data.forEach(item => traverse(item));
+        return;
+      }
+
+      if (data.id && data.title) {
+        componentMap.set(data.id, data.title);
+      }
+
+      if (data.slots && Array.isArray(data.slots)) {
+        data.slots.forEach((slot: SlotInfo) => {
+          if (slot.components && Array.isArray(slot.components)) {
+            slot.components.forEach(component => traverse(component));
+          }
+        });
+      }
+    }
+
+    traverse(outline);
+    return componentMap;
+  }
+
+  generateJSXByPageId(pageId: string, targetComponentIds: string[] = []): ComponentsResult {
+    const outline = this.getPageOutline(pageId);
+    return this.generateJSXByOutline(outline, targetComponentIds);
+  }
+
+  generateJSXByOutline(outlineInfo: OutlineNode, targetComponentIds: string[] = []): ComponentsResult {
+    return OutlineJSXGenerator.generate(outlineInfo, targetComponentIds);
+  }
+
+  findParentNodeByComId(pageOutlineInfo: OutlineNode, comId: string): OutlineNode | null {
+    function helper(node: OutlineNode): OutlineNode | null {
+      if (!node || !node.slots) return null;
+      for (const slot of node.slots || []) {
+        if (slot.components && Array.isArray(slot.components)) {
+          for (const component of slot.components) {
+            if (component.id === comId) {
+              return node;
+            }
+            // 向下递归
+            const found = helper(component);
+            if (found) return found;
+          }
+        }
+      }
+      return null;
+    }
+    return helper(pageOutlineInfo);
+  }
+}
+
+class OutlineJSXGenerator {
+  private static namespacesSet = new Set<string>();
+
+  /**
+   * 遮蔽base64和svg代码，避免DSL过大
+   */
+  private static maskLargeContent(obj: any): any {
+    if (obj === null || obj === undefined) {
+      return obj;
+    }
+
+    // 如果是字符串，检查是否为base64或svg
+    if (typeof obj === 'string') {
+      // 检测base64图片（data:image开头或长base64字符串）
+      if (obj.startsWith('data:image/') || /^[A-Za-z0-9+/=]{100,}$/.test(obj)) {
+        const prefix = obj.substring(0, 22);
+        return `[BASE64_MASKED:${prefix}...length:${obj.length}]`;
+      }
+      // 检测SVG代码
+      if (obj.includes('<svg') || obj.includes('<?xml') && obj.includes('svg')) {
+        const length = obj.length;
+        if (length > 200) {
+          return `[SVG_MASKED:length:${length}]`;
+        }
+      }
+      return obj;
+    }
+
+    // 如果是数组，递归处理每个元素
+    if (Array.isArray(obj)) {
+      return obj.map(item => this.maskLargeContent(item));
+    }
+
+    // 如果是对象，递归处理每个属性
+    if (typeof obj === 'object') {
+      const result: any = {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          result[key] = this.maskLargeContent(obj[key]);
+        }
+      }
+      return result;
+    }
+
+    return obj;
+  }
+
+  static generate(outlineInfo: OutlineNode, targetComponentIds: string[] = []): ComponentsResult {
+    this.namespacesSet.clear();
+
+    if (targetComponentIds.length === 0) {
+      const jsx = this.processData(outlineInfo);
+      return {
+        id: outlineInfo.id,
+        jsx,
+        namespaces: Array.from(this.namespacesSet)
+      };
+    }
+
+    if (targetComponentIds.length === 1) {
+      const targetNode = this.findNodeById(outlineInfo, targetComponentIds[0]);
+      if (targetNode) {
+        const jsx = this.processData(targetNode);
+        return {
+          id: targetNode.id,
+          jsx,
+          namespaces: Array.from(this.namespacesSet)
+        };
+      }
+    }
+
+    const ancestorNodes = this.findMinimalCommonAncestors(outlineInfo, targetComponentIds);
+    const jsx = ancestorNodes.map(node => this.processData(node)).join('\n');
+
+    return {
+      id: ancestorNodes[0]?.id,
+      jsx,
+      namespaces: Array.from(this.namespacesSet)
+    };
+  }
+
+  private static findMinimalCommonAncestors(root: OutlineNode, targetIds: string[]): OutlineNode[] {
+    if (targetIds.length === 0) return [root];
+    if (targetIds.length === 1) {
+      const targetNode = this.findNodeById(root, targetIds[0]);
+      return targetNode ? [targetNode] : [];
+    }
+
+    const paths: OutlineNode[][] = [];
+    for (const targetId of targetIds) {
+      const path = this.findPathToNode(root, targetId);
+      if (path) {
+        paths.push(path);
+      }
+    }
+
+    if (paths.length === 0) {
+      return [];
+    }
+    if (paths.length === 1) {
+      return [paths[0][paths[0].length - 1]];
+    }
+
+    let commonAncestor: OutlineNode | null = null;
+    const minLength = Math.min(...paths.map(path => path.length));
+
+    for (let i = 0; i < minLength; i++) {
+      const currentNodes = paths.map(path => path[i]);
+      const firstNode = currentNodes[0];
+
+      if (currentNodes.every(node => node.id === firstNode.id)) {
+        commonAncestor = firstNode;
+      } else {
+        break;
+      }
+    }
+
+    if (commonAncestor) {
+      return [commonAncestor];
+    }
+
+    return [root];
+  }
+
+  private static findPathToNode(root: OutlineNode, targetId: string): OutlineNode[] | null {
+    if (root.id === targetId) {
+      return [root];
+    }
+
+    if (root.slots && Array.isArray(root.slots)) {
+      for (const slot of root.slots) {
+        if (slot.components && Array.isArray(slot.components)) {
+          for (const component of slot.components) {
+            const path = this.findPathToNode(component, targetId);
+            if (path) {
+              return [root, ...path];
+            }
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  private static findNodeById(root: OutlineNode, targetId: string): OutlineNode | null {
+    if (root.id === targetId) {
+      return root;
+    }
+
+    if (root.slots && Array.isArray(root.slots)) {
+      for (const slot of root.slots) {
+        if (slot.components && Array.isArray(slot.components)) {
+          for (const component of slot.components) {
+            const found = this.findNodeById(component, targetId);
+            if (found) return found;
+          }
+        }
+      }
+    }
+
+    return null;
+  }
+
+  private static extractLayout(style: any): Record<string, any> {
+    if (!style) return {};
+
+    const layout: Record<string, any> = {};
+
+    ['width', 'height', 'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom']
+      .forEach(prop => {
+        if (style[prop] !== undefined) {
+          layout[prop] = style[prop];
+        }
+      });
+
+    if (style.layout !== undefined) {
+      if (style.layout === 'flex-column' || style.layout === 'flex') {
+        layout.display = 'flex';
+        layout.flexDirection = 'column';
+      }
+      if (style.layout === 'flex-row') {
+        layout.display = 'flex';
+        layout.flexDirection = 'row';
+      }
+      if (style.alignItems) layout.alignItems = style.alignItems;
+      if (style.justifyContent) layout.justifyContent = style.justifyContent;
+      if (style.layout === 'absolute') {
+        layout.position = 'relative';
+      }
+    }
+
+    if (style.position === 'absolute') {
+      ['left', 'right', 'top', 'bottom', 'widthFact', 'heightFact', 'position']
+        .forEach(prop => {
+          if (style[prop] !== undefined) {
+            layout[prop] = style[prop];
+          }
+        })
+    }
+
+    return layout;
+  }
+
+  private static extractStyleArray(style: any): string[] {
+    if (!style?.css || !Array.isArray(style.css)) return [];
+
+    return style.css.map((cssItem: any) => {
+      const selector = cssItem.selector || '';
+      const cssProps = cssItem.css || {};
+
+      const cssString = Object.entries(cssProps)
+        .map(([key, value]) => `${key}: '${value}'`)
+        .join(', ');
+
+      return `${selector} : { ${cssString} }`;
+    });
+  }
+
+  private static processData(node: OutlineNode | OutlineNode[]): string {
+    if (!node) return '';
+
+    if (Array.isArray(node)) {
+      return node.map(item => this.processData(item)).filter(Boolean).join('\n');
+    }
+
+    if (node.id && node.def?.namespace) {
+      return this.generateComponentJSX(node);
+    }
+
+    if (node.slots && Array.isArray(node.slots)) {
+      return node.slots.map(slot => {
+        if (slot.components && Array.isArray(slot.components)) {
+          return this.processData(slot.components);
+        }
+        return '';
+      }).filter(Boolean).join('');
+    }
+
+    return '';
+  }
+
+  private static generateComponentJSX(node: OutlineNode, indent = ''): string {
+    if (!node?.id) return '';
+
+    const namespace = node.def?.namespace;
+    if (namespace !== ROOT_NAMESPACE) {
+      this.namespacesSet.add(namespace);
+    }
+    const layout = this.extractLayout(node.style);
+    const styleArray = this.extractStyleArray(node.style);
+
+    let jsx;
+
+    const namespaceTag = ComponentsManager.getAbbreviation(namespace)
+
+    // 遮蔽data中的base64和svg内容
+    const maskedData = node.data ? this.maskLargeContent(node.data) : null;
+
+    if (node.asRoot) {
+      jsx = `<${ROOT_NAMESPACE} id="${ROOT_ID}"` + (maskedData ? ` data={${JSON.stringify(maskedData)}}` : '');
+    } else {
+      jsx = `<${namespaceTag} id="${node.id}" title="${node.title}"` + (maskedData ? ` data={${JSON.stringify(maskedData)}}` : '');
+    }
+
+    if (Object.keys(layout).length > 0) {
+      jsx += ` layout={${JSON.stringify(layout)}}`;
+    }
+
+    if (styleArray.length > 0) {
+      // 遮蔽styleArray中的base64和svg内容
+      const maskedStyleArray = styleArray.map(style => this.maskLargeContent(style));
+      jsx += ` styleAry={[${maskedStyleArray.map(style => `"${style}"`).join(', ')}]}`;
+    }
+
+    jsx += ' >';
+
+    const slotsJSX = this.generateSlotsJSX(node.slots || [], indent + '  ');
+    if (slotsJSX) {
+      jsx += slotsJSX;
+      jsx += `\n${indent}</${namespaceTag}>`;
+    } else {
+      jsx += ' />';
+    }
+
+    return jsx;
+  }
+
+  private static generateSlotsJSX(slots: SlotInfo[], indent = '  '): string {
+    if (!slots || slots.length === 0) return '';
+
+    let slotsJSX = '';
+    slots.forEach(slot => {
+      if (slot.id) {
+        slotsJSX += `\n${indent}<slots.${slot.id}`;
+
+        if (slot.title) {
+          slotsJSX += ` title="${slot.title}"`;
+        }
+
+        if (slot.layout) {
+          slotsJSX += ` layout={${JSON.stringify(this.extractLayout(slot.layout))}}`;
+        }
+
+        slotsJSX += '>';
+
+        if (slot.components && Array.isArray(slot.components)) {
+          slot.components.forEach(component => {
+            const childJSX = this.generateComponentJSX(component, indent + '    ');
+            if (childJSX) {
+              slotsJSX += `\n${indent}  ${childJSX}`;
+            }
+          });
+        }
+
+        slotsJSX += `\n${indent}</slots.${slot.id}>`;
+      }
+    });
+
+    return slotsJSX;
+  }
+}
+

package/src/agents/workspace-by-knowledges/workspace.ts

@@ -0,0 +1,166 @@
+/**
+ * Workspace 类（基于知识库架构重构 + Context）
+ * 
+ * 从 context 获取所有依赖，无需手动传入 api 和 focusInfo
+ */
+
+import { KnowledgeBase } from '../knowledges/knowledge-base';
+import { WorkspaceConfig } from './types';
+import { DynamicDocument } from '../knowledges/types';
+import { 
+  createProjectInfoProvider,
+  createFocusInfoProvider,
+  createComponentDocsProvider
+} from './providers';
+import { ComponentsManager } from './utils';
+
+/**
+ * Workspace 类
+ * 继承自 KnowledgeBase，提供工作空间的知识库视图
+ */
+export class Workspace extends KnowledgeBase {
+  private defaultFilesOpened: Promise<void>;
+
+  constructor(config?: WorkspaceConfig) {
+    super({
+      name: config?.name || 'Workspace',
+      description: config?.description || '工作空间包含项目信息、聚焦信息和组件配置文档'
+    });
+
+    // 初始化 providers
+    this.initializeProviders();
+    
+    // 默认打开项目信息和聚焦信息（保存 Promise 以便外部可以等待）
+    this.defaultFilesOpened = this.openDefaultFiles();
+  }
+
+  /**
+   * 初始化所有 providers
+   */
+  private initializeProviders(): void {
+    // 1. 项目信息 Provider（包含画布索引）
+    this.registerProvider(createProjectInfoProvider());
+
+    // 2. 聚焦信息 Provider（包含聚焦树结构和描述）
+    this.registerProvider(createFocusInfoProvider());
+
+    // 3. 组件配置文档 Provider（隐藏目录）
+    this.registerProvider(createComponentDocsProvider());
+  }
+
+  /**
+   * 默认打开项目信息和聚焦信息
+   */
+  private async openDefaultFiles(): Promise<void> {
+    try {
+      // 打开项目信息
+      await this.openFile('项目信息.md');
+      
+      // 打开聚焦信息
+      await this.openFile('聚焦信息.md');
+    } catch (error) {
+      console.warn('Failed to open default files:', error);
+    }
+  }
+
+  /**
+   * 等待默认文件打开完成
+   */
+  async waitForReady(): Promise<void> {
+    await this.defaultFilesOpened;
+  }
+
+  /**
+   * 打开组件文档（通过路径）
+   * @example await workspace.openComponentDoc('组件配置文档/pc.button.md')
+   */
+  async openComponentDoc(path: string): Promise<void> {
+    await this.defaultFilesOpened;  // 确保默认文件已打开
+    await this.openFile(path);
+    
+    // 自动打开依赖组件
+    const match = path.match(/组件配置文档\/(.+)\.md$/);
+    if (match) {
+      const abbreviation = match[1];
+      const namespace = ComponentsManager.getFullNamespace(abbreviation);
+      const requires = ComponentsManager.getRequireComponents(namespace);
+      
+      if (requires && requires.length > 0) {
+        for (const requiredNs of requires) {
+          const requiredAbbr = ComponentsManager.getAbbreviation(requiredNs);
+          const requiredPath = `组件配置文档/${requiredAbbr}.md`;
+          try {
+            await this.openFile(requiredPath);
+          } catch (error) {
+            console.warn(`Failed to auto-open required component ${requiredPath}:`, error);
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * 根据组件 namespace 打开组件文档
+   */
+  async openComponentDocByNamespace(namespace: string): Promise<void> {
+    const abbreviation = ComponentsManager.getAbbreviation(namespace);
+    const path = `组件配置文档/${abbreviation}.md`;
+    await this.openComponentDoc(path);
+  }
+
+  /**
+   * 打开文档（类似旧版 workspace 的 openDocument）
+   * @param id 文档ID（页面ID或组件ID）
+   * @param options 文档选项
+   */
+  async openDocument(id: string, options: {
+    type: '画布' | '组件';
+    content: string;
+    title?: string;
+    description?: string;
+    /** 所属目录ID，如果不指定则使用默认动态文档目录 */
+    directoryId?: string;
+  }): Promise<void> {
+    await this.defaultFilesOpened;  // 确保默认文件已打开
+    
+    const doc: DynamicDocument = {
+      id,
+      title: options.title || id,
+      description: options.description,
+      content: options.content,
+      docType: options.type,
+      extname: '.md',
+      directoryId: options.directoryId
+    };
+
+    // 使用 KnowledgeBase 的底层动态文档功能
+    await this.openDynamicDocument(doc);
+  }
+
+  /**
+   * 关闭文档
+   * @param id 文档ID
+   * @param directoryId 目录ID（可选）
+   */
+  closeDocument(id: string, directoryId?: string): void {
+    this.removeDynamicDocument(id, directoryId);
+  }
+
+  /**
+   * 刷新工作空间（当 context.currentFocus 变化时调用）
+   */
+  async refresh(): Promise<void> {
+    // 清空所有已打开的文件
+    this.clearOpenedFiles();
+    
+    // 清空所有动态文档
+    this.clearDynamicDocuments();
+    
+    // 重新初始化 providers
+    this.initializeProviders();
+    
+    // 重新打开默认文件
+    this.defaultFilesOpened = this.openDefaultFiles();
+    await this.defaultFilesOpened;
+  }
+}