docs: 发布 HotCRM 的 README 与文档站截图

.gitignore

@@ -5,6 +5,7 @@
 # node_modules/@objectstack`: checkout restores a dangling symlink and pnpm
 # cannot mkdir through it.
 node_modules
+apps/docs/public/screenshots/
 dist/
 .env
 *.log

README.md

@@ -27,19 +27,19 @@ HotCRM is a complete, opinionated CRM built as the **first official application*
 
 ## 📸 Screenshots
 
-| Sales pipeline (kanban) | All opportunities (table) |
+| Qualified lead workspace | Sales pipeline |
 |---|---|
-| ![Sales pipeline](assets/screenshots/01-sales-pipeline.png) | ![All opportunities](assets/screenshots/03-opportunities-list.png) |
+| ![Qualified lead workspace](assets/screenshots/hotcrm/lead-detail/en.png) | ![Sales pipeline](assets/screenshots/hotcrm/sales-pipeline/en.png) |
 
-| Accounts (cards) | Service cases (kanban) |
+| Strategic account 360 | Quote lifecycle |
 |---|---|
-| ![Accounts](assets/screenshots/02-accounts-list.png) | ![Service cases](assets/screenshots/05-service-cases.png) |
+| ![Strategic account 360](assets/screenshots/hotcrm/customer-360/en.png) | ![Quote lifecycle](assets/screenshots/hotcrm/quote-pipeline/en.png) |
 
-| Executive dashboard |
-|---|
-| ![Executive dashboard](assets/screenshots/04-executive-dashboard.png) |
+| Campaign lifecycle and ROI | Sales performance dashboard |
+|---|---|
+| ![Campaign lifecycle and ROI](assets/screenshots/hotcrm/campaign-detail/en.png) | ![Sales performance dashboard](assets/screenshots/hotcrm/sales-dashboard/en.jpg) |
 
-> Screenshots show HotCRM running in English with seeded data. Bundled translations: en, zh-CN, es-ES, ja-JP.
+> The current, locale-specific screenshots live in `assets/screenshots/hotcrm/<screen>/<locale>.png`, with a colocated `meta.yaml` for purpose, alt text, capture context, and lifecycle. This README uses English; the documentation site also publishes `zh-Hans` variants. Bundled runtime translations: en, zh-CN, es-ES, ja-JP.
 
 ---
 

apps/docs/package.json

@@ -4,10 +4,11 @@
   "private": true,
   "packageManager": "pnpm@10.33.0",
   "scripts": {
-    "build": "fumadocs-mdx && next build",
-    "dev": "next dev",
+    "sync:screenshots": "node ../../scripts/sync-docs-screenshots.mjs",
+    "build": "pnpm run sync:screenshots && fumadocs-mdx && next build",
+    "dev": "pnpm run sync:screenshots && next dev",
     "start": "next start",
-    "types:check": "fumadocs-mdx && next typegen && tsc --noEmit"
+    "types:check": "pnpm run sync:screenshots && fumadocs-mdx && next typegen && tsc --noEmit"
   },
   "dependencies": {
     "@orama/tokenizers": "3.1.18",

apps/docs/proxy.ts

@@ -7,5 +7,5 @@ export default createI18nMiddleware(i18n);
 
 export const config = {
   // Ignore Next internals, API routes, OG/LLM route handlers, and static assets.
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|llms|og).*)'],
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|llms|og|screenshots).*)'],
 };

assets/screenshots/README.md

@@ -1,13 +1,43 @@
-# Screenshots
+# HotCRM screenshots
 
-Marketplace screenshots for HotCRM. Captured with Playwright (1280×577 viewport, `locale: en-US`) against a live `pnpm dev` instance using the bundled seed data. Captured in English (the default locale); zh-CN, es-ES, and ja-JP bundles are also included in the app.
+`assets/screenshots/hotcrm/` is the repository-owned source of truth for
+published HotCRM product screenshots. README and documentation-site images must
+reference a screen from this directory, never an ad hoc capture.
 
