1.2.7

HuolalaTech · Aug 8, 2023 · db22e3d · db22e3d
2 parents cb65c21 + f202126
commit db22e3d
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@huolala-tech/page-spy-web",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "All-In-One Remote Debugging Tool",
   "homepage": "https://huolalatech.github.io/page-spy-web",
   "license": "MIT",
@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
-    "@huolala-tech/page-spy": "^1.2.4",
+    "@huolala-tech/page-spy": "^1.2.5",
     "@mdx-js/rollup": "^2.3.0",
     "@types/lodash-es": "^4.17.7",
     "@types/mdx": "^2.0.4",

diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -1,9 +1,11 @@
 import { default as request } from './request';
 
-export const getSpyRoom = (group: string) => {
+export const getSpyRoom = (group: string = '') => {
   return request.get<I.SpyRoomList>(`/room/list`, {
-    params: {
-      group,
-    },
+    params: group?.trim()
+      ? {
+          group,
+        }
+      : {},
   });
 };
diff --git a/src/components/InjectSDK/index.tsx b/src/components/InjectSDK/index.tsx
@@ -43,15 +43,22 @@ export const InjectSDKModal = ({
      */
     clientOrigin: string,
     /**
-     * The project name used for grouping connections
+     * The project name used for grouping connections.
      */
     project: string,
     /**
-     * Indicate whether auto render. You can manually render later
-     * by calling "window.$pageSpy.render()".
+     * Indicate whether auto render the widget on the bottom-left
+     * corner. You can manually render later by calling
+     * "window.$pageSpy.render()" if passed false.
      * @default true
      */
-    autoRender: boolean
+    autoRender: boolean,
+    /**
+     * Custom title for displaying some data like user info to
+     * help you to distinguish the client. The title value will
+     * show in the room-list route page.
+     */
+    title: string;
   });
 </script>
 `,

diff --git a/src/pages/RoomList/index.less b/src/pages/RoomList/index.less
@@ -1,7 +1,7 @@
 .room-list {
   .room-list-content {
-    width: 80%;
-    max-width: 1024px;
+    width: 90%;
+    max-width: 1200px;
     margin: 32px auto;
   }
   .connection-item {
@@ -15,6 +15,27 @@
       transform: translateY(-4px);
       box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.1);
     }
+    &__title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      gap: 4px;
+      padding-block: 8px;
+      text-align: center;
+    }
+    .custom-title {
+      padding-inline: 8px;
+      font-size: 12px;
+      line-height: 18px;
+      color: #fff;
+      background-color: fade(@primary-color, 50%);
+      border-radius: 999px;
+      max-width: 80%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
     &__info {
       > div {
         display: flex;

diff --git a/src/pages/RoomList/index.tsx b/src/pages/RoomList/index.tsx
@@ -120,7 +120,7 @@ export const RoomList = () => {
 
     return (
       <Row gutter={24}>
-        {list.map(({ address, name, connections, group }) => {
+        {list.map(({ address, name, connections, group, tags }) => {
           const simpleAddress = address.slice(0, 4);
           const {
             osName,
@@ -135,21 +135,25 @@ export const RoomList = () => {
           return (
             <Col key={address} span={6}>
               <div className={clsx('connection-item')}>
-                <Row style={{ height: 70 }} justify="center" align="middle">
-                  <Col>
-                    <Tooltip title={`Device ID: ${simpleAddress}`}>
-                      <code style={{ fontSize: 36 }}>
-                        <b>{simpleAddress}</b>
-                      </code>
-                    </Tooltip>
-                  </Col>
-                </Row>
+                <div className="connection-item__title">
+                  <code style={{ fontSize: 36 }}>
+                    <b>{simpleAddress}</b>
+                  </code>
+                  <Tooltip
+                    title={`Title: ${tags.title?.toString() || '--'}`}
+                    placement="right"
+                  >
+                    <div className="custom-title">
+                      {tags.title?.toString() || '--'}
+                    </div>
+                  </Tooltip>
+                </div>
                 <Row wrap={false} style={{ marginBlock: 8 }}>
                   <Col flex={1}>
                     <ConnDetailItem title="Project">
-                      <p style={{ fontSize: 16 }} title={group}>
-                        {group}
-                      </p>
+                      <Tooltip title={group}>
+                        <p style={{ fontSize: 16 }}>{group}</p>
+                      </Tooltip>
                     </ConnDetailItem>
                   </Col>
                   <Col flex={1}>

diff --git a/src/types/api.d.ts b/src/types/api.d.ts
@@ -12,7 +12,7 @@ declare namespace I {
     group: string;
     name: string;
     password: string;
-    tag: Record<string, any>;
+    tags: Record<string, any>;
   }
 
   export interface SpyRoomList {

diff --git a/yarn.lock b/yarn.lock
@@ -746,10 +746,10 @@
     "@huolala-tech/page-spy-api-win32-arm" "1.2.2"
     "@huolala-tech/page-spy-api-win32-arm64" "1.2.2"
 
-"@huolala-tech/page-spy@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy/-/page-spy-1.2.4.tgz#ca153195aaecb05bd0cefd66e4b00e9f678d4484"
-  integrity sha512-a9NXsXc9bYYZDxIhgMOds/DkpW2D16ioPUPZ4PBizl8JWO6HL4vqrXhjtDONRT+mAuU41mXWG/DYIg8GzT6tyg==
+"@huolala-tech/page-spy@^1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/page-spy/-/page-spy-1.2.5.tgz#ba6f840f4dd687584b25b9fefe8bf774a87a1f49"
+  integrity sha512-s2HEhdphYihJHeiJPjgAM25e/gtbntbIRXqQjLQ4ikzFWaZeGnLJ2ME2od8AueQ59RWYUw2GQIIHfpvUupXp+g==
   dependencies:
     "@babel/runtime" "^7.13.0"
     copy-to-clipboard "^3.3.1"