Merge pull request #113 from HuolalaTech/feat/harbor-support-period

feat: harbor support periods log

jest.config.ts

@@ -22,7 +22,8 @@ const moduleNameMapper = {
   ...pathsToModuleNameMapper(tsconfigPath.compilerOptions.paths, {
     prefix: '<rootDir>/',
   }),
-  '\\.(css|less|svg|png|jpg)$':
+  '\\.(css|less)$': '<rootDir>/node_modules/jest-css-modules',
+  '\\.(svg|png|jpg)$':
     '<rootDir>/packages/page-spy-browser/tests/__mocks__/assets.js',
 };
 

package.json

@@ -47,6 +47,7 @@
     "fake-indexeddb": "^5.0.2",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
+    "jest-css-modules": "^2.1.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-websocket-mock": "^2.4.0",
     "jsdom": "^23.2.0",

packages/page-spy-browser/package.json

@@ -47,10 +47,10 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
-    "autoprefixer": "^10.3.4",
     "core-js": "3.30",
     "less": "^4.1.1",
     "postcss": "^8.4.21",
+    "postcss-preset-env": "^10.1.0",
     "rollup": "^3.10.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -64,7 +64,7 @@
   },
   "browserslist": [
     "chrome > 75",
-    "safari > 12",
+    "safari > 11",
     "> 0.1%",
     "not dead",
     "not op_mini all"

packages/page-spy-browser/rollup.config.mjs

@@ -2,7 +2,7 @@ import typescript from 'rollup-plugin-typescript2';
 import del from 'rollup-plugin-delete';
 import babel from '@rollup/plugin-babel';
 import postcss from 'rollup-plugin-postcss';
-import autoprefixer from 'autoprefixer';
+import postcssPresetEnv from 'postcss-preset-env';
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
@@ -27,9 +27,13 @@ const plugins = [
     preventAssignment: true,
   }),
   postcss({
+    modules: {
+      autoModules: true,
+      generateScopedName: '[local]-[hash:base64:5]',
+    },
     extensions: ['.css', '.less'],
     extract: false,
-    plugins: [autoprefixer()],
+    plugins: [postcssPresetEnv()],
   }),
   terser(),
 ];

packages/page-spy-browser/src/assets/styles/index.module.less

@@ -0,0 +1,117 @@
+@import url(./variable.less);
+:global {
+  #__pageSpy {
+    font-size: @font-size;
+    line-height: 1;
+    .page-spy-logo {
+      --top-radius: 100%;
+      --right-radius: 100%;
+      --bottom-radius: 100%;
+      --left-radius: 100%;
+      position: fixed;
+      right: (40em / @font-size);
+      bottom: (80em / @font-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: (@size / @font-size);
+      height: (@size / @font-size);
+      font-size: (14em / @font-size);
+      border-radius: (@size / @font-size);
+      background-color: #fff;
+      box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.2);
+      cursor: pointer;
+      z-index: 13000;
+      transition:
+        opacity ease-in-out 0.3s,
+        transform ease-in-out 0.3s,
+        background-color ease-in-out 0.3s,
+        filter ease-in-out 0.3s;
+      &.inactive {
+        background-color: #a2a2a2;
+        filter: grayscale(1);
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        transform: rotateZ(45deg);
+        background-color: white;
+        border-top-left-radius: var(--top-radius);
+        border-top-right-radius: var(--right-radius);
+        border-bottom-right-radius: var(--bottom-radius);
+        border-bottom-left-radius: var(--left-radius);
+        transition: border-radius linear 0.15s;
+      }
+
+      .hidden-mixin {
+        opacity: 0.35;
+      }
+      @logo-hidden-translate: 65%;
+      @img-hidden-translate: 30%;
+      &.hidden-in-top {
+        .hidden-mixin;
+        transform: translateY(-(@logo-hidden-translate));
+        img {
+          transform: translateY(@img-hidden-translate);
+        }
+      }
+      &.hidden-in-right {
+        .hidden-mixin;
+        transform: translateX(@logo-hidden-translate);
+        img {
+          transform: translateX(-(@img-hidden-translate));
+        }
+      }
+      &.hidden-in-bottom {
+        .hidden-mixin;
+        transform: translateY(@logo-hidden-translate);
+        img {
+          transform: translateY(-(@img-hidden-translate));
+        }
+      }
+      &.hidden-in-left {
+        .hidden-mixin;
+        transform: translateX(-(@logo-hidden-translate));
+        img {
+          transform: translateX(@img-hidden-translate);
+        }
+      }
+      img {
+        position: relative;
+        display: block;
+        z-index: 100;
+        transition: transform ease-in-out 0.1s 0.4s;
+        width: (50em / @font-size);
+      }
+    }
+  }
+}
+
+.connectInfo {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+  > p {
+    flex: 33.3% 0 0;
+    text-align: center;
+    overflow: hidden;
+    span {
+      font-size: (12em / @font-size);
+      color: #aaa;
+    }
+    b {
+      display: block;
+      margin-top: 12px;
+      font-size: (18em / @font-size);
+      color: #333;
+      .text-ellipse();
+    }
+  }
+}

