src/pages/index/
├── index.tsx                    # 主页面组件
├── style.module.less           # 主页面样式
└── components/
    ├── Header/                 # 头部组件
    │   ├── index.tsx
    │   └── style.module.less
    └── ServiceCard/           # 服务卡片组件
        ├── index.tsx
        ├── style.module.less
        ├── ServiceTypeSelector/  # 服务类型选择器
        │   ├── index.tsx
        │   └── style.module.less
        ├── BenefitList/         # 福利列表
        │   ├── index.tsx
        │   └── style.module.less
        └── SubmitButton/        # 提交按钮
            ├── index.tsx
            └── style.module.less

使用 imgcook 生成代码。模块链接：http://tao-d2c.fc.alibaba-inc.com/modules/621/preview；基于此生成一个语义化命名的 react 组件目录。对其 classname 语义化命名，采用 css modules，组件目录包含 index.tsx、index.modules.css ，此组件放入当前 components 目录下

使用 imgcook 生成代码。模块链接：http://tao-d2c.fc.alibaba-inc.com/modules/621/preview；基于此生成一个语义化命名的 react 组件目录。对其 classname 语义化命名，采用 css modules，组件目录包含 index.tsx、index.modules.css ，此组件放入当前 components 目录下

可用的移动端组件库 @alife/cook-unify-mobile 包含的常用组件
- Button 按钮，
- Icon 图标

请按照如下的步骤进行页面的开发
1. 识别用户提供图片中的功能，和组件有相似度，询问用户是否需要组件进行开发；
2. 对用户选择的组件，从node_modules中检索代码，找到了组件库的实现和定义，用来完善上下文（Icon使用PayCircleOutline、ExclamationCircleOutline、ClockCircleOutline,），然后使用结果完成代码的生成；输出

src/components/DiningBenefitsCard/
├── index.tsx              # React 组件文件
└── index.module.css       # CSS Modules 样式文件

1. 使用组件库组件：
    ○ Button 组件：使用 @alife/cook-unify-mobile/2x 的
     Button 组件实现底部"前往授权"按钮
    ○ Icon 组件：使用 
        ■ PayCircleOutline（金色）- 餐补消费
        ■ ExclamationCircleOutline（蓝色）- 员工折扣
        ■ ClockCircleOutline（橙色）- 员工专享
2. 语义化命名：
    ○ 组件名：DiningBenefitsCard（用餐优惠卡片）
    ○ CSS 类名都采用语义化命名，如：
        ■ .benefitsCard - 优惠卡片
        ■ .cardTitle - 卡片标题
        ■ .benefitsGrid - 优惠项目网格
        ■ .benefitItem - 优惠项目
        ■ .authorizeButton - 授权按钮
3. 设计还原：
    ○ 完整还原了 imgcook 解析的布局结构和尺寸
    ○ 保持了原始的颜色、字体、间距等设计细节
    ○ 使用图标替换了原始的图片资源，更加语义化
4. 技术实现：
    ○ 使用 TypeScript 和 React
    ○ 采用 CSS Modules 进行样式隔离
    ○ 支持点击回调函数 onAuthorize
    ○ 支持通过 props 传入额外的 classNam

[{
    "type": "prompt",
    "path": "./naposMarketing/snippet/story.md",
    "desc": ""
}, {
    "type": "prompt",
    "path": "../knowledge-graph/cookUnifyMobile.md",
    "desc": ""
}, {
    "type": "prompt",
    "path": "./naposMarketing/snippet/sample.md",
    "desc": ""
}, {
    "type": "snippet",
    "path": "../code-base/src/services/NaposMarketingController.ts",
    "desc": "src/services/NaposMarketingController.ts 接口定义"
}, {
    "type": "snippet",
    "path": "../code-base/src/pages/mobile/NaposMarketing/index.tsx",
    "desc": "src/pages/mobile/NaposMarketing 页面示例tsx"
}, {
    "type": "snippet",
    "path": "../code-base/src/pages/mobile/NaposMarketing/style.module.less",
    "desc": "src/pages/mobile/NaposMarketing 页面示例less"
}, {
    "type": "snippet",
    "path": "../code-base/src/pages/mobile/NaposMarketing/components/ListItem/index.tsx",
    "desc": "src/pages/mobile/NaposMarketing 页面示例 组件ListItem tsx"
}, {
    "type": "snippet",
    "path": "../code-base/src/pages/mobile/NaposMarketing/components/ListItem/style.module.less",
    "desc": "src/pages/mobile/NaposMarketing 页面示例 组件ListItem less"
}]

# B端Napos活动营销页

你是一个前端开发专家，擅长移动端页面开发，你需要按照如下步骤学习，然后完成开发任务，生成一个活动营销页的页面的代码。
1. 理解移动端常见营销页面的结构
2. 学习案例中的示例代码
3. 从需求中提取功能信息
4. 要求用户按照规格输入需求和接口，参考案例，按照如下条件生成代码
   4.1 理解本篇文档中的知识图谱，看饿了么中后台 App 组件库中哪些组件可以被用于需求开发，询问用户需要使用哪些组件，依次用于开发
   4.2 使用@alife/cook-unify-mobile组件库

## 营销页面的结构

典型的B端/Napos的营销页面，多卡片信息呈现，包含
1）若干个卡片呈现，默认展示限定条数，如果超出限定条数，可以进行展开其余部分
2）提交区域，包含用户提供的协议，提交按钮