- [评分] 代码优化

src/screens/_/item/character/actors/index.tsx

@@ -0,0 +1,65 @@
+/*
+ * @Author: czy0729
+ * @Date: 2024-08-24 13:08:10
+ * @Last Modified by: czy0729
+ * @Last Modified time: 2024-08-24 13:16:37
+ */
+import React from 'react'
+import { Cover, Flex, Text, Touchable } from '@components'
+import { _ } from '@stores'
+import { cnjp } from '@utils'
+import { ob } from '@utils/decorators'
+import { t } from '@utils/fetch'
+import { MonoId } from '@types'
+import { InView } from '../../../base'
+import { styles } from './styles'
+import { Props } from './types'
+
+function Actors({ navigation, actors, y, event }: Props) {
+  return (
+    <Flex style={_.mt.sm} wrap='wrap'>
+      {actors.map(item => {
+        const cn = cnjp(item.nameCn, item.name)
+        const jp = cnjp(item.name, item.nameCn)
+        return (
+          <Touchable
+            key={item.id}
+            style={styles.touch}
+            animate
+            onPress={() => {
+              const monoId = (
+                String(item.id).includes('person') ? item.id : `person/${item.id}`
+              ) as MonoId
+              navigation.push('Mono', {
+                monoId
+              })
+
+              t(event.id, {
+                to: 'Mono',
+                monoId
+              })
+            }}
+          >
+            <Flex>
+              <InView style={styles.inView} y={y}>
+                <Cover src={item.cover} size={_.r(32)} radius />
+              </InView>
+              <Flex.Item style={_.ml.sm}>
+                <Text size={12} numberOfLines={1} bold lineHeight={13}>
+                  {cn}
+                </Text>
+                {!!jp && jp !== cn && (
+                  <Text size={11} type='sub' numberOfLines={1}>
+                    {jp}
+                  </Text>
+                )}
+              </Flex.Item>
+            </Flex>
+          </Touchable>
+        )
+      })}
+    </Flex>
+  )
+}
+
+export default ob(Actors)

src/screens/_/item/character/actors/styles.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: czy0729
+ * @Date: 2024-08-24 13:09:57
+ * @Last Modified by: czy0729
+ * @Last Modified time: 2024-08-24 13:11:53
+ */
+import { _ } from '@stores'
+
+export const styles = _.create({
+  touch: {
+    minWidth: 128,
+    marginTop: _.md,
+    borderRadius: _.radiusSm,
+    overflow: 'hidden'
+  },
+  inView: {
+    minWidth: _.r(32),
+    minHeight: _.r(32)
+  }
+})

src/screens/_/item/character/actors/types.ts

@@ -0,0 +1,15 @@
+/*
+ * @Author: czy0729
+ * @Date: 2024-08-24 13:13:27
+ * @Last Modified by: czy0729
+ * @Last Modified time: 2024-08-24 13:15:11
+ */
+import { EventType, Navigation } from '@types'
+import { Actors } from '../types'
+
+export type Props = {
+  navigation: Navigation
+  actors: Actors
+  y: number
+  event: EventType
+}

src/screens/_/item/character/content/index.tsx

@@ -0,0 +1,52 @@
+/*
+ * @Author: czy0729
+ * @Date: 2024-08-25 00:59:00
+ * @Last Modified by: czy0729
+ * @Last Modified time: 2024-08-25 13:02:45
+ */
+import React from 'react'
+import { Flex, Text, Touchable } from '@components'
+import { _ } from '@stores'
+import { HTMLDecode } from '@utils'
+import { ob } from '@utils/decorators'
+import { Tag } from '../../../base'
+import { styles } from './styles'
+import { Props } from './types'
+
+function Content({ cn, jp, replies, info, position, onPress }: Props) {
+  return (
+    <Touchable style={styles.touch} animate onPress={onPress}>
+      <Flex style={_.container.block} align='start'>
+        <Flex.Item style={_.mr.md}>
+          <Text size={15} numberOfLines={2} bold>
+            {cn}
+            {!!jp && jp !== cn && (
+              <Text type='sub' size={11} lineHeight={15} bold>
+                {' '}
+                {jp}
+              </Text>
+            )}
+            {!!replies && (
+              <Text type='main' size={11} lineHeight={15} bold>
+                {' '}
+                {replies.replace(/\(|\)/g, '')}
+              </Text>
+            )}
+          </Text>
+        </Flex.Item>
+      </Flex>
+      <Flex style={_.mt.sm} wrap='wrap'>
+        {position.map(item => (
+          <Tag key={item} style={styles.position} value={item} />
+        ))}
+      </Flex>
+      {!!info && (
+        <Text style={_.mt.sm} size={12}>
+          {HTMLDecode(info)}
+        </Text>
+      )}
+    </Touchable>
+  )
+}
+
+export default ob(Content)

