feat: launch Chat Assistant product page

This commit is contained in:
2026-09-11 09:02:19 +08:00
parent 8506e497a6
commit bfe7a8d49c
11 changed files with 517 additions and 4 deletions
+10
View File
@@ -2,6 +2,16 @@
海南荣刻科技有限公司官方网站。
## 本地预览
```bash
docker compose up -d --build
```
- 官网首页:`http://127.0.0.1:8081/`
- 荣刻驭境:`http://127.0.0.1:8081/products/roncarve-harness/`
- 箴言助手:`http://127.0.0.1:8081/products/chat-assistant/`
## 百度收录上线清单
站点已经在代码中提供以下收录基础文件:
Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

+10 -3
View File
@@ -272,6 +272,7 @@
transition: border-color .22s ease, background .22s ease, transform .22s var(--ease);
}
.product-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: color-mix(in srgb, var(--cyan) 10%, var(--ink-900)); }
.product-card + .product-card { margin-top: 8px; }
.product-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.product-card-meta span { color: var(--cyan); font: 700 9px/1 var(--mono); letter-spacing: .13em; }
.product-card-meta strong { padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); background: rgba(255, 255, 255, .025); font: 650 9px/1 var(--mono); }
@@ -919,7 +920,7 @@
transform: none;
transition: max-height .25s var(--ease), margin .25s ease, padding .25s ease, border-color .25s ease;
}
.product-nav.open .product-popover { max-height: 250px; margin: 8px 0 12px; padding: 8px; border-color: var(--line); transform: none; }
.product-nav.open .product-popover { max-height: 560px; margin: 8px 0 12px; padding: 8px; border-color: var(--line); transform: none; }
.product-card { padding: 17px; }
.nav-actions { padding-top: 14px; justify-content: space-between; }
.nav-cta { min-height: 42px; }
@@ -1026,6 +1027,12 @@
<small>RONCARVE HARNESS</small>
<p data-i18n="product_harness_desc">本地客户端连接本地项目,平台共享工作空间承载团队协同,并内置精准插件检索与高效热插拔。</p>
</a>
<a class="product-card" href="/products/chat-assistant/" role="menuitem">
<span class="product-card-meta"><span>DOMAIN AI / ADVISORY</span><strong data-i18n="product_assistant_status">产品演示</strong></span>
<h3 data-i18n="product_assistant_name">箴言助手</h3>
<small>CHAT ASSISTANT</small>
<p data-i18n="product_assistant_desc">连接企业数据、领域知识与业务工具,为垂直行业提供有依据、可落地、可追溯的智能建议。</p>
</a>
</div>
</div>
<a class="nav-link" href="#about" data-i18n="nav_about">能力链路</a>
@@ -1257,7 +1264,7 @@
zh: {
title: '海南荣刻科技有限公司 - 数据筑基 · AI 落地', skip: '跳到主要内容', brand: '荣刻科技', nav_label: '主导航', home_label: '荣刻科技首页', lang_label: '语言切换', menu_open: '打开导航菜单', menu_close: '关闭导航菜单',
theme_label: '外观模式选择', theme_system: '跟随系统', theme_light: '浅色外观', theme_dark: '深色外观', theme_system_short: 'Auto', theme_light_short: 'Light', theme_dark_short: 'Dark', language_zh: '简体中文', language_en: 'English',
nav_products: '产品', product_list_label: '产品列表', product_status: '即将开放', product_harness_name: '荣刻驭境', product_harness_desc: '本地客户端连接本地项目,平台共享工作空间承载团队协同,并内置精准插件检索与高效热插拔。', nav_about: '能力链路', nav_services: '解决方案', nav_advantages: '核心优势', nav_offices: '交付网络', nav_contact: '预约咨询',
nav_products: '产品', product_list_label: '产品列表', product_status: '即将开放', product_harness_name: '荣刻驭境', product_harness_desc: '本地客户端连接本地项目,平台共享工作空间承载团队协同,并内置精准插件检索与高效热插拔。', product_assistant_status: '产品演示', product_assistant_name: '箴言助手', product_assistant_desc: '连接企业数据、领域知识与业务工具,为垂直行业提供有依据、可落地、可追溯的智能建议。', nav_about: '能力链路', nav_services: '解决方案', nav_advantages: '核心优势', nav_offices: '交付网络', nav_contact: '预约咨询',
hero_eyebrow: '海南荣刻科技有限公司 · AI 与数据基础设施', hero_line1: '让企业数据', hero_line2: '成为 AI 生产力',
hero_desc: '从数据治理、模型优化到私有化部署,荣刻科技为企业构建可落地、可持续、可掌控的 AI 能力体系。',
hero_primary: '预约 AI 场景诊断', hero_secondary: '查看解决方案', proof_data: '7 年数据技术积累', proof_private: '支持私有化部署', proof_delivery: '成都 / 海口双城交付',
@@ -1291,7 +1298,7 @@
en: {
title: 'Hainan Roncarve Technology - Data Foundation · AI Delivery', skip: 'Skip to main content', brand: 'Roncarve Tech', nav_label: 'Main navigation', home_label: 'Roncarve Tech home', lang_label: 'Language selector', menu_open: 'Open navigation menu', menu_close: 'Close navigation menu',
theme_label: 'Appearance selector', theme_system: 'Follow System', theme_light: 'Light appearance', theme_dark: 'Dark appearance', theme_system_short: 'Auto', theme_light_short: 'Light', theme_dark_short: 'Dark', language_zh: '简体中文', language_en: 'English',
nav_products: 'Products', product_list_label: 'Product list', product_status: 'Coming Soon', product_harness_name: 'Roncarve Harness', product_harness_desc: 'A local client for browser-based local projects and a shared workspace for team collaboration, with precise plugin discovery and hot swapping.', nav_about: 'Capabilities', nav_services: 'Solutions', nav_advantages: 'Advantages', nav_offices: 'Delivery', nav_contact: 'Book a Call',
nav_products: 'Products', product_list_label: 'Product list', product_status: 'Coming Soon', product_harness_name: 'Roncarve Harness', product_harness_desc: 'A local client for browser-based local projects and a shared workspace for team collaboration, with precise plugin discovery and hot swapping.', product_assistant_status: 'Product Demo', product_assistant_name: 'Chat Assistant', product_assistant_desc: 'Connect enterprise data, domain knowledge and business tools for grounded, actionable and traceable vertical-industry advice.', nav_about: 'Capabilities', nav_services: 'Solutions', nav_advantages: 'Advantages', nav_offices: 'Delivery', nav_contact: 'Book a Call',
hero_eyebrow: 'Hainan Roncarve Technology Co., Ltd. · AI + DATA INFRASTRUCTURE', hero_line1: 'Turn enterprise data', hero_line2: 'into AI productivity',
hero_desc: 'From data governance and model optimization to private deployment, Roncarve builds practical, sustainable and controllable enterprise AI systems.',
hero_primary: 'Book an AI Discovery Call', hero_secondary: 'Explore Solutions', proof_data: '7 years in data technology', proof_private: 'Private deployment ready', proof_delivery: 'Chengdu / Haikou delivery',
+5
View File
@@ -9,6 +9,11 @@ server {
return 301 /products/roncarve-harness/;
}
location = /products/chat-assistant {
absolute_redirect off;
return 301 /products/chat-assistant/;
}
location / {
try_files $uri $uri/ /index.html;
}
+40
View File
@@ -0,0 +1,40 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#f7f9fc">
<meta name="description" content="箴言助手(Chat Assistant)连接企业数据、领域知识与业务工具,为保险、制造、零售及专业服务等垂直领域提供有依据、可落地、可追溯的智能建议。">
<meta name="keywords" content="箴言助手,Chat Assistant,行业智能助手,企业AI助手,智能建议,领域知识,数据接入,私有化部署">
<link rel="canonical" href="https://www.roncarve.com/products/chat-assistant/">
<link rel="icon" type="image/png" href="/assets/brand-logo-final.png">
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_CN">
<meta property="og:title" content="箴言助手 Chat Assistant|让行业经验成为每一次决策的底气">
<meta property="og:description" content="连接企业数据与领域知识,提供有依据、可落地、可追溯的智能建议。">
<meta property="og:url" content="https://www.roncarve.com/products/chat-assistant/">
<meta property="og:image" content="https://www.roncarve.com/assets/chat-assistant-hero-v1.jpg">
<title>箴言助手 Chat Assistant|垂直行业智能建议助手 - 荣刻科技</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "箴言助手",
"alternateName": "Chat Assistant",
"applicationCategory": "BusinessApplication",
"operatingSystem": "Web, Private Deployment",
"description": "连接企业数据、领域知识与业务工具,为垂直行业提供有依据、可落地、可追溯的智能建议。",
"url": "https://www.roncarve.com/products/chat-assistant/",
"publisher": {
"@type": "Organization",
"name": "海南荣刻科技有限公司",
"url": "https://www.roncarve.com/"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/chat-assistant/main.jsx"></script>
</body>
</html>
+6
View File
@@ -12,4 +12,10 @@
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://www.roncarve.com/products/chat-assistant/</loc>
<lastmod>2026-09-11</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
</urlset>
@@ -0,0 +1,135 @@
import {
ArrowRight, Brain, ChartLineUp, CheckCircle, CirclesFour,
Database, Factory, List, LockKey, MagnifyingGlass, ShieldCheck,
ShoppingCart, Stack, UserFocus, X
} from '@phosphor-icons/react';
import { useEffect, useMemo, useState } from 'react';
const zhIndustries = [
{ id: 'insurance', label: '保险', icon: ShieldCheck, title: '让保障建议更精准、更可信', description: '联动客户需求、保单信息、产品条款与服务记录,在数据权限和合规策略约束下辅助顾问组织保障建议。', evidence: ['客户需求与家庭画像', '保单、产品与条款事实', '合规表达与适当性策略'], action: '识别保障缺口,生成匹配客户目标的建议,并明确依据、适用条件与下一步沟通重点。' },
{ id: 'manufacturing', label: '制造', icon: Factory, title: '把经验沉淀进生产与供应链判断', description: '接入生产、质量、库存与供应商数据,融合工艺知识和处置规则,辅助团队识别风险与改进路径。', evidence: ['生产与质量数据', '工艺知识与异常规则', '供应链历史案例'], action: '定位异常的可能原因,给出处置顺序、验证条件与协同建议。' },
{ id: 'retail', label: '零售', icon: ShoppingCart, title: '把门店与商品信号转成运营动作', description: '连接商品、库存、会员和营销数据,结合区域经验与运营策略,辅助门店形成可执行方案。', evidence: ['商品与库存状态', '会员与渠道行为', '区域运营策略'], action: '形成选品、补货与活动建议,并说明适用门店和预期目标。' },
{ id: 'services', label: '专业服务', icon: UserFocus, title: '让专业判断有章可循、有据可查', description: '将项目材料、专业知识、服务流程与质量标准组织起来,辅助团队提高交付一致性。', evidence: ['项目与客户材料', '专业方法与知识库', '交付规范和检查项'], action: '生成结构化判断、工作建议与待核验事项,帮助团队稳步推进。' }
];
const enIndustries = [
{ id: 'insurance', label: 'Insurance', icon: ShieldCheck, title: 'Make protection advice precise and trustworthy', description: 'Connect customer needs, policies, product terms and service history under data-access and compliance controls.', evidence: ['Customer needs and household context', 'Policy, product and coverage facts', 'Compliance and suitability policies'], action: 'Identify protection gaps and propose suitable next steps with clear evidence and conditions.' },
{ id: 'manufacturing', label: 'Manufacturing', icon: Factory, title: 'Bring experience into supply-chain decisions', description: 'Connect production, quality, inventory and supplier data with process knowledge.', evidence: ['Production and quality data', 'Process knowledge and rules', 'Supply-chain cases'], action: 'Prioritize likely causes, verification steps and cross-team actions.' },
{ id: 'retail', label: 'Retail', icon: ShoppingCart, title: 'Turn store and product signals into action', description: 'Combine merchandise, inventory, membership and campaign data with regional playbooks.', evidence: ['Merchandise and inventory', 'Member and channel behavior', 'Regional playbooks'], action: 'Propose assortment, replenishment and campaign actions for the right stores.' },
{ id: 'services', label: 'Professional Services', icon: UserFocus, title: 'Make expert judgement consistent and traceable', description: 'Organize project materials, specialist knowledge, service workflows and quality standards.', evidence: ['Project and client materials', 'Methods and knowledge base', 'Delivery standards'], action: 'Produce structured findings, recommendations and open verification items.' }
];
const copy = {
zh: {
brand: '荣刻科技', product: '箴言助手', navCapabilities: '核心能力', navIndustries: '行业扩展', navTrust: '安全可信', navCta: '预约演示', language: 'EN', menu: '打开导航', close: '关闭导航',
eyebrow: 'CHAT ASSISTANT / 箴言助手', titleLine1: '让行业经验,', titleLine2: '成为', titleAccent: '每一次决策的底气',
summary: '连接企业数据与领域知识,基于可信的信息来源和真实业务经验,为你提供有依据、可落地的智能建议,让复杂问题更快找到确定的答案。', primary: '预约产品演示', secondary: '了解核心能力',
proof: ['连接企业数据', '融合领域知识', '给出有依据的建议'], visualAlt: '箴言助手基于企业数据与领域知识生成建议的产品界面',
capabilitiesKicker: '核心能力', capabilitiesTitle: '六大能力,构建企业的专属智能伙伴', capabilitiesSummary: '从数据连接到行业落地,箴言助手把建议生成所需的上下文、工具与治理能力组织成一套可持续运营的系统。',
capabilities: [
['企业数据连接', '连接业务系统与数据库,以受控范围、安全字段和运行时查询构建事实底座。'],
['领域知识融合', '将行业经验沉淀为技能、意图、工具、知识与表达策略,按场景组合调用。'],
['智能分析建议', '结合会话上下文与工具事实,形成面向具体对象、具体目标的可执行建议。'],
['可信来源追溯', '记录意图、技能、工具调用、模型响应与关键依据,支持分析、审计和回放。'],
['行业场景扩展', '替换数据、知识、工具与策略资源,即可从保险扩展到更多专业领域。'],
['安全合规保障', '通过统一身份、角色权限、数据范围、字段脱敏与追加式审计守住边界。']
],
systemKicker: 'DOMAIN INTELLIGENCE SYSTEM', systemTitle: ['行业能力,', '可以持续生长'], systemSummary: '以保险顾问服务为示例,将客户需求、产品条款、权益与服务记录组织为建议依据;通用资源体系让同一套助手能够适配不同领域的业务对象、知识结构与工作方法。', industryLabel: '选择行业示例', industryEvidence: '建议依据', industryAction: '示例建议', industries: zhIndustries,
processKicker: 'FROM CONTEXT TO ACTION', processTitle: '从业务信息,到可执行建议', processSummary: '每次回答都经历清晰的连接、理解、建议与追溯路径,让行业经验真正进入业务流程。',
process: [['01', '连接', '接入业务系统、知识资源与模型服务,划定数据范围和使用边界。'], ['02', '理解', '识别意图、上下文与业务对象,选择匹配的技能、工具和表达策略。'], ['03', '建议', '基于工具事实和行业经验生成建议,明确依据、条件与下一步行动。'], ['04', '追溯', '保留会话、资源版本、工具调用、耗时与结果,支持复盘和持续优化。']],
trustKicker: 'SECURE BY DESIGN', trustTitle: ['建议可以智能,', '边界必须清晰'], trustSummary: '箴言助手以企业身份、数据权限和可审计运行作为产品底座。模型负责理解与表达,关键事实来自受控数据与业务工具。',
trustItems: [['统一身份与明确授权', '接入 Roncarve IAM OIDC,以稳定外部身份绑定账号,通过显式应用准入和角色授权控制访问。'], ['数据范围与字段保护', '数据源、对象范围和字段元数据独立管理,运行时按权限查询并对敏感字段实施脱敏。'], ['全链路指标与审计', '会话指标、Agent 选择、工具调用和管理操作均可查询,支持完整性校验与问题回放。']],
ctaKicker: 'CHAT ASSISTANT / PRODUCT DEMO', ctaTitle: ['从一个真实场景开始,', '让行业经验进入每一次决策'], ctaSummary: '告诉我们你的业务对象、数据基础、专业流程与安全要求,我们将一起梳理最适合的箴言助手落地路径。', ctaButton: '预约产品演示', copyright: '海南荣刻科技有限公司', footerSignal: '数据驱动 · AI 赋能 · 安全交付', record: '琼ICP备2025052166号-1', policeAlt: '公安备案图标'
},
en: {
brand: 'Roncarve Tech', product: 'Chat Assistant', navCapabilities: 'Capabilities', navIndustries: 'Industries', navTrust: 'Trust', navCta: 'Book a Demo', language: '中文', menu: 'Open navigation', close: 'Close navigation',
eyebrow: 'CHAT ASSISTANT', titleLine1: 'Turn domain experience', titleLine2: 'into confidence for', titleAccent: 'every decision', summary: 'Connect enterprise data with domain knowledge to deliver grounded, actionable advice from trusted information and real operating experience.', primary: 'Book a Product Demo', secondary: 'Explore Capabilities', proof: ['Connect enterprise data', 'Apply domain knowledge', 'Ground every recommendation'], visualAlt: 'Chat Assistant product interface producing advice from enterprise data and domain knowledge',
capabilitiesKicker: 'CORE CAPABILITIES', capabilitiesTitle: 'Six capabilities for a dedicated enterprise intelligence partner', capabilitiesSummary: 'From governed data access to vertical delivery, Chat Assistant organizes the context, tools and controls required for dependable advice.',
capabilities: [['Enterprise Data', 'Connect systems and databases through governed scopes, protected fields and runtime queries.'], ['Domain Knowledge', 'Organize expertise as skills, intents, tools, knowledge and expression policies.'], ['Actionable Advice', 'Combine conversation context with tool-grounded facts for specific business objectives.'], ['Traceable Sources', 'Record intent, skills, tool calls, model responses and evidence for analysis and replay.'], ['Vertical Expansion', 'Adapt to a new industry by replacing data, knowledge, tools and policy resources.'], ['Security & Compliance', 'Protect enterprise boundaries with SSO, roles, scopes, masking and append-only audit.']],
systemKicker: 'DOMAIN INTELLIGENCE SYSTEM', systemTitle: ['Industry capability', 'grows with your business.'], systemSummary: 'Using insurance advisory as an example, the experience organizes customer needs, product terms, benefits and service context into grounded advice. The same resource model adapts to new objects, knowledge and operating methods.', industryLabel: 'Choose an example industry', industryEvidence: 'Evidence', industryAction: 'Example outcome', industries: enIndustries,
processKicker: 'FROM CONTEXT TO ACTION', processTitle: 'From business context to actionable advice', processSummary: 'Every response follows a clear connect, understand, advise and trace path.', process: [['01', 'Connect', 'Connect systems, knowledge and model services with explicit data boundaries.'], ['02', 'Understand', 'Resolve intent, context and entities, then select relevant skills, tools and policies.'], ['03', 'Advise', 'Use tool-grounded facts and domain experience to explain evidence and next actions.'], ['04', 'Trace', 'Preserve conversations, resource versions, tool calls, latency and outcomes.']],
trustKicker: 'SECURE BY DESIGN', trustTitle: ['Advice can be intelligent.', 'Boundaries must stay explicit.'], trustSummary: 'Enterprise identity, data authorization and observable operation are part of the product foundation. Models interpret and communicate; governed data and tools provide the facts.', trustItems: [['Identity and explicit access', 'Integrate Roncarve IAM OIDC with stable external identity binding, explicit application access and role grants.'], ['Data scope and field protection', 'Manage sources, object scopes and field metadata separately, enforcing access and masking at runtime.'], ['Metrics and audit end to end', 'Query conversation metrics, Agent selection, tool use and admin operations with integrity checks and replay.']],
ctaKicker: 'CHAT ASSISTANT / PRODUCT DEMO', ctaTitle: ['Start with one real scenario.', 'Put domain experience into every decision.'], ctaSummary: 'Tell us about your business entities, data foundation, specialist workflow and security needs. We will shape the right delivery path together.', ctaButton: 'Book a Product Demo', copyright: 'Hainan Roncarve Technology Co., Ltd', footerSignal: 'DATA-DRIVEN · AI-POWERED · SECURE DELIVERY', record: 'Qiong ICP No. 2025052166-1', policeAlt: 'Public security filing icon'
}
};
const capabilityIcons = [Database, Brain, ChartLineUp, MagnifyingGlass, CirclesFour, ShieldCheck];
const processIcons = [Database, Brain, ChartLineUp, Stack];
const trustIcons = [LockKey, ShieldCheck, MagnifyingGlass];
function mailto(language) {
const subject = language === 'zh' ? '[箴言助手] 产品演示预约' : '[Chat Assistant] Product demo request';
const body = language === 'zh' ? '您好,我想预约箴言助手产品演示。\n\n所属行业:\n业务场景:\n现有数据/系统:\n部署要求:\n联系人:' : 'Hello, I would like to book a Chat Assistant demo.\n\nIndustry:\nUse case:\nCurrent data/systems:\nDeployment needs:\nContact:';
return `mailto:contact@roncarve.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}
function ProductNav({ language, setLanguage }) {
const t = copy[language];
const [open, setOpen] = useState(false);
const close = () => setOpen(false);
return <nav className="assistant-nav" aria-label={language === 'zh' ? '箴言助手产品导航' : 'Chat Assistant product navigation'}>
<div className="assistant-shell assistant-nav-inner">
<a className="assistant-brand" href="/" aria-label={language === 'zh' ? '返回荣刻科技首页' : 'Back to Roncarve home'}><img src="/assets/brand-logo-final.png" alt="" /><span><strong>{t.brand}</strong><small>RONCARVE TECHNOLOGY</small></span></a>
<button className="assistant-menu" type="button" onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="assistantNavLinks" aria-label={open ? t.close : t.menu}>{open ? <X size={22} /> : <List size={22} />}</button>
<div className={`assistant-nav-links ${open ? 'is-open' : ''}`} id="assistantNavLinks">
<a href="#top" onClick={close}>{t.product}</a><a href="#capabilities" onClick={close}>{t.navCapabilities}</a><a href="#industries" onClick={close}>{t.navIndustries}</a><a href="#trust" onClick={close}>{t.navTrust}</a>
<button className="assistant-language" type="button" onClick={() => setLanguage(language === 'zh' ? 'en' : 'zh')}>{t.language}</button>
<a className="assistant-nav-cta" href={mailto(language)} onClick={close}>{t.navCta}<ArrowRight size={16} weight="bold" /></a>
</div>
</div>
</nav>;
}
function IndustryExplorer({ t }) {
const [activeId, setActiveId] = useState(t.industries[0].id);
useEffect(() => setActiveId(t.industries[0].id), [t]);
const active = t.industries.find((item) => item.id === activeId) ?? t.industries[0];
const ActiveIcon = active.icon;
return <div className="industry-explorer">
<div className="industry-tab-label">{t.industryLabel}</div>
<div className="industry-tabs" role="tablist" aria-label={t.industryLabel}>{t.industries.map((industry) => { const Icon = industry.icon; const selected = industry.id === active.id; return <button key={industry.id} type="button" role="tab" aria-selected={selected} className={selected ? 'is-active' : ''} onClick={() => setActiveId(industry.id)}><Icon size={19} weight="duotone" />{industry.label}</button>; })}</div>
<div className="industry-detail" role="tabpanel" aria-live="polite">
<div className="industry-detail-heading"><span><ActiveIcon size={26} weight="duotone" /></span><div><small>{active.label}</small><h3>{active.title}</h3></div></div>
<p>{active.description}</p>
<div className="industry-detail-grid"><div><strong>{t.industryEvidence}</strong><ul>{active.evidence.map((item) => <li key={item}><CheckCircle size={16} weight="fill" />{item}</li>)}</ul></div><div><strong>{t.industryAction}</strong><p>{active.action}</p></div></div>
</div>
</div>;
}
export function ChatAssistantProductPage() {
const [language, setLanguageState] = useState(() => { try { return localStorage.getItem('site_lang') === 'en' ? 'en' : 'zh'; } catch { return 'zh'; } });
const t = copy[language];
const meta = useMemo(() => language === 'zh' ? { title: '箴言助手 Chat Assistant|垂直行业智能建议助手 - 荣刻科技', description: '箴言助手连接企业数据、领域知识与业务工具,为垂直行业提供有依据、可落地、可追溯的智能建议。' } : { title: 'Chat Assistant | Vertical Industry Advice from Roncarve', description: 'Chat Assistant connects enterprise data, domain knowledge and business tools to deliver grounded, actionable and traceable advice.' }, [language]);
const setLanguage = (next) => { setLanguageState(next); try { localStorage.setItem('site_lang', next); } catch { /* non-critical */ } };
useEffect(() => { document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en'; document.title = meta.title; document.querySelector('meta[name="description"]')?.setAttribute('content', meta.description); }, [language, meta]);
useEffect(() => {
const items = Array.from(document.querySelectorAll('[data-reveal]'));
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { items.forEach((item) => item.classList.add('is-visible')); return undefined; }
const observer = new IntersectionObserver((entries) => entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }), { threshold: .13 });
items.forEach((item) => observer.observe(item));
return () => observer.disconnect();
}, [language]);
return <div className="assistant-page">
<a className="assistant-skip" href="#main">{language === 'zh' ? '跳到主要内容' : 'Skip to main content'}</a>
<ProductNav language={language} setLanguage={setLanguage} />
<main id="main">
<section className="assistant-hero" id="top"><div className="assistant-shell assistant-hero-grid">
<div className="assistant-hero-copy" data-reveal><p className="assistant-eyebrow">{t.eyebrow}</p><h1><span>{t.titleLine1}</span><span>{t.titleLine2}{language === 'en' ? ' ' : ''}<em>{t.titleAccent}</em></span></h1><p className="assistant-hero-summary">{t.summary}</p><div className="assistant-hero-actions"><a className="assistant-button-primary" href={mailto(language)}>{t.primary}<ArrowRight size={18} weight="bold" /></a><a className="assistant-button-secondary" href="#capabilities">{t.secondary}</a></div><ul className="assistant-proof">{t.proof.map((item) => <li key={item}><span />{item}</li>)}</ul></div>
<figure className="assistant-hero-visual" data-reveal><img src="/assets/chat-assistant-hero-v1.jpg" alt={t.visualAlt} /><figcaption><span>KNOWLEDGE</span><span>CONNECTS</span><span>PEOPLE</span><span>AND</span><span>POSSIBILITIES</span></figcaption></figure>
</div></section>
<section className="assistant-capabilities" id="capabilities"><div className="assistant-shell"><header className="assistant-section-center" data-reveal><span className="assistant-kicker">{t.capabilitiesKicker}</span><h2>{t.capabilitiesTitle}</h2><p>{t.capabilitiesSummary}</p></header><div className="capability-grid" data-reveal>{t.capabilities.map(([title, description], index) => { const Icon = capabilityIcons[index]; return <article key={title}><span className="capability-icon"><Icon size={25} weight="duotone" /></span><h3>{title}</h3><p>{description}</p></article>; })}</div></div></section>
<section className="assistant-system" id="industries"><div className="assistant-shell assistant-system-grid"><header className="assistant-section-left" data-reveal><span className="assistant-kicker">{t.systemKicker}</span><h2>{t.systemTitle.map((line) => <span key={line}>{line}</span>)}</h2><p>{t.systemSummary}</p></header><div data-reveal><IndustryExplorer t={t} /></div></div></section>
<section className="assistant-process" id="process"><div className="assistant-shell"><header className="assistant-section-split" data-reveal><div><span className="assistant-kicker">{t.processKicker}</span><h2>{t.processTitle}</h2></div><p>{t.processSummary}</p></header><div className="process-grid" data-reveal>{t.process.map(([number, title, description], index) => { const Icon = processIcons[index]; return <article key={number}><span className="process-number">{number}</span><span className="process-icon"><Icon size={24} weight="duotone" /></span><h3>{title}</h3><p>{description}</p></article>; })}</div></div></section>
<section className="assistant-trust" id="trust"><div className="assistant-shell assistant-trust-grid"><header className="assistant-section-left" data-reveal><span className="assistant-kicker">{t.trustKicker}</span><h2>{t.trustTitle.map((line) => <span key={line}>{line}</span>)}</h2><p>{t.trustSummary}</p></header><div className="trust-list" data-reveal>{t.trustItems.map(([title, description], index) => { const Icon = trustIcons[index]; return <article key={title}><span><Icon size={23} weight="duotone" /></span><div><h3>{title}</h3><p>{description}</p></div></article>; })}</div></div></section>
<section className="assistant-cta"><div className="assistant-shell assistant-cta-inner" data-reveal><span className="assistant-kicker">{t.ctaKicker}</span><h2>{t.ctaTitle.map((line) => <span key={line}>{line}</span>)}</h2><p>{t.ctaSummary}</p><a className="assistant-button-primary" href={mailto(language)}>{t.ctaButton}<ArrowRight size={18} weight="bold" /></a></div></section>
</main>
<footer className="assistant-footer"><div className="assistant-shell assistant-footer-row"><div className="assistant-footer-company"><span>© 20252026 {t.copyright}</span><a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">{t.record}</a><a className="assistant-footer-police" href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank" rel="noreferrer"><img src="/assets/beian-police.png" alt={t.policeAlt} />琼公网安备 46010602000704</a></div><span className="assistant-footer-signal">{t.footerSignal}</span></div></footer>
</div>;
}
+219
View File
@@ -0,0 +1,219 @@
:root {
--ca-bg: #fff;
--ca-surface: #f6f8fc;
--ca-surface-blue: #edf4ff;
--ca-ink: #07152f;
--ca-text: #3f4f6a;
--ca-muted: #71809a;
--ca-line: #dce3ee;
--ca-blue: #0b63f6;
--ca-blue-strong: #004ed5;
--ca-mint: #13a98c;
--ca-shell: min(1320px, calc(100vw - 72px));
--ca-display: Inter, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
--ca-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--ca-ease: cubic-bezier(.2, .75, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ca-bg); color: var(--ca-ink); font-family: var(--ca-display); -webkit-font-smoothing: antialiased; }
body, button, input { font-family: var(--ca-display); }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: var(--ca-blue); }
:focus-visible { outline: 3px solid rgba(11, 99, 246, .35); outline-offset: 3px; }
.assistant-page { min-height: 100vh; background: var(--ca-bg); }
.assistant-shell { width: var(--ca-shell); margin-inline: auto; }
.assistant-skip { position: fixed; z-index: 3000; top: 12px; left: 12px; padding: 10px 15px; border-radius: 8px; color: #fff; background: var(--ca-blue); transform: translateY(-150%); transition: transform .2s; }
.assistant-skip:focus { transform: translateY(0); }
.assistant-nav { position: fixed; z-index: 1000; inset: 0 0 auto; height: 76px; border-bottom: 1px solid rgba(220, 227, 238, .88); background: rgba(255, 255, 255, .94); box-shadow: 0 8px 30px rgba(42, 64, 103, .035); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.assistant-nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.assistant-brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.assistant-brand img { width: 39px; height: 39px; object-fit: contain; }
.assistant-brand > span { display: flex; flex-direction: column; gap: 4px; }
.assistant-brand strong { font-size: 16px; font-weight: 780; letter-spacing: .035em; }
.assistant-brand small { color: var(--ca-muted); font: 600 8px/1 var(--ca-mono); letter-spacing: .15em; }
.assistant-nav-links { display: flex; align-items: center; gap: 28px; }
.assistant-nav-links > a:not(.assistant-nav-cta) { position: relative; padding-block: 10px; font-size: 14px; font-weight: 650; }
.assistant-nav-links > a:not(.assistant-nav-cta)::after { content: ""; position: absolute; inset: auto 0 2px; height: 2px; background: var(--ca-blue); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.assistant-nav-links > a:not(.assistant-nav-cta):hover::after { transform: scaleX(1); }
.assistant-language { min-height: 38px; padding: 0 12px; border: 1px solid var(--ca-line); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.assistant-language:hover { border-color: #aab9d0; background: var(--ca-surface); }
.assistant-nav-cta, .assistant-button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--ca-blue); border-radius: 9px; color: #fff; background: var(--ca-blue); font-size: 14px; font-weight: 760; box-shadow: 0 10px 28px rgba(11, 99, 246, .17); transition: transform .2s var(--ca-ease), background .2s ease, box-shadow .2s ease; }
.assistant-nav-cta:hover, .assistant-button-primary:hover { background: var(--ca-blue-strong); transform: translateY(-2px); box-shadow: 0 15px 36px rgba(11, 99, 246, .23); }
.assistant-menu { display: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ca-line); border-radius: 9px; background: #fff; cursor: pointer; }
.assistant-hero { padding: 110px 0 20px; overflow: hidden; background: #fff; }
.assistant-hero-grid { display: grid; grid-template-columns: minmax(510px, .94fr) minmax(0, 1.06fr); align-items: start; gap: 32px; }
.assistant-hero-copy { padding-top: 35px; }
.assistant-eyebrow, .assistant-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--ca-blue); font: 750 11px/1.4 var(--ca-mono); letter-spacing: .15em; text-transform: uppercase; }
.assistant-eyebrow::after { content: ""; width: 34px; height: 1px; background: var(--ca-blue); }
.assistant-hero h1 { margin: 28px 0 0; font-size: clamp(48px, 4.1vw, 62px); line-height: 1.05; letter-spacing: -.07em; }
.assistant-hero h1 > span { display: block; }
.assistant-hero h1 em { color: var(--ca-blue); font-style: normal; }
.assistant-hero-summary { max-width: 500px; margin: 30px 0 0; color: var(--ca-text); font-size: 17px; line-height: 1.85; }
.assistant-hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.assistant-button-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid #c8d3e2; border-radius: 9px; color: var(--ca-ink); background: #fff; font-size: 14px; font-weight: 750; transition: border-color .2s ease, background .2s ease, transform .2s var(--ca-ease); }
.assistant-button-secondary:hover { border-color: #9badc5; background: var(--ca-surface); transform: translateY(-2px); }
.assistant-proof { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 28px 0 0; padding: 0; color: var(--ca-text); list-style: none; }
.assistant-proof li { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 620; }
.assistant-proof li span { width: 6px; height: 6px; border-radius: 50%; background: var(--ca-blue); }
.assistant-hero-visual { position: relative; margin: 0; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 25px; background: var(--ca-surface); box-shadow: 0 35px 90px rgba(48, 70, 109, .13); }
.assistant-hero-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); pointer-events: none; }
.assistant-hero-visual img { width: 100%; aspect-ratio: 1.31; object-fit: cover; object-position: center; }
.assistant-hero-visual figcaption { position: absolute; right: 15px; top: 50%; display: flex; flex-direction: column; gap: 4px; color: #697994; font: 600 7px/1.2 var(--ca-mono); letter-spacing: .08em; transform: translateY(-50%); }
.assistant-capabilities { padding: 38px 0 124px; border-top: 1px solid #eef1f6; background: var(--ca-bg); }
.assistant-section-center { max-width: 780px; margin: 0 auto 58px; text-align: center; }
.assistant-section-center h2, .assistant-section-left h2, .assistant-section-split h2, .assistant-cta h2 { margin: 20px 0 0; font-size: clamp(38px, 4vw, 58px); line-height: 1.12; letter-spacing: -.055em; }
.assistant-section-center > p, .assistant-section-left > p, .assistant-section-split > p, .assistant-cta p { color: var(--ca-text); font-size: 16px; line-height: 1.8; }
.assistant-section-center > p { margin: 20px auto 0; }
.capability-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ca-line); border-bottom: 1px solid var(--ca-line); }
.capability-grid article { min-height: 250px; padding: 30px 22px; }
.capability-grid article + article { border-left: 1px solid var(--ca-line); }
.capability-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: var(--ca-blue); background: var(--ca-surface-blue); }
.capability-grid article:nth-child(even) .capability-icon { color: var(--ca-mint); background: #eaf8f4; }
.capability-grid h3 { margin: 28px 0 12px; font-size: 17px; letter-spacing: -.025em; }
.capability-grid p { margin: 0; color: var(--ca-muted); font-size: 12px; line-height: 1.72; }
.assistant-system { padding: 126px 0; border-top: 1px solid #eef1f6; background: var(--ca-surface); }
.assistant-system-grid, .assistant-trust-grid { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(620px, 1.3fr); gap: 86px; align-items: start; }
.assistant-section-left h2 span, .assistant-cta h2 span { display: block; }
.assistant-section-left > p { margin: 26px 0 0; }
.industry-explorer { overflow: hidden; border: 1px solid var(--ca-line); border-radius: 18px; background: #fff; box-shadow: 0 20px 65px rgba(58, 79, 116, .08); }
.industry-tab-label { padding: 17px 22px 11px; color: var(--ca-muted); font: 700 9px/1 var(--ca-mono); letter-spacing: .12em; text-transform: uppercase; }
.industry-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 12px 12px; border-bottom: 1px solid var(--ca-line); }
.industry-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 8px; color: var(--ca-text); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; }
.industry-tabs button:hover { background: var(--ca-surface); }
.industry-tabs button.is-active { color: var(--ca-blue); background: var(--ca-surface-blue); }
.industry-detail { padding: 30px; }
.industry-detail-heading { display: flex; align-items: flex-start; gap: 16px; }
.industry-detail-heading > span { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; color: var(--ca-blue); background: var(--ca-surface-blue); }
.industry-detail-heading small { color: var(--ca-blue); font: 700 9px/1 var(--ca-mono); letter-spacing: .12em; text-transform: uppercase; }
.industry-detail h3 { margin: 7px 0 0; font-size: 23px; letter-spacing: -.035em; }
.industry-detail > p { margin: 20px 0 0; color: var(--ca-text); font-size: 14px; line-height: 1.75; }
.industry-detail-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 0; margin-top: 28px; border-top: 1px solid var(--ca-line); }
.industry-detail-grid > div { padding-top: 24px; }
.industry-detail-grid > div + div { margin-left: 26px; padding-left: 26px; border-left: 1px solid var(--ca-line); }
.industry-detail-grid strong { font-size: 12px; }
.industry-detail-grid ul { display: grid; gap: 11px; margin: 15px 0 0; padding: 0; list-style: none; }
.industry-detail-grid li { display: flex; align-items: center; gap: 8px; color: var(--ca-text); font-size: 12px; }
.industry-detail-grid li svg { color: var(--ca-mint); }
.industry-detail-grid p { margin: 15px 0 0; color: var(--ca-text); font-size: 12px; line-height: 1.72; }
.assistant-process { padding: 124px 0; background: #fff; }
.assistant-section-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .65fr); align-items: end; gap: 80px; margin-bottom: 60px; }
.assistant-section-split > p { margin: 0; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ca-line); border-bottom: 1px solid var(--ca-line); }
.process-grid article { position: relative; min-height: 300px; padding: 28px; }
.process-grid article + article { border-left: 1px solid var(--ca-line); }
.process-number { color: var(--ca-blue); font: 750 10px/1 var(--ca-mono); letter-spacing: .12em; }
.process-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-top: 46px; border-radius: 50%; color: var(--ca-blue); background: var(--ca-surface-blue); }
.process-grid h3 { margin: 28px 0 11px; font-size: 20px; }
.process-grid p { margin: 0; color: var(--ca-muted); font-size: 13px; line-height: 1.72; }
.assistant-trust { padding: 126px 0; background: var(--ca-surface-blue); }
.assistant-trust .assistant-kicker { color: var(--ca-blue-strong); }
.trust-list { border-top: 1px solid #cbd9ee; }
.trust-list article { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 27px 0; border-bottom: 1px solid #cbd9ee; }
.trust-list article > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--ca-blue); background: #fff; }
.trust-list h3 { margin: 0; font-size: 19px; }
.trust-list p { margin: 10px 0 0; color: var(--ca-text); font-size: 13px; line-height: 1.75; }
.assistant-cta { padding: 138px 0; text-align: center; background: #fff; }
.assistant-cta-inner { max-width: 850px; display: flex; flex-direction: column; align-items: center; }
.assistant-cta p { max-width: 700px; margin: 25px auto 0; }
.assistant-cta .assistant-button-primary { margin-top: 34px; }
.assistant-footer { padding: 28px 0 32px; border-top: 1px solid var(--ca-line); background: var(--ca-surface); }
.assistant-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.assistant-footer-company { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.assistant-footer-company > span, .assistant-footer-signal { color: var(--ca-muted); font: 600 9px/1.5 var(--ca-mono); }
.assistant-footer-company a { color: var(--ca-muted); font-size: 11px; }
.assistant-footer-company a:hover { color: var(--ca-blue); }
.assistant-footer-police { display: inline-flex; align-items: center; gap: 5px; }
.assistant-footer-police img { width: 18px; height: 20px; object-fit: contain; }
.assistant-footer-signal { flex: 0 0 auto; letter-spacing: .08em; }
[data-reveal] { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s var(--ca-ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (max-width: 1160px) {
:root { --ca-shell: min(100% - 48px, 1060px); }
.assistant-nav-links { gap: 18px; }
.assistant-hero-grid { grid-template-columns: minmax(390px, .8fr) minmax(500px, 1.1fr); gap: 26px; }
.assistant-hero h1 { font-size: clamp(46px, 4.5vw, 54px); }
.assistant-hero h1 span:last-child em { display: block; }
.capability-grid { grid-template-columns: repeat(3, 1fr); }
.capability-grid article:nth-child(4) { border-left: 0; }
.capability-grid article:nth-child(n+4) { border-top: 1px solid var(--ca-line); }
.assistant-system-grid, .assistant-trust-grid { gap: 50px; }
}
@media (max-width: 900px) {
.assistant-menu { display: grid; }
.assistant-nav-links { position: fixed; inset: 76px 0 auto; display: grid; gap: 0; padding: 14px 24px 22px; border-bottom: 1px solid var(--ca-line); background: rgba(255, 255, 255, .98); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .2s ease, transform .2s var(--ca-ease); }
.assistant-nav-links.is-open { opacity: 1; pointer-events: auto; transform: none; }
.assistant-nav-links > a:not(.assistant-nav-cta) { padding: 14px 4px; border-bottom: 1px solid var(--ca-line); }
.assistant-nav-links > a:not(.assistant-nav-cta)::after { display: none; }
.assistant-language { width: 100%; margin-top: 12px; }
.assistant-nav-cta { margin-top: 10px; }
.assistant-hero { min-height: 0; padding-top: 134px; }
.assistant-hero-grid { grid-template-columns: 1fr; }
.assistant-hero-copy { max-width: 720px; padding-top: 0; }
.assistant-hero-visual { margin-top: 20px; }
.assistant-system-grid, .assistant-trust-grid { grid-template-columns: 1fr; }
.assistant-section-left { max-width: 720px; }
.assistant-section-split { grid-template-columns: 1fr; gap: 22px; }
.process-grid { grid-template-columns: repeat(2, 1fr); }
.process-grid article:nth-child(3) { border-left: 0; }
.process-grid article:nth-child(n+3) { border-top: 1px solid var(--ca-line); }
}
@media (max-width: 640px) {
:root { --ca-shell: min(100% - 28px, 560px); }
.assistant-nav { height: 68px; }
.assistant-brand small { display: none; }
.assistant-nav-links { inset: 68px 0 auto; }
.assistant-hero { padding: 116px 0 70px; }
.assistant-hero h1 { margin-top: 24px; font-size: clamp(43px, 13vw, 58px); }
.assistant-hero h1 span:last-child em { display: block; }
.assistant-hero-summary { margin-top: 24px; font-size: 15px; line-height: 1.75; }
.assistant-hero-actions { display: grid; }
.assistant-button-primary, .assistant-button-secondary { width: 100%; }
.assistant-proof { display: grid; gap: 10px; }
.assistant-hero-visual { border-radius: 15px; }
.assistant-hero-visual img { aspect-ratio: 1.12; object-position: 44% center; }
.assistant-hero-visual figcaption { display: none; }
.assistant-capabilities, .assistant-system, .assistant-process, .assistant-trust { padding: 88px 0; }
.assistant-section-center { margin-bottom: 42px; text-align: left; }
.assistant-section-center h2, .assistant-section-left h2, .assistant-section-split h2, .assistant-cta h2 { font-size: clamp(35px, 10vw, 47px); }
.capability-grid { grid-template-columns: 1fr; }
.capability-grid article { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; min-height: 0; padding: 22px 8px; }
.capability-grid article + article { border-left: 0; border-top: 1px solid var(--ca-line); }
.capability-icon { grid-row: 1 / 3; width: 48px; height: 48px; }
.capability-grid h3 { margin: 2px 0 4px; }
.industry-tabs { grid-template-columns: repeat(2, 1fr); }
.industry-detail { padding: 22px; }
.industry-detail h3 { font-size: 20px; }
.industry-detail-grid { grid-template-columns: 1fr; }
.industry-detail-grid > div + div { margin: 20px 0 0; padding: 22px 0 0; border-top: 1px solid var(--ca-line); border-left: 0; }
.process-grid { grid-template-columns: 1fr; }
.process-grid article { min-height: 0; padding: 25px 8px 28px; }
.process-grid article + article { border-left: 0; border-top: 1px solid var(--ca-line); }
.process-icon { margin-top: 28px; }
.trust-list article { grid-template-columns: 46px 1fr; gap: 14px; }
.trust-list article > span { width: 44px; height: 44px; }
.assistant-cta { padding: 100px 0; }
.assistant-footer-row, .assistant-footer-company { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
[data-reveal] { opacity: 1; transform: none; }
}
+10
View File
@@ -0,0 +1,10 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { ChatAssistantProductPage } from './ChatAssistantProductPage';
import './chat-assistant.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<ChatAssistantProductPage />
</StrictMode>
);
+2 -1
View File
@@ -17,7 +17,8 @@ export default defineConfig({
rollupOptions: {
input: {
home: resolve(process.cwd(), 'index.html'),
harness: resolve(process.cwd(), 'products/roncarve-harness/index.html')
harness: resolve(process.cwd(), 'products/roncarve-harness/index.html'),
chatAssistant: resolve(process.cwd(), 'products/chat-assistant/index.html')
}
}
}
@@ -0,0 +1,80 @@
# 箴言助手 Chat Assistant 产品页设计文档
## 1. 产品命名与定位
- 中文名:箴言助手
- 英文名:Chat Assistant
- 产品定位:连接企业数据、领域知识、业务工具与表达策略,为垂直行业提供有依据、可落地、可追溯的智能建议。
- 演示场景:保险顾问服务与保障建议。
- 扩展方式:用新的业务数据、知识资源、技能、工具、意图、表达模板和治理策略替换保险资源包,复用对话、编排、权限、观测与审计底座。
## 2. 当前项目能力总结
以下总结以 `D:\workspace\bankchat` 当前代码、README 和设计文档为依据。产品页只表达代码中已经存在的能力边界,不把路线图能力包装成现状。
### 2.1 对话与上下文
- 新建、保存和查询会话,按会话加载最近历史消息,并支持较早上下文摘要。
- 通过 SSE 流式输出回答、工具调用与模型原生 thinking 状态;模型不支持 thinking 时明确降级,不影响正式回答。
- 支持在输入中显式选择已发布技能及产品、活动、权益对象,并将控制信息与用户正文分开存储。
- 支持用户档案和表达风格偏好,风格只调整语言表达,不覆盖事实、合规规则和工具结果。
### 2.2 业务事实与建议
- 保险演示场景复用客户与客户画像、产品、活动、权益查询能力,并以保障建议方式呈现。
- Agent 可把会话问题、历史上下文、业务查询结果与合规表达资源组合为建议。
- 快捷动作采用白名单和确定性工具预执行,数据库管理工具元数据,运行体仍由代码控制。
### 2.3 可配置的行业资源体系
- 意图、技能、工具、方案、表达模板、内容、字典与策略均具有独立资源模型。
- 资源支持启用、发布、版本历史和回退,并可在解决方案总览中查看关系。
- 行业扩展不依赖改造聊天外壳,核心工作是建立新的数据对象、行业技能、业务工具与表达策略。
### 2.4 数据接入与治理
- 数据源支持配置、连通性测试、启停与历史记录。
- 数据范围支持同步、预览、发布与停用,运行时通过受控目录查询。
- 字段元数据、敏感字段保护和查询审计形成数据访问边界。
### 2.5 模型与运行配置
- 使用 OpenAI-compatible API,可配置不同厂商的 Base URL、模型和调用参数。
- 模型配置支持连通性测试、激活、历史版本与回退,敏感凭据由后端加密存储和脱敏展示。
### 2.6 分析、追踪与审计
- 会话效果分析包括概要、时序、意图、工具和会话记录。
- Trace 记录资源选择、工具调用、模型节点、状态与耗时,支持问题回放。
- 管理操作进入追加式审计事件,并提供查询、详情、选项与完整性校验能力。
### 2.7 身份与权限
- 浏览器统一通过 Java 网关访问,Python Agent API 仅承载编排与流式生成。
- 支持 Roncarve IAM OIDC Authorization Code + PKCE 登录与显式应用准入。
- 外部身份按 `(issuer, subject)` 绑定,不按邮箱自动合并;系统管理员、管理员和普通用户职责分离。
## 3. 产品页信息架构
1. Hero:用“让行业经验,成为每一次决策的底气”建立核心价值,并展示真实产品对话界面。
2. 六大能力:企业数据、领域知识、智能建议、来源追溯、行业扩展、安全合规。
3. 行业扩展:以保险为演示示例,交互切换制造、零售和专业服务场景。
4. 落地路径:连接、理解、建议、追溯。
5. 安全可信:统一身份、数据范围与审计观测。
6. 转化区:邮件预约产品演示。
## 4. 视觉方向
- 参考“荣刻驭境”的品牌层级、导航比例、大标题力度和企业级质感。
- 与荣刻驭境的深色粒子主题区分,采用白色与浅灰蓝基底、荣刻蓝主色和克制薄荷绿辅助色。
- 首屏使用选定方案 1 的真实产品工作台视觉;正文使用清晰分隔、充足留白和少量表面层级,不堆叠卡片。
- 桌面端以左右分栏为主;移动端改为单列,能力与流程按阅读顺序展开。
- 中英文共享同一信息架构,并持久化语言偏好。
## 5. 实现范围
- 新增 `/products/chat-assistant/` 多页应用入口。
- 新增响应式 React 产品页、行业场景交互、移动导航和中英文切换。
- 首页产品菜单增加“箴言助手”入口。
- 更新 Vite 多页构建、Nginx 规范路径和站点地图。
- 通过现有 Docker Compose 在 `127.0.0.1:8081` 提供本地预览。