packages/page-spy-browser/src/assets/styles/modal.module.less

@@ -0,0 +1,149 @@
+@import url(./variable.less);
+
+@padding: (8em / @font-size) (14em / @font-size);
+
+.modal {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 13000;
+  font-size: @font-size;
+  line-height: 1;
+  &:global {
+    &.show {
+      display: block;
+      :local {
+        animation: fadeIn 0.3s ease-in-out forwards;
+      }
+      @keyframes fadeIn {
+        0% {
+          background-color: rgba(0, 0, 0, 0);
+        }
+        100% {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+      }
+      :local(.content) {
+        :local {
+          animation: scaleIn 0.3s ease-in forwards;
+        }
+        @keyframes scaleIn {
+          0% {
+            opacity: 0;
+            transform: translate3d(-50%, -50%, 0) scale(0.8);
+          }
+          70% {
+            opacity: 1;
+            transform: translate3d(-50%, -50%, 0) scale(1.1);
+          }
+          100% {
+            transform: translate3d(-50%, -50%, 0) scale(1);
+          }
+        }
+      }
+    }
+    &.leaving {
+      display: block;
+      :local {
+        animation: fadeOut 0.3s ease-in-out forwards;
+      }
+      @keyframes fadeOut {
+        0% {
+          background-color: rgba(0, 0, 0, 0.3);
+        }
+        100% {
+          background-color: rgba(0, 0, 0, 0);
+        }
+      }
+      :local(.content) {
+        :local {
+          animation: scaleOut 0.3s ease-out forwards;
+        }
+        @keyframes scaleOut {
+          0% {
+            opacity: 1;
+            transform: translate3d(-50%, -50%, 0) scale(1);
+          }
+          30% {
+            transform: translate3d(-50%, -50%, 0) scale(1.1);
+          }
+          60% {
+            opacity: 0;
+            transform: translate3d(-50%, -50%, 0) scale(0.9);
+          }
+          100% {
+            opacity: 0;
+            transform: translate3d(-50%, -50%, 0) scale(0.9);
+          }
+        }
+      }
+    }
+  }
+  .content {
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    transform: translate3d(-50%, -50%, 0);
+    width: 90%;
+    background-color: #fafafa;
+    border-radius: (6em / @font-size);
+    overflow: hidden;
+    @media screen and (min-width: 440px) {
+      max-width: 70%;
+    }
+    @media screen and (min-width: 768px) {
+      max-width: 55%;
+    }
+    @media screen and (min-width: 1024px) {
+      max-width: 40%;
+    }
+    @media screen and (min-width: 1440px) {
+      max-width: 30%;
+    }
+    @media screen and (min-width: 1920px) {
+      max-width: 25%;
+    }
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: @padding;
+    color: white;
+    background-color: var(--primary-color);
+    .headerLeft {
+      display: flex;
+      align-items: center;
+      gap: (8em / @font-size);
+      .logo {
+        height: (28em / @font-size);
+      }
+      b {
+        font-size: (20em / @font-size);
+      }
+    }
+    .headerRight {
+      padding: 6px;
+      cursor: pointer;
+      .close {
+        width: (24em / @font-size);
+        height: (24em / @font-size);
+      }
+    }
+  }
+  .main {
+    padding: @padding;
+  }
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: (8em / @font-size);
+    padding: @padding;
+    border-top: 1px solid #dedede;
+    button {
+      .common-button();
+    }
+  }
+}

packages/page-spy-browser/src/assets/styles/toast.module.less

@@ -0,0 +1,34 @@
+@import url(./variable.less);
+
+.toast {
+  position: fixed;
+  left: 50%;
+  top: 10%;
+  transform: translate3d(-50%, 0, 0);
+
+  max-width: 50vw;
+  padding: (10em / @font-size) (12em / @font-size);
+  .text-ellipse();
+  font-weight: 500;
+  color: var(--primary-color);
+  background-color: #fff;
+  border-radius: (4em / @font-size);
+  box-shadow: 0px 4px 4px 2px rgba(0, 0, 0, 0.05);
+  z-index: 99999;
+  :local {
+    animation: slideIn 0.3s ease-in-out forwards;
+  }
+  @keyframes slideIn {
+    0% {
+      transform: translate3d(-50%, (25em / @font-size), 0);
+      opacity: 0;
+    }
+    80% {
+      transform: translate3d(-50%, (-10em / @font-size), 0);
+    }
+    100% {
+      transform: translate3d(-50%, 0, 0);
+      opacity: 1;
+    }
+  }
+}