liaohui
/
doctor-mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.157.195:3003/insiinc/leader-mail

This commit is contained in:
longdayi 2025-01-26 10:49:24 +08:00
parent ce128ae647 9039d1832a
commit cabec45c64
24 changed files with 1239 additions and 968 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/server/src/models/base/base.service.ts
View File

@ -39,7 +39,7 @@ export class BaseService<
protected prisma: PrismaClient,
protected objectType: string,
protected enableOrder: boolean = false,
) { }
) {}
/**
* Retrieves the name of the model dynamically.
@ -452,8 +452,12 @@ export class BaseService<
pageSize?: number;
where?: WhereArgs<A['findMany']>;
select?: SelectArgs<A['findMany']>;
orderBy?: OrderByArgs<A['findMany']>
}): Promise<{ items: R['findMany']; totalPages: number, totalCount: number }> {
orderBy?: OrderByArgs<A['findMany']>;
}): Promise<{
items: R['findMany'];
totalPages: number;
totalCount: number;
}> {
const { page = 1, pageSize = 10, where, select, orderBy } = args;
try {
@ -473,7 +477,7 @@ export class BaseService<
return {
items,
totalPages,
totalCount: total
totalCount: total,
};
} catch (error) {
this.handleError(error, 'read');

54
apps/server/src/models/base/base.type.ts
View File

@ -1,25 +1,27 @@
import { db, Prisma, PrismaClient } from "@nice/common";
import { db, Prisma, PrismaClient } from '@nice/common';
export type Operations =
| 'aggregate'
| 'count'
| 'create'
| 'createMany'
| 'delete'
| 'deleteMany'
| 'findFirst'
| 'findMany'
| 'findUnique'
| 'update'
| 'updateMany'
| 'upsert';
export type DelegateFuncs = { [K in Operations]: (args: any) => Promise<unknown> }
| 'aggregate'
| 'count'
| 'create'
| 'createMany'
| 'delete'
| 'deleteMany'
| 'findFirst'
| 'findMany'
| 'findUnique'
| 'update'
| 'updateMany'
| 'upsert';
export type DelegateFuncs = {
[K in Operations]: (args: any) => Promise<unknown>;
};
export type DelegateArgs<T> = {
[K in keyof T]: T[K] extends (args: infer A) => Promise<any> ? A : never;
[K in keyof T]: T[K] extends (args: infer A) => Promise<any> ? A : never;
};
export type DelegateReturnTypes<T> = {
[K in keyof T]: T[K] extends (args: any) => Promise<infer R> ? R : never;
[K in keyof T]: T[K] extends (args: any) => Promise<infer R> ? R : never;
};
export type WhereArgs<T> = T extends { where?: infer W } ? W : never;
@ -28,17 +30,17 @@ export type DataArgs<T> = T extends { data: infer D } ? D : never;
export type IncludeArgs<T> = T extends { include: infer I } ? I : never;
export type OrderByArgs<T> = T extends { orderBy: infer O } ? O : never;
export type UpdateOrderArgs = {
id: string
overId: string
}
id: string;
overId: string;
};
export interface FindManyWithCursorType<T extends DelegateFuncs> {
cursor?: string;
limit?: number;
where?: WhereArgs<DelegateArgs<T>['findUnique']>;
select?: SelectArgs<DelegateArgs<T>['findUnique']>;
orderBy?: OrderByArgs<DelegateArgs<T>['findMany']>
cursor?: string;
limit?: number;
where?: WhereArgs<DelegateArgs<T>['findUnique']>;
select?: SelectArgs<DelegateArgs<T>['findUnique']>;
orderBy?: OrderByArgs<DelegateArgs<T>['findMany']>;
}
export type TransactionType = Omit<
PrismaClient,
'$connect' | '$disconnect' | '$on' | '$transaction' | '$use' | '$extends'
PrismaClient,
'$connect' | '$disconnect' | '$on' | '$transaction' | '$use' | '$extends'
>;

6
apps/server/src/models/post/post.router.ts
View File

@ -12,13 +12,13 @@ const PostDeleteManyArgsSchema: ZodType<Prisma.PostDeleteManyArgs> = z.any();
const PostWhereInputSchema: ZodType<Prisma.PostWhereInput> = z.any();
const PostSelectSchema: ZodType<Prisma.PostSelect> = z.any();
const PostUpdateInputSchema: ZodType<Prisma.PostUpdateInput> = z.any();
const PostOrderBySchema: ZodType<Prisma.PostOrderByWithRelationInput> = z.any()
const PostOrderBySchema: ZodType<Prisma.PostOrderByWithRelationInput> = z.any();
@Injectable()
export class PostRouter {
constructor(
private readonly trpc: TrpcService,
private readonly postService: PostService,
) { }
) {}
router = this.trpc.router({
create: this.trpc.protectProcedure
.input(PostCreateArgsSchema)
@ -104,7 +104,7 @@ export class PostRouter {
pageSize: z.number().optional(),
where: PostWhereInputSchema.optional(),
select: PostSelectSchema.optional(),
orderBy: PostOrderBySchema.optional()
orderBy: PostOrderBySchema.optional(),
}),
) // Assuming StaffMethodSchema.findMany is the Zod schema for finding staffs by keyword
.query(async ({ input, ctx }) => {

31
apps/server/src/models/post/post.service.ts
View File

@ -101,22 +101,31 @@ export class PostService extends BaseService<Prisma.PostDelegate> {
});
}
async findManyWithPagination(
args: { page?: number; pageSize?: number; where?: Prisma.PostWhereInput; select?: Prisma.PostSelect<DefaultArgs>; orderBy?: Prisma.PostOrderByWithRelationInput },
args: {
page?: number;
pageSize?: number;
where?: Prisma.PostWhereInput;
select?: Prisma.PostSelect<DefaultArgs>;
orderBy?: Prisma.PostOrderByWithRelationInput;
},
staff?: UserProfile,
clientIp?: string,
) {
if (!args.where) args.where = {};
args.where.OR = await this.preFilter(args.where.OR, staff);
return this.wrapResult(super.findManyWithPagination(args as any), async (result) => {
const { items } = result;
await Promise.all(
items.map(async (item) => {
await setPostRelation({ data: item, staff, clientIp });
await this.setPerms(item, staff);
}),
);
return { ...result, items };
});
return this.wrapResult(
super.findManyWithPagination(args as any),
async (result) => {
const { items } = result;
await Promise.all(
items.map(async (item) => {
await setPostRelation({ data: item, staff, clientIp });
await this.setPerms(item, staff);
}),
);
return { ...result, items };
},
);
}
protected async setPerms(data: Post, staff?: UserProfile) {
if (!staff) return;

19
apps/server/src/models/staff/staff.router.ts
View File

@ -12,13 +12,15 @@ const StaffWhereInputSchema: ZodType<Prisma.StaffWhereInput> = z.any();
const StaffSelectSchema: ZodType<Prisma.StaffSelect> = z.any();
const StaffUpdateInputSchema: ZodType<Prisma.PostUpdateInput> = z.any();
const StaffFindManyArgsSchema: ZodType<Prisma.StaffFindManyArgs> = z.any();
const StaffOrderBySchema: ZodType<Prisma.StaffOrderByWithRelationInput> =
z.any();
@Injectable()
export class StaffRouter {
constructor(
private readonly trpc: TrpcService,
private readonly staffService: StaffService,
private readonly staffRowService: StaffRowService,
) { }
) {}
router = this.trpc.router({
create: this.trpc.procedure
@ -78,12 +80,15 @@ export class StaffRouter {
return this.staffService.updateOrder(input);
}),
findManyWithPagination: this.trpc.procedure
.input(z.object({
page: z.number(),
pageSize: z.number().optional(),
where: StaffWhereInputSchema.optional(),
select: StaffSelectSchema.optional()
})) // Assuming StaffMethodSchema.findMany is the Zod schema for finding staffs by keyword
.input(
z.object({
page: z.number(),
pageSize: z.number().optional(),
where: StaffWhereInputSchema.optional(),
select: StaffSelectSchema.optional(),
orderBy: StaffOrderBySchema.optional(),
}),
) // Assuming StaffMethodSchema.findMany is the Zod schema for finding staffs by keyword
.query(async ({ input }) => {
return await this.staffService.findManyWithPagination(input);
}),

21
apps/server/src/models/staff/staff.service.ts
View File

@ -105,7 +105,7 @@ export class StaffService extends BaseService<Prisma.StaffDelegate> {
* @returns 更新后的员工记录
*/
async updateUserDomain(data: { domainId?: string }, staff?: UserProfile) {
let { domainId } = data;
const { domainId } = data;
if (staff.domainId !== domainId) {
const result = await this.update({
where: { id: staff.id },
@ -120,14 +120,23 @@ export class StaffService extends BaseService<Prisma.StaffDelegate> {
}
}
async findManyWithPagination(args: { page?: number; pageSize?: number; where?: Prisma.StaffWhereInput; select?: Prisma.StaffSelect<DefaultArgs>; }) {
async findManyWithPagination(args: {
page?: number;
pageSize?: number;
where?: Prisma.StaffWhereInput;
select?: Prisma.StaffSelect<DefaultArgs>;
orderBy?: Prisma.StaffOrderByWithRelationInput;
}) {
if (args.where.deptId && typeof args.where.deptId === 'string') {
const childDepts = await this.departmentService.getDescendantIds(args.where.deptId, true);
const childDepts = await this.departmentService.getDescendantIds(
args.where.deptId,
true,
);
args.where.deptId = {
in: childDepts
}
in: childDepts,
};
}
return super.findManyWithPagination(args)
return super.findManyWithPagination(args as any);
}
}

2
apps/server/src/queue/types.ts
View File

@ -1,4 +1,4 @@
import { VisitType } from 'packages/common/dist';
import { VisitType } from '@nice/common';
export enum QueueJobType {
UPDATE_STATS = 'update_stats',
FILE_PROCESS = 'file_process',

74
apps/web/src/app/main/letter/inbox/Header.tsx Normal file
View File

@ -0,0 +1,74 @@
export function Header() {
return (
<header className="bg-gradient-to-r from-primary to-primary-400 p-6 rounded-t-xl">
<div className="flex flex-col space-y-6">
{/* 主标题区域 */}
<div>
<h1 className="text-3xl font-bold tracking-wider text-white">
我收到的信件
</h1>
<p className="mt-2 text-blue-100 text-lg">
及时查看 • 快速处理 • 高效反馈
</p>
</div>
{/* 服务特点说明 */}
<div className="flex flex-wrap gap-6 text-sm text-white">
<div className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
/>
</svg>
<span>随时查看收到的信件</span>
</div>
<div className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6"
/>
</svg>
<span>快速处理信件内容</span>
</div>
<div className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
/>
</svg>
<span>高效反馈处理结果</span>
</div>
</div>
{/* 服务宗旨说明 */}
<div className="text-sm text-blue-100 border-t border-blue-400/30 pt-4">
<p className="leading-relaxed">
我们确保您能够及时查看、快速处理收到的信件，
并通过高效反馈机制，提升沟通效率，助力工作顺利开展。
</p>
</div>
</div>
</header>
);
}

24
apps/web/src/app/main/letter/inbox/page.tsx Normal file
View File

@ -0,0 +1,24 @@
import LetterList from "@web/src/components/models/post/list/LetterList";
import { Header } from "./Header";
import { useAuth } from "@web/src/providers/auth-provider";
export default function InboxPage() {
const { user } = useAuth();
return (
// 添加 flex flex-col 使其成为弹性布局容器
<div className="min-h-screen shadow-elegant border-2 border-white rounded-xl overflow-hidden bg-gradient-to-b from-slate-100 to-slate-50 flex flex-col">
<Header />
{/* 添加 flex-grow 使内容区域自动填充剩余空间 */}
<LetterList
params={{
where: {
receivers: {
some: {
id: user?.id,
},
},
},
}}></LetterList>
</div>
);
}

11
apps/web/src/app/main/letter/index/page.tsx Normal file
View File

@ -0,0 +1,11 @@
import { useAuth } from "@web/src/providers/auth-provider";
import InboxPage from "../inbox/page";
import LetterListPage from "../list/page";
export default function IndexPage() {
const { user } = useAuth();
if (user) {
return <InboxPage></InboxPage>;
}
return <LetterListPage></LetterListPage>;
}

74
apps/web/src/app/main/letter/outbox/Header.tsx Normal file
View File

@ -0,0 +1,74 @@
export function Header() {
return (
<header className="bg-gradient-to-r from-primary to-primary-400 p-6 rounded-t-xl">
<div className="flex flex-col space-y-6">
{/* 主标题区域 */}
<div>
<h1 className="text-3xl font-bold tracking-wider text-white">
我发出的信件
</h1>
<p className="mt-2 text-blue-100 text-lg">
清晰记录 • 实时跟踪 • 高效沟通
</p>
</div>
{/* 服务特点说明 */}
<div className="flex flex-wrap gap-6 text-sm text-white">
<div className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
/>
</svg>
<span>清晰记录发出的信件</span>
</div>
<div className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span>实时跟踪信件状态</span>
</div>
<div className="flex items-center gap-2">
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
/>
</svg>
<span>高效沟通信件进展</span>
</div>
</div>
{/* 服务宗旨说明 */}
<div className="text-sm text-blue-100 border-t border-blue-400/30 pt-4">
<p className="leading-relaxed">
我们确保您能够清晰记录发出的信件，
实时跟踪信件状态，并通过高效沟通机制，确保信件处理顺利进行。
</p>
</div>
</div>
</header>
);
}

20
apps/web/src/app/main/letter/outbox/page.tsx Normal file
View File

@ -0,0 +1,20 @@
import LetterList from "@web/src/components/models/post/list/LetterList";
import { Header } from "./Header";
import { useAuth } from "@web/src/providers/auth-provider";
export default function OutboxPage() {
const { user } = useAuth();
return (
// 添加 flex flex-col 使其成为弹性布局容器
<div className="min-h-screen shadow-elegant border-2 border-white rounded-xl overflow-hidden bg-gradient-to-b from-slate-100 to-slate-50 flex flex-col">
<Header />
{/* 添加 flex-grow 使内容区域自动填充剩余空间 */}
<LetterList
params={{
where: {
authorId: user?.id,
},
}}></LetterList>
</div>
);
}

263
apps/web/src/app/main/letter/write/page.tsx
View File

@ -1,138 +1,149 @@
import { useState, useCallback, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSearchParams } from 'react-router-dom';
import { useState, useCallback, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useSearchParams } from "react-router-dom";
import { SendCard } from './SendCard';
import { Spin, Empty, Input, Alert, Pagination } from 'antd';
import { api, useTerm } from '@nice/client';
import DepartmentSelect from '@web/src/components/models/department/department-select';
import debounce from 'lodash/debounce';
import { SearchOutlined } from '@ant-design/icons';
import WriteHeader from './WriteHeader';
import { SendCard } from "./SendCard";
import { Spin, Empty, Input, Alert, Pagination } from "antd";
import { api, useTerm } from "@nice/client";
import DepartmentSelect from "@web/src/components/models/department/department-select";
import debounce from "lodash/debounce";
import { SearchOutlined } from "@ant-design/icons";
import WriteHeader from "./WriteHeader";
export default function WriteLetterPage() {
const [searchParams] = useSearchParams();
const termId = searchParams.get('termId');
const [searchQuery, setSearchQuery] = useState('');
const [selectedDept, setSelectedDept] = useState<string>();
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10;
const { getTerm } = useTerm()
const [searchParams] = useSearchParams();
const termId = searchParams.get("termId");
const [searchQuery, setSearchQuery] = useState("");
const [selectedDept, setSelectedDept] = useState<string>();
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10;
const { getTerm } = useTerm();
const { data, isLoading, error } = api.staff.findManyWithPagination.useQuery({
page: currentPage,
pageSize,
where: {
deptId: selectedDept,
OR: [{
showname: {
contains: searchQuery
}
}, {
username: {
contains: searchQuery
}
}]
}
});
const { data, isLoading, error } =
api.staff.findManyWithPagination.useQuery({
page: currentPage,
pageSize,
where: {
deptId: selectedDept,
OR: [
{
showname: {
contains: searchQuery,
},
},
{
username: {
contains: searchQuery,
},
},
],
},
orderBy: {
order: "desc",
},
// orderBy:{
const resetPage = useCallback(() => {
setCurrentPage(1);
}, []);
// }
});
// Reset page when search or department changes
useEffect(() => {
resetPage();
}, [searchQuery, selectedDept, resetPage]);
const resetPage = useCallback(() => {
setCurrentPage(1);
}, []);
return (
<div className="min-h-screen shadow-elegant border-2 border-white rounded-xl bg-slate-200">
<WriteHeader term={getTerm(termId)} />
<div className="container mx-auto px-4 py-8">
<div className="mb-8 space-y-4">
{/* Search and Filter Section */}
<div className="flex flex-col md:flex-row gap-4 items-center">
<DepartmentSelect
variant='filled'
size="large"
value={selectedDept}
onChange={setSelectedDept as any}
className="w-1/2"
/>
<Input
variant='filled'
className={'w-1/2'}
prefix={<SearchOutlined className="text-gray-400" />}
placeholder="搜索领导姓名或职级..."
onChange={debounce((e) => setSearchQuery(e.target.value), 300)}
// Reset page when search or department changes
useEffect(() => {
resetPage();
}, [searchQuery, selectedDept, resetPage]);
size="large"
/>
return (
<div className="min-h-screen shadow-elegant border-2 border-white rounded-xl bg-slate-200">
<WriteHeader term={getTerm(termId)} />
<div className="container mx-auto px-4 py-8">
<div className="mb-8 space-y-4">
{/* Search and Filter Section */}
<div className="flex flex-col md:flex-row gap-4 items-center">
<DepartmentSelect
variant="filled"
size="large"
value={selectedDept}
onChange={setSelectedDept as any}
className="w-1/2"
/>
<Input
variant="filled"
className={"w-1/2"}
prefix={
<SearchOutlined className="text-gray-400" />
}
placeholder="搜索领导姓名或职级..."
onChange={debounce(
(e) => setSearchQuery(e.target.value),
300
)}
size="large"
/>
</div>
</div>
{error && (
<Alert
message="加载失败"
description="获取数据时出现错误，请刷新页面重试。"
type="error"
showIcon
/>
)}
</div>
{error && (
<Alert
message="加载失败"
description="获取数据时出现错误，请刷新页面重试。"
type="error"
showIcon
/>
)}
</div>
<AnimatePresence>
{isLoading ? (
<div className="flex justify-center items-center py-12">
<Spin size="large" tip="加载中..." />
</div>
) : data?.items.length > 0 ? (
<motion.div
className="grid grid-cols-1 gap-6"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}>
{data?.items.map((item: any) => (
<SendCard
key={item.id}
staff={item}
termId={termId || undefined}
/>
))}
</motion.div>
) : (
<motion.div
className="text-center py-12"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}>
<Empty
description="没有找到匹配的收信人"
className="py-12"
/>
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{isLoading ? (
<div className="flex justify-center items-center py-12">
<Spin size="large" tip="加载中..." />
</div>
) : data?.items.length > 0 ? (
<motion.div
className="grid grid-cols-1 gap-6"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
{data?.items.map((item: any) => (
<SendCard
key={item.id}
staff={item}
termId={termId || undefined}
/>
))}
</motion.div>
) : (
<motion.div
className="text-center py-12"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<Empty
description="没有找到匹配的收信人"
className="py-12"
/>
</motion.div>
)}
</AnimatePresence>
{/* Pagination */}
{data?.items.length > 0 && (
<div className="flex justify-center mt-8">
<Pagination
current={currentPage}
total={data?.totalPages || 0}
pageSize={pageSize}
onChange={(page) => {
setCurrentPage(page);
window.scrollTo(0, 0);
}}
showSizeChanger={false}
showTotal={(total) => `共 ${total} 条记录`}
/>
</div>
)}
</div>
</div>
);
{/* Pagination */}
{data?.items.length > 0 && (
<div className="flex justify-center mt-8">
<Pagination
current={currentPage}
total={data?.totalPages || 0}
pageSize={pageSize}
onChange={(page) => {
setCurrentPage(page);
window.scrollTo(0, 0);
}}
showSizeChanger={false}
showTotal={(total) => `共 ${total} 条记录`}
/>
</div>
)}
</div>
</div>
);
}

131
apps/web/src/components/common/uploader/AvatarUploader.tsx Normal file
View File

@ -0,0 +1,131 @@
import { env } from "@web/src/env";
import { message, Progress, Spin, theme } from "antd";
import React, { useState, useEffect, useRef } from "react";
import { useTusUpload } from "@web/src/hooks/useTusUpload";
export interface AvatarUploaderProps {
value?: string;
placeholder?: string;
className?: string;
onChange?: (value: string) => void;
style?: React.CSSProperties; // 添加style属性
}
interface UploadingFile {
name: string;
progress: number;
status: "uploading" | "done" | "error";
fileId?: string;
fileKey?: string;
}
const AvatarUploader: React.FC<AvatarUploaderProps> = ({
value,
onChange,
className,
placeholder = "点击上传",
style, // 解构style属性
}) => {
const { handleFileUpload, uploadProgress } = useTusUpload();
const [file, setFile] = useState<UploadingFile | null>(null);
const [previewUrl, setPreviewUrl] = useState<string>(value || "");
const [uploading, setUploading] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const { token } = theme.useToken();
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const selectedFile = event.target.files?.[0];
if (!selectedFile) return;
setFile({
name: selectedFile.name,
progress: 0,
status: "uploading",
fileKey: `${selectedFile.name}-${Date.now()}`,
});
setUploading(true);
try {
const fileId = await new Promise<string>((resolve, reject) => {
handleFileUpload(
selectedFile,
(result) => {
setFile((prev) => ({
...prev!,
progress: 100,
status: "done",
fileId: result.fileId,
}));
resolve(result.fileId);
},
(error) => {
reject(error);
},
file?.fileKey
);
});
setPreviewUrl(`${env.SERVER_IP}/uploads/${fileId}`);
onChange?.(fileId);
message.success("头像上传成功");
} catch (error) {
console.error("上传错误:", error);
message.error("头像上传失败");
setFile((prev) => ({ ...prev!, status: "error" }));
} finally {
setUploading(false);
}
};
const triggerUpload = () => {
inputRef.current?.click();
};
return (
<div
className={`relative w-24 h-24 overflow-hidden cursor-pointer ${className}`}
onClick={triggerUpload}
style={{
border: `1px solid ${token.colorBorder}`,
background: token.colorBgContainer,
...style, // 应用外部传入的样式
}}>
<input
type="file"
ref={inputRef}
onChange={handleChange}
accept="image/*"
style={{ display: "none" }}
/>
{previewUrl ? (
<img
src={previewUrl}
alt="Avatar"
className="w-full h-full object-cover"
/>
) : (
<div className="flex items-center justify-center w-full h-full text-sm text-gray-500">
{placeholder}
</div>
)}
{uploading && (
<div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
<Spin />
</div>
)}
{file && file.status === "uploading" && (
<div className="absolute bottom-0 left-0 right-0 bg-white bg-opacity-75">
<Progress
percent={Math.round(
uploadProgress?.[file.fileKey!] || 0
)}
showInfo={false}
strokeColor={token.colorPrimary}
/>
</div>
)}
</div>
);
};
export default AvatarUploader;

241
apps/web/src/components/common/uploader/FileUploader.tsx
View File

@ -1,241 +0,0 @@
// FileUploader.tsx
import React, { useRef, memo, useState } from "react";
import {
CloudArrowUpIcon,
XMarkIcon,
DocumentIcon,
ExclamationCircleIcon,
CheckCircleIcon,
} from "@heroicons/react/24/outline";
import { motion, AnimatePresence } from "framer-motion";
import { toast } from "react-hot-toast";
import { useTusUpload } from "@web/src/hooks/useTusUpload";
interface FileUploaderProps {
endpoint?: string;
onSuccess?: (result: { url: string; fileId: string }) => void;
onError?: (error: Error) => void;
maxSize?: number;
allowedTypes?: string[];
placeholder?: string;
}
interface FileItemProps {
file: File;
progress?: number;
onRemove: (name: string) => void;
isUploaded: boolean;
}
const FileItem: React.FC<FileItemProps> = memo(
({ file, progress, onRemove, isUploaded }) => (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: -20 }}
className="group flex items-center p-4 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-all duration-200">
<DocumentIcon className="w-8 h-8 text-blue-500/80" />
<div className="ml-3 flex-1">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-gray-900 truncate max-w-[200px]">
{file.name}
</p>
<button
onClick={() => onRemove(file.name)}
className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-gray-100 rounded-full"
aria-label={`Remove ${file.name}`}>
<XMarkIcon className="w-5 h-5 text-gray-500" />
</button>
</div>
{!isUploaded && progress !== undefined && (
<div className="mt-2">
<div className="bg-gray-100 rounded-full h-1.5 overflow-hidden">
<motion.div
className="bg-blue-500 h-1.5 rounded-full"
initial={{ width: 0 }}
animate={{ width: `${progress}%` }}
transition={{ duration: 0.3 }}
/>
</div>
<span className="text-xs text-gray-500 mt-1">
{progress}%
</span>
</div>
)}
{isUploaded && (
<div className="mt-2 flex items-center text-green-500">
<CheckCircleIcon className="w-4 h-4 mr-1" />
<span className="text-xs">上传完成</span>
</div>
)}
</div>
</motion.div>
)
);
const FileUploader: React.FC<FileUploaderProps> = ({
onSuccess,
onError,
maxSize = 100,
placeholder = "点击或拖拽文件到这里上传",
allowedTypes = ["*/*"],
}) => {
const [isDragging, setIsDragging] = useState(false);
const [files, setFiles] = useState<
Array<{ file: File; isUploaded: boolean }>
>([]);
const fileInputRef = useRef<HTMLInputElement>(null);
const { progress, isUploading, uploadError, handleFileUpload } =
useTusUpload();
const handleError = (error: Error) => {
toast.error(error.message);
onError?.(error);
};
const handleDrag = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
if (e.type === "dragenter" || e.type === "dragover") {
setIsDragging(true);
} else if (e.type === "dragleave") {
setIsDragging(false);
}
};
const validateFile = (file: File) => {
if (file.size > maxSize * 1024 * 1024) {
throw new Error(`文件大小不能超过 ${maxSize}MB`);
}
if (
!allowedTypes.includes("*/*") &&
!allowedTypes.includes(file.type)
) {
throw new Error(
`不支持的文件类型。支持的类型: ${allowedTypes.join(", ")}`
);
}
};
const uploadFile = (file: File) => {
try {
validateFile(file);
handleFileUpload(
file,
(upload) => {
console.log("Upload complete:", {
url: upload.url,
fileId: upload.fileId,
// resource: upload.resource
});
onSuccess?.(upload);
setFiles((prev) =>
prev.map((f) =>
f.file.name === file.name
? { ...f, isUploaded: true }
: f
)
);
},
handleError
);
} catch (error) {
handleError(error as Error);
}
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
const droppedFiles = Array.from(e.dataTransfer.files);
setFiles((prev) => [
...prev,
...droppedFiles.map((file) => ({ file, isUploaded: false })),
]);
droppedFiles.forEach(uploadFile);
};
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
const selectedFiles = Array.from(e.target.files);
setFiles((prev) => [
...prev,
...selectedFiles.map((file) => ({ file, isUploaded: false })),
]);
selectedFiles.forEach(uploadFile);
}
};
const removeFile = (fileName: string) => {
setFiles((prev) => prev.filter(({ file }) => file.name !== fileName));
};
const handleClick = () => {
fileInputRef.current?.click();
};
return (
<div className="w-full space-y-4">
<div
onClick={handleClick}
onDragEnter={handleDrag}
onDragLeave={handleDrag}
onDragOver={handleDrag}
onDrop={handleDrop}
className={`
relative flex flex-col items-center justify-center w-full h-32
border-2 border-dashed rounded-lg cursor-pointer
transition-colors duration-200 ease-in-out
${
isDragging
? "border-blue-500 bg-blue-50"
: "border-gray-300 hover:border-blue-500"
}
`}>
<input
ref={fileInputRef}
type="file"
multiple
onChange={handleFileSelect}
accept={allowedTypes.join(",")}
className="hidden"
/>
<CloudArrowUpIcon className="w-10 h-10 text-gray-400" />
<p className="mt-2 text-sm text-gray-500">{placeholder}</p>
{isDragging && (
<div className="absolute inset-0 flex items-center justify-center bg-blue-100/50 rounded-lg">
<p className="text-blue-500 font-medium">
释放文件以上传
</p>
</div>
)}
</div>
<AnimatePresence>
<div className="space-y-3">
{files.map(({ file, isUploaded }) => (
<FileItem
key={file.name}
file={file}
progress={isUploaded ? 100 : progress}
onRemove={removeFile}
isUploaded={isUploaded}
/>
))}
</div>
</AnimatePresence>
{uploadError && (
<div className="flex items-center text-red-500 text-sm">
<ExclamationCircleIcon className="w-4 h-4 mr-1" />
<span>{uploadError}</span>
</div>
)}
</div>
);
};
export default FileUploader;

