微调样式

app/app/(auth)/login/user-login-core.tsx

@@ -1,23 +1,31 @@
 "use client";
 
 import { signIn } from "next-auth/react";
-import React, { useState, useEffect, useRef, use } from "react";
+import React, { useState, useEffect, useRef, use, useMemo } from "react";
 import { isName } from "@/lib/auth_list";
 import {
   Form,
   Tabs,
   Input,
+  Button,
   InputRef,
   notification as notificationModule,
   NotificationArgsProps,
 } from "antd";
-import { UserOutlined, MailOutlined } from "@ant-design/icons";
+import {
+  UserOutlined,
+  MailOutlined,
+  LoadingOutlined,
+  AudioOutlined,
+} from "@ant-design/icons";
 import type { FormProps, TabsProps } from "antd";
 import { SignInOptions } from "next-auth/react";
 import { getSession } from "next-auth/react";
 
 export default function UserLoginCore() {
   const [loading, setLoading] = useState(false);
+  const [capLoading, setCapLoading] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(0);
   const [loginForm] = Form.useForm();
   const [loginMethod, setLoginMethod] = useState<"common" | "cap">("common");
   const [notification, notificationContextHolder] =
@@ -37,11 +45,53 @@ export default function UserLoginCore() {
     }
   };
 
+  useEffect(() => {
+    let timer = undefined;
+    if (timeLeft > 0) {
+      timer = setTimeout(() => {
+        setTimeLeft(timeLeft - 1);
+      }, 1000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [timeLeft]);
+
+  const capIcon = useMemo(() => {
+    if (capLoading) {
+      return (
+        <LoadingOutlined
+          style={{
+            fontSize: 16,
+            color: "rgb(234, 149, 24)",
+          }}
+        />
+      );
+    }
+    return <></>;
+  }, [capLoading]);
+  const sendCap = () => {
+    loginForm.validateFields().then((values) => {
+      setCapLoading(true);
+      signIn("email", {
+        redirect: false,
+        email: values.email,
+      }).then((result) => {
+        console.log("33333333333", result);
+        setCapLoading(false);
+        setTimeLeft(60);
+      });
+    });
+
+    // const email = loginForm.getFieldValue("email");
+    // console.log('----------', email)
+  };
+
   // const [error, setError] = useState(false);
   type FieldType = {
     username?: string;
     password?: string;
     email?: string;
+    cap?: string;
   };
   const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
     setLoading(true);
@@ -52,7 +102,20 @@ export default function UserLoginCore() {
 
     if (loginMethod === "cap") {
       loginProvider = "email";
-      signInOptions = { ...signInOptions, email: values.email };
+      signInOptions = {
+        ...signInOptions,
+        email: values.email,
+        cap: values.cap,
+      };
+      fetch(
+        `/api/auth/callback/email?token=${values.cap}&email=${values.email}`,
+      ).then((result) => {
+        console.log("------------", result);
+        if (result.redirected) {
+          window.location.href = result.url;
+        }
+      });
+      return;
     } else {
       loginProvider = "credentials";
       signInOptions = {
@@ -257,26 +320,63 @@ export default function UserLoginCore() {
                       type: "email",
                       message: "The input is not valid E-mail!",
                     },
-                    // {
-                    //   validator: async (_, value) => {
-                    //     const username_value = loginForm.getFieldValue("username");
-                    //     if (value && username_value) {
-                    //       return Promise.reject(new Error("Field must be unique!"));
-                    //     }
-                    //   },
-                    // },
+                    {
+                      required: true,
+                    },
                   ]}
                 >
                   <Input
                     prefix={
                       <MailOutlined style={{ color: "rgba(0,0,0,.25)" }} />
                     }
+                    addonAfter={
+                      <button
+                        onClick={sendCap}
+                        disabled={capLoading || timeLeft > 0}
+                        className="align-bottom"
+                      >
+                        {capLoading ? (
+                          <span style={{ width: "70px" }}>
+                            <LoadingOutlined
+                              style={{
+                                fontSize: 16,
+                                color: "rgb(234, 149, 24)",
+                              }}
+                            />
+                          </span>
+                        ) : timeLeft > 0 ? (
+                          <span style={{ color: "gray" }}>
+                            {timeLeft}秒后重试
+                          </span>
+                        ) : (
+                          "发送验证码"
+                        )}
+                      </button>
+                    }
+                    size="middle"
                     placeholder="邮箱验证，测试阶段"
                     className={
                       "text-sm font-medium text-stone-600 dark:text-stone-400"
                     }
                   />
                 </Form.Item>
+                <Form.Item
+                  name="cap"
+                  rules={[
+                    {
+                      len: 4,
+                      message: "Make sure it's at 4 characters",
+                    },
+                  ]}
+                >
+                  <Input
+                    size="middle"
+                    placeholder="验证码"
+                    className={
+                      "text-sm font-medium text-stone-600 dark:text-stone-400"
+                    }
+                  />
+                </Form.Item>
               </>
             )}
           </div>

app/app/login.scss

@@ -126,3 +126,7 @@ input {
 #set-password-form {
   text-align: right !important;
 }
+
+#login-form .ant-input-group-addon {
+  background-color: white;
+}

app/components/chat.module.scss

@@ -550,8 +550,7 @@
 .chat-input-panel {
   position: relative;
   width: 100%;
-  padding: 20px;
-  padding-top: 10px;
+  padding: 10px 20px 25px;
   box-sizing: border-box;
   flex-direction: column;
   border-top: var(--border-in-light);
@@ -667,6 +666,10 @@
   position: absolute;
   right: 100px;
   bottom: 32px;
+
+  @media only screen and (max-width: 600px) {
+    right: 110px;
+  }
 }
 
 @media only screen and (max-width: 600px) {
@@ -677,4 +680,20 @@
   .chat-input-send {
     bottom: 30px;
   }
+  .bottom-tip {
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+}
+
+.bottom-tip {
+  text-align: center;
+  margin-top: -25px;
+  font-size: .75rem;
+  line-height: 1.5rem;
+  //margin-bottom: .5rem;
+  //padding-top: .5rem;
+  position: relative;
+  z-index: 1;
+  color: #7d7d7d !important;
 }

app/components/chat.tsx

@@ -1786,6 +1786,19 @@ function _Chat() {
           />
         </label>
       </div>
+      <div
+        className={styles["bottom-tip"]}
+        //     style={{
+        //   color: "var(--text-secondary)",
+        //   fontSize: ".75rem",
+        //   lineHeight: "1rem",
+        //   textAlign: "center",
+        //   paddingBottom: ".5rem",
+        //   paddingTop: ".5rem"
+        // }}
+      >
+        <span>AI 也可能会犯错。请核查重要信息。</span>
+      </div>
 
       {showExport && (
         <ExportMessageModal onClose={() => setShowExport(false)} />

app/components/settings.tsx

@@ -677,7 +677,7 @@ export function Settings() {
           </div>
         </div>
       </div>
-      <div className={styles["settings"]}>
+      <div className={styles["settings"]} id="user-settings">
         <List>
           <ListItem title={Locale.Settings.Avatar}>
             <Popover

app/locales/cn.ts

@@ -112,7 +112,7 @@ const cn = {
       if (submitKey === String(SubmitKey.Enter)) {
         inputHints += "，Shift + Enter 换行";
       }
-      return inputHints + "，/ 触发补全，: 触发命令";
+      return inputHints + "，/ 内置提示词";
     },
     Send: "发送",
     Config: {

app/styles/globals.scss

@@ -224,20 +224,20 @@ input[type="range"]::-ms-thumb:hover {
   @include thumbHover();
 }
 
-//input[type="number"],
-//input[type="text"],
-//input[type="password"] {
-//  appearance: none;
-//  border-radius: 10px;
-//  border: var(--border-in-light);
-//  min-height: 36px;
-//  box-sizing: border-box;
-//  background: var(--white);
-//  color: var(--black);
-//  padding: 0 10px;
-//  max-width: 50%;
-//  font-family: inherit;
-//}
+#user-settings {
+  input[type="number"], input[type="text"], input[type="password"] {
+    appearance: none;
+    border-radius: 10px;
+    border: var(--border-in-light);
+    min-height: 36px;
+    box-sizing: border-box;
+    background: var(--white);
+    color: var(--black);
+    padding: 0 10px;
+    max-width: 50%;
+    font-family: inherit;
+  }
+}
 
 div.math {
   overflow-x: auto;