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

style: 平台管理端改为浅色主题，与企业端配色一致

Browse Source
This commit is contained in:
selfrelease
2026-07-29 12:16:44 +08:00
parent 0c6cb8d6cb
commit fa6cacb824
6 changed files with 157 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/platform/PlatformOrgs.tsx
+73 -73
View File
@@ -109,8 +109,8 @@ export default function PlatformOrgs() {
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-white">企业租户管理</h1>
<p className="text-sm text-slate-400 mt-1">共 {total} 家企业</p>
<h1 className="text-2xl font-bold text-gray-900">企业租户管理</h1>
<p className="text-sm text-gray-500 mt-1">共 {total} 家企业</p>
</div>
{/* 搜索栏 */}
@@ -119,14 +119,14 @@ export default function PlatformOrgs() {
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
<Input
placeholder="搜索企业名称、城市、联系人..."
className="bg-slate-900 border-slate-700 text-white placeholder:text-slate-500 pl-10"
className="pl-10"
value={search}
onChange={(e) => setSearch(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && fetchOrgs()}
/>
</div>
<Select
className="bg-slate-900 border-slate-700 text-white w-32"
className="w-32"
value={planFilter}
onChange={(e) => setPlanFilter(e.target.value)}
>
@@ -135,20 +135,20 @@ export default function PlatformOrgs() {
<option value="PRO">专业版</option>
<option value="ENTERPRISE">企业版</option>
</Select>
<Button variant="secondary" onClick={fetchOrgs} className="bg-slate-800 text-slate-200 border border-slate-700 hover:bg-slate-700">
<Button variant="secondary" onClick={fetchOrgs}>
搜索
</Button>
<Button onClick={() => setCreateOpen(true)} className="bg-amber-400 text-slate-950 hover:bg-amber-300">
<Button onClick={() => setCreateOpen(true)}>
<Plus className="w-4 h-4 mr-1" />
创建企业
</Button>
</div>
{/* 表格 */}
<div className="bg-slate-900 border border-slate-800 rounded-lg overflow-hidden">
<div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-slate-800 text-slate-400 text-xs">
<tr className="border-b border-gray-200 text-gray-500 text-xs">
<th className="text-left px-4 py-3 font-medium">企业名称</th>
<th className="text-left px-4 py-3 font-medium">套餐</th>
<th className="text-left px-4 py-3 font-medium">城市</th>
@@ -161,37 +161,37 @@ export default function PlatformOrgs() {
</thead>
<tbody>
{loading ? (
<tr><td colSpan={8} className="text-center py-12 text-slate-400">加载中...</td></tr>
<tr><td colSpan={8} className="text-center py-12 text-gray-400">加载中...</td></tr>
) : orgs.length === 0 ? (
<tr><td colSpan={8} className="text-center py-12 text-slate-400">暂无数据</td></tr>
<tr><td colSpan={8} className="text-center py-12 text-gray-400">暂无数据</td></tr>
) : orgs.map((org) => (
<tr key={org.id} className="border-b border-slate-800/50 hover:bg-slate-800/30">
<tr key={org.id} className="border-b border-gray-100 hover:bg-gray-50">
<td className="px-4 py-3">
<div className="text-white font-medium">{org.name}</div>
<div className="text-xs text-slate-500">{org.contactName || '-'} {org.contactPhone || ''}</div>
<div className="text-gray-900 font-medium">{org.name}</div>
<div className="text-xs text-gray-400">{org.contactName || '-'} {org.contactPhone || ''}</div>
</td>
<td className="px-4 py-3">
<span className={`px-2 py-0.5 rounded text-xs font-medium ${PLAN_COLORS[org.plan] || 'bg-gray-100 text-gray-700'}`}>
{PLAN_LABELS[org.plan] || org.plan}
</span>
</td>
<td className="px-4 py-3 text-slate-300">{org.city || '-'}</td>
<td className="px-4 py-3 text-right text-slate-300">{org.employeeCount}</td>
<td className="px-4 py-3 text-right text-slate-300">{org.userCount}</td>
<td className="px-4 py-3 text-right text-slate-300">{org.contractCount}</td>
<td className="px-4 py-3 text-slate-400 text-xs">{new Date(org.createdAt).toLocaleDateString('zh-CN')}</td>
<td className="px-4 py-3 text-gray-700">{org.city || '-'}</td>
<td className="px-4 py-3 text-right text-gray-700">{org.employeeCount}</td>
<td className="px-4 py-3 text-right text-gray-700">{org.userCount}</td>
<td className="px-4 py-3 text-right text-gray-700">{org.contractCount}</td>
<td className="px-4 py-3 text-gray-400 text-xs">{new Date(org.createdAt).toLocaleDateString('zh-CN')}</td>
<td className="px-4 py-3">
<div className="flex items-center justify-center gap-1">
<button
onClick={() => setEditOrg(org)}
className="p-1.5 rounded text-slate-400 hover:text-amber-400 hover:bg-slate-800"
className="p-1.5 rounded text-gray-400 hover:text-primary hover:bg-gray-100"
title="编辑"
>
<Edit2 className="w-4 h-4" />
</button>
<button
onClick={() => setDeleteOrg(org)}
className="p-1.5 rounded text-slate-400 hover:text-red-400 hover:bg-slate-800"
className="p-1.5 rounded text-gray-400 hover:text-red-500 hover:bg-gray-100"
title="删除"
>
<Trash2 className="w-4 h-4" />
@@ -205,11 +205,11 @@ export default function PlatformOrgs() {
{/* 分页 */}
{totalPages > 1 && (
<div className="flex items-center justify-between px-4 py-3 border-t border-slate-800">
<span className="text-xs text-slate-400">第 {page} / {totalPages} 页，共 {total} 条</span>
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-200">
<span className="text-xs text-gray-500">第 {page} / {totalPages} 页，共 {total} 条</span>
<div className="flex gap-2">
<Button size="sm" variant="secondary" disabled={page <= 1} onClick={() => setPage(page - 1)} className="bg-slate-800 text-slate-200 border border-slate-700">上一页</Button>
<Button size="sm" variant="secondary" disabled={page >= totalPages} onClick={() => setPage(page + 1)} className="bg-slate-800 text-slate-200 border border-slate-700">下一页</Button>
<Button size="sm" variant="secondary" disabled={page <= 1} onClick={() => setPage(page - 1)}>上一页</Button>
<Button size="sm" variant="secondary" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>下一页</Button>
</div>
</div>
)}
@@ -217,65 +217,65 @@ export default function PlatformOrgs() {
{/* 创建企业弹窗 */}
{createOpen && (
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" onClick={() => setCreateOpen(false)}>
<div className="bg-slate-900 border border-slate-700 rounded-lg p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-semibold text-white mb-4">创建企业客户</h2>
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={() => setCreateOpen(false)}>
<div className="bg-white border border-gray-200 rounded-lg p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-semibold text-gray-900 mb-4">创建企业客户</h2>
<div className="space-y-3">
<div className="border-b border-slate-700 pb-3">
<h3 className="text-xs text-amber-400 font-medium mb-3">企业信息</h3>
<div className="border-b border-gray-100 pb-3">
<h3 className="text-xs text-primary font-medium mb-3">企业信息</h3>
<div className="grid grid-cols-2 gap-3">
<div className="col-span-2">
<Label className="text-slate-300">企业名称 *</Label>
<Input className="bg-slate-800 border-slate-700 text-white" placeholder="如：北京XX科技有限公司" value={createForm.name} onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })} />
<Label>企业名称 *</Label>
<Input placeholder="如：北京XX科技有限公司" value={createForm.name} onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })} />
</div>
<div>
<Label className="text-slate-300">套餐</Label>
<Select className="bg-slate-800 border-slate-700 text-white" value={createForm.plan} onChange={(e) => setCreateForm({ ...createForm, plan: e.target.value })}>
<Label>套餐</Label>
<Select value={createForm.plan} onChange={(e) => setCreateForm({ ...createForm, plan: e.target.value })}>
<option value="FREE">免费版</option>
<option value="PRO">专业版</option>
<option value="ENTERPRISE">企业版</option>
</Select>
</div>
<div>
<Label className="text-slate-300">员工上限</Label>
<Input type="number" className="bg-slate-800 border-slate-700 text-white" value={createForm.maxEmployees} onChange={(e) => setCreateForm({ ...createForm, maxEmployees: parseInt(e.target.value) || 0 })} />
<Label>员工上限</Label>
<Input type="number" value={createForm.maxEmployees} onChange={(e) => setCreateForm({ ...createForm, maxEmployees: parseInt(e.target.value) || 0 })} />
</div>
<div>
<Label className="text-slate-300">城市</Label>
<Input className="bg-slate-800 border-slate-700 text-white" placeholder="如：北京" value={createForm.city} onChange={(e) => setCreateForm({ ...createForm, city: e.target.value })} />
<Label>城市</Label>
<Input placeholder="如：北京" value={createForm.city} onChange={(e) => setCreateForm({ ...createForm, city: e.target.value })} />
</div>
<div>
<Label className="text-slate-300">联系人</Label>
<Input className="bg-slate-800 border-slate-700 text-white" value={createForm.contactName} onChange={(e) => setCreateForm({ ...createForm, contactName: e.target.value })} />
<Label>联系人</Label>
<Input value={createForm.contactName} onChange={(e) => setCreateForm({ ...createForm, contactName: e.target.value })} />
</div>
<div className="col-span-2">
<Label className="text-slate-300">联系电话</Label>
<Input className="bg-slate-800 border-slate-700 text-white" value={createForm.contactPhone} onChange={(e) => setCreateForm({ ...createForm, contactPhone: e.target.value })} />
<Label>联系电话</Label>
<Input value={createForm.contactPhone} onChange={(e) => setCreateForm({ ...createForm, contactPhone: e.target.value })} />
</div>
</div>
</div>
<div className="border-b border-slate-700 pb-3">
<h3 className="text-xs text-amber-400 font-medium mb-3">管理员账号</h3>
<div className="border-b border-gray-100 pb-3">
<h3 className="text-xs text-primary font-medium mb-3">管理员账号</h3>
<div className="grid grid-cols-2 gap-3">
<div>
<Label className="text-slate-300">管理员姓名</Label>
<Input className="bg-slate-800 border-slate-700 text-white" value={createForm.adminName} onChange={(e) => setCreateForm({ ...createForm, adminName: e.target.value })} />
<Label>管理员姓名</Label>
<Input value={createForm.adminName} onChange={(e) => setCreateForm({ ...createForm, adminName: e.target.value })} />
</div>
<div>
<Label className="text-slate-300">手机号 *</Label>
<Input className="bg-slate-800 border-slate-700 text-white" placeholder="13800000000" maxLength={11} value={createForm.adminPhone} onChange={(e) => setCreateForm({ ...createForm, adminPhone: e.target.value })} />
<Label>手机号 *</Label>
<Input placeholder="13800000000" maxLength={11} value={createForm.adminPhone} onChange={(e) => setCreateForm({ ...createForm, adminPhone: e.target.value })} />
</div>
<div className="col-span-2">
<Label className="text-slate-300">密码 *（至少8位）</Label>
<Input className="bg-slate-800 border-slate-700 text-white" value={createForm.adminPassword} onChange={(e) => setCreateForm({ ...createForm, adminPassword: e.target.value })} />
<Label>密码 *（至少8位）</Label>
<Input value={createForm.adminPassword} onChange={(e) => setCreateForm({ ...createForm, adminPassword: e.target.value })} />
</div>
</div>
</div>
<div className="flex gap-2 pt-2">
<Button className="bg-amber-400 text-slate-950 hover:bg-amber-300 flex-1" onClick={handleCreate} disabled={creating}>
<Button className="flex-1" onClick={handleCreate} disabled={creating}>
{creating ? '创建中...' : '确认创建'}
</Button>
<Button variant="secondary" className="bg-slate-800 text-slate-200 border border-slate-700" onClick={() => setCreateOpen(false)}>取消</Button>
<Button variant="secondary" onClick={() => setCreateOpen(false)}>取消</Button>
</div>
</div>
</div>
@@ -284,33 +284,33 @@ export default function PlatformOrgs() {
{/* 编辑弹窗 */}
{editOrg && (
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" onClick={() => setEditOrg(null)}>
<div className="bg-slate-900 border border-slate-700 rounded-lg p-6 w-full max-w-md" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-semibold text-white mb-4">编辑企业</h2>
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={() => setEditOrg(null)}>
<div className="bg-white border border-gray-200 rounded-lg p-6 w-full max-w-md" onClick={(e) => e.stopPropagation()}>
<h2 className="text-lg font-semibold text-gray-900 mb-4">编辑企业</h2>
<div className="space-y-3">
<div>
<Label className="text-slate-300">企业名称</Label>
<Input className="bg-slate-800 border-slate-700 text-white" value={editOrg.name} onChange={(e) => setEditOrg({ ...editOrg, name: e.target.value })} />
<Label>企业名称</Label>
<Input value={editOrg.name} onChange={(e) => setEditOrg({ ...editOrg, name: e.target.value })} />
</div>
<div>
<Label className="text-slate-300">套餐</Label>
<Select className="bg-slate-800 border-slate-700 text-white" value={editOrg.plan} onChange={(e) => setEditOrg({ ...editOrg, plan: e.target.value })}>
<Label>套餐</Label>
<Select value={editOrg.plan} onChange={(e) => setEditOrg({ ...editOrg, plan: e.target.value })}>
<option value="FREE">免费版</option>
<option value="PRO">专业版</option>
<option value="ENTERPRISE">企业版</option>
</Select>
</div>
<div>
<Label className="text-slate-300">员工上限</Label>
<Input type="number" className="bg-slate-800 border-slate-700 text-white" value={editOrg.maxEmployees} onChange={(e) => setEditOrg({ ...editOrg, maxEmployees: parseInt(e.target.value) || 0 })} />
<Label>员工上限</Label>
<Input type="number" value={editOrg.maxEmployees} onChange={(e) => setEditOrg({ ...editOrg, maxEmployees: parseInt(e.target.value) || 0 })} />
</div>
<div>
<Label className="text-slate-300">城市</Label>
<Input className="bg-slate-800 border-slate-700 text-white" value={editOrg.city || ''} onChange={(e) => setEditOrg({ ...editOrg, city: e.target.value })} />
<Label>城市</Label>
<Input value={editOrg.city || ''} onChange={(e) => setEditOrg({ ...editOrg, city: e.target.value })} />
</div>
<div className="flex gap-2 pt-2">
<Button className="bg-amber-400 text-slate-950 hover:bg-amber-300 flex-1" onClick={handleSaveEdit}>保存</Button>
<Button variant="secondary" className="bg-slate-800 text-slate-200 border border-slate-700" onClick={() => setEditOrg(null)}>取消</Button>
<Button className="flex-1" onClick={handleSaveEdit}>保存</Button>
<Button variant="secondary" onClick={() => setEditOrg(null)}>取消</Button>
</div>
</div>
</div>
@@ -319,24 +319,24 @@ export default function PlatformOrgs() {
{/* 删除确认 */}
{deleteOrg && (
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" onClick={() => setDeleteOrg(null)}>
<div className="bg-slate-900 border border-slate-700 rounded-lg p-6 w-full max-w-sm" onClick={(e) => e.stopPropagation()}>
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={() => setDeleteOrg(null)}>
<div className="bg-white border border-gray-200 rounded-lg p-6 w-full max-w-sm" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-full bg-red-950 flex items-center justify-center">
<Trash2 className="w-5 h-5 text-red-400" />
<div className="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
<Trash2 className="w-5 h-5 text-red-500" />
</div>
<div>
<h2 className="text-lg font-semibold text-white">确认删除</h2>
<p className="text-xs text-slate-400">此操作不可撤销，将级联删除所有数据</p>
<h2 className="text-lg font-semibold text-gray-900">确认删除</h2>
<p className="text-xs text-gray-500">此操作不可撤销，将级联删除所有数据</p>
</div>
</div>
<p className="text-sm text-slate-300 mb-4">
确定要删除企业「<span className="text-white font-medium">{deleteOrg.name}</span>」吗？
<p className="text-sm text-gray-600 mb-4">
确定要删除企业「<span className="text-gray-900 font-medium">{deleteOrg.name}</span>」吗？
该企业下有 {deleteOrg.employeeCount} 名员工、{deleteOrg.contractCount} 份合同、{deleteOrg.payslipCount} 条工资条，都将被永久删除。
</p>
<div className="flex gap-2">
<Button variant="danger" className="flex-1" onClick={handleDelete}>确认删除</Button>
<Button variant="secondary" className="bg-slate-800 text-slate-200 border border-slate-700" onClick={() => setDeleteOrg(null)}>取消</Button>
<Button variant="secondary" onClick={() => setDeleteOrg(null)}>取消</Button>
</div>
</div>
</div>