feat(mobile): optimize rsshub form screen

Author: DIYgod

apps/desktop/layer/renderer/src/modules/discover/DiscoverFeedForm.tsx

@@ -100,23 +100,7 @@ export const DiscoverFeedForm = ({
   rootClassName?: string
 }) => {
   const { t } = useTranslation()
-  const keys = useMemo(
-    () =>
-      parseRegexpPathParams(route.path, {
-        excludeNames: [
-          "routeParams",
-          "functionalFlag",
-          "fulltext",
-          "disableEmbed",
-          "date",
-          "language",
-          "lang",
-          "sort",
-        ],
-        forceExcludeNames: routeParams ? ["routeParams"] : [],
-      }),
-    [route.path, routeParams],
-  )
+  const keys = useMemo(() => parseRegexpPathParams(route.path), [route.path])
 
   const formPlaceholder = useMemo<Record<string, string>>(() => {
     if (!route.example) return {}

apps/mobile/src/components/ui/form/Select.tsx

@@ -100,11 +100,9 @@ export function Select<T>({
   }
 
   return (
-    <View className="flex-1 flex-row items-center">
+    <View className="flex-1 flex-row items-center justify-between">
       <FormLabel className="pl-2" label={label} />
-      <View className="flex-1" />
-
-      {Trigger}
+      <View className="flex-1">{Trigger}</View>
     </View>
   )
 }

apps/mobile/src/modules/discover/FeedSummary.tsx

@@ -73,7 +73,9 @@ export const FeedSummary = ({
           <Text className="text-text text-lg font-semibold" numberOfLines={1}>
             {item.feed?.title}
           </Text>
-          <Text className="text-text text-sm leading-tight opacity-60">{item.feed?.url}</Text>
+          <Text className="text-text text-sm leading-tight opacity-60" numberOfLines={1}>
+            {item.feed?.url}
+          </Text>
         </View>
       </View>
       {!simple && !!item.feed?.description && (

apps/mobile/src/screens/(modal)/RsshubFormScreen.tsx

@@ -27,6 +27,7 @@ import { useNavigation } from "@/src/lib/navigation/hooks"
 import { useSetModalScreenOptions } from "@/src/lib/navigation/ScreenOptionsContext"
 import type { NavigationControllerView } from "@/src/lib/navigation/types"
 import { toast } from "@/src/lib/toast"
+import { FeedSummary } from "@/src/modules/discover/FeedSummary"
 
 import { FollowScreen } from "./FollowScreen"
 
@@ -64,23 +65,8 @@ export const RsshubFormScreen: NavigationControllerView<RsshubFormParams> = ({
 }
 
 function FormImpl({ route, routePrefix, name }: RsshubFormParams) {
-  const { name: routeName } = route
-  const keys = useMemo(
-    () =>
-      parseRegexpPathParams(route.path, {
-        excludeNames: [
-          "routeParams",
-          "functionalFlag",
-          "fulltext",
-          "disableEmbed",
-          "date",
-          "language",
-          "lang",
-          "sort",
-        ],
-      }),
-    [route.path],
-  )
+  const { name: routeName, topFeeds } = route
+  const keys = useMemo(() => parseRegexpPathParams(route.path), [route.path])
 
   const formPlaceholder = useMemo<Record<string, string>>(() => {
     if (!route.example) return {}
@@ -119,6 +105,16 @@ function FormImpl({ route, routePrefix, name }: RsshubFormParams) {
   // eslint-disable-next-line unicorn/prefer-structured-clone
   const nextErrors = JSON.parse(JSON.stringify(form.formState.errors))
 
+  const data = form.watch() as Record<string, string | undefined>
+  const fullPath = useMemo(() => {
+    try {
+      return regexpPathToPath(route.path, data)
+    } catch (err: unknown) {
+      console.info((err as Error).message)
+      return route.path
+    }
+  }, [route.path, data])
+
   return (
     <FormProvider form={form}>
       <PortalProvider>
@@ -131,13 +127,16 @@ function FormImpl({ route, routePrefix, name }: RsshubFormParams) {
               routePrefix={routePrefix}
               errors={nextErrors}
             />
+            <Text className="text-secondary-label mx-4 mt-2 text-center text-sm">
+              {`rsshub://${routePrefix}${fullPath}`}
+            </Text>
             {keys.length === 0 && (
-              <View className="bg-secondary-system-grouped-background mx-2 mt-2 gap-4 rounded-lg p-3">
+              <View className="bg-secondary-system-grouped-background mx-2 mt-4 gap-4 rounded-lg p-3">
                 <Text className="text-center text-base">This feed has no parameters.</Text>
               </View>
             )}
             {keys.length > 0 && (
-              <View className="bg-secondary-system-grouped-background mx-2 mt-2 gap-4 rounded-lg px-3 py-6">
+              <View className="bg-secondary-system-grouped-background mx-4 mt-4 gap-5 rounded-[10px] px-4 py-5">
                 {keys.map((keyItem) => {
                   const parameters = normalizeRSSHubParameters(route.parameters[keyItem.name]!)
 
@@ -198,10 +197,17 @@ function FormImpl({ route, routePrefix, name }: RsshubFormParams) {
                 })}
               </View>
             )}
+            {!!topFeeds?.length && (
+              <View className="bg-secondary-system-grouped-background mx-4 mt-4 rounded-[10px] py-1">
+                {topFeeds.map((feed) => (
+                  <FeedSummary key={feed.id} item={{ feed }} simple className="px-4 py-2" />
+                ))}
+              </View>
+            )}
             <Maintainers maintainers={route.maintainers} />
 
             {!!route.description && (
-              <View className="mt-4 flex-1 p-4">
+              <View className="mt-6 flex-1 px-8">
                 <MarkdownNative value={route.description.replaceAll(":::", "")} />
               </View>
             )}
@@ -218,7 +224,7 @@ const Maintainers = ({ maintainers }: { maintainers?: string[] }) => {
   }
 
   return (
-    <View className="text-tertiary-label mx-4 mt-2 flex flex-row flex-wrap gap-x-1 text-sm">
+    <View className="text-tertiary-label mx-8 mt-4 flex flex-row flex-wrap gap-x-1 text-sm">
       <Text className="text-secondary-label text-xs">
         This feed is provided by RSSHub, with credit to{" "}
       </Text>

packages/internal/utils/src/path-parser.ts

@@ -110,7 +110,20 @@ export const parseRegexpPathParams = (
   regexpPath: string,
   options?: ParseRegexpPathParamsOptions,
 ) => {
-  const { excludeNames = [], forceExcludeNames = [] } = options || {}
+  const {
+    excludeNames = [
+      "routeParams",
+      "functionalFlag",
+      "fulltext",
+      "disableEmbed",
+      "embed",
+      "date",
+      "language",
+      "lang",
+      "sort",
+    ],
+    forceExcludeNames = ["routeParams"],
+  } = options || {}
   const transformedPath = transformUriPath(regexpPath)
   const { tokens } = parse(transformedPath)