2nd version

SRS_需求规格说明书.md

@@ -3,16 +3,17 @@
 ## 1. 引言
 
 ### 1.1 目的
-本文档旨在定义奥迪中国小红书小程序门户系统的功能性和非功能性需求，为系统设计、开发、测试和验收提供基准。本系统将支持奥迪中国在小红书平台展示汽车产品信息并收集潜在客户联系信息。
+本文档旨在定义奥迪中国小红书小程序门户系统的功能性和非功能性需求，为系统设计、开发、测试和验收提供基准。本系统将支持奥迪中国在小红书平台展示汽车产品信息，并将用户留资信息直接提交至企业 CRM 系统。
 
 ### 1.2 范围
 本系统范围包括：
 - 小红书小程序门户前端应用（基于H5技术）
 - 内容管理系统（CMS）平台
 - 私有云环境部署
+- 约70个页面的内容建设（基于甲方设计稿）
 - 三年期运维服务（2026-2028年）
 
-系统将允许奥迪市场部门管理展示内容，用户可浏览汽车型号信息并提交联系信息表单。
+系统将允许奥迪市场部门管理展示内容，用户可浏览汽车型号信息并提交联系信息表单。表单数据将直接进入企业 CRM 系统，当前平台不保存潜客个人信息。
 
 ### 1.3 定义、首字母缩写词和缩略语
 
@@ -27,131 +28,161 @@
 ## 2. 总体描述
 
 ### 2.1 产品愿景
-建立一个安全、可靠、易于维护的小红书小程序门户，使奥迪中国能够在小红书平台有效展示产品信息，收集潜在客户数据，并与官方渠道保持内容一致性。
+建立一个安全、可靠、易于维护、便于迁移的小红书小程序门户，使奥迪中国能够在小红书平台高效展示产品信息，通过成熟平台完成内容运营与发布，并将用户留资直接提交至企业 CRM 系统。
 
 ### 2.2 产品功能
-- **内容管理**：通过第三方平台管理小红书小程序显示内容
+- **内容管理**：通过成熟的第三方 CMS 平台管理小红书小程序显示内容
-- **用户交互**：用户可浏览汽车型号信息并提交联系信息
+- **页面建设**：基于甲方设计稿建设约 70 个页面，采用模板化方式提升交付效率
-- **API集成**：连接小红书小程序后端
+- **内容预览与发布**：支持预览、发布及版本回溯，审批和定时发布为优选能力
-- **运维监控**：确保系统高可用性和性能
+- **用户交互**：用户可浏览车型信息并提交联系信息，数据直接进入企业 CRM
-- **定期更新**：每周同步官方渠道的车型图片
+- **环境与账号管理**：在专有云/私有云环境部署，并提供后台账号与权限管理
+- **内容迁移**：支持内容、素材和配置的全量导出，为后续迁移至其他平台预留条件
+- **运营维护**：每周人工巡检 JV 官网并同步素材，保障平台可用性和内容持续更新
 
 ### 2.3 用户特征
 | 用户角色 | 描述 | 技术水平 |
 |---------|------|---------|
-| 奥迪业务/市场负责人 | 负责内容方向决策、审核与月度运营结果确认 | 业务管理与内容审核能力 |
+| 奥迪业务/市场负责人 | 负责内容方向决策、关键内容审核、月度运营结果确认 | 业务管理与内容审核能力 |
-| 内容运营专员（供应商/联合团队） | 负责内容制作发布与每周素材同步 | 基础内容运营与系统操作能力 |
+| 内容运营专员（供应商/联合团队） | 负责页面搭建、内容制作、预览发布及每周人工素材同步 | 基础内容运营与系统操作能力 |
-| 供应商项目与运维负责人 | 负责项目推进、风险管理、监控与故障响应 | 专业项目管理与运维技术背景 |
+| 供应商项目与运维负责人 | 负责项目推进、风险管理、私有云环境维护、账号权限与迁移准备 | 专业项目管理与运维技术背景 |
 | 终端用户（小红书用户） | 浏览车型信息并提交联系表单 | 普通智能手机用户 |
 
 ### 2.4 约束
-- 必须部署在安全的私有云环境中
+- 必须部署在安全的私有云或专有云环境中
 - 必须符合小红书平台技术规范
-- 必须支持与奥迪官方渠道的内容同步
+- 用户留资必须直接提交到企业 CRM 系统，当前平台不得保存潜客个人信息
+- 必须支持与奥迪官方渠道内容保持一致，但本期以人工周更为主，不依赖自动接口同步
 - 必须满足个人信息保护法规要求
+- 当前范围不包含多品牌内容隔离，仅保留未来扩展可能
 
 ### 2.5 假设和依赖关系
 - 奥迪中国已获得小红书企业专业号认证和外链权限
-- 小红书平台API保持稳定
+- 企业 CRM 系统可提供可调用的留资接收接口或等效接入机制
-- 奥迪官方渠道提供标准化的车型数据接口
+- JV 官网内容可供运营团队每周人工巡检与更新使用
+- 甲方将提供约 70 个页面所需的设计稿、文案和素材指引
+- 私有云/专有云资源申请、账号开通和网络策略可按项目计划完成
+
+### 2.6 数据边界与实施拆分
+- 平台保存的内容包括页面内容、媒体素材、配置数据、操作日志和发布记录
+- 平台不保存终端用户留资数据；用户表单提交后数据直接进入企业 CRM
+- 平台应支持内容、素材和配置的全量导出，以支持后续迁移到其他平台
+- 项目实施与报价按以下三部分拆分：
+  - Part 1：平台与环境（今年 7 月到明年 6 月）
+  - Part 2：约 70 个页面的搭建（基于设计稿）
+  - Part 3：日常运维与每周人工同步
 
 ## 3. 具体需求
 
 ### 3.1 功能需求
 
 #### 3.1.1 平台准备
-**FR-001**: 系统应提供一个第三方内容管理平台，允许授权用户编辑小红书小程序显示内容。
+**FR-001**: 系统应提供一个成熟的第三方内容管理平台，允许授权用户编辑小红书小程序显示内容。
 
-**FR-002**: 内容管理平台应支持以下内容类型：
+**FR-002**: 内容管理平台应支持以下内容能力：
 - 文本内容编辑
 - 图片上传和管理
-- 表单字段配置
+- 页面组件或模板配置
 - 页面布局调整
+- 预览能力
 
-**FR-003**: 系统应提供API接口，将内容管理平台与小红书小程序前端连接。
+**FR-003**: 系统应支持后台账号创建、角色分配与权限控制。
+
+**FR-004**: 系统应提供接口或发布机制，将内容管理平台与小红书小程序前端连接。
+
+**FR-005**: 供应商应提供可用于评标演示的 Demo，覆盖关键内容管理和前台浏览留资流程。
 
 #### 3.1.2 环境准备
-**FR-004**: 系统必须部署在安全的私有云环境中。
+**FR-006**: 系统必须部署在安全的私有云或专有云环境中。
 
-**FR-005**: 云环境应包含以下组件：
+**FR-007**: 云环境应包含以下组件：
 - Web服务器
 - 应用服务器
-- 数据库服务器
+- 内容与配置数据库
+- 素材存储
 - 监控和日志系统
 
-**FR-006**: 系统应实施网络安全措施，包括防火墙、入侵检测和数据加密。
+**FR-008**: 系统应实施网络安全措施，包括防火墙、访问控制、数据传输加密和日志审计。
 
-#### 3.1.3 门户维护
+**FR-009**: 系统应支持平台登录账号的开通、停用和权限维护。
-**FR-007**: 系统应保证99.5%的正常运行时间。
 
-**FR-008**: 系统应实现自动备份机制，保留源环境至少1个月。
+#### 3.1.3 门户维护与迁移准备
+**FR-010**: 系统应保证 99.5% 的正常运行时间。
 
-**FR-009**: 系统应具备性能监控和优化能力，防止性能下降。
+**FR-011**: 系统应实现自动备份机制，保留内容与配置源环境至少 1 个月。
 
-**FR-010**: 系统应建立集成测试和故障排除机制。
+**FR-012**: 系统应具备性能监控和优化能力，防止性能下降。
 
-**FR-011**: 系统应准备回滚和事件响应程序。
+**FR-013**: 系统应建立集成测试、故障排除、回滚和事件响应机制。
 
-#### 3.1.4 内容运营
+**FR-014**: 系统应支持内容、素材和关键配置数据的全量导出，以便未来迁移到 Audi 其他平台或第三方平台。
-**FR-012**: 系统应支持每周定期更新内容，与奥迪官方渠道的车型图片保持同步。
 
-**FR-013**: 内容更新应支持以下操作：
+#### 3.1.4 内容建设与运营
+**FR-015**: 系统应支持基于甲方设计稿搭建约 70 个页面，采用可复用的模板和内容模型提高交付效率。
+
+**FR-016**: 供应商应每周人工巡检 JV 官网内容，并根据巡检结果更新小程序中的车型图片和相关内容。
+
+**FR-017**: 内容更新应支持以下操作：
 - 批量图片替换
 - 文案更新
-- 新车型添加
+- 新页面或新车型页面添加
-- 旧车型下架
+- 旧页面或旧车型页面下架
+- 发布前预览
 
-**FR-014**: 系统应记录所有内容变更历史，支持版本回溯。
+**FR-018**: 系统应记录所有内容变更历史，支持版本回溯。
 
-#### 3.1.5 项目管理
+**FR-019**: 系统宜支持草稿审批和定时发布；若所选成熟平台不具备该能力，不应作为本期上线阻断条件。
-**FR-015**: 系统供应商应提供日常账户服务、时间线管理、风险管理、质量控制和会议材料准备。
 
-**FR-016**: 供应商应每周举行进度更新会议，解决出现的问题。
+#### 3.1.5 项目管理与服务交付
+**FR-020**: 系统供应商应提供日常账户服务、时间线管理、风险管理、质量控制和会议材料准备。
 
-**FR-017**: 供应商应每月提供运营报告，并与奥迪中国进行审查。
+**FR-021**: 供应商应每周举行进度更新会议，解决出现的问题。
 
-**FR-018**: 对于关键/高优先级事件，供应商应提供专门的事件报告。
+**FR-022**: 供应商应每月提供运营报告，并与奥迪中国进行审查。
+
+**FR-023**: 对于关键/高优先级事件，供应商应提供专门的事件报告。
+
+**FR-024**: 项目实施与报价应明确拆分为平台与环境、约 70 个页面搭建、日常运维与每周同步三部分。
 
 #### 3.1.6 运维支持与值班
-**FR-019**: 系统应提供关键/高优先级事件支持机制：工作日服务时间 08:30-17:30，非服务时间 17:30-08:30 待命支持。
+**FR-025**: 系统应提供关键/高优先级事件支持机制：工作日服务时间 08:30-17:30，非服务时间 17:30-08:30 待命支持。
 
-**FR-020**: 系统应在周末及法定节假日提供关键/高优先级事件 7x24 待命支持。
+**FR-026**: 系统应在周末及法定节假日提供关键/高优先级事件 7x24 待命支持。
 
 ### 3.2 非功能需求
 
 #### 3.2.1 性能需求
-**NFR-001**: 系统响应时间不应超过3秒（在正常网络条件下）。
+**NFR-001**: 小程序前端关键页面响应时间不应超过 3 秒（在正常网络条件下）。
 
-**NFR-002**: 系统应支持同时处理1000个并发用户。
+**NFR-002**: 系统应支持同时处理 1000 个并发用户浏览和留资提交请求。
 
 #### 3.2.2 安全需求
 **NFR-003**: 系统必须实施用户身份验证和授权机制。
 
-**NFR-004**: 所有敏感数据（如用户联系信息）必须加密存储。
+**NFR-004**: 用户留资数据在传输过程中必须加密，并直接提交至企业 CRM；当前平台不得持久化存储潜客个人信息。
 
 **NFR-005**: 系统必须符合《个人信息保护法》要求，明确告知用户数据用途并获得同意。
 
 #### 3.2.3 可用性需求
-**NFR-006**: 内容管理界面应直观易用，新用户可在30分钟内掌握基本操作。
+**NFR-006**: 内容管理界面应直观易用，新用户可在 30 分钟内掌握基本操作。
 
 **NFR-007**: 系统应提供详细的帮助文档和操作指南。
 
 #### 3.2.4 可维护性需求
 **NFR-008**: 系统应采用模块化设计，便于功能扩展和维护。
 
-**NFR-009**: 代码应有充分注释，遵循编码规范。
+**NFR-009**: 系统应保留必要的操作日志、发布记录和维护文档，便于运维和交接。
 
 #### 3.2.5 可移植性需求
 **NFR-010**: 系统应使用标准开放平台接口，支持与其他系统进行数据交换。
 
-**NFR-011**: 内容应能轻松迁移到其他平台，避免供应商锁定。
+**NFR-011**: 内容、素材和配置应能轻松导出并迁移到其他平台，避免供应商锁定。
 
 #### 3.2.6 供应商能力与交接需求
 **NFR-012**: 供应商团队应具备小红书小程序集成、应用、云、安全与数据相关实践经验。
 
 **NFR-013**: 项目管理核心角色应具备 PMP 或同等级项目管理资质。
 
-**NFR-014**: 供应商应说明对现有技术平台、基础设施和 IT 能力的复用方案，降低重复建设成本。
+**NFR-014**: 供应商应说明对现有技术平台、基础设施和 IT 能力的复用方案，并优先采用成熟现成平台降低重复建设成本。
 
 **NFR-015**: 供应商应保证项目资源充足，关键岗位需设置备份人选以确保按期上线。
 
