Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc
This commit is contained in:
commit
b3c1f82c4b
|
@ -22,6 +22,12 @@ export class PostQueueService implements OnModuleInit {
|
||||||
EventBus.on('updatePostState', ({ id }) => {
|
EventBus.on('updatePostState', ({ id }) => {
|
||||||
this.addUpdatePostState({ id });
|
this.addUpdatePostState({ id });
|
||||||
});
|
});
|
||||||
|
EventBus.on('updatePostState', ({ id }) => {
|
||||||
|
this.addUpdatePostState({ id });
|
||||||
|
});
|
||||||
|
EventBus.on('updateTotalCourseViewCount', ({ visitType }) => {
|
||||||
|
this.addUpdateTotalCourseViewCount({ visitType });
|
||||||
|
});
|
||||||
}
|
}
|
||||||
async addUpdateVisitCountJob(data: updateVisitCountJobData) {
|
async addUpdateVisitCountJob(data: updateVisitCountJobData) {
|
||||||
this.logger.log(`update post view count ${data.id}`);
|
this.logger.log(`update post view count ${data.id}`);
|
||||||
|
@ -37,4 +43,14 @@ export class PostQueueService implements OnModuleInit {
|
||||||
debounce: { id: `${QueueJobType.UPDATE_POST_STATE}_${data.id}` },
|
debounce: { id: `${QueueJobType.UPDATE_POST_STATE}_${data.id}` },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
async addUpdateTotalCourseViewCount({ visitType }) {
|
||||||
|
this.logger.log(`update post state ${visitType}`);
|
||||||
|
await this.generalQueue.add(
|
||||||
|
QueueJobType.UPDATE_TOTAL_COURSE_VIEW_COUNT,
|
||||||
|
{ type: visitType },
|
||||||
|
{
|
||||||
|
debounce: { id: `${QueueJobType.UPDATE_POST_STATE}_${visitType}` },
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,48 @@
|
||||||
import { db, VisitType } from '@nice/common';
|
import {
|
||||||
|
AppConfigSlug,
|
||||||
|
BaseSetting,
|
||||||
|
db,
|
||||||
|
PostType,
|
||||||
|
TaxonomySlug,
|
||||||
|
VisitType,
|
||||||
|
} from '@nice/common';
|
||||||
|
export async function updateTotalCourseViewCount(type: VisitType) {
|
||||||
|
const courses = await db.post.findMany({
|
||||||
|
where: { type: PostType.COURSE },
|
||||||
|
select: { id: true },
|
||||||
|
});
|
||||||
|
const courseIds = courses.map((course) => course.id);
|
||||||
|
const totalViews = await db.visit.aggregate({
|
||||||
|
_sum: {
|
||||||
|
views: true,
|
||||||
|
},
|
||||||
|
where: {
|
||||||
|
postId: { in: courseIds },
|
||||||
|
type: type,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const appConfig = await db.appConfig.findFirst({
|
||||||
|
where: {
|
||||||
|
slug: AppConfigSlug.BASE_SETTING,
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
meta: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const baseSeting = appConfig.meta as BaseSetting;
|
||||||
|
await db.appConfig.update({
|
||||||
|
where: {
|
||||||
|
slug: AppConfigSlug.BASE_SETTING,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
meta: {
|
||||||
|
...baseSeting,
|
||||||
|
reads: totalViews,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
export async function updatePostViewCount(id: string, type: VisitType) {
|
export async function updatePostViewCount(id: string, type: VisitType) {
|
||||||
const post = await db.post.findFirst({
|
const post = await db.post.findFirst({
|
||||||
where: { id },
|
where: { id },
|
||||||
|
|
|
@ -4,6 +4,7 @@ export enum QueueJobType {
|
||||||
FILE_PROCESS = 'file_process',
|
FILE_PROCESS = 'file_process',
|
||||||
UPDATE_POST_VISIT_COUNT = 'updatePostVisitCount',
|
UPDATE_POST_VISIT_COUNT = 'updatePostVisitCount',
|
||||||
UPDATE_POST_STATE = 'updatePostState',
|
UPDATE_POST_STATE = 'updatePostState',
|
||||||
|
UPDATE_TOTAL_COURSE_VIEW_COUNT = 'updateTotalCourseViewCount',
|
||||||
}
|
}
|
||||||
export type updateVisitCountJobData = {
|
export type updateVisitCountJobData = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
|
@ -11,7 +11,10 @@ import {
|
||||||
updateCourseReviewStats,
|
updateCourseReviewStats,
|
||||||
updateParentLectureStats,
|
updateParentLectureStats,
|
||||||
} from '@server/models/post/utils';
|
} from '@server/models/post/utils';
|
||||||
import { updatePostViewCount } from '../models/post/utils';
|
import {
|
||||||
|
updatePostViewCount,
|
||||||
|
updateTotalCourseViewCount,
|
||||||
|
} from '../models/post/utils';
|
||||||
const logger = new Logger('QueueWorker');
|
const logger = new Logger('QueueWorker');
|
||||||
export default async function processJob(job: Job<any, any, QueueJobType>) {
|
export default async function processJob(job: Job<any, any, QueueJobType>) {
|
||||||
try {
|
try {
|
||||||
|
@ -51,6 +54,9 @@ export default async function processJob(job: Job<any, any, QueueJobType>) {
|
||||||
if (job.name === QueueJobType.UPDATE_POST_STATE) {
|
if (job.name === QueueJobType.UPDATE_POST_STATE) {
|
||||||
await updatePostViewCount(job.data.id, job.data.type);
|
await updatePostViewCount(job.data.id, job.data.type);
|
||||||
}
|
}
|
||||||
|
if (job.name === QueueJobType.UPDATE_TOTAL_COURSE_VIEW_COUNT) {
|
||||||
|
await updateTotalCourseViewCount(job.data.type);
|
||||||
|
}
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
logger.error(
|
logger.error(
|
||||||
`Error processing stats update job: ${error.message}`,
|
`Error processing stats update job: ${error.message}`,
|
||||||
|
|
|
@ -21,6 +21,9 @@ type Events = {
|
||||||
updatePostState: {
|
updatePostState: {
|
||||||
id: string;
|
id: string;
|
||||||
};
|
};
|
||||||
|
updateTotalCourseViewCount: {
|
||||||
|
visitType: VisitType | string;
|
||||||
|
};
|
||||||
onMessageCreated: { data: Partial<MessageDto> };
|
onMessageCreated: { data: Partial<MessageDto> };
|
||||||
dataChanged: { type: string; operation: CrudOperation; data: any };
|
dataChanged: { type: string; operation: CrudOperation; data: any };
|
||||||
};
|
};
|
||||||
|
|
|
@ -116,6 +116,13 @@ export default function BaseSettingPage() {
|
||||||
<Input></Input>
|
<Input></Input>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="p-2 grid grid-cols-8 gap-2 border-b">
|
||||||
|
<Form.Item
|
||||||
|
label="运维单位"
|
||||||
|
name={["appConfig", "slides"]}>
|
||||||
|
<Input></Input>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
{/* <div
|
{/* <div
|
||||||
className="p-2 border-b flex items-center justify-between"
|
className="p-2 border-b flex items-center justify-between"
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { Input, Layout, Avatar, Button, Dropdown } from "antd";
|
||||||
import { EditFilled, SearchOutlined, UserOutlined } from "@ant-design/icons";
|
import { EditFilled, SearchOutlined, UserOutlined } from "@ant-design/icons";
|
||||||
import { useAuth } from "@web/src/providers/auth-provider";
|
import { useAuth } from "@web/src/providers/auth-provider";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { UserMenu } from "./UserMenu";
|
import { UserMenu } from "./UserMenu/UserMenu";
|
||||||
import { NavigationMenu } from "./NavigationMenu";
|
import { NavigationMenu } from "./NavigationMenu";
|
||||||
|
|
||||||
const { Header } = Layout;
|
const { Header } = Layout;
|
||||||
|
@ -35,10 +35,12 @@ export function MainHeader() {
|
||||||
className="w-72 rounded-full"
|
className="w-72 rounded-full"
|
||||||
value={searchValue}
|
value={searchValue}
|
||||||
onChange={(e) => setSearchValue(e.target.value)}
|
onChange={(e) => setSearchValue(e.target.value)}
|
||||||
onPressEnter={(e)=>{
|
onPressEnter={(e) => {
|
||||||
//console.log(e)
|
//console.log(e)
|
||||||
setSearchValue('')
|
setSearchValue("");
|
||||||
navigate(`/courses/?searchValue=${searchValue}`)
|
navigate(
|
||||||
|
`/courses/?searchValue=${searchValue}`
|
||||||
|
);
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -54,18 +56,7 @@ export function MainHeader() {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{isAuthenticated ? (
|
{isAuthenticated ? (
|
||||||
<Dropdown
|
<UserMenu />
|
||||||
overlay={<UserMenu />}
|
|
||||||
trigger={["click"]}
|
|
||||||
placement="bottomRight">
|
|
||||||
<Avatar
|
|
||||||
size="large"
|
|
||||||
className="cursor-pointer hover:scale-105 transition-all bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold">
|
|
||||||
{(user?.showname ||
|
|
||||||
user?.username ||
|
|
||||||
"")[0]?.toUpperCase()}
|
|
||||||
</Avatar>
|
|
||||||
</Dropdown>
|
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => navigate("/login")}
|
onClick={() => navigate("/login")}
|
||||||
|
|
|
@ -1,70 +0,0 @@
|
||||||
import { Avatar, Menu, Dropdown } from "antd";
|
|
||||||
import {
|
|
||||||
LogoutOutlined,
|
|
||||||
SettingOutlined,
|
|
||||||
UserAddOutlined,
|
|
||||||
UserSwitchOutlined,
|
|
||||||
} from "@ant-design/icons";
|
|
||||||
import { useAuth } from "@web/src/providers/auth-provider";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
|
|
||||||
export const UserMenu = () => {
|
|
||||||
const { isAuthenticated, logout, user } = useAuth();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu className="w-48">
|
|
||||||
{isAuthenticated ? (
|
|
||||||
<>
|
|
||||||
<Menu.Item key="profile" className="px-4 py-2">
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<Avatar className="bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold">
|
|
||||||
{(user?.showname ||
|
|
||||||
user?.username ||
|
|
||||||
"")[0]?.toUpperCase()}
|
|
||||||
</Avatar>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="font-medium">
|
|
||||||
{user?.showname || user?.username}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{user?.department?.name || user?.officerId}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Divider />
|
|
||||||
<Menu.Item
|
|
||||||
key="user-settings"
|
|
||||||
icon={<UserSwitchOutlined />}
|
|
||||||
className="px-4">
|
|
||||||
个人设置
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item
|
|
||||||
key="settings"
|
|
||||||
icon={<SettingOutlined />}
|
|
||||||
onClick={() => {
|
|
||||||
navigate("/admin/staff");
|
|
||||||
}}
|
|
||||||
className="px-4">
|
|
||||||
后台管理
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item
|
|
||||||
key="logout"
|
|
||||||
icon={<LogoutOutlined />}
|
|
||||||
onClick={async () => await logout()}
|
|
||||||
className="px-4 text-red-500 hover:text-red-600 hover:bg-red-50">
|
|
||||||
退出登录
|
|
||||||
</Menu.Item>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Menu.Item
|
|
||||||
key="login"
|
|
||||||
onClick={() => navigate("/login")}
|
|
||||||
className="px-4 text-blue-500 hover:text-blue-600 hover:bg-blue-50">
|
|
||||||
登录/注册
|
|
||||||
</Menu.Item>
|
|
||||||
)}
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
};
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
import { Button, Drawer, Modal } from "antd";
|
||||||
|
import React, { useContext, useEffect, useState } from "react";
|
||||||
|
|
||||||
|
import { UserEditorContext } from "./UserMenu";
|
||||||
|
import UserForm from "./UserForm";
|
||||||
|
|
||||||
|
export default function UserEditModal() {
|
||||||
|
const { formLoading, modalOpen, setModalOpen, form } =
|
||||||
|
useContext(UserEditorContext);
|
||||||
|
const handleOk = () => {
|
||||||
|
form.submit();
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
width={400}
|
||||||
|
onOk={handleOk}
|
||||||
|
centered
|
||||||
|
open={modalOpen}
|
||||||
|
confirmLoading={formLoading}
|
||||||
|
onCancel={() => {
|
||||||
|
setModalOpen(false);
|
||||||
|
}}
|
||||||
|
title={"编辑个人信息"}>
|
||||||
|
<UserForm />
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,170 @@
|
||||||
|
import { Button, Form, Input, Spin, Switch, message } from "antd";
|
||||||
|
import { useContext, useEffect } from "react";
|
||||||
|
import { useStaff } from "@nice/client";
|
||||||
|
import DepartmentSelect from "@web/src/components/models/department/department-select";
|
||||||
|
import { api } from "@nice/client";
|
||||||
|
|
||||||
|
import { useAuth } from "@web/src/providers/auth-provider";
|
||||||
|
import AvatarUploader from "@web/src/components/common/uploader/AvatarUploader";
|
||||||
|
import { StaffDto } from "@nice/common";
|
||||||
|
import { UserEditorContext } from "./UserMenu";
|
||||||
|
import toast from "react-hot-toast";
|
||||||
|
export default function StaffForm() {
|
||||||
|
const { user } = useAuth();
|
||||||
|
const { create, update } = useStaff(); // Ensure you have these methods in your hooks
|
||||||
|
const {
|
||||||
|
formLoading,
|
||||||
|
modalOpen,
|
||||||
|
setModalOpen,
|
||||||
|
domainId,
|
||||||
|
setDomainId,
|
||||||
|
form,
|
||||||
|
setFormLoading,
|
||||||
|
} = useContext(UserEditorContext);
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
isLoading,
|
||||||
|
}: {
|
||||||
|
data: StaffDto;
|
||||||
|
isLoading: boolean;
|
||||||
|
} = api.staff.findFirst.useQuery(
|
||||||
|
{ where: { id: user?.id } },
|
||||||
|
{ enabled: !!user?.id }
|
||||||
|
);
|
||||||
|
const { isRoot } = useAuth();
|
||||||
|
async function handleFinish(values: any) {
|
||||||
|
const {
|
||||||
|
username,
|
||||||
|
showname,
|
||||||
|
deptId,
|
||||||
|
domainId,
|
||||||
|
password,
|
||||||
|
phoneNumber,
|
||||||
|
officerId,
|
||||||
|
enabled,
|
||||||
|
avatar,
|
||||||
|
photoUrl,
|
||||||
|
email,
|
||||||
|
rank,
|
||||||
|
office,
|
||||||
|
} = values;
|
||||||
|
setFormLoading(true);
|
||||||
|
try {
|
||||||
|
if (data && user?.id) {
|
||||||
|
await update.mutateAsync({
|
||||||
|
where: { id: data.id },
|
||||||
|
data: {
|
||||||
|
username,
|
||||||
|
deptId,
|
||||||
|
showname,
|
||||||
|
domainId,
|
||||||
|
password,
|
||||||
|
phoneNumber,
|
||||||
|
officerId,
|
||||||
|
enabled,
|
||||||
|
avatar,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
toast.success("提交成功");
|
||||||
|
setModalOpen(false);
|
||||||
|
} catch (err: any) {
|
||||||
|
toast.error(err.message);
|
||||||
|
} finally {
|
||||||
|
setFormLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
form.resetFields();
|
||||||
|
if (data) {
|
||||||
|
form.setFieldValue("username", data.username);
|
||||||
|
form.setFieldValue("showname", data.showname);
|
||||||
|
form.setFieldValue("domainId", data.domainId);
|
||||||
|
form.setFieldValue("deptId", data.deptId);
|
||||||
|
form.setFieldValue("officerId", data.officerId);
|
||||||
|
form.setFieldValue("phoneNumber", data.phoneNumber);
|
||||||
|
form.setFieldValue("enabled", data.enabled);
|
||||||
|
form.setFieldValue("enabled", data.avatar);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (!data && domainId) {
|
||||||
|
// form.setFieldValue("domainId", domainId);
|
||||||
|
// form.setFieldValue("deptId", domainId);
|
||||||
|
// }
|
||||||
|
// }, [domainId, data as any]);
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
{isLoading && (
|
||||||
|
<div className="absolute h-full inset-0 flex items-center justify-center bg-white bg-opacity-50 z-10">
|
||||||
|
<Spin />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Form
|
||||||
|
disabled={isLoading}
|
||||||
|
form={form}
|
||||||
|
layout="vertical"
|
||||||
|
requiredMark="optional"
|
||||||
|
autoComplete="off"
|
||||||
|
onFinish={handleFinish}>
|
||||||
|
<div className=" flex items-center gap-4 mb-2">
|
||||||
|
<div>
|
||||||
|
<Form.Item name={"avatar"} label="头像" noStyle>
|
||||||
|
<AvatarUploader
|
||||||
|
placeholder="点击上传头像"
|
||||||
|
className="rounded-lg"
|
||||||
|
style={{
|
||||||
|
width: "120px",
|
||||||
|
height: "150px",
|
||||||
|
}}></AvatarUploader>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-2 flex-1">
|
||||||
|
<Form.Item
|
||||||
|
noStyle
|
||||||
|
rules={[{ required: true }]}
|
||||||
|
name={"showname"}
|
||||||
|
label="名称">
|
||||||
|
<Input
|
||||||
|
placeholder="请输入名称"
|
||||||
|
allowClear
|
||||||
|
autoComplete="new-name" // 使用非标准的自动完成值
|
||||||
|
spellCheck={false}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
name={"domainId"}
|
||||||
|
label="所属域"
|
||||||
|
noStyle
|
||||||
|
rules={[{ required: true }]}>
|
||||||
|
<DepartmentSelect
|
||||||
|
placeholder="选择域"
|
||||||
|
onChange={(value) => {
|
||||||
|
setDomainId(value as string);
|
||||||
|
}}
|
||||||
|
domain={true}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
noStyle
|
||||||
|
name={"deptId"}
|
||||||
|
label="所属单位"
|
||||||
|
rules={[{ required: true }]}>
|
||||||
|
<DepartmentSelect rootId={domainId} />
|
||||||
|
</Form.Item>
|
||||||
|
|
||||||
|
<Form.Item noStyle label="密码" name={"password"}>
|
||||||
|
<Input.Password
|
||||||
|
placeholder="修改密码"
|
||||||
|
spellCheck={false}
|
||||||
|
visibilityToggle
|
||||||
|
autoComplete="new-password"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,252 @@
|
||||||
|
import { useClickOutside } from "@web/src/hooks/useClickOutside";
|
||||||
|
import { useAuth } from "@web/src/providers/auth-provider";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import React, {
|
||||||
|
useState,
|
||||||
|
useRef,
|
||||||
|
useCallback,
|
||||||
|
useMemo,
|
||||||
|
createContext,
|
||||||
|
} from "react";
|
||||||
|
import { Avatar } from "@web/src/components/common/element/Avatar";
|
||||||
|
import {
|
||||||
|
UserOutlined,
|
||||||
|
SettingOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
} from "@ant-design/icons";
|
||||||
|
import { FormInstance, Spin } from "antd";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { MenuItemType } from "./types";
|
||||||
|
import { RolePerms } from "@nice/common";
|
||||||
|
import { useForm } from "antd/es/form/Form";
|
||||||
|
import UserEditModal from "./UserEditModal";
|
||||||
|
const menuVariants = {
|
||||||
|
hidden: { opacity: 0, scale: 0.95, y: -10 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
scale: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: {
|
||||||
|
type: "spring",
|
||||||
|
stiffness: 300,
|
||||||
|
damping: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
exit: {
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.95,
|
||||||
|
y: -10,
|
||||||
|
transition: {
|
||||||
|
duration: 0.2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const UserEditorContext = createContext<{
|
||||||
|
domainId: string;
|
||||||
|
setDomainId: React.Dispatch<React.SetStateAction<string>>;
|
||||||
|
modalOpen: boolean;
|
||||||
|
setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
|
form: FormInstance<any>;
|
||||||
|
formLoading: boolean;
|
||||||
|
setFormLoading: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
|
}>({
|
||||||
|
modalOpen: false,
|
||||||
|
domainId: undefined,
|
||||||
|
setDomainId: undefined,
|
||||||
|
setModalOpen: undefined,
|
||||||
|
form: undefined,
|
||||||
|
formLoading: undefined,
|
||||||
|
setFormLoading: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
export function UserMenu() {
|
||||||
|
const [form] = useForm();
|
||||||
|
const [formLoading, setFormLoading] = useState<boolean>();
|
||||||
|
const [showMenu, setShowMenu] = useState(false);
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
|
const { user, logout, isLoading, hasSomePermissions } = useAuth();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
useClickOutside(menuRef, () => setShowMenu(false));
|
||||||
|
const [modalOpen, setModalOpen] = useState<boolean>(false);
|
||||||
|
const [domainId, setDomainId] = useState<string>();
|
||||||
|
const toggleMenu = useCallback(() => {
|
||||||
|
setShowMenu((prev) => !prev);
|
||||||
|
}, []);
|
||||||
|
const canManageAnyStaff = useMemo(() => {
|
||||||
|
return hasSomePermissions(RolePerms.MANAGE_ANY_STAFF);
|
||||||
|
}, [user]);
|
||||||
|
const menuItems: MenuItemType[] = useMemo(
|
||||||
|
() =>
|
||||||
|
[
|
||||||
|
{
|
||||||
|
icon: <UserOutlined className="text-lg" />,
|
||||||
|
label: "个人信息",
|
||||||
|
action: () => {
|
||||||
|
setModalOpen(true);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
canManageAnyStaff && {
|
||||||
|
icon: <SettingOutlined className="text-lg" />,
|
||||||
|
label: "设置",
|
||||||
|
action: () => {
|
||||||
|
navigate("/admin/staff");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
icon: <LogoutOutlined className="text-lg" />,
|
||||||
|
label: "注销",
|
||||||
|
action: () => logout(),
|
||||||
|
},
|
||||||
|
].filter(Boolean),
|
||||||
|
[logout]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleMenuItemClick = useCallback((action: () => void) => {
|
||||||
|
action();
|
||||||
|
setShowMenu(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center w-10 h-10">
|
||||||
|
<Spin size="small" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UserEditorContext.Provider
|
||||||
|
value={{
|
||||||
|
formLoading,
|
||||||
|
setFormLoading,
|
||||||
|
form,
|
||||||
|
domainId,
|
||||||
|
modalOpen,
|
||||||
|
setDomainId,
|
||||||
|
setModalOpen,
|
||||||
|
}}>
|
||||||
|
<div ref={menuRef} className="relative">
|
||||||
|
<motion.button
|
||||||
|
aria-label="用户菜单"
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={showMenu}
|
||||||
|
aria-controls="user-menu"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
onClick={toggleMenu}
|
||||||
|
className="flex items-center rounded-full transition-all duration-200 ease-in-out">
|
||||||
|
{/* Avatar 容器,相对定位 */}
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar
|
||||||
|
src={user?.avatar}
|
||||||
|
name={user?.showname || user?.username}
|
||||||
|
size={40}
|
||||||
|
className="ring-2 ring-white hover:ring-[#00538E]/90
|
||||||
|
transition-all duration-200 ease-in-out shadow-md
|
||||||
|
hover:shadow-lg focus:outline-none
|
||||||
|
focus:ring-2 focus:ring-[#00538E]/80 focus:ring-offset-2
|
||||||
|
focus:ring-offset-white "
|
||||||
|
/>
|
||||||
|
{/* 小绿点 */}
|
||||||
|
<span
|
||||||
|
className="absolute bottom-0 right-0 h-3 w-3
|
||||||
|
rounded-full bg-emerald-500 ring-2 ring-white
|
||||||
|
shadow-sm transition-transform duration-200
|
||||||
|
ease-in-out hover:scale-110"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 用户信息,显示在 Avatar 右侧 */}
|
||||||
|
<div className="flex flex-col space-y-0.5 ml-3 items-start">
|
||||||
|
<span className="text-base text-primary flex items-center gap-1.5">
|
||||||
|
{user?.showname || user?.username}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{showMenu && (
|
||||||
|
<motion.div
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
variants={menuVariants}
|
||||||
|
role="menu"
|
||||||
|
id="user-menu"
|
||||||
|
aria-orientation="vertical"
|
||||||
|
aria-labelledby="user-menu-button"
|
||||||
|
style={{ zIndex: 100 }}
|
||||||
|
className="absolute right-0 mt-3 w-64 origin-top-right
|
||||||
|
bg-white rounded-xl overflow-hidden shadow-lg
|
||||||
|
border border-[#E5EDF5]">
|
||||||
|
{/* User Profile Section */}
|
||||||
|
<div
|
||||||
|
className="px-4 py-4 bg-gradient-to-b from-[#F6F9FC] to-white
|
||||||
|
border-b border-[#E5EDF5] ">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Avatar
|
||||||
|
src={user?.avatar}
|
||||||
|
name={user?.showname || user?.username}
|
||||||
|
size={40}
|
||||||
|
className="ring-2 ring-white shadow-sm"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col space-y-0.5">
|
||||||
|
<span className="text-sm font-semibold text-[#00538E]">
|
||||||
|
{user?.showname || user?.username}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-[#718096] flex items-center gap-1.5">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||||
|
在线
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Menu Items */}
|
||||||
|
<div className="p-2">
|
||||||
|
{menuItems.map((item, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
role="menuitem"
|
||||||
|
tabIndex={showMenu ? 0 : -1}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
handleMenuItemClick(item.action);
|
||||||
|
}}
|
||||||
|
className={`flex items-center gap-3 w-full px-4 py-3
|
||||||
|
text-sm font-medium rounded-lg transition-all
|
||||||
|
focus:outline-none
|
||||||
|
focus:ring-2 focus:ring-[#00538E]/20
|
||||||
|
group relative overflow-hidden
|
||||||
|
active:scale-[0.99]
|
||||||
|
${
|
||||||
|
item.label === "注销"
|
||||||
|
? "text-[#B22234] hover:bg-red-50/80 hover:text-red-700"
|
||||||
|
: "text-[#00538E] hover:bg-[#E6EEF5] hover:text-[#003F6A]"
|
||||||
|
}`}>
|
||||||
|
<span
|
||||||
|
className={`w-5 h-5 flex items-center justify-center
|
||||||
|
transition-all duration-200 ease-in-out
|
||||||
|
group-hover:scale-110 group-hover:rotate-6
|
||||||
|
group-hover:translate-x-0.5 ${
|
||||||
|
item.label === "注销"
|
||||||
|
? "group-hover:text-red-600"
|
||||||
|
: "group-hover:text-[#003F6A]"
|
||||||
|
}`}>
|
||||||
|
{item.icon}
|
||||||
|
</span>
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
<UserEditModal></UserEditModal>
|
||||||
|
</UserEditorContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,5 @@
|
||||||
|
export interface MenuItemType {
|
||||||
|
icon: JSX.Element;
|
||||||
|
label: string;
|
||||||
|
action: () => void;
|
||||||
|
}
|
|
@ -58,6 +58,7 @@ export function CourseDetailProvider({
|
||||||
);
|
);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (course) {
|
if (course) {
|
||||||
|
console.log("read");
|
||||||
read.mutateAsync({
|
read.mutateAsync({
|
||||||
data: {
|
data: {
|
||||||
visitorId: user?.id || null,
|
visitorId: user?.id || null,
|
||||||
|
|
|
@ -8,7 +8,7 @@ import {
|
||||||
} from "@ant-design/icons";
|
} from "@ant-design/icons";
|
||||||
import { useAuth } from "@web/src/providers/auth-provider";
|
import { useAuth } from "@web/src/providers/auth-provider";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { UserMenu } from "@web/src/app/main/layout/UserMenu";
|
import { UserMenu } from "@web/src/app/main/layout/UserMenu/UserMenu";
|
||||||
import { CourseDetailContext } from "../CourseDetailContext";
|
import { CourseDetailContext } from "../CourseDetailContext";
|
||||||
|
|
||||||
const { Header } = Layout;
|
const { Header } = Layout;
|
||||||
|
|
|
@ -70,21 +70,22 @@ export const courseDetailSelect: Prisma.PostSelect = {
|
||||||
title: true,
|
title: true,
|
||||||
subTitle: true,
|
subTitle: true,
|
||||||
content: true,
|
content: true,
|
||||||
|
depts: true,
|
||||||
// isFeatured: true,
|
// isFeatured: true,
|
||||||
createdAt: true,
|
createdAt: true,
|
||||||
updatedAt: true,
|
updatedAt: true,
|
||||||
// 关联表选择
|
// 关联表选择
|
||||||
terms:{
|
terms: {
|
||||||
select:{
|
select: {
|
||||||
id:true,
|
id: true,
|
||||||
name:true,
|
name: true,
|
||||||
taxonomy:{
|
taxonomy: {
|
||||||
select:{
|
select: {
|
||||||
id:true,
|
id: true,
|
||||||
slug:true
|
slug: true,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
enrollments: {
|
enrollments: {
|
||||||
select: {
|
select: {
|
||||||
|
|
|
@ -2,37 +2,37 @@ import { Staff, Department } from "@prisma/client";
|
||||||
import { RolePerms } from "../enum";
|
import { RolePerms } from "../enum";
|
||||||
|
|
||||||
export type StaffRowModel = {
|
export type StaffRowModel = {
|
||||||
avatar: string;
|
avatar: string;
|
||||||
dept_name: string;
|
dept_name: string;
|
||||||
officer_id: string;
|
officer_id: string;
|
||||||
phone_number: string;
|
phone_number: string;
|
||||||
showname: string;
|
showname: string;
|
||||||
username: string;
|
username: string;
|
||||||
};
|
};
|
||||||
export type UserProfile = Staff & {
|
export type UserProfile = Staff & {
|
||||||
permissions: RolePerms[];
|
permissions: RolePerms[];
|
||||||
deptIds: string[];
|
deptIds: string[];
|
||||||
parentDeptIds: string[];
|
parentDeptIds: string[];
|
||||||
domain: Department;
|
domain: Department;
|
||||||
department: Department;
|
department: Department;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type StaffDto = Staff & {
|
export type StaffDto = Staff & {
|
||||||
domain?: Department;
|
domain?: Department;
|
||||||
department?: Department;
|
department?: Department;
|
||||||
};
|
};
|
||||||
export interface AuthDto {
|
export interface AuthDto {
|
||||||
token: string;
|
token: string;
|
||||||
staff: StaffDto;
|
staff: StaffDto;
|
||||||
refreshToken: string;
|
refreshToken: string;
|
||||||
perms: string[];
|
perms: string[];
|
||||||
}
|
}
|
||||||
export interface JwtPayload {
|
export interface JwtPayload {
|
||||||
sub: string;
|
sub: string;
|
||||||
username: string;
|
username: string;
|
||||||
}
|
}
|
||||||
export interface TokenPayload {
|
export interface TokenPayload {
|
||||||
id: string;
|
id: string;
|
||||||
phoneNumber: string;
|
phoneNumber: string;
|
||||||
name: string;
|
name: string;
|
||||||
}
|
}
|
|
@ -44,6 +44,7 @@ export interface BaseSetting {
|
||||||
splashScreen?: string;
|
splashScreen?: string;
|
||||||
devDept?: string;
|
devDept?: string;
|
||||||
slides?: [];
|
slides?: [];
|
||||||
|
reads?: number;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
export type RowModelResult = {
|
export type RowModelResult = {
|
||||||
|
|
Loading…
Reference in New Issue