logo字体

app/(tabs)/index.tsx

@@ -8,6 +8,7 @@ import { router, useFocusEffect } from 'expo-router'
 import { observer } from 'mobx-react-lite'
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ActivityIndicator, RefreshControl, TextInput } from 'react-native'
+import { Canvas, Paragraph as SkiaParagraph, Skia, useFonts } from '@shopify/react-native-skia'
 
 import ParallelogramButton from '@/components/ParallelogramButton'
 import ParallelogramGridItem from '@/components/ParallelogramGridItem'
@@ -575,17 +576,62 @@ const GooActions = observer<GooActionsProps>(function GooActions({ gooPoints, on
           </Block>
         )}
 
-        <Block
+        {/* <Block
           className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
           onClick={onOpenSearch}
         >
           <Ionicons color="black" name="search" size={22} />
-        </Block>
+        </Block> */}
       </Block>
     </Block>
   )
 })
 
+const DuooomiLogo = memo(function DuooomiLogo() {
+  const fontMgr = useFonts({
+    System: [],
+  })
+
+  const paragraph = useMemo(() => {
+    if (!fontMgr) return null
+    const para = Skia.ParagraphBuilder.Make({}, fontMgr)
+      .pushStyle({
+        color: Skia.Color('#FFFFFF'),
+        fontSize: 18,
+        fontFamilies: ['System'],
+        fontStyle: { weight: 900 },
+        shadows: [
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -1, y: -1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 1, y: -1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -1, y: 1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 1, y: 1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -1, y: 0 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 1, y: 0 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0, y: -1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0, y: 1 } },
+        ],
+      })
+      .addText('DUOOOMI')
+      .build() 
+
+    para.layout(200)
+    return para
+  }, [fontMgr])
+
+  if (!paragraph) return null
+
+  const width = 200
+  const height = 40
+  const textHeight = paragraph.getHeight()
+  const y = (height - textHeight) / 2
+
+  return (
+    <Canvas style={{ width, height }}>
+      <SkiaParagraph paragraph={paragraph} x={0} y={y} width={width} />
+    </Canvas>
+  )
+})
+
 type HeroCircleProps = {
   selectedItem: MediaItem | null
   onQuickGen: () => void
@@ -602,9 +648,27 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
 
   return (
     <Block className="relative z-10 items-center">
-      <Block className="relative mx-[12px] flex-row justify-between">
+      <Block className='flex-row justify-between items-center w-full mx-[16px]  mb-[18px]'>
+        <Block >
+          <DuooomiLogo />
+        </Block>
+        <Block className="flex-shrink-0">
+          <GooActions
+            gooPoints={balance}
+            onAddGoo={() => {
+              if (!isAuthenticated) {
+                router.push('/auth')
+              } else {
+                router.push('/pointList')
+              }
+            }}
+            onOpenSearch={onOpenSearch}
+          />
+        </Block>
+      </Block>
+      <Block className="relative flex-row justify-between">
         <Block className="flex-1">
-          <Block className="relative z-10 mt-[20px] flex size-[224px] rounded-full border-4 border-black shadow-deep-black">
+          <Block className="relative z-10 flex size-[224px] rounded-full border-4 border-black shadow-deep-black">
             {existItem && (
               <Block className="relative size-full overflow-hidden rounded-full">
                 <VideoBox style={{ height: Width, width: Width, borderRadius: Width }} width={256} url={previewUrl} />
@@ -634,17 +698,12 @@ const HeroCircle = observer<HeroCircleProps>(function HeroCircle({ selectedItem,
             </Block>
           </Block>
         </Block>
-        <GooActions
+        <Block
-          gooPoints={balance}
+          className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
-          onAddGoo={() => {
+          onClick={onOpenSearch}
-            if (!isAuthenticated) {
+        >
-              router.push('/auth')
+          <Ionicons color="black" name="search" size={22} />
-            } else {
+        </Block>
-              router.push('/pointList')
-            }
-          }}
-          onOpenSearch={onOpenSearch}
-        />
       </Block>
     </Block>
   )

components/ParallelogramButton.tsx

@@ -34,14 +34,14 @@ const ParallelogramButton = memo<ParallelogramButtonProps>(function Parallelogra
         fontStyle: { weight: 700 },
         shadows: [
           // 黑色描边效果（略微偏移，避免过粗）
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: -0.5, y: -0.5 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -0.5, y: -0.5 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 0.5, y: -0.5 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0.5, y: -0.5 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: -0.5, y: 0.5 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -0.5, y: 0.5 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 0.5, y: 0.5 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0.5, y: 0.5 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: -0.5, y: 0 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -0.5, y: 0 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 0.5, y: 0 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0.5, y: 0 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 0, y: -0.5 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0, y: -0.5 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 0, y: 0.5 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0, y: 0.5 } },
         ],
       })
       .addText(state)
@@ -60,14 +60,14 @@ const ParallelogramButton = memo<ParallelogramButtonProps>(function Parallelogra
         fontFamilies: ['System'],
         fontStyle: { weight: 900 },
         shadows: [
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: -1, y: -1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -1, y: -1 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 1, y: -1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 1, y: -1 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: -1, y: 1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -1, y: 1 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 1, y: 1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 1, y: 1 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: -1, y: 0 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: -1, y: 0 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 1, y: 0 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 1, y: 0 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 0, y: -1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0, y: -1 } },
-          { color: Skia.Color('#000000'), blurRadius: 0, offset: { x: 0, y: 1 } },
+          { color: Skia.Color('#323232'), blurRadius: 0, offset: { x: 0, y: 1 } },
         ],
       })
       .addText(label)
@@ -124,7 +124,7 @@ const ParallelogramButton = memo<ParallelogramButtonProps>(function Parallelogra
         />
 
         {/* 边框 - 平行四边形 */}
-        <Path path={borderPath} color={Skia.Color('#000000')} style="stroke" strokeWidth={2} />
+        <Path path={borderPath} color={Skia.Color('#323232')} style="stroke" strokeWidth={2} />
 
         {/* 英文 state 标签 - 左上角，以左下角为中心，逆时针旋转 15 度 */}
         {stateParagraph && (() => {