freedak/TurboHR
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一页面布局与字体样式

Browse Source
This commit is contained in:
selfrelease
2026-07-24 17:30:36 +08:00
parent 4ae24990a7
commit a28b065ab8
25 changed files with 2032 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package-lock.json
Generated
+1497 -4
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+3
View File
@@ -19,14 +19,17 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.52.0",
"react-markdown": "^10.1.0",
"react-router-dom": "^6.26.0",
"recharts": "^3.10.0",
"remark-gfm": "^4.0.1",
"sonner": "^2.0.7",
"xlsx": "^0.18.5",
"zod": "^3.23.0",
"zustand": "^4.5.0"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.20",
"@types/node": "^26.1.1",
"@types/react": "^18.3.0",
"@types/react-dom": "^18.3.0",
frontend/src/components/ui/Modal.tsx
+8 -8
View File
@@ -40,22 +40,22 @@ export default function Modal({ open, onClose, title, children, className, size
'relative bg-white rounded-lg shadow-xl w-full max-h-[90vh] overflow-y-auto transition-all duration-200',
show ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
{
'max-w-md': size === 'sm',
'max-w-lg': size === 'md',
'max-w-2xl': size === 'lg',
'max-w-4xl': size === 'xl',
'max-w-xl': size === 'sm',
'max-w-2xl': size === 'md',
'max-w-3xl': size === 'lg',
'max-w-6xl': size === 'xl',
},
className,
)}>
{title && (
<div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-200">
<h3 className="font-medium text-gray-900 text-sm">{title}</h3>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700" aria-label="关闭">
<div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
<h3 className="font-medium text-gray-900 text-base">{title}</h3>
<button onClick={onClose} className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors" aria-label="关闭">
<X className="w-4 h-4" />
</button>
</div>
)}
<div className="p-4">{children}</div>
<div className="p-5">{children}</div>
</div>
</div>
)
frontend/src/hooks/useUnsavedChanges.ts
+18
View File
@@ -0,0 +1,18 @@
import { useEffect } from 'react'
/**
* 表单未保存时阻止页面离开
* @param isDirty 表单是否有未保存的修改
*/
export function useUnsavedChanges(isDirty: boolean) {
useEffect(() => {
const handler = (e: BeforeUnloadEvent) => {
if (isDirty) {
e.preventDefault()
e.returnValue = ''
}
}
window.addEventListener('beforeunload', handler)
return () => window.removeEventListener('beforeunload', handler)
}, [isDirty])
}
frontend/src/lib/api.ts
+4 -2
View File
@@ -1,8 +1,10 @@
import axios from 'axios'
import { useAuthStore } from '../store/authStore'
const API_BASE = import.meta.env.DEV ? 'http://localhost:3000/api/v1' : '/api/v1'
const api = axios.create({
baseURL: '/api/v1',
baseURL: API_BASE,
timeout: 30000,
})
@@ -27,7 +29,7 @@ api.interceptors.response.use(
try {
const refreshToken = useAuthStore.getState().refreshToken
if (!refreshToken) throw new Error('No refresh token')
const res = await axios.post('/api/v1/auth/refresh', { refreshToken })
const res = await axios.post(`${API_BASE}/auth/refresh`, { refreshToken })
const newToken = res.data.data.accessToken
useAuthStore.getState().updateToken(newToken)
originalRequest.headers.Authorization = `Bearer ${newToken}`
frontend/src/pages/AIAssistant.tsx
+77 -10
View File
@@ -2,6 +2,8 @@ import { useState, useRef, useEffect } from 'react'
import { toast } from 'sonner'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Bot, Send, FileSearch, Scale, Sparkles, Loader2, Mic, Plus, MessageSquare, Trash2, Save, BookOpen } from 'lucide-react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import api from '../lib/api'
import { useAuthStore } from '../store/authStore'
import Card from '../components/ui/Card'
@@ -36,7 +38,13 @@ export default function AIAssistant() {
return (
<div className="space-y-4">
<h1 className="text-xs font-medium">AI 合规顾问</h1>
<div className="flex items-center gap-2">
<Bot className="h-5 w-5 text-primary" />
<div>
<h1 className="text-base font-semibold">AI 合规顾问</h1>
<p className="mt-1 text-sm text-gray-500">智能分析用工风险，辅助合同审查与合规决策</p>
</div>
</div>
<div className="flex gap-1 border-b overflow-x-auto">
{tabs.map((t) => {
@@ -45,7 +53,7 @@ export default function AIAssistant() {
<button
key={t.key}
onClick={() => setTab(t.key)}
className={`flex items-center gap-1.5 px-4 py-2 text-xs font-medium border-b-2 transition-colors whitespace-nowrap ${
className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
tab === t.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
}`}
>
@@ -170,8 +178,9 @@ function ChatTab() {
try {
const token = useAuthStore.getState().accessToken
const controller = new AbortController()
const timeoutId = setTimeout(() => controller.abort(), 35 * 1000)
const response = await fetch('/api/v1/ai/chat-stream', {
const timeoutId = setTimeout(() => controller.abort(), 60 * 1000)
const chatUrl = import.meta.env.DEV ? 'http://localhost:3000/api/v1/ai/chat-stream' : '/api/v1/ai/chat-stream'
const response = await fetch(chatUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -191,6 +200,21 @@ function ChatTab() {
const decoder = new TextDecoder()
let accumulated = ''
let buffer = ''
let rafId: number | null = null
let pendingFlush = false
// 用 RAF 批量刷新，避免每个 token 触发一次 React 重渲染
const flush = () => {
pendingFlush = false
rafId = null
setMessages([...newMessages, { role: 'assistant', content: accumulated }])
}
const scheduleFlush = () => {
if (!pendingFlush) {
pendingFlush = true
rafId = requestAnimationFrame(flush)
}
}
if (reader) {
while (true) {
@@ -207,14 +231,27 @@ function ChatTab() {
const parsed = JSON.parse(data)
if (parsed.delta) {
accumulated += parsed.delta
setMessages([...newMessages, { role: 'assistant', content: accumulated }])
scheduleFlush()
}
} catch {
// ignore parse errors
if (parsed.error) {
throw new Error(parsed.error)
}
} catch (parseErr: any) {
// 只有业务错误（有 message 且不是 SyntaxError）才抛出
if (parseErr instanceof SyntaxError) {
// JSON 解析失败，可能是 SSE 分块截断，跳过等下一块
continue
}
throw parseErr
}
}
}
}
// 确保最后一批内容被刷新
if (rafId) cancelAnimationFrame(rafId)
if (accumulated) {
setMessages([...newMessages, { role: 'assistant', content: accumulated }])
}
}
if (!accumulated) {
setMessages([...newMessages, { role: 'assistant', content: '（无回复内容）' }])
@@ -254,10 +291,40 @@ function ChatTab() {
<div ref={scrollRef} className="flex-1 overflow-y-auto space-y-4 pb-4">
{messages.map((msg, i) => (
<div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
<div className={`max-w-[80%] px-4 py-3 rounded-lg text-xs whitespace-pre-wrap ${
msg.role === 'user' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-800'
<div className={`max-w-[85%] px-4 py-3 rounded-lg text-sm leading-relaxed ${
msg.role === 'user' ? 'bg-primary text-white whitespace-pre-wrap' : 'bg-white border border-gray-200 text-gray-800 shadow-sm'
}`}>
{msg.content || (loading && i === messages.length - 1 ? '思考中...' : '')}
{msg.role === 'assistant' ? (
msg.content ? (
<div className="prose prose-sm max-w-none
prose-headings:text-gray-900 prose-headings:font-semibold
prose-h1:text-base prose-h1:mt-4 prose-h1:mb-2
prose-h2:text-sm prose-h2:mt-3 prose-h2:mb-2
prose-h3:text-sm prose-h3:mt-2 prose-h3:mb-1
prose-p:my-2 prose-p:leading-relaxed
prose-li:my-0.5 prose-li:leading-relaxed
prose-ul:my-2 prose-ol:my-2
prose-code:text-pink-600 prose-code:bg-gray-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-xs prose-code:before:content-none prose-code:after:content-none
prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:rounded-lg prose-pre:p-3 prose-pre:my-3
prose-blockquote:border-l-primary prose-blockquote:bg-primary/5 prose-blockquote:py-1 prose-blockquote:px-3 prose-blockquote:rounded-r prose-blockquote:not-italic
prose-table:text-xs prose-table:border-collapse
prose-th:bg-gray-50 prose-th:px-3 prose-th:py-1.5 prose-th:font-semibold prose-th:border prose-th:border-gray-200
prose-td:px-3 prose-td:py-1.5 prose-td:border prose-td:border-gray-200
prose-a:text-primary prose-a:no-underline hover:prose-a:underline
prose-strong:text-gray-900
prose-hr:border-gray-200 prose-hr:my-4
">
<ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
</div>
) : loading && i === messages.length - 1 ? (
<span className="inline-flex items-center gap-1.5 text-gray-500">
<Loader2 className="w-3.5 h-3.5 animate-spin" />
思考中...
</span>
) : null
) : (
msg.content
)}
</div>
</div>
))}
frontend/src/pages/Compensation.tsx
+8 -2
View File
@@ -62,14 +62,20 @@ export default function Compensation() {
return (
<div className="space-y-3">
<h1 className="text-xs font-medium">补偿计算</h1>
<div className="flex items-center gap-2">
<Calculator className="h-5 w-5 text-primary" />
<div>
<h1 className="text-base font-semibold">补偿计算</h1>
<p className="mt-1 text-sm text-gray-500">根据解除原因快速测算经济补偿与双倍工资</p>
</div>
</div>
<div className="flex gap-1 border-b">
{tabs.map((t) => (
<button
key={t.key}
onClick={() => setTab(t.key)}
className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
tab === t.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
}`}
>
frontend/src/pages/Contracts.tsx
+10 -4
View File
@@ -1,6 +1,6 @@
import { useState, useRef } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Plus, Search, Paperclip, Trash2, X } from 'lucide-react'
import { Plus, Search, Paperclip, Trash2, X, FileText } from 'lucide-react'
import api from '../lib/api'
import Card from '../components/ui/Card'
import Button from '../components/ui/Button'
@@ -57,7 +57,13 @@ export default function Contracts() {
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h1 className="text-lg font-semibold">合同管理</h1>
<div className="flex items-center gap-2">
<FileText className="h-5 w-5 text-primary" />
<div>
<h1 className="text-base font-semibold">合同管理</h1>
<p className="mt-1 text-sm text-gray-500">集中管理劳动合同、签署状态及到期风险</p>
</div>
</div>
<Button onClick={() => setShowAddModal(true)}>
<Plus className="w-4 h-4 mr-1" /> 添加员工
</Button>
@@ -90,9 +96,9 @@ export default function Contracts() {
) : (
<>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-2 px-3 font-medium">姓名</th>
<th className="py-2 px-3 font-medium">部门</th>
<th className="py-2 px-3 font-medium">入职日期</th>
frontend/src/pages/Dashboard.tsx
+6 -3
View File
@@ -158,8 +158,11 @@ export default function Dashboard() {
<div className="space-y-3">
<div className="flex items-center justify-between">
<div>
<h1 className="text-xs font-medium">{data.greeting}</h1>
<p className="text-xs text-gray-500 mt-0.5">{payroll?.month} 月度总览</p>
<div className="flex items-center gap-2">
<LayoutDashboard className="h-5 w-5 text-primary" />
<h1 className="text-base font-semibold">工作台</h1>
</div>
<p className="mt-1 text-sm text-gray-500">{data.greeting} · {payroll?.month} 月度总览</p>
</div>
<Button variant="secondary" size="sm" onClick={() => refetch()} disabled={isFetching} className={activeTab === 'risk' || activeTab === 'task' ? 'opacity-50 pointer-events-none' : ''}>
<RefreshCw className={`w-4 h-4 mr-1 ${isFetching ? 'animate-spin' : ''}`} />
@@ -175,7 +178,7 @@ export default function Dashboard() {
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === tab.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
}`}
>
frontend/src/pages/Money.tsx
+14 -11
View File
@@ -29,7 +29,10 @@ export default function Money() {
<div className="space-y-4">
<div className="flex items-center gap-2">
<Wallet className="w-5 h-5 text-primary" />
<h1 className="text-base font-semibold">薪税管理</h1>
<div>
<h1 className="text-base font-semibold">薪税管理</h1>
<p className="mt-1 text-sm text-gray-500">统一管理发薪批次、工资条及加班薪酬</p>
</div>
</div>
<div className="flex gap-1 border-b overflow-x-auto">
@@ -644,9 +647,9 @@ function BatchDetail({ batchId, onBack }: { batchId: string; onBack: () => void
<Pagination page={page} pageSize={pageSize} total={batch.entries.length} onPageChange={setPage} onPageSizeChange={(s) => { setPageSize(s); setPage(1) }} />
)}
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-2 px-2">员工</th>
<th className="py-2 px-2 text-right">基本工资</th>
<th className="py-2 px-2 text-right">加班费</th>
@@ -875,9 +878,9 @@ function TemplateManager() {
<div className="text-center py-4 text-gray-500">加载中...</div>
) : (
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-2 px-2">序号</th>
<th className="py-2 px-2">名称</th>
<th className="py-2 px-2">字段代码</th>
@@ -1268,9 +1271,9 @@ function OvertimeCalculator() {
<div className="border-t pt-3 space-y-3">
<div className="text-xs font-medium text-gray-700">预览（{previewData.length}条）</div>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">员工</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-right">工作日(h)</th>
@@ -1324,9 +1327,9 @@ function OvertimeCalculator() {
<div className="text-center py-8 text-gray-500">该月暂无加班记录，请先导入考勤数据</div>
) : (
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">员工</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-right">工作日(h)</th>
@@ -1535,9 +1538,9 @@ function PayslipManager() {
<Card>
<Pagination page={page} pageSize={pageSize} total={payslips.length} onPageChange={setPage} onPageSizeChange={(s) => { setPageSize(s); setPage(1) }} />
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-2 px-2">员工</th>
<th className="py-2 px-2">部门</th>
<th className="py-2 px-2 text-right">基本工资</th>
frontend/src/pages/Roster.tsx
+253 -156
View File
@@ -1,10 +1,11 @@
import { useState, useRef } from 'react'
import { toast } from 'sonner'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Users, FileText, AlertTriangle, Calendar, GraduationCap, TrendingUp, Scale, X, Plus, Paperclip, Trash2, Printer, Calculator, Shield, Info, Check, Eye, Download, UserX, UserPlus } from 'lucide-react'
import { Users, FileText, AlertTriangle, Calendar, GraduationCap, TrendingUp, Scale, X, Plus, Paperclip, Trash2, Printer, Calculator, Shield, Info, Check, Eye, Download, UserX, UserPlus, Briefcase, FileSignature, DollarSign, Building2, RotateCcw } from 'lucide-react'
import { QRCodeSVG } from 'qrcode.react'
import api from '../lib/api'
import { useDebouncedValue } from '../hooks/useDebouncedValue'
import { useUnsavedChanges } from '../hooks/useUnsavedChanges'
import Card from '../components/ui/Card'
import Button from '../components/ui/Button'
import { Input, Label, Select } from '../components/ui/Input'
@@ -219,20 +220,26 @@ export default function Roster() {
}
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h1 className="text-xs font-medium">花名册</h1>
<div className="flex gap-2 flex-nowrap items-center">
<div className="space-y-5">
<div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
<div>
<div className="flex items-center gap-2">
<Users className="h-5 w-5 text-primary" />
<h1 className="text-base font-semibold">员工花名册</h1>
</div>
<p className="mt-1 text-sm text-gray-500">统一查看员工状态、合同风险及人事档案</p>
</div>
<div className="flex flex-wrap items-center justify-start gap-2 xl:justify-end">
<Input
placeholder="搜索姓名/部门"
placeholder="搜索姓名或部门"
value={search}
onChange={(e) => { setSearch(e.target.value); setPage(1) }}
className="!w-64 shrink-0"
className="!w-full sm:!w-64 shrink-0"
/>
<select
value={filterStatus}
onChange={(e) => { setFilterStatus(e.target.value); setPage(1) }}
className="text-xs border rounded px-2 py-1.5"
className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
>
<option value="">全部状态</option>
<option value="ACTIVE">在职</option>
@@ -242,7 +249,7 @@ export default function Roster() {
<select
value={filterContractStatus}
onChange={(e) => { setFilterContractStatus(e.target.value); setPage(1) }}
className="text-xs border rounded px-2 py-1.5"
className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
>
<option value="">全部合同</option>
<option value="active">正常</option>
@@ -253,73 +260,80 @@ export default function Roster() {
<option value="unsigned_over_year">未签合同(已满一年)</option>
</select>
{hasActiveFilters && (
<button onClick={clearFilters} className="text-xs text-gray-400 hover:text-gray-600">清除</button>
<button onClick={clearFilters} className="h-9 px-2 text-sm text-gray-400 transition hover:text-gray-700">清除筛选</button>
)}
{selectedIds.size > 0 && (
<>
<Button variant="secondary" onClick={() => setShowBatchRenewModal(true)} className="shrink-0">
<Check className="w-4 h-4 mr-1" />批量续签({selectedIds.size})
</Button>
<Button variant="danger" onClick={() => setShowBatchTerminateModal(true)} className="shrink-0">
<UserX className="w-4 h-4 mr-1" />批量解聘({selectedIds.size})
</Button>
</>
)}
<Button onClick={() => setShowAddModal(true)} className="shrink-0">
<Plus className="w-4 h-4 mr-1" /> 添加员工
<Button onClick={() => setShowAddModal(true)} className="h-9 shrink-0">
<Plus className="mr-1.5 h-4 w-4" />添加员工
</Button>
</div>
</div>
{selectedIds.size > 0 && (
<div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-primary/20 bg-primary/5 px-4 py-3">
<span className="text-sm font-medium text-gray-700">已选择 {selectedIds.size} 名员工</span>
<div className="flex flex-wrap gap-2">
<Button variant="secondary" onClick={() => setShowBatchRenewModal(true)} className="shrink-0">
<Check className="mr-1 h-4 w-4" />批量续签
</Button>
<Button variant="danger" onClick={() => setShowBatchTerminateModal(true)} className="shrink-0">
<UserX className="mr-1 h-4 w-4" />批量解聘
</Button>
</div>
</div>
)}
{isLoading ? (
<div className="text-center py-8 text-gray-400">加载中...</div>
<div className="rounded-lg border border-gray-200 bg-white py-16 text-center text-sm text-gray-400">加载中...</div>
) : filtered.length === 0 ? (
<Card><div className="text-center py-8 text-gray-400">暂无员工</div></Card>
<Card><div className="py-12 text-center text-sm text-gray-400">暂无符合条件的员工</div></Card>
) : (
<Card>
<Pagination
page={pagination.page}
pageSize={pagination.pageSize}
total={pagination.total}
onPageChange={(p) => setPage(p)}
onPageSizeChange={(s) => { setPageSize(s); setPage(1) }}
/>
<Card className="overflow-hidden p-0">
<div className="border-b border-gray-100 px-5">
<Pagination
page={pagination.page}
pageSize={pagination.pageSize}
total={pagination.total}
onPageChange={(p) => setPage(p)}
onPageSizeChange={(s) => { setPageSize(s); setPage(1) }}
/>
</div>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<thead>
<tr className="border-b text-gray-500">
<th className="py-2 px-3 text-left w-8">
<table className="w-full min-w-[1200px] text-sm">
<thead className="bg-gray-50/90">
<tr className="border-b border-gray-200 text-xs font-medium text-gray-500">
<th className="px-4 py-3 text-left w-8">
<input type="checkbox" checked={employees.length > 0 && selectedIds.size === employees.length} onChange={toggleSelectAll} />
</th>
<th className="py-2 px-3 text-left">姓名</th>
<th className="py-2 px-3 text-left">部门</th>
<th className="py-2 px-3 text-left">状态</th>
<th className="py-2 px-3 text-left">入职日期</th>
<th className="py-2 px-3 text-left">离职日期</th>
<th className="py-2 px-3 text-right">月薪</th>
<th className="py-2 px-3 text-left">合同状态</th>
<th className="py-2 px-3 text-left">合同到期</th>
<th className="py-2 px-3 text-center">违纪</th>
<th className="py-2 px-3 text-center">考勤</th>
<th className="py-2 px-3 text-center">培训</th>
<th className="py-2 px-3 text-center">绩效</th>
<th className="py-2 px-3 text-center">工资条</th>
<th className="py-2 px-3 text-center">操作</th>
<th className="px-4 py-3 text-left">姓名</th>
<th className="px-4 py-3 text-left">部门</th>
<th className="px-4 py-3 text-left">状态</th>
<th className="hidden px-4 py-3 text-left">入职日期</th>
<th className="hidden px-4 py-3 text-left">离职日期</th>
<th className="px-4 py-3 text-right">月薪</th>
<th className="px-4 py-3 text-left">合同类型</th>
<th className="px-4 py-3 text-left">合同状态</th>
<th className="hidden px-4 py-3 text-left">合同到期</th>
<th className="px-4 py-3 text-center">违纪</th>
<th className="px-4 py-3 text-center">考勤</th>
<th className="px-4 py-3 text-center">培训</th>
<th className="px-4 py-3 text-center">绩效</th>
<th className="px-4 py-3 text-center">工资条</th>
<th className="px-4 py-3 text-center">操作</th>
</tr>
</thead>
<tbody>
{employees.map((e: any) => (
<tr
key={e.id}
className="border-b last:border-0 cursor-pointer hover:bg-gray-50"
className="border-b border-gray-100 last:border-0 cursor-pointer transition-colors hover:bg-primary/[0.03]"
onClick={() => setSelectedId(e.id)}
>
<td className="py-2 px-3" onClick={(ev) => ev.stopPropagation()}>
<td className="px-4 py-3" onClick={(ev) => ev.stopPropagation()}>
<input type="checkbox" checked={selectedIds.has(e.id)} onChange={() => toggleSelect(e.id)} />
</td>
<td className="py-2 px-3 font-medium">{e.name}</td>
<td className="py-2 px-3 text-gray-500">{e.department}</td>
<td className="py-2 px-3">
<td className="px-4 py-3 font-medium">{e.name}</td>
<td className="px-4 py-3 text-gray-500">{e.department}</td>
<td className="px-4 py-3">
<span className={`px-2 py-0.5 rounded text-xs ${
e.status === 'ACTIVE' ? 'bg-green-50 text-safe'
: e.status === 'PRE_HIRE' ? 'bg-blue-50 text-blue-600'
@@ -328,8 +342,8 @@ export default function Roster() {
{e.status === 'ACTIVE' ? '在职' : e.status === 'PRE_HIRE' ? '预入职' : '离职'}
</span>
</td>
<td className="py-2 px-3 text-gray-500">{e.hireDate?.toString().slice(0, 10)}</td>
<td className="py-2 px-3 text-gray-500">
<td className="hidden px-4 py-3 text-gray-500">{e.hireDate?.toString().slice(0, 10)}</td>
<td className="hidden px-4 py-3 text-gray-500">
{e.hasTermination && e.latestTerminationDate ? (
<span className={e.status === 'RESIGNED' ? 'text-gray-500' : 'text-amber-600'}>
{e.latestTerminationDate.toString().slice(0, 10)}
@@ -339,8 +353,22 @@ export default function Roster() {
<span className="text-gray-300">—</span>
)}
</td>
<td className="py-2 px-3 text-right">¥{fmt(e.monthlySalary)}</td>
<td className="py-2 px-3">
<td className="px-4 py-3 text-right">¥{fmt(e.monthlySalary)}</td>
<td className="px-4 py-3">
{(() => {
const typeConfig: Record<string, { label: string; style: string }> = {
FIXED: { label: '劳动合同-固定期', style: 'bg-blue-50 text-blue-700 border border-blue-200' },
UNFIXED: { label: '劳动合同-无固定期', style: 'bg-purple-50 text-purple-700 border border-purple-200' },
LABOR: { label: '劳务协议', style: 'bg-amber-50 text-amber-700 border border-amber-200' },
INTERNSHIP: { label: '实习协议', style: 'bg-teal-50 text-teal-700 border border-teal-200' },
UNSIGNED: { label: '未签合同', style: 'bg-gray-100 text-gray-500 border border-gray-200' },
}
const ct = e.latestContract?.contractType
const cfg = typeConfig[ct] || typeConfig.UNSIGNED
return <span className={`px-2 py-0.5 rounded text-xs ${cfg.style}`}>{cfg.label}</span>
})()}
</td>
<td className="px-4 py-3">
{(() => {
const tagStyles: Record<string, string> = {
expired: 'bg-red-50 text-danger',
@@ -349,68 +377,92 @@ export default function Roster() {
unsigned: 'bg-yellow-50 text-yellow-700',
expiring: 'bg-yellow-50 text-yellow-700',
active: 'bg-green-50 text-safe',
unfixed: 'bg-blue-50 text-blue-700',
unfixed: 'bg-green-50 text-safe',
}
const statusTextMap: Record<string, string> = {
expired: '已过期',
unsigned_over_year: '未签署(超1年)',
unsigned_over_30: '未签署(超30天)',
unsigned: '未签署',
expiring: '即将到期',
active: '正常',
unfixed: '正常',
}
const style = tagStyles[e.contractStatus] || 'bg-gray-100 text-gray-500'
return <span className={`px-2 py-0.5 rounded text-xs ${style}`}>{e.contractStatusText || '无合同'}</span>
const text = statusTextMap[e.contractStatus] || '无合同'
return <span className={`px-2 py-0.5 rounded text-xs ${style}`}>{text}</span>
})()}
</td>
<td className="py-2 px-3 text-gray-500">
<td className="hidden px-4 py-3 text-gray-500">
{(() => {
const endDate = e.latestContract?.endDate
if (!endDate) return <span className="text-gray-300">—</span>
if (!endDate) {
// 无固定期限合同显示"无固定期限"，否则显示"—"
if (e.latestContract?.contractType === 'UNFIXED') return <span className="text-xs text-gray-400">无固定期限</span>
return <span className="text-gray-300">—</span>
}
const end = new Date(endDate)
const today = new Date()
today.setHours(0, 0, 0, 0)
end.setHours(0, 0, 0, 0)
const diffDays = Math.ceil((end.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
if (diffDays < 0) return <span className="text-danger text-xs">已过期</span>
if (diffDays <= 30) return <span className="text-danger font-medium text-xs">{end.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })} ({diffDays}天)</span>
if (diffDays <= 90) return <span className="text-amber-600 text-xs">{end.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })} ({diffDays}天)</span>
return <span className="text-xs">{end.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })}</span>
const dateStr = end.toISOString().slice(0, 10)
if (diffDays < 0) return <span className="text-danger text-xs">{dateStr} (已过期)</span>
if (diffDays <= 30) return <span className="text-danger font-medium text-xs">{dateStr} ({diffDays}天)</span>
if (diffDays <= 90) return <span className="text-amber-600 text-xs">{dateStr} ({diffDays}天)</span>
return <span className="text-xs">{dateStr}</span>
})()}
</td>
<td className="py-2 px-3 text-center">
<td className="px-4 py-3 text-center">
{e.counts?.disciplinaryRecords ? (
<span className="text-danger font-medium">{e.counts.disciplinaryRecords}</span>
) : <span className="text-gray-300">0</span>}
</td>
<td className="py-2 px-3 text-center text-gray-500">{e.counts?.attendanceRecords || 0}</td>
<td className="py-2 px-3 text-center text-gray-500">{e.counts?.trainingRecords || 0}</td>
<td className="py-2 px-3 text-center text-gray-500">{e.counts?.performanceRecords || 0}</td>
<td className="py-2 px-3 text-center text-gray-500">{e.counts?.payslips || 0}</td>
<td className="py-2 px-3 text-center">
<td className="px-4 py-3 text-center text-gray-500">{e.counts?.attendanceRecords || 0}</td>
<td className="px-4 py-3 text-center text-gray-500">{e.counts?.trainingRecords || 0}</td>
<td className="px-4 py-3 text-center text-gray-500">{e.counts?.performanceRecords || 0}</td>
<td className="px-4 py-3 text-center text-gray-500">{e.counts?.payslips || 0}</td>
<td className="px-4 py-3 text-center">
{e.status === 'ACTIVE' && !e.hasTermination && (
<div className="flex items-center justify-center gap-2">
<button
className="text-xs text-gray-500 hover:text-primary"
type="button"
title="调薪"
aria-label={`为${e.name}调薪`}
className="rounded-md p-1.5 text-gray-500 transition hover:bg-primary/10 hover:text-primary"
onClick={(ev) => {
ev.stopPropagation()
setSalaryEmployee(e)
setShowSalaryModal(true)
}}
>
调薪
<DollarSign className="h-4 w-4" />
</button>
<button
className="text-xs text-gray-500 hover:text-primary"
type="button"
title="调部门"
aria-label={`为${e.name}调整部门`}
className="rounded-md p-1.5 text-gray-500 transition hover:bg-primary/10 hover:text-primary"
onClick={(ev) => {
ev.stopPropagation()
setDeptEmployee(e)
setShowDeptModal(true)
}}
>
调部门
<Building2 className="h-4 w-4" />
</button>
<button
className="text-xs text-gray-500 hover:text-danger flex items-center gap-0.5"
type="button"
title="离职"
aria-label={`为${e.name}办理离职`}
className="rounded-md p-1.5 text-gray-500 transition hover:bg-danger/10 hover:text-danger"
onClick={(ev) => {
ev.stopPropagation()
setResignEmployee(e)
setShowResignModal(true)
}}
>
<UserX className="w-3.5 h-3.5" />离职
<UserX className="h-4 w-4" />
</button>
</div>
)}
@@ -420,7 +472,10 @@ export default function Roster() {
{e.latestTerminationType === 'RESIGNATION' ? '待离职' : '待解聘'}
</span>
<button
className="text-xs text-gray-400 hover:text-danger"
type="button"
title="撤回"
aria-label={`撤回${e.name}的${e.latestTerminationType === 'RESIGNATION' ? '离职' : '解聘'}记录`}
className="rounded-md p-1.5 text-gray-400 transition hover:bg-danger/10 hover:text-danger"
onClick={(ev) => {
ev.stopPropagation()
if (e.latestTerminationId && window.confirm(`确认撤回${e.latestTerminationType === 'RESIGNATION' ? '离职' : '解聘'}记录？`)) {
@@ -428,20 +483,23 @@ export default function Roster() {
}
}}
>
撤回
<RotateCcw className="h-4 w-4" />
</button>
</div>
)}
{e.status === 'RESIGNED' && (
<button
className="text-xs text-primary hover:text-primary/80 flex items-center gap-0.5"
type="button"
title="重新入职"
aria-label={`为${e.name}办理重新入职`}
className="rounded-md p-1.5 text-primary transition hover:bg-primary/10 hover:text-primary/80"
onClick={(ev) => {
ev.stopPropagation()
setRehireEmployee(e)
setShowRehireModal(true)
}}
>
<UserPlus className="w-3.5 h-3.5" />重新入职
<UserPlus className="h-4 w-4" />
</button>
)}
</td>
@@ -747,7 +805,7 @@ function EmployeeProfile({ employeeId, onBack }: { employeeId: string; onBack: (
<button
key={t.key}
onClick={() => setTab(t.key)}
className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors whitespace-nowrap flex items-center gap-1 ${
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors whitespace-nowrap flex items-center gap-1 ${
tab === t.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
}`}
>
@@ -1446,6 +1504,14 @@ function RehireModal({ employee, onClose, onSubmit, loading, error }: {
error: any
}) {
const todayStr = new Date().toISOString().slice(0, 10)
const { data: contractTypes = [] } = useQuery<Array<{ value: string; label: string; hasEndDate: boolean }>>({
queryKey: ['contract-types'],
queryFn: async () => {
const res = await api.get('/roster/contract-types') as any
return res.data || []
},
staleTime: Infinity,
})
const defaultEndDate = (() => {
const d = new Date()
d.setFullYear(d.getFullYear() + 3)
@@ -1591,7 +1657,7 @@ function RehireModal({ employee, onClose, onSubmit, loading, error }: {
<div className="border-t pt-3">
<Label>社保公积金</Label>
<div className="text-xs text-gray-400 mb-2">默认与月工资一致，可手动修改</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-4 gap-3">
<div>
<Label>社保缴费基数</Label>
<Input type="number" value={form.socialInsBase || employee?.monthlySalary || ''} onChange={(e) => setForm({ ...form, socialInsBase: e.target.value })} placeholder="默认为月工资" />
@@ -1611,39 +1677,44 @@ function RehireModal({ employee, onClose, onSubmit, loading, error }: {
</div>
</div>
<div className="border-t pt-3">
<Label>合同类型</Label>
<Select value={form.contractType} onChange={(e) => setForm({ ...form, contractType: e.target.value as any, endDate: e.target.value === 'UNFIXED' ? '' : form.endDate })}>
<option value="FIXED">固定期限</option>
<option value="UNFIXED">无固定期限</option>
<option value="UNSIGNED">暂不签订</option>
</Select>
<div className="grid grid-cols-4 gap-3">
<div className="col-span-1">
<Label>合同类型</Label>
<Select value={form.contractType} onChange={(e) => {
const ct = contractTypes.find(t => t.value === e.target.value)
setForm({ ...form, contractType: e.target.value as any, endDate: ct && !ct.hasEndDate ? '' : form.endDate })
}}>
{contractTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
</Select>
</div>
</div>
</div>
{form.contractType !== 'UNSIGNED' && (
<div className="space-y-3">
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-4 gap-3">
<div>
<Label>签订日期</Label>
<Input type="date" value={form.signDate} onChange={(e) => setForm({ ...form, signDate: e.target.value })} />
<div className="text-xs text-gray-400 mt-0.5">留空表示尚未签订</div>
</div>
<div><Label>合同开始日期</Label><div className="text-xs text-gray-600 py-1.5">{form.startDate || '随入职日期'}</div></div>
{form.contractType === 'FIXED' && (
<div>
<Label>签约时长（年）</Label>
<Input type="number" value={form.contractYears} onChange={(e) => handleContractYearsChange(parseInt(e.target.value) || 0)} min={1} />
</div>
)}
{form.contractType === 'FIXED' && (
<div>
<Label>合同结束日期</Label>
<Input type="date" value={form.endDate} onChange={(e) => handleEndDateChange(e.target.value)} />
</div>
)}
</div>
{form.contractType === 'FIXED' && (
<>
<div className="grid grid-cols-2 gap-3">
<div>
<Label>签约时长（年）</Label>
<Input type="number" value={form.contractYears} onChange={(e) => handleContractYearsChange(parseInt(e.target.value) || 0)} min={1} />
</div>
<div>
<Label>合同结束日期</Label>
<Input type="date" value={form.endDate} onChange={(e) => handleEndDateChange(e.target.value)} />
</div>
</div>
<div className="text-xs text-gray-400">修改签约时长自动计算结束日期，修改结束日期自动计算签约时长</div>
</>
<div className="text-xs text-gray-400">修改签约时长自动计算结束日期，修改结束日期自动计算签约时长</div>
)}
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-4 gap-3">
<div>
<Label>试用期（月）</Label>
<Input type="number" value={form.probationMonths} onChange={(e) => setForm({ ...form, probationMonths: parseInt(e.target.value) || 0 })} min={0} max={6} />
@@ -1691,6 +1762,14 @@ function AddEmployeeModal({ onClose, onSubmit, loading, error }: {
return res.data?.length ? res.data : ['北京']
},
})
const { data: contractTypes = [] } = useQuery<Array<{ value: string; label: string; hasEndDate: boolean }>>({
queryKey: ['contract-types'],
queryFn: async () => {
const res = await api.get('/roster/contract-types') as any
return res.data || []
},
staleTime: Infinity,
})
const defaultEndDate = (() => {
const d = new Date()
d.setFullYear(d.getFullYear() + 3)
@@ -1823,34 +1902,40 @@ function AddEmployeeModal({ onClose, onSubmit, loading, error }: {
&& (form.contractType === 'UNSIGNED' || form.startDate)
&& !probationError && !probationSalaryError
const isDirty = !!(form.name || form.department || form.idCardNumber || form.monthlySalary || form.phone)
useUnsavedChanges(isDirty)
return (
<Modal open onClose={onClose} title="添加员工">
<div className="space-y-3">
<Modal open onClose={onClose} title="添加员工" size="xl">
<div className="space-y-4">
{error && (
<div className="px-3 py-2 rounded-md bg-red-50 text-red-700 text-xs">
<div className="px-3 py-2 rounded-md bg-red-50 text-red-700 text-sm">
{error.response?.data?.error?.message || '操作失败'}
</div>
)}
<div className="grid grid-cols-2 gap-3">
{/* 基本信息 */}
<div className="grid grid-cols-4 gap-4">
<div><Label>姓名 *</Label><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="员工姓名" /></div>
<div><Label>部门 *</Label><Input value={form.department} onChange={(e) => setForm({ ...form, department: e.target.value })} placeholder="如：技术部" /></div>
<div><Label>身份证号 *</Label><Input value={form.idCardNumber} onChange={(e) => handleIdCardChange(e.target.value)} placeholder="18位" maxLength={18} /></div>
<div><Label>性别</Label><div className="text-sm text-gray-600 py-2">{form.idCardNumber.length >= 17 ? form.gender : '自动识别'}</div></div>
</div>
<div className="grid grid-cols-2 gap-3">
<div><Label>身份证号 *</Label><Input value={form.idCardNumber} onChange={(e) => handleIdCardChange(e.target.value)} placeholder="18位身份证号" maxLength={18} /></div>
<div><Label>性别</Label><div className="text-xs text-gray-600 py-1.5">{form.idCardNumber.length >= 17 ? form.gender : '由身份证号自动识别'}</div></div>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-4 gap-4">
<div><Label>入职日期 *</Label><Input type="date" value={form.hireDate} onChange={(e) => handleHireDateChange(e.target.value)} /></div>
<div><Label>月工资 *</Label><Input type="number" value={form.monthlySalary} onChange={(e) => setForm({ ...form, monthlySalary: e.target.value })} placeholder="元" /></div>
</div>
<div className="grid grid-cols-2 gap-3">
<div><Label>手机号</Label><Input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="选填" maxLength={11} /></div>
<div><Label>参保城市</Label><select className="w-full text-xs border rounded px-2 py-1.5" value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })}>{cities.map((c) => <option key={c} value={c}>{c}</option>)}</select></div>
</div>
<div className="border-t pt-3">
<Label>社保公积金</Label>
<div className="text-xs text-gray-400 mb-2">默认与月工资一致，可手动修改</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-4 gap-4">
<div><Label>参保城市</Label><Select value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })}>{cities.map((c) => <option key={c} value={c}>{c}</option>)}</Select></div>
</div>
{/* 社保公积金 */}
<div className="border-t border-gray-200 pt-4">
<div className="flex items-center gap-2 mb-3">
<Briefcase className="w-4 h-4 text-gray-500" />
<span className="text-sm font-medium text-gray-700">社保公积金</span>
<span className="text-xs text-gray-500">默认与月工资一致，可手动修改</span>
</div>
<div className="grid grid-cols-4 gap-4">
<div>
<Label>社保缴费基数</Label>
<Input type="number" value={form.socialInsBase || form.monthlySalary} onChange={(e) => setForm({ ...form, socialInsBase: e.target.value })} placeholder="默认为月工资" />
@@ -1869,58 +1954,70 @@ function AddEmployeeModal({ onClose, onSubmit, loading, error }: {
</div>
</div>
</div>
<div className="border-t pt-3">
<Label>合同类型</Label>
<Select value={form.contractType} onChange={(e) => setForm({ ...form, contractType: e.target.value as any, endDate: e.target.value === 'UNFIXED' ? '' : form.endDate })}>
<option value="FIXED">固定期限</option><option value="UNFIXED">无固定期限</option><option value="UNSIGNED">未签合同</option>
</Select>
{/* 合同信息 */}
<div className="border-t border-gray-200 pt-4">
<div className="flex items-center gap-2 mb-3">
<FileSignature className="w-4 h-4 text-gray-500" />
<span className="text-sm font-medium text-gray-700">合同信息</span>
</div>
<div className="grid grid-cols-4 gap-4">
<div className="col-span-1">
<Label>合同类型</Label>
<Select value={form.contractType} onChange={(e) => {
const ct = contractTypes.find(t => t.value === e.target.value)
setForm({ ...form, contractType: e.target.value as any, endDate: ct && !ct.hasEndDate ? '' : form.endDate })
}}>
{contractTypes.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
</Select>
</div>
</div>
</div>
{form.contractType !== 'UNSIGNED' && (
<div className="space-y-3">
<div className="grid grid-cols-2 gap-3">
<div className="space-y-4">
<div className="grid grid-cols-4 gap-4">
<div>
<Label>签订日期</Label>
<Input type="date" value={form.signDate} onChange={(e) => setForm({ ...form, signDate: e.target.value })} />
<div className="text-xs text-gray-400 mt-0.5">留空表示尚未签订</div>
<div className="text-xs text-gray-500 mt-1">留空表示尚未签订</div>
</div>
<div><Label>合同开始日期</Label><div className="text-xs text-gray-600 py-1.5">{form.startDate || '随入职日期'}</div></div>
<div><Label>合同开始日期</Label><div className="text-sm text-gray-600 py-2">{form.startDate || '随入职日期'}</div></div>
{form.contractType === 'FIXED' && (
<div>
<Label>签约时长（年）</Label>
<Input type="number" value={form.contractYears} onChange={(e) => handleContractYearsChange(parseInt(e.target.value) || 0)} min={1} />
</div>
)}
{form.contractType === 'FIXED' && (
<div>
<Label>合同结束日期</Label>
<Input type="date" value={form.endDate} onChange={(e) => handleEndDateChange(e.target.value)} />
</div>
)}
</div>
{form.contractType === 'FIXED' && (
<>
<div className="grid grid-cols-2 gap-3">
<div>
<Label>签约时长（年）</Label>
<Input type="number" value={form.contractYears} onChange={(e) => handleContractYearsChange(parseInt(e.target.value) || 0)} min={1} />
</div>
<div>
<Label>合同结束日期</Label>
<Input type="date" value={form.endDate} onChange={(e) => handleEndDateChange(e.target.value)} />
</div>
</div>
<div className="text-xs text-gray-400">修改签约时长自动计算结束日期，修改结束日期自动计算签约时长</div>
</>
<div className="text-xs text-gray-500">修改签约时长自动计算结束日期，修改结束日期自动计算签约时长</div>
)}
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-4 gap-4">
<div>
<Label>试用期（月）</Label>
<Input type="number" value={form.probationMonths} onChange={(e) => setForm({ ...form, probationMonths: parseInt(e.target.value) || 0 })} min={0} max={6} />
{contractMonths > 0 && (
<div className="text-xs text-gray-400 mt-0.5">法定上限：{probationMax}个月</div>
<div className="text-xs text-gray-500 mt-1">法定上限：{probationMax}个月</div>
)}
{probationError && <div className="text-xs text-danger mt-0.5">{probationError}</div>}
{probationError && <div className="text-xs text-danger mt-1">{probationError}</div>}
</div>
<div>
<Label>试用期工资{form.probationMonths > 0 ? ' *' : ''}</Label>
<Input type="number" value={form.probationSalary} onChange={(e) => setForm({ ...form, probationSalary: parseFloat(e.target.value) || 0 })} disabled={form.probationMonths <= 0} />
{monthlySalaryNum > 0 && form.probationMonths > 0 && (
<div className="text-xs text-gray-400 mt-0.5">不低于转正工资80%（≥¥{(monthlySalaryNum * 0.8).toFixed(0)}）</div>
<div className="text-xs text-gray-500 mt-1">不低于转正工资80%（≥¥{(monthlySalaryNum * 0.8).toFixed(0)}）</div>
)}
{probationSalaryError && <div className="text-xs text-danger mt-0.5">{probationSalaryError}</div>}
{probationSalaryError && <div className="text-xs text-danger mt-1">{probationSalaryError}</div>}
</div>
</div>
</div>
)}
<div className="flex justify-end gap-2 pt-2">
<div className="flex justify-end gap-3 pt-3 border-t border-gray-200">
<Button variant="secondary" onClick={onClose}>取消</Button>
<Button onClick={handleSubmit} disabled={loading || !canSubmit}>{loading ? '保存中...' : '保存'}</Button>
</div>
@@ -2040,9 +2137,9 @@ function PayslipInfo({ payslips }: { payslips: any[] }) {
const totalPay = payslips.reduce((s, p) => s + (p.totalPay || 0), 0)
return (
<Card>
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">月份</th>
<th className="py-2 text-right">基本工资</th>
<th className="py-2 text-right">加班费</th>
@@ -2093,9 +2190,9 @@ function OvertimeInfo({ records }: { records: any[] }) {
const totalHoliday = records.reduce((sum, o) => sum + (o.holidayHours || 0), 0)
return (
<Card>
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">月份</th>
<th className="py-2 text-right">工作日(h)</th>
<th className="py-2 text-right">休息日(h)</th>
@@ -2474,9 +2571,9 @@ function AttendanceInfo({ employeeId, records }: { employeeId: string; records:
<Card><div className="text-center py-8 text-gray-400">暂无考勤记录</div></Card>
) : (
<Card>
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">日期</th>
<th className="py-2 text-left">签到</th>
<th className="py-2 text-left">签退</th>
frontend/src/pages/Settings.tsx
+14 -8
View File
@@ -44,7 +44,13 @@ export default function Settings() {
return (
<div className="space-y-3">
<h1 className="text-xs font-medium">系统设置</h1>
<div className="flex items-center gap-2">
<Building2 className="h-5 w-5 text-primary" />
<div>
<h1 className="text-base font-semibold">系统设置</h1>
<p className="mt-1 text-sm text-gray-500">配置企业资料、用户权限、套餐与通知偏好</p>
</div>
</div>
<div className="flex gap-1 border-b">
{sections.map((s) => {
@@ -53,7 +59,7 @@ export default function Settings() {
<button
key={s.key}
onClick={() => setActiveSection(s.key)}
className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
className={`flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeSection === s.key ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
}`}
>
@@ -158,9 +164,9 @@ function UserSettings({ usersData }: { usersData: any }) {
</Button>
</div>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-2 px-3 font-medium">姓名</th>
<th className="py-2 px-3 font-medium">手机号</th>
<th className="py-2 px-3 font-medium">角色</th>
@@ -652,13 +658,13 @@ function ImportSettings() {
<div className="flex gap-1 border-b">
<button
onClick={() => setImportType('init')}
className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${importType === 'init' ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${importType === 'init' ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
>
初始化导入
</button>
<button
onClick={() => setImportType('monthly')}
className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${importType === 'monthly' ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${importType === 'monthly' ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'}`}
>
月度导入
</button>
@@ -830,9 +836,9 @@ function InitImport() {
})}
</div>
<div className="overflow-x-auto max-h-60 overflow-y-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead className="sticky top-0 bg-white">
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-1 px-2">行号</th>
<th className="py-1 px-2">姓名</th>
<th className="py-1 px-2">状态</th>
frontend/src/pages/SocialInsurance.tsx
+37 -31
View File
@@ -232,7 +232,13 @@ export default function SocialInsurance() {
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h1 className="text-xs font-medium">社保公积金</h1>
<div className="flex items-center gap-2">
<Calculator className="h-5 w-5 text-primary" />
<div>
<h1 className="text-base font-semibold">社保公积金</h1>
<p className="mt-1 text-sm text-gray-500">维护社保与公积金缴费基数、版本及月度记录</p>
</div>
</div>
<div className="flex gap-2">
{tab !== 'monthly' && (
<>
@@ -253,7 +259,7 @@ export default function SocialInsurance() {
{(['social', 'housing', 'monthly'] as const).map((t) => (
<button
key={t}
className={`px-4 py-2 text-xs font-medium border-b-2 transition-colors ${
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
tab === t ? 'border-primary text-primary' : 'border-transparent text-gray-500 hover:text-gray-700'
}`}
onClick={() => { setTab(t); setShowVersions(false); setShowNewVersion(false); setShowAdjust(false); setAdjustData(null); setEditItems({}); setEditingId(null) }}
@@ -262,9 +268,9 @@ export default function SocialInsurance() {
</button>
))}
<div className="flex items-center gap-2 ml-auto">
<label className="text-xs text-gray-500">城市:</label>
<label className="text-sm text-gray-500">城市:</label>
<select
className="text-xs border rounded px-2 py-1.5"
className="h-9 rounded-md border border-gray-200 bg-white px-3 text-sm text-gray-700 shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
value={city}
onChange={(e) => setCity(e.target.value)}
>
@@ -286,8 +292,8 @@ export default function SocialInsurance() {
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="px-2 py-0.5 rounded text-xs bg-green-50 text-safe">当前生效</span>
<span className="text-xs text-gray-500">生效月份：{activeConfig.effectiveFrom}</span>
<span className="text-xs text-gray-500">· {activeConfig.city}</span>
<span className="text-sm text-gray-500">生效月份：{activeConfig.effectiveFrom}</span>
<span className="text-sm text-gray-500">· {activeConfig.city}</span>
{activeConfig.adjustmentDone && (
<span className="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-500">已调整员工基数</span>
)}
@@ -320,14 +326,14 @@ export default function SocialInsurance() {
</div>
</div>
{isHousing ? (
<div className="grid md:grid-cols-4 gap-3 text-xs">
<div className="grid md:grid-cols-4 gap-3 text-sm">
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数下限</span><span className="font-medium">¥{fmt(activeConfig.baseMin)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数上限</span><span className="font-medium">¥{fmt(activeConfig.baseMax)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金(企业)</span><span className="font-medium">{activeConfig.housingOrg}%</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">公积金(个人)</span><span className="font-medium">{activeConfig.housingEmp}%</span></div>
</div>
) : (
<div className="grid md:grid-cols-4 gap-3 text-xs">
<div className="grid md:grid-cols-4 gap-3 text-sm">
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数下限</span><span className="font-medium">¥{fmt(activeConfig.baseMin)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">缴费基数上限</span><span className="font-medium">¥{fmt(activeConfig.baseMax)}</span></div>
<div className="flex justify-between border-b pb-1.5"><span className="text-gray-500">养老(企业/个人)</span><span className="font-medium">{activeConfig.pensionOrg}% / {activeConfig.pensionEmp}%</span></div>
@@ -346,7 +352,7 @@ export default function SocialInsurance() {
{/* 调整预览 */}
{tab !== 'monthly' && showAdjust && adjustData && (
<Card>
<h3 className="text-xs font-medium mb-3 flex items-center gap-2">
<h3 className="text-sm font-medium mb-3 flex items-center gap-2">
<SettingsIcon className="w-4 h-4" />员工{isHousing ? '公积金' : '社保'}基数调整
</h3>
<div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md flex items-start gap-2 mb-3">
@@ -374,9 +380,9 @@ export default function SocialInsurance() {
<span className="text-xs text-gray-400">共 {adjustData.total} 名员工</span>
</div>
<div className="overflow-x-auto mb-4">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">姓名</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-right">上年月均</th>
@@ -437,9 +443,9 @@ export default function SocialInsurance() {
<div className="text-center py-4 text-gray-400 text-xs">暂无版本记录</div>
) : (
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">生效月份</th>
<th className="py-2 text-left">失效月份</th>
<th className="py-2 text-left">城市</th>
@@ -530,7 +536,7 @@ export default function SocialInsurance() {
{tab !== 'monthly' && (
<div className="grid md:grid-cols-2 gap-4">
<Card>
<h2 className="text-xs font-medium mb-3">{isHousing ? '公积金' : '社保'}试算</h2>
<h2 className="text-sm font-medium mb-3">{isHousing ? '公积金' : '社保'}试算</h2>
<div className="space-y-3">
<div>
<Label>缴费基数（月工资）</Label>
@@ -541,7 +547,7 @@ export default function SocialInsurance() {
{(isHousing ? housingCalcPending : isPending) ? '计算中...' : '开始计算'}
</Button>
{activeConfig && (
<div className="text-xs text-gray-400">
<div className="text-sm text-gray-400">
当前配置：{activeConfig.city} | 基数范围 {fmt(activeConfig.baseMin)}~{fmt(activeConfig.baseMax)}
</div>
)}
@@ -549,22 +555,22 @@ export default function SocialInsurance() {
</Card>
<Card>
<h2 className="text-xs font-medium mb-3 flex items-center gap-2"><Calculator className="w-4 h-4" />计算结果</h2>
<h2 className="text-sm font-medium mb-3 flex items-center gap-2"><Calculator className="w-4 h-4" />计算结果</h2>
{(() => {
const r = isHousing ? housingResult : result
if (!r) return <div className="text-gray-400 text-xs">点击「开始计算」查看结果</div>
if (!r) return <div className="text-gray-400 text-sm">点击「开始计算」查看结果</div>
return (
<div className="space-y-3">
<div className="text-xs text-gray-500">
<div className="text-sm text-gray-500">
缴费基数：<span className="text-gray-900 font-medium">¥{fmt(r.actualBase)}</span>
{r.capped && <span className="text-warning ml-2">（已封顶）</span>}
{r.floored && <span className="text-warning ml-2">（已保底）</span>}
{r.configVersion && <span className="text-gray-400 ml-2">| 配置版本：{r.configVersion}</span>}
</div>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-left text-gray-500">
<tr className="border-b text-left text-xs text-gray-500">
<th className="py-1.5">险种</th>
<th className="py-1.5 text-right">企业%</th>
<th className="py-1.5 text-right">个人%</th>
@@ -612,7 +618,7 @@ export default function SocialInsurance() {
{tab === 'monthly' && (
<Card>
<div className="flex items-center justify-between mb-3">
<h2 className="text-xs font-medium">月度办理</h2>
<h2 className="text-sm font-medium">月度办理</h2>
<div className="flex items-center gap-2">
<Input type="month" value={monthlyMonth} onChange={(e) => setMonthlyMonth(e.target.value)} className="!w-32" />
<Button variant="secondary" size="sm" onClick={() => monthlyChanges && handleExportCSV('social', monthlyChanges.social)}>
@@ -623,11 +629,11 @@ export default function SocialInsurance() {
</Button>
</div>
</div>
<div className="bg-blue-50 text-blue-700 text-xs px-3 py-2 rounded-md mb-3">
<div className="bg-blue-50 text-blue-700 text-sm px-3 py-2 rounded-md mb-3">
展示当月社保/公积金新增（入职/重新入职）、减少（离职/解聘）及正常在保人员列表，用于经办机构申报。
</div>
{(() => {
if (!monthlyChanges) return <div className="text-center py-4 text-gray-400 text-xs">加载中...</div>
if (!monthlyChanges) return <div className="text-center py-4 text-gray-400 text-sm">加载中...</div>
const sAdd = monthlyChanges.social?.additions || []
const sSub = monthlyChanges.social?.subtractions || []
const sNormal = monthlyChanges.socialActive?.items || []
@@ -635,17 +641,17 @@ export default function SocialInsurance() {
const hSub = monthlyChanges.housing?.subtractions || []
const hNormal = monthlyChanges.housingActive?.items || []
if (sAdd.length === 0 && sSub.length === 0 && hAdd.length === 0 && hSub.length === 0 && sNormal.length === 0 && hNormal.length === 0) {
return <div className="text-center py-4 text-gray-400 text-xs">{monthlyMonth} 无办理记录</div>
return <div className="text-center py-4 text-gray-400 text-sm">{monthlyMonth} 无办理记录</div>
}
return (
<div className="space-y-4">
{/* 社保 */}
<div>
<h3 className="text-xs font-medium mb-2">社保</h3>
<h3 className="text-sm font-medium mb-2">社保</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">姓名</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-left">类型</th>
@@ -691,11 +697,11 @@ export default function SocialInsurance() {
</div>
{/* 公积金 */}
<div>
<h3 className="text-xs font-medium mb-2">公积金</h3>
<h3 className="text-sm font-medium mb-2">公积金</h3>
<div className="overflow-x-auto">
<table className="w-full text-xs">
<table className="w-full text-sm">
<thead>
<tr className="border-b text-gray-500">
<tr className="border-b text-xs text-gray-500">
<th className="py-2 text-left">姓名</th>
<th className="py-2 text-left">部门</th>
<th className="py-2 text-left">类型</th>
@@ -745,7 +751,7 @@ export default function SocialInsurance() {
</Card>
)}
<p className="text-xs text-gray-400">
<p className="text-sm text-gray-400">
社保/公积金基数按上年度月均工资核定，每人不同，在员工基本信息中设置。比例和基数上下限按版本管理，通常每年7月调整。
发薪批次计算时按批次月份自动匹配对应版本配置。
</p>
frontend/src/pages/Termination.tsx
+7 -1
View File
@@ -593,7 +593,13 @@ export default function Termination() {
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<h1 className="text-xs font-medium">解聘补偿</h1>
<div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
<div>
<h1 className="text-base font-semibold">解聘补偿</h1>
<p className="mt-1 text-sm text-gray-500">规范处理离职、解聘审批及补偿核算流程</p>
</div>
</div>
{view === 'list' && (
<Button size="sm" onClick={handleNewTermination}>
<Plus className="w-4 h-4 mr-1" />新建解聘
frontend/src/vite-env.d.ts
Vendored
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
frontend/tailwind.config.ts
+3 -1
View File
@@ -1,3 +1,5 @@
import typography from '@tailwindcss/typography'
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
@@ -19,5 +21,5 @@ export default {
},
},
},
plugins: [],
plugins: [typography],
}
frontend/vite.config.js
-6
View File
@@ -10,11 +10,5 @@ export default defineConfig({
},
server: {
port: 5173,
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
},
},
},
});
frontend/vite.config.ts
-6
View File
@@ -11,11 +11,5 @@ export default defineConfig({
},
server: {
port: 5173,
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
},
},
},
})