Merge pull request #131 from meetqy/73-移动端搜索功能

73 移动端搜索功能

src/app/[lang]/components/search.tsx

@@ -16,8 +16,9 @@ import { api } from "~/trpc/react";
 import { useRouter } from "next/navigation";
 import { CommandLoading } from "cmdk";
 import { type Locale, type Dictionary } from "~/dictionaries";
+import { Search } from "lucide-react";
 
-export default function CommandDemo({
+export default function SearchDialog({
   dict,
   lang,
 }: {
@@ -52,26 +53,37 @@ export default function CommandDemo({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button
-          variant={"outline"}
-          className="relative h-8 w-64 justify-between bg-transparent text-base"
-          onClick={() => setOpen(true)}
-        >
-          <span>{dict.search.placeholder}...</span>
-          <kbd className="pointer-events-none absolute right-2 hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-            <span className="text-xs">⌘</span>K
-          </kbd>
-        </Button>
+        <>
+          <Button
+            variant={"outline"}
+            className="relative hidden h-8 w-64 justify-between bg-transparent text-base lg:flex"
+            onClick={() => setOpen(true)}
+          >
+            <span>{dict.search.placeholder}...</span>
+            <kbd className="pointer-events-none absolute right-2 hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+              <span className="text-xs">⌘</span>K
+            </kbd>
+          </Button>
+
+          <Button
+            size={"sm"}
+            variant={"outline"}
+            className="h-8 w-8 p-0 lg:hidden"
+            onClick={() => setOpen(true)}
+          >
+            <Search className="h-4 w-4" />
+          </Button>
+        </>
       </DialogTrigger>
-      <DialogContent className="h-[488px] max-w-screen-md p-0 text-lg">
+      <DialogContent className="h-[80%] max-w-screen-md p-0 text-lg lg:h-[488px]">
         <Command>
           <CommandInput
             placeholder={`${dict.search.placeholder}...`}
             value={value}
             className="py-8 text-lg"
             onValueChange={setValue}
           />
-          <CommandList className="max-h-[488px]">
+          <CommandList className="max-h-[100%] lg:max-h-[488px]">
             <CommandEmpty>{dict.search.empty}</CommandEmpty>
             {isLoading && <CommandLoading />}
             <CommandGroup>
@@ -91,26 +103,31 @@ export default function CommandDemo({
                     }}
                   >
                     <span
+                      className="line-clamp-1"
                       dangerouslySetInnerHTML={{
-                        __html: item.title.replace(value, (e) => {
-                          return `<span class="text-blue-500 bg-blue-50">${e}</span>`;
-                        }),
-                      }}
-                    />
-                    <span className="mx-0.5 text-muted-foreground/50">|</span>
-                    <span
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        router.push(`/${lang}/author/${item.author.id}`);
-                        setOpen(false);
-                      }}
-                      className="cursor-pointer hover:underline"
-                      dangerouslySetInnerHTML={{
-                        __html: item.author.name.replace(value, (e) => {
-                          return `<span class="text-blue-500 bg-blue-50">${e}</span>`;
-                        }),
+                        __html: item.title
+                          .substring(0, 15)
+                          .replace(value, (e) => {
+                            return `<span class="text-blue-500 bg-blue-50">${e}</span>`;
+                          }),
                       }}
                     />
+                    <span>
+                      <span className="mx-0.5 text-muted-foreground/50">|</span>
+                      <span
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          router.push(`/${lang}/author/${item.author.id}`);
+                          setOpen(false);
+                        }}
+                        className="cursor-pointer hover:underline"
+                        dangerouslySetInnerHTML={{
+                          __html: item.author.name.replace(value, (e) => {
+                            return `<span class="text-blue-500 bg-blue-50">${e}</span>`;
+                          }),
+                        }}
+                      />
+                    </span>
                     {value && content && (
                       <span className="line-clamp-1 flex-1">
                         <span className="mx-0.5 text-muted-foreground/50">

src/app/[lang]/layout.tsx

@@ -91,7 +91,7 @@ export default async function Layout({
             id="header_main"
           >
             <div className="flex items-center justify-center">
-              <div className="mr-2 hidden lg:block">
+              <div className="mr-2">
                 <Search dict={dict} lang={params.lang} />
               </div>
               <ModeToggle />

src/app/[lang]/poem/[id]/page.tsx

@@ -178,14 +178,14 @@ export default async function Page({ params, searchParams }: Props) {
       {/* 标签 */}
       <article className="chinese mt-8 px-4">
         {poem.tags.length > 0 && (
-          <div className="mt-12 flex items-center justify-start space-x-4">
+          <div className="mt-12 flex flex-wrap items-center justify-start">
             {poem.tags.map((item) => {
               return (
                 <Button
                   variant={"secondary"}
                   key={item.id}
                   asChild
-                  className="text-f50"
+                  className="mb-4 mr-4 text-f50"
                 >
                   <Link href={`/${params.lang}/tag/${item.id}`}>
                     {item.type === "词牌名" && (

src/app/demo/page.tsx

@@ -1,10 +1,12 @@
-"use client";
+import SearchDialog from "../[lang]/components/search";
+import { getDictionary } from "~/dictionaries";
 
-import { api } from "~/trpc/react";
+export default async function Page() {
+  const dict = await getDictionary();
 
-export default function Page() {
-  const { data } = api.poem.findById.useQuery({ id: 2508 });
-  console.log(data);
-
-  return <div></div>;
+  return (
+    <div>
+      <SearchDialog dict={dict} lang="zh-Hans" />
+    </div>
+  );
 }