# OmniCard AI (全球智能名片 & 移动微官网 SaaS) ## 产品需求文档 (PRD) 与 核心功能页面清单架构蓝图 --- ### 一、 产品战略定位与商业愿景 (Product Vision & Strategy) #### 1.1 产品定位 **OmniCard AI** 是一款面向**全球现代商务、跨国企业团队、自由职业者及国际会展场景**的新一代 **智能数字名片 + 移动微官网 (Bento Micro-Site) + 潜客雷达 CRM + 实体 NFC 智能卡管家** 一体化 SaaS 平台。 它不仅是一张数字名片,更是全球企业与个人的**微型官网**与**全天候获客线索引擎**: - **用户端与微官网(User Client: App & H5)**:秒级首屏响应、无缝多语言自适应(含 RTL 排版)、Bento Grid 现代卡片美学、名片在线智能商务顾问、NFC 实体卡秒级碰触与离线 vCard 导入。 - **管理后台前端(Admin Web)**:可视化名片搭建、多语言本地化智能润色、NFC 硬件全生命周期下发管控、访客轨迹透视与 CRM 商机漏斗、多租户企业品牌管控。 - **后端中枢服务(Backend API)**:基于 Cool-Admin (Node.js) 模块化架构,提供高性能企业级数据中枢、安全 RBAC 鉴权、微秒级雷达日志追踪及官方插件集成。 #### 1.2 核心用户画像 (Target Personas) 1. **全球商务销售与国际参展团队**:常年参与国际知名展会(CES、IFA、迪拜 GITEX 等),需要跨语种交流,通过手机或 NFC 实体卡一碰即达,零摩擦留存客户线索。 2. **跨国商务顾问/自由专家 (Consultants & Creators)**:需要集个人品牌展示、过往案例 (Portfolio)、干货博客文章 (Insights) 与预约排期于一体的移动端便当盒微官网。 3. **全球化科技企业 / 国际品牌团队**:需要统一管理数十到数百名商务人员的名片物料,统一品牌 VI 形象,并集中追踪团队名片带来的全球线索转化与公海池沉淀。 --- ### 二、 核心业务架构全景图 (System Architecture) ```mermaid flowchart TD subgraph 实体与触达层 [Touchpoints & Hardware] NFC[NFC 智能实体卡/胸牌/手环] QR[动态防伪二维码] SocialLink[LinkedIn / WhatsApp / 邮件签名链接] end subgraph 用户端_uni-app_x [User Client: App & H5] Portal[Bento 风格移动微官网 (H5 秒开)] i18nDetect[动态地域与多语言检测 (Geo-i18n / RTL)] vCardDownload[一键存入手机通讯录 (RFC 6350 vCard)] AIAgent[名片在线智能顾问 (24/7 咨询 / 留资)] CaseHub[精选案例与多媒体展厅] ArticleHub[深度文章与公司动态] LeadCapture[一键互换名片 / 快速留资] OwnerMobile[移动名片管家 / 手机触卡绑定 / 实时雷达推送] end subgraph 后端服务_Cool-Admin [Backend API: Node.js Midway.js] CardModule[名片与微官网模块 modules/card] CRMModule[访客雷达与商机模块 modules/crm] AIModule[AI 对话与本地化润色模块 modules/ai] NFCModule[NFC 设备生命周期模块 modules/nfc] TeamModule[多租户与团队管理 modules/team] PluginEco[官方生态: OSS存储 / Redis缓存 / Task调度] end subgraph 管理后台前端_Arco_Design [Admin Web: React] CardEditor[Bento Grid 可视化搭建器] RadarDashboard[全球访客轨迹雷达大屏] CRMPipeline[线索看板与全生命周期追踪] NFCMgr[NFC 设备批量入库与挂失管理] AIStudio[企业 RAG 知识库与人设调优] TeamGov[组织架构 / 品牌 VI 模板管控] end NFC --> Portal QR --> Portal SocialLink --> Portal Portal --> i18nDetect Portal --> vCardDownload Portal --> AIAgent Portal --> CaseHub Portal --> ArticleHub Portal --> LeadCapture LeadCapture --> CRMModule Portal -.-> CRMModule OwnerMobile <--> Backend API Admin Web <--> Backend API Backend API <--> PluginEco ``` --- ### 三、 功能需求详细设计 (Functional Specifications) #### 3.1 模块一:微官网与名片可视化搭建系统 (Bio-Portal Builder) *设计灵感源于 Bento Grid (便当盒网格) 与 Apple 级精细质感,支持模块拖拽自由编排。* 1. **基础名片层 (Hero Section)**: - 头像/形象照、姓名、职业头衔、所属企业(带公司 Logo 与官网反向链接)。 - 个人签名/Slogan、所在地时区(方便跨国客户确认作息)、双语发音语音条(Audio Name Pronunciation)。 - 一键呼出与快捷方式:WhatsApp、LinkedIn、Email、Telegram、X (Twitter)、WeChat、电话直拨。 - **一键存入手机通讯录 (Add to Contacts)**:严格遵循 **RFC 6350 (vCard 3.0/4.0)** 国际标准,自动内嵌高清头像、职位、公司、备注及微官网 URL。 2. **案例展示展厅 (Cases & Portfolio)**: - 独立案例卡片:案例标题、合作客户、项目周期、痛点及解决方案、指标成效(数据 KPI 高亮卡片)。 - 多媒体支持:图片轮播、YouTube/Vimeo 视频内嵌、PDF 解决方案白皮书在线预览。 3. **文章与动态分享 (Insights & Articles)**: - 极简移动排版,支持富文本排版。 - 社交分享元数据(OpenGraph)自动生成:转发至 LinkedIn、WhatsApp 时具备吸引人的预览图和摘要卡。 4. **个性化视觉定制 (Visual Theming)**: - 预设商务模板:硅谷科技暗黑 (Tech Dark)、瑞士极简 (Swiss Minimalist)、中东奢华金属 (Gold Luxe)、现代商务蓝 (Corporate Navy)。 - 严格遵循设计 Token,支持自定义品牌主色、Google Fonts 全球字体、背景微渐变与精细边框。 #### 3.2 模块二:全球化多语言体系 (Global i18n Engine) 1. **多语言全链路支持**: - 系统支持主流国际商务语言:英语 (English)、西班牙语 (Español)、阿拉伯语 (العربية,特别支持 **RTL 镜像排版**)、中文(简/繁)、德语 (Deutsch)、法语 (Français)、日语 (日本語)。 2. **双重多语言实现机制**: - **界面级 i18n**:系统按钮、预置文案随访客浏览器首选语言自动本地化。 - **内容级多语种独立配置**:名片所有者可针对同一张名片创建不同语言内容分支。 3. **地理位置自动路由 (Geo-Routing)**: - 访客扫码时,根据 IP 地理位置与浏览器语言自动呈现对应语言版本,右上角常驻全球语言切换器。 #### 3.3 模块三:智能服务中枢 (Omni Intelligence Suite) 1. **名片智能快捷生成**: - 输入公司官网 URL、领英主页链接或一段纯文本公司介绍,系统智能提炼核心优势并生成完整的名片布局与代表案例草稿。 2. **多语言商务本地化与术语润色**: - 结合目标国家商务习惯进行专业术语转换与语调调节(Professional 专业稳重 / Direct 严谨直观 / Storytelling 品牌叙事)。 3. **名片在线智能顾问 (Card-Embedded Concierge)**: - 名片在线智能商务助手。 - **知识库灌注 (RAG)**:名片主可上传个人简历、公司 FAQ、产品规格书、价格区间。 - 意图识别与留资:当检测到深度意向时,系统智能引导客户留下联系方式并同步至 CRM。 4. **销售线索跟进与商机建议**: - 根据访客行为生成客户意向度诊断分析,并提供个性化跟进话术建议。 #### 3.4 模块四:轻量级客户关系 CRM 与访客雷达 (Lead CRM & Radar) 1. **实时访客雷达 (Visitor Radar)**: - 国际客商在展会或拜访后点开名片,销售 App 收到即时推送(Push Notification): *“来自阿联酋迪拜的访客正在浏览您的名片,已停留 3 分钟,正在重点查看‘新能源储能项目案例’!”* 2. **无摩擦线索沉淀 (Frictionless Lead Exchange)**: - “互换名片”弹窗:访客快速输入姓名、公司、邮箱/WhatsApp,或拍照上传纸质名片(OCR 识别入库)。 3. **线索全生命周期看板 (Lead Pipeline)**: - 状态流转:新线索 (New) → 已建立联系 (Contacted) → 深度意向 (Hot) → 赢单 (Won) / 沉睡 (Archived)。 - 客户详细画像:历次访问时间轴、阅读案例偏好、跟进备忘录。 4. **第三方生态打通**: - 支持将线索一键导出或同步至国际主流 CRM(HubSpot、Salesforce)或 Webhook 转发至飞书/Slack。 #### 3.5 模块五:NFC 电子名片与硬件设备管理 (NFC Fleet Hub) 1. **硬件兼容性与双协议写入**: - 兼容标准 NTAG213 / NTAG215 / NTAG216 芯片卡片、金属卡、竹木环保卡、手机后贴及智能徽章。 - **动态云端短链模式 (Dynamic Cloud URL)**:卡片只写入唯一的短链,用户在 App 端可随时切换绑定的名片,无需重新烧录硬件。 - **离线名片备份 (NDEF vCard Fallback)**:支持在弱网/离线场景下直接写入离线联系人数据。 2. **NFC 设备全生命周期管控**: - 硬件绑定激活:移动端开启 NFC 读取,贴近新卡 0.5 秒完成安全激活。 - 场景化卡片模式切换:例如白天“商务展会模式”,夜晚“社交模式”。 - 安全防篡改与丢失注销:支持一键挂失冻结,防止卡片丢失后被滥用。 #### 3.6 模块六:多租户企业版管理 (Enterprise & Team Workspace) 1. **统一品牌模板库 (Brand Kit)**: - 企业管理员统一锁定 Logo、主色调、排版规范,员工仅可填充个人手机号、照片及特定语言简介。 2. **团队权限与线索公海**: - 分级权限:超级管理员 (Owner)、部门主管 (Manager)、销售成员 (Member)。 - 员工离职一键转接:离职员工名片短链自动重定向至企业公海或新接替人员,确保客户资产不流失。 3. **团队获客数据大屏 (Team Analytics)**: - 展会期间统计各团队成员名片触达次数、线索获取数量、区域分布排行榜。 --- ### 四、 后台管理前端功能与页面清单 (Admin Web - React + Arco Design) > **开发规范**:基于 React 18 + TypeScript + `@arco-design/web-react` 官方企业级规范开发。全量复用 Arco 官方 `Table`、`Form`、`Modal`、`Drawer` 与图标库,杜绝重复造轮子。 ``` admin-web/ (Arco Pro 架构) ├── src/ │ ├── pages/ │ │ ├── dashboard/ # 工作台与数据大屏 │ │ ├── card/ # 名片与微官网搭建 │ │ ├── ai/ # AI 中枢与知识库 │ │ ├── crm/ # 访客雷达与客户商机 │ │ ├── nfc/ # NFC 实体硬件舰队 │ │ ├── team/ # 团队与多租户权限 │ │ └── settings/ # 租户配置与计费 ``` #### 4.1 详细页面清单与功能规划表 | 模块名称 | 页面路由路径 | 页面中文名称 | 核心功能点与交互规范 | 推荐复用 Arco 官方组件 | | :--- | :--- | :--- | :--- | :--- | | **工作台** | `/dashboard/workplace` | 商务概览工作台 | 核心 KPI 概览(触碰量、浏览量、新线索、成交转化);今日实时雷达动态流;快捷入口(新建名片、发卡、线索导出)。 | `Grid`, `Statistic`, `Card`, `Timeline`, `Button` | | **数据大屏** | `/dashboard/radar-map` | 全球访客雷达大屏 | 全球访客分布地理热力图(国家/地区占比);各名片停留时长与访问峰值走势图;国际客户语言/设备终端分析。 | `Card`, `DatePicker.RangePicker`, `Spin`, `Empty` | | **名片管理** | `/card/list` | 数字名片资产库 | 名片表格与卡片双视图切换;发布/草稿状态;一键复制短链;动态防伪二维码下载(PNG/SVG/PDF打印格式);批量导出 vCard。 | `Table`, `Radio.Group`, `Badge`, `Popconfirm`, `Dropdown` | | **微官网搭建** | `/card/builder/:id` | Bento 可视化搭建器 | **左侧组件库**:Hero身份、社媒矩阵、案例卡、文章卡、视频音频、留资表单;
**中间画布**:手机端视口实时响应模拟(支持浅/深色、RTL阿语实时镜像);
**右侧属性配置**:模块属性、多语言文案切换、Bento 跨度调整 (1x1, 1x2, 2x1, 2x2)。 | `Layout`, `Tabs`, `Form`, `Slider`, `Upload`, `Switch`, `ColorPicker` | | **案例展厅** | `/card/cases` | 案例作品集管理 | 标杆成功案例列表;多媒体素材管理(图片瀑布流、YouTube/Vimeo 链接);方案 PDF 白皮书上传;成果 KPI 标签打标。 | `Table`, `Modal`, `Form.Item`, `Upload`, `Tag` | | **文章动态** | `/card/articles` | 博客与动态发布 | 富文本文章发布;移动端排版预览;SEO 与 OpenGraph 社交预览卡(WhatsApp/LinkedIn)图片与描述自动生成。 | `Table`, `Input`, `Drawer`, `Alert` | | **智能客服** | `/ai/concierge` | 名片智能顾问调优 | 顾问人设设定(国际贸易顾问、商务代表等);欢迎语与引导词设置;高频 FAQ 手动配置;自动留资触发策略设置。 | `Form`, `Input.TextArea`, `Slider`, `Radio.Group`, `Card` | | **知识库 RAG** | `/ai/knowledge` | 知识库与向量切片 | 知识库文件批量上传(PDF/Docx/TXT/MD);URL 网站智能抓取;向量化进度条与分块切片预览;召回命中率调试沙盒。 | `Upload.Dragger`, `Progress`, `Table`, `Drawer`, `Input.Search` | | **智能润色** | `/ai/translation` | 多语言润色中心 | 批量多语言内容润色与地道化翻译;跨国专有名词与行业术语库 (Glossary) 维护;口吻风格切换(稳重/直接/故事感)。 | `Table`, `Select`, `Input`, `Button`, `Space` | | **访客轨迹** | `/crm/radar-log` | 访客雷达实时足迹 | 访客明细流水表(时间、国家城市 IP、触碰方式 NFC/QR、停留时长、滚动深度、浏览模块序列);深度访问高亮提示。 | `Table`, `Tag`, `Badge`, `Tooltip`, `Pagination` | | **线索管理** | `/crm/leads` | 潜客线索关系库 | 客户线索全量列表;意向度等级打标 (`Hot` / `Warm` / `Cold`);跟进人分配;批量导出 Excel;一键推送到外部 CRM。 | `Table`, `Select`, `Tag`, `Modal`, `Drawer`, `Message` | | **商机看板** | `/crm/pipeline` | 销售商机流转看板 | 泳道式阶段看板(新留资 ➔ 首次接触 ➔ 方案对接 ➔ 赢单/输单);卡片拖拽流转;商机总金额与转化率统计。 | `Grid`, `Card`, `Avatar`, `Tag`, `Typography.Text` | | **线索画像** | `/crm/leads/:id` | 客户全景画像抽屉 | 客户资料详情;历次名片访问时间轴(时空轨迹);客户意向重点提炼;智能生成跟进邮件/WhatsApp 沟通首语。 | `Drawer`, `Descriptions`, `Timeline`, `Input.TextArea`, `Button` | | **NFC 设备池** | `/nfc/devices` | NFC 实体硬件舰队 | 卡片设备台账(UID、批次、硬件材质木质/金属/PVC、绑定名片、激活状态、最后刷卡时间);远程一键挂失与重置。 | `Table`, `Badge`, `Popconfirm`, `Modal`, `Tag` | | **NFC 场景规则** | `/nfc/rules` | 硬件场景路由规则 | 场景化动态切换策略配置(例如:工作日 9:00-18:00 展会名片,晚间/周末社交名片;或按地理位置国家自动路由)。 | `Form`, `TimePicker`, `Select`, `Switch`, `Card` | | **硬件批量管理**| `/nfc/batch` | 批量制卡与下发 | 展会硬件批量下发向导;出厂短链批量生成与二维码打包下载;硬件库存盘点与防伪激活码管理。 | `Steps`, `Upload`, `Table`, `Progress`, `Button` | | **团队架构** | `/team/members` | 组织成员与权限 | 组织部门树状管理;成员列表与名片分配;权限角色管理(企业超管、销售主管、业务员);成员邀请链接/二维码。 | `Tree`, `Table`, `Modal`, `Form`, `Select` | | **品牌规范** | `/team/brand-kit` | 品牌 VI 规范套件 | 统一品牌 Logo、官方品牌主色/辅色 Token 锁定;名片模板版权页强制声明;员工自填字段白名单限制。 | `Form`, `Upload`, `ColorPicker`, `Checkbox`, `Alert` | | **离职交接** | `/team/handover` | 资产一键交接工单 | 离职员工名片资产一键回收;原短链与二维码重定向分配至接替人;名片关联历史线索无缝移交团队公海池。 | `Form`, `Select`, `Alert`, `Popconfirm`, `Button` | | **租户设置** | `/settings/tenant` | 企业设置与域名 | 企业基本资料;自定义独立主域名绑定向导 (`me.brand.com`) 与 SSL 证书状态检测;全球 CDN 加速配置。 | `Form`, `Input`, `Alert`, `Descriptions`, `Button` | | **订阅账单** | `/settings/billing` | 商业订阅与账单 | 当前版本套餐 (Free / Pro / Enterprise);坐席与名片配额使用进度条;Stripe 国际信用卡绑定与月度/年度发票下载。 | `Card`, `Progress`, `Table`, `Tag`, `Button` | | **审计日志** | `/settings/audit-logs`| 系统安全审计日志 | 关键操作行为追踪(名片删除、线索批量导出、NFC 挂失、权限变更);操作人、IP、时间戳全记录。 | `Table`, `DatePicker`, `Input.Search`, `Tag` | --- ### 五、 用户端与移动端功能页面清单 (User Client - uni-app x: App + H5) > **开发规范**:基于 DCloud 下一代 **uni-app x (uts 强类型语言 + Vue 3 `