diff --git a/admin/src/pages/dashboard/workplace/index.tsx b/admin/src/pages/dashboard/workplace/index.tsx index 4427f18..4a08d0c 100644 --- a/admin/src/pages/dashboard/workplace/index.tsx +++ b/admin/src/pages/dashboard/workplace/index.tsx @@ -17,15 +17,21 @@ import { Typography, } from '@arco-design/web-react'; import { + IconApps, IconArrowRise, IconCompass, + IconDesktop, IconDownload, IconEye, IconIdcard, IconMobile, IconPlus, + IconRight, IconRobot, + IconSafe, + IconSend, IconUserAdd, + IconUserGroup, } from '@arco-design/web-react/icon'; import useLocale from '@/utils/useLocale'; import { getCssVariables, lightColors } from '@/style/tokens'; @@ -179,20 +185,9 @@ function Workplace(): React.ReactElement { fetchOverview(); }, [fetchOverview]); - const handleCreateCard = () => { - history.push('/card/list'); - }; - - const handleIssueCards = () => { - history.push('/nfc/batch'); - }; - - const handleOpenRadar = () => { - history.push('/dashboard/radar-map'); - }; - - const handleOpenAiConfig = () => { - history.push('/ai/concierge'); + // 导航路由跳转处理器 + const handleNav = (path: string) => { + history.push(path); }; const handleExportLeads = async () => { @@ -294,7 +289,7 @@ function Workplace(): React.ReactElement { return (
- {/* 顶部标题与唯 1 主 CTA */} + {/* 顶部标题与唯一主 CTA */}
@@ -317,78 +312,84 @@ function Workplace(): React.ReactElement { type="primary" icon={} className={styles.primaryCta} - onClick={handleCreateCard} + onClick={() => handleNav('/card/list')} > {t['workplace.cta.newCard']}
- {/* KPI 核心指标阵列 */} + {/* 宽屏 17 : 7 弹性整体双栏架构 */} - - -
- {t['workplace.kpi.taps']} - - - -
- - {renderDelta(kpis.tapDelta)} -
- + {/* 左侧业务主流程 (17/24 栅格) */} + + {/* KPI 核心指标阵列 */} + + + +
+ {t['workplace.kpi.taps']} + + + +
+ + {renderDelta(kpis.tapDelta)} +
+ - - -
- {t['workplace.kpi.views']} - - - -
- - {renderDelta(kpis.viewDelta)} -
- + + +
+ {t['workplace.kpi.views']} + + + +
+ + {renderDelta(kpis.viewDelta)} +
+ - - -
- {t['workplace.kpi.leads']} - - - -
- - {renderDelta(kpis.newLeadDelta)} -
- + + +
+ {t['workplace.kpi.leads']} + + + +
+ + {renderDelta(kpis.newLeadDelta)} +
+ - - -
- {t['workplace.kpi.conversion']} - - - -
- -
- {t['workplace.kpi.conversionSub']} -
-
- -
+ + +
+ {t['workplace.kpi.conversion']} + + + +
+ +
+ {t['workplace.kpi.conversionSub']} +
+
+ +
- {/* 运营官转化漏斗与渠道矩阵 */} - - - + {/* 出海转化漏斗 */} +
{t['workplace.funnel.tap']}
@@ -459,43 +460,11 @@ function Workplace(): React.ReactElement {
- - - -
-
- {t['workplace.channel.nfc']} - {channelStats.nfc}% -
- -
- -
-
- {t['workplace.channel.qr']} - {channelStats.qr}% -
- -
- -
-
- {t['workplace.channel.link']} - {channelStats.link}% -
- -
-
- -
- - {/* 核心双栏:实时客商雷达流 VS 运营工具箱 */} - - + {/* 今日实时客商雷达流 */} {t['workplace.radar.title']} @@ -520,7 +489,7 @@ function Workplace(): React.ReactElement {

} /> -
@@ -568,88 +537,236 @@ function Workplace(): React.ReactElement { - {/* 运营工具箱 */} - - -
- + +
- + +
- + +
+ - + + {/* 2. 潜客线索 */} + + + {/* 3. 商机看板 */} + + + {/* 4. 批量发卡 */} + + + {/* 5. 硬件台账 */} + + + {/* 6. 全球雷达大屏 */} + + + {/* 7. AI 顾问接待 */} + + + {/* 8. 财务订阅看板 */} + + + + + {/* 模块 3:常用效率工具 */} + +
+ + + +
+
+ + {/* 模块 4:出海待办预警 */} + +
+
+
+
+ {t['workplace.alerts.highIntentLead']} +
-
- - {t['workplace.shortcut.aiConfig']} - - - {t['workplace.shortcut.aiConfigHint']} - -
- -
- + +
+
+ diff --git a/admin/src/pages/dashboard/workplace/locale/index.ts b/admin/src/pages/dashboard/workplace/locale/index.ts index 2a5f1a3..83e4fc0 100644 --- a/admin/src/pages/dashboard/workplace/locale/index.ts +++ b/admin/src/pages/dashboard/workplace/locale/index.ts @@ -26,7 +26,25 @@ const i18n = { 'workplace.funnel.interact': 'Interactions', 'workplace.funnel.lead': 'CRM Leads', 'workplace.channel.title': 'Touch Channels', - 'workplace.shortcut.title': 'Shortcuts', + 'workplace.quickHub.title': 'Operations Command Hub', + 'workplace.quickNav.title': 'Quick Navigation', + 'workplace.quick.builder': 'Mini-site Builder', + 'workplace.quick.builderHint': 'Craft Bento Grid mini-sites', + 'workplace.quick.leads': 'Buyer Leads', + 'workplace.quick.leadsHint': 'Follow up international clients', + 'workplace.quick.pipeline': 'Deal Pipeline', + 'workplace.quick.pipelineHint': 'Track stages and closed deals', + 'workplace.quick.batch': 'Issue NFC', + 'workplace.quick.batchHint': 'Batch print files and links', + 'workplace.quick.devices': 'NFC Fleet', + 'workplace.quick.devicesHint': 'Hardware device activations', + 'workplace.quick.radarMap': 'Radar Map', + 'workplace.quick.radarMapHint': 'Global 3D visitor heatmaps', + 'workplace.quick.aiConcierge': 'AI Concierge', + 'workplace.quick.aiConciergeHint': 'Multi-lingual greeting policy', + 'workplace.quick.finance': 'Financials', + 'workplace.quick.financeHint': 'Subscription metrics & MRR', + 'workplace.shortcut.title': 'Operations Arsenal', 'workplace.shortcut.issueCard': 'Issue NFC cards', 'workplace.shortcut.issueCardHint': 'Generate short links and print files', 'workplace.shortcut.exportLeads': 'Export leads', @@ -35,6 +53,9 @@ const i18n = { 'workplace.shortcut.radarMapHint': 'Explore real-time visitor geography and heatmaps', 'workplace.shortcut.aiConfig': 'AI Concierge Strategy', 'workplace.shortcut.aiConfigHint': 'Tune multi-lingual greeting and lead qualification', + 'workplace.alerts.title': 'Actionable Alerts', + 'workplace.alerts.highIntentLead': 'Buyer from Dubai stayed 210s in case studies without follow-up.', + 'workplace.alerts.actionFollow': 'Follow Up Now', 'workplace.channel.nfc': 'NFC', 'workplace.channel.qr': 'QR Code', 'workplace.channel.link': 'Direct Link', @@ -70,7 +91,25 @@ const i18n = { 'workplace.funnel.interact': '意向交互', 'workplace.funnel.lead': '商机留资', 'workplace.channel.title': '触达渠道分布', - 'workplace.shortcut.title': '运营工具箱', + 'workplace.quickHub.title': '出海运营快捷中枢', + 'workplace.quickNav.title': '高频业务导航', + 'workplace.quick.builder': '搭建微官网', + 'workplace.quick.builderHint': '编辑便当盒微官网组件', + 'workplace.quick.leads': '潜客线索', + 'workplace.quick.leadsHint': '跟进出海海外意向买家', + 'workplace.quick.pipeline': '商机看板', + 'workplace.quick.pipelineHint': '推进出海商机全流程赢单', + 'workplace.quick.batch': '批量制卡', + 'workplace.quick.batchHint': '生成短链与批量印制物料', + 'workplace.quick.devices': '硬件台账', + 'workplace.quick.devicesHint': 'NFC 实体卡激活与状态', + 'workplace.quick.radarMap': '雷达大屏', + 'workplace.quick.radarMapHint': '全球客商访客实时热力图', + 'workplace.quick.aiConcierge': 'AI 顾问', + 'workplace.quick.aiConciergeHint': '多语言接待策略与留资阈值', + 'workplace.quick.finance': '财务订阅', + 'workplace.quick.financeHint': '订阅套餐与出海营收看板', + 'workplace.shortcut.title': '运营效率工具箱', 'workplace.shortcut.issueCard': '批量发卡', 'workplace.shortcut.issueCardHint': '生成短链与制卡打印物料', 'workplace.shortcut.exportLeads': '导出线索', @@ -79,6 +118,9 @@ const i18n = { 'workplace.shortcut.radarMapHint': '查看全球访客地理分布与实时热力图', 'workplace.shortcut.aiConfig': 'AI 顾问接待策略', 'workplace.shortcut.aiConfigHint': '配置多语言接待话术与自动留资意向阈值', + 'workplace.alerts.title': '出海待办预警', + 'workplace.alerts.highIntentLead': '迪拜客商在精选案例停留超过 210 秒,尚未安排专属跟进。', + 'workplace.alerts.actionFollow': '立即跟进', 'workplace.channel.nfc': 'NFC', 'workplace.channel.qr': '二维码', 'workplace.channel.link': '直链', @@ -114,7 +156,25 @@ const i18n = { 'workplace.funnel.interact': 'تفاعل مهتم', 'workplace.funnel.lead': 'عميل محتمل', 'workplace.channel.title': 'قنوات الاتصال', - 'workplace.shortcut.title': 'صندوق أدوات التشغيل', + 'workplace.quickHub.title': 'مركز قيادة العمليات', + 'workplace.quickNav.title': 'الملاحة السريعة', + 'workplace.quick.builder': 'منشئ الموقع المصغر', + 'workplace.quick.builderHint': 'تصميم موقع نمط بينتو', + 'workplace.quick.leads': 'العملاء المحتملون', + 'workplace.quick.leadsHint': 'متابعة المشترين الدوليين', + 'workplace.quick.pipeline': 'مراحل الصفقات', + 'workplace.quick.pipelineHint': 'تتبع تقدم الصفقات المغلقة', + 'workplace.quick.batch': 'إصدار NFC', + 'workplace.quick.batchHint': 'توليد الروابط والطباعة', + 'workplace.quick.devices': 'أجهزة NFC', + 'workplace.quick.devicesHint': 'تنشيط الأجهزة والحالة', + 'workplace.quick.radarMap': 'خريطة الرادار', + 'workplace.quick.radarMapHint': 'خريطة حرارية للزوار عالمياً', + 'workplace.quick.aiConcierge': 'المساعد الذكي', + 'workplace.quick.aiConciergeHint': 'سياسة الترحيب متعددة اللغات', + 'workplace.quick.finance': 'المالية والاشتراكات', + 'workplace.quick.financeHint': 'مقاييس الاشتراكات والإيرادات', + 'workplace.shortcut.title': 'صندوق أدوات العمليات', 'workplace.shortcut.issueCard': 'إصدار بطاقات NFC', 'workplace.shortcut.issueCardHint': 'إنشاء الروابط وملفات الطباعة للبطاقات', 'workplace.shortcut.exportLeads': 'تصدير العملاء', @@ -123,6 +183,9 @@ const i18n = { 'workplace.shortcut.radarMapHint': 'استكشف التوزيع الجغرافي للزوار وخريطة الحرارة', 'workplace.shortcut.aiConfig': 'استراتيجية المساعد الذكي', 'workplace.shortcut.aiConfigHint': 'تكوين الترحيب متعدد اللغات وتأهيل العملاء المحتملين', + 'workplace.alerts.title': 'تنبيهات قابلة للتنفيذ', + 'workplace.alerts.highIntentLead': 'مشتري من دبي مكث 210 ثوانٍ في دراسات الحالة دون متابعة.', + 'workplace.alerts.actionFollow': 'متابعة الآن', 'workplace.channel.nfc': 'NFC', 'workplace.channel.qr': 'رمز QR', 'workplace.channel.link': 'رابط مباشر', diff --git a/admin/src/pages/dashboard/workplace/style/index.module.less b/admin/src/pages/dashboard/workplace/style/index.module.less index 3620f35..cc697af 100644 --- a/admin/src/pages/dashboard/workplace/style/index.module.less +++ b/admin/src/pages/dashboard/workplace/style/index.module.less @@ -1,9 +1,12 @@ .page { min-height: 100%; - max-width: 1200px; + width: 100%; + max-width: 1680px; + margin: 0 auto; padding: var(--omni-space-24); background: var(--omni-color-surface); font-family: var(--omni-font-family); + box-sizing: border-box; } .header { @@ -12,7 +15,7 @@ justify-content: space-between; gap: var(--omni-space-16); flex-wrap: wrap; - margin-bottom: var(--omni-space-24); + margin-bottom: var(--omni-space-20); } .headerInfo { @@ -169,8 +172,8 @@ color: var(--omni-color-error); } -/* 漏斗与渠道矩阵 */ -.middleRow { +/* 漏斗与雷达卡片 */ +.funnelCard { margin-top: var(--omni-space-16); } @@ -223,35 +226,7 @@ background: var(--omni-color-success); } -/* 渠道占比 */ -.channelRow { - margin-bottom: var(--omni-space-16); -} - -.channelRow:last-child { - margin-bottom: 0; -} - -.channelMeta { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: var(--omni-space-8); - font-size: 13px; -} - -.channelName { - color: var(--omni-color-text); - font-weight: 500; -} - -.channelPercent { - color: var(--omni-color-text-2); - font-weight: 600; -} - -/* 主内容区域 */ -.main { +.radarCard { margin-top: var(--omni-space-16); } @@ -296,11 +271,123 @@ line-height: 1.6; } -/* 运营工具箱 */ +/* ======================================================== + 右侧出海运营快捷中枢 (Command Hub) + ======================================================== */ +.hubContainer { + display: flex; + flex-direction: column; + gap: var(--omni-space-16); +} + +/* 渠道占比 */ +.channelRow { + margin-bottom: var(--omni-space-12); +} + +.channelRow:last-child { + margin-bottom: 0; +} + +.channelMeta { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--omni-space-6); + font-size: 12px; +} + +.channelName { + color: var(--omni-color-text); + font-weight: 500; +} + +.channelPercent { + color: var(--omni-color-text-2); + font-weight: 600; +} + +/* 8 大核心快捷入口网格 (2列) */ +.navGrid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--omni-space-10, 10px); +} + +.navCard { + display: flex; + align-items: flex-start; + gap: var(--omni-space-10, 10px); + padding: 10px; + border: 1px solid var(--omni-color-border); + border-radius: 12px; + background: var(--omni-color-surface); + text-align: start; + cursor: pointer; + transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1); +} + +.navCard:hover { + background: var(--omni-color-bg); + border-color: rgba(11, 92, 255, 0.35); + box-shadow: 0 2px 6px rgba(11, 92, 255, 0.08); + transform: translateY(-1px); +} + +.navCard:focus-visible { + outline: 2px solid var(--omni-color-primary); + outline-offset: 2px; +} + +.navIconBox { + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: 8px; + background: var(--omni-color-bg); + color: var(--omni-color-primary); + flex-shrink: 0; + border: 1px solid var(--omni-color-border); +} + +.navIcon { + font-size: 15px; +} + +.navTextBox { + flex: 1; + min-width: 0; +} + +.navTitle { + display: block; + color: var(--omni-color-text); + font-size: 13px; + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.navSub { + display: block; + margin-top: 2px; + color: var(--omni-color-text-2); + font-size: 11px; + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* 效率工具箱 */ .toolboxList { display: flex; flex-direction: column; - gap: var(--omni-space-12); + gap: var(--omni-space-10, 10px); } .shortcut { @@ -308,7 +395,7 @@ align-items: flex-start; gap: var(--omni-space-12); width: 100%; - padding: var(--omni-space-12); + padding: 10px 12px; border: 1px solid var(--omni-color-border); border-radius: 12px; background: var(--omni-color-surface); @@ -338,16 +425,17 @@ display: flex; align-items: center; justify-content: center; - width: 32px; - height: 32px; + width: 30px; + height: 30px; border-radius: 8px; background: var(--omni-color-bg); color: var(--omni-color-primary); flex-shrink: 0; + border: 1px solid var(--omni-color-border); } .toolIcon { - font-size: 16px; + font-size: 15px; } .shortcutContent { @@ -358,21 +446,68 @@ .shortcutLabel { display: block; color: var(--omni-color-text); - font-size: 14px; + font-size: 13px; font-weight: 500; line-height: 1.4; } .shortcutHint { display: block; - margin-top: var(--omni-space-4); + margin-top: 2px; color: var(--omni-color-text-2); - font-size: 12px; + font-size: 11px; line-height: 1.4; } +/* 待办预警卡片 */ +.alertPanel { + border-color: rgba(247, 144, 9, 0.3) !important; + background: #FFFDF9 !important; +} + +.alertContent { + display: flex; + flex-direction: column; + gap: var(--omni-space-12); +} + +.alertItem { + display: flex; + align-items: flex-start; + gap: var(--omni-space-8); +} + +.alertDot { + width: 6px; + height: 6px; + margin-top: 6px; + border-radius: 50%; + background-color: var(--omni-color-warning, #F79009); + flex-shrink: 0; +} + +.alertText { + color: var(--omni-color-text); + font-size: 12px; + line-height: 1.5; +} + +.alertActionBtn { + align-self: flex-start; + border-radius: var(--omni-radius-button); + color: var(--omni-color-text); + border-color: var(--omni-color-border); + font-size: 12px; +} + +.alertActionBtn:hover { + border-color: var(--omni-color-primary); + color: var(--omni-color-primary); +} + @media (prefers-reduced-motion: reduce) { - .shortcut:hover { + .shortcut:hover, + .navCard:hover { transform: none; } .pulseDot { diff --git a/admin/tests/dashboard-workplace.test.ts b/admin/tests/dashboard-workplace.test.ts index e9d6f66..4c7ac70 100644 --- a/admin/tests/dashboard-workplace.test.ts +++ b/admin/tests/dashboard-workplace.test.ts @@ -118,3 +118,38 @@ test('6. 专业出海运营官视角:包含全球雷达监控、渠道漏斗 assert.ok(!EMOJI_RE.test(content), '页面代码严禁 emoji'); }); +test('7. 出海运营快捷中枢:覆盖8大核心业务快捷入口与运营预警,全屏仅1个主CTA', () => { + const content = fs.readFileSync(pagePath, 'utf-8'); + const localeContent = fs.readFileSync(localePath, 'utf-8'); + + // 必须覆盖的8大核心业务快捷路由 + const requiredRoutes = [ + '/card/builder', + '/crm/leads', + '/crm/pipeline', + '/nfc/batch', + '/nfc/devices', + '/dashboard/radar-map', + '/ai/concierge', + '/dashboard/financial', + ]; + for (const route of requiredRoutes) { + assert.ok(content.includes(route), `工作台必须包含快捷业务路由入口: ${route}`); + } + + // 必须包含待办预警词条 + assert.ok(localeContent.includes('workplace.alerts.title'), '必须包含待办预警标题'); + assert.ok(localeContent.includes('workplace.quickHub.title'), '必须包含快捷中枢标题'); + + // 铁律:全屏主 CTA 依然严格为 1 + const primaryButtons = content.match(/type=["']primary["']/g) || []; + assert.equal( + primaryButtons.length, + 1, + '无论增加多少快捷入口,全屏依然必须严格保持唯 1 一个主 CTA (type="primary")' + ); + assert.ok(!EMOJI_RE.test(localeContent), '语言包严禁 emoji'); + assert.ok(!EMOJI_RE.test(content), '页面代码严禁 emoji'); +}); + +