From 3af07fcde08176c6ee748f5d42597008fbcab4bc Mon Sep 17 00:00:00 2001
From: gww <gww@bowong.ai>
Date: Thu, 22 Jan 2026 10:17:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=90=9C=E7=B4=A2=E6=A1=86=E5=9B=9B?=
 =?UTF-8?q?=E8=BE=B9=E5=BD=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(tabs)/index.tsx | 109 +++++++++++++++++++++++++++++++++----------
 1 file changed, 85 insertions(+), 24 deletions(-)

diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 7b6b41e..058d4ad 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -522,33 +522,94 @@ const SearchOverlay = memo<SearchOverlayProps>(function SearchOverlay({ isOpen,
   }, [onClose, onSearch])
 
   if (!isOpen) return null
+
+  const searchHeight = 48
+  const closeSize = 48
+  const skewOffset = 8
+  const padding = 2
+  const searchWidth = screenWidth - 40 - 8 - closeSize
+
   return (
     <Block className="absolute inset-x-0 top-0 z-50 flex-row items-center gap-[8px] px-[20px]" style={{ marginTop: 16, marginBottom: 26 }}>
-      <Block
-        className="flex-1 flex-row items-center border-[3px] border-black bg-white px-[12px] shadow-[4px_4px_0px_#000]"
-        style={{ height: 48, transform: [{ skewX: '-6deg' }] }}
-      >
-        <Ionicons color="black" name="search" size={20} style={{ marginRight: 8 }} />
-        <TextInput
-          autoFocus
-          onChangeText={handleTextChange}
-          placeholder="搜索作品 / 用户..."
-          placeholderTextColor="#9CA3AF"
-          style={{
-            flex: 1,
-            fontSize: 14,
-            fontWeight: 'bold',
-            color: 'black',
-          }}
-          value={searchText}
-        />
+      {/* 搜索输入平行四边形 */}
+      <Block className="relative flex-1" style={{ height: searchHeight }}>
+        <Canvas style={{ position: 'absolute', inset: 0 }}>
+          {/* 白色平行四边形主体 */}
+          <Path
+            path={Skia.Path.Make()
+              .moveTo(skewOffset + padding, padding)
+              .lineTo(searchWidth - padding, padding)
+              .lineTo(searchWidth - skewOffset - padding, searchHeight - padding)
+              .lineTo(padding, searchHeight - padding)
+              .close()}
+            color={Skia.Color('#FFFFFF')}
+          />
+          {/* 黑色描边 */}
+          <Path
+            path={Skia.Path.Make()
+              .moveTo(skewOffset + padding, padding)
+              .lineTo(searchWidth - padding, padding)
+              .lineTo(searchWidth - skewOffset - padding, searchHeight - padding)
+              .lineTo(padding, searchHeight - padding)
+              .close()}
+            color={Skia.Color('#323232')}
+            style="stroke"
+            strokeWidth={3}
+          />
+          {/* 右侧 + 底部硬阴影 */}
+          <ParallelogramShadow height={searchHeight} padding={padding} skewOffset={skewOffset} width={searchWidth} />
+        </Canvas>
+
+        <Block className="absolute inset-0 flex-row items-center px-[18px]">
+          <Ionicons color="black" name="search" size={20} style={{ marginRight: 8 }} />
+          <TextInput
+            autoFocus
+            onChangeText={handleTextChange}
+            placeholder="搜索作品 / 用户..."
+            placeholderTextColor="#9CA3AF"
+            style={{
+              flex: 1,
+              fontSize: 14,
+              fontWeight: 'bold',
+              color: 'black',
+            }}
+            value={searchText}
+          />
+        </Block>
       </Block>
-      <Block
-        className="items-center justify-center border-[3px] border-black bg-accent shadow-[4px_4px_0px_#000]"
-        onClick={handleClose}
-        style={{ width: 48, height: 48, transform: [{ skewX: '-6deg' }] }}
-      >
-        <Ionicons color="black" name="close" size={24} style={{ transform: [{ skewX: '6deg' }] }} />
+
+      {/* 关闭按钮平行四边形 */}
+      <Block className="relative" style={{ width: closeSize, height: closeSize }} onClick={handleClose}>
+        <Canvas style={{ position: 'absolute', inset: 0 }}>
+          {/* 黄色平行四边形主体 */}
+          <Path
+            path={Skia.Path.Make()
+              .moveTo(skewOffset + padding, padding)
+              .lineTo(closeSize - padding, padding)
+              .lineTo(closeSize - skewOffset - padding, closeSize - padding)
+              .lineTo(padding, closeSize - padding)
+              .close()}
+            color={Skia.Color('#FFE500')}
+          />
+          {/* 黑色描边 */}
+          <Path
+            path={Skia.Path.Make()
+              .moveTo(skewOffset + padding, padding)
+              .lineTo(closeSize - padding, padding)
+              .lineTo(closeSize - skewOffset - padding, closeSize - padding)
+              .lineTo(padding, closeSize - padding)
+              .close()}
+            color={Skia.Color('#323232')}
+            style="stroke"
+            strokeWidth={3}
+          />
+          {/* 右侧 + 底部硬阴影 */}
+          <ParallelogramShadow height={closeSize} padding={padding} skewOffset={skewOffset} width={closeSize} />
+        </Canvas>
+
+        <Block className="absolute inset-0 items-center justify-center">
+          <Ionicons color="black" name="close" size={24} />
+        </Block>
       </Block>
     </Block>
   )