-| File | Page | Highlights |
-|---|---|---|
-| `01-sales-pipeline.png` | Opportunities kanban (`crm_opportunity/view/pipeline_kanban`) | Deals across stages, account + amount + close date per card |
-| `02-accounts-list.png` | Account cards view (`crm_account/view/account_gallery`) | Industry + annual revenue + employees + contact info |
-| `03-opportunities-list.png` | All opportunities table view (`crm_opportunity/view/all_opportunities`) | Sortable list with stage badges and probability bars |
-| `04-executive-dashboard.png` | Executive dashboard (`dashboard/executive_dashboard`) | Revenue / accounts / contacts / leads KPIs + revenue trend and industry charts |
-| `05-service-cases.png` | Service cases kanban (`crm_case/view/case_workflow`) | Cases by status (New / In Progress / Waiting on Customer) with priority badges |
+Each screen is a self-contained directory:
 
-To recapture: `pnpm dev` → log in as the seeded dev admin → open each URL under `/_console/apps/app.objectstack.hotcrm/` in a 1280×577 en-US browser → screenshot to the matching file.
+```text
+hotcrm/<screen>/
+├── meta.yaml       # ID, capture context, title, alt text, purpose, lifecycle
+├── en.png|jpg      # English image
+└── zh-Hans.png|jpg # Simplified Chinese image
+```
+
+`meta.yaml` is deliberately colocated with the two locale files so a visual,
+its accessible description, its intended story, and its capture conditions
+evolve together. `status: published` means the asset may be used in public
+README and docs content.
+
+## Documentation site
+
+The docs site consumes generated copies under
+`apps/docs/public/screenshots/hotcrm/`; that output is ignored by Git. Run:
+
+```bash
+pnpm -C apps/docs sync:screenshots
+```
+
+The `dev`, `types:check`, and `build` scripts run this sync automatically.
+Use public paths such as `/screenshots/hotcrm/lead-detail/en.png` from MDX.
+
+## Adding or refreshing a screen
+
+1. Capture the same reviewed product state in `en` and `zh-Hans`.
+2. Replace both locale files and update their colocated `meta.yaml` in one
+   change. Keep the real file extension (`.jpg` for JPEG, `.png` for PNG).
+3. Run the sync command and verify both documentation locales in a browser.
+4. Update the README or docs page that tells the corresponding product story.
+
+The numbered files at this directory's root are retained as historical capture
+sets. New product documentation should use the semantic `hotcrm/<screen>/`
+directories above.

assets/screenshots/hotcrm/campaign-detail/meta.yaml

@@ -0,0 +1,23 @@
+id: hotcrm-campaign-detail
+kind: screenshot
+scope: hotcrm
+category: hotcrm
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  theme: dark
+  viewport: 1440x1024
+  dataset: curated-campaign-schedule
+locales:
+  en: en.png
+  zh-Hans: zh-Hans.png
+title:
+  en: Campaign lifecycle and ROI
+  zh-Hans: 营销活动生命周期与投资回报率
+alt:
+  en: A campaign record with lifecycle stage, schedule, budget, revenue, and ROI.
+  zh-Hans: 包含生命周期阶段、日程、预算、收入和投资回报率的营销活动记录。
+purpose:
+  en: Tell the HotCRM story of connecting campaign execution to commercial outcomes.
+  zh-Hans: 讲述 HotCRM 将营销活动执行与商业结果相连的故事。

assets/screenshots/hotcrm/customer-360/meta.yaml

@@ -0,0 +1,22 @@
+id: hotcrm-customer-360
+kind: screenshot
+scope: hotcrm
+category: hotcrm
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  theme: dark
+  viewport: 1440x1024
+locales:
+  en: en.png
+  zh-Hans: zh-Hans.png
+title:
+  en: Strategic account 360
+  zh-Hans: 战略客户 360 视图
+alt:
+  en: An enterprise customer record with relationship context, current state, and risks.
+  zh-Hans: 包含关系背景、当前状态和风险信息的企业客户记录。
+purpose:
+  en: Tell the HotCRM story of maintaining customer context alongside operational data.
+  zh-Hans: 讲述 HotCRM 将客户背景与运营数据放在一起管理的故事。

assets/screenshots/hotcrm/large-deal-approval/meta.yaml

