-

lovetingyuan · Nov 1, 2024 · adaa723 · adaa723
1 parent 0113a95
commit adaa723
Show file tree

Hide file tree

Showing 49 changed files with 326 additions and 222 deletions.
diff --git 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
diff --git a/assets/ccc.webp b/assets/ccc.webp
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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,23 +63,23 @@ 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
                       ? '加载中'
                       : '暂无评论'}
                 </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
@@ -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
@@ -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
@@ -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,37 +61,37 @@ 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>
               )
             }}
             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>
               )
             }
             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
@@ -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)