350
apps/web/src/components/layout/element/usermenu.tsx
View File

@ -4,194 +4,210 @@ import { motion, AnimatePresence } from "framer-motion";
import { useState, useRef, useCallback, useMemo } from "react";
import { Avatar } from "../../common/element/Avatar";
import {
UserOutlined,
SettingOutlined,
QuestionCircleOutlined,
LogoutOutlined
UserOutlined,
SettingOutlined,
QuestionCircleOutlined,
LogoutOutlined,
} from "@ant-design/icons";
import { Spin } from "antd";
import { useNavigate } from "react-router-dom";
import { MenuItemType } from "./types";
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
}
}
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 function UserMenu() {
const [showMenu, setShowMenu] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const { user, logout, isLoading } = useAuth();
const navigate = useNavigate()
useClickOutside(menuRef, () => setShowMenu(false));
const [showMenu, setShowMenu] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const { user, logout, isLoading } = useAuth();
const navigate = useNavigate();
useClickOutside(menuRef, () => setShowMenu(false));
const toggleMenu = useCallback(() => {
setShowMenu(prev => !prev);
}, []);
const toggleMenu = useCallback(() => {
setShowMenu((prev) => !prev);
}, []);
const menuItems: MenuItemType[] = useMemo(() => [
{
icon: <UserOutlined className="text-lg" />,
label: '个人信息',
action: () => { },
},
{
icon: <SettingOutlined className="text-lg" />,
label: '设置',
action: () => {
navigate('/admin/staff')
},
},
{
icon: <QuestionCircleOutlined className="text-lg" />,
label: '帮助',
action: () => { },
},
{
icon: <LogoutOutlined className="text-lg" />,
label: '注销',
action: () => logout(),
},
], [logout]);
const menuItems: MenuItemType[] = useMemo(
() => [
{
icon: <UserOutlined className="text-lg" />,
label: "个人信息",
action: () => {},
},
{
icon: <SettingOutlined className="text-lg" />,
label: "设置",
action: () => {
navigate("/admin/staff");
},
},
// {
// icon: <QuestionCircleOutlined className="text-lg" />,
// label: '帮助',
// action: () => { },
// },
{
icon: <LogoutOutlined className="text-lg" />,
label: "注销",
action: () => logout(),
},
],
[logout]
);
const handleMenuItemClick = useCallback((action: () => void) => {
action();
setShowMenu(false);
}, []);
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>
);
}
if (isLoading) {
return (
<div className="flex items-center justify-center w-10 h-10">
<Spin size="small" />
</div>
);
}
return (
<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="relative rounded-full focus:outline-none
focus:ring-2 focus:ring-[#00538E]/80 focus:ring-offset-2
focus:ring-offset-white transition-all duration-200 ease-in-out"
>
<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"
/>
<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"
/>
</motion.button>
return (
<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>
<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
{/* 用户信息，显示在 Avatar 右侧 */}
<div className="flex flex-col space-y-0.5 ml-3 items-start">
<span className="text-sm font-semibold text-white">
{user?.showname || user?.username}
</span>
<span className="text-xs text-white flex items-center gap-1.5">
{user?.department?.name}
</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] "
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>
>
<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
{/* 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
${
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>
);
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>
);
}

66
apps/web/src/components/layout/main/Header.tsx
View File

@ -7,28 +7,24 @@ import { UserOutlined } from "@ant-design/icons";
import { UserMenu } from "../element/usermenu";
import SineWavesCanvas from "../../animation/sine-wave";
interface HeaderProps {
onSearch?: (query: string) => void;
onSearch?: (query: string) => void;
}
export const Header = memo(function Header({ onSearch }: HeaderProps) {
const { isAuthenticated } = useAuth()
return (
<header className="sticky top-0 z-50 bg-gradient-to-br from-primary-500 to-primary-800 text-white shadow-lg">
<div className="container mx-auto px-4">
<div className="py-3">
<div className="flex items-center justify-between gap-4">
<div className=" text-xl font-bold">
领导机关信箱
</div>
<div className="flex-grow max-w-2xl">
<SearchBar onSearch={onSearch} />
</div>
<div className="flex items-center gap-6">
{
!isAuthenticated ? <Link
to="/auth"
className="group flex items-center gap-2 rounded-lg
const { isAuthenticated } = useAuth();
return (
<header className="sticky top-0 z-50 bg-gradient-to-br from-primary-500 to-primary-800 text-white shadow-lg">
<div className="container mx-auto px-4">
<div className="py-3">
<div className="flex items-center justify-between gap-4">
<div className=" text-xl font-bold">领导机关信箱</div>
<div className="flex-grow max-w-2xl">
<SearchBar onSearch={onSearch} />
</div>
<div className="flex items-center gap-6">
{!isAuthenticated ? (
<Link
to="/auth"
className="group flex items-center gap-2 rounded-lg
bg-[#00539B]/90 px-5 py-2.5 font-medium
shadow-lg transition-all duration-300
hover:-translate-y-0.5 hover:bg-[#0063B8]
@ -36,21 +32,21 @@ hover:shadow-xl hover:shadow-[#00539B]/30
focus:outline-none focus:ring-2
focus:ring-[#8EADD4] focus:ring-offset-2
focus:ring-offset-[#13294B]"
aria-label="Login"
>
<UserOutlined className="h-5 w-5 transition-transform
aria-label="Login">
<UserOutlined
className="h-5 w-5 transition-transform
group-hover:scale-110 group-hover:rotate-12"></UserOutlined>
<span>登录</span>
</Link> : <UserMenu />
}
</div>
</div>
</div>
<Navigation />
</div>
</header>
);
<span>登录</span>
</Link>
) : (
<UserMenu />
)}
</div>
</div>
</div>
<Navigation />
</div>
</header>
);
});

170
apps/web/src/components/layout/main/navigation.tsx
View File

@ -1,96 +1,108 @@
import { NavLink, useLocation } from "react-router-dom";
import { useNavItem } from "./useNavItem";
import { twMerge } from "tailwind-merge";
import React from "react";
interface NavItem {
to: string;
label: string;
icon?: React.ReactNode;
to: string;
label: string;
icon?: React.ReactNode;
}
interface NavigationProps {
className?: string;
className?: string;
}
export default function Navigation({ className }: NavigationProps) {
const { navItems } = useNavItem();
const location = useLocation();
const { navItems } = useNavItem();
const location = useLocation();
const isActive = (to: string) => {
const [pathname, search] = to.split('?');
return location.pathname === pathname &&
(!search ? !location.search : location.search === `?${search}`);
};
const isActive = (to: string) => {
const [pathname, search] = to.split("?");
return (
location.pathname === pathname &&
(!search ? !location.search : location.search === `?${search}`)
);
};
return (
<nav className={twMerge(
"mt-4 rounded-xl bg-gradient-to-r from-primary-500 to-primary-600 shadow-lg",
className
)}>
<div className="flex flex-col md:flex-row items-stretch">
{/* Desktop Navigation */}
<div className="hidden md:flex items-center px-6 py-2 w-full overflow-x-auto">
<div className="flex space-x-6 min-w-max">
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive: active }) => twMerge(
"relative px-4 py-2.5 text-sm font-medium",
"text-gray-300 hover:text-white",
"transition-all duration-200 ease-out group",
active && "text-white"
)}
>
<span className="relative z-10 flex items-center gap-2 transition-transform group-hover:translate-y-[-1px]">
{item.icon}
<span className="tracking-wide">{item.label}</span>
</span>
return (
<nav
className={twMerge(
"mt-4 rounded-xl bg-gradient-to-r from-primary-500 to-primary-600 shadow-lg",
className
)}>
<div className="flex flex-col md:flex-row items-stretch">
{/* Desktop Navigation */}
<div className="hidden md:flex items-center px-6 py-2 w-full overflow-x-auto">
<div className="flex space-x-6 min-w-max">
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive: active }) =>
twMerge(
"relative px-4 py-2.5 text-sm font-medium",
"text-gray-300 hover:text-white",
"transition-all duration-200 ease-out group",
active && "text-white"
)
}>
<span className="relative z-10 flex items-center gap-2 transition-transform group-hover:translate-y-[-1px]">
{item.icon}
<span className="tracking-wide">
{item.label}
</span>
</span>
{/* Active Indicator */}
<span className={twMerge(
"absolute bottom-0 left-1/2 h-[2px] bg-blue-400",
"transition-all duration-300 ease-out",
"transform -translate-x-1/2",
isActive(item.to)
? "w-full opacity-100"
: "w-0 opacity-0 group-hover:w-1/2 group-hover:opacity-40"
)} />
{/* Active Indicator */}
<span
className={twMerge(
"absolute bottom-0 left-1/2 h-[2px] bg-blue-400",
"transition-all duration-300 ease-out",
"transform -translate-x-1/2",
isActive(item.to)
? "w-full opacity-100"
: "w-0 opacity-0 group-hover:w-1/2 group-hover:opacity-40"
)}
/>
{/* Hover Glow Effect */}
<span className={twMerge(
"absolute inset-0 rounded-lg bg-blue-400/0",
"transition-all duration-300",
"group-hover:bg-blue-400/5"
)} />
</NavLink>
))}
</div>
</div>
{/* Hover Glow Effect */}
<span
className={twMerge(
"absolute inset-0 rounded-lg bg-blue-400/0",
"transition-all duration-300",
"group-hover:bg-blue-400/5"
)}
/>
</NavLink>
))}
</div>
</div>
{/* Mobile Navigation */}
<div className="md:hidden flex overflow-x-auto scrollbar-none px-4 py-2">
<div className="flex space-x-4 min-w-max">
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive: active }) => twMerge(
"px-3 py-1.5 text-sm font-medium rounded-full",
"transition-colors duration-200",
"text-gray-300 hover:text-white",
active && "bg-blue-500/20 text-white"
)}
>
<span className="flex items-center gap-1.5">
{item.icon}
<span>{item.label}</span>
</span>
</NavLink>
))}
</div>
</div>
</div>
</nav>
);
{/* Mobile Navigation */}
<div className="md:hidden flex overflow-x-auto scrollbar-none px-4 py-2">
<div className="flex space-x-4 min-w-max">
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive: active }) =>
twMerge(
"px-3 py-1.5 text-sm font-medium rounded-full",
"transition-colors duration-200",
"text-gray-300 hover:text-white",
active && "bg-blue-500/20 text-white"
)
}>
<span className="flex items-center gap-1.5">
{item.icon}
<span>{item.label}</span>
</span>
</NavLink>
))}
</div>
</div>
</div>
</nav>
);
}

