Merge pull request #126 from HuolalaTech/optimize/save-position

feat(browser): save position after move
HuolalaTech · Jan 16, 2025 · aad5212 · aad5212
2 parents fefae57 + 5a9c65a
commit aad5212
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 101 deletions.
diff --git a/packages/page-spy-browser/src/assets/styles/index.module.less b/packages/page-spy-browser/src/assets/styles/index.module.less
@@ -98,7 +98,7 @@
 .connectInfo {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: 4px;
   > p {
     flex: 1 0 0;
@@ -113,7 +113,6 @@
       margin-top: 12px;
       font-size: (18em / @font-size);
       color: #333;
-      .text-ellipse();
     }
   }
 }
diff --git a/packages/page-spy-browser/src/helpers/moveable.ts b/packages/page-spy-browser/src/helpers/moveable.ts
@@ -6,6 +6,7 @@ export type UElement = HTMLElement & {
 
 const STICKY_RADIUS = '50%';
 const FULLY_RADIUS = '100%';
+const POSITION_CACHE_ID = 'page-spy-position';
 
 function getPosition(evt: TouchEvent | MouseEvent): Touch | MouseEvent {
   /* c8 ignore next 3 */
@@ -17,6 +18,15 @@ function getPosition(evt: TouchEvent | MouseEvent): Touch | MouseEvent {
 
 /* eslint-disable no-param-reassign */
 export function moveable(el: UElement) {
+  const position = localStorage.getItem(POSITION_CACHE_ID);
+  if (position) {
+    const [x, y] = position.split(',');
+    if (+x < window.innerWidth && +y < window.innerHeight) {
+      el.style.left = `${x}px`;
+      el.style.top = `${y}px`;
+    }
+  }
+
   let hiddenTimer: ReturnType<typeof setTimeout> | null;
   let rect: DOMRect;
   const critical = {
@@ -94,6 +104,9 @@ export function moveable(el: UElement) {
   function end() {
     touch.x = 0;
     touch.y = 0;
+    const { left, top } = el.getBoundingClientRect();
+    localStorage.setItem(POSITION_CACHE_ID, `${left},${top}`);
+
     handleHidden();
     document.removeEventListener('mousemove', move);
     document.removeEventListener('mouseup', end);

diff --git a/packages/page-spy-plugin-whole-bundle/.github/screenshots/image.png b/packages/page-spy-plugin-whole-bundle/.github/screenshots/image.png
diff --git a/packages/page-spy-plugin-whole-bundle/README.md b/packages/page-spy-plugin-whole-bundle/README.md
@@ -2,60 +2,49 @@
 
 ![Screenshot](./.github/screenshots/image.png)
 
-插件打包了三个依赖，实现 _一个脚本开启离线模式的 PageSpy、录制操作轨迹、支持导出离线日志_ 的功能:
+插件打包了三个依赖，一个脚本实现 _离线模式的 PageSpy、录制操作轨迹、支持导出离线日志_ 的功能:
 
 - [@huolala-tech/page-spy-browser](../page-spy-browser/);
 - [@huolala-tech/page-spy-plugin-data-harbor](../page-spy-plugin-data-harbor/);
 - [@huolala-tech/page-spy-plugin-rrweb](../page-spy-plugin-rrweb/);
 
 ## 使用
 
-### 通过 `<script>` 引入
+### CDN 引入
 
-`WholeBundle` 插件资源文件会自动放置在你部署 PageSpy 的服务下、方便直接引用，路径是 `https://<your-pagespy-host>/plugin/whole-bundle/index.min.js`。
-
-举个例子，如果 PageSpy 的访问域名是 `https://example.com`，那么你可以在项目中通过下面的方式引入：
+- jsdelivr: https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-plugin-whole-bundle
+- unpkg: https://unpkg.com/@huolala-tech/page-spy-plugin-whole-bundle
 
 ```html
 <head>
-  ... ...
+  ...
+  <!-- 以 jsdelivr 为例 -->
+  >
   <script
-    src="https://example.com/plugin/whole-bundle/index.min.js"
+    src="https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-plugin-whole-bundle"
     crossorigin="anonymous"
   ></script>
-</head>
-```
-
-按照以上方式引入后，`WholeBundle` 会自动完成初始化。
 
-如果你想自定义 logo / 标题 / 声明等内容，可以这样做：
-
-```html
-<head>
-  ... ...
-  <!-- 在路径上加 #manual 表明你要手动初始化，之后可以通过 window.WholeBundle 全局变量引用 -->
-  <script
-    src="https://example.com/plugin/whole-bundle/index.min.js#manual"
-    crossorigin="anonymous"
-  ></script>
   <script>
     const $wholeBundle = new WholeBundle({
       /**
-       * Used for float button text and modal title
+       * 悬浮球和弹窗上显示
        */
       title?: string;
       /**
-       * - Online source: 'https://example.com/xxx.jpg'
+       * - 在线图片: 'https://example.com/xxx.jpg'
+       * - 相对路径: '../xxx.jpg'
        * - Data url: 'data:image/png;base64,xxxx...'
-       * - Relative source: '../xxx.jpg'
-       * - Plain SVG content: '<svg>xxx</svg>'
        */
       logo?: string;
-      statement?: string;
       /**
-       * Default is https://pagespy.org/#/replay-lab
+       * 定制主题色
        */
-      replayLabUrl?: string;
+      primaryColor?: string;
+      /**
+       * 是否自动渲染悬浮球
+       */
+      autoRender?: boolean;
     })
   </script>
 </head>
@@ -81,20 +70,22 @@ import '@huolala-tech/page-spy-plugin-whole-bundle/dist/index.css';
 
 const $wholeBundle = new WholeBundle({
   /**
-   * Used for float button text and modal title
+   * 悬浮球和弹窗上显示的标题
    */
   title?: string;
   /**
-   * Online source: 'https://example.com/xxx.jpg'
-   * Data url: 'data:image/png;base64,xxxx...'
-   * Relative source: '../xxx.jpg'
-   * Plain SVG content: '<svg>xxx</svg>'
+   * - 在线图片: 'https://example.com/xxx.jpg'
+   * - 相对路径: '../xxx.jpg'
+   * - Data url: 'data:image/png;base64,xxxx...'
    */
   logo?: string;
-  statement?: string;
   /**
-   * Default is https://pagespy.org/#/replay-lab
+   * 定制主题色
+   */
+  primaryColor?: string;
+  /**
+   * 是否自动渲染悬浮球
    */
-  replayLabUrl?: string;
+  autoRender?: boolean;
 })
 ```
diff --git a/packages/page-spy-plugin-whole-bundle/index.html b/packages/page-spy-plugin-whole-bundle/index.html
@@ -4,12 +4,22 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <style>
+      body {
+        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 100px;
+      }
+    </style>
   </head>
   <body>
-    <script type="module">
+    <!-- <script type="module">
       import Feedback from './src';
-      const feedback = new Feedback();
-    </script>
-    <!-- <script src="./dist/iife/index.min.js"></script> -->
+      window.feedback = new Feedback({
+        // autoRender: false,
+        // primaryColor: 'darkgreen',
+      });
+      window.ondblclick = window.feedback.open;
+    </script> -->
+    <script src="https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-plugin-whole-bundle#manual"></script>
   </body>
 </html>
diff --git a/packages/page-spy-plugin-whole-bundle/src/index.ts b/packages/page-spy-plugin-whole-bundle/src/index.ts
@@ -11,8 +11,9 @@ import { moveable, UElement } from './utils/moveable';
 import { name } from '../package.json';
 import { buildForm } from './utils/build-form';
 import { modal } from './utils/modal';
+import { ROOT_ID } from './utils/constant';
 
-interface Config {
+export interface Config {
   title: string;
   /**
    * Online source: 'https://example.com/xxx.jpg'
@@ -21,16 +22,14 @@ interface Config {
    */
   logo: string;
   primaryColor: string;
-  statement: string;
+  autoRender: boolean;
 }
 
 const defaultConfig: Config = {
   title: '问题反馈',
   logo: pageSpyLogo,
   primaryColor: '#8434E9',
-  statement:
-    '声明：「问题反馈」组件处理的所有数据都是保存在您本地，不会主动将数据传输到任何服务器，可放心使用。',
-  // replayLabUrl: 'https://pagespy.org/#/replay-lab',
+  autoRender: true,
 };
 
 class WholeBundle {
@@ -42,6 +41,8 @@ class WholeBundle {
 
   config: Config = defaultConfig;
 
+  root: HTMLDivElement | null = null;
+
   static instance: WholeBundle | null = null;
 
   constructor(userCfg: Partial<Config> = {}) {
@@ -104,15 +105,19 @@ class WholeBundle {
   }
 
   startRender() {
-    const { statement, title, logo } = this.config;
+    const { title, logo, autoRender } = this.config;
 
     const doc = new DOMParser().parseFromString(
       `
-      <div id="__pageSpyWholeBundle" style="--primary-color: ${this.config.primaryColor}">
-        <button class="${classes.float}">
-          <img src="${logo}" />
+      <div id="${ROOT_ID}" style="--primary-color: ${this.config.primaryColor}">
+        ${
+          autoRender
+            ? `<button class="${classes.float}">
+          <img src="${logo}" draggable="false" />
           <span>${title}</span>
-        </button>
+        </button>`
+            : ''
+        }
       </div>
       `,
       'text/html',
@@ -121,44 +126,36 @@ class WholeBundle {
     const $c = (className: string) => {
       return doc.querySelector.bind(doc)(dot(className)) as HTMLElement;
     };
-    const root = doc.querySelector('#__pageSpyWholeBundle') as HTMLDivElement;
+    this.root = doc.querySelector(`#${ROOT_ID}`) as HTMLDivElement;
     const float = $c(classes.float) as UElement;
-    moveable(float);
-    float.addEventListener('click', () => {
-      modal.show();
-    });
+    if (float) {
+      moveable(float);
+      float.addEventListener('click', () => {
+        if (float.isMoveEvent) return;
+        modal.show();
+      });
+    }
     const form = buildForm({ harborPlugin: this.$harbor! });
 
     modal.build({
       logo,
       title,
       content: form,
-      mounted: root,
+      mounted: this.root,
     });
 
-    document.documentElement.insertAdjacentElement('beforeend', root);
+    document.documentElement.insertAdjacentElement('beforeend', this.root);
+  }
+
+  open() {
+    modal.show();
   }
 
   abort() {
-    document.querySelector('#__pageSpyWholeBundle')?.remove();
+    this.root?.remove();
     this.$pageSpy?.abort();
     WholeBundle.instance = null;
   }
 }
 
-const src = (document.currentScript as HTMLScriptElement)?.src;
-// prettier-ignore
-(function main() {
-  if (!src) return;
-  try {
-    const { hash } = new URL(src, window.location.href);
-    const userManual = hash.slice(1) === 'manual';
-    if (!userManual) {
-      window.$wholeBundle = new WholeBundle();
-    }
-  } catch (e) {
-    //
-  }
-}());
-
 export default WholeBundle;
diff --git a/packages/page-spy-plugin-whole-bundle/src/styles/index.module.less b/packages/page-spy-plugin-whole-bundle/src/styles/index.module.less
@@ -1,7 +1,7 @@
 @import url(./variable.less);
 
 :global {
-  #__pageSpyWholeBundle {
+  #page-spy-feedback-root {
     font-size: @font-size;
     * {
       box-sizing: border-box;
@@ -68,7 +68,7 @@
       color: #999;
     }
     &:focus {
-      border-color: lighten(@primary-color, 20%);
+      border-color: var(--primary-color, @primary-color);
     }
   }
   select {
@@ -121,7 +121,7 @@
     svg {
       width: (24em / @font-size);
       height: (24em / @font-size);
-      color: var(--primary-color);
+      color: var(--primary-color, @primary-color);
     }
   }
   .selectPeriod {
@@ -131,8 +131,9 @@
     margin: @size auto;
 
     --thumb-size: @size;
-    --thumb-shadow: 0 0 0 5px var(--primary-color) inset, 0 0 0 99px white inset;
-    --thumb-shadow-hover: 0 0 0 7px var(--primary-color) inset,
+    --thumb-shadow: 0 0 0 5px var(--primary-color, @primary-color) inset,
+      0 0 0 99px white inset;
+    --thumb-shadow-hover: 0 0 0 7px var(--primary-color, @primary-color) inset,
       0 0 0 99px white inset;
     --thumb-shadow-disabled: 0 0 0 5px #888 inset, 0 0 0 99px white inset;
     --track-size: calc(var(--thumb-size) / 2);
@@ -171,7 +172,7 @@
         left: var(--left);
         right: var(--right);
         height: 100%;
-        background-color: var(--primary-color);
+        background-color: var(--primary-color, @primary-color);
         border-radius: var(--track-size);
         &[data-min-text-position='bottom'] {
           &::before {

diff --git a/packages/page-spy-plugin-whole-bundle/src/styles/modal.module.less b/packages/page-spy-plugin-whole-bundle/src/styles/modal.module.less
@@ -92,7 +92,7 @@
       align-items: center;
       padding: @padding;
       color: white;
-      background-color: var(--primary-color);
+      background-color: var(--primary-color, @primary-color);
       .headerLeft {
         display: flex;
         align-items: flex-start;
@@ -102,7 +102,7 @@
         }
         .title {
           b {
-            font-size: (20em / @font-size);
+            font-size: (16em / @font-size);
             line-height: 1;
           }
           p {
@@ -127,15 +127,6 @@
     }
     .main {
       padding: 0;
-      .statement {
-        margin-top: 12px;
-        color: #aaa;
-        font-size: 12px;
-        &:before {
-          content: '*';
-          color: red;
-        }
-      }
     }
   }
 }
diff --git a/packages/page-spy-plugin-whole-bundle/src/styles/normalize.less b/packages/page-spy-plugin-whole-bundle/src/styles/normalize.less
@@ -1,4 +1,4 @@
-#__pageSpyWholeBundle {
+#page-spy-feedback-root {
   /**
  * Render the `main` element consistently in IE.
  */