feat: 优化 Video 组件的 URL 刷新逻辑，调整占位图支持，更新 Device 组件的设备信息显示

@share/components/Video.tsx

@@ -62,8 +62,6 @@ const VideoBox = ({
         return
       }
 
-      // 缓存未命中，进行网络请求
-      setUrlFinal('')
       const webpUrl = await mp4ToWebpUrl({ videoUrl: url!, width, height: width })
 
       // 只有当请求未被取消时才缓存和更新状态
@@ -85,6 +83,7 @@ const VideoBox = ({
   }
 
   useEffect(() => {
+    // 每次url变化强制刷新
     setUrlFinal('')
     if (!url) {
       return
@@ -93,7 +92,11 @@ const VideoBox = ({
     // 用于标记当前请求是否已过期
     let cancelled = false
 
-    setRedirectUrl(() => cancelled, url!)
+    setTimeout(() => {
+      if (!cancelled) {
+        setRedirectUrl(() => cancelled, url)
+      }
+    }, 0)
 
     // 清理函数：当 url 变化或组件卸载时，标记当前请求为已取消
     return () => {
@@ -156,8 +159,8 @@ const VideoBox = ({
       {/* 占位图层 - 加载完成后隐藏 */}
       {showPlaceholder && (
         <Img
-          isCompression={true}
-          isWebP={false}
+          isCompression={false}
+          isWebP={true}
           src={placeholderUrl}
           style={{ position: 'absolute', width: '100%', height: '100%' }}
           contentFit={'cover'}

app/(tabs)/sync.tsx

@@ -637,7 +637,7 @@ const DeviceItem = observer(({ device }: { device: any }) => {
           </Block>
         </Block>
 
-        <Block className="relative z-10 flex-col items-center space-x-[8px]">
+        <Block className="relative z-10 flex-col items-end space-x-[8px]">
           <Block
             className={`h-[40px] items-center justify-center border-[3px] border-black px-[16px] text-[12px] font-[900] ${isConnected ? 'bg-accent text-black shadow-medium-black' : 'bg-white text-black shadow-medium-gray'}`}
             onClick={() => onConnectToggle(device)}
@@ -709,7 +709,7 @@ const GridItem = memo(
     }
 
     const imgShow = post.webpPreviewUrl || post.imageUrl
-    const placeholderSrc = post.coverUrl
+    const placeholderSrc = null
     // console.log('imgShow----------', imgShow)
     // 新数据使用webp 旧数据使用mp4
 
@@ -952,9 +952,10 @@ const TopCircleSection = observer(
 )
 
 const GalleryRenderer = memo(({ selectedItem }: { selectedItem: any }) => {
-  const url = selectedItem?.webpHighPreviewUrl || selectedItem?.url || selectedItem?.imageUrl
-  const placeholderUrl = selectedItem?.coverUrl
-  console.log('GalleryRenderer--------------', selectedItem)
+  // 本地和线上都优先使用imageUrl， 本地上传一开始没有 url
+  const url = selectedItem?.webpHighPreviewUrl || selectedItem?.imageUrl || selectedItem?.url
+  const placeholderUrl = selectedItem?.webpPreviewUrl
+  // console.log('GalleryRenderer--------------', selectedItem)
 
   if (!url) return null
 

app/device.tsx

@@ -193,8 +193,6 @@ const Device = observer(() => {
 
   // ✅ 显示设备信息（名称、品牌、分辨率、电池电量、内存等）
   const renderDeviceInfo = () => {
-    const [width, height] = deviceInfo?.size?.split('x') || ['未知', '未知']
-
     return (
       <Block className="mx-[16px] mb-[12px] rounded-lg border-2 border-black bg-gray-900 p-[12px] shadow-hard-black">
         {/* 标题栏 */}
@@ -209,7 +207,7 @@ const Device = observer(() => {
           {deviceInfo?.name && (
             <Block className="flex-row items-center justify-between">
               <Text className="text-[12px] text-gray-500">设备名称</Text>
-              <Text className="text-[12px] font-bold text-white">{deviceInfo.name}</Text>
+              <Text className="text-[12px] text-white">{deviceInfo.name}</Text>
             </Block>
           )}
 
@@ -225,9 +223,7 @@ const Device = observer(() => {
           {deviceInfo?.size && (
             <Block className="flex-row items-center justify-between">
               <Text className="text-[12px] text-gray-500">分辨率</Text>
-              <Text className="text-[12px] font-bold text-white">
-                {width} × {height}
-              </Text>
+              <Text className="text-[12px] font-bold text-white">{deviceInfo?.size}</Text>
             </Block>
           )}