diff --git a/.prettierrc.js b/.prettierrc.js
index 5c711e3..1e664c9 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -6,4 +6,5 @@ module.exports = {
   semi: false,
   trailingComma: 'all',
   endOfLine: 'auto',
+  plugins: ['prettier-plugin-tailwindcss'],
 }
diff --git a/assets/bbb.webp b/assets/bbb.webp
new file mode 100644
index 0000000..cf04c44
Binary files /dev/null and b/assets/bbb.webp differ
diff --git a/assets/ccc.webp b/assets/ccc.webp
new file mode 100644
index 0000000..750caba
Binary files /dev/null and b/assets/ccc.webp differ
diff --git a/package-lock.json b/package-lock.json
index fa176f7..34ad5c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,7 +78,8 @@
         "open": "8.4.2",
         "postcss": "^8.4.38",
         "postcss-custom-properties": "^13.3.6",
-        "prettier": "^3.1.1",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.8",
         "rimraf": "^5.0.5",
         "semver": "^7.5.1",
         "tailwindcss": "^3.4.1",
@@ -18391,9 +18392,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -18417,6 +18418,84 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz",
+      "integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
diff --git a/package.json b/package.json
index 556dca4..0fea715 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,8 @@
     "open": "8.4.2",
     "postcss": "^8.4.38",
     "postcss-custom-properties": "^13.3.6",
-    "prettier": "^3.1.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "rimraf": "^5.0.5",
     "semver": "^7.5.1",
     "tailwindcss": "^3.4.1",
