massive fix
Change-Id: I5972893fc44707bddab7d0014b981ac3097238d6
diff --git a/src/app/user/component/userAvatar.tsx b/src/app/user/component/userAvatar.tsx
index ba164de..abc1b66 100644
--- a/src/app/user/component/userAvatar.tsx
+++ b/src/app/user/component/userAvatar.tsx
@@ -1,111 +1,159 @@
-'use client';
+"use client";
-import { useRef, useState } from 'react';
-import { Avatar } from 'primereact/avatar';
-import { Button } from 'primereact/button';
+import { useRef, useState } from "react";
+import { Avatar } from "primereact/avatar";
+import { Button } from "primereact/button";
// 弹窗
-import { Dialog } from 'primereact/dialog';
+import { Dialog } from "primereact/dialog";
// 头像下拉框
-import { OverlayPanel } from 'primereact/overlaypanel';
+import { OverlayPanel } from "primereact/overlaypanel";
// 输入框
import { FloatLabel } from "primereact/floatlabel";
-import { InputText } from 'primereact/inputtext';
+import { InputText } from "primereact/inputtext";
// 页面跳转
-import Link from 'next/link';
+import Link from "next/link";
// 文件上传
-import { FileUpload } from 'primereact/fileupload';
+import { FileUpload } from "primereact/fileupload";
// 通知
-import { Toast } from 'primereact/toast';
+import { Toast } from "primereact/toast";
// 接口传输
-import axios from 'axios';
-import { useLocalStorage } from '../../hook/useLocalStorage';
+import axios from "axios";
+import { useLocalStorage } from "../../hook/useLocalStorage";
// 样式
-import './user-avatar.scss';
+import "./user-avatar.scss";
+
interface User {
- Id: number;
+ Id: number;
+ Avatar: string,
}
+
// 用户下拉框
export default function UserAvatar() {
- const user = useLocalStorage<User>('user');
- const userId: number = user?.Id ?? -1;
+ const user = useLocalStorage<User>("user");
+ const userId: number = user?.Id ?? -1;
+ // 功能选项
+ const op = useRef<OverlayPanel>(null);
+ let hoverTimeout: NodeJS.Timeout;
+ // 通知
+ const toast = useRef<Toast>(null);
+ // 控制三个弹窗可见性
+ const [showEditSignature, setShowEditSignature] = useState(false);
+ const [showEditAvatar, setShowEditAvatar] = useState(false);
+ const [showEditPassword, setShowEditPassword] = useState(false);
+ // 头像URL
+ const [avatarUrl, setAvatar] = useState<string>("");
+ // 签名
+ const [signValue, setSignValue] = useState<string>("");
+ // 新密码
+ const [passwardValue, setPasswardValue] = useState<string>("");
+ const [newPasswardValue, setNewPasswardValue] = useState<string>("");
+ // 老密码
+ const [oldPasswardValue, setOldPasswardValue] = useState<string>("");
- // 功能选项
- const op = useRef<OverlayPanel>(null);
- let hoverTimeout: NodeJS.Timeout;
- // 通知
- const toast = useRef<Toast>(null);
- // 控制三个弹窗可见性
- const [showEditSignature, setShowEditSignature] = useState(false);
- const [showEditAvatar, setShowEditAvatar] = useState(false);
- const [showEditPassword, setShowEditPassword] = useState(false);
- // 头像URL
- const [avatarUrl, setAvatar] = useState<string>('');
- // 签名
- const [signValue, setSignValue] = useState<string>('');
- // 新密码
- const [passwardValue, setPasswardValue] = useState<string>('');
- const [newPasswardValue, setNewPasswardValue] = useState<string>('');
- // 老密码
- const [oldPasswardValue, setOldPasswardValue] = useState<string>('');
+ const handleMouseEnter = (event: React.MouseEvent) => {
+ clearTimeout(hoverTimeout);
+ op.current?.show(event, event.currentTarget);
+ };
+ const handleMouseLeave = () => {
+ hoverTimeout = setTimeout(() => {
+ op.current?.hide();
+ }, 300);
+ };
- const handleMouseEnter = (event: React.MouseEvent) => {
- clearTimeout(hoverTimeout);
- op.current?.show(event, event.currentTarget);
- };
-
- const handleMouseLeave = () => {
- hoverTimeout = setTimeout(() => {
- op.current?.hide();
- }, 300);
- };
-
-
- // 修改密码接口
- const editPassward = async () => {
- try {
- await axios.put(process.env.PUBLIC_URL + `/user/password`, {
- params: { userId, password: oldPasswardValue, newPassword: passwardValue }
- });
- toast.current?.show({ severity: 'success', summary: 'success', detail: '修改密码成功' });
- setShowEditPassword(false);
- } catch (err) {
- console.error('修改密码失败', err);
- toast.current?.show({ severity: 'error', summary: 'error', detail: '修改密码失败' });
- }
+ // 修改密码接口
+ const editPassward = async () => {
+ try {
+ await axios.put(process.env.PUBLIC_URL + `/user/password`, {
+ body: {
+ userId,
+ password: oldPasswardValue,
+ newPassword: passwardValue,
+ },
+ });
+ toast.current?.show({
+ severity: "success",
+ summary: "success",
+ detail: "修改密码成功",
+ });
+ setShowEditPassword(false);
+ } catch (err) {
+ console.error("修改密码失败", err);
+ toast.current?.show({
+ severity: "error",
+ summary: "error",
+ detail: "修改密码失败",
+ });
}
- // 修改签名接口
- const editSign = async () => {
- try {
- await axios.put(process.env.PUBLIC_URL + `/user/signature`, {
- params: { userId, signature: signValue }
- });
- toast.current?.show({ severity: 'success', summary: 'success', detail: '修改签名成功' });
- setShowEditSignature(false);
- } catch (err) {
- console.error('修改签名失败', err);
- toast.current?.show({ severity: 'error', summary: 'error', detail: '修改签名失败' });
- }
- }
+ };
- // 修改头像接口
- const editAvatar = async () => {
- try {
- await axios.put(process.env.PUBLIC_URL + `/user/avatar`, {
- params: { userId, avatar: avatarUrl }
- });
- toast.current?.show({ severity: 'success', summary: 'success', detail: '修改头像成功' });
- setShowEditAvatar(false);
- } catch (err) {
- console.error('修改头像失败', err);
- toast.current?.show({ severity: 'error', summary: 'error', detail: '修改头像失败' });
- }
+ // 修改签名接口
+ const editSign = async () => {
+ try {
+ await axios.put(process.env.PUBLIC_URL + `/user/signature`, {
+ params: { userId, signature: signValue },
+ });
+ toast.current?.show({
+ severity: "success",
+ summary: "success",
+ detail: "修改签名成功",
+ });
+ setShowEditSignature(false);
+ } catch (err) {
+ console.error("修改签名失败", err);
+ toast.current?.show({
+ severity: "error",
+ summary: "error",
+ detail: "修改签名失败",
+ });
}
- return (
+ };
+
+ // 修改头像接口
+ const editAvatar = async () => {
+ try {
+ await axios.put(process.env.PUBLIC_URL + `/user/avatar`, {
+ userId,
+ avatar: avatarUrl,
+ });
+ toast.current?.show({
+ severity: "success",
+ summary: "success",
+ detail: "修改头像成功",
+ });
+ setAvatar(avatarUrl);
+ setShowEditAvatar(false);
+ localStorage.setItem("user", JSON.stringify({...user, Avatar: avatarUrl}))
+ } catch (err) {
+ console.error("修改头像失败", err);
+ toast.current?.show({
+ severity: "error",
+ summary: "error",
+ detail: "修改头像失败",
+ });
+ }
+ };
+ return (
+ <div
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
+ className="user-avatar-wrapper"
+ >
+ <Toast ref={toast}></Toast>
+ <Link href="/user" className="no-underline">
+ <Avatar
+ image={useLocalStorage<User>("user")?.Avatar}
+ size="large"
+ shape="circle"
+ className="user-avatar-link"
+ />
+ </Link>
+
+ <OverlayPanel ref={op} dismissable={false}>
<div
- onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}
- className="user-avatar-wrapper"
+ onMouseEnter={() => clearTimeout(hoverTimeout)}
+ onMouseLeave={handleMouseLeave}
+ className="user-overlay-panel"
>
<Toast ref={toast}></Toast>
<Link href="/user" className="no-underline">
@@ -199,7 +247,7 @@
try {
const res = await axios.post(`${process.env.PUBLIC_URL}/file`, formData);
- const fileUrl = res.data.url;
+ const fileUrl = res.data;
console.log(fileUrl);
setAvatar(fileUrl);
toast.current?.show({ severity: 'success', summary: '上传成功' });
@@ -283,6 +331,179 @@
</div>
</Dialog>
</div>
- );
+ </OverlayPanel>
+ {/* 修改签名弹窗 */}
+ <Dialog
+ header="修改签名"
+ visible={showEditSignature}
+ style={{ width: "30vw" }}
+ onHide={() => {
+ setSignValue("");
+ setShowEditSignature(false);
+ }}
+ modal
+ >
+ <div className="dialog-container">
+ <div className="dialog-input-group">
+ <FloatLabel>
+ <InputText
+ id="username"
+ value={signValue}
+ onChange={(e) => setSignValue(e.target.value)}
+ />
+ <label htmlFor="username">个性签名</label>
+ </FloatLabel>
+ </div>
+ <div className="dialog-button-group">
+ <Button
+ label="确定"
+ className="p-button-sm"
+ onClick={() => editSign()}
+ />
+ <Button
+ label="取消"
+ className="p-button-secondary p-button-sm"
+ onClick={() => {
+ setSignValue("");
+ setShowEditSignature(false);
+ }}
+ />
+ </div>
+ </div>
+ </Dialog>
+
+ {/* 修改头像弹窗 */}
+ <Dialog
+ header="修改头像"
+ visible={showEditAvatar}
+ style={{ display: "flex", flexDirection: "column", width: "30vw" }}
+ onHide={() => {
+ setAvatar("");
+ setShowEditAvatar(false);
+ }}
+ modal
+ >
+ <div className="dialog-container">
+ <FileUpload
+ mode="advanced"
+ name="file"
+ customUpload
+ uploadHandler={async (e) => {
+ const formData = new FormData();
+ formData.append("file", e.files[0]);
+
+ try {
+ const res = await axios.post(
+ `${process.env.PUBLIC_URL}/file`,
+ formData
+ );
+ const fileUrl = res.data;
+ console.log(fileUrl);
+ setAvatar(fileUrl);
+ toast.current?.show({
+ severity: "success",
+ summary: "上传成功",
+ });
+ } catch (error) {
+ console.log(error);
+ toast.current?.show({ severity: "error", summary: "上传失败" });
+ }
+ }}
+ auto
+ accept="image/*"
+ chooseLabel="上传头像"
+ />
+
+ <div className="dialog-button-group">
+ <Button
+ label="确定"
+ className="p-button-sm"
+ onClick={() => editAvatar()}
+ />
+ <Button
+ label="取消"
+ className="p-button-secondary p-button-sm"
+ onClick={() => setShowEditAvatar(false)}
+ />
+ </div>
+ </div>
+ </Dialog>
+
+ {/* 修改密码弹窗 */}
+ <Dialog
+ header="修改密码"
+ visible={showEditPassword}
+ style={{ width: "30vw" }}
+ onHide={() => {
+ setOldPasswardValue("");
+ setPasswardValue("");
+ setNewPasswardValue("");
+ setShowEditPassword(false);
+ }}
+ modal
+ >
+ <div className="dialog-container">
+ <div className="dialog-input-group">
+ <FloatLabel>
+ <InputText
+ id="username"
+ value={oldPasswardValue}
+ onChange={(e) => setOldPasswardValue(e.target.value)}
+ />
+ <label htmlFor="username">输入旧密码</label>
+ </FloatLabel>
+ </div>
+ <div className="dialog-input-group">
+ <FloatLabel>
+ <InputText
+ id="username"
+ value={passwardValue}
+ onChange={(e) => setPasswardValue(e.target.value)}
+ />
+ <label htmlFor="username">更新密码</label>
+ </FloatLabel>
+ </div>
+ <div className="dialog-input-group">
+ <FloatLabel>
+ <InputText
+ id="username"
+ value={newPasswardValue}
+ onChange={(e) => setNewPasswardValue(e.target.value)}
+ />
+ <label htmlFor="username">确认密码</label>
+ </FloatLabel>
+ </div>
+ <div className="dialog-button-group">
+ <Button
+ label="确定"
+ className="p-button-sm"
+ onClick={() => {
+ if (passwardValue !== newPasswardValue) {
+ toast.current?.show({
+ severity: "warn",
+ summary: "两次密码不一致",
+ detail: "请确保新密码和确认密码一致",
+ });
+ return;
+ } else {
+ editPassward();
+ }
+ }}
+ />
+ <Button
+ label="取消"
+ className="p-button-secondary p-button-sm"
+ onClick={() => {
+ setOldPasswardValue("");
+ setPasswardValue("");
+ setNewPasswardValue("");
+ setShowEditPassword(false);
+ }}
+ />
+ </div>
+ </div>
+ </Dialog>
+ </div>
+ );
}