Ref 269 修复了Tauri UI相关的问题 (#290)

* fix(UI): Ref 269 修复Tauri UI的非拖拽状态下单像素显示的问题

* feat(UI): 自动调整窗口宽度来修复猫猫语的UI显示问题

Author: tfr0305

tauri-app/src-tauri/tauri.conf.json

@@ -19,11 +19,9 @@
         "decorations": false,
         "resizable": false,
         "transparent": true,
+        "shadow": false,
         "windowEffects": {
-          "effects": [
-            "acrylic",
-            "blur"
-          ]
+          "effects": ["acrylic", "blur"]
         }
       }
     ],
@@ -33,15 +31,8 @@
   },
   "bundle": {
     "active": true,
-    "targets": [
-      "dmg",
-      "app",
-      "deb",
-      "appimage"
-    ],
-    "resources": [
-      "resources/*"
-    ],
+    "targets": ["dmg", "app", "deb", "appimage"],
+    "resources": ["resources/*"],
     "icon": [
       "icons/32x32.png",
       "icons/128x128.png",

tauri-app/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed, watchEffect } from 'vue';
+import { ref, onMounted, onUnmounted, computed, watchEffect, watch, nextTick } from 'vue';
 import { useStorage, onClickOutside } from '@vueuse/core';
 import { LogicalSize } from '@tauri-apps/api/window';
 import { invoke } from '@tauri-apps/api/core';
@@ -148,16 +148,13 @@ onMounted(() => {
   }
 });
 
-// Watch and adjust physical window dimensions when entering or leaving pocket layout mode
+// Watch and adjust physical window dimensions when entering or leaving pocket layout mode.
+// In pocket mode the width is driven by the auto-size logic below (content width);
+// in full mode we always restore the standard 800x600 window.
 watchEffect(async () => {
-  const isPocket = pocketMode.value;
-  if (isPocket && isSettingsOpen.value) return;
+  if (pocketMode.value) return; // 袖珍模式宽度由自适应逻辑控制
   try {
-    if (isPocket) {
-      await win.appWindow.setSize(new LogicalSize(420, 52));
-    } else {
-      await win.appWindow.setSize(new LogicalSize(800, 600));
-    }
+    await win.appWindow.setSize(new LogicalSize(800, 600));
   } catch (e) {
     console.error('Failed to resize window:', e);
   }
@@ -174,6 +171,75 @@ watchEffect(async () => {
   }
 });
 
+// --- 袖珍模式窗口宽度自适应 ---
+// 窗口宽度跟随内容宽度自动伸缩(避免固定 420px 下长文本如猫猫语导致控件溢出)。
+// 防循环关键: PocketLayout 根容器使用 w-max(宽度由内容决定)，窗口 resize 不会改变内容宽度，
+// 因此 ResizeObserver -> setSize 不会再次触发内容宽度变化，不会形成死循环。
+const pocketContentRef = ref<HTMLElement | null>(null);
+let pocketObserver: ResizeObserver | null = null;
+let pocketRaf = 0;
+const POCKET_HEIGHT = 52;
+const POCKET_X_PADDING = 12; // 外层 p-1.5 左右各 6px
+const POCKET_MIN_WIDTH = 240;
+
+async function resizePocketToContent() {
+  const el = pocketContentRef.value;
+  if (!el) return;
+  const targetW = Math.max(
+    Math.ceil(el.getBoundingClientRect().width + POCKET_X_PADDING),
+    POCKET_MIN_WIDTH,
+  );
+  try {
+    await win.appWindow.setSize(new LogicalSize(targetW, POCKET_HEIGHT));
+  } catch (e) {
+    console.error('Failed to resize pocket window:', e);
+  }
+}
+
+function startPocketObserver() {
+  stopPocketObserver();
+  const el = pocketContentRef.value;
+  if (!el) return;
+  pocketObserver = new ResizeObserver((entries) => {
+    if (!pocketMode.value || isSettingsOpen.value) return;
+    const entry = entries[0];
+    if (!entry) return;
+    if (pocketRaf) cancelAnimationFrame(pocketRaf);
+    pocketRaf = requestAnimationFrame(() => void resizePocketToContent());
+  });
+  pocketObserver.observe(el);
+}
+
+function stopPocketObserver() {
+  pocketObserver?.disconnect();
+  pocketObserver = null;
+  if (pocketRaf) cancelAnimationFrame(pocketRaf);
+  pocketRaf = 0;
+}
+
+// 进入/退出袖珍模式时启停自适应
+watch(pocketMode, async (isPocket) => {
+  if (isPocket) {
+    await nextTick();
+    startPocketObserver();
+    if (!isSettingsOpen.value) await resizePocketToContent();
+  } else {
+    stopPocketObserver();
+  }
+}, { immediate: true });
+
+// 设置对话框打开时暂停自适应(由上方 watchEffect 展开到 800)，关闭后恢复自适应宽度
+watch(isSettingsOpen, async (open) => {
+  if (!pocketMode.value) return;
+  if (open) {
+    stopPocketObserver();
+  } else {
+    await nextTick();
+    startPocketObserver();
+    await resizePocketToContent();
+  }
+});
+
 // Central action button hover animations
 const onCentralBtnHover = () => {
   if (centralBtnRef.value) {
@@ -251,6 +317,7 @@ watchEffect(() => {
 });
 
 onUnmounted(() => {
+  stopPocketObserver();
   if (breatheAnim) breatheAnim.pause();
   if (dotPulseAnim) dotPulseAnim.pause();
 });
@@ -269,9 +336,11 @@ onUnmounted(() => {
         @click="pocketLayoutRef?.closePopup()"
       />
 
+      <!-- 包裹层: 宽度由内容决定(w-max)，供窗口自适应宽度测量 -->
+      <div ref="pocketContentRef" class="relative z-20 w-max">
       <PocketLayout
         ref="pocketLayoutRef"
-        class="flex-1 relative z-20"
+        class="relative"
         :serverState="server.serverState.value"
         :connectionMode="server.connectionMode.value"
         :serverPort="server.serverPort.value"
@@ -296,6 +365,7 @@ onUnmounted(() => {
         @openSettings="isSettingsOpen = true"
         @update:popupOpen="v => pocketPopupOpen = v"
       />
+      </div>
     </div>
 
     <!-- Full Mode -->

tauri-app/src/features/pocket/components/PocketLayout.vue

@@ -264,7 +264,8 @@ defineExpose({ closePopup });
 </script>
 
 <template>
-  <div class="w-full h-full flex items-center haze-surface rounded-2xl px-3 gap-2">
+  <!-- w-max: 宽度由内容决定，窗口 resize 不会改变内容宽度，是自动缩放无循环的关键 -->
+  <div class="w-max h-full flex items-center haze-surface rounded-2xl px-3 gap-2">
     <!-- Window Controls (macOS: left) -->
     <template v-if="isMacOS">
       <button @click="appWindow.minimize()" class="w-7 h-7 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors flex-shrink-0">