diff --git a/src/components/Additional.tsx b/src/components/Additional.tsx
index 3760065..f4d7ba2 100644
--- a/src/components/Additional.tsx
+++ b/src/components/Additional.tsx
@@ -49,12 +49,12 @@ export function Additional(props: { additional?: AdditionalType | null }) {
       .join('  ')
     url = additional.ugc.jump_url
     additionalContent = (
-      <View className="gap-2.5 flex-row pr-2.5">
+      <View className="flex-row gap-2.5 pr-2.5">
         <Image
           source={{ uri: parseImgUrl(additional.ugc.cover, 200, 100) }}
-          className="w-24 min-h-12 rounded"
+          className="min-h-12 w-24 rounded"
         />
-        <View className="shrink flex-1 gap-1">
+        <View className="flex-1 shrink gap-1">
           <Text numberOfLines={1}>{additional.ugc.title}</Text>
           {text ? <Text numberOfLines={2}>{text}</Text> : null}
         </View>
@@ -72,12 +72,12 @@ export function Additional(props: { additional?: AdditionalType | null }) {
       .join('  ')
     url = additional.common.jump_url
     additionalContent = (
-      <View className="gap-2.5 flex-row pr-2.5">
+      <View className="flex-row gap-2.5 pr-2.5">
         <Image
           source={{ uri: parseImgUrl(additional.common.cover, 200, 100) }}
-          className="w-24 min-h-12 rounded"
+          className="min-h-12 w-24 rounded"
         />
-        <View className="shrink flex-1 gap-1">
+        <View className="flex-1 shrink gap-1">
           <Text numberOfLines={1}>{additional.common.title}</Text>
           {text ? (
             <Text numberOfLines={2} className="text-sm">
@@ -166,7 +166,7 @@ export function Additional(props: { additional?: AdditionalType | null }) {
   return (
     <Foo
       {...linkProp}
-      className={`border-l flex-1 pl-2 mt-5 py-1 ${colors.gray6.border}`}>
+      className={`mt-5 flex-1 border-l py-1 pl-2 ${colors.gray6.border}`}>
       {additionalContent}
     </Foo>
   )
diff --git a/src/components/Comment.tsx b/src/components/Comment.tsx
index 856fc49..46ba111 100644
--- a/src/components/Comment.tsx
+++ b/src/components/Comment.tsx
@@ -82,7 +82,7 @@ function CommentText(props: {
             <Image
               key={key}
               source={{ uri: parseImgUrl(node.url) }}
-              className="w-[18px] h-[18px] mx-1"
+              className="mx-1 h-[18px] w-[18px]"
             />
           )
         }
@@ -233,7 +233,7 @@ function CommentBlock(props: {
       style={props.style}>
       <CommentItem comment={comment} />
       {comment.replies?.length ? (
-        <View className="p-2 mt-1 rounded gap-1 opacity-90 flex-1 shrink-0 border-gray-500 bg-neutral-200 dark:bg-neutral-900">
+        <View className="mt-1 flex-1 shrink-0 gap-1 rounded border-gray-500 bg-neutral-200 p-2 opacity-90 dark:bg-neutral-900">
           {comment.replies.map((reply) => {
             return <CommentItem key={reply.id} comment={reply} smallFont />
           })}
diff --git a/src/components/CommentList.tsx b/src/components/CommentList.tsx
index 342b650..10cebc0 100644
--- a/src/components/CommentList.tsx
+++ b/src/components/CommentList.tsx
@@ -17,7 +17,7 @@ function Loading() {
         .fill(0)
         .map((_, i) => {
           return (
-            <View className="flex-1 gap-1 mb-5" key={i}>
+            <View className="mb-5 flex-1 gap-1" key={i}>
               <Skeleton animation="wave" width={'100%' as any} height={16} />
               {i % 2 ? (
                 <Skeleton animation="wave" width={'100%' as any} height={16} />
@@ -63,15 +63,15 @@ export default function CommentList(
         ListHeaderComponent={
           <View className="flex-1 shrink-0">
             {props.children}
-            <View className="my-5 pb-1 border-b-[0.5px] border-gray-400 flex-row justify-between">
-              <View className="flex-row items-center mr-1">
+            <View className="my-5 flex-row justify-between border-b-[0.5px] border-gray-400 pb-1">
+              <View className="mr-1 flex-row items-center">
                 <Icon
                   name="comment-text-outline"
                   type="material-community"
                   size={14}
                   color={tw(colors.gray6.text).color}
                 />
-                <Text className={`text-xs mr-3 px-1 ${colors.gray6.text}`}>
+                <Text className={`mr-3 px-1 text-xs ${colors.gray6.text}`}>
                   {allCount
                     ? `${allCount}条评论`
                     : isLoading
@@ -79,7 +79,7 @@ export default function CommentList(
                       : '暂无评论'}
                 </Text>
               </View>
-              <View className="ml-2 mr-1 flex-row gap-2 items-center">
+              <View className="ml-2 mr-1 flex-row items-center gap-2">
                 {props.dividerRight}
                 <TouchableOpacity
                   activeOpacity={0.7}
@@ -98,14 +98,14 @@ export default function CommentList(
           isLoading ? (
             <Loading />
           ) : (
-            <Text className="text-center text-base my-10">
+            <Text className="my-10 text-center text-base">
               {error ? '评论已关闭或加载失败' : '暂无评论'}
             </Text>
           )
         }
         ListFooterComponent={
           comments?.length ? (
-            <Text className={`${colors.gray6.text} text-xs text-center`}>
+            <Text className={`${colors.gray6.text} text-center text-xs`}>
               {isValidating ? '正在加载...' : '暂无更多'}
             </Text>
           ) : null
diff --git a/src/components/ErrorFallback.tsx b/src/components/ErrorFallback.tsx
index 25a2267..54310f2 100644
--- a/src/components/ErrorFallback.tsx
+++ b/src/components/ErrorFallback.tsx
@@ -22,7 +22,7 @@ export default function ErrorFallback(props: { message?: string }) {
       <Text className="mx-7 text-base text-red-600">
         非常抱歉，应用发生了未知错误
         {'\n\n'}
-        <Text className="italic text-xs">{props.message || 'N/A'}</Text>
+        <Text className="text-xs italic">{props.message || 'N/A'}</Text>
         {'\n\n'}
         我们会处理这个错误，感谢您的理解和支持
         {'\n\n'}
diff --git a/src/components/ImagesView.tsx b/src/components/ImagesView.tsx
index 30bbc9c..5133d19 100644
--- a/src/components/ImagesView.tsx
+++ b/src/components/ImagesView.tsx
@@ -47,21 +47,21 @@ function ImagesView() {
       fullScreen
       overlayStyle={tw('p-0 m-0')}
       onBackdropPress={onClose}>
-      <View className="flex-1 relative">
-        <View className="w-full justify-center absolute top-6 z-10">
-          <Text className="text-center text-white text-lg" style={textShadow}>
+      <View className="relative flex-1">
+        <View className="absolute top-6 z-10 w-full justify-center">
+          <Text className="text-center text-lg text-white" style={textShadow}>
             {current + 1} / {images.length}
           </Text>
         </View>
-        <View className="w-full justify-end flex-row items-center absolute top-5 z-10">
+        <View className="absolute top-5 z-10 w-full flex-row items-center justify-end">
           <Text
-            className="text-right font-semibold text-white text-2xl mr-4"
+            className="mr-4 text-right text-2xl font-semibold text-white"
             onPress={onOpen}
             style={textShadow}>
             ⇩
           </Text>
           <Text
-            className="text-right text-white text-2xl mr-4"
+            className="mr-4 text-right text-2xl text-white"
             onPress={onClose}
             style={textShadow}>
             ✕
@@ -99,14 +99,14 @@ function ImagesView() {
               imageView = (
                 <Image
                   source={require('../../assets/loading2.gif')}
-                  className="w-24 h-24"
+                  className="h-24 w-24"
                 />
               )
             }
             return (
               <View
                 key={v.url}
-                className="flex-1 bg-black justify-center items-center">
+                className="flex-1 items-center justify-center bg-black">
                 {imageView}
               </View>
             )
diff --git a/src/components/ReplyList.tsx b/src/components/ReplyList.tsx
index 030e9bb..2636f29 100644
--- a/src/components/ReplyList.tsx
+++ b/src/components/ReplyList.tsx
@@ -39,7 +39,7 @@ export default function ReplyList() {
       }}
       isVisible={!!repliesInfo}>
       <View className="h-[68vh] bg-neutral-100 dark:bg-neutral-700">
-        <View className="py-2 px-3 flex-row items-center border-gray-500 justify-between">
+        <View className="flex-row items-center justify-between border-gray-500 px-3 py-2">
           <Text className="text-base font-semibold">
             评论详情
             {typeof allCount === 'number'
@@ -51,7 +51,7 @@ export default function ReplyList() {
           <Icon
             name="close"
             size={20}
-            className="p-1 rounded-sm"
+            className="rounded-sm p-1"
             onPress={handleClose}
           />
         </View>
@@ -61,7 +61,7 @@ export default function ReplyList() {
             keyExtractor={(v) => `${v.id}@${v.root}`}
             renderItem={({ item }: { item: ReplyItemType }) => {
               return (
-                <View className="px-5 mb-2">
+                <View className="mb-2 px-5">
                   <CommentItem comment={item} smallFont={false} />
                 </View>
               )
@@ -69,21 +69,21 @@ export default function ReplyList() {
             estimatedItemSize={30}
             ListHeaderComponent={
               root ? (
-                <View className="border-b-[18px] p-4 border-b-neutral-300 dark:border-b-neutral-700 mb-5">
+                <View className="mb-5 border-b-[18px] border-b-neutral-300 p-4 dark:border-b-neutral-700">
                   <CommentItem comment={root} />
                 </View>
               ) : null
             }
             ListEmptyComponent={
               isLoading ? (
-                <View className="flex-1 h-40 justify-center items-center">
+                <View className="h-40 flex-1 items-center justify-center">
                   <ActivityIndicator
                     size={50}
                     color={tw(colors.secondary.text).color}
                   />
                 </View>
               ) : (
-                <Text className="text-center text-base my-10">
+                <Text className="my-10 text-center text-base">
                   {error ? '评论已关闭或加载失败' : '暂无评论'}
                 </Text>
               )
@@ -91,7 +91,7 @@ export default function ReplyList() {
             ListFooterComponent={
               replies?.length ? (
                 <Text
-                  className={`${colors.gray6.text} text-xs text-center mt-1`}>
+                  className={`${colors.gray6.text} mt-1 text-center text-xs`}>
                   {isValidating ? '正在加载...' : '暂无更多'}
                 </Text>
               ) : null
diff --git a/src/components/RichTexts.tsx b/src/components/RichTexts.tsx
index 1ddef70..70b5382 100644
--- a/src/components/RichTexts.tsx
+++ b/src/components/RichTexts.tsx
@@ -35,7 +35,7 @@ function RichTexts(props: {
   let key = 0
   const fontSize = props.fontSize || 16
   const Topic = props.topic ? (
-    <View className="flex-row items-center mb-3">
+    <View className="mb-3 flex-row items-center">
       <Icon
         name="hashtag"
         type="fontisto"
@@ -106,7 +106,7 @@ function RichTexts(props: {
         <Image
           key={key++}
           source={{ uri: parseImgUrl(node.emoji.icon_url) }}
-          className="w-5 h-5"
+          className="h-5 w-5"
         />,
       )
     } else if (node.type === HandledRichTextType.RICH_TEXT_NODE_TYPE_TOPIC) {
@@ -260,7 +260,7 @@ function RichTexts(props: {
       style={props.style}>
       {Topic}
       <Text
-        className="flex-row flex-wrap items-center flex-1"
+        className="flex-1 flex-row flex-wrap items-center"
         {...props.textProps}
         onTextLayout={(evt) => {
           setLines(evt.nativeEvent.lines.length)
diff --git a/src/components/VideoItem.tsx b/src/components/VideoItem.tsx
index 21a90a2..09c4a3c 100644
--- a/src/components/VideoItem.tsx
+++ b/src/components/VideoItem.tsx
@@ -81,34 +81,34 @@ function VideoListItem({
           tag: video.tag,
         })
       }}
-      className="flex-row min-h-28 px-2 py-2 mb-1">
-      <View className="flex-[3] mr-3 relative justify-center content-center">
+      className="mb-1 min-h-28 flex-row px-2 py-2">
+      <View className="relative mr-3 flex-[3] content-center justify-center">
         <Image
-          className="w-full rounded flex-1  h-auto"
+          className="h-auto w-full flex-1 rounded"
           source={{ uri: parseImgUrl(video.cover, 480, 300) }}
           placeholder={require('../../assets/video-loading.png')}
         />
-        <View className="absolute px-1 py-[1px] bg-gray-900/70 bottom-0 left-0 rounded-sm m-1">
+        <View className="absolute bottom-0 left-0 m-1 rounded-sm bg-gray-900/70 px-1 py-[1px]">
           <Text className="text-xs font-thin text-white">
             {typeof video.duration === 'string'
               ? parseDurationStr(video.duration)
               : parseDuration(video.duration)}
           </Text>
         </View>
-        <View className="absolute px-1 py-[1px] top-0 rounded-sm m-1 bg-gray-900/70">
+        <View className="absolute top-0 m-1 rounded-sm bg-gray-900/70 px-1 py-[1px]">
           <Text className="text-xs font-thin text-white">
             {parseDate(video.date)}
           </Text>
         </View>
         {isDefined(video.danmaku) ? (
-          <View className="absolute px-1 py-[1px] bottom-0 right-0 m-1 rounded-sm bg-gray-900/70">
+          <View className="absolute bottom-0 right-0 m-1 rounded-sm bg-gray-900/70 px-1 py-[1px]">
             <Text className="text-xs font-thin text-white">
               {parseNumber(video.danmaku)}弹
             </Text>
           </View>
         ) : null}
         {'watchProgress' in video ? (
-          <View className="absolute px-1 py-[1px] bottom-0 right-0 m-1 rounded-sm bg-gray-900/70">
+          <View className="absolute bottom-0 right-0 m-1 rounded-sm bg-gray-900/70 px-1 py-[1px]">
             <Text className="text-xs text-white">
               {video.watchProgress > 99
                 ? '已看完 '
@@ -119,7 +119,7 @@ function VideoListItem({
       </View>
       <View className="flex-[4] justify-between">
         <Text
-          className="flex-1 text-base mb-3"
+          className="mb-3 flex-1 text-base"
           numberOfLines={2}
           ellipsizeMode="tail">
           {extractTextWithEmTags(video.title, tw(colors.secondary.text))}
@@ -133,7 +133,7 @@ function VideoListItem({
             {video.name}
           </Text>
           {isDefined(video.play) ? (
-            <View className="flex-row shrink-0 min-w-20 items-center gap-x-3 flex-wrap">
+            <View className="min-w-20 shrink-0 flex-row flex-wrap items-center gap-x-3">
               <View className="flex-row items-center gap-1">
                 <Icon
                   name="play-circle-outline"
@@ -144,7 +144,7 @@ function VideoListItem({
                   {parseNumber(video.play)}
                 </Text>
               </View>
-              <View className="flex-row gap-1 items-center">
+              <View className="flex-row items-center gap-1">
                 <Icon
                   name="thumb-up-off-alt"
                   color={tw(colors.gray6.text).color}
diff --git a/src/routes/About/Banner.tsx b/src/routes/About/Banner.tsx
index 613b18f..3281a4c 100644
--- a/src/routes/About/Banner.tsx
+++ b/src/routes/About/Banner.tsx
@@ -19,8 +19,8 @@ function Header() {
           className="aspect-[33/10] h-auto w-[85%]"
         />
       </Pressable>
-      <View className="flex-row items-center justify-between mb-2">
-        <Text className="text-2xl shrink" numberOfLines={2}>
+      <View className="mb-2 flex-row items-center justify-between">
+        <Text className="shrink text-2xl" numberOfLines={2}>
           一款简单的B站浏览App
         </Text>
         <Button
diff --git a/src/routes/About/Feedback.tsx b/src/routes/About/Feedback.tsx
index d00093b..56e8712 100644
--- a/src/routes/About/Feedback.tsx
+++ b/src/routes/About/Feedback.tsx
@@ -1,4 +1,6 @@
 import { BottomSheet, Button, Card, Dialog, Input, Text } from '@rneui/themed'
+import { UserFeedback } from '@sentry/react-native'
+import * as Sentry from '@sentry/react-native'
 import React from 'react'
 import { Linking, View } from 'react-native'
 
@@ -8,7 +10,7 @@ import { useStore } from '@/store'
 
 import { githubLink } from '../../constants'
 import { showToast } from '../../utils'
-import { reportUserFeedback } from '../../utils/report'
+// import { reportUserFeedback } from '../../utils/report'
 import TextAction from './TextAction'
 
 export default React.memo(Feedback)
@@ -34,7 +36,14 @@ function Feedback() {
       hideFeedback()
       return
     }
-    reportUserFeedback(message, feedbackContactRef.current)
+    const userFeedback: UserFeedback = {
+      event_id: '',
+      name: feedbackContactRef.current,
+      email: feedbackContactRef.current || 'N/A',
+      comments: message,
+    }
+    Sentry.captureUserFeedback(userFeedback)
+    // reportUserFeedback(message, feedbackContactRef.current)
     hideFeedback()
     showToast('感谢反馈 😊')
   }
@@ -123,7 +132,7 @@ function Feedback() {
             </Text>
             <Text />
             <Text className="text-base">⚠️ 切勿频繁刷新数据！🙏</Text>
-            <View className="items-end my-3">
+            <View className="my-3 items-end">
               <Button
                 size="sm"
                 onPress={() => {
diff --git a/src/routes/About/SortCate.tsx b/src/routes/About/SortCate.tsx
index ebacf2c..8401b6a 100644
--- a/src/routes/About/SortCate.tsx
+++ b/src/routes/About/SortCate.tsx
@@ -32,7 +32,7 @@ function SortCate() {
       }}>
       <ListItem
         containerStyle={tw('flex-wrap p-0 flex-row px-1 bg-transparent')}>
-        <View className="flex-row flex-wrap border-b-[0.5px] flex-1 w-full gap-x-3 border-b-gray-400	">
+        <View className="w-full flex-1 flex-row flex-wrap gap-x-3 border-b-[0.5px] border-b-gray-400">
           {sortedRankList.map((cate) => {
             return (
               <Chip
@@ -52,13 +52,13 @@ function SortCate() {
             )
           })}
           {sortedRankList.length === 0 && (
-            <Text className={`flex-1 mb-1 ${colors.gray6.text}`}>
+            <Text className={`mb-1 flex-1 ${colors.gray6.text}`}>
               {' '}
               点击名称调整顺序
             </Text>
           )}
         </View>
-        <View className="flex-row flex-wrap gap-x-3 mt-5">
+        <View className="mt-5 flex-row flex-wrap gap-x-3">
           {unsortedRankList.map((cate) => {
             return (
               <Chip
diff --git a/src/routes/About/Statement.tsx b/src/routes/About/Statement.tsx
index e01e10f..88b1790 100644
--- a/src/routes/About/Statement.tsx
+++ b/src/routes/About/Statement.tsx
@@ -65,7 +65,7 @@ function Statement() {
             </Text>
             <Text />
             <Text className="text-base">⚠️ 切勿频繁刷新数据！🙏</Text>
-            <View className="items-end my-3">
+            <View className="my-3 items-end">
               <Button
                 size="sm"
                 onPress={() => {
diff --git a/src/routes/Collect/index.tsx b/src/routes/Collect/index.tsx
index df35b66..84d2e11 100644
--- a/src/routes/Collect/index.tsx
+++ b/src/routes/Collect/index.tsx
@@ -87,7 +87,7 @@ function CollectList() {
       persistentScrollbar
       estimatedItemSize={100}
       ListEmptyComponent={
-        <View className="flex-1 gap-2 my-16">
+        <View className="my-16 flex-1 gap-2">
           {$collectedVideos.length === 0 ? (
             <Text className="text-center text-base">
               暂无收藏{'\n\n'}在视频播放页点击⭐收藏按钮
@@ -99,7 +99,7 @@ function CollectList() {
       }
       ListFooterComponent={
         collectVideos.length ? (
-          <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
+          <Text className={`${colors.gray6.text} my-2 text-center text-xs`}>
             暂无更多
           </Text>
         ) : null
diff --git a/src/routes/Dynamic/CommonItem.tsx b/src/routes/Dynamic/CommonItem.tsx
index c0df52f..3d129d6 100644
--- a/src/routes/Dynamic/CommonItem.tsx
+++ b/src/routes/Dynamic/CommonItem.tsx
@@ -85,10 +85,10 @@ export function CommonContent(props: {
       {cover ? (
         <Image
           source={{ uri: parseImgUrl(cover, 240, 150) }}
-          className="aspect-[8/5] rounded h-auto w-[45%]"
+          className="aspect-[8/5] h-auto w-[45%] rounded"
         />
       ) : null}
-      <Foo className="gap-2 flex-1" {...linkProp}>
+      <Foo className="flex-1 gap-2" {...linkProp}>
         {title ? (
           <Text
             className={clsx([
diff --git a/src/routes/Dynamic/DynamicItem.tsx b/src/routes/Dynamic/DynamicItem.tsx
index 0a10247..87604f5 100644
--- a/src/routes/Dynamic/DynamicItem.tsx
+++ b/src/routes/Dynamic/DynamicItem.tsx
@@ -41,10 +41,10 @@ export default function DynamicItem({ item }: { item: DynamicItemAllType }) {
   }
   // https://m.bilibili.com/dynamic/710533241871794180?spm_id_from=333.999.0.0
   return (
-    <View className="flex-1 py-5 px-3 border-b-[0.5px] border-b-gray-400">
+    <View className="flex-1 border-b-[0.5px] border-b-gray-400 px-3 py-5">
       {item.top ? (
         <Text
-          className={`self-start px-2 text-left border mb-2 ${colors.secondary.border} rounded flex-1 font-thin text-sm ${colors.secondary.text}`}>
+          className={`mb-2 self-start border px-2 text-left ${colors.secondary.border} flex-1 rounded text-sm font-thin ${colors.secondary.text}`}>
           置顶
         </Text>
       ) : null}
diff --git a/src/routes/Dynamic/DynamicStat.tsx b/src/routes/Dynamic/DynamicStat.tsx
index 4782eb5..5d7d013 100644
--- a/src/routes/Dynamic/DynamicStat.tsx
+++ b/src/routes/Dynamic/DynamicStat.tsx
@@ -21,7 +21,7 @@ export default function DynamicStat(props: {
     fontSize: 13,
   }
   return (
-    <View className="flex-row shrink-0 min-w-20 items-center gap-5 mt-3">
+    <View className="mt-3 min-w-20 shrink-0 flex-row items-center gap-5">
       <View className="flex-row items-center gap-1">
         <Icon name="date-range" size={15} color={gray} />
         <Text style={textStyle}>{props.date}</Text>
diff --git a/src/routes/Dynamic/ForwardItem.tsx b/src/routes/Dynamic/ForwardItem.tsx
index 480adfc..14077e2 100644
--- a/src/routes/Dynamic/ForwardItem.tsx
+++ b/src/routes/Dynamic/ForwardItem.tsx
@@ -37,7 +37,7 @@ export default function ForwardItem(props: {
   if (payload.type === HandledForwardTypeEnum.DYNAMIC_TYPE_AV) {
     if (typeof payload.video === 'string') {
       forwardContent = (
-        <View className="flex-col flex-1">
+        <View className="flex-1 flex-col">
           <Text className="font-bold">视频：</Text>
           <Text>{payload.video}</Text>
         </View>
@@ -45,11 +45,11 @@ export default function ForwardItem(props: {
     } else {
       const { title, cover, stat } = payload.video
       forwardContent = (
-        <View className="flex-col flex-1">
+        <View className="flex-1 flex-col">
           {forwardRichTextContent}
           <View className="flex-row">
             <Image
-              className="w-[45%] aspect-[8/5] h-auto mr-3 rounded"
+              className="mr-3 aspect-[8/5] h-auto w-[45%] rounded"
               source={{ uri: parseImgUrl(cover, 240, 150) }}
             />
             <View className="flex-1">
@@ -73,11 +73,11 @@ export default function ForwardItem(props: {
     forwardContent = (
       <View className="flex-1 flex-col">
         {forwardRichTextContent}
-        <View className="flex-row overflow-hidden gap-2">
+        <View className="flex-row gap-2 overflow-hidden">
           {payload.images.map((img, i) => {
             return (
               <Image
-                className="h-24 w-auto mt-2 rounded"
+                className="mt-2 h-24 w-auto rounded"
                 style={{ aspectRatio: img.ratio }}
                 key={img.src + i}
                 source={{ uri: parseImgUrl(img.src, 240) }}
@@ -129,10 +129,10 @@ export default function ForwardItem(props: {
         topic={item.topic}
         textProps={{ numberOfLines: 3 }}
       />
-      <View className="flex-1 mb-2 rounded p-3 overflow-hidden bg-stone-200 dark:bg-stone-900">
+      <View className="mb-2 flex-1 overflow-hidden rounded bg-stone-200 p-3 dark:bg-stone-900">
         {payload.name && payload.mid !== item.mid ? (
           <Pressable
-            className="flex-row items-center mb-2"
+            className="mb-2 flex-row items-center"
             onPress={() => {
               navigation.push('Dynamic', {
                 user: {
@@ -151,7 +151,7 @@ export default function ForwardItem(props: {
                 rounded
               />
             ) : null}
-            <Text className={`text-base ml-2 ${colors.primary.text}`}>
+            <Text className={`ml-2 text-base ${colors.primary.text}`}>
               {payload.name}
             </Text>
           </Pressable>
diff --git a/src/routes/Dynamic/Header.tsx b/src/routes/Dynamic/Header.tsx
index dcf0e4f..196c972 100644
--- a/src/routes/Dynamic/Header.tsx
+++ b/src/routes/Dynamic/Header.tsx
@@ -48,7 +48,7 @@ export function HeaderLeft(props: { scrollTop: () => void }) {
   const followed = dynamicUser?.mid && dynamicUser.mid in _followedUpsMap
   const isBlackUp = dynamicUser?.mid && `_${dynamicUser.mid}` in $blackUps
   return (
-    <View className="flex-row flex-none items-center mr-[110px] left-[-12px]">
+    <View className="left-[-12px] mr-[110px] flex-none flex-row items-center">
       {dynamicUser?.face ? (
         <View className="relative">
           <Avatar
@@ -61,7 +61,7 @@ export function HeaderLeft(props: { scrollTop: () => void }) {
             }}
           />
           {sex ? (
-            <Text className="text-xs opacity-80 absolute top-1 right-[-8px]">
+            <Text className="absolute right-[-8px] top-1 text-xs opacity-80">
               {sex}
             </Text>
           ) : null}
@@ -76,8 +76,8 @@ export function HeaderLeft(props: { scrollTop: () => void }) {
                   })
                 }
               }}
-              className="inset-0 absolute justify-center items-center w-10 h-10 rounded-full bg-neutral-950/60">
-              <Text className={'text-center text-xs text-teal-300 font-bold'}>
+              className="absolute inset-0 h-10 w-10 items-center justify-center rounded-full bg-neutral-950/60">
+              <Text className={'text-center text-xs font-bold text-teal-300'}>
                 直播中
               </Text>
             </Pressable>
@@ -85,7 +85,7 @@ export function HeaderLeft(props: { scrollTop: () => void }) {
         </View>
       ) : null}
 
-      <View className="flex-1 ml-3 items-center flex-wrap flex-row">
+      <View className="ml-3 flex-1 flex-row flex-wrap items-center">
         <Text
           className={clsx(
             followed && [colors.secondary.text, 'font-bold'],
diff --git a/src/routes/Dynamic/VideoItem.tsx b/src/routes/Dynamic/VideoItem.tsx
index 998c9d5..6a4d2be 100644
--- a/src/routes/Dynamic/VideoItem.tsx
+++ b/src/routes/Dynamic/VideoItem.tsx
@@ -96,14 +96,14 @@ export default function VideoItem(props: {
       <RichTexts idStr={props.item.id} nodes={nodes} topic={props.item.topic} />
 
       <View className="flex-1 flex-row">
-        <View className="w-[45%] mr-3 justify-center content-center">
+        <View className="mr-3 w-[45%] content-center justify-center">
           <Image
-            className="w-full rounded aspect-[8/5] h-auto"
+            className="aspect-[8/5] h-auto w-full rounded"
             source={{ uri: parseImgUrl(cover, 480, 300) }}
             loadingIndicatorSource={require('../../../assets/video-loading.png')}
           />
           <Image
-            className="w-14 h-12 absolute self-center opacity-80"
+            className="absolute h-12 w-14 self-center opacity-80"
             source={require('../../../assets/play.png')}
           />
           {watchedInfo ? (
@@ -113,7 +113,7 @@ export default function VideoItem(props: {
             />
           ) : null}
           <View
-            className={`absolute px-1 py-[1px] bg-gray-900/70 ${watchedInfo ? 'bottom-1' : 'bottom-0'} left-0 rounded-sm m-1`}>
+            className={`absolute bg-gray-900/70 px-1 py-[1px] ${watchedInfo ? 'bottom-1' : 'bottom-0'} left-0 m-1 rounded-sm`}>
             <Text className="text-xs font-thin text-white">{duration}</Text>
           </View>
           {/* <View className="absolute px-1 py-[1px] top-0 rounded-sm m-1 bg-gray-900/70">
@@ -125,21 +125,21 @@ export default function VideoItem(props: {
           </View>
         </View>
         <View className="flex-1 justify-around">
-          <Text className="flex-1 text-base mb-3" numberOfLines={3}>
+          <Text className="mb-3 flex-1 text-base" numberOfLines={3}>
             {title}
           </Text>
-          <View className="flex-row shrink-0 min-w-20 items-center gap-x-3 gap-y-1 flex-wrap">
+          <View className="min-w-20 shrink-0 flex-row flex-wrap items-center gap-x-3 gap-y-1">
             {play === undefined ? null : (
               <View className="flex-row items-center gap-1">
                 <Icon name="play-circle-outline" size={15} color={gray} />
                 <Text style={textStyle}>{play}</Text>
               </View>
             )}
-            <View className="flex-row gap-1 items-center">
+            <View className="flex-row items-center gap-1">
               <Icon name="thumb-up-off-alt" size={15} color={gray} />
               <Text style={textStyle}>{parseNumber(likeCount)}</Text>
             </View>
-            <View className="flex-row gap-1 items-center">
+            <View className="flex-row items-center gap-1">
               <Icon name="date-range" size={15} color={gray} />
               <Text style={textStyle}>{date}</Text>
             </View>
diff --git a/src/routes/Dynamic/WordDrawItem.tsx b/src/routes/Dynamic/WordDrawItem.tsx
index b9ebfac..c96bd9a 100644
--- a/src/routes/Dynamic/WordDrawItem.tsx
+++ b/src/routes/Dynamic/WordDrawItem.tsx
@@ -34,7 +34,7 @@ export default function WordDrawItem(props: {
         const ImageCmp = (
           <Image
             key={img.src + i}
-            className="w-24 h-24 mr-1 rounded"
+            className="mr-1 h-24 w-24 rounded"
             source={{
               uri: parseImgUrl(img.src, 240),
             }}
@@ -64,7 +64,7 @@ export default function WordDrawItem(props: {
         ? width / 2 - 16
         : width / 2
   const imageList = (
-    <View className="flex-wrap flex-row gap-2 mb-5">
+    <View className="mb-5 flex-row flex-wrap gap-2">
       {images.map((img, i) => {
         const ImageCmp = (
           <Image
@@ -101,7 +101,7 @@ export default function WordDrawItem(props: {
         topic={topic}
         textProps={isDetail ? {} : { numberOfLines: 4 }}
       />
-      {title ? <Text className="font-bold text-base">{title}</Text> : null}
+      {title ? <Text className="text-base font-bold">{title}</Text> : null}
       {texts.length ? (
         <RichTexts
           idStr={id}
diff --git a/src/routes/Dynamic/index.tsx b/src/routes/Dynamic/index.tsx
index 85fcdbb..333dff1 100644
--- a/src/routes/Dynamic/index.tsx
+++ b/src/routes/Dynamic/index.tsx
@@ -29,7 +29,7 @@ function LoadingComp() {
         .fill(null)
         .map((_, i) => {
           return (
-            <View className="p-3 gap-4 my-2" key={i}>
+            <View className="my-2 gap-4 p-3" key={i}>
               {i % 2 === 0 ? (
                 <View className="gap-2">
                   <Skeleton
@@ -53,7 +53,7 @@ function LoadingComp() {
               ) : null}
               <View className="flex-row gap-3">
                 <Skeleton animation="pulse" width={'45%' as any} height={95} />
-                <View className="gap-3 justify-between flex-1">
+                <View className="flex-1 justify-between gap-3">
                   <Skeleton
                     animation="wave"
                     width={`${Math.floor(Math.random() * 81) + 10}%` as any}
@@ -136,7 +136,7 @@ function Dynamic({ route }: Props) {
       return null
     }
     return (
-      <Text className="text-sm mt-3 mb-5 text-center text-gray-500">
+      <Text className="mb-5 mt-3 text-center text-sm text-gray-500">
         {isReachingEnd ? '到底了~' : isValidating ? '加载中...' : ''}
       </Text>
     )
@@ -146,7 +146,7 @@ function Dynamic({ route }: Props) {
       return <Loading />
     }
     if (error) {
-      return <Text className="m-12 text-base text-center">加载动态失败</Text>
+      return <Text className="m-12 text-center text-base">加载动态失败</Text>
     }
     return (
       <View className="items-center py-24">
@@ -154,7 +154,7 @@ function Dynamic({ route }: Props) {
           source={require('../../../assets/empty.png')}
           className="aspect-square h-auto w-[40%]"
         />
-        <Text className="m-10 text-lg text-center">暂无动态</Text>
+        <Text className="m-10 text-center text-lg">暂无动态</Text>
       </View>
     )
   }
@@ -170,14 +170,14 @@ function Dynamic({ route }: Props) {
         estimatedItemSize={100}
         ListHeaderComponent={
           dynamicUser?.sign && dynamicUser?.sign !== '-' ? (
-            <View className="px-3 border-b-[0.5px] py-3 flex-row border-b-gray-400">
+            <View className="flex-row border-b-[0.5px] border-b-gray-400 px-3 py-3">
               <Icon
                 name="billboard"
                 type="material-community"
                 size={18}
                 color={tw(colors.gray6.text).color}
               />
-              <Text className="text-sm ml-2 shrink-0 flex-1 text-gray-600 dark:text-gray-400">
+              <Text className="ml-2 flex-1 shrink-0 text-sm text-gray-600 dark:text-gray-400">
                 {dynamicUser?.sign.trim()}
               </Text>
             </View>
diff --git a/src/routes/DynamicDetail/Header.tsx b/src/routes/DynamicDetail/Header.tsx
index f5ec83d..71cac33 100644
--- a/src/routes/DynamicDetail/Header.tsx
+++ b/src/routes/DynamicDetail/Header.tsx
@@ -37,7 +37,7 @@ function HeaderTitle() {
   const route = useRoute<RouteProp<RootStackParamList, 'DynamicDetail'>>()
   const { face, name } = route.params.detail
   return (
-    <View className="flex-row items-center gap-3 relative left-[-20px]">
+    <View className="relative left-[-20px] flex-row items-center gap-3">
       <Avatar
         size={33}
         rounded
diff --git a/src/routes/DynamicDetail/index.tsx b/src/routes/DynamicDetail/index.tsx
index c44e057..c7a82a0 100644
--- a/src/routes/DynamicDetail/index.tsx
+++ b/src/routes/DynamicDetail/index.tsx
@@ -41,8 +41,8 @@ function DynamicDetail({
         commentId={commentId}
         commentType={commentType}
         dividerRight={
-          <View className="flex-row shrink-0 min-w-20 gap-3 items-center text-gray-500">
-            <View className="flex-row gap-1 items-center">
+          <View className="min-w-20 shrink-0 flex-row items-center gap-3 text-gray-500">
+            <View className="flex-row items-center gap-1">
               <Icon
                 name="date-range"
                 size={15}
@@ -53,7 +53,7 @@ function DynamicDetail({
               </Text>
             </View>
             <Pressable
-              className="flex-row gap-1 items-center"
+              className="flex-row items-center gap-1"
               onPress={() => {
                 showToast(`${likeCount} 点赞`)
               }}>
diff --git a/src/routes/Follow/FollowItem.tsx b/src/routes/Follow/FollowItem.tsx
index e3fef91..997dd78 100644
--- a/src/routes/Follow/FollowItem.tsx
+++ b/src/routes/Follow/FollowItem.tsx
@@ -160,7 +160,7 @@ function FollowItem(props: { item: UpInfo; index?: number }) {
       onLongPress={() => {
         setOverlayButtons(buttons())
       }}
-      className="items-center mb-6 mx-1 flex-1"
+      className="mx-1 mb-6 flex-1 items-center"
       onPress={gotoDynamic}>
       <View className="relative">
         <Avatar
@@ -177,8 +177,8 @@ function FollowItem(props: { item: UpInfo; index?: number }) {
               e.stopPropagation()
               gotoLivePage()
             }}
-            className="inset-0 absolute justify-center items-center w-12 h-12 rounded-full bg-neutral-950/60">
-            <Text className={'text-center text-teal-300 font-bold'}>
+            className="absolute inset-0 h-12 w-12 items-center justify-center rounded-full bg-neutral-950/60">
+            <Text className={'text-center font-bold text-teal-300'}>
               直播中
             </Text>
           </Pressable>
@@ -193,7 +193,7 @@ function FollowItem(props: { item: UpInfo; index?: number }) {
         ) : null}
       </View>
       <Text
-        className={`text-sm py-2 flex-1 shrink-0 text-center ${
+        className={`flex-1 shrink-0 py-2 text-center text-sm ${
           pin ? `font-bold ${colors.primary.text}` : ''
         } ${hasUpdate ? colors.secondary.text : ''}`}
         numberOfLines={2}
diff --git a/src/routes/Follow/Header.tsx b/src/routes/Follow/Header.tsx
index 361d133..cf74d6c 100644
--- a/src/routes/Follow/Header.tsx
+++ b/src/routes/Follow/Header.tsx
@@ -11,7 +11,7 @@ export function HeaderRight() {
   const navigation = useNavigation<NavigationProps['navigation']>()
 
   return (
-    <View className="gap-1 flex-row items-center">
+    <View className="flex-row items-center gap-1">
       <Button
         radius={'sm'}
         type="clear"
diff --git a/src/routes/Follow/index.tsx b/src/routes/Follow/index.tsx
index e18dae2..73518ea 100644
--- a/src/routes/Follow/index.tsx
+++ b/src/routes/Follow/index.tsx
@@ -34,7 +34,7 @@ function TvImg() {
   return (
     <Image
       source={tvImg ? tvL : tvR}
-      className="aspect-square h-auto mt-12 self-center w-[50%]"
+      className="mt-12 aspect-square h-auto w-[50%] self-center"
     />
   )
 }
@@ -134,14 +134,14 @@ function FollowList() {
           ListEmptyComponent={
             <View>
               <TvImg />
-              <Text className="text-center my-10 text-lg">
+              <Text className="my-10 text-center text-lg">
                 暂无关注，请搜索你感兴趣的UP主添加
               </Text>
             </View>
           }
           ListFooterComponent={
             $followedUps.length ? (
-              <Text className="text-center pb-3 text-xs text-gray-500">
+              <Text className="pb-3 text-center text-xs text-gray-500">
                 到底了~
               </Text>
             ) : null
diff --git a/src/routes/History/index.tsx b/src/routes/History/index.tsx
index 7b9ff8a..7f8c91e 100644
--- a/src/routes/History/index.tsx
+++ b/src/routes/History/index.tsx
@@ -74,7 +74,7 @@ function HistoryList() {
       persistentScrollbar
       estimatedItemSize={100}
       ListEmptyComponent={
-        <View className="flex-1 gap-2 my-16">
+        <View className="my-16 flex-1 gap-2">
           {count === 0 ? (
             <Text className="text-center text-base">暂无观看记录</Text>
           ) : (
@@ -84,7 +84,7 @@ function HistoryList() {
       }
       ListFooterComponent={
         list.length ? (
-          <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
+          <Text className={`${colors.gray6.text} my-2 text-center text-xs`}>
             暂无更多（保存最近约420条）
           </Text>
         ) : null
diff --git a/src/routes/Music/Player.tsx b/src/routes/Music/Player.tsx
index 4658ba2..7f444ea 100644
--- a/src/routes/Music/Player.tsx
+++ b/src/routes/Music/Player.tsx
@@ -171,12 +171,12 @@ function PlayerBar(props: { url?: string; time?: number; error?: boolean }) {
               : require('../../../assets/loading.png')
           }
           resizeMode="cover"
-          className="w-20 h-20 rounded">
+          className="h-20 w-20 rounded">
           <Icon
             name={isPlaying ? 'pause-circle-outline' : 'play-circle-outline'} // pause-circle-outline
             type="material-community"
             size={50}
-            className="h-full justify-center items-center"
+            className="h-full items-center justify-center"
             onPress={() => {
               if (isPlaying) {
                 soundRef.current?.pauseAsync()
@@ -190,9 +190,9 @@ function PlayerBar(props: { url?: string; time?: number; error?: boolean }) {
           />
         </ImageBackground>
         <View className="flex-1 justify-between">
-          <View className="flex-row justify-between items-center">
+          <View className="flex-row items-center justify-between">
             <Text
-              className="text-lg flex-1"
+              className="flex-1 text-lg"
               ellipsizeMode="tail"
               onPress={() => {
                 soundRef.current?.playAsync()
@@ -213,7 +213,7 @@ function PlayerBar(props: { url?: string; time?: number; error?: boolean }) {
               }}>
               <Text
                 className={clsx(
-                  prevSong ? colors.primary.text : 'opacity-60 line-through',
+                  prevSong ? colors.primary.text : 'line-through opacity-60',
                 )}>
                 上一首
               </Text>
@@ -226,7 +226,7 @@ function PlayerBar(props: { url?: string; time?: number; error?: boolean }) {
               }}>
               <Text
                 className={clsx(
-                  nextSong ? colors.primary.text : 'opacity-60 line-through',
+                  nextSong ? colors.primary.text : 'line-through opacity-60',
                 )}>
                 下一首
               </Text>
@@ -254,7 +254,7 @@ function PlayerBar(props: { url?: string; time?: number; error?: boolean }) {
               </Text>
             </TouchableOpacity>
           </View>
-          <View className="flex-row gap-2 items-center">
+          <View className="flex-row items-center gap-2">
             <Text className="text-xs" style={{ fontVariant: ['tabular-nums'] }}>
               {parseTime(playingTime)}
             </Text>
@@ -262,7 +262,7 @@ function PlayerBar(props: { url?: string; time?: number; error?: boolean }) {
             {props.url ? (
               <Slider
                 // @ts-ignore
-                className="flex-1 h-2"
+                className="h-2 flex-1"
                 value={playingTime}
                 onValueChange={(currentTime) => {
                   soundRef.current?.setPositionAsync(currentTime)
diff --git a/src/routes/Music/RotateImg.tsx b/src/routes/Music/RotateImg.tsx
index 64e477a..20a2f0a 100644
--- a/src/routes/Music/RotateImg.tsx
+++ b/src/routes/Music/RotateImg.tsx
@@ -33,7 +33,7 @@ const RotateImage = (props: ImageProps) => {
   })
 
   return (
-    <View className="justify-center items-center flex-1">
+    <View className="flex-1 items-center justify-center">
       <Animated.Image
         style={[props.style, { transform: [{ rotate: interpolatedRotation }] }]}
         {...props}
diff --git a/src/routes/Music/index.tsx b/src/routes/Music/index.tsx
index e21a5b7..066b200 100644
--- a/src/routes/Music/index.tsx
+++ b/src/routes/Music/index.tsx
@@ -6,7 +6,13 @@ import clsx from 'clsx'
 import * as Clipboard from 'expo-clipboard'
 import { Image } from 'expo-image'
 import React from 'react'
-import { Alert, Linking, View } from 'react-native'
+import {
+  Alert,
+  ImageBackground,
+  Linking,
+  useWindowDimensions,
+  View,
+} from 'react-native'
 import type { SearchBarCommands } from 'react-native-screens'
 
 import { colors } from '@/constants/colors.tw'
@@ -93,40 +99,48 @@ function MusicItem(props: {
       },
     ]
   }
+  const { width } = useWindowDimensions()
   return (
-    <View className="flex-row my-3 gap-3">
-      <View className="">
-        <Image
+    <View className="my-3 flex-row gap-3">
+      <View className="overflow-hidden rounded">
+        <ImageBackground
           source={{ uri: parseImgUrl(song.cover, 240, 160) }}
-          className="h-16 w-20 rounded"
-        />
-        <View className="absolute top-0 justify-center items-center">
-          {/* {isPlaying ? (
+          className="top-0 h-16 w-20 items-center justify-center">
+          {isPlaying ? (
             <Image
-              source={require('../../../assets/playing.gif')}
-              className="h-14 w-10 self-center align-middle"
+              source={require('../../../assets/ccc.webp')}
+              className="h-14 w-14"
             />
-          ) : ( */}
-          <Icon
-            name={'play-circle-outline'} // pause-circle-outline
-            type="material-community"
-            size={45}
-            className="h-16 w-20 justify-center items-center"
-            onPress={() => {
-              setPlayingSong(song)
-            }}
-            onLongPress={() => {
-              setOverlayButtons(buttons())
-            }}
-            color={'white'}
-          />
-          {/* )} */}
-        </View>
+          ) : (
+            <Icon
+              name={'play-circle-outline'} // pause-circle-outline
+              type="material-community"
+              size={45}
+              className={clsx(
+                'h-16 w-20 items-center justify-center',
+                isPlaying && colors.secondary.text,
+              )}
+              onPress={() => {
+                setPlayingSong(song)
+              }}
+              onLongPress={() => {
+                setOverlayButtons(buttons())
+              }}
+              color={isPlaying ? tw(colors.secondary.text).color : 'white'}
+            />
+          )}
+        </ImageBackground>
       </View>
-      <View className="gap-2 flex-1">
+      <ImageBackground
+        source={require('../../../assets/bbb.webp')}
+        imageStyle={{
+          width: 90,
+          left: width - 220,
+        }}
+        className="flex-1 gap-2">
         <Text
           className={clsx(
-            'text-base items-center leading-5',
+            'items-center text-base leading-5',
             isPlaying && [colors.primary.text, 'font-bold'],
           )}
           numberOfLines={2}
@@ -139,6 +153,7 @@ function MusicItem(props: {
           ellipsizeMode="tail">
           {song.name}
         </Text>
+
         <View className="flex-row gap-3">
           <Text className={colors.gray5.text}>👤{song.singer || '佚名'}</Text>
           <Text className={colors.gray5.text}>
@@ -148,7 +163,7 @@ function MusicItem(props: {
             {song.year ? `${song.year}年` : ''}
           </Text>
         </View>
-      </View>
+      </ImageBackground>
     </View>
   )
 }
@@ -205,7 +220,7 @@ function MusicList() {
   }, [list, searchKeyWord])
   return (
     <View className="flex-1">
-      <View className="flex-grow shrink">
+      <View className="shrink flex-grow">
         <FlashList
           data={songsList}
           keyExtractor={(v) => `${v.bvid}_${v.cid}`}
@@ -214,9 +229,8 @@ function MusicList() {
           }}
           persistentScrollbar
           estimatedItemSize={100}
-          // ListHeaderComponent={<MusicPlayerBar />}
           ListEmptyComponent={
-            <View className="flex-1 gap-2 my-16">
+            <View className="my-16 flex-1 gap-2">
               {list.length === 0 ? (
                 <Text className="text-center text-base">
                   暂无歌曲{'\n\n'}在视频播放页面右上角菜单添加
@@ -229,7 +243,7 @@ function MusicList() {
           ListFooterComponent={
             songsList.length ? (
               <Text
-                className={`${colors.gray6.text} text-xs text-center py-1 my-2`}>
+                className={`${colors.gray6.text} my-2 py-1 text-center text-xs`}>
                 到底了
               </Text>
             ) : null
diff --git a/src/routes/Play/Header.tsx b/src/routes/Play/Header.tsx
index 1ff5a76..c34b8f3 100644
--- a/src/routes/Play/Header.tsx
+++ b/src/routes/Play/Header.tsx
@@ -27,7 +27,7 @@ export function PlayHeaderTitle() {
   const followed = route.params?.mid && route.params.mid in _followedUpsMap
   const isBlackUp = route.params?.mid && `_${route.params.mid}` in $blackUps
   return (
-    <View className="flex-row items-center relative left-[-10px]">
+    <View className="relative left-[-10px] flex-row items-center">
       <Text
         className={clsx(
           'text-lg font-semibold',
@@ -70,7 +70,7 @@ function AiConclusionModal(props: {
       onBackdropPress={toggleDialog}>
       <Dialog.Title title={'视频总结💡'} titleStyle={tw(colors.black.text)} />
       {isLoading ? (
-        <View className="flex-1 justify-center items-center py-8">
+        <View className="flex-1 items-center justify-center py-8">
           <ActivityIndicator
             size={'large'}
             color={tw(colors.secondary.text).color}
@@ -79,7 +79,7 @@ function AiConclusionModal(props: {
       ) : error ? (
         <Text className="mt-3">抱歉，出错了</Text>
       ) : (
-        <Text className="leading-6 mt-3">
+        <Text className="mt-3 leading-6">
           {summary ? `    ${summary}` : '暂无总结'}
         </Text>
       )}
diff --git a/src/routes/Play/Player.tsx b/src/routes/Play/Player.tsx
index 203da23..5bdf0ef 100644
--- a/src/routes/Play/Player.tsx
+++ b/src/routes/Play/Player.tsx
@@ -190,11 +190,11 @@ function Player(props: { currentPage: number; onPlayEnded: () => void }) {
     } catch (e) {}
   }
   const renderLoading = () => (
-    <View className="absolute items-center w-full h-full">
+    <View className="absolute h-full w-full items-center">
       {videoInfo?.cover ? (
         <Image
           source={{ uri: parseImgUrl(videoInfo.cover, 672, 420) }}
-          className="flex-1 w-full"
+          className="w-full flex-1"
         />
       ) : null}
       <ActivityIndicator
@@ -278,25 +278,25 @@ function Player(props: { currentPage: number; onPlayEnded: () => void }) {
         <ImageBackground
           source={{ uri: parseImgUrl(videoInfo.cover, 500, 312) }}
           resizeMode="cover"
-          className="flex-1 justify-center items-center">
+          className="flex-1 items-center justify-center">
           <Image2
             source={require('../../../assets/play.png')}
             className="w-16 opacity-80"
           />
           <View className="absolute bottom-2 left-2 flex-row gap-2">
             {videoInfo?.duration ? (
-              <Text className="rounded bg-gray-900/60 py-[2px] px-2 text-white font-bold">
+              <Text className="rounded bg-gray-900/60 px-2 py-[2px] font-bold text-white">
                 {parseDuration(videoInfo?.duration)}
               </Text>
             ) : null}
             {isWifi ? null : (
-              <Text className="rounded bg-gray-900/60 py-[2px] px-2 text-white font-bold">
+              <Text className="rounded bg-gray-900/60 px-2 py-[2px] font-bold text-white">
                 播放将消耗流量
               </Text>
             )}
           </View>
 
-          <View className="absolute bottom-2 right-2 ">
+          <View className="absolute bottom-2 right-2">
             <CheckBox
               checked={highQuality}
               title="高清"
diff --git a/src/routes/Play/VideoInfo.tsx b/src/routes/Play/VideoInfo.tsx
index 388e610..7c325bd 100644
--- a/src/routes/Play/VideoInfo.tsx
+++ b/src/routes/Play/VideoInfo.tsx
@@ -95,9 +95,9 @@ function VideoInfo(props: {
   }
   return (
     <View>
-      <View className="items-center flex-wrap justify-between shrink-0 gap-3">
+      <View className="shrink-0 flex-wrap items-center justify-between gap-3">
         {videoInfo?.argument ? (
-          <View className="p-2 self-start">
+          <View className="self-start p-2">
             <Text
               className={`${colors.warning.text}`}
               onPress={() => {
@@ -109,7 +109,7 @@ function VideoInfo(props: {
             </Text>
           </View>
         ) : null}
-        <View className="justify-between flex-row">
+        <View className="flex-row justify-between">
           <Pressable
             onPress={() => {
               if (!mid || !face || !name) {
@@ -123,7 +123,7 @@ function VideoInfo(props: {
               }
               navigation.push('Dynamic', { user })
             }}
-            className="flex-row flex-1 items-center mr-1">
+            className="mr-1 flex-1 flex-row items-center">
             <Avatar
               size={36}
               rounded
@@ -146,18 +146,18 @@ function VideoInfo(props: {
               {name || ''}
             </Text>
           </Pressable>
-          <View className="flex-row items-center gap-1 px-2 flex-none ml-1">
+          <View className="ml-1 flex-none flex-row items-center gap-1 px-2">
             <Icon name="date-range" size={16} />
             <Text className="text-sm">{parseDate(date, true)}</Text>
-            <Text className="text-sm ml-1">
+            <Text className="ml-1 text-sm">
               {watchingCount
                 ? `${watchingCount.total === '1' ? '壹' : watchingCount.total}人在看`
                 : ' '}
             </Text>
           </View>
         </View>
-        <View className="flex-row w-full my-1 justify-start flex-wrap opacity-80">
-          <View className="flex-row items-center gap-1 pr-1 py-1">
+        <View className="my-1 w-full flex-row flex-wrap justify-start opacity-80">
+          <View className="flex-row items-center gap-1 py-1 pr-1">
             <Icon name="play-circle-outline" size={18} />
             <Text className="text-sm">{parseNumber(videoInfo?.playNum)}</Text>
           </View>
@@ -197,7 +197,7 @@ function VideoInfo(props: {
             </Text>
           </TouchableOpacity>
           <Pressable
-            className="flex-row items-center gap-1 pl-2 py-1"
+            className="flex-row items-center gap-1 py-1 pl-2"
             onPress={() => {
               if (name && title && route.params.bvid) {
                 handleShareVideo(name, title, route.params.bvid)
@@ -208,29 +208,29 @@ function VideoInfo(props: {
           </Pressable>
         </View>
       </View>
-      <Text className="text-base mt-3">{title}</Text>
+      <Text className="mt-3 text-base">{title}</Text>
       {videoDesc ? (
         <Text className="mt-3" selectable>
           {videoDesc}
         </Text>
       ) : null}
       {pages && pages.length > 1 ? (
-        <View className="flex-row items-center mt-3">
+        <View className="mt-3 flex-row items-center">
           <TouchableOpacity
             activeOpacity={0.7}
-            className=" flex-1"
+            className="flex-1"
             onPress={() => {
               setShowPagesModal(true)
             }}>
             <Text
-              className="text-base flex-1 flex-wrap "
+              className="flex-1 flex-wrap text-base"
               numberOfLines={1}
               ellipsizeMode="tail">
               视频分集【{props.currentPage}/{videoInfo?.pages?.length}】：
               <Text
                 className={clsx(
                   colors.primary.text,
-                  'text-base align-middle flex-wrap flex-1 border',
+                  'flex-1 flex-wrap border align-middle text-base',
                 )}>
                 {pages[props.currentPage - 1].title}
               </Text>
@@ -250,7 +250,7 @@ function VideoInfo(props: {
             <Card containerStyle={tw('m-0')}>
               <Card.Title className="text-left text-lg">{`视频分集【${props.currentPage}/${pages.length}】`}</Card.Title>
               <Card.Divider />
-              <ScrollView className="flex-1 max-h-[80vh]">
+              <ScrollView className="max-h-[80vh] flex-1">
                 {pages.map((item) => {
                   const selected = item.page === props.currentPage
                   return (
diff --git a/src/routes/SearchUps/UpList.tsx b/src/routes/SearchUps/UpList.tsx
index d4546b7..797cfc6 100644
--- a/src/routes/SearchUps/UpList.tsx
+++ b/src/routes/SearchUps/UpList.tsx
@@ -20,7 +20,7 @@ function SearchUpItem(props: { up: SearchedUpType }) {
   const isFollowed = props.up.mid in _followedUpsMap
   const isBlackUp = `_${props.up.mid}` in $blackUps
   return (
-    <View className="flex-1 flex-row items-center justify-between px-4 mb-5">
+    <View className="mb-5 flex-1 flex-row items-center justify-between px-4">
       <TouchableOpacity
         activeOpacity={0.8}
         onPress={() => {
@@ -42,13 +42,13 @@ function SearchUpItem(props: { up: SearchedUpType }) {
             colors.primary.text,
             isBlackUp && `line-through ${colors.gray4.text}`,
             isFollowed && colors.secondary.text,
-            'text-base flex-1',
+            'flex-1 text-base',
           )}
           ellipsizeMode="tail">
           {props.up.name}
         </Text>
       </TouchableOpacity>
-      <Text className={`${colors.gray6.text} text-sm px-2`}>
+      <Text className={`${colors.gray6.text} px-2 text-sm`}>
         {parseNumber(props.up.fans)}粉丝
       </Text>
       <Button
@@ -91,7 +91,7 @@ function EmptyContent(props: { loading: boolean }) {
         {Array.from({ length: 20 }).map((_, i) => {
           return (
             <View
-              className="flex-row items-center justify-between gap-4 mb-6 px-4"
+              className="mb-6 flex-row items-center justify-between gap-4 px-4"
               key={i}>
               <View className="flex-row items-center gap-4">
                 <Skeleton
@@ -110,7 +110,7 @@ function EmptyContent(props: { loading: boolean }) {
       </View>
     )
   }
-  return <Text className="text-center my-10">暂无结果</Text>
+  return <Text className="my-10 text-center">暂无结果</Text>
 }
 
 function UpList(props: { keyword: string }) {
@@ -140,11 +140,11 @@ function UpList(props: { keyword: string }) {
       ListEmptyComponent={<EmptyContent loading={isLoading} />}
       ListFooterComponent={
         isValidating ? (
-          <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
+          <Text className={`${colors.gray6.text} my-2 text-center text-xs`}>
             加载中~
           </Text>
         ) : searchedUps?.length && isReachingEnd ? (
-          <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
+          <Text className={`${colors.gray6.text} my-2 text-center text-xs`}>
             暂无更多
           </Text>
         ) : null
diff --git a/src/routes/SearchVideos/VideoList.tsx b/src/routes/SearchVideos/VideoList.tsx
index 0224dc3..0366fa8 100644
--- a/src/routes/SearchVideos/VideoList.tsx
+++ b/src/routes/SearchVideos/VideoList.tsx
@@ -23,13 +23,13 @@ function EmptyContent(props: {
         {Array.from({ length: 20 }).map((_, i) => {
           return (
             <View
-              className="flex-row items-center h-28 justify-between gap-4 mb-4 px-2"
+              className="mb-4 h-28 flex-row items-center justify-between gap-4 px-2"
               key={i}>
               <Skeleton
                 animation="pulse"
-                className="flex-[3] rounded h-[90%]  my-2"
+                className="my-2 h-[90%] flex-[3] rounded"
               />
-              <View className="py-2 flex-[4]">
+              <View className="flex-[4] py-2">
                 <View className="flex-1 gap-2">
                   <Skeleton animation="wave" width={150} height={16} />
                   <Skeleton animation="wave" width={50} height={16} />
@@ -59,7 +59,7 @@ function EmptyContent(props: {
               onPress={() => {
                 props.onSearch(hot.keyword)
               }}
-              className="flex-1 flex-row p-2 mx-2 my-1 items-center">
+              className="mx-2 my-1 flex-1 flex-row items-center p-2">
               <Text
                 className={`text-base ${hot.keyword in $watchedHotSearch ? 'opacity-40' : ''}`}>
                 {hot.position}.{' '}
@@ -82,7 +82,7 @@ function EmptyContent(props: {
       </>
     )
   }
-  return <Text className="text-center my-20 text-base">暂无结果</Text>
+  return <Text className="my-20 text-center text-base">暂无结果</Text>
 }
 
 function VideoList(props: { keyword: string; onSearch: (k: string) => void }) {
@@ -116,11 +116,11 @@ function VideoList(props: { keyword: string; onSearch: (k: string) => void }) {
       }
       ListFooterComponent={
         isValidating ? (
-          <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
+          <Text className={`${colors.gray6.text} my-2 text-center text-xs`}>
             加载中~
           </Text>
         ) : searchedVideos?.length && isReachingEnd ? (
-          <Text className={`${colors.gray6.text} text-xs text-center my-2`}>
+          <Text className={`${colors.gray6.text} my-2 text-center text-xs`}>
             暂无更多
           </Text>
         ) : null
diff --git a/src/routes/VideoList/Header.tsx b/src/routes/VideoList/Header.tsx
index 56349f4..c7561df 100644
--- a/src/routes/VideoList/Header.tsx
+++ b/src/routes/VideoList/Header.tsx
@@ -111,7 +111,7 @@ function HeaderLeftComp() {
           <TouchableOpacity
             activeOpacity={0.5}
             onPress={showMenu}
-            className="flex-row items-center h-full">
+            className="h-full flex-row items-center">
             <Text
               className={`text-lg font-bold ${
                 currentVideosCate.rid === -1
@@ -143,7 +143,7 @@ function HeaderLeftComp() {
               )
             }
             return (
-              <View key={i} className="flex-row flex-1">
+              <View key={i} className="flex-1 flex-row">
                 {items.map((item) => getItem(item))}
               </View>
             )
diff --git a/src/routes/VideoList/HotList.tsx b/src/routes/VideoList/HotList.tsx
index 94d4c85..72f32fc 100644
--- a/src/routes/VideoList/HotList.tsx
+++ b/src/routes/VideoList/HotList.tsx
@@ -31,7 +31,7 @@ function Hot() {
 
   const getFooter = (_list: any[]) => {
     return (
-      <Text className="text-center my-3 text-gray-500">
+      <Text className="my-3 text-center text-gray-500">
         {loading
           ? `加载中(${_list.length})...`
           : isReachingEnd
diff --git a/src/routes/VideoList/Loading.tsx b/src/routes/VideoList/Loading.tsx
index 8a8be25..7abc6cd 100644
--- a/src/routes/VideoList/Loading.tsx
+++ b/src/routes/VideoList/Loading.tsx
@@ -41,7 +41,7 @@ function VLoading() {
         .fill(null)
         .map((_, i) => {
           return (
-            <View className="px-2 pb-2 gap-3 mb-4 flex-row" key={i}>
+            <View className="mb-4 flex-row gap-3 px-2 pb-2" key={i}>
               <VideoLoading />
               <VideoLoading />
             </View>
diff --git a/src/routes/VideoList/Ranks.tsx b/src/routes/VideoList/Ranks.tsx
index 2e460b6..df05abe 100644
--- a/src/routes/VideoList/Ranks.tsx
+++ b/src/routes/VideoList/Ranks.tsx
@@ -22,7 +22,7 @@ function Ranks() {
       type="Rank"
       footer={
         <View>
-          <Text className="text-center my-3 text-gray-500">
+          <Text className="my-3 text-center text-gray-500">
             {isLoading ? '加载中...' : '到底了~'}
           </Text>
         </View>
diff --git a/src/routes/VideoList/Test.tsx b/src/routes/VideoList/Test.tsx
index eabddce..1654b96 100644
--- a/src/routes/VideoList/Test.tsx
+++ b/src/routes/VideoList/Test.tsx
@@ -27,7 +27,7 @@ export default function Test() {
   //   return () => clearInterval(timer)
   // })
   return (
-    <Text className="text-lg text-center">
+    <Text className="text-center text-lg">
       {time}: {count}
     </Text>
   )
diff --git a/src/routes/VideoList/VideoItem.tsx b/src/routes/VideoList/VideoItem.tsx
index 6576640..aa870f9 100644
--- a/src/routes/VideoList/VideoItem.tsx
+++ b/src/routes/VideoList/VideoItem.tsx
@@ -23,10 +23,10 @@ function VideoItem({ video }: { video: VideoItemType }) {
   const isBlackTag = video.tag in $blackTags
   // console.log(parseImgUrl(video.cover, 480, 300))
   return (
-    <View className="self-center   flex-1">
+    <View className="flex-1 self-center">
       <View className="flex-1">
         <Image
-          className={'flex-1 w-full rounded aspect-[8/5]'}
+          className={'aspect-[8/5] w-full flex-1 rounded'}
           source={
             isWiFi
               ? parseImgUrl(video.cover, 480, 300)
@@ -39,26 +39,26 @@ function VideoItem({ video }: { video: VideoItemType }) {
             style={{ width: `${watchedInfo.watchProgress}%` }}
           />
         ) : null}
-        <View className="absolute px-1 items-center bg-gray-900/70 rounded-sm m-1">
-          <Text className="text-white text-xs">
+        <View className="absolute m-1 items-center rounded-sm bg-gray-900/70 px-1">
+          <Text className="text-xs text-white">
             {parseDuration(video.duration)}
           </Text>
         </View>
         <View
-          className={`${watchedInfo ? 'bottom-1' : 'bottom-0'} absolute px-1 items-center bg-gray-900/70 rounded-sm m-1`}>
-          <Text className="text-white text-xs">{parseDate(video.date)}</Text>
+          className={`${watchedInfo ? 'bottom-1' : 'bottom-0'} absolute m-1 items-center rounded-sm bg-gray-900/70 px-1`}>
+          <Text className="text-xs text-white">{parseDate(video.date)}</Text>
         </View>
-        <View className="top-0 right-0 absolute px-1 items-center bg-gray-900/70 rounded-sm m-1">
-          <Text className="text-white text-xs">
+        <View className="absolute right-0 top-0 m-1 items-center rounded-sm bg-gray-900/70 px-1">
+          <Text className="text-xs text-white">
             {parseNumber(video.danmuNum)}弹
           </Text>
         </View>
         {video.tag ? (
           <View
-            className={`right-0 ${watchedInfo ? 'bottom-1' : 'bottom-0'} absolute px-1 items-center bg-gray-900/70 rounded-sm m-1`}>
+            className={`right-0 ${watchedInfo ? 'bottom-1' : 'bottom-0'} absolute m-1 items-center rounded-sm bg-gray-900/70 px-1`}>
             <Text
               className={clsx(
-                'text-white text-xs',
+                'text-xs text-white',
                 isBlackTag && 'line-through opacity-60',
               )}>
               {video.tag}
@@ -74,8 +74,8 @@ function VideoItem({ video }: { video: VideoItemType }) {
         numberOfLines={2}>
         {video.title}
       </Text>
-      <View className="flex-row items-center mt-2 justify-between">
-        <View className="flex-row items-center shrink">
+      <View className="mt-2 flex-row items-center justify-between">
+        <View className="shrink flex-row items-center">
           {isFollowed ? (
             <Icon
               size={15}
@@ -85,7 +85,7 @@ function VideoItem({ video }: { video: VideoItemType }) {
             />
           ) : (
             <Image
-              className="w-[13px] h-[11px]"
+              className="h-[11px] w-[13px]"
               source={require('../../../assets/up-mark.png')}
             />
           )}
@@ -93,7 +93,7 @@ function VideoItem({ video }: { video: VideoItemType }) {
             numberOfLines={1}
             ellipsizeMode="tail"
             className={clsx(
-              'ml-1 text-xs grow shrink',
+              'ml-1 shrink grow text-xs',
               isFollowed
                 ? ['font-bold', colors.secondary.text]
                 : colors.primary.text,
@@ -101,9 +101,9 @@ function VideoItem({ video }: { video: VideoItemType }) {
             {video.name}
           </Text>
         </View>
-        <View className="flex-row items-center shrink-0">
+        <View className="shrink-0 flex-row items-center">
           <Image
-            className="w-[13px] h-[11px]"
+            className="h-[11px] w-[13px]"
             source={require('../../../assets/play-mark.png')}
           />
           <Text className="ml-1 text-xs text-gray-600 dark:text-gray-400">
diff --git a/src/routes/VideoList/VideoList.tsx b/src/routes/VideoList/VideoList.tsx
index 9839f69..bd68cad 100644
--- a/src/routes/VideoList/VideoList.tsx
+++ b/src/routes/VideoList/VideoList.tsx
@@ -127,7 +127,7 @@ function VideoList(props: {
     return (
       <TouchableOpacity
         activeOpacity={0.8}
-        className="flex-1 flex-row justify-around mx-[5px] mb-6"
+        className="mx-[5px] mb-6 flex-1 flex-row justify-around"
         key={item.bvid}
         onPress={() => gotoPlay(item)}
         onLongPress={() => {
diff --git a/src/routes/WebPage/index.tsx b/src/routes/WebPage/index.tsx
index 3b71a6d..756eaa5 100644
--- a/src/routes/WebPage/index.tsx
+++ b/src/routes/WebPage/index.tsx
@@ -26,7 +26,7 @@ import { INJECTED_JAVASCRIPT } from './inject-code'
 
 function Loading() {
   return (
-    <View className="absolute w-full h-full justify-center items-center">
+    <View className="absolute h-full w-full items-center justify-center">
       <Image
         source={require('../../../assets/video-loading.png')}
         resizeMode="center"
@@ -99,7 +99,7 @@ function WebPage({ route }: Props) {
       <View className="relative flex flex-1">
         <Video
           ref={videoRef}
-          className="h-full w-full min-h-96"
+          className="h-full min-h-96 w-full"
           key={liveUrl}
           source={{
             uri: liveUrl,
@@ -119,7 +119,7 @@ function WebPage({ route }: Props) {
           resizeMode={ResizeMode.CONTAIN}
           shouldPlay
         />
-        <View className="absolute top-2 left-2 flex-row items-center gap-4">
+        <View className="absolute left-2 top-2 flex-row items-center gap-4">
           {/* <Button
             title={' 返回 '}
             size="sm"
@@ -212,7 +212,7 @@ function WebPage({ route }: Props) {
           enabled={isEnabled}
         />
       }
-      className="flex-1 h-full">
+      className="h-full flex-1">
       {webview}
     </ScrollView>
   )
diff --git a/src/routes/Welcome.tsx b/src/routes/Welcome.tsx
index d45b624..ea33e7e 100644
--- a/src/routes/Welcome.tsx
+++ b/src/routes/Welcome.tsx
@@ -16,16 +16,16 @@ export default React.memo(Welcome)
 function Welcome({ navigation }: Props) {
   const { set$firstRun } = useStore()
   return (
-    <View className="flex-1 h-full py-10">
+    <View className="h-full flex-1 py-10">
       <View className="flex-row justify-center">
         <Image
           source={require('../../assets/minibili.png')}
           className="aspect-[33/10] h-auto w-[80%]"
         />
       </View>
-      <View className="p-8 flex-1">
+      <View className="flex-1 p-8">
         <Text className="text-2xl">欢迎使用极简版B站 😊</Text>
-        <Text className="text-xl mt-5 mb-10 leading-8">
+        <Text className="mb-10 mt-5 text-xl leading-8">
           这里没有推荐、没有算法、没有广告、没有乱七八糟的功能，只有简单地浏览。
         </Text>
         <Text className="text-base">
@@ -39,7 +39,7 @@ function Welcome({ navigation }: Props) {
           </Text>
           )，所有数据均存放在手机本地，展示的所有数据均为B站官网公开，不会读取、存储、传播任何个人相关数据，仅供学习交流!
         </Text>
-        <Text className="text-base mt-5 text-gray-600 dark:text-gray-400">
+        <Text className="mt-5 text-base text-gray-600 dark:text-gray-400">
           如果遇到闪退或报错请及时更新最新版本。
         </Text>
       </View>