@@ -162,20 +193,22 @@
 #### 3.3.1 用户接口
 **UI-001**: 小红书小程序前端应采用响应式设计，适配各种移动设备屏幕。
 
-**UI-002**: 内容管理后台应提供清晰的导航和操作反馈。
+**UI-002**: 内容管理后台应提供清晰的导航、预览和操作反馈。
 
 #### 3.3.2 硬件接口
 无特殊硬件接口需求。
 
 #### 3.3.3 软件接口
-**SI-001**: 系统应提供RESTful API接口，用于内容同步。
+**SI-001**: 系统应提供 CMS 与小程序前端之间的内容发布或内容获取接口。
 
-**SI-002**: 系统应支持与奥迪官方渠道的数据接口对接。
+**SI-002**: 小程序留资流程应支持直接对接企业 CRM 接收接口或等效机制，平台不保留留资数据副本。
+
+**SI-003**: 与 JV 官网的内容更新流程以人工巡检和人工同步为主，本期不将自动对接官网接口作为前置条件。
 
 #### 3.3.4 通信接口
-**CI-001**: 所有外部通信必须使用HTTPS协议。
+**CI-001**: 所有外部通信必须使用 HTTPS 协议。
 
-**CI-002**: API调用应实施速率限制和认证机制。
+**CI-002**: 内容接口和 CRM 提交接口应实施认证、速率限制或等效安全控制机制。
 
 ## 4. 业务流程
 
@@ -183,18 +216,17 @@
 
 ```mermaid
 graph TD
-  A[内容运营专员登录CMS] --> B{操作类型}
+  A[内容运营专员登录CMS] --> B[按设计稿新建或维护页面]
-  B -->|新增内容| C[创建新页面/模块]
+  B --> C[上传素材并编辑图文内容]
-  B -->|编辑内容| D[修改现有内容]
+  C --> D[预览页面效果]
-  B -->|删除内容| E[标记内容为删除]
+  D --> E{是否启用审批流程}
-  C --> F[上传图片/输入文案]
+  E -->|是| F[提交业务/市场负责人审核]
-  D --> F
+  E -->|否| G[直接发布]
-  F --> G[预览内容并提交审核]
+  F --> H{审核通过?}
-  G --> H[奥迪业务/市场负责人审核]
+  H -->|是| G
-  H --> I{审核通过?}
+  H -->|否| I[返回内容运营专员修订]
-  I -->|是| J[发布到生产环境]
+  G --> J[发布到小红书小程序]
-  I -->|否| K[返回内容运营专员修订]
+  J --> K[记录版本与操作日志]
-  J --> L[同步到小红书小程序]
 ```
 
 ### 4.2 用户交互流程
@@ -210,22 +242,22 @@ graph TD
     G --> H{验证通过?}
     H -->|是| I[显示感谢页面]
     H -->|否| J[显示错误信息]
-    I --> K[数据存储到数据库]
+  I --> K[数据直接提交至企业CRM]
 ```
 
 ### 4.3 运维管理流程
 
 ```mermaid
 graph TD
