@midscene/visualizer 0.0.1

package/dist/lib/index.js

@@ -0,0 +1,202 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_index = require("./index.css");
+var import_antd = require("antd");
+var import_react = require("react");
+var import_head = require("@modern-js/runtime/head");
+var import_react_resizable_panels = require("react-resizable-panels");
+var import_timeline = __toESM(require("./component/timeline"));
+var import_detail_panel = __toESM(require("./component/detail-panel"));
+var import_logo_plain_16842bbc = __toESM(require("./assets/logo-plain.16842bbc.svg"));
+var import_global_hover_preview = __toESM(require("./component/global-hover-preview"));
+var import_store = require("./component/store");
+var import_detail_side = __toESM(require("./component/detail-side"));
+var import_sidebar = __toESM(require("./component/sidebar"));
+const { Dragger } = import_antd.Upload;
+const Index = () => {
+  const executionDump = (0, import_store.useExecutionDump)((store) => store.dump);
+  const setGroupedDump = (0, import_store.useExecutionDump)((store) => store.setGroupedDump);
+  const reset = (0, import_store.useExecutionDump)((store) => store.reset);
+  const [mainLayoutChangeFlag, setMainLayoutChangeFlag] = (0, import_react.useState)(0);
+  const mainLayoutChangedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      reset();
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const onResize = () => {
+      setMainLayoutChangeFlag((prev) => prev + 1);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  const uploadProps = {
+    name: "file",
+    multiple: false,
+    capture: false,
+    customRequest: () => {
+    },
+    beforeUpload(file) {
+      const ifValidFile = file.name.endsWith("web-dump.json");
+      if (!ifValidFile) {
+        import_antd.message.error("invalid file extension");
+        return false;
+      }
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = (e) => {
+        var _a;
+        const result = (_a = e.target) == null ? void 0 : _a.result;
+        if (typeof result === "string") {
+          try {
+            const data = JSON.parse(result);
+            setGroupedDump(data);
+          } catch (e2) {
+            console.error(e2);
+            import_antd.message.error("failed to parse dump data", e2.message);
+          }
+        } else {
+          import_antd.message.error("Invalid dump file");
+        }
+      };
+      return false;
+    }
+  };
+  const loadTasksDemo = () => {
+  };
+  const loadInsightDemo = () => {
+  };
+  let mainContent;
+  if (!executionDump) {
+    mainContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "main-right uploader-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dragger, __spreadProps(__spreadValues({ className: "uploader" }, uploadProps), { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ant-upload-drag-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: import_logo_plain_16842bbc.default, alt: "Logo", style: { width: 100, height: 100, margin: "auto" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "ant-upload-text", children: [
+          "Click or drag the",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { children: ".web-dump.json" }) }),
+          " ",
+          "file into this area."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "ant-upload-text", children: [
+          "The latest dump file is usually placed in",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { children: "./midscene_run/" }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "ant-upload-text", children: "All data will be processed locally by the browser. No data will be sent to the server." })
+      ] })),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "demo-loader", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { type: "link", onClick: loadTasksDemo, children: "Load Tasks Demo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { type: "link", onClick: loadInsightDemo, children: "Load Insight Demo" })
+      ] })
+    ] });
+  } else {
+    mainContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react_resizable_panels.PanelGroup,
+      {
+        autoSaveId: "main-page-layout",
+        direction: "horizontal",
+        onLayout: () => {
+          if (!mainLayoutChangedRef.current) {
+            setMainLayoutChangeFlag((prev) => prev + 1);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sidebar.default, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_resizable_panels.PanelResizeHandle,
+            {
+              onDragging: (isChanging) => {
+                if (mainLayoutChangedRef.current && !isChanging) {
+                  setMainLayoutChangeFlag((prev) => prev + 1);
+                }
+                mainLayoutChangedRef.current = isChanging;
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 80, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "main-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_timeline.default, {}, mainLayoutChangeFlag),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-content", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_resizable_panels.PanelGroup, { autoSaveId: "page-detail-layout", direction: "horizontal", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-side", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_side.default, {}) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.PanelResizeHandle, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "main-canvas-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_detail_panel.default, {}) }) })
+            ] }) })
+          ] }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_antd.ConfigProvider,
+    {
+      theme: {
+        components: {
+          Layout: {
+            headerHeight: 60,
+            headerPadding: "0 30px",
+            headerBg: "#FFF",
+            bodyBg: "#FFF"
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_head.Helmet, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "MidScene.js - Visualization Tool" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "page-container", children: mainContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global_hover_preview.default, {})
+      ]
+    }
+  );
+};
+var src_default = Index;

