# 移动端页面文件生成器使用说明

## 概述

本功能为代码生成器新增了移动端页面文件生成能力，一个表可以生成4个移动端页面文件：

1. `index.config.ts` - 列表页面配置文件
2. `index.tsx` - 列表页面组件文件  
3. `add.config.ts` - 新增/编辑页面配置文件
4. `add.tsx` - 新增/编辑页面组件文件

## 新增的模板文件

在 `src/test/java/com/gxwebsoft/generator/templates/` 目录下新增了以下模板文件：

- `index.config.ts.btl` - 列表页面配置模板
- `index.tsx.btl` - 列表页面组件模板
- `add.config.ts.btl` - 新增/编辑页面配置模板
- `add.tsx.btl` - 新增/编辑页面组件模板

## 支持的生成器

目前已为以下生成器添加了移动端页面文件生成功能：

- `ShopGenerator.java` - 商城模块代码生成器
- `CmsGenerator.java` - CMS模块代码生成器

## 使用方法

### 1. 配置生成器

在对应的生成器类中配置需要生成的表名，例如在 `ShopGenerator.java` 中：

```java
private static final String[] TABLE_NAMES = new String[]{
    "shop_goods",  // 商品表
    "shop_category"  // 分类表
};
```

### 2. 运行生成器

运行对应的生成器主方法，例如：

```bash
# 运行商城模块生成器
java com.gxwebsoft.generator.ShopGenerator

# 运行CMS模块生成器  
java com.gxwebsoft.generator.CmsGenerator
```

### 3. 生成的文件位置

移动端页面文件将生成到以下目录：

```
{OUTPUT_LOCATION_UNIAPP}/src/{模块名}/{表名}/
├── index.config.ts    # 列表页面配置
├── index.tsx          # 列表页面组件
├── add.config.ts      # 新增/编辑页面配置
└── add.tsx            # 新增/编辑页面组件
```

例如，对于 `shop_goods` 表，会生成：

```
/Users/gxwebsoft/VUE/template-10550/src/shop/goods/
├── index.config.ts
├── index.tsx
├── add.config.ts
└── add.tsx
```

## 模板特性

### 列表页面 (index.tsx)

- 支持数据列表展示
- 支持删除操作
- 支持编辑跳转
- 支持默认选项设置
- 空数据状态处理

### 新增/编辑页面 (add.tsx)

- 自动根据表字段生成表单项
- 支持新增和编辑两种模式
- 自动处理字符串类型字段的输入组件选择
- 表单验证和提交处理

### 配置文件

- 自动根据表注释生成页面标题
- 统一的导航栏样式配置

## 自定义扩展

如需为其他生成器添加移动端页面文件生成功能，可参考 `ShopGenerator.java` 中的实现，在对应生成器的 `focList` 中添加以下配置：

```java
// 移动端页面文件生成配置
templatePath = TEMPLATES_DIR + "/index.config.ts.btl";
focList.add(new FileOutConfig(templatePath) {
  @Override
  public String outputFile(TableInfo tableInfo) {
    return OUTPUT_LOCATION_UNIAPP + OUTPUT_DIR_VUE
      + "/pages/" + pc.getModuleName() + "/"
      + tableInfo.getEntityPath() + "/" + "index.config.ts";
  }
});

// 其他3个文件的配置...
```

## 注意事项

1. 确保 `OUTPUT_LOCATION_UNIAPP` 路径配置正确
2. 生成前请备份现有文件，避免覆盖重要代码
3. 生成的代码可能需要根据具体业务需求进行调整
4. 模板中的API调用方法需要确保对应的API文件已生成