alikia2x/cvsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve: code style and some subtle changes

Browse Source
This commit is contained in:
alikia2x (寒寒) 2025-05-25 03:15:10 +08:00
parent 6b93a781b7
commit cbd46d4030
Signed by: alikia2x
GPG Key ID: 56209E0CCD8420C6
6 changed files with 51 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/next/app/signup/SignUpForm.tsx
View File

@ -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
flex items-center text-sm leading-5 justify-center h-10 w-full"
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"
type="submit"
disabled={loading}
>

6
packages/next/app/signup/page.tsx
View File

@ -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>
);

4
packages/next/components/shell/Header.tsx
View File

@ -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>

13
packages/next/components/ui/TextField.css Normal file
View File

@ -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;
}

46
packages/next/components/ui/TextField.tsx
View File

@ -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] border-t-0" : ""}
${focus ? "border-primary dark:border-dark-primary border-y-2 border-t-0" : ""}
`}
${!focus && !inputText ? "border-y-[1px]" : ""}
${!focus && inputText ? "border-y-[1px] 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
${focus || inputText ? "-top-3 text-xs leading-4" : "top-4"}
${focus ? "text-primary dark:text-dark-primary" : ""}
`}
relative leading-6 text-base text-on-surface-variant
dark:text-dark-on-surface-variant duration-150
${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
text-xs leading-4 h-4"
className="w-full relative mt-1 text-on-surface-variant
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;

2
packages/next/next.config.ts
View File

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