@@ -0,0 +1,26 @@
+id: hotcrm-large-deal-approval
+kind: screenshot
+scope: hotcrm
+category: automation
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  surface: Studio flow designer
+  theme: light
+  viewport: 1600x900
+  aspectRatio: '16:9'
+  dataset: curated-opportunities
+  selectedNode: Sales Director Sign-off
+locales:
+  en: en.png
+  zh-Hans: zh-Hans.png
+title:
+  en: Large-deal approval flow
+  zh-Hans: 大额商机审批流程
+alt:
+  en: A visual approval flow with a selected director sign-off node and its configuration panel.
+  zh-Hans: 选中销售总监审批节点并展示其配置面板的可视化审批流程。
+purpose:
+  en: Show visual automation, branching, approvals, and node-level configuration.
+  zh-Hans: 展示可视化自动化、分支、审批及节点级配置。

assets/screenshots/hotcrm/lead-detail/meta.yaml

@@ -0,0 +1,22 @@
+id: hotcrm-lead-detail
+kind: screenshot
+scope: hotcrm
+category: hotcrm
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  theme: dark
+  viewport: 1440x1024
+locales:
+  en: en.png
+  zh-Hans: zh-Hans.png
+title:
+  en: Qualified lead workspace
+  zh-Hans: 已确认线索工作区
+alt:
+  en: A qualified lead record with lead score, source, conversion, and follow-up actions.
+  zh-Hans: 包含线索评分、来源、转化和跟进操作的已确认线索记录。
+purpose:
+  en: Show the transition from lead qualification to sales execution.
+  zh-Hans: 展示从线索确认到销售执行的衔接。

assets/screenshots/hotcrm/quote-pipeline/meta.yaml

@@ -0,0 +1,22 @@
+id: hotcrm-quote-pipeline
+kind: screenshot
+scope: hotcrm
+category: hotcrm
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  theme: dark
+  viewport: 1440x1024
+locales:
+  en: en.png
+  zh-Hans: zh-Hans.png
+title:
+  en: Quote lifecycle pipeline
+  zh-Hans: 报价生命周期流水线
+alt:
+  en: A kanban view of quotes moving through draft, review, presentation, acceptance, and rejection.
+  zh-Hans: 展示报价从草稿、审核、提交到接受或拒绝的看板视图。
+purpose:
+  en: Show commercial process visibility from draft to decision.
+  zh-Hans: 展示从草稿到决策的商业流程可见性。

assets/screenshots/hotcrm/sales-dashboard/meta.yaml

@@ -0,0 +1,22 @@
+id: hotcrm-sales-dashboard
+kind: screenshot
+scope: hotcrm
+category: analytics
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  theme: light
+  viewport: 1408x964
+locales:
+  en: en.jpg
+  zh-Hans: zh-Hans.jpg
+title:
+  en: Sales performance dashboard
+  zh-Hans: 销售业绩仪表盘
+alt:
+  en: A sales dashboard with KPI cards, a pipeline funnel, and revenue trends.
+  zh-Hans: 包含 KPI 卡片、销售漏斗和收入趋势的销售仪表盘。
+purpose:
+  en: Show a unified analytical workspace for operating metrics and pipeline health.
+  zh-Hans: 展示用于运营指标和销售管道健康度的统一分析工作区。

assets/screenshots/hotcrm/sales-pipeline/meta.yaml

@@ -0,0 +1,24 @@
+id: hotcrm-sales-pipeline
+kind: screenshot
+scope: hotcrm
+category: ui
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  theme: light
+  viewport: 1600x900
+  aspectRatio: '16:9'
+  dataset: curated-opportunities
+locales:
+  en: en.png
+  zh-Hans: zh-Hans.png
+title:
+  en: Sales pipeline kanban
+  zh-Hans: 销售流水线看板
+alt:
+  en: An opportunity kanban board organized by sales stages.
+  zh-Hans: 按销售阶段组织的商机看板。
+purpose:
+  en: Show stage-based work management and a visible sales process.
+  zh-Hans: 展示按阶段管理工作和可视化销售流程。

assets/screenshots/hotcrm/sales-representative-permissions/meta.yaml

