- [条目] 动画系列追加索引书籍

htyf-mp-community · Aug 23, 2024 · dcfdda7 · dcfdda7
1 parent f03a4a5
commit dcfdda7
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 31 deletions.
diff --git a/src/components/header/header-component/index.web.tsx b/src/components/header/header-component/index.web.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2023-06-01 01:25:39
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-01-14 16:09:36
+ * @Last Modified time: 2024-08-23 16:57:28
  */
 import React from 'react'
 import { observer } from 'mobx-react'
@@ -43,10 +43,12 @@ function HeaderComponent({
       }}
     >
       <Transition fixed={fixed} title={title} headerTitle={headerTitle} />
-      <Back navigation={navigation} color={color} onPress={onBackPress} />
+      <Component id='component-header-back'>
+        <Back navigation={navigation} color={color} onPress={onBackPress} />
+      </Component>
       {headerLeft}
       <Flex.Item />
-      {!!headerRight && headerRight()}
+      {!!headerRight && <Component id='component-header-right'>{headerRight()}</Component>}
     </Component>
   )
 }

diff --git a/src/components/header/transition/index.web.tsx b/src/components/header/transition/index.web.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-03-12 20:43:41
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-01-14 16:15:26
+ * @Last Modified time: 2024-08-23 16:55:33
  */
 import React from 'react'
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
@@ -38,7 +38,7 @@ function Transition({ fixed, title, headerTitle }: Props) {
   return useObserver(() => {
     const styles = memoStyles()
     return (
-      <Animated.View style={[styles.view, wrapStyles]}>
+      <Animated.View style={[styles.view, wrapStyles]} pointerEvents={fixed ? 'auto' : 'none'}>
         <Animated.View style={[styles.body, title && styles.bodyTitle, bodyStyles]}>
           {headerTitle || (
             <ScrollView

diff --git a/src/components/header/transition/styles.ts b/src/components/header/transition/styles.ts
@@ -2,15 +2,15 @@
  * @Author: czy0729
  * @Date: 2023-04-11 16:15:24
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-02-19 11:25:31
+ * @Last Modified time: 2024-08-23 16:51:27
  */
 import { _ } from '@stores'
-import { STORYBOOK, WSA } from '@constants'
+import { WEB, WSA } from '@constants'
 
 let minHeight: number
 if (WSA) {
   minHeight = 40
-} else if (STORYBOOK) {
+} else if (WEB) {
   minHeight = 32
 } else {
   minHeight = 20 * 1.28
@@ -19,6 +19,7 @@ if (WSA) {
 export const memoStyles = _.memoStyles(() => ({
   view: {
     position: 'absolute',
+    zIndex: 1,
     top: 0,
     right: 0,
     bottom: 0,
@@ -31,14 +32,14 @@ export const memoStyles = _.memoStyles(() => ({
     zIndex: 1,
     bottom: 8,
     left: _.device(48, 56),
-    right: STORYBOOK ? 0 : 56,
+    right: WEB ? 0 : 56,
     minHeight
   },
   bodyTitle: {
     bottom: _.device(6, 10)
   },
   scrollView: {
-    maxWidth: STORYBOOK ? '100%' : '80%'
+    maxWidth: WEB ? '100%' : '80%'
   },
   container: {
     width: '100%',

diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
@@ -2,15 +2,15 @@
  * @Author: czy0729
  * @Date: 2019-04-06 06:57:49
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-19 22:03:17
+ * @Last Modified time: 2024-08-23 17:21:06
  */
 import React from 'react'
 import { View } from 'react-native'
 import { observer } from 'mobx-react'
 import { _ } from '@stores'
 import { stl } from '@utils'
 import { r } from '@utils/dev'
-import { STORYBOOK } from '@constants'
+import { WEB } from '@constants'
 import { Component } from '../component'
 import { Text } from '../text'
 import { Touchable } from '../touchable'
@@ -61,7 +61,12 @@ export const Menu = observer(
                 return (
                   <View key={item} style={showBorder && styles.border}>
                     <Touchable style={styles.item} onPress={() => onSelect(item, index)}>
-                      <Text align='center' size={STORYBOOK ? 13 : 14} noWrap>
+                      <Text
+                        align='center'
+                        size={WEB ? 13 : 14}
+                        numberOfLines={WEB ? undefined : 1}
+                        noWrap={WEB ? false : true}
+                      >
                         {platformFix(item)}
                       </Text>
                     </Touchable>

diff --git a/src/screens/home/subject/component/comic/comic.tsx b/src/screens/home/subject/component/comic/comic.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2019-06-10 22:02:59
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-09 06:03:28
+ * @Last Modified time: 2024-08-23 17:11:07
  */
 import React from 'react'
 import { Heatmap } from '@components'
@@ -33,6 +33,7 @@ const Comic = memo(
           height={COVER_HEIGHT}
           ellipsizeMode='middle'
           initialRenderNums={_.device(Math.floor(_.window.contentWidth / COVER_WIDTH) + 1, 6)}
+          typeCn='书籍'
           onPress={({ id, name, image }, type) => {
             t('条目.跳转', {
               to: 'Subject',

diff --git a/src/screens/home/subject/component/series/ds.ts b/src/screens/home/subject/component/series/ds.ts
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-08-26 10:03:17
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-12-16 11:38:35
+ * @Last Modified time: 2024-08-23 17:20:09
  */
 import { _, systemStore } from '@stores'
 import { rc } from '@utils/dev'
@@ -25,9 +25,10 @@ export const DEFAULT_PROPS = {
   showRelation: true as typeof systemStore.setting.showRelation,
   size: 14 as number,
   subjectId: 0 as $['subjectId'],
-  subjectPrev: undefined as $['subjectPrev'],
   subjectAfter: undefined as $['subjectAfter'],
-  subjectSeries: undefined as $['subjectSeries'],
   subjectAnime: undefined as $['subjectAnime'],
-  subjectDiff: undefined as $['subjectDiff']
+  subjectBook: undefined as $['subjectBook'],
+  subjectDiff: undefined as $['subjectDiff'],
+  subjectPrev: undefined as $['subjectPrev'],
+  subjectSeries: undefined as $['subjectSeries']
 }
diff --git a/src/screens/home/subject/component/series/index.tsx b/src/screens/home/subject/component/series/index.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2019-03-23 04:30:59
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-19 12:48:19
+ * @Last Modified time: 2024-08-23 17:16:35
  */
 import React, { Suspense } from 'react'
 import { systemStore } from '@stores'
@@ -27,6 +27,7 @@ function SeriewWrap({ size }: { size: number }, { $, navigation }: Ctx) {
   let subjectAnime: SeriesItem
   let subjectDiff: SeriesItem
   let subjectSeries: SeriesItem
+  let subjectBook: SeriesItem
 
   if ($.subjectPrev) {
     subjectPrev = $.subjectPrev
@@ -48,6 +49,11 @@ function SeriewWrap({ size }: { size: number }, { $, navigation }: Ctx) {
     i += 1
   }
 
+  if (i < 2 && $.subjectBook) {
+    subjectBook = $.subjectBook
+    i += 1
+  }
+
   if (!i && $.subjectSeries) {
     subjectSeries = $.subjectSeries
   }
@@ -64,6 +70,7 @@ function SeriewWrap({ size }: { size: number }, { $, navigation }: Ctx) {
         subjectAfter={subjectAfter}
         subjectAnime={subjectAnime}
         subjectDiff={subjectDiff}
+        subjectBook={subjectBook}
         subjectSeries={subjectSeries}
       />
     </Suspense>

diff --git a/src/screens/home/subject/component/series/series.tsx b/src/screens/home/subject/component/series/series.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2019-03-23 04:30:59
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-22 17:11:03
+ * @Last Modified time: 2024-08-23 17:05:10
  */
 import React from 'react'
 import { Cover, Flex, Heatmap, Iconfont, Squircle, Text, Touchable } from '@components'
@@ -27,13 +27,15 @@ const Series = memo(
     subjectAfter,
     subjectAnime,
     subjectDiff,
+    subjectBook,
     subjectSeries
   }) => {
-    if (subjectPrev || subjectAfter || subjectAnime || subjectDiff) {
+    if (subjectPrev || subjectAfter || subjectAnime || subjectDiff || subjectBook) {
       let i = 0
       if (subjectPrev) i += 1
       if (subjectAfter) i += 1
       if (subjectAnime) i += 1
+      if (subjectDiff) i += 1
       return (
         <Flex style={showRelation && styles.relation}>
           <Flex.Item>
@@ -44,6 +46,7 @@ const Series = memo(
                 {!!subjectAfter && <Item data={subjectAfter} from='续集' />}
                 {i <= 1 && !!subjectAnime && <Item data={subjectAnime} from='动画' />}
                 {i <= 1 && !!subjectDiff && <Item data={subjectDiff} from='不同演绎' />}
+                {i <= 1 && !!subjectBook && <Item data={subjectBook} from='书籍' />}
               </Flex>
             )}
           </Flex.Item>

diff --git a/src/screens/home/subject/header/pop-to-top/index.tsx b/src/screens/home/subject/header/pop-to-top/index.tsx
@@ -2,19 +2,22 @@
  * @Author: czy0729
  * @Date: 2024-05-18 03:52:12
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-05-18 04:09:35
+ * @Last Modified time: 2024-08-23 16:22:39
  */
 import React from 'react'
 import { IconTouchable } from '@_'
 import { _ } from '@stores'
 import { obc } from '@utils/decorators'
+import { WEB } from '@constants'
 import { Ctx } from '../../types'
 
-function PopToTop(props, { $, navigation }: Ctx) {
-  try {
-    if (navigation.getState().index < 4 || $.state.fixed) return null
-  } catch (error) {
-    return null
+function PopToTop(_props, { $, navigation }: Ctx) {
+  if (!WEB) {
+    try {
+      if (navigation.getState().index < 4 || $.state.fixed) return null
+    } catch (error) {
+      return null
+    }
   }
 
   return (

diff --git a/src/screens/home/subject/store/computed.tsx b/src/screens/home/subject/store/computed.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-05-11 19:26:49
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-22 17:11:11
+ * @Last Modified time: 2024-08-23 17:16:07
  */
 import React from 'react'
 import { View } from 'react-native'
@@ -1028,15 +1028,21 @@ export default class Computed extends State {
     return this.subjectRelations?.[0]?.type === '系列' ? this.subjectRelations[0] : null
   }
 
+  /** 书籍 */
+  @computed get subjectBook() {
+    return this.subjectRelations.find(item => item.type === '书籍')
+  }
+
   /** 动画化 */
   @computed get subjectAnime() {
     if (!(this.titleLabel || '').includes('系列')) return null
 
     const find = this.subjectRelations.find(item => item.type === '动画' || item.type === '其他')
 
     // 部分条目维护不够好, 动画化条目标签为其他, 若日文名字相等都认为是动画化
-    if (find?.type === '动画' || (find?.type === '其他' && this.jp.includes(find?.title)))
+    if (find?.type === '动画' || (find?.type === '其他' && this.jp.includes(find?.title))) {
       return find
+    }
 
     return null
   }
@@ -1065,7 +1071,8 @@ export default class Computed extends State {
       this.subjectPrev ||
       this.subjectSeries ||
       this.subjectAnime ||
-      this.subjectDiff
+      this.subjectDiff ||
+      this.subjectBook
     )
   }
 

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2023-11-10 02:02:44
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-23 11:24:59
+ * @Last Modified time: 2024-08-23 16:57:20
  */
 
 /** ==================== reset ==================== */
@@ -37,6 +37,13 @@ component-storybook-scroll {
   }
 }
 
+component-header {
+  &-back,
+  &-right {
+    z-index: 1;
+  }
+}
+
 component-tabs {
   display: flex;
   flex-direction: column;