docs: 完善PRD文档中的后台(Arco React)与用户App端(uni-app x)全量功能页面清单与架构映射

docs/PRODUCT_REQUIREMENTS_DOCUMENT.md

@@ -1,5 +1,5 @@
 # OmniCard AI (全球智能名片 & 移动微官网 SaaS)
-## 产品需求文档 (PRD) 与 全球化体验设计蓝图
+## 产品需求文档 (PRD) 与 核心功能页面清单架构蓝图
 
 ---
 
@@ -9,14 +9,14 @@
 **OmniCard AI** 是一款面向**全球出海商务、跨国企业团队、自由职业者及国际会展场景**的新一代 **AI 驱动型智能数字名片 + 移动微官网 (Bento Micro-Site) + 潜客雷达 CRM + 实体 NFC 智能卡管家** 一体化 SaaS 平台。
 
 它不仅是一张数字名片，更是出海企业与个人的**微型官网**与**24小时自动获客线索引擎**：
-- **访客端（Front-End Visitor Portal）**：秒级首屏、无缝多语言自适应、Bento Grid 现代卡片美学、内置 AI 智能代表对话。
-- **用户/管理端（Admin & Workspace）**：简单直观的可视化搭建、AI 批量生成多语言内容、NFC 卡片动态绑定与防伪、访客行为轨迹与 CRM 商机漏斗。
-- **企业团队端（Team / Enterprise Suite）**：统一定制企业品牌 VI 模板、员工集中分发与离职回收、线索公海池流转。
+- **用户端与微官网（User Client: App & H5）**：秒级首屏响应、无缝多语言自适应（含 RTL 排版）、Bento Grid 现代卡片美学、名片内置 24/7 AI 顾问对话、NFC 实体卡秒级碰触与离线 vCard 导入。
+- **管理后台前端（Admin Web）**：可视化名片搭建、AI 批量出海润色、NFC 硬件全生命周期下发管控、访客轨迹透视与 CRM 商机漏斗、多租户企业品牌管控。
+- **后端中枢服务（Backend API）**：基于 Cool-Admin (Node.js) 模块化架构，提供高性能企业级数据中枢、安全 RBAC 鉴权、微秒级雷达日志追踪及官方插件集成。
 
 #### 1.2 核心用户画像 (Target Personas)
-1. **外贸/跨境出海销售与参展团队**：常年参与海外展会（CES、广交会、迪拜GITEX等），需要跨语种交流，通过手机或 NFC 卡一碰即达，零摩擦留存客户线索。
-2. **跨国商务顾问/自由专家 (Consultants & Creators)**：需要集个人品牌展示、过往案例 (Portfolio)、干货博客文章 (Insights) 与 Calendly 预约排期于一体的移动端官网。
-3. **出海科技企业 / 代理商团队**：需要统一管理数十到数百名商务人员的名片物料，统一品牌形象，并集中追踪团队名片带来的全球线索转化。
+1. **外贸/跨境出海销售与参展团队**：常年参与海外展会（CES、广交会、迪拜 GITEX 等），需要跨语种交流，通过手机或 NFC 实体卡一碰即达，零摩擦留存客户线索。
+2. **跨国商务顾问/自由专家 (Consultants & Creators)**：需要集个人品牌展示、过往案例 (Portfolio)、干货博客文章 (Insights) 与预约排期于一体的移动端便当盒微官网。
+3. **出海科技企业 / 品牌出海团队**：需要统一管理数十到数百名商务人员的名片物料，统一品牌 VI 形象，并集中追踪团队名片带来的全球线索转化与公海池沉淀。
 
 ---
 
@@ -30,33 +30,33 @@ flowchart TD
         SocialLink[LinkedIn / WhatsApp / 邮件签名链接]
     end
 
