improve: code style and some subtle changes

packages/next/app/signup/SignUpForm.tsx

@@ -143,8 +143,8 @@ const SignUpForm: React.FC<RegistrationFormProps> = ({ backendURL }) => {
 			/>
 			<button
 				className="bg-primary dark:bg-dark-primary text-on-primary dark:text-dark-on-primary duration-150
-        rounded-full hover:bg-on-primary-container hover:dark:bg-dark-on-primary-container mt-2
+                    rounded-full hover:bg-on-primary-container hover:dark:bg-dark-on-primary-container mt-2
-        flex items-center text-sm leading-5 justify-center h-10 w-full"
+                    flex items-center text-sm leading-5 justify-center h-10 w-full"
 				type="submit"
 				disabled={loading}
 			>

packages/next/app/signup/page.tsx

@@ -11,7 +11,7 @@ export default function SignupPage() {
 			>
 				<p className="mb-2">
 					<a href="/">
-						<LeftArrow className="inline -translate-y-[0.1rem] scale-90" aria-hidden="true" />
+						<LeftArrow className="inline -translate-y-0.5 scale-90 mr-1" aria-hidden="true" />
 						首页
 					</a>
 				</p>
@@ -30,10 +30,10 @@ export default function SignupPage() {
 					已有账户？
 					<a href="/login">
 						<span>登录</span>
-						<RightArrow className="text-xs inline -translate-y-0.5" aria-hidden="true" />
+						<RightArrow className="text-xs inline -translate-y-0.5 ml-1" aria-hidden="true" />
 					</a>
 				</p>
-				<SignUpForm backendURL={process.env.BACKEND_URL} />
+				<SignUpForm backendURL={process.env.BACKEND_URL ?? ""} />
 			</div>
 		</main>
 	);

packages/next/components/shell/Header.tsx

@@ -35,7 +35,7 @@ export const HeaderDestop = () => {
 				className="inline-flex relative gap-6 h-full lg:right-12
     				text-xl font-medium items-center w-[15rem] min-w-[8rem] mr-4 lg:mr-0 lg:w-[305px] justify-end"
 			>
-				<a href="/register">注册</a>
+				<a href="/signup">注册</a>
 				<a href="/about">关于</a>
 			</div>
 		</div>
@@ -71,7 +71,7 @@ export const HeaderMobile = () => {
 							</a>
 						</div>
 						<div className="w-full h-14 flex items-center px-4">
-							<a href="/register" className="flex">
+							<a href="/signup" className="flex">
 								<RegisterIcon className="text-2xl pr-4" />
 								<span>注册</span>
 							</a>

packages/next/components/ui/TextField.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+
+.border-middle-idle-empty {
+	@apply border-y-[1px];
+}
+
+.border-middle-idle {
+	@apply border-y-[1px] border-t-0;
+}
+
+.border-middle-focus {
+	@apply border-primary dark:border-dark-primary border-y-2 border-t-0;
+}

packages/next/components/ui/TextField.tsx

@@ -9,9 +9,10 @@ interface InputProps extends React.HTMLAttributes<HTMLDivElement> {
 	onInputTextChange?: (value: string) => void;
 	maxChar?: number;
 	supportingText?: string;
+	variant: "filled" | "outlined" | "standard";
 }
 
-const TextField: React.FC<InputProps> = ({
+const OutlineTextField: React.FC<InputProps> = ({
 	labelText = "",
 	type = "text",
 	inputText: initialInputText = "",
@@ -35,23 +36,28 @@ const TextField: React.FC<InputProps> = ({
 				<div className="absolute flex top-0 left-0 h-full w-full">
 					<div
 						className={`w-3 rounded-l-sm border-outline dark:border-dark-outline
-				${focus ? "border-primary dark:border-dark-primary border-l-2 border-y-2" : "border-l-[1px] border-y-[1px] "}
+            				${
-			`}
+								focus
+									? "border-primary dark:border-dark-primary border-l-2 border-y-2"
+									: "border-l-[1px] border-y-[1px] "
+							}
+         			`}
 					></div>
 
 					<div
 						className={`px-1 border-outline dark:border-dark-outline transition-none
-				${!focus && !inputText ? "border-y-[1px]" : ""}
+							${!focus && !inputText ? "border-y-[1px]" : ""}
-				${!focus && inputText ? "border-y-[1px] border-t-0" : ""}
+							${!focus && inputText ? "border-y-[1px] border-t-0" : ""}
-				${focus ? "border-primary dark:border-dark-primary border-y-2 border-t-0" : ""}
+							${focus ? "border-primary dark:border-dark-primary border-y-2 border-t-0" : ""}
-			`}
+						`}
 					>
 						<span
 							className={`
-					relative leading-6 text-base text-on-surface-variant dark:text-dark-on-surface-variant duration-150
+								relative leading-6 text-base text-on-surface-variant 
-					${focus || inputText ? "-top-3 text-xs leading-4" : "top-4"}
+								dark:text-dark-on-surface-variant duration-150
-					${focus ? "text-primary dark:text-dark-primary" : ""}
+								${focus || inputText ? "-top-3 text-xs leading-4" : "top-4"}
-				`}
+								${focus ? "text-primary dark:text-dark-primary" : ""}
+							`}
 						>
 							{labelText}
 						</span>
@@ -59,8 +65,10 @@ const TextField: React.FC<InputProps> = ({
 
 					<div
 						className={`flex-grow rounded-r-sm border-outline dark:border-dark-outline
-					${focus ? "border-primary dark:border-dark-primary border-r-2 border-y-2" : "border-r-[1px] border-y-[1px] "}
+							${focus ? 
-			`}
+							"border-primary dark:border-dark-primary border-r-2 border-y-2" : 
+							"border-r-[1px] border-y-[1px] "}
+						`}
 					></div>
 				</div>
 
@@ -75,12 +83,12 @@ const TextField: React.FC<InputProps> = ({
 			</div>
 			{(supportingText || maxChar) && (
 				<div
-					className="w-full relative mt-1 text-on-surface-variant dark:text-dark-on-surface-variant
+					className="w-full relative mt-1 text-on-surface-variant 
-		 	text-xs leading-4 h-4"
+					dark:text-dark-on-surface-variant text-xs leading-4 h-4"
 				>
 					{supportingText && <span className="absolute left-4">{supportingText}</span>}
 					{maxChar && (
-						<span className="absolute right-4">
+						<span className={`absolute right-4 ${inputText.length > maxChar ? "text-red-500" : ""}`}>
 							{inputText.length}/{maxChar}
 						</span>
 					)}
@@ -90,4 +98,10 @@ const TextField: React.FC<InputProps> = ({
 	);
 };
 
+const TextField: React.FC<InputProps> = (props) => {
+	if (!props.variant || props.variant === "outlined") {
+		return <OutlineTextField {...props} />;
+	}
+};
+
 export default TextField;

packages/next/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-	/* config options here */
+	devIndicators: false
 };
 
 export default nextConfig;