src/screens/_/item/character/content/styles.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: czy0729
+ * @Date: 2024-08-25 01:03:41
+ * @Last Modified by: czy0729
+ * @Last Modified time: 2024-08-25 08:49:55
+ */
+import { _ } from '@stores'
+
+export const styles = _.create({
+  touch: {
+    paddingLeft: _.xs,
+    marginLeft: -_.xs,
+    borderRadius: _.radiusSm,
+    overflow: 'hidden'
+  },
+  position: {
+    marginTop: _.sm,
+    marginRight: _.sm
+  }
+})

src/screens/_/item/character/content/types.ts

@@ -0,0 +1,16 @@
+/*
+ * @Author: czy0729
+ * @Date: 2024-08-25 13:02:07
+ * @Last Modified by: czy0729
+ * @Last Modified time: 2024-08-25 13:02:34
+ */
+import { Fn } from '@types'
+
+export type Props = {
+  cn: string
+  jp: string
+  replies: string
+  info: string
+  position: string[]
+  onPress: Fn
+}

src/screens/_/item/character/index.tsx

@@ -2,17 +2,18 @@
  * @Author: czy0729
  * @Date: 2020-05-21 17:08:10
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-02 03:05:58
+ * @Last Modified time: 2024-08-25 01:43:53
  */
 import React from 'react'
-import { View } from 'react-native'
-import { Component, Cover, Flex, Text, Touchable } from '@components'
+import { Component, Cover, Flex, Touchable } from '@components'
 import { _ } from '@stores'
-import { cnjp, HTMLDecode } from '@utils'
+import { cnjp } from '@utils'
 import { obc } from '@utils/decorators'
 import { t } from '@utils/fetch'
 import { EVENT } from '@constants'
-import { InView, Tag } from '../../base'
+import { InView } from '../../base'
+import Actors from './actors'
+import Content from './content'
 import { COMPONENT, IMG_WIDTH, ITEM_HEIGHT } from './ds'
 import { memoStyles } from './styles'
 import { Props as ItemCharacterProps } from './types'
