🎈 perf: 优化嵌入界面显示

Author: imlinhanchao

game/embed/src/index.ts

@@ -221,46 +221,44 @@ function registerGameButton() {
   const style = document.createElement('style');
   const rootSelector = `a[href*="${scriptSrc.hostname}/#/"]`
   style.innerHTML = `
-    ${rootSelector} {
-      border-radius: 30px;
-      display: flex;
-      flex-direction: row;
+    ${rootSelector}, ${rootSelector}>span>span {
+      display: inline-flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 8px;
-      padding: 8px 12px 0;
-      color: white;
+      gap: 2px;
+      padding: 0 8px;
+      color: inherit;
       text-decoration: none;
     }
     ${rootSelector}:hover {
       transform: scale(1.1);
     }
     ${rootSelector} img {
-      width: 46px;
-      height: 46px;
+      width: 50px;
       pointer-events: none;
     }
     ${rootSelector}>span {
       display: inline-flex;
-      flex-direction: column;
+      flex-direction: row;
       align-items: center;
       justify-content: center;
       font-size: 12px;
       line-height: 1.2;
       text-align: center;
     }
-    ${rootSelector}>span abbr {
+    ${rootSelector}>span>span abbr {
       text-decoration: none;
     }
-    ${rootSelector}>span span {
+    ${rootSelector}>span>span span {
       margin-top: 2px;
       padding: 3px 8px;
       cursor: pointer;
       background: #4CAF50;
       border-radius: 12px;
       font-weight: bold;
     }
-    ${rootSelector} + span {
+    ${rootSelector}>span + span {
       margin-left: 8px;
       font-size: 12px;
       vertical-align: middle;

game/frontend/src/components/common/RoomControls.vue

@@ -66,7 +66,7 @@
     </template>
     <button 
       v-if="!gameStore.player?.isVisitor" 
-      class="btn btn-soft btn-circle md:btn-lg btn-info tooltip tooltip-left" 
+      class="btn btn-soft btn-circle md:btn-lg btn-secondary tooltip tooltip-left" 
       @click="shareRoom"
       data-tip="分享房间"
     >
@@ -115,13 +115,16 @@ const isRoomFull = computed(() => {
 const ComponentLite = computed(() => getComponent(gameStore.roomPlayer?.room.attrs?.type, 'Lite'))
 
 const roomShareCode = computed(() => `<a target="_blank" href="${location.origin}/#/${ComponentLite.value ? 'l': 'r'}/${gameStore.roomPlayer?.room.id}">
-  <img src="${location.origin}/logo.png" alt="Tiaoom" />
-  <span>
-  <abbr>${gameStore.games[gameStore.roomPlayer?.room.attrs?.type]?.name || '未知'}</abbr>
-  <span>加入游戏</span>
+  <span>  
+    <img src="${location.origin}/logo.png" alt="Tiaoom" />
+    <span>
+    <abbr>${gameStore.games[gameStore.roomPlayer?.room.attrs?.type]?.name || '未知'}</abbr>
+    <span>加入游戏</span>
+    </span>
   </span>
+  <span>#${gameStore.roomPlayer?.room.name}</span>
 </a>
-<span>#${gameStore.roomPlayer?.room.name}</span>`)
+`)
 
 async function shareRoom() {
   try {