Merge pull request #8 from lvwzhen/prompt

Update
lvwzhen · Apr 22, 2023 · 9436e55 · 9436e55 · vercel · Apr 22, 2023
2 parents ce4b330 + b047cfc
commit 9436e55
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,41 @@
-# 法律AI助手
+# AI 法律助手
 
 法律文件来源：https://github.com/LawRefBook/Laws
 
 项目模板：https://github.com/supabase-community/nextjs-openai-doc-search
 
 这个项目从 `pages` 目录中获取所有的 `.mdx` 文件，并将其处理成自定义上下文，以在[OpenAI 文本自动补全](https://platform.openai.com/docs/guides/completion)提示中使用。
 
+## 赞助商
+
+<table>
+  <tr>
+    <td>
+      <a href="https://magickpen.com/?ref=lawcnai" target="_blank">
+        <img alt="MagickPen" src="public/MagickPen.png" height="32px;" />
+      </a>
+    </td>
+    <td>
+      <a href="https://www.teach-anything.com/?ref=lawcnai" target="_blank">
+        <img alt="TeachAnything" src="public/TeachAnything.png" height="32px;" />
+      </a>
+    </td>
+    <td>
+      <a href="https://openl.io/?ref=lawcnai" target="_blank">
+        <img alt="OpenL" src="public/OpenL.png" height="32px;" />
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <a href="https://afdian.net/a/lvwzhen/plan" target="_blank"> ❤️ 请赞助我们</a>
+    </td>
+    <td></td>
+    <td></td>
+  </tr>
+</table>
+
+
 ## 部署
 
 部署此starter到Vercel。Supabase集成将自动设置所需的环境变量并配置您的[数据库概要](./supabase/migrations/20230406025118_init.sql)。您只需要设置 `OPENAI_KEY`，然后就可以开始了！

diff --git a/components/SearchDialog.tsx b/components/SearchDialog.tsx
@@ -171,20 +171,23 @@ export function SearchDialog() {
 
   return (
     <>
+
       <button
         onClick={() => setOpen(true)}
-        className="text-base flex gap-2 items-center px-4 py-2 z-50 relative
+        className="text-base flex gap-2 items-center px-4 py-3 z-50 relative 
         text-slate-500 dark:text-slate-400  hover:text-slate-700 dark:hover:text-slate-300
         transition-colors
-        rounded-md
+        rounded-full
+        bg-white
         border border-slate-200 dark:border-slate-500 hover:border-slate-300 dark:hover:border-slate-500
-        min-w-[300px] "
+        w-full
+        md:min-w-[580px] "
       >
         <Search width={15} />
         <span className="border border-l h-5"></span>
-        <span className="inline-block ml-4">法律AI助手</span>
+        <span className="inline-block ml-4">请输入法律问题</span>
         <kbd
-          className="absolute right-3 top-2.5
+          className="absolute right-3 top-4
           pointer-events-none inline-flex h-5 select-none items-center gap-1
           rounded border border-slate-100 bg-slate-100 px-1.5
           font-mono text-[10px] font-medium
@@ -197,7 +200,7 @@ export function SearchDialog() {
       <Dialog open={open}>
         <DialogContent className="sm:max-w-[850px] text-black">
           <DialogHeader>
-            <DialogTitle>法律AI助手</DialogTitle>
+            <DialogTitle>AI 法律助手</DialogTitle>
             <DialogDescription>
               我是您的法律助手，请输入您想查询的问题
             </DialogDescription>
@@ -249,7 +252,7 @@ export function SearchDialog() {
 
               <div className="relative">
                 <Input
-                  placeholder="输入你的法律问题..."
+                  placeholder="输入法律问题..."
                   name="search"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -12,10 +12,10 @@ export default function Home() {
   return (
     <>
       <Head>
-        <title>法律AI助手</title>
+        <title>AI 法律助手</title>
         <meta
           name="description"
-          content="法律AI助手"
+          content="AI 法律助手"
         />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
@@ -35,32 +35,51 @@ export default function Home() {
         `}
       </Script>
       <main className={styles.main}>
+        <h1 className='text-slate-700 font-bold text-2xl mb-12 flex items-center gap-3'><Image src={'/logo.png'} width="32" height="32" alt="MagickPen logo" /> AI 法律助手</h1>
         <div className={styles.center}>
           <SearchDialog />
         </div>
 
-        <div className="py-8 w-full md:flex items-center justify-center md:space-x-6">
-          <div className="opacity-75 transition hover:opacity-100 cursor-pointer">
-            <Link href="https://magickpen.com/?ref=lawcnai" className="flex gap-1 items-center justify-center text-base mr-2">
-              Made by <Image src={'/logo.png'} width="20" height="20" alt="MagickPen logo" /> MagickPen
-            </Link>
-          </div>
-          <div className="border-l border-gray-300 w-1 h-4 hidden md:block" />
-          <div className="flex items-center justify-center space-x-4 mt-4 md:m-0">
+        <div className='mt-28 md:mt-40 text-center w-full'>
+          <h2 className='text-slate-500'>更多好玩</h2>
+          <ul className='grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-5 mt-6 max-w-lg mx-auto text-xs'>
+            <li>
+              <Link href="https://magickpen.com/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+                <Image src={'/MagickPen.png'}  width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="MagickPen - 智能写作助手" />
+                智能写作助手
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.teach-anything.com/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+                <Image src={'/TeachAnything.png'} width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="Teach Anything - AI 百科全书" />
+                AI 百科全书
+              </Link>
+            </li>
+            <li>
+              <Link href="https://openl.io/?ref=lawcnai" className=' text-slate-400  border border-slate-300/30 transition-all hover:bg-white/50 hover:backdrop-blur-md py-2.5 rounded-md block'>
+                <Image src={'/OpenL.png'} width={100} height="20" className='w-full mb-1 h-5 object-contain' alt="OpenL - AI 翻译专家" />
+                AI 翻译专家
+              </Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="py-10 w-full md:flex items-center justify-center md:space-x-6">
+          <div className="flex items-center justify-center space-x-6 mt-4 md:m-0">
             <div className="opacity-75 transition hover:opacity-100 cursor-pointer">
               <Link
                 href="https://github.com/lvwzhen/law-cn-ai"
                 className="flex items-center justify-center"
               >
-                <Image src={'/github.svg'} width="20" height="20" alt="Github logo" />
+                <Image src={'/github.svg'} width="24" height="24" alt="Github logo" />
               </Link>
             </div>
             <div className="opacity-75 transition hover:opacity-100 cursor-pointer">
               <Link
                 href="https://twitter.com/lvwzhen"
                 className="flex items-center justify-center"
               >
-                <Image src={'/twitter.svg'} width="20" height="20" alt="Twitter logo" />
+                <Image src={'/twitter.svg'} width="24" height="24" alt="Twitter logo" />
               </Link>
             </div>
           </div>

diff --git a/public/MagickPen.png b/public/MagickPen.png
diff --git a/public/OpenL.png b/public/OpenL.png
diff --git a/public/TeachAnything.png b/public/TeachAnything.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -1,7 +1,6 @@
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   padding: 6rem;
   min-height: 100vh;
@@ -77,15 +76,15 @@
   justify-content: center;
   align-items: center;
   position: relative;
-  padding: 4rem 0;
+  padding: 0;
 }
 
 .center::before {
   background: var(--secondary-glow);
   border-radius: 50%;
   width: 480px;
   height: 360px;
-  margin-left: -400px;
+  margin-left: -600px;
 }
 
 .center::after {
@@ -272,3 +271,18 @@
     transform: rotate(0deg);
   }
 }
+
+
+@media (max-width: 768px) {
+  .main {
+    padding: 3rem 1rem;
+  }
+  .center{
+    padding: 0;
+    display: block;
+    width: 100%;
+  }
+  .center button{
+      width: 100%;
+    }
+}