@@ -39,113 +40,44 @@ export const ItemCharacter = obc(
     { navigation }
   ) => {
     const styles = memoStyles()
-    const cn = HTMLDecode(cnjp(nameCn, name)).trim()
-    const jp = HTMLDecode(cnjp(name, nameCn)).trim()
-    const _positions = positions.length ? positions : [position]
-    const onPress = () => {
+    const cn = cnjp(nameCn, name).trim()
+    const jp = cnjp(name, nameCn).trim()
+    const y = ITEM_HEIGHT * index + 1
+    const handlePress = () => {
       const monoId = String(id).includes(type) ? id : `${type}/${id}`
-      t(event.id, {
-        to: 'Mono',
-        monoId
-      })
-
       navigation.push('Mono', {
         monoId,
         _name: cn,
         _jp: jp,
         _image: cover
       })
+
+      t(event.id, {
+        to: 'Mono',
+        monoId
+      })
     }
-    const y = ITEM_HEIGHT * index + 1
 
     return (
       <Component id='item-character' data-key={id} style={styles.container}>
         <Flex style={styles.wrap} align='start'>
-          <InView style={styles.inViewCover} y={y}>
+          <InView style={styles.inView} y={y}>
             {!!cover && (
-              <Touchable animate scale={0.9} onPress={onPress}>
+              <Touchable animate scale={0.9} onPress={handlePress}>
                 <Cover src={cover} width={IMG_WIDTH} height={IMG_WIDTH} radius />
               </Touchable>
             )}
           </InView>
           <Flex.Item style={_.ml.wind}>
-            <Touchable style={styles.touch} animate onPress={onPress}>
-              <Flex direction='column' justify='between' align='start'>
-                <View>
-                  <Flex style={_.container.block} align='start'>
-                    <Flex.Item style={_.mr.md}>
-                      <Text size={15} numberOfLines={2} bold>
-                        {cn}
-                        {!!jp && jp !== cn && (
-                          <Text type='sub' size={11} lineHeight={15} bold>
-                            {' '}
-                            {jp}
-                          </Text>
-                        )}
-                        {!!replies && (
-                          <Text type='main' size={11} lineHeight={15} bold>
-                            {' '}
-                            {replies.replace(/\(|\)/g, '')}
-                          </Text>
-                        )}
-                      </Text>
-                    </Flex.Item>
-                  </Flex>
-                  <Flex style={_.mt.sm} wrap='wrap'>
-                    {_positions.map(item => (
-                      <Tag key={item} style={styles.position} value={item} />
-                    ))}
-                  </Flex>
-                  {!!info && (
-                    <Text style={_.mt.xs} size={12}>
-                      {HTMLDecode(info)}
-                    </Text>
-                  )}
-                </View>
-              </Flex>
-            </Touchable>
-            <Flex style={_.mt.sm} wrap='wrap'>
-              {actors.map(item => {
-                const cn = cnjp(item.nameCn, item.name)
-                const jp = cnjp(item.name, item.nameCn)
-                return (
-                  <Touchable
-                    key={item.id}
-                    style={styles.touchActor}
-                    animate
-                    onPress={() => {
-                      const monoId = String(item.id).includes('person')
-                        ? item.id
-                        : `person/${item.id}`
-                      t(event.id, {
-                        to: 'Mono',
-                        monoId
-                      })
-
-                      navigation.push('Mono', {
-                        monoId
-                      })
-                    }}
-                  >
-                    <Flex>
-                      <InView style={styles.inViewAvatar} y={y}>
-                        <Cover src={item.cover} size={_.r(32)} radius />
-                      </InView>
-                      <Flex.Item style={_.ml.sm}>
-                        <Text size={12} numberOfLines={1} bold lineHeight={13}>
-                          {cn}
-                        </Text>
-                        {!!jp && jp !== cn && (
-                          <Text size={11} type='sub' numberOfLines={1}>
-                            {jp}
-                          </Text>
-                        )}
-                      </Flex.Item>
-                    </Flex>
-                  </Touchable>
-                )
-              })}
-            </Flex>
+            <Content
+              cn={cn}
+              jp={jp}
+              replies={replies}
+              info={info}
+              position={positions.length ? positions : [position]}
+              onPress={handlePress}
+            />
+            <Actors navigation={navigation} actors={actors} y={y} event={event} />
           </Flex.Item>
         </Flex>
         {children}

src/screens/_/item/character/styles.ts

@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-06-17 00:08:21
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-04-20 14:39:10
+ * @Last Modified time: 2024-08-25 01:42:10
  */
 import { _ } from '@stores'
 import { IMG_WIDTH } from './ds'
@@ -12,32 +12,12 @@ export const memoStyles = _.memoStyles(() => ({
     paddingLeft: _.wind,
     backgroundColor: _.colorPlain
   },
-  inViewCover: {
-    minWidth: IMG_WIDTH,
-    minHeight: IMG_WIDTH
-  },
-  inViewAvatar: {
-    minWidth: _.r(32),
-    minHeight: _.r(32)
-  },
   wrap: {
     paddingVertical: _.md,
     paddingRight: _.wind
   },
-  touch: {
-    paddingLeft: _.xs,
-    marginLeft: -_.xs,
-    borderRadius: _.radiusSm,
-    overflow: 'hidden'
-  },
-  touchActor: {
-    minWidth: 128,
-    marginTop: _.md,
-    borderRadius: _.radiusSm,
-    overflow: 'hidden'
-  },
-  position: {
-    marginTop: _.sm,
-    marginRight: _.sm
+  inView: {
+    minWidth: IMG_WIDTH,
+    minHeight: IMG_WIDTH
   }
 }))