123
apps/web/src/components/layout/main/useNavItem.tsx
View File

@ -1,66 +1,87 @@
import { api } from "@nice/client";
import { TaxonomySlug } from "@nice/common";
import { useMemo } from "react";
import React, { useMemo } from "react";
import { MailOutlined, SendOutlined } from "@ant-design/icons";
import {
FileTextOutlined,
ScheduleOutlined,
QuestionCircleOutlined,
FolderOutlined,
TagsOutlined
FileTextOutlined,
ScheduleOutlined,
QuestionCircleOutlined,
FolderOutlined,
TagsOutlined,
} from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";
export interface NavItem {
to: string;
label: string;
icon?: React.ReactNode;
to: string;
label: string;
icon?: React.ReactNode;
}
export function useNavItem() {
const { data } = api.term.findMany.useQuery({
where: {
taxonomy: { slug: TaxonomySlug.CATEGORY }
}
});
const { user } = useAuth();
const { data } = api.term.findMany.useQuery({
where: {
taxonomy: { slug: TaxonomySlug.CATEGORY },
},
});
const navItems = useMemo(() => {
// 定义固定的导航项
const staticItems = {
letterList: {
to: "/",
label: "公开信件",
icon: <FileTextOutlined className="text-base" />
},
letterProgress: {
to: "/letter-progress",
label: "进度查询",
icon: <ScheduleOutlined className="text-base" />
},
help: {
to: "/help",
label: "使用帮助",
icon: <QuestionCircleOutlined className="text-base" />
}
};
const navItems = useMemo(() => {
// 定义固定的导航项
const staticItems = {
inbox: {
to: user ? "/" : "/inbox",
label: "我收到的",
icon: <MailOutlined className="text-base" />,
},
outbox: {
to: "/outbox",
label: "我发出的",
icon: <SendOutlined className="text-base" />,
},
letterList: {
to: !user ? "/" : "/letter-list",
label: "公开信件",
icon: <FileTextOutlined className="text-base" />,
},
letterProgress: {
to: "/letter-progress",
label: "进度查询",
icon: <ScheduleOutlined className="text-base" />,
},
// help: {
// to: "/help",
// label: "使用帮助",
// icon: <QuestionCircleOutlined className="text-base" />
// }
};
if (!data) {
return [staticItems.letterList, staticItems.letterProgress, staticItems.help];
}
if (!data) {
return [
user && staticItems.inbox,
user && staticItems.outbox,
staticItems.letterList,
staticItems.letterProgress,
// staticItems.help,
].filter(Boolean);
}
// 构建分类导航项
const categoryItems = data.map(term => ({
to: `/write-letter?termId=${term.id}`,
label: term.name,
icon: <TagsOutlined className="text-base"></TagsOutlined>
}));
// 构建分类导航项
const categoryItems = data.map((term) => ({
to: `/write-letter?termId=${term.id}`,
label: term.name,
icon: <TagsOutlined className="text-base"></TagsOutlined>,
}));
// 按照指定顺序返回导航项
return [
staticItems.letterList,
staticItems.letterProgress,
...categoryItems,
staticItems.help
];
}, [data]);
// 按照指定顺序返回导航项
return [
user && staticItems.inbox,
user && staticItems.outbox,
staticItems.letterList,
staticItems.letterProgress,
...categoryItems,
// staticItems.help,
].filter(Boolean);
}, [data]);
return { navItems };
return { navItems };
}

