feat: release contextual omnichannel customer platform

Add Telegram, WhatsApp and email account management, realtime messaging, contextual multilingual AI, customer intelligence, knowledge workflows, enterprise controls, a unified design system and complete repository documentation.

src/pages/analytics/AnalyticsPage.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { PageLoading, ErrorState } from '@/components/ui/feedback'
 import { PageHeader } from '@/components/common/PageHeader'
@@ -8,13 +9,20 @@ import { LiveDataBadge } from '@/components/common/LiveDataBadge'
 import { CountryFlag } from '@/components/common/CountryFlag'
 import { ChartCard, TrendChart, DonutChart, FunnelChart, RankBars, SimpleBarChart } from '@/components/charts'
 import { getAnalytics } from '@/services/api/org'
-import { formatNumber } from '@/utils/format'
-import { Activity, BadgePercent, TrendingUp, Users, Zap, Timer, AlertTriangle, Target } from 'lucide-react'
+import { Activity, BadgePercent, Users, Zap, Target } from 'lucide-react'
+
+const PERIOD_OPTIONS = [
+  { value: 'today', label: '今日' },
+  { value: '7d', label: '近 7 天' },
+  { value: '30d', label: '近 30 天' },
+  { value: 'quarter', label: '本季度' },
+] as const
 
 export function AnalyticsPage() {
+  const [period, setPeriod] = useState<(typeof PERIOD_OPTIONS)[number]['value']>('30d')
   const { data, isLoading, isError, refetch } = useQuery({
-    queryKey: ['analytics'],
-    queryFn: () => getAnalytics(),
+    queryKey: ['analytics', period],
+    queryFn: () => getAnalytics({ period }),
   })
 
   if (isLoading) return <PageLoading />
@@ -23,21 +31,35 @@ export function AnalyticsPage() {
   const k = data.kpis
 
   return (
-    <div className="p-4 md:p-6">
+    <div className="page-shell">
       <PageHeader
-        title="数据分析中心"
-        description="查看客户、消息、跟进与转化数据"
-        actions={<LiveDataBadge />}
-        extra={
-          <div className="flex flex-wrap items-center gap-2">
-            {['today', '7d', '30d', 'quarter'].map((p) => (
-              <button key={p} className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground hover:bg-border">{p === '30d' ? '近30天' : p === '7d' ? '近7天' : p === 'today' ? '今日' : '本季度'}</button>
-            ))}
+        title="业务分析"
+        description="从客户获取、沟通效率到成交转化，查看完整经营链路"
+        actions={
+          <div className="flex items-center gap-2">
+            <LiveDataBadge />
+            <div className="flex rounded-[10px] border border-slate-200 bg-white p-1 shadow-sm">
+              {PERIOD_OPTIONS.map((option) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  aria-pressed={period === option.value}
+                  onClick={() => setPeriod(option.value)}
+                  className={`rounded-[7px] px-3 py-1.5 text-xs font-medium transition ${
+                    period === option.value
+                      ? 'bg-slate-900 text-white shadow-sm'
+                      : 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'
+                  }`}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
           </div>
         }
       />
 
-      <div className="grid grid-cols-2 gap-3 md:grid-cols-5 mb-4">
+      <div className="grid grid-cols-2 gap-3 xl:grid-cols-5">
         <StatCard title="新增客户" value={k.newCustomers.value} delta={k.newCustomers.delta} icon={Users} />
         <StatCard title="有效询盘" value={k.validInquiries.value} delta={k.validInquiries.delta} icon={Activity} />
         <StatCard title="高意向客户" value={k.highIntent.value} delta={k.highIntent.delta} icon={Target} />
@@ -45,27 +67,62 @@ export function AnalyticsPage() {
         <StatCard title="AI采纳率" value={`${k.aiAdoptionRate.value}%`} delta={k.aiAdoptionRate.delta} icon={Zap} />
       </div>
 
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <ChartCard title="客户增长趋势" height={260}><TrendChart data={data.customerGrowth} series={[{ key: 'count', name: '新增客户', color: '#2563eb' }]} /></ChartCard>
-        <ChartCard title="各渠道询盘数量" height={260}><SimpleBarChart data={data.channelInquiries} xKey="name" barKey="count" name="询盘数" /></ChartCard>
-        <ChartCard title="客户国家/地区分布" height={260}><DonutChart data={data.countryDistribution} /></ChartCard>
-        <ChartCard title="客户阶段转化漏斗" height={260}><FunnelChart data={data.funnel} /></ChartCard>
-        <ChartCard title="意向分数分布" height={260}><DonutChart data={data.intentDistribution} nameKey="range" /></ChartCard>
-        <ChartCard title="产品关注度排行" height={260}><RankBars data={data.productRank.map((p) => ({ name: p.product, value: p.inquiries }))} /></ChartCard>
-        <ChartCard title="团队回复效率排行" height={240}><RankBars data={data.teamReplyRank.map((r) => ({ name: r.name, value: r.avgResponseMin }))} unit="分钟" max={30} /></ChartCard>
-        <ChartCard title="团队客户转化排行" height={240}><RankBars data={data.teamConversionRank.map((r) => ({ name: r.name, value: r.rate }))} unit="%" /></ChartCard>
-      </div>
+      <section className="page-section">
+        <div className="section-heading">
+          <div>
+            <h2 className="section-title">增长与转化</h2>
+            <p className="section-description">观察客户增长速度、渠道贡献和阶段流失</p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
+          <ChartCard className="xl:col-span-7" title="客户增长趋势" description="所选周期内的新增客户变化" height={290}>
+            <TrendChart data={data.customerGrowth} series={[{ key: 'count', name: '新增客户', color: '#2563eb' }]} />
+          </ChartCard>
+          <ChartCard className="xl:col-span-5" title="客户阶段转化漏斗" description="识别转化链路中的主要流失阶段" height={290}>
+            <FunnelChart data={data.funnel} />
+          </ChartCard>
+          <ChartCard className="xl:col-span-4" title="各渠道询盘数量" height={255}>
+            <SimpleBarChart data={data.channelInquiries} xKey="name" barKey="count" name="询盘数" />
+          </ChartCard>
+          <ChartCard className="xl:col-span-4" title="客户国家/地区分布" height={255}>
+            <DonutChart data={data.countryDistribution} />
+          </ChartCard>
+          <ChartCard className="xl:col-span-4" title="意向分数分布" height={255}>
+            <DonutChart data={data.intentDistribution} nameKey="range" />
+          </ChartCard>
+        </div>
+      </section>
 
-      {/* 业务概览 */}
-      <h2 className="mt-6 mb-3 text-lg font-semibold">业务概览 <LiveDataBadge className="align-middle" /></h2>
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-        <Card><CardHeader title="重点跟进客户" /><div className="divide-y divide-border">{data.bossBoard.urgentHighValue.map((c) => (<div key={c.id} className="flex items-center justify-between px-4 py-2.5 text-sm"><span>{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="text-xs text-muted-foreground">{c.reason.slice(0, 20)}…</span></div>))}</div></Card>
-        <Card><CardHeader title="逾期跟进" /><div className="divide-y divide-border">{data.bossBoard.overdueMembers.map((m) => (<div key={m.id} className="flex items-center justify-between px-4 py-2.5 text-sm"><span>{m.name}</span><Badge variant="danger">{m.overdueCount} 项逾期</Badge></div>))}</div></Card>
-        <Card><CardHeader title="客户增长较快的国家" /><div className="divide-y divide-border">{data.bossBoard.fastestCountries.map((c) => (<div key={c.country} className="flex items-center justify-between px-4 py-2.5 text-sm"><CountryFlag code={c.country} /><Badge variant="success">+{(c.growth * 100).toFixed(0)}%</Badge></div>))}</div></Card>
-        <Card><CardHeader title="渠道转化" /><div className="p-4 text-center"><p className="text-2xl font-semibold text-primary-700">{data.bossBoard.bestChannel.name}</p><p className="text-sm text-muted-foreground">转化率 {data.bossBoard.bestChannel.conversion}%</p></div></Card>
-        <Card><CardHeader title="产品询盘" /><div className="space-y-2 p-4">{data.bossBoard.topProducts.map((p) => (<div key={p.product} className="flex items-center justify-between text-sm"><span>{p.product}</span><span className="text-muted-foreground">{p.inquiries} 次询盘</span></div>))}</div></Card>
-        <Card><CardHeader title="久未联系的高意向客户" /><div className="divide-y divide-border">{data.bossBoard.churningHighIntent.map((c) => (<div key={c.id} className="px-4 py-2.5 text-sm"><span>{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="text-xs text-muted-foreground ml-2">{c.daysSilent}天未联系 · 意向{c.intentScore}分</span></div>))}</div></Card>
-      </div>
+      <section className="page-section">
+        <div className="section-heading">
+          <div>
+            <h2 className="section-title">产品与团队效率</h2>
+            <p className="section-description">比较产品热度、响应速度和团队转化结果</p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <ChartCard title="产品关注度排行" height={250}><RankBars data={data.productRank.map((p) => ({ name: p.product, value: p.inquiries }))} /></ChartCard>
+          <ChartCard title="团队回复效率" height={250}><RankBars data={data.teamReplyRank.map((r) => ({ name: r.name, value: r.avgResponseMin }))} unit="分钟" max={30} /></ChartCard>
+          <ChartCard title="团队客户转化" height={250}><RankBars data={data.teamConversionRank.map((r) => ({ name: r.name, value: r.rate }))} unit="%" /></ChartCard>
+        </div>
+      </section>
+
+      <section className="page-section">
+        <div className="section-heading">
+          <div>
+            <h2 className="section-title">经营提醒</h2>
+            <p className="section-description">需要优先处理的客户、跟进和市场变化</p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          <Card><CardHeader title="重点跟进客户" /><div className="divide-y divide-slate-100">{data.bossBoard.urgentHighValue.map((c) => (<div key={c.id} className="flex items-center justify-between px-5 py-3 text-sm"><span className="font-medium text-slate-900">{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="max-w-[55%] truncate text-xs text-slate-500">{c.reason}</span></div>))}</div></Card>
+          <Card><CardHeader title="逾期跟进" /><div className="divide-y divide-slate-100">{data.bossBoard.overdueMembers.map((m) => (<div key={m.id} className="flex items-center justify-between px-5 py-3 text-sm"><span className="font-medium text-slate-900">{m.name}</span><Badge variant="danger">{m.overdueCount} 项逾期</Badge></div>))}</div></Card>
+          <Card><CardHeader title="增长较快的市场" /><div className="divide-y divide-slate-100">{data.bossBoard.fastestCountries.map((c) => (<div key={c.country} className="flex items-center justify-between px-5 py-3 text-sm"><CountryFlag code={c.country} /><Badge variant="success">+{(c.growth * 100).toFixed(0)}%</Badge></div>))}</div></Card>
+          <Card><CardHeader title="渠道转化" /><div className="px-5 py-6"><p className="text-2xl font-semibold tracking-tight text-slate-950">{data.bossBoard.bestChannel.name}</p><p className="mt-1 text-sm text-slate-500">当前转化率 {data.bossBoard.bestChannel.conversion}%</p></div></Card>
+          <Card><CardHeader title="产品询盘" /><div className="divide-y divide-slate-100 px-5">{data.bossBoard.topProducts.map((p) => (<div key={p.product} className="flex items-center justify-between py-3 text-sm"><span className="font-medium text-slate-900">{p.product}</span><span className="text-slate-500">{p.inquiries} 次</span></div>))}</div></Card>
+          <Card><CardHeader title="久未联系的高意向客户" /><div className="divide-y divide-slate-100">{data.bossBoard.churningHighIntent.map((c) => (<div key={c.id} className="px-5 py-3 text-sm"><span className="font-medium text-slate-900">{c.name} <CountryFlag code={c.country} withName={false} /></span><span className="ml-2 text-xs text-slate-500">{c.daysSilent} 天未联系 · 意向 {c.intentScore} 分</span></div>))}</div></Card>
+        </div>
+      </section>
     </div>
   )
 }