-    subgraph 访客体验层 [Visitor Experience (Mobile-First)]
-        Portal[Bento 风格移动微官网]
-        i18nDetect[动态地域与多语言检测 (Geo-i18n)]
-        vCardDownload[一键保存手机通讯录 (vCard 3.0/4.0)]
-        AIAgent[名片 AI 智能数字代表 (24/7 Q&A / 留资引导)]
+    subgraph 用户端_uni-app_x [User Client: App & H5]
+        Portal[Bento 风格移动微官网 (H5 秒开)]
+        i18nDetect[动态地域与多语言检测 (Geo-i18n / RTL)]
+        vCardDownload[一键存入手机通讯录 (RFC 6350 vCard)]
+        AIAgent[名片内置 AI 对话顾问 (24/7 Q&A / 留资)]
         CaseHub[精选案例与多媒体展厅]
         ArticleHub[深度文章与公司动态]
-        LeadCapture[一键互换名片 / 预约日历]
+        LeadCapture[一键互换名片 / 快速留资]
+        OwnerMobile[移动名片管家 / 手机触卡绑定 / 实时雷达推送]
     end
 
-    subgraph AI 智能引擎层 [Omni AI Hub]
-        AICreator[AI 一键建站与文案润色]
-        AITranslator[行业级深度多语言翻译]
-        AIInsights[访客轨迹分析与意向度评分]
-        AIPitch[销售跟进话术智能推荐]
+    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 CRM 客户关系中枢 [Mini Lead CRM & Visitor Radar]
-        Radar[访客雷达: 实时足迹/国家/时长]
-        ContactPool[客户关系库 & 智能标签 (Hot/Warm/Cold)]
-        ExportSync[数据导出与第三方 CRM 集成 (HubSpot/Salesforce)]
-    end
-
-    subgraph 管理与硬件层 [SaaS Admin & NFC Fleet]
-        CardEditor[可视化块级搭建器 (Drag & Drop)]
-        NFCMgr[NFC 设备绑定/挂失/批量下发]
-        TeamGov[团队成员管理 / 品牌模板规范]
+    subgraph 管理后台前端_Arco_Design [Admin Web: React]
+        CardEditor[Bento Grid 可视化搭建器]
+        RadarDashboard[全球访客轨迹雷达大屏]
+        CRMPipeline[线索看板与全生命周期追踪]
+        NFCMgr[NFC 设备批量入库与挂失管理]
+        AIStudio[企业 RAG 知识库与人设调优]
+        TeamGov[组织架构 / 品牌 VI 模板管控]
     end
 
     NFC --> Portal
@@ -68,16 +68,12 @@ flowchart TD
     Portal --> CaseHub
     Portal --> ArticleHub
     Portal --> LeadCapture
+    LeadCapture --> CRMModule
+    Portal -.-> CRMModule
 