package/dist/lib/utils.js

@@ -0,0 +1,111 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  filterBase64Value: () => filterBase64Value,
+  insightDumpToExecutionDump: () => insightDumpToExecutionDump,
+  timeStr: () => timeStr,
+  typeStr: () => typeStr
+});
+module.exports = __toCommonJS(utils_exports);
+var import_dayjs = __toESM(require("dayjs"));
+function insightDumpToExecutionDump(insightDump) {
+  const insightToTask = (insightDump2) => {
+    var _a, _b;
+    const task = {
+      type: "Insight",
+      subType: insightDump2.type === "locate" ? "Locate" : "Query",
+      status: insightDump2.error ? "fail" : "success",
+      param: __spreadProps(__spreadValues(__spreadValues({}, insightDump2.userQuery.element ? { query: insightDump2.userQuery } : {}), insightDump2.userQuery.dataDemand ? { dataDemand: insightDump2.userQuery.dataDemand } : {}), {
+        insight: {}
+      }),
+      log: {
+        dump: insightDump2
+      },
+      timing: {
+        end: insightDump2.logTime,
+        cost: (_a = insightDump2.taskInfo) == null ? void 0 : _a.durationMs,
+        start: insightDump2.logTime - ((_b = insightDump2.taskInfo) == null ? void 0 : _b.durationMs)
+      },
+      executor: () => {
+      }
+    };
+    return task;
+  };
+  if (!Array.isArray(insightDump)) {
+    const result = {
+      sdkVersion: insightDump.sdkVersion,
+      logTime: insightDump.logTime,
+      name: "Insight",
+      tasks: [insightToTask(insightDump)]
+    };
+    return result;
+  } else {
+    const result = {
+      sdkVersion: insightDump[0].sdkVersion,
+      logTime: insightDump[0].logTime,
+      name: "Insight",
+      tasks: insightDump.map(insightToTask)
+    };
+    return result;
+  }
+}
+function timeStr(timestamp) {
+  return timestamp ? (0, import_dayjs.default)(timestamp).format("YYYY-MM-DD HH:mm:ss") : "-";
+}
+function typeStr(task) {
+  return task.subType ? `${task.type} / ${task.subType || ""}` : task.type;
+}
+function filterBase64Value(input) {
+  return input.replace(/data:image\/[^"]+"/g, 'data:image..."');
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  filterBase64Value,
+  insightDumpToExecutionDump,
+  timeStr,
+  typeStr
+});

package/dist/types/component/blackboard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './blackboard.less';
+declare const BlackBoard: () => JSX.Element;
+export default BlackBoard;

package/dist/types/component/color.d.ts

@@ -0,0 +1,2 @@
+export declare function colorForName(type: 'section' | 'element', name: string): string;
+export declare function highlightColorForType(type: 'section' | 'element'): string;

package/dist/types/component/detail-panel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './detail-panel.less';
+declare const DetailPanel: () => JSX.Element;
+export default DetailPanel;

package/dist/types/component/detail-side.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './detail-side.less';
+declare const DetailSide: () => JSX.Element;
+export default DetailSide;

package/dist/types/component/global-hover-preview.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './global-hover-preview.less';
+declare const GlobalHoverPreview: () => import("react").JSX.Element | null;
+export default GlobalHoverPreview;

package/dist/types/component/misc.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function timeCostStrElement(timeCost?: number): import("react").JSX.Element;

package/dist/types/component/panel-title.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './panel-title.less';
+declare const PanelTitle: (props: {
+    title: string;
+}) => JSX.Element;
+export default PanelTitle;