@@ -0,0 +1,25 @@
+id: hotcrm-sales-representative-permissions
+kind: screenshot
+scope: hotcrm
+category: governance
+status: published
+captured: '2026-08-01'
+capture:
+  application: HotCRM
+  surface: Studio permission matrix
+  theme: light
+  viewport: 1600x900
+  aspectRatio: '16:9'
+  dataset: curated-crm-schema
+locales:
+  en: en.png
+  zh-Hans: zh-Hans.png
+title:
+  en: Sales representative permission matrix
+  zh-Hans: 销售代表权限矩阵
+alt:
+  en: Object-level CRUD permissions and record-sharing defaults for a sales representative role.
+  zh-Hans: 销售代表角色的对象级 CRUD 权限与记录共享默认策略。
+purpose:
+  en: Show role-based access, object permissions, field overrides, and sharing governance.
+  zh-Hans: 展示基于角色的访问控制、对象权限、字段覆盖与共享治理。

content/docs/getting-started/introduction.mdx

@@ -22,6 +22,10 @@ The platform spans the four classic CRM pillars, plus an AI layer that knows you
 
 Everything is **wired together** out of the box — leads convert into opportunities, opportunities link to quotes and contracts, contracts trigger renewals, support cases see the customer's full history.
 
+![Strategic account 360 view](/screenshots/hotcrm/customer-360/en.png)
+
+_Keep relationship context, open opportunities, contracts, and risks together on the customer record._
+
 ## Who HotCRM is for
 
 - **Sales reps and managers** — for working leads, deals, and forecasts.

content/docs/getting-started/introduction.zh-Hans.mdx

@@ -22,6 +22,10 @@ description: HotCRM 是什么、面向谁，以及开箱即用包含哪些内容
 
 一切开箱即用地**串联在一起** —— 线索转化为商机，商机关联到报价单和合同，合同触发续约，支持案例能看到客户的完整历史。
 
+![战略客户 360 视图](/screenshots/hotcrm/customer-360/zh-Hans.png)
+
+_将关系背景、进行中的商机、合同和风险集中在同一张客户记录中。_
+
 ## HotCRM 面向谁
 
 - **销售代表和经理** —— 用于处理线索、交易和预测。

content/docs/getting-started/quick-tour.mdx

@@ -21,6 +21,8 @@ Use it as your daily start-of-day landing page. If you're a manager, you also se
 
 ➜ Learn more: [Dashboards](/docs/analytics/dashboards)
 
+![Sales performance dashboard](/screenshots/hotcrm/sales-dashboard/en.jpg)
+
 ## 2. The app launcher
 
 Click the **app launcher** (top-left grid icon) to switch between apps:
@@ -53,6 +55,8 @@ A **lead** is someone who's expressed interest but hasn't been qualified yet.
 
 ➜ Learn more: [Leads](/docs/sales/leads)
 
+![Qualified lead workspace](/screenshots/hotcrm/lead-detail/en.png)
+
 ## 4. Your first opportunity
 
 An **opportunity** is a real deal you're working.
@@ -66,6 +70,8 @@ An **opportunity** is a real deal you're working.
 
 ➜ Learn more: [Opportunities](/docs/sales/opportunities)
 
+![Sales pipeline kanban](/screenshots/hotcrm/sales-pipeline/en.png)
+
 ## 5. A service case
 
 A **case** is a customer issue.

content/docs/getting-started/quick-tour.zh-Hans.mdx

@@ -21,6 +21,8 @@ description: HotCRM 的 5 分钟演练 —— 主页、你的第一条线索、
 
 ➜ 了解更多：[仪表盘](/zh-Hans/docs/analytics/dashboards)
 
+![销售业绩仪表盘](/screenshots/hotcrm/sales-dashboard/zh-Hans.jpg)
+
 ## 2. 应用启动器
 
 点击**应用启动器**（左上角网格图标）以在应用之间切换：
@@ -53,6 +55,8 @@ description: HotCRM 的 5 分钟演练 —— 主页、你的第一条线索、
 
 ➜ 了解更多：[线索](/zh-Hans/docs/sales/leads)
 
+![已确认线索工作区](/screenshots/hotcrm/lead-detail/zh-Hans.png)
+
 ## 4. 你的第一个商机
 
 **商机**是你正在处理的真实交易。
@@ -66,6 +70,8 @@ description: HotCRM 的 5 分钟演练 —— 主页、你的第一条线索、
 
 ➜ 了解更多：[商机](/zh-Hans/docs/sales/opportunities)
 
+![销售管道看板](/screenshots/hotcrm/sales-pipeline/zh-Hans.png)
+
 ## 5. 一个服务案例
 
 **案例**是一个客户问题。