- [赞助者] 整理页面代码

czy0729 · Sep 10, 2024 · aa61c41 · aa61c41
1 parent 92c2691
commit aa61c41
Show file tree

Hide file tree

Showing 19 changed files with 213 additions and 123 deletions.
diff --git a/app.json b/app.json
@@ -1,9 +1,9 @@
 {
   "expo": {
     "description": "A React Native App for https://bgm.tv, tinygrail plugin 5.1.0",
-    "version": "8.13.1",
+    "version": "8.13.2",
     "android": {
-      "versionCode": 813010,
+      "versionCode": 813020,
       "package": "com.czy0729.bangumi",
       "adaptiveIcon": {
         "foregroundImage": "./src/assets/images/foreground.png",

diff --git a/src/assets/json/advance.json b/src/assets/json/advance.json
diff --git a/src/assets/json/user.json b/src/assets/json/user.json
diff --git a/src/constants/events/user.ts b/src/constants/events/user.ts
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-05-11 04:42:21
  * @Last Modified by: czy0729
- * @Last Modified time: 2023-02-22 04:29:59
+ * @Last Modified time: 2024-09-10 13:59:06
  */
 
 /** User */
@@ -89,6 +89,8 @@ export default {
 
   // 赞助者
   '赞助者.跳转': 'Sponsor.to',
+  '赞助者.切换布局': 'Sponsor.toggle',
+  '赞助者.提示': 'Sponsor.info',
 
   // 本地备份
   '本地备份.获取': 'Backup.get',

diff --git a/src/constants/text/index.ts b/src/constants/text/index.ts
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2021-02-23 10:40:56
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-09-02 18:37:41
+ * @Last Modified time: 2024-09-10 14:00:33
  */
 import { WEB } from '../device'
 
@@ -31,7 +31,7 @@ export const TEXT_UPDATE_GAME = '2024-07-14'
 export const TEXT_UPDATE_MANGA = '2023-12-18'
 
 /** 赞助者最后更新时间 */
-export const TEXT_UPDATE_SPONSOR = '2024-03-26'
+export const TEXT_UPDATE_SPONSOR = '2024-09-10'
 
 /** 打赏最后更新时间 */
 export const TEXT_UPDATE_QIAFAN = '2024-09'

diff --git a/src/screens/user/sponsor/component/chart/index.tsx b/src/screens/user/sponsor/component/chart/index.tsx
@@ -2,70 +2,87 @@
  * @Author: czy0729
  * @Date: 2019-11-27 21:50:14
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-07-15 16:19:49
+ * @Last Modified time: 2024-09-10 13:51:13
  */
 import React from 'react'
 import { View } from 'react-native'
-import { Flex, Text } from '@components'
+import { Flex, Text, Touchable } from '@components'
 import { IconTouchable } from '@_'
 import { _, systemStore } from '@stores'
 import { r } from '@utils/dev'
 import { t } from '@utils/fetch'
 import { useObserver } from '@utils/hooks'
-import { Navigation } from '@types'
+import { NavigationProps } from '@types'
 import { USERS_MAP } from '../../ds'
 import { useTreemapSquarify } from '../../utils'
 import Item from '../item'
 import { COMPONENT } from './ds'
 import { memoStyles } from './styles'
 
-function Chart({ navigation }: { navigation: Navigation }) {
+function Chart({ navigation }: NavigationProps) {
   r(COMPONENT)
 
   const styles = memoStyles()
-  const { data, filterLength, filterCount, setFilter, resetFilter } = useTreemapSquarify()
+  const { data, filterLength, filterCount, handleFilter, handleBatchFilter, handleResetFilter } =
+    useTreemapSquarify()
   return useObserver(() => (
     <>
       <Flex style={styles.filter} direction='column' justify='center'>
         <Flex>
           {filterLength ? (
             <>
-              <Text size={13} bold>
+              <Text size={12} bold>
                 已隐藏 {filterLength} 格，还有 {filterCount} 格未显示
               </Text>
               <View style={styles.refresh}>
                 <IconTouchable
                   name='md-refresh'
                   color={_.colorDesc}
                   size={18}
-                  onPress={() => resetFilter()}
+                  onPress={() => handleResetFilter()}
                 />
               </View>
             </>
           ) : (
-            <Text size={13} bold>
-              还有 {filterCount} 格未显示，点击方格隐藏
+            <Text size={12} bold>
+              还有 {filterCount} 格未显示，点击方格隐藏，点击色块显示区间
             </Text>
           )}
         </Flex>
         {!filterLength && (
-          <Flex style={_.mt.sm}>
-            <View style={[styles.l, styles.l4]} />
-            <Text style={_.mr.sm} size={10} bold>
-              ≥ 200
-            </Text>
-            <View style={[styles.l, styles.l3]} />
-            <Text style={_.mr.sm} size={10} bold>
-              ≥ 50
-            </Text>
-            <View style={[styles.l, styles.l2]} />
-            <Text style={_.mr.sm} size={10} bold>
-              ≥ 20
-            </Text>
-            <View style={[styles.l, styles.l1]} />
-            <Text style={_.mr.sm} size={10} bold>
-              ≥ 10
-            </Text>
+          <Flex style={styles.block} justify='around'>
+            <Touchable style={styles.touch} onPress={() => handleBatchFilter(200)}>
+              <Flex>
+                <View style={[styles.l, styles.l4]} />
+                <Text style={_.mr.sm} size={10} bold>
+                  ≥ 200
+                </Text>
+              </Flex>
+            </Touchable>
+            <Touchable onPress={() => handleBatchFilter(50)}>
+              <Flex>
+                <View style={[styles.l, styles.l3]} />
+                <Text style={_.mr.sm} size={10} bold>
+                  ≥ 50
+                </Text>
+              </Flex>
+            </Touchable>
+            <Touchable onPress={() => handleBatchFilter(20)}>
+              <Flex>
+                <View style={[styles.l, styles.l2]} />
+                <Text style={_.mr.sm} size={10} bold>
+                  ≥ 20
+                </Text>
+              </Flex>
+            </Touchable>
+            <Touchable onPress={() => handleBatchFilter(10)}>
+              <Flex>
+                <View style={[styles.l, styles.l1]} />
+                <Text style={_.mr.sm} size={10} bold>
+                  ≥ 10
+                </Text>
+              </Flex>
+            </Touchable>
           </Flex>
         )}
       </Flex>
@@ -75,7 +92,7 @@ function Chart({ navigation }: { navigation: Navigation }) {
             key={item.data}
             {...item}
             onPress={() => {
-              setFilter(item.data)
+              handleFilter(item.data)
             }}
             onLongPress={
               systemStore.advance

diff --git a/src/screens/user/sponsor/component/chart/styles.ts b/src/screens/user/sponsor/component/chart/styles.ts
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-09-07 03:01:00
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-07-15 16:20:29
+ * @Last Modified time: 2024-09-10 13:51:27
  */
 import { _ } from '@stores'
 
@@ -17,12 +17,21 @@ export const memoStyles = _.memoStyles(() => ({
   refresh: {
     marginRight: -24
   },
+  touch: {
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    marginHorizontal: 2
+  },
+  block: {
+    width: '80%',
+    marginTop: _.sm
+  },
   l: {
-    width: 14,
-    height: 14,
-    marginRight: 4,
+    width: 18,
+    height: 18,
+    marginRight: 6,
     borderRadius: 4,
-    borderWidth: _.hairlineWidth,
+    borderWidth: 1,
     borderColor: _.colorBorder,
     overflow: 'hidden'
   },

diff --git a/src/screens/user/sponsor/component/item/index.tsx b/src/screens/user/sponsor/component/item/index.tsx
@@ -2,13 +2,14 @@
  * @Author: czy0729
  * @Date: 2019-11-27 21:50:42
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-02-10 13:52:20
+ * @Last Modified time: 2024-09-10 13:39:10
  */
 import React from 'react'
 import { View } from 'react-native'
 import { Flex, Text, Touchable, UserStatus } from '@components'
 import { Avatar } from '@_'
 import { _ } from '@stores'
+import { HTMLDecode } from '@utils'
 import { ob } from '@utils/decorators'
 import { IMG_DEFAULT_AVATAR } from '@constants'
 import { ViewStyle } from '@types'
@@ -85,7 +86,7 @@ function Item({ w, h, x, y, data, percent, price, isFilter, onPress, onLongPress
                       : IMG_DEFAULT_AVATAR
                   }
                   size={avatarSize}
-                  radius={avatarSize * 0.36}
+                  radius={Math.floor(avatarSize * 0.28)}
                   borderWidth={0}
                 />
               </UserStatus>
@@ -101,7 +102,7 @@ function Item({ w, h, x, y, data, percent, price, isFilter, onPress, onLongPress
               align='center'
               selectable={false}
             >
-              {USERS_MAP[data]?.n}
+              {HTMLDecode(USERS_MAP[data]?.n)}
             </Text>
           </Flex>
         </Flex>

diff --git a/src/screens/user/sponsor/component/list-item/index.tsx b/src/screens/user/sponsor/component/list-item/index.tsx
@@ -2,19 +2,21 @@
  * @Author: czy0729
  * @Date: 2023-01-07 21:53:19
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-02-10 13:54:19
+ * @Last Modified time: 2024-09-10 13:39:23
  */
 import React from 'react'
 import { Flex, Text, UserStatus } from '@components'
 import { Avatar } from '@_'
 import { _ } from '@stores'
+import { HTMLDecode } from '@utils'
 import { obc } from '@utils/decorators'
 import { IMG_DEFAULT_AVATAR } from '@constants'
+import { NavigationProps } from '@types'
 import { USERS_MAP } from '../../ds'
 import { COMPONENT } from './ds'
 import { styles } from './styles'
 
-function ListItem({ item }, { navigation }) {
+function ListItem({ item }, { navigation }: NavigationProps) {
   const data = USERS_MAP[item.data]
   const userId = item.data
   return (
@@ -30,7 +32,7 @@ function ListItem({ item }, { navigation }) {
       </UserStatus>
       <Flex.Item style={_.ml.sm}>
         <Text size={12} bold>
-          {data?.n}
+          {HTMLDecode(data?.n)}
         </Text>
         <Text size={10} type='sub'>
           @{userId}

diff --git a/src/screens/user/sponsor/component/list/index.tsx b/src/screens/user/sponsor/component/list/index.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2023-01-07 17:27:06
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-02-10 13:53:46
+ * @Last Modified time: 2024-09-10 11:42:37
  */
 import React from 'react'
 import { Text } from '@components'

diff --git a/src/screens/user/sponsor/ds.ts b/src/screens/user/sponsor/ds.ts
@@ -2,28 +2,21 @@
  * @Author: czy0729
  * @Date: 2022-09-07 14:38:45
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-09-09 20:39:22
+ * @Last Modified time: 2024-09-10 12:10:48
  */
 import { desc } from '@utils'
 import advanceJSON from '@assets/json/advance.json'
 import USERS_MAP from '@assets/json/user.json'
-import { Loaded } from '@types'
 
 export { USERS_MAP }
 
 export const COMPONENT = 'Sponsor'
 
-export const NAMESPACE = `Scree${COMPONENT}`
-
-export const STATE = {
-  list: true,
-  _loaded: false as Loaded
-}
-
-export const LIST = Object.keys(advanceJSON)
-  .map(key => {
-    const item = advanceJSON[key]
-    if (item == 1) {
+export const LIST = Object.entries(advanceJSON)
+  .filter(([, value]) => !(value != 1 && typeof value !== 'string'))
+  .map(([key, value]) => {
+    const item = String(value)
+    if (item === '1') {
       return {
         data: key,
         weight: 10

diff --git a/src/screens/user/sponsor/header/index.tsx b/src/screens/user/sponsor/header/index.tsx
@@ -2,18 +2,19 @@
  * @Author: czy0729
  * @Date: 2022-09-07 15:16:01
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-02-10 13:55:23
+ * @Last Modified time: 2024-09-10 13:59:29
  */
 import React from 'react'
 import { Flex, Header as HeaderComp } from '@components'
 import { IconTouchable } from '@_'
 import { _ } from '@stores'
 import { obc } from '@utils/decorators'
+import { t } from '@utils/fetch'
 import { Ctx } from '../types'
 import { timeDiff } from '../utils'
 import { COMPONENT } from './ds'
 
-function Header(props, { $, navigation }: Ctx) {
+function Header(_props, { $, navigation }: Ctx) {
   const { list } = $.state
   return (
     <HeaderComp
@@ -43,6 +44,8 @@ function Header(props, { $, navigation }: Ctx) {
                   '数据不定期更新，感谢各位的支持！'
                 ]
               })
+
+              t('赞助者.提示')
             }}
           />
         </Flex>

diff --git a/src/screens/user/sponsor/index.tsx b/src/screens/user/sponsor/index.tsx
@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-09-07 00:07:02
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-05-05 16:43:30
+ * @Last Modified time: 2024-09-10 11:37:06
  */
 import React from 'react'
 import { Component, Page } from '@components'
@@ -15,7 +15,7 @@ import Store from './store'
 import { Ctx } from './types'
 
 /** 赞助者 */
-const Sponsor = (props, { $, navigation }: Ctx) => {
+const Sponsor = (_props, { $, navigation }: Ctx) => {
   useRunAfter(() => {
     $.init()
   })