-    A[系统监控] --> B{异常检测?}
+  A[内容运营专员每周巡检JV官网] --> B[识别素材或页面变更]
-    B -->|是| C[触发告警]
+  B --> C[在CMS中更新对应内容]
-    C --> D[运维团队响应]
+  C --> D[预览并发布]
-    D --> E{问题级别}
+  D --> E[项目与运维负责人记录周更结果]
-    E -->|关键/高| F[立即处理 + 生成事件报告]
+  E --> F[系统监控与备份巡检]
-    E -->|中/低| G[记录并安排处理]
+  F --> G{发现异常?}
-    B -->|否| H[正常运行]
+  G -->|是| H[触发告警并组织响应]
-    H --> I[定期备份]
+  G -->|否| I[继续正常运营]
-    I --> J[月度报告生成]
+  H --> J[输出事件报告或月报输入]
 ```
 
 ## 5. 术语表
@@ -237,14 +269,15 @@ graph TD
 | 私有云 | Private Cloud | 专为单一组织构建的云计算环境，提供更高的安全性和控制 |
 | 外链 | External Link | 从小红书笔记指向外部网站的链接 |
 | 运维 | Operations and Maintenance | 系统上线后的日常监控、维护和支持活动 |
+| 企业 CRM | Enterprise CRM | 用于接收和管理用户留资信息的企业客户关系管理系统 |
 | 表单 | Form | 用于收集用户输入信息的网页元素集合 |
 | API集成 | API Integration | 不同软件系统之间通过应用程序编程接口进行数据交换和功能调用 |
-| 内容同步 | Content Synchronization | 保持多个系统或平台之间内容一致性的过程 |
+| 内容同步 | Content Synchronization | 保持多个系统或平台之间内容一致性的过程，本期以人工周更为主 |
 
 ## 附录A: 异常流程
 
 ### A.1 内容更新异常流程
-1. **异常情况**: 官方渠道图片无法获取
+1. **异常情况**: JV 官网图片或文案无法获取
    - **处理流程**: 
      - 系统记录错误日志
      - 发送告警通知给运维团队
@@ -266,12 +299,12 @@ graph TD
      - 保留用户已输入的正确信息
      - 允许用户修正后重新提交
 
-2. **异常情况**: 数据库写入失败
+2. **异常情况**: CRM 提交失败
    - **处理流程**:
      - 显示友好的错误页面
      - 自动重试机制（最多3次）
-     - 如果仍失败，保存数据到临时存储
+  - 如果仍失败，提示用户稍后重试或联系官方渠道
-     - 后台任务定期重试写入
+  - 记录失败日志并通知相关接口负责人排查
 
 ### A.3 系统故障异常流程
 1. **异常情况**: 服务器宕机

audi-content-portal/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Google AI Studio App</title>
+    <title>Audi Rednote Mini App Backend</title>
   </head>
   <body>
     <div id="root"></div>

audi-content-portal/src/App.tsx

@@ -1,22 +1,14 @@
 import * as React from "react"
 import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/layout/AppSidebar"
-import { Dashboard } from "@/components/dashboard/Dashboard"
 import { CarLibrary } from "@/components/car-library/CarLibrary"
 import { MiniAppContentLibrary } from "@/components/content-library/MiniAppContentLibrary"
-import { LeadManagement } from "@/components/leads/LeadManagement"
 import { UserAccessManagement } from "@/components/users/UserAccessManagement"
 import { SystemSettings } from "@/components/settings/SystemSettings"
 import { Separator } from "@/components/ui/separator"
 import { Bell, Search, User } from "lucide-react"
 import { Button } from "@/components/ui/button"
 
-type NewContentRequest = {
-  sourceCarId: string
-  sourceCarName: string
-  requestId: string
-}
-
 export type RoleView = "biz-market" | "content-ops" | "pm-ops"
 
 export type WorkflowConfig = {
@@ -24,14 +16,14 @@ export type WorkflowConfig = {
   allowRecall: boolean
   publishStrategy: "manual" | "scheduled"
   defaultPublishTime: string
-  syncFrequency: "daily" | "weekly"
+  syncFrequency: "weekly"
   syncExecutionTime: string
   retryCount: number
   manualConfirmSync: boolean
 }
 
 export default function App() {
-  const [activeTab, setActiveTab] = React.useState("dashboard")
+  const [activeTab, setActiveTab] = React.useState("car-library")
   const [roleView, setRoleView] = React.useState<RoleView>("content-ops")
   const [workflowConfig, setWorkflowConfig] = React.useState<WorkflowConfig>({
     enablePrePublish: true,
@@ -48,34 +40,20 @@ export default function App() {
     "业务/市场负责人批准 Audi Q5L 进入预发布（2026-04-10 15:45）",
     "内容运营专员发布 Audi A3 Sportback（2026-04-09 11:30）",
   ])
-  const [pendingNewContent, setPendingNewContent] = React.useState<NewContentRequest | null>(null)
 
   const appendLog = (message: string) => {
     const now = new Date().toLocaleString("zh-CN", { hour12: false })
     setAuditLogs((prev) => [`${message}（${now}）`, ...prev].slice(0, 12))
   }
 
-  const handleCreateContentFromCar = (sourceCarId: string, sourceCarName: string) => {
-    setPendingNewContent({
-      sourceCarId,
-      sourceCarName,
-      requestId: String(Date.now()),
-    })
-    appendLog(`内容运营专员基于官网 ${sourceCarName} 新建内容草稿`)
-    setActiveTab("mini-content")
-  }
-
   const renderContent = () => {
     switch (activeTab) {
-      case "dashboard":
-        return <Dashboard />
       case "car-library":
         return (
           <CarLibrary
             roleView={roleView}
             workflowConfig={workflowConfig}
             onAddAuditLog={appendLog}
-            onCreateContent={handleCreateContentFromCar}
           />
         )
       case "mini-content":
@@ -84,11 +62,9 @@ export default function App() {
             roleView={roleView}
             workflowConfig={workflowConfig}
             onAddAuditLog={appendLog}
-            newContentRequest={pendingNewContent}
+            newContentRequest={null}
           />
         )
-      case "leads":
-        return <LeadManagement />
       case "user-access":
         return <UserAccessManagement />
       case "settings":
@@ -102,7 +78,13 @@ export default function App() {
           />
         )
       default:
-        return <Dashboard />
+        return (
+          <CarLibrary
+            roleView={roleView}
+            workflowConfig={workflowConfig}
+            onAddAuditLog={appendLog}
+          />
+        )
     }
   }
 
@@ -115,10 +97,8 @@ export default function App() {
           <Separator orientation="vertical" className="mr-2 h-4" />
           <div className="flex flex-1 items-center justify-between">
             <div className="text-sm font-medium text-muted-foreground">
-              {activeTab === "dashboard" && "仪表盘"}
+              {activeTab === "car-library" && "官网车型库"}
-              {activeTab === "car-library" && "车型库"}
               {activeTab === "mini-content" && "小程序内容库"}
-              {activeTab === "leads" && "潜客管理"}
               {activeTab === "user-access" && "用户与权限"}
               {activeTab === "settings" && "系统设置"}
             </div>

audi-content-portal/src/components/car-library/CarLibrary.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { AlertCircle, CheckCircle2, Clock, Filter, Plus, RefreshCw, Search } from "lucide-react"
+import { AlertCircle, CheckCircle2, ChevronLeft, ChevronRight, Clock, Eye, Pencil, RefreshCw, Search, X } from "lucide-react"
 
 import type { RoleView, WorkflowConfig } from "@/App"
 import { Badge } from "@/components/ui/badge"
@@ -21,10 +21,30 @@ type SyncStatus = "synced" | "pending" | "error"
 type SourceCar = {
   id: string
   name: string
+  pageType: "车型页" | "活动页" | "专题页"
+  title: string
+  subtitle: string
+  highlights: string
+  description: string
+  ctaText: string
+  scheduledPublishAt: string
   officialTagline: string
   sourceUpdatedAt: string
+  updatedBy: string
   syncStatus: SyncStatus
   imageCount: number
+  imageUrls: string[]
+}
+
+type SourceCarDraft = {
+  pageType: "车型页" | "活动页" | "专题页"
+  title: string
+  subtitle: string
+  highlights: string
+  description: string
+  ctaText: string
+  scheduledPublishAt: string
+  imageUrls: string[]
 }
 
 type SyncLog = {
@@ -38,46 +58,152 @@ type CarLibraryProps = {
   roleView: RoleView
   workflowConfig: WorkflowConfig
   onAddAuditLog: (message: string) => void
-  onCreateContent?: (sourceCarId: string, sourceCarName: string) => void
 }
 
 const SOURCE_CARS: SourceCar[] = [
   {
     id: "a3",
     name: "Audi A3 Sportback",
+    pageType: "车型页",
+    title: "Audi A3 Sportback",
+    subtitle: "进取，不负期待",
+    highlights: "数字座舱\n城市通勤\n智能互联",
+    description: "适合城市用户的豪华紧凑车型，兼顾效率与智能体验。",
+    ctaText: "立即预约试驾",
+    scheduledPublishAt: "",
     officialTagline: "进取，不负期待",
     sourceUpdatedAt: "2026-04-11 09:30",
+    updatedBy: "内容运营专员",
     syncStatus: "synced",
-    imageCount: 8,
+    imageCount: 2,
+    imageUrls: [
+      "/images/cars/a3-1.jpg",
+      "/images/cars/a3-2.jpg",
+    ],
   },
   {
     id: "a4l",
     name: "Audi A4L",
+    pageType: "车型页",
+    title: "Audi A4L",
+    subtitle: "做更强大的自己",
+    highlights: "quattro\n商务舒适\n智能互联",
+    description: "面向商务人群的主推内容版本，突出舒适与操控。",
+    ctaText: "了解更多",
+    scheduledPublishAt: "",
     officialTagline: "做更强大的自己",
     sourceUpdatedAt: "2026-04-11 09:30",
+    updatedBy: "内容运营专员",
     syncStatus: "synced",
-    imageCount: 6,
+    imageCount: 1,
+    imageUrls: [
+      "/images/cars/a4-1.jpg",
+    ],
   },
   {
     id: "a6l",
     name: "Audi A6L",
+    pageType: "车型页",
+    title: "Audi A6L",
+    subtitle: "懂你，更懂未来",
+    highlights: "行政旗舰\n长轴空间\n智能辅助",
+    description: "正在进行文案优化，待业务审核。",
+    ctaText: "预约顾问回电",
+    scheduledPublishAt: "",
     officialTagline: "懂你，更懂未来",
     sourceUpdatedAt: "2026-04-10 14:20",
+    updatedBy: "内容运营专员",
     syncStatus: "pending",
-    imageCount: 5,
+    imageCount: 2,
+    imageUrls: [
+      "/images/cars/a6-1.jpg",
+      "/images/cars/a6-2.jpg",
+    ],
   },
   {
     id: "q5l",
     name: "Audi Q5L",
+    pageType: "车型页",
+    title: "Audi Q5L",
+    subtitle: "自由，由我定义",
+    highlights: "四驱性能\n家庭空间\n全场景出行",
+    description: "因权益文案与活动规则不一致，当前版本待修订。",
+    ctaText: "预约试驾",
+    scheduledPublishAt: "",
     officialTagline: "自由，由我定义",
     sourceUpdatedAt: "2026-04-10 09:15",
+    updatedBy: "项目与运维负责人",
     syncStatus: "error",
-    imageCount: 0,
+    imageCount: 2,
+    imageUrls: [
+      "/images/cars/q5-1.jpg",
+      "/images/cars/q5-2.jpg",
+    ],
+  },
+  {
+    id: "q3",
+    name: "Audi Q3",
+    pageType: "车型页",
+    title: "Audi Q3",
+    subtitle: "活出生命的辽阔",
+    highlights: "紧凑SUV\n智能互联\n都市通勤",
+    description: "新建草稿，待进一步补充图文和活动权益信息。",
+    ctaText: "预约试驾",
+    scheduledPublishAt: "",
+    officialTagline: "活出生命的辽阔",
+    sourceUpdatedAt: "2026-04-10 17:30",
+    updatedBy: "内容运营专员",
+    syncStatus: "synced",
+    imageCount: 2,
+    imageUrls: [
+      "/images/cars/q3-1.jpg",
+      "/images/cars/q3-2.jpg",
+    ],
+  },
+  {
+    id: "a8l",
+    name: "Audi A8L",
+    pageType: "车型页",
+    title: "Audi A8L",
+    subtitle: "旗舰格局，沉稳之选",
+    highlights: "旗舰行政\n豪华座舱\n专属服务",
+    description: "旗舰车型物料已完成本周核对。",
+    ctaText: "预约专属顾问",
+    scheduledPublishAt: "",
+    officialTagline: "旗舰格局，沉稳之选",
+    sourceUpdatedAt: "2026-04-10 16:20",
+    updatedBy: "内容运营专员",
+    syncStatus: "synced",
+    imageCount: 2,
+    imageUrls: [
+      "/images/cars/a8-1.jpg",
+      "/images/cars/a8-2.jpg",
+    ],
+  },
+  {
+    id: "rs7",
+    name: "Audi RS7",
+    pageType: "车型页",
+    title: "Audi RS7 Performance",
+    subtitle: "高性能美学，锋芒尽释",
+    highlights: "V8双涡轮\nquattro四驱\nRS专属运动套件",
+    description: "高性能车型内容新增，本周已补齐素材并进入巡检列表。",
+    ctaText: "预约性能试驾",
+    scheduledPublishAt: "",
+    officialTagline: "高性能美学，锋芒尽释",
+    sourceUpdatedAt: "2026-04-12 10:10",
+    updatedBy: "内容运营专员",
+    syncStatus: "pending",
+    imageCount: 2,
+    imageUrls: [
+      "/images/cars/rs7-1.jpg",
+      "/images/cars/rs7-2.jpg",
+    ],
   },
 ]
 
 const INITIAL_LOGS: SyncLog[] = [
-  { id: "l1", time: "2026-04-11 09:30", status: "success", message: "同步成功：4 个车型，素材 19 张" },
+  { id: "l1", time: "2026-04-11 09:30", status: "success", message: "同步成功：7 个车型，素材 31 张" },
   { id: "l2", time: "2026-04-10 09:15", status: "failed", message: "Audi Q5L 图片拉取失败：CDN 超时" },
 ]
 
@@ -107,14 +233,53 @@ function nowString() {
   return new Date().toLocaleString("zh-CN", { hour12: false })
 }
 
-export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps) {
+export function CarLibrary({ roleView, workflowConfig, onAddAuditLog }: CarLibraryProps) {
   const [sourceCars, setSourceCars] = React.useState<SourceCar[]>(SOURCE_CARS)
   const [query, setQuery] = React.useState("")
   const [isSyncing, setIsSyncing] = React.useState(false)
   const [progress, setProgress] = React.useState(0)
   const [syncLogs, setSyncLogs] = React.useState<SyncLog[]>(INITIAL_LOGS)
+  const [previewCarId, setPreviewCarId] = React.useState<string | null>(null)
+  const [previewImageIndex, setPreviewImageIndex] = React.useState(0)
+  const [viewMode, setViewMode] = React.useState<"list" | "editor">("list")
+  const [editingCarId, setEditingCarId] = React.useState<string | null>(null)
+  const [editorDraft, setEditorDraft] = React.useState<SourceCarDraft | null>(null)
+  const [newImageUrl, setNewImageUrl] = React.useState("")
+  const initialDraftRef = React.useRef<SourceCarDraft | null>(null)
+  const listPageSize = 7
+  const listTotalPages = 10
+  const listPage = 1
 
   const filtered = sourceCars.filter((car) => car.name.toLowerCase().includes(query.toLowerCase()))
+  const pagedCars = filtered.slice((listPage - 1) * listPageSize, listPage * listPageSize)
+  const previewCar = sourceCars.find((car) => car.id === previewCarId) ?? null
+  const previewImages = previewCar?.imageUrls ?? []
+  const canEdit = roleView === "content-ops"
+
+  const isEditorDirty = React.useMemo(() => {
+    if (!editorDraft || !initialDraftRef.current) return false
+    return JSON.stringify(editorDraft) !== JSON.stringify(initialDraftRef.current)
+  }, [editorDraft])
+
+  React.useEffect(() => {
+    if (!previewCarId || previewImages.length === 0) return
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === "ArrowLeft") {
+        setPreviewImageIndex((curr) => Math.max(curr - 1, 0))
+      }
+      if (event.key === "ArrowRight") {
+        setPreviewImageIndex((curr) => Math.min(curr + 1, previewImages.length - 1))
+      }
+      if (event.key === "Escape") {
+        setPreviewCarId(null)
+        setPreviewImageIndex(0)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeydown)
+    return () => window.removeEventListener("keydown", handleKeydown)
+  }, [previewCarId, previewImages.length])
 
   const handleSync = () => {
     setIsSyncing(true)
@@ -129,15 +294,16 @@ export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps)
             curr.map((car) => ({
               ...car,
               sourceUpdatedAt: time,
+              updatedBy: "内容运营专员",
               syncStatus: "synced",
-              imageCount: car.imageCount || 4,
+              imageCount: car.imageUrls.length || car.imageCount || 1,
             }))
           )
           setSyncLogs((curr) => [
-            { id: String(Date.now()), time, status: "success", message: "手动同步完成：4 个车型已更新" },
+            { id: String(Date.now()), time, status: "success", message: "本周人工周更完成：7 个车型素材已核对并更新" },
             ...curr,
           ])
-          onAddAuditLog("内容运营专员执行官网车型同步")
+          onAddAuditLog("内容运营专员执行 JV 官网人工周更")
           setTimeout(() => setIsSyncing(false), 300)
           return 100
         }
@@ -154,21 +320,231 @@ export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps)
       )
     )
     setSourceCars((curr) =>
-      curr.map((car) => (car.syncStatus === "error" ? { ...car, syncStatus: "synced", sourceUpdatedAt: time, imageCount: 4 } : car))
+      curr.map((car) =>
+        car.syncStatus === "error"
+          ? {
+              ...car,
+              syncStatus: "synced",
+              sourceUpdatedAt: time,
+              imageCount: car.imageUrls.length || car.imageCount || 1,
+              updatedBy: "项目与运维负责人",
+            }
+          : car
+      )
+    )
+    onAddAuditLog("项目与运维负责人重试 JV 官网素材异常任务")
+  }
+
+  const openEditor = (car: SourceCar) => {
+    const draft: SourceCarDraft = {
+      pageType: car.pageType,
+      title: car.title,
+      subtitle: car.subtitle,
+      highlights: car.highlights,
+      description: car.description,
+      ctaText: car.ctaText,
+      scheduledPublishAt: car.scheduledPublishAt,
+      imageUrls: [...car.imageUrls],
+    }
+
+    initialDraftRef.current = draft
+    setEditorDraft(draft)
+    setEditingCarId(car.id)
+    setNewImageUrl("")
+    setViewMode("editor")
+  }
+
+  const updateDraft = (patch: Partial<SourceCarDraft>) => {
+    setEditorDraft((prev) => (prev ? { ...prev, ...patch } : prev))
+  }
+
+  const addImageToDraft = () => {
+    if (!editorDraft) return
+    const url = newImageUrl.trim()
+    if (!url) return
+    updateDraft({ imageUrls: [...editorDraft.imageUrls, url] })
+    setNewImageUrl("")
+  }
+
+  const removeImageFromDraft = (index: number) => {
+    if (!editorDraft) return
+    updateDraft({ imageUrls: editorDraft.imageUrls.filter((_, idx) => idx !== index) })
+  }
+
+  const handleCancelEditor = () => {
+    if (isEditorDirty && !window.confirm("当前有未保存修改，确认取消并返回车型库吗？")) {
+      return
+    }
+    setViewMode("list")
+    setEditingCarId(null)
+    setEditorDraft(null)
+    setNewImageUrl("")
+    initialDraftRef.current = null
+  }
+
+  const handleSaveEditor = () => {
+    if (!editingCarId || !editorDraft) return
+    const now = nowString()
+
+    setSourceCars((curr) =>
+      curr.map((car) => {
+        if (car.id !== editingCarId) return car
+        return {
+          ...car,
+          pageType: editorDraft.pageType,
+          title: editorDraft.title,
+          subtitle: editorDraft.subtitle,
+          highlights: editorDraft.highlights,
+          description: editorDraft.description,
+          ctaText: editorDraft.ctaText,
+          scheduledPublishAt: editorDraft.scheduledPublishAt,
+          officialTagline: editorDraft.subtitle || car.officialTagline,
+          imageUrls: editorDraft.imageUrls,
+          imageCount: editorDraft.imageUrls.length,
+          sourceUpdatedAt: now,
+          updatedBy: "内容运营专员",
+        }
+      })
+    )
+
+    const carName = sourceCars.find((car) => car.id === editingCarId)?.name ?? "目标车型"
+    onAddAuditLog(`内容运营专员编辑并保存 ${carName} 车型内容`)
+
+    setViewMode("list")
+    setEditingCarId(null)
+    setEditorDraft(null)
+    setNewImageUrl("")
+    initialDraftRef.current = null
+  }
+
+  if (viewMode === "editor" && editingCarId && editorDraft) {
+    const editingCar = sourceCars.find((car) => car.id === editingCarId)
+
+    return (
+      <div className="flex flex-col gap-6 p-8">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <Button variant="outline" size="sm" onClick={handleCancelEditor}>
+              <ChevronLeft className="mr-1 h-3.5 w-3.5" />返回车型库
+            </Button>
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight">官网车型编辑</h1>
+              <p className="text-muted-foreground">编辑车型内容与素材图片，不含预览与审核动作。</p>
+            </div>
+          </div>
+          <Badge variant="outline">{editingCar?.name ?? "车型"}</Badge>
+        </div>
+
+        <Card className="border-none shadow-sm bg-white">
+          <CardHeader>
+            <CardTitle className="text-lg font-bold">编辑字段</CardTitle>
+            <CardDescription>字段结构与小程序内容编辑页一致。</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">来源车型</label>
+              <Input value={editingCar?.name ?? ""} disabled />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">页面类型</label>
+              <Input value={editorDraft.pageType} disabled />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">标题</label>
+              <Input value={editorDraft.title} disabled={!canEdit} onChange={(e) => updateDraft({ title: e.target.value })} />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">副标题</label>
+              <Input value={editorDraft.subtitle} disabled={!canEdit} onChange={(e) => updateDraft({ subtitle: e.target.value })} />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">卖点（每行一条）</label>
+              <textarea
+                className="min-h-24 rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:border-ring"
+                value={editorDraft.highlights}
+                disabled={!canEdit}
+                onChange={(e) => updateDraft({ highlights: e.target.value })}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">图文描述（轻量编排）</label>
+              <textarea
+                className="min-h-28 rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:border-ring"
+                value={editorDraft.description}
+                disabled={!canEdit}
+                onChange={(e) => updateDraft({ description: e.target.value })}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">按钮文案</label>
+              <Input value={editorDraft.ctaText} disabled={!canEdit} onChange={(e) => updateDraft({ ctaText: e.target.value })} />
+            </div>
+
+            {workflowConfig.publishStrategy === "scheduled" && (
+              <div className="grid gap-2">
+                <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">预约发布时间</label>
+                <Input
+                  type="datetime-local"
+                  disabled={!canEdit}
+                  value={editorDraft.scheduledPublishAt}
+                  onChange={(e) => updateDraft({ scheduledPublishAt: e.target.value })}
+                />
+              </div>
+            )}
+
+            <div className="grid gap-2">
+              <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">图片素材（多图）</label>
+              <div className="flex gap-2">
+                <Input
+                  value={newImageUrl}
+                  disabled={!canEdit}
+                  onChange={(e) => setNewImageUrl(e.target.value)}
+                  placeholder="粘贴图片 URL"
+                />
+                <Button variant="outline" disabled={!canEdit} onClick={addImageToDraft}>新增</Button>
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                {editorDraft.imageUrls.map((url, idx) => (
+                  <div key={`${url}-${idx}`} className="rounded-lg border p-2">
+                    <img src={url} alt={`official-${idx}`} className="aspect-video w-full rounded object-cover" />
+                    <div className="mt-2 flex justify-end">
+                      <Button size="sm" variant="ghost" disabled={!canEdit} onClick={() => removeImageFromDraft(idx)}>
+                        删除
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex gap-2 pt-2">
+              <Button variant="outline" onClick={handleCancelEditor}>取消</Button>
+              <Button disabled={!canEdit} onClick={handleSaveEditor}>
+                <Pencil className="mr-1 h-3.5 w-3.5" />保存
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
     )
-    onAddAuditLog("项目与运维负责人重试官网同步失败任务")
   }
 
   return (
     <div className="flex flex-col gap-6 p-8">
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1">
-          <h1 className="text-3xl font-bold tracking-tight">车型库（官网同步源）</h1>
+          <h1 className="text-3xl font-bold tracking-tight">官网车型库</h1>
-          <p className="text-muted-foreground">本页仅管理官网同步原始数据。编辑、审核、发布请前往“小程序内容库”。</p>
+          <p className="text-muted-foreground">本页用于每周人工巡检 JV 官网素材，确认差异后再进入“小程序内容库”完成页面更新与发布。</p>
         </div>
         <Button onClick={handleSync} disabled={isSyncing} className="bg-audi-black hover:bg-audi-dark-gray text-white px-6">
           {isSyncing ? <RefreshCw className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
-          从官网同步
+          执行本周周更
         </Button>
       </div>
 
@@ -177,7 +553,7 @@ export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps)
           <CardContent className="pt-6">
             <div className="flex flex-col gap-2">
               <div className="flex items-center justify-between text-sm">
-                <span className="font-medium text-audi-red">正在同步官网车型素材...</span>
+                <span className="font-medium text-audi-red">正在执行本周人工周更任务...</span>
                 <span className="text-muted-foreground">{Math.round(progress)}%</span>
               </div>
               <Progress value={progress} className="h-2 bg-audi-red/10" />
@@ -189,15 +565,14 @@ export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps)
       <Card className="border-none shadow-sm bg-white">
         <CardHeader className="pb-3">
           <div className="flex items-center justify-between">
-            <CardTitle className="text-lg font-bold">官网车型列表</CardTitle>
+            <CardTitle className="text-lg font-bold">官网素材巡检列表</CardTitle>
-            <Badge variant="outline" className="text-xs">Source Entity: SourceCar</Badge>
           </div>
           <div className="flex items-center gap-2 w-full max-w-sm">
             <Search className="h-4 w-4 text-muted-foreground absolute ml-3" />
             <Input
               value={query}
               onChange={(e) => setQuery(e.target.value)}
-              placeholder="搜索官网车型名称..."
+              placeholder="搜索官网车型名称或待处理项..."
               className="pl-9 bg-gray-50/50 border-none"
             />
           </div>
@@ -208,40 +583,50 @@ export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps)
               <TableRow className="hover:bg-transparent border-b border-gray-100">
                 <TableHead className="font-bold text-audi-black">车型名称</TableHead>
                 <TableHead className="font-bold text-audi-black">官网文案</TableHead>
-                <TableHead className="font-bold text-audi-black">图片数量</TableHead>
+                <TableHead className="font-bold text-audi-black">素材数量</TableHead>
-                <TableHead className="font-bold text-audi-black">同步状态</TableHead>
+                <TableHead className="font-bold text-audi-black">处理状态</TableHead>
-                <TableHead className="font-bold text-audi-black">最近同步</TableHead>
+                <TableHead className="font-bold text-audi-black">最近更新</TableHead>
+                <TableHead className="font-bold text-audi-black">操作人</TableHead>
                 <TableHead className="text-right font-bold text-audi-black">操作</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {filtered.map((car) => (
+              {pagedCars.map((car) => (
                 <TableRow key={car.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
                   <TableCell className="font-medium">{car.name}</TableCell>
                   <TableCell className="text-muted-foreground">{car.officialTagline}</TableCell>
-                  <TableCell>{car.imageCount} 张</TableCell>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      <span>{car.imageCount} 张</span>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        className="h-7 px-2"
+                        onClick={() => setPreviewCarId(car.id)}
+                      >
+                        <Eye className="mr-1 h-3.5 w-3.5" />预览
+                      </Button>
+                    </div>
+                  </TableCell>
                   <TableCell>{syncBadge(car.syncStatus)}</TableCell>
                   <TableCell className="text-muted-foreground text-xs">{car.sourceUpdatedAt}</TableCell>
+                  <TableCell className="text-muted-foreground text-xs">{car.updatedBy}</TableCell>
                   <TableCell className="text-right">
                     {car.syncStatus === "synced" ? (
                     <Button
                       size="sm"
                       variant="outline"
-                      onClick={() => {
+                      onClick={() => openEditor(car)}
-                        onCreateContent?.(car.id, car.name)
-                        onAddAuditLog(`内容运营专员基于官网 ${car.name} 新建内容草稿`)
-                      }}
                     >
-                      <Plus className="mr-1 h-3.5 w-3.5" />新建内容
+                      <Pencil className="mr-1 h-3.5 w-3.5" />编辑
                     </Button>
                     ) : (
                       <Button
                         size="sm"
                         variant="outline"
-                        disabled
+                        onClick={() => openEditor(car)}
-                        title={car.syncStatus === "pending" ? "车型待同步，完成同步后可新建内容" : "车型同步失败，请先重试同步"}
                       >
-                        <Plus className="mr-1 h-3.5 w-3.5" />新建内容
+                        <Pencil className="mr-1 h-3.5 w-3.5" />编辑
                       </Button>
                     )}
                   </TableCell>
@@ -249,13 +634,32 @@ export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps)
               ))}
             </TableBody>
           </Table>
+
+          <div className="mt-4 flex items-center justify-between border-t pt-4">
+            <p className="text-xs text-muted-foreground">每页 7 条，共 10 页</p>
+            <div className="flex items-center gap-1">
+              <Button size="sm" variant="outline" disabled>上一页</Button>
+              {Array.from({ length: listTotalPages }, (_, index) => (
+                <Button
+                  key={`car-page-${index + 1}`}
+                  size="sm"
+                  variant={index + 1 === listPage ? "default" : "outline"}
+                  className={index + 1 === listPage ? "bg-audi-black hover:bg-audi-dark-gray text-white" : ""}
+                  disabled
+                >
+                  {index + 1}
+                </Button>
+              ))}
+              <Button size="sm" variant="outline" disabled>下一页</Button>
+            </div>
+          </div>
         </CardContent>
       </Card>
 
       <Card className="border-none shadow-sm bg-white">
         <CardHeader>
-          <CardTitle className="text-lg font-bold">同步记录</CardTitle>
+          <CardTitle className="text-lg font-bold">周更记录</CardTitle>
-          <CardDescription>同步异常可重试，重试结果将写入本页日志。</CardDescription>
+          <CardDescription>官网素材异常可重试，重试结果将写入本页日志。</CardDescription>
         </CardHeader>
         <CardContent className="space-y-2">
           {syncLogs.map((log) => (
@@ -278,6 +682,62 @@ export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps)
           ))}
         </CardContent>
       </Card>
+
+      {previewCarId && (
+        <div className="fixed inset-0 z-50 bg-black/80 p-4 md:p-6">
+          <Card className="mx-auto flex h-full w-full max-w-none flex-col border-none bg-white shadow-2xl">
+            <CardHeader className="flex flex-row items-center justify-between">
+              <div>
+                <CardTitle className="text-lg font-bold">素材图片预览</CardTitle>
+                <CardDescription>
+                  {sourceCars.find((car) => car.id === previewCarId)?.name}
+                </CardDescription>
+              </div>
+              <Button variant="ghost" size="icon" onClick={() => { setPreviewCarId(null); setPreviewImageIndex(0) }}>
+                <X className="h-4 w-4" />
+              </Button>
+            </CardHeader>
+            <CardContent className="relative flex-1 overflow-hidden p-4 md:p-6">
+              <div className="relative h-full w-full rounded-lg bg-black">
+                {previewImages.length > 0 ? (
+                  <>
+                    <div className="flex h-full w-full items-center justify-center">
+                      <img
+                        src={previewImages[previewImageIndex]}
+                        alt={`preview-${previewImageIndex}`}
+                        className="max-h-full max-w-full object-contain"
+                      />
+                    </div>
+                    <Button
+                      size="icon"
+                      variant="outline"
+                      className="absolute left-4 top-1/2 -translate-y-1/2 bg-white/90"
+                      disabled={previewImageIndex <= 0}
+                      onClick={() => setPreviewImageIndex((curr) => Math.max(curr - 1, 0))}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      size="icon"
+                      variant="outline"
+                      className="absolute right-4 top-1/2 -translate-y-1/2 bg-white/90"
+                      disabled={previewImageIndex >= previewImages.length - 1}
+                      onClick={() => setPreviewImageIndex((curr) => Math.min(curr + 1, previewImages.length - 1))}
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                    <div className="absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-black/65 px-3 py-1 text-xs text-white">
+                      {previewImageIndex + 1} / {previewImages.length}
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex h-full items-center justify-center text-sm text-white/80">该车型暂无可预览图片</div>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
     </div>
   )
 }

audi-content-portal/src/components/content-library/MiniAppContentLibrary.tsx

@@ -3,10 +3,11 @@ import {
   ArrowLeft,
   Eye,
   Pencil,
+  RotateCcw,
+  Search,
   Send,
   ShieldCheck,
-  Undo2,
+  Trash2,
-  Upload,
   XCircle,
 } from "lucide-react"
 
@@ -24,12 +25,22 @@ import {
   TableRow,
 } from "@/components/ui/table"
 
-type WorkflowStatus = "draft" | "pending" | "prepublished" | "published" | "rejected" | "recalled"
+type WorkflowStatus = "draft" | "prepublished" | "published"
+
+type SourceSnapshot = {
+  title: string
+  subtitle: string
+  highlights: string
+  description: string
+  ctaText: string
+  imageUrls: string[]
+}
 
 type MiniAppContent = {
   id: string
   sourceCarId: string
   sourceCarName: string
+  pageType: "车型页" | "活动页" | "专题页"
   title: string
   subtitle: string
   highlights: string
@@ -58,6 +69,7 @@ const CONTENTS: MiniAppContent[] = [
     id: "c1",
     sourceCarId: "a3",
     sourceCarName: "Audi A3 Sportback",
+    pageType: "车型页",
     title: "Audi A3 Sportback",
     subtitle: "进取，不负期待",
     highlights: "数字座舱\n城市通勤\n智能互联",
@@ -65,9 +77,8 @@ const CONTENTS: MiniAppContent[] = [
     ctaText: "立即预约试驾",
     scheduledPublishAt: "",
     imageUrls: [
-      "https://images.unsplash.com/photo-1606152421802-db97b9c7a11b?auto=format&fit=crop&q=80&w=1200",
+      "/images/cars/a3-1.jpg",
-      "https://picsum.photos/seed/a3-content-1/900/600",
+      "/images/cars/a3-2.jpg",
-      "https://picsum.photos/seed/a3-content-2/900/600",
     ],
     workflowStatus: "published",
     updatedBy: "内容运营专员",
@@ -77,6 +88,7 @@ const CONTENTS: MiniAppContent[] = [
     id: "c2",
     sourceCarId: "a4l",
     sourceCarName: "Audi A4L",
+    pageType: "活动页",
     title: "Audi A4L 四月限时礼遇",
     subtitle: "豪华与性能平衡",
     highlights: "quattro\n商务舒适\n限时礼遇",
@@ -84,8 +96,7 @@ const CONTENTS: MiniAppContent[] = [
     ctaText: "获取活动详情",
     scheduledPublishAt: "2026-04-14T10:00",
     imageUrls: [
-      "https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&q=80&w=1200",
+      "/images/cars/a4-1.jpg",
-      "https://picsum.photos/seed/a4-content-1/900/600",
     ],
     workflowStatus: "prepublished",
     updatedBy: "业务/市场负责人",
@@ -95,6 +106,7 @@ const CONTENTS: MiniAppContent[] = [
     id: "c3",
     sourceCarId: "a6l",
     sourceCarName: "Audi A6L",
+    pageType: "车型页",
     title: "Audi A6L",
     subtitle: "懂你，更懂未来",
     highlights: "行政旗舰\n长轴空间\n智能辅助",
@@ -102,9 +114,10 @@ const CONTENTS: MiniAppContent[] = [
     ctaText: "预约顾问回电",
     scheduledPublishAt: "",
     imageUrls: [
-      "https://images.unsplash.com/photo-1541348263662-e0c86433610a?auto=format&fit=crop&q=80&w=1200",
+      "/images/cars/a6-1.jpg",
+      "/images/cars/a6-2.jpg",
     ],
-    workflowStatus: "pending",
+    workflowStatus: "prepublished",
     updatedBy: "内容运营专员",
     updatedAt: "2026-04-11 09:30",
   },
@@ -112,6 +125,7 @@ const CONTENTS: MiniAppContent[] = [
     id: "c4",
     sourceCarId: "q3",
     sourceCarName: "Audi Q3",
+    pageType: "专题页",
     title: "Audi Q3 城市灵动版",
     subtitle: "年轻进阶，灵动出行",
     highlights: "紧凑SUV\n智能互联\n都市通勤",
@@ -119,7 +133,7 @@ const CONTENTS: MiniAppContent[] = [
     ctaText: "预约试驾",
     scheduledPublishAt: "",
     imageUrls: [
-      "https://picsum.photos/seed/q3-content-1/900/600",
+      "/images/cars/q3-1.jpg",
     ],
     workflowStatus: "draft",
     updatedBy: "内容运营专员",
@@ -129,6 +143,7 @@ const CONTENTS: MiniAppContent[] = [
     id: "c5",
     sourceCarId: "q5l",
     sourceCarName: "Audi Q5L",
+    pageType: "活动页",
     title: "Audi Q5L 周末试驾礼遇",
     subtitle: "自由，由我定义",
     highlights: "四驱性能\n家庭空间\n周末活动",
@@ -136,9 +151,10 @@ const CONTENTS: MiniAppContent[] = [
     ctaText: "了解礼遇",
     scheduledPublishAt: "",
     imageUrls: [
-      "https://picsum.photos/seed/q5-content-1/900/600",
+      "/images/cars/q5-1.jpg",
+      "/images/cars/q5-2.jpg",
     ],
-    workflowStatus: "rejected",
+    workflowStatus: "draft",
     updatedBy: "业务/市场负责人",
     updatedAt: "2026-04-11 08:10",
   },
@@ -146,6 +162,7 @@ const CONTENTS: MiniAppContent[] = [
     id: "c6",
     sourceCarId: "a8l",
     sourceCarName: "Audi A8L",
+    pageType: "车型页",
     title: "Audi A8L 尊享礼宾版",
     subtitle: "旗舰格局，沉稳之选",
     highlights: "旗舰行政\n豪华座舱\n专属服务",
@@ -153,37 +170,136 @@ const CONTENTS: MiniAppContent[] = [
     ctaText: "预约专属顾问",
     scheduledPublishAt: "2026-04-15T09:30",
     imageUrls: [
-      "https://picsum.photos/seed/a8-content-1/900/600",
+      "/images/cars/a8-1.jpg",
     ],
-    workflowStatus: "recalled",
+    workflowStatus: "published",
     updatedBy: "业务/市场负责人",
     updatedAt: "2026-04-11 07:55",
   },
+  {
+    id: "c7",
+    sourceCarId: "rs7",
+    sourceCarName: "Audi RS7",
+    pageType: "车型页",
+    title: "Audi RS7 Performance",
+    subtitle: "高性能美学，锋芒尽释",
+    highlights: "V8双涡轮\nquattro四驱\nRS专属运动套件",
+    description: "聚焦高性能驾驶体验与豪华运动设计，适配高意向用户内容触达场景。",
+    ctaText: "预约性能试驾",
+    scheduledPublishAt: "",
+    imageUrls: [
+      "/images/cars/rs7-1.jpg",
+      "/images/cars/rs7-2.jpg",
+    ],
+    workflowStatus: "draft",
+    updatedBy: "内容运营专员",
+    updatedAt: "2026-04-12 10:20",
+  },
 ]
 
 const WORKFLOW_LABEL: Record<WorkflowStatus, string> = {
   draft: "草稿",
-  pending: "待审核",
   prepublished: "预发布",
   published: "已发布",
-  rejected: "已驳回",
-  recalled: "已撤回",
 }
 
+const SOURCE_SNAPSHOTS: Record<string, SourceSnapshot> = {
+  a3: {
+    title: "Audi A3 Sportback",
+    subtitle: "进取，不负期待",
+    highlights: "数字座舱\n城市通勤\n智能互联",
+    description: "来自官网车型库的车型基线内容。",
+    ctaText: "立即预约试驾",
+    imageUrls: [
+      "/images/cars/a3-1.jpg",
+      "/images/cars/a3-2.jpg",
+    ],
+  },
+  a4l: {
+    title: "Audi A4L",
+    subtitle: "做更强大的自己",
+    highlights: "quattro\n商务舒适\n智能互联",
+    description: "来自官网车型库的车型基线内容。",
+    ctaText: "了解更多",
+    imageUrls: [
+      "/images/cars/a4-1.jpg",
+    ],
+  },
+  a6l: {
+    title: "Audi A6L",
+    subtitle: "懂你，更懂未来",
+    highlights: "行政旗舰\n长轴空间\n智能辅助",
+    description: "来自官网车型库的车型基线内容。",
+    ctaText: "预约顾问回电",
+    imageUrls: [
+      "/images/cars/a6-1.jpg",
+      "/images/cars/a6-2.jpg",
+    ],
+  },
+  q3: {
+    title: "Audi Q3",
+    subtitle: "活出生命的辽阔",
+    highlights: "紧凑SUV\n智能互联\n都市通勤",
+    description: "来自官网车型库的车型基线内容。",
+    ctaText: "立即预约试驾",
+    imageUrls: [
+      "/images/cars/q3-1.jpg",
+      "/images/cars/q3-2.jpg",
+    ],
+  },
+  q5l: {
+    title: "Audi Q5L",
+    subtitle: "自由，由我定义",
+    highlights: "四驱性能\n家庭空间\n全场景出行",
+    description: "来自官网车型库的车型基线内容。",
+    ctaText: "预约试驾",
+    imageUrls: [
+      "/images/cars/q5-1.jpg",
+      "/images/cars/q5-2.jpg",
+    ],
+  },
+  a8l: {
+    title: "Audi A8L",
+    subtitle: "旗舰格局，沉稳之选",
+    highlights: "旗舰行政\n豪华座舱\n专属服务",
+    description: "来自官网车型库的车型基线内容。",
+    ctaText: "预约专属顾问",
+    imageUrls: [
+      "/images/cars/a8-1.jpg",
+      "/images/cars/a8-2.jpg",
+    ],
+  },
+  rs7: {
+    title: "Audi RS7 Performance",
+    subtitle: "高性能美学，锋芒尽释",
+    highlights: "V8双涡轮\nquattro四驱\nRS专属运动套件",
+    description: "来自官网车型库的车型基线内容。",
+    ctaText: "预约性能试驾",
+    imageUrls: [
+      "/images/cars/rs7-1.jpg",
+      "/images/cars/rs7-2.jpg",
+    ],
+  },
+}
+
+const SOURCE_CAR_OPTIONS = [
+  { id: "a3", name: "Audi A3 Sportback" },
+  { id: "a4l", name: "Audi A4L" },
+  { id: "a6l", name: "Audi A6L" },
+  { id: "q3", name: "Audi Q3" },
+  { id: "q5l", name: "Audi Q5L" },
+  { id: "a8l", name: "Audi A8L" },
+  { id: "rs7", name: "Audi RS7" },
+] as const
+
 function workflowBadgeClass(status: WorkflowStatus) {
   switch (status) {
     case "draft":
       return "bg-gray-100 text-gray-700 border-gray-200"
-    case "pending":
-      return "bg-amber-50 text-amber-700 border-amber-200"
     case "prepublished":
       return "bg-blue-50 text-blue-700 border-blue-200"
     case "published":
       return "bg-emerald-50 text-emerald-700 border-emerald-200"
-    case "rejected":
-      return "bg-rose-50 text-rose-700 border-rose-200"
-    case "recalled":
-      return "bg-zinc-100 text-zinc-700 border-zinc-200"
   }
 }
 
@@ -195,7 +311,12 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
   const [contents, setContents] = React.useState<MiniAppContent[]>(CONTENTS)
   const [viewMode, setViewMode] = React.useState<"list" | "editor">("list")
   const [selectedId, setSelectedId] = React.useState<string>(CONTENTS[0].id)
+  const [query, setQuery] = React.useState("")
   const [newImageUrl, setNewImageUrl] = React.useState("")
+  const [pendingResetPatch, setPendingResetPatch] = React.useState<Record<string, Partial<MiniAppContent>>>({})
+  const listPageSize = 7
+  const listTotalPages = 10
+  const listPage = 1
 
   React.useEffect(() => {
     if (!newContentRequest) return
@@ -207,6 +328,7 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
         id,
         sourceCarId: newContentRequest.sourceCarId,
         sourceCarName: newContentRequest.sourceCarName,
+        pageType: "车型页",
         title: newContentRequest.sourceCarName,
         subtitle: "",
         highlights: "",
@@ -228,6 +350,11 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
   const canEdit = roleView === "content-ops"
   const canApprove = roleView === "biz-market"
   const selected = contents.find((item) => item.id === selectedId) ?? null
+  const filteredContents = contents.filter((item) => {
+    const key = `${item.sourceCarName} ${item.sourceCarId} ${item.pageType} ${item.title}`.toLowerCase()
+    return key.includes(query.toLowerCase())
+  })
+  const pagedContents = filteredContents.slice((listPage - 1) * listPageSize, listPage * listPageSize)
 
   const updateContent = (id: string, patch: Partial<MiniAppContent>) => {
     setContents((prev) =>
@@ -236,46 +363,51 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
   }
 
   const saveDraft = (item: MiniAppContent) => {
-    updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
+    const stagedPatch = pendingResetPatch[item.id] ?? {}
+    updateContent(item.id, { ...stagedPatch, workflowStatus: "draft", updatedBy: "内容运营专员" })
+    setPendingResetPatch((prev) => {
+      if (!prev[item.id]) return prev
+      const next = { ...prev }
+      delete next[item.id]
+      return next
+    })
+    if (Object.keys(stagedPatch).length > 0) {
+      onAddAuditLog(`内容运营专员保存并重置 ${item.sourceCarName} 到官网源数据（回草稿）`)
+    } else {
       onAddAuditLog(`内容运营专员保存 ${item.sourceCarName} 内容草稿`)
     }
+  }
+
+  const stageResetFromSource = (item: MiniAppContent) => {
+    const source = SOURCE_SNAPSHOTS[item.sourceCarId]
+    if (!source) return
+    setPendingResetPatch((prev) => ({
+      ...prev,
+      [item.id]: {
+        title: source.title,
+        subtitle: source.subtitle,
+        highlights: source.highlights,
+        description: source.description,
+        ctaText: source.ctaText,
+        imageUrls: source.imageUrls,
+      },
+    }))
+    onAddAuditLog(`内容运营专员发起 ${item.sourceCarName} 源数据重置（待保存生效）`)
+  }
 
   const submitForReview = (item: MiniAppContent) => {
-    updateContent(item.id, { workflowStatus: "pending", updatedBy: "内容运营专员" })
+    updateContent(item.id, { workflowStatus: "prepublished", updatedBy: "内容运营专员" })
-    onAddAuditLog(`内容运营专员提交 ${item.sourceCarName} 到审核队列`)
+    onAddAuditLog(`内容运营专员提交 ${item.sourceCarName} 进入预发布待审`)
-  }
-
-  const withdrawReview = (item: MiniAppContent) => {
-    updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
-    onAddAuditLog(`内容运营专员撤回 ${item.sourceCarName} 的审核申请`)
   }
 
   const approve = (item: MiniAppContent) => {
-    const nextStatus: WorkflowStatus = workflowConfig.enablePrePublish ? "prepublished" : "published"
+    updateContent(item.id, { workflowStatus: "published", updatedBy: "业务/市场负责人" })
-    updateContent(item.id, { workflowStatus: nextStatus, updatedBy: "业务/市场负责人" })
+    onAddAuditLog(`业务/市场负责人通过 ${item.sourceCarName}，状态变为已发布`)
-    onAddAuditLog(`业务/市场负责人审批通过 ${item.sourceCarName}`)
   }
 
   const reject = (item: MiniAppContent) => {
-    updateContent(item.id, { workflowStatus: "rejected", updatedBy: "业务/市场负责人" })
+    updateContent(item.id, { workflowStatus: "draft", updatedBy: "业务/市场负责人" })
-    onAddAuditLog(`业务/市场负责人驳回 ${item.sourceCarName} 内容版本`)
+    onAddAuditLog(`业务/市场负责人驳回 ${item.sourceCarName}，状态退回草稿`)
-  }
-
-  const publish = (item: MiniAppContent) => {
-    const actor = roleView === "biz-market" ? "业务/市场负责人" : "内容运营专员"
-    updateContent(item.id, { workflowStatus: "published", updatedBy: actor })
-    onAddAuditLog(`${actor}发布 ${item.sourceCarName} 到小程序`)
-  }
-
-  const recall = (item: MiniAppContent) => {
-    updateContent(item.id, { workflowStatus: "recalled", updatedBy: "业务/市场负责人" })
-    onAddAuditLog(`业务/市场负责人撤回 ${item.sourceCarName} 已发布内容`)
-  }
-
-  const revive = (item: MiniAppContent) => {
-    const nextStatus: WorkflowStatus = workflowConfig.enablePrePublish ? "prepublished" : "published"
-    updateContent(item.id, { workflowStatus: nextStatus, updatedBy: "业务/市场负责人" })
-    onAddAuditLog(`业务/市场负责人恢复 ${item.sourceCarName} 的发布流程`)
   }
 
   const createNewVersion = (item: MiniAppContent) => {
@@ -283,6 +415,44 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
     onAddAuditLog(`内容运营专员基于 ${item.sourceCarName} 发布版本创建新稿`)
   }
 
+  const createNewContent = () => {
+    const id = `c${Date.now()}`
+    const draft: MiniAppContent = {
+      id,
+      sourceCarId: "",
+      sourceCarName: "",
+      pageType: "车型页",
+      title: "",
+      subtitle: "",
+      highlights: "",
+      description: "",
+      ctaText: "立即预约试驾",
+      scheduledPublishAt: "",
+      imageUrls: [],
+      workflowStatus: "draft",
+      updatedBy: "内容运营专员",
+      updatedAt: nowString(),
+    }
+    setContents((prev) => [draft, ...prev])
+    setSelectedId(id)
+    setViewMode("editor")
+    onAddAuditLog("内容运营专员新增小程序内容草稿")
+  }
+
+  const deleteContent = (item: MiniAppContent) => {
+    if (!window.confirm(`确认删除 ${item.sourceCarName || "当前草稿"} 吗？`)) return
+
+    setContents((prev) => {
+      const next = prev.filter((content) => content.id !== item.id)
+      if (next.length > 0) {
+        setSelectedId(next[0].id)
+      }
+      return next
+    })
+    setViewMode("list")
+    onAddAuditLog(`内容运营专员删除 ${item.sourceCarName || "未命名"} 内容草稿`)
+  }
+
   const addImage = (item: MiniAppContent) => {
     const next = newImageUrl.trim()
     if (!next) return
@@ -298,24 +468,10 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
     const actions: React.ReactNode[] = []
 
     if (canEdit) {
-      if (item.workflowStatus === "draft" || item.workflowStatus === "rejected" || item.workflowStatus === "recalled") {
+      if (item.workflowStatus === "draft") {
         actions.push(
           <Button key="submit" size="sm" variant="outline" onClick={() => submitForReview(item)}>
-            <Send className="mr-1 h-3.5 w-3.5" />{item.workflowStatus === "draft" ? "提交审核" : "重新提审"}
+            <Send className="mr-1 h-3.5 w-3.5" />提交审核
-          </Button>
-        )
-      }
-      if (item.workflowStatus === "pending") {
-        actions.push(
-          <Button key="withdraw" size="sm" variant="outline" onClick={() => withdrawReview(item)}>
-            <Undo2 className="mr-1 h-3.5 w-3.5" />撤回提审
-          </Button>
-        )
-      }
-      if (item.workflowStatus === "prepublished") {
-        actions.push(
-          <Button key="publish" size="sm" variant="outline" onClick={() => publish(item)}>
-            <Upload className="mr-1 h-3.5 w-3.5" />发布
           </Button>
         )
       }
@@ -329,7 +485,7 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
     }
 
     if (canApprove) {
-      if (item.workflowStatus === "pending") {
+      if (item.workflowStatus === "prepublished") {
         actions.push(
           <Button key="approve" size="sm" variant="outline" onClick={() => approve(item)}>
             <ShieldCheck className="mr-1 h-3.5 w-3.5" />通过
@@ -341,32 +497,23 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
           </Button>
         )
       }
-      if (workflowConfig.allowRecall && item.workflowStatus === "published") {
-        actions.push(
-          <Button key="recall" size="sm" variant="outline" onClick={() => recall(item)}>
-            <Undo2 className="mr-1 h-3.5 w-3.5" />撤回
-          </Button>
-        )
-      }
-      if (item.workflowStatus === "recalled") {
-        actions.push(
-          <Button key="revive" size="sm" variant="outline" onClick={() => revive(item)}>
-            <Upload className="mr-1 h-3.5 w-3.5" />恢复流程
-          </Button>
-        )
-      }
     }
 
+    if (!canApprove) {
       actions.push(
         <Button key="detail" size="sm" variant="ghost" onClick={() => { setSelectedId(item.id); setViewMode("editor") }}>
           <Eye className="mr-1 h-3.5 w-3.5" />详情
         </Button>
       )
+    }
 
     return actions
   }
 
   if (viewMode === "editor" && selected) {
+    const isNewContent = !selected.sourceCarId
+    const canResetFromSource = Boolean(selected.sourceCarId && SOURCE_SNAPSHOTS[selected.sourceCarId])
+    const previewHeroImage = selected.imageUrls[0]
     const highlights = selected.highlights
       .split("\n")
       .map((s) => s.trim())
@@ -398,7 +545,54 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
             <CardContent className="space-y-4">
               <div className="grid gap-2">
                 <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">来源车型</label>
+                {isNewContent && canEdit ? (
+                  <select
+                    className="h-10 rounded-lg border border-input bg-background px-3 text-sm"
+                    value={selected.sourceCarId}
+                    onChange={(e) => {
+                      const nextId = e.target.value
+                      const option = SOURCE_CAR_OPTIONS.find((item) => item.id === nextId)
+                      const snapshot = SOURCE_SNAPSHOTS[nextId]
+                      updateContent(selected.id, {
+                        sourceCarId: nextId,
+                        sourceCarName: option?.name ?? "",
+                        title: snapshot?.title ?? selected.title,
+                        subtitle: snapshot?.subtitle ?? selected.subtitle,
+                        highlights: snapshot?.highlights ?? selected.highlights,
+                        description: snapshot?.description ?? selected.description,
+                        ctaText: snapshot?.ctaText ?? selected.ctaText,
+                        imageUrls: snapshot?.imageUrls ?? selected.imageUrls,
+                      })
+                      if (snapshot) {
+                        onAddAuditLog(`内容运营专员选择来源车型 ${option?.name ?? nextId} 并载入官网基线内容`)
+                      }
+                    }}
+                  >
+                    <option value="">请选择来源车型</option>
+                    {SOURCE_CAR_OPTIONS.map((option) => (
+                      <option key={option.id} value={option.id}>{option.name}</option>
+                    ))}
+                  </select>
+                ) : (
                   <Input value={selected.sourceCarName} disabled />
+                )}
+              </div>
+
+              <div className="grid gap-2">
+                <label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">页面类型</label>
+                {isNewContent && canEdit ? (
+                  <select
+                    className="h-10 rounded-lg border border-input bg-background px-3 text-sm"
+                    value={selected.pageType}
+                    onChange={(e) => updateContent(selected.id, { pageType: e.target.value as MiniAppContent["pageType"] })}
+                  >
+                    <option value="车型页">车型页</option>
+                    <option value="活动页">活动页</option>
+                    <option value="专题页">专题页</option>
+                  </select>
+                ) : (
+                  <Input value={selected.pageType} disabled />
+                )}
               </div>
 
               <div className="grid gap-2">
@@ -468,27 +662,47 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
                 </div>
               </div>
 
-              <div className="flex gap-2 pt-2">
+              {pendingResetPatch[selected.id] && (
+                <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
+                  已暂存“重置为官网源数据”，请点击“保存草稿”生效并回到草稿状态。
+                </div>
+              )}
+
+              <div className="flex items-center justify-between gap-3 pt-2">
+                <div className="flex gap-2">
                   <Button variant="outline" disabled={!canEdit} onClick={() => saveDraft(selected)}>
                     <Pencil className="mr-1 h-3.5 w-3.5" />保存草稿
                   </Button>
-                <Button disabled={!canEdit} onClick={() => submitForReview(selected)}>
+                  <Button disabled={!canEdit || selected.workflowStatus !== "draft"} onClick={() => submitForReview(selected)}>
                     <Send className="mr-1 h-3.5 w-3.5" />提交审核
                   </Button>
                 </div>
+                <div className="flex gap-2">
+                  <Button variant="outline" disabled={!canEdit || !canResetFromSource} onClick={() => stageResetFromSource(selected)}>
+                    <RotateCcw className="mr-1 h-3.5 w-3.5" />重置
+                  </Button>
+                  <Button variant="outline" disabled={!canEdit} onClick={() => deleteContent(selected)}>
+                    <Trash2 className="mr-1 h-3.5 w-3.5" />删除
+                  </Button>
+                </div>
+              </div>
             </CardContent>
           </Card>
 
           <Card className="border-none shadow-sm bg-white">
             <CardHeader>
               <CardTitle className="text-lg font-bold">小程序预览（手机窗口）</CardTitle>
-              <CardDescription>按钮上方展示预约试驾表单视觉区（仅演示，不提交）。</CardDescription>
+              <CardDescription>按钮上方展示预约试驾表单视觉区（仅演示，不提交；真实留资将直接进入企业 CRM）。</CardDescription>
             </CardHeader>
             <CardContent className="flex justify-center">
               <div className="w-[360px] rounded-[28px] border border-gray-200 bg-white shadow-2xl overflow-hidden">
                 <div className="h-9 bg-black text-white px-4 flex items-center text-[10px] tracking-[0.18em] uppercase">Audi</div>
                 <div className="relative">
-                  <img src={selected.imageUrls[0]} alt={selected.title} className="h-48 w-full object-cover" />
+                  {previewHeroImage ? (
+                    <img src={previewHeroImage} alt={selected.title} className="h-48 w-full object-cover" />
+                  ) : (
+                    <div className="flex h-48 w-full items-center justify-center bg-gray-100 text-xs text-gray-500">请先添加图片素材</div>
+                  )}
                   <div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" />
                   <div className="absolute left-4 right-4 bottom-3 text-white">
                     <p className="text-lg font-bold tracking-tight">{selected.title}</p>
@@ -548,7 +762,7 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
                     <label className="flex items-start gap-2 text-[11px] leading-5 text-gray-600">
                       <input type="checkbox" className="mt-0.5" />
                       <span>
-                        我已阅读并同意《个人信息保护政策》，授权奥迪及授权经销商与我联系。
+                        我已阅读并同意《个人信息保护政策》，授权奥迪及授权经销商与我联系。信息提交后将直接进入企业 CRM，本平台不留存潜客数据。
                       </span>
                     </label>
                   </div>
@@ -570,20 +784,37 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1">
           <h1 className="text-3xl font-bold tracking-tight">小程序内容库</h1>
-          <p className="text-muted-foreground">集中管理编辑、审核、保存和发布后的内容版本。</p>
+          <p className="text-muted-foreground">集中管理内容模板与内容版本。</p>
         </div>
       </div>
 
       <Card className="border-none shadow-sm bg-white">
         <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
               <CardTitle className="text-lg font-bold">内容版本列表</CardTitle>
-          <CardDescription>与官网车型源数据分离，避免同步数据和发布内容混用。</CardDescription>
+              <CardDescription>与官网素材巡检数据分离，避免人工周更任务和发布内容混用。</CardDescription>
+            </div>
+            <Button onClick={createNewContent} className="bg-audi-black hover:bg-audi-dark-gray text-white">
+              <Pencil className="mr-1 h-3.5 w-3.5" />新增
+            </Button>
+          </div>
+          <div className="flex items-center gap-2 w-full max-w-sm">
+            <Search className="h-4 w-4 text-muted-foreground absolute ml-3" />
+            <Input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="搜索官网车型名称或待处理项..."
+              className="pl-9 bg-gray-50/50 border-none"
+            />
+          </div>
         </CardHeader>
         <CardContent>
           <Table>
             <TableHeader>
               <TableRow className="hover:bg-transparent border-b border-gray-100">
                 <TableHead className="font-bold text-audi-black">来源车型</TableHead>
+                <TableHead className="font-bold text-audi-black">页面类型</TableHead>
                 <TableHead className="font-bold text-audi-black">内容标题</TableHead>
                 <TableHead className="font-bold text-audi-black">状态</TableHead>
                 <TableHead className="font-bold text-audi-black">最近更新</TableHead>
@@ -591,12 +822,15 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
               </TableRow>
             </TableHeader>
             <TableBody>
-              {contents.map((item) => (
+              {pagedContents.map((item) => (
                 <TableRow key={item.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
                   <TableCell>
                     <p className="font-medium">{item.sourceCarName}</p>
                     <p className="text-xs text-muted-foreground">{item.sourceCarId}</p>
                   </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{item.pageType}</Badge>
+                  </TableCell>
                   <TableCell className="font-medium">{item.title}</TableCell>
                   <TableCell>
                     <Badge variant="outline" className={workflowBadgeClass(item.workflowStatus)}>
@@ -614,6 +848,25 @@ export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog,
               ))}
             </TableBody>
           </Table>
+
+          <div className="mt-4 flex items-center justify-between border-t pt-4">
+            <p className="text-xs text-muted-foreground">每页 7 条，共 10 页</p>
+            <div className="flex items-center gap-1">
+              <Button size="sm" variant="outline" disabled>上一页</Button>
+              {Array.from({ length: listTotalPages }, (_, index) => (
+                <Button
+                  key={`mini-page-${index + 1}`}
+                  size="sm"
+                  variant={index + 1 === listPage ? "default" : "outline"}
+                  className={index + 1 === listPage ? "bg-audi-black hover:bg-audi-dark-gray text-white" : ""}
+                  disabled
+                >
+                  {index + 1}
+                </Button>
+              ))}
+              <Button size="sm" variant="outline" disabled>下一页</Button>
+            </div>
+          </div>
         </CardContent>
       </Card>
     </div>

audi-content-portal/src/components/layout/AppSidebar.tsx

@@ -1,9 +1,7 @@
 import * as React from "react"
 import { 
-  LayoutDashboard, 
   Car, 
   NotebookPen,
-  Users, 
   UserCog,
   Settings, 
   LogOut,
@@ -23,15 +21,11 @@ import {
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar"
+import { LogoIconOnly } from "./Logo"
 
 const navItems = [
   {
-    title: "仪表盘",
+    title: "官网车型库",
-    icon: LayoutDashboard,
-    id: "dashboard",
-  },
-  {
-    title: "车型库",
     icon: Car,
     id: "car-library",
   },
@@ -40,11 +34,6 @@ const navItems = [
     icon: NotebookPen,
     id: "mini-content",
   },
-  {
-    title: "潜客管理",
-    icon: Users,
-    id: "leads",
-  },
   {
     title: "用户与权限",
     icon: UserCog,
@@ -66,16 +55,25 @@ export function AppSidebar({
 }) {
   return (
     <Sidebar collapsible="icon">
-      <SidebarHeader className="border-b border-sidebar-border/50 py-6">
+      <SidebarHeader className="border-b border-sidebar-border/50">
-        <div className="flex items-center gap-3 px-2">
+        {/* Expanded: full logo banner */}
-          <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-audi-red text-white">
+        <div className="group-data-[collapsible=icon]:hidden">
-            <span className="text-xs font-bold tracking-tighter">A</span>
+          <div className="bg-black px-4 py-3">
+            <img
+              src="/images/audi_logo.png"
+              alt="Audi"
+              className="h-7 w-auto object-contain"
+            />
           </div>
-          <div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
+          <div className="px-4 py-2">
-            <span className="text-sm font-bold tracking-[0.15em] uppercase truncate">Audi Portal</span>
+            <p className="text-[11px] font-semibold text-gray-800 leading-tight tracking-wide">Rednote Mini App</p>
-            <span className="text-[10px] text-muted-foreground tracking-widest uppercase truncate">Smart Operations</span>
+            <p className="text-[10px] text-gray-400 leading-tight tracking-widest uppercase">Backend Portal</p>
           </div>
         </div>
+        {/* Collapsed: icon only */}
+        <div className="hidden group-data-[collapsible=icon]:flex justify-center py-3">
+          <LogoIconOnly />
+        </div>
       </SidebarHeader>
       <SidebarContent>
         <SidebarGroup>

audi-content-portal/src/components/layout/Logo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export const Logo: React.FC = () => {
+  return (
+    <div className="flex items-center gap-3">
+      {/* Black badge with Audi logo PNG */}
+      <div className="flex h-10 w-16 items-center justify-center rounded-sm bg-black px-2 shrink-0">
+        <img
+          src="/images/audi_logo.png"
+          alt="Audi"
+          className="h-6 w-auto object-contain"
+        />
+      </div>
+
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[13px] font-bold text-gray-900 leading-tight tracking-wide">Audi</span>
+        <span className="text-[10px] text-gray-500 leading-tight tracking-wider uppercase">Rednote Mini App Backend</span>
+      </div>
+    </div>
+  );
+};
+
+export const LogoIconOnly: React.FC = () => (
+  <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-black">
+    <img
+      src="/images/audi_logo.png"
+      alt="Audi"
+      className="h-5 w-auto object-contain"
+    />
+  </div>
+);

audi-content-portal/src/components/settings/SystemSettings.tsx

@@ -1,3 +1,4 @@
+import * as React from "react"
 import { Settings2 } from "lucide-react"
 
 import type { RoleView, WorkflowConfig } from "@/App"
@@ -25,7 +26,7 @@ export function SystemSettings({
     <div className="flex flex-col gap-6 p-8">
       <div className="flex flex-col gap-1">
         <h1 className="text-3xl font-bold tracking-tight">系统设置</h1>
-        <p className="text-muted-foreground">管理角色视角、审核发布策略与同步规则。</p>
+        <p className="text-muted-foreground">管理角色视角、可选发布能力、私有云账号与导出迁移准备。</p>
       </div>
 
       <div className="grid gap-6 lg:grid-cols-2">
@@ -58,8 +59,8 @@ export function SystemSettings({
 
         <Card className="border-none shadow-sm bg-white">
           <CardHeader>
-            <CardTitle className="text-lg font-bold">发布策略</CardTitle>
+            <CardTitle className="text-lg font-bold">可选发布能力</CardTitle>
-            <CardDescription>覆盖预发布、撤回与发布时间策略。</CardDescription>
+            <CardDescription>以下能力用于展示成熟平台的扩展性，均不作为本期上线阻断项。</CardDescription>
           </CardHeader>
           <CardContent className="space-y-3 text-sm">
             <div className="flex items-center justify-between rounded-lg border p-3">
@@ -135,35 +136,16 @@ export function SystemSettings({
 
         <Card className="border-none shadow-sm bg-white">
           <CardHeader>
-            <CardTitle className="text-lg font-bold">内容与同步规则</CardTitle>
+            <CardTitle className="text-lg font-bold">官网周更规则</CardTitle>
-            <CardDescription>配置字段模板与同步任务策略。</CardDescription>
+            <CardDescription>当前口径为每周人工巡检和人工更新，不展示自动日更能力。</CardDescription>
           </CardHeader>
           <CardContent className="space-y-3 text-sm">
             <div className="grid gap-2">
-              <span className="text-muted-foreground">同步频率</span>
+              <span className="text-muted-foreground">执行频率</span>
-              <div className="flex gap-2">
+              <Badge variant="outline" className="w-fit">固定为每周人工巡检</Badge>
-                <Button
-                  size="sm"
-                  variant={workflowConfig.syncFrequency === "daily" ? "default" : "outline"}
-                  onClick={() =>
-                    onWorkflowConfigChange({ ...workflowConfig, syncFrequency: "daily" })
-                  }
-                >
-                  每日
-                </Button>
-                <Button
-                  size="sm"
-                  variant={workflowConfig.syncFrequency === "weekly" ? "default" : "outline"}
-                  onClick={() =>
-                    onWorkflowConfigChange({ ...workflowConfig, syncFrequency: "weekly" })
-                  }
-                >
-                  每周
-                </Button>
-              </div>
             </div>
             <div className="grid gap-2">
-              <span className="text-muted-foreground">同步执行时间</span>
+              <span className="text-muted-foreground">建议执行时间</span>
               <Input
                 type="time"
                 value={workflowConfig.syncExecutionTime}
@@ -176,7 +158,7 @@ export function SystemSettings({
               />
             </div>
             <div className="grid gap-2">
-              <span className="text-muted-foreground">失败重试次数</span>
+              <span className="text-muted-foreground">异常重试次数</span>
               <Input
                 type="number"
                 min={0}
@@ -191,7 +173,7 @@ export function SystemSettings({
               />
             </div>
             <div className="flex items-center justify-between rounded-lg border p-3">
-              <span>同步后人工确认</span>
+              <span>更新后人工确认</span>
               <Button
                 size="sm"
                 variant={workflowConfig.manualConfirmSync ? "default" : "outline"}
@@ -206,11 +188,53 @@ export function SystemSettings({
               </Button>
             </div>
             <p className="text-xs text-muted-foreground">
-              需要确认：同步完成后进入待确认队列，由项目与运维负责人核查差异摘要并手动放行。
+              需要确认：周更完成后进入待确认队列，由项目与运维负责人核查差异摘要并手动放行。
             </p>
           </CardContent>
         </Card>
 
+        <Card className="border-none shadow-sm bg-white">
+          <CardHeader>
+            <CardTitle className="text-lg font-bold">私有云账号与访问</CardTitle>
+            <CardDescription>展示平台部署和后台登录的基础准备项。</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm">
+            <div className="grid gap-2">
+              <span className="text-muted-foreground">后台访问地址</span>
+              <Input defaultValue="https://portal.audi-private-cloud.example" />
+            </div>
+            <div className="grid gap-2">
+              <span className="text-muted-foreground">账号开通原则</span>
+              <Input defaultValue="按角色开通账号，最小权限访问" />
+            </div>
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <span>专有云环境状态</span>
+              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">已纳入部署方案</Badge>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-none shadow-sm bg-white">
+          <CardHeader>
+            <CardTitle className="text-lg font-bold">导出与迁移准备</CardTitle>
+            <CardDescription>用于说明内容平台后续迁移到 Audi 其他平台时的交接能力。</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm">
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <span>内容全量导出</span>
+              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">支持</Badge>
+            </div>
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <span>素材打包导出</span>
+              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">支持</Badge>
+            </div>
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <span>配置与日志交接</span>
+              <Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200">支持</Badge>
+            </div>
+          </CardContent>
+        </Card>
+
         <Card className="border-none shadow-sm bg-white">
           <CardHeader>
             <CardTitle className="text-lg font-bold">变更与审计</CardTitle>

audi-content-portal/src/components/users/UserAccessManagement.tsx

@@ -26,12 +26,10 @@ type UserRecord = {
 }
 
 type PermissionKey =
-  | "dashboard.view"
   | "source.sync"
   | "content.edit"
   | "content.approve"
   | "content.publish"
-  | "leads.manage"
   | "settings.manage"
   | "users.manage"
 
@@ -76,12 +74,10 @@ const INITIAL_USERS: UserRecord[] = [
 ]
 
 const PERMISSION_LABEL: Record<PermissionKey, string> = {
-  "dashboard.view": "查看仪表盘",
+  "source.sync": "官网车型库",
-  "source.sync": "车型同步",
   "content.edit": "内容编辑",
   "content.approve": "内容审核",
   "content.publish": "内容发布",
-  "leads.manage": "潜客管理",
   "settings.manage": "系统设置",
   "users.manage": "用户与权限管理",
 }
@@ -90,26 +86,21 @@ const INITIAL_ROLE_PERMISSIONS: RolePermission[] = [
   {
     roleName: "业务/市场负责人",
     permissions: [
-      "dashboard.view",
       "content.approve",
       "content.publish",
-      "leads.manage",
     ],
   },
   {
     roleName: "内容运营专员",
     permissions: [
-      "dashboard.view",
       "source.sync",
       "content.edit",
       "content.publish",
-      "leads.manage",
     ],
   },
   {
     roleName: "项目与运维负责人",
     permissions: [
-      "dashboard.view",
       "source.sync",
       "settings.manage",
       "users.manage",
@@ -118,12 +109,10 @@ const INITIAL_ROLE_PERMISSIONS: RolePermission[] = [
 ]
 
 const PERMISSION_COLUMNS: PermissionKey[] = [
-  "dashboard.view",
   "source.sync",
   "content.edit",
   "content.approve",
   "content.publish",
-  "leads.manage",
   "settings.manage",
   "users.manage",
 ]
@@ -168,7 +157,7 @@ export function UserAccessManagement() {
       <div className="flex items-center justify-between">
         <div className="flex flex-col gap-1">
           <h1 className="text-3xl font-bold tracking-tight">用户与权限管理</h1>
-          <p className="text-muted-foreground">集中维护账号状态、角色定义与权限边界。</p>
+          <p className="text-muted-foreground">集中维护后台账号状态、角色定义与内容平台权限边界。</p>
         </div>
         <Button className="bg-audi-black hover:bg-audi-dark-gray text-white px-6">新增用户</Button>
       </div>

audi-content-portal/vite.config.ts

@@ -11,6 +11,7 @@ const __dirname = dirname(__filename);
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, '.', '');
   return {
+    base: './',
     plugins: [react(), tailwindcss()],
     define: {
       'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),

audi-red-note-mini-app/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Google AI Studio App</title>
+    <title>Audi Rednote Mini App</title>
   </head>
   <body>
     <div id="root"></div>

audi-red-note-mini-app/src/App.tsx

@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useState, useEffect, FormEvent } from "react";
+import { useState, FormEvent } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { 
   ChevronRight, 
-  X, 
   Check, 
   Phone, 
   User, 
@@ -122,7 +121,7 @@ const PIPLPopup = ({ onAccept }: { onAccept: () => void }) => (
           我们将收集您的<b>姓名、手机号码及所在城市</b>，用于为您安排试驾、发送购车优惠及提供售后咨询服务。
         </p>
         <p>
-          我们承诺将严格遵守相关法律法规，保护您的个人隐私安全。未经您的许可，我们不会将您的信息提供给第三方。
+          您提交的信息将通过加密链路直接进入奥迪企业 CRM 系统，用于后续销售和服务跟进。当前小程序内容平台不保存您的潜客信息。
         </p>
       </div>
 
@@ -184,7 +183,7 @@ export default function App() {
     if (!validateForm()) return;
 
     setIsSubmitting(true);
-    // Simulate API call
+    // Simulate direct CRM submission
     await new Promise(resolve => setTimeout(resolve, 2000));
     setIsSubmitting(false);
     setIsSuccess(true);
@@ -216,7 +215,7 @@ export default function App() {
                   奥迪车型中心
                 </h1>
                 <p className="text-gray-500 max-w-2xl text-lg">
-                  探索奥迪全系车型，感受前瞻科技与极致工艺的完美融合。
+                  探索奥迪代表车型页面。当前 Demo 以若干代表页模板演示正式约 70 页的建设方式。
                 </p>
               </div>
 
@@ -302,7 +301,7 @@ export default function App() {
                     </div>
                     <h2 className="text-3xl font-bold mb-4">预约成功</h2>
                     <p className="text-gray-500 mb-8">
-                      您的预约信息已收到。我们的专属顾问将在 24 小时内与您联系，为您安排试驾体验。
+                      您的预约信息已直接提交至奥迪企业 CRM。我们的专属顾问将在 24 小时内与您联系，为您安排试驾体验。
                     </p>
                     <button onClick={handleBack} className="audi-button w-full">
                       返回车型中心
@@ -312,7 +311,7 @@ export default function App() {
                   <>
                     <div className="mb-10">
                       <h2 className="text-3xl font-bold tracking-tight mb-2">预约试驾</h2>
-                      <p className="text-gray-500">请填写以下信息，开启您的奥迪之旅。</p>
+                      <p className="text-gray-500">请填写以下信息。提交后将通过加密链路直接进入奥迪企业 CRM。</p>
                     </div>
 
                     <form onSubmit={handleSubmit} className="space-y-8">
@@ -374,7 +373,7 @@ export default function App() {
                         </div>
                         <div className="text-xs text-gray-500 leading-relaxed">
                           <label htmlFor="pipl">
-                            我已阅读并同意奥迪的 <span className="text-audi-black underline cursor-pointer">《个人信息保护政策》</span> 和 <span className="text-audi-black underline cursor-pointer">《隐私条款》</span>。本人同意奥迪及其授权经销商与我联系。
+                            我已阅读并同意奥迪的 <span className="text-audi-black underline cursor-pointer">《个人信息保护政策》</span> 和 <span className="text-audi-black underline cursor-pointer">《隐私条款》</span>。本人同意奥迪及其授权经销商与我联系，并同意信息直接提交至奥迪企业 CRM。
                           </label>
                           {errors.agreed && <p className="text-audi-red text-xs mt-1">{errors.agreed}</p>}
                         </div>

audi-red-note-mini-app2/.env.example

@@ -0,0 +1,9 @@
+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"

audi-red-note-mini-app2/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example

audi-red-note-mini-app2/README.md

@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/fa80108b-2bbe-4b49-8724-64574c59a597
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

audi-red-note-mini-app2/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Google AI Studio App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+

audi-red-note-mini-app2/metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "Audi A7L Details Page",
+  "description": "A high-fidelity mobile replication of the Audi A7L details page, featuring pioneer design elements and feature showcases.",
+  "requestFramePermissions": [],
+  "majorCapabilities": []
+}

audi-red-note-mini-app2/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000 --host=0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^1.29.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "lucide-react": "^0.546.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^6.2.0",
+    "express": "^4.21.2",
+    "dotenv": "^17.2.3",
+    "motion": "^12.23.24"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0",
+    "@types/express": "^4.17.21"
+  }
+}

audi-red-note-mini-app2/src/App.tsx

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ChevronLeft, MoreHorizontal, X } from 'lucide-react';
+import { motion } from 'motion/react';
+
+export default function App() {
+  return (
+    <div className="min-h-screen bg-white font-sans text-[#1a1a1a] flex flex-col max-w-md mx-auto relative overflow-hidden shadow-2xl">
+      {/* Status Bar */}
+      <div className="px-8 pt-4 pb-2 flex justify-between items-center text-sm font-semibold">
+        <span>9:41</span>
+        <div className="flex items-center gap-1.5">
+          <svg viewBox="0 0 24 24" className="w-4 h-4 fill-current">
+            <path d="M12 21l-12-18h24z" />
+          </svg>
+          <svg viewBox="0 0 24 24" className="w-4 h-4 fill-current">
+            <path d="M12 2L1 21h22L12 2z" />
+          </svg>
+          <div className="w-6 h-3 border border-current rounded-sm relative">
+            <div className="absolute inset-0.5 bg-current rounded-px w-3"></div>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation Bar */}
+      <header className="px-4 py-2 flex items-center justify-between sticky top-0 bg-white z-10">
+        <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+          <ChevronLeft className="w-6 h-6" />
+        </button>
+        <h1 className="text-[17px] font-medium">A7L详情</h1>
+        <div className="flex items-center bg-gray-50 border border-gray-200 rounded-full px-3 py-1.5 gap-3">
+          <MoreHorizontal className="w-5 h-5 text-gray-600" />
+          <div className="w-px h-4 bg-gray-300"></div>
+          <X className="w-5 h-5 text-gray-600" />
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 overflow-y-auto pb-32">
+        {/* Hero Title */}
+        <section className="pt-8 pb-6 text-center">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-[32px] font-bold tracking-tight mb-2"
+          >
+            先锋设计
+          </motion.h2>
+          <div className="w-12 h-[3px] bg-[#d51c2a] mx-auto"></div>
+        </section>
+
+        {/* Feature Sections */}
+        <div className="space-y-4 px-0">
+          {/* Feature 1 */}
+          <motion.section 
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            className="bg-[#f8f9fb] rounded-t-[32px] overflow-hidden"
+          >
+            <div className="aspect-[16/9] relative overflow-hidden">
+              <img 
+                src="https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&q=80&w=1000" 
+                alt="Audi A7L Front"
+                className="w-full h-full object-cover mix-blend-multiply"
+                referrerPolicy="no-referrer"
+              />
+            </div>
+            <div className="px-6 py-6">
+              <h3 className="text-[22px] font-normal text-gray-700">RS竞速套件</h3>
+              <div className="mt-6 border-b border-dotted border-gray-300 w-full"></div>
+            </div>
+          </motion.section>
+
+          {/* Feature 2 */}
+          <motion.section 
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            className="bg-[#f8f9fb] rounded-t-[32px] overflow-hidden"
+          >
+            <div className="aspect-[16/9] relative overflow-hidden">
+              <img 
+                src="https://images.unsplash.com/photo-1603584173870-7f3ca99a4741?auto=format&fit=crop&q=80&w=1000" 
+                alt="Audi A7L Side"
+                className="w-full h-full object-cover mix-blend-multiply"
+                referrerPolicy="no-referrer"
+              />
+            </div>
+            <div className="px-6 py-6">
+              <h3 className="text-[22px] font-normal text-gray-700">宽体低趴 超长轴距</h3>
+              <div className="mt-6 border-b border-dotted border-gray-300 w-full"></div>
+              
+              {/* Specs Preview */}
+              <div className="mt-4 flex justify-between text-sm text-gray-500 font-medium">
+                <span>长</span>
+                <span>宽</span>
+              </div>
+            </div>
+          </motion.section>
+        </div>
+      </main>
+
+      {/* Footer Action */}
+      <footer className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/80 backdrop-blur-md px-4 pt-2 pb-8 border-t border-gray-100">
+        <button className="w-full bg-[#1c1f23] text-white py-4 rounded-md text-[16px] font-medium active:scale-[0.98] transition-transform">
+          预约体验
+        </button>
+        {/* Home Indicator */}
+        <div className="mt-6 w-32 h-1.5 bg-black/80 mx-auto rounded-full"></div>
+      </footer>
+    </div>
+  );
+}

audi-red-note-mini-app2/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

audi-red-note-mini-app2/src/main.tsx

@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

audi-red-note-mini-app2/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

audi-red-note-mini-app2/vite.config.ts

@@ -0,0 +1,24 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, '.', '');
+  return {
+    plugins: [react(), tailwindcss()],
+    define: {
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modify—file watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+    },
+  };
+});

角色职责与用户旅程.md

@@ -4,10 +4,10 @@
 
 | 角色 | 主要职责 | 关键系统触点 | 关键输出 |
 |---|---|---|---|
-| 奥迪业务/市场负责人 | 制定内容方向与优先级、审核关键内容与合规性、确认月度运营结果与改进项 | 审核流程、月度报告评审、问题升级通道 | 审核结论、优先级决策、改进要求 |
+| 奥迪业务/市场负责人 | 制定内容方向与优先级、审核关键内容与合规性、确认月度运营结果与改进项 | 预览发布流程、月度报告评审、问题升级通道 | 审核结论、优先级决策、改进要求 |
-| 内容运营专员（供应商/联合团队） | 按周同步 JV 官网站点车型图片、执行内容上架/下架 | 内容同步任务、素材管理、发布窗口 | 同步任务结果、素材更新记录 |
+| 内容运营专员（供应商/联合团队） | 按设计稿搭建页面、执行内容编辑与发布、每周人工巡检 JV 官网素材 | 页面模板、内容库、周更任务、预览发布窗口 | 页面版本、周更结果、素材更新记录 |
-| 供应商项目与运维负责人 | 统筹项目计划、风险管理、周会/月报、跨团队沟通，保障门户可用性并负责监控告警、备份恢复与故障排查 | 项目状态看板、风险台账、会议机制、监控平台、日志系统、备份与回滚机制 | 周会纪要、月报、事件报告、故障处理记录、备份结果 |
+| 供应商项目与运维负责人 | 统筹项目计划、风险管理、周会/月报、跨团队沟通，保障门户可用性并负责监控告警、备份恢复、账号权限和迁移准备 | 项目状态、会议机制、监控平台、日志系统、备份与导出机制 | 周会纪要、月报、事件报告、账号维护记录、备份与导出结果 |
-| 终端用户（小红书用户） | 浏览车型信息、填写并提交联系表单 | 小程序门户页面、表单提交页、感谢页 | 留资数据、用户行为数据 |
+| 终端用户（小红书用户） | 浏览车型信息、填写并提交联系表单 | 小程序门户页面、表单提交页、感谢页 | 进入企业 CRM 的留资信息、用户行为数据 |
 
 ## 2. User Journey（按角色）
 
@@ -16,37 +16,41 @@
 2. 浏览车型信息、图片与关键信息。
 3. 对感兴趣车型填写联系信息表单并提交。
 4. 系统执行前端与后端校验。
-5. 校验成功：显示感谢页并写入数据库；校验失败：提示错误并允许修正后重提。
+5. 校验成功：显示感谢页并将数据直接提交至企业 CRM；校验失败：提示错误并允许修正后重提。
 
 ### 2.2 奥迪业务/市场负责人
 1. 接收待审核内容或关键变更通知。
-2. 从品牌一致性、合规性、业务目标角度完成审核。
+2. 从品牌一致性、合规性、业务目标角度完成审核；如本期平台未启用审批流，则重点参与关键内容确认。
 3. 对异常或高优先级事项进行决策与升级。
 4. 在月度评审中确认 KPI、问题闭环与下阶段计划。
 
 ### 2.3 内容运营专员
-1. 按周执行与 JV 官网车型图片同步任务。
+1. 按甲方设计稿搭建约 70 个页面，并维护页面模板和内容版本。
-2. 校验素材完整性、清晰度和品牌规范一致性。
+2. 每周人工巡检 JV 官网车型图片和文案变更。
-3. 对同步失败项进行重试与人工修复。
+3. 在 CMS 中完成素材替换、文案更新、新页面上架或旧页面下架。
-4. 记录每次同步结果并提交运营周报输入。
+4. 在发布前执行页面预览，并按平台能力选择直接发布或提请审核。
+5. 记录每次周更结果并提交运营周报输入。
 
 ### 2.4 供应商项目与运维负责人
 1. 制定项目里程碑与周计划，维护风险与问题清单。
 2. 组织周会，跟踪需求、进度、质量和依赖项。
-3. 持续监控应用、接口、数据库与云资源状态。
+3. 持续监控应用、接口、内容环境与云资源状态。
-4. 在告警触发后按优先级组织并执行响应流程。
+4. 负责平台登录账号、角色权限、备份校验和导出迁移准备。
-5. 工作日 08:30-17:30 提供服务支持，非服务时段待命；周末及法定节假日对 Critical/High 提供 7x24 待命。
+5. 在告警触发后按优先级组织并执行响应流程。
-6. 定期执行备份校验，确保源环境保留不少于 1 个月，并输出月报与事件报告。
+6. 工作日 08:30-17:30 提供服务支持，非服务时段待命；周末及法定节假日对 Critical/High 提供 7x24 待命。
+7. 定期执行备份校验，确保源环境保留不少于 1 个月，并输出月报与事件报告。
 
 ## 3. 关键跨角色协作链路
 
-1. 内容运营专员发起内容变更 -> 业务/市场负责人审核 -> 发布上线 -> 终端用户浏览与留资。
+1. 内容运营专员按设计稿搭建页面并预览 -> 业务/市场负责人在需要时审核关键内容 -> 发布上线 -> 终端用户浏览与留资。
-2. 内容运营专员执行周更同步 -> 业务/市场负责人确认品牌一致性。
+2. 内容运营专员执行每周人工巡检与内容更新 -> 业务/市场负责人确认品牌一致性和优先级。
-3. 项目与运维负责人监控告警并组织响应 -> 业务/市场负责人获知关键事件 -> 输出事件报告与改进项。
+3. 终端用户提交表单 -> 小程序将数据直接提交到企业 CRM -> 平台仅展示提交结果，不保留留资内容。
+4. 项目与运维负责人维护账号、备份和导出能力 -> 业务/市场负责人确认迁移或运营需求 -> 输出月报、事件报告和交接材料。
 
 ## 4. 建议的验收观察点
 
 1. 每个角色是否有明确可执行动作与系统入口。
-2. User Journey 是否覆盖主路径与错误路径（表单校验失败、同步失败、故障响应）。
+2. User Journey 是否覆盖主路径与错误路径（表单校验失败、CRM 提交失败、周更失败、故障响应）。
-3. 周会、月报、事件报告、知识转移是否有对应责任人和产出物。
+3. 页面建设、周会、月报、事件报告、知识转移是否有对应责任人和产出物。
-4. 值班与待命机制是否可被审计（时间、响应记录、处理结果）。
+4. 平台边界是否清晰：平台负责内容管理、预览、发布、账号和导出，不负责存储潜客数据。
+5. 值班与待命机制是否可被审计（时间、响应记录、处理结果）。