yml/kefu_cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化整体ui-1

Browse Source
This commit is contained in:
yml2213
2026-08-31 16:25:26 +08:00
parent 2b57bdc0c8
commit 198ff9e1fb
19 changed files with 1273 additions and 959 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/pages/admin/Tenants.tsx
+37 -35
View File
@@ -243,29 +243,27 @@ const Tenants = () => {
}
return (
<div className="h-full flex flex-col min-h-0 overflow-hidden bg-neutral-50">
<div className="h-full flex flex-col min-h-0 bg-slate-50/60 overflow-hidden">
{/* 顶栏 56px */}
<header
className="shrink-0 px-6 flex items-center justify-between border-b border-neutral-200 bg-white"
className="shrink-0 px-6 flex items-center justify-between border-b border-slate-200/80 bg-white"
style={{ height: 'var(--header-height)' }}
>
<div className="flex items-center gap-3 min-w-0">
<h1 className="text-base font-semibold text-neutral-900 m-0">租户管理</h1>
<span className="text-xs px-2 py-0.5 rounded bg-neutral-100 text-neutral-500 tabular-nums">
共 {total} 个租户
</span>
<div className="min-w-0">
<h1 className="text-sm font-bold text-slate-900 m-0 truncate">租户管理</h1>
<p className="text-[11px] text-slate-400 m-0 leading-tight">全平台企业租户全生命周期管理与授权配额</p>
</div>
</header>
{/* 工具栏 */}
<div className="shrink-0 px-6 py-3 border-b border-neutral-200 bg-white">
<div className="shrink-0 px-6 py-3.5 bg-white border-b border-slate-100">
<div className="flex items-center justify-between gap-3 flex-wrap">
<div className="flex items-center gap-3 flex-wrap">
<div className="flex items-center gap-2 h-8 px-3 rounded-md border border-neutral-200 bg-white w-64">
<SearchOutlined className="text-neutral-400 text-xs shrink-0" />
<div className="flex items-center gap-3 flex-1 min-w-[280px] flex-wrap">
<div className="flex items-center gap-2 px-3 h-8.5 rounded-xl max-w-sm w-full bg-slate-100/80 border border-slate-200/70 focus-within:bg-white focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-50 transition-all">
<SearchOutlined className="text-slate-400 text-xs shrink-0" />
<input
type="text"
placeholder="搜索公司名/联系人..."
placeholder="搜索租户名称、联系人、手机号..."
value={searchInput}
onChange={e => setSearchInput(e.target.value)}
onKeyDown={e => {
@@ -274,10 +272,10 @@ const Tenants = () => {
setPage(1)
}
}}
className="flex-1 min-w-0 bg-transparent border-0 outline-none text-sm text-neutral-800 placeholder:text-neutral-400"
className="flex-1 min-w-0 bg-transparent border-0 outline-none text-xs text-slate-800 placeholder:text-slate-400"
/>
</div>
<div className="flex items-center gap-0.5 p-0.5 rounded-md border border-neutral-200 bg-white">
<div className="flex items-center gap-0.5 p-0.5 rounded-xl bg-slate-100 border border-slate-200/60">
{statusFilters.map(f => {
const active = statusFilter === f.key || (!statusFilter && f.key === undefined)
return (
@@ -285,10 +283,10 @@ const Tenants = () => {
key={f.label}
type="button"
onClick={() => { setStatusFilter(f.key); setPage(1) }}
className={`px-3 py-1 text-xs rounded border-0 cursor-pointer transition-colors ${
className={`px-3 py-1 text-xs rounded-lg border-0 cursor-pointer transition-all ${
active
? 'bg-[#2563eb] text-white font-medium'
: 'bg-transparent text-neutral-600 hover:bg-neutral-50'
? 'bg-white text-blue-600 font-semibold shadow-xs'
: 'bg-transparent text-slate-500 hover:text-slate-800'
}`}
>
{f.label}
@@ -297,15 +295,20 @@ const Tenants = () => {
})}
</div>
</div>
<Button type="primary" icon={<PlusOutlined />} className="!h-8" onClick={openCreate}>
开通新账号
<Button
type="primary"
icon={<PlusOutlined />}
className="!h-8 !px-3.5 !text-xs !font-semibold !bg-gradient-to-r !from-blue-600 !to-blue-500 !rounded-lg shadow-sm shadow-blue-500/20"
onClick={openCreate}
>
开通新租户
</Button>
</div>
</div>
{/* 表格 */}
<div className="flex-1 min-h-0 overflow-auto px-6 py-4">
<div className="rounded-lg border border-neutral-200 bg-white overflow-hidden">
<div className="flex-1 min-h-0 overflow-auto px-6 py-5">
<div className="rounded-2xl border border-slate-200/80 bg-white shadow-xs overflow-hidden">
{loading ? (
<div className="py-20 flex justify-center"><Spin size="large" /></div>
) : tenants.length === 0 ? (
@@ -314,11 +317,11 @@ const Tenants = () => {
<div className="overflow-x-auto">
<table className="w-full" style={{ minWidth: 960 }}>
<thead>
<tr className="bg-neutral-50 border-b border-neutral-200">
<tr className="bg-slate-50/80 border-b border-slate-100">
{['公司名称', '联系人', '手机号', '套餐类型', '坐席', '开通日期', '到期日期', '状态', '操作'].map((h, i) => (
<th
key={h}
className={`px-4 py-3 text-[11px] font-semibold text-neutral-500 whitespace-nowrap ${
className={`px-4 py-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap ${
i === 4 || i === 8 ? 'text-center' : 'text-left'
}`}
>
@@ -335,46 +338,46 @@ const Tenants = () => {
return (
<tr
key={record.id}
className="border-t border-neutral-100 hover:bg-neutral-50 cursor-pointer"
className="border-t border-slate-100 hover:bg-slate-50/80 cursor-pointer transition-colors"
onClick={() => openDetail(record)}
>
<td className="px-4 py-3">
<div className="flex items-center gap-2.5 min-w-0">
<div
className="w-8 h-8 rounded-md flex items-center justify-center text-xs font-bold shrink-0"
className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 shadow-2xs"
style={{ backgroundColor: pal.bg, color: pal.color }}
>
{record.name.slice(0, 1)}
</div>
<div className="min-w-0">
<div className="text-sm font-medium text-neutral-900 truncate">{record.name}</div>
<div className="text-[11px] text-neutral-400 truncate">
<div className="text-xs font-semibold text-slate-800 truncate">{record.name}</div>
<div className="text-[10px] text-slate-400 truncate">
ID: T{String(record.id).padStart(4, '0')}
</div>
</div>
</div>
</td>
<td className="px-4 py-3 text-sm text-neutral-700 whitespace-nowrap">
<td className="px-4 py-3 text-xs text-slate-700 whitespace-nowrap">
{record.contact_name || '—'}
</td>
<td className="px-4 py-3 text-sm text-neutral-600 whitespace-nowrap font-mono">
<td className="px-4 py-3 text-xs text-slate-600 whitespace-nowrap font-mono">
{maskPhone(record.contact_phone)}
</td>
<td className="px-4 py-3">
<span
className="inline-flex px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap"
className="inline-flex px-2 py-0.5 rounded-md text-[11px] font-medium whitespace-nowrap"
style={{ backgroundColor: pstyle.bg, color: pstyle.color }}
>
{pname}
</span>
</td>
<td className="px-4 py-3 text-sm text-center text-neutral-700 tabular-nums">
<td className="px-4 py-3 text-xs text-center text-slate-800 font-bold tabular-nums">
{record.seat_count}
</td>
<td className="px-4 py-3 text-sm text-neutral-500 whitespace-nowrap">
<td className="px-4 py-3 text-xs text-slate-400 whitespace-nowrap">
{fmtDate(record.created_at)}
</td>
<td className="px-4 py-3 text-sm text-neutral-700 whitespace-nowrap">
<td className="px-4 py-3 text-xs text-slate-700 font-medium whitespace-nowrap">
{fmtDate(record.expire_at)}
</td>
<td className="px-4 py-3">
@@ -384,12 +387,11 @@ const Tenants = () => {
<div className="flex items-center justify-center gap-1 text-xs">
<button
type="button"
className="px-1.5 py-1 rounded text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"
className="px-2 py-1 rounded-md font-semibold text-blue-600 hover:bg-blue-50 border-0 bg-transparent cursor-pointer transition-colors"
onClick={() => openDetail(record)}
>
查看
</button>
<span className="text-neutral-200">|</span>
<button
type="button"
className="px-1.5 py-1 rounded text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"