feat: nickname

src/components/index.ts

@@ -10,6 +10,7 @@ export { default as Logout } from './user/Logout';
 export { default as ChartUploader } from './user/ChartUploader';
 export { default as AvatarUploader } from './user/AvatarUploader';
 export { default as IntroUploader } from './user/IntroUploader';
+export { default as NicknameEditor } from './user/NicknameEditor';
 
 // UI组件
 export { default as MajdataLogo } from './header/MajdataLogo';

src/components/user/NicknameEditor.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import axios from 'axios';
+import { endpoints } from '@/config/api';
+import { useLoc, useUserContext } from '@/hooks';
+import { getDisplayMessage } from '@/utils';
+
+export default function NicknameEditor() {
+  const loc = useLoc();
+  const { user } = useUserContext();
+  const [nickname, setNickname] = useState(user?.nickname || '');
+  const [isUploading, setIsUploading] = useState(false);
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const formData = new FormData(event.currentTarget);
+    const content = formData.get('content') as string;
+
+    if (!content || content.trim() === '') {
+      toast.error(loc('NicknameRequired', 'Please enter a nickname'));
+      return;
+    }
+
+    const uploading = toast.loading(loc('Uploading'), {
+      hideProgressBar: false,
+    });
+
+    setIsUploading(true);
+
+    try {
+      await axios.post(endpoints.account.nickname, { content }, {
+        withCredentials: true,
+      });
+      toast.success(loc('UploadSuccess', 'Nickname updated successfully'));
+    } catch (e: unknown) {
+      const error = e as { response?: { data?: unknown }; message?: string };
+      const message = getDisplayMessage(
+        error.response?.data ?? error.message,
+        loc('UploadFailed', 'Update failed'),
+      );
+      toast.error(message, { autoClose: false });
+    } finally {
+      toast.done(uploading);
+      setIsUploading(false);
+    }
+  }
+
+  return (
+    <form className="flex flex-col" onSubmit={onSubmit}>
+      <p className="mb-3 text-[#a0a0a0] text-sm leading-relaxed">
+        {loc('NicknameHint', 'Your display name shown across the site.')}
+      </p>
+      <div className="flex gap-3 items-start">
+        <input
+          className="bg-black shadow-[inset_0_1px_3px_rgba(0,0,0,0.5)] px-4 py-2.5 border border-white/15 focus:border-[#3b82f6] rounded-lg focus:outline-none w-full max-w-md font-['Consolas',monospace] text-white text-sm caret-white transition-colors"
+          name="content"
+          type="text"
+          maxLength={24}
+          placeholder={loc('NicknamePlaceholder', 'Enter nickname...')}
+          value={nickname}
+          onChange={(e) => setNickname(e.target.value)}
+          disabled={isUploading}
+        />
+        <button
+          className="hover:bg-[#3b82f6] bg-[#3b82f6]/80 disabled:bg-[rgb(92,0,0)] px-6 py-2.5 rounded-lg font-medium text-sm text-white transition-colors cursor-pointer disabled:cursor-not-allowed"
+          type="submit"
+          disabled={isUploading}
+        >
+          {isUploading ? loc('UploadingPlzWait') : loc('Save', 'Save')}
+        </button>
+      </div>
+    </form>
+  );
+}

src/config/api.ts

@@ -23,6 +23,7 @@ export const endpoints = {
     diff: `${apiroot3}/account/favorite/collection/diff`,
   },
   account: {
+    nickname: `${apiroot3}/account/nickname/`,
     info: `${apiroot3}/account/info/`,
     login: `${apiroot3}/account/Login`,
     logout: `${apiroot3}/account/Logout`,

src/pages/user/ProfilePage.tsx

@@ -1,4 +1,4 @@
-import { PageLayout, AvatarUploader, IntroUploader } from '@/components';
+import { PageLayout, AvatarUploader, IntroUploader, NicknameEditor } from '@/components';
 import { useLoc } from '@/hooks';
 import { motion, type Variants } from 'framer-motion';
 
@@ -29,6 +29,18 @@ export default function UserProfilePage() {
         variants={slideInUp}
       >
         <div className="flex flex-col gap-8 mx-auto my-0 w-full">
+          {/* Nickname Card */}
+          <div className="bg-[rgba(30,30,30,0.9)] hover:shadow-[0_8px_25px_rgba(0,0,0,0.3)] backdrop-blur-[10px] px-10 py-10 border border-white/10 hover:border-[rgba(59,130,246,0.5)] rounded-2xl min-h-50 transition-all hover:-translate-y-0.5 duration-300">
+            <div className="flex items-center gap-4 mb-6 pb-4 border-white/10 border-b">
+              <div className="font-semibold text-[#e5e5e5] text-xl">
+                {loc('Nickname', 'Nickname')}
+              </div>
+            </div>
+            <div className="min-h-37.5">
+              <NicknameEditor />
+            </div>
+          </div>
+
           {/* Avatar Settings Card */}
           <div className="bg-[rgba(30,30,30,0.9)] hover:shadow-[0_8px_25px_rgba(0,0,0,0.3)] backdrop-blur-[10px] px-10 py-10 border border-white/10 hover:border-[rgba(59,130,246,0.5)] rounded-2xl min-h-50 transition-all hover:-translate-y-0.5 duration-300">
             <div className="flex items-center gap-4 mb-6 pb-4 border-white/10 border-b">

src/types/user.ts

@@ -6,5 +6,7 @@
 export interface UserInfo {
   username: string;
   email?: string;
+  joinDate: string;
+  nickname: string;
   // 根据实际API返回添加更多字段
 }