package/dist/types/component/sidebar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './sidebar.less';
+declare const Sidebar: () => JSX.Element;
+export default Sidebar;

package/dist/types/component/store.d.ts

@@ -0,0 +1,35 @@
+import { InsightDump, BaseElement, ExecutionTask, GroupedActionDump } from '../../../midscene/dist/types';
+export declare const useBlackboardPreference: import("zustand").UseBoundStore<import("zustand").StoreApi<{
+    bgVisible: boolean;
+    textsVisible: boolean;
+    setBgVisible: (visible: boolean) => void;
+    setTextsVisible: (visible: boolean) => void;
+}>>;
+export declare const useExecutionDump: import("zustand").UseBoundStore<import("zustand").StoreApi<{
+    dump: GroupedActionDump[] | null;
+    setGroupedDump: (dump: GroupedActionDump[]) => void;
+    activeTask: ExecutionTask | null;
+    setActiveTask: (task: ExecutionTask) => void;
+    hoverTask: ExecutionTask | null;
+    setHoverTask: (task: ExecutionTask | null) => void;
+    hoverPreviewConfig: {
+        x: number;
+        y: number;
+    } | null;
+    setHoverPreviewConfig: (config: {
+        x: number;
+        y: number;
+    } | null) => void;
+    reset: () => void;
+}>>;
+export declare const useAllCurrentTasks: () => ExecutionTask[];
+export declare const useInsightDump: import("zustand").UseBoundStore<import("zustand").StoreApi<{
+    _loadId: number;
+    data: InsightDump | null;
+    highlightSectionNames: string[];
+    setHighlightSectionNames: (sections: string[]) => void;
+    highlightElements: BaseElement[];
+    setHighlightElements: (elements: BaseElement[]) => void;
+    loadData: (data: InsightDump) => void;
+    reset: () => void;
+}>>;

package/dist/types/component/timeline.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './timeline.less';
+declare const Timeline: () => import("react").JSX.Element;
+export default Timeline;

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './index.less';
+declare const Index: () => JSX.Element;
+export default Index;

package/dist/types/utils.d.ts

@@ -0,0 +1,5 @@
+import type { ExecutionDump, InsightDump, ExecutionTask } from '@midscene/core';
+export declare function insightDumpToExecutionDump(insightDump: InsightDump | InsightDump[]): ExecutionDump;
+export declare function timeStr(timestamp?: number): string;
+export declare function typeStr(task: ExecutionTask): any;
+export declare function filterBase64Value(input: string): string;

package/docs/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Tool from '@/index';
+
+export default () => {
+  return <Tool />;
+};

package/modern.config.ts

@@ -0,0 +1,15 @@
+import { moduleTools, defineConfig } from '@modern-js/module-tools';
+import { modulePluginDoc } from '@modern-js/plugin-module-doc';
+
+export default defineConfig({
+  plugins: [
+    moduleTools(),
+    modulePluginDoc({
+      doc: {
+        sidebar: false,
+        hideNavbar: true,
+      },
+    }),
+  ],
+  buildPreset: 'npm-component',
+});

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@midscene/visualizer",
+  "version": "0.0.1",
+  "types": "./dist/types/index.d.ts",
+  "jsnext:source": "./src/index.ts",
+  "main": "./dist/lib/index.js",
+  "module": "./dist/es/index.js",
+  "dependencies": {
+    "@ant-design/icons": "5.3.7",
+    "@modern-js/runtime": "^2.54.2",
+    "antd": "5.17.3",
+    "dayjs": "1.11.11",
+    "pixi.js": "8.1.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "react-resizable-panels": "2.0.22",
+    "zustand": "4.5.2",
+    "@midscene/core": "0.0.1"
+  },
+  "devDependencies": {
+    "@modern-js/module-tools": "^2.54.2",
+    "@modern-js/plugin-module-doc": "^2.33.1",
+    "@types/react": "~18.2.22",
+    "@types/react-dom": "~18.2.7",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "rimraf": "~3.0.2",
+    "typescript": "~5.0.4"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less",
+    "**/*.sass",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "modern dev",
+    "build": "modern build",
+    "build:watch": "modern build -w",
+    "new": "modern new",
+    "upgrade": "modern upgrade"
+  }
+}