-    LeadCapture --> Radar
-    Radar --> AIInsights
-    AIInsights --> ContactPool
-    ContactPool --> AIPitch
-
-    AIAgent <--> Omni AI Hub
-    CardEditor <--> AICreator
-    CardEditor <--> AITranslator
-    NFCMgr <--> NFC
+    OwnerMobile <--> Backend API
+    Admin Web <--> Backend API
+    Backend API <--> PluginEco
 ```
 
 ---
@@ -91,119 +87,167 @@ flowchart TD
    - 头像/形象照、姓名、职业头衔、所属企业（带公司 Logo 与官网反向链接）。
    - 个人签名/Slogan、所在地时区（方便跨国客户确认作息）、双语发音语音条（Audio Name Pronunciation）。
    - 一键呼出与快捷方式：WhatsApp、LinkedIn、Email、Telegram、X (Twitter)、WeChat、电话直拨。
-   - **一键存入手机通讯录 (Add to Contacts)**：自动打包标准 `vCard (.vcf)`，内嵌高清头像、公司、备注及微官网 URL。
+   - **一键存入手机通讯录 (Add to Contacts)**：严格遵循 **RFC 6350 (vCard 3.0/4.0)** 国际标准，自动内嵌高清头像、职位、公司、备注及微官网 URL。
 2. **案例展示展厅 (Cases & Portfolio)**：
-   - 支持创建独立案例卡片：案例标题、合作客户、项目周期、痛点及解决方案、指标成效（数据 KPI 高亮卡片）。
+   - 独立案例卡片：案例标题、合作客户、项目周期、痛点及解决方案、指标成效（数据 KPI 高亮卡片）。
    - 多媒体支持：图片轮播、YouTube/Vimeo 视频内嵌、PDF 解决方案白皮书在线预览。
 3. **文章与动态分享 (Insights & Articles)**：
-   - 类似 Substack / Medium 的轻量级移动排版，支持富文本排版。
+   - 极简移动排版，支持富文本排版。
    - 社交分享元数据（OpenGraph）自动生成：转发至 LinkedIn、WhatsApp 时具备吸引人的预览图和摘要卡。
 4. **个性化视觉定制 (Visual Theming)**：
    - 预设商务模板：硅谷科技暗黑 (Tech Dark)、瑞士极简 (Swiss Minimalist)、中东奢华金属 (Gold Luxe)、现代商务蓝 (Corporate Navy)。
-   - 支持自定义 CSS 主题色、字体（Google Fonts 全球字体库）、背景渐变动效与玻璃拟态效果。
+   - 严格遵循设计 Token，支持自定义品牌主色、Google Fonts 全球字体、背景微渐变与精细边框。
 
 #### 3.2 模块二：全球化多语言体系 (Global i18n Engine)
 1. **多语言全链路支持**：
-   - 系统支持主流国际商务语言：英语 (English)、西班牙语 (Español)、阿拉伯语 (العربية，需特别支持 **RTL 镜像排版**)、中文（简/繁）、德语 (Deutsch)、法语 (Français)、日语 (日本語)。
+   - 系统支持主流国际商务语言：英语 (English)、西班牙语 (Español)、阿拉伯语 (العربية，特别支持 **RTL 镜像排版**)、中文（简/繁）、德语 (Deutsch)、法语 (Français)、日语 (日本語)。
 2. **双重多语言实现机制**：
    - **界面级 i18n**：系统按钮、预置文案随访客浏览器首选语言自动本地化。
-   - **内容级多语种独立配置**：名片所有者可针对同一张名片创建不同语言内容分支（例如：英语版侧重全球市场案例，阿语版针对中东能源合作定制）。
+   - **内容级多语种独立配置**：名片所有者可针对同一张名片创建不同语言内容分支。
 3. **地理位置自动路由 (Geo-Routing)**：
    - 访客扫码时，根据 IP 地理位置与浏览器语言自动呈现对应语言版本，右上角常驻全球语言切换器。
 
 #### 3.3 模块三：AI 智能中枢 (Omni AI Suite)
 1. **AI 智能一键生成名片 (AI Card Co-pilot)**：
-   - 输入公司官网 URL、领英主页链接或一段纯文本公司介绍，AI 自动提炼核心优势，并在 10 秒内生成完整的名片布局、案例介绍与代表作品。
+   - 输入公司官网 URL、领英主页链接或一段纯文本公司介绍，AI 自动提炼核心优势并在 10 秒内生成完整的名片布局与代表案例。
 2. **AI 深度商务本地化润色与翻译 (AI Localization)**：
-   - 绝非机械机翻，基于大模型结合目标国家商务习惯进行术语转换与语调调节（Professional 专业稳重 / Direct 严谨直观 / Storytelling 品牌叙事）。
+   - 结合目标国家商务习惯进行专业术语转换与语调调节（Professional 专业稳重 / Direct 严谨直观 / Storytelling 品牌叙事）。
 3. **名片 AI 智能对话代表 (Card-Embedded AI Concierge)**：
-   - 每张名片可唤起浮动 AI 助手窗口。
+   - 名片内置 24/7 悬浮 AI 助手。
    - **知识库灌注 (RAG)**：名片主可上传个人简历、公司 FAQ、产品规格书、价格区间。
-   - 访客可直接向 AI 提问：“你们在中东有哪些成功案例？”、“这位顾问擅长哪类业务？”。
-   - 意图识别与留资：当检测到深度意向时，AI 自动引导：“我可以为您将具体方案发至您的邮箱，方便留下您的称呼和联系方式吗？”。
+   - 意图识别与留资：当检测到深度意向时，AI 自动引导客户留下联系方式并同步至 CRM。
 4. **AI 销售辅助与商机生成 (AI Copilot for Seller)**：
-   - 根据访客行为生成《潜在客户意向度诊断报告》，并自动生成个性化邮件/WhatsApp 开场白跟进建议。
+   - 根据访客行为生成《潜在客户意向度诊断报告》，并自动生成个性化跟进话术建议。
 
 #### 3.4 模块四：轻量级客户关系 CRM 与访客雷达 (Lead CRM & Radar)
 1. **实时访客雷达 (Visitor Radar)**：
-   - 当海外客户在展会或拜访后点开名片，销售 App 收到即时推送（Push Notification）：
+   - 海外客户在展会或拜访后点开名片，销售 App 收到即时推送（Push Notification）：
      *“来自阿联酋迪拜的访客正在浏览您的名片，已停留 3 分钟，正在重点查看‘新能源储能项目案例’！”*
 2. **无摩擦线索沉淀 (Frictionless Lead Exchange)**：
-   - “互换名片”弹窗：访客只需输入姓名、公司、邮箱/WhatsApp，或拍照上传纸质名片（接入 OCR 自动识别结构化入库）。
+   - “互换名片”弹窗：访客快速输入姓名、公司、邮箱/WhatsApp，或拍照上传纸质名片（OCR 识别入库）。
 3. **线索全生命周期看板 (Lead Pipeline)**：
    - 状态流转：新线索 (New) → 已建立联系 (Contacted) → 深度意向 (Hot) → 赢单 (Won) / 沉睡 (Archived)。
    - 客户详细画像：历次访问时间轴、阅读案例偏好、AI 智能跟进备忘录。
 4. **第三方生态打通**：
-   - 支持将线索一键同步至国际主流 CRM（HubSpot、Salesforce、Pipedrive）或 Webhook 转发至飞书/Slack。
+   - 支持将线索一键导出或同步至国际主流 CRM（HubSpot、Salesforce）或 Webhook 转发至飞书/Slack。
 
 #### 3.5 模块五：NFC 电子名片与硬件设备管理 (NFC Fleet Hub)
 1. **硬件兼容性与双协议写入**：
    - 兼容标准 NTAG213 / NTAG215 / NTAG216 芯片卡片、金属卡、竹木环保卡、手机后贴及智能徽章。
-   - **动态云端短链模式 (Dynamic Cloud URL)**：卡片只写入唯一的短链（如 `card.site/nfc/xyz123`），用户在 App 端可随时切换绑定的名片，无需重新烧录硬件。
+   - **动态云端短链模式 (Dynamic Cloud URL)**：卡片只写入唯一的短链，用户在 App 端可随时切换绑定的名片，无需重新烧录硬件。
    - **离线名片备份 (NDEF vCard Fallback)**：支持在弱网/离线场景下直接写入离线联系人数据。
 2. **NFC 设备全生命周期管控**：
-   - 硬件绑定激活：App 端开启 NFC 读取，贴近新卡 0.5 秒完成安全激活。
-   - 场景化卡片模式切换：例如同一张卡，白天“商务展会模式”绑定公司英文官网名片，夜晚“社交模式”绑定个人社交主页。
-   - 安全防篡改与丢失注销：支持一键挂失冻结，防止卡片丢失后商业信息被恶意篡改。
+   - 硬件绑定激活：移动端开启 NFC 读取，贴近新卡 0.5 秒完成安全激活。
+   - 场景化卡片模式切换：例如白天“商务展会模式”，夜晚“社交模式”。
+   - 安全防篡改与丢失注销：支持一键挂失冻结，防止卡片丢失后被滥用。
 
 #### 3.6 模块六：多租户企业版管理 (Enterprise & Team Workspace)
 1. **统一品牌模板库 (Brand Kit)**：
    - 企业管理员统一锁定 Logo、主色调、排版规范，员工仅可填充个人手机号、照片及特定语言简介。
 2. **团队权限与线索公海**：
    - 分级权限：超级管理员 (Owner)、部门主管 (Manager)、销售成员 (Member)。
-   - 员工离职一键转接：离职员工的名片短链与二维码自动重定向至企业公海或新接替人员，确保客户资产不流失。
+   - 员工离职一键转接：离职员工名片短链自动重定向至企业公海或新接替人员，确保客户资产不流失。
 3. **团队获客数据大屏 (Team Analytics)**：
    - 展会期间统计各团队成员名片触达次数、线索获取数量、区域分布排行榜。
 
 ---
 
-### 四、 移动端与交互体验大师设计方案 (App UI/UX Masterclass)
+### 四、 后台管理前端功能与页面清单 (Admin Web - React + Arco Design)
 
-#### 4.1 视觉风格与设计基准 (Design Tone & Aesthetics)
-- **设计哲学**：*“Less friction, Maximum impact”*（零摩擦交互，极致商业张力）。
-- **色彩体系**：
-  - 主色（Brand Primary）：`#0F172A` (深空曜黑) + `#3B82F6` (国际科技蓝)。
-  - 辅色（Accent）：`#10B981` (高意向翡翠绿 - 状态点与活跃标识)、`#F59E0B` (暖金色 - 高端质感微渐变)。
-  - 背景色（Background）：自适应深色模式 (`#0B0F19`) 与浅色模式 (`#F8FAFC`)。
-- **排版字体**：
-  - 英文优先：Inter / SF Pro Display（清晰、几何美感）。
-  - 阿拉伯文适配：IBM Plex Sans Arabic。
-  - 数字与 KPI：JetBrains Mono / DIN Next。
-- **微交互与质感**：
-  - 卡片边框采用 1px 微渐变描边（Subtle Rim Light），模拟 Apple 硬件质感。
-  - 按钮点击包含微震动触觉反馈（Haptic Feedback）。
-  - NFC 刷卡时屏幕呈现动态波纹扩散动效（Holographic Wave Effect）。
-
-#### 4.2 关键页面交互流程图 (User Journey & Wireflows)
+> **开发规范**：基于 React 18 + TypeScript + `@arco-design/web-react` 官方企业级规范开发。全量复用 Arco 官方 `Table`、`Form`、`Modal`、`Drawer` 与图标库，杜绝重复造轮子。
 
 ```
-[访客端路径]
-访客触碰 NFC 卡 / 扫描二维码
-   │
-   ├─► 识别 IP / 语言 ──► 加载微官网 (耗时 < 800ms)
-   │                           │
-   │      ┌────────────────────┴────────────────────┐
-   │      ▼                                         ▼
-   │  [浏览 Bento 卡片]                         [呼起 AI 助手]
-   │  - 查阅多语言案例                           - 询问企业背景/方案
-   │  - 阅读深度文章                             - AI 引导留资
-   │      │                                         │
-   │      └────────────────────┬────────────────────┘
-   │                           ▼
-   └──────────────────► 点击【保存通讯录】或【一键互换】
-                               │
-                               ▼
-                 销售端收到雷达 Push 推送 ──► 线索沉淀进 CRM
+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身份、社媒矩阵、案例卡、文章卡、视频音频、留资表单；<br>**中间画布**：手机端视口实时响应模拟（支持浅/深色、RTL阿语实时镜像）；<br>**右侧属性配置**：模块属性、多语言文案切换、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 智能客服** | `/ai/concierge` | 名片 AI 顾问调优 | 数字人/顾问人设设定（外贸专家、商务代表等）；欢迎语与引导词设置；高频 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` | 多语言 AI 润色中心 | 批量多语言内容润色与地道化翻译；外贸专有名词与行业术语库 (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` | 客户全景画像抽屉 | 客户资料详情；历次名片访问时间轴（时空轨迹）；AI 提炼的客户意向重点；AI 智能生成跟进邮件/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` |
+
 ---
 
-### 五、 商业化订阅模型 (Monetization & Packaging)
+### 五、 用户端与移动端功能页面清单 (User Client - uni-app x: App + H5)
+
+> **开发规范**：基于 DCloud 下一代 **uni-app x (uts 强类型语言 + Vue 3 `<script setup lang="uts">`)** 编写。一套代码兼顾原生 App (Android/iOS) 与 Web/H5 版本。
+> - **访客端（H5 模式）**：零登录秒开，严格遵循 `< 500ms` 首屏预算，全面支持 RTL 镜像与国际化。
+> - **名片主管家（App 原生模式）**：包含原生 NFC 硬件读写、实时雷达 Push 推送与便携 CRM 移动工作台。
+
+```
+user-client/ (uni-app x 目录架构)
+├── src/
+│   ├── pages/
+│   │   ├── portal/              # 访客端微官网页面 (H5 秒开 / 核心触达)
+│   │   ├── owner/               # 名片主移动端 (App & H5)
+│   │   │   ├── card/            # 名片管理与移动极速编辑
+│   │   │   ├── radar/           # 移动访客雷达
+│   │   │   ├── leads/           # 移动 CRM 与商机跟进
+│   │   │   ├── nfc/             # 手机 NFC 贴卡激活与场景管理
+│   │   │   └── profile/         # 个人设置与出海展会战报
+│   │   └── common/              # 公共认证、404 与协议页面
+```
+
+#### 5.1 详细页面清单与功能规划表
+
+| 端分类 | 页面路由路径 | 页面中文名称 | 核心功能点与交互规范 | 推荐复用原生/uni-ui组件 |
+| :--- | :--- | :--- | :--- | :--- |
+| **访客端** | `pages/portal/index` | **Bento 移动微官网主页** | **首屏秒开 (<500ms)**；自适应国际化与阿语 RTL；<br>1. **Hero 身份区**：头像、姓名、头衔、公司、时区、名字语音发音条；<br>2. **快捷动作条**：一键呼叫 WhatsApp / LinkedIn / 电话；<br>3. **常驻悬浮 CTA**：一键保存到手机通讯录 (vCard 3.0/4.0)；<br>4. **Bento 瀑布流**：精选案例展厅、深度文章、服务定价卡；<br>5. **右下角悬浮**：24/7 AI 对话顾问唤起气泡。 | `<view>`, `<scroll-view>`, `<image>`, `<text>`, `uni-popup`, `uni-badge` |
+| **访客端** | `pages/portal/case-detail` | 案例作品集详情页 | 出海案例深度展示；多图画廊轮播；方案成效指标数据卡 (KPI Cards)；嵌入式 PDF 白皮书在线预览；一键咨询按钮。 | `<swiper>`, `<image>`, `<rich-text>`, `<button>`, `uni-icons` |
+| **访客端** | `pages/portal/article-detail`| 深度洞见与文章页 | 移动优化杂志级排版；沉浸式无干扰长文阅读；一键分享至全球社交平台（生成 OpenGraph 网页元标签）。 | `<rich-text>`, `<image>`, `<text>`, `uni-icons` |
+| **访客端** | `pages/portal/ai-chat` | **名片内置 AI 顾问** | 底部抽屉展开；专属名片企业/个人知识库 RAG 问答；多语言输入与语音朗读；智能意向识别；自动弹出留资卡片。 | `<list-view>`, `<list-item>`, `<input>`, `uni-popup`, `<button>` |
+| **访客端** | `pages/portal/exchange` | **无摩擦互换名片弹窗** | 极简留资表单（姓名、企业、WhatsApp/Email、需求留言）；支持拍照/相册上传海外纸质名片（OCR 自动解析填入）。 | `uni-popup`, `uni-forms`, `uni-easyinput`, `<button>` |
+| **名片主** | `pages/owner/card/index` | 移动名片管理中心 | 多张名片水平滑动卡片盒；名片状态标签（已发布/展会中/草稿）；今日浏览数与未读雷达红点；快速分享海报入口。 | `<swiper>`, `<view>`, `uni-badge`, `uni-card`, `<button>` |
+| **名片主** | `pages/owner/card/edit` | 名片极速微调编辑 | 移动端随时更新个人资料、职位、手机号、社交链接；Bento 模块上下排序拖拽；内置 AI 文案一键多语言润色。 | `uni-forms`, `uni-easyinput`, `<switch>`, `<button>`, `uni-popup` |
+| **名片主** | `pages/owner/card/qrcode` | 出海参展分享码海报 | 动态高清二维码生成；展会易拉宝大图模式/手机锁屏壁纸名片生成；一键保存至手机相册或隔空投送。 | `<canvas>`, `<image>`, `<button>`, `uni-icons` |
+| **名片主** | `pages/owner/radar/index` | **移动实时访客雷达** | **原生 60fps 高性能长列表**；实时访客足迹通知流（“迪拜客户正在浏览您的名片”）；足迹明细与停留时长；高意向客户标红。 | `<list-view>`, `<list-item>`, `uni-badge`, `uni-tag` |
+| **名片主** | `pages/owner/leads/index` | 移动 CRM 潜客列表 | 潜客列表按意向度分类（全部 / `Hot` / `Warm` / `Cold`）；一键唤起手机电话或跳转 WhatsApp 聊天；多维度关键词搜索。 | `uni-search-bar`, `<list-view>`, `uni-segmented-control`, `uni-card` |
+| **名片主** | `pages/owner/leads/detail` | 潜客详情与跟进备忘 | 客户全轨迹时间线（第几次扫码、浏览了哪些案例）；AI 自动生成的破冰跟进话术；快捷添加跟进记录备忘。 | `<scroll-view>`, `uni-card`, `<textarea>`, `<button>`, `uni-icons` |
+| **名片主** | `pages/owner/nfc/scan` | **NFC 贴卡激活/写入** | 原生调起手机硬件 NFC 天线；贴近实体卡 0.5 秒写入短链与动态防伪鉴权码；配对成功微震动与全息波纹动效。 | `<view>`, `<image>`, `<button>`, 条件编译 `#ifdef APP` |
+| **名片主** | `pages/owner/nfc/mode` | 硬件场景模式切换 | 实体卡绑定名片快速切换（日间展会模式 ➔ 晚宴社交模式）；离线 vCard 芯片烧录功能；卡片状态查看。 | `uni-card`, `uni-data-checkbox`, `<button>` |
+| **名片主** | `pages/owner/nfc/security`| NFC 安全与挂失 | 实体卡远程一键挂失冻结；卡片防伪 UID 校验；解除绑定与旧卡注销。 | `uni-card`, `uni-popup-dialog`, `<button>` |
+| **名片主** | `pages/owner/profile/index`| 个人账户与出海设置 | 个人信息与多语言切换；消息推送通知开关（雷达实时推送、线索即时提醒）；所属企业与部门信息。 | `uni-list`, `uni-list-item`, `<switch>`, `<button>` |
+| **名片主** | `pages/owner/team/overview`| 展会团队战报简报 | 展会期间团队获客排行榜；个人触达 KPI 与商机转化进度柱状图；优秀案例一键转存至个人名片。 | `uni-card`, `uni-badge`, `<scroll-view>` |
+| **公共层** | `pages/common/login` | 统一身份认证登录 | 国际手机号验证码登录、邮箱 Magic Link 免密登录、Google / Apple ID 一键快捷登录。 | `uni-forms`, `uni-easyinput`, `<button>` |
+
+---
+
+### 六、 商业化订阅模型 (Monetization & Packaging)
 
 | 功能特权 | 免费版 (Free) | 专业版 (Pro) | 商业企业版 (Team/Enterprise) |
 | :--- | :--- | :--- | :--- |
 | **适用人群** | 个人体验、初创独立人 | 出海业务精英、独立顾问 | 外贸销售团队、出海跨国企业 |
-| **名片数量** | 1 张标准名片 | 5 张多语言/多场景名片 | 无限名片（按席位计费） |
+| **名片数量** | 1 张标准名片 | 5 张多语言/多场景名片 | 无限名片（按坐席计费） |
 | **微官网案例/文章** | 限制 2 个案例，无独立文章 | 无限案例，支持富媒体文章 | 统一品牌案例库，团队协同发布 |
 | **多语言支持** | 基础双语 (自动翻译) | 全球 10+ 语言 AI 深度润色 | 全球语言 + 企业专有术语库 |
 | **AI 智能助手** | 基础版 (每月 50 次对话) | 专属知识库 AI (无限对话) | 企业级 RAG 知识库 + 销售线索自动转化 |
@@ -213,20 +257,28 @@ flowchart TD
 
 ---
 
-### 六、 技术实施路径与演进路线 (Roadmap)
+### 七、 落地技术栈与实施演进路线 (Tech Stack & Roadmap)
 
-1. **第一阶段：内核与微官网原型 (MVP)**
-   - 搭建跨平台高响应 Web 渲染端（Next.js / SSR 极速秒开）。
-   - 实现 Bento Grid 拖拽式编辑器，支持基本信息、案例及文章展示。
-   - 完成 vCard 一键下载与基础二维码生成。
-2. **第二阶段：多语言与 NFC 硬件互联**
-   - 接入国际化 i18n 引擎（包含 RTL 布局支持）。
-   - 实现 Web NFC 与移动端 NFC 卡片读写/动态绑定流程。
-3. **第三阶段：AI 智能体与 CRM 访客雷达**
-   - 接入大模型 API，上线 AI 一键建站、智能多语言润色。
-   - 部署名片内置 RAG 智能问答助理。
-   - 建立访客实时追踪（IP 地域定位、停留时长统计）与线索收集看板。
-4. **第四阶段：企业级团队协作与商业化**
-   - 企业多租户架构与团队权限系统。
-   - Stripe 国际信用卡支付及订阅体系接入。
-   - 外部 CRM 生态对接。
+#### 7.1 核心技术选型一览
+- **后端服务 (Backend API)**：**Cool-Admin (Node.js)**（Midway.js + TypeScript + TypeORM，严格模块化设计，复用官方 RBAC 与插件生态）。
+- **管理后台前端 (Admin Web)**：**React 18 + Arco Design**（字节跳动企业级组件库，基于 Arco Pro 架构，全量复用高阶数据组件）。
+- **用户移动端 (User Client: App & H5)**：**uni-app x**（DCloud 下一代 uts 强类型原生框架，一份源码兼容编译为 Android/iOS 原生 App 与 Web/H5 秒开微官网）。
+
+#### 7.2 阶段演进路线图 (Roadmap)
+1. **第一阶段：内核原型与微官网秒开 (MVP)**
+   - 搭建 Cool-Admin 后端基础名片模块 (`modules/card`) 与 RBAC 权限。
+   - 实现 uni-app x 访客端微官网主页 (`pages/portal/index`)，保障 H5 首屏加载 `< 500ms`。
+   - 管理后台基于 Arco Design 实现基础名片列表与 Bento 可视化搭建器。
+   - 完成 RFC 6350 标准 vCard 一键下载与动态二维码生成。
+2. **第二阶段：全球多语言与 NFC 硬件舰队互联**
+   - 接入国际化 i18n 引擎（包含阿拉伯语 RTL 镜像布局）。
+   - 实现 uni-app x 原生 NFC 读写交互与动态短链场景路由切换。
+   - 管理后台上线 NFC 实体卡批次管理与防伪挂失中心。
+3. **第三阶段：AI 智能体与 CRM 访客雷达中枢**
+   - 接入大语言模型与向量知识库 (RAG)，上线名片内嵌 24/7 AI 智能顾问浮层。
+   - 落地实时访客雷达追踪（IP 地理定位、停留时长、意向度评分打标）。
+   - 上线移动端雷达推送与 Arco 管理后台销售商机看板 (Pipeline)。
+4. **第四阶段：企业级多租户协作与商业化出海**
+   - 上线企业品牌规范套件 (Brand Kit) 与离职人员资产无损交接工单。
+   - 接入 Stripe 国际信用卡订阅支付体系与开票系统。
+   - 开放 OpenAPI 与外部 CRM 生态（HubSpot、Salesforce）数据打通。