fix: 将输入栏变得方便

app/globals.css

@@ -128,3 +128,22 @@
     margin-bottom: 10px; /* 增加元素之间的间距 */
   }
 }
+
+/* 输入框基本样式 */
+.textarea-focus-expand {
+  height: 50px; /* 默认高度 */
+  flex-grow: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px 15px;
+  margin-right: 8px;
+  color: #333;
+  transition: height 0.3s ease; /* 平滑过渡效果 */
+}
+
+/* 输入框获得焦点时的样式 */
+.textarea-focus-expand:focus {
+  height: 200px; /* 聚焦时的高度 */
+  border-color: #007bff; /* 改变边框颜色以提供视觉反馈 */
+}

app/page.tsx

@@ -29,7 +29,7 @@ export default function Index() {
   const isSupabaseConnected = canInitSupabaseClient();
 
   return (
-    <div className="flex-1 w-full flex flex-col gap-10 items-center">
+    <div className="flex-1 w-full flex flex-col gap-5 items-center">
       <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
         <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm">
           {/* <DeployButton /> */}

components/QuillEditor.tsx

@@ -363,11 +363,10 @@ const QEditor = () => {
   return (
     <div>
       <div id="Qtoolbar" className="space-y-2 flex justify-between">
-        <input
-          type="text"
+        <textarea
           value={userInput}
           onChange={handleInputChange}
-          className="flex-grow shadow appearance-none border rounded py-2 px-3 mr-2 text-grey-darker"
+          className="textarea-focus-expand flex-grow shadow appearance-none border rounded py-2 px-3 mr-2 text-grey-darker"
           placeholder="点击AI Write就是正常的对话交流，点击Paper2AI会根据输入的主题词去寻找对应论文"
         />
         <button