package/src/component/assets/logo-plain.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="141.563mm" height="53.8692mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 16897.65 6430.11"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .str0 {stroke:#E62129;stroke-width:23.87;stroke-miterlimit:22.9256}
+    .str1 {stroke:#06B1AB;stroke-width:9.1;stroke-miterlimit:22.9256}
+    .fil0 {fill:none}
+    .fil8 {fill:#FEFEFE}
+    .fil1 {fill:#332C2B}
+    .fil12 {fill:#F7B873}
+    .fil5 {fill:#F3A04E}
+    .fil9 {fill:#52C2F1}
+    .fil13 {fill:#06B1AB}
+    .fil2 {fill:#F63D55}
+    .fil11 {fill:#F9483E}
+    .fil6 {fill:url(#id0)}
+    .fil4 {fill:url(#id1)}
+    .fil10 {fill:url(#id2)}
+    .fil3 {fill:url(#id3)}
+    .fil7 {fill:url(#id4)}
+   ]]>
+  </style>
+  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="11103.21" y1="5027.34" x2="10930.41" y2="1211.98">
+   <stop offset="0" style="stop-opacity:1; stop-color:#0A77D4"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#00B1E0"/>
+  </linearGradient>
+  <linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0" x1="11407.32" y1="5023.83" x2="11286.4" y2="1215.5">
+  </linearGradient>
+  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="6311.87" y1="4699.25" x2="3547.5" y2="1677.39">
+   <stop offset="0" style="stop-opacity:1; stop-color:#F65926"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#F0AB1F"/>
+  </linearGradient>
+  <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="3105.35" y1="5075.61" x2="2612.67" y2="1311.04">
+   <stop offset="0" style="stop-opacity:1; stop-color:#E52652"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#FF4956"/>
+  </linearGradient>
+  <linearGradient id="id4" gradientUnits="userSpaceOnUse" x1="14599.77" y1="4808.34" x2="12000" y2="1573.25">
+   <stop offset="0" style="stop-opacity:1; stop-color:#02C0A7"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#02E097"/>
+  </linearGradient>
+ </defs>
+ <g id="图层_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1978240863120">
+   <path class="fil0 str0" d="M2921.92 814.37l2943.46 0c660.05,0 1200.11,540.04 1200.11,1200.11l0 669.56c-180.23,1562.84 -842.69,2686.31 -2539.2,2867.65l-656.9 0c-1403.42,-112.59 -2125.37,-923.3 -2147.58,-2450.77l0 -1086.44c0,-660.07 540.04,-1200.11 1200.11,-1200.11z"/>
+   <path class="fil1" d="M908.05 649.1c172.38,0 312.1,139.73 312.1,312.1 0,172.38 -139.73,312.1 -312.1,312.1 -172.38,0 -312.1,-139.73 -312.1,-312.1 0,-172.38 139.73,-312.1 312.1,-312.1zm15081.56 0c-172.38,0 -312.1,139.73 -312.1,312.1 0,172.38 139.73,312.1 312.1,312.1 172.38,0 312.1,-139.73 312.1,-312.1 0,-172.38 -139.73,-312.1 -312.1,-312.1zm315.15 -649.07l-4739.56 0c-332.34,-0.73 -635.61,30.83 -892.17,114.33 -1164.61,314.95 -1684.86,539.69 -2204.5,542.55 -529.24,2.92 -1057.71,-221.77 -2243.89,-542.55 -256.56,-83.5 -559.83,-115.06 -892.17,-114.33l-4739.56 0c-326.11,0 -592.9,266.79 -592.9,592.9l0 727.65c0,326.11 262.25,574.15 588.16,562.9 244.44,-8.44 379.43,161.6 368.56,407.41l0 1401.3c844.04,3884.05 6459.63,3705.54 6872.25,-983.68 37.55,-479.97 225.37,-745.7 619.85,-795.03 394.48,49.33 582.3,315.06 619.85,795.03 221.1,2512.67 1570.99,3564.6 3624.76,3705.62 1575.25,-121.99 2822.57,-766.6 3247.49,-2721.94l0 -1401.3c-10.86,-245.81 124.13,-415.84 368.56,-407.41 325.91,11.24 588.16,-236.8 588.16,-562.9l0 -727.65c0,-326.11 -266.79,-592.9 -592.9,-592.9z"/>
+   <path class="fil2" d="M4404.53 5551.69l138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0 -682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0z"/>
+   <path class="fil3" d="M2884.03 3833.6c-562.03,-552.91 337.59,-1229.84 756.52,-784.77l-668.1 -718.53c-248.45,-631.92 -96.85,-1153.5 631.64,-1515.94l-682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0c447.09,-261.52 828.85,-610.16 1124.32,-1073.8 -192.91,108.48 -371.35,123.1 -530.58,12.63 -269.77,225.61 -533.22,868.1 -809.3,676.82l-1287.75 -1333.74z"/>
+   <path class="fil4" d="M12967.79 5585.01c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0 -669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l645.03 0z"/>
+   <circle class="fil5" cx="3266.42" cy="4767.17" r="119.53"/>
+   <path class="fil6 str1" d="M11243.45 3832.57c-587.85,-563.96 251.45,-1254.43 691.78,-800.45l-702.77 -732.9c-285.07,-644.56 -170.14,-1176.57 521.59,-1546.26l-669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l508.57 0c422,-266.75 774.17,-622.36 1034.13,-1095.27 -182.37,110.65 -356.62,125.56 -520.16,12.88 -250.21,230.12 -467.1,885.46 -750.63,690.36l-1351.23 -1360.42z"/>
+   <path class="fil7" d="M11754.05 752.96c-691.73,369.69 -806.66,901.7 -521.59,1546.26l702.77 732.9c-440.33,-453.98 -1279.63,236.49 -691.78,800.45 1571.66,1582.35 780.78,887.85 1587.88,1752.45l136.46 0c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0z"/>
+   <circle class="fil8" cx="13725.89" cy="2247.09" r="867.65"/>
+   <circle class="fil9" cx="11745.99" cy="4944.33" r="119.53"/>
+   <path class="fil10" d="M3604.1 814.37c-728.5,362.44 -880.09,884.02 -631.64,1515.94l668.1 718.53c-418.94,-445.08 -1318.56,231.85 -756.52,784.77l1503.3 1718.08 138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0z"/>
+   <path class="fil11" d="M3602.42 3012.57l-2.01 -1.79 -1.22 -1c-433.3,-363.07 -1259.33,288.49 -715.16,823.82l1503.3 1718.08 138.96 0c366.16,-39.14 684.05,-122.25 959.42,-244.11l-1883.3 -2295z"/>
+   <circle class="fil8" cx="5652.09" cy="2247.09" r="867.65"/>
+   <circle class="fil12" cx="5669.32" cy="4261.82" r="86.65"/>
+   <circle class="fil8" cx="3775.08" cy="4120.55" r="174.77"/>
+   <path class="fil13" d="M11770.33 2919.17l123.64 74.69c7.2,5.99 14.32,12.27 21.35,18.8l1988.29 2318.88c-264.55,126.79 -574.49,213.07 -935.82,253.47l-136.46 0c-807.1,-864.6 -16.22,-170.1 -1587.88,-1752.45 -520.29,-499.15 77.34,-1097.23 526.88,-913.39z"/>
+   <circle class="fil8" cx="12254.65" cy="4297.71" r="174.77"/>
+  </g>
+ </g>
+</svg>

package/src/component/assets/logo-plain2.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW 2019 (64-Bit) -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="141.563mm" height="53.8692mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 16897.65 6430.11"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .str0 {stroke:#E62129;stroke-width:23.87;stroke-miterlimit:22.9256}
+    .str1 {stroke:#06B1AB;stroke-width:9.1;stroke-miterlimit:22.9256}
+    .fil0 {fill:none}
+    .fil8 {fill:#FEFEFE}
+    .fil1 {fill:#332C2B}
+    .fil12 {fill:#F7B873}
+    .fil5 {fill:#F3A04E}
+    .fil9 {fill:#52C2F1}
+    .fil13 {fill:#06B1AB}
+    .fil2 {fill:#F63D55}
+    .fil11 {fill:#F9483E}
+    .fil6 {fill:url(#id0)}
+    .fil4 {fill:url(#id1)}
+    .fil10 {fill:url(#id2)}
+    .fil3 {fill:url(#id3)}
+    .fil7 {fill:url(#id4)}
+   ]]>
+  </style>
+  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="11103.21" y1="5027.34" x2="10930.41" y2="1211.98">
+   <stop offset="0" style="stop-opacity:1; stop-color:#0A77D4"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#00B1E0"/>
+  </linearGradient>
+  <linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0" x1="11407.32" y1="5023.83" x2="11286.4" y2="1215.5">
+  </linearGradient>
+  <linearGradient id="id2" gradientUnits="userSpaceOnUse" x1="6311.87" y1="4699.25" x2="3547.5" y2="1677.39">
+   <stop offset="0" style="stop-opacity:1; stop-color:#F65926"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#F0AB1F"/>
+  </linearGradient>
+  <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="3105.35" y1="5075.61" x2="2612.67" y2="1311.04">
+   <stop offset="0" style="stop-opacity:1; stop-color:#E52652"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#FF4956"/>
+  </linearGradient>
+  <linearGradient id="id4" gradientUnits="userSpaceOnUse" x1="14599.77" y1="4808.34" x2="12000" y2="1573.25">
+   <stop offset="0" style="stop-opacity:1; stop-color:#02C0A7"/>
+   <stop offset="1" style="stop-opacity:1; stop-color:#02E097"/>
+  </linearGradient>
+ </defs>
+ <g id="图层_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <g id="_1978240863120">
+   <path class="fil0 str0" d="M2921.92 814.37l2943.46 0c660.05,0 1200.11,540.04 1200.11,1200.11l0 669.56c-180.23,1562.84 -842.69,2686.31 -2539.2,2867.65l-656.9 0c-1403.42,-112.59 -2125.37,-923.3 -2147.58,-2450.77l0 -1086.44c0,-660.07 540.04,-1200.11 1200.11,-1200.11z"/>
+   <path class="fil1" d="M908.05 649.1c172.38,0 312.1,139.73 312.1,312.1 0,172.38 -139.73,312.1 -312.1,312.1 -172.38,0 -312.1,-139.73 -312.1,-312.1 0,-172.38 139.73,-312.1 312.1,-312.1zm15081.56 0c-172.38,0 -312.1,139.73 -312.1,312.1 0,172.38 139.73,312.1 312.1,312.1 172.38,0 312.1,-139.73 312.1,-312.1 0,-172.38 -139.73,-312.1 -312.1,-312.1zm315.15 -649.07l-4739.56 0c-332.34,-0.73 -635.61,30.83 -892.17,114.33 -1164.61,314.95 -1684.86,539.69 -2204.5,542.55 -529.24,2.92 -1057.71,-221.77 -2243.89,-542.55 -256.56,-83.5 -559.83,-115.06 -892.17,-114.33l-4739.56 0c-326.11,0 -592.9,266.79 -592.9,592.9l0 727.65c0,326.11 262.25,574.15 588.16,562.9 244.44,-8.44 379.43,161.6 368.56,407.41l0 1401.3c844.04,3884.05 6459.63,3705.54 6872.25,-983.68 37.55,-479.97 225.37,-745.7 619.85,-795.03 394.48,49.33 582.3,315.06 619.85,795.03 221.1,2512.67 1570.99,3564.6 3624.76,3705.62 1575.25,-121.99 2822.57,-766.6 3247.49,-2721.94l0 -1401.3c-10.86,-245.81 124.13,-415.84 368.56,-407.41 325.91,11.24 588.16,-236.8 588.16,-562.9l0 -727.65c0,-326.11 -266.79,-592.9 -592.9,-592.9z"/>
+   <path class="fil2" d="M4404.53 5551.69l138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0 -682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0z"/>
+   <path class="fil3" d="M2884.03 3833.6c-562.03,-552.91 337.59,-1229.84 756.52,-784.77l-668.1 -718.53c-248.45,-631.92 -96.85,-1153.5 631.64,-1515.94l-682.18 0c-660.07,0 -1200.11,540.04 -1200.11,1200.11l0 1086.44c22.21,1527.47 744.16,2338.19 2147.58,2450.77l517.94 0c447.09,-261.52 828.85,-610.16 1124.32,-1073.8 -192.91,108.48 -371.35,123.1 -530.58,12.63 -269.77,225.61 -533.22,868.1 -809.3,676.82l-1287.75 -1333.74z"/>
+   <path class="fil4" d="M12967.79 5585.01c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0 -669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l645.03 0z"/>
+   <circle class="fil5" cx="3266.42" cy="4767.17" r="119.53"/>
+   <path class="fil6 str1" d="M11243.45 3832.57c-587.85,-563.96 251.45,-1254.43 691.78,-800.45l-702.77 -732.9c-285.07,-644.56 -170.14,-1176.57 521.59,-1546.26l-669.84 0c-648.13,0 -1143.27,550.85 -1100.32,1224.11l70.69 1108.16c121.19,1558.01 882.83,2384.94 2268.19,2499.78l508.57 0c422,-266.75 774.17,-622.36 1034.13,-1095.27 -182.37,110.65 -356.62,125.56 -520.16,12.88 -250.21,230.12 -467.1,885.46 -750.63,690.36l-1351.23 -1360.42z"/>
+   <path class="fil7" d="M11754.05 752.96c-691.73,369.69 -806.66,901.7 -521.59,1546.26l702.77 732.9c-440.33,-453.98 -1279.63,236.49 -691.78,800.45 1571.66,1582.35 780.78,887.85 1587.88,1752.45l136.46 0c1654.02,-184.97 2231.4,-1330.91 2306.7,-2925.01l-43.57 -682.94c-42.95,-673.27 -608.37,-1224.11 -1256.49,-1224.11l-2220.38 0z"/>
+   <circle class="fil8" cx="13725.89" cy="2247.09" r="867.65"/>
+   <circle class="fil9" cx="11745.99" cy="4944.33" r="119.53"/>
+   <path class="fil10" d="M3604.1 814.37c-728.5,362.44 -880.09,884.02 -631.64,1515.94l668.1 718.53c-418.94,-445.08 -1318.56,231.85 -756.52,784.77l1503.3 1718.08 138.96 0c1696.5,-181.34 2358.97,-1304.82 2539.2,-2867.65l0 -669.56c0,-660.07 -540.06,-1200.11 -1200.11,-1200.11l-2261.28 0z"/>
+   <path class="fil11" d="M3602.42 3012.57l-2.01 -1.79 -1.22 -1c-433.3,-363.07 -1259.33,288.49 -715.16,823.82l1503.3 1718.08 138.96 0c366.16,-39.14 684.05,-122.25 959.42,-244.11l-1883.3 -2295z"/>
+   <circle class="fil8" cx="5652.09" cy="2247.09" r="867.65"/>
+   <circle class="fil12" cx="5669.32" cy="4261.82" r="86.65"/>
+   <circle class="fil8" cx="3775.08" cy="4120.55" r="174.77"/>
+   <path class="fil13" d="M11770.33 2919.17l123.64 74.69c7.2,5.99 14.32,12.27 21.35,18.8l1988.29 2318.88c-264.55,126.79 -574.49,213.07 -935.82,253.47l-136.46 0c-807.1,-864.6 -16.22,-170.1 -1587.88,-1752.45 -520.29,-499.15 77.34,-1097.23 526.88,-913.39z"/>
+   <circle class="fil8" cx="12254.65" cy="4297.71" r="174.77"/>
+  </g>
+ </g>
+</svg>