@opensumi/ide-notebook 3.7.1-next-1737703128.0 → 3.7.1-next-1738824147.0

package/lib/browser/libro.contribution.js

@@ -11,9 +11,11 @@ import { IconService } from '@opensumi/ide-theme/lib/browser';
 import { IThemeService, IconType } from '@opensumi/ide-theme/lib/common';
 import { KERNEL_PANEL_ID, KernelPanel, initKernelPanelColorToken } from './kernel-panel';
 import { LibroOpensumiModule } from './libro';
+import { LibroDiffModule } from './libro/diff-view';
 import { LibroOpener } from './libro-opener';
+import { LibroVersionPreview } from './libro-preview.view';
 import { initLibroColorToken } from './libro.color.tokens';
-import { LIBRO_COMPONENTS_ID, LIBRO_COMPONENTS_SCHEME_ID } from './libro.protocol';
+import { LIBRO_COMPONENTS_SCHEME_ID, LIBRO_COMPONENT_ID, LIBRO_PREVIEW_COMPONENT_ID } from './libro.protocol';
 import { OpensumiLibroView } from './libro.view';
 import { ManaContainer, initLibroOpensumi, manaContainer } from './mana/index';
 import { NotebookDocumentContentProvider } from './notebook-document-content-provider';
@@ -27,7 +29,14 @@ const LIBRO_COMPONENTS_VIEW_COMMAND = {
 };
 const LayoutWrapper = ({ children }) => {
     const [isReady, setIsReady] = useState(false);
-    return (React.createElement(ManaComponents.Application, { context: { container: manaContainer }, modules: [ManaAppPreset, LibroJupyterNoEditorModule, LibroTOCModule, LibroOpensumiModule, LibroVariableModule], renderChildren: true, onReady: () => setIsReady(true) }, isReady ? children : 'loading'));
+    return (React.createElement(ManaComponents.Application, { context: { container: manaContainer }, modules: [
+            ManaAppPreset,
+            LibroJupyterNoEditorModule,
+            LibroDiffModule,
+            LibroTOCModule,
+            LibroOpensumiModule,
+            LibroVariableModule,
+        ], renderChildren: true, onReady: () => setIsReady(true) }, isReady ? children : 'loading'));
 };
 export const NOTE_BOOK_PANEL_ID = 'notebook-panel';
 let LibroContribution = class LibroContribution extends Disposable {
@@ -84,10 +93,15 @@ let LibroContribution = class LibroContribution extends Disposable {
     }
     registerEditorComponent(registry) {
         registry.registerEditorComponent({
-            uid: LIBRO_COMPONENTS_ID,
+            uid: LIBRO_COMPONENT_ID,
             scheme: LIBRO_COMPONENTS_SCHEME_ID,
             component: OpensumiLibroView,
         });
+        registry.registerEditorComponent({
+            uid: LIBRO_PREVIEW_COMPONENT_ID,
+            scheme: LIBRO_COMPONENTS_SCHEME_ID,
+            component: LibroVersionPreview,
+        });
         registry.registerEditorComponentResolver(Schemes.file, (resource, results) => {
             if (resource.uri.path.ext === `.${LIBRO_COMPONENTS_SCHEME_ID}`) {
                 // 首次打开 notebook 文件时初始化 jupyter 服务连接
@@ -98,7 +112,27 @@ let LibroContribution = class LibroContribution extends Disposable {
                 }
                 results.push({
                     type: 'component',
-                    componentId: LIBRO_COMPONENTS_ID,
+                    componentId: LIBRO_COMPONENT_ID,
+                });
+            }
+        });
+        // git schema 的 notebook 资源，在 ide 中打开
+        registry.registerEditorComponentResolver('git', (resource, results) => {
+            if (resource.uri.path.ext === '.ipynb') {
+                results.push({
+                    type: 'component',
+                    componentId: LIBRO_PREVIEW_COMPONENT_ID,
+                });
+            }
+        });
+        registry.registerEditorComponentResolver('diff', (resource, results) => {
+            const { original, modified } = resource.uri.getParsedQuery();
+            if (new URI(decodeURIComponent(modified)).path.ext === '.ipynb' ||
+                new URI(decodeURIComponent(original)).path.ext === '.ipynb') {
+                // TODO: 需要等 git 插件 ready，否则 git uri 无法解析
+                results.push({
+                    type: 'component',
+                    componentId: LIBRO_PREVIEW_COMPONENT_ID,
                 });
             }
         });

package/lib/browser/libro.contribution.js.map

@@ -1 +1 @@
-{"version":3,"file":"libro.contribution.js","sourceRoot":"","sources":["../../src/browser/libro.contribution.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"libro.contribution.js","sourceRoot":"","sources":["../../src/browser/libro.contribution.tsx"],"names":[],"mappings":"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"}

package/lib/browser/libro.protocol.d.ts

@@ -1,3 +1,5 @@
-export declare const LIBRO_COMPONENTS_ID = "opensumi:libro";
+export declare const LIBRO_COMPONENT_ID = "opensumi:libro";
+export declare const LIBRO_PREVIEW_COMPONENT_ID = "opensumi:libro-preview";
+export declare const LIBRO_DIFF_COMPONENT_ID = "opensumi:libro-diff";
 export declare const LIBRO_COMPONENTS_SCHEME_ID = "ipynb";
 //# sourceMappingURL=libro.protocol.d.ts.map

package/lib/browser/libro.protocol.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"libro.protocol.d.ts","sourceRoot":"","sources":["../../src/browser/libro.protocol.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AACpD,eAAO,MAAM,0BAA0B,UAAU,CAAC"}
+{"version":3,"file":"libro.protocol.d.ts","sourceRoot":"","sources":["../../src/browser/libro.protocol.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,0BAA0B,2BAA2B,CAAC;AACnE,eAAO,MAAM,uBAAuB,wBAAwB,CAAC;AAC7D,eAAO,MAAM,0BAA0B,UAAU,CAAC"}

package/lib/browser/libro.protocol.js

@@ -1,3 +1,5 @@
-export const LIBRO_COMPONENTS_ID = 'opensumi:libro';
+export const LIBRO_COMPONENT_ID = 'opensumi:libro';
+export const LIBRO_PREVIEW_COMPONENT_ID = 'opensumi:libro-preview';
+export const LIBRO_DIFF_COMPONENT_ID = 'opensumi:libro-diff';
 export const LIBRO_COMPONENTS_SCHEME_ID = 'ipynb';
 //# sourceMappingURL=libro.protocol.js.map

package/lib/browser/libro.protocol.js.map

@@ -1 +1 @@
-{"version":3,"file":"libro.protocol.js","sourceRoot":"","sources":["../../src/browser/libro.protocol.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,gBAAgB,CAAC;AACpD,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC"}
+{"version":3,"file":"libro.protocol.js","sourceRoot":"","sources":["../../src/browser/libro.protocol.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AACnD,MAAM,CAAC,MAAM,0BAA0B,GAAG,wBAAwB,CAAC;AACnE,MAAM,CAAC,MAAM,uBAAuB,GAAG,qBAAqB,CAAC;AAC7D,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-notebook",
-  "version": "3.7.1-next-1737703128.0",
+  "version": "3.7.1-next-1738824147.0",
   "license": "MIT",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -23,18 +23,21 @@
     "@difizen/libro-lsp": "0.2.45",
     "@difizen/libro-toc": "0.2.45",
     "@difizen/mana-app": "^0.1.27",
-    "@opensumi/ide-components": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-core-browser": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-core-common": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-editor": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-explorer": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-file-service": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-main-layout": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-monaco": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-outline": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-overlay": "3.7.1-next-1737703128.0",
-    "@opensumi/ide-theme": "3.7.1-next-1737703128.0",
-    "antd": "^5.21.4"
+    "@opensumi/ide-components": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-core-browser": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-core-common": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-editor": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-explorer": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-file-service": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-main-layout": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-monaco": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-outline": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-overlay": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-theme": "3.7.1-next-1738824147.0",
+    "@opensumi/ide-utils": "3.7.1-next-1738824147.0",
+    "antd": "^5.21.4",
+    "diff": "^4.0.1",
+    "resize-observer-polyfill": "1.5.1"
   },
-  "gitHead": "bafda533bf23cfffa25acf09c2aed31c0364259f"
+  "gitHead": "02602f682849bbc5a11335109cfbe6501c268990"
 }

package/src/browser/libro/diff-view/components/hooks.tsx

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+import { ICodeEditor, IDiffEditor } from '@opensumi/ide-monaco';
+
+export interface Size {
+  width?: number;
+  height?: number;
+}
+
+function useLatest<T>(value: T) {
+  const ref = useRef(value);
+  ref.current = value;
+
+  return ref;
+}
+
+export default useLatest;
+export function useSize(fn: () => void, ref: React.ForwardedRef<HTMLDivElement>): void {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const callback = useLatest((size: Size) => {
+    fn();
+  });
+  useLayoutEffect(() => {
+    if (typeof ref !== 'object') {
+      return () => {};
+    }
+    const el = ref?.current;
+    if (!el || !fn) {
+      return () => {};
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        callback.current({
+          width: entry.target.clientWidth,
+          height: entry.target.clientHeight,
+        });
+      });
+    });
+
+    resizeObserver.observe(el as HTMLElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [callback, ref, fn]);
+}
+
+const setEditorHeight = (
+  editor: ICodeEditor | undefined,
+  editorTarget: HTMLDivElement,
+  editorContainer: HTMLDivElement,
+) => {
+  if (!editor) {
+    return;
+  }
+  const curLenght = editor.getModel()?.getLineCount() || 1;
+  const diffItemHeight = `${curLenght * 20 + 16 + 12 + 22}px`;
+  const _height = `${curLenght * 20}px`;
+  if (editorTarget.style.height !== _height) {
+    editorTarget.style.height = _height;
+    editorContainer.style.height = diffItemHeight;
+    editor.layout();
+  }
+};
+
+const setDiffEditorHeight = (
+  editor: IDiffEditor | undefined,
+  editorTarget: HTMLDivElement,
+  editorContainer: HTMLDivElement,
+) => {
+  const originalLineCount = editor?.getModel()?.original.getLineCount() || 0;
+
+  editor?.onDidUpdateDiff(() => {
+    let finalLineCount = originalLineCount;
+    for (const change of editor?.getLineChanges() || []) {
+      if (!change.originalEndLineNumber) {
+        finalLineCount += change.modifiedEndLineNumber - change.modifiedStartLineNumber + 1;
+      } else if (
+        change.originalStartLineNumber === change.modifiedStartLineNumber &&
+        change.modifiedEndLineNumber > change.originalEndLineNumber
+      ) {
+        finalLineCount += change.modifiedEndLineNumber - change.originalEndLineNumber;
+      }
+    }
+    editorTarget.style.height = `${finalLineCount * 20 + 12}px`;
+    editorContainer.style.height = `${finalLineCount * 20 + 16 + 12 + 22}px`;
+    editor.layout();
+  });
+};
+
+export function useEditorLayout(
+  editor: ICodeEditor | IDiffEditor | undefined,
+  editorTargetRef: React.RefObject<HTMLDivElement>,
+  editorContainerRef: React.RefObject<HTMLDivElement>,
+) {
+  const editorTarget = editorTargetRef.current;
+  const editorContainer = editorContainerRef.current;
+
+  const editorLaylout = useCallback(() => {
+    if (editor) {
+      editor.layout();
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    if (editor) {
+      if (!editorTarget || !editorContainer) {
+        return;
+      }
+      if ((editor as IDiffEditor).renderSideBySide !== undefined) {
+        setDiffEditorHeight(editor as IDiffEditor, editorTarget, editorContainer);
+      } else {
+        setEditorHeight(editor as ICodeEditor, editorTarget, editorContainer);
+      }
+    }
+    window.addEventListener('resize', editorLaylout);
+    return () => {
+      window.removeEventListener('resize', editorLaylout);
+    };
+  }, [editor, editorLaylout]);
+
+  useSize(editorLaylout, editorContainerRef);
+}

package/src/browser/libro/diff-view/components/index.less

@@ -0,0 +1,315 @@
+.libro-diff-cell-container {
+  position: relative;
+  padding: 8px 0;
+}
+
+.libro-diff-cell-origin-header,
+.libro-diff-cell-target-header {
+  height: 22px;
+  width: 100%;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.libro-diff-cell-unchanged-origin-header,
+.libro-diff-cell-unchanged-target-header,
+.libro-diff-cell-changed-origin-header,
+.libro-diff-cell-changed-target-header {
+  background: var(--mana-libro-diff-unchanged-cell-header-color);
+}
+
+.libro-diff-cell-target-header {
+  position: relative;
+  &.changed,
+  &.unchanged {
+    float: right;
+  }
+}
+
+.libro-diff-cell-origin-header {
+  background: var(--mana-libro-diff-removed-cell-header-color);
+}
+.libro-diff-cell-target-header {
+  background: var(--mana-libro-diff-added-cell-header-color);
+}
+
+.libro-diff-cell-header-text {
+  margin-left: 16px;
+  font-family: PingFangSC;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--mana-libro-diff-cell-header-text-color);
+  line-height: 20px;
+}
+.libro-diff-cell-header-target-execute-count,
+.libro-diff-cell-header-origin-execute-count {
+  font-family: Menlo-Regular;
+  font-weight: 400;
+  font-size: 12px;
+  color: var(--mana-libro-diff-cell-header-execution-color);
+  text-align: right;
+  line-height: 16px;
+  float: right;
+  margin-right: 16px;
+  margin-top: 3px;
+}
+
+.libro-diff-editor-removed {
+  background: var(--mana-libro-diff-editor-removed-color) !important;
+  .monaco-editor-background,
+  .margin {
+    background: var(--mana-libro-diff-editor-removed-color) !important;
+  }
+}
+
+.libro-diff-cell-origin-container,
+.libro-diff-cell-target-container {
+  position: absolute;
+  width: calc(50% - 8px);
+  &.unchanged {
+    border: 1px solid var(--mana-libro-diff-cell-border-color) !important;
+    border-radius: 4px;
+  }
+}
+.libro-diff-cell-target-container {
+  right: 0;
+}
+
+.libro-diff-editor-added {
+  background: var(--mana-libro-diff-editor-added-color) !important;
+  .monaco-editor-background,
+  .margin {
+    background: var(--mana-libro-diff-editor-added-color) !important;
+  }
+}
+
+.libro-diff-cell-target-container {
+  background: var(--mana-libro-diff-editor-added-color) !important;
+  border-radius: 4px;
+}
+
+.libro-diff-cell-origin-container {
+  background: var(--mana-libro-diff-editor-removed-color) !important;
+  border-radius: 4px;
+}
+
+.libro-diff-editor-added,
+.libro-diff-editor-removed {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  .overflow-guard {
+    border-bottom-left-radius: 4px;
+  }
+}
+
+.libro-diff-editor-changed,
+.libro-diff-editor-unchanged {
+  .monaco-editor-background {
+    border-radius: 4px;
+  }
+}
+
+.libro-diff-cell-changed-origin-header,
+.libro-diff-cell-changed-target-header,
+.libro-diff-cell-unchanged-origin-header,
+.libro-diff-cell-unchanged-target-header {
+  display: inline-block;
+  width: calc(50% - 8px);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.libro-diff-cell-changed-target-header,
+.libro-diff-cell-unchanged-target-header {
+  margin-left: 16px;
+}
+
+.libro-diff-cell-changed-content,
+.libro-diff-cell-unchanged-content {
+  .monaco-editor,
+  .margin {
+    background-color: var(--mana-libro-diff-input-background-color) !important;
+  }
+  .monaco-editor-background {
+    background-color: var(--mana-libro-diff-editor-background-color) !important;
+  }
+}
+.libro-diff-cell-target-content,
+.libro-diff-cell-origin-content {
+  margin-top: 12px;
+}
+
+.libro-diff-cell-target-content,
+.libro-diff-cell-origin-content,
+.libro-diff-cell-changed-content,
+.libro-diff-cell-unchanged-content {
+  .core-guide-indent,
+  .core-guide-indent-active {
+    box-shadow: 0.6px 0 0 0 var(--mana-libro-diff-editor-intent-color) inset !important;
+  }
+}
+
+.libro-diff-cell-changed-content,
+.libro-diff-cell-unchanged-content {
+  .original,
+  .modified {
+    width: calc(50% - 8px) !important;
+    .margin-view-overlays {
+      > div:has(.line-delete),
+      > div:has(.line-insert) {
+        background-color: var(--mana-libro-diff-editor-background-color) !important;
+      }
+      .line-delete {
+        background-color: var(--mana-libro-diff-editor-line-delete-color) !important;
+      }
+      width: 56px !important;
+    }
+
+    .diagonal-fill {
+      background-color: var(--mana-libro-diff-input-background-color);
+    }
+
+    .view-overlays {
+      div:has(.char-delete):has(.char-insert):has(.line-delete):has(.line-insert) {
+        background-color: var(--mana-libro-diff-editor-background-color);
+      }
+      div:not(:has(.char-delete)):not(:has(.char-insert)):not(:has(.line-delete)):not(:has(.line-insert)) {
+        background-color: var(--mana-libro-diff-input-background-color);
+      }
+    }
+    .selectionHighlight {
+      background-color: rgba(173, 214, 255, 0.15) !important;
+    }
+  }
+  .modified {
+    margin-left: 8px;
+    box-shadow: unset !important;
+    .line-insert,
+    .gutter-insert {
+      background-color: var(--mana-libro-diff-editor-line-insert-color) !important;
+    }
+    .char-insert {
+      background-color: var(--mana-libro-diff-editor-char-insert-color) !important;
+    }
+  }
+  .original {
+    .line-delete,
+    .gutter-delete {
+      background-color: var(--mana-libro-diff-editor-line-delete-color) !important;
+    }
+    .char-delete {
+      background-color: var(--mana-libro-diff-editor-char-delete-color) !important;
+    }
+  }
+  .monaco-editor,
+  .overflow-guard {
+    width: 100% !important;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .overflow-guard {
+    padding-top: 12px;
+  }
+  .margin {
+    padding-top: 12px;
+  }
+}
+
+.libro-diff-cell-changed-container,
+.libro-diff-cell-unchanged-container {
+  position: relative;
+  .monaco-diff-editor {
+    background-color: var(--mana-libro-diff-container-color);
+  }
+}
+
+.libro-diff-cell-container {
+  .editor-scrollable {
+    left: 56px !important;
+  }
+  .margin,
+  .current-line-margin {
+    width: 56px !important;
+  }
+  .line-numbers {
+    color: var(--mana-libro-diff-editor-gutter-number-color) !important;
+    font-family: Menlo-Regular, consolas, 'DejaVu Sans Mono', monospace !important;
+    left: 0px !important;
+    font-weight: 400;
+    font-size: 13px;
+    text-align: right !important;
+    line-height: 20px;
+    width: 32px !important;
+    padding-left: 16px;
+  }
+
+  .cursors-layer .cursor {
+    background-color: var(--mana-libro-editor-cursor-color);
+  }
+
+  .selected-text {
+    background-color: var(--mana-libro-diff-select-background-color) !important;
+  }
+
+  .selectionHighlight {
+    background-color: var(--mana-libro-diff-select-highlight-background-color) !important;
+  }
+  .focused {
+    .selected-text {
+      background-color: var(--mana-libro-diff-select-background-color) !important;
+    }
+  }
+
+  .libro-diff-editor-added {
+    &.monaco-editor {
+      background-color: var(--mana-version-opensumi-diff-added-color) !important;
+
+      .margin {
+        background: var(--mana-version-opensumi-diff-added-color) !important;
+      }
+    }
+
+    .monaco-editor-background {
+      background: var(--mana-version-opensumi-diff-added-color) !important;
+    }
+  }
+
+  .libro-diff-editor-removed {
+    &.monaco-editor {
+      background-color: var(--mana-version-opensumi-diff-removed-color) !important;
+
+      .margin {
+        background: var(--mana-version-opensumi-diff-removed-color) !important;
+      }
+    }
+
+    .monaco-editor-background {
+      background: var(--mana-version-opensumi-diff-removed-color) !important;
+    }
+  }
+}
+.libro-e2-editor-container {
+  padding-top: 12px;
+}
+
+.libro-diff-cell-unchanged-origin-border,
+.libro-diff-cell-unchanged-target-border,
+.libro-diff-cell-changed-origin-border,
+.libro-diff-cell-changed-target-border {
+  height: 100%;
+  top: 0;
+  border: 1px solid var(--mana-libro-diff-cell-border-color);
+  width: calc(50% - 8px);
+  position: absolute;
+  border-radius: 4px;
+  pointer-events: none;
+}
+
+.libro-diff-cell-unchanged-target-border,
+.libro-diff-cell-changed-target-border {
+  right: 0;
+}
+.libro-version-content {
+  .libro-view-top {
+    height: 0;
+  }
+}

package/src/browser/libro/diff-view/components/libro-diff-all-cells-same-components.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+export const ContentSameIcon: React.FC = () => (
+  <svg
+    width='58px'
+    height='70px'
+    viewBox='0 0 58 70'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    xmlnsXlink='http://www.w3.org/1999/xlink'
+    className='libro-diff-same'
+  >
+    <g id='页面-1' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+      <g id='2.2对比内容一致' transform='translate(-866.000000, -433.000000)' fillRule='nonzero'>
+        <g id='编组-3' transform='translate(863.000000, 433.000000)'>
+          <g id='编组' transform='translate(3.000000, 0.000000)'>
+            <path
+              d='M26.5130303,69.5820437 C15.5132424,65.7888934 11.5393636,62.6913727 11.5323333,62.6913727 C0.101060606,54.8513203 0,44.5577516 0,44.5577516 L0,12.0705345 C0,10.4780239 1.28830303,9.10951475 2.87187879,9.05176436 C10.9918788,8.76301243 22.9425152,2.76134734 27.3197576,0.423331722 C28.3685102,-0.141110574 29.6323686,-0.141110574 30.6811212,0.423331722 C35.0574848,2.76834739 47.0151515,8.76213743 55.1281212,9.05176436 C56.711697,9.10951475 58,10.4780239 58,12.0705345 L58,44.5577516 C58,44.5577516 57.8989394,54.8513203 46.4676667,62.6913727 C46.4676667,62.6913727 42.4937879,65.7888934 31.494,69.5820437 C29.8808432,70.1393188 28.1261871,70.1393188 26.5130303,69.5820437 Z M29,53.3751855 C39.1921818,53.3751855 47.4545455,45.1483805 47.4545455,35.0000627 C47.4545455,24.8517449 39.1921818,16.62494 29,16.62494 C18.8078182,16.62494 10.5454545,24.8517449 10.5454545,35.0000627 C10.5454545,45.1483805 18.8078182,53.3751855 29,53.3751855 Z'
+              id='形状'
+              fillOpacity='0.3'
+              fill='#2196F3'
+            />
+            <path
+              d='M28.5,54 C17.7306818,54 9,45.2693182 9,34.5 C9,23.7306818 17.7306818,15 28.5,15 C39.2693182,15 48,23.7306818 48,34.5 C48,45.2693182 39.2693182,54 28.5,54 Z'
+              id='路径'
+              fill='#1989FA'
+            />
+            <path
+              d='M29,51 C37.8364444,51 45,43.8364444 45,35 C45,26.1635556 37.8364444,19 29,19 C20.1635556,19 13,26.1635556 13,35 C13,43.8364444 20.1635556,51 29,51 Z'
+              id='路径'
+              fill='#FFFFFF'
+            />
+            <path
+              d='M39.8811584,47.8734755 C41.1971717,46.5565733 43.3307339,46.5565733 44.6467472,47.8734755 L49.012836,52.2420176 C50.3290547,53.5592357 50.3290547,55.6948683 49.0128359,57.0120864 C47.6966172,58.3293045 45.5626049,58.3293045 44.2463861,57.0120864 L39.8811584,52.6435444 C39.2489733,52.0110548 38.8938006,51.1531094 38.8938006,50.2585099 C38.8938006,49.3639104 39.2489733,48.5059651 39.8811584,47.8734755 L39.8811584,47.8734755 Z M27.3916134,36.6109087 L33.5141251,30.4837484 C34.189795,29.8306691 35.2638061,29.8400091 35.9280333,30.5047406 C36.5922605,31.1694721 36.6015933,32.2442987 35.9490095,32.9204816 L28.6434953,40.2324043 C28.4552892,40.4214183 28.2256395,40.5639151 27.9727828,40.648579 C27.3417735,40.8823076 26.6325337,40.7268228 26.1569514,40.2504988 L22.5046247,36.5953991 C22.0695207,36.1601187 21.8995112,35.5256015 22.0586371,34.930864 C22.2177631,34.3361266 22.6818494,33.8715236 23.2760794,33.7120666 C23.8703093,33.5526096 24.5044051,33.7225239 24.9395092,34.1578043 L27.3916134,36.6117704 L27.3916134,36.6109087 Z'
+              id='形状'
+              fill='#1989FA'
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);