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>
+ );
}
diff --git a/src/app/user/manage/resources/page.tsx b/src/app/user/manage/resources/page.tsx
index 4d0d03f..0bfa184 100644
--- a/src/app/user/manage/resources/page.tsx
+++ b/src/app/user/manage/resources/page.tsx
@@ -195,7 +195,7 @@
<Card key={resourceList.resourceId} className="resources-list-card"
onClick={() => router.push(`/resource/resource-detail/${resourceList.resourceId}`)}>
<Image alt="avatar"
- src={process.env.NEXT_PUBLIC_NGINX_URL + "resource/" + resourceList.resourcePicture}
+ src={ "resource/" + resourceList.resourcePicture}
className="resource-avatar" width="250" height="140" />
<div className="resource-header">
<div className="resource-content">
diff --git a/src/app/user/page.tsx b/src/app/user/page.tsx
index d534cd5..986f6ec 100644
--- a/src/app/user/page.tsx
+++ b/src/app/user/page.tsx
@@ -508,7 +508,7 @@
{/*个人信息*/}
<div className="user-profile-card">
<Avatar
- image={`${process.env.NEXT_PUBLIC_NGINX_URL}/users/${userInfo?.avatar}`}
+ image={userInfo?.avatar}
className="user-avatar"
shape="circle"
/>
@@ -560,7 +560,7 @@
{resourceList.map((resourceList) => (
<Card key={resourceList.resourceId} className="resource-card" onClick={() => router.push(`/resource/resource-detail/${resourceList.resourceId}`)}>
<Image
- src={process.env.NEXT_PUBLIC_NGINX_URL + resourceList.resourcePicture}
+ src={ resourceList.resourcePicture}
alt={resourceList.resourceName}
width="368"
height="200"
@@ -591,7 +591,7 @@
{homePageThread?.records.map((homePageThread) => (
<Card key={homePageThread.threadId} className="resource-card" onClick={() => router.push(`/community/thread-detail/${homePageThread.threadId}`)}>
<Image
- src={process.env.NEXT_PUBLIC_NGINX_URL + homePageThread.threadPicture}
+ src={ homePageThread.threadPicture}
alt={homePageThread.title}
width="368"
height="200"
@@ -619,7 +619,7 @@
{threadList.map((threadList) => (
<Card key={threadList.threadId} className="resource-card" onClick={() => router.push(`/community/thread-detail/${threadList.threadId}`)}>
<Image
- src={process.env.NEXT_PUBLIC_NGINX_URL + threadList.threadPicture}
+ src={ threadList.threadPicture}
alt={threadList.title}
width="368"
height="200"
@@ -663,7 +663,7 @@
<Card key={rewardItem.rewardId} className="resources-list-card"
onClick={() => router.push(`/reward/reward-detail/${rewardItem.rewardId}`)}>
<Image alt="avatar"
- src={process.env.NEXT_PUBLIC_NGINX_URL + "rewards/" + rewardItem.rewardPicture}
+ src={ "rewards/" + rewardItem.rewardPicture}
className="resource-avatar" width="250" height="140"/>
<div className="resource-header">
<div className="resource-content">