209
apps/web/src/components/models/post/list/LetterList.tsx
View File

@ -1,113 +1,114 @@
import { useState, useEffect, useMemo } from 'react';
import { Input, Pagination, Empty, Spin } from 'antd';
import { useState, useEffect, useMemo } from "react";
import { Input, Pagination, Empty, Spin } from "antd";
import { api, RouterInputs } from "@nice/client";
import { LetterCard } from "../LetterCard";
import { NonVoid } from "@nice/utils";
import { SearchOutlined } from '@ant-design/icons';
import debounce from 'lodash/debounce';
import { postDetailSelect } from '@nice/common';
export default function LetterList({ params }: { params: NonVoid<RouterInputs["post"]["findManyWithPagination"]> }) {
const [searchText, setSearchText] = useState('');
const [currentPage, setCurrentPage] = useState(1);
import { SearchOutlined } from "@ant-design/icons";
import debounce from "lodash/debounce";
import { postDetailSelect } from "@nice/common";
export default function LetterList({
params,
}: {
params: NonVoid<RouterInputs["post"]["findManyWithPagination"]>;
}) {
const [searchText, setSearchText] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const { data, isLoading } = api.post.findManyWithPagination.useQuery({
page: currentPage,
pageSize: params.pageSize,
where: {
OR: [{
title: {
contains: searchText
}
}],
...params?.where
},
orderBy: {
updatedAt: "desc"
},
select: {
...postDetailSelect,
...params.select
}
});
const { data, isLoading } = api.post.findManyWithPagination.useQuery({
page: currentPage,
pageSize: params.pageSize,
where: {
OR: [
{
title: {
contains: searchText,
},
},
],
...params?.where,
},
orderBy: {
updatedAt: "desc",
},
select: {
...postDetailSelect,
...params.select,
},
});
const debouncedSearch = useMemo(
() =>
debounce((value: string) => {
setSearchText(value);
setCurrentPage(1);
}, 300),
[]
);
// Cleanup debounce on unmount
useEffect(() => {
return () => {
debouncedSearch.cancel();
};
}, [debouncedSearch]);
const handleSearch = (value: string) => {
debouncedSearch(value);
};
const debouncedSearch = useMemo(
() =>
debounce((value: string) => {
setSearchText(value);
setCurrentPage(1);
}, 300),
[]
);
// Cleanup debounce on unmount
useEffect(() => {
return () => {
debouncedSearch.cancel();
};
}, [debouncedSearch]);
const handleSearch = (value: string) => {
debouncedSearch(value);
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
// Scroll to top when page changes
window.scrollTo({ top: 0, behavior: 'smooth' });
};
const handlePageChange = (page: number) => {
setCurrentPage(page);
// Scroll to top when page changes
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
<div className="flex flex-col h-full">
{/* Search Bar */}
<div className="p-6 transition-all ">
<Input
variant="filled"
className='w-full'
placeholder="搜索信件标题..."
allowClear
size="large"
onChange={(e) => handleSearch(e.target.value)}
prefix={<SearchOutlined className="text-gray-400" />}
/>
</div>
return (
<div className="flex flex-col h-full">
{/* Search Bar */}
<div className="p-6 transition-all ">
<Input
variant="filled"
className="w-full"
placeholder="搜索信件标题..."
allowClear
size="large"
onChange={(e) => handleSearch(e.target.value)}
prefix={<SearchOutlined className="text-gray-400" />}
/>
</div>
{/* Content Area */}
<div className="flex-grow px-6">
{isLoading ? (
<div className='flex justify-center items-center pt-6'>
<Spin size='large'></Spin>
</div>
) : data?.items.length ? (
<>
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-4 mb-6">
{data.items.map((letter: any) => (
<LetterCard key={letter.id} letter={letter} />
))}
</div>
<div className="flex justify-center pb-6">
<Pagination
current={currentPage}
total={data.totalCount}
pageSize={params.pageSize}
onChange={handlePageChange}
showSizeChanger={false}
showQuickJumper
/>
</div>
</>
) : (
<div className="flex flex-col justify-center items-center pt-6">
<Empty
description={
searchText ? "未找到相关信件" : "暂无信件"
}
/>
</div>
)}
</div>
</div>
);
{/* Content Area */}
<div className="flex-grow px-6">
{isLoading ? (
<div className="flex justify-center items-center pt-6">
<Spin size="large"></Spin>
</div>
) : data?.items.length ? (
<>
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-4 mb-6">
{data.items.map((letter: any) => (
<LetterCard key={letter.id} letter={letter} />
))}
</div>
<div className="flex justify-center pb-6">
<Pagination
current={currentPage}
total={data.totalCount}
pageSize={params.pageSize}
onChange={handlePageChange}
showSizeChanger={false}
showQuickJumper
/>
</div>
</>
) : (
<div className="flex flex-col justify-center items-center pt-6">
<Empty
description={
searchText ? "未找到相关信件" : "暂无信件"
}
/>
</div>
)}
</div>
</div>
);
}

140
apps/web/src/components/models/staff/staff-editor.tsx
View File

@ -1,8 +1,8 @@
import StaffList from "./staff-list";
import { ObjectType, RolePerms } from "@nice/common"
import { Icon } from "@nice/iconer"
import { ObjectType, RolePerms } from "@nice/common";
import { Icon } from "@nice/iconer";
import StaffModal from "./staff-modal";
import { createContext, useEffect, useMemo, useState } from "react";
import React,{ createContext, useEffect, useMemo, useState } from "react";
import { useAuth } from "@web/src/providers/auth-provider";
import { Button } from "antd";
import DepartmentSelect from "../department/department-select";
@ -10,63 +10,87 @@ import { FormInstance, useForm } from "antd/es/form/Form";
import AdminHeader from "../../layout/admin/AdminHeader";
export const StaffEditorContext = createContext<{
domainId: string,
modalOpen: boolean,
setDomainId: React.Dispatch<React.SetStateAction<string>>,
setModalOpen: React.Dispatch<React.SetStateAction<boolean>>,
editId: string,
setEditId: React.Dispatch<React.SetStateAction<string>>,
form: FormInstance<any>,
formLoading: boolean,
setFormLoading: React.Dispatch<React.SetStateAction<boolean>>,
canManageAnyStaff: boolean
domainId: string;
modalOpen: boolean;
setDomainId: React.Dispatch<React.SetStateAction<string>>;
setModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
editId: string;
setEditId: React.Dispatch<React.SetStateAction<string>>;
form: FormInstance<any>;
formLoading: boolean;
setFormLoading: React.Dispatch<React.SetStateAction<boolean>>;
canManageAnyStaff: boolean;
}>({
domainId: undefined,
modalOpen: false,
setDomainId: undefined,
setModalOpen: undefined,
editId: undefined,
setEditId: undefined,
form: undefined,
formLoading: undefined,
setFormLoading: undefined,
canManageAnyStaff: false
domainId: undefined,
modalOpen: false,
setDomainId: undefined,
setModalOpen: undefined,
editId: undefined,
setEditId: undefined,
form: undefined,
formLoading: undefined,
setFormLoading: undefined,
canManageAnyStaff: false,
});
export default function StaffEditor() {
const [form] = useForm()
const [domainId, setDomainId] = useState<string>();
const [modalOpen, setModalOpen] = useState<boolean>(false);
const [editId, setEditId] = useState<string>()
const { user, hasSomePermissions } = useAuth()
const [formLoading, setFormLoading] = useState<boolean>()
useEffect(() => {
if (user) {
setDomainId(user.domainId)
}
}, [user])
const [form] = useForm();
const [domainId, setDomainId] = useState<string>();
const [modalOpen, setModalOpen] = useState<boolean>(false);
const [editId, setEditId] = useState<string>();
const { user, hasSomePermissions } = useAuth();
const [formLoading, setFormLoading] = useState<boolean>();
useEffect(() => {
if (user) {
setDomainId(user.domainId);
}
}, [user]);
const canManageStaff = useMemo(() => {
return hasSomePermissions(RolePerms.MANAGE_ANY_STAFF, RolePerms.MANAGE_DOM_STAFF)
}, [user])
const canManageAnyStaff = useMemo(() => {
return hasSomePermissions(RolePerms.MANAGE_ANY_STAFF)
}, [user])
return <StaffEditorContext.Provider value={{ canManageAnyStaff, formLoading, setFormLoading, form, editId, setEditId, domainId, modalOpen, setDomainId, setModalOpen }}>
<AdminHeader roomId="staff-editor">
<div className="flex items-center gap-4">
<DepartmentSelect rootId={user?.domainId} onChange={(value) => setDomainId(value as string)} disabled={!canManageAnyStaff} value={domainId} className="w-48" domain={true}></DepartmentSelect>
{canManageStaff && <Button
type="primary"
icon={<Icon name="add"></Icon>}
onClick={() => {
setModalOpen(true)
}}>
添加用户
</Button>}
</div>
</AdminHeader>
<StaffList domainId={domainId}></StaffList>
<StaffModal></StaffModal>
</StaffEditorContext.Provider>
const canManageStaff = useMemo(() => {
return hasSomePermissions(
RolePerms.MANAGE_ANY_STAFF,
RolePerms.MANAGE_DOM_STAFF
);
}, [user]);
const canManageAnyStaff = useMemo(() => {
return hasSomePermissions(RolePerms.MANAGE_ANY_STAFF);
}, [user]);
return (
<StaffEditorContext.Provider
value={{
canManageAnyStaff,
formLoading,
setFormLoading,
form,
editId,
setEditId,
domainId,
modalOpen,
setDomainId,
setModalOpen,
}}>
<AdminHeader roomId="staff-editor">
<div className="flex items-center gap-4">
<DepartmentSelect
rootId={user?.domainId}
onChange={(value) => setDomainId(value as string)}
disabled={!canManageAnyStaff}
value={domainId}
className="w-48"
domain={true}></DepartmentSelect>
{canManageStaff && (
<Button
type="primary"
icon={<Icon name="add"></Icon>}
onClick={() => {
setModalOpen(true);
}}>
添加用户
</Button>
)}
</div>
</AdminHeader>
<StaffList domainId={domainId}></StaffList>
<StaffModal></StaffModal>
</StaffEditorContext.Provider>
);
}

142
apps/web/src/components/models/staff/staff-form.tsx
View File

@ -1,10 +1,12 @@
import { Button, Form, Input, Spin, Switch, message } from "antd";
import { useContext, useEffect} from "react";
import { useContext, useEffect } from "react";
import { useStaff } from "@nice/client";
import DepartmentSelect from "../department/department-select";
import { api } from "@nice/client"
import { api } from "@nice/client";
import { StaffEditorContext } from "./staff-editor";
import { useAuth } from "@web/src/providers/auth-provider";
import AvatarUploader from "../../common/uploader/AvatarUploader";
import { StaffDto } from "@nice/common";
export default function StaffForm() {
const { create, update } = useStaff(); // Ensure you have these methods in your hooks
const {
@ -17,7 +19,13 @@ export default function StaffForm() {
canManageAnyStaff,
setEditId,
} = useContext(StaffEditorContext);
const { data, isLoading } = api.staff.findFirst.useQuery(
const {
data,
isLoading,
}: {
data: StaffDto;
isLoading: boolean;
} = api.staff.findFirst.useQuery(
{ where: { id: editId } },
{ enabled: !!editId }
);
@ -31,8 +39,9 @@ export default function StaffForm() {
password,
phoneNumber,
officerId,
enabled
} = values
enabled,
photoUrl,
} = values;
setFormLoading(true);
try {
if (data && editId) {
@ -46,8 +55,11 @@ export default function StaffForm() {
password,
phoneNumber,
officerId,
enabled
}
enabled,
meta: {
photoUrl,
},
},
});
} else {
await create.mutateAsync({
@ -58,8 +70,11 @@ export default function StaffForm() {
domainId: fieldDomainId ? fieldDomainId : domainId,
password,
officerId,
phoneNumber
}
phoneNumber,
meta: {
photoUrl,
},
},
});
form.resetFields();
if (deptId) form.setFieldValue("deptId", deptId);
@ -83,7 +98,8 @@ export default function StaffForm() {
form.setFieldValue("deptId", data.deptId);
form.setFieldValue("officerId", data.officerId);
form.setFieldValue("phoneNumber", data.phoneNumber);
form.setFieldValue("enabled", data.enabled)
form.setFieldValue("enabled", data.enabled);
form.setFieldValue("photoUrl", data?.meta?.photoUrl);
}
}, [data]);
useEffect(() => {
@ -91,7 +107,7 @@ export default function StaffForm() {
form.setFieldValue("domainId", domainId);
form.setFieldValue("deptId", domainId);
}
}, [domainId, data]);
}, [domainId, data as any]);
return (
<div className="relative">
{isLoading && (
@ -106,48 +122,75 @@ export default function StaffForm() {
requiredMark="optional"
autoComplete="off"
onFinish={handleFinish}>
<div className=" flex items-center gap-4 mb-2">
<div>
<Form.Item
name={"photoUrl"}
label="头像"
noStyle
rules={[{ required: true }]}>
<AvatarUploader
style={{
width: "100px",
height: "120px",
}}></AvatarUploader>
</Form.Item>
</div>
<div className="grid grid-cols-1 gap-2 flex-1">
<Form.Item
noStyle
rules={[{ required: true }]}
name={"username"}
label="帐号">
<Input
placeholder="请输入用户名"
allowClear
autoComplete="new-username" // 使用非标准的自动完成值
spellCheck={false}
/>
</Form.Item>
<Form.Item
noStyle
rules={[{ required: true }]}
name={"showname"}
label="姓名">
<Input
placeholder="请输入姓名"
allowClear
autoComplete="new-name" // 使用非标准的自动完成值
spellCheck={false}
/>
</Form.Item>
<Form.Item
noStyle
name={"deptId"}
label="所属单位"
rules={[{ required: true }]}>
<DepartmentSelect
rootId={isRoot ? undefined : domainId}
/>
</Form.Item>
</div>
</div>
{canManageAnyStaff && (
<Form.Item
name={"domainId"}
label="所属域"
rules={[{ required: true }]}>
<DepartmentSelect
placeholder="选择域"
rootId={isRoot ? undefined : domainId}
domain={true}
/>
</Form.Item>
)}
<Form.Item
name={"deptId"}
label="所属单位"
rules={[{ required: true }]}>
<DepartmentSelect rootId={isRoot ? undefined : domainId} />
</Form.Item>
<Form.Item
rules={[{ required: true }]}
name={"username"}
label="帐号">
<Input allowClear
autoComplete="new-username" // 使用非标准的自动完成值
spellCheck={false}
/>
</Form.Item>
<Form.Item
rules={[{ required: true }]}
name={"showname"}
label="姓名">
<Input allowClear
autoComplete="new-name" // 使用非标准的自动完成值
spellCheck={false}
/>
</Form.Item>
<Form.Item
rules={[
{
required: false,
pattern: /^\d{5,18}$/,
message: "请输入正确的证件号（数字）"
}
message: "请输入正确的证件号（数字）",
},
]}
name={"officerId"}
label="证件号">
@ -158,20 +201,29 @@ export default function StaffForm() {
{
required: false,
pattern: /^\d{6,11}$/,
message: "请输入正确的手机号（数字）"
}
message: "请输入正确的手机号（数字）",
},
]}
name={"phoneNumber"}
label="手机号">
<Input autoComplete="new-phone" // 使用非标准的自动完成值
spellCheck={false} allowClear />
<Input
autoComplete="new-phone" // 使用非标准的自动完成值
spellCheck={false}
allowClear
/>
</Form.Item>
<Form.Item label="密码" name={"password"}>
<Input.Password spellCheck={false} visibilityToggle autoComplete="new-password" />
<Input.Password
spellCheck={false}
visibilityToggle
autoComplete="new-password"
/>
</Form.Item>
{editId && <Form.Item label="是否启用" name={"enabled"}>
<Switch></Switch>
</Form.Item>}
{editId && (
<Form.Item label="是否启用" name={"enabled"}>
<Switch></Switch>
</Form.Item>
)}
</Form>
</div>
);

15
apps/web/src/routes/index.tsx
View File

@ -23,6 +23,9 @@ import LetterDetailPage from "../app/main/letter/detail/page";
import AdminLayout from "../components/layout/admin/AdminLayout";
import { CustomRouteObject } from "./types";
import { adminRoute } from "./admin-route";
import InboxPage from "../app/main/letter/inbox/page";
import OutboxPage from "../app/main/letter/outbox/page";
import IndexPage from "../app/main/letter/index/page";
export const routes: CustomRouteObject[] = [
{
path: "/",
@ -36,8 +39,20 @@ export const routes: CustomRouteObject[] = [
{
element: <MainLayout></MainLayout>,
children: [
{
path: "inbox",
element: <InboxPage></InboxPage>,
},
{
path: "outbox",
element: <OutboxPage></OutboxPage>,
},
{
index: true,
element: <IndexPage></IndexPage>,
},
{
path: "letter-list",
element: <LetterListPage></LetterListPage>,
},
{

1
packages/utils/package.json
View File

@ -8,6 +8,7 @@
"scripts": {
"build": "tsup",
"dev": "tsup --watch",
"dev-static": "tsup --no-watch",
"clean": "rimraf dist",
"typecheck": "tsc --noEmit"
},