- [发现] 优化项中文日文的显示 (fixed #165)

czy0729 · May 31, 2024 · 65a32b1 · 65a32b1
1 parent 46d0366
commit 65a32b1
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 43 deletions.
diff --git a/src/screens/discovery/index/component/cover-lg/index.tsx b/src/screens/discovery/index/component/cover-lg/index.tsx
@@ -10,8 +10,8 @@ import { LinearGradient } from 'expo-linear-gradient'
 import { Katakana, Squircle, Text, Touchable } from '@components'
 import { getCoverSrc } from '@components/cover/utils'
 import { Cover } from '@_'
-import { _, systemStore } from '@stores'
-import { getCoverLarge, HTMLDecode, matchCoverUrl } from '@utils'
+import { _, subjectStore, systemStore } from '@stores'
+import { cnjp, getCoverLarge, HTMLDecode, matchCoverUrl } from '@utils'
 import { obc } from '@utils/decorators'
 import { t } from '@utils/fetch'
 import { linearColor } from '../../ds'
@@ -21,27 +21,31 @@ import { memoStyles } from './styles'
 
 function CoverLg({ title, src, cn, data }, { navigation }: Ctx) {
   const styles = memoStyles()
-  const isUseCDN = systemStore.setting.cdnOrigin === 'magma'
-  const isMusic = title === '音乐'
+  const { subjectId } = data
+  const subjectJP = subjectStore.jp(subjectId) || data.title
+  const subjectCN = subjectStore.cn(subjectId) || cn
 
+  const isMusic = title === '音乐'
   const { width, height: h } = styles.cover
   const height = isMusic ? width : h
 
+  const isUseCDN = systemStore.setting.cdnOrigin === 'magma'
+
   return (
     <Touchable
       style={styles.item}
       animate
       onPress={() => {
         t('发现.跳转', {
           to: 'Subject',
-          subjectId: data.subjectId,
+          subjectId,
           from: `CoverLg|${title}`
         })
 
         navigation.push('Subject', {
-          subjectId: data.subjectId,
-          _jp: data.title,
-          _cn: cn,
+          subjectId,
+          _jp: subjectJP,
+          _cn: subjectCN,
           _image: getCoverSrc(src, width),
           _type: title
         })
@@ -69,7 +73,7 @@ function CoverLg({ title, src, cn, data }, { navigation }: Ctx) {
               numberOfLines={2}
             >
               <Katakana size={22} type={_.select('plain', 'title')} bold numberOfLines={2}>
-                {HTMLDecode(cn)}
+                {HTMLDecode(cnjp(subjectCN, subjectJP))}
               </Katakana>
             </Katakana.Provider>
           </View>

diff --git a/src/screens/discovery/index/component/cover-sm/index.tsx b/src/screens/discovery/index/component/cover-sm/index.tsx
@@ -10,8 +10,8 @@ import { LinearGradient } from 'expo-linear-gradient'
 import { Katakana, Squircle, Text, Touchable } from '@components'
 import { getCoverSrc } from '@components/cover/utils'
 import { Cover } from '@_'
-import { _, systemStore } from '@stores'
-import { getCoverMedium, HTMLDecode, stl } from '@utils'
+import { _, subjectStore, systemStore } from '@stores'
+import { cnjp, getCoverMedium, HTMLDecode, stl } from '@utils'
 import { obc } from '@utils/decorators'
 import { t } from '@utils/fetch'
 import { linearColor } from '../../ds'
@@ -21,8 +21,11 @@ import { memoStyles } from './styles'
 
 function CoverSm({ title, src, cn, data }, { navigation }: Ctx) {
   const styles = memoStyles()
-  const isMusic = title === '音乐'
+  const { subjectId } = data
+  const subjectJP = subjectStore.jp(subjectId) || data.title
+  const subjectCN = subjectStore.cn(subjectId) || cn
 
+  const isMusic = title === '音乐'
   const { width, height: h } = styles.cover
   const height = isMusic ? width : h
 
@@ -33,16 +36,16 @@ function CoverSm({ title, src, cn, data }, { navigation }: Ctx) {
       onPress={() => {
         t('发现.跳转', {
           to: 'Subject',
-          subjectId: data.subjectId,
+          subjectId,
           from: `CoverSm|${title}`
         })
 
         navigation.push('Subject', {
-          subjectId: data.subjectId,
-          _jp: data.title,
-          _cn: cn,
-          _type: title,
-          _image: getCoverSrc(src, width)
+          subjectId,
+          _jp: subjectJP,
+          _cn: subjectCN,
+          _image: getCoverSrc(src, width),
+          _type: title
         })
       }}
     >
@@ -67,7 +70,7 @@ function CoverSm({ title, src, cn, data }, { navigation }: Ctx) {
               bold
             >
               <Katakana type={_.select('plain', 'title')} size={11} bold numberOfLines={2}>
-                {HTMLDecode(cn)}
+                {HTMLDecode(cnjp(subjectCN, subjectJP))}
               </Katakana>
             </Katakana.Provider>
           </View>

diff --git a/src/screens/discovery/index/component/cover-xs/cover-xs.tsx b/src/screens/discovery/index/component/cover-xs/cover-xs.tsx
@@ -11,17 +11,30 @@ import { Squircle, Text, Touchable, UserStatus } from '@components'
 import { getCoverSrc } from '@components/cover/utils'
 import { Avatar, Cover } from '@_'
 import { _, systemStore } from '@stores'
-import { getCoverMedium, HTMLDecode, stl } from '@utils'
+import { getCoverMedium, stl } from '@utils'
 import { memo } from '@utils/decorators'
 import { t } from '@utils/fetch'
 import { linearColor } from '../../ds'
 import { COMPONENT_MAIN, DEFAULT_PROPS } from './ds'
 import { AVATAR_SIZE } from './styles'
 
 const CoverXs = memo(
-  ({ navigation, styles, imageWidth, avatarRound, title, avatar, data }) => {
+  ({
+    navigation,
+    styles,
+    imageWidth,
+    avatarRound,
+    title,
+    avatar,
+    subjectId,
+    cover,
+    cn,
+    jp,
+    name,
+    userId,
+    userName
+  }) => {
     const isMusic = title === '音乐'
-
     const width = imageWidth
     const height = isMusic ? width : width * 1.38
 
@@ -33,20 +46,21 @@ const CoverXs = memo(
           onPress={() => {
             t('发现.跳转', {
               to: 'Subject',
-              subjectId: data.id,
+              subjectId,
               from: `CoverXs|${title}`
             })
 
             navigation.push('Subject', {
-              subjectId: data.id,
-              _jp: data.name,
-              _image: getCoverSrc(data.cover, width),
+              subjectId,
+              _jp: jp,
+              _cn: cn,
+              _image: getCoverSrc(cover, width),
               _type: title
             })
           }}
         >
           <Squircle width={width} height={height} radius={systemStore.coverRadius}>
-            <Cover src={getCoverMedium(data.cover)} width={width} height={height} />
+            <Cover src={getCoverMedium(cover)} width={width} height={height} />
             <LinearGradient
               style={stl(styles.linear, isMusic && styles.linearMusic)}
               colors={linearColor}
@@ -61,19 +75,19 @@ const CoverXs = memo(
               bold
               pointerEvents='none'
             >
-              {HTMLDecode(data.name)}
+              {name}
             </Text>
           </Squircle>
         </Touchable>
         {!!avatar && (
           <View style={styles.fixed}>
-            <UserStatus userId={data.userId} mini>
+            <UserStatus userId={userId} mini>
               <Avatar
                 navigation={navigation}
                 size={AVATAR_SIZE}
                 src={avatar}
-                userId={data.userId}
-                name={data.userName}
+                userId={userId}
+                name={userName}
                 radius={avatarRound ? AVATAR_SIZE : true}
               />
             </UserStatus>

diff --git a/src/screens/discovery/index/component/cover-xs/ds.ts b/src/screens/discovery/index/component/cover-xs/ds.ts
@@ -20,11 +20,11 @@ export const DEFAULT_PROPS = {
   avatarRound: false as boolean,
   title: '' as SubjectTypeCn,
   avatar: '' as string,
-  data: {} as {
-    id: SubjectId
-    cover: string
-    name: string
-    userId: UserId
-    userName: string
-  }
+  subjectId: 0 as SubjectId,
+  cover: '' as string,
+  cn: '' as string,
+  jp: '' as string,
+  name: '' as string,
+  userId: '' as UserId,
+  userName: '' as string
 }
diff --git a/src/screens/discovery/index/component/cover-xs/index.tsx b/src/screens/discovery/index/component/cover-xs/index.tsx
@@ -5,24 +5,35 @@
  * @Last Modified time: 2024-01-04 14:47:09
  */
 import React from 'react'
-import { _, systemStore } from '@stores'
+import { _, subjectStore, systemStore } from '@stores'
+import { cnjp, HTMLDecode } from '@utils'
 import { obc } from '@utils/decorators'
 import { Ctx } from '../../types'
 import CoverXs from './cover-xs'
 import { COMPONENT } from './ds'
 import { memoStyles } from './styles'
 
 function CoverXsWrap({ title, avatar, data }, { navigation }: Ctx) {
-  const { avatarRound } = systemStore.setting
+  if (!avatar || !data.cover) return null
+
+  const subjectId = data.id
+  const cn = subjectStore.cn(subjectId)
+  const jp = subjectStore.jp(subjectId) || data.name
   return (
     <CoverXs
       navigation={navigation}
       styles={memoStyles()}
       imageWidth={_.windowSm.contentWidth * 0.2}
-      avatarRound={avatarRound}
+      avatarRound={systemStore.setting.avatarRound}
       title={title}
       avatar={avatar}
-      data={data}
+      subjectId={subjectId}
+      cover={data.cover}
+      cn={cn}
+      jp={jp}
+      name={HTMLDecode(cnjp(cn, jp))}
+      userId={data.userId}
+      userName={data.userName}
     />
   )
 }

diff --git a/src/types/route.ts b/src/types/route.ts
@@ -4,6 +4,7 @@
  * @Last Modified by: czy0729
  * @Last Modified time: 2024-05-14 05:45:13
  */
+import { ImageSourcePropType } from 'react-native'
 import { RatingStatus, SubjectType, SubjectTypeCn } from '@constants/model/types'
 import * as Screens from '@screens'
 import { Id, SubjectId, TopicId, UserId } from './bangumi'
@@ -310,7 +311,7 @@ type RouteSubject = (
     subjectId: SubjectId
     _jp?: string
     _cn?: string
-    _image?: string | number
+    _image?: string | ImageSourcePropType
     _imageForce?: string
     _collection?: string
     _type?: SubjectTypeCn